feat: implement flat design for charts and home

zeno-ml · Sep 29, 2023 · add4dc6 · add4dc6
1 parent 157bdf2
commit add4dc6
Show file tree

Hide file tree

Showing 8 changed files with 121 additions and 107 deletions.
diff --git a/frontend/src/lib/components/general/Banner.svelte b/frontend/src/lib/components/general/Banner.svelte
@@ -1,4 +1,4 @@
-<div class="rounded-l flex items-center w-full">
+<div class="rounded-2xl flex items-center w-full bg-yellowish">
 	<p class="text-lg m-4">
 		<slot />
 	</p>

diff --git a/frontend/src/lib/components/general/Header.svelte b/frontend/src/lib/components/general/Header.svelte
@@ -41,7 +41,7 @@
 {/if}
 <nav class="z-20">
 	<header
-		class="h-full w-12 flex bg-white justify-between flex-col text-grey items-center border-r border-x-grey-lighter"
+		class="h-full w-12 flex bg-yellowish justify-between flex-col text-grey items-center border-r border-x-grey-lighter"
 	>
 		<div class="flex flex-col items-center justify-center">
 			<a href="/">

diff --git a/frontend/src/lib/components/general/HomeHeader.svelte b/frontend/src/lib/components/general/HomeHeader.svelte
@@ -1,13 +1,17 @@
 <script lang="ts">
 	import { page } from '$app/stores';
+	import { showNewReport } from '$lib/stores';
+	import { mdiPlus } from '@mdi/js';
+	import { Icon } from '@smui/button';
+	import Button from '@smui/button/src/Button.svelte';
 	import { Tooltip } from '@svelte-plugins/tooltips';
 
 	export let user = '';
 
 	let view = $page.route.id?.split('/').reverse()[0];
 </script>
 
-<div class="flex mb-4 h-8 ml-2">
+<div class="flex ml-2 items-center h-8">
 	<Tooltip
 		content={'Projects are datasets and system outputs for evaluation'}
 		theme={'zeno-tooltip'}
@@ -16,7 +20,7 @@
 		<a
 			href={user ? '/' + user + '/projects' : '/projects'}
 			class="text-xl mr-6 text-black hover:text-primary
-        {view === 'projects' ? 'border-b-2 border-primary' : ''}"
+        {view === 'projects' ? '' : 'text-grey-dark'}"
 		>
 			Projects
 		</a>
@@ -29,9 +33,18 @@
 		<a
 			href={user ? '/' + user + '/reports' : '/reports'}
 			class="text-xl mr-4 hover:text-primary
-        {view === 'reports' ? 'border-b-2 border-primary' : ''}"
+        {view === 'reports' ? '' : 'text-grey-dark'}"
 		>
 			Reports
 		</a>
 	</Tooltip>
