duskflower/signalstats
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: cache stats sources

Browse source
This commit is contained in:
Samuel 2024-12-18 19:03:44 +01:00
parent ec1ea5cfe8
commit cad305aa66
14 changed files with 98 additions and 92 deletions
Download patch file Download diff file Expand all files Collapse all files

26
index.html
View file

@ -1,16 +1,18 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<link rel="shortcut icon" type="image/ico" href="/src/assets/favicon.ico" />
<title>Solid App</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<script src="/src/index.tsx" type="module"></script> <head>
</body> <meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<!-- <link rel="shortcut icon" type="image/ico" href="/src/assets/favicon.ico" /> -->
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<script src="/src/index.tsx" type="module"></script>
</body>
</html> </html>

1
package.json
View file

@ -47,6 +47,7 @@
"kysely": "^0.27.5", "kysely": "^0.27.5",
"kysely-wasm": "^0.7.0", "kysely-wasm": "^0.7.0",
"lucide-solid": "^0.468.0", "lucide-solid": "^0.468.0",
"seroval": "^1.1.1",
"solid-js": "^1.9.3", "solid-js": "^1.9.3",
"sql.js": "^1.12.0", "sql.js": "^1.12.0",
"tailwind-merge": "^2.5.5", "tailwind-merge": "^2.5.5",

3
pnpm-lock.yaml generated
View file

@ -56,6 +56,9 @@ importers:
lucide-solid: lucide-solid:
specifier: ^0.468.0 specifier: ^0.468.0
version: 0.468.0(solid-js@1.9.3) version: 0.468.0(solid-js@1.9.3)
seroval:
specifier: ^1.1.1
version: 1.1.1
solid-js: solid-js:
specifier: ^1.9.3 specifier: ^1.9.3
version: 1.9.3 version: 1.9.3

7
src/lib/db-cache.ts
View file

@ -1,4 +1,5 @@
import { createRoot, on, createDeferred } from "solid-js"; import { createRoot, on, createDeferred } from "solid-js";
import { serialize, deserialize } from "seroval";
const DATABASE_HASH_PREFIX = "database"; const DATABASE_HASH_PREFIX = "database";
@ -64,10 +65,12 @@ class LocalStorageCacheAdapter {
this.keys.add(fullKey); this.keys.add(fullKey);
try { try {
localStorage.setItem(fullKey, JSON.stringify(value)); localStorage.setItem(fullKey, serialize(value));
} catch (error: unknown) { } catch (error: unknown) {
if (error instanceof DOMException && error.name === "QUOTA_EXCEEDED_ERR") { if (error instanceof DOMException && error.name === "QUOTA_EXCEEDED_ERR") {
console.error("Storage quota exceeded, not caching new function calls"); console.error("Storage quota exceeded, not caching new function calls");
} else {
console.error(error);
} }
} }
} }
@ -80,7 +83,7 @@ class LocalStorageCacheAdapter {
get<R>(cacheName: string, key: string): R | undefined { get<R>(cacheName: string, key: string): R | undefined {
const item = localStorage.getItem(this.#createKey(cacheName, key)); const item = localStorage.getItem(this.#createKey(cacheName, key));
if (item) { if (item) {
return JSON.parse(item) as R; return deserialize(item) as R;
} }
} }
} }

85
src/lib/messages.ts
View file

