feat: frontend redesign (#30)

* feat: improve QueryBatchOverview style # Conflicts: # visual-debugger/src/lib/components/ui/QueryBatchOverview.svelte # visual-debugger/src/routes/+page.svelte * feat: improve general layout Co-Authored-By: MoPhliFra <[email protected]> * feat: introduce scrollarea, further style improvements Co-Authored-By: Dominik Kuckeburg <[email protected]> * feat: add new debugger style with new URL * chore: Query Batch Overview name correction * chore: remove gap-2 from main content div * feat: reimplement functionality to new layout * feat: Layout size fix, header improvement, footer removal --------- Co-authored-by: Dominik Kuckeburg <[email protected]> Co-authored-by: Dominik Kuckeburg <[email protected]> Co-authored-by: Kvnstrck <[email protected]>
MoViDe-Project · Jan 20, 2025 · a800bab · a800bab
1 parent ec90f4a
commit a800bab
Show file tree

Hide file tree

Showing 19 changed files with 495 additions and 72 deletions.
diff --git a/visual-debugger/package.json b/visual-debugger/package.json
@@ -31,9 +31,12 @@
 		"vite": "^6.0.0",
 		"vitest": "^2.0.4"
 	},
-  "overrides": {
-    "vitest": {
-      "vite": "^6.0.0"
-    }
-  }
+	"overrides": {
+		"vitest": {
+			"vite": "^6.0.0"
+		}
+	},
+	"dependencies": {
+		"mode-watcher": "^0.5.0"
+	}
 }
diff --git a/visual-debugger/src/lib/components/ui/DefaultPlanOverview.svelte b/visual-debugger/src/lib/components/ui/DefaultPlanOverview.svelte
@@ -2,6 +2,7 @@
     import {currentDefaultPlanStore} from "../../../sveltestore.ts";
     import type {Itinerary} from "../../../data-processing/parsing-types/planParsingTypes.ts";
     import PlanEntry from "$lib/components/ui/subcomponents/PlanEntry.svelte";
+    import {ScrollArea} from "@/components/ui/scroll-area";
 
     let itineraries: Itinerary[]
     // let queries be up-to-date with the store
@@ -14,17 +15,12 @@
         }
     )
 </script>
-<h2>Plan of active default query(Routing results)</h2>
-<div class="rounded-border">
+
+<ScrollArea class="rounded-md border h-full">
     {#each itineraries as itinerary}
         <PlanEntry startTime="{itinerary.startTime}" endTime="{itinerary.endTime}"
-                   duration="{itinerary.duration.toString()}" transfers="{itinerary.transfers.toString()}"/>
+                    duration="{itinerary.duration.toString()}" transfers="{itinerary.transfers.toString()}"/>
     {/each}
-</div>
-<style>
-    .rounded-border {
-        border: 1px solid black;
-        border-radius: 8px;
-        padding: 10px;
-    }
-</style>
+</ScrollArea>
+
+
diff --git a/visual-debugger/src/lib/components/ui/PlanOverview.svelte b/visual-debugger/src/lib/components/ui/PlanOverview.svelte
@@ -1,7 +1,8 @@
 <script lang="ts">
     import {currentPlanStore} from "../../../sveltestore.ts";
-    import type {Itinerary, Plan} from "../../../data-processing/parsing-types/planParsingTypes.ts";
+    import type {Itinerary} from "../../../data-processing/parsing-types/planParsingTypes.ts";
     import PlanEntry from "$lib/components/ui/subcomponents/PlanEntry.svelte";
+    import {ScrollArea} from "$lib/components/ui/scroll-area/index.js";
 
     let itineraries: Itinerary[]
 
@@ -16,19 +17,14 @@
     )
 </script>
 
