first work on live mode

src/lib/viz/dashboard/dashboard.tsx

@@ -6,7 +6,6 @@ import { Card } from '~/components/ui/card';
 import { Resizable, ResizableHandle, ResizablePanel } from '~/components/ui/resizable';
 import { Tooltip, TooltipContent, TooltipTrigger } from '~/components/ui/tooltip';
 import { cn } from '~/lib/utils';
-import { RunFileInfo, RunFileLoader } from '../loader';
 import { HKMap } from '../map';
 import { RoomInfo } from '../room-infos';
 import { RunSplits } from '../splits';
@@ -18,6 +17,8 @@ import { MobileTabBar } from './mobile-tabs';
 import { RunOverviewTab } from './overview-tab';
 import { LargeScreenTabs } from './tabs-large-screen';
 import { useSplitsStore, useUiStore } from '../store';
+import { RunFileInfo } from '../loader/parts/run-files-info';
+import { RunFileLoader } from '../loader/parts/run-files-loader';
 
 export const DashboardMapOptions: Component = () => {
 	const uiStore = useUiStore();
@@ -210,7 +211,7 @@ export interface GameplayDashboardProps {
 	fileInfos: RunFileInfo[];
 	startDate: Date | undefined;
 	gameplayCard: JSXElement;
-	runFileLoader: RunFileLoader;
+	runFileLoader: RunFileLoader | undefined;
 }
 export const GameplayDashboard: Component<GameplayDashboardProps> = (props) => {
 	const uiStore = useUiStore();
@@ -239,8 +240,8 @@ export const GameplayDashboard: Component<GameplayDashboardProps> = (props) => {
 				<RunOverviewTab
 					class="col-start-1 col-end-1 row-start-1 row-end-1"
 					startDate={props.startDate}
-					loadingDone={props.runFileLoader.done()}
-					loadingProgress={props.runFileLoader.progress()}
+					loadingDone={props.runFileLoader?.done() ?? false}
+					loadingProgress={props.runFileLoader?.progress() ?? 0}
 					gameplayCard={props.gameplayCard}
 				/>
 				<SingleRunPageTour />

src/lib/viz/loader/combined/index.ts

@@ -0,0 +1 @@
+export * from './run-combined-loader';

src/lib/viz/loader/combined/run-combined-loader.ts

@@ -0,0 +1,20 @@
+/**
+ * Combines the data from runfiles stored in buckets with the live data retrieved from the websocket.
+ */
+
+import { GetRunResult } from '~/server/run/run-get';
+import { createRunFileLoader } from '../parts/run-files-loader';
+import { createMemo } from 'solid-js';
+import { createRunLiveLoader } from '../live/run-live-loader';
+
+export function createCombinedRunLoader(runData: () => GetRunResult | undefined) {
+	const loader = createMemo(() => {
+		const run = runData();
+		if (!run) return null;
+		return createRunFileLoader(run.files);
+	});
+
+	const liveLoader = createRunLiveLoader();
+
+	return { loader, liveLoader };
+}

src/lib/viz/loader/index.ts

@@ -1,2 +1 @@
-export * from './run-files-info';
-export * from './run-files-loader';
+export * from './combined';

src/lib/viz/loader/live/run-live-loader.ts

@@ -0,0 +1,19 @@
+import { createEffect, onCleanup } from 'solid-js';
+
+export function createRunLiveLoader() {
+	// TODO take url and access token as argument
+
+	createEffect(() => {
+		const ws = new WebSocket('ws://127.0.0.1:8787/websocket?mode=view&accessKey=abc');
+		ws.onopen = () => {
+			console.log('connected');
+		};
+		ws.onmessage = (event) => {
+			console.log('received', event.data);
+		};
+
+		onCleanup(() => {
+			ws.close();
+		});
+	});
+}

src/lib/viz/loader/run-files-loader.ts → src/lib/viz/loader/parts/run-files-loader.ts

@@ -1,10 +1,10 @@
-import { combineRecordings, parseRecordingFile } from '../../parser';
+import { combineRecordings, parseRecordingFile } from '../../../parser';
 import { createDeferred, createMemo, createSignal } from 'solid-js';
 import { fetchWithRunfileCache, openRunfileCache } from './recording-file-browser-cache';
 import { type RunFileInfo } from './run-files-info';
 import { wrapResultWithProgress } from './wrap-result-with-progress';
 import { isServer } from 'solid-js/web';
-import { createStoreInitializer } from '../store/store-initializer';
+import { createStoreInitializer } from '../../store/store-initializer';
 
 async function loadFile(cache: Promise<Cache | null>, file: RunFileInfo, onProgress: (progress: number) => void) {
 	const loader = () => fetchWithRunfileCache(cache, file.id, file.version, file.signedUrl);

src/routes/run/[id].tsx

@@ -1,13 +1,14 @@
 import { Title } from '@solidjs/meta';
 import { RouteSectionProps, createAsync } from '@solidjs/router';
-import { Show, createMemo } from 'solid-js';
+import { Show } from 'solid-js';
 import { ContentWrapper } from '~/components/content-wrapper';
 import { RunCard } from '~/components/run-card';
-import { GameplayDashboard, createRunFileLoader } from '~/lib/viz';
+import { useUser } from '~/lib/auth/client';
+import { GameplayDashboard } from '~/lib/viz';
+import { createCombinedRunLoader } from '~/lib/viz/loader/combined/run-combined-loader';
 import { RunStoresProvider } from '~/lib/viz/store/store-context';
 import { getRun } from '~/server/run/run-get';
 import { getRunPageTitle } from './_metadata';
-import { useUser } from '~/lib/auth/client';
 
 // TODO
 // export async function generateMetadata({ params }: { params: Params }): Promise<Metadata> {
@@ -19,11 +20,7 @@ function SingleRunLoadingWrapper(props: { id: string }) {
 	const runData = createAsync(() => getRun(props.id));
 	const user = useUser();
 
-	const loader = createMemo(() => {
-		const run = runData();
-		if (!run) return null;
-		return createRunFileLoader(run.files);
-	});
+	const { loader, liveLoader } = createCombinedRunLoader(runData);
 
 	return (
 		<Show when={runData()}>