11601812065

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

Build # 11601812065

Build Type

Pull #9935

github

Committed by

web-flow

Commit Message

Merge 68a6fa404 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 8 new or added lines in 3 files covered. (12.5%)

7 existing lines in 2 files now uncovered.

29647 of 68305 relevant lines covered (43.4%)

173.82 hits per line

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

15.83

/packages/lesswrong/components/jargon/GlossaryEditForm.tsx

import React, { useState } from 'react';
import { Components, fragmentTextForQuery, getFragment, registerComponent } from '../../lib/vulcan-lib';
import { useMutation, gql } from '@apollo/client';
import { useMulti } from '@/lib/crud/withMulti';
import Button from '@material-ui/core/Button';
import { useUpdate } from '@/lib/crud/withUpdate';
import classNames from 'classnames';
import TextField from '@material-ui/core/TextField';
import { formStyles } from './JargonEditorRow';
import { isFriendlyUI } from '@/themes/forumTheme';
import { useJargonCounts } from '@/components/hooks/useJargonCounts';

export const defaultGlossaryPrompt = `You're a Glossary AI. Your goal is to make good explanations for technical jargon terms. You are trying to produce a useful hoverover tooltip in an essay on LessWrong.com, accessible to a smart, widely read layman. 

We're about to provide you with the text of an essay, followed by a list of jargon terms for that essay. 

For each term, provide:
  
The term itself (wrapped in a strong tag), followed by a concise one-line definition. Then, on a separate paragraph, explain how the term is used in this context. Include where the term is originally from (whether it's established from an academic field, new to LessWrong or this particular post, or something else. Note what year it was first used in this context if possible).

Ensure that your explanations are clear and accessible to someone who may not be familiar with the subject matter. Follow Strunk and White guidelines. 

Use your general knowledge as well as the post's specific explanations or definitions of the terms to find a good definition of each term. 

Include a set of altTerms that are slight variations of the term, such as plurals, abbreviations or acryonyms, or alternate spellings that appear in the text. Make sure to include all variations that appear in the text.

Do NOT emphasize that the term is important, but DO explain how it's used in this context. Make sure to put the "contextual explanation" in a separate paragraph from the opening term definition. Make sure to make the term definition a short sentence.

Do NOT use the phrase "In this context", "In this post", or anything like that. Just explain the term.
`

export const defaultExamplePost = `Suppose two Bayesian agents are presented with the same spreadsheet - IID samples of data in each row, a feature in each column. Each agent develops a generative model of the data distribution. We'll assume the two converge to the same predictive distribution, but may have different generative models containing different latent variables. We'll also assume that the two agents develop their models independently, i.e. their models and latents don't have anything to do with each other informationally except via the data. Under what conditions can a latent variable in one agent's model be faithfully expressed in terms of the other agent's latents?`

export const defaultExampleLateX = `Now for the question: under what conditions on agent 1's latent(s) (Lambda^1) can we *guarantee* that (Lambda^1) is expressible in terms of (Lambda^2), no matter what generative model agent 2 uses (so long as the agents agree on the predictive distribution (P[X]))? In particular, let's require that (Lambda^1) be a function of (Lambda^2). (Note that we'll weaken this later.) So, when is (Lambda^1) *guaranteed* to be a function of (Lambda^2), for *any* generative model (M_2) which agrees on the predictive distribution (P[X])? Or, worded in terms of latents: when is (Lambda^1) *guaranteed* to be a function of (Lambda^2), for *any* latent(s) (Lambda^2) which account for all interactions between features in the predictive distribution (P[X])?
`

export interface ExampleJargonGlossaryEntry {
  term: string;
  altTerms: string[];
  text: string;
}

export const defaultExampleTerm = 'latent variables'
export const defaultExampleAltTerm = 'latents'
export const defaultExampleDefinition = `<div>
  <p><b>Latent variables:</b> Variables which an agent's world model includes but which are not directly observed.</p>
  <p>These variables are not part of the data distribution, but can help explain the data distribution.</p>
</div>`

export const defaultExampleGlossary: { glossaryItems: ExampleJargonGlossaryEntry[] } = {
  glossaryItems: [
    {
      "term": defaultExampleTerm,
      "altTerms": [defaultExampleAltTerm],
      "text": defaultExampleDefinition
    },
  ]
};


