11086277873

Committed 28 Sep 2024 06:59PM UTC coverage: 31.754% (+0.03%) from 31.726%

Build # 11086277873

Build Type

push

github

Committed by

web-flow

Commit Message

Merge pull request #9784 from ForumMagnum/wh-debate-remove-most-influential-posts-2024-09

[EA] Debate week UI: Remove 'most influential posts'

Run Details

5075 of 41652 branches covered (12.18%)

Branch coverage included in aggregate %.

1 of 4 new or added lines in 2 files covered. (25.0%)

1 existing line in 1 file now uncovered.

29568 of 67445 relevant lines covered (43.84%)

183.39 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

12.5

/packages/lesswrong/components/forumEvents/ForumEventPoll.tsx

import React, { useCallback, useMemo, useRef, useState } from "react";
import { Components, registerComponent } from "../../lib/vulcan-lib";
import classNames from "classnames";
import { useCurrentUser } from "../common/withUser";
import { useEventListener } from "../hooks/useEventListener";
import { gql, useMutation } from "@apollo/client";
import { useMulti } from "@/lib/crud/withMulti";
import { AnalyticsContext } from "@/lib/analyticsEvents";
import { useLoginPopoverContext } from "../hooks/useLoginPopoverContext";
import { useCurrentForumEvent } from "../hooks/useCurrentForumEvent";
import range from "lodash/range";
import sortBy from "lodash/sortBy";
import DeferRender from "../common/DeferRender";

export const POLL_MAX_WIDTH = 730;
const SLIDER_MAX_WIDTH = 1000;
const USER_IMAGE_SIZE = 24;

const styles = (theme: ThemeType) => ({
  root: {
    textAlign: 'center',
    color: theme.palette.text.alwaysWhite,
    fontFamily: theme.palette.fonts.sansSerifStack,
    padding: '10px 30px 40px 30px',
    margin: '0 auto',
    [`@media (max-width: ${POLL_MAX_WIDTH}px)`]: {
      display: 'none',
    },
  },
  question: {
    fontSize: 32,
    lineHeight: '110%',
    fontWeight: 700,
  },
  questionFootnote: {
    fontSize: 20,
    verticalAlign: 'super',
  },
  sliderRow: {
    display: 'flex',
    justifyContent: 'center',
    marginTop: 36,
  },
  sliderLineCol: {
    flexGrow: 1,
    maxWidth: SLIDER_MAX_WIDTH,
  },
  sparkline: {
    position: 'absolute',
    top: -48,
    width: '100%',
    '& .Sparkline-path': {
      stroke: `color-mix(in oklab, var(--forum-event-contrast), ${theme.palette.grey[500]})`,
    },
    '& .Sparkline-line': {
      stroke: 'var(--forum-event-background)',
    }
  },
  sliderLine: {
    position: 'relative',
    display: 'flex',
    alignItems: 'center',
    width: '100%',
    height: 2,
    backgroundColor: theme.palette.text.alwaysWhite,
  },
  sliderArrow: {
    transform: 'translateY(-11px)',
    stroke: theme.palette.text.alwaysWhite,
  },
  sliderArrowLeft: {
    marginRight: -15,
  },
  sliderArrowRight: {
    marginLeft: -15,
  },
  voteCluster: {
    position: 'relative',
    flexGrow: 1,
    height: USER_IMAGE_SIZE + 6,
    opacity: 0.3,
    zIndex: 4,
    '&:hover': {
      background: `radial-gradient(${theme.palette.text.alwaysBlack} 60%, transparent)`,
    }
  },
  voteClusterHoverOver: {
    display: 'flex',
    columnGap: '4px',
    padding: 10,
  },
  userVote: {
    position: 'absolute',
    top: -USER_IMAGE_SIZE/2,
    zIndex: 1,
  },
  currentUserVote: {
    opacity: 0.6,
    cursor: 'grab',
    zIndex: 10,
    touchAction: 'none',
    '&:hover': {
      opacity: 1,
    }
  },
  currentUserVotePlaceholder: {
    top: -(USER_IMAGE_SIZE/2) - 5,
  },
  currentUserVoteDragging: {
    cursor: 'grabbing',
  },
  currentUserVoteActive: {
    opacity: 1,
    '&:hover .ForumEventPoll-clearVote': {
      display: 'flex',
    }
  },
  voteTooltipHeading: {
    fontSize: 14,
    fontWeight: 700,
    lineHeight: '140%',
    marginBottom: 4,
  },
  voteTooltipBody: {
    fontSize: 14,
    fontWeight: 500,
    lineHeight: '140%',
  },
  userImage: {
    outline: `2px solid ${theme.palette.text.alwaysWhite}`,
  },
  userImageBoxShadow: {
    boxShadow: theme.palette.boxShadow.eaCard,
  },
  placeholderUserIcon: {
    // add a black background to the placeholder user circle icon
    background: `radial-gradient(${theme.palette.text.alwaysBlack} 50%, transparent 50%)`,
    color: theme.palette.text.alwaysWhite,
    fontSize: 34,
    borderRadius: '50%',
    // offset the additional 5px on the left added by the larger font size
    marginLeft: -5,
  },
  clearVote: {
    display: 'none',
    position: 'absolute',
    top: -5,
    right: -5,
    backgroundColor: `color-mix(in oklab, ${theme.palette.text.alwaysBlack} 65%, ${theme.palette.text.alwaysWhite} 35%)`,
    padding: 2,
    borderRadius: '50%',
    cursor: 'pointer',
    '&:hover': {
      backgroundColor: theme.palette.text.alwaysBlack,
    }
  },
  clearVoteIcon: {
    fontSize: 10,
  },
  sliderLabels: {
    display: 'flex',
    justifyContent: 'space-between',
    fontSize: 14,
    fontWeight: 500,
    lineHeight: 'normal',
    marginTop: 22,
  },
  viewResultsButton: {
    background: 'none',
    fontFamily: theme.palette.fonts.sansSerifStack,
    fontSize: 14,
    fontWeight: 500,
    lineHeight: 'normal',
    color: theme.palette.text.alwaysWhite,
    textDecoration: 'underline',
    textUnderlineOffset: '3px',
    padding: 0,
    '&:hover': {
      opacity: 0.7
    }
  },
});

