@abi-software/map-side-bar 1.2.0-beta.8 → 1.2.0-beta.9

package/package-lock.json

@@ -1,13 +1,13 @@
 {
   "name": "@abi-software/map-side-bar",
-  "version": "1.2.0-beta.7",
+  "version": "1.2.0-beta.8",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
     "@abi-software/gallery": {
-      "version": "0.3.0-beta.2",
-      "resolved": "https://registry.npmjs.org/@abi-software/gallery/-/gallery-0.3.0-beta.2.tgz",
-      "integrity": "sha512-sYfXNdM3jhRmEJy9gscPfafcyzL9otGqfc349SRRzFxeEsncZlFSEPU0huXgt5y3+FxF+VzKPoYhcENDmSDn9w==",
+      "version": "0.3.0-beta.3",
+      "resolved": "https://registry.npmjs.org/@abi-software/gallery/-/gallery-0.3.0-beta.3.tgz",
+      "integrity": "sha512-glHtCM2h+c3CyBetb80CA/2N+A7lPB6WPkSRpAO0y+7RIv8Vy7KkxY3Y4yz9YgoP88pOibdZCr9fmPaYMkd8kg==",
       "requires": {
         "@babel/code-frame": "^7.12.11",
         "axios": "^0.26.1",
@@ -54,9 +54,9 @@
           }
         },
         "core-js": {
-          "version": "3.22.2",
-          "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.22.2.tgz",
-          "integrity": "sha512-Z5I2vzDnEIqO2YhELVMFcL1An2CIsFe9Q7byZhs8c/QxummxZlAHw33TUHbIte987LkisOgL0LwQ1P9D6VISnA=="
+          "version": "3.22.4",
+          "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.22.4.tgz",
+          "integrity": "sha512-1uLykR+iOfYja+6Jn/57743gc9n73EWiOnSJJ4ba3B4fOEYDBv25MagmEZBxTp5cWq4b/KPx/l77zgsp28ju4w=="
         },
         "element-ui": {
           "version": "2.15.8",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abi-software/map-side-bar",
-  "version": "1.2.0-beta.8",
+  "version": "1.2.0-beta.9",
   "main": "./dist/map-side-bar.common.js",
   "files": [
     "dist/*",
@@ -17,7 +17,7 @@
     "start": "vue-cli-service serve"
   },
   "dependencies": {
-    "@abi-software/gallery": "^0.3.0-beta.2",
+    "@abi-software/gallery": "^0.3.0-beta.3",
     "@abi-software/svg-sprite": "^0.1.14",
     "algoliasearch": "^4.10.5",
     "element-ui": "^2.13.0",

package/src/components/BadgesGroup.vue

@@ -0,0 +1,141 @@
+<template>
+  <div v-if="categories['All'].size > 1" class="container"  ref="container">
+    <template v-for="(item, key) in categories" >
+        <el-badge v-if="item.size > 0" :value="item.size" class="badge-item" :key="key">
+          <el-button
+            :class="[{ 'active': key == active},'badges-button']"
+            @click="categoryClicked(key)"
+            size="small">{{ key }}
+          </el-button>
+        </el-badge>
+    </template>
+  </div>
+</template>
+
+
+<script>
+/* eslint-disable no-alert, no-console */
+import Vue from "vue";
+import { Badge, Button } from "element-ui";
+import lang from "element-ui/lib/locale/lang/en";
+import locale from "element-ui/lib/locale";
+
+locale.use(lang);
+Vue.use(Badge);
+Vue.use(Button);
+
+export default {
+  name: "BadgesGroup",
+  props: {
+    /**
+     * Object containing information for
+     * the required viewing.
+     */
+    additionalLinks: {
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+    datasetBiolucida: {
+      type: Object,
+      default: () => {
+        return {};
+      },
+    },
+    entry:  {
+      type: Object,
+      default: () => {
+        return {};
+      },
+    },
+  },
+  data: function () {
+    return {
+      categories: { "All": {size: 1} },
+      active: "All"
+    };
+  },
+  methods: {
+    addToCategories: function (array, name) {
+      if (array && array.length > 0) {
+        this.categories[name] = { size: array.length };
+        this.categories["All"].size += array.length;
+      }
+    },
+    addSimulationsToCategories: function (array) {
+      if (array) {
+        let size = 0;
+
+        array.forEach(item => {
+          if (item.description == "SED-ML file" || item.description == "CellML file") {
+            size = 1;
+          }
+        });
+        if (size > 0) {
+          this.categories["Simulations"] = { size };
+          this.categories["All"].size += size;
+        }
+      }
+    },
+    categoryClicked: function(name) {
+      this.active = name;
+      this.$emit("categoryChanged", name);
+    }
+  },
+  watch: {
+    datasetBiolucida: {
+      deep: true,
+      immediate: true,
+      handler: function (biolucidaData) {
+        if ("dataset_images" in biolucidaData) {
+          this.addToCategories(biolucidaData["dataset_images"], "Biolucida Images");
+        }
+      }
+    },
+    entry: {
+      deep: true,
+      immediate: true,
+      handler: function () {
+        this.addToCategories(this.entry.images, 'Images');
+        this.addToCategories(this.entry.scaffolds, 'Scaffolds');
+        this.addToCategories(this.entry.segmentation, 'Segmentations');
+        this.addSimulationsToCategories(this.additionalLinks);
+        this.addToCategories(this.entry.videos, 'Videos');
+      }
+    }
+  },
+};
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+.badges-button,
+.badges-button:hover,
+.badges-button:focus
+{
+  border-radius: 3px;
+  font-size: 0.75rem;
+  padding: 0.2rem 0.2rem;
+  background: #f9f2fc;
+  border: 1px solid #8300BF;
+  color: #8300BF;
+}
+
+.badges-button.active
+{
+  background: #8300BF;
+  border: 1px solid #8300BF;
+  color: #fff;
+}
+
+.badge-item {
+  margin-top: 0.5rem;
+  margin-right: 1rem;
+}
+
+.badge-item >>> .el-badge__content {
+  background: #8300BF;
+}
+
+</style>

package/src/components/ContextCard.vue

@@ -3,14 +3,38 @@
     <div v-show="showContextCard">
       <div v-show="showDetails" class="hide" @click="showDetails = !showDetails">Hide information<i class="el-icon-arrow-up"></i></div>
       <div v-show="!showDetails" class="hide" @click="showDetails = !showDetails">Show information<i class="el-icon-arrow-down"></i></div>
-      <el-card v-if="showDetails && Object.keys(contextData).length !== 0" class="context-card card" >
-        <img :src="entry.banner" class="context-image card-left">
+      <el-card v-if="showDetails && Object.keys(contextData).length !== 0" v-loading="loading" class="context-card card" >
+        <div class="card-left">
+          <img :src="entry.banner" class="context-image">
+        </div>
         <div class="card-right">
           <div class="title">{{contextData.heading}}</div>
           <div>{{contextData.description}}</div>
+          <br/>
+          <div v-if="contextData.views" class="subtitle">Scaffold Views</div>
           <template v-for="(view, i) in contextData.views">
+            <span v-bind:key="i+'_1'" @click="openViewFile(view)" class="context-card-item">
+              <img class="key-image" :src="getFileFromPath(view.thumbnail)"> 
+              {{view.description}}
+            </span>
             <br v-bind:key="i"/>
-            <span v-bind:key="i+'_1'" @click="openViewFile(view)" class="scaffold-view"><img :src="getFileFromPath(view.thumbnail)"> {{view.description}}</span>
+          </template>
+          <div style="margin-bottom: 16px;"/>
+          <div v-if="contextData.samples && contextData.samples.length > 0" class="subtitle">Samples on Scaffold</div>
+          <template v-for="(sample, i) in contextData.samples">
+              <span v-bind:key="i+'_3'" class="context-card-item" @click="toggleSampleDetails(i)">
+                <div v-bind:key="i+'_6'" style="display: flex">
+                  <div v-if="sample.color" class="color-box" :style="'background-color:'+ sample.color"></div>
+                  <img class="key-image" v-else-if="sample.thumbnail" :src="getFileFromPath(sample.thumbnail)">
+                  {{sample.heading}}
+                  <i class="el-icon-warning-outline info"></i>
+                </div>
+              </span>
+              <div v-bind:key="i+'_4'" v-if="sampleDetails[i]">
+                {{sample.description}}
+                <a v-bind:key="i+'_5'" v-if="sampleDetails[i]" :href="generateFileLink(sample.path)" target="_blank">View Source</a>
+              </div>
+              <br v-bind:key="i+'_2'"/>
           </template>
         </div>
       </el-card>
@@ -26,6 +50,7 @@ import { Link, Icon, Card, Button, Select, Input } from "element-ui";
 import lang from "element-ui/lib/locale/lang/en";
 import locale from "element-ui/lib/locale";
 import EventBus from "./EventBus"
+import hardcoded_info from './hardcoded-context-info'
 
 locale.use(lang);
 Vue.use(Link);
@@ -36,7 +61,6 @@ Vue.use(Select);
 Vue.use(Input);
 
 
-
 export default {
   name: "contextCard",
   props: {
@@ -50,15 +74,22 @@ export default {
     return {
       contextData: {},
       showDetails: true,
-      showContextCard: true
+      showContextCard: true,
+      sampleDetails: {},
+      loading: false
     };
   },
   watch: {
     'entry.contextCardUrl': {
       handler(val){
         if (val) {
-          this.getContextFile(val)
-          this.showContextCard = true
+          // used for hardcoding data
+          if (val === true){
+            this.contextData = hardcoded_info[this.entry.discoverId]
+          } else {
+            this.getContextFile(val)
+            this.showContextCard = true
+          }
         } else {
           this.showContextCard = false
         }
@@ -68,6 +99,7 @@ export default {
   },
   methods: {
     getContextFile: function (contextFileUrl) {
+      this.loading = true
       fetch(contextFileUrl)
         .then((response) =>{
           if (!response.ok){
@@ -78,24 +110,42 @@ export default {
         })
         .then((data) => {
           this.contextData = data
+          console.log(data)
+          this.loading = false
         })
         .catch(() => {
           //set defaults if we hit an error
           this.thumbnail = require('@/../assets/missing-image.svg')
           this.discoverId = undefined
+          this.loading = false
         });
     },
     removeDoubleFilesPath: function(path){
-      if (path.includes('files/files/')){
-        return path.replace('files/files/', 'files/')
+      if (path.includes('files/')){
+        return path.replace('files/', '')
       } else {
         return path
       }
     },
+    toggleSampleDetails: function(i){
+      if (this.sampleDetails[i] === undefined){
+        Vue.set(this.sampleDetails, i, true)
+      } else {
+        Vue.set(this.sampleDetails, i, !this.sampleDetails[i])
+      }
+    },
     getFileFromPath: function(path){
+      // for hardcoded data
+      if(this.entry.contextCardUrl === true){
+        return path
+      }
       path = this.removeDoubleFilesPath(path)
       return  `${this.entry.apiLocation}s3-resource/${this.entry.discoverId}/${this.entry.version}/files/${path}`
     },
+    generateFileLink(path){
+      return `https://sparc.science/file/${this.entry.discoverId}/${this.entry.version}?path=${encodeURI(path)}`
+
+    },
     openViewFile: function(view){
 
       // note that we assume that the view file is in the same directory as the scaffold (viewUrls take relative paths)
@@ -117,6 +167,19 @@ export default {
 
 .context-card{
   background-color: white;
+  max-height: 10  50px;
+  padding: 8px;
+  font-size: 14px;
+}
+
+.context-card-item{
+  cursor: pointer;
+  padding-bottom: 8px;
+}
+
+.key-image {
+  width: 25px;
+  height: auto;
 }
 
 .context-card >>> .el-card__body {
@@ -126,15 +189,25 @@ export default {
 }
 
 .context-image{
-  width: 250px
+  width: 250px;
+  height: auto;
+}
+
+.color-box {
+  width: 16px;
+  height: 16px;
+  border: solid 1px #8300bf;
+  border-radius: 2px;
+  margin-right: 8px;
 }
 
 .card {
-  padding-top: 18px;
   margin-bottom: 18px;
   position: relative;
   border: solid 1px #e4e7ed;
   display: flex;
+  width: 500px;
+  max-height: 480px;
 }
 
 .card-left{
@@ -151,7 +224,17 @@ export default {
   height: 25px;
 }
 
+.info{
+  transform: rotate(180deg);
+  color: #8300bf;
+  margin-left: 8px;
+}
+
 .title{
   font-weight: bold;
 }
+
+.subtitle{
+  font-weight: bold;
+}
 </style>

package/src/components/DatasetCard.vue

@@ -5,9 +5,6 @@
       <div class="seperator-path"></div>
       <div class="card" >
         <span class="card-left">
-          <!--
-          <img svg-inline class="banner-img" :src="thumbnail" @click="openDataset"/>
-          -->
           <image-gallery v-if="dataIsReady" 
             :datasetId="discoverId"
             :datasetVersion="version"
@@ -24,42 +21,26 @@
             :label="label"
             :datasetThumbnail="thumbnail"
             :dataset-biolucida="biolucidaData"
-            @card-clicked="galleryClicked"/>
+            :category="currentCategory"
+            @card-clicked="galleryClicked"
+          />
         </span>
         <div class="card-right" >
           <div class="title" @click="cardClicked">{{entry.name}}</div>
           <div class="details">{{contributors}} {{entry.publishDate ? `(${publishYear})` : ''}}</div>
           <div class="details">{{samples}}</div>
           <div class="details">id: {{discoverId}}</div>
-          <!--
-          <div>
-            <el-button v-if="!entry.simulation" @click="openDataset" size="mini" class="button" icon="el-icon-coin">View dataset</el-button>
-          </div>
-          <div>
-            <el-button v-if="entry.scaffolds" @click="openScaffold" size="mini" class="button" icon="el-icon-view">View scaffold</el-button>
-          </div>
-          -->
-          <!--
-          <div>
-            <el-button v-if="hasCSVFile"  @click="openPlot" size="mini" class="button" icon="el-icon-view">View plot</el-button>
-          </div>
-          -->
           <div>
             <el-button v-if="entry.simulation"  @click="openRepository" size="mini" class="button" icon="el-icon-view">View repository</el-button>
           </div>
-          <!--
-          <div>
-            <el-button v-if="entry.simulation"  @click="openSimulation" size="mini" class="button" icon="el-icon-view">View simulation</el-button>
-          </div>
-          -->
-          <!--
-          <div>
-            <el-button v-if="entry.segmentation"  @click="openSegmentation" size="mini" class="button" icon="el-icon-view">View segmentation</el-button>
-          </div>
-          <div>
-            <el-button v-if="biolucidaData"  @click="openImage" size="mini" class="button" icon="el-icon-view">View image</el-button>
+          <div class="badges-container">
+            <badges-group
+              :entry="entry"
+              :dataset-biolucida="biolucidaData"
+              :additionalLinks="simulationLinks"
+              @categoryChanged="categoryChanged"
+            />
           </div>
-          -->
         </div>
 
       </div>
@@ -72,6 +53,7 @@
 <script>
 /* eslint-disable no-alert, no-console */
 import Vue from "vue";
+import BadgesGroup from "./BadgesGroup.vue";
 import { Button, Icon } from "element-ui";
 import lang from "element-ui/lib/locale/lang/en";
 import locale from "element-ui/lib/locale";
@@ -83,13 +65,9 @@ locale.use(lang);
 Vue.use(Button);
 Vue.use(Icon);
 
-const capitalise = function(string){
-  return string.replace(/\b\w/g, v => v.toUpperCase());
-}
-
 export default {
   name: "DatasetCard",
-  components: { ImageGallery },
+  components: { BadgesGroup, ImageGallery },
   props: {
     /**
      * Object containing information for
@@ -108,8 +86,10 @@ export default {
       dataLocation: this.entry.doi,
       discoverId: undefined,
       cardOverflow: false,
+
       expanded: false,
-      biolucidaData: undefined
+      biolucidaData: undefined,
+      currentCategory: "All"
     };
   },
   computed: {
@@ -170,37 +150,12 @@ export default {
     cardClicked: function(){
       this.openDataset()
     },
+    categoryChanged: function(name) {
+      this.currentCategory = name;
+    },
     galleryClicked: function(payload) {
       this.propogateCardAction(payload)
     },
-    openScaffold: function(){
-      let action = {
-          label: capitalise(this.label),
-          resource: this.getScaffoldPath(this.discoverId, this.version, this.entry.scaffolds[0].dataset.path),
-          title: "View 3D scaffold",
-          type: "Scaffold",
-          discoverId: this.discoverId,
-          apiLocation: this.envVars.API_LOCATION,
-          version: this.version,
-          contextCardUrl: this.entry.contextualInformation ? this.getFileFromPath(this.discoverId, this.version,this.entry.contextualInformation) : undefined,
-          banner: this.thumbnail
-        }
-        this.propogateCardAction(action)
-    },
-    openPlot: function(){
-      let action = {
-          label: capitalise(this.label),
-          resource: this.getFileFromPath(this.discoverId, this.version, this.entry.csvFiles[0].dataset.path),
-          title: "View plot",
-          type: "Plot",
-          discoverId: this.discoverId,
-          apiLocation: this.envVars.API_LOCATION,
-          version: this.version,
-          contextCardUrl: this.entry.contextualInformation ? this.getFileFromPath(this.discoverId, this.version,this.entry.contextualInformation) : undefined,
-          banner: this.thumbnail
-        }
-        this.propogateCardAction(action)
-    },
     openDataset: function(){
       window.open(this.dataLocation,'_blank');
     },
@@ -227,92 +182,9 @@ export default {
         }
       });
     },
-    openSimulation: function() {
-      let isSedmlResource = false;
-      let resource = undefined;
-      this.entry.additionalLinks.forEach(function(el) {
-        if (el.description == "SED-ML file") {
-          isSedmlResource = true;
-          resource = el.uri;
-        } else if (!isSedmlResource && (el.description == "CellML file")) {
-          resource = el.uri;
-        }
-      });
-      let action = {
-          label: undefined,
-          resource: resource,
-          discoverId: this.dataLocation,
-          apiLocation: this.envVars.API_LOCATION,
-          version: this.version,
-          contextCardUrl: this.entry.contextualInformation ? this.getFileFromPath(this.discoverId, this.version,this.entry.contextualInformation) : undefined,
-          banner: this.thumbnail,
-          title: "View simulation",
-          name: this.entry.name,
-          description: this.entry.description,
-          type: "Simulation"
-        }
-        EventBus.$emit("PopoverActionClick", action)
-    },
-    openSegmentation: function() {
-      if (this.entry.segmentation && this.entry.segmentation[0]) {
-        const segmentation = this.entry.segmentation[0];
-        const filePath = segmentation.dataset.path;
-        const datasetId = this.discoverId;
-        const datasetVersion = this.version;
-        const prefix = this.envVars.NL_LINK_PREFIX;
-        const resource = {
-          share_link: `${prefix}/dataviewer?datasetId=${datasetId}&version=${datasetVersion}&path=files/${filePath}`
-        };
-        let action = {
-          label: capitalise(this.label),
-          resource: resource,
-          dataset: this.dataLocation,
-          datasetId: this.discoverId,
-          title: "View segmentation",
-          name: this.entry.name,
-          description: this.entry.description,
-          type: "Segmentation"
-        };
-        EventBus.$emit("PopoverActionClick", action);
-      }
-    },
-    openImage: function() {
-      if (this.biolucidaData) {
-        const biolucidaData = this.biolucidaData;
-        if ('dataset_images' in biolucidaData) {
-          const image = biolucidaData['dataset_images'][0];
-          const resource = {
-            share_link: image.share_link,
-            id: image.image_id,
-            itemId: image.sourcepkg_id
-          }
-          let action = {
-            label: capitalise(this.label),
-            resource: resource,
-            dataset: this.dataLocation,
-            datasetId: this.discoverId,
-            title: "View image",
-            name: this.entry.name,
-            description: this.entry.description,
-            type: "Biolucida"
-          };
-          EventBus.$emit("PopoverActionClick", action);
-        }
-      }
-    },
     propogateCardAction: function(action){
       EventBus.$emit("PopoverActionClick", action)
-      if (action.contextCardUrl) {
-        this.$emit('contextUpdate', action)
-      }
-    },
-    getScaffoldPath: function(discoverId, version, scaffoldPath){
-      let id = discoverId
-      let path = `${this.envVars.API_LOCATION}s3-resource/${id}/${version}/files/${scaffoldPath}`
-      return path
-    },
-    getFileFromPath: function(discoverId, version, path){
-      return  `${this.envVars.API_LOCATION}s3-resource/${discoverId}/${version}/files/${path}`
+      this.$emit('contextUpdate', action)
     },
     isOverflown: function(el){
       return el.clientHeight < el.scrollHeight
@@ -472,4 +344,8 @@ export default {
   letter-spacing: 1.05px;
   color: #484848;
 }
+
+.badges-container {
+  margin-top:0.5rem;
+}
 </style>