Show experimental tag on data search page

actris-cloudnet · Aug 17, 2023 · 4ea5067 · 4ea5067
1 parent 6bf1012
commit 4ea5067
Show file tree

Hide file tree

Showing 6 changed files with 55 additions and 20 deletions.
diff --git a/backend/src/entity/CollectionFileResponse.ts b/backend/src/entity/CollectionFileResponse.ts
@@ -12,6 +12,7 @@ export class CollectionFileResponse {
   size: number;
   volatile: boolean;
   legacy: boolean;
+  experimental: boolean;
   errorLevel: ErrorLevel | null;
 
   constructor(file: RegularFile | ModelFile) {
@@ -25,6 +26,7 @@ export class CollectionFileResponse {
     this.size = parseInt(file.size as unknown as string, 10);
     this.volatile = file.volatile;
     this.legacy = file.legacy;
+    this.experimental = file.product.experimental;
     this.errorLevel = file.errorLevel;
   }
 }
diff --git a/backend/src/entity/SearchFileResponse.ts b/backend/src/entity/SearchFileResponse.ts
@@ -11,6 +11,7 @@ export class SearchFileResponse {
   size: number;
   volatile: boolean;
   legacy: boolean;
+  experimental: boolean;
   errorLevel: ErrorLevel | null;
 
   constructor(file: SearchFile) {
@@ -23,6 +24,7 @@ export class SearchFileResponse {
     this.size = file.size;
     this.volatile = file.volatile;
     this.legacy = file.legacy;
+    this.experimental = file.product.experimental;
     this.errorLevel = file.errorLevel;
   }
 }
diff --git a/frontend/src/components/DataSearchResult.vue b/frontend/src/components/DataSearchResult.vue
@@ -126,7 +126,9 @@ section#fileTable
     width: 100%
 
 .listLegend
-  display: inline-block
+  list-style: none
+  display: flex
+  gap: .5em
   float: right
   text-align: right
 
@@ -151,10 +153,17 @@ section#fileTable
       <span class="listTitle" v-if="!simplifiedView && listLength > 0">
         <span v-if="isBusy">Searching...</span>
         <span v-else>Found {{ listLength }} results</span>
-        <span class="listLegend">
-          <span class="rowtag volatile rounded"></span> volatile
-          <span class="rowtag legacy rounded"></span> legacy
-        </span>
+        <ul class="listLegend">
+          <li v-if="hasVolatile">
+            <span class="rowtag volatile rounded"></span> volatile
+          </li>
+          <li v-if="hasLegacy">
+            <span class="rowtag legacy rounded"></span> legacy
+          </li>
+          <li v-if="hasExperimental">
+            <span class="rowtag experimental rounded"></span> experimental
+          </li>
+        </ul>
       </span>
       <div v-if="listLength === 0 && !isBusy" class="noresults">
         <h2>No results</h2>
@@ -186,21 +195,26 @@ section#fileTable
         @row-selected="rowSelected"
       >
         <template #cell(volatile)="data">
-          <span
-            v-if="data.item.volatile"
-            class="rowtag volatile rounded"
-            title="The data for this day may be incomplete. This file is updating in real time."
-          >
-          </span>
-          <span
-            v-if="data.item.legacy"
-            class="rowtag legacy rounded"
-            title="This is legacy data. Quality of the data is not assured."
-          >
+          <span class="rowtags">
+            <span
+              v-if="data.item.volatile"
+              class="rowtag volatile rounded"
+              title="The data for this day may be incomplete. This file is updating in real time."
+            >
+            </span>
+            <span
+              v-if="data.item.legacy"
+              class="rowtag legacy rounded"
+              title="This is legacy data. Quality of the data is not assured."
+            >
+            </span>
+            <span
+              v-if="data.item.experimental"
+              class="rowtag experimental rounded"
+              title="This is experimental product."
+            >
+            </span>
           </span>
-          <span
-            ><!-- Dummy element needed when there are no other elements. --></span
-          >
         </template>
       </BaseTable>
       <BasePagination
@@ -383,6 +397,14 @@ const apiUrl = import.meta.env.VITE_BACKEND_URL;
 
 const listLength = computed(() => props.apiResponse.length);
 
+const hasVolatile = computed(() =>
+  props.apiResponse.some((item) => item.volatile)
+);
+const hasLegacy = computed(() => props.apiResponse.some((item) => item.legacy));
+const hasExperimental = computed(() =>
+  props.apiResponse.some((item) => item.experimental)
+);
+
 function clearPreview() {
   currentVisualization.value = null;
   pendingVisualization.value = null;

diff --git a/frontend/src/views/SearchView.vue b/frontend/src/views/SearchView.vue
@@ -222,21 +222,28 @@ div.checkbox
     &::after
       content: ''
 
+.rowtags
+  display: flex
+  gap: .25em
+  justify-content: center
+
 .rowtag
   display: inline-block
   min-width: 1em
   min-height: 1em
   font-size: 0.9em
   text-align: center
   padding: 0.2em
-  margin-left: 0.5em
   border-radius: .25rem
 
 .volatile
   background: #cad7ff
 
 .legacy
   background: #cecece
+
+.experimental
+  background-color: #EC9706
 </style>
 
 <template>

diff --git a/shared/lib/entity/CollectionFileResponse.ts b/shared/lib/entity/CollectionFileResponse.ts
@@ -11,5 +11,6 @@ export interface CollectionFileResponse {
   size: number;
   volatile: boolean;
   legacy: boolean;
+  experimental: boolean;
   errorLevel: ErrorLevel | null;
 }
diff --git a/shared/lib/entity/SearchFileResponse.ts b/shared/lib/entity/SearchFileResponse.ts
@@ -10,5 +10,6 @@ export interface SearchFileResponse {
   size: number;
   volatile: boolean;
   legacy: boolean;
+  experimental: boolean;
   errorLevel: ErrorLevel | null;
 }