@abi-software/map-side-bar 1.1.14 → 1.1.17

package/package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@abi-software/map-side-bar",
-  "version": "1.1.10",
+  "version": "1.1.14",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abi-software/map-side-bar",
-  "version": "1.1.14",
+  "version": "1.1.17",
   "main": "./dist/map-side-bar.common.js",
   "files": [
     "dist/*",

package/src/components/ContextCard.vue

@@ -1,18 +1,20 @@
 <template>
   <div class="context-card-container"  ref="container">
-    <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" :body-style="{ padding: '0px', 'background-color': 'white', display: 'flex', width: '516px'}">
-      <img :src="entry.banner" class="context-image card-left">
-      <div class="card-right">
-        <div class="title">{{contextData.heading}}</div>
-        <div>{{contextData.description}}</div>
-        <template v-for="(key, i) in contextData.views">
-          <br v-bind:key="i"/>
-          <span v-bind:key="i+'_1'"><img :src="getFileFromPath(key.thumbnail) " style="height: 25px;"> {{key.description}}</span>
-        </template>
-      </div>
-    </el-card>
+    <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">
+        <div class="card-right">
+          <div class="title">{{contextData.heading}}</div>
+          <div>{{contextData.description}}</div>
+          <template v-for="(view, i) in contextData.views">
+            <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>
+      </el-card>
+    </div>
   </div>
 </template>
 
@@ -23,6 +25,7 @@ import Vue from "vue";
 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"
 
 locale.use(lang);
 Vue.use(Link);
@@ -46,11 +49,22 @@ export default {
   data: function () {
     return {
       contextData: {},
-      showDetails: true
+      showDetails: true,
+      showContextCard: true
     };
   },
-  computed: {
-
+  watch: {
+    'entry.contextCardUrl': {
+      handler(val){
+        if (val) {
+          this.getContextFile(val)
+          this.showContextCard = true
+        } else {
+          this.showContextCard = false
+        }
+      },
+      immediate: true
+    }
   },
   methods: {
     getContextFile: function (contextFileUrl) {
@@ -64,7 +78,6 @@ export default {
         })
         .then((data) => {
           this.contextData = data
-          console.log(this.contextData)
         })
         .catch(() => {
           //set defaults if we hit an error
@@ -72,12 +85,24 @@ export default {
           this.discoverId = undefined
         });
     },
+    removeDoubleFilesPath: function(path){
+      if (path.includes('files/files/')){
+        return path.replace('files/files/', 'files/')
+      } else {
+        return path
+      }
+    },
     getFileFromPath: function(path){
+      path = this.removeDoubleFilesPath(path)
       return  `${this.entry.apiLocation}s3-resource/${this.entry.discoverId}/${this.entry.version}/files/${path}`
     },
-  },
-  mounted: function(){
-    this.getContextFile(this.entry.contextCardUrl)
+    openViewFile: function(view){
+
+      // note that we assume that the view file is in the same directory as the scaffold (viewUrls take relative paths)
+      this.entry.viewUrl = view.path.split('/')[view.path.split('/').length-1]
+      this.entry.type = 'Scaffold View'
+      EventBus.$emit("PopoverActionClick", this.entry)
+    }
   }
 };
 </script>
@@ -94,6 +119,12 @@ export default {
   background-color: white;
 }
 
+.context-card >>> .el-card__body {
+  padding: 0px;
+  display: flex;
+  width: 516px;   
+}
+
 .context-image{
   width: 250px
 }
@@ -115,6 +146,11 @@ export default {
   padding-left: 6px;
 }
 
+.cursor-pointer {
+  cursor: pointer;
+  height: 25px;
+}
+
 .title{
   font-weight: bold;
 }

package/src/components/DatasetCard.vue

@@ -17,9 +17,6 @@
           <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="entry.contextualInformation" @click="openContext" size="mini" class="button" icon="el-icon-view">View context data</el-button>
-          </div>
           <div>
             <el-button v-if="hasCSVFile"  @click="openPlot" size="mini" class="button" icon="el-icon-view">View plot</el-button>
           </div>
@@ -149,20 +146,6 @@ export default {
         }
         this.propogateCardAction(action)
     },
-    openContext: function(){
-      let action = {
-          label: capitalise(this.label),
-          resource: 'not used',
-          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),

package/src/components/SearchFilters.vue

@@ -18,9 +18,28 @@
           @tags-changed="tagsChangedCallback"
         ></custom-cascader>
         <div v-if="showFiltersText" class="filter-default-value">
-          <map-svg-icon icon="noun-filter" class="filter-icon-inside" />Apply
           Filters
         </div>
+        <el-popover
+          title="How do filters work?"
+          width="250"
+          trigger="hover"
+          :append-to-body=false
+          popper-class="popover"
+          >
+          <map-svg-icon slot="reference" icon="help" class="help"/>
+          <div >
+            <strong>Within categories:</strong> OR 
+            <br/>
+            example: 'heart' OR 'colon'
+            <br/>
+            <br/>
+            <strong>Between categories:</strong> AND
+            <br/>
+            example: 'rat' AND 'lung'
+          </div>
+        </el-popover>
+        
       </span>
     </transition>
 
@@ -45,7 +64,7 @@
 <script>
 /* eslint-disable no-alert, no-console */
 import Vue from "vue";
-import { Option, Select } from "element-ui";
+import { Option, Select, Popover } from "element-ui";
 import CustomCascader from "./Cascader";
 import lang from "element-ui/lib/locale/lang/en";
 import locale from "element-ui/lib/locale";
@@ -58,6 +77,7 @@ import { facetPropPathMapping } from "../algolia/utils.js";
 locale.use(lang);
 Vue.use(Option);
 Vue.use(Select);
+Vue.use(Popover)
 
 const capitalise = function (txt) {
   return txt.charAt(0).toUpperCase() + txt.slice(1);
@@ -157,6 +177,7 @@ export default {
                   this.createCascaderItemValue(facet.label, facetItem.label);
               });
             });
