11622171579

Committed 01 Nov 2024 12:43AM UTC coverage: 31.295% (-0.02%) from 31.311%

Build # 11622171579

Build Type

push

github

Committed by

web-flow

Commit Message

Merge pull request #9939 from ForumMagnum/jargonBotTweaks

Un-gate JargonBot

Run Details

5031 of 42450 branches covered (11.85%)

Branch coverage included in aggregate %.

13 of 69 new or added lines in 6 files covered. (18.84%)

3 existing lines in 2 files now uncovered.

29657 of 68391 relevant lines covered (43.36%)

173.59 hits per line

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

14.94

/packages/lesswrong/components/jargon/GlossarySidebar.tsx

import React, { useRef } from 'react';
import { Components, registerComponent } from '@/lib/vulcan-lib/components';
import { useCurrentUser } from '../common/withUser';
import { userCanViewJargonTerms } from '@/lib/betas';
import { useGlobalKeydown } from '../common/withGlobalKeydown';
import classNames from 'classnames';
import { sidenotesHiddenBreakpoint } from '../posts/PostsPage/PostsPage';
import { useJargonCounts } from '@/components/hooks/useJargonCounts';
import { jargonTermsToTextReplacements } from './JargonTooltip';
import { useTracking } from '@/lib/analyticsEvents';

const styles = (theme: ThemeType) => ({
  glossaryAnchor: {
    // HACK: If there is a footnote on the first line, because the footnote
    // anchor is in superscripted text, its position, for purposes of sidenote
    // ordering, will be above the top of the post body; but we want the
    // glossary side-item to be above the footnote side-item in this case.
    // So put the anchor for the glossary sidebar higher than the supercript
    // would be, and cancel it out with marginTop on glossaryContainer.
    position: "relative",
    top: -30,
  },
  jargonTerm: {
    paddingTop: 2,
    ...theme.typography.body2,
    ...theme.typography.postStyle,
    fontSize: "1.1rem",
    color: theme.palette.grey[800],
    cursor: 'pointer',
    textTransform: 'capitalize',
  },
  glossaryContainer: {
    [theme.breakpoints.down('sm')]: {
      display: 'none',
    },
    padding: 12,
    borderRadius: 3,
    maxHeight: 170,
    width: 'fit-content',
    overflow: 'hidden',

    "&:hover": {
      maxHeight: 'unset',
      // Show the pin icon when hovering over the glossary container
      "& $pinIcon, & $pinnedPinIcon": {
        opacity: 1,
      },
    },

    // Hide the overflow fade when hovering over the glossary container
    // This only works if the overflow fade is a sibling to the glossary container, and comes after it
    "&:hover + $overflowFade": {
      opacity: 0,
    },
  },
  glossaryContainerClickTarget: {
    cursor: 'pointer',
  },
  outerContainer: {
    height: 0,
  },
  innerContainer: {
    height: 'var(--sidebar-column-remaining-height)',
  },
  displayedHeightGlossaryContainer: {
    [sidenotesHiddenBreakpoint(theme)]: {
      display: "none",
    },
    paddingTop: 30,
    paddingBottom: 20,
    // Hide other side items behind the glossary sidebar when it's pinned and we're scrolling down
    backgroundColor: theme.palette.background.pageActiveAreaBackground,
    zIndex: 1,
  },
  pinnedGlossaryContainer: {
    position: 'sticky',
    top: 100,
    '& $pinIcon': {
      color: theme.palette.grey[800],
    },
  },
  titleRow: {
    display: 'flex',
  },
  titleRowTooltipPopper: {
    marginBottom: 12,
  },
  title: {
    flex: 1,
    display: 'flex',
    alignItems: 'center',
    ...theme.typography.body2,
    ...theme.typography.postStyle,
  },
  pinIcon: {
    width: 18,
    padding: 4,
    marginLeft: 6,
    color: theme.palette.grey[400],
    // Hide the pin icon by default, show it when hovering over the glossary container
    opacity: 0
  },
  pinnedPinIcon: {
    display: 'block',
    color: theme.palette.grey[800],
    opacity: .5
  },
  termTooltip: {
    marginRight: 5,
  },
  overflowFade: {
    position: "absolute",
    top: 160,
    height: 40,
    width: "100%",
    background: `linear-gradient(0deg,${theme.palette.background.pageActiveAreaBackground},transparent)`,
    opacity: 1,
    pointerEvents: 'none',
  },
  unapproved: {
    color: theme.palette.grey[400],
  },
  deleted: {
    textDecoration: 'line-through',
  },
  showAllTermsButton: {
    marginTop: 10,
    cursor: 'pointer',
    fontSize: '1rem',
    ...theme.typography.commentStyle,
    color: theme.palette.grey[400],
  },
  showAllTermsTooltipPopper: {
    maxWidth: 200,
  },
})

