@abi-software/map-side-bar 2.5.3-beta.18 → 2.5.3-beta.19

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abi-software/map-side-bar",
-  "version": "2.5.3-beta.18",
+  "version": "2.5.3-beta.19",
   "files": [
     "dist/*",
     "src/*",
@@ -39,7 +39,7 @@
   },
   "dependencies": {
     "@abi-software/gallery": "^1.1.2",
-    "@abi-software/map-utilities": "^1.2.2-beta.8",
+    "@abi-software/map-utilities": "^1.2.2-beta.6",
     "@abi-software/svg-sprite": "^1.0.1",
     "@element-plus/icons-vue": "^2.3.1",
     "algoliasearch": "^4.10.5",

package/src/components/ConnectivityInfo.vue

@@ -22,13 +22,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>
@@ -58,7 +52,39 @@
       </div>
     </div>
 
-    <div class="content-container population-display">
+    <div class="content-container neuron-connection-button" v-if="entry.neuronCuration">
+      <div class="block attribute-title-container">
+        <span class="attribute-title">Neuron Connection</span>
+      </div>
+      <div class="block">
+        <el-button 
+          v-if="hasOrigins" 
+          class="button" 
+          type="primary"
+          @click="showNeuronConnection('origins')"
+        >
+          Origins
+        </el-button>
+        <el-button
+          v-if="hasComponents" 
+          class="button" 
+          type="primary"
+          @click="showNeuronConnection('components')"
+        >
+          Components
+        </el-button>
+        <el-button 
+          v-if="hasDestinations" 
+          class="button" 
+          type="primary"
+          @click="showNeuronConnection('destinations')"
+        >
+          Destinations
+        </el-button>
+      </div>
+    </div>
+
+    <div class="content-container population-display" v-if="entry.neuronCuration">
       <div class="block attribute-title-container">
         <span class="attribute-title">Population Display</span>
       </div>
@@ -80,7 +106,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 +121,6 @@
             <span style="word-break: keep-all">
               <i>Origin</i> {{ originDescription }}
             </span>
-
           </el-popover>
         </div>
         <div
@@ -103,16 +128,23 @@
           class="attribute-content"
           :origin-item-label="origin"
           :key="origin"
-          @mouseenter="toggleConnectivityTooltip(origin, {show: true})"
-          @mouseleave="toggleConnectivityTooltip(origin, {show: false})"
         >
-          {{ capitalise(origin) }}
+          <span
+            @mouseenter="toggleConnectivityTooltip(origin, {show: true})"
+            @mouseleave="toggleConnectivityTooltip(origin, {show: false})"
+          >
+            {{ capitalise(origin) }}
+          </span>
+          <el-icon 
+
+            class="neuron-connection-icon" 
+            @click="showNeuronConnection('origins', origin)"
+          >
+            <el-icon-connection />
+          </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 +152,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 +161,23 @@
           class="attribute-content"
           :component-item-label="component"
           :key="component"
-          @mouseenter="toggleConnectivityTooltip(component, {show: true})"
-          @mouseleave="toggleConnectivityTooltip(component, {show: false})"
         >
-          {{ capitalise(component) }}
+          <span
+            @mouseenter="toggleConnectivityTooltip(component, {show: true})"
+            @mouseleave="toggleConnectivityTooltip(component, {show: false})"
+          >
+            {{ capitalise(component) }}
+          </span>
+          <el-icon 
+
+            class="neuron-connection-icon" 
+            @click="showNeuronConnection('components', component)"
+          >
+            <el-icon-connection />
+          </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 +199,28 @@
           class="attribute-content"
           :destination-item-label="destination"
           :key="destination"
-          @mouseenter="toggleConnectivityTooltip(destination, {show: true})"
-          @mouseleave="toggleConnectivityTooltip(destination, {show: false})"
         >
-          {{ capitalise(destination) }}
+          <span
+            @mouseenter="toggleConnectivityTooltip(destination, {show: true})"
+            @mouseleave="toggleConnectivityTooltip(destination, {show: false})"
+          >
+            {{ capitalise(destination) }}
+          </span>
+          <el-icon 
+
+            class="neuron-connection-icon" 
+            @click="showNeuronConnection('destinations', destination)"
+          >
+            <el-icon-connection />
+          </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>
@@ -228,6 +257,7 @@ import {
   ArrowUp as ElIconArrowUp,
   ArrowDown as ElIconArrowDown,
   Warning as ElIconWarning,
+  Connection as ElIconConnection,
 } from '@element-plus/icons-vue'
 /* eslint-disable no-alert, no-console */
 import {
@@ -240,7 +270,6 @@ import EventBus from './EventBus.js'
 import {
   CopyToClipboard,
   ConnectivityGraph,
-  ExternalResourceCard,
 } from '@abi-software/map-utilities';
 import '@abi-software/map-utilities/dist/style.css';
 
@@ -266,7 +295,6 @@ export default {
     ElIconArrowUp,
     ElIconArrowDown,
     ElIconWarning,
-    ExternalResourceCard,
     CopyToClipboard,
     ConnectivityGraph,
   },
@@ -325,6 +353,45 @@ 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)
+      );
+    },
+    updatedCopyContent: function () {
+      return this.getUpdateCopyContent();
+    },
     resources: function () {
       let resources = [];
       if (this.entry && this.entry.hyperlinks) {
@@ -354,6 +421,13 @@ export default {
     },
   },
   methods: {
+    showNeuronConnection: function (type, label = undefined) {
+      const data = label ? this.findConnectivityDatasets(label) : []
+      this.$emit('neuron-connection-change', {
+        type: type,
+        data: data
+      });
+    },
     titleCase: function (title) {
       return titleCase(title)
     },
@@ -517,29 +591,29 @@ export default {
 
       return contentArray.join('\n\n<br>');
     },
-    toggleConnectivityTooltip: function (name, option) {
+    findConnectivityDatasets: 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
+    },
+    toggleConnectivityTooltip: function (label, option) {
+      const data = option.show ? this.findConnectivityDatasets(label) : []
       // type: to show error only for click event
       this.$emit('connectivity-component-click', data);
     },
@@ -751,6 +825,8 @@ export default {
 }
 
 .attribute-content {
+  display: flex;
+  justify-content: space-between;
   font-size: 14px;
   font-weight: 500;
   transition: color 0.25s ease;
@@ -776,6 +852,11 @@ export default {
   &:last-of-type {
     margin-bottom: 0.5em;
   }
+
+  .neuron-connection-icon {
+    padding: 4px;
+    cursor: pointer;
+  }
 }
 
 .popover-container {
@@ -841,6 +922,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

@@ -174,7 +174,6 @@ export default {
       showFiltersText: true,
       cascadeSelected: [],
       cascadeSelectedWithBoolean: [],
-      filterTimeout: null,
       numberShown: 10,
       filters: [],
       facets: ['Species', 'Gender', 'Organ', 'Datasets'],
@@ -477,25 +476,10 @@ export default {
             }
           })
 
-        // if all checkboxes are checked
-        // there has no filter values
-        const filtersLength = filters.filter((item) => item.facet !== 'Show all');
-        if (!filtersLength.length) {
-          filters = [];
-        }
-
-        // timeout: add delay for filter checkboxes
-        if (this.filterTimeout) {
-          clearTimeout(this.filterTimeout);
-        }
-
         this.$emit('loading', true) // let sidebarcontent wait for the requests
+        this.$emit('filterResults', filters) // emit filters for apps above sidebar
         this.setCascader(filterKeys) //update our cascader v-model if we modified the event
-
-        this.filterTimeout = setTimeout(() => {
-          this.$emit('filterResults', filters) // emit filters for apps above sidebar
-          this.cssMods() // update css for the cascader
-        }, 600);
+        this.cssMods() // update css for the cascader
       }
     },
     //this fucntion is needed as we previously stored booleans in the array of event that
@@ -1013,8 +997,6 @@ export default {
 
 .sidebar-cascader-popper .el-checkbox__input.is-checked .el-checkbox__inner,
 .el-checkbox__input.is-indeterminate .el-checkbox__inner {
-  --el-checkbox-checked-bg-color: #{$app-primary-color};
-  --el-checkbox-checked-input-border-color: #{$app-primary-color};
   background-color: $app-primary-color;
   border-color: $app-primary-color;
 }