@abi-software/map-side-bar 2.6.1 → 2.6.2-beta.0

package/package.json

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

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 {
@@ -239,8 +269,7 @@ import {
 import EventBus from './EventBus.js'
 import {
   CopyToClipboard,
-  ConnectivityGraph,
-  ExternalResourceCard,
+  ConnectivityGraph
 } 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

@@ -998,14 +998,9 @@ export default {
   border-color: $app-primary-color;
 }
 
-.filter-help-popover {
-  color: rgb(48, 49, 51);
-  font-family: Asap;
-  margin: 12px;
-}
-
 .filter-help-popover,
 .cascade-tags-popover {
+  font-family: 'Asap', sans-serif;
   background: #f3ecf6 !important;
   border: 1px solid $app-primary-color !important;
   border-radius: 4px !important;

package/src/components/SearchHistory.vue

@@ -489,6 +489,7 @@ export default {
   .el-icon {
     transform: rotate(0deg);
     transition: transform 0.25s linear;
+    color: var(--el-text-color-placeholder);
   }
 
   &[aria-expanded="true"] {

package/src/components/SideBar.vue

@@ -39,6 +39,7 @@
                 :ref="'connectivityTab_' + tab.id"
                 @show-connectivity="showConnectivity"
                 @connectivity-component-click="onConnectivityComponentClick"
+                @neuron-connection-change="showNeuronConnection"
               />
             </template>
             <template v-else-if="tab.type === 'annotation'">
@@ -195,6 +196,9 @@ export default {
     onConnectivityComponentClick: function (data) {
       this.$emit('connectivity-component-click', data);
     },
+    showNeuronConnection: function (data) {
+      this.$emit('neuron-connection-change', data);
+    },
     /**
      * This event is emitted when the search filters are changed.
      * @arg `obj` {data, id}

package/src/components.d.ts

@@ -23,6 +23,7 @@ declare module 'vue' {
     ElIconArrowDown: typeof import('@element-plus/icons-vue')['ArrowDown']
     ElIconArrowLeft: typeof import('@element-plus/icons-vue')['ArrowLeft']
     ElIconArrowRight: typeof import('@element-plus/icons-vue')['ArrowRight']
+    ElIconConnection: typeof import('@element-plus/icons-vue')['Connection']
     ElIconDelete: typeof import('@element-plus/icons-vue')['Delete']
     ElIconLocation: typeof import('@element-plus/icons-vue')['Location']
     ElIconWarning: typeof import('@element-plus/icons-vue')['Warning']

package/src/exampleConnectivityInput.js

@@ -285,5 +285,6 @@ export default {
         "Homo sapiens",
         "Canis lupus familiaris",
         "Domestic Pig"
-    ]
+    ],
+    neuronCuration: true
 }