@abi-software/map-side-bar 2.18.0 → 2.19.1-demo.0

package/src/algolia/utils.js

@@ -1,5 +1,3 @@
-/* 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 = [
@@ -7,7 +5,7 @@ export const facetPropPathMapping = [
     label: 'Data Type',
     id: 'item.types',
     facetPropPath: 'item.types.name',
-    facetSubpropPath: 'item.types.subcategory.name'
+    facetSubpropPath: 'item.types.subcategory.name',
   },
   {
     label: 'Anatomical Structure',
@@ -15,39 +13,39 @@ export const facetPropPathMapping = [
     facetPropPath: 'anatomy.organ.category.name',
     facetSubpropPath: 'anatomy.organ.subcategory.name',
     facetSubsubpropPath: 'anatomy.organ.subsubcategory.name',
-    facetFilterPath: 'anatomy.organ.name'
+    facetFilterPath: 'anatomy.organ.name',
   },
   {
     label: 'Species',
     id: 'organisms.primary.species',
     facetPropPath: 'organisms.primary.species.name',
-    facetSubpropPath: 'organisms.primary.species.subcategory.name'
+    facetSubpropPath: 'organisms.primary.species.subcategory.name',
   },
   {
     label: 'Experimental Approach',
     id: 'item.modalities',
     facetPropPath: 'item.modalities.keyword',
-    facetSubpropPath: 'item.modalities.subcategory.name'
+    facetSubpropPath: 'item.modalities.subcategory.name',
   },
   {
     label: 'Sex',
     id: 'attributes.subject.sex',
     facetPropPath: 'attributes.subject.sex.value',
-    facetSubpropPath: 'attributes.subject.sex.subcategory.name'
+    facetSubpropPath: 'attributes.subject.sex.subcategory.name',
   },
   {
     label: 'Age Categories',
     id: 'attributes.subject.ageCategory',
     facetPropPath: 'attributes.subject.ageCategory.value',
-    facetSubpropPath: 'attributes.subject.ageCategory.subcategory.name'
+    facetSubpropPath: 'attributes.subject.ageCategory.subcategory.name',
   },
   {
     label: 'Consortia',
     id: 'supportingAwards.consortium',
     facetPropPath: 'supportingAwards.consortium.name',
-    facetSubpropPath: 'supportingAwards.consortium.subcategory.name'
+    facetSubpropPath: 'supportingAwards.consortium.subcategory.name',
   },
-]
+];
 
 // Same as above, but these show on the sidebar filters
 export const shownFilters = {
@@ -57,70 +55,68 @@ export const shownFilters = {
   'attributes.subject.ageCategory.value': 'Age Categories',
   'supportingAwards.consortium.name': 'Consortia',
   '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) */
+ * 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'
+    return 'NOT item.published.status:embargo';
   }
 
   // Switch the 'term' attribute to 'label' if 'label' does not exist
-  selectedFacetArray.forEach(f => {
-    f.label = f.facet3 ? f.facet3 : f.facet2 ? f.facet2 : f.facet
-  })
+  selectedFacetArray.forEach((f) => {
+    f.label = f.facet3 ? f.facet3 : f.facet2 ? f.facet2 : f.facet;
+  });
 
-  let facets = removeShowAllFacets(selectedFacetArray)
+  let facets = removeShowAllFacets(selectedFacetArray);
   //Facet 3 Non specific is the same as facet.facet2 the subsubcategory
   facets.forEach((facet) => {
     if (facet.facet3) {
-      if (facet.facet3 === "Non specific") {
-        facet.label = facet.facet2
+      if (facet.facet3 === 'Non specific') {
+        facet.label = facet.facet2;
       }
     }
-  })
+  });
 
-  let filters = "NOT item.published.status:embargo";
+  let filters = 'NOT item.published.status:embargo';
   filters = `(${filters}) AND `;
