From 5585fa10c4a133953481720a96fd4b3eef9d66fe Mon Sep 17 00:00:00 2001
From: Yohann Paris <github@yohannparis.com>
Date: Mon, 18 Dec 2023 10:44:06 -0500
Subject: [PATCH 01/11] change of font sizes

---
 .../hmi-client/src/assets/css/theme/_fonts.scss       | 11 +++++------
 .../hmi-client/src/assets/css/theme/_variables.scss   |  8 ++++----
 2 files changed, 9 insertions(+), 10 deletions(-)

diff --git a/packages/client/hmi-client/src/assets/css/theme/_fonts.scss b/packages/client/hmi-client/src/assets/css/theme/_fonts.scss
index 0acc6a427a..de8cb68d42 100644
--- a/packages/client/hmi-client/src/assets/css/theme/_fonts.scss
+++ b/packages/client/hmi-client/src/assets/css/theme/_fonts.scss
@@ -13,18 +13,17 @@ h2 {
 }
 
 h4 {
-    font-size: 20px;
-    letter-spacing: 0.15px;
+    font-size: $fontBodyLarge;
 }
 
 h5 {
-    font-size: 16px;
+    font-size: $fontBodyMedium;
 }
 
 h6 {
-    font-size: 14px;
+    font-size: $fontBodySmall;
 }
 
 h7 {
-    font-size: var(--font-caption);
-}
\ No newline at end of file
+    font-size: $fontCaption;
+}
diff --git a/packages/client/hmi-client/src/assets/css/theme/_variables.scss b/packages/client/hmi-client/src/assets/css/theme/_variables.scss
index e01036906f..bccc2f9933 100644
--- a/packages/client/hmi-client/src/assets/css/theme/_variables.scss
+++ b/packages/client/hmi-client/src/assets/css/theme/_variables.scss
@@ -35,13 +35,13 @@ $fontBodySmall: 14px;
 $fontBodyMedium: 16px;
 $fontBodyLarge: 18px;
 $fontFamily: Figtree, Helvetica Neue Light, Helvetica Neue, Helvetica, Arial, Lucida Grande, sans-serif !default;
-$fontSize: $fontBodyMedium;
+$fontSize: $fontBodySmall;
 $fontWeight: 400 !default;
 $fontWeightSemiBold: 600;
 
 //global
 $textColor: rgb(16, 24, 40);
-$textSecondaryColor: $emphasis-medium !default; 
+$textSecondaryColor: $emphasis-medium !default;
 $borderRadius: 4px !default;
 $mediumBorderRadius: 6px !default;
 $bigBorderRadius: 8px !default;
@@ -693,7 +693,7 @@ $overlayMenuBg: $menuBg !default;
 $overlayMenuBorder: 0 none !default;
 $overlayMenuShadow: 0 2px 4px -1px rgba(0, 0, 0, .2), 0 4px 5px 0 rgba(0, 0, 0, .14), 0 1px 10px 0 rgba(0, 0, 0, .12) !default;
 $verticalMenuPadding: .5rem 0 !default;
-$menuSeparatorMargin: .5rem 0 !default; 
+$menuSeparatorMargin: .5rem 0 !default;
 
 $breadcrumbPadding: 1rem !default;
 $breadcrumbBg: #ffffff !default;
@@ -956,4 +956,4 @@ $petri-inputBox: var(--surface-0);
 	--node-header-hover: var(--text-color-subdued);
 	--z-index-modal: 1000;
 	--keyboard-zindex: calc(var(--z-index-modal) + 100);
-}
\ No newline at end of file
+}

From ca37e1fcb6cee9f3ed44e73eb2120c938f774821 Mon Sep 17 00:00:00 2001
From: Yohann Paris <github@yohannparis.com>
Date: Mon, 18 Dec 2023 10:47:09 -0500
Subject: [PATCH 02/11] fix slider panel header orientation

---
 .../hmi-client/src/components/widgets/tera-slider-panel.vue     | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/client/hmi-client/src/components/widgets/tera-slider-panel.vue b/packages/client/hmi-client/src/components/widgets/tera-slider-panel.vue
