From 30f12183fa176e9e4dda216d235ddc9f1332545f Mon Sep 17 00:00:00 2001
From: Shawn Yama <syama@uncharted.software>
Date: Wed, 24 Jul 2024 13:02:50 -0400
Subject: [PATCH 1/8] rm useless classes

---
 .../src/components/widgets/tera-carousel.vue  | 42 ++++++--------
 .../components/widgets/tera-slider-panel.vue  | 58 +++++++++++--------
 2 files changed, 53 insertions(+), 47 deletions(-)

diff --git a/packages/client/hmi-client/src/components/widgets/tera-carousel.vue b/packages/client/hmi-client/src/components/widgets/tera-carousel.vue
index 8d68c4928a..8fda3bc557 100644
--- a/packages/client/hmi-client/src/components/widgets/tera-carousel.vue
+++ b/packages/client/hmi-client/src/components/widgets/tera-carousel.vue
@@ -25,16 +25,16 @@
 			text
 			severity="secondary"
 			icon="pi pi-chevron-left"
-			@click="move(currentPage - 1)"
-			class="carousel-chevron go-back"
+			@click.stop="move(currentPage - 1)"
+			class="go-back"
 		/>
 		<Button
 			v-if="itemCount > 1"
 			text
 			severity="secondary"
 			icon="pi pi-chevron-right"
-			@click="move(currentPage + 1)"
-			class="carousel-chevron go-forward"
+			@click.stop="move(currentPage + 1)"
+			class="go-forward"
 		/>
 	</figure>
 </template>
@@ -89,6 +89,7 @@ figure {
 	display: flex;
 	flex-direction: column;
 	justify-content: space-between;
+	position: relative;
 }
 
 .content {
@@ -187,26 +188,21 @@ nav {
 	& .pi-arrow-left,
 	& .pi-arrow-right {
 		border-radius: 24px;
-		font-size: 10px;
+		/* font-size: 10px; */
+		/* opacity: 0; */
+		/* height: 5rem; */
+		position: absolute;
+		top: 1.25rem;
+		&:hover {
+			/* opacity: 0.5; */
+		}
 	}
-}
 
-.carousel-chevron {
-	opacity: 0;
-	height: 5rem;
-}
-.carousel-chevron:hover {
-	opacity: 0.5;
-}
-.go-back {
-	position: absolute;
-	top: 1.25rem;
-	left: 8px;
-}
-
-.go-forward {
-	position: absolute;
-	top: 1.25rem;
-	right: 8px;
+	& .pi-arrow-left {
+		left: 0;
+	}
+	& .pi-arrow-right {
+		right: 0;
+	}
 }
 </style>
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 ea93fe0a9d..a02ea8dc02 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
@@ -1,15 +1,16 @@
 <template>
 	<tera-slider :content-width="contentWidth" :tab-width="tabWidth" :direction="direction" :is-open="isOpen">
 		<template v-slot:content>
-			<header class="slider-header content sticky">
-				<i :class="`slider-header-item pi ${directionMap[direction].iconOpen}`" @click="emit('update:isOpen', false)" />
-				<slot name="header"></slot>
-				<section>
-					<h4 class="slider-header-item">{{ header }}</h4>
-					<slot name="subHeader"></slot>
-				</section>
-			</header>
-			<slot name="content"></slot>
+			<aside class="panel-container" @scroll="onScroll">
+				<header :class="{ shadow: isScrolled }">
+					<i
+						:class="`slider-header-item pi ${directionMap[direction].iconOpen}`"
+						@click="emit('update:isOpen', false)"
+					/>
+					<h4>{{ header }}</h4>
+				</header>
+				<slot name="content"></slot>
+			</aside>
 		</template>
 		<template v-slot:tab>
 			<div :class="`slider-tab-header ${direction}`">
@@ -29,6 +30,7 @@
 </template>
 
 <script setup lang="ts">
+import { ref } from 'vue';
 import Badge from 'primevue/badge';
 import TeraSlider from './tera-slider.vue';
 
@@ -73,17 +75,39 @@ const directionMap = {
 		iconClosed: 'pi-angle-double-left'
 	}
 };
+
+/* This is for adding a subtle shadow to the header when the panel is scrolled */
+const isScrolled = ref(false);
+const onScroll = (event: Event) => {
+	// Check if the panel is scrolled beyond a certain point
+	isScrolled.value = (event.target as HTMLElement).scrollTop > 0;
+};
 </script>
 
 <style scoped>
