11601634914

Committed 30 Oct 2024 09:05PM UTC coverage: 31.325% (-0.003%) from 31.328%

Build # 11601634914

Build Type

Pull #9935

github

Committed by

web-flow

Commit Message

Merge 90f2ccde8 into d9a64dc54

Pull Request Pull Request #9935: Streamlined GlossaryEditor, improved Tooltips

Run Details

5031 of 42398 branches covered (11.87%)

Branch coverage included in aggregate %.

1 of 6 new or added lines in 3 files covered. (16.67%)

10 existing lines in 1 file now uncovered.

29647 of 68305 relevant lines covered (43.4%)

173.81 hits per line

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

16.33

/packages/lesswrong/components/jargon/JargonTooltip.tsx

import React from 'react';
import { Components, registerComponent } from '../../lib/vulcan-lib';
import Card from '@material-ui/core/Card';
import { commentBodyStyles } from '@/themes/stylePiping';
import { ContentReplacedSubstringComponentInfo } from '../common/ContentItemBody';
import { PopperPlacementType } from '@material-ui/core/Popper';
import { useGlossaryPinnedState } from '../hooks/useUpdateGlossaryPinnedState';
import { ForumIconName } from '../common/ForumIcon';

const styles = (theme: ThemeType) => ({
  card: {
    padding: 16,
    paddingBottom: 10,
    backgroundColor: theme.palette.background.pageActiveAreaBackground,
    maxWidth: 350,
    ...commentBodyStyles(theme),
    color: theme.palette.grey[700],
    marginTop: 0,
    marginBottom: 0,
  },
  jargonWord: {
    'a &': {
      // When the span is inside a link, inherit the link's color
      color: 'inherit',
    },
    '&': {
      // Default case (when not in a link)
      color: theme.palette.text.jargonTerm,
    },
  },
  metadata: {
    marginTop: 8,
    display: 'flex',
    justifyContent: 'space-between',
  },
  altTerm: {
    color: theme.palette.grey[600],
    fontSize: "0.8em",
    marginRight: 8,
  },
  unapprovedLabel: {
    color: theme.palette.grey[600],
    fontSize: "0.8em",
    marginBottom: 8,
  },
  icon: {
    width: 12,
    height: 12,
    color: theme.palette.grey[400],
    marginRight: 4,
  }
});

export const JargonTooltip = ({definitionHTML, approved, altTerms, humansAndOrAIEdited, isFirstOccurrence = false, placement="top-start", children, classes, tooltipClassName, tooltipTitleClassName, forceTooltip=false}: {
  definitionHTML: string,
  approved: boolean,
  altTerms: string[],
  humansAndOrAIEdited: JargonTermsDefaultFragment['humansAndOrAIEdited'],
  isFirstOccurrence?: boolean,
  placement?: PopperPlacementType
  children: React.ReactNode,
  classes: ClassesType<typeof styles>,
  tooltipClassName?: string,
  tooltipTitleClassName?: string,
  forceTooltip?: boolean,
}) => {
  const { LWTooltip, ContentItemBody, ForumIcon } = Components;

  const { postGlossariesPinned } = useGlossaryPinnedState();

  let humansAndOrAIEditedText = 'AI Generated'
  let icons = <ForumIcon icon="Sparkles" className={classes.icon}/>;
  if (humansAndOrAIEdited === 'humans') {
    humansAndOrAIEditedText = 'Edited by Human';
    icons = <ForumIcon icon="Pencil" className={classes.icon}/>;
  } else if (humansAndOrAIEdited === 'humansAndAI') {
    humansAndOrAIEditedText = 'Edited by AI and Human';
    icons = <> <ForumIcon icon="Sparkles" className={classes.icon}/> <ForumIcon icon="Pencil" className={classes.icon}/> </>;
  }

  const tooltip = <Card className={classes.card}>
    <ContentItemBody
      dangerouslySetInnerHTML={{ __html: definitionHTML }}
    />
    <div className={classes.metadata}>
      {humansAndOrAIEditedText && <div><span className={classes.altTerm}>
        {icons}{humansAndOrAIEditedText}
      </span></div>}

      {!approved && <div className={classes.unapprovedLabel}>Unapproved [admin only]</div>}
    </div>
  </Card>

  // Check the glossary pinned state is a bit of a hack to allow the tooltip to show up on every occurrence of a jargon term
  // when the glossary is pinned, until we fix substring replacement in general.
  if (!isFirstOccurrence && !postGlossariesPinned && !forceTooltip) {
    return <>{children}</>;
  }

  return <LWTooltip
    title={tooltip}
    tooltip={false}
    // We don't want text in the post to reflow when jargon terms are highlighted
    inlineBlock={false}
    placement={placement}
    className={tooltipClassName}
    titleClassName={tooltipTitleClassName}
  >
    <span className={classes.jargonWord}>
      {children}
    </span>
  </LWTooltip>;
}