-  const facetPropPaths = facetPropPathMapping.map(
-    (f) => [f.facetPropPath, f.facetFilterPath]
-  );
+  const facetPropPaths = facetPropPathMapping.map((f) => [f.facetPropPath, f.facetFilterPath]);
   facetPropPaths.map(([facetPropPath, facetFilterPath]) => {
-    let facetsToBool = facets.filter(
-      (facet) => facet.facetPropPath == facetPropPath
-    );
-    let orFilters = "";
-    let andFilters = "";
+    let facetsToBool = facets.filter((facet) => facet.facetPropPath == facetPropPath);
+    let orFilters = '';
+    let andFilters = '';
     facetsToBool.map((facet) => {
       // for customization
       // facetSubPropPath have the priority
-      let facetPropPathToUse = facet.facetSubPropPath ?
-        facet.facetSubPropPath : facetFilterPath ?
-          facetFilterPath : facetPropPath
+      let facetPropPathToUse = facet.facetSubPropPath
+        ? facet.facetSubPropPath
+        : facetFilterPath
+          ? facetFilterPath
+          : facetPropPath;
       if (facet.AND) {
         andFilters += `AND "${facetPropPathToUse}":"${facet.label}"`;
       } else {
         orFilters += `"${facetPropPathToUse}":"${facet.label}" OR `;
       }
     });
-    if (orFilters == "" && andFilters == "") {
+    if (orFilters == '' && andFilters == '') {
       return;
     }
-    orFilters = `(${orFilters.substring(0, orFilters.lastIndexOf(" OR "))})` // remove last OR
+    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 "));
+  return filters.substring(0, filters.lastIndexOf(' AND '));
 }
 
 function removeShowAllFacets(facetArray) {
-  return facetArray.filter(f => f.label !== 'Show all')
+  return facetArray.filter((f) => f.label !== 'Show all');
 }
 
-export { removeShowAllFacets }
+export { removeShowAllFacets };

package/src/assets/_variables.scss

@@ -1,15 +1,15 @@
 // Primary colors
-$purple: #8300BF;
-$darkBlue: #24245B;
+$purple: #8300bf;
+$darkBlue: #24245b;
 $grey: #303133;
 
 // Secondary colors
-$lightPurple: #BC00FC;
-$blue: #0026FF;
+$lightPurple: #bc00fc;
+$blue: #0026ff;
 
 // Status colors
 $success: #5e9f69;
-$warning: #FF8400;
+$warning: #ff8400;
 $danger: #b51d09;
 
 // Text colors
@@ -18,12 +18,12 @@ $mediumGrey: #606266;
 $lightGrey: #909399;
 
 // Line colors
-$lineColor1: #DCDFE6;
-$lineColor2: #E4E7ED;
+$lineColor1: #dcdfe6;
+$lineColor2: #e4e7ed;
 
 // Background colors
-$background: #F5F7FA;
-$cochlear: #FFFFFF;
+$background: #f5f7fa;
+$cochlear: #ffffff;
 
 //Search box colors
 $darkGrey: #606266;
@@ -33,7 +33,9 @@ $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;
+$system-font:
+  -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell,
+  'Helvetica Neue', sans-serif !important;
 $font-family: 'Asap', sans-serif;
 
 // Viewport Sizes

package/src/assets/connectivity-explorer.scss

@@ -7,5 +7,5 @@
   background: #e0e0e0;
   padding: 2px 4px;
   border-radius: 4px;
-  font-size: .75rem !important;
+  font-size: 0.75rem !important;
 }

package/src/assets/fonts.scss

@@ -1,3 +1,2 @@
 @use 'variables' as *;
 @import url('https://fonts.googleapis.com/css?family=Asap:400,400i,500,600,700&display=swap');
-

package/src/assets/searchPopover.scss

@@ -1,4 +1,3 @@
-
 @use '_variables' as *;
 @forward '_variables';
 
@@ -29,7 +28,7 @@
     border-color: $app-primary-color !important;
   }
 
