9083937423

Committed 14 May 2024 05:53PM UTC coverage: 31.934% (-0.01%) from 31.946%

Build # 9083937423

Build Type

Pull #9280

github

Committed by

b0b3rt

Commit Message

fix cutoff

Pull Request Pull Request #9280: make load more work for stale recommendations

Run Details

4784 of 39042 branches covered (12.25%)

Branch coverage included in aggregate %.

6 of 34 new or added lines in 2 files covered. (17.65%)

11 existing lines in 4 files now uncovered.

27815 of 63041 relevant lines covered (44.12%)

179.96 hits per line

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

13.11

/packages/lesswrong/components/posts/RecombeePostsList.tsx

import React, { useState } from 'react';
import { Components, fragmentTextForQuery, registerComponent } from '../../lib/vulcan-lib';
import { NetworkStatus, gql, useQuery } from '@apollo/client';
import { HybridRecombeeConfiguration, RecombeeConfiguration } from '../../lib/collections/users/recommendationSettings';
import { useOnMountTracking } from '../../lib/analyticsEvents';
import uniq from 'lodash/uniq';
import { filterNonnull } from '../../lib/utils/typeGuardUtils';
import moment from 'moment';

// Would be nice not to duplicate in postResolvers.ts but unfortunately the post types are different
interface RecombeeRecommendedPost {
  post: PostsListWithVotes,
  scenario: string,
  recommId: string,
  generatedAt: Date,
  curated?: never,
  stickied?: never,
}

type RecommendedPost = RecombeeRecommendedPost | {
  post: PostsListWithVotes,
  scenario?: never,
  recommId?: never,
  generatedAt?: never,
  curated: boolean,
  stickied: boolean,
};

type LoadMoreSettings = {
  loadMore: (RecombeeConfiguration | HybridRecombeeConfiguration)['loadMore'];
  excludedPostIds: string[];
} | {
  loadMore?: never;
  excludedPostIds: string[]
} | {
  loadMore: (RecombeeConfiguration | HybridRecombeeConfiguration)['loadMore'];
  excludedPostIds?: never
} | undefined;

const styles = (theme: ThemeType) => ({
  root: {

  }
});

const DEFAULT_RESOLVER_NAME = 'RecombeeLatestPosts';
const HYBRID_RESOLVER_NAME = 'RecombeeHybridPosts';

type RecombeeResolver = typeof DEFAULT_RESOLVER_NAME | typeof HYBRID_RESOLVER_NAME;

const getRecombeePostsQuery = (resolverName: RecombeeResolver) => gql`
  query get${resolverName}($limit: Int, $settings: JSON) {
    ${resolverName}(limit: $limit, settings: $settings) {
      results {
        post {
          ...PostsListWithVotes
        }
        scenario
        recommId
        generatedAt
        curated
        stickied
      }
    }
  }
  ${fragmentTextForQuery('PostsListWithVotes')}
`;

const isWithinLoadMoreWindow = (recGeneratedAt: Date) => {
  // Use 29 minutes instead of 30 as the cutoff for considering recommendations stale, just to have a bit of buffer.
  const loadMoreTtlMs = 1000 * 60 * 29;
  const cutoff = moment().subtract(loadMoreTtlMs, 'ms');

  return moment(recGeneratedAt).isAfter(cutoff);
};

const getLoadMoreSettings = (resolverName: RecombeeResolver, results: RecommendedPost[], loadMoreCount: number): LoadMoreSettings => {
  switch (resolverName) {
    case DEFAULT_RESOLVER_NAME:
      const prevRecommId = results.find(result => result.recommId)?.recommId;
      if (!prevRecommId) {
        return undefined;
      }
      return { loadMore: { prevRecommId } };  
    case HYBRID_RESOLVER_NAME:
      const staleRecommIds = filterNonnull(uniq(
        results
          .filter(({ generatedAt }) => generatedAt && !isWithinLoadMoreWindow(generatedAt))
          .map(({ recommId }) => recommId)
      ));

      const staleRecomms = results.filter(({ recommId }) => recommId && staleRecommIds.includes(recommId));
      const freshRecomms = results.filter(({ recommId }) => recommId && !staleRecommIds.includes(recommId));

      const excludedPostIds = staleRecomms.map(({ post: { _id } }) => _id);
      const [firstRecommId, secondRecommId] = filterNonnull(uniq(freshRecomms.map(({ recommId }) => recommId)));

      if (staleRecomms.length && !freshRecomms.length) {
        return { excludedPostIds, loadMore: { prevRecommIds: [undefined, undefined], loadMoreCount } };
      } else if (!staleRecomms.length && freshRecomms.length) {
        return { loadMore: { prevRecommIds: [firstRecommId, secondRecommId], loadMoreCount } };
      } else {
        return { excludedPostIds, loadMore: { prevRecommIds: [firstRecommId, secondRecommId], loadMoreCount } };
      }
  }
}