const styles = (theme: ThemeType) => ({
  root: {
    ...theme.typography.commentStyle,
    marginTop: -8,
    marginBottom: -16,
  },
  window: {
    maxHeight: 215,
    overflowY: 'scroll',
    display: 'flex',
    justifyContent: 'space-between',
  },
  expanded: {
    maxHeight: 'unset',
  },
  generateButton: {
    background: theme.palette.buttons.startReadingButtonBackground,
    fontWeight: 500,
    fontSize: 14,
    fontFamily: theme.typography.commentStyle.fontFamily,
  },
  term: {
    padding: 4,
    fontSize: '1rem',
  },
  headerButton: {
    cursor: 'pointer',
    padding: 10,
    paddingLeft: 16,
    paddingRight: 16,
    fontSize: '1.1rem',
    color: theme.palette.primary.main,
    gap: '8px',
    '&:hover': {
      opacity: 0.65  
    }
  },
  button: {
    cursor: 'pointer',
    padding: 10,
    fontSize: '1.1rem',
    display: 'flex',
    alignItems: 'center',
    gap: '8px',
    opacity: 0.6,
    '&:hover': {
      opacity: 0.8
    }
  },
  buttonRow: {
    display: 'flex',
    justifyContent: 'space-between',
    alignItems: 'center',
    paddingTop: 16
  },
  header: {
    display: 'flex',
    justifyContent: 'space-between',
    alignItems: 'center',
    padding: 12,
    paddingTop: 8,
    paddingBottom: 8,
    borderBottom: theme.palette.border.faint,
    marginBottom: 4,
  },
  headerButtons: {
    display: 'flex',
    gap: 12,
  },
  icon: {
    color: theme.palette.grey[500],
  },
  expandedTermsList: {
    position: 'sticky',
    top: 0,
    background: theme.palette.background.pageActiveAreaBackground,
    marginLeft: -16,
    marginRight: -16,
    padding: 16,
    zIndex: 1,
  },
  termsList: {
    display: 'flex',
    flexDirection: 'column',
    flexWrap: 'wrap',
    gap: '4px'
  },
  termsListColumn: {
    display: 'flex',
    flexDirection: 'column',
    gap: '4px'
  },
  smallTerm: {
    width: "calc(25% - 4px)",
  },
  mediumTerm: {
    width: "calc(50% - 4px)",
  },
  approved: {
    color: theme.palette.grey[800],
  },
  disabled: {
    opacity: 0.3,
    color: theme.palette.grey[500],
    cursor: 'not-allowed',
  },
  promptTextField: {
    marginTop: 12,
    marginBottom: 12,
  },
  formStyles: {
    ...formStyles,
    borderBottom: theme.palette.border.faint,
    paddingBottom: 10,
    paddingTop: 16,
    paddingLeft: 24,
    paddingRight: 24,
    marginBottom: 16,

  },
  newTermButton: {
    cursor: 'pointer',
    color: theme.palette.primary.main,
    fontSize: 25,
    fontWeight: 900,
    paddingLeft: 1,
    paddingRight: 7
  },
  newTermButtonCancel: {
    color: theme.palette.grey[500],
    transform: 'rotate(45deg)',
    fontWeight: 600
  },
  expandCollapseIcon: {
    cursor: 'pointer',
  },
  formSectionHeadingTitle: {
    marginBottom: 5,
    fontSize: "1.25rem",
    fontWeight: isFriendlyUI ? 600 : undefined,
  },
  formCollapsed: {
    display: 'none',
  },
});