+.panel-container {
+	height: 100%;
+	overflow-y: auto;
+}
 i {
 	font-size: 1.25rem;
 	cursor: pointer;
 }
 
-.slider-header {
+header {
 	display: flex;
 	align-items: start;
+	flex-direction: row-reverse;
+	justify-content: space-between;
+	padding: 1rem;
+	z-index: 3;
+	position: sticky;
+	top: 0;
+	background-color: rgba(255, 255, 255, 0.8);
+	backdrop-filter: blur(3px);
+	&.shadow {
+		box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.1);
+	}
 }
 
 section {
@@ -91,12 +115,6 @@ section {
 	flex-direction: column;
 }
 
-.slider-header.content {
-	flex-direction: row-reverse;
-	justify-content: space-between;
-	padding: 1rem;
-}
-
 .slider-header.tab {
 	justify-content: center;
 }
@@ -133,12 +151,4 @@ i.slider-header-item {
 	line-height: 2rem;
 	font-weight: var(--font-weight);
 }
-
-.sticky {
-	z-index: 3;
-	position: sticky;
-	top: 0;
-	background-color: rgba(255, 255, 255, 0.8);
-	backdrop-filter: blur(3px);
-}
 </style>

From e82f843b4f95cdaf8eeedffae4b293f5a0a69754 Mon Sep 17 00:00:00 2001
From: Shawn Yama <syama@uncharted.software>
Date: Wed, 24 Jul 2024 13:29:44 -0400
Subject: [PATCH 2/8] use actual button instead of icon

---
 .../components/widgets/tera-slider-panel.vue  | 57 +++++++++----------
 .../components/tera-asset-card.vue            |  4 +-
 2 files changed, 29 insertions(+), 32 deletions(-)

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 a02ea8dc02..22b818d076 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
@@ -1,30 +1,36 @@
 <template>
 	<tera-slider :content-width="contentWidth" :tab-width="tabWidth" :direction="direction" :is-open="isOpen">
 		<template v-slot:content>
-			<aside class="panel-container" @scroll="onScroll">
+			<aside @scroll="onScroll">
 				<header :class="{ shadow: isScrolled }">
-					<i
-						:class="`slider-header-item pi ${directionMap[direction].iconOpen}`"
+					<Button
+						:icon="`pi ${directionMap[direction].iconOpen}`"
 						@click="emit('update:isOpen', false)"
+						text
+						rounded
+						size="large"
 					/>
 					<h4>{{ header }}</h4>
 				</header>
-				<slot name="content"></slot>
+				<slot name="content" />
 			</aside>
 		</template>
 		<template v-slot:tab>
 			<div :class="`slider-tab-header ${direction}`">
-				<i
-					:class="`slider-header-item pi ${directionMap[direction].iconClosed}`"
+				<Button
+					:icon="`pi ${directionMap[direction].iconClosed}`"
 					@click="emit('update:isOpen', true)"
+					text
+					rounded
+					size="large"
 				/>
-				<h5 class="slider-header-item">{{ header }}</h5>
+				<h5>{{ header }}</h5>
 				<Badge v-if="indicatorValue" :value="indicatorValue" class="selected-resources-count" />
 			</div>
-			<slot name="tab"></slot>
+			<slot name="tab" />
 		</template>
 		<template v-if="$slots.footerButtons" v-slot:footerButtons>
-			<slot name="footerButtons"></slot>
+			<slot name="footerButtons" />
 		</template>
 	</tera-slider>
 </template>
@@ -32,6 +38,7 @@
 <script setup lang="ts">
 import { ref } from 'vue';
 import Badge from 'primevue/badge';
+import Button from 'primevue/button';
 import TeraSlider from './tera-slider.vue';
 
 defineProps({
@@ -85,22 +92,14 @@ const onScroll = (event: Event) => {
 </script>
 
 <style scoped>
-.panel-container {
-	height: 100%;
-	overflow-y: auto;
-}
-i {
-	font-size: 1.25rem;
-	cursor: pointer;
-}
-
 header {
 	display: flex;
-	align-items: start;
+	align-items: center;
 	flex-direction: row-reverse;
 	justify-content: space-between;
-	padding: 1rem;
 	z-index: 3;
+	padding: var(--gap-2);
+	padding-left: var(--gap);
 	position: sticky;
 	top: 0;
 	background-color: rgba(255, 255, 255, 0.8);
@@ -110,25 +109,25 @@ header {
 	}
 }
 
-section {
-	display: flex;
-	flex-direction: column;
+aside {
+	height: 100%;
+	overflow-y: auto;
 }
 
-.slider-header.tab {
-	justify-content: center;
+.p-button.p-button-icon-only.p-button-rounded {
+	height: 2.5rem;
 }
 
-i.slider-header-item {
-	color: var(--text-color-subdued);
+.slider-header.tab {
+	justify-content: center;
 }
 
 .slider-tab-header {
 	align-items: center;
 	display: flex;
 	flex-direction: column;
-	padding: 1rem;
-	gap: 2rem;
+	padding: var(--gap-2);
+	gap: var(--gap);
 }
 
 .slider-tab-header h4 {
diff --git a/packages/client/hmi-client/src/page/data-explorer/components/tera-asset-card.vue b/packages/client/hmi-client/src/page/data-explorer/components/tera-asset-card.vue
index 09fb4c0a3c..498a396255 100644
--- a/packages/client/hmi-client/src/page/data-explorer/components/tera-asset-card.vue
+++ b/packages/client/hmi-client/src/page/data-explorer/components/tera-asset-card.vue
@@ -201,9 +201,7 @@ const title = computed(() => {
 	let value = '';
 	if (props.resourceType === ResourceType.XDD) {
 		value =
-			props.source === DocumentSource.XDD
-				? (props.asset as Document).title
-				: ((props.asset as DocumentAsset).name ?? '');
+			props.source === DocumentSource.XDD ? (props.asset as Document).title : (props.asset as DocumentAsset).name ?? '';
 	} else if (props.resourceType === ResourceType.MODEL) {
 		value = (props.asset as Model).header.name;
 	} else if (props.resourceType === ResourceType.DATASET) {

From 376c0c380de38790d028fbd954cf90f399e79e9e Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Wed, 24 Jul 2024 17:35:57 +0000
Subject: [PATCH 3/8] chore: lint and format client codebase

---
 .../src/page/data-explorer/components/tera-asset-card.vue     | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/client/hmi-client/src/page/data-explorer/components/tera-asset-card.vue b/packages/client/hmi-client/src/page/data-explorer/components/tera-asset-card.vue
index 498a396255..09fb4c0a3c 100644
--- a/packages/client/hmi-client/src/page/data-explorer/components/tera-asset-card.vue
+++ b/packages/client/hmi-client/src/page/data-explorer/components/tera-asset-card.vue
@@ -201,7 +201,9 @@ const title = computed(() => {
 	let value = '';
 	if (props.resourceType === ResourceType.XDD) {
 		value =
-			props.source === DocumentSource.XDD ? (props.asset as Document).title : (props.asset as DocumentAsset).name ?? '';
+			props.source === DocumentSource.XDD
+				? (props.asset as Document).title
+				: ((props.asset as DocumentAsset).name ?? '');
 	} else if (props.resourceType === ResourceType.MODEL) {
 		value = (props.asset as Model).header.name;
 	} else if (props.resourceType === ResourceType.DATASET) {

From a04d35c14da5b568d064330de374a8d07b9661c9 Mon Sep 17 00:00:00 2001
From: Shawn Yama <syama@uncharted.software>
Date: Wed, 24 Jul 2024 13:52:43 -0400
Subject: [PATCH 4/8] more clean up

---
 .../components/widgets/tera-slider-panel.vue  | 36 +++++--------------
 1 file changed, 9 insertions(+), 27 deletions(-)

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 22b818d076..edb2df77eb 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
@@ -16,7 +16,7 @@
 			</aside>
 		</template>
 		<template v-slot:tab>
-			<div :class="`slider-tab-header ${direction}`">
+			<header :class="direction">
 				<Button
 					:icon="`pi ${directionMap[direction].iconClosed}`"
 					@click="emit('update:isOpen', true)"
@@ -25,8 +25,8 @@
 					size="large"
 				/>
 				<h5>{{ header }}</h5>
-				<Badge v-if="indicatorValue" :value="indicatorValue" class="selected-resources-count" />
-			</div>
+				<Badge v-if="indicatorValue" :value="indicatorValue" />
+			</header>
 			<slot name="tab" />
 		</template>
 		<template v-if="$slots.footerButtons" v-slot:footerButtons>
@@ -93,15 +93,16 @@ const onScroll = (event: Event) => {
 
 <style scoped>
 header {
+	position: sticky;
+	top: 0;
+	z-index: 3;
 	display: flex;
 	align-items: center;
 	flex-direction: row-reverse;
 	justify-content: space-between;
-	z-index: 3;
 	padding: var(--gap-2);
 	padding-left: var(--gap);
-	position: sticky;
-	top: 0;
+	gap: var(--gap);
 	background-color: rgba(255, 255, 255, 0.8);
 	backdrop-filter: blur(3px);
 	&.shadow {
@@ -118,30 +119,11 @@ aside {
 	height: 2.5rem;
 }
 
-.slider-header.tab {
-	justify-content: center;
-}
-
-.slider-tab-header {
-	align-items: center;
-	display: flex;
-	flex-direction: column;
-	padding: var(--gap-2);
-	gap: var(--gap);
-}
-
-.slider-tab-header h4 {
-	text-align: left;
-	line-height: 1em;
-	margin-bottom: 1rem;
-}
-
-.slider-tab-header h5 {
-	transform: rotate(0deg);
+h5 {
 	writing-mode: vertical-lr;
 }
 
-.selected-resources-count {
+.p-badge {
 	background-color: var(--surface-200);
 	color: var(--text-color-primary);
 	font-size: 1rem;

From 9d2fd21e9c20d2072b19012267134d9618dab652 Mon Sep 17 00:00:00 2001
From: Shawn Yama <syama@uncharted.software>
Date: Wed, 24 Jul 2024 13:53:54 -0400
Subject: [PATCH 5/8] tab class

---
 .../src/components/widgets/tera-slider-panel.vue           | 7 ++++++-
 1 file changed, 6 insertions(+), 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 edb2df77eb..d2a8577032 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
@@ -16,7 +16,7 @@
 			</aside>
 		</template>
 		<template v-slot:tab>
-			<header :class="direction">
+			<header :class="`tab ${direction}`">
 				<Button
 					:icon="`pi ${directionMap[direction].iconClosed}`"
 					@click="emit('update:isOpen', true)"
@@ -119,6 +119,11 @@ aside {
 	height: 2.5rem;
 }
 
+.tab {
+	flex-direction: column;
+	padding: var(--gap-2);
+}
+
 h5 {
 	writing-mode: vertical-lr;
 }

From eac72ef19911b787d69c0e7eb75ef977620cc784 Mon Sep 17 00:00:00 2001
From: Shawn Yama <syama@uncharted.software>
Date: Wed, 24 Jul 2024 14:04:16 -0400
Subject: [PATCH 6/8] just write a fixme for the carousel

---
 .../src/components/widgets/tera-carousel.vue  | 21 ++++++++++---------
 1 file changed, 11 insertions(+), 10 deletions(-)

diff --git a/packages/client/hmi-client/src/components/widgets/tera-carousel.vue b/packages/client/hmi-client/src/components/widgets/tera-carousel.vue
index 8fda3bc557..ba1ad9587f 100644
--- a/packages/client/hmi-client/src/components/widgets/tera-carousel.vue
+++ b/packages/client/hmi-client/src/components/widgets/tera-carousel.vue
@@ -20,13 +20,14 @@
 				<li v-if="isNumeric && itemCount > 5">(+{{ itemCount }})</li>
 			</ul>
 		</nav>
+		<!-- FIXME: If we are going to use this consider making the chevron navigations work (they should positioned properly)
 		<Button
 			v-if="itemCount > 1"
 			text
 			severity="secondary"
 			icon="pi pi-chevron-left"
 			@click.stop="move(currentPage - 1)"
-			class="go-back"
+			class="back"
 		/>
 		<Button
 			v-if="itemCount > 1"
@@ -34,15 +35,15 @@
 			severity="secondary"
 			icon="pi pi-chevron-right"
 			@click.stop="move(currentPage + 1)"
-			class="go-forward"
-		/>
+			class="forward"
+		/> -->
 	</figure>
 </template>
 
 <script setup lang="ts">
 import { isEmpty } from 'lodash';
 import { ref, onMounted, useSlots } from 'vue';
-import Button from 'primevue/button';
+// import Button from 'primevue/button';
 
 defineProps({
 	height: {
@@ -184,17 +185,17 @@ nav {
 		}
 	}
 
-	/* May be potentially used later */
+	/* Part of above FIXME
 	& .pi-arrow-left,
 	& .pi-arrow-right {
 		border-radius: 24px;
-		/* font-size: 10px; */
-		/* opacity: 0; */
-		/* height: 5rem; */
+		font-size: 10px;
+		opacity: 0;
+		height: 5rem;
 		position: absolute;
 		top: 1.25rem;
 		&:hover {
-			/* opacity: 0.5; */
+			opacity: 0.5;
 		}
 	}
 
@@ -203,6 +204,6 @@ nav {
 	}
 	& .pi-arrow-right {
 		right: 0;
-	}
+	} */
 }
 </style>

From 3b8033c34bcd5fce851cc3d85495e4b2e7b1e14b Mon Sep 17 00:00:00 2001
From: Shawn Yama <syama@uncharted.software>
Date: Wed, 24 Jul 2024 14:07:33 -0400
Subject: [PATCH 7/8] rm icon classes

---
 .../src/components/widgets/tera-carousel.vue  | 19 ++++++++-----------
 .../components/tera-asset-card.vue            |  4 +---
 2 files changed, 9 insertions(+), 14 deletions(-)

diff --git a/packages/client/hmi-client/src/components/widgets/tera-carousel.vue b/packages/client/hmi-client/src/components/widgets/tera-carousel.vue
index ba1ad9587f..567ae3b627 100644
--- a/packages/client/hmi-client/src/components/widgets/tera-carousel.vue
+++ b/packages/client/hmi-client/src/components/widgets/tera-carousel.vue
@@ -186,24 +186,21 @@ nav {
 	}
 
 	/* Part of above FIXME
-	& .pi-arrow-left,
-	& .pi-arrow-right {
-		border-radius: 24px;
-		font-size: 10px;
-		opacity: 0;
-		height: 5rem;
+	&.p-button {
 		position: absolute;
 		top: 1.25rem;
+		opacity: 0;
+		height: 5rem;
 		&:hover {
 			opacity: 0.5;
 		}
 	}
 
-	& .pi-arrow-left {
-		left: 0;
+	&.back {
+		left: 8px;
 	}
-	& .pi-arrow-right {
-		right: 0;
-	} */
+	&.forward {
+		right: 8px;
+	}*/
 }
 </style>
diff --git a/packages/client/hmi-client/src/page/data-explorer/components/tera-asset-card.vue b/packages/client/hmi-client/src/page/data-explorer/components/tera-asset-card.vue
index 09fb4c0a3c..498a396255 100644
--- a/packages/client/hmi-client/src/page/data-explorer/components/tera-asset-card.vue
+++ b/packages/client/hmi-client/src/page/data-explorer/components/tera-asset-card.vue
@@ -201,9 +201,7 @@ const title = computed(() => {
 	let value = '';
 	if (props.resourceType === ResourceType.XDD) {
 		value =
-			props.source === DocumentSource.XDD
-				? (props.asset as Document).title
-				: ((props.asset as DocumentAsset).name ?? '');
+			props.source === DocumentSource.XDD ? (props.asset as Document).title : (props.asset as DocumentAsset).name ?? '';
 	} else if (props.resourceType === ResourceType.MODEL) {
 		value = (props.asset as Model).header.name;
 	} else if (props.resourceType === ResourceType.DATASET) {

From 385e86476665b466118359d7912a5858c90367c8 Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Wed, 24 Jul 2024 18:11:34 +0000
Subject: [PATCH 8/8] chore: lint and format client codebase

---
 .../src/page/data-explorer/components/tera-asset-card.vue     | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/client/hmi-client/src/page/data-explorer/components/tera-asset-card.vue b/packages/client/hmi-client/src/page/data-explorer/components/tera-asset-card.vue
index 498a396255..09fb4c0a3c 100644
--- a/packages/client/hmi-client/src/page/data-explorer/components/tera-asset-card.vue
+++ b/packages/client/hmi-client/src/page/data-explorer/components/tera-asset-card.vue
@@ -201,7 +201,9 @@ const title = computed(() => {
 	let value = '';
 	if (props.resourceType === ResourceType.XDD) {
 		value =
-			props.source === DocumentSource.XDD ? (props.asset as Document).title : (props.asset as DocumentAsset).name ?? '';
+			props.source === DocumentSource.XDD
+				? (props.asset as Document).title
+				: ((props.asset as DocumentAsset).name ?? '');
 	} else if (props.resourceType === ResourceType.MODEL) {
 		value = (props.asset as Model).header.name;
 	} else if (props.resourceType === ResourceType.DATASET) {