@abi-software/map-side-bar 2.14.1-simulation.8 → 2.14.2-demo.0

package/src/components/DatasetExplorer.vue

@@ -1,123 +1,108 @@
 <template>
-    <el-card :body-style="bodyStyle" class="content-card">
-      <template #header>
-        <div class="header">
-          <div class="search-input-container" :class="{'is-focus': searchInput}">
-            <el-input
-              class="search-input"
-              placeholder="Search"
-              v-model="searchInput"
-              @keyup="searchEvent"
-              clearable
-              @clear="clearSearchClicked"
-            ></el-input>
-            <el-popover
-              width="350"
-              trigger="hover"
-              popper-class="filter-help-popover"
-            >
-              <template #reference>
-                <MapSvgIcon icon="help" class="help" />
-              </template>
-              <div>
-                <strong>Search rules:</strong>
-                <ul>
-                  <li>
-                    <strong>Multiple Terms:</strong> Separate terms with a comma (<code>,</code>).
-                    This will find datasets that match any of the terms (an "OR" search).
-                  </li>
-                  <li>
-                    <strong>Exact Phrase:</strong> Terms within a comma block will be matched as an exact phrase.
-                  </li>
-                </ul>
-                <br/>
-                <strong>Examples:</strong>
-                <ul>
-                  <li>
-                    <strong>To find by exact phrase:</strong>
-                    Searching for <code>vagus nerve</code> will find any dataset containing <code>"vagus nerve"</code>.
-                  </li>
-                  <li>
-                    <strong>To find by multiple terms:</strong>
-                    Searching for <code>nerve, vagus</code> will find data that contains either <code>nerve</code> OR <code>vagus</code>.
-                  </li>
-                </ul>
-              </div>
-            </el-popover>
-          </div>
-          <el-button
-            type="primary"
-            class="button"
-            @click="searchEvent"
-            size="large"
+  <el-card :body-style="bodyStyle" class="content-card">
+    <template #header>
+      <div class="header">
+        <div class="search-input-container" :class="{'is-focus': searchInput}">
+          <el-input
+            class="search-input"
+            placeholder="Search"
+            v-model="searchInput"
+            @keyup="searchEvent"
+            clearable
+            @clear="clearSearchClicked"
+          ></el-input>
+          <el-popover
+            width="350"
+            trigger="hover"
+            popper-class="filter-help-popover"
           >
-            Search
-          </el-button>
-          <el-button
-            link
-            class="el-button-link"
-            @click="onResetClick"
-            size="large"
-          >
-            Reset
-          </el-button>
-        </div>
-      </template>
-      <SearchFilters
-        class="filters"
-        ref="filtersRef"
-        :entry="filterEntry"
-        :envVars="envVars"
-        @filterResults="filterUpdate"
-        @numberPerPage="numberPerPageUpdate"
-        @loading="filtersLoading"
-        @cascaderReady="cascaderReady"
-      ></SearchFilters>
-      <SearchHistory
-        ref="searchHistory"
-        localStorageKey="sparc.science-dataset-search-history"
-        @search="searchHistorySearch"
-      ></SearchHistory>
-      <div class="content scrollbar" v-loading="loadingCards" ref="content">
-        <div class="error-feedback" v-if="results.length === 0 && !loadingCards">
-          No results found - Please change your search / filter criteria.
+            <template #reference>
+              <MapSvgIcon icon="help" class="help" />
+            </template>
+            <div>
+              <strong>Search rules:</strong>
+              <ul>
+                <li>
+                  <strong>Multiple Terms:</strong> Separate terms with a comma (<code>,</code>).
+                  This will find datasets that match any of the terms (an "OR" search).
+                </li>
+                <li>
+                  <strong>Exact Phrase:</strong> Terms within a comma block will be matched as an exact phrase.
+                </li>
+              </ul>
+              <br/>
+              <strong>Examples:</strong>
+              <ul>
+                <li>
+                  <strong>To find by exact phrase:</strong>
+                  Searching for <code>vagus nerve</code> will find any dataset containing <code>"vagus nerve"</code>.
+                </li>
+                <li>
+                  <strong>To find by multiple terms:</strong>
+                  Searching for <code>nerve, vagus</code> will find data that contains either <code>nerve</code> OR <code>vagus</code>.
+                </li>
+              </ul>
+            </div>
+          </el-popover>
         </div>