-<h2>Plan of Query(Routing results)</h2>
-<div class="rounded-border">
+
+
+<!-- Scroll area for the plan entries. Has to be styled a bit more to look good. -->
+<ScrollArea class="rounded-md border h-full">
     {#each itineraries as itinerary}
         <PlanEntry startTime="{itinerary.startTime}" endTime="{itinerary.endTime}"
-                   duration="{itinerary.duration.toString()}" transfers="{itinerary.transfers.toString()}"/>
+                duration="{itinerary.duration.toString()}" transfers="{itinerary.transfers.toString()}"/>
     {/each}
-</div>
+</ScrollArea>
 
 
-<style>
-    .rounded-border {
-        border: 1px solid black;
-        border-radius: 8px;
-        padding: 10px;
-    }
-</style>
diff --git a/visual-debugger/src/lib/components/ui/QueryBatchOverview.svelte b/visual-debugger/src/lib/components/ui/QueryBatchOverview.svelte
@@ -8,6 +8,8 @@
     import type {Query} from "../../../data-processing/parsing-types/queryInterpolationTypes.ts";
     import {Button} from "@/components/ui/button";
     import type {Plan} from "../../../data-processing/parsing-types/planParsingTypes.ts";
+    import {Separator} from "@/components/ui/separator";
+    import { ScrollArea } from "$lib/components/ui/scroll-area/index.js";
 
     let queries: Query[]
 
@@ -29,15 +31,15 @@
                 plans = data
 
                 //if no plan was previously computed, alert the user of this
-                if (data == undefined) {
+                if (data === new Array<Plan>) {
                     alert("No plans found, please compute the queries before trying to switch between their data.")
                     return
                 }
             }
         )
 
         // return if the store is still empty (this means the function was called to early)
-        if (plans == undefined) return;
+        if (plans === new Array<Plan>) return;
 
         // load plan of the clicked query into svelte store
         currentPlanStore.set(plans[queryIndex - 1])
@@ -65,18 +67,14 @@
 
 </script>
 
