@abi-software/map-side-bar 2.7.2-beta.0 → 2.7.2-beta.2

package/src/components/ConnectivityInfo.vue

@@ -5,7 +5,9 @@
       <div class="title-content">
         <div class="block" v-if="entry.title">
           <div class="title">
-            {{ capitalise(entry.title) }}
+            <span @click="connectivityClicked(entry.featureId[0])">
+              {{ capitalise(entry.title) }}
+            </span>
             <template v-if="entry.featuresAlert">
               <el-popover
                 width="250"
@@ -22,13 +24,7 @@
               </el-popover>
             </template>
           </div>
-          <div
-            v-if="
-              entry.provenanceTaxonomyLabel &&
-              entry.provenanceTaxonomyLabel.length > 0
-            "
-            class="subtitle"
-          >
+          <div v-if="hasProvenanceTaxonomyLabel" class="subtitle">
             {{ provSpeciesDescription }}
           </div>
         </div>
@@ -80,7 +76,7 @@
 
     <div class="content-container content-container-connectivity" v-show="activeView === 'listView'">
       {{ entry.paths }}
-      <div v-if="entry.origins && entry.origins.length > 0" class="block">
+      <div v-if="hasOrigins" class="block">
         <div class="attribute-title-container">
           <span class="attribute-title">Origin</span>
           <el-popover
@@ -95,7 +91,6 @@
             <span style="word-break: keep-all">
               <i>Origin</i> {{ originDescription }}
             </span>
-
           </el-popover>
         </div>
         <div
@@ -103,16 +98,22 @@
           class="attribute-content"
           :origin-item-label="origin"
           :key="origin"
-          @mouseenter="toggleConnectivityTooltip(origin, {show: true})"
-          @mouseleave="toggleConnectivityTooltip(origin, {show: false})"
         >
-          {{ capitalise(origin) }}
+          <span
+            @mouseenter="connectivityHovered(origin)"
+            @mouseleave="connectivityHovered()"
+          >
+            {{ capitalise(origin) }}
+          </span>
+          <el-icon 
+            class="connectivity-search-icon" 
+            @click="connectivityClicked(entry.featureId[0], 'Origins', origin)"
+          >
+            <el-icon-search />
+          </el-icon>
         </div>
         <el-button
-          v-show="
-            entry.originsWithDatasets && entry.originsWithDatasets.length > 0 &&
-            shouldShowExploreButton(entry.originsWithDatasets)
-          "
+          v-show="hasOriginsWithDatasets"
           class="button"
           id="open-dendrites-button"
           @click="openDendrites"
@@ -120,10 +121,7 @@
           Explore origin data
         </el-button>
       </div>
-      <div
-        v-if="entry.components && entry.components.length > 0"
-        class="block"
-      >
+      <div v-if="hasComponents" class="block">
         <div class="attribute-title-container">
           <div class="attribute-title">Components</div>
         </div>
@@ -132,16 +130,22 @@
           class="attribute-content"
           :component-item-label="component"
           :key="component"
-          @mouseenter="toggleConnectivityTooltip(component, {show: true})"
-          @mouseleave="toggleConnectivityTooltip(component, {show: false})"
         >
-          {{ capitalise(component) }}
+          <span
+            @mouseenter="connectivityHovered(component)"
+            @mouseleave="connectivityHovered()"
+          >
+            {{ capitalise(component) }}
+          </span>
+          <el-icon 
+            class="connectivity-search-icon" 
+            @click="connectivityClicked(entry.featureId[0], 'Components', component)"
+          >
+            <el-icon-search />
+          </el-icon>
         </div>
       </div>
-      <div
-        v-if="entry.destinations && entry.destinations.length > 0"
-        class="block"
-      >
+      <div v-if="hasDestinations" class="block">
         <div class="attribute-title-container">
           <span class="attribute-title">Destination</span>
           <el-popover
@@ -163,35 +167,27 @@
           class="attribute-content"
           :destination-item-label="destination"
           :key="destination"
-          @mouseenter="toggleConnectivityTooltip(destination, {show: true})"
-          @mouseleave="toggleConnectivityTooltip(destination, {show: false})"
         >
