10640124286

Committed 30 Aug 2024 10:54PM UTC coverage: 31.85% (-0.003%) from 31.853%

Build # 10640124286

Build Type

push

github

Committed by

web-flow

Commit Message

Merge pull request #9665 from ForumMagnum/autocomplete-new

Allow setting of a custom userId for autocomplete and fix auto-coalescing bug

Run Details

5023 of 41180 branches covered (12.2%)

Branch coverage included in aggregate %.

1 of 10 new or added lines in 2 files covered. (10.0%)

3 existing lines in 2 files now uncovered.

29347 of 66731 relevant lines covered (43.98%)

187.84 hits per line

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

10.24

/packages/lesswrong/components/languageModels/AutocompleteModelSettings.tsx

import React, { useState, useEffect, useMemo, useCallback } from "react";
import { registerComponent, Components } from "../../lib/vulcan-lib";
import { AnalyticsContext } from "../../lib/analyticsEvents";
import { useMulti } from "../../lib/crud/withMulti";
import { useCurrentUser } from "../common/withUser";
import Checkbox from "@material-ui/core/Checkbox";
import Button from "@material-ui/core/Button";
import IconButton from "@material-ui/core/IconButton";
import LinearProgress from "@material-ui/core/LinearProgress";
import { CommentTreeOptions } from "../comments/commentTree";
import debounce from "lodash/debounce";

const styles = (theme: ThemeType): JssStyles => ({
  root: {
    ...theme.typography.commentStyle,
  },
  section: {
    marginBottom: theme.spacing.unit * 4,
  },
  list: {
    listStyle: "none",
    padding: 0,
  },
  listItem: {
    display: "flex",
    alignItems: "flex-start",
    position: "relative",
  },
  checkbox: {
    padding: theme.spacing.unit,
    alignSelf: "center",
  },
  content: {
    marginLeft: theme.spacing.unit * 2,
    flex: 1,
    width: "400px",
  },
  button: {
    marginTop: theme.spacing.unit * 2,
  },
  progressBarSection: {
    position: "sticky",
    top: 0,
    zIndex: 5,
    padding: theme.spacing.unit,
    backdropFilter: "blur(5px)",
    mask: `linear-gradient(${theme.palette.text.alwaysBlack} 75%, ${theme.palette.background.transparent})`,
  },
  progressBar: {
    marginTop: theme.spacing.unit * 2,
    marginBottom: theme.spacing.unit,
  },
  progressLabel: {
    marginTop: theme.spacing.unit,
    textAlign: "center",
  },
  singleLineCommentWrapper: {
    flex: 1,
    overflow: "hidden",
  },
  selectAllButton: {
    position: "absolute",
    left: -40,
    top: "50%",
    transform: "translateY(-50%)",
    opacity: 0,
    transition: "opacity 0.2s",
    "&:hover": {
      opacity: 1,
    },
  },
  listItemWrapper: {
    "&:hover $selectAllButton": {
      opacity: 0.7,
    },
  },
  authorSection: {
    marginBottom: theme.spacing.unit * 2,
    border: `1px solid ${theme.palette.grey[300]}`,
    borderRadius: 4,
  },
  authorHeader: {
    display: "flex",
    justifyContent: "space-between",
    alignItems: "center",
    padding: theme.spacing.unit,
    backgroundColor: theme.palette.grey[100],
    cursor: "pointer",
  },
  authorContent: {
    padding: theme.spacing.unit * 2,
  },
  sliderContainer: {
    marginBottom: theme.spacing.unit * 2,
  },
  sliderLabel: {
    marginBottom: theme.spacing.unit,
  },
  postItem: {
    display: "flex",
    alignItems: "center",
    marginBottom: theme.spacing.unit,
  },
  tokenCount: {
    display: "flex",
    justifyContent: "space-between",
    marginBottom: theme.spacing.unit,
  },
});

const MAX_TOKENS = 180000;
const TOKENS_PER_WORD = 1.3;
const MAX_AUTHOR_TOKENS = 50000;

const featuredAuthors = [
  { name: "Eliezer Yudkowsky", userId: "nmk3nLpQE89dMRzzN" },
  { name: "Scott Alexander", userId: "XgYW5s8njaYrtyP7q" },
  { name: "Gwern", userId: "BtbwfsEyeT4P2eqXu" },
];

type Author = {
  name: string;
  userId: string;
};