export const stickiedPostTerms: PostsViewTerms = {
  view: 'stickied',
  limit: 4, // seriously, shouldn't have more than 4 stickied posts
  forum: true
};

export const RecombeePostsList = ({ algorithm, settings, limit = 15, showRecommendationIcon = false, classes }: {
  algorithm: string,
  settings: RecombeeConfiguration,
  limit?: number,
  showRecommendationIcon?: boolean,
  classes: ClassesType<typeof styles>,
}) => {
  const { LoadMore, PostsItem, SectionFooter, PostsLoading } = Components;

  const [loadMoreCount, setLoadMoreCount] = useState(1);

  const recombeeSettings = { ...settings, scenario: algorithm };

  const resolverName = algorithm === 'recombee-hybrid'
    ? HYBRID_RESOLVER_NAME
    : DEFAULT_RESOLVER_NAME;

  const query = getRecombeePostsQuery(resolverName);
  const { data, loading, fetchMore, networkStatus } = useQuery(query, {
    notifyOnNetworkStatusChange: true,
    pollInterval: 0,
    variables: {
      limit,
      settings: recombeeSettings,
    },
  });

  const results: RecommendedPost[] | undefined = data?.[resolverName]?.results;

  const postIds = results?.map(({post}) => post._id) ?? [];
  const postIdsWithScenario = results?.map(({ post, scenario, curated, stickied }) => {
    let loggedScenario = scenario;
    if (!loggedScenario) {
      if (curated) {
        loggedScenario = 'curated';
      } else if (stickied) {
        loggedScenario = 'stickied';
      } else {
        loggedScenario = 'hacker-news';
      }
    }
    
    return { postId: post._id, scenario: loggedScenario };
  }) ?? [];

  useOnMountTracking({
    eventType: "postList",
    // TODO: Remove postIds which is redundant once analytics dashboard written to use postIdsWithScenario
    eventProps: { postIds, postIdsWithScenario, algorithm },
    captureOnMount: (eventProps) => eventProps.postIds.length > 0,
    skip: !postIds.length || loading,
  });

  if (loading && !results) {
    return <PostsLoading placeholderCount={limit} />;
  }

  if (!results) {
    return null;
  }


  return <div>
    <div className={classes.root}>
      {results.map(({ post, recommId, curated, stickied }) => <PostsItem 
        key={post._id} 
        post={post} 
        recombeeRecommId={recommId} 
        curatedIconLeft={curated} 
        showRecommendationIcon={showRecommendationIcon}
        emphasizeIfNew={true}
        terms={stickied ? stickiedPostTerms : undefined}
      />)}
    </div>
    <SectionFooter>
      <LoadMore
        loading={loading || networkStatus === NetworkStatus.fetchMore}
        loadMore={() => {
          const loadMoreSettings = getLoadMoreSettings(resolverName, results, loadMoreCount);
          void fetchMore({
            variables: {
              settings: { ...recombeeSettings, ...loadMoreSettings },
            },
            // Update the apollo cache with the combined results of previous loads and the items returned by the current loadMore
            updateQuery: (prev: AnyBecauseHard, { fetchMoreResult }: AnyBecauseHard) => {
              setLoadMoreCount(loadMoreCount + 1);

              if (!fetchMoreResult) return prev;

              return {
                [resolverName]: {
                  __typename: fetchMoreResult[resolverName].__typename,
                  results: [...prev[resolverName].results, ...fetchMoreResult[resolverName].results]
                }
              };
            }
          });
        }}
        sectionFooterStyles
      />
    </SectionFooter>
  </div>;
}

const RecombeePostsListComponent = registerComponent('RecombeePostsList', RecombeePostsList, {styles});

declare global {
  interface ComponentTypes {
    RecombeePostsList: typeof RecombeePostsListComponent
  }
}

