feat(#416): Fix UI styling bugs, fix image loader gallery bug, fix im…

…age total response bug on search and updated unit test
Duke-MatSci · Jul 18, 2023 · 6c7f9a7 · 6c7f9a7
1 parent 8bcfaab
commit 6c7f9a7
Show file tree

Hide file tree

Showing 9 changed files with 140 additions and 111 deletions.
diff --git a/app/src/components/explorer/SearchHeader.vue b/app/src/components/explorer/SearchHeader.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="explorer_page_header">
+    <div class="explorer_page_header metadata">
         <md-card style="padding:2rem; margin:2rem; z-index: 10">
         <form class="form" @submit.prevent="submitSearch">
           <div class="search_box_form">
@@ -22,10 +22,10 @@
         <div style="text-align:right" v-if="getTotal > 1"><strong>{{getTotal}}</strong> results for "{{searchWord}}" </div>
         <div style="text-align:right" v-else>Found {{getTotal}} result for query "{{searchWord}}" </div>
         </md-card>
-        <md-tabs class="btn--primary">
+        <md-tabs class="btn--primary dialog-box_content">
             <md-tab :md-label="'Articles (' + passTotal.getArticles + ')'" @click.prevent="setResultsTabs('getArticles')"></md-tab>
             <md-tab :md-label="'Samples (' + passTotal.getSamples + ')'" @click.prevent="setResultsTabs('getSamples')"></md-tab>
-            <md-tab :md-label="'Images (' + imageTotal + ')'" @click.prevent="setResultsTabs('getImages')"></md-tab>
+            <md-tab :md-label="'Images (' + passTotal.getImages + ')'" @click.prevent="setResultsTabs('getImages')"></md-tab>
             <md-tab :md-label="'Charts (' + passTotal.getCharts + ')'" @click.prevent="setResultsTabs('getCharts')"></md-tab>
             <md-tab :md-label="'Properties (' + passTotal.getMaterials + ')'" @click.prevent="setResultsTabs('getMaterials')"></md-tab>
         </md-tabs>

diff --git a/app/src/components/explorer/SearchResultsTable.vue b/app/src/components/explorer/SearchResultsTable.vue
@@ -6,7 +6,7 @@
       v-if="getIsloading"
     />
     <div
-      class="utility-roverflow explorer_page-results"
+      class="utility-roverflow explorer_page-results metadata"
       v-else
     >
       <!-- Articles -->

diff --git a/app/src/modules/whyis-dataset.js b/app/src/modules/whyis-dataset.js
@@ -226,7 +226,7 @@ function buildDistrLd (fileList) {
     .map(x => {
       // TODO: check if we want to keep distribution uri as /explorer/dataset/id/filename and redirect for download
       distrLDs[x] = {
-        '@id': `${window.location.origin}/api/files/${fileList[x].filename}?isDirectory=true`,
+        '@id': `${window.location.origin}/api/files/${fileList[x].filename}?isFileStore=true`,
         '@type': 'http://purl.org/net/provenance/ns#File',
         'http://www.w3.org/2000/01/rdf-schema#label': fileList[x].originalname
       }
@@ -239,7 +239,7 @@ function buildDepictionLd (file, uri) {
     '@id': `${uri}/depiction`,
     '@type': 'http://purl.org/net/provenance/ns#File',
     'http://www.w3.org/2000/01/rdf-schema#label': file.originalname,
-    'http://w3.org/ns/dcat#accessURL': `${window.location.origin}/api/files/${file.filename}?isDirectory=true`
+    'http://w3.org/ns/dcat#accessURL': `${window.location.origin}/api/files/${file.filename}?isFileStore=true`
   }
   return depictionLd
 }

diff --git a/app/src/pages/explorer/Gallery.vue b/app/src/pages/explorer/Gallery.vue
@@ -26,63 +26,69 @@
           ({{(queryTimeMillis/1000).toFixed(2)}} seconds)
         </span>
       </div>
-      <div class="gallery-grid grid grid_col-5">
-        <md-card
-          v-for="(result, index) in items"
-          :key="index"
-          class="btn--animated gallery-item"
-        >
-          <div class="u_gridicon">
-            <div
-              @click.prevent="bookmark(result.name, true)"
-              v-if="result.bookmark"
-            >
-              <md-icon>bookmark</md-icon>
+      <template v-if="!!items && !!items.length">
+        <div class="gallery-grid grid grid_col-5">
+          <md-card
+            v-for="(result, index) in items"
+            :key="index"
+            class="btn--animated gallery-item"
+          >
+            <div class="u_gridicon">
+              <div
+                @click.prevent="bookmark(result.name, true)"
+                v-if="result.bookmark"
+              >
+                <md-icon>bookmark</md-icon>
+              </div>
+              <div
+                @click.prevent="bookmark(result.name, false)"
+                v-else
+              >
+                <md-icon>bookmark_border</md-icon>
+              </div>
+              <div v-if="isAuth && isAdmin" @click.prevent="editChart(result)">
+                <md-icon>edit</md-icon>
+              </div>
+              <div v-if="isAuth && isAdmin" @click.prevent="renderDialog('Delete Chart?', 'delete', result, 80)">
+                <md-icon>delete_outline</md-icon>
+              </div>
             </div>
-            <div
-              @click.prevent="bookmark(result.name, false)"
-              v-else
-            >
-              <md-icon>bookmark_border</md-icon>
-            </div>
-            <div v-if="isAuth && isAdmin" @click.prevent="editChart(result)">
-              <md-icon>edit</md-icon>
-            </div>
-            <div v-if="isAuth && isAdmin" @click.prevent="renderDialog('Delete Chart?', 'delete', result, 80)">
-              <md-icon>delete_outline</md-icon>
-            </div>
-          </div>
-          <router-link v-if="result.identifier" :to="{ name: 'ChartView', params: { chartId: getChartId(result) }}">
-            <md-card-media-cover md-solid>
-              <md-card-media md-ratio="4:3">
-                <img
-                  :src="baseUrl + result.thumbnail"
-                  :alt="result.label"
-                  v-if="result.thumbnail"
-                >
-                <img
-                  :src="defaultImg"
-                  :alt="result.label"
-                  v-else
-                >
-              </md-card-media>
-              <md-card-area class="u_gridbg">
-                <md-card-header class="u_show_hide">
-                  <span class="md-subheading">
-                    <strong>{{ result.label }}</strong>
-                  </span>
-                  <span class="md-body-1">{{ reduceDescription(result.description, 15) }}</span>
-                </md-card-header>
-              </md-card-area>
-            </md-card-media-cover>
-          </router-link>
-        </md-card>
+            <router-link v-if="result.identifier" :to="{ name: 'ChartView', params: { chartId: getChartId(result) }}">
+              <md-card-media-cover md-solid>
+                <md-card-media md-ratio="4:3">
+                  <img
+                    :src="baseUrl + result.thumbnail"
+                    :alt="result.label"
+                    v-if="result.thumbnail"
+                  >
+                  <img
+                    :src="defaultImg"
+                    :alt="result.label"
+                    v-else
+                  >
+                </md-card-media>
+                <md-card-area class="u_gridbg">
+                  <md-card-header class="u_show_hide">
+                    <span class="md-subheading">
+                      <strong>{{ result.label }}</strong>
+                    </span>
+                    <span class="md-body-1">{{ reduceDescription(result.description, 15) }}</span>
+                  </md-card-header>
+                </md-card-area>
+              </md-card-media-cover>
+            </router-link>
+          </md-card>
+        </div>
+        <pagination
+          :cpage="page"
+          :tpages="totalPages"
+          @go-to-page="loadPrevNextImage($event)"
+        />
+      </template>
+      <div class="utility-roverflow u_centralize_text u_margin-top-med section_loader" v-else>
+        <!-- <div class="u_display-flex spinner"></div> -->
+        <h1 class="visualize_header-h1 u_margin-top-med">No Chart Exists...</h1>
       </div>
-      <pagination
-        :cpage="page"
-        :tpages="totalPages"
-        @go-to-page="loadPrevNextImage($event)"
-      />
     </div>
     <dialogbox :active="dialogBoxActive" :minWidth="dialog.minWidth">
       <template v-slot:title>{{dialog.title}}</template>

diff --git a/app/src/pages/explorer/curate/sdd/SddForm.vue b/app/src/pages/explorer/curate/sdd/SddForm.vue
@@ -64,14 +64,12 @@
             </div>
 
             </div>
-            <div class="md-layout md-gutter md-alignment-top-right">
-              <div class="md-layout-item md-size-10 md-medium-size-15 md-small-size-20 md-xsmall-size-40">
-                <md-button
-                  @click="goToStep('first', 'second')"
-                  class="md-theme-default md-button_next">
-                  Next
-                </md-button>
-              </div>
+            <div class="md-card-actions md-alignment-right chart_editor__right-view ">
+              <md-button
+                @click="goToStep('first', 'second')"
+                class="md-theme-default md-button_next">
+                Next
+              </md-button>
             </div>
           </md-step>
 

diff --git a/app/src/pages/explorer/dataset/Dataset.vue b/app/src/pages/explorer/dataset/Dataset.vue
@@ -232,7 +232,7 @@ export default {
     },
     parseFileName (file) {
       const dateString = /\d{4}-[01]\d-[0-3]\dT[0-2]\d:[0-5]\d:[0-5]\d\.\d+([+-][0-2]\d:[0-5]\d|Z)-/
-      return file.split(dateString).pop().replace('?isDirectory=true', '')
+      return file.split(dateString).pop().replace('?isFileStore=true', '')
     }
   },
   created () {

diff --git a/app/src/pages/explorer/image/Image.vue b/app/src/pages/explorer/image/Image.vue
@@ -42,7 +42,7 @@
         </form>
       </div>
     </div>
-    <div class="utility-roverflow" v-if="searchImages && searchImages.images || images && images.images">
+    <div class="utility-roverflow">
 			<div class="u_content__result u_margin-top-small">
 				<span class="u_color utility-navfont" id="css-adjust-navfont">
           <strong v-if="renderText != null">{{ renderText }}</strong>
@@ -70,43 +70,45 @@
           </span>
         </span>
 			</div>
-			<div class="gallery-grid grid grid_col-5">
-        <md-card
-          v-for="(image, index) in searchImages.images || images.images"
-          :key="index"
-          class="btn--animated gallery-item"
-        >
-          <router-link :to="{ name: 'ImageDetailView', params: { id: image.metaData.id, fileId: image.file }}">
-            <md-card-media-cover md-solid>
-              <md-card-media md-ratio="4:3">
-                <img
-									:src="baseUrl + image.file"
-									:alt="image.metaData.title"
-                >
-              </md-card-media>
-              <md-card-area class="u_gridbg">
-                <md-card-header class="u_show_hide">
-                  <span class="md-subheading">
-                    <strong>{{ reduceDescription(image.description || 'polymer nanocomposite', 2) }}</strong>
-                  </span>
-                 <span class="md-body-1">{{ reduceDescription(image.metaData.title || 'polymer nanocomposite', 15) }}</span>
-                </md-card-header>
-              </md-card-area>
-            </md-card-media-cover>
-          </router-link>
-        </md-card>
-      </div>
-      <pagination
-        :cpage="pageNumber"
-        :tpages="searchImages.totalPages || images.totalPages"
-        @go-to-page="loadPrevNextImage($event)"
-      />
+      <template v-if="!searchImagesEmpty || !imagesEmpty">
+        <div class="gallery-grid grid grid_col-5">
+          <md-card
+            v-for="(image, index) in searchImages.images || images.images"
+            :key="index"
+            class="btn--animated gallery-item"
+          >
+            <router-link :to="{ name: 'ImageDetailView', params: { id: image.metaData.id, fileId: image.file }}">
+              <md-card-media-cover md-solid>
+                <md-card-media md-ratio="4:3">
+                  <img
+                    :src="baseUrl + image.file"
+                    :alt="image.metaData.title"
+                  >
+                </md-card-media>
+                <md-card-area class="u_gridbg">
+                  <md-card-header class="u_show_hide">
+                    <span class="md-subheading">
+                      <strong>{{ reduceDescription(image.description || 'polymer nanocomposite', 2) }}</strong>
+                    </span>
+                   <span class="md-body-1">{{ reduceDescription(image.metaData.title || 'polymer nanocomposite', 15) }}</span>
+                  </md-card-header>
+                </md-card-area>
+              </md-card-media-cover>
+            </router-link>
+          </md-card>
+        </div>
+        <pagination
+          :cpage="pageNumber"
+          :tpages="searchImages.totalPages || images.totalPages"
+          @go-to-page="loadPrevNextImage($event)"
+        />
+      </template>
 		</div>
-    <div class="section_loader u--margin-toplg" v-if="$apollo.loading">
+    <div class="u--margin-toplg" v-if="$apollo.loading">
       <spinner :loading="$apollo.loading" text='Loading Images'/>
     </div>
-    <div v-else-if="$apollo.error" class="utility-roverflow u_centralize_text u_margin-top-med">
-      <h1 class="visualize_header-h1 u_margin-top-med">Cannot Load Images</h1>
+    <div v-else-if="!!error || !!isEmpty" class="utility-roverflow u_centralize_text u_margin-top-med">
+      <h1 class="visualize_header-h1 u_margin-top-med">{{ !!error ? 'Cannot Load Images' : 'Sorry! No Image Found'}}</h1>
     </div>
 	</div>
 </template>
@@ -142,6 +144,17 @@ export default {
   computed: {
     imageSearch () {
       return this.$store.getters['explorer/getSelectedFacetFilterMaterialsValue']
+    },
+    // This is a WIP TODO (@Tolu) Update later
+    searchImagesEmpty () {
+      return this.searchImages.length === 0 || this.searchImages?.totalItems === 0
+    },
+    imagesEmpty () {
+      if (!Object.keys(this.images)?.length || this.images.totalItems === 0) return true
+      return false
+    },
+    isEmpty () {
+      return (this.imagesEmpty && !this.searchEnabled) || (this.searchImagesEmpty && this.searchEnabled)
     }
   },
   watch: {
@@ -224,7 +237,7 @@ export default {
       skip () {
         if (this.searchEnabled) return this.skipQuery
       },
-      fetchPolicy: 'cache-and-network',
+      fetchPolicy: 'cache-first',
       error (error) {
         if (error.networkError) {
           const err = error.networkError
@@ -248,7 +261,7 @@ export default {
       skip () {
         if (!this.searchEnabled) return this.skipQuery
       },
-      fetchPolicy: 'cache-and-network',
+      fetchPolicy: 'network-only',
       error (error) {
         if (error.networkError) {
           const err = error.networkError

diff --git a/app/src/store/modules/explorer/results/actions.js b/app/src/store/modules/explorer/results/actions.js
@@ -182,7 +182,8 @@ export default {
       getArticles: articlesLength,
       getSamples: samplesLength,
       getCharts: chartsLength,
-      getMaterials: 0
+      getMaterials: 0,
+      getImages: 0
     })
   },
 

diff --git a/app/tests/unit/pages/explorer/Image.spec.js b/app/tests/unit/pages/explorer/Image.spec.js
@@ -66,8 +66,8 @@ describe('Image.vue', () => {
   it('shows number of results', async () => {
     expect.assertions(2)
     expect(await wrapper.find('.utility-roverflow').exists()).toBe(true)
-    expect(await wrapper.find('.u_content__result').text()).toMatch(
-      /[1-9]\d* result/
+    expect(await wrapper.find('#css-adjust-navfont > span').text()).toMatch(
+      /[1-9]\d*|No result/
     )
   })
 
@@ -117,4 +117,15 @@ describe('Image.vue', () => {
     const searchBtn = wrapper.findAll('button').at(0)
     expect(searchBtn.text()).toBe('Search Images')
   })
-})
+
+  it('renders the right text when response empty', async () => {
+    var expectedString = 'Sorry! No Image Found'
+    const emptyData = apollo.images
+    emptyData.images = []
+    emptyData.totalItems = 0
+    await wrapper.setData({ images: emptyData })
+    expect(wrapper.find('.gallery-item').exists()).toBe(false)
+    expect(wrapper.find('.utility-roverflow.u_centralize_text.u_margin-top-med').exists()).toBe(true)
+    expect(wrapper.find('h1.visualize_header-h1.u_margin-top-med').text()).toBe(expectedString)
+  })
+})