type SelectableListProps<T> = {
  items: T[];
  selectedItems: Record<string, boolean>;
  onToggle: (newSelectedItems: Record<string, boolean>) => void;
  onSelectAll: (items: T[], currentIndex: number) => void;
  ItemComponent: React.ComponentType<{ item: T }>;
  classes: Record<string, string>;
};

const SelectableList = ({
  items,
  selectedItems,
  onToggle,
  onSelectAll,
  ItemComponent,
  classes,
}: SelectableListProps<PostsList | CommentsList>) => {
  const { ForumIcon } = Components
  return (
    <div className={classes.list}>
      {items.map((item, i) => (
        <div key={item._id} className={classes.listItemWrapper}>
          <div className={classes.listItem}>
            <IconButton className={classes.selectAllButton} onClick={() => onSelectAll(items, i)}>
              <ForumIcon icon="PlaylistAdd" /> 
            </IconButton>
            <Checkbox
              checked={!!selectedItems[item._id]}
              onChange={() =>
                onToggle({
                  ...selectedItems,
                  [item._id]: !selectedItems[item._id],
                })
              }
              className={classes.checkbox}
            />
            <div className={classes.content}>
              <ItemComponent item={item} />
            </div>
          </div>
        </div>
      ))}
    </div>
  );
};

type AuthorSectionProps = {
  author: Author;
  authorContent: Record<string, { posts?: any[]; comments?: any[] }>;
  selectedItems: Record<string, boolean>;
  onToggle: (newSelectedItems: Record<string, boolean>) => void;
  onSelectAll: (items: any[], currentIndex: number) => void;
  classes: Record<string, string>;
};

const calculateTokens = (
  items: { _id: string; contents: { wordCount: number | null } | null }[],
  selectedItems: Record<string, boolean>,
) => {
  return items.reduce((total: number, item) => {
    if (selectedItems[item._id]) {
      return total + ((item.contents?.wordCount ?? 0) * TOKENS_PER_WORD);
    }
    return total;
  }, 0);
};

function useGetAuthorContent(authorId: string): {posts: PostsListWithVotes[], comments: CommentsList[]} {
  const { results: posts } = useMulti({
    terms: { view: "userPosts", userId: authorId, limit: 100, sortedBy: "top" },
    collectionName: "Posts",
    fragmentName: "PostsListWithVotes",
    enableTotal: true,
  });

  const { results: comments } = useMulti({
    terms: { view: "profileComments", userId: authorId, limit: 200, sortBy: "top" },
    collectionName: "Comments",
    fragmentName: "CommentsList",
    enableTotal: true,
  });

  const results = useMemo(() => ({posts: posts ?? [], comments: comments ?? []}), [posts, comments]);
  return results;
}

function useGetFeaturedAuthorsContent() {
  const author1Content = useGetAuthorContent(featuredAuthors[0].userId);
  const author2Content = useGetAuthorContent(featuredAuthors[1].userId);
  const author3Content = useGetAuthorContent(featuredAuthors[2].userId);

  const results = useMemo(() => ({
    [featuredAuthors[0].userId]: author1Content,
    [featuredAuthors[1].userId]: author2Content,
    [featuredAuthors[2].userId]: author3Content,
  }), [author1Content, author2Content, author3Content]);

  return results;
}

