Frontend 8/14 milestone

frontend/src/lib/api/api.ts

@@ -1,4 +1,8 @@
-import type { ModelsResponse, TimeSeriesResponse } from '$lib/types/Model/Model';
+import type {
+	JoinTimeSeriesResponse,
+	ModelsResponse,
+	TimeSeriesResponse
+} from '$lib/types/Model/Model';
 import { error } from '@sveltejs/kit';
 import { browser } from '$app/environment';
 
@@ -52,3 +56,24 @@ export async function search(term: string, limit: number = 20): Promise<ModelsRe
 	});
 	return get(`search?${params.toString()}`);
 }
+
+export async function getJoinTimeseries(
+	joinId: string,
+	startTs: number,
+	endTs: number,
+	metricType: string = 'drift',
+	metrics: string = 'null',
+	offset: string = '10h',
+	algorithm: string = 'psi'
+): Promise<JoinTimeSeriesResponse> {
+	const params = new URLSearchParams({
+		startTs: startTs.toString(),
+		endTs: endTs.toString(),
+		metricType,
+		metrics,
+		offset,
+		algorithm
+	});
+
+	return get(`join/${joinId}/timeseries?${params.toString()}`);
+}

frontend/src/lib/components/CollapsibleSection/CollapsibleSection.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+	import {
+		Collapsible,
+		CollapsibleContent,
+		CollapsibleTrigger
+	} from '$lib/components/ui/collapsible';
+	import type { Snippet } from 'svelte';
+	import { ChevronDown } from 'svelte-radix';
+
+	let {
+		children,
+		title,
+		open = $bindable(true)
+	}: { children: Snippet; title: string; open: boolean } = $props();
+</script>
+
+<Collapsible bind:open class="mt-4">
+	<CollapsibleTrigger class="flex items-center w-full">
+		<ChevronDown
+			class="w-5 h-5 mr-2 transition-transform duration-200 {open ? '' : 'rotate-180'}"
+		/>
+		<h2 class="text-xl">{title}</h2>
+	</CollapsibleTrigger>
+	<CollapsibleContent>
+		{@render children()}
+	</CollapsibleContent>
+</Collapsible>

frontend/src/lib/components/EChart/EChart.svelte

@@ -3,20 +3,46 @@
 	import * as echarts from 'echarts';
 	import type { ECElementEvent, EChartOption } from 'echarts';
 
-	const { option }: { option: EChartOption } = $props();
+	let {
+		option,
+		chartInstance = $bindable(),
+		enableMousemove = false
+	}: {
+		option: EChartOption;
+		chartInstance: echarts.ECharts | null;
+		enableMousemove?: boolean;
+	} = $props();
 	const dispatch = createEventDispatcher();
 
 	let chartDiv: HTMLDivElement;
-	let chartInstance: echarts.ECharts;
 	let resizeObserver: ResizeObserver;
 
+	// todo this needs to change dynamically when we support light mode
+	const theme = $derived('dark');
+	const defaultOption: EChartOption = {
+		backgroundColor: 'transparent'
+	};
+
+	const mergedOption: EChartOption = $derived.by(() => {
+		return { ...defaultOption, ...option };
+	});
+
 	function initChart() {
 		if (!chartDiv) return;
 
 		chartInstance?.dispose();
-		chartInstance = echarts.init(chartDiv);
-		chartInstance.setOption(option);
+		chartInstance = echarts.init(chartDiv, theme);
+		chartInstance.setOption(mergedOption);
 		chartInstance.on('click', (params: ECElementEvent) => dispatch('click', params));
+		chartInstance.on('datazoom', (params: EChartOption.DataZoom) => dispatch('datazoom', params));
+
+		if (enableMousemove) {
+			chartInstance.on('mousemove', (params: ECElementEvent) => {
+				if (params.componentType === 'series') {
+					chartInstance?.getZr().setCursorStyle('pointer');
+				}
+			});
+		}
 	}
 
 	function handleResize() {
@@ -35,7 +61,7 @@
 	});
 
 	$effect(() => {
-		chartInstance?.setOption(option, true);
+		chartInstance?.setOption(mergedOption, true);
 	});
 </script>
 

frontend/src/lib/components/NavigationBar/NavigationBar.svelte

