11506146210

Committed 24 Oct 2024 07:28PM UTC coverage: 31.382% (-0.2%) from 31.613%

Build # 11506146210

Build Type

Pull #9771

github

Committed by

b0b3rt

Commit Message

make glossary non-clickable for logged out users

Pull Request Pull Request #9771: JargonBot (admin only)

Run Details

5026 of 42234 branches covered (11.9%)

Branch coverage included in aggregate %.

221 of 611 new or added lines in 45 files covered. (36.17%)

8 existing lines in 6 files now uncovered.

29627 of 68188 relevant lines covered (43.45%)

174.14 hits per line

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

13.51

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

import React, { useRef, useState } from 'react';
import { Components, registerComponent } from '@/lib/vulcan-lib/components';
import { jargonTermsToTextReplacements } from './JargonTooltip';
import { useCurrentUser } from '../common/withUser';
import { userCanViewJargonTerms } from '@/lib/betas';
import { ContentReplacementMode } from '../common/ContentItemBody';
import { useGlobalKeydown } from '../common/withGlobalKeydown';
import classNames from 'classnames';

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'
  },
  glossaryContainer: {
    [theme.breakpoints.down('sm')]: {
      display: 'none',
    },
    padding: 12,
    borderRadius: 3,
    maxHeight: 170,
    transition: 'max-height 0.2s 0.2s',
    overflow: 'hidden',

    "&:hover": {
      background: theme.palette.background.glossaryBackground,
      maxHeight: 'unset',
      // Show the pin icon when hovering over the glossary container
      "& $pinIcon": {
        display: 'block',
      },
    },
  },
  glossaryContainerClickTarget: {
    cursor: 'pointer',
  },
  outerContainer: {
    height: 0,
  },
  innerContainer: {
    height: 'var(--sidebar-column-remaining-height)',
  },
  displayedHeightGlossaryContainer: {
    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,

    "&:hover": {
      "& $overflowFade": {
        opacity: 0,
      },
    }
  },
  pinnedGlossaryContainer: {
    position: 'sticky',
    top: 100,
    '& $pinIcon': {
      color: theme.palette.grey[800],
    },
  },
  titleRow: {
    display: 'flex',
  },
  titleRowTooltipPopper: {
    marginBottom: 12,
  },
  title: {
    flex: 1,
    ...theme.typography.body2,
    ...theme.typography.postStyle,
  },
  pinIcon: {
    width: 10,
    paddingBottom: 4,
    marginRight: 6,
    color: theme.palette.grey[600],
    // Hide the pin icon by default, show it when hovering over the glossary container
    display: 'none',
  },
  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',
  },
})

// TODO: maybe sort by first use instead of frequency?
function countInstancesOfJargon(item: JargonTermsPost, post: PostsWithNavigationAndRevision | PostsWithNavigation) {
  const jargonVariants = [item.term.toLowerCase(), ...(item.altTerms ?? []).map(altTerm => altTerm.toLowerCase())];
  return (post.contents?.html ?? "").toLowerCase().match(new RegExp(jargonVariants.join('|'), 'g'))?.length ?? 0;
};

const GlossarySidebar = ({post, postGlossariesPinned, togglePin, classes}: {
  post: PostsListWithVotes | PostsWithNavigationAndRevision | PostsWithNavigation,
  postGlossariesPinned: boolean,
  togglePin: () => void,
  classes: ClassesType<typeof styles>,
}) => {
  const { SideItem, JargonTooltip, LWTooltip, ForumIcon } = Components;

  const currentUser = useCurrentUser();
  const glossaryContainerRef = useRef<HTMLDivElement>(null);

  const jargonReplacementMode: ContentReplacementMode = postGlossariesPinned ? 'all' : 'first';

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

  if (!post || !('glossary' in post) || !post.glossary?.length) {
    return null;
  }

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

  const tooltip = <div><p>Pin to highlight every 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></h3>
        <ForumIcon icon='Pin' className={classes.pinIcon} />
      </div>
    </LWTooltip>
  ) : (
    <div className={classes.titleRow}>
      <h3 className={classes.title}><strong>Glossary</strong></h3>
    </div>
  );
  
  const sortedGlossary = [...post.glossary].sort((a, b) => {
    return countInstancesOfJargon(b, post) - countInstancesOfJargon(a, post);
  });

  const glossaryItems = sortedGlossary.map((jargonTerm) => {
    const replacedSubstrings = jargonTermsToTextReplacements(post.glossary, jargonReplacementMode);
    return (<div key={jargonTerm.term}>
      <JargonTooltip
        term={jargonTerm.term}
        definitionHTML={jargonTerm.contents?.html ?? ''}
        altTerms={jargonTerm.altTerms}
        humansAndOrAIEdited={jargonTerm.humansAndOrAIEdited}
        replacedSubstrings={replacedSubstrings}
        placement="left-start"
        tooltipTitleClassName={classes.termTooltip}
        // The terms in the glossary should always have tooltips
        isFirstOccurrence
      >
        <div className={classes.jargonTerm}>{jargonTerm.term}</div>
      </JargonTooltip>
    </div>);
  });

  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 : undefined}>
            {titleRow}
            {glossaryItems}
          </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, useState } from 'react';	1✔
