Observability frontend update

frontend/src/lib/api/api.ts

@@ -1,14 +1,13 @@
 import { error } from '@sveltejs/kit';
-import type { FeatureResponse, JoinTimeSeriesResponse } from '$lib/types/Model/Model';
 import type {
 	Join,
 	GroupBy,
 	Model,
 	StagingQuery,
 	IJoinDriftRequestArgs,
-	IJoinDriftResponseArgs,
 	ITileSummarySeries,
-	IJoinSummaryRequestArgs
+	IJoinSummaryRequestArgs,
+	IJoinDriftResponse
 } from '$lib/types/codegen';
 import { ConfType, DriftMetric } from '$lib/types/codegen';
 import type { ConfListResponse } from '$lib/types/codegen/ConfListResponse';
@@ -68,70 +67,6 @@ export class Api {
 		return this.#send<ConfListResponse>(`search?${params.toString()}`);
 	}
 
-	async 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;
-	}) {
-		const params = new URLSearchParams({
-			startTs: startTs.toString(),
-			endTs: endTs.toString(),
-			metricType,
-			metrics,
-			offset,
-			algorithm
-		});
-
-		return this.#send<JoinTimeSeriesResponse>(`join/${joinId}/timeseries?${params.toString()}`);
-	}
-
-	async 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;
-	}) {
-		const params = new URLSearchParams({
-			startTs: startTs.toString(),
-			endTs: endTs.toString(),
-			metricType,
-			metrics,
-			offset,
-			algorithm,
-			granularity
-		});
-		return this.#send<FeatureResponse>(
-			`join/${joinId}/feature/${featureName}/timeseries?${params.toString()}`
-		);
-	}
-
 	async getConfList(type: ConfType): Promise<ConfListResponse> {
 		const params = new URLSearchParams({
 			confType: ConfType[type]
@@ -168,7 +103,7 @@ export class Api {
 			offset,
 			algorithm: DriftMetric[algorithm]
 		});
-		return this.#send<IJoinDriftResponseArgs>(`join/${name}/drift?${params.toString()}`);
+		return this.#send<IJoinDriftResponse>(`join/${name}/drift?${params.toString()}`);
 	}
 
 	async getColumnDrift({
@@ -185,7 +120,7 @@ export class Api {
 			offset,
 			algorithm: DriftMetric[algorithm]
 		});
-		return this.#send<IJoinDriftResponseArgs>(
+		return this.#send<IJoinDriftResponse>(
 			`join/${name}/column/${columnName}/drift?${params.toString()}`
 		);
 	}

frontend/src/lib/components/ChartControls.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import ResetZoomButton from '$lib/components/ResetZoomButton.svelte';
-	import MetricTypeToggle from '$lib/components/MetricTypeToggle.svelte';
+	import DriftMetricToggle from '$lib/components/DriftMetricToggle.svelte';
 	import DateRangeSelector from '$lib/components/DateRangeSelector.svelte';
 	import ActionButtons from '$lib/components/ActionButtons.svelte';
 	import * as Alert from '$lib/components/ui/alert/index.js';