-        <div v-for="result in results" :key="result.doi" class="step-item">
-          <DatasetCard
-            class="dataset-card"
-            :entry="result"
-            :envVars="envVars"
-            @mouseenter="hoverChanged(result)"
-            @mouseleave="hoverChanged(undefined)"
-            @openFileBrowser="openFileBrowser"
-            @fileInfoReady="fileInfoReady"
-          />
-        </div>
-        <el-pagination
-          class="pagination"
-          v-model:current-page="page"
-          hide-on-single-page
-          large
-          layout="prev, pager, next"
-          :page-size="numberPerPage"
-          :total="numberOfHits"
-          @current-change="pageChange"
-        ></el-pagination>
+        <el-button
+          type="primary"
+          class="button"
+          @click="searchEvent"
+          size="large"
+        >
+          Search
+        </el-button>
+        <el-button
+          link
+          class="el-button-link"
+          @click="onResetClick"
+          size="large"
+        >
+          Reset
+        </el-button>
+      </div>
+    </template>
+    <SearchFilters
+      class="filters"
+      ref="filtersRef"
+      :entry="filterEntry"
+      :envVars="envVars"
+      @filterResults="filterUpdate"
+      @numberPerPage="numberPerPageUpdate"
+      @loading="filtersLoading"
+      @cascaderReady="cascaderReady"
+    ></SearchFilters>
+    <SearchHistory
+      ref="searchHistory"
+      localStorageKey="sparc.science-dataset-search-history"
+      @search="searchHistorySearch"
+    ></SearchHistory>
+    <div class="content scrollbar" v-loading="loadingCards" ref="content">
+      <div class="error-feedback" v-if="results.length === 0 && !loadingCards">
+        No results found - Please change your search / filter criteria.
       </div>
-      <el-dialog
-        v-model="fileBrowserVisible"
-        :title="fileBrowserTitle"
-        width="700"
-        top="16px"
-        :modal="false"
-      >
-        <FileBrowser
-          ref="fileBrowserRef"
-          @fileActionTriggered="fileActionTriggered"
+      <div v-for="result in results" :key="result.doi" class="step-item">
+        <DatasetCard
+          class="dataset-card"
+          :entry="result"
+          :envVars="envVars"
+          @mouseenter="hoverChanged(result)"
+          @mouseleave="hoverChanged(undefined)"
         />
-      </el-dialog>
-    </el-card>
-
+      </div>
+      <el-pagination
+        class="pagination"
+        v-model:current-page="page"
+        hide-on-single-page
+        large
+        layout="prev, pager, next"
+        :page-size="numberPerPage"
+        :total="numberOfHits"
+        @current-change="pageChange"
+      ></el-pagination>
+    </div>
+  </el-card>
 </template>
 
 <script>
@@ -125,20 +110,17 @@
 import {
   ElButton as Button,
   ElCard as Card,
-  ElDialog as Dialog,
   ElDrawer as Drawer,
   ElIcon as Icon,
   ElInput as Input,
   ElPagination as Pagination,
   ElMessage as Message,
 } from 'element-plus'
-import 'element-plus/es/components/message/style/css'
+import 'element-plus/es/components/message/style/css';
 import SearchFilters from './SearchFilters.vue'
 import SearchHistory from './SearchHistory.vue'
 import DatasetCard from './DatasetCard.vue'
-import FileBrowser from './FileBrowser.vue'
 import EventBus from './EventBus.js'