index 3213694dd8..b1e71ac9bd 100644
--- a/packages/client/hmi-client/src/components/widgets/tera-slider-panel.vue
+++ b/packages/client/hmi-client/src/components/widgets/tera-slider-panel.vue
@@ -125,7 +125,7 @@ i.slider-header-item {
 }
 
 .slider-tab-header h5 {
-	transform: rotate(180deg);
+	transform: rotate(0deg);
 	writing-mode: vertical-lr;
 }
 

From 178593d4f99f9fe3b27956a42c95f137d4bfd519 Mon Sep 17 00:00:00 2001
From: Yohann Paris <github@yohannparis.com>
Date: Mon, 18 Dec 2023 10:51:00 -0500
Subject: [PATCH 03/11] Change Cards to a different icon

---
 packages/client/hmi-client/src/page/Home.vue                 | 2 +-
 packages/client/hmi-client/src/page/project/tera-project.vue | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/client/hmi-client/src/page/Home.vue b/packages/client/hmi-client/src/page/Home.vue
index 061262f0db..7c0918f4ee 100644
--- a/packages/client/hmi-client/src/page/Home.vue
+++ b/packages/client/hmi-client/src/page/Home.vue
@@ -160,7 +160,7 @@ const sortOptions = [
 
 const view = ref(ProjectsView.Cards);
 const viewOptions = ref([
-	{ value: ProjectsView.Cards, icon: 'pi pi-image' },
+	{ value: ProjectsView.Cards, icon: 'pi pi-credit-card' },
 	{ value: ProjectsView.Table, icon: 'pi pi-list' }
 ]);
 
diff --git a/packages/client/hmi-client/src/page/project/tera-project.vue b/packages/client/hmi-client/src/page/project/tera-project.vue
index c4987d71e0..4f91f02155 100644
--- a/packages/client/hmi-client/src/page/project/tera-project.vue
+++ b/packages/client/hmi-client/src/page/project/tera-project.vue
@@ -101,7 +101,7 @@ const assetName = computed<string>(() => {
 	/**
 	 * FIXME: to properly type this we'd want to have a base type with common attributes id/name ... etc
 	 *
-	 *   const list = assets[ pageType.value as string] as IdetifiableAsset[]
+	 *   const list = assets[ pageType.value as string] as IdentifiableAsset[]
 	 *   const asset = list.find(...)
 	 */
 	if (assets) {

From 1e66f2fa8e0bdea8534fd8fdef52140733cad95d Mon Sep 17 00:00:00 2001
From: Yohann Paris <github@yohannparis.com>
Date: Mon, 18 Dec 2023 11:05:13 -0500
Subject: [PATCH 04/11] Update input padding default

---
 .../src/assets/css/theme/_variables.scss      |  3 ++-
 .../components/tera-resource-sidebar.vue      | 26 +++++++------------
 2 files changed, 12 insertions(+), 17 deletions(-)

diff --git a/packages/client/hmi-client/src/assets/css/theme/_variables.scss b/packages/client/hmi-client/src/assets/css/theme/_variables.scss
index bccc2f9933..e60ab2cb1d 100644
--- a/packages/client/hmi-client/src/assets/css/theme/_variables.scss
+++ b/packages/client/hmi-client/src/assets/css/theme/_variables.scss
@@ -58,6 +58,7 @@ $disabledOpacity: .38 !default;
 $maskBg: rgba(0, 0, 0, 0.32) !default;
 $loadingIconFontSize: 2rem !default;
 $errorColor: #B00020 !default;
+$padding: .5rem !default;
 
 //selected state
 $highlightBg: #E9FFFC;
@@ -86,7 +87,7 @@ $actionIconHoverColor: $textSecondaryColor !default;
 $actionIconBorderRadius: 50% !default;
 
 //input field (e.g. inputtext, spinner, inputmask)
-$inputPadding: 1rem 1rem !default;
+$inputPadding: $padding $padding !default;
 $inputTextFontSize: $fontSize;
 $inputBg: #ffffff !default;
 $inputTextColor: $emphasis-high !default;
diff --git a/packages/client/hmi-client/src/page/project/components/tera-resource-sidebar.vue b/packages/client/hmi-client/src/page/project/components/tera-resource-sidebar.vue
index af707df16c..5966cc8c1f 100644
--- a/packages/client/hmi-client/src/page/project/components/tera-resource-sidebar.vue
+++ b/packages/client/hmi-client/src/page/project/components/tera-resource-sidebar.vue
@@ -5,15 +5,7 @@
 				<i class="pi pi-search" />
 				<InputText v-model="searchAsset" class="resource-panel-search" placeholder="Find" />
 			</span>
-			<Button
-				class="new"
-				icon="pi pi-plus"
-				label="New"
-				severity="secondary"
-				size="small"
-				outlined
-				@click="toggleOptionsMenu"
-			/>
+			<Button class="new" label="New" size="small" outlined @click="toggleOptionsMenu" />
 			<Menu ref="optionsMenu" :model="optionsMenuItems" :popup="true">
 				<template #item="slotProps">
 					<a class="p-menuitem-link">
@@ -239,7 +231,15 @@ nav {
 }
 
 header {
-	padding: 0 0.5rem;
+	padding-left: 0.5rem;
+	padding-right: 0.5rem;
+	display: flex;
+	flex-direction: row;
+
+	& > * {
+		align-self: stretch;
+		height: 100%;
+	}
 }
 
 .icon {
@@ -336,13 +336,7 @@ header {
 }
 
 .resource-panel-search {
-	padding: 0.51rem 0.5rem;
 	width: 100%;
-	font-size: var(--font-caption);
-}
-
-.new {
-	width: 6rem;
 }
 
 :deep(.p-button-icon-left.icon) {

From 9f237f42ade8f67d702369033da7b3cbcfcc9bc3 Mon Sep 17 00:00:00 2001
From: Yohann Paris <github@yohannparis.com>
Date: Mon, 18 Dec 2023 11:16:49 -0500
Subject: [PATCH 05/11] add border for active asset

---
 .../src/page/project/components/tera-resource-sidebar.vue | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/packages/client/hmi-client/src/page/project/components/tera-resource-sidebar.vue b/packages/client/hmi-client/src/page/project/components/tera-resource-sidebar.vue
index 5966cc8c1f..20c7237245 100644
--- a/packages/client/hmi-client/src/page/project/components/tera-resource-sidebar.vue
+++ b/packages/client/hmi-client/src/page/project/components/tera-resource-sidebar.vue
@@ -283,6 +283,7 @@ header {
 	display: inline-flex;
 	overflow: hidden;
 	padding: 0;
+	border-radius: 0; /* Remove the border-radius to end nitely with the border of the sidebar */
 }
 
 ::v-deep(.asset-button.p-button > span) {
@@ -294,6 +295,13 @@ header {
 
 ::v-deep(.asset-button.p-button[active='true']) {
 	background-color: var(--surface-highlight);
+
+	&::after {
+		position: absolute;
+		content: ' ';
+		border-left: 4px solid var(--primary-color);
+		height: 100%;
+	}
 }
 
 ::v-deep(.asset-button.p-button .p-button-label) {

From b6399979df023ffbdee5f6ced9dc3f85651ded57 Mon Sep 17 00:00:00 2001
From: Yohann Paris <github@yohannparis.com>
Date: Mon, 18 Dec 2023 11:18:28 -0500
Subject: [PATCH 06/11] Change the hader of operator to be h6

---
 .../src/components/operator/tera-operator-header.vue          | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/client/hmi-client/src/components/operator/tera-operator-header.vue b/packages/client/hmi-client/src/components/operator/tera-operator-header.vue
index 91738a5236..e10933c506 100644
--- a/packages/client/hmi-client/src/components/operator/tera-operator-header.vue
+++ b/packages/client/hmi-client/src/components/operator/tera-operator-header.vue
@@ -1,6 +1,6 @@
 <template>
 	<header :class="`${status} ${interactionClasses}`">
-		<h5>{{ name }}</h5>
+		<h6>{{ name }}</h6>
 		<Button
 			icon="pi pi-ellipsis-v"
 			class="p-button-icon-only p-button-text p-button-rounded"
@@ -99,7 +99,7 @@ header {
 	color: var(--gray-0);
 }
 
-h5 {
+h6 {
 	overflow: hidden;
 	text-overflow: ellipsis;
 	font-weight: normal;

From 0703466c22ed6694e2879b932a36be6d9a7787db Mon Sep 17 00:00:00 2001
From: Yohann Paris <github@yohannparis.com>
Date: Mon, 18 Dec 2023 11:21:32 -0500
Subject: [PATCH 07/11] bring back accordion design to og

---
 .../src/assets/css/theme/extensions/_accordion.scss         | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/packages/client/hmi-client/src/assets/css/theme/extensions/_accordion.scss b/packages/client/hmi-client/src/assets/css/theme/extensions/_accordion.scss
index d5f828eda5..0377c72aae 100644
--- a/packages/client/hmi-client/src/assets/css/theme/extensions/_accordion.scss
+++ b/packages/client/hmi-client/src/assets/css/theme/extensions/_accordion.scss
@@ -16,11 +16,7 @@
 			border-bottom-right-radius: $borderRadius;
 		}
 
-
-
 		.p-accordion-toggle-icon {
-			order: 1;
-			margin-left: auto;
 			transition: transform $transitionDuration;
 		}
 
@@ -54,4 +50,4 @@
 		color: var(--text-color-subdued);
 		content: ' (' attr(data-count)')';
 	}
-}
\ No newline at end of file
+}

From 78d9cc119d9bf0aae3019562cfcb62c0f8b339da Mon Sep 17 00:00:00 2001
From: Yohann Paris <github@yohannparis.com>
Date: Mon, 18 Dec 2023 11:24:14 -0500
Subject: [PATCH 08/11] Put the arrow colour back to normal

---
 .../css/theme/designer/components/panel/_accordion.scss      | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/packages/client/hmi-client/src/assets/css/theme/designer/components/panel/_accordion.scss b/packages/client/hmi-client/src/assets/css/theme/designer/components/panel/_accordion.scss
index fb13b18df6..3e40c65b59 100644
--- a/packages/client/hmi-client/src/assets/css/theme/designer/components/panel/_accordion.scss
+++ b/packages/client/hmi-client/src/assets/css/theme/designer/components/panel/_accordion.scss
@@ -13,7 +13,6 @@
 
 			.p-accordion-toggle-icon {
 				margin-right: $inlineSpacing;
-				color: var(--text-color-subdued);
 			}
 
 			&:focus {
@@ -77,7 +76,7 @@
 		border-bottom-left-radius: $borderRadius;
 
 	}
-	
+
 	.p-accordion-tab {
 		margin-bottom: $accordionSpacing;
 
@@ -132,4 +131,4 @@
 			}
 		}
 	}
-}
\ No newline at end of file
+}

From 7971674ff52917d90350bb6e218143be113cbf0c Mon Sep 17 00:00:00 2001
From: Yohann Paris <github@yohannparis.com>
Date: Mon, 18 Dec 2023 11:34:51 -0500
Subject: [PATCH 09/11] add background-color for model diagram

---
 .../petrinet/model-diagrams/tera-model-diagram.vue  | 13 ++++++++-----
 1 file changed, 8 insertions(+), 5 deletions(-)

diff --git a/packages/client/hmi-client/src/components/model/petrinet/model-diagrams/tera-model-diagram.vue b/packages/client/hmi-client/src/components/model/petrinet/model-diagrams/tera-model-diagram.vue
index 5fa65c8518..f7884ed03e 100644
--- a/packages/client/hmi-client/src/components/model/petrinet/model-diagrams/tera-model-diagram.vue
+++ b/packages/client/hmi-client/src/components/model/petrinet/model-diagrams/tera-model-diagram.vue
@@ -469,11 +469,6 @@ section math-editor {
 	justify-content: center;
 }
 
-.edit-button {
-	margin-left: 5px;
-	margin-right: 5px;
-}
-
 /* Let svg dynamically resize when the sidebar opens/closes or page resizes */
 :deep(.graph-element svg) {
 	width: 100%;
@@ -492,6 +487,14 @@ section math-editor {
 	background-color: var(--surface-secondary);
 	height: 100%;
 }
+
+:deep(.graph-element .p-button) {
+	&,
+	&:hover {
+		background-color: var(--surface-secondary);
+	}
+}
+
 .legend {
 	position: absolute;
 	bottom: 0;

From 486a6cec7c2511354ab7ff3cf60c9baeef4f9de3 Mon Sep 17 00:00:00 2001
From: Yohann Paris <github@yohannparis.com>
Date: Mon, 18 Dec 2023 13:27:14 -0500
Subject: [PATCH 10/11] Move the search bar to the data-explorte

---
 .../src/components/navbar/tera-navbar.vue     |  30 ----
 .../src/page/data-explorer/DataExplorer.vue   | 150 +++++-------------
 .../components/tera-filter-bar.vue            |   2 +-
 3 files changed, 42 insertions(+), 140 deletions(-)

diff --git a/packages/client/hmi-client/src/components/navbar/tera-navbar.vue b/packages/client/hmi-client/src/components/navbar/tera-navbar.vue
index aa1edba408..fb6954b816 100644
--- a/packages/client/hmi-client/src/components/navbar/tera-navbar.vue
+++ b/packages/client/hmi-client/src/components/navbar/tera-navbar.vue
@@ -19,14 +19,6 @@
 			</div>
 			<Menu ref="navigationMenu" :model="navMenuItems" :popup="true" class="navigation-menu" />
 		</section>
-		<tera-searchbar
-			v-if="active"
-			class="search-bar"
-			ref="searchBarRef"
-			:show-suggestions="showSuggestions"
-			@query-changed="updateRelatedTerms"
-			@toggle-search-by-example="searchByExampleModalToggled"
-		/>
 		<section v-if="active" class="header-right">
 			<Avatar :label="userInitials" class="avatar m-2" shape="circle" @click="showUserMenu" />
 			<Menu ref="userMenu" :model="userMenuItems" :popup="true" />
@@ -131,10 +123,8 @@ import Chip from 'primevue/chip';
 import Dialog from 'primevue/dialog';
 import Menu from 'primevue/menu';
 import { MenuItem } from 'primevue/menuitem';
-import TeraSearchbar from '@/components/navbar/tera-searchbar.vue';
 import { RoutePath, useCurrentRoute } from '@/router/index';
 import { RouteMetadata, RouteName } from '@/router/routes';
-import { getRelatedTerms } from '@/services/data';
 import useAuthStore from '@/stores/auth';
 import InputText from 'primevue/inputtext';
 import TeraModal from '@/components/widgets/tera-modal.vue';
@@ -146,7 +136,6 @@ import { useProjects } from '@/composables/project';
 
 defineProps<{
 	active: boolean;
-	showSuggestions: boolean;
 }>();
 
 /*
@@ -373,25 +362,6 @@ function closeLogoutDialog() {
  * Search
  */
 const searchBarRef = ref();
-const terms = ref<string[]>([]);
-
-async function updateRelatedTerms(query?: string) {
-	if (query || query === '' || !isDataExplorer.value) terms.value = await getRelatedTerms(query);
-}
-
-function searchByExampleModalToggled() {
-	// TODO
-	// toggle the search by example modal represented by the component search-by-example
-	// which may be used as follows
-	/*
-	<search-by-example
-		v-if="searchByExampleModal"
-		:item="searchByExampleItem"
-		@search="onSearchByExample"
-		@hide="searchByExampleModal = false"
-	/>
-	*/
-}
 
 watch(
 	() => useProjects().allProjects.value,
diff --git a/packages/client/hmi-client/src/page/data-explorer/DataExplorer.vue b/packages/client/hmi-client/src/page/data-explorer/DataExplorer.vue
index 5e1932755d..b377bc6368 100644
--- a/packages/client/hmi-client/src/page/data-explorer/DataExplorer.vue
+++ b/packages/client/hmi-client/src/page/data-explorer/DataExplorer.vue
@@ -1,8 +1,5 @@
 <template>
 	<main class="data-explorer-container flex flex-column">
-		<section class="filter-bar">
-			<tera-filter-bar :topic-options="topicOptions" @filter-changed="executeNewQuery" />
-		</section>
 		<section class="flex h-full relative overflow-hidden">
 			<tera-slider-panel
 				content-width="240px"
@@ -21,6 +18,16 @@
 				</template>
 			</tera-slider-panel>
 			<div class="results-content">
+				<div class="search-nav">
+					<tera-searchbar
+						class="search-bar"
+						ref="searchBarRef"
+						@query-changed="updateRelatedTerms"
+						@toggle-search-by-example="searchByExampleModalToggled"
+						:show-suggestions="false"
+					/>
+					<tera-filter-bar :topic-options="topicOptions" @filter-changed="executeNewQuery" />
+				</div>
 				<SelectButton
 					:model-value="resourceType"
 					@change="if ($event.value) resourceType = $event.value;"
@@ -52,47 +59,6 @@
 				:search-term="searchTerm"
 				@toggle-data-item-selected="toggleDataItemSelected"
 			/>
-			<tera-slider-panel
-				class="resources-slider"
-				:content-width="sliderWidth"
-				direction="right"
-				header="Selected resources"
-				v-model:is-open="isSliderResourcesOpen"
-				:indicator-value="selectedSearchItems.length"
-			>
-				<template v-slot:header>
-					<tera-selected-resources-header-pane
-						:selected-search-items="selectedSearchItems"
-						@close="isSliderResourcesOpen = false"
-						@clear-selected="clearItemSelected"
-					/>
-				</template>
-				<template v-slot:subHeader>
-					<div v-if="selectedSearchItems.length == 1" class="sub-header-title">
-						{{ selectedSearchItems.length }} item
-					</div>
-					<div v-if="selectedSearchItems.length > 1" class="sub-header-title">
-						{{ selectedSearchItems.length }} items
-					</div>
-					<div v-if="selectedSearchItems.length == 0">
-						<div class="sub-header-title">Empty</div>
-					</div>
-				</template>
-				<template v-slot:content>
-					<div v-if="selectedSearchItems.length == 0" class="empty-cart-image-container">
-						<div class="empty-cart-image">
-							<img src="@/assets/svg/seed.svg" alt="Picture of a seed" />
-						</div>
-						<p>Selected resources will appear here</p>
-					</div>
-					<tera-selected-resources-options-pane
-						:selected-search-items="selectedSearchItems"
-						@toggle-data-item-selected="toggleDataItemSelected"
-						@find-related-content="onFindRelatedContent"
-						@find-similar-content="onFindSimilarContent"
-					/>
-				</template>
-			</tera-slider-panel>
 		</section>
 	</main>
 </template>
@@ -101,7 +67,7 @@
 import { computed, onMounted, onUnmounted, ref, watch } from 'vue';
 import TeraSliderPanel from '@/components/widgets/tera-slider-panel.vue';
 import SelectButton from 'primevue/selectbutton';
-import { fetchData, getDocumentById } from '@/services/data';
+import { fetchData, getDocumentById, getRelatedTerms } from '@/services/data';
 import {
 	ResourceType,
 	ResultType,
@@ -124,11 +90,10 @@ import { getResourceID, isDataset, isModel, isDocument, validate } from '@/utils
 import { cloneDeep, intersectionBy, isEmpty, isEqual, max, min, unionBy } from 'lodash';
 import { useRoute } from 'vue-router';
 import TeraPreviewPanel from '@/page/data-explorer/components/tera-preview-panel.vue';
-import TeraSelectedResourcesOptionsPane from '@/page/data-explorer/components/tera-selected-resources-options-pane.vue';
-import TeraSelectedResourcesHeaderPane from '@/page/data-explorer/components/tera-selected-resources-header-pane.vue';
 import TeraFacetsPanel from '@/page/data-explorer/components/tera-facets-panel.vue';
 import TeraSearchResultsList from '@/page/data-explorer/components/tera-search-results-list.vue';
 import { XDDFacetsItemResponse } from '@/types/Types';
+import TeraSearchbar from '@/components/navbar/tera-searchbar.vue';
 import { useSearchByExampleOptions } from './search-by-example';
 import TeraFilterBar from './components/tera-filter-bar.vue';
 
@@ -417,30 +382,6 @@ const onSearchByExample = async (searchOptions: SearchByExampleOptions) => {
 	}
 };
 
-// helper function to bypass the search-by-example modal
-//  by executing a search by example and refreshing the output
-const onFindRelatedContent = (item) => {
-	searchByExampleItem.value = item.item;
-	searchByExampleOptions.value = {
-		similarContent: false,
-		forwardCitation: false,
-		backwardCitation: false,
-		relatedContent: true
-	};
-};
-
-// helper function to bypass the search-by-example modal
-//  by executing a search by example and refreshing the output
-const onFindSimilarContent = (item) => {
-	searchByExampleItem.value = item.item;
-	searchByExampleOptions.value = {
-		similarContent: true,
-		forwardCitation: false,
-		backwardCitation: false,
-		relatedContent: false
-	};
-};
-
 const toggleDataItemSelected = (dataItem: { item: ResultType; type?: string }) => {
 	let foundIndx = -1;
 	const item = dataItem.item;
@@ -499,17 +440,6 @@ watch(resourceType, async (newResourceType, oldResourceType) => {
 	}
 });
 
-const clearItemSelected = () => {
-	selectedSearchItems.value = [];
-};
-// const addPreviewItemToCart = () => {
-// 	if (previewItem.value) {
-// 		toggleDataItemSelected( {item: previewItem.value } );
-// 		previewItem.value = null;
-// 		isSliderResourcesOpen.value = true;
-// 	}
-// };
-
 async function executeNewQuery() {
 	if (route.query?.q?.toString() === '' || route.query?.q?.toString()) {
 		searchTerm.value = route.query?.q?.toString();
@@ -593,6 +523,26 @@ onMounted(async () => {
 onUnmounted(() => {
 	queryStore.reset();
 });
+
+const terms = ref<string[]>([]);
+
+async function updateRelatedTerms(query?: string) {
+	if (query || query === '') terms.value = await getRelatedTerms(query);
+}
+
+function searchByExampleModalToggled() {
+	// TODO
+	// toggle the search by example modal represented by the component search-by-example
+	// which may be used as follows
+	/*
+	<search-by-example
+		v-if="searchByExampleModal"
+		:item="searchByExampleItem"
+		@search="onSearchByExample"
+		@hide="searchByExampleModal = false"
+	/>
+	*/
+}
 </script>
 
 <style scoped>
@@ -608,38 +558,20 @@ onUnmounted(() => {
 	margin: 0.5rem 0.5rem 0;
 }
 
-.resources-slider {
-	z-index: 1;
-}
-
-.sub-header-title {
-	font-size: var(--font-caption);
-	text-align: center;
-	color: var(--text-color-subdued);
+main > section:first-of-type {
 	display: flex;
+	flex-direction: row;
 }
 
-.empty-cart-image-container {
-	justify-content: center;
+.search-nav {
 	display: flex;
-	flex-direction: column;
-	margin-top: 12rem;
-	align-items: center;
-	gap: 2rem;
-	color: var(--text-color-secondary);
-	font-size: var(--font-body-small);
-}
 
-.empty-cart-image {
-	margin: auto;
-}
-
-.breakdown-pane-container {
-	margin-left: 0.5rem;
-	margin-right: 0.5rem;
-}
+	& > *:first-child {
+		flex-grow: 2;
+	}
 
-.cart-item {
-	list-style-type: none;
+	& > *:last-child {
+		margin-left: auto;
+	}
 }
 </style>
diff --git a/packages/client/hmi-client/src/page/data-explorer/components/tera-filter-bar.vue b/packages/client/hmi-client/src/page/data-explorer/components/tera-filter-bar.vue
index 5316c7bd6e..b297b3eaec 100644
--- a/packages/client/hmi-client/src/page/data-explorer/components/tera-filter-bar.vue
+++ b/packages/client/hmi-client/src/page/data-explorer/components/tera-filter-bar.vue
@@ -1,5 +1,5 @@
 <template>
-	<div class="flex align-items-center pt-2 pb-2 pl-8 pr-8">
+	<div class="flex align-items-center">
 		<p class="p-text-secondary pr-2">Topic Filter</p>
 		<Dropdown
 			class="topic-dropdown"

From dda95d7256606bb983043c338b9cf704bd1354e7 Mon Sep 17 00:00:00 2001
From: Yohann Paris <github@yohannparis.com>
Date: Mon, 18 Dec 2023 14:06:51 -0500
Subject: [PATCH 11/11] fix

---
 .../src/components/navbar/tera-navbar.vue           | 13 -------------
 .../src/page/data-explorer/DataExplorer.vue         | 11 +++++++++++
 2 files changed, 11 insertions(+), 13 deletions(-)

diff --git a/packages/client/hmi-client/src/components/navbar/tera-navbar.vue b/packages/client/hmi-client/src/components/navbar/tera-navbar.vue
index fb6954b816..521b80dd14 100644
--- a/packages/client/hmi-client/src/components/navbar/tera-navbar.vue
+++ b/packages/client/hmi-client/src/components/navbar/tera-navbar.vue
@@ -30,12 +30,6 @@
 				</template>
 			</Dialog>
 		</section>
-		<aside class="suggested-terms" v-if="!isEmpty(terms) && isDataExplorer">
-			Suggested terms:
-			<Chip v-for="term in terms" :key="term" removable remove-icon="pi pi-times">
-				<span @click="searchBarRef?.addToQuery(term)">{{ term }}</span>
-			</Chip>
-		</aside>
 		<Teleport to="body">
 			<tera-modal
 				v-if="isEvaluationScenarioModalVisible"
@@ -116,10 +110,8 @@
 <script setup lang="ts">
 import { computed, ref, watch, onMounted } from 'vue';
 import { useRouter } from 'vue-router';
-import { isEmpty } from 'lodash';
 import Avatar from 'primevue/avatar';
 import Button from 'primevue/button';
-import Chip from 'primevue/chip';
 import Dialog from 'primevue/dialog';
 import Menu from 'primevue/menu';
 import { MenuItem } from 'primevue/menuitem';
@@ -358,11 +350,6 @@ function closeLogoutDialog() {
 	isLogoutDialog.value = false;
 }
 
-/*
- * Search
- */
-const searchBarRef = ref();
-
 watch(
 	() => useProjects().allProjects.value,
 	() => {
diff --git a/packages/client/hmi-client/src/page/data-explorer/DataExplorer.vue b/packages/client/hmi-client/src/page/data-explorer/DataExplorer.vue
index b377bc6368..018084cf06 100644
--- a/packages/client/hmi-client/src/page/data-explorer/DataExplorer.vue
+++ b/packages/client/hmi-client/src/page/data-explorer/DataExplorer.vue
@@ -26,6 +26,12 @@
 						@toggle-search-by-example="searchByExampleModalToggled"
 						:show-suggestions="false"
 					/>
+					<aside class="suggested-terms" v-if="!isEmpty(terms)">
+						Suggested terms:
+						<Chip v-for="term in terms" :key="term" removable remove-icon="pi pi-times">
+							<span @click="searchBarRef?.addToQuery(term)">{{ term }}</span>
+						</Chip>
+					</aside>
 					<tera-filter-bar :topic-options="topicOptions" @filter-changed="executeNewQuery" />
 				</div>
 				<SelectButton
@@ -94,6 +100,7 @@ import TeraFacetsPanel from '@/page/data-explorer/components/tera-facets-panel.v
 import TeraSearchResultsList from '@/page/data-explorer/components/tera-search-results-list.vue';
 import { XDDFacetsItemResponse } from '@/types/Types';
 import TeraSearchbar from '@/components/navbar/tera-searchbar.vue';
+import Chip from 'primevue/chip';
 import { useSearchByExampleOptions } from './search-by-example';
 import TeraFilterBar from './components/tera-filter-bar.vue';
 
@@ -524,6 +531,10 @@ onUnmounted(() => {
 	queryStore.reset();
 });
 
+/*
+ * Search
+ */
+const searchBarRef = ref();
 const terms = ref<string[]>([]);
 
 async function updateRelatedTerms(query?: string) {