Get it to work, if you change the input

- there's still an issue on initial load

ts/graphs/GraphsPage.svelte

@@ -3,10 +3,6 @@
 
     import type { SvelteComponent } from "svelte/internal";
     import type { I18n } from "anki/i18n";
-    import type { PreferenceStore } from "./preferences";
-    import type pb from "anki/backend_proto";
-    import { getGraphData, RevlogRange, daysToRevlogRange } from "./graph-helpers";
-    import { getPreferences } from "./preferences";
     import { bridgeCommand } from "anki/bridgecommand";
 
     import WithGraphData from "./WithGraphData.svelte";
@@ -36,16 +32,18 @@
     <WithGraphData
         {search}
         {days}
+        let:search={searchStore}
+        let:days={daysStore}
         let:pending
         let:loading
         let:sourceData
         let:preferences
         let:revlogRange>
         {#if controller}
-            <svelte:component this={controller} {i18n} {search} {days} {loading} />
+            <svelte:component this={controller} {i18n} search={searchStore} days={daysStore} {loading} />
         {/if}
 
-        {#if !pending}
+        {#if !pending && sourceData && preferences}
             {#each graphs as graph}
                 <svelte:component
                     this={graph}

ts/graphs/RangeBox.svelte

@@ -19,24 +19,25 @@
     export let days: Writable<number>;
     export let search: Writable<string>;
 
-    let revlogRange = daysToRevlogRange(days);
+    let revlogRange = daysToRevlogRange($days);
-    let searchRange: SearchRange =
+    let searchRange = $search === "deck:current"
-        search === "deck:current"
             ? SearchRange.Deck
-            : search === ""
+            : $search === ""
             ? SearchRange.Collection
             : SearchRange.Custom;
 
-    let displayedSearch = search;
+    let displayedSearch = $search;
 
     $: {
         switch (searchRange as SearchRange) {
             case SearchRange.Deck:
                 displayedSearch = "deck:current";
+                console.log('search', search)
                 search.set(displayedSearch);
                 break;
             case SearchRange.Collection:
-                search = displayedSearch = "";
+                displayedSearch = "";
+                console.log('search', search)
                 search.set(displayedSearch);
                 break;
         }

ts/graphs/WithGraphData.svelte

@@ -14,11 +14,20 @@
     const search = writable(initialSearch);
     const days = writable(initialDays);
 
-    const sourceData = useAsyncReactive(() => getGraphData($search, $days), [
+    const {
+        pending: graphPending,
+        loading: graphLoading,
+        value: graphValue,
+    } = useAsyncReactive(() => getGraphData($search, $days), [
         search,
         days,
     ]);
-    const preferences = useAsync(() => getPreferences());
+
+    const {
+        pending: prefsPending,
+        loading: prefsLoading,
+        value: prefsValue,
+    } = useAsync(() => getPreferences());
 
     $: revlogRange = daysToRevlogRange($days);
 </script>
@@ -27,7 +36,7 @@
     {search}
     {days}
     {revlogRange}
-    pending={$sourceData.pending || $preferences.pending}
+    pending={$graphPending || $prefsPending}
-    loading={$sourceData.loading || $preferences.loading}
+    loading={$graphLoading || $prefsLoading}
-    sourceData={$sourceData.value}
+    sourceData={$graphValue}
-    preferences={$preferences.value} />
+    preferences={$prefsValue} />

ts/graphs/asyncReactive.ts

@@ -38,7 +38,7 @@ function useAsyncReactive<T, E>(
 
     const loading = derived(
         [value, error],
-        (_, set) => {
+        (_, set: (value: boolean) => void) => {
             set(false);
             return () => set(true);
         },
@@ -47,7 +47,7 @@ function useAsyncReactive<T, E>(
 
     const success = derived(
         [value],
-        (_, set) => {
+        (_, set: (value: boolean) => void) => {
             set(true);
             return () => set(false);
         },