const AuthorSection = ({
  author,
  authorContent,
  selectedItems,
  onToggle,
  onSelectAll,
  classes,
}: AuthorSectionProps) => {
  const { ForumIcon } = Components
  const [expanded, setExpanded] = useState(false);

  const postsTokens = useMemo(
    () => calculateTokens(authorContent[author.userId]?.posts ?? [], selectedItems),
    [authorContent, author.userId, selectedItems],
  );
  const commentsTokens = useMemo(
    () => calculateTokens(authorContent[author.userId]?.comments ?? [], selectedItems),
    [authorContent, author.userId, selectedItems],
  );

  const handleTokenChange = (contentType: "posts" | "comments", newValue: number) => {
    const items = authorContent[author.userId]?.[contentType] ?? [];
    let tokenCount = 0;
    const newSelectedItems = { ...selectedItems };

    for (let i = 0; i < items.length; i++) {
      const item = items[i];
      const itemTokens = (item.contents?.wordCount ?? 0) * TOKENS_PER_WORD;
      if (tokenCount + itemTokens > newValue) {
        newSelectedItems[item._id] = false;
      } else {
        newSelectedItems[item._id] = true;
        tokenCount += itemTokens;
      }
    }

    onToggle(newSelectedItems);
  };

  return (
    <div className={classes.authorSection}>
      <div className={classes.authorHeader}>
        <div onClick={() => setExpanded(!expanded)}>
          {expanded ? <ForumIcon icon="ExpandLess" /> : <ForumIcon icon="ExpandMore" />}
          <h4>{author.name}</h4>
        </div>
        <div className={classes.sliderContainer}>
          <div className={classes.tokenCount}>
            <span>Posts Tokens:</span>
            <span>{Math.round(postsTokens)}</span>
          </div>
          <input
            type="range"
            min="0"
            max={MAX_AUTHOR_TOKENS}
            value={postsTokens}
            onChange={(e) => handleTokenChange("posts", Number(e.target.value))}
          />
        </div>
        <div className={classes.sliderContainer}>
          <div className={classes.tokenCount}>
            <span>Comments Tokens:</span>
            <span>{Math.round(commentsTokens)}</span>
          </div>
          <input
            type="range"
            min="0"
            max={MAX_AUTHOR_TOKENS}
            value={commentsTokens}
            onChange={(e) => handleTokenChange("comments", Number(e.target.value))}
          />
        </div>
      </div>
      {expanded && (
        <div className={classes.authorContent}>
          <SelectableList
            items={authorContent[author.userId]?.posts ?? []}
            selectedItems={selectedItems}
            onToggle={onToggle}
            onSelectAll={onSelectAll}
            ItemComponent={({ item }) => <Components.PostsItem post={item as PostsListWithVotes} />}
            classes={classes}
          />
          <SelectableList
            items={authorContent[author.userId]?.comments ?? []}
            selectedItems={selectedItems}
            onToggle={onToggle}
            onSelectAll={onSelectAll}
            ItemComponent={({ item }) => (
              <Components.CommentsNode
                treeOptions={{ forceSingleLine: true } as CommentTreeOptions}
                comment={item as CommentsList}
              />
            )}
            classes={classes}
          />
        </div>
      )}
    </div>
  );
};

const debouncedSaveSelection = debounce((selectedItems: Record<string, boolean>, posts: PostsListWithVotes[], comments: CommentsList[], authorContent: {[x: string]: {posts: PostsListWithVotes[], comments: CommentsList[]}}) => {
  const selectedIds = Object.entries(selectedItems)
    .filter(([, isSelected]) => isSelected)
    .map(([id]) => id);

  const selectedPosts = selectedIds.filter(
    (id) =>
      posts?.some((post: PostsListWithVotes) => post._id === id) ||
      featuredAuthors.some((author) =>
        authorContent[author.userId]?.posts?.some((post: PostsListWithVotes) => post._id === id),
      ),
  );
  const selectedComments = selectedIds.filter(
    (id) =>
      comments?.some((comment: CommentsList) => comment._id === id) ||
      featuredAuthors.some((author) =>
        authorContent[author.userId]?.comments?.some((comment: CommentsList) => comment._id === id),
      ),
  );

  localStorage.setItem("selectedTrainingPosts", JSON.stringify(selectedPosts));
  localStorage.setItem("selectedTrainingComments", JSON.stringify(selectedComments));
}, 200);

