Connectivity Graph

package.json

@@ -39,7 +39,7 @@
   },
   "dependencies": {
     "@abi-software/gallery": "^1.1.2",
-    "@abi-software/map-utilities": "^1.1.2",
+    "@abi-software/map-utilities": "^1.1.3-beta.11",
     "@abi-software/svg-sprite": "^1.0.1",
     "@element-plus/icons-vue": "^2.3.1",
     "algoliasearch": "^4.10.5",

src/App.vue

@@ -26,6 +26,7 @@
       @tabClicked="tabClicked"
       @search-changed="searchChanged($event)"
       @hover-changed="hoverChanged($event)"
+      @connectivity-component-click="onConnectivityComponentClick"
       @actionClick="action"
     />
   </div>
@@ -112,6 +113,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,
@@ -224,6 +226,9 @@ export default {
       let facets = await this.$refs.sideBar.getAlgoliaFacets()
       console.log('Algolia facets:', facets)
     },
+    onConnectivityComponentClick: function(data) {
+      console.log("onConnectivityComponentClick" , data)
+    }
   },
   mounted: function () {
     console.log('mounted app')

src/components.d.ts

@@ -19,6 +19,7 @@ declare module 'vue' {
     ElIconArrowRight: typeof import('@element-plus/icons-vue')['ArrowRight']
     ElIconLocation: typeof import('@element-plus/icons-vue')['Location']
     ElIconWarning: typeof import('@element-plus/icons-vue')['Warning']
+    ElIconWarnTriangleFilled: typeof import('@element-plus/icons-vue')['WarnTriangleFilled']
     ElInput: typeof import('element-plus/es')['ElInput']
     ElOption: typeof import('element-plus/es')['ElOption']
     ElPagination: typeof import('element-plus/es')['ElPagination']

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">
@@ -163,18 +186,30 @@
           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"
+        @tap-node="onTapNode"
+        ref="connectivityGraphRef"
+      />
     </div>
   </div>
 </template>
@@ -193,7 +228,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 +253,7 @@ export default {
     ElIconWarning,
     ExternalResourceCard,
     CopyToClipboard,
+    ConnectivityGraph,
   },
   props: {
     entry: {
@@ -233,6 +269,10 @@ export default {
         featuresAlert: undefined,
       }),
     },
+    envVars: {
+      type: Object,
+      default: () => {},
+    },
     availableAnatomyFacets: {
       type: Array,
       default: () => [],
@@ -244,6 +284,7 @@ export default {
       activeSpecies: undefined,
       pubmedSearchUrl: '',
       loading: false,
+      activeView: 'listView',
       facetList: [],
       showToolip: false,
       showDetails: false,
@@ -352,6 +393,24 @@ 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) {
+      /**
+       * This event is triggered by connectivity-graph's `tap-node` event.
+       */
+      this.$emit('connectivity-component-click', data);
+    },
     getUpdateCopyContent: function () {
       if (!this.entry) {
         return '';
@@ -447,6 +506,15 @@ export default {
       return contentArray.join('\n\n<br>');
     },
   },
+  mounted: function () {
+    EventBus.on('connectivity-graph-error', (errorMessage) => {
+      const connectivityGraphRef = this.$refs.connectivityGraphRef;
+
+      if (connectivityGraphRef) {
+        connectivityGraphRef.showErrorMessage(errorMessage);
+      }
+    });
+  },
 }
 </script>
 
@@ -458,7 +526,7 @@ export default {
 }
 
 .connectivity-info-title {
-  padding: 1rem;
+  padding: 0;
   display: flex;
   flex-direction: row;
   justify-content: space-between;
@@ -476,16 +544,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 {
@@ -585,6 +645,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 {
@@ -627,14 +691,50 @@ export default {
   font-size: 14px !important;
   background-color: $app-primary-color;
   color: #fff;
-  & + .button {
-    margin-top: 10px !important;
-  }
+
   &:hover {
     color: #fff !important;
-    background: #ac76c5 !important;
+    background-color: #ac76c5 !important;
     border: 1px solid #ac76c5 !important;
   }
+
+  & + .button {
+    margin-top: 10px !important;
+  }
+}
+
+.el-button-secondary {
+  border-color: transparent;
+  background-color: transparent;
+}
+
+.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 {
@@ -696,39 +796,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 {