@abi-software/map-side-bar 2.9.1 → 2.9.2-demo.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abi-software/map-side-bar",
-  "version": "2.9.1",
+  "version": "2.9.2-demo.0",
   "files": [
     "dist/*",
     "src/*",

package/src/algolia/algolia.js

@@ -18,12 +18,17 @@ export class AlgoliaClient {
   getAlgoliaFacets(propPathMapping) {
     const facetPropPaths = propPathMapping.map(facet => facet.facetPropPath)
     const facetSubpropPaths = propPathMapping.map(item => item.facetSubpropPath)
+    const facetSubsubpropPaths = propPathMapping.map(
+      item => item.facetSubsubpropPath).filter(
+        i => i !== undefined
+      )
     let facetData = []
     let facetId = 0
+    console.log("getAlgoliaFacets", facetPropPaths.concat(facetSubpropPaths).concat(facetSubsubpropPaths))
     return this.index
       .search('', {
         sortFacetValuesBy: 'alpha',
-        facets: facetPropPaths.concat(facetSubpropPaths),
+        facets: facetPropPaths.concat(facetSubpropPaths).concat(facetSubsubpropPaths),
       })
       .then(response => {
         facetPropPaths.map((facetPropPath) => {

package/src/algolia/utils.js

@@ -14,6 +14,7 @@ export const facetPropPathMapping = [
     id: 'anatomy.organ.category',
     facetPropPath: 'anatomy.organ.category.name',
     facetSubpropPath: 'anatomy.organ.subcategory.name',
+    facetSubsubpropPath: 'anatomy.organ.subsubcategory.name',
     facetFilterPath: 'anatomy.organ.name'
   },
   {

package/src/components/ConnectivityCard.vue

@@ -6,7 +6,13 @@
         <div class="card-title">{{ capitalise(entry.label) }}</div>
         <template v-for="field in displayFields" :key="field">
           <div class="card-details" v-if="entry[field]">
-            <strong>{{ field }}:</strong> {{ entry[field] }}
+            <strong>{{ field }}:</strong>
+            <div v-if="field === 'nerve-label'" class="card-tags">
+              <el-tag type="primary" size="small" v-for="nerve in entry[field]">
+                {{ nerve }}
+              </el-tag>
+            </div>
+            <span v-else>{{ entry[field] }}</span>
           </div>
         </template>
       </div>
@@ -19,7 +25,7 @@ export default {
   name: "ConnectivityCard",
   data() {
     return {
-      displayFields: ["id"],
+      displayFields: ["id", "nerve-label"],
     };
   },
   props: {
@@ -90,4 +96,15 @@ export default {
   line-height: 1.5;
   letter-spacing: 1.05px;
 }
+
+.card-tags {
+  overflow-y: scroll;
+  max-height: 4.1rem;
+
+  &::-webkit-scrollbar {
+    display: none; /* Hide scrollbar for Chrome, Safari and Opera */
+  }
+  -ms-overflow-style: none;  /* Hide scrollbar for IE and Edge */
+  scrollbar-width: none;  /* Hide scrollbar for Firefox */
+}
 </style>

package/src/components/ConnectivityExplorer.vue

@@ -668,7 +668,6 @@ export default {
   background-color: transparent !important;
   padding: 2px !important;
   height: auto !important;
-  margin-left: 4px!important;
 
   &:hover {
     text-decoration-color: transparent;

package/src/components/SearchFilters.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="filters">
     <MapSvgSpriteColor />
-    <div v-if="showFilters">
+    <div v-if="showFilters && options.length > 0">
       <div class="cascader-tag" v-if="presentTags.length > 0">
         <el-tag
           class="ml-2"
@@ -230,10 +230,12 @@ export default {
           // Populate the cascader with new options
           this.populateCascader().then(() => {
             this.cascaderIsReady = true
-            this.checkShowAllBoxes()
-            // this.setCascader(this.entry.filterFacets)
-            this.cssMods()
-            this.$emit('cascaderReady')
+            if (this.options.length) {
+              this.checkShowAllBoxes()
+              // this.setCascader(this.entry.filterFacets)
+              this.cssMods()
+              this.$emit('cascaderReady')
+            }
           })
         }
       },