-import { processProtocolsData } from './scripts/utilities.js'
 
 import { AlgoliaClient } from '../algolia/algolia.js'
 import { getFilters, facetPropPathMapping } from '../algolia/utils.js'
@@ -176,13 +158,11 @@ var initial_state = {
 
 export default {
   components: {
-    DatasetCard,
-    FileBrowser,
     SearchFilters,
+    DatasetCard,
     SearchHistory,
     Button,
     Card,
-    Dialog,
     Drawer,
     Icon,
     Input,
@@ -219,13 +199,6 @@ export default {
         display: 'flex',
       },
       cascaderIsReady: false,
-      fileBrowserTitle: "File Browser",
-      fileBrowserVisible: false,
-      fileSearch: {
-        onGoing: false,
-        datasetId: undefined,
-        searchTerm: undefined,
-      }
     }
   },
   computed: {
@@ -243,25 +216,6 @@ export default {
     },
   },
   methods: {
-    fileActionTriggered: function(action) {
-      EventBus.emit('PopoverActionClick', action)
-      EventBus.emit('contextUpdate', action) // Pass to mapintegratedvuer
-      this.fileBrowserVisible = true
-    },
-    fileInfoReady: function(payload) {
-      if (this.fileSearch.onGoing) {
-        if (payload.id === this.fileSearch.datasetID) {
-          payload.instance.openFileBrowser()
-        }
-      }
-    },
-    displayFileInfo: function(datasetID, fileSearch, searchTerm = "") {
-      let query = searchTerm ? searchTerm : datasetID
-      this.openSearch([], query)
-      this.fileSearch.onGoing = true
-      this.fileSearch.datasetID = datasetID
-      this.fileSearch.searchTerm = fileSearch
-    },
     hoverChanged: function (data) {
       const payload = data ? { ...data, tabType: 'dataset' } : { tabType: 'dataset' }
       this.$emit('hover-changed', payload)
@@ -273,27 +227,6 @@ export default {
       this.results = []
       this.loadingCards = false
     },
-    openFileBrowser: function(data) {
-      this.fileBrowserVisible = true
-      this.$nextTick(() => {
-        if (data.datasetID) {
-          this.fileBrowserTitle = `Dataset ${data.datasetID}`
-          if (data.datasetName) {
-            this.fileBrowserTitle += `: ${data.datasetName}`
-          }
-        } else {
-          this.fileBrowserTitle = "File Browser"
-        }
-
-        this.$refs.fileBrowserRef.setData(data.items)
-        if (this.fileSearch.onGoing) {
-          if (this.fileSearch.datasetID === data.datasetID) {
-            this.$refs.fileBrowserRef.setSearchTerm(this.fileSearch.searchTerm)
-          }
-          this.fileSearch.onGoing = false
-        }
-      })
-    },
     openSearch: function (filter, search = '') {
       this.searchInput = search
       this.resetPageNavigation()
@@ -473,23 +406,6 @@ export default {
       let i = this.results.findIndex((res) => res.doi === doi)
       if (this.results[i]) this.results[i].detailsReady = true
     },
-    readTestData: function () {
-      const endpoint = this.envVars.TEST_DATA_LOCATION
-      if (endpoint) {
-        fetch(endpoint)
-          .then(response => {
-            if (!response.ok) {
-              throw new Error(`Cannot download test data from server: ${response.status}`)
-            }
-            return response.json()
-          })
-          .then((data) => {
-            if (this.searchInput.toLowerCase().includes("reveal")) {
-              processProtocolsData(this.results, data, this.envVars.TEST_DATA_LOCATION)
-            }
-          })
-      }
-    },
     perItemSearch: function (signal, data) {
       //Maximum 10 downloads at once to prevent long waiting time
       //between unfinished search and new search
@@ -518,11 +434,6 @@ export default {
           //Check and make another request until it gets to max downloads
           this.perItemSearch(signal, data)
         }
-      } else {
-        //Do some post downloading hacking
-        if (this.searchInput.toLowerCase().includes("reveal")) {
-          this.readTestData();
-        }
       }
     },
     scrollToTop: function () {
@@ -545,8 +456,6 @@ export default {
         let i = this.results.findIndex((res) =>
           element.doi ? element.doi.includes(res.doi) : false
         )
-
-
         // Assign scicrunch results to the object
         Object.assign(this.results[i], element)
         // Assign the attributes that need some processing
@@ -698,45 +607,6 @@ export default {
   border: 0;
   border-top-right-radius: 0;
   border-bottom-right-radius: 0;
-
-  :deep(.el-card__header) {
-    background-color: #292b66;
-    padding: 1rem;
-  }
-  :deep(.el-card__body) {
-    background-color: #f7faff;
-    overflow-y: hidden;
-    padding: 1rem;
-  }
-  :deep(.el-card__body) {
-    background-color: #f7faff;
-    overflow-y: hidden;
-    padding: 1rem;
-  }
-
-  :deep(.el-dialog) {
-    background: #f7faff;
-    padding: 8px;
-    border-width:1px;
-    .el-dialog__header {
-      padding-top: 8px;
-      padding-bottom: 8px;
-    }
-  }
-
-  :deep(.el-message) {
-    position: absolute !important;
-    width: 80%;
-    font-size: 12px;
-    border-radius: var(--el-border-radius-base);
-    --el-message-bg-color: var(--el-color-error-light-9);
-    --el-message-border-color: var(--el-color-error);
-    --el-message-text-color: var(--el-text-color-primary);
-
-    .el-icon.el-message__icon {
-      display: none;
-    }
-  }
 }
 
 .step-item {
@@ -752,6 +622,30 @@ export default {
   padding-top: 15px;
 }
 
+.content-card :deep(.el-card__header) {
+  background-color: #292b66;
+  padding: 1rem;
+}
+
+.content-card :deep(.el-card__body) {
+  background-color: #f7faff;
+  overflow-y: hidden;
+  padding: 1rem;
+}
+
+.content-card :deep(.el-message) {
+  position: absolute !important;
+  width: 80%;
+  font-size: 12px;
+  border-radius: var(--el-border-radius-base);
+  --el-message-bg-color: var(--el-color-error-light-9);
+  --el-message-border-color: var(--el-color-error);
+  --el-message-text-color: var(--el-text-color-primary);
+
+  .el-icon.el-message__icon {
+    display: none;
+  }
+}
 
 .content {
   // width: 515px;
@@ -762,29 +656,21 @@ export default {
   overflow-y: scroll;
   scrollbar-width: thin;
   border-radius: var(--el-border-radius-base);
+}
 
-  :deep(.el-loading-spinner .path) {
-    stroke: $app-primary-color;
-  }
-
-  :deep(.step-item:first-child .seperator-path) {
-    display: none;
-  }
-
-  :deep(.step-item:not(:first-child) .seperator-path) {
-    width: 455px;
-    height: 0px;
-    border: solid 1px #e4e7ed;
-    background-color: #e4e7ed;
-  }
+.content :deep(.el-loading-spinner .path) {
+  stroke: $app-primary-color;
+}
 
-  :deep(.el-loading-spinner .path) {
-    stroke: $app-primary-color;
-  }
+.content :deep(.step-item:first-child .seperator-path) {
+  display: none;
+}
 
-  :deep(.step-item:first-child .seperator-path) {
-    display: none;
-  }
+.content :deep(.step-item:not(:first-child) .seperator-path) {
+  width: 455px;
+  height: 0px;
+  border: solid 1px #e4e7ed;
+  background-color: #e4e7ed;
 }
 
 .scrollbar::-webkit-scrollbar-track {
@@ -827,7 +713,4 @@ export default {
     box-shadow: none !important;
   }
 }
-
-
-
 </style>