Frontend milestone

frontend/src/lib/api/api.ts

@@ -1,8 +1,8 @@
 import type {
 	FeatureResponse,
+	JoinsResponse,
 	JoinTimeSeriesResponse,
-	ModelsResponse,
-	TimeSeriesResponse
+	ModelsResponse
 } from '$lib/types/Model/Model';
 import { error } from '@sveltejs/kit';
 import { browser } from '$app/environment';
@@ -34,20 +34,12 @@ export async function getModels(): Promise<ModelsResponse> {
 	return get('models');
 }
 
-export async function getModelTimeseries(
-	name: string,
-	startTs: number,
-	endTs: number,
-	offset: string = '10h',
-	algorithm: string = 'psi'
-): Promise<TimeSeriesResponse> {
+export async function getJoins(offset: number = 0, limit: number = 10): Promise<JoinsResponse> {
 	const params = new URLSearchParams({
-		startTs: startTs.toString(),
-		endTs: endTs.toString(),
-		offset,
-		algorithm
+		offset: offset.toString(),
+		limit: limit.toString()
 	});
-	return get(`model/${name}/timeseries?${params.toString()}`);
+	return get(`joins?${params.toString()}`);
 }
 
 export async function search(term: string, limit: number = 20): Promise<ModelsResponse> {
@@ -58,15 +50,23 @@ 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> {
+export async function getJoinTimeseries({
+	joinId,
+	startTs,
+	endTs,
+	metricType = 'drift',
+	metrics = 'null',
+	offset = '10h',
+	algorithm = 'psi'
+}: {
+	joinId: string;
+	startTs: number;
+	endTs: number;
+	metricType?: string;
+	metrics?: string;
+	offset?: string;
+	algorithm?: string;
+}): Promise<JoinTimeSeriesResponse> {
 	const params = new URLSearchParams({
 		startTs: startTs.toString(),
 		endTs: endTs.toString(),
@@ -79,16 +79,27 @@ export async function getJoinTimeseries(
 	return get(`join/${joinId}/timeseries?${params.toString()}`);
 }
 
-export async function getFeatureTimeseries(
-	featureName: string,
-	startTs: number,
-	endTs: number,
-	metricType: string = 'drift',
-	metrics: string = 'null',
-	offset: string = '10h',
-	algorithm: string = 'psi',
-	granularity: string = 'percentile'
-): Promise<FeatureResponse> {
+export async function getFeatureTimeseries({
+	joinId,
+	featureName,
+	startTs,
+	endTs,
+	metricType = 'drift',
+	metrics = 'null',
+	offset = '10h',
+	algorithm = 'psi',
+	granularity = 'aggregates'
+}: {
+	joinId: string;
+	featureName: string;
+	startTs: number;
+	endTs: number;
+	metricType?: string;
+	metrics?: string;
+	offset?: string;
+	algorithm?: string;
+	granularity?: string;
+}): Promise<FeatureResponse> {
 	const params = new URLSearchParams({
 		startTs: startTs.toString(),
 		endTs: endTs.toString(),
@@ -98,5 +109,5 @@ export async function getFeatureTimeseries(
 		algorithm,
 		granularity
 	});
-	return get(`feature/${featureName}/timeseries?${params.toString()}`);
+	return get(`join/${joinId}/feature/${featureName}/timeseries?${params.toString()}`);
 }

frontend/src/lib/components/ActionButtons/ActionButtons.svelte

@@ -2,11 +2,38 @@
 	import { Button } from '$lib/components/ui/button';
 	import { cn } from '$lib/utils';
 	import { Icon, Plus, ArrowsUpDown, Square3Stack3d, XMark } from 'svelte-hero-icons';
+	import { goto } from '$app/navigation';
+	import { page } from '$app/stores';
+	import {
+		getSortDirection,
+		updateContextSort,
+		type SortDirection,
+		type SortContext
+	} from '$lib/util/sort';
 
-	let { showCluster = false, class: className }: { showCluster?: boolean; class?: string } =
-		$props();
+	let {
+		showCluster = false,
+		class: className,
+		showSort = false,
+		context = 'drift'
+	}: {
+		showCluster?: boolean;
+		class?: string;
+		showSort?: boolean;
+		context?: SortContext;
+	} = $props();
 
 	let activeCluster = showCluster ? 'GroupBys' : null;
+
+	let currentSort: SortDirection = $derived.by(() =>
+		getSortDirection($page.url.searchParams, context)
+	);
+
+	function handleSort() {
+		const newSort: SortDirection = currentSort === 'asc' ? 'desc' : 'asc';
+		const url = updateContextSort($page.url, context, newSort);
+		goto(url, { replaceState: true });
+	}
 </script>
 
 <div class={cn('flex flex-wrap gap-3', className)}>
@@ -28,16 +55,18 @@
 
 	<!-- Action Buttons Section -->
 	<div class="flex gap-3">
-		<Button variant="secondary" size="sm" icon="leading">
+		{#if showSort}
+			<Button variant="secondary" size="sm" icon="leading" on:click={handleSort}>
+				<Icon src={ArrowsUpDown} micro size="16" />
+				Sort {currentSort === 'asc' ? 'A-Z' : 'Z-A'}
+			</Button>
+		{/if}
+		<Button variant="secondary" size="sm" icon="leading" disabled>
 			<Icon src={Plus} micro size="16" />
 			Filter
 		</Button>
-		<Button variant="secondary" size="sm" icon="leading">
-			<Icon src={ArrowsUpDown} micro size="16" />
-			Sort
-		</Button>
 		{#if showCluster}
-			<Button variant="secondary" size="sm" icon="leading">
+			<Button variant="secondary" size="sm" icon="leading" disabled>
 				<Icon src={Square3Stack3d} micro size="16" />
 				Cluster
 			</Button>

frontend/src/lib/components/ChartControls/ChartControls.svelte

@@ -0,0 +1,58 @@
+<script lang="ts">
+	import ResetZoomButton from '$lib/components/ResetZoomButton/ResetZoomButton.svelte';
+	import MetricTypeToggle from '$lib/components/MetricTypeToggle/MetricTypeToggle.svelte';
+	import DateRangeSelector from '$lib/components/DateRangeSelector/DateRangeSelector.svelte';
+	import ActionButtons from '$lib/components/ActionButtons/ActionButtons.svelte';
+	import * as Alert from '$lib/components/ui/alert/index.js';
+	import { formatDate } from '$lib/util/format';
+	import type { SortContext } from '$lib/util/sort';
+
+	let {
+		isZoomed = false,
+		onResetZoom,
+		isUsingFallbackDates = false,
+		dateRange = { startTimestamp: 0, endTimestamp: 0 },
+		showActionButtons = false,
+		showCluster = false,
+		showSort = false,
+		context
+	}: {
+		isZoomed: boolean;
+		onResetZoom: () => void;
+		isUsingFallbackDates?: boolean;
+		dateRange?: { startTimestamp: number; endTimestamp: number };
+		showActionButtons?: boolean;
+		showCluster?: boolean;
+		showSort?: boolean;
+		context?: SortContext;
+	} = $props();
+</script>
+
+<div class="space-y-4">
+	{#if isUsingFallbackDates}
+		<div class="w-fit">
+			<Alert.Root variant="warning">
+				<Alert.Description>
+					No data for that date range. Showing data between {formatDate(dateRange.startTimestamp)} and
+					{formatDate(dateRange.endTimestamp)}</Alert.Description
+				>
+			</Alert.Root>
+		</div>
+	{/if}
+
+	<div class="flex items-center space-x-6">
+		{#if isZoomed}
+			<ResetZoomButton onClick={onResetZoom} />
+		{/if}
+		<DateRangeSelector />
+		{#if context === 'drift'}
+			<MetricTypeToggle />
+		{/if}
+	</div>
+
+	{#if showActionButtons}
+		<div>
+			<ActionButtons {showCluster} {showSort} {context} />
+		</div>
+	{/if}
+</div>

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

@@ -47,7 +47,7 @@
 				size="16"
 				class="transition-transform duration-200 {open ? '' : 'rotate-180'}"
 			/>
-			<h2 class="{sizeClasses.title} !ml-2">{title}</h2>
+			<h2 class="{sizeClasses.title} !ml-2 select-text">{title}</h2>
 		</CollapsibleTrigger>
 		<div class="flex items-center justify-between flex-1 ml-2">
 			{#if headerContentLeft}

frontend/src/lib/components/CustomEChartLegend/CustomEChartLegend.svelte

@@ -2,6 +2,7 @@
 	import { Button } from '$lib/components/ui/button';
 	import type { EChartsType } from 'echarts';
 	import { Icon, ChevronDown, ChevronUp } from 'svelte-hero-icons';
+	import { getSeriesColor, handleChartHighlight } from '$lib/util/chart';
 
 	type LegendItem = { feature: string };
 	type Props = {
@@ -26,6 +27,10 @@
 			groupSet.delete(seriesName);
 		} else {
 			groupSet.add(seriesName);
+			chart.dispatchAction({
+				type: 'downplay',
+				seriesName
+			});
 		}
 
 		hiddenSeries = {
@@ -40,10 +45,6 @@
 		});
 	}
 
-	function getSeriesColor(index: number, colors: string[]): string {
-		return colors[index % colors.length] || '#000000';
-	}
-
 	function checkOverflow() {
 		if (!itemsContainer) return;
 		const hasVerticalOverflow = itemsContainer.scrollHeight > itemsContainer.clientHeight;
@@ -65,25 +66,34 @@
 
 		return () => resizeObserver.disconnect();
 	});
+
+	function handleMouseEnter(seriesName: string) {
+		handleChartHighlight(chart, seriesName, 'highlight');
+	}
+
+	function handleMouseLeave(seriesName: string) {
+		handleChartHighlight(chart, seriesName, 'downplay');
+	}
 </script>
 
 <div class="relative mt-5">
 	<div class="flex">
 		<div
 			bind:this={itemsContainer}
-			class={`flex flex-wrap gap-x-8 gap-y-2 flex-1 transition-all duration-150 ease-in-out ${!isExpanded ? 'overflow-hidden' : ''}`}
+			class={`flex flex-wrap gap-x-4 gap-y-2 flex-1 transition-all duration-150 ease-in-out ${!isExpanded ? 'overflow-hidden' : ''}`}
 			style="height: {isExpanded ? containerHeight + 'px' : containerHeightLine + 'px'};"
 		>
-			{#each items as { feature }, index}
-				{@const colors = chart?.getOption()?.color || []}
-				{@const color = getSeriesColor(index, colors)}
+			{#each items as { feature } (feature)}
 				{@const isHidden = hiddenSeries[groupName]?.has(feature)}
+				{@const color = getSeriesColor(chart, feature)}
 
 				<Button
-					class="legend-btn gap-x-2 max-w-[148px]"
+					class="legend-btn gap-x-2"
 					variant="ghost"
 					on:click={() => toggleSeries(feature)}
 					title={feature}
+					on:mouseenter={() => handleMouseEnter(feature)}
+					on:mouseleave={() => handleMouseLeave(feature)}
 				>
 					<div
 						class="w-2 h-2 rounded-full flex-shrink-0"

frontend/src/lib/components/DateRangeSelector/DateRangeSelector.svelte

@@ -93,7 +93,7 @@
 				<span>{selectDateRange?.label || 'Select range'}</span>
 				<span class="border-input border-l mx-2 h-full"></span>
 				<span>
-					{#if calendarDateRange && calendarDateRange.start}
+					{#if !calendarDateRangePopoverOpen && calendarDateRange && calendarDateRange.start}
 						{#if calendarDateRange.end}
 							{df.format(calendarDateRange.start.toDate(getLocalTimeZone()))} - {df.format(
 								calendarDateRange.end.toDate(getLocalTimeZone())