+            this.createDataTypeFacet()
           })
           .finally(() => {
             resolve();
@@ -176,17 +197,28 @@ export default {
         // Check for show all in selected cascade options
         event = this.showAllEventModifier(event);
 
-        // Move results from arrays to object
-        let filters = event.filter( selection => selection !== undefined).map( fs => ({
+        // Create results for the filter update 
+        let filterKeys = event.filter( selection => selection !== undefined).map( fs => ({
           facetPropPath: fs[0], 
           facet: fs[1].split("/")[1],
           term: fs[1].split("/")[0], 
         }))
 
+        // Move results from arrays to object for use on scicrunch (note that we remove 'duplicate' as that is only needed for filter keys)
+        let filters = event.filter( selection => selection !== undefined).map( fs => {
+          let propPath = fs[0].includes('duplicate') ? fs[0].split('duplicate')[0] : fs[0]
+          return {
+            facetPropPath: propPath, 
+            facet: fs[1].split("/")[1],
+            term: fs[1].split("/")[0], 
+          }
+        })
+
+
         this.$emit('loading', true) // let sidebarcontent wait for the requests
 
         this.$emit("filterResults", filters); // emit filters for apps above sidebar
-        this.setCascader(filters); //update our cascader v-model if we modified the event
+        this.setCascader(filterKeys); //update our cascader v-model if we modified the event
         this.makeCascadeLabelsClickable();
       }
     },
@@ -255,6 +287,28 @@ export default {
       }
       return event;
     },
+    createDataTypeFacet: function(){
+      let dataFacet = {...this.facets[2]} // copy the 'Experiemental approach' facet
+      let count = this.facets.at(-1).id // get the last id count
+
+      // Step through the children that are valid data types, switch thier values 
+      let newChildren = dataFacet.children.filter( el=> {
+        if (el.label === 'Scaffold' || el.label === 'Simulation' || el.label === 'Show all'){
+          el.key = el.label
+          el.id = count
+          el.value = el.value.replace('Experimental approach', 'Data type')
+          count++
+          return el
+        }
+      })
+      dataFacet.id = count
+      dataFacet.key = 'Data type'
+      // Add 'duplicate' so that the key is unique. This is removed in the cascade event for filtering
+      dataFacet.value += 'duplicate' 
+      dataFacet.children = newChildren
+      dataFacet.label = 'Data type'
+      this.facets.push(dataFacet)
+    },
     cascadeExpandChange: function (event) {
       //work around as the expand item may change on modifying the cascade props
       this.__expandItem__ = event;
@@ -358,6 +412,20 @@ export default {
   padding-left: 16px;
 }
 
+.help {
+  width: 24px !important;
+  height: 24px;
+  transform: scale(1.1);
+  color: #8300bf;
+  cursor: pointer;
+}
+
+.popover {
+  color: rgb(48, 49, 51);
+  font-family: Asap;
+  margin: 12px;
+}
+
 .filter-icon-inside {
   width: 12px !important;
   height: 12px !important;
@@ -439,4 +507,51 @@ export default {
 .cascader >>> .el-cascader-node__label {
   text-align: left;
 }
+
+.filters >>> .el-popover {
+    background: #f3ecf6 !important;
+    border: 1px solid #8300BF;
+    border-radius: 4px;
+    color: #303133 !important;
+    font-size: 12px;
+    line-height: 18px;
+  
+  
+}
+
+.filters >>> .el-popover[x-placement^="top"] .popper__arrow {
+  border-top-color: #8300BF;
+  border-bottom-width: 0;
+}
+.filters >>> .el-popover[x-placement^="top"] .popper__arrow::after {
+  border-top-color: #f3ecf6;
+  border-bottom-width: 0;
+}
+
+.filters >>> .el-popover[x-placement^="bottom"] .popper__arrow {
+  border-top-width: 0;
+  border-bottom-color: #8300BF;
+}
+.filters >>> .el-popover[x-placement^="bottom"] .popper__arrow::after {
+  border-top-width: 0;
+  border-bottom-color: #f3ecf6;
+}
+
+.filters >>> .el-popover[x-placement^="right"] .popper__arrow {
+  border-right-color: #8300BF;
+  border-left-width: 0;
+}
+.filters >>> .el-popover[x-placement^="right"] .popper__arrow::after {
+  border-right-color: #f3ecf6;
+  border-left-width: 0;
+}
+
+.filters >>> .el-popover[x-placement^="left"] .popper__arrow {
+  border-right-width: 0;
+  border-left-color: #8300BF;
+}
+.filters >>> .el-popover[x-placement^="left"] .popper__arrow::after {
+  border-right-width: 0;
+  border-left-color: #f3ecf6;
+}
 </style>

package/src/components/SidebarContent.vue

@@ -1,7 +1,7 @@
 <template>
   <el-card :body-style="bodyStyle" class="content-card">
     <div slot="header" class="header">
-      <context-card v-if="contextCardEntry" :entry="contextCardEntry" />
+      <context-card v-if="contextCardEntry && contextCardEnabled" :entry="contextCardEntry" />
       <el-input
         class="search-input"
         placeholder="Search"
@@ -102,7 +102,8 @@ var initial_state = {
   start: 0,
   hasSearched: false,
   sciCrunchError: false,
-  contextCardEntry: undefined
+  contextCardEntry: undefined,
+  contextCardEnabled: false
 };
 
 export default {