Add reanalyze button

Add a reanalyze button for individual recordings in the analysis dropdown As part of this, split out ApiRequestButton so that state transitions (clickable -> loading/disabled -> done) can be shared across start/stop recording and this new button. Other buttons might benefit from this as well. Also fix a broken checkbox while we're here.
2026-04-27 07:59:59 -07:00 · 2025-08-02 20:15:01 +02:00
parent fe6afac817
commit 5c03f6ea03
12 changed files with 249 additions and 106 deletions
--- a/daemon/web/src/lib/analysisManager.svelte.ts
+++ b/daemon/web/src/lib/analysisManager.svelte.ts
@@ -23,11 +23,9 @@ export type AnalysisResult = {
 };

 export class AnalysisManager {
-    public status: Map<string, AnalysisStatus> = new Map();
-    public reports: Map<string, AnalysisReport | string> = new Map();
-
-    public async run_analysis(name: string) {
-        await req('POST', `/api/analysis/${name}`);
+    public status: Map<string, AnalysisStatus> = $state(new Map());
+    public reports: Map<string, AnalysisReport | string> = $state(new Map());
+    public set_queued_status(name: string) {
        this.status.set(name, AnalysisStatus.Queued);
        this.reports.delete(name);
    }
--- a/daemon/web/src/lib/components/AnalysisStatus.svelte
+++ b/daemon/web/src/lib/components/AnalysisStatus.svelte
@@ -35,15 +35,43 @@
        return finished && report_available;
    });

-    let button_class = $derived(ready ? 'text-blue-600 border rounded-full px-2' : '');
+    let button_class = $derived.by(() => {
+        if (!ready) {
+            return 'text-gray-700';
+        } else if ((entry.get_num_warnings() || 0) < 1) {
+            return 'text-green-700 border-green-500 bg-green-200 text-blue-600 border rounded-full px-2';
+        } else {
+            return 'text-red-700 border-red-500 bg-red-200 text-blue-600 border rounded-full px-2';
+        }
+    });
 </script>

 <button class="flex flex-row gap-1 lg:gap-2" disabled={!ready} {onclick}>