function convertGlossaryItemToTextReplacement(glossaryItem: JargonTermsPost): ContentReplacedSubstringComponentInfo {
  // Create an array of all terms (original + alternates) to search for
  const allTerms = [glossaryItem.term, ...glossaryItem.altTerms];
  
  // First trim all terms, then sort by length and escape special chars
  const escapedTerms = allTerms
    .map(term => term.trim())
    .sort((a, b) => b.length - a.length)
    .map(term => term.replace(/[\\/$^*+?.()|[\]{}]-/g, '\\$&')); // Escape regex special chars
  
  return {
    replacedString: escapedTerms.join('|'),
    componentName: "JargonTooltip",
    replace: 'all',
    caseInsensitive: true,
    props: {
      term: glossaryItem.term,
      approved: glossaryItem.approved,
      definitionHTML: glossaryItem.contents?.html ?? '',
      altTerms: glossaryItem.altTerms,
      humansAndOrAIEdited: glossaryItem.humansAndOrAIEdited,
    },
    isRegex: true,
  };
}

export function jargonTermsToTextReplacements(terms: JargonTermsPost[]): ContentReplacedSubstringComponentInfo[] {
  return terms.map(convertGlossaryItemToTextReplacement);
}

const JargonTooltipComponent = registerComponent('JargonTooltip', JargonTooltip, {styles});

declare global {
  interface ComponentTypes {
    JargonTooltip: typeof JargonTooltipComponent
  }
}

