From 03cacd5a9bce07da47c28f3b8311888ec84506e0 Mon Sep 17 00:00:00 2001
From: chiayin <chiayin.kuo@dsp.im>
Date: Fri, 10 Nov 2023 11:51:15 +0800
Subject: [PATCH] Issues #183: done.

---
 .../Discover/Conformance/MoreModal.vue        | 31 +++++++++++++++++--
 src/components/Discover/Map/Filter/Trace.vue  | 23 +++++++++++---
 src/components/Discover/Map/SidebarTraces.vue |  4 +--
 3 files changed, 49 insertions(+), 9 deletions(-)

diff --git a/src/components/Discover/Conformance/MoreModal.vue b/src/components/Discover/Conformance/MoreModal.vue
index 28e4bf5..1faecf6 100644
--- a/src/components/Discover/Conformance/MoreModal.vue
+++ b/src/components/Discover/Conformance/MoreModal.vue
@@ -38,15 +38,21 @@
       <!-- Trace item Table -->
       <section class="px-4 py-2 h-full w-[calc(100%_-_320px)] bg-neutral-10 rounded-xl">
         <p class="h2 mb-2 px-4">Trace #{{ showTraceId }}</p>
-        <div class="h-52 w-full px-2 mb-2 border border-neutral-300 rounded">
+        <div class="h-36 w-full px-2 mb-2 border border-neutral-300 rounded">
           <div class="h-full w-full">
             <div id="cfmTrace" ref="cfmTrace" class="h-full min-w-full relative"></div>
           </div>
         </div>
-        <div class="overflow-y-auto overflow-x-auto scrollbar h-[calc(100%_-_264px)] infiniteTable" @scroll="handleScroll">
+        <div class="overflow-y-auto overflow-x-auto scrollbar h-[calc(100%_-_200px)] infiniteTable" @scroll="handleScroll">
             <DataTable :value="caseData" showGridlines tableClass="text-sm " breakpoint="0">
               <div v-for="(col, index) in columnData" :key="index">
-                <Column :field="col.field" :header="col.header"></Column>
+                <Column :field="col.field" :header="col.header">
+                  <template #body="{ data }">
+                    <div :class="data[col.field]?.length > 18 ? 'whitespace-normal' : 'whitespace-nowrap'">
+                      {{ data[col.field] }}
+                    </div>
+                  </template>
+                </Column>
               </div>
             </DataTable>
         </div>
@@ -279,4 +285,23 @@ export default {
 :deep(.p-progressbar .p-progressbar-value) {
   @apply bg-primary
 }
+/* Table set */
+:deep(.p-datatable-thead) {
+  @apply sticky top-0 left-0 z-10 bg-neutral-10
+}
+:deep(.p-datatable .p-datatable-thead > tr > th) {
+  @apply !border-y-0 border-neutral-500 bg-neutral-100 after:absolute after:left-0 after:w-full after:h-full after:block after:top-0 after:border-b after:border-t after:border-neutral-500
+}
+:deep(.p-datatable .p-datatable-tbody > tr > td) {
+  @apply border-neutral-500 !border-t-0
+}
+:deep(.p-datatable .p-datatable-thead > tr > th) {
+  white-space: nowrap;
+}
+:deep(.p-datatable.p-datatable-gridlines .p-datatable-tbody > tr > td) {
+  min-width: 72px;
+  max-width: 184px;
+  overflow-wrap: break-word;
+  word-wrap: break-word;
+}
 </style>
diff --git a/src/components/Discover/Map/Filter/Trace.vue b/src/components/Discover/Map/Filter/Trace.vue
index db6d237..36235aa 100644
--- a/src/components/Discover/Map/Filter/Trace.vue
+++ b/src/components/Discover/Map/Filter/Trace.vue
@@ -45,15 +45,21 @@
     <!-- Trace item Table -->
     <section v-show="showTraceId" class="pl-4 h-full min-w-full py-2 space-y-2">
       <p class="h2 mb-2">Trace #{{ showTraceId }}</p>
-      <div class="h-52 w-full px-2 mb-2 border border-neutral-300 rounded">
+      <div class="h-36 w-full px-2 mb-2 border border-neutral-300 rounded">
         <div class="h-full w-full">
           <div id="cyTrace" ref="cyTrace" class="h-full min-w-full relative"></div>
         </div>
       </div>
-      <div class="overflow-y-auto overflow-x-auto scrollbar h-[calc(100%_-_264px)] infiniteTable" @scroll="handleScroll">
+      <div class="overflow-y-auto overflow-x-auto scrollbar h-[calc(100%_-_200px)] infiniteTable" @scroll="handleScroll">
         <DataTable :value="caseData" showGridlines tableClass="text-sm" breakpoint="0">
           <div v-for="(col, index) in columnData" :key="index">
-            <Column :field="col.field" :header="col.header"></Column>
+            <Column :field="col.field" :header="col.header">
+              <template #body="{ data }">
+                <div :class="data[col.field]?.length > 18 ? 'whitespace-normal' : 'whitespace-nowrap'">
+                    {{ data[col.field] }}
+                </div>
+              </template>
+            </Column>
           </div>
         </DataTable>
       </div>
@@ -343,7 +349,7 @@ export default {
 
 <style scoped>
 /* Table set */
-:deep(.p-datatable-thead th) {
+:deep(.p-datatable-thead) {
   @apply sticky top-0 left-0 z-10 bg-neutral-10
 }
 :deep(.p-datatable .p-datatable-thead > tr > th) {
@@ -352,4 +358,13 @@ export default {
 :deep(.p-datatable .p-datatable-tbody > tr > td) {
   @apply border-neutral-500 !border-t-0
 }
+:deep(.p-datatable .p-datatable-thead > tr > th) {
+  white-space: nowrap;
+}
+:deep(.p-datatable.p-datatable-gridlines .p-datatable-tbody > tr > td) {
+  min-width: 72px;
+  max-width: 184px;
+  overflow-wrap: break-word;
+  word-wrap: break-word;
+}
 </style>
diff --git a/src/components/Discover/Map/SidebarTraces.vue b/src/components/Discover/Map/SidebarTraces.vue
index d9bc1e9..1987756 100644
--- a/src/components/Discover/Map/SidebarTraces.vue
+++ b/src/components/Discover/Map/SidebarTraces.vue
@@ -36,12 +36,12 @@
       <!-- Trace item Table -->
       <section class="pl-4 h-full w-[calc(100%_-_320px)]">
         <p class="h2 mb-2">Trace #{{ showTraceId }}</p>
-        <div class="h-52 w-full px-2 mb-2 border border-neutral-300 rounded">
+        <div class="h-36 w-full px-2 mb-2 border border-neutral-300 rounded">
           <div class="h-full w-full">
             <div id="cyTrace" ref="cyTrace" class="h-full min-w-full relative"></div>
           </div>
         </div>
-        <div class="overflow-y-auto overflow-x-auto scrollbar w-full h-[calc(100%_-_264px)] infiniteTable " @scroll="handleScroll">
+        <div class="overflow-y-auto overflow-x-auto scrollbar w-full h-[calc(100%_-_200px)] infiniteTable " @scroll="handleScroll">
           <DataTable :value="caseData" showGridlines tableClass="text-sm" breakpoint="0">
             <div v-for="(col, index) in columnData" :key="index">
               <Column :field="col.field" :header="col.header">