@abi-software/map-side-bar 1.2.0-beta.1 → 1.2.0-beta.10

package/src/components/ImageGallery.vue

@@ -5,7 +5,7 @@
       :cardWidth="10"
       :items="galleryItems"
       :max-width="maxWidth"
-      :show-indicator-bar="true"
+      :show-indicator-bar="false"
       :show-card-details="true"
       :highlight-active="false"
       :image-style="imageStyle"
@@ -13,6 +13,7 @@
       :body-style="bodyStyle"
       :shadow="shadow"
       @card-clicked="cardClicked"
+      ref="gallery"
     />
   </div>
 </template>
@@ -35,12 +36,6 @@ export default {
   components: { Gallery },
   mixins: [GalleryHelper],
   props: {
-    datasetScicrunch: {
-      type: Object,
-      default: () => {
-        return {};
-      },
-    },
     datasetBiolucida: {
       type: Object,
       default: () => {
@@ -55,54 +50,12 @@ export default {
       type: String,
       default: "",
     },
-    images: {
-      type: Array,
-      default: () => {
-        return [];
-      },
-    },
     plots: {
       type: Array,
       default: () => {
         return [];
       },
     },
-    scaffolds: {
-      type: Array,
-      default: () => {
-        return [];
-      },
-    },
-    scaffoldViews: {
-      type: Array,
-      default: () => {
-        return [];
-      },
-    },
-    segmentations: {
-      type: Array,
-      default: () => {
-        return [];
-      },
-    },
-    additionalLinks: {
-      type: Array,
-      default: () => {
-        return [];
-      },
-    },
-    thumbnails: {
-      type: Array,
-      default: () => {
-        return [];
-      },
-    },
-    videos: {
-      type: Array,
-      default: () => {
-        return [];
-      },
-    },
     datasetId: {
       type: Number,
       default: -1,
@@ -115,19 +68,44 @@ export default {
       type: String,
       default: "",
     },
+    category: {
+      type: String,
+      default: "All",
+    },
+    entry:  {
+      type: Object,
+      default: () => {
+        return {};
+      },
+    },
   },
   data() {
     return {
       currentIndex: 0,
       ro: null,
       maxWidth: 3,
-      scicrunchItems: [],
-      biolucidaItems: [],
+      items: {
+        "Biolucida Images": [],
+        'Dataset': [],
+        'Images': [],
+        'Scaffolds': [],
+        'Segmentations': [],
+        'Simulations': [],
+        'Videos': [],
+        'Plots': [],
+      },
       bodyStyle: { padding: '0px', background: '#ffffff' },
-      imageContainerStyle: { width: '160px', height: '160px'},
+      imageContainerStyle: {
+        width: '160px',
+        height: '160px',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+      },
       imageStyle: { maxWidth: '160px', maxHeight: '160px'},
       shadow: "never",
       bottomSpacer: { minHeight: '1.5rem' },
+      resetIndex: false
     };
   },
   methods: {
@@ -140,43 +118,47 @@ export default {
       this.createSimulationItems();
       this.createPlotItems();
       this.createSegmentationItems();
+      /* Disable these two
       this.createImageItems();
       this.createVideoItems();
+      */
     },
     createDatasetItem: function () {
       const link = `${this.envVars.ROOT_URL}/datasets/${this.datasetId}?type=dataset`
       if (this.datasetThumbnail) {
-        this.scicrunchItems.push({
+        this.items['Dataset'].push({
           id: -1,
-          title: link,
+          //Work around gallery requires a truthy string
+          title: " ",
           type: `Dataset ${this.datasetId}`,
           thumbnail: this.datasetThumbnail,
           link,
+          hideType: true,
         });
       }
     },
     createImageItems: function () {
-      if (this.images) {
-        this.images.forEach((image) => {
+      if (this.entry.images) {
+        this.entry.images.forEach((image) => {
           const filePath = image.dataset.path;
           const id = image.identifier;
           const linkUrl = `${this.envVars.ROOT_URL}/datasets/imageviewer?dataset_id=${this.datasetId}&dataset_version=${this.datasetVersion}&file_path=${filePath}&mimetype=${image.mimetype.name}`;
-          this.scicrunchItems.push({
+          this.items['Images'].push({
             id,
             title: baseName(filePath),
             type: "Image",
-            thumbnail: this.defaultImg,
             link: linkUrl,
+            hideType: true,
           });
         });
       }
     },
     createPlotItems: function () {
-      if (this.plots) {
-        this.plots.forEach((plot) => {
+      if (this.entry.plots) {
+        this.entry.plots.forEach((plot) => {
           const filePath = plot.dataset.path;
           const id = plot.identifier;
-          const thumbnail = this.getThumbnailForPlot(plot, this.thumbnails);
+          const thumbnail = this.getThumbnailForPlot(plot, this.entry.thumbnails);
           let thumbnailURL = undefined;
           let mimetype = '';
           if (thumbnail) {
@@ -188,35 +170,57 @@ export default {
             });
             mimetype = thumbnail.mimetype.name;
           }
+          const plotAnnotation = plot.datacite;
+          const filePathPrefix = `${this.envVars.API_LOCATION}/s3-resource/${this.datasetId}/${this.datasetVersion}/files/`;
+          const sourceUrl = filePathPrefix + plot.dataset.path;
+
+          const metadata = JSON.parse(
+            plotAnnotation.supplemental_json_metadata.description
+          );
+
+          let supplementalData = [];
+          if (plotAnnotation.isDescribedBy) {
+            supplementalData.push({
+              url: filePathPrefix + plotAnnotation.isDescribedBy.path
+            });
+          }
+
+          const resource = {
+            dataSource: {url: sourceUrl},
+            metadata,
+            supplementalData
+          }
+
           let action = {
             label: capitalise(this.label),
-            resource: `${this.envVars.API_LOCATION}s3-resource/${this.datasetId}/${this.datasetVersion}/files/${filePath}`,
+            resource: resource,
             title: "View plot",
             type: "Plot",
             discoverId: this.discoverId,
             version: this.datasetVersion,
           };
-          this.scicrunchItems.push({
+          this.items['Plots'].push({
             id,
             title: baseName(filePath),
             type: "Plot",
             thumbnail: thumbnailURL,
             userData: action,
+            hideType: true,
             mimetype
           });
         });
       }
     },
     createScaffoldItems: function () {
-      if (this.scaffolds) {
+      if (this.entry.scaffolds) {
         let index = 0;
-        this.scaffolds.forEach((scaffold) => {
+        this.entry.scaffolds.forEach((scaffold) => {
           const filePath = scaffold.dataset.path;
           const id = scaffold.identifier;
           const thumbnail = this.getThumbnailForScaffold(
             scaffold,
-            this.scaffoldViews,
-            this.thumbnails,
+            this.entry.scaffoldViews,
+            this.entry.thumbnails,
             index
           );
           let mimetype = '';
@@ -239,27 +243,28 @@ export default {
             apiLocation: this.envVars.API_LOCATION,
             version: this.datasetVersion,
           };
-          this.scicrunchItems.push({
+          this.items['Scaffolds'].push({
             id,
             title: baseName(filePath),
             type: "Scaffold",
             thumbnail: thumbnailURL,
             userData: action,
+            hideType: true,
             mimetype
           });
         });
       }
     },
     createSegmentationItems: function () {
-      if (this.segmentations) {
-        this.segmentations.forEach((segmentation) => {
+      if (this.entry.segmentation) {
+        this.entry.segmentation.forEach((segmentation) => {
           const id = segmentation.id;
           let filePath = segmentation.dataset.path;
           filePath = filePath.replaceAll(" ", "_");
           filePath = filePath.replaceAll(",", "_");
           const prefix = this.envVars.NL_LINK_PREFIX;
           const resource = {
-            share_link: `${prefix}/dataviewer?datasetId=${this.datasetId}&version=${this.datasetVersion}&path=${filePath}`,
+            share_link: `${prefix}/dataviewer?datasetId=${this.datasetId}&version=${this.datasetVersion}&path=files/${filePath}`,
           };
           let action = {
             label: capitalise(this.label),
@@ -277,60 +282,54 @@ export default {
               segmentationFilePath: filePath,
             }
           );
-          this.scicrunchItems.push({
+          this.items['Segmentations'].push({
             id,
             title: baseName(filePath),
             type: "Segmentation",
             thumbnail: thumbnailURL,
             userData: action,
+            hideType: true,
             mimetype: 'image/png',
           });
         });
       }
     },
     createSimulationItems: function () {
-      let isSedmlResource = false;
-      let resource = undefined;
-      if (this.additionalLinks) {
-        this.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;
-          }
+      if (this.entry.simulation && this.entry.simulation.length > 0) {
+        let action = {
+          label: undefined,
+          apiLocation: this.envVars.API_LOCATION,
+          version: this.datasetVersion,
+          title: "View simulation",
+          type: "Simulation",
+          name: this.entry.name,
+          description: this.entry.description,
+          discoverId: this.datasetId,
+          dataset: `${this.envVars.ROOT_URL}/datasets/${this.datasetId}?type=dataset`
+        };
+        this.items['Simulations'].push({
+          id: "simulation",
+          title: " ",
+          type: "Simulation",
+          hideType: true,
+          userData: action,
         });
-        if (resource) {
-          let action = {
-            label: undefined,
-            resource: resource,
-            apiLocation: this.envVars.API_LOCATION,
-            version: this.datasetVersion,
-            title: "View simulation",
-            type: "Simulation"
-          };
-          this.scicrunchItems.push({
-            id: "simulation",
-            title: resource,
-            type: "Simulation",
-            userData: action,
-          });
-        }
       }
     },
     createVideoItems: function () {
-      if (this.videos) {
-        this.videos.forEach((video) => {
+      if (this.entry.videos) {
+        this.entry.videos.forEach((video) => {
           const filePath = this.getS3FilePath(
             this.datasetId,
             this.datasetVersion,
             video.dataset.path
           );
           const linkUrl = `${this.envVars.ROOT_URL}/datasets/videoviewer?dataset_version=${this.datasetVersion}&dataset_id=${this.datasetId}&file_path=${filePath}&mimetype=${video.mimetype.name}`;
-          this.scicrunchItems.push({
+          this.items['Videos'].push({
             title: video.name,
             type: "Video",
             thumbnail: this.defaultVideoImg,
+            hideType: true,
             link: linkUrl,
           });
         });
@@ -343,13 +342,31 @@ export default {
   },
   computed: {
     galleryItems() {
-      return this.scicrunchItems.concat(this.biolucidaItems);
+      if (this.resetIndex) {
+        this.$refs.gallery.indicatorClicked(0);
+      }
+      let items = [...this.items["Dataset"]];
+      if (this.category === "All") {
+        for (const [key, value] of Object.entries(this.items)) {
+          if (key !== "Dataset")
+            items = items.concat(value);
+        }
+        return items;
+      }
+      else
+        return this.items[this.category];
     },
   },
   created: function () {
     this.createSciCurnchItems();
   },
   watch: {
+    category: function() {
+      this.resetIndex = true;
+    },
+    galleryItems: function() {
+      this.resetIndex = false;
+    },
     datasetBiolucida: {
       deep: true,
       immediate: true,
@@ -364,14 +381,6 @@ export default {
                   id: dataset_image.image_id,
                 }
               );
-              this.getImageInfoFromBiolucida(
-                this.envVars.API_LOCATION,
-                items,
-                {
-                  id: dataset_image.image_id,
-                  fetchAttempts: 0,
-                }
-              );
               const resource = {
                 share_link: dataset_image.share_link,
                 id: dataset_image.image_id,
@@ -387,16 +396,17 @@ export default {
               };
               return {
                 id: dataset_image.image_id,
-                title: null,
+                title: `Biolucida Image`,
                 type: "Image",
                 thumbnail: thumbnailURL,
                 userData: action,
-                mimetype: 'image/png'
+                mimetype: 'image/png',
+                hideType: true,
               };
             })
           );
         }
-        this.biolucidaItems = items;
+        this.items['Biolucida Images'] = items;
       },
     },
   },
@@ -411,8 +421,8 @@ export default {
 
 <style scoped>
 .full-size {
-  width: 100%;
   height: 100%;
+  width: 244px;
 }
 
 .key-image-span.active {

package/src/components/SidebarContent.vue

@@ -24,11 +24,10 @@
     <div class="content scrollbar" v-loading="loadingCards" ref="content">
       <div
         class="error-feedback"
-        v-if="results.length === 0 && !loadingCards && !sciCrunchError"
+        v-if="results.length === 0 && !loadingCards"
       >No results found - Please change your search / filter criteria.</div>
-      <div class="error-feedback" v-if="sciCrunchError">{{sciCrunchError}}</div>
-      <div v-for="o in results" :key="o.id" class="step-item">
-        <DatasetCard :entry="o" :envVars="envVars" @contextUpdate="contextCardUpdate"></DatasetCard>
+      <div v-for="result in results" :key="result.doi" class="step-item">
+        <DatasetCard :entry="result" :envVars="envVars" @contextUpdate="contextCardUpdate"></DatasetCard>
       </div>
       <el-pagination
         class="pagination"
@@ -101,9 +100,9 @@ var initial_state = {
   pageModel: 1,
   start: 0,
   hasSearched: false,
-  sciCrunchError: false,
   contextCardEntry: undefined,
-  contextCardEnabled: false
+  contextCardEnabled: true,
+  loadingScicrunch: false,
 };
 
 export default {
@@ -152,7 +151,7 @@ export default {
   },
   methods: {
     contextCardUpdate: function(val){
-      this.contextCardEntry = val
+        this.contextCardEntry = val
     },
     openSearch: function(filter, search='') {
       this.searchInput = search;
@@ -192,12 +191,19 @@ export default {
     },
     searchAlgolia(filters, query=''){
       // Algolia search
+      this.loadingCards = true
       this.algoliaClient.search(getFilters(filters), query, this.numberPerPage, this.page).then(searchData => {
         this.numberOfHits = searchData.total
         this.discoverIds = searchData.discoverIds
-        this.dois = searchData.dois
+        this._dois = searchData.dois
         this.results = searchData.items
-        this.searchSciCrunch({'dois': this.dois})
+        this.loadingCards = false
+        this.scrollToTop()
+        this.$emit("search-changed", { value: this.searchInput, type: "query-update" })
+        //Search ongoing, let the current flow progress
+        if (!this.loadingScicrunch) {
+          this.perItemSearch()
+        }
       })
     },
     filtersLoading: function (val) {
@@ -212,31 +218,36 @@ export default {
       this.page = page
       this.searchAlgolia(this.filters, this.searchInput, this.numberPerPage, this.page)
     },
-    searchSciCrunch: function(params) {
-      this.loadingCards = true;
-      this.results = [];
-      this.disableCards();
-      this.$emit("search-changed", { value: this.searchInput, type: "query-update" });
-      this.callSciCrunch(this.envVars.API_LOCATION, params)
-        .then(result => {
-          //Only process if the search term is the same as the last search term.
-          //This avoid old search being displayed.
-          this.sciCrunchError = false;
-          this.resultsProcessing(result);
-          this.$refs.content.style["overflow-y"] = "scroll";
-          this.loadingCards = false;
-        })
-        .catch(result => {
-          if (result.name !== 'AbortError') {
-            this.loadingCards = false;
-            this.sciCrunchError = result.message;
-          }
-        })
+    handleMissingData: function(doi) {
+      let i = this.results.findIndex(res=> res.doi === doi)
+      if (this.results[i])
+        this.results[i].detailsReady = true;
     },
-    disableCards: function() {
+    perItemSearch: function() {
+      const doi = this._dois.shift();
+      if (doi) {
+        this.loadingScicrunch = true;
+        this.callSciCrunch(this.envVars.API_LOCATION, {'dois': [doi]})
+          .then(result => {
+            if (result.numberOfHits === 0)
+              this.handleMissingData(doi)
+            else
+              this.resultsProcessing(result);
+            this.$refs.content.style["overflow-y"] = "scroll";
+          })
+          .catch(result => {
+            if (result.name !== 'AbortError') {
+              this.handleMissingData(doi);
+            }
+          })
+          .finally(() => this.perItemSearch());
+      } else {
+        this.loadingScicrunch = false;
+      }
+    },
+    scrollToTop: function() {
       if (this.$refs.content) {
         this.$refs.content.scroll({ top: 0, behavior: "smooth" });
-        this.$refs.content.style["overflow-y"] = "hidden";
       }
     },
     resetPageNavigation: function() {
@@ -245,16 +256,17 @@ export default {
     },
     resultsProcessing: function(data) {
       this.lastSearch = this.searchInput;
-      this.results = [];
+
       if (data.results.length === 0) {
         return;
       }
       data.results.forEach(element => {
-        // this.results.push(element) below should be once backend is ready
-        let datasetInfo = {
-          name: element.name,
-          description: element.description,
-          contributors: element.contributors,
+        // match the scicrunch result with algolia result
+        let i = this.results.findIndex(res=> res.name === element.name)
+        // Assign scicrunch results to the object
+        Object.assign(this.results[i], element)
+        // Assign the attributes that need some processing
+        Object.assign(this.results[i],{
           numberSamples: element.sampleSize
             ? parseInt(element.sampleSize)
             : 0,
@@ -269,28 +281,24 @@ export default {
           organs: (element.organs && element.organs.length > 0)
               ? [...new Set(element.organs.map(v => v.name))]
               : undefined,
-          species: element.organisms 
+          species: element.organisms
             ? element.organisms[0].species
               ? [...new Set(element.organisms.map((v) =>v.species ? v.species.name : null))]
               : undefined
             : undefined, // This processing only includes each gender once into 'sexes'
-          doi: element.doi,
-          publishDate: element.publishDate,
           scaffolds: element['abi-scaffold-metadata-file'],
           thumbnails: element['abi-thumbnail'] ? element['abi-thumbnail']: element['abi-scaffold-thumbnail'],
           scaffoldViews: element['abi-scaffold-view-file'],
           videos: element.video,
-          plots: element.plot,
+          plots: element['abi-plot'],
           images: element['common-images'],
           contextualInformation: element['abi-contextual-information'].length > 0 ? element['abi-contextual-information'] : undefined,
-          additionalLinks: element.additionalLinks,
           segmentation: element['mbf-segmentation'],
-          simulation: element.additionalLinks
-            ? element.additionalLinks[0].description == 'Repository'
-            : false,
-          s3uri: element.s3uri
-        };
-        this.results.push(datasetInfo);
+          simulation: element['abi-simulation-file'],
+          additionalLinks: element.additionalLinks,
+          detailsReady: true,
+        })
+        Vue.set(this.results, i, this.results[i])
       });
     },
     createfilterParams: function(params) {
@@ -309,14 +317,9 @@ export default {
     },
     callSciCrunch: function(apiLocation, params = {}) {
       return new Promise((resolve, reject) => {
-        // the following controller will abort current search
-        // if a new one has been started
-        if (this._controller) this._controller.abort();
-        this._controller = new AbortController();
-        let signal = this._controller.signal;
         // Add parameters if we are sent them
         let fullEndpoint = this.envVars.API_LOCATION + this.searchEndpoint + "?" + this.createfilterParams(params);
-        fetch(fullEndpoint, { signal })
+        fetch(fullEndpoint)
           .then(handleErrors)
           .then(response => response.json())
           .then(data => resolve(data))
@@ -328,7 +331,6 @@ export default {
     // initialise algolia
     this.algoliaClient = new AlgoliaClient(this.envVars.ALGOLIA_ID, this.envVars.ALGOLIA_KEY, this.envVars.PENNSIEVE_API_LOCATION);
     this.algoliaClient.initIndex(this.envVars.ALGOLIA_INDEX);
-    console.log('Algolia initialised in sidebar')
 
     // temporarily disable flatmap search since there are no datasets
     if (this.firstSearch === "Flatmap" || this.firstSearch === "flatmap") {
@@ -420,6 +422,10 @@ export default {
   scrollbar-width: thin;
 }
 
+.content >>> .el-loading-spinner .path {
+  stroke: #8300bf;
+}
+
 .content >>> .step-item:first-child .seperator-path{
    display: none;
 }