@abi-software/map-side-bar 2.5.0-beta.3 → 2.5.0-beta.4

package/package.json

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

package/src/App.vue

@@ -29,6 +29,7 @@
       @tabClicked="tabClicked"
       @search-changed="searchChanged($event)"
       @hover-changed="hoverChanged($event)"
+      @connectivity-component-click="onConnectivityComponentClick"
       @actionClick="action"
     />
   </div>
@@ -123,6 +124,7 @@ export default {
         BL_SERVER_URL: import.meta.env.VITE_APP_BL_SERVER_URL,
         NL_LINK_PREFIX: import.meta.env.VITE_APP_NL_LINK_PREFIX,
         ROOT_URL: import.meta.env.VITE_APP_ROOT_URL,
+        FLATMAPAPI_LOCATION: import.meta.env.VITE_FLATMAPAPI_LOCATION,
       },
       connectivityInput: exampleConnectivityInput,
       activeId: 1,
@@ -252,6 +254,9 @@ export default {
       } else {
         this.createData = null
       }
+    },
+    onConnectivityComponentClick: function(data) {
+      console.log("onConnectivityComponentClick" , data)
     }
   },
   mounted: function () {

package/src/components/ConnectivityInfo.vue

@@ -35,7 +35,9 @@
         <div class="block" v-else>
           <div class="title">{{ entry.featureId }}</div>
         </div>
-        <external-resource-card :resources="resources"></external-resource-card>
+        <div class="block" v-if="resources.length">
+          <external-resource-card :resources="resources"></external-resource-card>
+        </div>
       </div>
       <div class="title-buttons">
         <el-popover
@@ -58,7 +60,28 @@
         <CopyToClipboard :content="updatedCopyContent" />
       </div>
     </div>
-    <div class="content-container scrollbar">
+
+    <div class="content-container population-display">
+      <div class="block attribute-title-container">
+        <span class="attribute-title">Population Display</span>
+      </div>
+      <div class="block buttons-row">
+        <el-button
+          :class="activeView === 'listView' ? 'button' : 'el-button-secondary'"
+          @click="switchConnectivityView('listView')"
+        >
+          List view
+        </el-button>
+        <el-button
+          :class="activeView === 'graphView' ? 'button' : 'el-button-secondary'"
+          @click="switchConnectivityView('graphView')"
+        >
+          Graph view
+        </el-button>
+      </div>
+    </div>
+
+    <div class="content-container" v-if="activeView === 'listView'">
       {{ entry.paths }}
       <div v-if="entry.origins && entry.origins.length > 0" class="block">
         <div class="attribute-title-container">
@@ -81,11 +104,14 @@
         <div
           v-for="(origin, i) in entry.origins"
           class="attribute-content"
+          :class="{'active': origin === selectedConnectivity}"
           :origin-item-label="origin"
           :key="origin"
+          @mouseenter="toggleConnectivityTooltip(origin, true)"
+          @mouseleave="toggleConnectivityTooltip(origin, false)"
+          @click="selectConnectivity(origin)"
         >
           {{ capitalise(origin) }}
-          <div v-if="i != entry.origins.length - 1" class="seperator"></div>
         </div>
         <el-button
           v-show="
@@ -109,14 +135,14 @@
         <div
           v-for="(component, i) in entry.components"
           class="attribute-content"
+          :class="{'active': component === selectedConnectivity}"
           :component-item-label="component"
           :key="component"
+          @mouseenter="toggleConnectivityTooltip(component, true)"
+          @mouseleave="toggleConnectivityTooltip(component, false)"
+          @click="selectConnectivity(component)"
         >
           {{ capitalise(component) }}
-          <div
-            v-if="i != entry.components.length - 1"
-            class="seperator"
-          ></div>
         </div>
       </div>
       <div
@@ -142,14 +168,14 @@
         <div
           v-for="(destination, i) in entry.destinations"
           class="attribute-content"
+          :class="{'active': destination === selectedConnectivity}"
           :destination-item-label="destination"
           :key="destination"
+          @mouseenter="toggleConnectivityTooltip(destination, true)"
+          @mouseleave="toggleConnectivityTooltip(destination, false)"
+          @click="selectConnectivity(destination)"
         >
           {{ capitalise(destination) }}
-          <div
-            v-if="i != entry.destinations.length - 1"
-            class="seperator"
-          ></div>
         </div>
         <el-button
           v-show="
@@ -163,18 +189,31 @@
           Explore destination data
         </el-button>
       </div>
-
-      <el-button
+      <div
         v-show="
           entry.componentsWithDatasets &&
           entry.componentsWithDatasets.length > 0 &&
           shouldShowExploreButton(entry.componentsWithDatasets)
         "
-        class="button"
-        @click="openAll"
+        class="block"
       >
-        Search for data on components
-      </el-button>
+        <el-button
+          class="button"
+          @click="openAll"
+        >
+          Search for data on components
+        </el-button>
+      </div>
+    </div>
+
+    <div class="content-container" v-if="activeView === 'graphView'">
+      <connectivity-graph
+        :entry="entry.featureId[0]"
+        :mapServer="envVars.FLATMAPAPI_LOCATION"
+        :selectedConnectivityData="selectedConnectivityData"
+        @tap-node="onTapNode"
+        ref="connectivityGraphRef"
+      />
     </div>
   </div>
 </template>
@@ -193,7 +232,7 @@ import {
 } from 'element-plus'
 import ExternalResourceCard from './ExternalResourceCard.vue'
 import EventBus from './EventBus.js'
-import { CopyToClipboard } from '@abi-software/map-utilities';
+import { CopyToClipboard, ConnectivityGraph } from '@abi-software/map-utilities';
 import '@abi-software/map-utilities/dist/style.css';
 
 const titleCase = (str) => {
@@ -218,6 +257,7 @@ export default {
     ElIconWarning,
     ExternalResourceCard,
     CopyToClipboard,
+    ConnectivityGraph,
   },
   props: {
     entry: {
@@ -233,6 +273,10 @@ export default {
         featuresAlert: undefined,
       }),
     },
+    envVars: {
+      type: Object,
+      default: () => {},
+    },
     availableAnatomyFacets: {
       type: Array,
       default: () => [],
@@ -244,6 +288,7 @@ export default {
       activeSpecies: undefined,
       pubmedSearchUrl: '',
       loading: false,
+      activeView: 'listView',
       facetList: [],
       showToolip: false,
       showDetails: false,
@@ -253,6 +298,8 @@ export default {
       },
       componentsWithDatasets: [],
       uberons: [{ id: undefined, name: undefined }],
+      selectedConnectivity: '',
+      selectedConnectivityData: [],
     }
   },
   watch: {
@@ -352,6 +399,29 @@ export default {
       // connected to flatmapvuer > moveMap(featureIds) function
       this.$emit('show-connectivity', featureIds);
     },
+    switchConnectivityView: function (val) {
+      this.activeView = val;
+
+      if (val === 'graphView') {
+        const connectivityGraphRef = this.$refs.connectivityGraphRef;
+        if (connectivityGraphRef && connectivityGraphRef.$el) {
+          connectivityGraphRef.$el.scrollIntoView({
+            behavior: 'smooth',
+          });
+        }
+      }
+    },
+    onTapNode: function (data) {
+      // save selected state for list view
+      const name = data.map(t => t.label).join(', ');
+      this.selectedConnectivity = name;
+      this.toggleConnectivityTooltip(name, true);
+
+      /**
+       * This event is triggered by connectivity-graph's `tap-node` event.
+       */
+      this.$emit('connectivity-component-click', data);
+    },
     getUpdateCopyContent: function () {
       if (!this.entry) {
         return '';
@@ -446,6 +516,58 @@ export default {
 
       return contentArray.join('\n\n<br>');
     },
+    toggleConnectivityTooltip: function (name, option) {
+      // if there has selected item
+      if (!option && this.selectedConnectivity) {
+        name = this.selectedConnectivity;
+        option = true;
+      }
+
+      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) {
+        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
+            });
+          }
+        });
+      }
+
+      // saved state for graph view
+      this.selectedConnectivityData = data;
+      this.$emit('connectivity-component-click', data);
+    },
+    selectConnectivity: function (name) {
+      // clicking on the same item will unselect it
+      if (this.selectedConnectivity === name) {
+        this.selectedConnectivity = '';
+        this.toggleConnectivityTooltip(name, false);
+      } else {
+        this.selectedConnectivity = name;
+        this.toggleConnectivityTooltip(name, true);
+      }
+    },
+  },
+  mounted: function () {
+    EventBus.on('connectivity-graph-error', (errorInfo) => {
+      const connectivityGraphRef = this.$refs.connectivityGraphRef;
+
+      if (connectivityGraphRef) {
+        connectivityGraphRef.showErrorMessage(errorInfo);
+      }
+    });
   },
 }
 </script>
