zipline-ai · ken-zlai · Nov 22, 2024 · Oct 21, 2024 · Oct 21, 2024 · Oct 21, 2024
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -26,11 +26,13 @@
 		"@sveltejs/kit": "^2.6.2",
 		"@sveltejs/vite-plugin-svelte": "^4.0.0-next.6",
 		"@tailwindcss/typography": "^0.5.15",
+		"@types/d3": "^7.4.3",
 		"@types/eslint": "^9.6.0",
 		"@types/lodash": "^4.17.10",
 		"@types/node": "^22.7.4",
 		"autoprefixer": "^10.4.20",
 		"bits-ui": "^0.21.16",
+		"cmdk-sv": "^0.0.18",
 		"eslint": "^9.0.0",
 		"eslint-config-prettier": "^9.1.0",
 		"eslint-plugin-svelte": "^2.36.0",
@@ -52,8 +54,9 @@
 	"type": "module",
 	"dependencies": {
 		"@types/echarts": "^4.9.22",
+		"@zipline-ai/icons": "^1.0.2",
 		"clsx": "^2.1.1",
-		"cmdk-sv": "^0.0.18",
+		"d3": "^7.9.0",
 		"dotenv": "^16.4.5",
 		"echarts": "^5.5.1",
 		"lodash": "^4.17.21",

diff --git a/frontend/src/app.css b/frontend/src/app.css
@@ -37,23 +37,58 @@
 	}
 
 	.dark {
-		--background: 0 0% 3.9%;
-		--foreground: 0 0% 98%;
+		--background: var(--neutral-50);
+		--foreground: 0 0% 100%;
 
 		--muted: 0 0% 14.9%;
-		--muted-foreground: 0 0% 63.9%;
+		--muted-foreground: var(--neutral-800);
+		--muted-icon-neutral: var(--neutral-700);
+		--muted-icon-primary: var(--primary-700);
 
 		--popover: 0 0% 3.9%;
 		--popover-foreground: 0 0% 98%;
 
 		--card: 0 0% 3.9%;
 		--card-foreground: 0 0% 98%;
 
-		--border: 0 0% 14.9%;
+		--border: var(--neutral-300);
 		--input: 0 0% 14.9%;
 
-		--primary: 0 0% 98%;
-		--primary-foreground: 0 0% 9%;
+		--neutral-50: 0 0% 5%;
+		--neutral-100: 0 0% 8%;
+		--neutral-200: 0 0% 10%;
+		--neutral-300: 0 0% 13%;
+		--neutral-400: 0 0% 16%;
+		--neutral-500: 0 0% 24%;
+		--neutral-600: 0 0% 32%;
+		--neutral-700: 0 0% 40%;
+		--neutral-800: 0 0% 64%;
+		--neutral-900: 0 0% 80%;
+		--neutral-950: 0 0% 98%;
+
+		--primary-50: 351 24% 6%;
+		--primary-100: 354 20% 10%;
+		--primary-200: 349 48% 15%;
+		--primary-300: 345 62% 19%;
+		--primary-400: 345 58% 23%;
+		--primary-500: 346 50% 29%;
+		--primary-600: 347 45% 37%;
+		--primary-700: 347 45% 48%;
+		--primary-800: 345 100% 65%;
+		--primary-900: 348 100% 78%;
+		--primary-950: 352 100% 91%;
+
+		--warning-50: 41 66% 10%;
+		--warning-100: 40 29% 8%;
+		--warning-200: 41 66% 10%;
+		--warning-300: 41 100% 12%;
+		--warning-400: 42 100% 14%;
+		--warning-500: 43 81% 19%;
+		--warning-600: 42 58% 26%;
+		--warning-700: 42 56% 34%;
+		--warning-800: 44 100% 55%;
+		--warning-900: 45 100% 60%;
+		--warning-950: 40 100% 86%;
 
 		--secondary: 0 0% 14.9%;
 		--secondary-foreground: 0 0% 98%;
@@ -70,7 +105,7 @@
 
 @layer base {
 	* {
-		@apply border-border;
+		@apply border-border antialiased;
 	}
 	body {
 		@apply bg-background text-foreground;
@@ -79,15 +114,15 @@
 
 @font-face {
 	font-family: 'Geist';
-	src: url('/fonts/Geist[wght].woff2') format('woff2-variations');
+	src: url('/fonts/Geist-v1.4.01/webfonts/Geist[wght].woff2') format('woff2-variations');
 	font-weight: 100 900;
 	font-style: normal;
 	font-display: swap;
 }
 
 @font-face {
 	font-family: 'Geist Mono';
-	src: url('/fonts/GeistMono[wght].woff2') format('woff2-variations');
+	src: url('/fonts/GeistMono-1.4.01/webfonts/GeistMono[wght].woff2') format('woff2-variations');
 	font-weight: 100 900;
 	font-style: normal;
 	font-display: swap;

diff --git a/frontend/src/app.html b/frontend/src/app.html
@@ -2,7 +2,7 @@
 <html lang="en" class="dark">
 	<head>
 		<meta charset="utf-8" />
-		<link rel="icon" href="%sveltekit.assets%/favicon.png" />
+		<link rel="icon" href="%sveltekit.assets%/logo.png" />
 		<meta name="viewport" content="width=device-width, initial-scale=1" />
 		%sveltekit.head%
 	</head>

diff --git a/frontend/src/lib/components/ActionButtons/ActionButtons.svelte b/frontend/src/lib/components/ActionButtons/ActionButtons.svelte
@@ -0,0 +1,46 @@
+<script lang="ts">
+	import { Button } from '$lib/components/ui/button';
+	import { cn } from '$lib/utils';
+	import { Icon, Plus, ArrowsUpDown, Square3Stack3d, XMark } from 'svelte-hero-icons';
+
+	let { showCluster = false, class: className }: { showCluster?: boolean; class?: string } =
+		$props();
+
+	let activeCluster = showCluster ? 'GroupBys' : null;
+</script>
+
+<div class={cn('flex flex-wrap gap-3', className)}>
+	<!-- Active Items Section -->
+	{#if activeCluster}
+		<div class="flex flex-wrap gap-[1px]">
+			<Button variant="secondaryAlt" size="sm" icon="leading" disabled>
+				<Icon src={Square3Stack3d} micro size="16" />
+				Cluster by
+			</Button>
+			<Button variant="secondaryAlt" size="sm" disabled>
+				{activeCluster}
+			</Button>
+			<Button variant="secondaryAlt" size="sm" class="p-2" disabled>
+				<Icon src={XMark} micro size="16" />
+			</Button>
+		</div>
+	{/if}
+
+	<!-- Action Buttons Section -->
+	<div class="flex gap-3">
+		<Button variant="secondary" size="sm" icon="leading">
+			<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">
+				<Icon src={Square3Stack3d} micro size="16" />
+				Cluster
+			</Button>
+		{/if}
+	</div>
+</div>
diff --git a/frontend/src/lib/components/BreadcrumbNav/BreadcrumbNav.svelte b/frontend/src/lib/components/BreadcrumbNav/BreadcrumbNav.svelte
@@ -16,7 +16,7 @@
 <Breadcrumb class={cn('', className)}>
 	<BreadcrumbList>
 		<BreadcrumbItem>
-			<BreadcrumbLink href="/">Home</BreadcrumbLink>
+			<BreadcrumbLink href="/">Zipline AI</BreadcrumbLink>
 		</BreadcrumbItem>
 		{#each breadcrumbs as crumb, index}
 			<BreadcrumbSeparator>

diff --git a/frontend/src/lib/components/CollapsibleSection/CollapsibleSection.svelte b/frontend/src/lib/components/CollapsibleSection/CollapsibleSection.svelte
@@ -6,46 +6,60 @@
 	} from '$lib/components/ui/collapsible';
 	import type { Snippet } from 'svelte';
 	import { Icon, ChevronDown } from 'svelte-hero-icons';
-	import { stopPropogation } from '$lib/util/event';
 	let {
-		collabsibleContent,
+		collapsibleContent,
 		headerContentLeft,
 		headerContentRight,
 		title,
-		open = $bindable(true)
+		open = $bindable(true),
+		size = 'default'
 	}: {
-		collabsibleContent: Snippet;
+		collapsibleContent: Snippet;
 		headerContentLeft?: Snippet;
 		headerContentRight?: Snippet;
 		title: string;
 		open: boolean;
+		size?: 'small' | 'default' | 'large';
 	} = $props();
+
+	const sizeClasses = {
+		small: {
+			wrapper: 'mt-6 mb-8',
+			title: 'text-regular'
+		},
+		default: {
+			wrapper: 'my-8',
+			title: 'text-large-medium'
+		},
+		large: {
+			wrapper: 'my-12',
+			title: 'text-xl'
+		}
+	}[size];
 </script>
 
-<Collapsible bind:open class="mt-9 mb-6">
-	<div class="flex items-center justify-between mb-4">
-		<CollapsibleTrigger class="flex items-center space-x-4 w-full">
+<Collapsible bind:open class={sizeClasses.wrapper}>
+	<div class="flex mb-3">
+		<CollapsibleTrigger class="flex items-center space-x-4">
 			<Icon
 				src={ChevronDown}
 				micro
 				size="16"
 				class="transition-transform duration-200 {open ? '' : 'rotate-180'}"
 			/>
-			<h2 class="text-lg">{title}</h2>
+			<h2 class="{sizeClasses.title} !ml-2">{title}</h2>
+		</CollapsibleTrigger>
+		<div class="flex items-center justify-between flex-1 ml-2">
 			{#if headerContentLeft}
-				<!-- svelte-ignore event_directive_deprecated -->
-				<div on:click={stopPropogation} role="presentation">
-					{@render headerContentLeft()}
-				</div>
+				{@render headerContentLeft()}
 			{/if}
-		</CollapsibleTrigger>
-		{#if headerContentRight}
-			<div>
+			<div></div>
+			{#if headerContentRight}
 				{@render headerContentRight()}
-			</div>
-		{/if}
+			{/if}
+		</div>
 	</div>
 	<CollapsibleContent>
-		{@render collabsibleContent()}
+		{@render collapsibleContent()}
 	</CollapsibleContent>
 </Collapsible>
diff --git a/frontend/src/lib/components/ComingSoonPage/ComingSoonPage.svelte b/frontend/src/lib/components/ComingSoonPage/ComingSoonPage.svelte
@@ -1,4 +1,4 @@
 <div class="text-center pt-16 px-4">
-	<h1 class="text-5xl font-bold mb-4">Coming Soon</h1>
+	<h1 class="text-3xl font-bold mb-4">Coming Soon</h1>
 	<p class="text-xl">We're working on something exciting. Stay tuned!</p>
 </div>
diff --git a/frontend/src/lib/components/CustomEChartLegend/CustomEChartLegend.svelte b/frontend/src/lib/components/CustomEChartLegend/CustomEChartLegend.svelte
@@ -0,0 +1,121 @@
+<script lang="ts">
+	import { Button } from '$lib/components/ui/button';
+	import type { EChartsType } from 'echarts';
+	import { Icon, ChevronDown, ChevronUp } from 'svelte-hero-icons';
+
+	type LegendItem = { feature: string };
+	type Props = {
+		groupName: string;
+		items: Array<LegendItem>;
+		chart: EChartsType;
+	};
+
+	let { groupName, items, chart }: Props = $props();
+
+	let hiddenSeries: { [key: string]: Set<string> } = $state({});
+	let isExpanded = $state(false);
+	let itemsContainer: HTMLDivElement;
+	let containerHeight = $state(0);
+	let hasOverflow = $state(false);
+	let containerHeightLine = 24;
+
+	function toggleSeries(seriesName: string) {
+		const groupSet = hiddenSeries[groupName] || new Set();
+
+		if (groupSet.has(seriesName)) {
+			groupSet.delete(seriesName);
+		} else {
+			groupSet.add(seriesName);
+		}
+
+		hiddenSeries = {
+			...hiddenSeries,
+			[groupName]: groupSet
+		};
+
+		chart.setOption({ legend: { show: false } });
+		chart.dispatchAction({
+			type: 'legendToggleSelect',
+			name: seriesName
+		});
+	}
+
+	function getSeriesColor(index: number, colors: string[]): string {
+		return colors[index % colors.length] || '#000000';
+	}
+
+	function checkOverflow() {
+		if (!itemsContainer) return;
+		const hasVerticalOverflow = itemsContainer.scrollHeight > itemsContainer.clientHeight;
+		const hasHorizontalOverflow = itemsContainer.scrollWidth > itemsContainer.clientWidth;
+		hasOverflow = hasVerticalOverflow || hasHorizontalOverflow;
+	}
+
+	$effect(() => {
+		if (!itemsContainer) return;
+
+		const resizeObserver = new ResizeObserver(() => {
+			checkOverflow();
+			containerHeight = itemsContainer.scrollHeight;
+		});
+
+		resizeObserver.observe(itemsContainer);
+		checkOverflow();
+		containerHeight = itemsContainer.scrollHeight;
+
+		return () => resizeObserver.disconnect();
+	});
+</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' : ''}`}
+			style="height: {isExpanded ? containerHeight + 'px' : containerHeightLine + 'px'};"
+		>
+			{#each items as { feature }, index}
+				{@const colors = chart?.getOption()?.color || []}
+				{@const color = getSeriesColor(index, colors)}
+				{@const isHidden = hiddenSeries[groupName]?.has(feature)}
+
+				<Button
+					class="legend-btn gap-x-2 max-w-[148px]"
+					variant="ghost"
+					on:click={() => toggleSeries(feature)}
+					title={feature}
+				>
+					<div
+						class="w-2 h-2 rounded-full flex-shrink-0"
+						style="background-color: {isHidden ? 'hsl(var(--neutral-700))' : color}"
+					></div>
+					<div
+						class="{isHidden
+							? 'text-neutral-700'
+							: ''} overflow-hidden text-ellipsis whitespace-nowrap"
+					>
+						<span>{feature}</span>
+					</div>
+				</Button>
+			{/each}
+		</div>
+
+		{#if hasOverflow || isExpanded || containerHeight > containerHeightLine}
+			<Button variant="ghost" class="legend-btn" on:click={() => (isExpanded = !isExpanded)}>
+				<div class="transition-opacity duration-150" class:opacity-0={isExpanded}>
+					view all ({items.length})
+				</div>
+				<div class="transition-opacity duration-150 absolute" class:opacity-0={!isExpanded}>
+					collapse
+				</div>
+				<Icon src={isExpanded ? ChevronUp : ChevronDown} micro size="16" class="ml-2" />
+			</Button>
+		{/if}
+	</div>
+</div>
+
+<style lang="postcss">
+	:global(.legend-btn) {
+		@apply flex items-center hover:bg-transparent font-normal h-6 p-0 text-sm !important;
+	}
+</style>