@abi-software/map-side-bar 1.2.2 → 1.3.0

package/src/algolia/algolia.js

@@ -1,119 +1,127 @@
-/* eslint-disable no-alert, no-console */
-import algoliasearch from 'algoliasearch'
-
-// export `createAlgoliaClient` to use it in page components
-export class AlgoliaClient {
-  constructor(algoliaId, algoliaKey, PENNSIEVE_API_LOCATION='https://api.pennsieve.io') {
-    this.client = algoliasearch(
-      algoliaId,
-      algoliaKey
-    )
-    this.PENNSIEVE_API_LOCATION = PENNSIEVE_API_LOCATION
-  }
-  initIndex(ALGOLIA_INDEX) {
-    this.index = this.client.initIndex(ALGOLIA_INDEX);
-  }
-
-  getAlgoliaFacets (propPathMapping) {
-    const map = new Map(Object.entries(propPathMapping));
-    const facetPropPaths = Array.from(map.keys() );
-    let facetData = []
-    let facetId = 0
-    return this.index
-      .search('', {
-        sortFacetValuesBy: 'alpha',
-        facets: facetPropPaths
-      })
-      .then(response => {
-        facetPropPaths.map((facetPropPath) => {
-          var children = []
-          const responseFacets = response.facets
-          if (responseFacets === undefined) {return}
-          const responseFacetChildren =
-            responseFacets[facetPropPath] == undefined
-              ? {}
-              : responseFacets[facetPropPath]
-          Object.keys(responseFacetChildren).map(facet => {
-            children.push({
-              label: facet,
-              id: facetId++,
-              facetPropPath: facetPropPath
-            })
-          })
-          if (children.length > 0) {
-            facetData.push({
-              label: map.get(facetPropPath),
-              id: facetId++,
-              children: children,
-              key: facetPropPath
-            })
-          }
-        })
-        return facetData
-      })
-  }
-  
-  // Returns all DOIs of all versions for a given discover dataset
-  _discoverAllDois (discoverId, PENNSIEVE_API_LOCATION='https://api.pennsieve.io') {
-    return new Promise(resolve => {
-      fetch(`${PENNSIEVE_API_LOCATION}/discover/datasets/${discoverId}/versions`).then(r=>r.json()).then(dataset => {
-        resolve(dataset.map(version => version.doi))
-      })
-    })
-  }
-  
-  // Get all dois given a list of discoverIds
-  _expandDois (discoverIds, PENNSIEVE_API_LOCATION='https://api.pennsieve.io') {
-    return new Promise(resolve => {
-      let promiseList = discoverIds.map(discoverId => this._discoverAllDois(discoverId, PENNSIEVE_API_LOCATION))
-      Promise.all(promiseList).then((values) => {
-        resolve(values.flat())
-      });
-    })
-  }
-
-  _processResultsForCards(results) {
-    let newResults = []
-    let newResult = {}
-    let id = 0
-    for (let res of results) {
-      newResult = {...res}
-      newResult = {
-        doi: res.item.curie.split(':')[1],
-        name: res.item.name,
-        description: res.item.description,
-        updated: res.pennsieve.updatedAt,
-        publishDate: res.pennsieve.publishDate,
-        id: id
-      }
-      id++
-      newResults.push(newResult)
-    }
-    return newResults
-  }
-  
-  /**
-   * Get Search results
-   * This is using fetch from the Algolia API
-   */
-  search (filter, query='', hitsperPage=10, page=1) {
-    return new Promise(resolve => {
-      this.index
-      .search(query, {
-        facets:['*'],
-        hitsPerPage: hitsperPage,
-        page: page-1,
-        filters: filter
-      })
-      .then(response => {
-        let searchData = {
-          items: this._processResultsForCards(response.hits),
-          total: response.nbHits,
-          discoverIds: response.hits.map(r=>r.pennsieve.identifier),
-          dois: response.hits.map(r=>r.item.curie.split(':')[1])
-        }
-        resolve(searchData)
-      })
-    })
-  }
-}
+/* eslint-disable no-alert, no-console */
+import algoliasearch from 'algoliasearch'
+
+// export `createAlgoliaClient` to use it in page components
+export class AlgoliaClient {
+  constructor(algoliaId, algoliaKey, PENNSIEVE_API_LOCATION='https://api.pennsieve.io') {
+    this.client = algoliasearch(
+      algoliaId,
+      algoliaKey
+    )
+    this.PENNSIEVE_API_LOCATION = PENNSIEVE_API_LOCATION
+  }
+  initIndex(ALGOLIA_INDEX) {
+    this.index = this.client.initIndex(ALGOLIA_INDEX);
+  }
+
+  getAlgoliaFacets (propPathMapping) {
+    const map = new Map(Object.entries(propPathMapping));
+    const facetPropPaths = Array.from(map.keys() );
+    let facetData = []
+    let facetId = 0
+    return this.index
+      .search('', {
+        sortFacetValuesBy: 'alpha',
+        facets: facetPropPaths
+      })
+      .then(response => {
+        facetPropPaths.map((facetPropPath) => {
+          var children = []
+          const responseFacets = response.facets
+          if (responseFacets === undefined) {return}
+          const responseFacetChildren =
+            responseFacets[facetPropPath] == undefined
+              ? {}
+              : responseFacets[facetPropPath]
+          Object.keys(responseFacetChildren).map(facet => {
+            children.push({
+              label: facet,
+              id: facetId++,
+              facetPropPath: facetPropPath
+            })
+          })
+          if (children.length > 0) {
+            facetData.push({
+              label: map.get(facetPropPath),
+              id: facetId++,
+              children: children,
+              key: facetPropPath
+            })
+          }
+        })
+        return facetData
+      })
+  }
+  
+  // Returns all DOIs of all versions for a given discover dataset
+  _discoverAllDois (discoverId, PENNSIEVE_API_LOCATION='https://api.pennsieve.io') {
+    return new Promise(resolve => {
+      fetch(`${PENNSIEVE_API_LOCATION}/discover/datasets/${discoverId}/versions`).then(r=>r.json()).then(dataset => {
+        resolve(dataset.map(version => version.doi))
+      })
+    })
+  }
+  
+  // Get all dois given a list of discoverIds
+  _expandDois (discoverIds, PENNSIEVE_API_LOCATION='https://api.pennsieve.io') {
+    return new Promise(resolve => {
+      let promiseList = discoverIds.map(discoverId => this._discoverAllDois(discoverId, PENNSIEVE_API_LOCATION))
+      Promise.all(promiseList).then((values) => {
+        resolve(values.flat())
+      });
+    })
+  }
+
+  _processResultsForCards(results) {
+    let newResults = []
+    let newResult = {}
+    for (let res of results) {
+      newResult = {...res}
+      newResult = {
+        doi: res.item.curie.split(':')[1],
+        name: res.item.name,
+        description: res.item.description,
+        updated: res.pennsieve.updatedAt,
+        publishDate: res.pennsieve.publishDate,
+        datasetId: res.objectID,
+        detailsReady: false
+      }
+      newResults.push(newResult)
+    }
+    return newResults
+  }
+  
+  /**
+   * Get Search results
+   * This is using fetch from the Algolia API
+   */
+  search (filter, query='', hitsperPage=10, page=1) {
+    return new Promise(resolve => {
+      this.index
+      .search(query, {
+        facets:['*'],
+        hitsPerPage: hitsperPage,
+        page: page-1,
+        filters: filter,
+        attributesToHighlight: [],
+        attributesToRetrieve: [
+          'pennsieve.publishDate',
+          'pennsieve.updatedAt',
+          'item.curie',
+          'item.name',
+          'item.description',
+          'objectID',
+        ],
+      })
+      .then(response => {
+        let searchData = {
+          items: this._processResultsForCards(response.hits),
+          total: response.nbHits,
+          discoverIds: response.hits.map(r=>r.pennsieve.identifier),
+          dois: response.hits.map(r=>r.item.curie.split(':')[1])
+        }
+        resolve(searchData)
+      })
+    })
+  }
+}

