10589131411

Committed 28 Aug 2024 02:29AM UTC coverage: 31.95% (-0.09%) from 32.037%

Build # 10589131411

Build Type

Pull #9633

github

Committed by

Discordius

Commit Message

Adjust button to avoid breaking CTRL+B on windows

Pull Request Pull Request #9633: LLM Autocomplete for admins

Run Details

5020 of 40912 branches covered (12.27%)

Branch coverage included in aggregate %.

49 of 282 new or added lines in 7 files covered. (17.38%)

14 existing lines in 2 files now uncovered.

29254 of 66362 relevant lines covered (44.08%)

188.59 hits per line

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

11.88

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

ForumMagnum / ForumMagnum / 10589131411

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