11584198359

Committed 29 Oct 2024 11:38PM UTC coverage: 31.327% (-0.006%) from 31.333%

Build # 11584198359

Build Type

Pull #9918

github

Committed by

Raemon

Commit Message

remove sort

Pull Request Pull Request #9918: No Duplicate Jargons

Run Details

5031 of 42393 branches covered (11.87%)

Branch coverage included in aggregate %.

2 of 18 new or added lines in 2 files covered. (11.11%)

35 existing lines in 3 files 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.42

/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: 230,
    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',
  })

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

  sortedTerms = sortedTerms.sort((a, b) => a.term.localeCompare(b.term));

  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
        </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={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)}
          />;
        })}
        {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	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: 230,
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: 7,
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	let { sortedTerms, getCount } = useJargonCounts(document, glossary);	×
236
237	sortedTerms = sortedTerms.sort((a, b) => a.term.localeCompare(b.term));	×
238
239	const deletedTerms = sortedTerms.filter((item) => item.deleted);	×
240	const nonDeletedTerms = sortedTerms.filter((item) => !item.deleted);	×
UNCOV 241	const sortedApprovedTerms = nonDeletedTerms.filter((item) => item.approved);	×
242	const sortedUnapprovedTerms = nonDeletedTerms.filter((item) => !item.approved);	×
243
UNCOV 244	const [getNewJargonTerms, { data, loading: mutationLoading, error }] = useMutation(gql`	×
245	mutation getNewJargonTerms($postId: String!, $glossaryPrompt: String, $examplePost: String, $exampleTerm: String, $exampleAltTerm: String, $exampleDefinition: String) {
246	getNewJargonTerms(postId: $postId, glossaryPrompt: $glossaryPrompt, examplePost: $examplePost, exampleTerm: $exampleTerm, exampleAltTerm: $exampleAltTerm, exampleDefinition: $exampleDefinition) {
247	...JargonTerms
248	}
249	}
250	${fragmentTextForQuery("JargonTerms")}
251	`);
252
253	const addNewJargonTerms = async () => {	×
254	// TODO: maybe just disable button if no prompt?
UNCOV 255	if (!glossaryPrompt) return;	×
256	if (mutationLoading) return;	×
257
UNCOV 258	try {	×
UNCOV 259	await getNewJargonTerms({	×
260	variables: {
261	postId: document._id,
262	glossaryPrompt,
263	examplePost,
264	exampleTerm,
265	exampleAltTerm,
266	exampleDefinition,
267	},
268	});
269
UNCOV 270	refetch();	×
271	} catch (err) {
272	// eslint-disable-next-line no-console
UNCOV 273	console.error(err);	×
274	}
275	};
276
UNCOV 277	const {mutate: updateJargonTerm} = useUpdate({	×
278	collectionName: "JargonTerms",
279	fragmentName: 'JargonTerms',
280	});
281
282	const handleSetApproveAll = (approve: boolean) => {	×
283	const termsToUpdate = approve ? sortedUnapprovedTerms : sortedApprovedTerms;	×
UNCOV 284	for (const jargonTerm of termsToUpdate) {	×
UNCOV 285	void updateJargonTerm({	×
286	selector: { _id: jargonTerm._id },
287	data: {
288	approved: approve
289	},
290	optimisticResponse: {
291	...jargonTerm,
292	approved: approve,
293	}
294	});
295	}
296	}
297
298	const handleDeleteUnused = () => {	×
299	const termsToUpdate = sortedUnapprovedTerms;	×
UNCOV 300	for (const jargonTerm of termsToUpdate) {	×
UNCOV 301	void updateJargonTerm({	×
302	selector: { _id: jargonTerm._id },
303	data: {
304	approved: false,
305	deleted: true,
306	},
307	optimisticResponse: {
308	...jargonTerm,
309	approved: false,
310	deleted: true,
311	}
312	});
313	}
314	}
315
316	const handleUnhideAll = () => {	×
UNCOV 317	for (const jargonTerm of deletedTerms) {	×
UNCOV 318	void updateJargonTerm({	×
319	selector: { _id: jargonTerm._id },
320	data: { deleted: false },
321	optimisticResponse: {
322	...jargonTerm,
323	deleted: false,
324	}
325	});
326	}
327	}
328
329	const { JargonEditorRow, LoadMore, Loading, LWTooltip, WrappedSmartForm, IconRight, IconDown, ForumIcon, Row } = Components;	×
330
UNCOV 331	const promptEditor = <div>	×
332	<TextField
333	label="Prompt"
334	value={glossaryPrompt}
UNCOV 335	onChange={(e) => setGlossaryPrompt(e.target.value)}	×
336	multiline
337	fullWidth
338	variant="outlined"
339	className={classes.promptTextField}
340	InputProps={{
341	style: { minHeight: '120px', resize: 'vertical' }
342	}}
343	/>
344	<TextField
345	label="Example Post"
346	value={examplePost}
UNCOV 347	onChange={(e) => setExamplePost(e.target.value)}	×
348	multiline
349	fullWidth
350	variant="outlined"
351	className={classes.promptTextField}
352	InputProps={{
353	style: { minHeight: '100px', resize: 'vertical' }
354	}}
355	/>
356	<TextField
357	label="Example Term"
358	value={exampleTerm}
UNCOV 359	onChange={(e) => setExampleTerm(e.target.value)}	×
360	fullWidth
361	className={classes.promptTextField}
362	variant="outlined"
363	/>
364	<TextField
365	label="Example Alt Term"
366	value={exampleAltTerm}
UNCOV 367	onChange={(e) => setExampleAltTerm(e.target.value)}	×
368	fullWidth
369	className={classes.promptTextField}
370	variant="outlined"
371	/>
372	<TextField
373	label="Example Definition"
374	value={exampleDefinition}
375	className={classes.promptTextField}
UNCOV 376	onChange={(e) => setExampleDefinition(e.target.value)}	×
377	multiline
378	fullWidth
379	variant="outlined"
380	/>
381	</div>
382
383	const header = <div className={classNames(classes.header, formCollapsed && classes.formCollapsed)}>	×
384	<LWTooltip title={showNewJargonTermForm ? "Cancel adding a new term" : "Add a new term to the glossary"}>	×
UNCOV 385	<div className={classNames(classes.newTermButton, showNewJargonTermForm && classes.newTermButtonCancel)} onClick={() => setShowNewJargonTermForm(!showNewJargonTermForm)}>	×
386	+
387	</div>
388	</LWTooltip>
389	<div className={classes.headerButtons}>
390	<LWTooltip title="Enable all glossary hoverovers for readers of this post">
391	<div className={classNames(classes.headerButton, sortedApprovedTerms.length !== 0 && classes.disabled)}	×
UNCOV 392	onClick={() => handleSetApproveAll(true)}>	×
393	ENABLE ALL
394	</div>
395	</LWTooltip>
396	<LWTooltip title="Disable all glossary hoverovers for readers of this post">
397	<div className={classNames(classes.headerButton, sortedUnapprovedTerms.length !== 0 && classes.disabled)}	×
UNCOV 398	onClick={() => handleSetApproveAll(false)}>	×
399	DISABLE ALL
400	</div>
401	</LWTooltip>
402	<LWTooltip title={<div><p>Hide all terms that aren't currently enabled</p><p>(you can unhide them later)</p></div>}>
403	<div className={classNames(classes.headerButton, sortedUnapprovedTerms.length === 0 && classes.disabled)} onClick={handleDeleteUnused}>HIDE DISABLED TERMS</div>	×
404	</LWTooltip>
405	<LWTooltip title="Unhide all deleted terms">
406	<div className={classNames(classes.headerButton, deletedTerms.length === 0 && classes.disabled)} onClick={handleUnhideAll}>	×
407	UNHIDE ALL ({deletedTerms.length})
408	</div>
409	</LWTooltip>
410	</div>
411	</div>
412
UNCOV 413	const footer = <div className={classNames(classes.buttonRow, formCollapsed && classes.formCollapsed)}>	×
414	<Button onClick={addNewJargonTerms} className={classNames(classes.generateButton, mutationLoading && classes.disabled)}>Generate new terms</Button>	×
415	<div className={classes.headerButtons}>
416	<LWTooltip title="Make changes to the jargon generator LLM prompt">
UNCOV 417	<div className={classes.headerButton} onClick={() => setEditingPrompt(!editingPrompt)}>{editingPrompt ? "SAVE PROMPT" : "EDIT PROMPT"}</div>	×
418	</LWTooltip>
419	</div>
UNCOV 420	<div className={classes.button} onClick={() => setShowMoreTerms(!showMoreTerms)}>	×
421	{showMoreTerms
422	? <>SHOW LESS</>	×
423	: <>SHOW MORE</>
424	}
425	</div>
426	{mutationLoading && <Loading/>}	×
427	{mutationLoading && <div>(Loading... warning, this will take 10-20 seconds.)</div>}	×
428	</div>
429
UNCOV 430	return <div className={classes.root}>	×
431	{showTitle && <Row justifyContent="space-between" alignItems="flex-start">	×
432	<LWTooltip title="Beta feature! Select/edit terms below, and readers will be able to hover over and read the explanation.">
433	<h3 className={classes.formSectionHeadingTitle}>Glossary [Beta]</h3>
434	</LWTooltip>
UNCOV 435	<div className={classes.expandCollapseIcon} onClick={() => setFormCollapsed(!formCollapsed)}>{formCollapsed ? <IconRight height={16} width={16} /> : <IconDown height={16} width={16} />}</div>	×
436	</Row>}
437	{header}
438	<div className={classNames(classes.window, showMoreTerms && classes.expanded, formCollapsed && classes.formCollapsed)}>	×
439	<div>
440	{showNewJargonTermForm && <div className={classes.root}>	×
441	<div className={classes.formStyles}>
442	<WrappedSmartForm
443	collectionName="JargonTerms"
444	mutationFragment={getFragment('JargonTerms')}
445	queryFragment={getFragment('JargonTerms')}
446	formComponents={{ FormSubmit: Components.JargonSubmitButton }}
447	prefilledProps={{ postId: document._id }}
UNCOV 448	cancelCallback={() => setShowNewJargonTermForm(false)}	×
UNCOV 449	successCallback={() => setShowNewJargonTermForm(false)}	×
450	/>
451	</div>
452	</div>}
453	{nonDeletedTerms.map((item) => {
UNCOV 454	return <JargonEditorRow	×
455	key={item._id}
456	jargonTerm={item}
457	instancesOfJargonCount={getCount(item)}
458	/>;
459	})}
UNCOV 460	{deletedTerms.length > 0 && <div className={classes.button} onClick={() => setShowDeletedTerms(!showDeletedTerms)}>	×
461	{showDeletedTerms ? "Hide deleted terms" : `Show deleted terms (${deletedTerms.length})`}	×
462	</div>}
463	{deletedTerms.length > 0 && showDeletedTerms && deletedTerms.map((item) => {	×
UNCOV 464	return <JargonEditorRow key={item._id} jargonTerm={item} instancesOfJargonCount={getCount(item)}/>	×
465	})}
466
467	</div>
468	<LoadMore {...loadMoreProps} />
469	</div>
470	{footer}
471	{editingPrompt && promptEditor}	×
472
473	</div>;
474	}
475
476	const GlossaryEditFormComponent = registerComponent('GlossaryEditForm', GlossaryEditForm, {styles});	18✔
477
478	declare global {
479	interface ComponentTypes {
480	GlossaryEditForm: typeof GlossaryEditFormComponent
481	}
482	}
483

ForumMagnum / ForumMagnum / 11584198359

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