+	{#if view === 'reports' && user}
+		<Button class="ml-auto" on:click={() => showNewReport.set(true)}>
+			<Icon class="material-icons" width="24px" height="24px" tag="svg" viewBox="0 0 24 24">
+				<path d={mdiPlus} />
+			</Icon>
+			New Report
+		</Button>
+	{/if}
 </div>
+<div class="w-full mb-4 h-1 bg-grey-light rounded-full" />
diff --git a/frontend/src/lib/components/popups/NewReportPopup.svelte b/frontend/src/lib/components/popups/NewReportPopup.svelte
@@ -0,0 +1,59 @@
+<script lang="ts">
+	import { goto } from '$app/navigation';
+	import { showNewReport } from '$lib/stores';
+	import { ZenoService, type Report } from '$lib/zenoapi';
+	import Button from '@smui/button/src/Button.svelte';
+	import { Content } from '@smui/paper';
+	import Textfield from '@smui/textfield';
+	import { createEventDispatcher } from 'svelte';
+	import Popup from './Popup.svelte';
+
+	export let user: string;
+	export let reports: Report[];
+
+	let reportName = '';
+
+	const dispatch = createEventDispatcher();
+
+	let input: Textfield;
+
+	$: invalidName = reports.filter((rep) => rep.name === reportName).length > 0;
+	$: if (input) {
+		input.getElement().focus();
+	}
+
+	function addReport() {
+		showNewReport.set(false);
+		ZenoService.addReport(reportName).then(() => goto(`/report/${user}/${reportName}`));
+	}
+
+	function submit(e: KeyboardEvent) {
+		if (e.key === 'Escape') {
+			dispatch('close');
+		}
+		if (e.key === 'Enter') {
+			if (!invalidName && reportName.length > 0) addReport();
+		}
+	}
+</script>
+
+<svelte:window on:keydown={submit} />
+<Popup on:close>
+	<Content style="display: flex; align-items: center;">
+		<Textfield bind:value={reportName} label="Report Name" />
+		<Button style="margin-left: 10px;" variant="outlined" on:click={() => dispatch('close')}>
+			Cancel
+		</Button>
+		<Button
+			style="margin-left: 5px;"
+			variant="outlined"
+			disabled={invalidName}
+			on:click={addReport}
+		>
+			Create
+		</Button>
+	</Content>
+	{#if invalidName && reportName.length > 0}
+		<p style:margin-right="10px" style:color="red">report already exists</p>
+	{/if}
+</Popup>
diff --git a/frontend/src/lib/stores.ts b/frontend/src/lib/stores.ts
@@ -111,3 +111,6 @@ export const metricRangeColorScale: Readable<(n: number) => string> = derived(
 
 // Store the current state of feature flags
 export const featureFlags: Writable<Record<string, boolean>> = writable({});
+
+// Whether the new report popup should be displayed on the reports page
+export const showNewReport = writable(false);
diff --git a/frontend/src/routes/(app)/(home)/+layout.svelte b/frontend/src/routes/(app)/(home)/+layout.svelte
@@ -10,7 +10,7 @@
 		$page.route.id === '/(app)/(home)/reports' || $page.route.id === '/(app)/(home)/projects';
 </script>
 
-<div class="flex flex-col w-full h-full p-6 pt-5 bg-yellowish">
+<div class="flex flex-col w-full h-full p-6 pt-5 bg-white">
 	{#if data.cognitoUser && data.cognitoUser !== null}
 		<div class="flex text-3xl">
 			<Tooltip content={'Your projects and reports'} theme={'zeno-tooltip'} position="bottom">
@@ -35,9 +35,8 @@
 			and reports.</Banner
 		>
 	{/if}
-	<div class="p-4 mt-5 flex flex-col bg-white shadow">
+	<div class="mt-8 flex flex-col">
 		<HomeHeader user={isExplore ? '' : data.cognitoUser?.name} />
-
 		<slot />
 	</div>
 </div>
diff --git a/frontend/src/routes/(app)/(home)/[user]/reports/+page.svelte b/frontend/src/routes/(app)/(home)/[user]/reports/+page.svelte
@@ -1,45 +1,26 @@
 <script lang="ts">
-	import { goto } from '$app/navigation';
 	import Banner from '$lib/components/general/Banner.svelte';
-	import Popup from '$lib/components/popups/Popup.svelte';
+	import NewReportPopup from '$lib/components/popups/NewReportPopup.svelte';
 	import Report from '$lib/components/report/Report.svelte';
-	import { ZenoService } from '$lib/zenoapi/index.js';
-	import { mdiPlus } from '@mdi/js';
-	import Button, { Icon } from '@smui/button';
-	import { Content } from '@smui/paper';
-	import Textfield from '@smui/textfield';
+	import { showNewReport } from '$lib/stores.js';
 
 	export let data;
 
-	let reportName = '';
-	let showNewReport = false;
-
-	$: invalidName = data.reports.filter((rep) => rep.name === reportName).length > 0;
-
 	$: ownReports =
 		data.user === null ? [] : data.reports.filter((rep) => rep.ownerName === data.user?.name);
 	$: sharedReports =
 		data.user === null ? [] : data.reports.filter((rep) => rep.ownerName !== data.user?.name);
 </script>
 
-<button
-	class="border-solid m-1 ml-0 mb-2 rounded-sm border-grey-light border shadow-sm flex flex-col hover:shadow-md items-center justify-center w-44 p-1 pr-3 pl-1"
-	on:click={() => (showNewReport = true)}
->
-	<div class="flex items-center px-3">
-		<Icon
-			class="mr-2"
-			style="outline:none;"
-			width="24px"
-			height="24px"
-			tag="svg"
-			viewBox="0 0 24 24"
-		>
-			<path fill="black" d={mdiPlus} />
-		</Icon>
-		New Report
-	</div>
-</button>
+{#if $showNewReport && data.user !== null}
+	<NewReportPopup
+		on:close={() => {
+			showNewReport.set(false);
+		}}
+		user={data.user.name}
+		reports={ownReports}
+	/>
+{/if}
 <div class="flex flex-wrap items-start mb-6">
 	{#each ownReports as report}
 		<Report {report} deletable />
@@ -53,35 +34,3 @@
 		You haven't created any reports yet. Use reports to tell stories about your AI systems.
 	</Banner>
 {/if}
-
-{#if showNewReport}
-	<Popup on:close>
-		<Content style="display: flex; align-items: center;">
-			<Textfield bind:value={reportName} label="Report Name" />
-			<Button
-				style="margin-left: 10px;"
-				variant="outlined"
-				on:click={() => (showNewReport = false)}
-			>
-				Cancel
-			</Button>
-			<Button
-				style="margin-left: 5px;"
-				variant="outlined"
-				disabled={invalidName}
-				on:click={() => {
-					{
-						ZenoService.addReport(reportName).then(() =>
-							goto(`/report/${data.user?.name}/${reportName}`)
-						);
-					}
-				}}
-			>
-				Create
-			</Button>
-		</Content>
-		{#if invalidName && reportName.length > 0}
-			<p style:margin-right="10px" style:color="red">report already exists</p>
-		{/if}
-	</Popup>
-{/if}
diff --git a/frontend/src/routes/(app)/project/[owner]/[project]/chart/+page.svelte b/frontend/src/routes/(app)/project/[owner]/[project]/chart/+page.svelte
@@ -5,49 +5,40 @@
 	import { chartDefaults } from '$lib/util/charts';
 	import { ChartType, ZenoService } from '$lib/zenoapi';
 	import { mdiPlus } from '@mdi/js';
+	import Button from '@smui/button/src/Button.svelte';
 	import { Icon } from '@smui/icon-button';
 
 	export let data;
 
 	$: charts.set(data.charts);
 </script>
 
-<div class="flex flex-col w-full bg-yellowish">
-	<div class="flex flex-col bg-white p-6 m-4 shadow rounded">
-		<div class="flex align-center mb-7">
-			<h3 class="text-xl mr-5">Charts</h3>
-			{#if $project.editor}
-				<button
-					class="border-solid rounded-sm border-grey-light border shadow-sm flex flex-col hover:shadow-md p-1 pr-3 pl-1"
-					on:click={() => {
-						ZenoService.addChart(
-							$project.uuid,
-							chartDefaults('New Chart', 0, $project.uuid, ChartType.BAR)
-						).then((res) => {
-							goto(`/project/${$project.ownerName}/${$project.name}/chart/${res}?edit=true`);
-						});
-					}}
-				>
-					<div class="flex items-center">
-						<Icon
-							class="mr-2"
-							style="outline:none;"
-							width="24px"
-							height="24px"
-							tag="svg"
-							viewBox="0 0 24 24"
-						>
-							<path fill="black" d={mdiPlus} />
-						</Icon>
-						New Chart
-					</div>
-				</button>
-			{/if}
-		</div>
-		<div class="flex flex-wrap overflow-y-auto">
-			{#each $charts.sort((a, b) => a.id - b.id) as chart}
-				<ChartHomeBlock {chart} />
-			{/each}
-		</div>
+<div class="flex flex-col w-full p-6">
+	<div class="flex align-center">
+		<h3 class="text-xl">Charts</h3>
+		{#if $project.editor}
+			<Button
+				class="ml-auto"
+				on:click={() => {
+					ZenoService.addChart(
+						$project.uuid,
+						chartDefaults('New Chart', 0, $project.uuid, ChartType.BAR)
+					).then((res) => {
+						goto(`/project/${$project.ownerName}/${$project.name}/chart/${res}?edit=true`);
+					});
+				}}
+			>
+				<Icon class="mr-2" width="24px" height="24px" tag="svg" viewBox="0 0 24 24">
+					<path d={mdiPlus} />
+				</Icon>
+				New Chart
+			</Button>
+		{/if}
+	</div>
+	<div class="w-full mb-4 h-1 bg-grey-light rounded-full" />
+	<div class="flex flex-wrap overflow-y-auto">
+		{#each $charts.sort((a, b) => a.id - b.id) as chart}
+			<ChartHomeBlock {chart} />
+		{/each}
 	</div>
 </div>