-<h2>Query Batches</h2>
-<div class="rounded-border">
-    {#each queries as query}
-        <Button on:click={() => changePlan(query.index)}> {query.index}: {query.from} -> {query.to}</Button>
-    {/each}
-</div>
-
 
-<style>
-    .rounded-border {
-        border: 1px solid black;
-        border-radius: 8px;
-        padding: 10px;
-    }
-</style>
+<div class="h-full">
+    <ScrollArea class="rounded-md border h-full">
+        {#each queries as query}
+            <div>
+                <Button on:click={() => changePlan(query.index)} variant="link">{query.from} - {query.to}</Button>
+            </div>
+            <Separator class="my-1"/>
+        {/each}
+    </ScrollArea>
+</div>
diff --git a/visual-debugger/src/lib/components/ui/input/index.ts b/visual-debugger/src/lib/components/ui/input/index.ts
@@ -0,0 +1,29 @@
+import Root from "./input.svelte";
+
+export type FormInputEvent<T extends Event = Event> = T & {
+	currentTarget: EventTarget & HTMLInputElement;
+};
+export type InputEvents = {
+	blur: FormInputEvent<FocusEvent>;
+	change: FormInputEvent<Event>;
+	click: FormInputEvent<MouseEvent>;
+	focus: FormInputEvent<FocusEvent>;
+	focusin: FormInputEvent<FocusEvent>;
+	focusout: FormInputEvent<FocusEvent>;
+	keydown: FormInputEvent<KeyboardEvent>;
+	keypress: FormInputEvent<KeyboardEvent>;
+	keyup: FormInputEvent<KeyboardEvent>;
+	mouseover: FormInputEvent<MouseEvent>;
+	mouseenter: FormInputEvent<MouseEvent>;
+	mouseleave: FormInputEvent<MouseEvent>;
+	mousemove: FormInputEvent<MouseEvent>;
+	paste: FormInputEvent<ClipboardEvent>;
+	input: FormInputEvent<InputEvent>;
+	wheel: FormInputEvent<WheelEvent>;
+};
+
+export {
+	Root,
+	//
+	Root as Input,
+};
diff --git a/visual-debugger/src/lib/components/ui/input/input.svelte b/visual-debugger/src/lib/components/ui/input/input.svelte
@@ -0,0 +1,42 @@
+<script lang="ts">
+	import type { HTMLInputAttributes } from "svelte/elements";
+	import type { InputEvents } from "./index.js";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = HTMLInputAttributes;
+	type $$Events = InputEvents;
+
+	let className: $$Props["class"] = undefined;
+	export let value: $$Props["value"] = undefined;
+	export { className as class };
+
+	// Workaround for https://github.com/sveltejs/svelte/issues/9305
+	// Fixed in Svelte 5, but not backported to 4.x.
+	export let readonly: $$Props["readonly"] = undefined;
+</script>
+
+<input
+	class={cn(
+		"border-input bg-background ring-offset-background placeholder:text-muted-foreground focus-visible:ring-ring flex h-10 w-full rounded-md border px-3 py-2 text-sm file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+		className
+	)}
+	bind:value
+	{readonly}
+	on:blur
+	on:change
+	on:click
+	on:focus
+	on:focusin
+	on:focusout
+	on:keydown
+	on:keypress
+	on:keyup
+	on:mouseover
+	on:mouseenter
+	on:mouseleave
+	on:mousemove
+	on:paste
+	on:input
+	on:wheel|passive
+	{...$$restProps}
+/>
diff --git a/visual-debugger/src/lib/components/ui/scroll-area/index.ts b/visual-debugger/src/lib/components/ui/scroll-area/index.ts
@@ -0,0 +1,10 @@
+import Scrollbar from "./scroll-area-scrollbar.svelte";
+import Root from "./scroll-area.svelte";
+
+export {
+	Root,
+	Scrollbar,
+	//,
+	Root as ScrollArea,
+	Scrollbar as ScrollAreaScrollbar,
+};
diff --git a/visual-debugger/src/lib/components/ui/scroll-area/scroll-area-scrollbar.svelte b/visual-debugger/src/lib/components/ui/scroll-area/scroll-area-scrollbar.svelte
@@ -0,0 +1,27 @@
+<script lang="ts">
+	import { ScrollArea as ScrollAreaPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = ScrollAreaPrimitive.ScrollbarProps & {
+		orientation?: "vertical" | "horizontal";
+	};
+
+	let className: $$Props["class"] = undefined;
+	export let orientation: $$Props["orientation"] = "vertical";
+	export { className as class };
+</script>
+
+<ScrollAreaPrimitive.Scrollbar
+	{orientation}
+	class={cn(
+		"flex touch-none select-none transition-colors",
+		orientation === "vertical" && "h-full w-2.5 border-l border-l-transparent p-px",
+		orientation === "horizontal" && "h-2.5 w-full border-t border-t-transparent p-px",
+		className
+	)}
+>
+	<slot />
+	<ScrollAreaPrimitive.Thumb
+		class={cn("bg-border relative rounded-full", orientation === "vertical" && "flex-1")}
+	/>
+</ScrollAreaPrimitive.Scrollbar>
diff --git a/visual-debugger/src/lib/components/ui/scroll-area/scroll-area.svelte b/visual-debugger/src/lib/components/ui/scroll-area/scroll-area.svelte
@@ -0,0 +1,32 @@
+<script lang="ts">
+	import { ScrollArea as ScrollAreaPrimitive } from "bits-ui";
+	import { Scrollbar } from "./index.js";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = ScrollAreaPrimitive.Props & {
+		orientation?: "vertical" | "horizontal" | "both";
+		scrollbarXClasses?: string;
+		scrollbarYClasses?: string;
+	};
+
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+	export let orientation = "vertical";
+	export let scrollbarXClasses: string = "";
+	export let scrollbarYClasses: string = "";
+</script>
+
+<ScrollAreaPrimitive.Root {...$$restProps} class={cn("relative overflow-hidden", className)}>
+	<ScrollAreaPrimitive.Viewport class="h-full w-full rounded-[inherit]">
+		<ScrollAreaPrimitive.Content>
+			<slot />
+		</ScrollAreaPrimitive.Content>
+	</ScrollAreaPrimitive.Viewport>
+	{#if orientation === "vertical" || orientation === "both"}
+		<Scrollbar orientation="vertical" class={scrollbarYClasses} />
+	{/if}
+	{#if orientation === "horizontal" || orientation === "both"}
+		<Scrollbar orientation="horizontal" class={scrollbarXClasses} />
+	{/if}
+	<ScrollAreaPrimitive.Corner />
+</ScrollAreaPrimitive.Root>
diff --git a/visual-debugger/src/lib/components/ui/subcomponents/PlanEntry.svelte b/visual-debugger/src/lib/components/ui/subcomponents/PlanEntry.svelte
@@ -1,11 +1,15 @@
 <script lang="ts">
+    import {Button} from "@/components/ui/button";
+
     export let startTime: String;
     export let endTime: String;
     export let duration: String;
     export let transfers: String;
 
 </script>
 
-<div>
-    <p> StartTime:{startTime}, EndTime:{endTime}, Duration: {duration}, Number of Transfers: {transfers}</p>
-</div>
+<div class="text-2xl">
+    <Button variant="outline" class="w-full my-2 border-green-500 bg-green-200">
+        <span class="text-left w-full">StartTime:{startTime}, EndTime:{endTime}</span>
+    </Button>
+</div>
diff --git a/visual-debugger/src/lib/components/ui/switch/index.ts b/visual-debugger/src/lib/components/ui/switch/index.ts
@@ -0,0 +1,7 @@
+import Root from "./switch.svelte";
+
+export {
+	Root,
+	//
+	Root as Switch,
+};
diff --git a/visual-debugger/src/lib/components/ui/switch/switch.svelte b/visual-debugger/src/lib/components/ui/switch/switch.svelte
@@ -0,0 +1,28 @@
+<script lang="ts">
+	import { Switch as SwitchPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = SwitchPrimitive.Props;
+	type $$Events = SwitchPrimitive.Events;
+
+	let className: $$Props["class"] = undefined;
+	export let checked: $$Props["checked"] = undefined;
+	export { className as class };
+</script>
+
+<SwitchPrimitive.Root
+	bind:checked
+	class={cn(
+		"focus-visible:ring-ring focus-visible:ring-offset-background data-[state=checked]:bg-primary data-[state=unchecked]:bg-input peer inline-flex h-[24px] w-[44px] shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+		className
+	)}
+	{...$$restProps}
+	on:click
+	on:keydown
+>
+	<SwitchPrimitive.Thumb
+		class={cn(
+			"bg-background pointer-events-none block h-5 w-5 rounded-full shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0"
+		)}
+	/>
+</SwitchPrimitive.Root>
diff --git a/visual-debugger/src/lib/components/ui/upload/DefaultPlanUpload.svelte b/visual-debugger/src/lib/components/ui/upload/DefaultPlanUpload.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
     import {currentDefaultPlanStore, defaultPlanDatasetStore} from "../../../../sveltestore.ts";
     import type {Plan} from "../../../../data-processing/parsing-types/planParsingTypes.ts";
+    import { Input } from "$lib/components/ui/input/index.js";
 
     let file: File | null = null;
 
@@ -24,8 +25,11 @@
 </script>
 
 <div>
-    <input type="file" on:change={putFileIntoStorage}/>
+
+    <Input id="q-upload" type="file" on:change={putFileIntoStorage} />
+
+    <!-- <input type="file" on:change={putFileIntoStorage} class=""/>
     {#if file}
         <p>Selected file: {file.name}</p>
-    {/if}
+    {/if} -->
 </div>
diff --git a/...ib/components/ui/upload/FileUpload.svelte → ...b/components/ui/upload/QueryUpload.svelte b/...ib/components/ui/upload/FileUpload.svelte → ...b/components/ui/upload/QueryUpload.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
     import {queryJsonStringStore} from "../../../../sveltestore.ts";
     import {computeQueryAttributes} from "../../../../data-processing/queryBuild.ts";
+    import { Input } from "$lib/components/ui/input/index.js";
 
     let file: File | null = null;
 
@@ -27,8 +28,9 @@
 </script>
 
 <div>
-    <input type="file" on:change={putFileIntoStorage}/>
+    <Input id="q-upload" type="file" on:change={putFileIntoStorage} />
+    <!-- <input type="file" on:change={putFileIntoStorage}/>
     {#if file}
         <p>Selected file: {file.name}</p>
-    {/if}
+    {/if} -->
 </div>