move everything to joins page, update search/default page, etc

Author: ken-zlai

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

@@ -29,13 +29,13 @@
 		AdjustmentsHorizontal,
 		ArrowsUpDown
 	} from 'svelte-hero-icons';
-	import type { IconSource } from 'svelte-hero-icons';
 	import { goto } from '$app/navigation';
 	import { isMacOS } from '$lib/util/browser';
 	import { Badge } from '$lib/components/ui/badge';
+	import { getEntity, type Entity } from '$lib/types/Entity/Entity';
 
 	type Props = {
-		navItems: { label: string; href: string; icon: IconSource }[];
+		navItems: Entity[];
 		user: { name: string; avatar: string };
 	};
 
@@ -129,16 +129,16 @@
 		{#each navItems as item}
 			<li>
 				<Button
-					variant={isActiveRoute(item.href) ? 'default' : 'ghost'}
+					variant={isActiveRoute(item.path) ? 'default' : 'ghost'}
 					size="nav"
-					href={item.href}
+					href={item.path}
 					icon="leading"
 				>
 					<Icon
 						src={item.icon}
 						micro
 						size="16"
-						class={isActiveRoute(item.href) ? 'text-muted-icon-primary' : 'text-muted-icon-neutral'}
+						class={isActiveRoute(item.path) ? 'text-muted-icon-primary' : 'text-muted-icon-neutral'}
 					/>
 					{item.label}
 				</Button>
@@ -200,9 +200,31 @@
 		{:else}
 			<CommandGroup heading={`Search for "${input}"`}>
 				{#each searchResults as model}
-					<CommandItem onSelect={() => handleSelect(`/models/${encodeURIComponent(model.name)}`)}>
+					<CommandItem
+						disabled
+						onSelect={() =>
+							handleSelect(`${getEntity('models').path}/${encodeURIComponent(model.name)}`)}
+					>
+						<Icon src={getEntity('models').icon} micro size="16" />
 						{model.name}
 					</CommandItem>
+					<CommandItem
+						onSelect={() =>
+							handleSelect(`${getEntity('joins').path}/${encodeURIComponent(model.join.name)}`)}
+					>
+						<Icon src={getEntity('joins').icon} micro size="16" />
+						{model.join.name}
+					</CommandItem>
+					{#each model.join.groupBys as groupBy}
+						<CommandItem
+							disabled
+							onSelect={() =>
+								handleSelect(`${getEntity('groupbys').path}/${encodeURIComponent(groupBy.name)}`)}
+						>
+							<Icon src={getEntity('groupbys').icon} micro size="16" />
+							{groupBy.name}
+						</CommandItem>
+					{/each}
 				{/each}
 			</CommandGroup>
 		{/if}

frontend/src/lib/types/Entity/Entity.ts

@@ -0,0 +1,32 @@
+import { Cube, PuzzlePiece, Square3Stack3d } from 'svelte-hero-icons';
+
+export const entityConfig = [
+	{
+		label: 'Models',
+		path: '/models',
+		icon: Cube,
+		id: 'models'
+	},
+	{
+		label: 'GroupBys',
+		path: '/groupbys',
+		icon: PuzzlePiece,
+		id: 'groupbys'
+	},
+	{
+		label: 'Joins',
+		path: '/joins',
+		icon: Square3Stack3d,
+		id: 'joins'
+	}
+] as const;
+
+export type Entity = (typeof entityConfig)[number];
+export type EntityId = Entity['id'];
+
+// Helper function to get entity by ID
+export function getEntity(id: EntityId): Entity {
+	const entity = entityConfig.find((entity) => entity.id === id);
+	if (!entity) throw new Error(`Entity with id "${id}" not found`);
+	return entity;
+}

frontend/src/lib/types/Model/Model.ts

@@ -4,7 +4,7 @@ export type Model = {
 	production: boolean;
 	team: string;
 	modelType: string;
-	join: JoinTimeSeriesResponse; // todo: this type needs to be updated to match the actual response once that WIP is finished
+	join: Join;
 };
 
 export type ModelsResponse = {
@@ -23,6 +23,16 @@ export type TimeSeriesResponse = {
 	id: string;
 	items: TimeSeriesItem[];
 };
+export type Join = {
+	name: string;
+	joinFeatures: string[];
+	groupBys: GroupBy[];
+};
+
+export type GroupBy = {
+	name: string;
+	features: string[];
+};
 
 export type JoinTimeSeriesResponse = {
 	name: string; // todo: rename to joinName

frontend/src/routes/+layout.svelte

@@ -6,7 +6,7 @@
 	import NavigationBar from '$lib/components/NavigationBar/NavigationBar.svelte';
 	import BreadcrumbNav from '$lib/components/BreadcrumbNav/BreadcrumbNav.svelte';
 	import { ScrollArea } from '$lib/components/ui/scroll-area';
-	import { Cube, PuzzlePiece, Square3Stack3d } from 'svelte-hero-icons';
+	import { entityConfig } from '$lib/types/Entity/Entity';
 
 	let { children }: { children: Snippet } = $props();
 
@@ -16,20 +16,14 @@
 		avatar: '/path/to/avatar.jpg'
 	};
 
-	const navItems = [
-		{ label: 'Models', href: '/models', icon: Cube },
-		{ label: 'GroupBys', href: '/groupbys', icon: PuzzlePiece },
-		{ label: 'Joins', href: '/joins', icon: Square3Stack3d }
-	];
-
 	const breadcrumbs = $derived($page.url.pathname.split('/').filter(Boolean));
 </script>
 
 <div class="flex h-screen">
 	<NavigationSlider />
 
 	<!-- Left navigation -->
-	<NavigationBar {navItems} {user} />
+	<NavigationBar navItems={entityConfig.filter((entity) => entity.id === 'joins')} {user} />
 
 	<!-- Main content -->
 	<main

frontend/src/routes/+page.server.ts

@@ -2,6 +2,6 @@ import { redirect } from '@sveltejs/kit';
 
 export function load({ url }) {
 	if (url.pathname === '/') {
-		throw redirect(307, '/models');
+		throw redirect(307, '/joins');
 	}
 }

frontend/src/routes/groupbys/+page.svelte

@@ -1,5 +1,60 @@
-<script>
-	import ComingSoonPage from '$lib/components/ComingSoonPage/ComingSoonPage.svelte';
+<script lang="ts">
+	import type { Model } from '$lib/types/Model/Model';
+	import {
+		Table,
+		TableBody,
+		TableCell,
+		TableHead,
+		TableHeader,
+		TableRow
+	} from '$lib/components/ui/table';
+	import TrueFalseBadge from '$lib/components/TrueFalseBadge/TrueFalseBadge.svelte';
+	import Separator from '$lib/components/ui/separator/separator.svelte';
+	import PageHeader from '$lib/components/PageHeader/PageHeader.svelte';
+	import ActionButtons from '$lib/components/ActionButtons/ActionButtons.svelte';
+
+	const { data } = $props();
+	const models: Model[] = $state(data.models.items);
 </script>
 
-<ComingSoonPage />
+<PageHeader title="Joins"></PageHeader>
+
+<div class="w-full">
+	<ActionButtons class="mb-4" />
+</div>
+<Separator fullWidthExtend={true} />
+<Table>
+	<TableHeader>
+		<TableRow>
+			<TableHead>Join</TableHead>
+			<TableHead>Model</TableHead>
+			<TableHead>Team</TableHead>
+			<TableHead>Type</TableHead>
+			<TableHead>Online</TableHead>
+			<TableHead>Production</TableHead>
+		</TableRow>
+	</TableHeader>
+	<TableBody>
+		{#each models as model}
+			<TableRow>
+				<TableCell>
+					<a href="/joins/{model.join.name}" class="hover:underline">
+						{model.join.name}
+					</a>
+				</TableCell>
+				<TableCell>
+					{model.name}
+				</TableCell>
+				<TableCell>{model.team}</TableCell>
+				<TableCell>{model.modelType}</TableCell>
+				<TableCell>
+					<TrueFalseBadge isTrue={model.online} />
+				</TableCell>
+				<TableCell>
+					<TrueFalseBadge isTrue={model.production} />
+				</TableCell>
+			</TableRow>
+		{/each}
+	</TableBody>
+</Table>
+<Separator fullWidthExtend={true} />