8898257745

Committed 30 Apr 2024 04:22PM UTC coverage: 31.981% (+0.03%) from 31.952%

Build # 8898257745

Build Type

Pull #9197

github

Committed by

Will-Howard

Commit Message

cleanup

Pull Request Pull Request #9197: [Draft] Standardise rendering of dates and times

Run Details

4744 of 38553 branches covered (12.31%)

Branch coverage included in aggregate %.

60 of 109 new or added lines in 28 files covered. (55.05%)

24 existing lines in 9 files now uncovered.

27537 of 62386 relevant lines covered (44.14%)

179.24 hits per line

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

20.18

/packages/lesswrong/components/recommendations/RecommendationsSamplePage.tsx

import React, { ChangeEvent, useState } from "react";
import { registerComponent, Components } from "../../lib/vulcan-lib";
import { frontpageDaysAgoCutoffSetting } from "../../lib/scoring";
import { useLocation } from "../../lib/routeUtil";
import { useMulti } from "../../lib/crud/withMulti";
import { PostsPageContext } from "../posts/PostsPage/PostsPageContext";
import { useCurrentUser } from "../common/withUser";
import {
  isRecommendationStrategyName,
  RecommendationFeatureName,
  recommendationFeatureNames,
  RecommendationStrategyName,
  recommendationStrategyNames,
  WeightedFeature,
} from "../../lib/collections/users/recommendationSettings";
import Checkbox from "@material-ui/core/Checkbox";
import Select from "@material-ui/core/Select";
import Input from "@material-ui/core/Input";
import moment from "moment";
import qs from "qs";
import { useNavigate } from "../../lib/reactRouterWrapper";
import { useCurrentTime } from "../../lib/utils/timeUtil";

const styles = (theme: ThemeType) => ({
  root: {
    [theme.breakpoints.down("sm")]: {
      paddingTop: 30
    }
  },
  settings: {
    display: "flex",
    alignItems: "center",
    gap: "2em",
    marginBottom: 20,
    fontFamily: theme.palette.fonts.sansSerifStack,
  },
  result: {
    display: "flex",
    flexDirection: "column",
    gap: "8px",
    marginBottom: 42,
  },
});

const parseStrategy = (queryStrategy?: string): RecommendationStrategyName =>
  queryStrategy && isRecommendationStrategyName(queryStrategy)
    ? queryStrategy
    : "tagWeightedCollabFilter";

const parseNumber = (queryValue?: string, defaultValue = 1): number => {
  if (queryValue) {
    const parsed = parseFloat(queryValue);
    if (Number.isFinite(parsed)) {
      return parsed;
    }
  }
  return defaultValue;
}

const getDefaultFeatures = (): Record<RecommendationFeatureName, string> => ({
  karma: "0.8",
  curated: "0.1",
  tagSimilarity: "1.5",
  collabFilter: "1",
  textSimilarity: "1",
});

const featureInputToFeatures = (
  input: Record<RecommendationFeatureName, string>,
): WeightedFeature[] => {
  const result: WeightedFeature[] = [];
  for (const feature_ in input) {
    const feature = feature_ as RecommendationFeatureName;
    result.push({feature, weight: parseNumber(input[feature])});
  }
  return result;
}