const GlossarySidebar = ({post, postGlossariesPinned, togglePin, showAllTerms, setShowAllTerms, classes}: {
  post: PostsWithNavigationAndRevision | PostsWithNavigation,
  postGlossariesPinned: boolean,
  togglePin: (source: string) => void,
  showAllTerms: boolean,
  setShowAllTerms: (e: React.MouseEvent, showAllTerms: boolean, source: string) => void,
  classes: ClassesType<typeof styles>,
}) => {
  const { SideItem, JargonTooltip, LWTooltip, ForumIcon } = Components;

  const { captureEvent } = useTracking();
  const currentUser = useCurrentUser();
  const glossaryContainerRef = useRef<HTMLDivElement>(null);

  useGlobalKeydown((e) => {
    const J_KeyCode = 74;
    if (e.altKey && e.shiftKey && e.keyCode === J_KeyCode) {
      e.preventDefault();
      togglePin('hotkey');
    }
  });

  const { sortedTerms } = useJargonCounts(post, post.glossary);

  const approvedTerms = sortedTerms.filter(term => term.approved);
  const unapprovedTerms = sortedTerms.filter(term => !term.approved && !term.deleted);
  const deletedTerms = sortedTerms.filter(term => term.deleted);

  if (!post) {
    return null;
  }

  if (!userCanViewJargonTerms(currentUser)) {
    return null;
  }

  const tooltip = <div><p>Pin to highlight every instance of a term. (Opt/Alt + Shift + J)</p></div>;
  const titleRow = currentUser ? (
    <LWTooltip
      title={tooltip}
      inlineBlock={false}
      placement='top-end'
      popperClassName={classes.titleRowTooltipPopper}
    >
      <div className={classes.titleRow}>
        <h3 className={classes.title}>
          <strong>Glossary</strong>
          <ForumIcon icon="Pin" className={classNames(classes.pinIcon, postGlossariesPinned && classes.pinnedPinIcon)} />
        </h3>
      </div>
    </LWTooltip>
  ) : (
    <div className={classes.titleRow}>
      <h3 className={classes.title}><strong>Glossary</strong></h3>
    </div>
  );

  const replacedSubstrings = jargonTermsToTextReplacements(sortedTerms);

  const approvedGlossaryItems = approvedTerms.map((jargonTerm) => {
    return (<div key={jargonTerm._id + jargonTerm.term}>
      <JargonTooltip
        term={jargonTerm.term}
        definitionHTML={jargonTerm.contents?.html ?? ''}
        altTerms={jargonTerm.altTerms}
        humansAndOrAIEdited={jargonTerm.humansAndOrAIEdited}
        approved={jargonTerm.approved}
        deleted={jargonTerm.deleted}
        placement="left-start"
        tooltipTitleClassName={classes.termTooltip}
        replacedSubstrings={replacedSubstrings}
        // The terms in the glossary should always have tooltips
        isFirstOccurrence
      >
        <div className={classNames(classes.jargonTerm, !jargonTerm.approved && classes.unapproved)}>{jargonTerm.term}</div>
      </JargonTooltip>
    </div>);
  });

  const otherGlossaryItems = showAllTerms ? [...unapprovedTerms, ...deletedTerms].map((jargonTerm) => {
    return (<div key={jargonTerm._id + jargonTerm.term}>
      <JargonTooltip
        term={jargonTerm.term}
        definitionHTML={jargonTerm.contents?.html ?? ''}
        altTerms={jargonTerm.altTerms}
        humansAndOrAIEdited={jargonTerm.humansAndOrAIEdited}
        approved={jargonTerm.approved}
        deleted={jargonTerm.deleted}
        placement="left-start"
        tooltipTitleClassName={classes.termTooltip}
        // The terms in the glossary should always have tooltips
        isFirstOccurrence
        replacedSubstrings={replacedSubstrings}
      >
        <div className={classNames(classes.jargonTerm, !jargonTerm.approved && classes.unapproved, jargonTerm.deleted && classes.deleted)}>{jargonTerm.term}</div>
      </JargonTooltip>
    </div>);
  }) : null;

  const showAllTermsTooltip = <div><div>{`Click to ${showAllTerms ? 'hide' : 'show'} hidden AI slop the author doesn't necessarily endorse.`}</div><div><em>(Opt/Alt + Shift + G)</em></div></div>;
  const showAllTermsButton = <LWTooltip
    title={showAllTermsTooltip}
    inlineBlock={false}
    placement='right-end'
    popperClassName={classes.showAllTermsTooltipPopper}
  >
    <div className={classes.showAllTermsButton} onClick={(e) => setShowAllTerms(e, !showAllTerms, 'showAllTermsButton')}>
      {showAllTerms ? 'Hide Unapproved' : 'Show Unapproved'}
    </div>
  </LWTooltip>;

  return <div className={classes.glossaryAnchor}><SideItem options={{ format: 'block', offsetTop: -10, measuredElement: glossaryContainerRef }}>
    <div className={classNames(postGlossariesPinned && classes.outerContainer)}>
      <div className={classNames(postGlossariesPinned && classes.innerContainer)}>
        <div className={classNames(classes.displayedHeightGlossaryContainer, postGlossariesPinned && classes.pinnedGlossaryContainer)} ref={glossaryContainerRef}>
          <div className={classNames(classes.glossaryContainer, currentUser && classes.glossaryContainerClickTarget)} onClick={currentUser ? () => togglePin('clickGlossaryContainer') : undefined}>
            {titleRow}
            {approvedGlossaryItems}
            {otherGlossaryItems}
            {showAllTermsButton}
          </div>
          <div className={classes.overflowFade} />
        </div>
      </div>
    </div>
  </SideItem></div>
}

