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

package/package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@abi-software/map-side-bar",
-  "version": "1.3.36",
+  "version": "1.3.37",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
@@ -88,9 +88,9 @@
       }
     },
     "@abi-software/svg-sprite": {
-      "version": "0.1.14",
-      "resolved": "https://registry.npmjs.org/@abi-software/svg-sprite/-/svg-sprite-0.1.14.tgz",
-      "integrity": "sha512-nCIgBLfiAV8gMHD+lYCRWCT+y2GM8g/88DG8sjfu5F+wz6M82wA/Y69SVlMTJ7TQiFIlCguxYb4RltUGpo2YCg==",
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/@abi-software/svg-sprite/-/svg-sprite-0.2.0.tgz",
+      "integrity": "sha512-vK/D4Wd9ntg/b7B5o2FPK2CtFrqNuuNHBOCWbZlvtrVvk90WH9JgJWx1+UPPzzTmrKRCvwE24osF/nQef206vg==",
       "requires": {
         "core-js": "^3.6.5",
         "svg-inline-loader": "^0.8.2",
@@ -98,9 +98,9 @@
       },
       "dependencies": {
         "core-js": {
-          "version": "3.20.3",
-          "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.20.3.tgz",
-          "integrity": "sha512-vVl8j8ph6tRS3B8qir40H7yw7voy17xL0piAjlbBUsH7WIfzoedL/ZOr1OV9FyZQLWXsayOJyV4tnRyXR85/ag=="
+          "version": "3.30.0",
+          "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.30.0.tgz",
+          "integrity": "sha512-hQotSSARoNh1mYPi9O2YaWeiq/cEB95kOrFb4NCrO4RIFt1qqNpKsaE+vy/L3oiqvND5cThqXzUU3r9F7Efztg=="
         }
       }
     },
@@ -11473,7 +11473,7 @@
     "simple-html-tokenizer": {
       "version": "0.1.1",
       "resolved": "https://registry.npmjs.org/simple-html-tokenizer/-/simple-html-tokenizer-0.1.1.tgz",
-      "integrity": "sha1-BcLuxXn//+FFoDCsJs/qYbmA+r4="
+      "integrity": "sha512-Mc/gH3RvlKvB/gkp9XwgDKEWrSYyefIJPGG8Jk1suZms/rISdUuVEMx5O1WBnTWaScvxXDvGJrZQWblUmQHjkQ=="
     },
     "simple-swizzle": {
       "version": "0.2.2",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abi-software/map-side-bar",
-  "version": "1.3.36",
+  "version": "2.0.0-response.0",
   "main": "./dist/map-side-bar.common.js",
   "files": [
     "dist/*",
@@ -18,7 +18,7 @@
   },
   "dependencies": {
     "@abi-software/gallery": "^0.3.2",
-    "@abi-software/svg-sprite": "^0.1.14",
+    "@abi-software/svg-sprite": "^0.2.0",
     "algoliasearch": "^4.10.5",
     "element-ui": "^2.13.0",
     "marked": "^4.1.1",

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:{
@@ -149,4 +154,7 @@ export default {
 body {
   margin:0px;
 }
+.map-icon {
+  color: #8300bf;
+}
 </style>

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>
@@ -445,7 +467,6 @@ export default {
   width: 24px !important;
   height: 24px;
   transform: scale(1.1);
-  color: #8300bf;
   cursor: pointer;
 }
 

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});