-          {{ capitalise(destination) }}
+          <span
+            @mouseenter="connectivityHovered(destination)"
+            @mouseleave="connectivityHovered()"
+          >
+            {{ capitalise(destination) }}
+          </span>
+          <el-icon 
+            class="connectivity-search-icon" 
+            @click="connectivityClicked(entry.featureId[0], 'Destinations', destination)"
+          >
+            <el-icon-search />
+          </el-icon>
         </div>
-        <el-button
-          v-show="
-            entry.destinationsWithDatasets &&
-            entry.destinationsWithDatasets.length > 0 &&
-            shouldShowExploreButton(entry.destinationsWithDatasets)
-          "
-          class="button"
-          @click="openAxons"
+        <el-button v-show="hasDestinationsWithDatasets" class="button" @click="openAxons"
         >
           Explore destination data
         </el-button>
       </div>
-      <div
-        v-show="
-          entry.componentsWithDatasets &&
-          entry.componentsWithDatasets.length > 0 &&
-          shouldShowExploreButton(entry.componentsWithDatasets)
-        "
-        class="block"
-      >
-        <el-button
-          class="button"
-          @click="openAll"
-        >
+      <div v-show="hasComponentsWithDatasets" class="block">
+        <el-button class="button" @click="openAll">
           Search for data on components
         </el-button>
       </div>
@@ -220,22 +216,22 @@
     </div>
 
     <div class="content-container content-container-references" v-if="resources.length">
-      <external-resource-card
+      <ExternalResourceCard
         :resources="resources"
         @references-loaded="onReferencesLoaded"
         @show-reference-connectivities="onShowReferenceConnectivities"
-      ></external-resource-card>
+      />
     </div>
   </div>
 </template>
 
 <script>
+  /* eslint-disable no-alert, no-console */
 import {
-  ArrowUp as ElIconArrowUp,
-  ArrowDown as ElIconArrowDown,
   Warning as ElIconWarning,
+  Location as ElIconLocation,
+  Search as ElIconSearch,
 } from '@element-plus/icons-vue'