package/src/algolia/utils.js

@@ -1,52 +1,52 @@
-/* eslint-disable no-alert, no-console */
-
-// Mapping between display categories and their Algolia index property path
-// Used for populating the Dataset Search Results facet menu dynamically
-export const facetPropPathMapping = {
-  'anatomy.organ.name' : 'Anatomical Structure',
-  'organisms.primary.species.name' : 'Species',
-  'item.modalities.keyword' : 'Experimental Approach',
-  'attributes.subject.sex.value' : 'Sex',
-  'attributes.subject.ageCategory.value' : 'Age Categories',
-}
-
-/* Returns filter for searching algolia. All facets of the same category are joined with OR,
-  * and each of those results is then joined with an AND.
-  * i.e. (color:blue OR color:red) AND (shape:circle OR shape:red) */
-export function getFilters(selectedFacetArray=undefined) {
-  
-  // return all datasets if no filter
-  if (selectedFacetArray === undefined) {
-    return 'NOT item.published.status:embargo'
-  }
-
-  // Switch the 'term' attribute to 'label' if 'label' does not exist 
-  selectedFacetArray.forEach(f=>f.label=f.facet)
-  
-
-  let facets = removeShowAllFacets(selectedFacetArray)
-
-  let filters = "NOT item.published.status:embargo";
-  filters = `(${filters}) AND `;
-
-  const facetPropPaths = Object.keys(facetPropPathMapping);
-  facetPropPaths.map((facetPropPath) => {
-    const facetsToOr = facets.filter(
-      (facet) => facet.facetPropPath == facetPropPath
-    );
-    var filter = "";
-    facetsToOr.map((facet) => {
-      filter += `"${facetPropPath}":"${facet.label}" OR `;
-    });
-    if (filter == "") {
-      return;
-    }
-    filter = `(${filter.substring(0, filter.lastIndexOf(" OR "))})`;
-    filters += `${filter} AND `;
-  });
-  return filters.substring(0, filters.lastIndexOf(" AND "));
-}
-
-function removeShowAllFacets(facetArray){
-  return facetArray.filter( f => f.label !== 'Show all')
+/* eslint-disable no-alert, no-console */
+
+// Mapping between display categories and their Algolia index property path
+// Used for populating the Dataset Search Results facet menu dynamically
+export const facetPropPathMapping = {
+  'anatomy.organ.name' : 'Anatomical Structure',
+  'organisms.primary.species.name' : 'Species',
+  'item.modalities.keyword' : 'Experimental Approach',
+  'attributes.subject.sex.value' : 'Sex',
+  'attributes.subject.ageCategory.value' : 'Age Categories',
+}
+
+/* Returns filter for searching algolia. All facets of the same category are joined with OR,
+  * and each of those results is then joined with an AND.
+  * i.e. (color:blue OR color:red) AND (shape:circle OR shape:red) */
+export function getFilters(selectedFacetArray=undefined) {
+  
+  // return all datasets if no filter
+  if (selectedFacetArray === undefined) {
+    return 'NOT item.published.status:embargo'
+  }
+
+  // Switch the 'term' attribute to 'label' if 'label' does not exist 
+  selectedFacetArray.forEach(f=>f.label=f.facet)
+  
+
+  let facets = removeShowAllFacets(selectedFacetArray)
+
+  let filters = "NOT item.published.status:embargo";
+  filters = `(${filters}) AND `;
+
+  const facetPropPaths = Object.keys(facetPropPathMapping);
+  facetPropPaths.map((facetPropPath) => {
+    const facetsToOr = facets.filter(
+      (facet) => facet.facetPropPath == facetPropPath
+    );
+    var filter = "";
+    facetsToOr.map((facet) => {
+      filter += `"${facetPropPath}":"${facet.label}" OR `;
+    });
+    if (filter == "") {
+      return;
+    }
+    filter = `(${filter.substring(0, filter.lastIndexOf(" OR "))})`;
+    filters += `${filter} AND `;
+  });
+  return filters.substring(0, filters.lastIndexOf(" AND "));
+}
+
+function removeShowAllFacets(facetArray){
+  return facetArray.filter( f => f.label !== 'Show all')
 }

package/src/components/BadgesGroup.vue

@@ -0,0 +1,141 @@
+<template>
+  <div v-if="categories['All'].size > 1" class="container"  ref="container">
+    <div>
+      View data types:
+    </div>
+    <template v-for="(item, key) in categories" >
+      <el-button
+        v-if="item.size > 0"
+        :class="[{ 'active': key == active},'tag-button']"
+        @click="categoryClicked(key)"
+        size="small" :key="key">{{ key + " (" + item.size + ")" }}
+      </el-button>
+    </template>
+  </div>
+</template>
+
+
+<script>
+/* eslint-disable no-alert, no-console */
+import Vue from "vue";
+import { 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(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 && array.length > 0) {
+        const size = 1;
+        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.scaffolds, 'Scaffolds');
+        this.addToCategories(this.entry.segmentation, 'Segmentations');
+        this.addToCategories(this.entry.plots, 'Plots');
+        this.addSimulationsToCategories(this.entry.simulation);
+        /** disable the following
+        this.addToCategories(this.entry.images, 'Images');
+        this.addToCategories(this.entry.videos, 'Videos');
+        **/
+      }
+    }
+  },
+};
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+.tag-button,
+.tag-button:hover,
+.tag-button:focus,
+.tag-button.active
+{
+  border-radius: 4px;
+  font-size: 0.75rem;
+  padding: 0.2rem 0.2rem;
+  margin: 0.5rem 0 0 0;
+  margin-right: 0.75rem!important;
+}
+
+.tag-button,
+.tag-button:hover,
+.tag-button:focus
+{
+  background: #f9f2fc;
+  border: 1px solid #8300BF;
+  color: #8300BF;
+}
+
+.tag-button.active
+{
+  background: #8300BF;
+  border: 1px solid #8300BF;
+  color: #fff;
+}
+
+.tag-button+.tag-button
+{
+  margin-left:0;
+}
+</style>