export const GlossaryEditForm = ({ classes, document, showTitle = true }: {
  classes: ClassesType<typeof styles>,
  document: PostsPage,
  showTitle?: boolean,
}) => {
  const [formCollapsed, setFormCollapsed] = useState(false);
  const [showMoreTerms, setShowMoreTerms] = useState(false);
  const [showDeletedTerms, setShowDeletedTerms] = useState(false);

  const [glossaryPrompt, setGlossaryPrompt] = useState<string | undefined>(defaultGlossaryPrompt);
  const [examplePost, setExamplePost] = useState<string | undefined>(defaultExamplePost);
  const [exampleTerm, setExampleTerm] = useState<string | undefined>(defaultExampleTerm);
  const [exampleAltTerm, setExampleAltTerm] = useState<string | undefined>(defaultExampleAltTerm);
  const [exampleDefinition, setExampleDefinition] = useState<string | undefined>(defaultExampleDefinition);

  const [showNewJargonTermForm, setShowNewJargonTermForm] = useState(false);
  const [editingPrompt, setEditingPrompt] = useState(false);
  
  const { results: glossary = [], loadMoreProps, refetch } = useMulti({
    terms: {
      view: "postEditorJargonTerms",
      postId: document._id,
      limit: 100
    },
    collectionName: "JargonTerms",
    fragmentName: 'JargonTerms',
  })

  const { sortedTerms, getCount } = useJargonCounts(document, glossary);

  const deletedTerms = sortedTerms.filter((item) => item.deleted);
  const nonDeletedTerms = sortedTerms.filter((item) => !item.deleted);
  const sortedApprovedTerms = nonDeletedTerms.filter((item) => item.approved);
  const sortedUnapprovedTerms = nonDeletedTerms.filter((item) => !item.approved);

  const [getNewJargonTerms, { data, loading: mutationLoading, error }] = useMutation(gql`
    mutation getNewJargonTerms($postId: String!, $glossaryPrompt: String, $examplePost: String, $exampleTerm: String, $exampleAltTerm: String, $exampleDefinition: String) {
      getNewJargonTerms(postId: $postId, glossaryPrompt: $glossaryPrompt, examplePost: $examplePost, exampleTerm: $exampleTerm, exampleAltTerm: $exampleAltTerm, exampleDefinition: $exampleDefinition) {
        ...JargonTerms
      }
    }
    ${fragmentTextForQuery("JargonTerms")}
  `);

  const addNewJargonTerms = async () => {
    // TODO: maybe just disable button if no prompt?
    if (!glossaryPrompt) return;
    if (mutationLoading) return;
    
    try {
      await getNewJargonTerms({
        variables: {
          postId: document._id,
          glossaryPrompt,
          examplePost,
          exampleTerm,
          exampleAltTerm,
          exampleDefinition,
        },
      });

      refetch();
    } catch (err) {
      // eslint-disable-next-line no-console
      console.error(err);
    }
  };

  const {mutate: updateJargonTerm} = useUpdate({
    collectionName: "JargonTerms",
    fragmentName: 'JargonTerms',
  });

  const handleSetApproveAll = (approve: boolean) => {
    const termsToUpdate = approve ? sortedUnapprovedTerms : sortedApprovedTerms;
    for (const jargonTerm of termsToUpdate) {
      void updateJargonTerm({
        selector: { _id: jargonTerm._id },
        data: {
          approved: approve
        },
        optimisticResponse: {
          ...jargonTerm,
          approved: approve,
        }
      });
    }
  }

  const handleDeleteUnused = () => {
    const termsToUpdate = sortedUnapprovedTerms;
    for (const jargonTerm of termsToUpdate) {
      void updateJargonTerm({
        selector: { _id: jargonTerm._id },
        data: {
          approved: false,
          deleted: true,
        },
        optimisticResponse: {
          ...jargonTerm,
          approved: false,
          deleted: true,
        }
      });
    }
  }

  const handleUnhideAll = () => {
    for (const jargonTerm of deletedTerms) {
      void updateJargonTerm({
        selector: { _id: jargonTerm._id }, 
        data: { deleted: false },
        optimisticResponse: {
          ...jargonTerm,
          deleted: false,
        }
      });
    }
  }
  
  const { JargonEditorRow, LoadMore, Loading, LWTooltip, WrappedSmartForm, IconRight, IconDown, ForumIcon, Row } = Components;

  const promptEditor = <div>
    <TextField
      label="Prompt"
      value={glossaryPrompt}
      onChange={(e) => setGlossaryPrompt(e.target.value)}
      multiline
      fullWidth
      variant="outlined"
      className={classes.promptTextField}
      InputProps={{
        style: { minHeight: '120px', resize: 'vertical' }
      }}
    />
    <TextField
      label="Example Post"
      value={examplePost}
      onChange={(e) => setExamplePost(e.target.value)}
      multiline
      fullWidth
      variant="outlined"
      className={classes.promptTextField}
      InputProps={{
        style: { minHeight: '100px', resize: 'vertical' }
      }}
    />
    <TextField
      label="Example Term"
      value={exampleTerm}
      onChange={(e) => setExampleTerm(e.target.value)}
      fullWidth
      className={classes.promptTextField}
      variant="outlined"
    />
    <TextField
      label="Example Alt Term"
      value={exampleAltTerm}
      onChange={(e) => setExampleAltTerm(e.target.value)}
      fullWidth
      className={classes.promptTextField}
      variant="outlined"
    />
    <TextField
      label="Example Definition"
      value={exampleDefinition}
      className={classes.promptTextField}
      onChange={(e) => setExampleDefinition(e.target.value)}
      multiline
      fullWidth
      variant="outlined"
    />
  </div>

  const header = <div className={classNames(classes.header, formCollapsed && classes.formCollapsed)}>
    <LWTooltip title={showNewJargonTermForm ? "Cancel adding a new term" : "Add a new term to the glossary"}>
      <div className={classNames(classes.newTermButton, showNewJargonTermForm && classes.newTermButtonCancel)} onClick={() => setShowNewJargonTermForm(!showNewJargonTermForm)}>
        +
      </div>
    </LWTooltip>
    <div className={classes.headerButtons}>
      <LWTooltip title="Enable all glossary hoverovers for readers of this post">
        <div className={classNames(classes.headerButton, sortedApprovedTerms.length !== 0 && classes.disabled)} 
          onClick={() => handleSetApproveAll(true)}>
          ENABLE ALL{ sortedUnapprovedTerms.length > 0 ? ` (${sortedUnapprovedTerms.length})` : '' }
        </div>
      </LWTooltip>
      <LWTooltip title="Disable all glossary hoverovers for readers of this post">
        <div className={classNames(classes.headerButton, sortedUnapprovedTerms.length !== 0 && classes.disabled)} 
          onClick={() => handleSetApproveAll(false)}>
          DISABLE ALL{ sortedApprovedTerms.length > 0 ?  ` (${sortedApprovedTerms.length})` : '' }
        </div>
      </LWTooltip>
      <LWTooltip title={<div><p>Hide all terms that aren't currently enabled</p><p>(you can unhide them later)</p></div>}>
        <div className={classNames(classes.headerButton, sortedUnapprovedTerms.length === 0 && classes.disabled)} onClick={handleDeleteUnused}>HIDE DISABLED TERMS</div>
      </LWTooltip>
      <LWTooltip title="Unhide all deleted terms">
        <div className={classNames(classes.headerButton, deletedTerms.length === 0 && classes.disabled)} onClick={handleUnhideAll}>
          UNHIDE ALL{ deletedTerms.length > 0 ? ` (${deletedTerms.length})` : '' }
        </div>
      </LWTooltip>
    </div>
  </div>

  const footer = <div className={classNames(classes.buttonRow, formCollapsed && classes.formCollapsed)}>
    <Button onClick={addNewJargonTerms} className={classNames(classes.generateButton, mutationLoading && classes.disabled)}>Generate new terms</Button>
    <div className={classes.headerButtons}>
      <LWTooltip title="Make changes to the jargon generator LLM prompt">
        <div className={classes.headerButton} onClick={() => setEditingPrompt(!editingPrompt)}>{editingPrompt ? "SAVE PROMPT" : "EDIT PROMPT"}</div>
      </LWTooltip>
    </div>
    <div className={classes.button} onClick={() => setShowMoreTerms(!showMoreTerms)}>
      {showMoreTerms 
        ? <>SHOW LESS</>
        : <>SHOW MORE</>
      }
    </div>
    {mutationLoading && <Loading/>}
    {mutationLoading && <div>(Loading... warning, this will take 10-20 seconds.)</div>}
  </div>

  return <div className={classes.root}>
    {showTitle && <Row justifyContent="space-between" alignItems="flex-start">
      <LWTooltip title="Beta feature! Select/edit terms below, and readers will be able to hover over and read the explanation.">
        <h3 className={classes.formSectionHeadingTitle}>Glossary [Beta]</h3>
      </LWTooltip>
      <div className={classes.expandCollapseIcon} onClick={() => setFormCollapsed(!formCollapsed)}>{formCollapsed ? <IconRight height={16} width={16} /> : <IconDown height={16} width={16} />}</div>
    </Row>}
    {header}
    <div className={classNames(classes.window, showMoreTerms && classes.expanded, formCollapsed && classes.formCollapsed)}>
      <div>
        {showNewJargonTermForm && <div className={classes.root}>
          <div className={classes.formStyles}>
            <WrappedSmartForm
              collectionName="JargonTerms"
              mutationFragment={getFragment('JargonTerms')}
              queryFragment={getFragment('JargonTerms')}
              formComponents={{ FormSubmit: Components.JargonSubmitButton }}
              prefilledProps={{ postId: document._id }}
              cancelCallback={() => setShowNewJargonTermForm(false)}
              successCallback={() => setShowNewJargonTermForm(false)}
            />
          </div>
        </div>}
        {nonDeletedTerms.map((item) => {
          return <JargonEditorRow 
            key={item._id} 
            jargonTerm={item} 
            instancesOfJargonCount={getCount(item)}
            setShowMoreTerms={setShowMoreTerms}
          />;
        })}
        {deletedTerms.length > 0 && <div className={classes.button} onClick={() => setShowDeletedTerms(!showDeletedTerms)}>
          {showDeletedTerms ? "Hide deleted terms" : `Show deleted terms (${deletedTerms.length})`}
        </div>}
        {deletedTerms.length > 0 && showDeletedTerms && deletedTerms.map((item) => {
          return <JargonEditorRow key={item._id} jargonTerm={item} instancesOfJargonCount={getCount(item)} setShowMoreTerms={setShowMoreTerms}/>
        })}

      </div>
      <LoadMore {...loadMoreProps} />
    </div>
    {footer}
    {editingPrompt && promptEditor}

  </div>;
}

const GlossaryEditFormComponent = registerComponent('GlossaryEditForm', GlossaryEditForm, {styles});

declare global {
  interface ComponentTypes {
    GlossaryEditForm: typeof GlossaryEditFormComponent
  }
}


1	import React, { useState } from 'react';	54✔
2	import { Components, fragmentTextForQuery, getFragment, registerComponent } from '../../lib/vulcan-lib';	18✔
3	import { useMutation, gql } from '@apollo/client';	18✔
4	import { useMulti } from '@/lib/crud/withMulti';	18✔
5	import Button from '@material-ui/core/Button';	18✔
6	import { useUpdate } from '@/lib/crud/withUpdate';	18✔
7	import classNames from 'classnames';	18✔
8	import TextField from '@material-ui/core/TextField';	18✔
9	import { formStyles } from './JargonEditorRow';	18✔
10	import { isFriendlyUI } from '@/themes/forumTheme';	18✔
11	import { useJargonCounts } from '@/components/hooks/useJargonCounts';	18✔
12
13	export const defaultGlossaryPrompt = `You're a Glossary AI. Your goal is to make good explanations for technical jargon terms. You are trying to produce a useful hoverover tooltip in an essay on LessWrong.com, accessible to a smart, widely read layman.	18✔
14
15	We're about to provide you with the text of an essay, followed by a list of jargon terms for that essay.
16
17	For each term, provide:
18
19	The term itself (wrapped in a strong tag), followed by a concise one-line definition. Then, on a separate paragraph, explain how the term is used in this context. Include where the term is originally from (whether it's established from an academic field, new to LessWrong or this particular post, or something else. Note what year it was first used in this context if possible).
20
21	Ensure that your explanations are clear and accessible to someone who may not be familiar with the subject matter. Follow Strunk and White guidelines.
22
23	Use your general knowledge as well as the post's specific explanations or definitions of the terms to find a good definition of each term.
24
25	Include a set of altTerms that are slight variations of the term, such as plurals, abbreviations or acryonyms, or alternate spellings that appear in the text. Make sure to include all variations that appear in the text.
26
27	Do NOT emphasize that the term is important, but DO explain how it's used in this context. Make sure to put the "contextual explanation" in a separate paragraph from the opening term definition. Make sure to make the term definition a short sentence.
28
29	Do NOT use the phrase "In this context", "In this post", or anything like that. Just explain the term.
30	`
31
32	export const defaultExamplePost = `Suppose two Bayesian agents are presented with the same spreadsheet - IID samples of data in each row, a feature in each column. Each agent develops a generative model of the data distribution. We'll assume the two converge to the same predictive distribution, but may have different generative models containing different latent variables. We'll also assume that the two agents develop their models independently, i.e. their models and latents don't have anything to do with each other informationally except via the data. Under what conditions can a latent variable in one agent's model be faithfully expressed in terms of the other agent's latents?`	18✔
33
34	export const defaultExampleLateX = `Now for the question: under what conditions on agent 1's latent(s) (Lambda^1) can we guarantee that (Lambda^1) is expressible in terms of (Lambda^2), no matter what generative model agent 2 uses (so long as the agents agree on the predictive distribution (P[X]))? In particular, let's require that (Lambda^1) be a function of (Lambda^2). (Note that we'll weaken this later.) So, when is (Lambda^1) guaranteed to be a function of (Lambda^2), for any generative model (M_2) which agrees on the predictive distribution (P[X])? Or, worded in terms of latents: when is (Lambda^1) guaranteed to be a function of (Lambda^2), for any latent(s) (Lambda^2) which account for all interactions between features in the predictive distribution (P[X])?	18✔
35	`
36
37	export interface ExampleJargonGlossaryEntry {
38	term: string;
39	altTerms: string[];
40	text: string;
41	}
42
43	export const defaultExampleTerm = 'latent variables'	18✔
44	export const defaultExampleAltTerm = 'latents'	18✔
45	export const defaultExampleDefinition = `<div>	18✔
46	<p><b>Latent variables:</b> Variables which an agent's world model includes but which are not directly observed.</p>
47	<p>These variables are not part of the data distribution, but can help explain the data distribution.</p>
48	</div>`
49
50	export const defaultExampleGlossary: { glossaryItems: ExampleJargonGlossaryEntry[] } = {	18✔
51	glossaryItems: [
52	{
53	"term": defaultExampleTerm,
54	"altTerms": [defaultExampleAltTerm],
55	"text": defaultExampleDefinition
56	},
57	]
58	};
59
60
61	const styles = (theme: ThemeType) => ({	18✔
62	root: {
63	...theme.typography.commentStyle,
64	marginTop: -8,
65	marginBottom: -16,
66	},
67	window: {
68	maxHeight: 215,
69	overflowY: 'scroll',
70	display: 'flex',
71	justifyContent: 'space-between',
72	},
73	expanded: {
74	maxHeight: 'unset',
75	},
76	generateButton: {
77	background: theme.palette.buttons.startReadingButtonBackground,
78	fontWeight: 500,
79	fontSize: 14,
80	fontFamily: theme.typography.commentStyle.fontFamily,
81	},
82	term: {
83	padding: 4,
84	fontSize: '1rem',
85	},
86	headerButton: {
87	cursor: 'pointer',
88	padding: 10,
89	paddingLeft: 16,
90	paddingRight: 16,
91	fontSize: '1.1rem',
92	color: theme.palette.primary.main,
93	gap: '8px',
94	'&:hover': {
95	opacity: 0.65
96	}
97	},
98	button: {
99	cursor: 'pointer',
100	padding: 10,
101	fontSize: '1.1rem',
102	display: 'flex',
103	alignItems: 'center',
104	gap: '8px',
105	opacity: 0.6,
106	'&:hover': {
107	opacity: 0.8
108	}
109	},
110	buttonRow: {
111	display: 'flex',
112	justifyContent: 'space-between',
113	alignItems: 'center',
114	paddingTop: 16
115	},
116	header: {
117	display: 'flex',
118	justifyContent: 'space-between',
119	alignItems: 'center',
120	padding: 12,
121	paddingTop: 8,
122	paddingBottom: 8,
123	borderBottom: theme.palette.border.faint,
124	marginBottom: 4,
125	},
126	headerButtons: {
127	display: 'flex',
128	gap: 12,
129	},
130	icon: {
131	color: theme.palette.grey[500],
132	},
133	expandedTermsList: {
134	position: 'sticky',
135	top: 0,
136	background: theme.palette.background.pageActiveAreaBackground,
137	marginLeft: -16,
138	marginRight: -16,
139	padding: 16,
140	zIndex: 1,
141	},
142	termsList: {
143	display: 'flex',
144	flexDirection: 'column',
145	flexWrap: 'wrap',
146	gap: '4px'
147	},
148	termsListColumn: {
149	display: 'flex',
150	flexDirection: 'column',
151	gap: '4px'
152	},
153	smallTerm: {
154	width: "calc(25% - 4px)",
155	},
156	mediumTerm: {
157	width: "calc(50% - 4px)",
158	},
159	approved: {
160	color: theme.palette.grey[800],
161	},
162	disabled: {
163	opacity: 0.3,
164	color: theme.palette.grey[500],
165	cursor: 'not-allowed',
166	},
167	promptTextField: {
168	marginTop: 12,
169	marginBottom: 12,
170	},
171	formStyles: {
172	...formStyles,
173	borderBottom: theme.palette.border.faint,
174	paddingBottom: 10,
175	paddingTop: 16,
176	paddingLeft: 24,
177	paddingRight: 24,
178	marginBottom: 16,
179
180	},
181	newTermButton: {
182	cursor: 'pointer',
183	color: theme.palette.primary.main,
184	fontSize: 25,
185	fontWeight: 900,
186	paddingLeft: 1,
187	paddingRight: 7
188	},
189	newTermButtonCancel: {
190	color: theme.palette.grey[500],
191	transform: 'rotate(45deg)',
192	fontWeight: 600
193	},
194	expandCollapseIcon: {
195	cursor: 'pointer',
196	},
197	formSectionHeadingTitle: {
198	marginBottom: 5,
199	fontSize: "1.25rem",
200	fontWeight: isFriendlyUI ? 600 : undefined,	1!
201	},
202	formCollapsed: {
203	display: 'none',
204	},
205	});
206
207	export const GlossaryEditForm = ({ classes, document, showTitle = true }: {	18!
208	classes: ClassesType<typeof styles>,
209	document: PostsPage,
210	showTitle?: boolean,
211	}) => {
212	const [formCollapsed, setFormCollapsed] = useState(false);	×
213	const [showMoreTerms, setShowMoreTerms] = useState(false);	×
214	const [showDeletedTerms, setShowDeletedTerms] = useState(false);	×
215
216	const [glossaryPrompt, setGlossaryPrompt] = useState<string \| undefined>(defaultGlossaryPrompt);	×
217	const [examplePost, setExamplePost] = useState<string \| undefined>(defaultExamplePost);	×
218	const [exampleTerm, setExampleTerm] = useState<string \| undefined>(defaultExampleTerm);	×
219	const [exampleAltTerm, setExampleAltTerm] = useState<string \| undefined>(defaultExampleAltTerm);	×
220	const [exampleDefinition, setExampleDefinition] = useState<string \| undefined>(defaultExampleDefinition);	×
221
222	const [showNewJargonTermForm, setShowNewJargonTermForm] = useState(false);	×
223	const [editingPrompt, setEditingPrompt] = useState(false);	×
224
225	const { results: glossary = [], loadMoreProps, refetch } = useMulti({	×
226	terms: {
227	view: "postEditorJargonTerms",
228	postId: document._id,
229	limit: 100
230	},
231	collectionName: "JargonTerms",
232	fragmentName: 'JargonTerms',
233	})
234
235	const { sortedTerms, getCount } = useJargonCounts(document, glossary);	×
236
237	const deletedTerms = sortedTerms.filter((item) => item.deleted);	×
238	const nonDeletedTerms = sortedTerms.filter((item) => !item.deleted);	×
239	const sortedApprovedTerms = nonDeletedTerms.filter((item) => item.approved);	×
240	const sortedUnapprovedTerms = nonDeletedTerms.filter((item) => !item.approved);	×
241
242	const [getNewJargonTerms, { data, loading: mutationLoading, error }] = useMutation(gql`	×
243	mutation getNewJargonTerms($postId: String!, $glossaryPrompt: String, $examplePost: String, $exampleTerm: String, $exampleAltTerm: String, $exampleDefinition: String) {
244	getNewJargonTerms(postId: $postId, glossaryPrompt: $glossaryPrompt, examplePost: $examplePost, exampleTerm: $exampleTerm, exampleAltTerm: $exampleAltTerm, exampleDefinition: $exampleDefinition) {
245	...JargonTerms
246	}
247	}
248	${fragmentTextForQuery("JargonTerms")}
249	`);
250
251	const addNewJargonTerms = async () => {	×
252	// TODO: maybe just disable button if no prompt?
253	if (!glossaryPrompt) return;	×
254	if (mutationLoading) return;	×
255
256	try {	×
257	await getNewJargonTerms({	×
258	variables: {
259	postId: document._id,
260	glossaryPrompt,
261	examplePost,
262	exampleTerm,
263	exampleAltTerm,
264	exampleDefinition,
265	},
266	});
267
268	refetch();	×
269	} catch (err) {
270	// eslint-disable-next-line no-console
271	console.error(err);	×
272	}
273	};
274
275	const {mutate: updateJargonTerm} = useUpdate({	×
276	collectionName: "JargonTerms",
277	fragmentName: 'JargonTerms',
278	});
279
280	const handleSetApproveAll = (approve: boolean) => {	×
281	const termsToUpdate = approve ? sortedUnapprovedTerms : sortedApprovedTerms;	×
282	for (const jargonTerm of termsToUpdate) {	×
283	void updateJargonTerm({	×
284	selector: { _id: jargonTerm._id },
285	data: {
286	approved: approve
287	},
288	optimisticResponse: {
289	...jargonTerm,
290	approved: approve,
291	}
292	});
293	}
294	}
295
296	const handleDeleteUnused = () => {	×
297	const termsToUpdate = sortedUnapprovedTerms;	×
298	for (const jargonTerm of termsToUpdate) {	×
299	void updateJargonTerm({	×
300	selector: { _id: jargonTerm._id },
301	data: {
302	approved: false,
303	deleted: true,
304	},
305	optimisticResponse: {
306	...jargonTerm,
307	approved: false,
308	deleted: true,
309	}
310	});
311	}
312	}
313
314	const handleUnhideAll = () => {	×
315	for (const jargonTerm of deletedTerms) {	×
316	void updateJargonTerm({	×
317	selector: { _id: jargonTerm._id },
318	data: { deleted: false },
319	optimisticResponse: {
320	...jargonTerm,
321	deleted: false,
322	}
323	});
324	}
325	}
326
327	const { JargonEditorRow, LoadMore, Loading, LWTooltip, WrappedSmartForm, IconRight, IconDown, ForumIcon, Row } = Components;	×
328
329	const promptEditor = <div>	×
330	<TextField
331	label="Prompt"
332	value={glossaryPrompt}
333	onChange={(e) => setGlossaryPrompt(e.target.value)}	×
334	multiline
335	fullWidth
336	variant="outlined"
337	className={classes.promptTextField}
338	InputProps={{
339	style: { minHeight: '120px', resize: 'vertical' }
340	}}
341	/>
342	<TextField
343	label="Example Post"
344	value={examplePost}
345	onChange={(e) => setExamplePost(e.target.value)}	×
346	multiline
347	fullWidth
348	variant="outlined"
349	className={classes.promptTextField}
350	InputProps={{
351	style: { minHeight: '100px', resize: 'vertical' }
352	}}
353	/>
354	<TextField
355	label="Example Term"
356	value={exampleTerm}
357	onChange={(e) => setExampleTerm(e.target.value)}	×
358	fullWidth
359	className={classes.promptTextField}
360	variant="outlined"
361	/>
362	<TextField
363	label="Example Alt Term"
364	value={exampleAltTerm}
365	onChange={(e) => setExampleAltTerm(e.target.value)}	×
366	fullWidth
367	className={classes.promptTextField}
368	variant="outlined"
369	/>
370	<TextField
371	label="Example Definition"
372	value={exampleDefinition}
373	className={classes.promptTextField}
374	onChange={(e) => setExampleDefinition(e.target.value)}	×
375	multiline
376	fullWidth
377	variant="outlined"
378	/>
379	</div>
380
381	const header = <div className={classNames(classes.header, formCollapsed && classes.formCollapsed)}>	×
382	<LWTooltip title={showNewJargonTermForm ? "Cancel adding a new term" : "Add a new term to the glossary"}>	×
383	<div className={classNames(classes.newTermButton, showNewJargonTermForm && classes.newTermButtonCancel)} onClick={() => setShowNewJargonTermForm(!showNewJargonTermForm)}>	×
384	+
385	</div>
386	</LWTooltip>
387	<div className={classes.headerButtons}>
388	<LWTooltip title="Enable all glossary hoverovers for readers of this post">
389	<div className={classNames(classes.headerButton, sortedApprovedTerms.length !== 0 && classes.disabled)}	×
390	onClick={() => handleSetApproveAll(true)}>	×
391	ENABLE ALL{ sortedUnapprovedTerms.length > 0 ? ` (${sortedUnapprovedTerms.length})` : '' }	×
392	</div>
393	</LWTooltip>
394	<LWTooltip title="Disable all glossary hoverovers for readers of this post">
395	<div className={classNames(classes.headerButton, sortedUnapprovedTerms.length !== 0 && classes.disabled)}	×
396	onClick={() => handleSetApproveAll(false)}>	×
397	DISABLE ALL{ sortedApprovedTerms.length > 0 ? ` (${sortedApprovedTerms.length})` : '' }	×
398	</div>
399	</LWTooltip>
400	<LWTooltip title={<div><p>Hide all terms that aren't currently enabled</p><p>(you can unhide them later)</p></div>}>
401	<div className={classNames(classes.headerButton, sortedUnapprovedTerms.length === 0 && classes.disabled)} onClick={handleDeleteUnused}>HIDE DISABLED TERMS</div>	×
402	</LWTooltip>
403	<LWTooltip title="Unhide all deleted terms">
404	<div className={classNames(classes.headerButton, deletedTerms.length === 0 && classes.disabled)} onClick={handleUnhideAll}>	×
405	UNHIDE ALL{ deletedTerms.length > 0 ? ` (${deletedTerms.length})` : '' }	×
406	</div>
407	</LWTooltip>
408	</div>
409	</div>
410
411	const footer = <div className={classNames(classes.buttonRow, formCollapsed && classes.formCollapsed)}>	×
412	<Button onClick={addNewJargonTerms} className={classNames(classes.generateButton, mutationLoading && classes.disabled)}>Generate new terms</Button>	×
413	<div className={classes.headerButtons}>
414	<LWTooltip title="Make changes to the jargon generator LLM prompt">
415	<div className={classes.headerButton} onClick={() => setEditingPrompt(!editingPrompt)}>{editingPrompt ? "SAVE PROMPT" : "EDIT PROMPT"}</div>	×
416	</LWTooltip>
417	</div>
418	<div className={classes.button} onClick={() => setShowMoreTerms(!showMoreTerms)}>	×
419	{showMoreTerms
420	? <>SHOW LESS</>	×
421	: <>SHOW MORE</>
422	}
423	</div>
424	{mutationLoading && <Loading/>}	×
425	{mutationLoading && <div>(Loading... warning, this will take 10-20 seconds.)</div>}	×
426	</div>
427
428	return <div className={classes.root}>	×
429	{showTitle && <Row justifyContent="space-between" alignItems="flex-start">	×
430	<LWTooltip title="Beta feature! Select/edit terms below, and readers will be able to hover over and read the explanation.">
431	<h3 className={classes.formSectionHeadingTitle}>Glossary [Beta]</h3>
432	</LWTooltip>
433	<div className={classes.expandCollapseIcon} onClick={() => setFormCollapsed(!formCollapsed)}>{formCollapsed ? <IconRight height={16} width={16} /> : <IconDown height={16} width={16} />}</div>	×
434	</Row>}
435	{header}
436	<div className={classNames(classes.window, showMoreTerms && classes.expanded, formCollapsed && classes.formCollapsed)}>	×
437	<div>
438	{showNewJargonTermForm && <div className={classes.root}>	×
439	<div className={classes.formStyles}>
440	<WrappedSmartForm
441	collectionName="JargonTerms"
442	mutationFragment={getFragment('JargonTerms')}
443	queryFragment={getFragment('JargonTerms')}
444	formComponents={{ FormSubmit: Components.JargonSubmitButton }}
445	prefilledProps={{ postId: document._id }}
446	cancelCallback={() => setShowNewJargonTermForm(false)}	×
447	successCallback={() => setShowNewJargonTermForm(false)}	×
448	/>
449	</div>
450	</div>}
451	{nonDeletedTerms.map((item) => {
452	return <JargonEditorRow	×
453	key={item._id}
454	jargonTerm={item}
455	instancesOfJargonCount={getCount(item)}
456	setShowMoreTerms={setShowMoreTerms}
457	/>;
458	})}
459	{deletedTerms.length > 0 && <div className={classes.button} onClick={() => setShowDeletedTerms(!showDeletedTerms)}>	×
460	{showDeletedTerms ? "Hide deleted terms" : `Show deleted terms (${deletedTerms.length})`}	×
461	</div>}
462	{deletedTerms.length > 0 && showDeletedTerms && deletedTerms.map((item) => {	×
NEW 463	return <JargonEditorRow key={item._id} jargonTerm={item} instancesOfJargonCount={getCount(item)} setShowMoreTerms={setShowMoreTerms}/>	×
464	})}
465
466	</div>
467	<LoadMore {...loadMoreProps} />
468	</div>
469	{footer}
470	{editingPrompt && promptEditor}	×
471
472	</div>;
473	}
474
475	const GlossaryEditFormComponent = registerComponent('GlossaryEditForm', GlossaryEditForm, {styles});	18✔
476
477	declare global {
478	interface ComponentTypes {
479	GlossaryEditForm: typeof GlossaryEditFormComponent
480	}
481	}
482

ForumMagnum / ForumMagnum / 11601812065

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