9750902621

Committed 01 Jul 2024 08:51PM UTC coverage: 31.905% (-0.003%) from 31.908%

Build # 9750902621

Build Type

push

github

Committed by

s-cheng

Commit Message

[EA Forum only] debate week homepage banner improvements

Run Details

4889 of 40078 branches covered (12.2%)

Branch coverage included in aggregate %.

5 of 21 new or added lines in 3 files covered. (23.81%)

1 existing line in 1 file now uncovered.

28509 of 64603 relevant lines covered (44.13%)

180.58 hits per line

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

12.8

/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 { useDialog } from "../common/withDialog";
import { useMulti } from "@/lib/crud/withMulti";
import ForumNoSSR from "../common/ForumNoSSR";
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";

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 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,
  },
  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%',
  },
  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 = 15
): 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 {openDialog} = useDialog()
  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: 300,
    },
    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)
        if (postId) {
          await addVote({variables: {
            ...voteData,
            postIds: [postId]
          }})
          refetch?.()
        } else if (event.tag) {
          openDialog({
            componentName: "ForumEventPostSelectionDialog",
            componentProps: {tag: event.tag, voteData}
          })
        }
      }
    }
    // 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,
    openDialog,
    onSignup,
    clearVote,
    refetch
  ])
  useEventListener("pointerup", saveVotePos)

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

ForumMagnum / ForumMagnum / 9750902621

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