@ -1,7 +1,7 @@
import { createMemo, type Accessor } from "solid-js";
import { getDateList, getHourList, getMonthList, getWeekdayList } from "./date"; import { getDateList, getHourList, getMonthList, getWeekdayList } from "./date";
import type { MessageOverview, MessageStats, Recipients } from "~/types"; import type { MessageOverview, MessageStats, Recipients } from "~/types";
import { isSameDay } from "date-fns"; import { isSameDay } from "date-fns";
import { cached } from "./db-cache";
export const hourNames = getHourList(); export const hourNames = getHourList();
@ -15,16 +15,14 @@ export const weekdayNames = getWeekdayList();
const initialWeekdayMap = [...weekdayNames.keys()]; const initialWeekdayMap = [...weekdayNames.keys()];
export const createMessageStatsSources = ( const createMessageStatsSourcesRaw = (messageOverview: MessageOverview, recipients: Recipients) => {
messageOverview: Accessor<MessageOverview>, const initialRecipientMap = () => {
recipients: Accessor<Recipients>, return Object.fromEntries(recipients.map(({ recipientId }) => [recipientId, 0]));
) => { };
const initialRecipientMap = () => Object.fromEntries(recipients().map(({ recipientId }) => [recipientId, 0]));
const dateList = () => { const dateList = () => {
const currentDmMessagesOverview = messageOverview(); const firstDate = messageOverview?.at(0)?.messageDate;
const firstDate = currentDmMessagesOverview?.at(0)?.messageDate; const lastDate = messageOverview?.at(-1)?.messageDate;
const lastDate = currentDmMessagesOverview?.at(-1)?.messageDate;
if (firstDate && lastDate) { if (firstDate && lastDate) {
return getDateList(firstDate, lastDate).map((date) => ({ return getDateList(firstDate, lastDate).map((date) => ({
totalMessages: 0, totalMessages: 0,
@ -34,52 +32,51 @@ export const createMessageStatsSources = (
} }
}; };
return createMemo(() => { const currentDateList = dateList();
const currentMessageOverview = messageOverview(); const currentInitialRecipientMap = initialRecipientMap();
const currentDateList = dateList();
const currentInitialRecipientMap = initialRecipientMap();
const messageStats: MessageStats = { const messageStats: MessageStats = {
person: { ...currentInitialRecipientMap }, person: { ...currentInitialRecipientMap },
month: initialMonthMap.map(() => ({ ...currentInitialRecipientMap })), month: initialMonthMap.map(() => ({ ...currentInitialRecipientMap })),
date: currentDateList ?? [], date: currentDateList ?? [],
weekday: initialWeekdayMap.map(() => ({ ...currentInitialRecipientMap })), weekday: initialWeekdayMap.map(() => ({ ...currentInitialRecipientMap })),
daytime: initialHoursMap.map(() => ({ ...currentInitialRecipientMap })), daytime: initialHoursMap.map(() => ({ ...currentInitialRecipientMap })),
}; };
if (currentMessageOverview && currentDateList) { if (currentDateList) {
const { person, month, date, weekday, daytime } = messageStats; const { person, month, date, weekday, daytime } = messageStats;
for (const message of currentMessageOverview) { for (const message of messageOverview) {
const { messageDate } = message; const { messageDate } = message;
// increment overall message count of a person // increment overall message count of a person
person[message.fromRecipientId] += 1; person[message.fromRecipientId] += 1;
// increment the message count of the message's month for this recipient // increment the message count of the message's month for this recipient
month[messageDate.getMonth()][message.fromRecipientId] += 1; month[messageDate.getMonth()][message.fromRecipientId] += 1;
// biome-ignore lint/style/noNonNullAssertion: <explanation> // biome-ignore lint/style/noNonNullAssertion: <explanation>
const dateStatsEntry = date.find(({ date }) => isSameDay(date, messageDate))!; const dateStatsEntry = date.find(({ date }) => isSameDay(date, messageDate))!;
// increment the message count of the message's date for this recipient // increment the message count of the message's date for this recipient
dateStatsEntry[message.fromRecipientId] += 1; dateStatsEntry[message.fromRecipientId] += 1;
// increment the overall message count of the message's date // increment the overall message count of the message's date
dateStatsEntry.totalMessages += 1; dateStatsEntry.totalMessages += 1;
const weekdayOfDate = messageDate.getDay(); const weekdayOfDate = messageDate.getDay();
// we index starting with monday while the `Date` object indexes starting with Sunday // we index starting with monday while the `Date` object indexes starting with Sunday
const weekdayIndex = weekdayOfDate === 0 ? 6 : weekdayOfDate - 1; const weekdayIndex = weekdayOfDate === 0 ? 6 : weekdayOfDate - 1;
// increment the message count of the message's weekday for this recipient // increment the message count of the message's weekday for this recipient
weekday[weekdayIndex][message.fromRecipientId] += 1; weekday[weekdayIndex][message.fromRecipientId] += 1;
// increment the message count of the message's daytime for this recipient // increment the message count of the message's daytime for this recipient
daytime[messageDate.getHours()][message.fromRecipientId] += 1; daytime[messageDate.getHours()][message.fromRecipientId] += 1;
}
} }
}
return messageStats; return messageStats;
});
}; };
export const createMessageStatsSources = cached(createMessageStatsSourcesRaw);

30
src/pages/dm/dm-id.tsx
View file

@ -1,4 +1,4 @@
import { type Component, createResource } from "solid-js"; import { type Component, createMemo, createResource } from "solid-js";
import type { RouteSectionProps } from "@solidjs/router"; import type { RouteSectionProps } from "@solidjs/router";
import { dmPartnerRecipientQuery, SELF_ID, threadMostUsedWordsQuery, threadSentMessagesOverviewQuery } from "~/db"; import { dmPartnerRecipientQuery, SELF_ID, threadMostUsedWordsQuery, threadSentMessagesOverviewQuery } from "~/db";
@ -35,7 +35,7 @@ export const DmId: Component<RouteSectionProps> = (props) => {
} }
}); });
const [dmMessagesOverview] = createResource<MessageOverview>(async () => { const [dmMessagesOverview] = createResource<MessageOverview | undefined>(async () => {
const dmMessageOverview = await threadSentMessagesOverviewQuery(dmId()); const dmMessageOverview = await threadSentMessagesOverviewQuery(dmId());
if (dmMessageOverview) { if (dmMessageOverview) {
return dmMessageOverview.map((row) => { return dmMessageOverview.map((row) => {
@ -61,16 +61,16 @@ export const DmId: Component<RouteSectionProps> = (props) => {
}, },
]; ];
} }
return [
{
recipientId: SELF_ID,
name: "You",
},
];
}; };
const dmMessageStats = createMessageStatsSources(dmMessagesOverview, recipients); const dmMessageStats = createMemo(() => {
const currentDmMessagesOverview = dmMessagesOverview();
const currentRecipients = recipients();
if (currentDmMessagesOverview && currentRecipients) {
return createMessageStatsSources(currentDmMessagesOverview, currentRecipients);
}
});
return ( return (
<> <>
@ -78,26 +78,26 @@ export const DmId: Component<RouteSectionProps> = (props) => {
<div class="flex flex-col items-center"> <div class="flex flex-col items-center">
<Heading level={1}>DM with {dmPartner()?.name}</Heading> <Heading level={1}>DM with {dmPartner()?.name}</Heading>
<Heading level={2}>Chat timeline</Heading> <Heading level={2}>Chat timeline</Heading>
<DmMessagesPerDate dateStats={dmMessageStats().date} recipients={recipients()} /> <DmMessagesPerDate dateStats={dmMessageStats()?.date} recipients={recipients()} />
<DmOverview messages={dmMessagesOverview()} /> <DmOverview messages={dmMessagesOverview()} />
<Heading level={2}>Messages per</Heading> <Heading level={2}>Messages per</Heading>
<Grid cols={1} colsMd={2} class="gap-x-16 gap-y-16"> <Grid cols={1} colsMd={2} class="gap-x-16 gap-y-16">
<div> <div>
<Heading level={3}>Person</Heading> <Heading level={3}>Person</Heading>
<DmMessagesPerRecipient personStats={dmMessageStats().person} recipients={recipients()} /> <DmMessagesPerRecipient personStats={dmMessageStats()?.person} recipients={recipients()} />
</div> </div>
<div> <div>
<Heading level={3}>Daytime</Heading> <Heading level={3}>Daytime</Heading>
<DmMessagesPerDaytime daytimeStats={dmMessageStats().daytime} recipients={recipients()} /> <DmMessagesPerDaytime daytimeStats={dmMessageStats()?.daytime} recipients={recipients()} />
</div> </div>
<div> <div>
<Heading level={3}>Month</Heading> <Heading level={3}>Month</Heading>
<DmMessagesPerMonth monthStats={dmMessageStats().month} recipients={recipients()} /> <DmMessagesPerMonth monthStats={dmMessageStats()?.month} recipients={recipients()} />
</div> </div>
<div> <div>
<Heading level={3}>Weekday</Heading> <Heading level={3}>Weekday</Heading>
<DmMessagesPerWeekday weekdayStats={dmMessageStats().weekday} recipients={recipients()} /> <DmMessagesPerWeekday weekdayStats={dmMessageStats()?.weekday} recipients={recipients()} />
</div> </div>
</Grid> </Grid>
<Heading level={2}>Word cloud</Heading> <Heading level={2}>Word cloud</Heading>

6
src/pages/dm/dm-messages-per-date.tsx
View file

@ -4,14 +4,14 @@ import { LineChart } from "~/components/ui/charts";
import type { MessageStats, Recipients } from "~/types"; import type { MessageStats, Recipients } from "~/types";
export const DmMessagesPerDate: Component<{ export const DmMessagesPerDate: Component<{
dateStats: MessageStats["date"]; dateStats: MessageStats["date"] | undefined;
recipients: Recipients; recipients: Recipients | undefined;
}> = (props) => { }> = (props) => {
const dateChartData: Accessor<ChartData<"line"> | undefined> = () => { const dateChartData: Accessor<ChartData<"line"> | undefined> = () => {
const currentDmMessages = props.dateStats; const currentDmMessages = props.dateStats;
const currentRecipients = props.recipients; const currentRecipients = props.recipients;
if (currentDmMessages) { if (currentDmMessages && currentRecipients) {
const currentDmMessagesValues = Object.values(currentDmMessages); const currentDmMessagesValues = Object.values(currentDmMessages);
return { return {

4
src/pages/dm/dm-messages-per-daytime.tsx
View file

@ -5,8 +5,8 @@ import type { MessageStats, Recipients } from "~/types";
import { hourNames } from "~/lib/messages"; import { hourNames } from "~/lib/messages";
export const DmMessagesPerDaytime: Component<{ export const DmMessagesPerDaytime: Component<{
daytimeStats: MessageStats["daytime"]; daytimeStats: MessageStats["daytime"] | undefined;
recipients: Recipients; recipients: Recipients | undefined;
}> = (props) => { }> = (props) => {
const daytimeChartData: Accessor<ChartData<"bar"> | undefined> = () => { const daytimeChartData: Accessor<ChartData<"bar"> | undefined> = () => {
const currentMessagesPerHour = props.daytimeStats; const currentMessagesPerHour = props.daytimeStats;

4
src/pages/dm/dm-messages-per-month.tsx
View file

@ -5,8 +5,8 @@ import { monthNames } from "~/lib/messages";
import type { MessageStats, Recipients } from "~/types"; import type { MessageStats, Recipients } from "~/types";
export const DmMessagesPerMonth: Component<{ export const DmMessagesPerMonth: Component<{
monthStats: MessageStats["month"]; monthStats: MessageStats["month"] | undefined;
recipients: Recipients; recipients: Recipients | undefined;
}> = (props) => { }> = (props) => {
const monthChartData: Accessor<ChartData<"radar"> | undefined> = () => { const monthChartData: Accessor<ChartData<"radar"> | undefined> = () => {
const currentMessagesPerMonth = props.monthStats; const currentMessagesPerMonth = props.monthStats;

4
src/pages/dm/dm-messages-per-recipients.tsx
View file

@ -4,8 +4,8 @@ import { PieChart } from "~/components/ui/charts";
import type { MessageStats, Recipients } from "~/types"; import type { MessageStats, Recipients } from "~/types";
export const DmMessagesPerRecipient: Component<{ export const DmMessagesPerRecipient: Component<{
personStats: MessageStats["person"]; personStats: MessageStats["person"] | undefined;
recipients: Recipients; recipients: Recipients | undefined;
}> = (props) => { }> = (props) => {
const recipientChartData: Accessor<ChartData<"pie"> | undefined> = () => { const recipientChartData: Accessor<ChartData<"pie"> | undefined> = () => {
const currentMessagesPerRecipient = props.personStats; const currentMessagesPerRecipient = props.personStats;

4
src/pages/dm/dm-messages-per-weekday.tsx
View file

@ -5,8 +5,8 @@ import { weekdayNames } from "~/lib/messages";
import type { MessageStats, Recipients } from "~/types"; import type { MessageStats, Recipients } from "~/types";
export const DmMessagesPerWeekday: Component<{ export const DmMessagesPerWeekday: Component<{
weekdayStats: MessageStats["weekday"]; weekdayStats: MessageStats["weekday"] | undefined;
recipients: Recipients; recipients: Recipients | undefined;
}> = (props) => { }> = (props) => {
const weekdayChartData: Accessor<ChartData<"radar"> | undefined> = () => { const weekdayChartData: Accessor<ChartData<"radar"> | undefined> = () => {
const currentMessagesPerWeekday = props.weekdayStats; const currentMessagesPerWeekday = props.weekdayStats;

2
src/pages/dm/dm-overview.tsx
View file

@ -6,7 +6,7 @@ import { getDistanceBetweenDatesInDays } from "~/lib/date";
import type { MessageOverview } from "~/types"; import type { MessageOverview } from "~/types";
export const DmOverview: Component<{ export const DmOverview: Component<{
messages: MessageOverview; messages: MessageOverview | undefined;
}> = (props) => { }> = (props) => {
const dmOverview = () => { const dmOverview = () => {
const firstMessageDate = props.messages?.at(0)?.messageDate; const firstMessageDate = props.messages?.at(0)?.messageDate;

2
src/pages/home.tsx
View file

@ -4,6 +4,7 @@ import { type RouteSectionProps, useNavigate } from "@solidjs/router";
import { setDb, SQL } from "~/db"; import { setDb, SQL } from "~/db";
import { Portal } from "solid-js/web"; import { Portal } from "solid-js/web";
import { Flex } from "~/components/ui/flex"; import { Flex } from "~/components/ui/flex";
import { Title } from "@solidjs/meta";
export const Home: Component<RouteSectionProps> = () => { export const Home: Component<RouteSectionProps> = () => {
const [isLoadingDb, setIsLoadingDb] = createSignal(false); const [isLoadingDb, setIsLoadingDb] = createSignal(false);
@ -38,6 +39,7 @@ export const Home: Component<RouteSectionProps> = () => {
</Flex> </Flex>
</Show> </Show>
</Portal> </Portal>
<Title>Signal stats</Title>
<div> <div>
<input type="file" accept=".sqlite" onChange={onFileChange}></input> <input type="file" accept=".sqlite" onChange={onFileChange}></input>
</div> </div>

10
src/types.ts
View file

@ -1,9 +1,7 @@
export type MessageOverview = export type MessageOverview = {
| { messageDate: Date;
messageDate: Date; fromRecipientId: number;
fromRecipientId: number; }[];
}[]
| undefined;
export type Recipients = { export type Recipients = {
recipientId: number; recipientId: number;