@abi-software/map-side-bar 1.5.0 → 1.5.2

package/src/algolia/algolia.js

@@ -1,188 +1,188 @@
-/* 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
-    this.anatomyFacetLabels = []
-  }
-  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 ? res.pennsieve.updatedAt : undefined,
-        publishDate: res.pennsieve ? res.pennsieve.publishDate : undefined,
-        datasetId: res.objectID,
-        detailsReady: false
-      }
-      newResults.push(newResult)
-    }
-    return newResults
-  }
-
-  _processAnatomy(hits) {
-    let foundKeyWords = []
-    let foundLabels = []
-    let uniqueLabels = []
-    let uniqueKeywords = []
-    hits.forEach(hit => {
-      if (hit.item && hit.item.keywords) {
-        hit.item.keywords.forEach(keywordObj => {
-          let keyword = keywordObj.keyword.toUpperCase()
-          if (keyword.includes('UBERON') || keyword.includes('ILX')) {
-            foundKeyWords.push(this._processUberonURL(keyword))
-          }
-        })
-      }
-      if (hit.anatomy && hit.anatomy.organ ) {
-        hit.anatomy.organ.forEach(anatomy => {
-          if (anatomy.curie) {
-            foundKeyWords.push(anatomy.curie)
-            foundLabels.push(anatomy.name)
-          }
-        })
-      }
-    })
-    uniqueKeywords = [...new Set(foundKeyWords) ]
-    uniqueLabels = [...new Set(foundLabels) ]
-    this.anatomyFacetLabels = uniqueLabels
-    return uniqueKeywords
-  }
-
-  _processUberonURL(url) {
-    let ub = url.split('/').pop()
-    return ub.replace('_', ':')
-  }
-
-  /**
-   * 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 ? r.pennsieve.identifier : r.objectID),
-            dois: response.hits.map(r => r.item.curie.split(':')[1])
-          }
-          resolve(searchData)
-        })
-    })
-  }
-
-  /**
- * Get key words
- * This is used to return all keywords for a given search. Note that you often want the hits per page to be maxed out
- */
-  anatomyInSearch(filter, query = '', hitsperPage = 999999, page = 1) {
-    return new Promise(resolve => {
-      this.index
-        .search(query, {
-          facets: ['*'],
-          hitsPerPage: hitsperPage,
-          page: page - 1,
-          filters: filter,
-          attributesToHighlight: [],
-          attributesToRetrieve: [
-            'item.keywords.keyword',
-            'anatomy.organ.name',
-            'anatomy.organ.curie'
-          ],
-        })
-        .then(response => {
-          let anatomyAsUberons = this._processAnatomy(response.hits)
-          resolve(anatomyAsUberons)
-        })
-    })
-  }
-}
+/* 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
+    this.anatomyFacetLabels = []
+  }
+  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 ? res.pennsieve.updatedAt : undefined,
+        publishDate: res.pennsieve ? res.pennsieve.publishDate : undefined,
+        datasetId: res.objectID,
+        detailsReady: false
+      }
+      newResults.push(newResult)
+    }
+    return newResults
+  }
+
+  _processAnatomy(hits) {
+    let foundKeyWords = []
+    let foundLabels = []
+    let uniqueLabels = []
+    let uniqueKeywords = []
+    hits.forEach(hit => {
+      if (hit.item && hit.item.keywords) {
+        hit.item.keywords.forEach(keywordObj => {
+          let keyword = keywordObj.keyword.toUpperCase()
+          if (keyword.includes('UBERON') || keyword.includes('ILX')) {
+            foundKeyWords.push(this._processUberonURL(keyword))
+          }
+        })
+      }
+      if (hit.anatomy && hit.anatomy.organ ) {
+        hit.anatomy.organ.forEach(anatomy => {
+          if (anatomy.curie) {
+            foundKeyWords.push(anatomy.curie)
+            foundLabels.push(anatomy.name)
+          }
+        })
+      }
+    })
+    uniqueKeywords = [...new Set(foundKeyWords) ]
+    uniqueLabels = [...new Set(foundLabels) ]
+    this.anatomyFacetLabels = uniqueLabels
+    return uniqueKeywords
+  }
+
+  _processUberonURL(url) {
+    let ub = url.split('/').pop()
+    return ub.replace('_', ':')
+  }
+
+  /**
+   * 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 ? r.pennsieve.identifier : r.objectID),
+            dois: response.hits.map(r => r.item.curie.split(':')[1])
+          }
+          resolve(searchData)
+        })
+    })
+  }
+
+  /**
+ * Get key words
+ * This is used to return all keywords for a given search. Note that you often want the hits per page to be maxed out
+ */
+  anatomyInSearch(filter, query = '', hitsperPage = 999999, page = 1) {
+    return new Promise(resolve => {
+      this.index
+        .search(query, {
+          facets: ['*'],
+          hitsPerPage: hitsperPage,
+          page: page - 1,
+          filters: filter,
+          attributesToHighlight: [],
+          attributesToRetrieve: [
+            'item.keywords.keyword',
+            'anatomy.organ.name',
+            'anatomy.organ.curie'
+          ],
+        })
+        .then(response => {
+          let anatomyAsUberons = this._processAnatomy(response.hits)
+          resolve(anatomyAsUberons)
+        })
+    })
+  }
+}

package/src/algolia/utils.js

@@ -1,70 +1,70 @@
-/* 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',
-  'item.types.name' : 'Data type',
-}
-
-// Same as above, but these show on the sidebar filters
-export const shownFilters = {
-  'anatomy.organ.name' : 'Anatomical Structure',
-  'organisms.primary.species.name' : 'Species',
-  'attributes.subject.sex.value' : 'Sex',
-  'attributes.subject.ageCategory.value' : 'Age Categories',
-  'item.types.name' : 'Data type',
-}
-
-/* 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 facetsToBool = facets.filter(
-      (facet) => facet.facetPropPath == facetPropPath
-    );
-    let orFilters = "";
-    let andFilters = "";
-    facetsToBool.map((facet) => {
-      if (facet.AND){
-        andFilters += `AND "${facetPropPath}":"${facet.label}"`;
-      } else {
-        orFilters += `"${facetPropPath}":"${facet.label}" OR `;
-      }
-    });
-    if (orFilters == "" && andFilters =="") {
-      return;
-    }
-    orFilters = `(${orFilters.substring(0, orFilters.lastIndexOf(" OR "))})` // remove last OR
-
-    filters += `${orFilters + andFilters} AND `; // Put them together
-    // (Note that we add an extra AND in case there are facets at a higher level)
-
-    filters = filters.split('()AND ').join(''); // Handle case where there where no OR facets
-  });
-  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',
+  'item.types.name' : 'Data type',
+}
+
+// Same as above, but these show on the sidebar filters
+export const shownFilters = {
+  'anatomy.organ.name' : 'Anatomical Structure',
+  'organisms.primary.species.name' : 'Species',
+  'attributes.subject.sex.value' : 'Sex',
+  'attributes.subject.ageCategory.value' : 'Age Categories',
+  'item.types.name' : 'Data type',
+}
+
+/* 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 facetsToBool = facets.filter(
+      (facet) => facet.facetPropPath == facetPropPath
+    );
+    let orFilters = "";
+    let andFilters = "";
+    facetsToBool.map((facet) => {
+      if (facet.AND){
+        andFilters += `AND "${facetPropPath}":"${facet.label}"`;
+      } else {
+        orFilters += `"${facetPropPath}":"${facet.label}" OR `;
+      }
+    });
+    if (orFilters == "" && andFilters =="") {
+      return;
+    }
+    orFilters = `(${orFilters.substring(0, orFilters.lastIndexOf(" OR "))})` // remove last OR
+
+    filters += `${orFilters + andFilters} AND `; // Put them together
+    // (Note that we add an extra AND in case there are facets at a higher level)
+
+    filters = filters.split('()AND ').join(''); // Handle case where there where no OR facets
+  });
+  return filters.substring(0, filters.lastIndexOf(" AND "));
+}
+
+function removeShowAllFacets(facetArray){
+  return facetArray.filter( f => f.label !== 'Show all')
 }

package/src/assets/_variables.scss

@@ -1,43 +1,43 @@
-// Primary colors
-$purple: #8300BF;
-$darkBlue: #24245B;
-$grey: #303133;
-
-// Secondary colors
-$lightPurple: #BC00FC;
-$blue: #0026FF;
-
-// Status colors
-$success: #5e9f69;
-$warning: #FF8400;
-$danger: #b51d09;
-
-// Text colors
-$neutralGrey: #616161;
-$mediumGrey: #606266;
-$lightGrey: #909399;
-
-// Line colors
-$lineColor1: #DCDFE6;
-$lineColor2: #E4E7ED;
-
-// Background colors
-$background: #F5F7FA;
-$cochlear: #FFFFFF;
-
-//Search box colors
-$darkGrey: #606266;
-
-$app-primary-color: $purple;
-$app-secondary-color: $darkBlue;
-$text-color: $grey;
-$input-text: $grey;
-
-$system-font:  -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif !important;
-$font-family: 'Asap', sans-serif;
-
-// Viewport Sizes
-$viewport-sm: 20rem;
-$viewport-md: 47rem;
-$viewport-lg: 64rem;
-$viewport-xlg: 120rem;
+// Primary colors
+$purple: #8300BF;
+$darkBlue: #24245B;
+$grey: #303133;
+
+// Secondary colors
+$lightPurple: #BC00FC;
+$blue: #0026FF;
+
+// Status colors
+$success: #5e9f69;
+$warning: #FF8400;
+$danger: #b51d09;
+
+// Text colors
+$neutralGrey: #616161;
+$mediumGrey: #606266;
+$lightGrey: #909399;
+
+// Line colors
+$lineColor1: #DCDFE6;
+$lineColor2: #E4E7ED;
+
+// Background colors
+$background: #F5F7FA;
+$cochlear: #FFFFFF;
+
+//Search box colors
+$darkGrey: #606266;
+
+$app-primary-color: $purple;
+$app-secondary-color: $darkBlue;
+$text-color: $grey;
+$input-text: $grey;
+
+$system-font:  -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif !important;
+$font-family: 'Asap', sans-serif;
+
+// Viewport Sizes
+$viewport-sm: 20rem;
+$viewport-md: 47rem;
+$viewport-lg: 64rem;
+$viewport-xlg: 120rem;

package/src/assets/styles.scss

@@ -1,7 +1,7 @@
-@import url('https://fonts.googleapis.com/css?family=Asap:400,400i,500,600,700&display=swap');
-
-@import '_variables';
-
-/* icon font path, required */
-$--color-primary: $app-primary-color !default;
-$--font-path: '~element-ui/lib/theme-chalk/fonts';
+@import url('https://fonts.googleapis.com/css?family=Asap:400,400i,500,600,700&display=swap');
+
+@import '_variables';
+
+/* icon font path, required */
+$--color-primary: $app-primary-color !default;
+$--font-path: '~element-ui/lib/theme-chalk/fonts';