-/* eslint-disable no-alert, no-console */
 import {
   ElButton as Button,
   ElContainer as Container,
@@ -246,7 +242,7 @@ import EventBus from './EventBus.js'
 import {
   CopyToClipboard,
   ConnectivityGraph,
-  ExternalResourceCard,
+  ExternalResourceCard
 } from '@abi-software/map-utilities';
 import '@abi-software/map-utilities/dist/style.css';
 
@@ -269,12 +265,12 @@ export default {
     Button,
     Container,
     Icon,
-    ElIconArrowUp,
-    ElIconArrowDown,
     ElIconWarning,
-    ExternalResourceCard,
+    ElIconLocation,
+    ElIconSearch,
     CopyToClipboard,
     ConnectivityGraph,
+    ExternalResourceCard
   },
   props: {
     entry: {
@@ -313,7 +309,6 @@ export default {
         motor: 'is the location of the initial cell body of the circuit',
         sensory: 'is the location of the initial cell body in the PNS circuit',
       },
-      componentsWithDatasets: [],
       uberons: [{ id: undefined, name: undefined }],
       connectivityError: null,
       timeoutID: undefined,
@@ -332,6 +327,42 @@ export default {
     },
   },
   computed: {
+    hasProvenanceTaxonomyLabel: function () {
+      return (
+        this.entry.provenanceTaxonomyLabel &&
+        this.entry.provenanceTaxonomyLabel.length > 0
+      );
+    },
+    hasOrigins: function () {
+      return this.entry.origins && this.entry.origins.length > 0;
+    },
+    hasOriginsWithDatasets: function () {
+      return (
+        this.entry.originsWithDatasets &&
+        this.entry.originsWithDatasets.length > 0 &&
+        this.shouldShowExploreButton(this.entry.originsWithDatasets)
+      );
+    },
+    hasComponents: function () {
+      return this.entry.components && this.entry.components.length > 0;
+    },
+    hasComponentsWithDatasets: function () {
+      return (
+        this.entry.componentsWithDatasets &&
+        this.entry.componentsWithDatasets.length > 0 &&
+        this.shouldShowExploreButton(this.entry.componentsWithDatasets)
+      );
+    },
+    hasDestinations: function () {
+      return this.entry.destinations && this.entry.destinations.length > 0;
+    },
+    hasDestinationsWithDatasets: function () {
+      return (
+        this.entry.destinationsWithDatasets &&
+        this.entry.destinationsWithDatasets.length > 0 &&
+        this.shouldShowExploreButton(this.entry.destinationsWithDatasets)
+      );
+    },
     resources: function () {
       let resources = [];
       if (this.entry && this.entry.hyperlinks) {
@@ -418,7 +449,6 @@ export default {
     },
     switchConnectivityView: function (val) {
       this.activeView = val;
-
       if (val === 'graphView' && !this.graphViewLoaded) {
         // to load the connectivity graph only after the container is in view
         this.$nextTick(() => {
@@ -429,7 +459,7 @@ export default {
     onTapNode: function (data) {
       // save selected state for list view
       const name = data.map(t => t.label).join(', ');
-      this.toggleConnectivityTooltip(name, {show: true});
+      this.connectivityHovered(name);
     },
     onShowReferenceConnectivities: function (refSource) {
       this.$emit('show-reference-connectivities', refSource);
@@ -539,31 +569,48 @@ export default {
 
       return contentArray.join('\n\n<br>');
     },
-    toggleConnectivityTooltip: function (name, option) {
+    getConnectivityDatasets: function (label) {
       const allWithDatasets = [
         ...this.entry.componentsWithDatasets,
         ...this.entry.destinationsWithDatasets,
         ...this.entry.originsWithDatasets,
       ];
-      const names = name.split(','); // some features have more than one value
-      const data = [];
-      if (option.show) {
-        names.forEach((n) => {
-          const foundData = allWithDatasets.find((a) =>
-            a.name.toLowerCase().trim() === n.toLowerCase().trim()
-          );
-
-          if (foundData) {
-            data.push({
-              id: foundData.id,
-              label: foundData.name
-            });
-          }
-        });
-      }
-
+      const names = label.split(','); // some features have more than one value
+      let data = [];
+      names.forEach((n) => {
+        const foundData = allWithDatasets.find((a) =>
+          a.name.toLowerCase().trim() === n.toLowerCase().trim()
+        );
+        if (foundData) {
+          data.push({
+            id: foundData.id,
+            label: foundData.name
+          });
+        }
+      });
+      return data
+    },
+    connectivityHovered: function (label) {
+      const data = label ? this.getConnectivityDatasets(label) : [];
       // type: to show error only for click event
-      this.$emit('connectivity-component-click', data);
+      this.$emit('connectivity-hovered', data);
+    },
+    connectivityClicked: function (id, type, label) {
+      let payload = {
+        query: id,
+        filter: [],
+        data: label ? this.getConnectivityDatasets(label) : [],
+      };
+      if (type && label) {
+        payload.filter.push({
+          AND: undefined,
+          facet: type,
+          facetPropPath: 'flatmap.connectivity.source',
+          facetSubPropPath: undefined,
+          term: 'Connectivity',
+        });
+      };
+      this.$emit('connectivity-clicked', payload);
     },
     getErrorConnectivities: function (errorData) {
       const errorDataToEmit = [...new Set(errorData)];
@@ -659,6 +706,10 @@ export default {
   font-weight: bold;
   padding-bottom: 8px;
   color: $app-primary-color;
+
+  span:hover {
+    cursor: pointer;
+  }
 }
 
 .block + .block {
@@ -774,17 +825,29 @@ export default {
 }
 
 .attribute-content {
+  display: flex;
+  justify-content: space-between;
   font-size: 14px;
   font-weight: 500;
   transition: color 0.25s ease;
   position: relative;
   cursor: default;
 
+  .connectivity-search-icon {
+    display: none;
+  }
+
   &:hover {
     color: $app-primary-color;
+
+    .connectivity-search-icon {
+      padding-top: 4px;
+      cursor: pointer;
+      display: block;
+    }
   }
 
-  + .attribute-content {
+  +.attribute-content {
     &::before {
       content: "";
       width: 90%;
@@ -864,6 +927,19 @@ export default {
   }
 }
 
+.neuron-connection-button {
+  display: flex;
+  flex: 1 1 auto !important;
+  flex-direction: row !important;
+  align-items: center;
+  justify-content: space-between;
+
+  .el-button + .el-button {
+    margin-top: 0 !important;
+    margin-left: 10px !important;
+  }
+}
+
 .population-display {
   display: flex;
   flex: 1 1 auto !important;

package/src/components/SearchFilters.vue

@@ -213,7 +213,60 @@ export default {
         )
       return value
     },
+    processOptions: function () {
+      // create top level of options in cascader
+      this.options.forEach((facet, i) => {
+        this.options[i].total = this.countTotalFacet(facet)
+
+        this.options[i].label = convertReadableLabel(facet.label)
+        this.options[i].value = this.createCascaderItemValue(
+          facet.key,
+          undefined
+        )
+
+        // put "Show all" as first option
+        this.options[i].children.unshift({
+          value: this.createCascaderItemValue('Show all'),
+          label: 'Show all',
+        })
+
+        // populate second level of options
+        this.options[i].children.forEach((facetItem, j) => {
+          // Format labels except funding program
+          if (this.options[i].children[j].facetPropPath !== 'pennsieve.organization.name') {
+            this.options[i].children[j].label = convertReadableLabel(
+              facetItem.label
+            )
+          }
+          this.options[i].children[j].value =
+            this.createCascaderItemValue(facet.label, facetItem.label)
+          if (
+            this.options[i].children[j].children &&
+            this.options[i].children[j].children.length > 0
+          ) {
+            this.options[i].children[j].children.forEach((term, k) => {
+              this.options[i].children[j].children[k].label =
+                convertReadableLabel(term.label)
+              this.options[i].children[j].children[k].value =
+                this.createCascaderItemValue(
+                  facet.label,
+                  facetItem.label,
+                  term.label
+                )
+            })
+          }
+        })
+      })
+    },
     populateCascader: function () {
+      if (this.entry.options) {
+        return new Promise((resolve) => {
+          this.facets = this.entry.options
+          this.options = this.entry.options
+          this.processOptions()
+          resolve();
+        });
+      }
       return new Promise((resolve) => {
         // Algolia facet serach
         this.algoliaClient
@@ -222,50 +275,7 @@ export default {
             this.facets = data
             EventBus.emit('available-facets', data)
             this.options = data
-
-            // create top level of options in cascader
-            this.options.forEach((facet, i) => {
-              this.options[i].total = this.countTotalFacet(facet)
-
-              this.options[i].label = convertReadableLabel(facet.label)
-              this.options[i].value = this.createCascaderItemValue(
-                facet.key,
-                undefined
-              )
-
-              // put "Show all" as first option
-              this.options[i].children.unshift({
-                value: this.createCascaderItemValue('Show all'),
-                label: 'Show all',
-              })
-
-              // populate second level of options
-              this.options[i].children.forEach((facetItem, j) => {
-                // Format labels except funding program
-                if (this.options[i].children[j].facetPropPath !== 'pennsieve.organization.name') {
-                  this.options[i].children[j].label = convertReadableLabel(
-                    facetItem.label
-                  )
-                }
-                this.options[i].children[j].value =
-                  this.createCascaderItemValue(facet.label, facetItem.label)
-                if (
-                  this.options[i].children[j].children &&
-                  this.options[i].children[j].children.length > 0
-                ) {
-                  this.options[i].children[j].children.forEach((term, k) => {
-                    this.options[i].children[j].children[k].label =
-                      convertReadableLabel(term.label)
-                    this.options[i].children[j].children[k].value =
-                      this.createCascaderItemValue(
-                        facet.label,
-                        facetItem.label,
-                        term.label
-                      )
-                  })
-                }
-              })
-            })
+            this.processOptions()
           })
           .finally(() => {
             resolve()
@@ -735,13 +745,18 @@ export default {
     removeTopLevelCascaderCheckboxes: function () {
       // Next tick allows the cascader menu to change
       this.$nextTick(() => {
-        let cascadePanels = document.querySelectorAll(
-          '.sidebar-cascader-popper .el-cascader-menu__list'
-        )
-        // Hide the checkboxes on the first level of the cascader
-        cascadePanels[0]
-          .querySelectorAll('.el-checkbox__input')
-          .forEach((el) => (el.style.display = 'none'))
+        const cascadePanels = document.querySelectorAll('.sidebar-cascader-popper .el-cascader-menu__list');
+
+        cascadePanels.forEach(panel => {
+          const panelText = panel.textContent;
+          const expandArrow = panel.querySelector('.el-icon.arrow-right');
+
+          if (!panelText.includes('Show all') && expandArrow) {
+            panel.querySelectorAll('.el-checkbox__input').forEach(checkbox => {
+              checkbox.style.display = 'none';
+            });
+          }
+        });
       })
     },
     /*