37151213cd
The existing architecture serializes all cards and revlog entries in the search range into a protobuf message, which the web frontend needs to decode and then process. The thinking at the time was that this would make it easier for add-ons to add extra graphs, but in the ~2.5 years since the new graphs were introduced, no add-ons appear to have taken advantage of it. The cards and revlog entries can grow quite large on large collections - on a collection I tested with approximately 2.5M reviews, the serialized data is about 110MB, which is a lot to have to deserialize in JavaScript. This commit shifts the preliminary processing of the data to the Rust end, which means the data is able to be processed faster, and less needs to be sent to the frontend. On the test collection above, this reduces the serialized data from about 110MB to about 160KB, resulting in a more than 2x performance improvement, and reducing frontend memory usage from about 400MB to about 40MB. This also makes #2043 more feasible - while it is still about 50-100% slower than protobufjs, with the much smaller message size, the difference is only about 10ms.
111 lines
2.7 KiB
TypeScript
111 lines
2.7 KiB
TypeScript
// Copyright: Ankitects Pty Ltd and contributors
|
|
// License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
|
|
|
|
/* eslint
|
|
@typescript-eslint/no-explicit-any: "off",
|
|
@typescript-eslint/ban-ts-comment: "off" */
|
|
|
|
import type { Cards, Stats } from "@tslib/proto";
|
|
import type { Bin, Selection } from "d3";
|
|
import { sum } from "d3";
|
|
|
|
// amount of data to fetch from backend
|
|
export enum RevlogRange {
|
|
Year = 1,
|
|
All = 2,
|
|
}
|
|
|
|
export function daysToRevlogRange(days: number): RevlogRange {
|
|
return days > 365 || days === 0 ? RevlogRange.All : RevlogRange.Year;
|
|
}
|
|
|
|
// period a graph should cover
|
|
export enum GraphRange {
|
|
Month = 0,
|
|
ThreeMonths = 1,
|
|
Year = 2,
|
|
AllTime = 3,
|
|
}
|
|
|
|
export interface GraphsContext {
|
|
cards: Cards.Card[];
|
|
revlog: Stats.RevlogEntry[];
|
|
revlogRange: RevlogRange;
|
|
nightMode: boolean;
|
|
}
|
|
|
|
export interface GraphBounds {
|
|
width: number;
|
|
height: number;
|
|
marginLeft: number;
|
|
marginRight: number;
|
|
marginTop: number;
|
|
marginBottom: number;
|
|
}
|
|
|
|
export function defaultGraphBounds(): GraphBounds {
|
|
return {
|
|
width: 600,
|
|
height: 250,
|
|
marginLeft: 70,
|
|
marginRight: 70,
|
|
marginTop: 20,
|
|
marginBottom: 25,
|
|
};
|
|
}
|
|
|
|
export function setDataAvailable(
|
|
svg: Selection<SVGElement, any, any, any>,
|
|
available: boolean,
|
|
): void {
|
|
svg.select(".no-data")
|
|
.attr("pointer-events", available ? "none" : "all")
|
|
.transition()
|
|
.duration(600)
|
|
.attr("opacity", available ? 0 : 1);
|
|
}
|
|
|
|
export function millisecondCutoffForRange(
|
|
range: GraphRange,
|
|
nextDayAtSecs: number,
|
|
): number {
|
|
let days: number;
|
|
switch (range) {
|
|
case GraphRange.Month:
|
|
days = 31;
|
|
break;
|
|
case GraphRange.ThreeMonths:
|
|
days = 90;
|
|
break;
|
|
case GraphRange.Year:
|
|
days = 365;
|
|
break;
|
|
case GraphRange.AllTime:
|
|
default:
|
|
return 0;
|
|
}
|
|
|
|
return (nextDayAtSecs - 86400 * days) * 1000;
|
|
}
|
|
|
|
export interface TableDatum {
|
|
label: string;
|
|
value: string;
|
|
}
|
|
|
|
export type SearchEventMap = { search: { query: string } };
|
|
export type SearchDispatch = <EventKey extends Extract<keyof SearchEventMap, string>>(
|
|
type: EventKey,
|
|
detail: SearchEventMap[EventKey],
|
|
) => void;
|
|
|
|
/// Convert a protobuf map that protobufjs represents as an object with string
|
|
/// keys into a Map with numeric keys.
|
|
export function numericMap<T>(obj: { [k: string]: T }): Map<number, T> {
|
|
return new Map(Object.entries(obj).map(([k, v]) => [Number(k), v]));
|
|
}
|
|
|
|
export function getNumericMapBinValue(d: Bin<Map<number, number>, number>): number {
|
|
return sum(d, (d) => d[1]);
|
|
}
|