11526014462

Committed 25 Oct 2024 10:04PM UTC coverage: 31.365% (-0.002%) from 31.367%

Build # 11526014462

Build Type

push

github

Committed by

b0b3rt

Commit Message

fix glossary form group styling

Run Details

5033 of 42268 branches covered (11.91%)

Branch coverage included in aggregate %.

0 of 6 new or added lines in 1 file covered. (0.0%)

1 existing line in 1 file now uncovered.

29619 of 68212 relevant lines covered (43.42%)

174.04 hits per line

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

17.19

/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.
`

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: 300,
    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: 7,
    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;
    
    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
        </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
        </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})
        </div>
      </LWTooltip>
    </div>
  </div>

  const footer = <div className={classNames(classes.buttonRow, formCollapsed && classes.formCollapsed)}>
    <Button onClick={addNewJargonTerms} className={classes.generateButton}>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 30-60 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)}
          />;
        })}
        {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)}/>
        })}

      </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
30	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✔
31
32	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✔
33	`
34
35	export interface ExampleJargonGlossaryEntry {
36	term: string;
37	altTerms: string[];
38	text: string;
39	}
40
41	export const defaultExampleTerm = 'latent variables'	18✔
42	export const defaultExampleAltTerm = 'latents'	18✔
43	export const defaultExampleDefinition = `<div>	18✔
44	<p><b>Latent variables:</b> Variables which an agent's world model includes but which are not directly observed.</p>
45	<p>These variables are not part of the data distribution, but can help explain the data distribution.</p>
46	</div>`
47
48	export const defaultExampleGlossary: { glossaryItems: ExampleJargonGlossaryEntry[] } = {	18✔
49	glossaryItems: [
50	{
51	"term": defaultExampleTerm,
52	"altTerms": [defaultExampleAltTerm],
53	"text": defaultExampleDefinition
54	},
55	]
56	};
57
58
59	const styles = (theme: ThemeType) => ({	18✔
60	root: {
61	...theme.typography.commentStyle,
62	marginTop: -8,
63	marginBottom: -16,
64	},
65	window: {
66	maxHeight: 300,
67	overflowY: 'scroll',
68	display: 'flex',
69	justifyContent: 'space-between',
70	},
71	expanded: {
72	maxHeight: 'unset',
73	},
74	generateButton: {
75	background: theme.palette.buttons.startReadingButtonBackground,
76	fontWeight: 500,
77	fontSize: 14,
78	fontFamily: theme.typography.commentStyle.fontFamily,
79	},
80	term: {
81	padding: 4,
82	fontSize: '1rem',
83	},
84	headerButton: {
85	cursor: 'pointer',
86	padding: 10,
87	paddingLeft: 16,
88	paddingRight: 16,
89	fontSize: '1.1rem',
90	color: theme.palette.primary.main,
91	gap: '8px',
92	'&:hover': {
93	opacity: 0.65
94	}
95	},
96	button: {
97	cursor: 'pointer',
98	padding: 10,
99	fontSize: '1.1rem',
100	display: 'flex',
101	alignItems: 'center',
102	gap: '8px',
103	opacity: 0.6,
104	'&:hover': {
105	opacity: 0.8
106	}
107	},
108	buttonRow: {
109	display: 'flex',
110	justifyContent: 'space-between',
111	alignItems: 'center',
112	paddingTop: 16
113	},
114	header: {
115	display: 'flex',
116	justifyContent: 'space-between',
117	alignItems: 'center',
118	padding: 12,
119	paddingTop: 8,
120	paddingBottom: 8,
121	borderBottom: theme.palette.border.faint,
122	marginBottom: 4,
123	},
124	headerButtons: {
125	display: 'flex',
126	gap: 12,
127	},
128	icon: {
129	color: theme.palette.grey[500],
130	},
131	expandedTermsList: {
132	position: 'sticky',
133	top: 0,
134	background: theme.palette.background.pageActiveAreaBackground,
135	marginLeft: -16,
136	marginRight: -16,
137	padding: 16,
138	zIndex: 1,
139	},
140	termsList: {
141	display: 'flex',
142	flexDirection: 'column',
143	flexWrap: 'wrap',
144	gap: '4px'
145	},
146	termsListColumn: {
147	display: 'flex',
148	flexDirection: 'column',
149	gap: '4px'
150	},
151	smallTerm: {
152	width: "calc(25% - 4px)",
153	},
154	mediumTerm: {
155	width: "calc(50% - 4px)",
156	},
157	approved: {
158	color: theme.palette.grey[800],
159	},
160	disabled: {
161	opacity: 0.3,
162	color: theme.palette.grey[500],
163	cursor: 'not-allowed',
164	},
165	promptTextField: {
166	marginTop: 12,
167	marginBottom: 12,
168	},
169	formStyles: {
170	...formStyles,
171	borderBottom: theme.palette.border.faint,
172	paddingBottom: 10,
173	paddingTop: 16,
174	paddingLeft: 24,
175	paddingRight: 24,
176	marginBottom: 16,
177
178	},
179	newTermButton: {
180	cursor: 'pointer',
181	color: theme.palette.primary.main,
182	fontSize: 25,
183	fontWeight: 900,
184	paddingLeft: 7,
185	paddingRight: 7
186	},
187	newTermButtonCancel: {
188	color: theme.palette.grey[500],
189	transform: 'rotate(45deg)',
190	fontWeight: 600
191	},
192	expandCollapseIcon: {
193	cursor: 'pointer',
194	},
195	formSectionHeadingTitle: {
196	marginBottom: 5,
197	fontSize: "1.25rem",
198	fontWeight: isFriendlyUI ? 600 : undefined,	1!
199	},
200	formCollapsed: {
201	display: 'none',
202	},
203	});
204
205	export const GlossaryEditForm = ({ classes, document, showTitle = true }: {	18!
206	classes: ClassesType<typeof styles>,
207	document: PostsPage,
208	showTitle?: boolean,
209	}) => {
NEW 210	const [formCollapsed, setFormCollapsed] = useState(false);	×
NEW 211	const [showMoreTerms, setShowMoreTerms] = useState(false);	×
UNCOV 212	const [showDeletedTerms, setShowDeletedTerms] = useState(false);	×
213
214	const [glossaryPrompt, setGlossaryPrompt] = useState<string \| undefined>(defaultGlossaryPrompt);	×
215	const [examplePost, setExamplePost] = useState<string \| undefined>(defaultExamplePost);	×
216	const [exampleTerm, setExampleTerm] = useState<string \| undefined>(defaultExampleTerm);	×
217	const [exampleAltTerm, setExampleAltTerm] = useState<string \| undefined>(defaultExampleAltTerm);	×
218	const [exampleDefinition, setExampleDefinition] = useState<string \| undefined>(defaultExampleDefinition);	×
219
220	const [showNewJargonTermForm, setShowNewJargonTermForm] = useState(false);	×
221	const [editingPrompt, setEditingPrompt] = useState(false);	×
222
223	const { results: glossary = [], loadMoreProps, refetch } = useMulti({	×
224	terms: {
225	view: "postEditorJargonTerms",
226	postId: document._id,
227	limit: 100
228	},
229	collectionName: "JargonTerms",
230	fragmentName: 'JargonTerms',
231	})
232
233	const { sortedTerms, getCount } = useJargonCounts(document, glossary);	×
234
235	const deletedTerms = sortedTerms.filter((item) => item.deleted);	×
236	const nonDeletedTerms = sortedTerms.filter((item) => !item.deleted);	×
237	const sortedApprovedTerms = nonDeletedTerms.filter((item) => item.approved);	×
238	const sortedUnapprovedTerms = nonDeletedTerms.filter((item) => !item.approved);	×
239
240	const [getNewJargonTerms, { data, loading: mutationLoading, error }] = useMutation(gql`	×
241	mutation getNewJargonTerms($postId: String!, $glossaryPrompt: String, $examplePost: String, $exampleTerm: String, $exampleAltTerm: String, $exampleDefinition: String) {
242	getNewJargonTerms(postId: $postId, glossaryPrompt: $glossaryPrompt, examplePost: $examplePost, exampleTerm: $exampleTerm, exampleAltTerm: $exampleAltTerm, exampleDefinition: $exampleDefinition) {
243	...JargonTerms
244	}
245	}
246	${fragmentTextForQuery("JargonTerms")}
247	`);
248
249	const addNewJargonTerms = async () => {	×
250	// TODO: maybe just disable button if no prompt?
251	if (!glossaryPrompt) return;	×
252
253	try {	×
254	await getNewJargonTerms({	×
255	variables: {
256	postId: document._id,
257	glossaryPrompt,
258	examplePost,
259	exampleTerm,
260	exampleAltTerm,
261	exampleDefinition,
262	},
263	});
264
265	refetch();	×
266	} catch (err) {
267	// eslint-disable-next-line no-console
268	console.error(err);	×
269	}
270	};
271
272	const {mutate: updateJargonTerm} = useUpdate({	×
273	collectionName: "JargonTerms",
274	fragmentName: 'JargonTerms',
275	});
276
277	const handleSetApproveAll = (approve: boolean) => {	×
278	const termsToUpdate = approve ? sortedUnapprovedTerms : sortedApprovedTerms;	×
279	for (const jargonTerm of termsToUpdate) {	×
280	void updateJargonTerm({	×
281	selector: { _id: jargonTerm._id },
282	data: {
283	approved: approve
284	},
285	optimisticResponse: {
286	...jargonTerm,
287	approved: approve,
288	}
289	});
290	}
291	}
292
293	const handleDeleteUnused = () => {	×
294	const termsToUpdate = sortedUnapprovedTerms;	×
295	for (const jargonTerm of termsToUpdate) {	×
296	void updateJargonTerm({	×
297	selector: { _id: jargonTerm._id },
298	data: {
299	approved: false,
300	deleted: true,
301	},
302	optimisticResponse: {
303	...jargonTerm,
304	approved: false,
305	deleted: true,
306	}
307	});
308	}
309	}
310
311	const handleUnhideAll = () => {	×
312	for (const jargonTerm of deletedTerms) {	×
313	void updateJargonTerm({	×
314	selector: { _id: jargonTerm._id },
315	data: { deleted: false },
316	optimisticResponse: {
317	...jargonTerm,
318	deleted: false,
319	}
320	});
321	}
322	}
323
324	const { JargonEditorRow, LoadMore, Loading, LWTooltip, WrappedSmartForm, IconRight, IconDown, ForumIcon, Row } = Components;	×
325
326	const promptEditor = <div>	×
327	<TextField
328	label="Prompt"
329	value={glossaryPrompt}
330	onChange={(e) => setGlossaryPrompt(e.target.value)}	×
331	multiline
332	fullWidth
333	variant="outlined"
334	className={classes.promptTextField}
335	InputProps={{
336	style: { minHeight: '120px', resize: 'vertical' }
337	}}
338	/>
339	<TextField
340	label="Example Post"
341	value={examplePost}
342	onChange={(e) => setExamplePost(e.target.value)}	×
343	multiline
344	fullWidth
345	variant="outlined"
346	className={classes.promptTextField}
347	InputProps={{
348	style: { minHeight: '100px', resize: 'vertical' }
349	}}
350	/>
351	<TextField
352	label="Example Term"
353	value={exampleTerm}
354	onChange={(e) => setExampleTerm(e.target.value)}	×
355	fullWidth
356	className={classes.promptTextField}
357	variant="outlined"
358	/>
359	<TextField
360	label="Example Alt Term"
361	value={exampleAltTerm}
362	onChange={(e) => setExampleAltTerm(e.target.value)}	×
363	fullWidth
364	className={classes.promptTextField}
365	variant="outlined"
366	/>
367	<TextField
368	label="Example Definition"
369	value={exampleDefinition}
370	className={classes.promptTextField}
371	onChange={(e) => setExampleDefinition(e.target.value)}	×
372	multiline
373	fullWidth
374	variant="outlined"
375	/>
376	</div>
377
NEW 378	const header = <div className={classNames(classes.header, formCollapsed && classes.formCollapsed)}>	×
379	<LWTooltip title={showNewJargonTermForm ? "Cancel adding a new term" : "Add a new term to the glossary"}>	×
380	<div className={classNames(classes.newTermButton, showNewJargonTermForm && classes.newTermButtonCancel)} onClick={() => setShowNewJargonTermForm(!showNewJargonTermForm)}>	×
381	+
382	</div>
383	</LWTooltip>
384	<div className={classes.headerButtons}>
385	<LWTooltip title="Enable all glossary hoverovers for readers of this post">
386	<div className={classNames(classes.headerButton, sortedApprovedTerms.length !== 0 && classes.disabled)}	×
387	onClick={() => handleSetApproveAll(true)}>	×
388	ENABLE ALL
389	</div>
390	</LWTooltip>
391	<LWTooltip title="Disable all glossary hoverovers for readers of this post">
392	<div className={classNames(classes.headerButton, sortedUnapprovedTerms.length !== 0 && classes.disabled)}	×
393	onClick={() => handleSetApproveAll(false)}>	×
394	DISABLE ALL
395	</div>
396	</LWTooltip>
397	<LWTooltip title={<div><p>Hide all terms that aren't currently enabled</p><p>(you can unhide them later)</p></div>}>
398	<div className={classNames(classes.headerButton, sortedUnapprovedTerms.length === 0 && classes.disabled)} onClick={handleDeleteUnused}>HIDE DISABLED TERMS</div>	×
399	</LWTooltip>
400	<LWTooltip title="Unhide all deleted terms">
401	<div className={classNames(classes.headerButton, deletedTerms.length === 0 && classes.disabled)} onClick={handleUnhideAll}>	×
402	UNHIDE ALL ({deletedTerms.length})
403	</div>
404	</LWTooltip>
405	</div>
406	</div>
407
NEW 408	const footer = <div className={classNames(classes.buttonRow, formCollapsed && classes.formCollapsed)}>	×
409	<Button onClick={addNewJargonTerms} className={classes.generateButton}>Generate new terms</Button>
410	<div className={classes.headerButtons}>
411	<LWTooltip title="Make changes to the jargon generator LLM prompt">
412	<div className={classes.headerButton} onClick={() => setEditingPrompt(!editingPrompt)}>{editingPrompt ? "SAVE PROMPT" : "EDIT PROMPT"}</div>	×
413	</LWTooltip>
414	</div>
NEW 415	<div className={classes.button} onClick={() => setShowMoreTerms(!showMoreTerms)}>	×
416	{showMoreTerms
417	? <>SHOW LESS</>	×
418	: <>SHOW MORE</>
419	}
420	</div>
421	{mutationLoading && <Loading/>}	×
422	{mutationLoading && <div>(Loading... warning, this will take 30-60 seconds)</div>}	×
423	</div>
424
425	return <div className={classes.root}>	×
426	{showTitle && <Row justifyContent="space-between" alignItems="flex-start">	×
427	<LWTooltip title="Beta feature! Select/edit terms below, and readers will be able to hover over and read the explanation.">
428	<h3 className={classes.formSectionHeadingTitle}>Glossary [Beta]</h3>
429	</LWTooltip>
NEW 430	<div className={classes.expandCollapseIcon} onClick={() => setFormCollapsed(!formCollapsed)}>{formCollapsed ? <IconRight height={16} width={16} /> : <IconDown height={16} width={16} />}</div>	×
431	</Row>}
432	{header}
433	<div className={classNames(classes.window, showMoreTerms && classes.expanded, formCollapsed && classes.formCollapsed)}>	×
434	<div>
435	{showNewJargonTermForm && <div className={classes.root}>	×
436	<div className={classes.formStyles}>
437	<WrappedSmartForm
438	collectionName="JargonTerms"
439	mutationFragment={getFragment('JargonTerms')}
440	queryFragment={getFragment('JargonTerms')}
441	formComponents={{ FormSubmit: Components.JargonSubmitButton }}
442	prefilledProps={{ postId: document._id }}
443	cancelCallback={() => setShowNewJargonTermForm(false)}	×
444	successCallback={() => setShowNewJargonTermForm(false)}	×
445	/>
446	</div>
447	</div>}
448	{nonDeletedTerms.map((item) => {
449	return <JargonEditorRow	×
450	key={item._id}
451	jargonTerm={item}
452	instancesOfJargonCount={getCount(item)}
453	/>;
454	})}
455	{deletedTerms.length > 0 && <div className={classes.button} onClick={() => setShowDeletedTerms(!showDeletedTerms)}>	×
456	{showDeletedTerms ? "Hide deleted terms" : `Show deleted terms (${deletedTerms.length})`}	×
457	</div>}
458	{deletedTerms.length > 0 && showDeletedTerms && deletedTerms.map((item) => {	×
459	return <JargonEditorRow key={item._id} jargonTerm={item} instancesOfJargonCount={getCount(item)}/>	×
460	})}
461
462	</div>
463	<LoadMore {...loadMoreProps} />
464	</div>
465	{footer}
466	{editingPrompt && promptEditor}	×
467
468	</div>;
469	}
470
471	const GlossaryEditFormComponent = registerComponent('GlossaryEditForm', GlossaryEditForm, {styles});	18✔
472
473	declare global {
474	interface ComponentTypes {
475	GlossaryEditForm: typeof GlossaryEditFormComponent
476	}
477	}
478

ForumMagnum / ForumMagnum / 11526014462

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