Merge remote-tracking branch 'origin/main' into ab-report-project-vis…

…ibility

backend/zeno_backend/classes/project.py

@@ -27,13 +27,13 @@ class Project(CamelModel):
 
     uuid: str
     name: str
-    description: str = ""
+    description: str | None = ""
     metrics: list[Metric] = []
     owner_name: str
     view: str
-    editor: bool
-    samples_per_page: int = 30
-    public: bool = False
+    editor: bool = False
+    samples_per_page: int | None = 30
+    public: bool | None = False
     created_at: str = ""
     updated_at: str = ""
 

backend/zeno_backend/database/insert.py

@@ -73,6 +73,7 @@ async def project(project_config: Project, owner_id: int):
         Exception: something went wrong in the process of creating the new project in
             the database.
     """
+    default_project = Project(uuid="", name="", owner_name="", view="")
     async with db_pool.connection() as conn:
         async with conn.cursor() as cur:
             await cur.execute(
@@ -84,9 +85,15 @@ async def project(project_config: Project, owner_id: int):
                     project_config.name,
                     owner_id,
                     project_config.view,
-                    project_config.samples_per_page,
-                    project_config.public,
-                    project_config.description,
+                    default_project.samples_per_page
+                    if project_config.samples_per_page is None
+                    else project_config.samples_per_page,
+                    default_project.public
+                    if project_config.public is None
+                    else project_config.public,
+                    default_project.description
+                    if project_config.description is None
+                    else project_config.description,
                 ],
             )
             await cur.execute(

backend/zeno_backend/database/update.py

@@ -255,19 +255,26 @@ async def project(project_config: Project):
     """
     async with db_pool.connection() as conn:
         async with conn.cursor() as cur:
-            await cur.execute(
-                "UPDATE projects SET name = %s, "
-                "view = %s, samples_per_page = %s, public = %s, "
-                "description = %s, updated_at = CURRENT_TIMESTAMP WHERE uuid = %s;",
-                [
-                    project_config.name,
-                    project_config.view,
-                    project_config.samples_per_page,
-                    project_config.public,
-                    project_config.description,
-                    project_config.uuid,
-                ],
+            query = sql.SQL(
+                "UPDATE projects SET name = %s, view = %s, "
+                "updated_at = CURRENT_TIMESTAMP",
             )
+            params: list[str | bool | int] = [
+                project_config.name,
+                project_config.view,
+            ]
+            if project_config.public is not None:
+                query += sql.SQL(", public = %s")
+                params.append(project_config.public)
+            if project_config.description is not None:
+                query += sql.SQL(", description = %s")
+                params.append(project_config.description)
+            if project_config.samples_per_page is not None:
+                query += sql.SQL(", samples_per_page = %s")
+                params.append(project_config.samples_per_page)
+            query += sql.SQL(" WHERE uuid = %s;")
+            params.append(project_config.uuid)
+            await cur.execute(query, params)
             await conn.commit()
 
 

backend/zeno_backend/processing/histogram_processing.py

@@ -151,10 +151,9 @@ async def histogram_metric_and_count(
                     [request.metric.columns[0], request.model],
                 )
                 metric_col_id = await db.fetchone()
-                if metric_col_id is None:
-                    return []
-                metric_col_type = metric_col_id[1]
-                metric_col_id = metric_col_id[0]
+                if metric_col_id is not None:
+                    metric_col_type = metric_col_id[1]
+                    metric_col_id = metric_col_id[0]
 
             if col.data_type == MetadataType.NOMINAL:
                 if calculate_histograms and metric_col_id is not None:
@@ -182,7 +181,7 @@ async def histogram_metric_and_count(
 
                 await db.execute(statement)
                 db_res = await db.fetchall()
-                if calculate_histograms:
+                if calculate_histograms and metric_col_id is not None:
                     results_map = {r[0]: (r[1], r[2]) for r in db_res}
                     return [
                         HistogramBucket(
@@ -255,7 +254,7 @@ async def histogram_metric_and_count(
                 await db.execute(statement)
                 db_res = await db.fetchall()
 
-                if calculate_histograms:
+                if calculate_histograms and metric_col_id is not None:
                     results_map = {
                         int(r[0]): (r[1], r[2]) for r in db_res if r[0] is not None
                     }
@@ -313,7 +312,7 @@ async def histogram_metric_and_count(
 
                 true_res = [r for r in res if r[0] == 0]
                 false_res = [r for r in res if r[0] == 1]
-                if calculate_histograms:
+                if calculate_histograms and metric_col_id is not None:
                     return [
                         HistogramBucket(
                             bucket=True,

frontend/src/lib/components/general/Header.svelte

@@ -1,34 +1,49 @@
 <script lang="ts">
+	import { goto } from '$app/navigation';
 	import { page } from '$app/stores';
-	import type { Report, User, ZenoService } from '$lib/zenoapi';
-	import { mdiFileChartOutline, mdiLinkVariant, mdiPlus } from '@mdi/js';
+	import { tooltip } from '$lib/util/tooltip';
+	import type { Project, Report, User, ZenoService } from '$lib/zenoapi';
+	import {
+		mdiCog,
+		mdiFileChartOutline,
+		mdiLinkVariant,
+		mdiPlus,
+		mdiViewGridOutline
+	} from '@mdi/js';
 	import Button, { Icon } from '@smui/button';
 	import IconButton from '@smui/icon-button';
 	import { getContext } from 'svelte';
 	import { fade } from 'svelte/transition';
+	import HelpButton from './HelpButton.svelte';
 	import LikeButton from './LikeButton.svelte';
 	import UserButton from './UserButton.svelte';
 
 	export let user: User | null = null;
 	export let report: Report | null = null;
+	export let project: Project | null = null;
 	export let showNewReport = false;
 	export let numLikes = 0;
 	export let userLiked = false;
-	export let reportEdit = false;
+	export let editPopup = false;
 
 	const zenoClient = getContext('zenoClient') as ZenoService;
+	const exploreTab = $page.route.id === '/(app)/home';
 
 	let linkCopied = false;
 </script>
 
-<div class="mx-6 my-4 flex h-8 items-center justify-between">
-	<div class="flex h-full items-center">
+<div
+	class="{project
+		? 'border-b border-grey-lighter bg-yellowish-light px-3'
+		: 'px-6'} flex h-16 w-full flex-shrink-0 flex-col items-center justify-between sm:flex-row"
+>
+	<div class="flex h-full w-full items-center">
 		<a href="/" class="shrink-0">
 			<img src="/zeno-logo.png" class="h-8" alt="diamond tesselation logo" />
 		</a>
 		{#if $page.route.id?.startsWith('/(app)/home/')}
-			<div class="flex h-full md:ml-2 md:mt-0">
-				<Button class="h-full" on:click={() => (showNewReport = true)}>
+			<div class="flex h-full items-center md:ml-2 md:mt-0">
+				<Button on:click={() => (showNewReport = true)}>
 					<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="mr-2 w-6 fill-primary">
 						<path d={mdiPlus} />
 					</svg>
@@ -38,42 +53,92 @@
 		{/if}
 		{#if report}
 			<div class="ml-5 hidden items-center sm:flex">
-				<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class=" w-6 fill-grey-dark">
+				<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="w-6">
 					<path d={mdiFileChartOutline} />
 				</svg>
-				<p class="ml-1 mr-6 text-grey-dark">{report.name}</p>
+				<h4 class="ml-1 mr-6 text-lg">{report.name}</h4>
 				<LikeButton
 					on:like={() => (report ? zenoClient.likeReport(report.id) : '')}
 					{user}
 					likes={numLikes}
 					liked={userLiked}
 					report={false}
 				/>
-				<IconButton
-					class="ml-2"
-					on:click={(e) => {
-						e.stopPropagation();
-						linkCopied = true;
-						navigator.clipboard.writeText(window.location.href);
-						setTimeout(() => (linkCopied = false), 2000);
-					}}
-				>
-					<Icon tag="svg" viewBox="0 0 24 24">
-						<path fill="black" d={mdiLinkVariant} />
-					</Icon>
-				</IconButton>
-				{#if linkCopied}
-					<p class="ml-2 text-grey-dark" transition:fade>Report link copied to clipboard</p>
-				{/if}
 			</div>
+		{:else if project}
+			<svg
+				xmlns="http://www.w3.org/2000/svg"
+				viewBox="0 0 24 24"
+				class="ml-5 mr-2 w-6 flex-shrink-0"
+			>
+				<path d={mdiViewGridOutline} />
+			</svg>
+			{#if project.description}
+				<h1
+					class="mr-6 overflow-ellipsis whitespace-nowrap text-lg"
+					use:tooltip={{ text: project.description }}
+					style="max-width: 100%; overflow: hidden; text-overflow: ellipsis;"
+				>
+					{project.name}
+				</h1>
+			{:else}
+				<h1
+					class="mr-6 overflow-ellipsis whitespace-nowrap text-lg"
+					style="max-width: 100%; overflow: hidden; text-overflow: ellipsis;"
+				>
+					{project.name}
+				</h1>
+			{/if}
+			<LikeButton
+				on:like={() => (project ? zenoClient.likeProject(project.uuid) : '')}
+				{user}
+				likes={numLikes}
+				liked={userLiked}
+				report={false}
+			/>
+		{/if}
+		{#if project || report}
+			<IconButton
+				class="ml-2"
+				on:click={(e) => {
+					e.stopPropagation();
+					linkCopied = true;
+					if (project) {
+						navigator.clipboard.writeText(window.location.href.split('/explore')[0]);
+					} else {
+						navigator.clipboard.writeText(window.location.href);
+					}
+					setTimeout(() => (linkCopied = false), 2000);
+				}}
+			>
+				<Icon tag="svg" viewBox="0 0 24 24">
+					<path fill="black" d={mdiLinkVariant} />
+				</Icon>
+			</IconButton>
+		{/if}
+		{#if linkCopied}
+			<p class="ml-2 text-grey-dark" transition:fade>Link copied to clipboard</p>
 		{/if}
 	</div>
-	<div class="flex h-full shrink-0 items-center">
-		{#if report && report.editor}
+	<div class="hidden h-full shrink-0 items-center sm:flex">
+		<HelpButton />
+		{#if (report && report.editor) || (project && project.editor)}
+			<button
+				class="mr-2 flex h-8 w-8 cursor-pointer items-center justify-center rounded-full border border-grey-light text-primary transition hover:bg-primary-mid"
+				on:click={() => (editPopup = true)}
+				use:tooltip={{ text: 'Preferences' }}
+			>
+				<Icon tag="svg" viewBox="0 0 24 24" class="w-5 fill-primary">
+					<path d={mdiCog} />
+				</Icon>
+			</button>
+		{/if}
+		{#if user && $page.route.id?.startsWith('/(app)/home')}
 			<Button
-				class="mr-4 mt-2 shrink-0 sm:mt-0"
+				class="mr-3"
 				variant="outlined"
-				on:click={() => (reportEdit = true)}>Settings</Button
+				on:click={() => (exploreTab ? goto('/') : goto('/home'))}
+				>{exploreTab ? 'My Hub' : 'Explore'}</Button
 			>
 		{/if}
 		<UserButton {user} />

frontend/src/lib/components/general/HelpButton.svelte

@@ -11,9 +11,9 @@
 	let docsLink = 'https://zenoml.com/docs/intro';
 </script>
 
-<div class="relative">
+<div class="relative mr-2">
 	<button
-		class="mr-3 h-8 w-8 rounded-full border border-grey-light text-xl capitalize text-primary transition hover:bg-primary-dark"
+		class="h-8 w-8 rounded-full border border-grey-light text-xl capitalize text-primary transition hover:bg-primary-dark"
 		use:tooltip={{ text: 'Help' }}
 		on:click={() => (showOptions = !showOptions)}
 	>

frontend/src/lib/components/general/Tooltip.svelte

@@ -27,7 +27,7 @@
 		bind:offsetWidth={tooltipWidth}
 		bind:offsetHeight={tooltipHeight}
 	>
-		<div class="flex flex-col break-all p-2">
+		<div class="break-word flex flex-col p-2">
 			{$tooltipState.text}
 		</div>
 	</div>

frontend/src/lib/components/general/UserButton.svelte

@@ -1,38 +1,24 @@
 <script lang="ts">
 	import { goto } from '$app/navigation';
-	import { page } from '$app/stores';
 	import { tooltip } from '$lib/util/tooltip';
 	import type { User } from '$lib/zenoapi';
 	import Button from '@smui/button';
-	import HelpButton from './HelpButton.svelte';
 
 	export let user: User | null;
-
-	const exploreTab = $page.route.id === '/(app)/home';
 </script>
 
 <div class="flex h-full w-max items-center">
 	{#if user}
-		{#if $page.route.id?.startsWith('/(app)/home')}
-			<Button
-				class="mr-3 h-full"
-				variant="outlined"
-				on:click={() => (exploreTab ? goto('/') : goto('/home'))}
-				>{exploreTab ? 'My Hub' : 'Explore'}</Button
-			>
-		{/if}
-		<HelpButton />
 		<button
-			class="h-8 w-8 rounded-full bg-primary font-extrabold capitalize text-white transition hover:bg-primary-dark"
+			class="h-8 w-8 rounded-full bg-primary font-extrabold capitalize text-white transition hover:bg-primary-mid"
 			use:tooltip={{ text: 'My Account' }}
 			on:click={() => goto('/account')}
 		>
 			{user.name.slice(0, 2)}
 		</button>
 	{:else}
-		<HelpButton />
 		<div class="h-8">
-			<Button class="mr-3 h-full" variant="raised" on:click={() => goto('/signup')}>Sign Up</Button>
+			<Button class="mr-2 h-full" variant="raised" on:click={() => goto('/signup')}>Sign Up</Button>
 			<Button class="h-full" variant="outlined" on:click={() => goto('/login')}>Log In</Button>
 		</div>
 	{/if}

frontend/src/lib/components/metadata/Histograms.svelte

@@ -138,7 +138,7 @@
 		.filter((c) => (c.model === undefined || c.model === null || c.model === $model) && histogramColumnsBaseFilter(c))
 		.sort(reverseColumnSort) as col (col.id)}
 		{@const hist = metadataHistograms.get(col.id)}
-		{#if hist}
+		{#if hist && hist.length > 0}
 			<MetadataCell {col} histogram={hist} />
 		{/if}
 	{/each}