package/src/components/Cascader.vue

@@ -1,49 +1,49 @@
-<script>
-/* eslint-disable no-alert, no-console */
-import { Cascader } from "element-ui";
-
-export default {
-  name: 'CustomCascader',
-  extends: Cascader,
-  methods:{
-    //Modify this internal function to disable Show all tags
-    computePresentTags() {
-      const { isDisabled, leafOnly, showAllLevels, separator, collapseTags } = this;
-      const checkedNodes = this.getCheckedNodes(leafOnly);
-      const tags = [];
-      const genTag = node => ({
-        node,
-        key: node.uid,
-        text: node.getText(showAllLevels, separator),
-        hitState: false,
-        closable: !isDisabled && !node.isDisabled
-      });
-      let customNodes = checkedNodes.filter(node =>
-        {
-          return !(node.getText(showAllLevels, separator).includes("Show all"));
-        }
-      );
-      if (customNodes.length) {
-        const [first, ...rest] = customNodes;
-        const restCount = rest.length;
-        tags.push(genTag(first));
-        if (restCount) {
-          if (collapseTags) {
-            tags.push({
-              key: -1,
-              text: `+ ${restCount}`,
-              closable: false
-            });
-          } else {
-            rest.forEach(node => tags.push(genTag(node)));
-          }
-        }
-      }
-      this.checkedNodes = checkedNodes;
-      this.presentTags = tags;
-      this.$emit("tags-changed", this.presentTags);
-    }
-  }
-}
-
-</script>
+<script>
+/* eslint-disable no-alert, no-console */
+import { Cascader } from "element-ui";
+
+export default {
+  name: 'CustomCascader',
+  extends: Cascader,
+  methods:{
+    //Modify this internal function to disable Show all tags
+    computePresentTags() {
+      const { isDisabled, leafOnly, showAllLevels, separator, collapseTags } = this;
+      const checkedNodes = this.getCheckedNodes(leafOnly);
+      const tags = [];
+      const genTag = node => ({
+        node,
+        key: node.uid,
+        text: node.getText(showAllLevels, separator),
+        hitState: false,
+        closable: !isDisabled && !node.isDisabled
+      });
+      let customNodes = checkedNodes.filter(node =>
+        {
+          return !(node.getText(showAllLevels, separator).includes("Show all"));
+        }
+      );
+      if (customNodes.length) {
+        const [first, ...rest] = customNodes;
+        const restCount = rest.length;
+        tags.push(genTag(first));
+        if (restCount) {
+          if (collapseTags) {
+            tags.push({
+              key: -1,
+              text: `+ ${restCount}`,
+              closable: false
+            });
+          } else {
+            rest.forEach(node => tags.push(genTag(node)));
+          }
+        }
+      }
+      this.checkedNodes = checkedNodes;
+      this.presentTags = tags;
+      this.$emit("tags-changed", this.presentTags);
+    }
+  }
+}
+
+</script>