9222751356

Committed 24 May 2024 10:48AM UTC coverage: 31.918% (-0.004%) from 31.922%

Build # 9222751356

Build Type

Pull #9312

github

Committed by

oetherington

Commit Message

Better wrapping for graph controls

Pull Request Pull Request #9312: Author analytics improvements 2024 05

Run Details

4799 of 39145 branches covered (12.26%)

Branch coverage included in aggregate %.

52 of 108 new or added lines in 10 files covered. (48.15%)

5 existing lines in 5 files now uncovered.

27894 of 63282 relevant lines covered (44.08%)

180.29 hits per line

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

8.45

/packages/lesswrong/components/hooks/useAnalytics.ts

import { useQuery, gql, ApolloError } from "@apollo/client";
import { useCallback, useEffect, useMemo, useRef, useState } from "react";
import { TupleSet, UnionOf } from "../../lib/utils/typeGuardUtils";
import moment from "moment";
import { generateDateSeries } from "../../lib/helpers";
import stringify from "json-stringify-deterministic";

export const analyticsFieldsList = ['views', 'reads', 'karma', 'comments'] as const
export const analyticsFields = new TupleSet(analyticsFieldsList);
export type AnalyticsField = UnionOf<typeof analyticsFields>;

export type PostAnalytics2Result = {
  _id: string;
  title: string;
  slug: string;
  postedAt: Date;
  views: number;
  uniqueViews: number;
  reads: number;
  meanReadingTime: number;
  karma: number;
  comments: number;
};

export type MultiPostAnalyticsResult = {
  posts: PostAnalytics2Result[];
  totalCount: number;
};

type MultiPostAnalyticsQueryResult = {
  MultiPostAnalytics: MultiPostAnalyticsResult;
};

export type AnalyticsSeriesValue = ({[key in AnalyticsField]: number | null} & {date: Date});

type AnalyticsSeriesQueryResult = {
  AnalyticsSeries: AnalyticsSeriesValue[];
};

const MultiPostAnalyticsQuery = gql`
  query MultiPostAnalyticsQuery($userId: String, $postIds: [String], $sortBy: String, $desc: Boolean, $limit: Int) {
    MultiPostAnalytics(userId: $userId, postIds: $postIds, sortBy: $sortBy, desc: $desc, limit: $limit) {
      posts {
        _id
        title
        slug
        postedAt
        views
        uniqueViews
        reads
        meanReadingTime
        karma
        comments
      }
      totalCount
    }
  }
`;

const AnalyticsSeriesQuery = gql`
  query AnalyticsSeriesQuery($userId: String, $postIds: [String], $startDate: Date, $endDate: Date) {
    AnalyticsSeries(userId: $userId, postIds: $postIds, startDate: $startDate, endDate: $endDate) {
      date
      views
      reads
      karma
      comments
    }
  }
`;

/**
 * Fetches analytics for a given user, sorted by a given field.
 */
export const useMultiPostAnalytics = ({
  userId,
  postIds,
  sortBy,
  desc,
  initialLimit = 10,
  itemsPerPage = 20,
}: {
  userId?: string;
  postIds?: string[];
  sortBy?: string;
  desc?: boolean;
  initialLimit?: number;
  itemsPerPage?: number;
}) => {
  const [limit, setLimit] = useState(initialLimit);
  const [moreLoading, setMoreLoading] = useState(false);

  const variables = useMemo(() => ({
    userId,
    postIds,
    sortBy,
    desc,
    limit,
  }), [userId, postIds, sortBy, desc, limit]);

  const { data, loading, error, fetchMore } = useQuery<MultiPostAnalyticsQueryResult>(MultiPostAnalyticsQuery, {
    variables,
    skip: !userId && (!postIds || postIds.length === 0),
  });

  const currentData = data?.MultiPostAnalytics
  const totalCount = currentData?.totalCount ?? 0
  const count = currentData?.posts?.length ?? 0
  const showLoadMore = !!userId && (count < totalCount);

  const loadMore = useCallback(async (limitOverride?: number) => {
    const newLimit = limitOverride ?? (limit + itemsPerPage);

    setMoreLoading(true);
    void fetchMore({
      variables: {
        ...variables,
        limit: newLimit,
      },
      updateQuery: (prev, { fetchMoreResult }) => {
        setMoreLoading(false);
        if (!fetchMoreResult) return prev;
        return fetchMoreResult;
      },
    });
    setLimit(newLimit);
  }, [
    limit,
    itemsPerPage,
    fetchMore,
    variables,
  ]);

  const loadMoreProps = useMemo(() => ({
    loadMore,
    count,
    totalCount,
    loading: moreLoading,
    hidden: !showLoadMore,
  }), [loadMore, count, totalCount, moreLoading, showLoadMore]);

  return {
    data: data?.MultiPostAnalytics,
    loading: loading,
    error,
    loadMoreProps
  };
};