export type ForumEventVoteData = {
  forumEventId: string,
  x: number,
  delta?: number,
  postIds?: string[]
}

export const addForumEventVoteQuery = gql`
  mutation AddForumEventVote($forumEventId: String!, $x: Float!, $delta: Float, $postIds: [String]) {
    AddForumEventVote(forumEventId: $forumEventId, x: $x, delta: $delta, postIds: $postIds)
  }
`;
const removeForumEventVoteQuery = gql`
  mutation RemoveForumEventVote($forumEventId: String!) {
    RemoveForumEventVote(forumEventId: $forumEventId)
  }
`;

const maxVotePos = (SLIDER_MAX_WIDTH - USER_IMAGE_SIZE) / SLIDER_MAX_WIDTH
// The default vote position is in the middle of the slider
const defaultVotePos = maxVotePos / 2

/**
 * Pull out the given user's vote in the forum event. Note that 0 is a valid vote.
 */
export const getForumEventVoteForUser = (
  event?: ForumEventsDisplay|null,
  user?: UsersMinimumInfo|null
): number|null => {
  return user ? (event?.publicData?.[user._id]?.x ?? null) : null
}

type ForumEventVoteDisplayCluster = {
  center: number,
  votes: ForumEventVoteDisplay[]
}
type ForumEventVoteDisplay = {
  x: number,
  user: UserOnboardingAuthor,
}

/**
 * Groups the given forum event votes into n equal-width clusters
 */
const clusterForumEventVotes = (
  voters?: UserOnboardingAuthor[],
  event?: ForumEventsDisplay|null,
  numClusters = 21
): ForumEventVoteDisplayCluster[] => {
  if (!voters || !event || !event.publicData) return []
  
  let votes = voters.map(voter => {
    const vote = event.publicData[voter._id].x
    return {
      x: vote,
      user: voter,
    }
  })
  votes = sortBy(votes, 'x')
  
  const clusterWidth = maxVotePos / numClusters
  const clusters: ForumEventVoteDisplayCluster[] = range(0, numClusters).map(i => ({
    center: (i + 0.5) * clusterWidth,
    votes: [],
  }))
  votes.forEach(vote => {
    const clusterIndex = Math.min(Math.floor(vote.x / clusterWidth), numClusters - 1)
    clusters[clusterIndex].votes.push(vote)
  })
  return clusters
}


const PollQuestion = ({event, classes}: {
  event: ForumEventsDisplay,
  classes: ClassesType<typeof styles>,
}) => {
  const {LWTooltip} = Components;

  // The poll question should prob be added to the ForumEvents schema,
  // but in the interest of time, for this event I will just hardcode it here
  return <div className={classes.question}>
    “AI welfare
    <LWTooltip
      title="
        By “AI welfare”, we mean the potential wellbeing (pain,
        pleasure, but also frustration, satisfaction etc...) of
        future artificial intelligence systems.
      "
    >
      <span className={classes.questionFootnote} style={{color: event.contrastColor ?? event.darkColor}}>
        1
      </span>
    </LWTooltip>{" "}
    should be an EA priority
    <LWTooltip
      title="
        By “EA priority” we mean that 5% of (unrestricted, i.e.
        open to EA-style cause prioritisation) talent and 5% of
        (unrestricted, i.e. open to EA-style cause prioritisation)
        funding should be allocated to this cause.
      "
    >
      <span className={classes.questionFootnote} style={{color: event.contrastColor ?? event.darkColor}}>
        2
      </span>
    </LWTooltip>”
  </div>
}

/**
 * This component is for forum events that have a poll.
 * Displays the question, a slider where the user can vote on a scale from "Disagree" to "Agree",
 * and lets the user view the poll results (votes are public).
 *
 * When a user updates their vote, we award points to posts that changed the user's mind.
 * If a postId is provided, we just give points to that post (ex. when on a post page).
 * Otherwise, we open a modal.
 */