-    <span
-        class="{button_class} {(entry.get_num_warnings() || 0) < 1
-            ? 'text-green-700 border-green-500 bg-green-200'
-            : 'text-red-700 border-red-500 bg-red-200'}">{summary}</span
-    >
+    <span class="flex flex-row items-center gap-1">
+        {#if entry.analysis_status === AnalysisStatus.Queued || entry.analysis_status === AnalysisStatus.Running || (entry.analysis_status === AnalysisStatus.Finished && entry.analysis_report === undefined)}
+            <svg
+                class="animate-spin h-4 w-4 text-blue-600"
+                xmlns="http://www.w3.org/2000/svg"
+                fill="none"
+                viewBox="0 0 24 24"
+            >
+                <circle
+                    class="opacity-25"
+                    cx="12"
+                    cy="12"
+                    r="10"
+                    stroke="currentColor"
+                    stroke-width="4"
+                ></circle>
+                <path
+                    class="opacity-75"
+                    fill="currentColor"
+                    d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+                ></path>
+            </svg>
+        {/if}
+        <span class={button_class}>{summary}</span>
+    </span>
    <svg
        class="w-6 h-6 text-gray-800 transition-transform {analysis_visible ? 'rotate-180' : ''}"
        aria-hidden="true"
--- a/daemon/web/src/lib/components/AnalysisView.svelte
+++ b/daemon/web/src/lib/components/AnalysisView.svelte
@@ -1,11 +1,17 @@
 <script lang="ts">
    import { type ReportMetadata } from '$lib/analysis.svelte';
    import type { ManifestEntry } from '$lib/manifest.svelte';
+    import { AnalysisManager } from '$lib/analysisManager.svelte';
    import AnalysisTable from './AnalysisTable.svelte';
+    import ReAnalyzeButton from './ReAnalyzeButton.svelte';
    let {
        entry,
+        manager,
+        current,
    }: {
        entry: ManifestEntry;
+        manager: AnalysisManager;
+        current: boolean;
    } = $props();
 </script>

@@ -17,6 +23,11 @@
    {:else}
        {@const metadata: ReportMetadata = entry.analysis_report.metadata}
        <div class="flex flex-col gap-2">
+            {#if !current}
+                <div class="flex flex-row justify-end items-center">
+                    <ReAnalyzeButton {entry} {manager} />
+                </div>
+            {/if}
            {#if entry.analysis_report.rows.length > 0}
                <AnalysisTable report={entry.analysis_report} />
            {:else}
--- a/daemon/web/src/lib/components/ApiRequestButton.svelte
+++ b/daemon/web/src/lib/components/ApiRequestButton.svelte
@@ -0,0 +1,91 @@
+<script lang="ts">
+    import { req } from '$lib/utils.svelte';
+
+    let {
+        url,
+        method = 'POST',
+        label,
+        loadingLabel,
+        disabled = false,
+        variant = 'blue',
+        icon,
+        onclick,
+        ariaLabel,
+    }: {
+        url: string;
+        method?: string;
+        label: string;
+        loadingLabel?: string;
+        disabled?: boolean;
+        variant?: 'blue' | 'red' | 'green';
+        icon?: any; // Svelte snippet
+        onclick?: () => void | Promise<void>;
+        ariaLabel?: string;
+    } = $props();
+
+    let is_requesting = $state(false);
+    let is_disabled = $derived(disabled || is_requesting);
+
+    const variantClasses = {
+        blue: {
+            enabled: 'bg-blue-500 hover:bg-blue-700',
+            disabled: 'bg-blue-500 opacity-50 cursor-not-allowed',
+        },
+        red: {
+            enabled: 'bg-red-500 hover:bg-red-700',
+            disabled: 'bg-red-500 opacity-50 cursor-not-allowed',
+        },
+        green: {
+            enabled: 'bg-green-500 hover:bg-green-700',
+            disabled: 'bg-green-500 opacity-50 cursor-not-allowed',
+        },
+    };
+
+    async function handleClick() {
+        if (is_disabled) return;
+
+        is_requesting = true;
+        try {
+            await req(method, url);
+            if (onclick) {
+                await onclick();
+            }
+        } catch (err) {
+            console.error(`Failed to ${method} ${url}:`, err);
+            alert(`Request failed. Please try again.`);
+        } finally {
+            is_requesting = false;
+        }
+    }
+
+    let buttonClasses = $derived(
+        is_disabled ? variantClasses[variant].disabled : variantClasses[variant].enabled
+    );
+</script>
+
+<button
+    class="text-white font-bold py-2 px-2 sm:px-4 rounded-md flex flex-row items-center gap-1 {buttonClasses}"
+    onclick={handleClick}
+    disabled={is_disabled}
+    aria-label={ariaLabel || label}
+>
+    <span>{is_requesting && loadingLabel ? loadingLabel : label}</span>
+    {#if is_requesting}
+        <svg
+            class="w-4 h-4 text-white animate-spin"
+            xmlns="http://www.w3.org/2000/svg"
+            fill="none"
+            viewBox="0 0 24 24"
+        >
+            <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"
+            ></circle>
+            <path
+                class="opacity-75"
+                fill="currentColor"
+                d="m4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+            ></path>
+        </svg>
+    {:else if icon}
+        {@render icon()}
+    {/if}
+</button>
--- a/daemon/web/src/lib/components/ConfigForm.svelte
+++ b/daemon/web/src/lib/components/ConfigForm.svelte
@@ -203,7 +203,7 @@
                                bind:checked={config.analyzers.incomplete_sib}
                                class="h-4 w-4 text-rayhunter-blue focus:ring-rayhunter-blue border-gray-300 rounded"
                            />
-                            <label for="nas_null_cipher" class="ml-2 block text-sm text-gray-700">
+                            <label for="incomplete_sib" class="ml-2 block text-sm text-gray-700">
                                Incomplete SIB Heuristic
                            </label>
                        </div>
--- a/daemon/web/src/lib/components/ManifestCard.svelte
+++ b/daemon/web/src/lib/components/ManifestCard.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
    import { ManifestEntry } from '$lib/manifest.svelte';
+    import { AnalysisManager } from '$lib/analysisManager.svelte';
    import DownloadLink from '$lib/components/DownloadLink.svelte';
    import DeleteButton from '$lib/components/DeleteButton.svelte';
    import AnalysisStatus from './AnalysisStatus.svelte';
@@ -9,10 +10,12 @@
        entry,
        current,
        server_is_recording,
+        manager,
    }: {
        entry: ManifestEntry;
        current: boolean;
        server_is_recording: boolean;
+        manager: AnalysisManager;
    } = $props();

    // passing `undefined` as the locale uses the browser default
@@ -92,6 +95,6 @@
        {/if}
    </div>
    <div class="border-b {analysis_visible ? '' : 'hidden'}">
-        <AnalysisView {entry} />
+        <AnalysisView {entry} {manager} {current} />
    </div>
 </div>
--- a/daemon/web/src/lib/components/ManifestTable.svelte
+++ b/daemon/web/src/lib/components/ManifestTable.svelte
@@ -1,12 +1,14 @@
 <script lang="ts">
    import { ManifestEntry } from '$lib/manifest.svelte';
+    import { AnalysisManager } from '$lib/analysisManager.svelte';
    import TableRow from './ManifestTableRow.svelte';
    import Card from './ManifestCard.svelte';
    interface Props {
        entries: ManifestEntry[];
        server_is_recording: boolean;
+        manager: AnalysisManager;
    }
-    let { entries, server_is_recording }: Props = $props();
+    let { entries, server_is_recording, manager }: Props = $props();
 </script>

 <!--For larger screens we use a table-->
@@ -26,13 +28,13 @@
    </thead>
    <tbody>
        {#each entries as entry, i}
-            <TableRow {entry} current={false} {i} />
+            <TableRow {entry} current={false} {i} {manager} />
        {/each}
    </tbody>
 </table>
 <!--For smaller screens we use cards-->
 <div class="lg:hidden flex flex-col gap-4">
    {#each entries as entry}
-        <Card {entry} current={false} {server_is_recording} />
+        <Card {entry} current={false} {server_is_recording} {manager} />
    {/each}
 </div>
--- a/daemon/web/src/lib/components/ManifestTableRow.svelte
+++ b/daemon/web/src/lib/components/ManifestTableRow.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
    import { ManifestEntry } from '$lib/manifest.svelte';
+    import { AnalysisManager } from '$lib/analysisManager.svelte';
    import DownloadLink from '$lib/components/DownloadLink.svelte';
    import DeleteButton from '$lib/components/DeleteButton.svelte';
    import AnalysisStatus from './AnalysisStatus.svelte';
@@ -8,10 +9,12 @@
        entry,
        current,
        i,
+        manager,
    }: {
        entry: ManifestEntry;
        current: boolean;
        i: number;
+        manager: AnalysisManager;
    } = $props();

    // passing `undefined` as the locale uses the browser default
@@ -59,6 +62,6 @@
 </tr>
 <tr class="{alternating_row_color} border-b {analysis_visible ? '' : 'hidden'}">
    <td class="border-t border-dashed p-2" colspan="9">
-        <AnalysisView {entry} />
+        <AnalysisView {entry} {manager} {current} />
    </td>
 </tr>
--- a/daemon/web/src/lib/components/ReAnalyzeButton.svelte
+++ b/daemon/web/src/lib/components/ReAnalyzeButton.svelte
@@ -0,0 +1,47 @@
+<script lang="ts">
+    import ApiRequestButton from './ApiRequestButton.svelte';
+    import { AnalysisStatus, AnalysisManager } from '$lib/analysisManager.svelte';
+    import type { ManifestEntry } from '$lib/manifest.svelte';
+
+    let {
+        entry,
+        manager,
+    }: {
+        entry: ManifestEntry;
+        manager: AnalysisManager;
+    } = $props();
+
+    let url = $derived(entry.get_reanalyze_url());
+    let entry_name = $derived(entry.name);
+    let analysis_status = $derived(entry.analysis_status);
+
+    let is_processing = $derived(
+        analysis_status === AnalysisStatus.Queued || analysis_status === AnalysisStatus.Running
+    );
+
+    async function handleReAnalyze() {
+        // Update the entry directly for immediate UI feedback
+        entry.analysis_status = AnalysisStatus.Queued;
+        entry.analysis_report = undefined;
+        manager.set_queued_status(entry_name);
+    }
+</script>
+
+<ApiRequestButton
+    {url}
+    label="Re-analyze"
+    loadingLabel="Analyzing..."
+    disabled={is_processing}
+    variant="blue"
+    onclick={handleReAnalyze}
+    ariaLabel="re-analyze"
+>
+    {#snippet icon()}
+        <svg style="width:20px;height:20px" viewBox="0 0 24 24">
+            <path
+                fill="white"
+                d="M12,18A6,6 0 0,1 6,12C6,11 6.25,10.03 6.7,9.2L5.24,7.74C4.46,8.97 4,10.43 4,12A8,8 0 0,0 12,20V23L16,19L12,15M12,4V1L8,5L12,9V6A6,6 0 0,1 18,12C18,13 17.75,13.97 17.3,14.8L18.76,16.26C19.54,15.03 20,13.57 20,12A8,8 0 0,0 12,4Z"
+            />
+        </svg>
+    {/snippet}
+</ApiRequestButton>
--- a/daemon/web/src/lib/components/RecordingControls.svelte
+++ b/daemon/web/src/lib/components/RecordingControls.svelte
@@ -1,100 +1,51 @@
 <script lang="ts">
-    import { req } from '$lib/utils.svelte';
+    import ApiRequestButton from './ApiRequestButton.svelte';
+
    let {
        server_is_recording,
    }: {
        server_is_recording: boolean;
    } = $props();
-
-    let client_set_recording = $state(server_is_recording);
-    let waiting_for_server = $derived(client_set_recording !== server_is_recording);
-
-    async function start_recording() {
-        await req('POST', '/api/start-recording');
-        client_set_recording = true;
-    }
-
-    async function stop_recording() {
-        await req('POST', '/api/stop-recording');
-        client_set_recording = false;
-    }
-
-    const recording_button_classes =
-        'text-white font-bold py-2 px-2 sm:px-4 rounded-md flex flex-row gap-1';
-    const stop_recording_classes = `${recording_button_classes} bg-red-500 opacity-50 cursor-not-allowed`;
-    const start_recording_classes = `${recording_button_classes} bg-blue-500 opacity-50 cursor-not-allowed`;
 </script>

 <div>
-    {#if waiting_for_server}
-        <button
-            class={server_is_recording ? stop_recording_classes : start_recording_classes}
-            disabled
-        >
-            <span>{server_is_recording ? 'Stopping...' : 'Starting...'}</span>
-            <svg
-                class="w-4 h-4 text-white animate-spin"
-                xmlns="http://www.w3.org/2000/svg"
-                fill="none"
-                viewBox="0 0 24 24"
-            >
-                <circle
-                    class="opacity-25"
-                    cx="12"
-                    cy="12"
-                    r="10"
-                    stroke="currentColor"
-                    stroke-width="4"
-                ></circle>
-                <path
-                    class="opacity-75"
+    {#if server_is_recording}
+        <ApiRequestButton url="/api/stop-recording" label="Stop" variant="red">
+            {#snippet icon()}
+                <svg
+                    class="w-6 h-6 text-white"
+                    aria-hidden="true"
+                    xmlns="http://www.w3.org/2000/svg"
+                    width="24"
+                    height="24"
                    fill="currentColor"
-                    d="m4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
-                ></path>
-            </svg>
-        </button>
-    {:else if server_is_recording}
-        <button
-            class="{recording_button_classes} bg-red-500 hover:bg-red-700"
-            onclick={stop_recording}
-        >
-            <span>Stop</span>
-            <svg
-                class="w-6 h-6 text-white"
-                aria-hidden="true"
-                xmlns="http://www.w3.org/2000/svg"
-                width="24"
-                height="24"
-                fill="currentColor"
-                viewBox="0 0 24 24"
-            >
-                <path d="M7 5a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2H7Z" />
-            </svg>
-        </button>
+                    viewBox="0 0 24 24"
+                >
+                    <path
+                        d="M7 5a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2H7Z"
+                    />
+                </svg>
+            {/snippet}
+        </ApiRequestButton>
    {:else}
-        <button
-            class="{recording_button_classes} bg-blue-500 hover:bg-blue-700"
-            onclick={start_recording}
-        >
-            <span>Start</span>
-            <svg
-                class="w-6 h-6 text-white"
-                aria-hidden="true"
-                xmlns="http://www.w3.org/2000/svg"
-                width="24"
-                height="24"
-                fill="currentColor"
-                viewBox="0 0 24 24"
-            >
-                <path
-                    fill-rule="evenodd"
-                    d="M8.6 5.2A1 1 0 0 0 7 6v12a1 1 0 0 0 1.6.8l8-6a1 1 0 0 0 0-1.6l-8-6Z"
-                    clip-rule="evenodd"
-                />
-            </svg>
-        </button>
+        <ApiRequestButton url="/api/start-recording" label="Start" variant="blue">
+            {#snippet icon()}
+                <svg
+                    class="w-6 h-6 text-white"
+                    aria-hidden="true"
+                    xmlns="http://www.w3.org/2000/svg"
+                    width="24"
+                    height="24"
+                    fill="currentColor"
+                    viewBox="0 0 24 24"
+                >
+                    <path
+                        fill-rule="evenodd"
+                        d="M8.6 5.2A1 1 0 0 0 7 6v12a1 1 0 0 0 1.6.8l8-6a1 1 0 0 0 0-1.6l-8-6Z"
+                        clip-rule="evenodd"
+                    />
+                </svg>
+            {/snippet}
+        </ApiRequestButton>
    {/if}
 </div>
-
-<style>
-</style>
--- a/daemon/web/src/lib/manifest.svelte.ts
+++ b/daemon/web/src/lib/manifest.svelte.ts
@@ -102,4 +102,8 @@ export class ManifestEntry {
    get_delete_url(): string {
        return `/api/delete-recording/${this.name}`;
    }
+
+    get_reanalyze_url(): string {
+        return `/api/analysis/${this.name}`;
+    }
 }
--- a/daemon/web/src/routes/+page.svelte
+++ b/daemon/web/src/routes/+page.svelte
@@ -87,7 +87,12 @@
    {#if loaded}
        <div class="flex flex-col lg:flex-row gap-4">
            {#if current_entry}
-                <Card entry={current_entry} current={true} server_is_recording={!!current_entry} />
+                <Card
+                    entry={current_entry}
+                    current={true}
+                    server_is_recording={!!current_entry}
+                    {manager}
+                />
            {:else}
                <div
                    class="bg-red-100 border-red-100 drop-shadow p-4 flex flex-col gap-2 border rounded-md flex-1 justify-between"
@@ -124,7 +129,7 @@
        </div>
        <div class="flex flex-col gap-2">
            <span class="text-xl">History</span>
-            <ManifestTable {entries} server_is_recording={!!current_entry} />
+            <ManifestTable {entries} server_is_recording={!!current_entry} {manager} />
        </div>
        <DeleteAllButton />
        <ConfigForm />