1	import React from 'react';	3✔
2	import { Components, registerComponent } from '../../lib/vulcan-lib';	1✔
3	import Card from '@material-ui/core/Card';	1✔
4	import { commentBodyStyles } from '@/themes/stylePiping';	1✔
5	import { ContentReplacedSubstringComponentInfo } from '../common/ContentItemBody';
6	import { PopperPlacementType } from '@material-ui/core/Popper';
7	import { useGlossaryPinnedState } from '../hooks/useUpdateGlossaryPinnedState';	1✔
8	import { ForumIconName } from '../common/ForumIcon';
9
10	const styles = (theme: ThemeType) => ({	1✔
11	card: {
12	padding: 16,
13	paddingBottom: 10,
14	backgroundColor: theme.palette.background.pageActiveAreaBackground,
15	maxWidth: 350,
16	...commentBodyStyles(theme),
17	color: theme.palette.grey[700],
18	marginTop: 0,
19	marginBottom: 0,
20	},
21	jargonWord: {
22	'a &': {
23	// When the span is inside a link, inherit the link's color
24	color: 'inherit',
25	},
26	'&': {
27	// Default case (when not in a link)
28	color: theme.palette.text.jargonTerm,
29	},
30	},
31	metadata: {
32	marginTop: 8,
33	display: 'flex',
34	justifyContent: 'space-between',
35	},
36	altTerm: {
37	color: theme.palette.grey[600],
38	fontSize: "0.8em",
39	marginRight: 8,
40	},
41	unapprovedLabel: {
42	color: theme.palette.grey[600],
43	fontSize: "0.8em",
44	marginBottom: 8,
45	},
46	icon: {
47	width: 12,
48	height: 12,
49	color: theme.palette.grey[400],
50	marginRight: 4,
51	}
52	});
53
54	export const JargonTooltip = ({definitionHTML, approved, altTerms, humansAndOrAIEdited, isFirstOccurrence = false, placement="top-start", children, classes, tooltipClassName, tooltipTitleClassName, forceTooltip=false}: {	1!
55	definitionHTML: string,
56	approved: boolean,
57	altTerms: string[],
58	humansAndOrAIEdited: JargonTermsDefaultFragment['humansAndOrAIEdited'],
59	isFirstOccurrence?: boolean,
60	placement?: PopperPlacementType
61	children: React.ReactNode,
62	classes: ClassesType<typeof styles>,
63	tooltipClassName?: string,
64	tooltipTitleClassName?: string,
65	forceTooltip?: boolean,
66	}) => {
UNCOV 67	const { LWTooltip, ContentItemBody, ForumIcon } = Components;	×
68
UNCOV 69	const { postGlossariesPinned } = useGlossaryPinnedState();	×
70
UNCOV 71	let humansAndOrAIEditedText = 'AI Generated'	×
72	let icons = <ForumIcon icon="Sparkles" className={classes.icon}/>;	×
UNCOV 73	if (humansAndOrAIEdited === 'humans') {	×
74	humansAndOrAIEditedText = 'Edited by Human';	×
NEW 75	icons = <ForumIcon icon="Pencil" className={classes.icon}/>;	×
76	} else if (humansAndOrAIEdited === 'humansAndAI') {	×
77	humansAndOrAIEditedText = 'Edited by AI and Human';	×
NEW 78	icons = <> <ForumIcon icon="Sparkles" className={classes.icon}/> <ForumIcon icon="Pencil" className={classes.icon}/> </>;	×
79	}
80
NEW 81	const tooltip = <Card className={classes.card}>	×
82	<ContentItemBody
83	dangerouslySetInnerHTML={{ __html: definitionHTML }}
84	/>
85	<div className={classes.metadata}>
86	{humansAndOrAIEditedText && <div><span className={classes.altTerm}>	×
87	{icons}{humansAndOrAIEditedText}
88	</span></div>}
89
90	{!approved && <div className={classes.unapprovedLabel}>Unapproved [admin only]</div>}	×
91	</div>
92	</Card>
93
94	// Check the glossary pinned state is a bit of a hack to allow the tooltip to show up on every occurrence of a jargon term
95	// when the glossary is pinned, until we fix substring replacement in general.
UNCOV 96	if (!isFirstOccurrence && !postGlossariesPinned && !forceTooltip) {	×
UNCOV 97	return <>{children}</>;	×
98	}
99
100	return <LWTooltip	×
101	title={tooltip}
102	tooltip={false}
103	// We don't want text in the post to reflow when jargon terms are highlighted
104	inlineBlock={false}
105	placement={placement}
106	className={tooltipClassName}
107	titleClassName={tooltipTitleClassName}
108	>
109	<span className={classes.jargonWord}>
110	{children}
111	</span>
112	</LWTooltip>;
113	}
114
115	function convertGlossaryItemToTextReplacement(glossaryItem: JargonTermsPost): ContentReplacedSubstringComponentInfo {
116	// Create an array of all terms (original + alternates) to search for
UNCOV 117	const allTerms = [glossaryItem.term, ...glossaryItem.altTerms];	×
118
119	// First trim all terms, then sort by length and escape special chars
120	const escapedTerms = allTerms	×
UNCOV 121	.map(term => term.trim())	×
UNCOV 122	.sort((a, b) => b.length - a.length)	×
123	.map(term => term.replace(/[\\/$^*+?.()\|[\]{}]-/g, '\\$&')); // Escape regex special chars	×
124
125	return {	×
126	replacedString: escapedTerms.join('\|'),
127	componentName: "JargonTooltip",
128	replace: 'all',
129	caseInsensitive: true,
130	props: {
131	term: glossaryItem.term,
132	approved: glossaryItem.approved,
133	definitionHTML: glossaryItem.contents?.html ?? '',	×
134	altTerms: glossaryItem.altTerms,
135	humansAndOrAIEdited: glossaryItem.humansAndOrAIEdited,
136	},
137	isRegex: true,
138	};
139	}
140
141	export function jargonTermsToTextReplacements(terms: JargonTermsPost[]): ContentReplacedSubstringComponentInfo[] {
UNCOV 142	return terms.map(convertGlossaryItemToTextReplacement);	×
143	}
144
145	const JargonTooltipComponent = registerComponent('JargonTooltip', JargonTooltip, {styles});	1✔
146
147	declare global {
148	interface ComponentTypes {
149	JargonTooltip: typeof JargonTooltipComponent
150	}
151	}

ForumMagnum / ForumMagnum / 11601634914

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