From 19dd1908195dde8affe519eef9383b0ecfd2995d Mon Sep 17 00:00:00 2001 From: Allan Lasser Date: Thu, 7 Nov 2024 18:05:25 -0500 Subject: [PATCH 01/12] Replace ProcessDrawer with ProcessDropdown --- .../processing/ProcessDrawer.svelte | 121 ------------------ .../processing/ProcessDropdown.svelte | 68 ++++++++++ ....svelte => ProcessDropdown.stories.svelte} | 8 +- 3 files changed, 72 insertions(+), 125 deletions(-) delete mode 100644 src/lib/components/processing/ProcessDrawer.svelte create mode 100644 src/lib/components/processing/ProcessDropdown.svelte rename src/lib/components/processing/stories/{ProcessDrawer.stories.svelte => ProcessDropdown.stories.svelte} (76%) diff --git a/src/lib/components/processing/ProcessDrawer.svelte b/src/lib/components/processing/ProcessDrawer.svelte deleted file mode 100644 index 9c7377edc..000000000 --- a/src/lib/components/processing/ProcessDrawer.svelte +++ /dev/null @@ -1,121 +0,0 @@ - - - - - diff --git a/src/lib/components/processing/ProcessDropdown.svelte b/src/lib/components/processing/ProcessDropdown.svelte new file mode 100644 index 000000000..a374a18f7 --- /dev/null +++ b/src/lib/components/processing/ProcessDropdown.svelte @@ -0,0 +1,68 @@ + + +{#if total > 0} + + + + + + + + + +{/if} diff --git a/src/lib/components/processing/stories/ProcessDrawer.stories.svelte b/src/lib/components/processing/stories/ProcessDropdown.stories.svelte similarity index 76% rename from src/lib/components/processing/stories/ProcessDrawer.stories.svelte rename to src/lib/components/processing/stories/ProcessDropdown.stories.svelte index a5e3ec70d..216b3701a 100644 --- a/src/lib/components/processing/stories/ProcessDrawer.stories.svelte +++ b/src/lib/components/processing/stories/ProcessDropdown.stories.svelte @@ -1,14 +1,14 @@ @@ -22,6 +22,6 @@ }} > - + From 81bfdfec3c201c3a24baddcbca0d73e734c2e24d Mon Sep 17 00:00:00 2001 From: Allan Lasser Date: Thu, 7 Nov 2024 18:05:37 -0500 Subject: [PATCH 02/12] Render ProcessDropdown in Navigation --- .../components/forms/DocumentUpload.svelte | 3 ++ src/lib/components/layouts/AppLayout.svelte | 2 - src/lib/components/layouts/Navigation.svelte | 2 + src/lib/components/processing/AddOns.svelte | 38 ++----------------- 4 files changed, 8 insertions(+), 37 deletions(-) diff --git a/src/lib/components/forms/DocumentUpload.svelte b/src/lib/components/forms/DocumentUpload.svelte index fcf3916f9..494bea961 100644 --- a/src/lib/components/forms/DocumentUpload.svelte +++ b/src/lib/components/forms/DocumentUpload.svelte @@ -67,6 +67,7 @@ progress through the three-part upload process. isWithinSizeLimit, } from "$lib/utils/files"; import { getCsrfToken } from "$lib/utils/api"; + import { load } from "../processing/ProcessContext.svelte"; export let files: File[] = getFilesToUpload(); export let projects: Project[] = []; @@ -189,6 +190,8 @@ progress through the three-part upload process. form, ), ); + // Try to load processing context after all uploads are triggered + load(); // errors are handled within each promise, so we can just wait for all to be settled await Promise.allSettled(promises); diff --git a/src/lib/components/layouts/AppLayout.svelte b/src/lib/components/layouts/AppLayout.svelte index 774fbc042..6d97b09fd 100644 --- a/src/lib/components/layouts/AppLayout.svelte +++ b/src/lib/components/layouts/AppLayout.svelte @@ -2,7 +2,6 @@ import Navigation from "./Navigation.svelte"; import PlausibleTracker from "../common/PlausibleTracker.svelte"; import ProcessContext from "../processing/ProcessContext.svelte"; - import ProcessDrawer from "../processing/ProcessDrawer.svelte"; import Toaster from "./Toaster.svelte"; @@ -15,7 +14,6 @@ - diff --git a/src/lib/components/layouts/Navigation.svelte b/src/lib/components/layouts/Navigation.svelte index c40356a94..66bb27797 100644 --- a/src/lib/components/layouts/Navigation.svelte +++ b/src/lib/components/layouts/Navigation.svelte @@ -18,6 +18,7 @@ import TipOfDay from "../common/TipOfDay.svelte"; import UserMenu from "../accounts/UserMenu.svelte"; + import ProcessDropdown from "$lib/components/processing/ProcessDropdown.svelte"; import Portal from "./Portal.svelte"; import Modal from "./Modal.svelte"; import UserFeedback from "../forms/UserFeedback.svelte"; @@ -49,6 +50,7 @@ + {#if !BREAKPOINTS.BOTTOM_NAV} {#if $me} diff --git a/src/lib/components/processing/AddOns.svelte b/src/lib/components/processing/AddOns.svelte index db8ee4fbb..b2f5a8d5b 100644 --- a/src/lib/components/processing/AddOns.svelte +++ b/src/lib/components/processing/AddOns.svelte @@ -16,44 +16,11 @@ This component should update on a timer. import Flex from "../common/Flex.svelte"; import Process from "./Process.svelte"; - import { history, dismiss, cancel, rate } from "$lib/api/addons"; + import { dismiss, cancel, rate } from "$lib/api/addons"; import { getCsrfToken } from "$lib/utils/api"; import { getRunningAddons } from "./ProcessContext.svelte"; - import type { Nullable } from "$lib/api/types"; - - let timeout: Nullable; const running = getRunningAddons(); - /* - onMount(async () => { - if ($running.length === 0) { - await load(); - } - }); - - afterUpdate(() => { - if ($running.length > 0) { - timeout = setTimeout(load, POLL_INTERVAL); - } - }); - - onDestroy(() => { - stop(); - }); - */ - function stop() { - if (timeout) { - clearTimeout(timeout); - timeout = null; - } - } - - async function load() { - const { data, error } = await history({ dismissed: false, per_page: 100 }); - if (!error) { - $running = data?.results; - } - } async function rateRun(rating: number, run: Run) { const csrftoken = getCsrfToken(); @@ -73,12 +40,13 @@ This component should update on a timer. } async function dismissRun(run: Run) { + run = { ...run, dismissed: true }; // optimistic update const csrftoken = getCsrfToken(); if (!csrftoken) { console.error("No CSRF token"); + run = { ...run, dismissed: false }; // put it back return; } - run = { ...run, dismissed: true }; // optimistic update const { data, error } = await dismiss(run.uuid, csrftoken); if (error || !data) { console.error(error?.errors ?? "No data"); From 09c35f0a343433841aa02635d2a5bc8bbdaa60cf Mon Sep 17 00:00:00 2001 From: Allan Lasser Date: Fri, 15 Nov 2024 17:12:34 -0500 Subject: [PATCH 03/12] Install types for lodash-es --- package-lock.json | 10 ++++++++++ package.json | 1 + 2 files changed, 11 insertions(+) diff --git a/package-lock.json b/package-lock.json index c5516edb0..ca443e1b9 100644 --- a/package-lock.json +++ b/package-lock.json @@ -67,6 +67,7 @@ "@storybook/testing-library": "^0.2.2", "@testing-library/jest-dom": "^6.4.2", "@testing-library/svelte": "^4.1.0", + "@types/lodash-es": "^4.17.12", "@types/lucene": "^2.1.7", "@vitest/coverage-v8": "^1.2.2", "chromatic": "^9.1.0", @@ -13312,6 +13313,15 @@ "integrity": "sha512-w9iWudx1XWOHW5lQRS9iKpK/XuRhnN+0T7HvdCCd802FYkT1AMTnxndJHGrNJwRoRHkslGr4S29tjm1cT7x/7w==", "license": "MIT" }, + "node_modules/@types/lodash-es": { + "version": "4.17.12", + "resolved": "https://registry.npmjs.org/@types/lodash-es/-/lodash-es-4.17.12.tgz", + "integrity": "sha512-0NgftHUcV4v34VhXm8QBSftKVXtbkBG3ViCjs6+eJ5a6y6Mi/jiFGPc1sC7QK+9BFhWrURE3EOggmWaSxL9OzQ==", + "dev": true, + "dependencies": { + "@types/lodash": "*" + } + }, "node_modules/@types/lucene": { "version": "2.1.7", "resolved": "https://registry.npmjs.org/@types/lucene/-/lucene-2.1.7.tgz", diff --git a/package.json b/package.json index 13685042d..51421b897 100644 --- a/package.json +++ b/package.json @@ -63,6 +63,7 @@ "@storybook/testing-library": "^0.2.2", "@testing-library/jest-dom": "^6.4.2", "@testing-library/svelte": "^4.1.0", + "@types/lodash-es": "^4.17.12", "@types/lucene": "^2.1.7", "@vitest/coverage-v8": "^1.2.2", "chromatic": "^9.1.0", From dc7385f198696e82ff75d9301518cc7483cee290 Mon Sep 17 00:00:00 2001 From: Allan Lasser Date: Fri, 15 Nov 2024 17:17:27 -0500 Subject: [PATCH 04/12] On each upload, call load from ProcessContext --- src/lib/components/forms/DocumentUpload.svelte | 9 ++++++--- src/lib/components/processing/ProcessContext.svelte | 9 +++++++-- 2 files changed, 13 insertions(+), 5 deletions(-) diff --git a/src/lib/components/forms/DocumentUpload.svelte b/src/lib/components/forms/DocumentUpload.svelte index 494bea961..f351d26a3 100644 --- a/src/lib/components/forms/DocumentUpload.svelte +++ b/src/lib/components/forms/DocumentUpload.svelte @@ -67,7 +67,7 @@ progress through the three-part upload process. isWithinSizeLimit, } from "$lib/utils/files"; import { getCsrfToken } from "$lib/utils/api"; - import { load } from "../processing/ProcessContext.svelte"; + import { getProcessLoader } from "../processing/ProcessContext.svelte"; export let files: File[] = getFilesToUpload(); export let projects: Project[] = []; @@ -85,6 +85,9 @@ progress through the three-part upload process. let STATUS: Record = {}; let loading = false; // are requests in flight? + // Get load function from processing context + const loadProcessing = getProcessLoader(); + // fields let access: Access = "private"; let language: { value: string; label: string } = { @@ -190,8 +193,6 @@ progress through the three-part upload process. form, ), ); - // Try to load processing context after all uploads are triggered - load(); // errors are handled within each promise, so we can just wait for all to be settled await Promise.allSettled(promises); @@ -284,6 +285,8 @@ progress through the three-part upload process. if (error) { STATUS[id].error = error; } + // trigger process load request + loadProcessing?.(); } diff --git a/src/lib/components/processing/ProcessContext.svelte b/src/lib/components/processing/ProcessContext.svelte index c9b535529..ae905548e 100644 --- a/src/lib/components/processing/ProcessContext.svelte +++ b/src/lib/components/processing/ProcessContext.svelte @@ -8,7 +8,7 @@ This makes the state of those processes available via context. import type { Run } from "@/addons/types"; import type { Maybe, Pending } from "@/lib/api/types"; - import { throttle } from "lodash-es"; + import throttle from "lodash-es/throttle"; import { getContext, setContext, @@ -25,6 +25,7 @@ This makes the state of those processes available via context. interface ProcessContext { documents: Writable; addons: Writable; + load: () => void; } interface Debounced { @@ -41,6 +42,10 @@ This makes the state of those processes available via context. return getContext("processing")?.addons; } + export function getProcessLoader(): Maybe<() => void> { + return getContext("processing")?.load; + } + export let addons: Writable = writable([]); export let documents: Writable = writable([]); @@ -65,7 +70,7 @@ This makes the state of those processes available via context. -{#if $running?.length && $running.length > 0} +{#if $undismissed?.length && $undismissed.length > 0} {$_("processing.addons")} - {#each $running as run (run.uuid)} + {#each $undismissed as run (run.uuid)}
rateRun(1, run)} > @@ -121,6 +155,8 @@ This component should update on a timer. ghost minW={false} mode="danger" + disabled={Boolean(rated[run.uuid])} + hover={rated[run.uuid] === -1} on:click={() => rateRun(-1, run)} > From 2a49b13c2f26707d19c22a89cd248b1ffaa81b3b Mon Sep 17 00:00:00 2001 From: Allan Lasser Date: Fri, 15 Nov 2024 18:01:46 -0500 Subject: [PATCH 08/12] Actually don't disable ratings --- src/lib/components/processing/AddOns.svelte | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/lib/components/processing/AddOns.svelte b/src/lib/components/processing/AddOns.svelte index f68ce8c76..9bc96ac08 100644 --- a/src/lib/components/processing/AddOns.svelte +++ b/src/lib/components/processing/AddOns.svelte @@ -144,7 +144,6 @@ This component should update on a timer. ghost minW={false} mode="success" - disabled={Boolean(rated[run.uuid])} hover={rated[run.uuid] === 1} on:click={() => rateRun(1, run)} > @@ -155,7 +154,6 @@ This component should update on a timer. ghost minW={false} mode="danger" - disabled={Boolean(rated[run.uuid])} hover={rated[run.uuid] === -1} on:click={() => rateRun(-1, run)} > From 003d81e754fa47063a209d6212f169d965ada5e8 Mon Sep 17 00:00:00 2001 From: Allan Lasser Date: Fri, 15 Nov 2024 18:04:29 -0500 Subject: [PATCH 09/12] Filter dismissed addons from dropdown count --- .../processing/ProcessDropdown.svelte | 18 ++++++++++-------- 1 file changed, 10 insertions(+), 8 deletions(-) diff --git a/src/lib/components/processing/ProcessDropdown.svelte b/src/lib/components/processing/ProcessDropdown.svelte index a374a18f7..a5562909f 100644 --- a/src/lib/components/processing/ProcessDropdown.svelte +++ b/src/lib/components/processing/ProcessDropdown.svelte @@ -29,14 +29,16 @@ const running = getRunningAddons(); const current = getPendingDocuments(); - $: addons = $running?.reduce( - (acc, cur) => { - const curCount = acc[cur.status] ?? 0; - acc[cur.status] = curCount + 1; - return acc; - }, - {} as Record, - ); + $: addons = $running + ?.filter((r) => !r.dismissed) + .reduce( + (acc, cur) => { + const curCount = acc[cur.status] ?? 0; + acc[cur.status] = curCount + 1; + return acc; + }, + {} as Record, + ); $: documents = $current?.reduce( (acc, cur) => { From 7ace34fbc85ea8cc88ab7082950ad6a0af83fc13 Mon Sep 17 00:00:00 2001 From: Allan Lasser Date: Fri, 15 Nov 2024 18:07:45 -0500 Subject: [PATCH 10/12] Load processing on dispatch success --- src/lib/components/layouts/AddOnLayout.svelte | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/src/lib/components/layouts/AddOnLayout.svelte b/src/lib/components/layouts/AddOnLayout.svelte index 5a6f58967..70b5986b7 100644 --- a/src/lib/components/layouts/AddOnLayout.svelte +++ b/src/lib/components/layouts/AddOnLayout.svelte @@ -26,6 +26,7 @@ import Tab from "../common/Tab.svelte"; import { schedules } from "../addons/ScheduledEvent.svelte"; + import { getProcessLoader } from "../processing/ProcessContext.svelte"; export let addon: AddOnListItem; export let event: Event | null = null; @@ -64,6 +65,8 @@ } } + const load = getProcessLoader(); + // go to the correct tab after submitting function onDispatch({ detail }) { if (detail.type === "event") { @@ -72,6 +75,8 @@ if (detail.type === "run") { currentTab = "history"; + // load processing data + load?.(); } } From 5d3326d63eef0fd98f09af7b9ec609e28a5d3afa Mon Sep 17 00:00:00 2001 From: Allan Lasser Date: Mon, 18 Nov 2024 09:49:48 -0500 Subject: [PATCH 11/12] Additional padding for final sidebar items --- src/lib/components/documents/Metadata.svelte | 2 +- src/lib/components/documents/sidebar/Notes.svelte | 1 + 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/src/lib/components/documents/Metadata.svelte b/src/lib/components/documents/Metadata.svelte index aac7eeb9c..69983a0f9 100644 --- a/src/lib/components/documents/Metadata.svelte +++ b/src/lib/components/documents/Metadata.svelte @@ -68,6 +68,6 @@ display: flex; flex-direction: column; gap: 1rem; - padding: 0 0.5rem; + padding: 0 0.5rem 1rem 0; } diff --git a/src/lib/components/documents/sidebar/Notes.svelte b/src/lib/components/documents/sidebar/Notes.svelte index 913443ef3..202904758 100644 --- a/src/lib/components/documents/sidebar/Notes.svelte +++ b/src/lib/components/documents/sidebar/Notes.svelte @@ -53,6 +53,7 @@ ol { list-style: none; padding: 0; + margin-bottom: 1rem; } span.page_number { From 7f5e7be7f9cd60a8d5a8834bfa1c00e57ba773bf Mon Sep 17 00:00:00 2001 From: Allan Lasser Date: Mon, 18 Nov 2024 09:58:56 -0500 Subject: [PATCH 12/12] Update snapshot --- .../tests/__snapshots__/Mailkey.test.ts.snap | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/src/lib/components/accounts/tests/__snapshots__/Mailkey.test.ts.snap b/src/lib/components/accounts/tests/__snapshots__/Mailkey.test.ts.snap index 7b31fbcde..41b1b6f5e 100644 --- a/src/lib/components/accounts/tests/__snapshots__/Mailkey.test.ts.snap +++ b/src/lib/components/accounts/tests/__snapshots__/Mailkey.test.ts.snap @@ -12,7 +12,7 @@ exports[`Mailkey 1`] = ` class="svelte-65lbzd" >