@abi-software/map-side-bar 1.3.37 → 2.0.0-response.0

package/package.json

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

package/src/App.vue

@@ -12,7 +12,8 @@
     <el-button @click="keywordSearch">keyword search</el-button>
     <SideBar :envVars="envVars" class="side-bar" ref="sideBar" :visible="sideBarVisibility"
       :tabs="tabs" :activeId="activeId" @tabClicked="tabClicked"
-      @search-changed="searchChanged($event)" @actionClick="action"/>
+      @search-changed="searchChanged($event)" @actionClick="action"
+      :alternate-search="mySearch"/>
   </div>
 </template>
 
@@ -20,7 +21,9 @@
 /* eslint-disable no-alert, no-console */
 // optionally import default styles
 import SideBar from './components/SideBar'
+import { mySearch } from './demo/AlternateResponse.js'
 
+console.log(mySearch)
 // let testContext = {
 //   "description": "3D digital tracings of the enteric plexus obtained from seven subjects (M11, M16, M162, M163, M164, M168) are mapped randomly on mouse proximal colon. The data depicts individual neural wiring patterns in enteric microcircuits, and revealed both neuron and fiber units wired in a complex organization.",
 //   "heading": "Digital tracings of enteric plexus",
@@ -95,6 +98,8 @@ export default {
         ROOT_URL: process.env.VUE_APP_ROOT_URL,
       },
       activeId: 1,