const RecommendationsSamplePage = ({classes}: {
  classes: ClassesType,
}) => {
  const currentUser = useCurrentUser();
  const now = useCurrentTime();
  const {query} = useLocation();
  const navigate = useNavigate();
  const [strategy, setStrategy] = useState<RecommendationStrategyName>(
    parseStrategy(query.strategy),
  );
  const [loggedOutView, setLoggedOutView] = useState(
    query.loggedOutView ? query.loggedOutView === "true" : true,
  );
  const [bias, setBias] = useState(parseNumber(query.bias, 1.5));
  const [biasInput, setBiasInput] = useState(String(bias));
  const [featureInput, setFeatureInput] = useState(getDefaultFeatures);
  const [features, setFeatures] = useState(
    () => featureInputToFeatures(getDefaultFeatures()),
  );

  const {results, loading, loadMoreProps} = useMulti({
    terms: {
      after: moment(now).subtract(
        frontpageDaysAgoCutoffSetting.get(),
        "days",
      ).toISOString(),
      view: "magic",
      forum: true,
      limit: 20,
    },
    collectionName: "Posts",
    fragmentName: "PostsListWithVotes",
    fetchPolicy: "cache-and-network",
    nextFetchPolicy: "cache-first",
    itemsPerPage: 25,
  });

  if (!currentUser?.isAdmin) {
    return (
      <Components.Error404 />
    );
  }

  const onChangeStrategy = (e: ChangeEvent<HTMLSelectElement>) => {
    const name = e.target?.value;
    if (isRecommendationStrategyName(name)) {
      setStrategy(name);
      navigate({
        ...location,
        search: qs.stringify({
          ...query,
          strategy: name,
        }),
      }, {replace: true});
    }
  }

  const onChangeLoggedOutView = (
    _: ChangeEvent<HTMLInputElement>,
    checked: boolean,
  ) => {
    setLoggedOutView(checked);
    navigate({
      ...location,
      search: qs.stringify({
        ...query,
        loggedOutView: checked ? "true" : "false",
      }),
    }, {replace: true});
  }

  const onChangeBias = (e: ChangeEvent<HTMLInputElement>) =>
    setBiasInput(e.target?.value ?? "");

  const onBlurBias = () => {
    const value = parseNumber(biasInput);
    setBias(value);
    navigate({
      ...location,
      search: qs.stringify({
        ...query,
        bias: value,
      }),
    }, {replace: true});
  }

  const onChangeFeature = (feature: RecommendationFeatureName) =>
    (e: ChangeEvent<HTMLInputElement>) =>
      setFeatureInput({...featureInput, [feature]: e.target?.value ?? ""});

  const onBlurFeature = () => setFeatures(featureInputToFeatures(featureInput));

  const showBias = strategy === "tagWeightedCollabFilter";
  const showFeatures = strategy === "feature";

  const {
    SingleColumnSection, SectionTitle, PostsItem, PostsPageRecommendationsList,
    LoadMore, Loading, MenuItem,
  } = Components;

  return (
    <div className={classes.root}>
      <SingleColumnSection>
        <SectionTitle title="Recommendations Sample"/>
        <div className={classes.settings}>
          <Select
            value={strategy}
            onChange={onChangeStrategy}
          >
            {Array.from(recommendationStrategyNames).map((name) =>
              <MenuItem key={name} value={name}>{name}</MenuItem>
            )}
          </Select>
          <div>
            <Checkbox
              checked={loggedOutView}
              onChange={onChangeLoggedOutView}
            />
            Force logged out view
          </div>
          {showBias &&
            <div>
              <Input
                placeholder={"Bias"}
                value={biasInput}
                onChange={onChangeBias}
                onBlur={onBlurBias}
              />
            </div>
          }
        </div>
        {showFeatures &&
          <div className={classes.settings}>
            {Array.from(recommendationFeatureNames).map((feature) =>
              <div key={feature}>
                {feature}
                <Input
                  placeholder={feature}
                  value={featureInput[feature]}
                  onChange={onChangeFeature(feature)}
                  onBlur={onBlurFeature}
                />
              </div>
            )}
          </div>
        }
        {results?.map((post: PostsListWithVotes) =>
          <div key={post._id} className={classes.result}>
            <PostsItem post={post} />
            <PostsPageContext.Provider value={post as PostsWithNavigationAndRevision}>
              <PostsPageRecommendationsList
                title=""
                strategy={strategy}
                bias={bias}
                features={features}
                forceLoggedOutView={loggedOutView}
              />
            </PostsPageContext.Provider>
          </div>
        )}
        {loading
          ? <Loading />
          : <LoadMore {...loadMoreProps} />
        }
      </SingleColumnSection>
    </div>
  );
}

const RecommendationsSamplePageComponent = registerComponent(
  "RecommendationsSamplePage",
  RecommendationsSamplePage,
  {styles},
);

declare global {
  interface ComponentTypes {
    RecommendationsSamplePage: typeof RecommendationsSamplePageComponent,
  }
}