const GlossarySidebarComponent = registerComponent('GlossarySidebar', GlossarySidebar, {styles});

declare global {
  interface ComponentTypes {
    GlossarySidebar: typeof GlossarySidebarComponent
  }
}

1	import React, { useRef } from 'react';	1✔
2	import { Components, registerComponent } from '@/lib/vulcan-lib/components';	1✔
3	import { useCurrentUser } from '../common/withUser';	1✔
4	import { userCanViewJargonTerms } from '@/lib/betas';	1✔
5	import { useGlobalKeydown } from '../common/withGlobalKeydown';	1✔
6	import classNames from 'classnames';	1✔
7	import { sidenotesHiddenBreakpoint } from '../posts/PostsPage/PostsPage';	1✔
8	import { useJargonCounts } from '@/components/hooks/useJargonCounts';	1✔
9	import { jargonTermsToTextReplacements } from './JargonTooltip';	1✔
10	import { useTracking } from '@/lib/analyticsEvents';	1✔
11
12	const styles = (theme: ThemeType) => ({	1✔
13	glossaryAnchor: {
14	// HACK: If there is a footnote on the first line, because the footnote
15	// anchor is in superscripted text, its position, for purposes of sidenote
16	// ordering, will be above the top of the post body; but we want the
17	// glossary side-item to be above the footnote side-item in this case.
18	// So put the anchor for the glossary sidebar higher than the supercript
19	// would be, and cancel it out with marginTop on glossaryContainer.
20	position: "relative",
21	top: -30,
22	},
23	jargonTerm: {
24	paddingTop: 2,
25	...theme.typography.body2,
26	...theme.typography.postStyle,
27	fontSize: "1.1rem",
28	color: theme.palette.grey[800],
29	cursor: 'pointer',
30	textTransform: 'capitalize',
31	},
32	glossaryContainer: {
33	[theme.breakpoints.down('sm')]: {
34	display: 'none',
35	},
36	padding: 12,
37	borderRadius: 3,
38	maxHeight: 170,
39	width: 'fit-content',
40	overflow: 'hidden',
41
42	"&:hover": {
43	maxHeight: 'unset',
44	// Show the pin icon when hovering over the glossary container
45	"& $pinIcon, & $pinnedPinIcon": {
46	opacity: 1,
47	},
48	},
49
50	// Hide the overflow fade when hovering over the glossary container
51	// This only works if the overflow fade is a sibling to the glossary container, and comes after it
52	"&:hover + $overflowFade": {
53	opacity: 0,
54	},
55	},
56	glossaryContainerClickTarget: {
57	cursor: 'pointer',
58	},
59	outerContainer: {
60	height: 0,
61	},
62	innerContainer: {
63	height: 'var(--sidebar-column-remaining-height)',
64	},
65	displayedHeightGlossaryContainer: {
66	[sidenotesHiddenBreakpoint(theme)]: {
67	display: "none",
68	},
69	paddingTop: 30,
70	paddingBottom: 20,
71	// Hide other side items behind the glossary sidebar when it's pinned and we're scrolling down
72	backgroundColor: theme.palette.background.pageActiveAreaBackground,
73	zIndex: 1,
74	},
75	pinnedGlossaryContainer: {
76	position: 'sticky',
77	top: 100,
78	'& $pinIcon': {
79	color: theme.palette.grey[800],
80	},
81	},
82	titleRow: {
83	display: 'flex',
84	},
85	titleRowTooltipPopper: {
86	marginBottom: 12,
87	},
88	title: {
89	flex: 1,
90	display: 'flex',
91	alignItems: 'center',
92	...theme.typography.body2,
93	...theme.typography.postStyle,
94	},
95	pinIcon: {
96	width: 18,
97	padding: 4,
98	marginLeft: 6,
99	color: theme.palette.grey[400],
100	// Hide the pin icon by default, show it when hovering over the glossary container
101	opacity: 0
102	},
103	pinnedPinIcon: {
104	display: 'block',
105	color: theme.palette.grey[800],
106	opacity: .5
107	},
108	termTooltip: {
109	marginRight: 5,
110	},
111	overflowFade: {
112	position: "absolute",
113	top: 160,
114	height: 40,
115	width: "100%",
116	background: `linear-gradient(0deg,${theme.palette.background.pageActiveAreaBackground},transparent)`,
117	opacity: 1,
118	pointerEvents: 'none',
119	},
120	unapproved: {
121	color: theme.palette.grey[400],
122	},
123	deleted: {
124	textDecoration: 'line-through',
125	},
126	showAllTermsButton: {
127	marginTop: 10,
128	cursor: 'pointer',
129	fontSize: '1rem',
130	...theme.typography.commentStyle,
131	color: theme.palette.grey[400],
132	},
133	showAllTermsTooltipPopper: {
134	maxWidth: 200,
135	},
136	})
137
138	const GlossarySidebar = ({post, postGlossariesPinned, togglePin, showAllTerms, setShowAllTerms, classes}: {	1✔
139	post: PostsWithNavigationAndRevision \| PostsWithNavigation,
140	postGlossariesPinned: boolean,
141	togglePin: (source: string) => void,
142	showAllTerms: boolean,
143	setShowAllTerms: (e: React.MouseEvent, showAllTerms: boolean, source: string) => void,
144	classes: ClassesType<typeof styles>,
145	}) => {
146	const { SideItem, JargonTooltip, LWTooltip, ForumIcon } = Components;	×
147
NEW 148	const { captureEvent } = useTracking();	×
149	const currentUser = useCurrentUser();	×
150	const glossaryContainerRef = useRef<HTMLDivElement>(null);	×
151
152	useGlobalKeydown((e) => {	×
153	const J_KeyCode = 74;	×
154	if (e.altKey && e.shiftKey && e.keyCode === J_KeyCode) {	×
NEW 155	e.preventDefault();	×
NEW 156	togglePin('hotkey');	×
157	}
158	});
159
160	const { sortedTerms } = useJargonCounts(post, post.glossary);	×
161
NEW 162	const approvedTerms = sortedTerms.filter(term => term.approved);	×
NEW 163	const unapprovedTerms = sortedTerms.filter(term => !term.approved && !term.deleted);	×
NEW 164	const deletedTerms = sortedTerms.filter(term => term.deleted);	×
165
166	if (!post) {	×
167	return null;	×
168	}
169
170	if (!userCanViewJargonTerms(currentUser)) {	×
171	return null;	×
172	}
173
NEW 174	const tooltip = <div><p>Pin to highlight every instance of a term. (Opt/Alt + Shift + J)</p></div>;	×
175	const titleRow = currentUser ? (	×
176	<LWTooltip	×
177	title={tooltip}
178	inlineBlock={false}
179	placement='top-end'
180	popperClassName={classes.titleRowTooltipPopper}
181	>
182	<div className={classes.titleRow}>
183	<h3 className={classes.title}>
184	<strong>Glossary</strong>
185	<ForumIcon icon="Pin" className={classNames(classes.pinIcon, postGlossariesPinned && classes.pinnedPinIcon)} />	×
186	</h3>
187	</div>
188	</LWTooltip>
189	) : (
190	<div className={classes.titleRow}>
191	<h3 className={classes.title}><strong>Glossary</strong></h3>
192	</div>
193	);
194
NEW 195	const replacedSubstrings = jargonTermsToTextReplacements(sortedTerms);	×
196
NEW 197	const approvedGlossaryItems = approvedTerms.map((jargonTerm) => {	×
UNCOV 198	return (<div key={jargonTerm._id + jargonTerm.term}>	×
199	<JargonTooltip
200	term={jargonTerm.term}
201	definitionHTML={jargonTerm.contents?.html ?? ''}	×
202	altTerms={jargonTerm.altTerms}
203	humansAndOrAIEdited={jargonTerm.humansAndOrAIEdited}
204	approved={jargonTerm.approved}
205	deleted={jargonTerm.deleted}
206	placement="left-start"
207	tooltipTitleClassName={classes.termTooltip}
208	replacedSubstrings={replacedSubstrings}
209	// The terms in the glossary should always have tooltips
210	isFirstOccurrence
211	>
212	<div className={classNames(classes.jargonTerm, !jargonTerm.approved && classes.unapproved)}>{jargonTerm.term}</div>	×
213	</JargonTooltip>
214	</div>);
215	});
216
NEW 217	const otherGlossaryItems = showAllTerms ? [...unapprovedTerms, ...deletedTerms].map((jargonTerm) => {	×
NEW 218	return (<div key={jargonTerm._id + jargonTerm.term}>	×
219	<JargonTooltip
220	term={jargonTerm.term}
221	definitionHTML={jargonTerm.contents?.html ?? ''}	×
222	altTerms={jargonTerm.altTerms}
223	humansAndOrAIEdited={jargonTerm.humansAndOrAIEdited}
224	approved={jargonTerm.approved}
225	deleted={jargonTerm.deleted}
226	placement="left-start"
227	tooltipTitleClassName={classes.termTooltip}
228	// The terms in the glossary should always have tooltips
229	isFirstOccurrence
230	replacedSubstrings={replacedSubstrings}
231	>
232	<div className={classNames(classes.jargonTerm, !jargonTerm.approved && classes.unapproved, jargonTerm.deleted && classes.deleted)}>{jargonTerm.term}</div>	×
233	</JargonTooltip>
234	</div>);
235	}) : null;
236
NEW 237	const showAllTermsTooltip = <div><div>{`Click to ${showAllTerms ? 'hide' : 'show'} hidden AI slop the author doesn't necessarily endorse.`}</div><div><em>(Opt/Alt + Shift + G)</em></div></div>;	×
NEW 238	const showAllTermsButton = <LWTooltip	×
239	title={showAllTermsTooltip}
240	inlineBlock={false}
241	placement='right-end'
242	popperClassName={classes.showAllTermsTooltipPopper}
243	>
NEW 244	<div className={classes.showAllTermsButton} onClick={(e) => setShowAllTerms(e, !showAllTerms, 'showAllTermsButton')}>	×
245	{showAllTerms ? 'Hide Unapproved' : 'Show Unapproved'}	×
246	</div>
247	</LWTooltip>;
248
UNCOV 249	return <div className={classes.glossaryAnchor}><SideItem options={{ format: 'block', offsetTop: -10, measuredElement: glossaryContainerRef }}>	×
250	<div className={classNames(postGlossariesPinned && classes.outerContainer)}>	×
251	<div className={classNames(postGlossariesPinned && classes.innerContainer)}>	×
252	<div className={classNames(classes.displayedHeightGlossaryContainer, postGlossariesPinned && classes.pinnedGlossaryContainer)} ref={glossaryContainerRef}>	×
NEW 253	<div className={classNames(classes.glossaryContainer, currentUser && classes.glossaryContainerClickTarget)} onClick={currentUser ? () => togglePin('clickGlossaryContainer') : undefined}>	×
254	{titleRow}
255	{approvedGlossaryItems}
256	{otherGlossaryItems}
257	{showAllTermsButton}
258	</div>
259	<div className={classes.overflowFade} />
260	</div>
261	</div>
262	</div>
263	</SideItem></div>
264	}
265
266	const GlossarySidebarComponent = registerComponent('GlossarySidebar', GlossarySidebar, {styles});	1✔
267
268	declare global {
269	interface ComponentTypes {
270	GlossarySidebar: typeof GlossarySidebarComponent
271	}
272	}

ForumMagnum / ForumMagnum / 11622171579

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