const AutocompleteModelSettings = ({ classes }: { classes: ClassesType }) => {
  const { SingleColumnSection, Loading, PostsItem, LoadMore, CommentsNode } = Components;
  const currentUser = useCurrentUser();
  const [selectedItems, setSelectedItems] = useState<Record<string, boolean>>(() => {
    const savedPosts = JSON.parse(localStorage.getItem("selectedTrainingPosts") ?? "[]");
    const savedComments = JSON.parse(localStorage.getItem("selectedTrainingComments") ?? "[]");
    const initialSelectedItems: Record<string, boolean> = {};
    [...savedPosts, ...savedComments].forEach((id) => {
      initialSelectedItems[id] = true;
    });
    return initialSelectedItems;
  });
  const [tokenCount, setTokenCount] = useState(0);

  const {
    results: posts,
    error: postsError,
    loadMoreProps: postsLoadMoreProps,
  } = useMulti({
    terms: { view: "userPosts", userId: currentUser?._id, limit: 20, sortedBy: "top" },
    collectionName: "Posts",
    fragmentName: "PostsListWithVotes",
    enableTotal: true,
  });

  const {
    results: comments,
    error: commentsError,
    loadMoreProps: commentsLoadMoreProps,
  } = useMulti({ terms: { view: "profileComments", userId: currentUser?._id, limit: 30, sortBy: "top"},
    collectionName: "Comments",
    fragmentName: "CommentsList",
    enableTotal: true,
  });

  const authorContent = useGetFeaturedAuthorsContent()

  useEffect(() => {
    const allItems = [
      ...(posts ?? []),
      ...(comments ?? []),
      ...featuredAuthors.flatMap((author) => [
        ...(authorContent[author.userId]?.posts ?? []),
        ...(authorContent[author.userId]?.comments ?? []),
      ]),
    ];
    setTokenCount(calculateTokens(allItems, selectedItems));

    debouncedSaveSelection(selectedItems, posts ?? [], comments ?? [], authorContent);
  }, [selectedItems, posts, comments, authorContent]);

  const handleSelectAll = (items: Array<{ _id: string }>, currentIndex: number) => {
    const newSelectedItems = { ...selectedItems };
    items.slice(0, currentIndex + 1).forEach((item) => {
      newSelectedItems[item._id] = true;
    });
    setSelectedItems(newSelectedItems);
  };

  const handleSubmit = () => {};

  if (postsError || commentsError) return null;

  const sortedPosts = [...(posts ?? [])].sort((a, b) => (b.baseScore ?? 0) - (a.baseScore ?? 0));
  const sortedComments = [...(comments ?? [])].sort((a, b) => (b.baseScore ?? 0) - (a.baseScore ?? 0));

  return (
    <AnalyticsContext pageContext="AutocompleteModelSettingsPage">
      <SingleColumnSection>
        <div className={classes.root}>
          <h2>Select items for autocomplete model training</h2>

          <div className={classes.progressBarSection}>
            <div className={classes.progressBar}>
              <LinearProgress variant="determinate" value={(tokenCount / MAX_TOKENS) * 100} />
            </div>
            <div className={classes.progressLabel}>
              {Math.round(tokenCount)} / {MAX_TOKENS} tokens used
            </div>
          </div>

          <div className={classes.section}>
            <h3>Featured Authors</h3>
            {featuredAuthors.map((author) => (
              <AuthorSection
                key={author.userId}
                author={author}
                authorContent={authorContent}
                selectedItems={selectedItems}
                onToggle={setSelectedItems}
                onSelectAll={handleSelectAll}
                classes={classes}
              />
            ))}
          </div>

          <div className={classes.section}>
            <h3>Posts</h3>
            <SelectableList
              items={sortedPosts}
              selectedItems={selectedItems}
              onToggle={setSelectedItems}
              onSelectAll={handleSelectAll}
              ItemComponent={({ item }) => <PostsItem post={item as PostsListWithVotes} />}
              classes={classes}
            />
            <LoadMore {...postsLoadMoreProps} />
          </div>

          <div className={classes.section}>
            <h3>Comments</h3>
            <SelectableList
              items={sortedComments}
              selectedItems={selectedItems}
              onToggle={setSelectedItems}
              onSelectAll={handleSelectAll}
              ItemComponent={({ item }) => (
                <CommentsNode
                  treeOptions={{ forceSingleLine: true } as CommentTreeOptions}
                  comment={item as CommentsList}
                />
              )}
              classes={classes}
            />
            <LoadMore {...commentsLoadMoreProps} />
          </div>

          <Button
            variant="contained"
            color="primary"
            onClick={handleSubmit}
            className={classes.button}
            disabled={Object.values(selectedItems).filter(Boolean).length === 0 || tokenCount > MAX_TOKENS}
          >
            Use Selected for Training
          </Button>
        </div>
      </SingleColumnSection>
    </AnalyticsContext>
  );
};

const AutocompleteModelSettingsComponent = registerComponent("AutocompleteModelSettings", AutocompleteModelSettings, {
  styles,
});

declare global {
  interface ComponentTypes {
    AutocompleteModelSettings: typeof AutocompleteModelSettingsComponent;
  }
}

