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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abi-software/map-side-bar",
-  "version": "2.14.1-simulation.3",
+  "version": "2.14.1-simulation.5",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",

package/src/components/BadgesGroup.vue

@@ -1,6 +1,6 @@
 <template>
-  <div v-if="categories['All'].size > 1" class="container" ref="container">
-    <div>View data types:</div>
+  <div v-if="visible" class="container" ref="container">
+    <div v-if="displayText">View data types:</div>
     <template v-for="(item, key) in categories">
       <el-button
         v-if="item.size > 0"
@@ -32,7 +32,15 @@ export default {
         return []
       },
     },
-    entry: {
+    displayDataset: {
+      type: Boolean,
+      default: true,
+    },
+    displayText: {
+      type: Boolean,
+      default: true,
+    },
+    items: {
       type: Object,
       default: () => {
         return {}
@@ -42,22 +50,24 @@ export default {
   data: function () {
     return {
       //Always start with 1 image - the dataset thumbnail itself
-      categories: { All: { size: 1 }, Dataset: { size: 1 } },
+      categories: { },
       active: 'All',
+      totalSize: 0,
+    }
+  },
+  computed: {
+    // This computed property populates filter data's entry object with $data from this sidebar
+    visible: function () {
+      return (this.displayDataset && this.totalSize > 1) ||
+        (!this.displayDataset && this.totalSize > 0)
     }
   },
   methods: {
-    addToCategories: function (array, name) {
+    addToCategories: function (name) {
+      const array = this.items[name]
       if (array && array.length > 0) {
         this.categories[name] = { size: array.length }
-        this.categories['All'].size += array.length
-      }
-    },
-    addSimulationsToCategories: function (array) {
-      if (array && array.length > 0) {
-        const size = array.length
-        this.categories['Simulations'] = { size }
-        this.categories['All'].size += size
+        this.totalSize += array.length
       }
     },
     categoryClicked: function (name) {
@@ -66,15 +76,34 @@ export default {
     },
   },
   watch: {
-    entry: {
+    items: {
       deep: true,
       immediate: true,
       handler: function () {
-        this.addToCategories(this.entry.flatmaps, 'Flatmaps')
-        this.addToCategories(this.entry.plots, 'Plots')
-        this.addToCategories(this.entry.scaffolds, 'Scaffolds')
-        this.addToCategories(this.entry['protocol-data'], 'Protocol Data')
-        this.addSimulationsToCategories(this.entry.simulation)
+        this.categories = {}
+        this.totalSize = 0
+        this.active = "All"
+        let keys = ['Flatmaps', 'Plots', 'Protocol Data', 'Scaffolds', 'Simulations']
+        keys.forEach(key => this.addToCategories(key))
+        if (this.displayDataset) {
+          this.totalSize += 1
+          this.categories.All = { size: this.totalSize }
+          this.categories.Dataset = { size: 1 }
+        } else {
+          const keys = Object.keys(this.categories)
+          if (keys.length > 1) {
+            this.categories.All = { size: this.totalSize }
+          } else if (keys.length === 1) {
+            this.categoryClicked(keys[0])
+          }
+        }
+        this.categories = Object.keys(this.categories).sort().reduce(
+          (obj, key) => {
+            obj[key] = this.categories[key];
+            return obj;
+          },
+          {}
+        );
         /** disable the following
         this.addToCategories(this.entry.images, 'Images');
         this.addToCategories(this.entry.videos, 'Videos');

package/src/components/DatasetCard.vue

@@ -35,7 +35,7 @@
           </div>
           <div class="badges-container">
             <BadgesGroup
-              :entry="entry"
+              :items="items"
               @categoryChanged="categoryChanged"
             />
           </div>
@@ -274,6 +274,7 @@ export default {
             }
             this.items['Flatmaps'].push({
               id,
+              description: flatmap.description,
               title: baseName(filePath),
               filePath: filePath,
               type: 'Flatmap',
@@ -363,6 +364,7 @@ export default {
           }
           this.items['Plots'].push({
             id,
+            description: plot.description,
             title: baseName(filePath),
             filePath: filePath,
             type: 'Plot',
@@ -405,12 +407,13 @@ export default {
             discoverId: this.discoverId,
             apiLocation: this.envVars.API_LOCATION,
             version: this.version,
-            banner: this.datasetThumbnail,
+            banner: this.thumbnail,
             s3uri: this.entry.s3uri,
             contextCardUrl: this.getContextCardUrl(i),
           }
           this.items['Scaffolds'].push({
             id,
+            description: scaffold.description,
             title: baseName(filePath),
             filePath: filePath,
             type: 'Scaffold',
@@ -424,6 +427,7 @@ export default {
     },
     createSimulationItems: function () {
       if (this.entry.simulation) {
+        console.log(this.entry.simulation)
         this.entry.simulation.forEach((simulation) => {
           if (simulation.additional_mimetype.name === "application/x.vnd.abi.simulation+json") {
             let action = {
@@ -488,6 +492,7 @@ export default {
             }
             this.items['Simulations'].push({
               id,
+              description: simulation.description,
               title: baseName(filePath),
               filePath: filePath,
               type: 'Simulation',
@@ -578,7 +583,11 @@ export default {
       window.open(this.dataLocation, '_blank')
     },
     openFileBrowser: function() {
-      this.$emit('openFileBrowser', {datasetID: this.discoverId, items: this.items})
+      this.$emit('openFileBrowser', {
+        datasetID: this.discoverId,
+        datasetName: this.entry.name,
+        items: this.items,
+      })
     },
     openRepository: function () {
       let apiLocation = this.envVars.API_LOCATION

package/src/components/DatasetExplorer.vue

@@ -106,9 +106,10 @@
       </div>
       <el-dialog
         v-model="fileBrowserVisible"
-        title="File browser"
+        :title="fileBrowserTitle"
         width="700"
         top="16px"
+        :modal="false"
       >
         <FileBrowser
           ref="fileBrowserRef"
@@ -218,6 +219,7 @@ export default {
         display: 'flex',
       },
       cascaderIsReady: false,
+      fileBrowserTitle: "File Browser",
       fileBrowserVisible: false,
       fileSearch: {
         onGoing: false,
@@ -274,6 +276,15 @@ export default {
     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) {
@@ -687,6 +698,45 @@ 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 {
@@ -702,30 +752,6 @@ 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;
@@ -736,21 +762,29 @@ export default {
   overflow-y: scroll;
   scrollbar-width: thin;
   border-radius: var(--el-border-radius-base);
-}
 
-.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;
+  :deep(.step-item:not(:first-child) .seperator-path) {
+    width: 455px;
+    height: 0px;
+    border: solid 1px #e4e7ed;
+    background-color: #e4e7ed;
+  }
+
+  :deep(.el-loading-spinner .path) {
+    stroke: $app-primary-color;
+  }
+
+  :deep(.step-item:first-child .seperator-path) {
+    display: none;
+  }
 }
 
 .scrollbar::-webkit-scrollbar-track {
@@ -793,4 +827,5 @@ export default {
     box-shadow: none !important;
   }
 }
+
 </style>

package/src/components/FileBrowser.vue

@@ -1,6 +1,13 @@
 <template>
   <div>
-
+    <div class="badges-container">
+        <BadgesGroup
+          :displayDataset="false"
+          :displayText="false"
+          :items="items"
+          @categoryChanged="categoryChanged"
+        />
+      </div>
     <el-table
       v-if="fileLists"
       :data="fileLists"
@@ -12,15 +19,17 @@
         <template #default="props">
           <div class="file-details" m="4">
             <p m="t-0 b-2" v-if="props.row.description">
-              Description: {{ props.row.description }}
+              <b>Description:</b> {{ props.row.description }}
+            </p>
+            <p m="t-0 b-2">
+              <b>File path:</b> {{ props.row.filePath }}
             </p>
             <p m="t-0 b-2" v-if="props.row.protocol">
-              Protocol: {{ props.row.protocol }}
+              <b>Protocol</b>: {{ 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>
+              <p :key="key" m="t-0 b-2"><b>Column {{ key + 1 }}</b>: {{ val }}</p>
             </div>
-            <p m="t-0 b-2">File path: {{ props.row.filePath }}</p>
           </div>
         </template>
       </el-table-column>
@@ -43,18 +52,19 @@
         prop="fileName"
         label="File name"
         width="200"
-        class-name="title-text"
+        class-name="column-text"
       />
       <el-table-column
         prop="type"
         label="Type"
         width="100"
+        class-name="column-text"
       />
       <el-table-column
         fixed="right"
       >
         <template #header>
-          <el-input v-model="search" size="small" placeholder="Type to search" />
+          <el-input v-model="search" size="small" placeholder="Type to search" clearable/>
         </template>
         <template #default="scope">
           <el-button
@@ -71,6 +81,7 @@
 
 <script>
 //provide the s3Bucket related methods and data.
+import BadgesGroup from './BadgesGroup.vue'
 import {
   ElButton as Button,
   ElImage as Image,
@@ -78,12 +89,12 @@ import {
   ElTable as Table,
   ElTableColumn as TableColumn
 } from "element-plus";
-import EventBus from './EventBus.js'
 import { ref } from 'vue'
 
 export default {
   name: 'FileBrowser',
   components: {
+    BadgesGroup,
     Button,
     Image,
     Input,
@@ -93,11 +104,21 @@ export default {
   data() {
     return {
       category: "All",
+      items: {
+        Dataset: [],
+        Flatmaps:[],
+        Scaffolds: [],
+        Simulations: [],
+        Plots: [],
+      },
       search: "",
       tableData: undefined,
     }
   },
   methods: {
+    categoryChanged: function(name) {
+      this.category = name
+    },
     getActionLabel: function(type) {
       if (type === "Simulations" || type === "Protocol Data") {
         return "Run"
@@ -131,7 +152,9 @@ export default {
       }
     },
     setData: function(data) {
+      Object.assign(this.items, data)
       this.tableData = ref([])
+      this.category = "All"
       this.search = ""
       Object.keys(data).forEach((key) => {
         if (key !== "Dataset") {
@@ -163,10 +186,15 @@ export default {
   },
   computed: {
     fileLists() {
-      if (!this.search) return this.tableData
+      if (!this.search && this.category === "All") return this.tableData
       const keys = ["fileName", "filePath", "description", "type", "protocol"]
       const lower = this.search.toLowerCase()
       const list = this.tableData.filter((data) => {
+        if (this.category !== "All") {
+          if (data.type !== this.category) {
+            return false
+          }
+        }
         for (let key of keys) {
           if (data[key] && data[key].toLowerCase().includes(lower)) {
             return true
@@ -187,13 +215,18 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+.badges-container {
+  padding-bottom: 8px;
+}
+
 :deep(.el-table__body-wrapper) {
-  .title-text {
-    font-size: 10px;
+  .column-text {
+    font-size: 12px;
   }
 }
 
 .file-details {
-  font-size: 10px;
+  padding-left: 8px;
+  font-size: 12px;
 }
 </style>