export type UseAnalyticsSeriesProps = {
  userId?: string;
  postIds?: string[];
  startDate: Date | null;
  endDate: Date;
}

/**
 * Get the views, reads, karma, comment numbers by day for a particular user or set of postIds. This hook does the following to manage
 * it's internal state:
 * - Doesn't refetch if the bounding dates are changed within the range of data it already has
 * - After fetching the absolutely required data for a given range, overfetches by 180 days on either side to avoid having to refetch
 *   when the user changes the date range slightly
 */
export const useAnalyticsSeries = (props: UseAnalyticsSeriesProps): {
  analyticsSeries: AnalyticsSeriesValue[];
  loading: boolean;
  error?: ApolloError
} => {
  const { userId, postIds, startDate: propsStartDate, endDate: propsEndDate } = props;
  // Convert to UTC to ensure args passed to useQuery are consistent between SSR and client
  const utcPropsStartDate = propsStartDate ? moment(propsStartDate).utc().toDate() : null;
  const utcPropsEndDate = moment(propsEndDate).utc().toDate();

  const fetchDateRef = useRef({ startDate: utcPropsStartDate, endDate: utcPropsEndDate });

  // Update fetchDateRef based on whether the current values from the props are within the existing bounds
  if (
    (fetchDateRef.current.startDate ?? 0) > (utcPropsStartDate ?? 0) ||
    // If we are changing from null to non-null or vice versa, we need to refetch
    ([fetchDateRef.current.startDate, utcPropsStartDate].includes(null) &&
      fetchDateRef.current.startDate !== utcPropsStartDate)
  ) {
    fetchDateRef.current.startDate = utcPropsStartDate;
  }

  if (fetchDateRef.current.endDate < utcPropsEndDate) {
    fetchDateRef.current.endDate = utcPropsEndDate;
  }

  const { startDate, endDate } = fetchDateRef.current;

  const [activeVariables, setActiveVariables] = useState({});
  const variablesAreActive = stringify(activeVariables) === stringify({ userId, postIds, startDate, endDate });

  const variables = { userId, postIds, startDate, endDate };
  const { data, loading, error } = useQuery<AnalyticsSeriesQueryResult>(AnalyticsSeriesQuery, {
    variables,
    skip: !userId && (!postIds || postIds.length === 0),
  });

  useEffect(() => {
    // Once one fetch has returned, set the active variables to trigger a second fetch with the dates padded by 180 days on either side
    if (data && !variablesAreActive) {
      const endOfToday = moment().utc().endOf("day").toDate();
      const paddedStartDate = startDate ? moment(startDate).utc().subtract(180, "days").startOf("day").toDate() : null;
      const maxPaddedEndDate = moment(endDate).utc().add(180, "days").endOf("day").toDate();
      const paddedEndDate = maxPaddedEndDate > endOfToday ? endOfToday : maxPaddedEndDate;
      fetchDateRef.current = { startDate: paddedStartDate, endDate: paddedEndDate };

      setActiveVariables({ userId, postIds, startDate: paddedStartDate, endDate: paddedEndDate });
    }
  }, [data, endDate, postIds, startDate, userId, variablesAreActive]);

  const fullSeriesRef = useRef<AnalyticsSeriesValue[]>([]);
  const truncatedSeriesRef = useRef<AnalyticsSeriesValue[]>([]);

  if (data?.AnalyticsSeries && data.AnalyticsSeries !== fullSeriesRef.current) {
    fullSeriesRef.current = data.AnalyticsSeries;
  }

  const fullSeries = fullSeriesRef.current;
  truncatedSeriesRef.current = useMemo(() => {
    const truncated = fullSeries.filter((value) => {
      const date = new Date(value.date);
      return (!utcPropsStartDate || date >= utcPropsStartDate) && date <= utcPropsEndDate;
    });

    // Now pad the series with 0 values for any missing dates
    const truncatedStartDate = new Date(truncated[0]?.date ?? utcPropsStartDate);
    const truncatedEndDate = new Date(truncated[truncated.length - 1]?.date ?? utcPropsEndDate);

    if (truncatedStartDate === utcPropsStartDate && truncatedEndDate === utcPropsEndDate) return truncated;

    const startPaddingLength = Math.floor(moment.duration(moment(truncatedStartDate).utc().diff(utcPropsStartDate)).asDays());
    const endPaddingLength = Math.floor(moment.duration(moment(utcPropsEndDate).utc().diff(truncatedEndDate)).asDays());

    const dateSeries = generateDateSeries(utcPropsStartDate ?? truncatedStartDate, utcPropsEndDate);
    const startSeries = dateSeries.slice(0, startPaddingLength).map((date) => ({ date: new Date(date), views: 0, reads: 0, karma: 0, comments: 0 }));
    const endSeries = dateSeries.slice(dateSeries.length - endPaddingLength).map((date) => ({ date: new Date(date), views: 0, reads: 0, karma: 0, comments: 0 }));

    return [...startSeries, ...truncated, ...endSeries];
  }, [fullSeries, utcPropsEndDate, utcPropsStartDate]);

  return {
    analyticsSeries: truncatedSeriesRef.current,
    loading,
    error,
  };
};

