@abi-software/map-side-bar 2.14.1-simulation.1 → 2.14.1-simulation.3

package/src/components/DatasetExplorer.vue

@@ -1,108 +1,122 @@
 <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"
+    <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"
           >
-            <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>
+            Search
+          </el-button>
+          <el-button
+            link
+            class="el-button-link"
+            @click="onResetClick"
+            size="large"
+          >
+            Reset
+          </el-button>
         </div>
-        <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.
+      </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>
+        <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>
       </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)"
+      <el-dialog
+        v-model="fileBrowserVisible"
+        title="File browser"
+        width="700"
+        top="16px"
+      >
+        <FileBrowser
+          ref="fileBrowserRef"
+          @fileActionTriggered="fileActionTriggered"
         />
-      </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>
+      </el-dialog>
+    </el-card>
+
 </template>
 
 <script>
@@ -110,17 +124,20 @@
 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'
@@ -158,11 +175,13 @@ var initial_state = {
 
 export default {
   components: {
-    SearchFilters,
     DatasetCard,
+    FileBrowser,
+    SearchFilters,
     SearchHistory,
     Button,
     Card,
+    Dialog,
     Drawer,
     Icon,
     Input,
@@ -199,6 +218,12 @@ export default {
         display: 'flex',
       },
       cascaderIsReady: false,
+      fileBrowserVisible: false,
+      fileSearch: {
+        onGoing: false,
+        datasetId: undefined,
+        searchTerm: undefined,
+      }
     }
   },
   computed: {
@@ -216,6 +241,25 @@ export default {
     },
   },
   methods: {
+    fileActionTriggered: function(action) {
+      this.fileBrowserVisible = false
+      EventBus.emit('PopoverActionClick', action)
+      EventBus.emit('contextUpdate', action) // Pass to mapintegratedvuer
+    },
+    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)
@@ -227,6 +271,18 @@ export default {
       this.results = []
       this.loadingCards = false
     },
+    openFileBrowser: function(data) {
+      this.fileBrowserVisible = true
+      this.$nextTick(() => {
+        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()
@@ -418,7 +474,7 @@ export default {
           })
           .then((data) => {
             if (this.searchInput.toLowerCase().includes("reveal")) {
-              this.results.unshift(...data)
+              processProtocolsData(this.results, data, this.envVars.TEST_DATA_LOCATION)
             }
           })
       }
@@ -478,6 +534,8 @@ 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

package/src/components/FileBrowser.vue

@@ -0,0 +1,199 @@
+<template>
+  <div>
+
+    <el-table
+      v-if="fileLists"
+      :data="fileLists"
+      style="width: 100%;"
+      height="600"
+      :stripe="true"
+    >
+      <el-table-column type="expand">
+        <template #default="props">
+          <div class="file-details" m="4">
+            <p m="t-0 b-2" v-if="props.row.description">
+              Description: {{ props.row.description }}
+            </p>
+            <p m="t-0 b-2" v-if="props.row.protocol">
+              Protocol: {{ props.row.protocol }}
+            </p>
+            <div v-for="(val, key) in props.row.columns">
+              <p :key="key" m="t-0 b-2">Column {{ key + 1 }}: {{ val }}</p>
+            </div>
+            <p m="t-0 b-2">File path: {{ props.row.filePath }}</p>
+          </div>
+        </template>
+      </el-table-column>
+      <el-table-column
+        prop="thumbnail"
+        label="Thumbnail"
+        width="170"
+      >
+        <template #default="scope">
+          <el-image
+            v-if="scope.row.thumbnail"
+            :src="scope.row.thumbnail"
+            style="max-width: 150px; max-height: 150px"
+            fit="contain"
+            lazy
+          />
+        </template>
+      </el-table-column>
+      <el-table-column
+        prop="fileName"
+        label="File name"
+        width="200"
+        class-name="title-text"
+      />
+      <el-table-column
+        prop="type"
+        label="Type"
+        width="100"
+      />
+      <el-table-column
+        fixed="right"
+      >
+        <template #header>
+          <el-input v-model="search" size="small" placeholder="Type to search" />
+        </template>
+        <template #default="scope">
+          <el-button
+            size="small"
+            @click="handleView(scope.row)"
+          >
+            {{ getActionLabel(scope.row.type) }}
+          </el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+  </div>
+</template>
+
+<script>
+//provide the s3Bucket related methods and data.
+import {
+  ElButton as Button,
+  ElImage as Image,
+  ElInput as Input,
+  ElTable as Table,
+  ElTableColumn as TableColumn
+} from "element-plus";
+import EventBus from './EventBus.js'
+import { ref } from 'vue'
+
+export default {
+  name: 'FileBrowser',
+  components: {
+    Button,
+    Image,
+    Input,
+    Table,
+    TableColumn
+  },
+  data() {
+    return {
+      category: "All",
+      search: "",
+      tableData: undefined,
+    }
+  },
+  methods: {
+    getActionLabel: function(type) {
+      if (type === "Simulations" || type === "Protocol Data") {
+        return "Run"
+      } else {
+        return "View"
+      }
+    },
+    setSearchTerm: function(searchTerm) {
+      this.search = searchTerm
+    },
+    handleView: function(row) {
+      this.$emit("fileActionTriggered", row.action)
+    },
+    downloadThumbnail: async function(url, entry) {
+      const response = await fetch(url)
+      if (response.ok) {
+        let data = await response.text()
+        if (typeof data === 'string' && data.startsWith('data:')) {
+          entry.thumbnail = data
+        } else {
+          if (entry.mimetype) {
+            entry.thumbnail = `data:${entry.mimetype};base64,${data}`
+          } else {
+            entry.thumbnail = data
+          }
+          let index = this.tableData.findIndex((item) => item.filePath === entry.filePath);
+          if (index > -1) {
+            this.tableData[index] = {...entry}
+          }
+        }
+      }
+    },
+    setData: function(data) {
+      this.tableData = ref([])
+      this.search = ""
+      Object.keys(data).forEach((key) => {
+        if (key !== "Dataset") {
+          data[key].forEach((item) => {
+            const entry = {
+              action: item.userData,
+              description: item.description ? item.description : "",
+              protocol: item.protocol ? item.protocol : "",
+              columns: [],
+              fileName: item.title,
+              filePath: item.filePath,
+              mimetype: item.mimetype,
+              type: key,
+            }
+            if (item.columns && item.columns.length > 0) {
+              item.columns.forEach((column) => entry.columns.push(JSON.stringify(column)))
+            }
+
+            this.tableData.push(entry)
+            if (item.thumbnail?.includes("encodeBase64")) {
+              this.downloadThumbnail(item.thumbnail, entry)
+            } else {
+              entry.thumbnail = item.thumbnail
+            }
+          })
+        }
+      })
+    }
+  },
+  computed: {
+    fileLists() {
+      if (!this.search) return this.tableData
+      const keys = ["fileName", "filePath", "description", "type", "protocol"]
+      const lower = this.search.toLowerCase()
+      const list = this.tableData.filter((data) => {
+        for (let key of keys) {
+          if (data[key] && data[key].toLowerCase().includes(lower)) {
+            return true
+          }
+        }
+        if (data.columns) {
+          for (let column of data.columns) {
+            if (column.toLowerCase().includes(lower)) {
+              return true
+            }
+          }
+        }
+      })
+      return list
+    }
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+:deep(.el-table__body-wrapper) {
+  .title-text {
+    font-size: 10px;
+  }
+}
+
+.file-details {
+  font-size: 10px;
+}
+</style>