From 37628259d77ae2422b65b14cc191d885393e5832 Mon Sep 17 00:00:00 2001
From: Shawn Yama <syama@uncharted.software>
Date: Thu, 28 Nov 2024 23:42:20 -0500
Subject: [PATCH] feat: knn project search ui (#5651)

---
 .../components/home/tera-project-table.vue    | 172 ++++++++++++++---
 packages/client/hmi-client/src/page/Home.vue  | 179 ++++++++----------
 .../client/hmi-client/src/services/project.ts |   2 +
 3 files changed, 229 insertions(+), 124 deletions(-)

diff --git a/packages/client/hmi-client/src/components/home/tera-project-table.vue b/packages/client/hmi-client/src/components/home/tera-project-table.vue
index cd9a261761..c930161fbb 100644
--- a/packages/client/hmi-client/src/components/home/tera-project-table.vue
+++ b/packages/client/hmi-client/src/components/home/tera-project-table.vue
@@ -1,23 +1,51 @@
 <template>
-	<DataTable :value="projects" dataKey="id" :rowsPerPageOptions="[10, 20, 50]" scrollable scrollHeight="45rem">
+	<!--The pt wrapper styling enables the table header to stick with the project search bar-->
+	<DataTable
+		:value="projectsWithKnnMatches"
+		:rows="numberOfRows"
+		:rows-per-page-options="[10, 20, 30, 40, 50]"
+		:pt="{ wrapper: { style: { overflow: 'none' } } }"
+		:key="projectTableKey"
+		data-key="id"
+		paginator
+		@page="getProjectAssets"
+	>
 		<Column
 			v-for="(col, index) in selectedColumns"
 			:field="col.field"
 			:header="col.header"
 			:sortable="!['stats', 'score'].includes(col.field)"
 			:key="index"
-			:style="`width: ${getColumnWidth(col.field)}%`"
 		>
 			<template #body="{ data }">
 				<template v-if="col.field === 'score'">
 					{{ Math.round((data.metadata?.score ?? 0) * 100) + '%' }}
 				</template>
 				<template v-if="col.field === 'name'">
-					<a class="project-title-link" @click.stop="emit('open-project', data.id)">
-						{{ data.name }}
-					</a>
+					<a @click.stop="emit('open-project', data.id)">{{ data.name }}</a>
+					<ul>
+						<li
+							v-for="asset in data.projectAssets.slice(0, data.showMore ? data.projectAssets.length : 3)"
+							class="flex align-center gap-2"
+							:key="asset.id"
+						>
+							<tera-asset-icon :assetType="asset.assetType" />
+							<span v-html="highlight(asset.assetName, searchQuery)" />
+						</li>
+					</ul>
+					<Button
+						v-if="data.projectAssets.length > 3"
+						class="p-2 mt-2"
+						:label="data.showMore ? 'Show less' : 'Show more'"
+						text
+						size="small"
+						@click="data.showMore = !data.showMore"
+					/>
+				</template>
+				<template v-else-if="col.field === 'description'">
+					<tera-show-more-text :text="data.description" :lines="1" />
+					<p v-if="data.snippet" class="mt-2" v-html="data.snippet" />
 				</template>
-				<tera-show-more-text v-else-if="col.field === 'description'" :text="data.description" :lines="1" />
 				<template v-if="col.field === 'userName'">
 					{{ data.userName ?? '--' }}
 				</template>
@@ -68,21 +96,42 @@
 </template>
 
 <script setup lang="ts">
+import { isEmpty } from 'lodash';
+import { ref, watch } from 'vue';
 import DataTable from 'primevue/datatable';
 import Column from 'primevue/column';
 import TeraShowMoreText from '@/components/widgets/tera-show-more-text.vue';
 import { formatDdMmmYyyy } from '@/utils/date';
 import DatasetIcon from '@/assets/svg/icons/dataset.svg?component';
-import { Project } from '@/types/Types';
+import { AssetType, Project } from '@/types/Types';
+import type { PageState } from 'primevue/paginator';
+import * as ProjectService from '@/services/project';
+import { highlight } from '@/utils/text';
+import Button from 'primevue/button';
+import { v4 as uuidv4 } from 'uuid';
 import TeraProjectMenu from './tera-project-menu.vue';
+import TeraAssetIcon from '../widgets/tera-asset-icon.vue';
+
+interface ProjectWithKnnSnippet extends Project {
+	snippet?: string;
+	showMore?: boolean;
+}
 
-defineProps<{
+const props = defineProps<{
 	projects: Project[];
 	selectedColumns: { field: string; header: string }[];
+	searchQuery: string;
 }>();
 
 const emit = defineEmits(['open-project']);
 
+const projectsWithKnnMatches = ref<ProjectWithKnnSnippet[]>([]);
+const numberOfRows = ref(20);
+const projectTableKey = ref(uuidv4());
+
+let pageState: PageState = { page: 0, rows: numberOfRows.value, first: 0 };
+let prevSearchQuery = '';
+
 function formatStat(data, key) {
 	const stat = data?.[key];
 	return key === 'contributor-count' ? parseInt(stat ?? '1', 10) : parseInt(stat ?? '0', 10);
@@ -92,18 +141,46 @@ function formatStatTooltip(stat, displayName) {
 	return `${stat} ${displayName}${stat === 1 ? '' : 's'}`;
 }
 
-function getColumnWidth(columnField: string) {
-	switch (columnField) {
-		case 'description':
-			return 40;
-		case 'name':
-			return 40;
-		case 'score':
-			return 5;
-		default:
-			return 100;
-	}
+async function getProjectAssets(event: PageState = pageState) {
+	pageState = event; // Save the current page state so we still know it when the watch is triggered
+	if (isEmpty(props.searchQuery)) return;
+
+	const { rows, first } = event;
+	const searchQuery = props.searchQuery.toLowerCase().trim();
+
+	// Just fetch the asset data we are seeing in the current page
+	projectsWithKnnMatches.value.slice(first, first + rows).forEach(async (project) => {
+		// If assets were fetched before from when we were on that page don't redo it
+		if (!isEmpty(project.projectAssets) && prevSearchQuery === searchQuery) return;
+
+		const projectWithAssets = (await ProjectService.get(project.id)) as ProjectWithKnnSnippet | null;
+		if (!projectWithAssets) return;
+
+		project.projectAssets = projectWithAssets.projectAssets.filter(
+			({ assetName, assetType }) =>
+				assetName.toLowerCase().includes(searchQuery) &&
+				// These assets dont have names
+				assetType !== AssetType.Simulation &&
+				assetType !== AssetType.NotebookSession
+		);
+		project.showMore = false;
+		project.snippet = project.description?.toLowerCase().includes(searchQuery)
+			? highlight(project.description, searchQuery)
+			: undefined;
+	});
+
+	prevSearchQuery = searchQuery;
 }
+
+watch(
+	() => props.projects,
+	() => {
+		projectTableKey.value = uuidv4();
+		projectsWithKnnMatches.value = props.projects;
+		getProjectAssets();
+	},
+	{ immediate: true }
+);
 </script>
 
 <style scoped>
@@ -123,8 +200,50 @@ function getColumnWidth(columnField: string) {
 }
 
 .p-datatable {
-	border: 1px solid var(--surface-border-light);
-	border-radius: var(--border-radius);
+	/* Now the table header sticks along with the project search bar */
+	&:deep(thead) {
+		top: 105px;
+		z-index: 1;
+	}
+}
+
+:deep(.p-paginator-bottom) {
+	position: sticky;
+	bottom: 0;
+	outline: 1px solid var(--surface-border-light);
+}
+
+:deep(.p-paginator) {
+	border-radius: 0;
+	padding: var(--gap-2) var(--gap-4);
+}
+
+.p-datatable:deep(ul) {
+	margin-top: var(--gap-4);
+	color: var(--text-color-primary);
+	display: flex;
+	flex-direction: column;
+	gap: var(--gap-2);
+	font-size: var(--font-caption);
+}
+
+.p-datatable:deep(li > span) {
+	text-overflow: ellipsis;
+	display: block;
+	overflow: hidden;
+	max-width: 20vw;
+}
+
+.p-datatable:deep(p) {
+	color: var(--text-color-primary);
+	max-width: 22vw;
+	text-overflow: ellipsis;
+	display: block;
+	overflow: hidden;
+}
+
+.p-datatable:deep(.highlight) {
+	font-weight: var(--font-weight-semibold);
 }
 
 .p-datatable:deep(.p-datatable-tbody > tr > td),
@@ -136,7 +255,9 @@ function getColumnWidth(columnField: string) {
 }
 
 .p-datatable:deep(.p-datatable-thead > tr > th) {
-	padding: 1rem 0.5rem;
+	padding-left: var(--gap-5);
+	padding-top: var(--gap-3);
+	padding-bottom: var(--gap-3);
 	background-color: var(--surface-ground);
 }
 
@@ -145,8 +266,8 @@ function getColumnWidth(columnField: string) {
 }
 
 .p-datatable:deep(.p-datatable-tbody > tr > td) {
+	padding-left: var(--gap-5);
 	color: var(--text-color-secondary);
-	padding: 0.5rem;
 	max-width: 32rem;
 }
 
@@ -165,7 +286,10 @@ function getColumnWidth(columnField: string) {
 .p-datatable:deep(.p-datatable-tbody > tr > td > a) {
 	color: var(--text-color-primary);
 	font-weight: var(--font-weight-semibold);
-	cursor: pointer;
+	text-overflow: ellipsis;
+	display: block;
+	overflow: hidden;
+	max-width: 20vw;
 }
 
 .p-datatable:deep(.p-datatable-tbody > tr > td > a:hover) {
diff --git a/packages/client/hmi-client/src/page/Home.vue b/packages/client/hmi-client/src/page/Home.vue
index 2c5ad166d4..d6d0372a68 100644
--- a/packages/client/hmi-client/src/page/Home.vue
+++ b/packages/client/hmi-client/src/page/Home.vue
@@ -31,39 +31,36 @@
 				<TabView @tab-change="tabChange" :active-index="activeTabIndex" :key="activeTabIndex">
 					<TabPanel v-for="(tab, i) in TabTitles" :header="tab" :key="i">
 						<section class="filter-and-sort">
-							<div class="mr-3">
+							<span class="search">
 								<tera-input-text
 									v-model="searchProjectsQuery"
 									placeholder="Search for projects"
 									id="searchProject"
 									:icon="isSearchLoading ? 'pi pi-spin pi-spinner' : 'pi pi-search'"
-									class="searchProjectsInput"
+									class="search-input"
+									@keydown.enter="searchedProjects"
 								/>
-							</div>
-							<div>
-								<span v-if="view === ProjectsView.Cards">
-									<Dropdown v-model="selectedSort" :options="sortOptions" class="sort-options-dropdown" />
-								</span>
-								<MultiSelect
-									v-if="view === ProjectsView.Table"
-									:modelValue="selectedColumns"
-									:options="columns"
-									:maxSelectedLabels="1"
-									:selected-items-label="`{0} columns displayed`"
-									optionLabel="header"
-									@update:modelValue="onToggle"
-									placeholder="Add or remove columns"
-									class="p-inputtext-sm"
-								/>
-							</div>
-							<div>
-								<SelectButton
-									v-if="!isEmpty(searchedAndFilterProjects)"
-									:model-value="view"
-									@change="selectChange"
-									:options="viewOptions"
-									option-value="value"
-								>
+								<Button label="Search" @click="searchedProjects" />
+							</span>
+							<Dropdown
+								v-if="view === ProjectsView.Cards"
+								v-model="selectedSort"
+								:options="sortOptions"
+								class="sort-options-dropdown"
+							/>
+							<MultiSelect
+								v-if="view === ProjectsView.Table"
+								:modelValue="selectedColumns"
+								:options="columns"
+								:maxSelectedLabels="1"
+								:selected-items-label="`{0} columns displayed`"
+								optionLabel="header"
+								@update:modelValue="onToggle"
+								placeholder="Add or remove columns"
+								class="p-inputtext-sm"
+							/>
+							<div class="ml-auto flex gap-3">
+								<SelectButton :model-value="view" @change="selectChange" :options="viewOptions" option-value="value">
 									<template #option="slotProps">
 										<span class="p-button-label">{{ slotProps.option.value }}</span>
 									</template>
@@ -77,43 +74,41 @@
 								<Button icon="pi pi-plus" label="New project" @click="openCreateProjectModal" />
 							</div>
 						</section>
-						<section class="projects">
-							<div v-if="!isLoadingProjects && isEmpty(searchedAndFilterProjects)" class="no-projects">
-								<Vue3Lottie :animationData="EmptySeed" :height="200" :width="200" />
-								<p class="mt-4">
-									<template v-if="tab === TabTitles.MyProjects">Get started by creating a new project</template>
-									<template v-if="tab === TabTitles.SampleProjects">Sample projects coming soon</template>
-									<template v-if="tab === TabTitles.PublicProjects">You don't have any shared projects</template>
-								</p>
-							</div>
-							<ul v-else-if="view === ProjectsView.Cards" class="project-cards-grid">
-								<template v-if="cloningProjects.length && !isLoadingProjects">
-									<li v-for="item in cloningProjects" :key="item.id">
-										<tera-project-card v-if="item.id" :project="item" :is-copying="true" />
-									</li>
-								</template>
-								<template v-if="isLoadingProjects">
-									<li v-for="i in 3" :key="i">
-										<tera-project-card />
-									</li>
-								</template>
-								<li v-else v-for="project in searchedAndFilterProjects" :key="project.id">
-									<tera-project-card
-										v-if="project.id"
-										:project="project"
-										@click="openProject(project.id)"
-										@copied-project="tabChange({ index: 0 })"
-									/>
+						<div v-if="!isLoadingProjects && isEmpty(searchedAndFilterProjects)" class="no-projects">
+							<Vue3Lottie :animationData="EmptySeed" :height="200" :width="200" />
+							<p class="mt-4">
+								<template v-if="tab === TabTitles.MyProjects">Get started by creating a new project</template>
+								<template v-if="tab === TabTitles.SampleProjects">Sample projects coming soon</template>
+								<template v-if="tab === TabTitles.PublicProjects">You don't have any shared projects</template>
+							</p>
+						</div>
+						<ul v-else-if="view === ProjectsView.Cards" class="project-cards-grid">
+							<template v-if="cloningProjects.length && !isLoadingProjects">
+								<li v-for="item in cloningProjects" :key="item.id">
+									<tera-project-card v-if="item.id" :project="item" :is-copying="true" />
 								</li>
-							</ul>
-							<tera-project-table
-								v-else-if="view === ProjectsView.Table"
-								:projects="searchedAndFilterProjects"
-								:selected-columns="selectedColumns"
-								@open-project="openProject"
-								class="project-table"
-							/>
-						</section>
+							</template>
+							<template v-if="isLoadingProjects">
+								<li v-for="i in 3" :key="i">
+									<tera-project-card />
+								</li>
+							</template>
+							<li v-else v-for="project in searchedAndFilterProjects" :key="project.id">
+								<tera-project-card
+									v-if="project.id"
+									:project="project"
+									@click="openProject(project.id)"
+									@copied-project="tabChange({ index: 0 })"
+								/>
+							</li>
+						</ul>
+						<tera-project-table
+							v-else-if="view === ProjectsView.Table"
+							:projects="searchedAndFilterProjects"
+							:selected-columns="selectedColumns"
+							:search-query="searchProjectsQuery"
+							@open-project="openProject"
+						/>
 					</TabPanel>
 				</TabView>
 			</section>
@@ -135,7 +130,7 @@ import TabView from 'primevue/tabview';
 import TabPanel from 'primevue/tabpanel';
 import { useRouter } from 'vue-router';
 import { RouteName } from '@/router/routes';
-import { debounce, isEmpty } from 'lodash';
+import { isEmpty } from 'lodash';
 import TeraProjectTable from '@/components/home/tera-project-table.vue';
 import TeraProjectCard from '@/components/home/tera-project-card.vue';
 import { useProjects } from '@/composables/project';
@@ -322,22 +317,10 @@ watch(cloningProjects, () => {
 	}
 });
 
-function addRankingToColumns() {
-	removeRankingFromColumns();
-	columns.value.unshift({ field: 'score', header: 'Ranking' });
-	selectedColumns.value.unshift({ field: 'score', header: 'Ranking' });
-}
-
-function removeRankingFromColumns() {
-	columns.value = columns.value.filter((col) => col.field !== 'score');
-	selectedColumns.value = selectedColumns.value.filter((col) => col.field !== 'score');
-}
-
 async function searchedProjects() {
 	// If the search query is empty, show all projects
 	if (isEmpty(searchProjectsQuery.value)) {
 		searchProjectsResults.value = [];
-		removeRankingFromColumns();
 		return;
 	}
 
@@ -350,13 +333,10 @@ async function searchedProjects() {
 	} else {
 		// Display search results using the table view
 		view.value = ProjectsView.Table;
-		addRankingToColumns();
 	}
 
 	isSearchLoading.value = false;
 }
-
-watch(searchProjectsQuery, debounce(searchedProjects, 500));
 </script>
 
 <style scoped>
@@ -474,9 +454,7 @@ header {
 	flex: 1;
 	background-color: #f9f9f9;
 }
-.searchProjectsInput {
-	width: 32rem;
-}
+
 .p-dropdown,
 .p-multiselect {
 	min-width: 17rem;
@@ -491,27 +469,31 @@ header {
 	background-color: #f4f4f4;
 	border-top: 1px solid var(--surface-border-light);
 	border-bottom: 1px solid var(--surface-border-light);
-	padding: var(--gap-2) var(--gap-4);
+	padding: var(--gap-3) var(--gap-4);
 	display: flex;
-	justify-content: space-between;
-	align-items: center;
+	gap: var(--gap-3);
 	/* Accommodate for height of projects tabs*/
-	top: 44px;
-}
-
-.filter-and-sort label {
-	padding-right: 0.25rem;
-	font-size: var(--font-caption);
+	top: 42px;
 }
 
-.filter-and-sort > div {
+.search {
 	display: flex;
-	gap: 16px;
-	height: 40px;
-}
+	flex: 1;
+	max-width: 50rem;
+
+	& > .search-input {
+		flex: 1;
 
-.filter-and-sort > div:last-child {
-	margin-left: auto;
+		&:deep(main) {
+			border-top-right-radius: 0;
+			border-bottom-right-radius: 0;
+		}
+	}
+
+	&:deep(.p-button) {
+		border-top-left-radius: 0;
+		border-bottom-left-radius: 0;
+	}
 }
 
 .sort-options-dropdown {
@@ -525,9 +507,6 @@ header {
 	padding: 16px;
 	list-style: none;
 }
-:deep(.project-table) {
-	margin: var(--gap-4);
-}
 
 .no-projects {
 	margin-top: 8rem;
diff --git a/packages/client/hmi-client/src/services/project.ts b/packages/client/hmi-client/src/services/project.ts
index 0dd39149b9..467b7ff1db 100644
--- a/packages/client/hmi-client/src/services/project.ts
+++ b/packages/client/hmi-client/src/services/project.ts
@@ -273,6 +273,8 @@ const icons = new Map<string | AssetType, string | Component>([
 	[AssetType.Model, 'share-2'],
 	[AssetType.Dataset, DatasetIcon as Component],
 	[AssetType.Simulation, 'settings'],
+	[AssetType.ModelConfiguration, 'settings'],
+	[AssetType.InterventionPolicy, 'settings'],
 	[AssetType.Code, 'code'],
 	[AssetType.Workflow, 'git-merge'],
 	['overview', 'layout']