1	import { useQuery, gql, ApolloError } from "@apollo/client";	3✔
2	import { useCallback, useEffect, useMemo, useRef, useState } from "react";	1✔
3	import { TupleSet, UnionOf } from "../../lib/utils/typeGuardUtils";	1✔
4	import moment from "moment";	1✔
5	import { generateDateSeries } from "../../lib/helpers";	1✔
6	import stringify from "json-stringify-deterministic";	1✔
7
8	export const analyticsFieldsList = ['views', 'reads', 'karma', 'comments'] as const	1✔
9	export const analyticsFields = new TupleSet(analyticsFieldsList);	1✔
10	export type AnalyticsField = UnionOf<typeof analyticsFields>;
11
12	export type PostAnalytics2Result = {
13	_id: string;
14	title: string;
15	slug: string;
16	postedAt: Date;
17	views: number;
18	uniqueViews: number;
19	reads: number;
20	meanReadingTime: number;
21	karma: number;
22	comments: number;
23	};
24
25	export type MultiPostAnalyticsResult = {
26	posts: PostAnalytics2Result[];
27	totalCount: number;
28	};
29
30	type MultiPostAnalyticsQueryResult = {
31	MultiPostAnalytics: MultiPostAnalyticsResult;
32	};
33
34	export type AnalyticsSeriesValue = ({[key in AnalyticsField]: number \| null} & {date: Date});
35
36	type AnalyticsSeriesQueryResult = {
37	AnalyticsSeries: AnalyticsSeriesValue[];
38	};
39
40	const MultiPostAnalyticsQuery = gql`	1✔
41	query MultiPostAnalyticsQuery($userId: String, $postIds: [String], $sortBy: String, $desc: Boolean, $limit: Int) {
42	MultiPostAnalytics(userId: $userId, postIds: $postIds, sortBy: $sortBy, desc: $desc, limit: $limit) {
43	posts {
44	_id
45	title
46	slug
47	postedAt
48	views
49	uniqueViews
50	reads
51	meanReadingTime
52	karma
53	comments
54	}
55	totalCount
56	}
57	}
58	`;
59
60	const AnalyticsSeriesQuery = gql`	1✔
61	query AnalyticsSeriesQuery($userId: String, $postIds: [String], $startDate: Date, $endDate: Date) {
62	AnalyticsSeries(userId: $userId, postIds: $postIds, startDate: $startDate, endDate: $endDate) {
63	date
64	views
65	reads
66	karma
67	comments
68	}
69	}
70	`;
71
72	/**
73	* Fetches analytics for a given user, sorted by a given field.
74	*/
75	export const useMultiPostAnalytics = ({	1✔
76	userId,
77	postIds,
78	sortBy,
79	desc,
80	initialLimit = 10,	×
81	itemsPerPage = 20,	×
82	}: {
83	userId?: string;
84	postIds?: string[];
85	sortBy?: string;
86	desc?: boolean;
87	initialLimit?: number;
88	itemsPerPage?: number;
89	}) => {
NEW 90	const [limit, setLimit] = useState(initialLimit);	×
91	const [moreLoading, setMoreLoading] = useState(false);	×
92
NEW 93	const variables = useMemo(() => ({	×
94	userId,
95	postIds,
96	sortBy,
97	desc,
98	limit,
99	}), [userId, postIds, sortBy, desc, limit]);
100
UNCOV 101	const { data, loading, error, fetchMore } = useQuery<MultiPostAnalyticsQueryResult>(MultiPostAnalyticsQuery, {	×
102	variables,
103	skip: !userId && (!postIds \|\| postIds.length === 0),	×
104	});
105
106	const currentData = data?.MultiPostAnalytics	×
107	const totalCount = currentData?.totalCount ?? 0	×
108	const count = currentData?.posts?.length ?? 0	×
NEW 109	const showLoadMore = !!userId && (count < totalCount);	×
110
NEW 111	const loadMore = useCallback(async (limitOverride?: number) => {	×
112	const newLimit = limitOverride ?? (limit + itemsPerPage);	×
113
114	setMoreLoading(true);	×
115	void fetchMore({	×
116	variables: {
117	...variables,
118	limit: newLimit,
119	},
120	updateQuery: (prev, { fetchMoreResult }) => {
121	setMoreLoading(false);	×
122	if (!fetchMoreResult) return prev;	×
123	return fetchMoreResult;	×
124	},
125	});
126	setLimit(newLimit);	×
127	}, [
128	limit,
129	itemsPerPage,
130	fetchMore,
131	variables,
132	]);
133
NEW 134	const loadMoreProps = useMemo(() => ({	×
135	loadMore,
136	count,
137	totalCount,
138	loading: moreLoading,
139	hidden: !showLoadMore,
140	}), [loadMore, count, totalCount, moreLoading, showLoadMore]);
141
142	return {	×
143	data: data?.MultiPostAnalytics,	×
144	loading: loading,
145	error,
146	loadMoreProps
147	};
148	};
149
150	export type UseAnalyticsSeriesProps = {
151	userId?: string;
152	postIds?: string[];
153	startDate: Date \| null;
154	endDate: Date;
155	}
156
157	/**
158	* Get the views, reads, karma, comment numbers by day for a particular user or set of postIds. This hook does the following to manage
159	* it's internal state:
160	* - Doesn't refetch if the bounding dates are changed within the range of data it already has
161	* - After fetching the absolutely required data for a given range, overfetches by 180 days on either side to avoid having to refetch
162	* when the user changes the date range slightly
163	*/
164	export const useAnalyticsSeries = (props: UseAnalyticsSeriesProps): {	1✔
165	analyticsSeries: AnalyticsSeriesValue[];
166	loading: boolean;
167	error?: ApolloError
168	} => {
169	const { userId, postIds, startDate: propsStartDate, endDate: propsEndDate } = props;	×
170	// Convert to UTC to ensure args passed to useQuery are consistent between SSR and client
171	const utcPropsStartDate = propsStartDate ? moment(propsStartDate).utc().toDate() : null;	×
172	const utcPropsEndDate = moment(propsEndDate).utc().toDate();	×
173
174	const fetchDateRef = useRef({ startDate: utcPropsStartDate, endDate: utcPropsEndDate });	×
175
176	// Update fetchDateRef based on whether the current values from the props are within the existing bounds
177	if (	×
178	(fetchDateRef.current.startDate ?? 0) > (utcPropsStartDate ?? 0) \|\|	×
179	// If we are changing from null to non-null or vice versa, we need to refetch
180	([fetchDateRef.current.startDate, utcPropsStartDate].includes(null) &&
181	fetchDateRef.current.startDate !== utcPropsStartDate)
182	) {
183	fetchDateRef.current.startDate = utcPropsStartDate;	×
184	}
185
186	if (fetchDateRef.current.endDate < utcPropsEndDate) {	×
187	fetchDateRef.current.endDate = utcPropsEndDate;	×
188	}
189
190	const { startDate, endDate } = fetchDateRef.current;	×
191
192	const [activeVariables, setActiveVariables] = useState({});	×
193	const variablesAreActive = stringify(activeVariables) === stringify({ userId, postIds, startDate, endDate });	×
194
195	const variables = { userId, postIds, startDate, endDate };	×
196	const { data, loading, error } = useQuery<AnalyticsSeriesQueryResult>(AnalyticsSeriesQuery, {	×
197	variables,
198	skip: !userId && (!postIds \|\| postIds.length === 0),	×
199	});
200
201	useEffect(() => {	×
202	// Once one fetch has returned, set the active variables to trigger a second fetch with the dates padded by 180 days on either side
203	if (data && !variablesAreActive) {	×
204	const endOfToday = moment().utc().endOf("day").toDate();	×
205	const paddedStartDate = startDate ? moment(startDate).utc().subtract(180, "days").startOf("day").toDate() : null;	×
206	const maxPaddedEndDate = moment(endDate).utc().add(180, "days").endOf("day").toDate();	×
207	const paddedEndDate = maxPaddedEndDate > endOfToday ? endOfToday : maxPaddedEndDate;	×
208	fetchDateRef.current = { startDate: paddedStartDate, endDate: paddedEndDate };	×
209
210	setActiveVariables({ userId, postIds, startDate: paddedStartDate, endDate: paddedEndDate });	×
211	}
212	}, [data, endDate, postIds, startDate, userId, variablesAreActive]);
213
214	const fullSeriesRef = useRef<AnalyticsSeriesValue[]>([]);	×
215	const truncatedSeriesRef = useRef<AnalyticsSeriesValue[]>([]);	×
216
217	if (data?.AnalyticsSeries && data.AnalyticsSeries !== fullSeriesRef.current) {	×
218	fullSeriesRef.current = data.AnalyticsSeries;	×
219	}
220
221	const fullSeries = fullSeriesRef.current;	×
222	truncatedSeriesRef.current = useMemo(() => {	×
223	const truncated = fullSeries.filter((value) => {	×
224	const date = new Date(value.date);	×
225	return (!utcPropsStartDate \|\| date >= utcPropsStartDate) && date <= utcPropsEndDate;	×
226	});
227
228	// Now pad the series with 0 values for any missing dates
229	const truncatedStartDate = new Date(truncated[0]?.date ?? utcPropsStartDate);	×
230	const truncatedEndDate = new Date(truncated[truncated.length - 1]?.date ?? utcPropsEndDate);	×
231
232	if (truncatedStartDate === utcPropsStartDate && truncatedEndDate === utcPropsEndDate) return truncated;	×
233
234	const startPaddingLength = Math.floor(moment.duration(moment(truncatedStartDate).utc().diff(utcPropsStartDate)).asDays());	×
235	const endPaddingLength = Math.floor(moment.duration(moment(utcPropsEndDate).utc().diff(truncatedEndDate)).asDays());	×
236
237	const dateSeries = generateDateSeries(utcPropsStartDate ?? truncatedStartDate, utcPropsEndDate);	×
238	const startSeries = dateSeries.slice(0, startPaddingLength).map((date) => ({ date: new Date(date), views: 0, reads: 0, karma: 0, comments: 0 }));	×
239	const endSeries = dateSeries.slice(dateSeries.length - endPaddingLength).map((date) => ({ date: new Date(date), views: 0, reads: 0, karma: 0, comments: 0 }));	×
240
241	return [...startSeries, ...truncated, ...endSeries];	×
242	}, [fullSeries, utcPropsEndDate, utcPropsStartDate]);
243
244	return {	×
245	analyticsSeries: truncatedSeriesRef.current,
246	loading,
247	error,
248	};
249	};

ForumMagnum / ForumMagnum / 9222751356

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