1	import React, { ChangeEvent, useState } from "react";	1✔
2	import { registerComponent, Components } from "../../lib/vulcan-lib";	1✔
3	import { frontpageDaysAgoCutoffSetting } from "../../lib/scoring";	1✔
4	import { useLocation } from "../../lib/routeUtil";	1✔
5	import { useMulti } from "../../lib/crud/withMulti";	1✔
6	import { PostsPageContext } from "../posts/PostsPage/PostsPageContext";	1✔
7	import { useCurrentUser } from "../common/withUser";	1✔
8	import {
9	isRecommendationStrategyName,
10	RecommendationFeatureName,
11	recommendationFeatureNames,
12	RecommendationStrategyName,
13	recommendationStrategyNames,
14	WeightedFeature,
15	} from "../../lib/collections/users/recommendationSettings";	1✔
16	import Checkbox from "@material-ui/core/Checkbox";	1✔
17	import Select from "@material-ui/core/Select";	1✔
18	import Input from "@material-ui/core/Input";	1✔
19	import moment from "moment";	1✔
20	import qs from "qs";	1✔
21	import { useNavigate } from "../../lib/reactRouterWrapper";	1✔
22	import { useCurrentTime } from "../../lib/utils/timeUtil";	1✔
23
24	const styles = (theme: ThemeType) => ({	1✔
25	root: {
26	[theme.breakpoints.down("sm")]: {
27	paddingTop: 30
28	}
29	},
30	settings: {
31	display: "flex",
32	alignItems: "center",
33	gap: "2em",
34	marginBottom: 20,
35	fontFamily: theme.palette.fonts.sansSerifStack,
36	},
37	result: {
38	display: "flex",
39	flexDirection: "column",
40	gap: "8px",
41	marginBottom: 42,
42	},
43	});
44
45	const parseStrategy = (queryStrategy?: string): RecommendationStrategyName =>	1✔
46	queryStrategy && isRecommendationStrategyName(queryStrategy)	×
47	? queryStrategy	×
48	: "tagWeightedCollabFilter";
49
50	const parseNumber = (queryValue?: string, defaultValue = 1): number => {	1!
51	if (queryValue) {	×
52	const parsed = parseFloat(queryValue);	×
53	if (Number.isFinite(parsed)) {	×
54	return parsed;	×
55	}
56	}
57	return defaultValue;	×
58	}
59
60	const getDefaultFeatures = (): Record<RecommendationFeatureName, string> => ({	1✔
61	karma: "0.8",
62	curated: "0.1",
63	tagSimilarity: "1.5",
64	collabFilter: "1",
65	textSimilarity: "1",
66	});
67
68	const featureInputToFeatures = (	1✔
69	input: Record<RecommendationFeatureName, string>,
70	): WeightedFeature[] => {
71	const result: WeightedFeature[] = [];	×
72	for (const feature_ in input) {	×
73	const feature = feature_ as RecommendationFeatureName;	×
74	result.push({feature, weight: parseNumber(input[feature])});	×
75	}
76	return result;	×
77	}
78
79	const RecommendationsSamplePage = ({classes}: {	1✔
80	classes: ClassesType,
81	}) => {
82	const currentUser = useCurrentUser();	×
NEW 83	const now = useCurrentTime();	×
84	const {query} = useLocation();	×
85	const navigate = useNavigate();	×
86	const [strategy, setStrategy] = useState<RecommendationStrategyName>(	×
87	parseStrategy(query.strategy),
88	);
89	const [loggedOutView, setLoggedOutView] = useState(	×
90	query.loggedOutView ? query.loggedOutView === "true" : true,	×
91	);
92	const [bias, setBias] = useState(parseNumber(query.bias, 1.5));	×
93	const [biasInput, setBiasInput] = useState(String(bias));	×
94	const [featureInput, setFeatureInput] = useState(getDefaultFeatures);	×
95	const [features, setFeatures] = useState(	×
96	() => featureInputToFeatures(getDefaultFeatures()),	×
97	);
98
99	const {results, loading, loadMoreProps} = useMulti({	×
100	terms: {
101	after: moment(now).subtract(
102	frontpageDaysAgoCutoffSetting.get(),
103	"days",
104	).toISOString(),
105	view: "magic",
106	forum: true,
107	limit: 20,
108	},
109	collectionName: "Posts",
110	fragmentName: "PostsListWithVotes",
111	fetchPolicy: "cache-and-network",
112	nextFetchPolicy: "cache-first",
113	itemsPerPage: 25,
114	});
115
116	if (!currentUser?.isAdmin) {	×
117	return (	×
118	<Components.Error404 />
119	);
120	}
121
122	const onChangeStrategy = (e: ChangeEvent<HTMLSelectElement>) => {	×
123	const name = e.target?.value;	×
124	if (isRecommendationStrategyName(name)) {	×
125	setStrategy(name);	×
126	navigate({	×
127	...location,
128	search: qs.stringify({
129	...query,
130	strategy: name,
131	}),
132	}, {replace: true});
133	}
134	}
135
136	const onChangeLoggedOutView = (	×
137	_: ChangeEvent<HTMLInputElement>,
138	checked: boolean,
139	) => {
140	setLoggedOutView(checked);	×
141	navigate({	×
142	...location,
143	search: qs.stringify({
144	...query,
145	loggedOutView: checked ? "true" : "false",	×
146	}),
147	}, {replace: true});
148	}
149
150	const onChangeBias = (e: ChangeEvent<HTMLInputElement>) =>	×
151	setBiasInput(e.target?.value ?? "");	×
152
153	const onBlurBias = () => {	×
154	const value = parseNumber(biasInput);	×
155	setBias(value);	×
156	navigate({	×
157	...location,
158	search: qs.stringify({
159	...query,
160	bias: value,
161	}),
162	}, {replace: true});
163	}
164
165	const onChangeFeature = (feature: RecommendationFeatureName) =>	×
166	(e: ChangeEvent<HTMLInputElement>) =>	×
167	setFeatureInput({...featureInput, [feature]: e.target?.value ?? ""});	×
168
169	const onBlurFeature = () => setFeatures(featureInputToFeatures(featureInput));	×
170
171	const showBias = strategy === "tagWeightedCollabFilter";	×
172	const showFeatures = strategy === "feature";	×
173
174	const {
175	SingleColumnSection, SectionTitle, PostsItem, PostsPageRecommendationsList,
176	LoadMore, Loading, MenuItem,
177	} = Components;	×
178
179	return (	×
180	<div className={classes.root}>
181	<SingleColumnSection>
182	<SectionTitle title="Recommendations Sample"/>
183	<div className={classes.settings}>
184	<Select
185	value={strategy}
186	onChange={onChangeStrategy}
187	>
188	{Array.from(recommendationStrategyNames).map((name) =>
189	<MenuItem key={name} value={name}>{name}</MenuItem>	×
190	)}
191	</Select>
192	<div>
193	<Checkbox
194	checked={loggedOutView}
195	onChange={onChangeLoggedOutView}
196	/>
197	Force logged out view
198	</div>
199	{showBias &&	×
200	<div>
201	<Input
202	placeholder={"Bias"}
203	value={biasInput}
204	onChange={onChangeBias}
205	onBlur={onBlurBias}
206	/>
207	</div>
208	}
209	</div>
210	{showFeatures &&	×
211	<div className={classes.settings}>
212	{Array.from(recommendationFeatureNames).map((feature) =>
213	<div key={feature}>	×
214	{feature}
215	<Input
216	placeholder={feature}
217	value={featureInput[feature]}
218	onChange={onChangeFeature(feature)}
219	onBlur={onBlurFeature}
220	/>
221	</div>
222	)}
223	</div>
224	}
225	{results?.map((post: PostsListWithVotes) =>	×
226	<div key={post._id} className={classes.result}>	×
227	<PostsItem post={post} />
228	<PostsPageContext.Provider value={post as PostsWithNavigationAndRevision}>
229	<PostsPageRecommendationsList
230	title=""
231	strategy={strategy}
232	bias={bias}
233	features={features}
234	forceLoggedOutView={loggedOutView}
235	/>
236	</PostsPageContext.Provider>
237	</div>
238	)}
239	{loading
240	? <Loading />	×
241	: <LoadMore {...loadMoreProps} />
242	}
243	</SingleColumnSection>
244	</div>
245	);
246	}
247
248	const RecommendationsSamplePageComponent = registerComponent(	1✔
249	"RecommendationsSamplePage",
250	RecommendationsSamplePage,
251	{styles},
252	);
253
254	declare global {
255	interface ComponentTypes {
256	RecommendationsSamplePage: typeof RecommendationsSamplePageComponent,
257	}
258	}

ForumMagnum / ForumMagnum / 8898257745

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