@@ -15,6 +15,13 @@
 	import type { Model } from '$lib/types/Model/Model';
 	import debounce from 'lodash/debounce';
 	import { onDestroy } from 'svelte';
+	import {
+		DropdownMenu,
+		DropdownMenuTrigger,
+		DropdownMenuContent,
+		DropdownMenuItem
+	} from '$lib/components/ui/dropdown-menu/';
+	import { ChevronDown } from 'svelte-radix';
 
 	type Props = {
 		navItems: { label: string; href: string }[];
@@ -73,13 +80,24 @@
 		{/each}
 	</ul>
 	<div class="flex items-center mt-auto">
-		<span class="mr-2">{user.name}</span>
-		<Avatar>
-			<AvatarImage src={user.avatar} alt={user.name} />
-			<AvatarFallback>
-				<Person />
-			</AvatarFallback>
-		</Avatar>
+		<DropdownMenu>
+			<DropdownMenuTrigger>
+				<Button variant="outline" class="flex items-center cursor-pointer">
+					<Avatar class="h-4 w-4">
+						<AvatarImage src={user.avatar} alt={user.name} />
+						<AvatarFallback>
+							<Person />
+						</AvatarFallback>
+					</Avatar>
+					<span class="ml-3">{user.name}</span>
+					<ChevronDown class="w-4 h-4 ml-3" />
+				</Button>
+			</DropdownMenuTrigger>
+			<DropdownMenuContent>
+				<DropdownMenuItem onclick={() => alert('Settings clicked')}>Settings</DropdownMenuItem>
+				<DropdownMenuItem onclick={() => alert('Sign out clicked')}>Sign out</DropdownMenuItem>
+			</DropdownMenuContent>
+		</DropdownMenu>
 	</div>
 </nav>
 

frontend/src/lib/components/ui/collapsible/collapsible-content.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">
+	import { Collapsible as CollapsiblePrimitive } from 'bits-ui';
+	import { slide } from 'svelte/transition';
+	type $$Props = CollapsiblePrimitive.ContentProps;
+
+	export let transition: $$Props['transition'] = slide;
+	export let transitionConfig: $$Props['transitionConfig'] = {
+		duration: 150
+	};
+</script>
+
+<CollapsiblePrimitive.Content {transition} {transitionConfig} {...$$restProps}>
+	<slot />
+</CollapsiblePrimitive.Content>

frontend/src/lib/components/ui/collapsible/index.ts

@@ -0,0 +1,15 @@
+import { Collapsible as CollapsiblePrimitive } from 'bits-ui';
+import Content from './collapsible-content.svelte';
+
+const Root = CollapsiblePrimitive.Root;
+const Trigger = CollapsiblePrimitive.Trigger;
+
+export {
+	Root,
+	Content,
+	Trigger,
+	//
+	Root as Collapsible,
+	Content as CollapsibleContent,
+	Trigger as CollapsibleTrigger
+};

frontend/src/lib/components/ui/dropdown-menu/dropdown-menu-checkbox-item.svelte

@@ -0,0 +1,35 @@
+<script lang="ts">
+	import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
+	import Check from "svelte-radix/Check.svelte";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = DropdownMenuPrimitive.CheckboxItemProps;
+	type $$Events = DropdownMenuPrimitive.CheckboxItemEvents;
+
+	let className: $$Props["class"] = undefined;
+	export let checked: $$Props["checked"] = undefined;
+	export { className as class };
+</script>
+
+<DropdownMenuPrimitive.CheckboxItem
+	bind:checked
+	class={cn(
+		"data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+		className
+	)}
+	{...$$restProps}
+	on:click
+	on:keydown
+	on:focusin
+	on:focusout
+	on:pointerdown
+	on:pointerleave
+	on:pointermove
+>
+	<span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+		<DropdownMenuPrimitive.CheckboxIndicator>
+			<Check class="h-4 w-4" />
+		</DropdownMenuPrimitive.CheckboxIndicator>
+	</span>
+	<slot />
+</DropdownMenuPrimitive.CheckboxItem>

frontend/src/lib/components/ui/dropdown-menu/dropdown-menu-content.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+	import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
+	import { cn, flyAndScale } from "$lib/utils.js";
+
+	type $$Props = DropdownMenuPrimitive.ContentProps;
+
+	let className: $$Props["class"] = undefined;
+	export let sideOffset: $$Props["sideOffset"] = 4;
+	export let transition: $$Props["transition"] = flyAndScale;
+	export let transitionConfig: $$Props["transitionConfig"] = undefined;
+	export { className as class };
+</script>
+
+<DropdownMenuPrimitive.Content
+	{transition}
+	{transitionConfig}
+	{sideOffset}
+	class={cn(
+		"bg-popover text-popover-foreground z-50 min-w-[8rem] rounded-md border p-1 shadow-md focus:outline-none",
+		className
+	)}
+	{...$$restProps}
+	on:keydown
+>
+	<slot />
+</DropdownMenuPrimitive.Content>

frontend/src/lib/components/ui/dropdown-menu/dropdown-menu-item.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+	import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = DropdownMenuPrimitive.ItemProps & {
+		inset?: boolean;
+	};
+	type $$Events = DropdownMenuPrimitive.ItemEvents;
+
+	let className: $$Props["class"] = undefined;
+	export let inset: $$Props["inset"] = undefined;
+	export { className as class };
+</script>
+
+<DropdownMenuPrimitive.Item
+	class={cn(
+		"data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+		inset && "pl-8",
+		className
+	)}
+	on:click
+	on:keydown
+	on:focusin
+	on:focusout
+	on:pointerdown
+	on:pointerleave
+	on:pointermove
+	{...$$restProps}
+>
+	<slot />
+</DropdownMenuPrimitive.Item>

frontend/src/lib/components/ui/dropdown-menu/dropdown-menu-label.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+	import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = DropdownMenuPrimitive.LabelProps & {
+		inset?: boolean;
+	};
+
+	let className: $$Props["class"] = undefined;
+	export let inset: $$Props["inset"] = undefined;
+	export { className as class };
+</script>
+
+<DropdownMenuPrimitive.Label
+	class={cn("px-2 py-1.5 text-sm font-semibold", inset && "pl-8", className)}
+	{...$$restProps}
+>
+	<slot />
+</DropdownMenuPrimitive.Label>

frontend/src/lib/components/ui/dropdown-menu/dropdown-menu-radio-group.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+	import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
+
+	type $$Props = DropdownMenuPrimitive.RadioGroupProps;
+
+	export let value: $$Props["value"] = undefined;
+</script>
+
+<DropdownMenuPrimitive.RadioGroup {...$$restProps} bind:value>
+	<slot />
+</DropdownMenuPrimitive.RadioGroup>

frontend/src/lib/components/ui/dropdown-menu/dropdown-menu-radio-item.svelte

@@ -0,0 +1,35 @@
+<script lang="ts">
+	import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
+	import DotFilled from "svelte-radix/DotFilled.svelte";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = DropdownMenuPrimitive.RadioItemProps;
+	type $$Events = DropdownMenuPrimitive.RadioItemEvents;
+
+	let className: $$Props["class"] = undefined;
+	export let value: DropdownMenuPrimitive.RadioItemProps["value"];
+	export { className as class };
+</script>
+
+<DropdownMenuPrimitive.RadioItem
+	class={cn(
+		"data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+		className
+	)}
+	{value}
+	{...$$restProps}
+	on:click
+	on:keydown
+	on:focusin
+	on:focusout
+	on:pointerdown
+	on:pointerleave
+	on:pointermove
+>
+	<span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+		<DropdownMenuPrimitive.RadioIndicator>
+			<DotFilled class="h-4 w-4 fill-current" />
+		</DropdownMenuPrimitive.RadioIndicator>
+	</span>
+	<slot />
+</DropdownMenuPrimitive.RadioItem>

frontend/src/lib/components/ui/dropdown-menu/dropdown-menu-separator.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">
+	import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = DropdownMenuPrimitive.SeparatorProps;
+
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+</script>
+
+<DropdownMenuPrimitive.Separator
+	class={cn("bg-muted -mx-1 my-1 h-px", className)}
+	{...$$restProps}
+/>

frontend/src/lib/components/ui/dropdown-menu/dropdown-menu-shortcut.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = HTMLAttributes<HTMLSpanElement>;
+
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+</script>
+
+<span class={cn("ml-auto text-xs tracking-widest opacity-60", className)} {...$$restProps}>
+	<slot />
+</span>