@abi-software/map-side-bar 2.14.1-simulation.4 → 2.14.1-simulation.6

package/package.json

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

package/src/components/DatasetCard.vue

@@ -265,7 +265,7 @@ export default {
               }
             }
             let action = {
-              label: capitalise(this.label),
+              label: baseName(filePath),
               resource: flatmap.associated_flatmap.identifier,
               title: 'View Flatmap',
               type: 'Flatmap',
@@ -354,7 +354,7 @@ export default {
           }
 
           let action = {
-            label: capitalise(this.label),
+            label: baseName(filePath),
             resource: resource,
             s3uri: this.entry.s3uri,
             title: 'View plot',
@@ -400,7 +400,7 @@ export default {
             mimetype = thumbnail.mimetype.name
           }
           let action = {
-            label: capitalise(this.label),
+            label: baseName(filePath),
             resource: `${this.envVars.API_LOCATION}s3-resource/${this.getS3Prefix()}files/${filePath}${this.getS3Args()}`,
             title: "View 3D scaffold",
             type: "Scaffold",
@@ -482,7 +482,7 @@ export default {
                 this.envVars.TEST_DATA_LOCATION)
             }
             let action = {
-              label: capitalise(this.label),
+              label: baseName(filePath),
               resource: resource,
               s3uri: this.entry.s3uri,
               title: 'View simulation',
@@ -514,7 +514,7 @@ export default {
           let mimetype = ''
           let resource = protocol.protocol
           let action = {
-            label: capitalise(this.label),
+            label: baseName(protocol.csv_file),
             csv_file: protocol.csv_file,
             columns: protocol.columns,
             resource: resource,

package/src/components/DatasetExplorer.vue

@@ -244,9 +244,9 @@ export default {
   },
   methods: {
     fileActionTriggered: function(action) {
-      this.fileBrowserVisible = false
       EventBus.emit('PopoverActionClick', action)
       EventBus.emit('contextUpdate', action) // Pass to mapintegratedvuer
+      this.fileBrowserVisible = true
     },
     fileInfoReady: function(payload) {
       if (this.fileSearch.onGoing) {

package/src/components/FileBrowser.vue

@@ -19,24 +19,17 @@
         <template #default="props">
           <div class="file-details" m="4">
             <p m="t-0 b-2" v-if="props.row.description">
-              <b>>Description:</b> {{ props.row.description }}
+              <b>Description:</b> {{ props.row.description }}
             </p>
-            <p m="t-0 b-2" v-if="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>
-            </div>
             <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>
@@ -75,11 +68,11 @@
         </template>
         <template #default="scope">
           <el-button
-            size="small"
+            class="file-button"
             @click="handleView(scope.row)"
-          >
-            {{ getActionLabel(scope.row.type) }}
-          </el-button>
+            :icon="ElIconView"
+            type="primary"
+          />
         </template>
       </el-table-column>
     </el-table>
@@ -88,21 +81,29 @@
 
 <script>
 //provide the s3Bucket related methods and data.
+import { shallowRef } from 'vue';
 import BadgesGroup from './BadgesGroup.vue'
 import {
   ElButton as Button,
   ElImage as Image,
+  ElIcon as Icon,
   ElInput as Input,
   ElTable as Table,
   ElTableColumn as TableColumn
 } from "element-plus";
 import { ref } from 'vue'
+import {
+  View as ElIconView,
+} from '@element-plus/icons-vue'
+
 
 export default {
   name: 'FileBrowser',
   components: {
     BadgesGroup,
     Button,
+    ElIconView,
+    Icon,
     Image,
     Input,
     Table,
@@ -111,6 +112,7 @@ export default {
   data() {
     return {
       category: "All",
+      ElIconView: shallowRef(ElIconView),
       items: {
         Dataset: [],
         Flatmaps:[],
@@ -126,13 +128,6 @@ export default {
     categoryChanged: function(name) {
       this.category = name
     },
-    getActionLabel: function(type) {
-      if (type === "Simulations" || type === "Protocol Data") {
-        return "Run"
-      } else {
-        return "View"
-      }
-    },
     setSearchTerm: function(searchTerm) {
       this.search = searchTerm
     },
@@ -232,6 +227,16 @@ export default {
   }
 }
 
+.file-button {
+  border-radius: 50%;
+  width: 26px;
+  height: 26px;
+  padding:5px;
+  :deep(svg) {
+    scale: 1.2;
+  }
+}
+
 .file-details {
   padding-left: 8px;
   font-size: 12px;