@@ -458,7 +580,7 @@ export default {
 }
 
 .connectivity-info-title {
-  padding: 1rem;
+  padding: 0;
   display: flex;
   flex-direction: row;
   justify-content: space-between;
@@ -476,16 +598,8 @@ export default {
   color: $app-primary-color;
 }
 
-.block {
-  margin-bottom: 0.5em;
-
-  .main > &:first-of-type {
-    margin-right: 1em;
-  }
-}
-
-.pub {
-  width: 16rem;
+.block + .block {
+  margin-top: 0.5em;
 }
 
 .button-circle {
@@ -547,12 +661,6 @@ export default {
   }
 }
 
-.seperator {
-  width: 90%;
-  height: 1px;
-  background-color: #bfbec2;
-}
-
 .hide {
   color: $app-primary-color;
   cursor: pointer;
@@ -585,6 +693,10 @@ export default {
   height: 100%;
   border-left: 1px solid var(--el-border-color);
   border-top: 1px solid var(--el-border-color);
+  display: flex;
+  flex-direction: column;
+  gap: 1.75rem;
+  padding: 1rem;
 }
 
 .attribute-title-container {
@@ -600,7 +712,39 @@ export default {
 
 .attribute-content {
   font-size: 14px;
-  font-weight: 500;
+  transition: color 0.25s ease;
+  position: relative;
+  cursor: pointer;
+
+  &.active,
+  &:hover {
+    font-weight: 500;
+    color: $app-primary-color;
+  }
+
+  &.active {
+    font-weight: 600;
+
+    &::after {
+      content: "📌";
+      display: inline-block;
+      width: 1em;
+      font-size: 0.75em;
+      padding-left: 4px;
+    }
+  }
+
+  + .attribute-content {
+    &::before {
+      content: "";
+      width: 90%;
+      height: 1px;
+      background-color: var(--el-border-color);
+      position: absolute;
+      top: 0;
+      left: 0;
+    }
+  }
 
   &:last-of-type {
     margin-bottom: 0.5em;
@@ -627,16 +771,59 @@ export default {
   font-size: 14px !important;
   background-color: $app-primary-color;
   color: #fff;
+
+  &:hover {
+    color: #fff !important;
+    background-color: #ac76c5 !important;
+    border: 1px solid #ac76c5 !important;
+  }
+
   & + .button {
     margin-top: 10px !important;
   }
+}
+
+.el-button-secondary {
+  border-color: transparent !important;
+  background-color: transparent !important;
+  color: inherit !important;
+
   &:hover {
-    color: #fff !important;
-    background: #ac76c5 !important;
-    border: 1px solid #ac76c5 !important;
+    color: $app-primary-color !important;
+    border-color: $app-primary-color !important;
+    background-color: #f9f2fc !important;
   }
 }
 
+.buttons-row {
+  text-align: right;
+
+  .button {
+    cursor: default;
+    border-color: transparent;
+
+    &:hover {
+      background-color: $app-primary-color !important;
+      border-color: transparent !important;
+    }
+  }
+
+  .el-button + .el-button {
+    margin-top: 0 !important;
+    margin-left: 10px !important;
+  }
+}
+
+.population-display {
+  display: flex;
+  flex: 1 1 auto !important;
+  flex-direction: row !important;
+  align-items: center;
+  justify-content: space-between;
+  border-bottom: 1px solid $app-primary-color;
+  padding-bottom: 0.5rem !important;
+}
+
 .tooltip-container {
   &::after,
   &::before {
@@ -696,39 +883,18 @@ export default {
 
 .content-container {
   flex: 1 1 100%;
-  padding: 1rem;
+  padding: 0;
   box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
 
-  .block {
-    padding-top: 0.5em;
-
-    + .block {
-      margin-top: 1rem;
-    }
-  }
-
-  .connectivity-info-title ~ & {
-    padding-top: 0;
+  > div,
+  > .block + .block {
+    margin: 0;
   }
 }
 
-.scrollbar::-webkit-scrollbar-track {
-  border-radius: 10px;
-  background-color: #f5f5f5;
-}
-
-.scrollbar::-webkit-scrollbar {
-  width: 12px;
-  right: -12px;
-  background-color: #f5f5f5;
-}
-
-.scrollbar::-webkit-scrollbar-thumb {
-  border-radius: 4px;
-  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.06);
-  background-color: #979797;
-}
-
 /* Fix for chrome bug where under triangle pops up above one on top of it  */
 .selector:not(*:root),
 .tooltip-container::after {

package/src/components/SideBar.vue

@@ -30,13 +30,15 @@
           />
           <template v-for="tab in tabs" key="tab.id">
             <!-- Connectivity Info -->
-            <template v-if="tab.type === 'connectivity'">
+            <template v-if="tab.type === 'connectivity' && connectivityInfo">
               <connectivity-info
                 :entry="connectivityInfo"
                 :availableAnatomyFacets="availableAnatomyFacets"
-                v-show="tab.id === activeTabId"
+                v-if="tab.id === activeTabId"
+                :envVars="envVars"
                 :ref="'connectivityTab_' + tab.id"
                 @show-connectivity="showConnectivity"
+                @connectivity-component-click="onConnectivityComponentClick"
               />
             </template>
             <template v-else-if="tab.type === 'annotation'">
@@ -180,6 +182,13 @@ export default {
     showConnectivity: function (featureIds) {
       this.$emit('show-connectivity', featureIds);
     },
+    /**
+     * This function is triggered after a connectivity component is clicked.
+     * @arg data
+     */
+    onConnectivityComponentClick: function (data) {
+      this.$emit('connectivity-component-click', data);
+    },
     /**
      * This event is emitted when the search filters are changed.
      * @arg `obj` {data, id}
@@ -291,6 +300,13 @@ export default {
     tabClose: function (id) {
       this.$emit('tab-close', id);
     },
+    /**
+     * To receive error message for connectivity graph
+     * @param {String} errorMessage
+     */
+    updateConnectivityGraphError: function (errorInfo) {
+      EventBus.emit('connectivity-graph-error', errorInfo);
+    },
   },
   computed: {
     activeTabs: function() {

package/src/components/Tabs.vue

@@ -16,7 +16,7 @@
         </div>
       </div>
       <el-button
-        v-if="title.id !== 1"
+        v-if="title.id > 1"
         @click="tabClose(title.id)"
         class="button-tab-close"
         aria-label="Close"