1	import React, { useState, useEffect, useMemo, useCallback } from "react";	1✔
2	import { registerComponent, Components } from "../../lib/vulcan-lib";	1✔
3	import { AnalyticsContext } from "../../lib/analyticsEvents";	1✔
4	import { useMulti } from "../../lib/crud/withMulti";	1✔
5	import { useCurrentUser } from "../common/withUser";	1✔
6	import Checkbox from "@material-ui/core/Checkbox";	1✔
7	import Button from "@material-ui/core/Button";	1✔
8	import IconButton from "@material-ui/core/IconButton";	1✔
9	import LinearProgress from "@material-ui/core/LinearProgress";	1✔
10	import { CommentTreeOptions } from "../comments/commentTree";
11	import debounce from "lodash/debounce";	1✔
12
13	const styles = (theme: ThemeType): JssStyles => ({	1✔
14	root: {
15	...theme.typography.commentStyle,
16	},
17	section: {
18	marginBottom: theme.spacing.unit * 4,
19	},
20	list: {
21	listStyle: "none",
22	padding: 0,
23	},
24	listItem: {
25	display: "flex",
26	alignItems: "flex-start",
27	position: "relative",
28	},
29	checkbox: {
30	padding: theme.spacing.unit,
31	alignSelf: "center",
32	},
33	content: {
34	marginLeft: theme.spacing.unit * 2,
35	flex: 1,
36	width: "400px",
37	},
38	button: {
39	marginTop: theme.spacing.unit * 2,
40	},
41	progressBarSection: {
42	position: "sticky",
43	top: 0,
44	zIndex: 5,
45	padding: theme.spacing.unit,
46	backdropFilter: "blur(5px)",
47	mask: `linear-gradient(${theme.palette.text.alwaysBlack} 75%, ${theme.palette.background.transparent})`,
48	},
49	progressBar: {
50	marginTop: theme.spacing.unit * 2,
51	marginBottom: theme.spacing.unit,
52	},
53	progressLabel: {
54	marginTop: theme.spacing.unit,
55	textAlign: "center",
56	},
57	singleLineCommentWrapper: {
58	flex: 1,
59	overflow: "hidden",
60	},
61	selectAllButton: {
62	position: "absolute",
63	left: -40,
64	top: "50%",
65	transform: "translateY(-50%)",
66	opacity: 0,
67	transition: "opacity 0.2s",
68	"&:hover": {
69	opacity: 1,
70	},
71	},
72	listItemWrapper: {
73	"&:hover $selectAllButton": {
74	opacity: 0.7,
75	},
76	},
77	authorSection: {
78	marginBottom: theme.spacing.unit * 2,
79	border: `1px solid ${theme.palette.grey[300]}`,
80	borderRadius: 4,
81	},
82	authorHeader: {
83	display: "flex",
84	justifyContent: "space-between",
85	alignItems: "center",
86	padding: theme.spacing.unit,
87	backgroundColor: theme.palette.grey[100],
88	cursor: "pointer",
89	},
90	authorContent: {
91	padding: theme.spacing.unit * 2,
92	},
93	sliderContainer: {
94	marginBottom: theme.spacing.unit * 2,
95	},
96	sliderLabel: {
97	marginBottom: theme.spacing.unit,
98	},
99	postItem: {
100	display: "flex",
101	alignItems: "center",
102	marginBottom: theme.spacing.unit,
103	},
104	tokenCount: {
105	display: "flex",
106	justifyContent: "space-between",
107	marginBottom: theme.spacing.unit,
108	},
109	});
110
111	const MAX_TOKENS = 180000;	1✔
112	const TOKENS_PER_WORD = 1.3;	1✔
113	const MAX_AUTHOR_TOKENS = 50000;	1✔
114
115	const featuredAuthors = [	1✔
116	{ name: "Eliezer Yudkowsky", userId: "nmk3nLpQE89dMRzzN" },
117	{ name: "Scott Alexander", userId: "XgYW5s8njaYrtyP7q" },
118	{ name: "Gwern", userId: "BtbwfsEyeT4P2eqXu" },
119	];
120
121	type Author = {
122	name: string;
123	userId: string;
124	};
125
126	type SelectableListProps<T> = {
127	items: T[];
128	selectedItems: Record<string, boolean>;
129	onToggle: (newSelectedItems: Record<string, boolean>) => void;
130	onSelectAll: (items: T[], currentIndex: number) => void;
131	ItemComponent: React.ComponentType<{ item: T }>;
132	classes: Record<string, string>;
133	};
134
135	const SelectableList = ({	1✔
136	items,
137	selectedItems,
138	onToggle,
139	onSelectAll,
140	ItemComponent,
141	classes,
142	}: SelectableListProps<PostsList \| CommentsList>) => {
143	const { ForumIcon } = Components	×
144	return (	×
145	<div className={classes.list}>
146	{items.map((item, i) => (
147	<div key={item._id} className={classes.listItemWrapper}>	×
148	<div className={classes.listItem}>
149	<IconButton className={classes.selectAllButton} onClick={() => onSelectAll(items, i)}>	×
150	<ForumIcon icon="PlaylistAdd" />
151	</IconButton>
152	<Checkbox
153	checked={!!selectedItems[item._id]}
154	onChange={() =>
155	onToggle({	×
156	...selectedItems,
157	[item._id]: !selectedItems[item._id],
158	})
159	}
160	className={classes.checkbox}
161	/>
162	<div className={classes.content}>
163	<ItemComponent item={item} />
164	</div>
165	</div>
166	</div>
167	))}
168	</div>
169	);
170	};
171
172	type AuthorSectionProps = {
173	author: Author;
174	authorContent: Record<string, { posts?: any[]; comments?: any[] }>;
175	selectedItems: Record<string, boolean>;
176	onToggle: (newSelectedItems: Record<string, boolean>) => void;
177	onSelectAll: (items: any[], currentIndex: number) => void;
178	classes: Record<string, string>;
179	};
180
181	const calculateTokens = (	1✔
182	items: { _id: string; contents: { wordCount: number \| null } \| null }[],
183	selectedItems: Record<string, boolean>,
184	) => {
185	return items.reduce((total: number, item) => {	×
186	if (selectedItems[item._id]) {	×
187	return total + ((item.contents?.wordCount ?? 0) * TOKENS_PER_WORD);	×
188	}
189	return total;	×
190	}, 0);
191	};
192
193	function useGetAuthorContent(authorId: string): {posts: PostsListWithVotes[], comments: CommentsList[]} {
194	const { results: posts } = useMulti({	×
195	terms: { view: "userPosts", userId: authorId, limit: 100, sortedBy: "top" },
196	collectionName: "Posts",
197	fragmentName: "PostsListWithVotes",
198	enableTotal: true,
199	});
200
201	const { results: comments } = useMulti({	×
202	terms: { view: "profileComments", userId: authorId, limit: 200, sortBy: "top" },
203	collectionName: "Comments",
204	fragmentName: "CommentsList",
205	enableTotal: true,
206	});
207
208	const results = useMemo(() => ({posts: posts ?? [], comments: comments ?? []}), [posts, comments]);	×
209	return results;	×
210	}
211
212	function useGetFeaturedAuthorsContent() {
213	const author1Content = useGetAuthorContent(featuredAuthors[0].userId);	×
214	const author2Content = useGetAuthorContent(featuredAuthors[1].userId);	×
215	const author3Content = useGetAuthorContent(featuredAuthors[2].userId);	×
216
217	const results = useMemo(() => ({	×
218	[featuredAuthors[0].userId]: author1Content,
219	[featuredAuthors[1].userId]: author2Content,
220	[featuredAuthors[2].userId]: author3Content,
221	}), [author1Content, author2Content, author3Content]);
222
223	return results;	×
224	}
225
226	const AuthorSection = ({	1✔
227	author,
228	authorContent,
229	selectedItems,
230	onToggle,
231	onSelectAll,
232	classes,
233	}: AuthorSectionProps) => {
234	const { ForumIcon } = Components	×
235	const [expanded, setExpanded] = useState(false);	×
236
237	const postsTokens = useMemo(	×
238	() => calculateTokens(authorContent[author.userId]?.posts ?? [], selectedItems),	×
239	[authorContent, author.userId, selectedItems],
240	);
241	const commentsTokens = useMemo(	×
242	() => calculateTokens(authorContent[author.userId]?.comments ?? [], selectedItems),	×
243	[authorContent, author.userId, selectedItems],
244	);
245
246	const handleTokenChange = (contentType: "posts" \| "comments", newValue: number) => {	×
247	const items = authorContent[author.userId]?.[contentType] ?? [];	×
248	let tokenCount = 0;	×
249	const newSelectedItems = { ...selectedItems };	×
250
251	for (let i = 0; i < items.length; i++) {	×
252	const item = items[i];	×
253	const itemTokens = (item.contents?.wordCount ?? 0) * TOKENS_PER_WORD;	×
254	if (tokenCount + itemTokens > newValue) {	×
255	newSelectedItems[item._id] = false;	×
256	} else {
257	newSelectedItems[item._id] = true;	×
258	tokenCount += itemTokens;	×
259	}
260	}
261
262	onToggle(newSelectedItems);	×
263	};
264
265	return (	×
266	<div className={classes.authorSection}>
267	<div className={classes.authorHeader}>
268	<div onClick={() => setExpanded(!expanded)}>	×
269	{expanded ? <ForumIcon icon="ExpandLess" /> : <ForumIcon icon="ExpandMore" />}	×
270	<h4>{author.name}</h4>
271	</div>
272	<div className={classes.sliderContainer}>
273	<div className={classes.tokenCount}>
274	<span>Posts Tokens:</span>
275	<span>{Math.round(postsTokens)}</span>
276	</div>
277	<input
278	type="range"
279	min="0"
280	max={MAX_AUTHOR_TOKENS}
281	value={postsTokens}
282	onChange={(e) => handleTokenChange("posts", Number(e.target.value))}	×
283	/>
284	</div>
285	<div className={classes.sliderContainer}>
286	<div className={classes.tokenCount}>
287	<span>Comments Tokens:</span>
288	<span>{Math.round(commentsTokens)}</span>
289	</div>
290	<input
291	type="range"
292	min="0"
293	max={MAX_AUTHOR_TOKENS}
294	value={commentsTokens}
295	onChange={(e) => handleTokenChange("comments", Number(e.target.value))}	×
296	/>
297	</div>
298	</div>
299	{expanded && (	×
300	<div className={classes.authorContent}>
301	<SelectableList
302	items={authorContent[author.userId]?.posts ?? []}	×
303	selectedItems={selectedItems}
304	onToggle={onToggle}
305	onSelectAll={onSelectAll}
306	ItemComponent={({ item }) => <Components.PostsItem post={item as PostsListWithVotes} />}	×
307	classes={classes}
308	/>
309	<SelectableList
310	items={authorContent[author.userId]?.comments ?? []}	×
311	selectedItems={selectedItems}
312	onToggle={onToggle}
313	onSelectAll={onSelectAll}
314	ItemComponent={({ item }) => (
315	<Components.CommentsNode	×
316	treeOptions={{ forceSingleLine: true } as CommentTreeOptions}
317	comment={item as CommentsList}
318	/>
319	)}
320	classes={classes}
321	/>
322	</div>
323	)}
324	</div>
325	);
326	};
327
328	const debouncedSaveSelection = debounce((selectedItems: Record<string, boolean>, posts: PostsListWithVotes[], comments: CommentsList[], authorContent: {[x: string]: {posts: PostsListWithVotes[], comments: CommentsList[]}}) => {	1✔
329	const selectedIds = Object.entries(selectedItems)	×
330	.filter(([, isSelected]) => isSelected)	×
331	.map(([id]) => id);	×
332
333	const selectedPosts = selectedIds.filter(	×
UNCOV 334	(id) =>	×
NEW 335	posts?.some((post: PostsListWithVotes) => post._id === id) \|\|	×
336	featuredAuthors.some((author) =>
337	authorContent[author.userId]?.posts?.some((post: PostsListWithVotes) => post._id === id),	×
338	),
339	);
340	const selectedComments = selectedIds.filter(	×
UNCOV 341	(id) =>	×
NEW 342	comments?.some((comment: CommentsList) => comment._id === id) \|\|	×
343	featuredAuthors.some((author) =>
344	authorContent[author.userId]?.comments?.some((comment: CommentsList) => comment._id === id),	×
345	),
346	);
347
348	localStorage.setItem("selectedTrainingPosts", JSON.stringify(selectedPosts));	×
349	localStorage.setItem("selectedTrainingComments", JSON.stringify(selectedComments));	×
350	}, 200);
351
352	const AutocompleteModelSettings = ({ classes }: { classes: ClassesType }) => {	1✔
353	const { SingleColumnSection, Loading, PostsItem, LoadMore, CommentsNode } = Components;	×
354	const currentUser = useCurrentUser();	×
355	const [selectedItems, setSelectedItems] = useState<Record<string, boolean>>(() => {	×
356	const savedPosts = JSON.parse(localStorage.getItem("selectedTrainingPosts") ?? "[]");	×
357	const savedComments = JSON.parse(localStorage.getItem("selectedTrainingComments") ?? "[]");	×
358	const initialSelectedItems: Record<string, boolean> = {};	×
359	[...savedPosts, ...savedComments].forEach((id) => {	×
360	initialSelectedItems[id] = true;	×
361	});
362	return initialSelectedItems;	×
363	});
364	const [tokenCount, setTokenCount] = useState(0);	×
365
366	const {
367	results: posts,
368	error: postsError,
369	loadMoreProps: postsLoadMoreProps,
370	} = useMulti({	×
371	terms: { view: "userPosts", userId: currentUser?._id, limit: 20, sortedBy: "top" },	×
372	collectionName: "Posts",
373	fragmentName: "PostsListWithVotes",
374	enableTotal: true,
375	});
376
377	const {
378	results: comments,
379	error: commentsError,
380	loadMoreProps: commentsLoadMoreProps,
381	} = useMulti({ terms: { view: "profileComments", userId: currentUser?._id, limit: 30, sortBy: "top"},	×
382	collectionName: "Comments",
383	fragmentName: "CommentsList",
384	enableTotal: true,
385	});
386
387	const authorContent = useGetFeaturedAuthorsContent()	×
388
389	useEffect(() => {	×
390	const allItems = [	×
391	...(posts ?? []),	×
392	...(comments ?? []),	×
393	...featuredAuthors.flatMap((author) => [	×
394	...(authorContent[author.userId]?.posts ?? []),	×
395	...(authorContent[author.userId]?.comments ?? []),	×
396	]),
397	];
398	setTokenCount(calculateTokens(allItems, selectedItems));	×
399
400	debouncedSaveSelection(selectedItems, posts ?? [], comments ?? [], authorContent);	×
401	}, [selectedItems, posts, comments, authorContent]);
402
403	const handleSelectAll = (items: Array<{ _id: string }>, currentIndex: number) => {	×
404	const newSelectedItems = { ...selectedItems };	×
405	items.slice(0, currentIndex + 1).forEach((item) => {	×
406	newSelectedItems[item._id] = true;	×
407	});
408	setSelectedItems(newSelectedItems);	×
409	};
410
411	const handleSubmit = () => {};	×
412
413	if (postsError \|\| commentsError) return null;	×
414
415	const sortedPosts = [...(posts ?? [])].sort((a, b) => (b.baseScore ?? 0) - (a.baseScore ?? 0));	×
416	const sortedComments = [...(comments ?? [])].sort((a, b) => (b.baseScore ?? 0) - (a.baseScore ?? 0));	×
417
418	return (	×
419	<AnalyticsContext pageContext="AutocompleteModelSettingsPage">
420	<SingleColumnSection>
421	<div className={classes.root}>
422	<h2>Select items for autocomplete model training</h2>
423
424	<div className={classes.progressBarSection}>
425	<div className={classes.progressBar}>
426	<LinearProgress variant="determinate" value={(tokenCount / MAX_TOKENS) * 100} />
427	</div>
428	<div className={classes.progressLabel}>
429	{Math.round(tokenCount)} / {MAX_TOKENS} tokens used
430	</div>
431	</div>
432
433	<div className={classes.section}>
434	<h3>Featured Authors</h3>
435	{featuredAuthors.map((author) => (
436	<AuthorSection	×
437	key={author.userId}
438	author={author}
439	authorContent={authorContent}
440	selectedItems={selectedItems}
441	onToggle={setSelectedItems}
442	onSelectAll={handleSelectAll}
443	classes={classes}
444	/>
445	))}
446	</div>
447
448	<div className={classes.section}>
449	<h3>Posts</h3>
450	<SelectableList
451	items={sortedPosts}
452	selectedItems={selectedItems}
453	onToggle={setSelectedItems}
454	onSelectAll={handleSelectAll}
455	ItemComponent={({ item }) => <PostsItem post={item as PostsListWithVotes} />}	×
456	classes={classes}
457	/>
458	<LoadMore {...postsLoadMoreProps} />
459	</div>
460
461	<div className={classes.section}>
462	<h3>Comments</h3>
463	<SelectableList
464	items={sortedComments}
465	selectedItems={selectedItems}
466	onToggle={setSelectedItems}
467	onSelectAll={handleSelectAll}
468	ItemComponent={({ item }) => (
469	<CommentsNode	×
470	treeOptions={{ forceSingleLine: true } as CommentTreeOptions}
471	comment={item as CommentsList}
472	/>
473	)}
474	classes={classes}
475	/>
476	<LoadMore {...commentsLoadMoreProps} />
477	</div>
478
479	<Button
480	variant="contained"
481	color="primary"
482	onClick={handleSubmit}
483	className={classes.button}
484	disabled={Object.values(selectedItems).filter(Boolean).length === 0 \|\| tokenCount > MAX_TOKENS}	×
485	>
486	Use Selected for Training
487	</Button>
488	</div>
489	</SingleColumnSection>
490	</AnalyticsContext>
491	);
492	};
493
494	const AutocompleteModelSettingsComponent = registerComponent("AutocompleteModelSettings", AutocompleteModelSettings, {	1✔
495	styles,
496	});
497
498	declare global {
499	interface ComponentTypes {
500	AutocompleteModelSettings: typeof AutocompleteModelSettingsComponent;
501	}
502	}

ForumMagnum / ForumMagnum / 10640124286

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