fixed most svelte issues

bin/web/src/lib/analysis.spec.svelte.ts

@@ -1,5 +1,5 @@
 import { describe, it, expect } from 'vitest';
-import { EventType, parse_finished_report, Severity, type QualitativeWarning } from './analysis';
+import { EventType, parse_finished_report, Severity, type QualitativeWarning } from './analysis.svelte';
 import { parse_ndjson, type NewlineDeliminatedJson } from './ndjson';
 
 const SAMPLE_REPORT_NDJSON: NewlineDeliminatedJson = [

bin/web/src/lib/analysis.svelte.ts

@@ -1,5 +1,5 @@
 import { parse_ndjson, type NewlineDeliminatedJson } from "./ndjson";
-import { req } from "./utils";
+import { req } from "./utils.svelte";
 
 export type AnalysisReport = {
     metadata: ReportMetadata;

bin/web/src/lib/analysisManager.svelte.ts

@@ -1,6 +1,6 @@
-import { get_report, type AnalysisReport } from "./analysis";
-import type { Manifest, ManifestEntry } from "./manifest";
-import { req } from "./utils";
+import { get_report, type AnalysisReport } from "./analysis.svelte";
+import type { Manifest, ManifestEntry } from "./manifest.svelte";
+import { req } from "./utils.svelte";
 
 export enum AnalysisStatus {
     // rayhunter is currently analyzing this entry (note that this is distinct

bin/web/src/lib/components/AnalysisStatus.svelte

@@ -1,35 +1,39 @@
 <script lang="ts">
-	import { AnalysisStatus } from "$lib/analysisManager";
-	import { EventType } from "$lib/analysis";
-	import type { ManifestEntry } from "$lib/manifest";
-    let { entry }: {
+	import { AnalysisStatus } from "$lib/analysisManager.svelte";
+	import { EventType } from "$lib/analysis.svelte";
+	import type { ManifestEntry } from "$lib/manifest.svelte";
+    let { entry, analysis_status }: {
         entry: ManifestEntry,
+        analysis_status: AnalysisStatus | undefined,
     } = $props();
 
-    let summary = $state('Loading...');
-    if (entry.analysis_status === AnalysisStatus.Queued) {
-        summary = 'Queued...';
-    } else if (entry.analysis_status === AnalysisStatus.Running) {
-        summary = 'Running...';
-    } else if (entry.analysis_status === AnalysisStatus.Finished) {
-        if (entry.analysis_report === undefined) {
-            summary = 'Loading...';
-        } else if (typeof(entry.analysis_report) === 'string') {
-            summary = entry.analysis_report;
-        } else {
-            let num_warnings = 0;
-            for (let row of entry.analysis_report.rows) {
-                for (let analysis of row.analysis) {
-                    for (let event of analysis.events) {
-                        if (event.type === EventType.Warning) {
-                            num_warnings += 1;
+    let summary = $derived.by(() => {
+        if (analysis_status === AnalysisStatus.Queued) {
+            return 'Queued...';
+        } else if (entry.analysis_status === AnalysisStatus.Running) {
+            return 'Running...';
+        } else if (entry.analysis_status === AnalysisStatus.Finished) {
+            if (entry.analysis_report === undefined) {
+                return 'Loading...';
+            } else if (typeof(entry.analysis_report) === 'string') {
+                return entry.analysis_report;
+            } else {
+                let num_warnings = 0;
+                for (let row of entry.analysis_report.rows) {
+                    for (let analysis of row.analysis) {
+                        for (let event of analysis.events) {
+                            if (event.type === EventType.Warning) {
+                                num_warnings += 1;
+                            }
                         }
                     }
                 }
+                return `${num_warnings} warnings`;
             }
-            summary = `${num_warnings} warnings`;
+        } else {
+            return 'Loading...';
         }
-    }
+    })
 </script>
 
 <p>

bin/web/src/lib/components/ManifestTable.svelte

@@ -1,10 +1,11 @@
 <script lang="ts">
-    import { Manifest, ManifestEntry } from "$lib/manifest";
+    import { Manifest, ManifestEntry } from "$lib/manifest.svelte";
     import TableRow from "./ManifestTableRow.svelte";
     interface Props {
-        manifest: Manifest;
+        entries: ManifestEntry[];
+        current_entry: ManifestEntry | undefined;
     }
-    let { manifest }: Props = $props();
+    let { entries, current_entry }: Props = $props();
 </script>
 
 <table>
@@ -20,10 +21,10 @@
         </tr>
     </thead>
     <tbody>
-        {#if manifest.current_entry !== undefined}
-            <TableRow entry={manifest.current_entry} current={true} />
+        {#if current_entry !== undefined}
+            <TableRow entry={current_entry} current={true} />
         {/if}
-        {#each manifest.entries as entry}
+        {#each entries as entry}
             <TableRow entry={entry} current={false} />
         {/each}
     </tbody>

bin/web/src/lib/components/ManifestTableRow.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { ManifestEntry } from "$lib/manifest";
+    import { ManifestEntry } from "$lib/manifest.svelte";
     import DownloadLink from '$lib/components/DownloadLink.svelte';
 	import AnalysisStatus from "./AnalysisStatus.svelte";
     let { entry, current }: {
@@ -17,7 +17,7 @@
     <td>{entry.qmdl_size_bytes}</td>
     <td><DownloadLink url={entry.getPcapUrl()} text="pcap" /></td>
     <td><DownloadLink url={entry.getQmdlUrl()} text="qmdl" /></td>
-    <td><AnalysisStatus entry={entry} /></td>
+    <td><AnalysisStatus analysis_status={entry.analysis_status} entry={entry} /></td>
 </tr>
 
 <style>

bin/web/src/lib/components/RecordingControls.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+    import { req } from "$lib/utils.svelte";
+    let { currently_recording }: {
+        currently_recording: boolean;
+    } = $props();
+
+    async function start_recording() {
+        await req('POST', '/api/start-recording');
+    }
+
+    async function stop_recording() {
+        await req('POST', '/api/stop-recording');
+    }
+</script>
+
+<div>
+    {#if currently_recording}
+        <button onclick={stop_recording}>Stop Recording</button>
+    {:else}
+        <button onclick={start_recording}>Start Recording</button>
+    {/if}
+</div>
+
+<style>
+</style>

bin/web/src/lib/manifest.svelte.ts

@@ -1,5 +1,5 @@
-	import { get_report, type AnalysisReport } from "./analysis";
-import { AnalysisStatus, type AnalysisManager } from "./analysisManager";
+import { get_report, type AnalysisReport } from "./analysis.svelte";
+import { AnalysisStatus, type AnalysisManager } from "./analysisManager.svelte";
 
 interface JsonManifest {
     entries: JsonManifestEntry[];
@@ -51,13 +51,13 @@ export class Manifest {
 }
 
 export class ManifestEntry {
-    public name: string;
+    public name = $state("");
     public start_time: Date;
-    public last_message_time: Date | undefined = undefined;
-    public qmdl_size_bytes: number;
-    public analysis_size_bytes: number;
-    public analysis_status: AnalysisStatus | undefined = undefined;
-    public analysis_report: AnalysisReport | string | undefined = undefined;
+    public last_message_time: Date | undefined = $state(undefined);
+    public qmdl_size_bytes = $state(0);
+    public analysis_size_bytes = $state(0);
+    public analysis_status: AnalysisStatus | undefined = $state(undefined);
+    public analysis_report: AnalysisReport | string | undefined = $state(undefined);
 
     constructor(json: JsonManifestEntry) {
         this.name = json.name;

bin/web/src/lib/ndjson.ts

@@ -1,7 +1,6 @@
 export type NewlineDeliminatedJson = any[];
 
 export function parse_ndjson(input: string): NewlineDeliminatedJson {
-    console.log(input)
     const lines = input.split('\n');
     const result = [];
     let current_line = '';

bin/web/src/lib/utils.svelte.ts

@@ -1,4 +1,4 @@
-import { Manifest } from "./manifest";
+import { Manifest } from "./manifest.svelte";
 import type { SystemStats } from "./systemStats";
 
 export async function req(method: string, url: string): Promise<string> {