-  &[data-popper-placement^=bottom] .el-popper__arrow:before {
+  &[data-popper-placement^='bottom'] .el-popper__arrow:before {
     border-bottom-color: transparent !important;
     border-right-color: transparent !important;
   }

package/src/components/AnnotationTool.vue

@@ -19,21 +19,12 @@
       <el-row>
         <el-col :offset="1" :span="6">Delete this feature?</el-col>
         <el-col :offset="1" :span="3">
-          <el-button
-            class="delete-button"
-            :icon="ElIconDelete"
-            @click="$emit('confirm-delete')"
-            >
-              Delete
+          <el-button class="delete-button" :icon="ElIconDelete" @click="$emit('confirm-delete')">
+            Delete
           </el-button>
         </el-col>
         <el-col :offset="1" :span="2">
-          <el-button
-            class="delete-button"
-            @click="$emit('cancel-create')"
-            >
-              Dismiss
-          </el-button>
+          <el-button class="delete-button" @click="$emit('cancel-create')">Dismiss</el-button>
         </el-col>
       </el-row>
     </div>
@@ -43,27 +34,14 @@
 <script>
 import { shallowRef } from 'vue';
 import { AnnotationPopup, CreateTooltipContent } from '@abi-software/map-utilities';
+import { Delete as ElIconDelete } from '@element-plus/icons-vue';
 import '@abi-software/map-utilities/dist/style.css';
-import {
-  ElButton as Button,
-  ElCol as Col,
-  ElRow as Row,
-  ElIcon as Icon,
-} from 'element-plus'
-import {
-  Delete as ElIconDelete,
-} from '@element-plus/icons-vue'
 
 export default {
   name: 'AnnotationTool',
   components: {
     AnnotationPopup,
-    Button,
     CreateTooltipContent,
-    Col,
-    ElIconDelete,
-    Icon,
-    Row,
   },
   props: {
     annotationEntry: {
@@ -71,8 +49,8 @@ export default {
     },
     createData: {
       type: Object,
-      default: {},
-    }
+      default: () => {},
+    },
   },
   data: function () {
     return {
@@ -80,7 +58,7 @@ export default {
       annotationPopupData: null,
     };
   },
-}
+};
 </script>
 
 <style scoped lang="scss">
@@ -130,7 +108,7 @@ export default {
   .delete-button {
     pointer-events: auto;
     cursor: pointer;
-    margin-left:8px;
+    margin-left: 8px;
     padding-left: 8px;
     padding-right: 8px;
     height: 24px !important;
@@ -144,5 +122,4 @@ export default {
 .create-container.create-tooltip-content {
   background-color: #f7faff;
 }
-
-</style>
+</style>

package/src/components/BadgesGroup.vue

@@ -8,19 +8,16 @@
         @click="categoryClicked(key)"
         size="small"
         :key="key"
-        >{{ key + ' (' + item.size + ')' }}
+      >
+        {{ 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
@@ -29,7 +26,7 @@ export default {
     additionalLinks: {
       type: Array,
       default: () => {
-        return []
+        return [];
       },
     },
     displayDataset: {
@@ -43,7 +40,7 @@ export default {
     items: {
       type: Object,
       default: () => {
-        return {}
+        return {};
       },
     },
   },
@@ -52,19 +49,19 @@ export default {
       //Always start with 1 image - the dataset thumbnail itself
       categories: { All: { size: 1 }, Dataset: { size: 1 } },
       active: 'All',
-    }
+    };
   },
   methods: {
     addToCategories: function (name) {
-      const array = this.items[name]
+      const array = this.items[name];
       if (array && array.length > 0) {
-        this.categories[name] = { size: array.length }
-        this.categories['All'].size += array.length
+        this.categories[name] = { size: array.length };
+        this.categories['All'].size += array.length;
       }
     },
     categoryClicked: function (name) {
-      this.active = name
-      this.$emit('categoryChanged', name)
+      this.active = name;
+      this.$emit('categoryChanged', name);
     },
   },
   watch: {
@@ -72,16 +69,16 @@ export default {
       deep: true,
       immediate: true,
       handler: function () {
-        this.categories = {}
-        this.active = "All"
+        this.categories = {};
+        this.active = 'All';
         if (this.displayDataset) {
-          this.categories.All = { size: 1 }
-          this.categories.Dataset = { size: 1 }
+          this.categories.All = { size: 1 };
+          this.categories.Dataset = { size: 1 };
         } else {
-          this.categories.All = { size: 0 }
+          this.categories.All = { size: 0 };
         }
-        let keys = ['Flatmaps', 'Plots', 'Scaffolds', 'Simulations']
-        keys.forEach(key => this.addToCategories(key))
+        let keys = ['Flatmaps', 'Plots', 'Scaffolds', 'Simulations'];
+        keys.forEach((key) => this.addToCategories(key));
         /** disable the following
         this.addToCategories(this.entry.images, 'Images');
         this.addToCategories(this.entry.videos, 'Videos');
@@ -89,29 +86,29 @@ export default {
       },
     },
   },
-}
+};
 </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;
+    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;
+    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;
+      background: $app-primary-color !important;
+      border: 1px solid $app-primary-color !important;
+      color: #fff !important;
     }
   }
 
   .tag-button + .tag-button {
-    margin-left: 0!important;
+    margin-left: 0 !important;
   }
 }
 </style>