Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: implement flat design for charts and home #243

Merged
merged 2 commits into from
Sep 29, 2023
Merged

feat: implement flat design for charts and home #243

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
add4dc6
feat: implement flat design for charts and home
Sparkier Sep 29, 2023
9044bf9
style bumps
cabreraalex Sep 29, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion frontend/src/lib/components/general/Banner.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<div class="rounded-l flex items-center w-full">
<div class="rounded-lg flex items-center w-full bg-yellowish">
<p class="text-lg m-4">
<slot />
</p>
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/lib/components/general/Header.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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="/">
Expand Down
19 changes: 16 additions & 3 deletions frontend/src/lib/components/general/HomeHeader.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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-10">
<Tooltip
content={'Projects are datasets and system outputs for evaluation'}
theme={'zeno-tooltip'}
Expand All @@ -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>
Expand All @@ -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 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 mt-2 h-0.5 bg-grey-light rounded-full" />
59 changes: 59 additions & 0 deletions frontend/src/lib/components/popups/NewReportPopup.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
3 changes: 3 additions & 0 deletions frontend/src/lib/stores.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
13 changes: 6 additions & 7 deletions frontend/src/routes/(app)/(home)/+layout.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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-8 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">
Expand All @@ -28,16 +28,15 @@
</Tooltip>
</div>
{:else}
<Banner
>Welcome to <a class="text-primary font-medium" href="https://zenoml.com">Zeno</a>!
<Banner>
Welcome to <a class="text-primary font-medium" href="https://zenoml.com">Zeno</a>!
<a class="text-primary font-medium" href="/login">Sign in </a>
or <a class="text-primary font-medium" href="/signup">sign up</a> to create and see your projects
and reports.</Banner
>
and reports.
</Banner>
{/if}
<div class="p-4 mt-5 flex flex-col bg-white shadow">
<div class="mt-6 flex flex-col h-full">
<HomeHeader user={isExplore ? '' : data.cognitoUser?.name} />

<slot />
</div>
</div>
2 changes: 1 addition & 1 deletion frontend/src/routes/(app)/(home)/[user]/projects/+page.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@
data.user === null ? [] : data.projects.filter((proj) => proj.ownerName !== data.user?.name);
</script>

<div class="flex flex-wrap items-start mb-6">
<div class="flex flex-wrap mb-6 overflow-y-scroll h-full">
{#each ownProjects as project}
<Project {project} deletable />
{/each}
Expand Down
75 changes: 12 additions & 63 deletions frontend/src/routes/(app)/(home)/[user]/reports/+page.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,46 +1,27 @@
<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>
<div class="flex flex-wrap items-start mb-6">
{#if $showNewReport && data.user !== null}
<NewReportPopup
on:close={() => {
showNewReport.set(false);
}}
user={data.user.name}
reports={ownReports}
/>
{/if}
<div class="flex flex-wrap mb-6 overflow-y-scroll h-full">
{#each ownReports as report}
<Report {report} deletable />
{/each}
Expand All @@ -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}
2 changes: 1 addition & 1 deletion frontend/src/routes/(app)/(home)/projects/+page.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
export let data;
</script>

<div class="flex flex-wrap items-start mb-6">
<div class="flex flex-wrap items-start mb-6 overflow-y-scroll h-full">
{#each data.publicProjects as project}
<Project {project} />
{/each}
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/routes/(app)/(home)/reports/+page.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
export let data;
</script>

<div class="flex flex-wrap items-start mb-6">
<div class="flex flex-wrap justify-start mb-6 overflow-y-scroll h-full">
{#each data.publicReports as report}
<Report {report} />
{/each}
Expand Down
64 changes: 27 additions & 37 deletions frontend/src/routes/(app)/project/[owner]/[project]/chart/+page.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,49 +5,39 @@
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-8 pt-5">
<div class="flex items-center h-12 mb-1">
<h3 class="text-2xl mr-4">Charts</h3>
{#if $project.editor}
<Button
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-6 h-0.5 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>