2	import { Components, registerComponent } from '@/lib/vulcan-lib/components';	1✔
3	import { jargonTermsToTextReplacements } from './JargonTooltip';	1✔
4	import { useCurrentUser } from '../common/withUser';	1✔
5	import { userCanViewJargonTerms } from '@/lib/betas';	1✔
6	import { ContentReplacementMode } from '../common/ContentItemBody';
7	import { useGlobalKeydown } from '../common/withGlobalKeydown';	1✔
8	import classNames from 'classnames';	1✔
9
10	const styles = (theme: ThemeType) => ({	1✔
11	glossaryAnchor: {
12	// HACK: If there is a footnote on the first line, because the footnote
13	// anchor is in superscripted text, its position, for purposes of sidenote
14	// ordering, will be above the top of the post body; but we want the
15	// glossary side-item to be above the footnote side-item in this case.
16	// So put the anchor for the glossary sidebar higher than the supercript
17	// would be, and cancel it out with marginTop on glossaryContainer.
18	position: "relative",
19	top: -30,
20	},
21	jargonTerm: {
22	paddingTop: 2,
23	...theme.typography.body2,
24	...theme.typography.postStyle,
25	fontSize: "1.1rem",
26	color: theme.palette.grey[800],
27	cursor: 'pointer'
28	},
29	glossaryContainer: {
30	[theme.breakpoints.down('sm')]: {
31	display: 'none',
32	},
33	padding: 12,
34	borderRadius: 3,
35	maxHeight: 170,
36	transition: 'max-height 0.2s 0.2s',
37	overflow: 'hidden',
38
39	"&:hover": {
40	background: theme.palette.background.glossaryBackground,
41	maxHeight: 'unset',
42	// Show the pin icon when hovering over the glossary container
43	"& $pinIcon": {
44	display: 'block',
45	},
46	},
47	},
48	glossaryContainerClickTarget: {
49	cursor: 'pointer',
50	},
51	outerContainer: {
52	height: 0,
53	},
54	innerContainer: {
55	height: 'var(--sidebar-column-remaining-height)',
56	},
57	displayedHeightGlossaryContainer: {
58	paddingTop: 30,
59	paddingBottom: 20,
60	// Hide other side items behind the glossary sidebar when it's pinned and we're scrolling down
61	backgroundColor: theme.palette.background.pageActiveAreaBackground,
62	zIndex: 1,
63
64	"&:hover": {
65	"& $overflowFade": {
66	opacity: 0,
67	},
68	}
69	},
70	pinnedGlossaryContainer: {
71	position: 'sticky',
72	top: 100,
73	'& $pinIcon': {
74	color: theme.palette.grey[800],
75	},
76	},
77	titleRow: {
78	display: 'flex',
79	},
80	titleRowTooltipPopper: {
81	marginBottom: 12,
82	},
83	title: {
84	flex: 1,
85	...theme.typography.body2,
86	...theme.typography.postStyle,
87	},
88	pinIcon: {
89	width: 10,
90	paddingBottom: 4,
91	marginRight: 6,
92	color: theme.palette.grey[600],
93	// Hide the pin icon by default, show it when hovering over the glossary container
94	display: 'none',
95	},
96	termTooltip: {
97	marginRight: 5,
98	},
99	overflowFade: {
100	position: "absolute",
101	top: 160,
102	height: 40,
103	width: "100%",
104	background: `linear-gradient(0deg,${theme.palette.background.pageActiveAreaBackground},transparent)`,
105	opacity: 1,
106	pointerEvents: 'none',
107	},
108	})
109
110	// TODO: maybe sort by first use instead of frequency?
111	function countInstancesOfJargon(item: JargonTermsPost, post: PostsWithNavigationAndRevision \| PostsWithNavigation) {
NEW 112	const jargonVariants = [item.term.toLowerCase(), ...(item.altTerms ?? []).map(altTerm => altTerm.toLowerCase())];	×
NEW 113	return (post.contents?.html ?? "").toLowerCase().match(new RegExp(jargonVariants.join('\|'), 'g'))?.length ?? 0;	×
114	};
115
116	const GlossarySidebar = ({post, postGlossariesPinned, togglePin, classes}: {	1✔
117	post: PostsListWithVotes \| PostsWithNavigationAndRevision \| PostsWithNavigation,
118	postGlossariesPinned: boolean,
119	togglePin: () => void,
120	classes: ClassesType<typeof styles>,
121	}) => {
NEW 122	const { SideItem, JargonTooltip, LWTooltip, ForumIcon } = Components;	×
123
NEW 124	const currentUser = useCurrentUser();	×
NEW 125	const glossaryContainerRef = useRef<HTMLDivElement>(null);	×
126
NEW 127	const jargonReplacementMode: ContentReplacementMode = postGlossariesPinned ? 'all' : 'first';	×
128
NEW 129	useGlobalKeydown((e) => {	×
NEW 130	const J_KeyCode = 74;	×
NEW 131	if (e.altKey && e.shiftKey && e.keyCode === J_KeyCode) {	×
NEW 132	togglePin();	×
133	}
134	});
135
NEW 136	if (!post \|\| !('glossary' in post) \|\| !post.glossary?.length) {	×
NEW 137	return null;	×
138	}
139
NEW 140	if (!userCanViewJargonTerms(currentUser)) {	×
NEW 141	return null;	×
142	}
143
NEW 144	const tooltip = <div><p>Pin to highlight every term. (Opt/Alt + Shift + J)</p></div>;	×
NEW 145	const titleRow = currentUser ? (	×
146	<LWTooltip	×
147	title={tooltip}
148	inlineBlock={false}
149	placement='top-end'
150	popperClassName={classes.titleRowTooltipPopper}
151	>
152	<div className={classes.titleRow}>
153	<h3 className={classes.title}><strong>Glossary</strong></h3>
154	<ForumIcon icon='Pin' className={classes.pinIcon} />
155	</div>
156	</LWTooltip>
157	) : (
158	<div className={classes.titleRow}>
159	<h3 className={classes.title}><strong>Glossary</strong></h3>
160	</div>
161	);
162
NEW 163	const sortedGlossary = [...post.glossary].sort((a, b) => {	×
NEW 164	return countInstancesOfJargon(b, post) - countInstancesOfJargon(a, post);	×
165	});
166
NEW 167	const glossaryItems = sortedGlossary.map((jargonTerm) => {	×
NEW 168	const replacedSubstrings = jargonTermsToTextReplacements(post.glossary, jargonReplacementMode);	×
NEW 169	return (<div key={jargonTerm.term}>	×
170	<JargonTooltip
171	term={jargonTerm.term}
172	definitionHTML={jargonTerm.contents?.html ?? ''}	×
173	altTerms={jargonTerm.altTerms}
174	humansAndOrAIEdited={jargonTerm.humansAndOrAIEdited}
175	replacedSubstrings={replacedSubstrings}
176	placement="left-start"
177	tooltipTitleClassName={classes.termTooltip}
178	// The terms in the glossary should always have tooltips
179	isFirstOccurrence
180	>
181	<div className={classes.jargonTerm}>{jargonTerm.term}</div>
182	</JargonTooltip>
183	</div>);
184	});
185
NEW 186	return <div className={classes.glossaryAnchor}><SideItem options={{ format: 'block', offsetTop: -10, measuredElement: glossaryContainerRef }}>	×
187	<div className={classNames(postGlossariesPinned && classes.outerContainer)}>	×
188	<div className={classNames(postGlossariesPinned && classes.innerContainer)}>	×
189	<div className={classNames(classes.displayedHeightGlossaryContainer, postGlossariesPinned && classes.pinnedGlossaryContainer)} ref={glossaryContainerRef}>	×
190	<div className={classNames(classes.glossaryContainer, currentUser && classes.glossaryContainerClickTarget)} onClick={currentUser ? togglePin : undefined}>	×
191	{titleRow}
192	{glossaryItems}
193	</div>
194	<div className={classes.overflowFade} />
195	</div>
196	</div>
197	</div>
198	</SideItem></div>
199	}
200
201	const GlossarySidebarComponent = registerComponent('GlossarySidebar', GlossarySidebar, {styles});	1✔
202
203	declare global {
204	interface ComponentTypes {
205	GlossarySidebar: typeof GlossarySidebarComponent
206	}
207	}

ForumMagnum / ForumMagnum / 11506146210

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