Compiles with WithGraphData

ts/graphs/GraphsPage.svelte

@@ -9,6 +9,8 @@
     import { getPreferences } from "./preferences";
     import { bridgeCommand } from "anki/bridgecommand";
 
+    import WithGraphData from "./WithGraphData.svelte";
+
     export let i18n: I18n;
     export let nightMode: boolean;
     export let graphs: SvelteComponent[];
@@ -17,39 +19,8 @@
     export let days: number;
     export let controller: SvelteComponent | null;
 
-    let active = false;
+    const browserSearch = (search: string, query: string) => {
-    let sourceData: pb.BackendProto.GraphsOut | null = null;
+        bridgeCommand(`browserSearch:${search} ${query}`);
-    let preferences: PreferenceStore | null = null;
-    let revlogRange: RevlogRange;
-
-    const preferencesPromise = getPreferences();
-
-    const refreshWith = async (searchNew: string, days: number) => {
-        search = searchNew;
-
-        active = true;
-        try {
-            [sourceData, preferences] = await Promise.all([
-                getGraphData(search, days),
-                preferencesPromise,
-            ]);
-            revlogRange = daysToRevlogRange(days);
-        } catch (e) {
-            sourceData = null;
-            alert(e);
-        }
-        active = false;
-    };
-
-    const refresh = (event: CustomEvent) => {
-        refreshWith(event.detail.search, event.detail.days);
-    };
-
-    refreshWith(search, days);
-
-    const browserSearch = (event: CustomEvent) => {
-        const query = `${search} ${event.detail.query}`;
-        bridgeCommand(`browserSearch:${query}`);
     };
 </script>
 
@@ -59,21 +30,22 @@
             font-size: 12px;
         }
     }
-
 </style>
 
 <div class="base">
-    {#if controller}
+    <WithGraphData
-        <svelte:component
-            this={controller}
-            {i18n}
         {search}
         {days}
-            {active}
+        let:pending
-            on:update={refresh} />
+        let:loading
+        let:sourceData
+        let:preferences
+        let:revlogRange>
+        {#if controller}
+            <svelte:component this={controller} {i18n} {search} {days} {loading} />
         {/if}
 
-    {#if sourceData}
+        {#if !pending}
             {#each graphs as graph}
                 <svelte:component
                     this={graph}
@@ -82,7 +54,8 @@
                     {revlogRange}
                     {i18n}
                     {nightMode}
-                on:search={browserSearch} />
+                    on:search={(event) => browserSearch(search, event.detail.query)} />
             {/each}
         {/if}
+    </WithGraphData>
 </div>

ts/graphs/RangeBox.svelte

@@ -1,5 +1,6 @@
 <script lang="typescript">
     import { createEventDispatcher } from "svelte";
+    import type { Writable } from "svelte/store";
 
     import InputBox from "./InputBox.svelte";
 
@@ -12,17 +13,11 @@
         Custom = 3,
     }
 
-    type UpdateEventMap = {
-        update: { days: number; search: string; searchRange: SearchRange };
-    };
-
     export let i18n: I18n;
-    export let active: boolean;
+    export let loading: boolean;
 
-    export let days: number;
+    export let days: Writable<number>;
-    export let search: string;
+    export let search: Writable<string>;
-
-    const dispatch = createEventDispatcher<UpdateEventMap>();
 
     let revlogRange = daysToRevlogRange(days);
     let searchRange: SearchRange =
@@ -34,23 +29,15 @@
 
     let displayedSearch = search;
 
-    const update = () => {
-        dispatch("update", {
-            days: days,
-            search: search,
-            searchRange: searchRange,
-        });
-    };
-
     $: {
         switch (searchRange as SearchRange) {
             case SearchRange.Deck:
-                search = displayedSearch = "deck:current";
+                displayedSearch = "deck:current";
-                update();
+                search.set(displayedSearch);
                 break;
             case SearchRange.Collection:
                 search = displayedSearch = "";
-                update();
+                search.set(displayedSearch);
                 break;
         }
     }
@@ -58,21 +45,18 @@
     $: {
         switch (revlogRange as RevlogRange) {
             case RevlogRange.Year:
-                days = 365;
+                days.set(365);
-                update();
                 break;
             case RevlogRange.All:
-                days = 0;
+                days.set(0);
-                update();
                 break;
         }
     }
 
-    const searchKeyUp = (e: KeyboardEvent) => {
+    const searchKeyUp = (event: KeyboardEvent) => {
         // fetch data on enter
-        if (e.key == "Enter") {
+        if (event.key === "Enter") {
-            search = displayedSearch;
+            search.set(displayedSearch);
-            update();
         }
     };
 
@@ -117,7 +101,7 @@
 
         opacity: 0;
 
-        &.active {
+        &.loading {
             opacity: 0.5;
             transition: opacity 1s;
         }
@@ -129,7 +113,7 @@
 </style>
 
 <div class="range-box">
-    <div class="spin" class:active>◐</div>
+    <div class="spin" class:loading>◐</div>
 
     <InputBox>
         <label>

ts/graphs/WithGraphData.svelte

@@ -14,8 +14,11 @@
     const search = writable(initialSearch);
     const days = writable(initialDays);
 
-    const sourceData = useAsyncReactive(() => getGraphData($search, $days), [search, days])
+    const sourceData = useAsyncReactive(() => getGraphData($search, $days), [
-    const preferences = useAsync(() => getPreferences())
+        search,
+        days,
+    ]);
+    const preferences = useAsync(() => getPreferences());
 
     $: revlogRange = daysToRevlogRange($days);
 </script>
@@ -25,7 +28,6 @@
     {days}
     {revlogRange}
     pending={$sourceData.pending || $preferences.pending}
+    loading={$sourceData.loading || $preferences.loading}
     sourceData={$sourceData.value}
-     preferences={$preferences.value}
+    preferences={$preferences.value} />
- >
- </slot>