export const ForumEventPoll = ({postId, hideViewResults, classes}: {
  postId?: string,
  hideViewResults?: boolean,
  classes: ClassesType<typeof styles>,
}) => {
  const {currentForumEvent: event, refetch} = useCurrentForumEvent()
  const {onSignup} = useLoginPopoverContext()
  const currentUser = useCurrentUser()

  const initialUserVotePos: number|null = getForumEventVoteForUser(event, currentUser)
  // The actual x position of the left side of the user's vote circle,
  // as a number between 0 and 0.976 (i.e. (SLIDER_MAX_WIDTH - USER_IMAGE_SIZE) / SLIDER_MAX_WIDTH)
  const [votePos, setVotePos] = useState<number>(initialUserVotePos ?? defaultVotePos)
  // The x position of the vote in the db
  const [currentUserVote, setCurrentUserVote] = useState<number|null>(initialUserVotePos)
  const hasVoted = currentUserVote !== null
  
  const sliderRef = useRef<HTMLDivElement|null>(null)
  // Whether or not the user is currently dragging their vote
  const [isDragging, setIsDragging] = useState(false)

  // Whether or not the poll results (i.e. other users' votes) are visible.
  // They are hidden until the user clicks on "view results".
  const [resultsVisible, setResultsVisible] = useState(false)
  const [voteCount, setVoteCount] = useState(event?.voteCount ?? 0)
  
  // Get profile image and display name for all other users who voted, to display on the slider
  const { results: voters } = useMulti({
    terms: {
      view: 'usersByUserIds',
      userIds: event?.publicData ?
        Object.keys(event?.publicData).filter(userId => userId !== currentUser?._id) :
        [],
      limit: 500,
    },
    collectionName: "Users",
    fragmentName: 'UserOnboardingAuthor',
    enableTotal: false,
    skip: !event?.publicData,
  })
  const voteClusters = useMemo(() => clusterForumEventVotes(voters, event), [voters, event])
  
  const [addVote] = useMutation(
    addForumEventVoteQuery,
    {errorPolicy: "all"},
  )
  const [removeVote] = useMutation(
    removeForumEventVoteQuery,
    {errorPolicy: "all"},
  )
  
  /**
   * When the user clicks the "x" icon, or when a logged out user tries to vote,
   * delete their vote data
   */
  const clearVote = useCallback(async (e?: React.PointerEvent) => {
    e?.stopPropagation()
    setVotePos(defaultVotePos)
    setCurrentUserVote(null)
    if (currentUser && event) {
      setVoteCount(count => count - 1)
      await removeVote({variables: {forumEventId: event._id}})
      refetch?.()
    }
  }, [setVotePos, setCurrentUserVote, currentUser, removeVote, event, refetch])
  
  /**
   * When the user pointerdowns on their vote circle, start dragging it
   */
  const startDragVote = useCallback((e: React.PointerEvent) => {
    e.preventDefault()
    setIsDragging(true)
  }, [setIsDragging])
  
  /**
   * When the user drags their vote, update its x position
   */
  const updateVotePos = useCallback((e: PointerEvent) => {
    if (!isDragging || !sliderRef.current) return
    
    // If the user's pointer is off to the left or right of the slider,
    // set the vote to the corresponding end of the slider
    const sliderRect = sliderRef.current.getBoundingClientRect()
    const sliderWidth = sliderRect.right - sliderRect.left
    if (e.clientX < sliderRect.left) {
      setVotePos(0)
      return
    } else if (e.clientX > sliderRect.right) {
      setVotePos(maxVotePos)
      return
    }
    
    const newVotePos = (e.clientX - sliderRect.left - (USER_IMAGE_SIZE/2)) / sliderWidth
    setVotePos(Math.min(Math.max(newVotePos, 0), maxVotePos))
  }, [isDragging, setVotePos])
  useEventListener("pointermove", updateVotePos)

  /**
   * When the user is done dragging their vote:
   * - If the user is logged out, reset their vote and open the login modal
   * - If this is the user's initial vote, save the vote
   * - If we have a postId (because we're on the post page), save the vote
   * - Otherwise (we're on the home page), open the post selection modal
   */
  const saveVotePos = useCallback(async () => {
    if (!isDragging || !event) return

    setIsDragging(false)
    // When a logged-in user is done dragging their vote, attempt to save it
    if (currentUser) {
      const voteData: ForumEventVoteData = {
        forumEventId: event._id,
        x: votePos,
      }
      if (!hasVoted) {
        setVoteCount(count => count + 1)
        setCurrentUserVote(votePos)
        await addVote({variables: voteData})
        refetch?.()
        return
      }
      const delta = votePos - (currentUserVote ?? defaultVotePos)
      if (delta) {
        voteData.delta = delta
        setCurrentUserVote(votePos)
        await addVote({variables: {
          ...voteData,
          ...(postId && {postIds: [postId]}),
        }})
        refetch?.()
      }
    }
    // When a logged-out user tries to vote, just show the login modal
    else {
      onSignup()
      void clearVote()
    }
  }, [
    isDragging,
    setIsDragging,
    hasVoted,
    currentUser,
    addVote,
    event,
    votePos,
    currentUserVote,
    postId,
    setCurrentUserVote,
    onSignup,
    clearVote,
    refetch
  ])
  useEventListener("pointerup", saveVotePos)

  const {ForumIcon, LWTooltip, UsersProfileImage, HoverOver, Sparkline} = Components;
  
  if (!event) return null

  return (
    <AnalyticsContext pageElementContext="forumEventPoll">
      <div className={classes.root}>
        <PollQuestion event={event} classes={classes} />

        <div className={classes.sliderRow}>
          <ForumIcon icon="ChevronLeft" className={classNames(classes.sliderArrow, classes.sliderArrowLeft)} />
          <div className={classes.sliderLineCol}>
            
            <div className={classes.sliderLine} ref={sliderRef}>
              {resultsVisible && voters && <div className={classes.sparkline}>
                <Sparkline max={maxVotePos} data={voters.map(v => event.publicData[v._id].x)} />
              </div>}
              {resultsVisible && voters && voters.map(user => {
                const vote = event.publicData[user._id]
                return <div key={user._id} className={classes.userVote} style={{left: `${vote.x * 100}%`}}>
                  <UsersProfileImage user={user} size={USER_IMAGE_SIZE} className={classes.userImage} />
                </div>
              })}
              {resultsVisible && voteClusters.map(cluster => {
                return <HoverOver
                  key={cluster.center}
                  title={
                    <div className={classes.voteClusterHoverOver}>
                      {cluster.votes.map(vote => (
                        <LWTooltip
                          key={vote.user._id}
                          title={<div className={classes.voteTooltipBody}>{vote.user.displayName}</div>}
                        >
                          <UsersProfileImage
                            user={vote.user}
                            size={USER_IMAGE_SIZE}
                            className={classNames(classes.userImage, classes.userImageBoxShadow)}
                          />
                        </LWTooltip>
                      ))}
                    </div>
                  }
                  placement="bottom"
                  clickable
                  className={classes.voteCluster}
                >
                  <div></div>
                </HoverOver>
              })}
              <div
                className={classNames(
                  classes.userVote,
                  classes.currentUserVote,
                  !currentUser && classes.currentUserVotePlaceholder,
                  isDragging && classes.currentUserVoteDragging,
                  hasVoted && classes.currentUserVoteActive
                )}
                onPointerDown={startDragVote}
                style={{left: `${votePos * 100}%`}}
              >
                <LWTooltip title={hasVoted ? <div className={classes.voteTooltipBody}>Drag to move</div> : <>
                    <div className={classes.voteTooltipHeading}>Click and drag to vote</div>
                    <div className={classes.voteTooltipBody}>Votes are non-anonymous and can be changed at any time</div>
                  </>}
                >
                  {currentUser ?
                    <UsersProfileImage user={currentUser} size={USER_IMAGE_SIZE} className={classes.userImage} /> :
                    <ForumIcon icon="UserCircle" className={classes.placeholderUserIcon} />
                  }
                  <div className={classes.clearVote} onPointerDown={clearVote}>
                    <ForumIcon icon="Close" className={classes.clearVoteIcon} />
                  </div>
                </LWTooltip>
              </div>
            </div>
            <div className={classes.sliderLabels}>
              <div>Disagree</div>
              <DeferRender ssr={false}>
                {!hideViewResults && !resultsVisible && <div>
                  {(voteCount > 0) && `${voteCount} vote${voteCount === 1 ? '' : 's'} so far. `}
                  {hasVoted ? 'Click and drag your avatar to change your vote, or ' : 'Place your vote or '}
                  <button className={classes.viewResultsButton} onClick={() => setResultsVisible(true)}>
                    view results
                  </button>
                </div>}
              </DeferRender>
              <div>Agree</div>
            </div>
          </div>
          <ForumIcon icon="ChevronRight" className={classNames(classes.sliderArrow, classes.sliderArrowRight)} />
        </div>

      </div>
    </AnalyticsContext>
  );
}