1	import React, { useState } from 'react';	54✔
2	import { Components, fragmentTextForQuery, registerComponent } from '../../lib/vulcan-lib';	18✔
3	import { NetworkStatus, gql, useQuery } from '@apollo/client';	18✔
4	import { HybridRecombeeConfiguration, RecombeeConfiguration } from '../../lib/collections/users/recommendationSettings';
5	import { useOnMountTracking } from '../../lib/analyticsEvents';	18✔
6	import uniq from 'lodash/uniq';	18✔
7	import { filterNonnull } from '../../lib/utils/typeGuardUtils';	18✔
8	import moment from 'moment';	18✔
9
10	// Would be nice not to duplicate in postResolvers.ts but unfortunately the post types are different
11	interface RecombeeRecommendedPost {
12	post: PostsListWithVotes,
13	scenario: string,
14	recommId: string,
15	generatedAt: Date,
16	curated?: never,
17	stickied?: never,
18	}
19
20	type RecommendedPost = RecombeeRecommendedPost \| {
21	post: PostsListWithVotes,
22	scenario?: never,
23	recommId?: never,
24	generatedAt?: never,
25	curated: boolean,
26	stickied: boolean,
27	};
28
29	type LoadMoreSettings = {
30	loadMore: (RecombeeConfiguration \| HybridRecombeeConfiguration)['loadMore'];
31	excludedPostIds: string[];
32	} \| {
33	loadMore?: never;
34	excludedPostIds: string[]
35	} \| {
36	loadMore: (RecombeeConfiguration \| HybridRecombeeConfiguration)['loadMore'];
37	excludedPostIds?: never
38	} \| undefined;
39
40	const styles = (theme: ThemeType) => ({	18✔
41	root: {
42
43	}
44	});
45
46	const DEFAULT_RESOLVER_NAME = 'RecombeeLatestPosts';	18✔
47	const HYBRID_RESOLVER_NAME = 'RecombeeHybridPosts';	18✔
48
49	type RecombeeResolver = typeof DEFAULT_RESOLVER_NAME \| typeof HYBRID_RESOLVER_NAME;
50
51	const getRecombeePostsQuery = (resolverName: RecombeeResolver) => gql`	18✔
52	query get${resolverName}($limit: Int, $settings: JSON) {
53	${resolverName}(limit: $limit, settings: $settings) {
54	results {
55	post {
56	...PostsListWithVotes
57	}
58	scenario
59	recommId
60	generatedAt
61	curated
62	stickied
63	}
64	}
65	}
66	${fragmentTextForQuery('PostsListWithVotes')}
67	`;
68
69	const isWithinLoadMoreWindow = (recGeneratedAt: Date) => {	18✔
70	// Use 29 minutes instead of 30 as the cutoff for considering recommendations stale, just to have a bit of buffer.
NEW 71	const loadMoreTtlMs = 1000 * 60 * 29;	×
NEW 72	const cutoff = moment().subtract(loadMoreTtlMs, 'ms');	×
73
NEW 74	return moment(recGeneratedAt).isAfter(cutoff);	×
75	};
76
77	const getLoadMoreSettings = (resolverName: RecombeeResolver, results: RecommendedPost[], loadMoreCount: number): LoadMoreSettings => {	18✔
UNCOV 78	switch (resolverName) {	×
79	case DEFAULT_RESOLVER_NAME:
80	const prevRecommId = results.find(result => result.recommId)?.recommId;	×
81	if (!prevRecommId) {	×
82	return undefined;	×
83	}
NEW 84	return { loadMore: { prevRecommId } };	×
85	case HYBRID_RESOLVER_NAME:
NEW 86	const staleRecommIds = filterNonnull(uniq(	×
87	results
NEW 88	.filter(({ generatedAt }) => generatedAt && !isWithinLoadMoreWindow(generatedAt))	×
NEW 89	.map(({ recommId }) => recommId)	×
90	));
91
NEW 92	const staleRecomms = results.filter(({ recommId }) => recommId && staleRecommIds.includes(recommId));	×
NEW 93	const freshRecomms = results.filter(({ recommId }) => recommId && !staleRecommIds.includes(recommId));	×
94
NEW 95	const excludedPostIds = staleRecomms.map(({ post: { _id } }) => _id);	×
NEW 96	const [firstRecommId, secondRecommId] = filterNonnull(uniq(freshRecomms.map(({ recommId }) => recommId)));	×
97
NEW 98	if (staleRecomms.length && !freshRecomms.length) {	×
NEW 99	return { excludedPostIds, loadMore: { prevRecommIds: [undefined, undefined], loadMoreCount } };	×
NEW 100	} else if (!staleRecomms.length && freshRecomms.length) {	×
NEW 101	return { loadMore: { prevRecommIds: [firstRecommId, secondRecommId], loadMoreCount } };	×
102	} else {
NEW 103	return { excludedPostIds, loadMore: { prevRecommIds: [firstRecommId, secondRecommId], loadMoreCount } };	×
104	}
105	}
106	}
107
108	export const stickiedPostTerms: PostsViewTerms = {	18✔
109	view: 'stickied',
110	limit: 4, // seriously, shouldn't have more than 4 stickied posts
111	forum: true
112	};
113
114	export const RecombeePostsList = ({ algorithm, settings, limit = 15, showRecommendationIcon = false, classes }: {	18!
115	algorithm: string,
116	settings: RecombeeConfiguration,
117	limit?: number,
118	showRecommendationIcon?: boolean,
119	classes: ClassesType<typeof styles>,
120	}) => {
121	const { LoadMore, PostsItem, SectionFooter, PostsLoading } = Components;	×
122
123	const [loadMoreCount, setLoadMoreCount] = useState(1);	×
124
125	const recombeeSettings = { ...settings, scenario: algorithm };	×
126
127	const resolverName = algorithm === 'recombee-hybrid'	×
128	? HYBRID_RESOLVER_NAME	×
129	: DEFAULT_RESOLVER_NAME;
130
131	const query = getRecombeePostsQuery(resolverName);	×
132	const { data, loading, fetchMore, networkStatus } = useQuery(query, {	×
133	notifyOnNetworkStatusChange: true,
134	pollInterval: 0,
135	variables: {
136	limit,
137	settings: recombeeSettings,
138	},
139	});
140
141	const results: RecommendedPost[] \| undefined = data?.[resolverName]?.results;	×
142
143	const postIds = results?.map(({post}) => post._id) ?? [];	×
144	const postIdsWithScenario = results?.map(({ post, scenario, curated, stickied }) => {	×
145	let loggedScenario = scenario;	×
146	if (!loggedScenario) {	×
147	if (curated) {	×
148	loggedScenario = 'curated';	×
149	} else if (stickied) {	×
150	loggedScenario = 'stickied';	×
151	} else {
152	loggedScenario = 'hacker-news';	×
153	}
154	}
155
156	return { postId: post._id, scenario: loggedScenario };	×
157	}) ?? [];
158
159	useOnMountTracking({	×
160	eventType: "postList",
161	// TODO: Remove postIds which is redundant once analytics dashboard written to use postIdsWithScenario
162	eventProps: { postIds, postIdsWithScenario, algorithm },
163	captureOnMount: (eventProps) => eventProps.postIds.length > 0,	×
164	skip: !postIds.length \|\| loading,	×
165	});
166
167	if (loading && !results) {	×
168	return <PostsLoading placeholderCount={limit} />;	×
169	}
170
171	if (!results) {	×
172	return null;	×
173	}
174
175
176	return <div>	×
177	<div className={classes.root}>
178	{results.map(({ post, recommId, curated, stickied }) => <PostsItem	×
179	key={post._id}
180	post={post}
181	recombeeRecommId={recommId}
182	curatedIconLeft={curated}
183	showRecommendationIcon={showRecommendationIcon}
184	emphasizeIfNew={true}
185	terms={stickied ? stickiedPostTerms : undefined}	×
186	/>)}
187	</div>
188	<SectionFooter>
189	<LoadMore
190	loading={loading \|\| networkStatus === NetworkStatus.fetchMore}	×
191	loadMore={() => {
192	const loadMoreSettings = getLoadMoreSettings(resolverName, results, loadMoreCount);	×
193	void fetchMore({	×
194	variables: {
195	settings: { ...recombeeSettings, ...loadMoreSettings },
196	},
197	// Update the apollo cache with the combined results of previous loads and the items returned by the current loadMore
198	updateQuery: (prev: AnyBecauseHard, { fetchMoreResult }: AnyBecauseHard) => {
199	setLoadMoreCount(loadMoreCount + 1);	×
200
201	if (!fetchMoreResult) return prev;	×
202
203	return {	×
204	[resolverName]: {
205	__typename: fetchMoreResult[resolverName].__typename,
206	results: [...prev[resolverName].results, ...fetchMoreResult[resolverName].results]
207	}
208	};
209	}
210	});
211	}}
212	sectionFooterStyles
213	/>
214	</SectionFooter>
215	</div>;
216	}
217
218	const RecombeePostsListComponent = registerComponent('RecombeePostsList', RecombeePostsList, {styles});	18✔
219
220	declare global {
221	interface ComponentTypes {
222	RecombeePostsList: typeof RecombeePostsListComponent
223	}
224	}

ForumMagnum / ForumMagnum / 9083937423

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