+      mySearch: mySearch,
+      //mySearch: undefined,
     }
   },
   methods:{

package/src/components/BadgesGroup.vue

@@ -75,7 +75,10 @@ export default {
     categoryClicked: function(name) {
       this.active = name;
       this.$emit("categoryChanged", name);
-    }
+    },
+    resetCategory: function() {
+      this.categories = { All: { size: 1 }, Dataset: { size: 1 } };
+    },
   },
   watch: {
     datasetBiolucida: {
@@ -91,6 +94,7 @@ export default {
       deep: true,
       immediate: true,
       handler: function () {
+        this.resetCategory();
         this.addToCategories(this.entry.scaffolds, 'Scaffolds');
         this.addToCategories(this.entry.segmentation, 'Segmentations');
         this.addToCategories(this.entry.plots, 'Plots');

package/src/components/DatasetCard.vue

@@ -4,9 +4,10 @@
       <div class="seperator-path"></div>
       <div v-loading="loading" class="card" >
         <span class="card-left">
-          <image-gallery v-if="!loading && discoverId" 
-            :datasetId="discoverId"
+          <image-gallery v-if="!loading && datasetId" 
+            :datasetId="datasetId"
             :datasetVersion="version"
+            :dataLocation="dataLocation"
             :entry="entry"
             :envVars="envVars"
             :label="label"
@@ -14,6 +15,7 @@
             :dataset-biolucida="biolucidaData"
             :category="currentCategory"
             @card-clicked="galleryClicked"
+            :key="datasetId"
           />
         </span>
         <div class="card-right" >
@@ -56,6 +58,11 @@ Vue.use(Icon);
 export default {
   name: "DatasetCard",
   components: { BadgesGroup, ImageGallery },
+  inject: {
+    'alternateSearch' : {
+      default: undefined,
+    },
+  },
   props: {
     /**
      * Object containing information for
@@ -74,7 +81,7 @@ export default {
     return {
       thumbnail: require('@/../assets/missing-image.svg'),
       dataLocation: this.entry.doi,
-      discoverId: undefined,
+      datasetId: undefined,
       loading: true,
       version: 1,
       lastDoi: undefined,
@@ -99,7 +106,8 @@ export default {
     samples: function() {
       let text = "";
       if (this.entry.species) {
-        if (speciesMap[this.entry.species[0].toLowerCase()]){
+        if (this.entry.species.length > 0 &&
+          speciesMap[this.entry.species[0].toLowerCase()]) {
           text = `${speciesMap[this.entry.species[0].toLowerCase()]}`;
         } else {
           text = `${this.entry.species}`;
@@ -188,21 +196,37 @@ export default {
           })
           .then((data) => {
             this.thumbnail = data.banner
-            this.discoverId = data.id
+            this.datasetId = data.id
             this.version = data.version
-            this.dataLocation = `https://sparc.science/datasets/${data.id}?type=dataset`
-            this.getBiolucidaInfo(this.discoverId)
+            this.dataLocation = `${this.envVars.ROOT_URL}/datasets/${data.id}?type=dataset`
+            this.getBiolucidaInfo(this.datasetId)
             this.loading = false
           })
           .catch(() => {
             //set defaults if we hit an error
             this.thumbnail = require('@/../assets/missing-image.svg')
-            this.discoverId = Number(this.entry.datasetId)
+            this.datasetId = Number(this.entry.datasetId)
             this.loading = false
           });
       }
 
     },
+    initialise: function() {
+      if (!this.alternateSearch) {
+        this.getBanner();
+      } else {
+        this.dataLocation = this.entry.data_url;
+        this.datasetId = this.entry.datasetId;
+        if (this.entry.scaffoldViews.length > 0) {
+          this.thumbnail = this.entry.scaffoldViews[0].image_url;
+        } else if (this.entry.thumbnails.length > 0) {
+          this.thumbnail = this.entry.thumbnails[0].image_url;
+        } else {
+          this.thumbnail = require("@/../assets/missing-image.svg");
+        }
+        this.loading = false;
+      }
+    },
     lastName: function(fullName){
       return fullName.split(',')[0]
     },
@@ -219,12 +243,12 @@ export default {
     }
   },
   created: function() {
-    this.getBanner()
+    this.initialise();
   },
   watch: {
     // currently not using card overflow
-    'entry.description': function() { // watch it
-      this.getBanner()
+    'entry.datasetId': function() { // watch it
+      this.initialise();
     }
   },
 };
@@ -257,7 +281,7 @@ export default {
 }
 
 .card-left{
-  flex: 1
+  flex: 1;
 }
 
 .card-right {

package/src/components/ImageGallery.vue

@@ -37,6 +37,11 @@ import "@abi-software/gallery/dist/gallery.css";
 export default {
   name: "ImageGallery",
   components: { Gallery },
+  inject: {
+    'alternateSearch' : {
+      default: undefined,
+    },
+  },  
   mixins: [GalleryHelper, S3Bucket],
   props: {
     datasetBiolucida: {
@@ -59,9 +64,10 @@ export default {
         return [];
       },
     },
-    datasetId: {
-      type: Number,
-      default: -1,
+    datasetId: [String, Number],
+    dataLocation: {
+      type: String,
+      default: "",
     },
     datasetVersion: {
       type: Number,
@@ -117,9 +123,10 @@ export default {
       this.$emit('card-clicked', payload);
     },
     createSciCurnchItems: function () {
-      this.updateS3Bucket(this.entry.s3uri);
+      if (this.entry.s3uri) this.updateS3Bucket(this.entry.s3uri);
       this.createDatasetItem();
-      this.createScaffoldItems();
+      if (this.alternateSearch) this.createScaffoldViewItems();
+      else this.createScaffoldItems();
       this.createSimulationItems();
       this.createPlotItems();
       this.createSegmentationItems();
@@ -129,13 +136,17 @@ export default {
       */
     },
     createDatasetItem: function () {
-      const link = `${this.envVars.ROOT_URL}/datasets/${this.datasetId}?type=dataset`
+      const link = this.dataLocation;
+      let name = String(this.datasetId);
+      if (name.length <= 5) name = `Dataset ${name}`;
+      else name = "Dataset";
+
       if (this.datasetThumbnail) {
         this.items['Dataset'].push({
           id: -1,
           //Work around gallery requires a truthy string
           title: " ",
-          type: `Dataset ${this.datasetId}`,
+          type: name,
           thumbnail: this.datasetThumbnail,
           link,
           hideType: true,
@@ -164,28 +175,44 @@ export default {
         this.entry.plots.forEach((plot) => {
           const filePath = plot.dataset.path;
           const id = plot.identifier;
-          const thumbnail = this.getThumbnailForPlot(plot, this.entry.thumbnails);
           let thumbnailURL = undefined;
           let mimetype = '';
-          if (thumbnail) {
-            thumbnailURL = this.getImageURLFromS3(this.envVars.API_LOCATION, {
-              id,
-              datasetId: this.datasetId,
-              datasetVersion: this.datasetVersion,
-              file_path: thumbnail.dataset.path,
-              s3Bucket: this.s3Bucket,
-            });
-            mimetype = thumbnail.mimetype.name;
-          }
+          let supplementalData = [];
+          let sourceUrl = "";
+          let metadata = undefined;
+          let filePathPrefix = ""; `${this.envVars.API_LOCATION}/s3-resource/${this.datasetId}/${this.datasetVersion}/files/`;
           const plotAnnotation = plot.datacite;
-          const filePathPrefix = `${this.envVars.API_LOCATION}/s3-resource/${this.datasetId}/${this.datasetVersion}/files/`;
-          const sourceUrl = filePathPrefix + plot.dataset.path + this.getS3Args();
 
-          const metadata = JSON.parse(
-            plotAnnotation.supplemental_json_metadata.description
-          );
+          if (!this.alternateSearch) {
+            const thumbnail = this.getThumbnailForPlot(plot, this.entry.thumbnails);
+            if (thumbnail) {
+              thumbnailURL = this.getImageURLFromS3(this.envVars.API_LOCATION, {
+                id,
+                datasetId: this.datasetId,
+                datasetVersion: this.datasetVersion,
+                file_path: thumbnail.dataset.path,
+                s3Bucket: this.s3Bucket,
+              });
+              mimetype = thumbnail.mimetype.name;
+            }
+            
+            filePathPrefix = `${this.envVars.API_LOCATION}/s3-resource/${this.datasetId}/${this.datasetVersion}/files/`;
+            sourceUrl = filePathPrefix + plot.dataset.path + this.getS3Args();
+            metadata = JSON.parse(
+              plotAnnotation.supplemental_json_metadata.description
+            );
+          } else {
+            thumbnailURL = this.datasetThumbnail;
+            mimetype = plot.additional_mimetype.name;
+            sourceUrl = this.entry.source_url_prefix + plot.dataset.path;
+            metadata = plotAnnotation.supplemental_json_metadata.description;
+            if (metadata !== "") {
+              metadata = JSON.parse(
+                plotAnnotation.supplemental_json_metadata.description.replaceAll("'", '"'));
+            }
+            filePathPrefix = this.entry.source_url_prefix;
+          }
 
-          let supplementalData = [];
           if (plotAnnotation.isDescribedBy) {
             supplementalData.push({
               url: filePathPrefix + plotAnnotation.isDescribedBy.path
@@ -204,7 +231,7 @@ export default {
             s3uri: this.entry.s3uri,
             title: "View plot",
             type: "Plot",
-            discoverId: this.discoverId,
+            discoverId: this.datasetId,
             version: this.datasetVersion,
           };
           this.items['Plots'].push({
@@ -267,6 +294,37 @@ export default {
         });
       }
     },
+    createScaffoldViewItems: function() {
+      if (this.entry.scaffoldViews) {
+        // let index = 0;
+        this.entry.scaffoldViews.forEach((scaffold) => {
+          const filePath = scaffold.dataset.path;
+          const id = scaffold.identifier;
+          let thumbnailURL = scaffold.image_url;
+          let action = {
+            label: capitalise(this.label),
+            resource:
+              this.entry.source_url_prefix + scaffold.datacite.isDerivedFrom.path,
+            viewUrl: this.entry.source_url_prefix + scaffold.dataset.path,
+            title: "View 3D scaffold",
+            type: "Scaffold",
+            discoverId: this.datasetId,
+            apiLocation: this.envVars.API_LOCATION,
+            version: this.datasetVersion,
+            banner: this.datasetThumbnail,
+            // contextCardUrl: this.getContextCardUrl(i),
+          };
+          this.items["Scaffolds"].push({
+            id,
+            title: baseName(filePath),
+            type: "Scaffold",
+            thumbnail: thumbnailURL,
+            userData: action,
+            hideType: true,
+          });
+        });
+      }
+    },
     createSegmentationItems: function () {
       if (this.entry.segmentation) {
         this.entry.segmentation.forEach((segmentation) => {
@@ -363,8 +421,8 @@ export default {
         let contextIndex = this.entry['abi-contextual-information'].length == this.entry.scaffolds.length ? scaffoldIndex : 0
         return `${this.envVars.API_LOCATION}s3-resource/${this.datasetId}/${this.datasetVersion}/files/${this.entry.contextualInformation[contextIndex]}${this.getS3Args()}`
       }
-    }
-  },
+    },
+   },
   computed: {
     galleryItems() {
       if (this.resetIndex) {

package/src/components/SearchFilters.vue

@@ -92,6 +92,8 @@ const convertReadableLabel = function (original) {
   }
 };
 
+
+
 export default {
   name: "SearchFilters",
   components: {
@@ -110,6 +112,11 @@ export default {
       default: ()=>{}
     },
   },
+  inject: {
+    'alternateSearch' : {
+      default: undefined,
+    },
+  },
   data: function () {
     return {
       cascaderIsReady: false,
@@ -125,7 +132,6 @@ export default {
       cascadeSelectedWithBoolean: [], 
       numberShown: 10,
       filters: [],
-      facets: ["Species", "Gender", "Organ", "Datasets"],
       numberDatasetsShown: ["10", "20", "50"],
       props: { multiple: true },
       options: [
@@ -147,43 +153,64 @@ export default {
       if (facet) return term + ">" + facet;
       else return term;
     },
-    populateCascader: function () {
+    populateCascaderOptions: function(data) {
+      this.options = data;
+      // create top level of options in cascader
+      this.options.forEach((facet, i) => {
+        this.options[i].label = convertReadableLabel(facet.label);
+        this.options[i].value = this.createCascaderItemValue(
+          facet.key,
+          undefined
+        );
+
+        // put "Show all" as first option
+        this.options[i].children.unshift({
+          value: this.createCascaderItemValue("Show all"),
+          label: "Show all",
+        });
+
+        // populate second level of options 
+        this.options[i].children.forEach((facetItem, j) => {
+          this.options[i].children[j].label = convertReadableLabel(
+            facetItem.label
+          );
+          this.options[i].children[j].value =
+            this.createCascaderItemValue(facet.label, facetItem.label);
+        });
+      });
+    },
+    populateDefaultCascader: function() {
       return new Promise((resolve) => {
         // Algolia facet serach
         this.algoliaClient.getAlgoliaFacets(facetPropPathMapping)
           .then((data) => {
-            this.facets = data;
-            this.options = data;
-
-            // create top level of options in cascader
-            this.options.forEach((facet, i) => {
-              this.options[i].label = convertReadableLabel(facet.label);
-              this.options[i].value = this.createCascaderItemValue(
-                facet.key,
-                undefined
-              );
-
-              // put "Show all" as first option
-              this.options[i].children.unshift({
-                value: this.createCascaderItemValue("Show all"),
-                label: "Show all",
-              });
-
-              // populate second level of options 
-              this.options[i].children.forEach((facetItem, j) => {
-                this.options[i].children[j].label = convertReadableLabel(
-                  facetItem.label
-                );
-                this.options[i].children[j].value =
-                  this.createCascaderItemValue(facet.label, facetItem.label);
-              });
-            });
+            this.populateCascaderOptions(data);
           })
           .finally(() => {
             resolve();
           });
       });
     },
+    setCascaderReady:function() {
+      this.cascaderIsReady = true;
+      this.checkShowAllBoxes();
+      this.setCascader(this.entry.filterFacets);
+      this.makeCascadeLabelsClickable();
+      this.$emit("cascaderReady");
+    },
+    alternateSearchCB: function(payload) {
+      this.populateCascaderOptions(payload.data);
+      this.setCascaderReady();
+    },
+    populateCascader: function () {
+      if (this.alternateSearch) {
+        this.alternateSearch({requestType: 'getFacets'}, this.alternateSearchCB);
+      } else {
+        this.populateDefaultCascader().then(() => {
+          this.setCascaderReady();
+        });
+      }
+    },
     tagsChangedCallback: function (presentTags) {
       if (presentTags.length > 0) {
         this.showFiltersText = false;
@@ -216,7 +243,6 @@ export default {
           }
         })
 
-
         this.$emit('loading', true) // let sidebarcontent wait for the requests
 
         this.$emit("filterResults", filters); // emit filters for apps above sidebar
@@ -417,15 +443,11 @@ export default {
     },
   },
   mounted: function () {
-    this.algoliaClient = new AlgoliaClient(this.envVars.ALGOLIA_ID, this.envVars.ALGOLIA_KEY, this.envVars.PENNSIEVE_API_LOCATION);
-    this.algoliaClient.initIndex(this.envVars.ALGOLIA_INDEX);
-    this.populateCascader().then(() => {
-      this.cascaderIsReady = true;
-      this.checkShowAllBoxes();
-      this.setCascader(this.entry.filterFacets);
-      this.makeCascadeLabelsClickable();
-      this.$emit("cascaderReady");
-    });
+    if (!this.alternateSearch) {
+      this.algoliaClient = new AlgoliaClient(this.envVars.ALGOLIA_ID, this.envVars.ALGOLIA_KEY, this.envVars.PENNSIEVE_API_LOCATION);
+      this.algoliaClient.initIndex(this.envVars.ALGOLIA_INDEX);
+    }
+    this.populateCascader();
   },
 };
 </script>

package/src/components/SideBar.vue

@@ -75,6 +75,10 @@ export default {
     openAtStart: {
       type: Boolean,
       default: false
+    },
+    alternateSearch: {
+      type: Function,
+      default: undefined
     }
   },
   data: function () {
@@ -82,6 +86,11 @@ export default {
       drawerOpen: false,
     }
   },
+  provide: function() {
+    return {
+      alternateSearch: this.alternateSearch
+    }
+  },
   methods: {
     searchChanged: function (id, data) {
       this.$emit("search-changed", {...data, id: id});