fix: usability issues

zeno-ml · Aug 31, 2023 · dbd116b · dbd116b
1 parent 4f7de0b
commit dbd116b
Show file tree

Hide file tree

Showing 12 changed files with 85 additions and 62 deletions.
diff --git a/backend/zeno_backend/database/select.py b/backend/zeno_backend/database/select.py
@@ -1004,10 +1004,13 @@ def filered_short_string_column_values(
     db = Database()
     short_ret: list[str] = []
     if not req.is_regex:
-        if not req.whole_word_match:
+        if req.whole_word_match:
+            req.filter_string = f"% {req.filter_string} %"
+        else:
             req.filter_string = f"%{req.filter_string}%"
+
         if not req.case_match:
-            req.filter_string = req.filter_string.lower()
+            req.filter_string = req.filter_string.upper()
             returned_strings = db.connect_execute_return(
                 sql.SQL("SELECT {} from {} WHERE UPPER({}) LIKE %s;").format(
                     sql.Identifier(req.column.id),
@@ -1044,7 +1047,7 @@ def filered_short_string_column_values(
 
     else:
         returned_strings = db.connect_execute_return(
-            sql.SQL("SELECT {} from {} WHERE {} LIKE %s").format(
+            sql.SQL("SELECT {} from {} WHERE {} SIMILAR TO %s").format(
                 sql.Identifier(req.column.id),
                 sql.Identifier(project),
                 sql.Identifier(req.column.id),

diff --git a/backend/zeno_backend/database/util.py b/backend/zeno_backend/database/util.py
@@ -24,7 +24,9 @@ def resolve_metadata_type(data_frame: pd.DataFrame, column: str) -> MetadataType
     elif pd.api.types.is_datetime64_any_dtype(dtype):
         return MetadataType.DATETIME
     elif pd.api.types.is_string_dtype(dtype):
-        return MetadataType.NOMINAL
+        if data_frame[column].nunique() < 20:
+            return MetadataType.NOMINAL
+        return MetadataType.OTHER
     return MetadataType.OTHER
 
 

diff --git a/frontend/src/lib/components/general/Header.svelte b/frontend/src/lib/components/general/Header.svelte
@@ -37,19 +37,19 @@
 				<div class="flex flex-col mt-3">
 					<HeaderIcon
 						pageName={'explore'}
-						tooltipContent={'Explore your data and model outputs.'}
+						tooltipContent={'Explore your data and model outputs'}
 						icon={mdiCompassOutline}
 						on:click={() => goto(`${getProjectRouteFromURL($page.url)}/explore`)}
 					/>
 					<HeaderIcon
 						pageName={'compare'}
-						tooltipContent={'Qualitatively compare model outputs.'}
+						tooltipContent={'Qualitatively compare model outputs'}
 						icon={mdiCompare}
 						on:click={() => goto(`${getProjectRouteFromURL($page.url)}/compare`)}
 					/>
 					<HeaderIcon
 						pageName={'chart'}
-						tooltipContent={'Create charts from your slices and metrics.'}
+						tooltipContent={'Create charts from your slices and metrics'}
 						icon={mdiChartBoxOutline}
 						on:click={() => goto(`${getProjectRouteFromURL($page.url)}/chart`)}
 					/>
@@ -60,7 +60,7 @@
 			{#if currentTab?.includes('explore') || currentTab?.includes('compare')}
 				<HeaderIcon
 					pageName={'$collapseHeader'}
-					tooltipContent={$collapseHeader ? 'Expand ' : 'Collapse ' + 'sidebar.'}
+					tooltipContent={$collapseHeader ? 'Expand sidebar' : 'Collapse sidebar'}
 					icon={$collapseHeader ? mdiArrowCollapseRight : mdiArrowCollapseLeft}
 					on:click={() => collapseHeader.set(!$collapseHeader)}
 				/>
@@ -70,21 +70,21 @@
 			{#if currentTab?.includes('project') && $project && $project.ownerName === user?.name}
 				<HeaderIcon
 					pageName={'editProject'}
-					tooltipContent={"Edit your project's configuration."}
+					tooltipContent={"Edit your project's configuration"}
 					icon={mdiCog}
 					on:click={() => (projectEdit = true)}
 				/>
 			{/if}
 			<HeaderIcon
 				pageName={'account'}
-				tooltipContent={'Manage your account.'}
+				tooltipContent={'Manage your account'}
 				icon={mdiAccount}
 				on:click={() => goto(`/account`)}
 			/>
 			<form method="POST" action="/logout">
 				<HeaderIcon
 					pageName={'logout'}
-					tooltipContent={'Logout.'}
+					tooltipContent={'Logout'}
 					icon={mdiLogout}
 					on:click={() => authToken.set(undefined)}
 				/>

diff --git a/frontend/src/lib/components/general/HeaderIcon.svelte b/frontend/src/lib/components/general/HeaderIcon.svelte
@@ -1,32 +1,29 @@
 <script lang="ts">
 	import { page } from '$app/stores';
 	import { Icon } from '@smui/icon-button';
-	import { tooltip } from '@svelte-plugins/tooltips';
+	import { Tooltip } from '@svelte-plugins/tooltips';
 
 	export let pageName: string;
 	export let tooltipContent: string;
 	export let icon: string;
 </script>
 
-<button
-	class="m-auto flex items-center cursor-pointer p-3 hover:bg-black-transparent {$page.url.href.includes(
-		pageName
-	)
-		? 'font-medium'
-		: ''}"
-	on:click
-	use:tooltip={{
-		content: tooltipContent,
-		position: 'right',
-		theme: 'zeno-tooltip'
-	}}
->
-	<div class="w-6 h-6 fill-grey">
-		<Icon style="outline:none" tag="svg" viewBox="0 0 24 24">
-			<path
-				class={`${$page.url.href.includes(pageName) ? 'fill-primary' : 'fill-grey'}`}
-				d={icon}
-			/>
-		</Icon>
-	</div>
-</button>
+<Tooltip content={tooltipContent} theme={'zeno-tooltip'} position="right">
+	<button
+		class="m-auto flex items-center cursor-pointer p-3 hover:bg-black-transparent {$page.url.href.includes(
+			pageName
+		)
+			? 'font-medium'
+			: ''}"
+		on:click
+	>
+		<div class="w-6 h-6 fill-grey">
+			<Icon style="outline:none" tag="svg" viewBox="0 0 24 24">
+				<path
+					class={`${$page.url.href.includes(pageName) ? 'fill-primary' : 'fill-grey'}`}
+					d={icon}
+				/>
+			</Icon>
+		</div>
+	</button>
+</Tooltip>
diff --git a/frontend/src/lib/components/instance-views/ListView.svelte b/frontend/src/lib/components/instance-views/ListView.svelte
@@ -118,7 +118,7 @@
 	{/if}
 	<Pagination slot="paginate" class="pagination">
 		<svelte:fragment slot="rowsPerPage">
-			<Label>Rows Per Page</Label>
+			<Label>Instances Per Page</Label>
 			<Select variant="outlined" bind:value={$rowsPerPage} noLabel>
 				{#each sampleOptions as option}
 					<Option value={option}>{option}</Option>

diff --git a/frontend/src/lib/components/instance-views/TableView.svelte b/frontend/src/lib/components/instance-views/TableView.svelte
@@ -32,6 +32,7 @@
 	let currentTagIds: string[] = [];
 	let currentPage = 0;
 	let lastPage = 0;
+	let instanceHidden = false;
 	let sampleOptions = [
 		...new Set(
 			$project !== undefined && $project.samplesPerPage !== undefined
@@ -133,7 +134,15 @@
 						<th class="p-3 font-semibold font-grey">Included</th>
 					{/if}
 					{#if $project !== undefined && viewMap[$project.view] !== undefined}
-						<th class="p-3 font-semibold font-grey">instance</th>
+						<th
+							class="p-3 font-semibold font-grey whitespace-nowrap"
+							on:click={() => (instanceHidden = !instanceHidden)}
+						>
+							instance
+							{#if instanceHidden}
+								<span class="ml-2 text-grey-darker">hidden</span>
+							{/if}
+						</th>
 					{/if}
 					{#each columnHeader as header}
 						{#if header.name !== 'data_id'}
@@ -166,21 +175,29 @@
 						{/if}
 						{#if $project !== undefined && viewMap[$project.view] !== undefined}
 							<td class="p-3">
-								<div class="instance">
-									<svelte:component
-										this={viewMap[$project.view]}
-										options={viewOptions}
-										entry={tableContent}
-										modelColumn={modelColumn?.id}
-									/>
-								</div>
+								{#if instanceHidden}
+									<p class="text-center">...</p>
+								{:else}
+									<div class="instance">
+										<svelte:component
+											this={viewMap[$project.view]}
+											options={viewOptions}
+											entry={tableContent}
+											modelColumn={modelColumn?.id}
+										/>
+									</div>
+								{/if}
 							</td>
 						{/if}
 						{#each columnHeader as header}
 							{#if header.dataType === MetadataType.CONTINUOUS}
-								<td class="p-3">{parseFloat(`${tableContent[header.id]}`).toFixed(2)}</td>
+								<td class="p-3 border border-grey-lighter align-top">
+									{parseFloat(`${tableContent[header.id]}`).toFixed(2)}
+								</td>
 							{:else}
-								<td class="p-3">{tableContent[header.id]}</td>
+								<td class="p-3 border border-grey-lighter align-top">
+									{tableContent[header.id]}
+								</td>
 							{/if}
 						{/each}
 					</tr>

diff --git a/frontend/src/lib/components/metadata/ChipsWrapper.svelte b/frontend/src/lib/components/metadata/ChipsWrapper.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { selectionIds, selectionPredicates, selections, tagIds } from '$lib/stores';
 	import { Join, type FilterPredicate } from '$lib/zenoapi';
+	import Button from '@smui/button';
 	import IdsChip from './chips/IdsChip.svelte';
 	import MetadataChip from './chips/MetadataChip.svelte';
 	import SliceChip from './chips/SliceChip.svelte';
@@ -13,7 +14,9 @@
 
 <div class="flex flex-wrap height-fit items-center py-1">
 	{#if $selections.slices.length + $selections.tags.length + filters.length === 0 && $selectionIds === undefined}
-		<p style="margin: 0px">Filter with the selected predicates.</p>
+		<p style="margin: 0px">
+			Filter by selecting slices or interacting with the feature distribution charts.
+		</p>
 	{:else}
 		{#each $selections.slices as sliceIdx}
 			<SliceChip {sliceIdx} />
@@ -28,8 +31,9 @@
 			<IdsChip />
 		{/if}
 		{#if $selectionPredicates !== undefined || $tagIds !== undefined || $selectionIds !== undefined}
-			<span
-				class="p-1 ml-2.5 cursor-pointer hover:bg-yellowish hover:rounded"
+			<Button
+				variant="outlined"
+				class="ml-2"
 				on:keydown={() => ({})}
 				on:click={() => {
 					selections.update((m) => {
@@ -46,7 +50,7 @@
 				}}
 			>
 				clear all
-			</span>
+			</Button>
 		{/if}
 	{/if}
 </div>
diff --git a/frontend/src/lib/components/metadata/MetadataHeader.svelte b/frontend/src/lib/components/metadata/MetadataHeader.svelte
@@ -53,11 +53,13 @@
 			</select>
 		</div>
 	{/if}
-	{#if !$page.url.href.includes('compare') && $metric !== undefined}
+	{#if !$page.url.href.includes('compare') && $metrics.length > 0 && $metric !== undefined}
 		<div class="flex flex-col w-1/2">
 			<span class="my-1 text-grey-dark">Metric</span>
 			<select
 				class="w-full h-9 border border-grey-light rounded text-sm text-grey"
+				name="metric-select"
+				required
 				bind:value={$metric}
 			>
 				{#each $metrics as met}
@@ -80,7 +82,7 @@
 		</div>
 	{/if}
 </div>
-{#if $page.url.href.includes('compare') && $metric !== undefined}
+{#if $page.url.href.includes('compare') && $metric !== undefined && $metrics.length > 0}
 	<div class="flex flex-col w-full">
 		<span class="my-1 text-grey-dark">Metric</span>
 		<select

diff --git a/frontend/src/lib/components/metadata/cells/metadata-cells/SearchOption.svelte b/frontend/src/lib/components/metadata/cells/metadata-cells/SearchOption.svelte
@@ -8,8 +8,8 @@
 
 <button
 	{id}
-	class={`flex items-center p-1 h-6 cursor-pointer hover:bg-yellowish ${
-		highlighted ? 'bg-primary-mid' : ''
+	class={`flex items-center pt-1 pb-1 pl-2 pr-2 h-7 cursor-pointer  ${
+		highlighted ? 'bg-primary-mid' : 'hover:bg-yellowish'
 	}`}
 	on:click
 	use:tooltip={{

diff --git a/frontend/src/lib/components/metadata/cells/metadata-cells/TextMetadataCell.svelte b/frontend/src/lib/components/metadata/cells/metadata-cells/TextMetadataCell.svelte
@@ -130,13 +130,14 @@
 			</div>
 		</AutoComplete>
 	{/key}
-	<div class="ml-2.5 flex items-center">
+	<div class="ml-2.5 flex items-center border rounded-md border-grey-light">
 		<SearchOption
 			id={'caseMatch'}
 			highlighted={caseMatch}
 			on:click={optionClick}
 			tooltipContent={'Match Case'}>Aa</SearchOption
 		>
+		<div class="w-px h-6 bg-grey-light" />
 		<SearchOption
 			id={'wholeWordMatch'}
 			highlighted={wholeWordMatch}
@@ -145,6 +146,7 @@
 		>
 			<svelte:component this={MatchWholeWordIcon} />
 		</SearchOption>
+		<div class="w-px h-6 bg-grey-light" />
 		<SearchOption
 			id={'typeSelection'}
 			highlighted={isRegex}

diff --git a/frontend/src/lib/components/popups/FilterEntry.svelte b/frontend/src/lib/components/popups/FilterEntry.svelte
@@ -75,7 +75,7 @@
 	</div>
 	<div class="mr-2.5">
 		{#if predicate.column}
-			{#if predicate.column.dataType === MetadataType.BOOLEAN || predicate.column.dataType === MetadataType.NOMINAL}
+			{#if predicate.column.dataType === MetadataType.BOOLEAN || predicate.column.dataType === MetadataType.NOMINAL || predicate.column.dataType === MetadataType.OTHER}
 				<Svelecte
 					on:change={operationChange}
 					value={inverseOperationMap[predicate.operation]}
@@ -110,7 +110,7 @@
 					searchable={false}
 					options={['true', 'false']}
 				/>
-			{:else if predicate.column.dataType !== MetadataType.OTHER}
+			{:else}
 				<input
 					type="text"
 					bind:value={predicate.value}

diff --git a/frontend/src/lib/components/popups/Popup.svelte b/frontend/src/lib/components/popups/Popup.svelte
@@ -15,11 +15,7 @@
 	on:mousedown={() => dispatch('close')}
 	on:keydown={() => undefined}
 >
-	<Paper
-		class="pt-3 overflow-scroll min-h-[300px] flex flex-col h-5/6"
-		elevation={7}
-		on:mousedown={(e) => e.stopPropagation()}
-	>
+	<Paper class="pt-3 flex flex-col" elevation={7} on:mousedown={(e) => e.stopPropagation()}>
 		<slot />
 	</Paper>
 </div>