11525902787

Committed 25 Oct 2024 09:52PM UTC coverage: 31.367% (-0.1%) from 31.473%

Build # 11525902787

Build Type

Pull #9771

github

Committed by

b0b3rt

Commit Message

Merge remote-tracking branch 'origin/master' into jargonBot

Pull Request Pull Request #9771: JargonBot (somewhat beta-gated)

Run Details

5033 of 42262 branches covered (11.91%)

Branch coverage included in aggregate %.

211 of 619 new or added lines in 47 files covered. (34.09%)

8 existing lines in 7 files now uncovered.

29619 of 68211 relevant lines covered (43.42%)

174.04 hits per line

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

19.67

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

import React, { useRef, useMemo } 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';

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": {
        display: 'block',
      },
    },

    // 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,
    ...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',
  },
  unapproved: {
    color: theme.palette.grey[400],
  },
})

const getNormalizedPostContents = (post: PostsWithNavigationAndRevision | PostsWithNavigation): string => {
  return (post.contents?.html ?? "").toLowerCase();
};

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

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

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

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

  if (!post) {
    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 glossaryItems = sortedTerms.map((jargonTerm) => {
    return (<div key={jargonTerm._id + jargonTerm.term}>
      <JargonTooltip
        definitionHTML={jargonTerm.contents?.html ?? ''}
        altTerms={jargonTerm.altTerms}
        humansAndOrAIEdited={jargonTerm.humansAndOrAIEdited}
        approved={jargonTerm.approved}
        placement="left-start"
        tooltipTitleClassName={classes.termTooltip}
        // The terms in the glossary should always have tooltips
        isFirstOccurrence
      >
        <div className={classNames(classes.jargonTerm, !jargonTerm.approved && classes.unapproved)}>{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, useMemo } 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
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	textTransform: 'capitalize',
29	},
30	glossaryContainer: {
31	[theme.breakpoints.down('sm')]: {
32	display: 'none',
33	},
34	padding: 12,
35	borderRadius: 3,
36	maxHeight: 170,
37	width: 'fit-content',
38	overflow: 'hidden',
39
40	"&:hover": {
41	maxHeight: 'unset',
42	// Show the pin icon when hovering over the glossary container
43	"& $pinIcon": {
44	display: 'block',
45	},
46	},
47
48	// Hide the overflow fade when hovering over the glossary container
49	// This only works if the overflow fade is a sibling to the glossary container, and comes after it
50	"&:hover + $overflowFade": {
51	opacity: 0,
52	},
53	},
54	glossaryContainerClickTarget: {
55	cursor: 'pointer',
56	},
57	outerContainer: {
58	height: 0,
59	},
60	innerContainer: {
61	height: 'var(--sidebar-column-remaining-height)',
62	},
63	displayedHeightGlossaryContainer: {
64	[sidenotesHiddenBreakpoint(theme)]: {
65	display: "none",
66	},
67	paddingTop: 30,
68	paddingBottom: 20,
69	// Hide other side items behind the glossary sidebar when it's pinned and we're scrolling down
70	backgroundColor: theme.palette.background.pageActiveAreaBackground,
71	zIndex: 1,
72	},
73	pinnedGlossaryContainer: {
74	position: 'sticky',
75	top: 100,
76	'& $pinIcon': {
77	color: theme.palette.grey[800],
78	},
79	},
80	titleRow: {
81	display: 'flex',
82	},
83	titleRowTooltipPopper: {
84	marginBottom: 12,
85	},
86	title: {
87	flex: 1,
88	...theme.typography.body2,
89	...theme.typography.postStyle,
90	},
91	pinIcon: {
92	width: 10,
93	paddingBottom: 4,
94	marginRight: 6,
95	color: theme.palette.grey[600],
96	// Hide the pin icon by default, show it when hovering over the glossary container
97	display: 'none',
98	},
99	termTooltip: {
100	marginRight: 5,
101	},
102	overflowFade: {
103	position: "absolute",
104	top: 160,
105	height: 40,
106	width: "100%",
107	background: `linear-gradient(0deg,${theme.palette.background.pageActiveAreaBackground},transparent)`,
108	opacity: 1,
109	pointerEvents: 'none',
110	},
111	unapproved: {
112	color: theme.palette.grey[400],
113	},
114	})
115
116	const getNormalizedPostContents = (post: PostsWithNavigationAndRevision \| PostsWithNavigation): string => {	1✔
NEW 117	return (post.contents?.html ?? "").toLowerCase();	×
118	};
119
120	const GlossarySidebar = ({post, postGlossariesPinned, togglePin, classes}: {	1✔
121	post: PostsWithNavigationAndRevision \| PostsWithNavigation,
122	postGlossariesPinned: boolean,
123	togglePin: () => void,
124	classes: ClassesType<typeof styles>,
125	}) => {
NEW 126	const { SideItem, JargonTooltip, LWTooltip, ForumIcon } = Components;	×
127
NEW 128	const currentUser = useCurrentUser();	×
NEW 129	const glossaryContainerRef = useRef<HTMLDivElement>(null);	×
130
NEW 131	useGlobalKeydown((e) => {	×
NEW 132	const J_KeyCode = 74;	×
NEW 133	if (e.altKey && e.shiftKey && e.keyCode === J_KeyCode) {	×
NEW 134	togglePin();	×
135	}
136	});
137
NEW 138	const { sortedTerms } = useJargonCounts(post, post.glossary);	×
139
NEW 140	if (!post) {	×
NEW 141	return null;	×
142	}
143
NEW 144	if (!userCanViewJargonTerms(currentUser)) {	×
NEW 145	return null;	×
146	}
147
NEW 148	const tooltip = <div><p>Pin to highlight every term. (Opt/Alt + Shift + J)</p></div>;	×
NEW 149	const titleRow = currentUser ? (	×
150	<LWTooltip	×
151	title={tooltip}
152	inlineBlock={false}
153	placement='top-end'
154	popperClassName={classes.titleRowTooltipPopper}
155	>
156	<div className={classes.titleRow}>
157	<h3 className={classes.title}><strong>Glossary</strong></h3>
158	<ForumIcon icon='Pin' className={classes.pinIcon} />
159	</div>
160	</LWTooltip>
161	) : (
162	<div className={classes.titleRow}>
163	<h3 className={classes.title}><strong>Glossary</strong></h3>
164	</div>
165	);
166
NEW 167	const glossaryItems = sortedTerms.map((jargonTerm) => {	×
NEW 168	return (<div key={jargonTerm._id + jargonTerm.term}>	×
169	<JargonTooltip
170	definitionHTML={jargonTerm.contents?.html ?? ''}	×
171	altTerms={jargonTerm.altTerms}
172	humansAndOrAIEdited={jargonTerm.humansAndOrAIEdited}
173	approved={jargonTerm.approved}
174	placement="left-start"
175	tooltipTitleClassName={classes.termTooltip}
176	// The terms in the glossary should always have tooltips
177	isFirstOccurrence
178	>
179	<div className={classNames(classes.jargonTerm, !jargonTerm.approved && classes.unapproved)}>{jargonTerm.term}</div>	×
180	</JargonTooltip>
181	</div>);
182	});
183
NEW 184	return <div className={classes.glossaryAnchor}><SideItem options={{ format: 'block', offsetTop: -10, measuredElement: glossaryContainerRef }}>	×
185	<div className={classNames(postGlossariesPinned && classes.outerContainer)}>	×
186	<div className={classNames(postGlossariesPinned && classes.innerContainer)}>	×
187	<div className={classNames(classes.displayedHeightGlossaryContainer, postGlossariesPinned && classes.pinnedGlossaryContainer)} ref={glossaryContainerRef}>	×
188	<div className={classNames(classes.glossaryContainer, currentUser && classes.glossaryContainerClickTarget)} onClick={currentUser ? togglePin : undefined}>	×
189	{titleRow}
190	{glossaryItems}
191	</div>
192	<div className={classes.overflowFade} />
193	</div>
194	</div>
195	</div>
196	</SideItem></div>
197	}
198
199	const GlossarySidebarComponent = registerComponent('GlossarySidebar', GlossarySidebar, {styles});	1✔
200
201	declare global {
202	interface ComponentTypes {
203	GlossarySidebar: typeof GlossarySidebarComponent
204	}
205	}

ForumMagnum / ForumMagnum / 11525902787

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