Persist debug config & last debug stage

ui/src/config.ts

@@ -0,0 +1,20 @@
+import { Writable, writable } from 'svelte/store';
+
+export const debugEnabled = storedWritable('debugEnabled', false);
+export const debugStage = storedWritable('debugStage', 0);
+
+function storedWritable<T>(key: string, defaultValue: T): Writable<T> {
+    const store = writable(fromLocalStore(key, defaultValue));
+    store.subscribe((value) => {
+        localStorage.setItem(key, JSON.stringify(value));
+    });
+    return store;
+}
+
+function fromLocalStore<T>(key: string, defaultValue: T): T {
+    const storedValue = localStorage.getItem(key);
+    if (storedValue === null || storedValue === 'null') {
+        return defaultValue;
+    }
+    return JSON.parse(storedValue);
+}

ui/src/debug/DebugView.svelte

@@ -11,6 +11,7 @@
     import Checkbox from '../components/Checkbox.svelte';
     import ItemTable from './ItemTable.svelte';
     import TransformerSelectionPopup from './TransformerSelectionPopup.svelte';
+    import { debugStage } from '../config';
 
     export let debug: Debugger;
 
@@ -18,10 +19,9 @@
     let pinnedPage: number;
     let onlyRelevantItems = true;
 
-    let currentStage = 0;
+    $: canNext = $debugStage + 1 < stageNames.length;
-    $: canNext = currentStage + 1 < stageNames.length;
+    $: canPrev = $debugStage > 0;
-    $: canPrev = currentStage > 0;
+    $: stageResult = debug.stageResults($debugStage);
-    $: stageResult = debug.stageResults(currentStage);
     $: pageIsPinned = !isNaN(pinnedPage);
     $: pagesNumbers = new Set(stageResult.pages.map((page) => page.index));
     $: maxPage = Math.max(...pagesNumbers);
@@ -59,25 +59,25 @@
 
             <div>|</div>
             <div>Transformation:</div>
-            <span on:click={() => canPrev && currentStage--}>
+            <span on:click={() => canPrev && debugStage.update((cur) => cur - 1)}>
                 <ArrowLeft size="1x" class={canPrev ? 'hover:text-green-700 cursor-pointer' : 'opacity-50'} />
             </span>
-            <span on:click={() => canNext && currentStage++}>
+            <span on:click={() => canNext && debugStage.update((cur) => cur + 1)}>
                 <ArrowRight size="1x" class={canNext ? 'hover:text-green-700 cursor-pointer' : 'opacity-50'} />
             </span>
             <span>
                 <Popup>
                     <span slot="trigger">
                         <div class="w-52 cursor-pointer hover:underline whitespace-nowrap">
-                            {stageNames[currentStage]}
+                            {stageNames[$debugStage]}
                         </div>
                     </span>
                     <span slot="content">
                         <TransformerSelectionPopup
                             {stageNames}
                             stageDescriptions={debug.stageDescriptions}
-                            {currentStage}
+                            currentStage={$debugStage}
-                            on:selectTransformer={(e) => (currentStage = e.detail)} />
+                            on:selectTransformer={({ detail }) => debugStage.set(detail)} />
                     </span>
                 </Popup>
             </span>

ui/src/main/Upload.svelte

@@ -6,13 +6,13 @@
     import type Progress from '@core/Progress';
     import ProgressRing from '../components/ProgressRing.svelte';
     import Checkbox from '../components/Checkbox.svelte';
+    import { debugEnabled } from '../config';
 
     let specifiedFileName: string;
     let dragover = false;
     let upload: Promise<any>;
     let rejectionError: string;
     let parseProgress: Progress;
-    let debug = false;
 
     function handleExampleLoad() {
         dragover = true;
@@ -49,7 +49,7 @@
         <div class="py-0.5 border-2 border-gray-50 hover:underline cursor-pointer" on:click={handleExampleLoad}>
             Load Example
         </div>
-        <Checkbox name="Debug" bind:enabled={debug} />
+        <Checkbox name="Debug" bind:enabled={$debugEnabled} />
     </div>
 
     <!-- Upload Box -->