@@ -46,7 +46,7 @@
 		{/if}
 		<DateRangeSelector />
 		{#if context === 'drift'}
-			<MetricTypeToggle />
+			<DriftMetricToggle />
 		{/if}
 	</div>
 

frontend/src/lib/components/DriftMetricToggle.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+	import { queryParameters } from 'sveltekit-search-params';
+
+	import { Button } from '$lib/components/ui/button';
+	import { DRIFT_METRIC_LABELS, getDriftMetricParamsConfig } from '$lib/util/drift-metric';
+	import { enumValues } from '@layerstack/utils';
+	import { DriftMetric } from '$lib/types/codegen';
+
+	const params = queryParameters(getDriftMetricParamsConfig(), {
+		pushHistory: false,
+		showDefaults: false
+	});
+</script>
+
+<div class="flex space-x-[1px]">
+	{#each enumValues(DriftMetric) as value}
+		<Button
+			variant={params.metric === value ? 'default' : 'secondary'}
+			size="sm"
+			on:click={() => (params.metric = value)}
+			class="first:rounded-r-none last:rounded-l-none [&:not(:first-child):not(:last-child)]:rounded-none"
+		>
+			{DRIFT_METRIC_LABELS[value as DriftMetric]}
+		</Button>
+	{/each}
+</div>

frontend/src/lib/components/charts/FeaturesLineChart.svelte

@@ -1,10 +1,11 @@
 <script lang="ts">
 	import type { ComponentProps } from 'svelte';
 	import { accessor, Circle, findRelatedData, Line, LineChart, Tooltip } from 'layerchart';
-	import { scaleOrdinal } from 'd3';
+	import { scaleOrdinal, zip } from 'd3';
+	import { Int64 } from '@creditkarma/thrift-server-core';
 
 	import { colors, lineChartProps, tooltipProps, type DateValue } from './common';
-	import type { TimeSeriesItem } from '$lib/types/Model/Model';
+	import type { ITileDriftSeries } from '$src/lib/types/codegen';
 	import { formatDate, formatValue } from '$lib/util/format';
 	import { Badge } from '../ui/badge';
 	import { isMacOS } from '$src/lib/util/browser';
@@ -14,7 +15,7 @@
 	type BrushProps = Exclude<LineChartProps['brush'], undefined | boolean>;
 
 	type Props = {
-		data: { feature: string; points: TimeSeriesItem[] }[];
+		data: ITileDriftSeries[];
 		markPoint?: DateValue;
 		onitemclick?: (item: {
 			series: NonNullable<LineChartProps['series']>[number];
@@ -26,23 +27,27 @@
 
 	let { data, markPoint, onitemclick, onbrushend, ...restProps }: Props = $props();
 
-	const features = $derived([...new Set(data.map((d) => d.feature))]);
-	const colorScale = $derived(scaleOrdinal<string>().domain(features).range(colors));
+	const columns = $derived([...new Set(data.map((d) => d.key?.column ?? 'Unknown'))]);
+	const colorScale = $derived(scaleOrdinal<string>().domain(columns).range(colors));
 </script>
 
 <LineChart
 	x="date"
 	y="value"
 	series={data.map((d) => {
+		const timestamps = d.timestamps ?? [];
+		const column = d.key?.column ?? 'Unknown';
+		// `percentileDriftSeries` = numeric column, `histogramDriftSeries` = categorical column
+		const values = d.percentileDriftSeries ?? d.histogramDriftSeries ?? [];
 		return {
-			key: d.feature,
-			data: d.points.map((p) => {
+			key: column,
+			data: zip<Int64 | number>(timestamps, values).map(([ts, value]) => {
 				return {
-					date: new Date(p.ts),
-					value: p.value === NULL_VALUE ? null : p.value
+					date: new Date(ts as number),
+					value: value === NULL_VALUE ? null : value
 				};
 			}),
-			color: colorScale(d.feature)
+			color: colorScale(column)
 		};
 	})}
 	padding={{ left: 24, bottom: 48 }}

frontend/src/lib/components/charts/PercentileLineChart.svelte

@@ -4,13 +4,16 @@
 	import merge from 'lodash/merge';
 
 	import { lineChartProps } from './common';
-	import type { TimeSeriesItem } from '$lib/types/Model/Model';
+	import type { ITileSummarySeries } from '$src/lib/types/codegen';
+	import { zip } from 'd3';
+	import { Int64 } from '@creditkarma/thrift-server-core';
+	import { NULL_VALUE } from '$src/lib/constants/common';
 
 	type LineChartProps = ComponentProps<typeof LineChart>;
 	type BrushProps = Exclude<LineChartProps['brush'], undefined | boolean>;
 
 	type Props = {
-		data: TimeSeriesItem[];
+		data: ITileSummarySeries;
 		onbrushend?: BrushProps['onbrushend'];
 	} & Omit<LineChartProps, 'data'>;
 
@@ -21,21 +24,21 @@
 	x="date"
 	y="value"
 	series={[
-		{ label: 'p95', color: '#4B92FF' },
-		{ label: 'p50', color: '#7DFFB3' },
-		{ label: 'p5', color: '#FDDD61' }
+		{ label: 'p95', color: '#4B92FF', index: 19 },
+		{ label: 'p50', color: '#7DFFB3', index: 10 },
+		{ label: 'p5', color: '#FDDD61', index: 1 }
 	].map((c) => {
+		const timestamps = data.timestamps ?? [];
+		const values = data.percentiles?.[c.index] ?? [];
+
 		return {
 			key: c.label,
-			data:
-				data
-					?.filter((d) => d.label === c.label)
-					.map((d) => {
-						return {
-							date: new Date(d.ts),
-							value: d.value
-						};
-					}) ?? [],
+			data: zip<Int64 | number>(timestamps, values).map(([ts, value]) => {
+				return {
+					date: new Date(ts as number),
+					value: value === NULL_VALUE ? null : value
+				};
+			}),
 			color: c.color
 		};
 	})}