const ForumEventPollComponent = registerComponent(
  "ForumEventPoll",
  ForumEventPoll,
  {styles},
);

declare global {
  interface ComponentTypes {
    ForumEventPoll: typeof ForumEventPollComponent
  }
}

1	import React, { useCallback, useMemo, useRef, useState } from "react";	7✔
2	import { Components, registerComponent } from "../../lib/vulcan-lib";	1✔
3	import classNames from "classnames";	1✔
4	import { useCurrentUser } from "../common/withUser";	1✔
5	import { useEventListener } from "../hooks/useEventListener";	1✔
6	import { gql, useMutation } from "@apollo/client";	1✔
7	import { useMulti } from "@/lib/crud/withMulti";	1✔
8	import { AnalyticsContext } from "@/lib/analyticsEvents";	1✔
9	import { useLoginPopoverContext } from "../hooks/useLoginPopoverContext";	1✔
10	import { useCurrentForumEvent } from "../hooks/useCurrentForumEvent";	1✔
11	import range from "lodash/range";	1✔
12	import sortBy from "lodash/sortBy";	1✔
13	import DeferRender from "../common/DeferRender";	1✔
14
15	export const POLL_MAX_WIDTH = 730;	1✔
16	const SLIDER_MAX_WIDTH = 1000;	1✔
17	const USER_IMAGE_SIZE = 24;	1✔
18
19	const styles = (theme: ThemeType) => ({	1✔
20	root: {
21	textAlign: 'center',
22	color: theme.palette.text.alwaysWhite,
23	fontFamily: theme.palette.fonts.sansSerifStack,
24	padding: '10px 30px 40px 30px',
25	margin: '0 auto',
26	[`@media (max-width: ${POLL_MAX_WIDTH}px)`]: {
27	display: 'none',
28	},
29	},
30	question: {
31	fontSize: 32,
32	lineHeight: '110%',
33	fontWeight: 700,
34	},
35	questionFootnote: {
36	fontSize: 20,
37	verticalAlign: 'super',
38	},
39	sliderRow: {
40	display: 'flex',
41	justifyContent: 'center',
42	marginTop: 36,
43	},
44	sliderLineCol: {
45	flexGrow: 1,
46	maxWidth: SLIDER_MAX_WIDTH,
47	},
48	sparkline: {
49	position: 'absolute',
50	top: -48,
51	width: '100%',
52	'& .Sparkline-path': {
53	stroke: `color-mix(in oklab, var(--forum-event-contrast), ${theme.palette.grey[500]})`,
54	},
55	'& .Sparkline-line': {
56	stroke: 'var(--forum-event-background)',
57	}
58	},
59	sliderLine: {
60	position: 'relative',
61	display: 'flex',
62	alignItems: 'center',
63	width: '100%',
64	height: 2,
65	backgroundColor: theme.palette.text.alwaysWhite,
66	},
67	sliderArrow: {
68	transform: 'translateY(-11px)',
69	stroke: theme.palette.text.alwaysWhite,
70	},
71	sliderArrowLeft: {
72	marginRight: -15,
73	},
74	sliderArrowRight: {
75	marginLeft: -15,
76	},
77	voteCluster: {
78	position: 'relative',
79	flexGrow: 1,
80	height: USER_IMAGE_SIZE + 6,
81	opacity: 0.3,
82	zIndex: 4,
83	'&:hover': {
84	background: `radial-gradient(${theme.palette.text.alwaysBlack} 60%, transparent)`,
85	}
86	},
87	voteClusterHoverOver: {
88	display: 'flex',
89	columnGap: '4px',
90	padding: 10,
91	},
92	userVote: {
93	position: 'absolute',
94	top: -USER_IMAGE_SIZE/2,
95	zIndex: 1,
96	},
97	currentUserVote: {
98	opacity: 0.6,
99	cursor: 'grab',
100	zIndex: 10,
101	touchAction: 'none',
102	'&:hover': {
103	opacity: 1,
104	}
105	},
106	currentUserVotePlaceholder: {
107	top: -(USER_IMAGE_SIZE/2) - 5,
108	},
109	currentUserVoteDragging: {
110	cursor: 'grabbing',
111	},
112	currentUserVoteActive: {
113	opacity: 1,
114	'&:hover .ForumEventPoll-clearVote': {
115	display: 'flex',
116	}
117	},
118	voteTooltipHeading: {
119	fontSize: 14,
120	fontWeight: 700,
121	lineHeight: '140%',
122	marginBottom: 4,
123	},
124	voteTooltipBody: {
125	fontSize: 14,
126	fontWeight: 500,
127	lineHeight: '140%',
128	},
129	userImage: {
130	outline: `2px solid ${theme.palette.text.alwaysWhite}`,
131	},
132	userImageBoxShadow: {
133	boxShadow: theme.palette.boxShadow.eaCard,
134	},
135	placeholderUserIcon: {
136	// add a black background to the placeholder user circle icon
137	background: `radial-gradient(${theme.palette.text.alwaysBlack} 50%, transparent 50%)`,
138	color: theme.palette.text.alwaysWhite,
139	fontSize: 34,
140	borderRadius: '50%',
141	// offset the additional 5px on the left added by the larger font size
142	marginLeft: -5,
143	},
144	clearVote: {
145	display: 'none',
146	position: 'absolute',
147	top: -5,
148	right: -5,
149	backgroundColor: `color-mix(in oklab, ${theme.palette.text.alwaysBlack} 65%, ${theme.palette.text.alwaysWhite} 35%)`,
150	padding: 2,
151	borderRadius: '50%',
152	cursor: 'pointer',
153	'&:hover': {
154	backgroundColor: theme.palette.text.alwaysBlack,
155	}
156	},
157	clearVoteIcon: {
158	fontSize: 10,
159	},
160	sliderLabels: {
161	display: 'flex',
162	justifyContent: 'space-between',
163	fontSize: 14,
164	fontWeight: 500,
165	lineHeight: 'normal',
166	marginTop: 22,
167	},
168	viewResultsButton: {
169	background: 'none',
170	fontFamily: theme.palette.fonts.sansSerifStack,
171	fontSize: 14,
172	fontWeight: 500,
173	lineHeight: 'normal',
174	color: theme.palette.text.alwaysWhite,
175	textDecoration: 'underline',
176	textUnderlineOffset: '3px',
177	padding: 0,
178	'&:hover': {
179	opacity: 0.7
180	}
181	},
182	});
183
184	export type ForumEventVoteData = {
185	forumEventId: string,
186	x: number,
187	delta?: number,
188	postIds?: string[]
189	}
190
191	export const addForumEventVoteQuery = gql`	1✔
192	mutation AddForumEventVote($forumEventId: String!, $x: Float!, $delta: Float, $postIds: [String]) {
193	AddForumEventVote(forumEventId: $forumEventId, x: $x, delta: $delta, postIds: $postIds)
194	}
195	`;
196	const removeForumEventVoteQuery = gql`	1✔
197	mutation RemoveForumEventVote($forumEventId: String!) {
198	RemoveForumEventVote(forumEventId: $forumEventId)
199	}
200	`;
201
202	const maxVotePos = (SLIDER_MAX_WIDTH - USER_IMAGE_SIZE) / SLIDER_MAX_WIDTH	1✔
203	// The default vote position is in the middle of the slider
204	const defaultVotePos = maxVotePos / 2	1✔
205
206	/**
207	* Pull out the given user's vote in the forum event. Note that 0 is a valid vote.
208	*/
209	export const getForumEventVoteForUser = (	1✔
210	event?: ForumEventsDisplay\|null,
211	user?: UsersMinimumInfo\|null
212	): number\|null => {
213	return user ? (event?.publicData?.[user._id]?.x ?? null) : null	×
214	}
215
216	type ForumEventVoteDisplayCluster = {
217	center: number,
218	votes: ForumEventVoteDisplay[]
219	}
220	type ForumEventVoteDisplay = {
221	x: number,
222	user: UserOnboardingAuthor,
223	}
224
225	/**
226	* Groups the given forum event votes into n equal-width clusters
227	*/
228	const clusterForumEventVotes = (	1✔
229	voters?: UserOnboardingAuthor[],
230	event?: ForumEventsDisplay\|null,
231	numClusters = 21	×
232	): ForumEventVoteDisplayCluster[] => {
233	if (!voters \|\| !event \|\| !event.publicData) return []	×
234
235	let votes = voters.map(voter => {	×
236	const vote = event.publicData[voter._id].x	×
237	return {	×
238	x: vote,
239	user: voter,
240	}
241	})
242	votes = sortBy(votes, 'x')	×
243
244	const clusterWidth = maxVotePos / numClusters	×
245	const clusters: ForumEventVoteDisplayCluster[] = range(0, numClusters).map(i => ({	×
246	center: (i + 0.5) * clusterWidth,
247	votes: [],
248	}))
249	votes.forEach(vote => {	×
250	const clusterIndex = Math.min(Math.floor(vote.x / clusterWidth), numClusters - 1)	×
251	clusters[clusterIndex].votes.push(vote)	×
252	})
253	return clusters	×
254	}
255
256
257	const PollQuestion = ({event, classes}: {	1✔
258	event: ForumEventsDisplay,
259	classes: ClassesType<typeof styles>,
260	}) => {
261	const {LWTooltip} = Components;	×
262
263	// The poll question should prob be added to the ForumEvents schema,
264	// but in the interest of time, for this event I will just hardcode it here
265	return <div className={classes.question}>	×
266	“AI welfare
267	<LWTooltip
268	title="
269	By “AI welfare”, we mean the potential wellbeing (pain,
270	pleasure, but also frustration, satisfaction etc...) of
271	future artificial intelligence systems.
272	"
273	>
274	<span className={classes.questionFootnote} style={{color: event.contrastColor ?? event.darkColor}}>	×
275	1
276	</span>
277	</LWTooltip>{" "}
278	should be an EA priority
279	<LWTooltip
280	title="
281	By “EA priority” we mean that 5% of (unrestricted, i.e.
282	open to EA-style cause prioritisation) talent and 5% of
283	(unrestricted, i.e. open to EA-style cause prioritisation)
284	funding should be allocated to this cause.
285	"
286	>
287	<span className={classes.questionFootnote} style={{color: event.contrastColor ?? event.darkColor}}>	×
288	2
289	</span>
290	</LWTooltip>”
291	</div>
292	}
293
294	/**
295	* This component is for forum events that have a poll.
296	* Displays the question, a slider where the user can vote on a scale from "Disagree" to "Agree",
297	* and lets the user view the poll results (votes are public).
298	*
299	* When a user updates their vote, we award points to posts that changed the user's mind.
300	* If a postId is provided, we just give points to that post (ex. when on a post page).
301	* Otherwise, we open a modal.
302	*/
303	export const ForumEventPoll = ({postId, hideViewResults, classes}: {	1✔
304	postId?: string,
305	hideViewResults?: boolean,
306	classes: ClassesType<typeof styles>,
307	}) => {
308	const {currentForumEvent: event, refetch} = useCurrentForumEvent()	×
309	const {onSignup} = useLoginPopoverContext()	×
310	const currentUser = useCurrentUser()	×
311
312	const initialUserVotePos: number\|null = getForumEventVoteForUser(event, currentUser)	×
313	// The actual x position of the left side of the user's vote circle,
314	// as a number between 0 and 0.976 (i.e. (SLIDER_MAX_WIDTH - USER_IMAGE_SIZE) / SLIDER_MAX_WIDTH)
315	const [votePos, setVotePos] = useState<number>(initialUserVotePos ?? defaultVotePos)	×
316	// The x position of the vote in the db
317	const [currentUserVote, setCurrentUserVote] = useState<number\|null>(initialUserVotePos)	×
318	const hasVoted = currentUserVote !== null	×
319
320	const sliderRef = useRef<HTMLDivElement\|null>(null)	×
321	// Whether or not the user is currently dragging their vote
322	const [isDragging, setIsDragging] = useState(false)	×
323
324	// Whether or not the poll results (i.e. other users' votes) are visible.
325	// They are hidden until the user clicks on "view results".
326	const [resultsVisible, setResultsVisible] = useState(false)	×
327	const [voteCount, setVoteCount] = useState(event?.voteCount ?? 0)	×
328
329	// Get profile image and display name for all other users who voted, to display on the slider
330	const { results: voters } = useMulti({	×
331	terms: {
332	view: 'usersByUserIds',
333	userIds: event?.publicData ?	×
334	Object.keys(event?.publicData).filter(userId => userId !== currentUser?._id) :	×
335	[],
336	limit: 500,
337	},
338	collectionName: "Users",
339	fragmentName: 'UserOnboardingAuthor',
340	enableTotal: false,
341	skip: !event?.publicData,	×
342	})
343	const voteClusters = useMemo(() => clusterForumEventVotes(voters, event), [voters, event])	×
344
345	const [addVote] = useMutation(	×
346	addForumEventVoteQuery,
347	{errorPolicy: "all"},
348	)
349	const [removeVote] = useMutation(	×
350	removeForumEventVoteQuery,
351	{errorPolicy: "all"},
352	)
353
354	/**
355	* When the user clicks the "x" icon, or when a logged out user tries to vote,
356	* delete their vote data
357	*/
358	const clearVote = useCallback(async (e?: React.PointerEvent) => {	×
359	e?.stopPropagation()	×
360	setVotePos(defaultVotePos)	×
361	setCurrentUserVote(null)	×
362	if (currentUser && event) {	×
363	setVoteCount(count => count - 1)	×
364	await removeVote({variables: {forumEventId: event._id}})	×
365	refetch?.()	×
366	}
367	}, [setVotePos, setCurrentUserVote, currentUser, removeVote, event, refetch])
368
369	/**
370	* When the user pointerdowns on their vote circle, start dragging it
371	*/
372	const startDragVote = useCallback((e: React.PointerEvent) => {	×
373	e.preventDefault()	×
374	setIsDragging(true)	×
375	}, [setIsDragging])
376
377	/**
378	* When the user drags their vote, update its x position
379	*/
380	const updateVotePos = useCallback((e: PointerEvent) => {	×
381	if (!isDragging \|\| !sliderRef.current) return	×
382
383	// If the user's pointer is off to the left or right of the slider,
384	// set the vote to the corresponding end of the slider
385	const sliderRect = sliderRef.current.getBoundingClientRect()	×
386	const sliderWidth = sliderRect.right - sliderRect.left	×
387	if (e.clientX < sliderRect.left) {	×
388	setVotePos(0)	×
389	return	×
390	} else if (e.clientX > sliderRect.right) {	×
391	setVotePos(maxVotePos)	×
392	return	×
393	}
394
395	const newVotePos = (e.clientX - sliderRect.left - (USER_IMAGE_SIZE/2)) / sliderWidth	×
396	setVotePos(Math.min(Math.max(newVotePos, 0), maxVotePos))	×
397	}, [isDragging, setVotePos])
398	useEventListener("pointermove", updateVotePos)	×
399
400	/**
401	* When the user is done dragging their vote:
402	* - If the user is logged out, reset their vote and open the login modal
403	* - If this is the user's initial vote, save the vote
404	* - If we have a postId (because we're on the post page), save the vote
405	* - Otherwise (we're on the home page), open the post selection modal
406	*/
407	const saveVotePos = useCallback(async () => {	×
408	if (!isDragging \|\| !event) return	×
409
410	setIsDragging(false)	×
411	// When a logged-in user is done dragging their vote, attempt to save it
412	if (currentUser) {	×
413	const voteData: ForumEventVoteData = {	×
414	forumEventId: event._id,
415	x: votePos,
416	}
417	if (!hasVoted) {	×
418	setVoteCount(count => count + 1)	×
419	setCurrentUserVote(votePos)	×
420	await addVote({variables: voteData})	×
421	refetch?.()	×
422	return	×
423	}
424	const delta = votePos - (currentUserVote ?? defaultVotePos)	×
425	if (delta) {	×
426	voteData.delta = delta	×
427	setCurrentUserVote(votePos)	×
NEW 428	await addVote({variables: {	×
429	...voteData,
430	...(postId && {postIds: [postId]}),	×
431	}})
NEW 432	refetch?.()	×
433	}
434	}
435	// When a logged-out user tries to vote, just show the login modal
436	else {
437	onSignup()	×
438	void clearVote()	×
439	}
440	}, [
441	isDragging,
442	setIsDragging,
443	hasVoted,
444	currentUser,
445	addVote,
446	event,
447	votePos,
448	currentUserVote,
449	postId,
450	setCurrentUserVote,
451	onSignup,
452	clearVote,
453	refetch
454	])
455	useEventListener("pointerup", saveVotePos)	×
456
457	const {ForumIcon, LWTooltip, UsersProfileImage, HoverOver, Sparkline} = Components;	×
458
459	if (!event) return null	×
460
461	return (	×
462	<AnalyticsContext pageElementContext="forumEventPoll">
463	<div className={classes.root}>
464	<PollQuestion event={event} classes={classes} />
465
466	<div className={classes.sliderRow}>
467	<ForumIcon icon="ChevronLeft" className={classNames(classes.sliderArrow, classes.sliderArrowLeft)} />
468	<div className={classes.sliderLineCol}>
469
470	<div className={classes.sliderLine} ref={sliderRef}>
471	{resultsVisible && voters && <div className={classes.sparkline}>	×
472	<Sparkline max={maxVotePos} data={voters.map(v => event.publicData[v._id].x)} />	×
473	</div>}
474	{resultsVisible && voters && voters.map(user => {	×
475	const vote = event.publicData[user._id]	×
476	return <div key={user._id} className={classes.userVote} style={{left: `${vote.x * 100}%`}}>	×
477	<UsersProfileImage user={user} size={USER_IMAGE_SIZE} className={classes.userImage} />
478	</div>
479	})}
480	{resultsVisible && voteClusters.map(cluster => {	×
481	return <HoverOver	×
482	key={cluster.center}
483	title={
484	<div className={classes.voteClusterHoverOver}>
485	{cluster.votes.map(vote => (
486	<LWTooltip	×
487	key={vote.user._id}
488	title={<div className={classes.voteTooltipBody}>{vote.user.displayName}</div>}
489	>
490	<UsersProfileImage
491	user={vote.user}
492	size={USER_IMAGE_SIZE}
493	className={classNames(classes.userImage, classes.userImageBoxShadow)}
494	/>
495	</LWTooltip>
496	))}
497	</div>
498	}
499	placement="bottom"
500	clickable
501	className={classes.voteCluster}
502	>
503	<div></div>
504	</HoverOver>
505	})}
506	<div
507	className={classNames(
508	classes.userVote,
509	classes.currentUserVote,
510	!currentUser && classes.currentUserVotePlaceholder,	×
511	isDragging && classes.currentUserVoteDragging,	×
512	hasVoted && classes.currentUserVoteActive	×
513	)}
514	onPointerDown={startDragVote}
515	style={{left: `${votePos * 100}%`}}
516	>
517	<LWTooltip title={hasVoted ? <div className={classes.voteTooltipBody}>Drag to move</div> : <>	×
518	<div className={classes.voteTooltipHeading}>Click and drag to vote</div>
519	<div className={classes.voteTooltipBody}>Votes are non-anonymous and can be changed at any time</div>
520	</>}
521	>
522	{currentUser ?
523	<UsersProfileImage user={currentUser} size={USER_IMAGE_SIZE} className={classes.userImage} /> :	×
524	<ForumIcon icon="UserCircle" className={classes.placeholderUserIcon} />
525	}
526	<div className={classes.clearVote} onPointerDown={clearVote}>
527	<ForumIcon icon="Close" className={classes.clearVoteIcon} />
528	</div>
529	</LWTooltip>
530	</div>
531	</div>
532	<div className={classes.sliderLabels}>
533	<div>Disagree</div>
534	<DeferRender ssr={false}>
535	{!hideViewResults && !resultsVisible && <div>	×
536	{(voteCount > 0) && `${voteCount} vote${voteCount === 1 ? '' : 's'} so far. `}	×
537	{hasVoted ? 'Click and drag your avatar to change your vote, or ' : 'Place your vote or '}	×
538	<button className={classes.viewResultsButton} onClick={() => setResultsVisible(true)}>	×
539	view results
540	</button>
541	</div>}
542	</DeferRender>
543	<div>Agree</div>
544	</div>
545	</div>
546	<ForumIcon icon="ChevronRight" className={classNames(classes.sliderArrow, classes.sliderArrowRight)} />
547	</div>
548
549	</div>
550	</AnalyticsContext>
551	);
552	}
553
554	const ForumEventPollComponent = registerComponent(	1✔
555	"ForumEventPoll",
556	ForumEventPoll,
557	{styles},
558	);
559
560	declare global {
561	interface ComponentTypes {
562	ForumEventPoll: typeof ForumEventPollComponent
563	}
564	}

ForumMagnum / ForumMagnum / 11086277873

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous