@abi-software/map-side-bar 2.4.0-alpha-1 → 2.4.0-isan-0

package/src/algolia/utils.js

@@ -1,101 +1,106 @@
-/* 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 = [
-  {
-    label: 'Data Type',
-    id: 'item.types',
-    facetPropPath: 'item.types.name',
-    facetSubpropPath: 'item.types.subcategory.name'
-  },
-  {
-    label: 'Anatomical Structure',
-    id: 'anatomy.organ.category',
-    facetPropPath: 'anatomy.organ.category.name',
-    facetSubpropPath: 'anatomy.organ.subcategory.name',
-    facetFilterPath: 'anatomy.organ.name'
-  },
-  {
-    label: 'Species',
-    id: 'organisms.primary.species',
-    facetPropPath: 'organisms.primary.species.name',
-    facetSubpropPath: 'organisms.primary.species.subcategory.name'
-  },
-  {
-    label: 'Experimental Approach',
-    id: 'item.modalities',
-    facetPropPath: 'item.modalities.keyword',
-    facetSubpropPath: 'item.modalities.subcategory.name'
-  },
-  {
-    label: 'Sex',
-    id: 'attributes.subject.sex',
-    facetPropPath: 'attributes.subject.sex.value',
-    facetSubpropPath: 'attributes.subject.sex.subcategory.name'
-  },
-  {
-    label: 'Age Categories',
-    id: 'attributes.subject.ageCategory',
-    facetPropPath: 'attributes.subject.ageCategory.value',
-    facetSubpropPath: 'attributes.subject.ageCategory.subcategory.name'
-  },
-]
-
-// 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 = facetPropPathMapping.map((f) => f.facetPropPath);
-  facetPropPaths.map((facetPropPath) => {
-    let facetsToBool = facets.filter(
-      (facet) => facet.facetPropPath == facetPropPath
-    );
-    let orFilters = "";
-    let andFilters = "";
-    facetsToBool.map((facet) => {
-      let facetPropPathToUse = facet.facetSubPropPath ? facet.facetSubPropPath : facetPropPath // Check if we have a subpath
-      if (facet.AND){
-        andFilters += `AND "${facetPropPathToUse}":"${facet.label}"`;
-      } else {
-        orFilters += `"${facetPropPathToUse}":"${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 = [
+  {
+    label: 'Data Type',
+    id: 'item.types',
+    facetPropPath: 'item.types.name',
+    facetSubpropPath: 'item.types.subcategory.name'
+  },
+  {
+    label: 'Anatomical Structure',
+    id: 'anatomy.organ.category',
+    facetPropPath: 'anatomy.organ.category.name',
+    facetSubpropPath: 'anatomy.organ.subcategory.name',
+    facetFilterPath: 'anatomy.organ.name'
+  },
+  {
+    label: 'Species',
+    id: 'organisms.primary.species',
+    facetPropPath: 'organisms.primary.species.name',
+    facetSubpropPath: 'organisms.primary.species.subcategory.name'
+  },
+  {
+    label: 'Experimental Approach',
+    id: 'item.modalities',
+    facetPropPath: 'item.modalities.keyword',
+    facetSubpropPath: 'item.modalities.subcategory.name'
+  },
+  {
+    label: 'Sex',
+    id: 'attributes.subject.sex',
+    facetPropPath: 'attributes.subject.sex.value',
+    facetSubpropPath: 'attributes.subject.sex.subcategory.name'
+  },
+  {
+    label: 'Age Categories',
+    id: 'attributes.subject.ageCategory',
+    facetPropPath: 'attributes.subject.ageCategory.value',
+    facetSubpropPath: 'attributes.subject.ageCategory.subcategory.name'
+  },
+]
+
+// 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. Use facet2 if available
+  selectedFacetArray.forEach(f=>{
+    f.label=f.facet
+    if (f.facet2) {
+      f.label = f.facet2
+    }
+  })
+  
+
+  let facets = removeShowAllFacets(selectedFacetArray)
+
+  let filters = "NOT item.published.status:embargo";
+  filters = `(${filters}) AND `;
+  const facetPropPaths = facetPropPathMapping.map((f) => f.facetPropPath);
+  facetPropPaths.map((facetPropPath) => {
+    let facetsToBool = facets.filter(
+      (facet) => facet.facetPropPath == facetPropPath
+    );
+    let orFilters = "";
+    let andFilters = "";
+    facetsToBool.map((facet) => {
+      let facetPropPathToUse = facet.facetSubPropPath ? facet.facetSubPropPath : facetPropPath // Check if we have a subpath
+      if (facet.AND){
+        andFilters += `AND "${facetPropPathToUse}":"${facet.label}"`;
+      } else {
+        orFilters += `"${facetPropPathToUse}":"${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,6 +1,6 @@
-@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;
+@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;

package/src/components/BadgesGroup.vue

@@ -1,124 +1,124 @@
-<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 { ElButton as Button } from 'element-plus'
-
-export default {
-  name: 'BadgesGroup',
-  components: { Button },
-  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 {
-      //Always start with 1 image - the dataset thumbnail itself
-      categories: { All: { size: 1 }, Dataset: { 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'], '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>
-
-<style lang="scss" scoped>
-.container {
-  .tag-button.el-button {
-    border-radius: 4px!important;
-    font-size: 0.75rem!important;
-    padding: 0.2rem 0.2rem!important;
-    margin: 0.5rem 0 0 0!important;
-    margin-right: 0.75rem !important;
-    background: #f9f2fc!important;
-    border: 1px solid $app-primary-color!important;
-    color: $app-primary-color!important;
-    &.active {
-      background: $app-primary-color!important;
-      border: 1px solid $app-primary-color!important;
-      color: #fff!important;
-    }
-  }
-  
-  .tag-button + .tag-button {
-    margin-left: 0!important;
-  }
-}
-</style>
+<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 { ElButton as Button } from 'element-plus'
+
+export default {
+  name: 'BadgesGroup',
+  components: { Button },
+  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 {
+      //Always start with 1 image - the dataset thumbnail itself
+      categories: { All: { size: 1 }, Dataset: { 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'], '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>
+
+<style lang="scss" scoped>
+.container {
+  .tag-button.el-button {
+    border-radius: 4px!important;
+    font-size: 0.75rem!important;
+    padding: 0.2rem 0.2rem!important;
+    margin: 0.5rem 0 0 0!important;
+    margin-right: 0.75rem !important;
+    background: #f9f2fc!important;
+    border: 1px solid $app-primary-color!important;
+    color: $app-primary-color!important;
+    &.active {
+      background: $app-primary-color!important;
+      border: 1px solid $app-primary-color!important;
+      color: #fff!important;
+    }
+  }
+  
+  .tag-button + .tag-button {
+    margin-left: 0!important;
+  }
+}
+</style>