From a266df6e7fee8dfc5a99e9b095819cba79c84377 Mon Sep 17 00:00:00 2001
From: akhuoa <aung.kyaw.hein@auckland.ac.nz>
Date: Tue, 15 Oct 2024 11:23:08 +1300
Subject: [PATCH 01/20] Add connectivity graph in connnectivity tab

---
 src/components.d.ts                  |  2 ++
 src/components/ConnectivityGraph.vue | 52 ++++++++++++++++++++++++++++
 src/components/ConnectivityInfo.vue  | 35 ++++++++++++++++++-
 src/components/SideBar.vue           |  4 +--
 src/components/Tabs.vue              |  2 +-
 5 files changed, 91 insertions(+), 4 deletions(-)
 create mode 100644 src/components/ConnectivityGraph.vue

diff --git a/src/components.d.ts b/src/components.d.ts
index ba5eedf9..d74b9dcd 100644
--- a/src/components.d.ts
+++ b/src/components.d.ts
@@ -8,6 +8,7 @@ export {}
 declare module 'vue' {
   export interface GlobalComponents {
     BadgesGroup: typeof import('./components/BadgesGroup.vue')['default']
+    ConnectivityGraph: typeof import('./components/ConnectivityGraph.vue')['default']
     ConnectivityInfo: typeof import('./components/ConnectivityInfo.vue')['default']
     DatasetCard: typeof import('./components/DatasetCard.vue')['default']
     ElButton: typeof import('element-plus/es')['ElButton']
@@ -19,6 +20,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']
diff --git a/src/components/ConnectivityGraph.vue b/src/components/ConnectivityGraph.vue
new file mode 100644
index 00000000..40de7af5
--- /dev/null
+++ b/src/components/ConnectivityGraph.vue
@@ -0,0 +1,52 @@
+<template>
+  <div class="connectivity-graph">
+    <iframe
+      ref="connectivityGraphFrame"
+      src="https://mapcore-demo.org/curation/flatmap/connectivity-graph/"
+      width="100%"
+      height="100%"
+    />
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'ConnectivityGraph',
+  props: {
+    /**
+     * Entity to load its connectivity graph.
+     */
+    entry: {
+      type: String,
+      default: '',
+    },
+  },
+  mounted() {
+    this.loadConnectivityGraph();
+  },
+  methods: {
+    loadConnectivityGraph: function () {
+      console.log('Connnectivity Graph Component', this.entry)
+      const iframeRef = this.$refs.connectivityGraphFrame;
+      if (iframeRef) {
+        iframeRef.onload = function() {
+          console.log('iframeRef.contentWindow', iframeRef.contentWindow)
+          iframeRef.contentWindow.postMessage({ backgroundColor: 'lightblue' }, iframeRef.src);
+        };
+      }
+    },
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+  .connectivity-graph {
+    width: 100%;
+    height: 100%;
+
+    iframe {
+      width: 100%;
+      border: 0 none;
+    }
+  }
+</style>
diff --git a/src/components/ConnectivityInfo.vue b/src/components/ConnectivityInfo.vue
index 62ce1e15..8b3ab907 100644
--- a/src/components/ConnectivityInfo.vue
+++ b/src/components/ConnectivityInfo.vue
@@ -35,7 +35,17 @@
         <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 class="block">
+          <el-button
+            class="button"
+            @click="goToConnectivityGraph()"
+          >
+            Show connectivity graph
+          </el-button>
+        </div>
       </div>
       <div class="title-buttons">
         <el-popover
@@ -60,6 +70,7 @@
     </div>
     <div class="content-container scrollbar">
       {{ entry.paths }}
+      <div class="content-block">
       <div v-if="entry.origins && entry.origins.length > 0" class="block">
         <div class="attribute-title-container">
           <span class="attribute-title">Origin</span>
@@ -175,6 +186,10 @@
       >
         Search for data on components
       </el-button>
+      </div>
+      <div class="content-block content-block-graph">
+        <connectivity-graph :entry="entry.featureId[0]" ref="connectivityGraphRef" />
+      </div>
     </div>
   </div>
 </template>
@@ -195,6 +210,7 @@ import ExternalResourceCard from './ExternalResourceCard.vue'
 import EventBus from './EventBus.js'
 import { CopyToClipboard } from '@abi-software/map-utilities';
 import '@abi-software/map-utilities/dist/style.css';
+import ConnectivityGraph from './ConnectivityGraph.vue';
 
 const titleCase = (str) => {
   return str.replace(/\w\S*/g, (t) => {
@@ -218,6 +234,7 @@ export default {
     ElIconWarning,
     ExternalResourceCard,
     CopyToClipboard,
+    ConnectivityGraph,
   },
   props: {
     entry: {
@@ -352,6 +369,14 @@ export default {
       // connected to flatmapvuer > moveMap(featureIds) function
       this.$emit('show-connectivity', featureIds);
     },
+    goToConnectivityGraph: function () {
+      const connectivityGraphRef = this.$refs.connectivityGraphRef;
+      if (connectivityGraphRef && connectivityGraphRef.$el) {
+        connectivityGraphRef.$el.scrollIntoView({
+          behavior: 'smooth',
+        });
+      }
+    },
     getUpdateCopyContent: function () {
       if (!this.entry) {
         return '';
@@ -698,6 +723,14 @@ export default {
   flex: 1 1 100%;
   padding: 1rem;
   box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+
+  .content-block-graph {
+    height: 600px;
+    background-color: white;
+  }
 
   .block {
     padding-top: 0.5em;
diff --git a/src/components/SideBar.vue b/src/components/SideBar.vue
index dd8a9349..55111d9b 100644
--- a/src/components/SideBar.vue
+++ b/src/components/SideBar.vue
@@ -30,11 +30,11 @@
           />
           <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"
                 :ref="'connectivityTab_' + tab.id"
                 @show-connectivity="showConnectivity"
               />
diff --git a/src/components/Tabs.vue b/src/components/Tabs.vue
index 676a1921..0e08793c 100644
--- a/src/components/Tabs.vue
+++ b/src/components/Tabs.vue
@@ -16,7 +16,7 @@
         </div>
       </div>
       <el-button
-        v-if="title.id === 2"
+        v-if="title.id > 1"
         @click="tabClose(title.id)"
         class="button-tab-close"
         aria-label="Close"

From b326e0902740a246a11fb34d5ce468739b010244 Mon Sep 17 00:00:00 2001
From: akhuoa <aung.kyaw.hein@auckland.ac.nz>
Date: Tue, 15 Oct 2024 15:32:25 +1300
Subject: [PATCH 02/20] Add ConnectivityGraph component from map-utilities

---
 src/App.vue                          |  1 +
 src/components.d.ts                  |  1 -
 src/components/ConnectivityGraph.vue | 52 ----------------------------
 src/components/ConnectivityInfo.vue  | 13 +++++--
 src/components/SideBar.vue           |  1 +
 5 files changed, 12 insertions(+), 56 deletions(-)
 delete mode 100644 src/components/ConnectivityGraph.vue

diff --git a/src/App.vue b/src/App.vue
index 1258c40c..07405d30 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -112,6 +112,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,
diff --git a/src/components.d.ts b/src/components.d.ts
index d74b9dcd..ca6e0240 100644
--- a/src/components.d.ts
+++ b/src/components.d.ts
@@ -8,7 +8,6 @@ export {}
 declare module 'vue' {
   export interface GlobalComponents {
     BadgesGroup: typeof import('./components/BadgesGroup.vue')['default']
-    ConnectivityGraph: typeof import('./components/ConnectivityGraph.vue')['default']
     ConnectivityInfo: typeof import('./components/ConnectivityInfo.vue')['default']
     DatasetCard: typeof import('./components/DatasetCard.vue')['default']
     ElButton: typeof import('element-plus/es')['ElButton']
diff --git a/src/components/ConnectivityGraph.vue b/src/components/ConnectivityGraph.vue
deleted file mode 100644
index 40de7af5..00000000
--- a/src/components/ConnectivityGraph.vue
+++ /dev/null
@@ -1,52 +0,0 @@
-<template>
-  <div class="connectivity-graph">
-    <iframe
-      ref="connectivityGraphFrame"
-      src="https://mapcore-demo.org/curation/flatmap/connectivity-graph/"
-      width="100%"
-      height="100%"
-    />
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'ConnectivityGraph',
-  props: {
-    /**
-     * Entity to load its connectivity graph.
-     */
-    entry: {
-      type: String,
-      default: '',
-    },
-  },
-  mounted() {
-    this.loadConnectivityGraph();
-  },
-  methods: {
-    loadConnectivityGraph: function () {
-      console.log('Connnectivity Graph Component', this.entry)
-      const iframeRef = this.$refs.connectivityGraphFrame;
-      if (iframeRef) {
-        iframeRef.onload = function() {
-          console.log('iframeRef.contentWindow', iframeRef.contentWindow)
-          iframeRef.contentWindow.postMessage({ backgroundColor: 'lightblue' }, iframeRef.src);
-        };
-      }
-    },
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-  .connectivity-graph {
-    width: 100%;
-    height: 100%;
-
-    iframe {
-      width: 100%;
-      border: 0 none;
-    }
-  }
-</style>
diff --git a/src/components/ConnectivityInfo.vue b/src/components/ConnectivityInfo.vue
index 8b3ab907..b25afd54 100644
--- a/src/components/ConnectivityInfo.vue
+++ b/src/components/ConnectivityInfo.vue
@@ -188,7 +188,11 @@
       </el-button>
       </div>
       <div class="content-block content-block-graph">
-        <connectivity-graph :entry="entry.featureId[0]" ref="connectivityGraphRef" />
+        <connectivity-graph
+          :entry="entry.featureId[0]"
+          :mapServer="envVars.FLATMAPAPI_LOCATION"
+          ref="connectivityGraphRef"
+        />
       </div>
     </div>
   </div>
@@ -208,9 +212,8 @@ 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';
-import ConnectivityGraph from './ConnectivityGraph.vue';
 
 const titleCase = (str) => {
   return str.replace(/\w\S*/g, (t) => {
@@ -250,6 +253,10 @@ export default {
         featuresAlert: undefined,
       }),
     },
+    envVars: {
+      type: Object,
+      default: () => {},
+    },
     availableAnatomyFacets: {
       type: Array,
       default: () => [],
diff --git a/src/components/SideBar.vue b/src/components/SideBar.vue
index 55111d9b..c86cde06 100644
--- a/src/components/SideBar.vue
+++ b/src/components/SideBar.vue
@@ -35,6 +35,7 @@
                 :entry="connectivityInfo"
                 :availableAnatomyFacets="availableAnatomyFacets"
                 v-if="tab.id === activeTabId"
+                :envVars="envVars"
                 :ref="'connectivityTab_' + tab.id"
                 @show-connectivity="showConnectivity"
               />

From de83834b52305d6eab7d62ba9584e05cf4185335 Mon Sep 17 00:00:00 2001
From: akhuoa <aung.kyaw.hein@auckland.ac.nz>
Date: Tue, 15 Oct 2024 16:50:02 +1300
Subject: [PATCH 03/20] Update connectivity info styles

---
 src/components/ConnectivityInfo.vue | 74 ++++++++---------------------
 1 file changed, 21 insertions(+), 53 deletions(-)

diff --git a/src/components/ConnectivityInfo.vue b/src/components/ConnectivityInfo.vue
index b25afd54..22a7c936 100644
--- a/src/components/ConnectivityInfo.vue
+++ b/src/components/ConnectivityInfo.vue
@@ -68,9 +68,8 @@
         <CopyToClipboard :content="updatedCopyContent" />
       </div>
     </div>
-    <div class="content-container scrollbar">
+    <div class="content-container">
       {{ entry.paths }}
-      <div class="content-block">
       <div v-if="entry.origins && entry.origins.length > 0" class="block">
         <div class="attribute-title-container">
           <span class="attribute-title">Origin</span>
@@ -186,14 +185,16 @@
       >
         Search for data on components
       </el-button>
+    </div>
+    <div class="content-container">
+      <div class="attribute-title-container">
+        <span class="attribute-title">Connectivity Graph</span>
       </div>
-      <div class="content-block content-block-graph">
-        <connectivity-graph
-          :entry="entry.featureId[0]"
-          :mapServer="envVars.FLATMAPAPI_LOCATION"
-          ref="connectivityGraphRef"
-        />
-      </div>
+      <connectivity-graph
+        :entry="entry.featureId[0]"
+        :mapServer="envVars.FLATMAPAPI_LOCATION"
+        ref="connectivityGraphRef"
+      />
     </div>
   </div>
 </template>
@@ -490,7 +491,7 @@ export default {
 }
 
 .connectivity-info-title {
-  padding: 1rem;
+  padding: 0;
   display: flex;
   flex-direction: row;
   justify-content: space-between;
@@ -508,16 +509,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 {
@@ -617,6 +610,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 {
@@ -728,45 +725,16 @@ export default {
 
 .content-container {
   flex: 1 1 100%;
-  padding: 1rem;
+  padding: 0;
   box-sizing: border-box;
   display: flex;
   flex-direction: column;
   gap: 1rem;
 
-  .content-block-graph {
-    height: 600px;
-    background-color: white;
+  > div,
+  > .block + .block {
+    margin: 0;
   }
-
-  .block {
-    padding-top: 0.5em;
-
-    + .block {
-      margin-top: 1rem;
-    }
-  }
-
-  .connectivity-info-title ~ & {
-    padding-top: 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  */

From beb2f50a8accd3219a3d59980f4ce1bd40f2fa3a Mon Sep 17 00:00:00 2001
From: akhuoa <aung.kyaw.hein@auckland.ac.nz>
Date: Tue, 15 Oct 2024 17:16:01 +1300
Subject: [PATCH 04/20] Update map-utilities for connectivity-graph

---
 package-lock.json | 17 +++++++++++++----
 package.json      |  2 +-
 2 files changed, 14 insertions(+), 5 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 391bb4f2..eb575f45 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,7 +9,7 @@
       "version": "2.4.1",
       "dependencies": {
         "@abi-software/gallery": "^1.1.2",
-        "@abi-software/map-utilities": "^1.1.2",
+        "@abi-software/map-utilities": "^1.1.3-beta.0",
         "@abi-software/svg-sprite": "^1.0.1",
         "@element-plus/icons-vue": "^2.3.1",
         "algoliasearch": "^4.10.5",
@@ -65,12 +65,13 @@
       }
     },
     "node_modules/@abi-software/map-utilities": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/@abi-software/map-utilities/-/map-utilities-1.1.2.tgz",
-      "integrity": "sha512-NMERIqSq6pVwy7Daq+Uip8Cm1UE2KEJoquOqVXACrMoTDHV77LPbWAtawn3f7De5HK69oqLwZ+wbnFLy5aisrQ==",
+      "version": "1.1.3-beta.0",
+      "resolved": "https://registry.npmjs.org/@abi-software/map-utilities/-/map-utilities-1.1.3-beta.0.tgz",
+      "integrity": "sha512-Bc7Bv2lbDkzn/oe7bxj5I3VUhelrqusQsmyHWf4wJqbnajJp6q5oCh7CTvIwL6eolFRHTdUiPIK45Xhnpmv2Dg==",
       "dependencies": {
         "@abi-software/svg-sprite": "^1.0.1",
         "@element-plus/icons-vue": "^2.3.1",
+        "cytoscape": "^3.30.2",
         "element-plus": "2.8.4",
         "mitt": "^3.0.1",
         "vue": "^3.4.21"
@@ -2734,6 +2735,14 @@
         "url": "https://github.com/chalk/supports-color?sponsor=1"
       }
     },
+    "node_modules/cytoscape": {
+      "version": "3.30.2",
+      "resolved": "https://registry.npmjs.org/cytoscape/-/cytoscape-3.30.2.tgz",
+      "integrity": "sha512-oICxQsjW8uSaRmn4UK/jkczKOqTrVqt5/1WL0POiJUT2EKNc9STM4hYFHv917yu55aTBMFNRzymlJhVAiWPCxw==",
+      "engines": {
+        "node": ">=0.10"
+      }
+    },
     "node_modules/dashdash": {
       "version": "1.14.1",
       "resolved": "https://registry.npmjs.org/dashdash/-/dashdash-1.14.1.tgz",
diff --git a/package.json b/package.json
index ed218a75..5bd4d6e1 100644
--- a/package.json
+++ b/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.0",
     "@abi-software/svg-sprite": "^1.0.1",
     "@element-plus/icons-vue": "^2.3.1",
     "algoliasearch": "^4.10.5",

From ebf07a46f984d0257f623a5c74f74f6266fcfa46 Mon Sep 17 00:00:00 2001
From: akhuoa <aung.kyaw.hein@auckland.ac.nz>
Date: Tue, 15 Oct 2024 17:33:44 +1300
Subject: [PATCH 05/20] Update connnectivity info button

---
 src/components/ConnectivityInfo.vue | 15 +++++++++------
 1 file changed, 9 insertions(+), 6 deletions(-)

diff --git a/src/components/ConnectivityInfo.vue b/src/components/ConnectivityInfo.vue
index 22a7c936..3e282482 100644
--- a/src/components/ConnectivityInfo.vue
+++ b/src/components/ConnectivityInfo.vue
@@ -173,18 +173,21 @@
           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">
       <div class="attribute-title-container">

From e3b4c1c01090a0fee2510b9ebb6b91bc0b5ce0d9 Mon Sep 17 00:00:00 2001
From: akhuoa <aung.kyaw.hein@auckland.ac.nz>
Date: Thu, 17 Oct 2024 16:29:52 +1300
Subject: [PATCH 06/20] Update map utilities for connectivity graph

---
 package-lock.json | 8 ++++----
 package.json      | 2 +-
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index eb575f45..427597a8 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,7 +9,7 @@
       "version": "2.4.1",
       "dependencies": {
         "@abi-software/gallery": "^1.1.2",
-        "@abi-software/map-utilities": "^1.1.3-beta.0",
+        "@abi-software/map-utilities": "^1.1.3-beta.3",
         "@abi-software/svg-sprite": "^1.0.1",
         "@element-plus/icons-vue": "^2.3.1",
         "algoliasearch": "^4.10.5",
@@ -65,9 +65,9 @@
       }
     },
     "node_modules/@abi-software/map-utilities": {
-      "version": "1.1.3-beta.0",
-      "resolved": "https://registry.npmjs.org/@abi-software/map-utilities/-/map-utilities-1.1.3-beta.0.tgz",
-      "integrity": "sha512-Bc7Bv2lbDkzn/oe7bxj5I3VUhelrqusQsmyHWf4wJqbnajJp6q5oCh7CTvIwL6eolFRHTdUiPIK45Xhnpmv2Dg==",
+      "version": "1.1.3-beta.3",
+      "resolved": "https://registry.npmjs.org/@abi-software/map-utilities/-/map-utilities-1.1.3-beta.3.tgz",
+      "integrity": "sha512-pGLDyB2SeIRwXxQWRSzxHOpRE4L00zmnP89YN7yESGuYJA3zWz0NtScE1MHwGo7+s1mIim8n7sS9gm5vAwRNTQ==",
       "dependencies": {
         "@abi-software/svg-sprite": "^1.0.1",
         "@element-plus/icons-vue": "^2.3.1",
diff --git a/package.json b/package.json
index 5bd4d6e1..60f6edf0 100644
--- a/package.json
+++ b/package.json
@@ -39,7 +39,7 @@
   },
   "dependencies": {
     "@abi-software/gallery": "^1.1.2",
-    "@abi-software/map-utilities": "^1.1.3-beta.0",
+    "@abi-software/map-utilities": "^1.1.3-beta.3",
     "@abi-software/svg-sprite": "^1.0.1",
     "@element-plus/icons-vue": "^2.3.1",
     "algoliasearch": "^4.10.5",

From c8f37f5af57fa4e083fe430260195f9278112dbd Mon Sep 17 00:00:00 2001
From: akhuoa <aung.kyaw.hein@auckland.ac.nz>
Date: Fri, 18 Oct 2024 11:42:03 +1300
Subject: [PATCH 07/20] Update connectivity graph

---
 package-lock.json | 8 ++++----
 package.json      | 2 +-
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 427597a8..62d917b3 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,7 +9,7 @@
       "version": "2.4.1",
       "dependencies": {
         "@abi-software/gallery": "^1.1.2",
-        "@abi-software/map-utilities": "^1.1.3-beta.3",
+        "@abi-software/map-utilities": "^1.1.3-beta.4",
         "@abi-software/svg-sprite": "^1.0.1",
         "@element-plus/icons-vue": "^2.3.1",
         "algoliasearch": "^4.10.5",
@@ -65,9 +65,9 @@
       }
     },
     "node_modules/@abi-software/map-utilities": {
-      "version": "1.1.3-beta.3",
-      "resolved": "https://registry.npmjs.org/@abi-software/map-utilities/-/map-utilities-1.1.3-beta.3.tgz",
-      "integrity": "sha512-pGLDyB2SeIRwXxQWRSzxHOpRE4L00zmnP89YN7yESGuYJA3zWz0NtScE1MHwGo7+s1mIim8n7sS9gm5vAwRNTQ==",
+      "version": "1.1.3-beta.4",
+      "resolved": "https://registry.npmjs.org/@abi-software/map-utilities/-/map-utilities-1.1.3-beta.4.tgz",
+      "integrity": "sha512-NZnoa0gksHr3/4UfmjaSZGAR87swjMw8iZtjGrDGRF6KrljmU9PvbdH6V+OZJLgx7siELpc3+mHyuTkJeWCxEA==",
       "dependencies": {
         "@abi-software/svg-sprite": "^1.0.1",
         "@element-plus/icons-vue": "^2.3.1",
diff --git a/package.json b/package.json
index 60f6edf0..3dff1d54 100644
--- a/package.json
+++ b/package.json
@@ -39,7 +39,7 @@
   },
   "dependencies": {
     "@abi-software/gallery": "^1.1.2",
-    "@abi-software/map-utilities": "^1.1.3-beta.3",
+    "@abi-software/map-utilities": "^1.1.3-beta.4",
     "@abi-software/svg-sprite": "^1.0.1",
     "@element-plus/icons-vue": "^2.3.1",
     "algoliasearch": "^4.10.5",

From 4457f25b0d027705fbe23129775b248475b379df Mon Sep 17 00:00:00 2001
From: akhuoa <aung.kyaw.hein@auckland.ac.nz>
Date: Mon, 21 Oct 2024 16:24:53 +1300
Subject: [PATCH 08/20] Emit connectivity component click event for
 connectivity graph item click

---
 src/components/ConnectivityInfo.vue | 7 +++++++
 src/components/SideBar.vue          | 8 ++++++++
 2 files changed, 15 insertions(+)

diff --git a/src/components/ConnectivityInfo.vue b/src/components/ConnectivityInfo.vue
index 3e282482..8dcd2a91 100644
--- a/src/components/ConnectivityInfo.vue
+++ b/src/components/ConnectivityInfo.vue
@@ -196,6 +196,7 @@
       <connectivity-graph
         :entry="entry.featureId[0]"
         :mapServer="envVars.FLATMAPAPI_LOCATION"
+        @tap-node="onTapNode"
         ref="connectivityGraphRef"
       />
     </div>
@@ -388,6 +389,12 @@ export default {
         });
       }
     },
+    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 '';
diff --git a/src/components/SideBar.vue b/src/components/SideBar.vue
index c86cde06..da79805f 100644
--- a/src/components/SideBar.vue
+++ b/src/components/SideBar.vue
@@ -38,6 +38,7 @@
                 :envVars="envVars"
                 :ref="'connectivityTab_' + tab.id"
                 @show-connectivity="showConnectivity"
+                @connectivity-component-click="onConnectivityComponentClick"
               />
             </template>
             <template v-else>
@@ -155,6 +156,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}

From 53b9f29202c80248fa3e83d41f9a8c63b013c824 Mon Sep 17 00:00:00 2001
From: akhuoa <aung.kyaw.hein@auckland.ac.nz>
Date: Tue, 22 Oct 2024 13:22:55 +1300
Subject: [PATCH 09/20] Update map utilities for connectivity graph update

---
 package-lock.json | 8 ++++----
 package.json      | 2 +-
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 62d917b3..f809d254 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,7 +9,7 @@
       "version": "2.4.1",
       "dependencies": {
         "@abi-software/gallery": "^1.1.2",
-        "@abi-software/map-utilities": "^1.1.3-beta.4",
+        "@abi-software/map-utilities": "^1.1.3-beta.6",
         "@abi-software/svg-sprite": "^1.0.1",
         "@element-plus/icons-vue": "^2.3.1",
         "algoliasearch": "^4.10.5",
@@ -65,9 +65,9 @@
       }
     },
     "node_modules/@abi-software/map-utilities": {
-      "version": "1.1.3-beta.4",
-      "resolved": "https://registry.npmjs.org/@abi-software/map-utilities/-/map-utilities-1.1.3-beta.4.tgz",
-      "integrity": "sha512-NZnoa0gksHr3/4UfmjaSZGAR87swjMw8iZtjGrDGRF6KrljmU9PvbdH6V+OZJLgx7siELpc3+mHyuTkJeWCxEA==",
+      "version": "1.1.3-beta.6",
+      "resolved": "https://registry.npmjs.org/@abi-software/map-utilities/-/map-utilities-1.1.3-beta.6.tgz",
+      "integrity": "sha512-XWPss3rZGfGknoYLLrIfkpAuCB43U9menupS6o//siAo+4NZozY+LpYKw36Ex3jQ5Yn5kSn7poMfKehoz1iUwA==",
       "dependencies": {
         "@abi-software/svg-sprite": "^1.0.1",
         "@element-plus/icons-vue": "^2.3.1",
diff --git a/package.json b/package.json
index 3dff1d54..eef9c4ea 100644
--- a/package.json
+++ b/package.json
@@ -39,7 +39,7 @@
   },
   "dependencies": {
     "@abi-software/gallery": "^1.1.2",
-    "@abi-software/map-utilities": "^1.1.3-beta.4",
+    "@abi-software/map-utilities": "^1.1.3-beta.6",
     "@abi-software/svg-sprite": "^1.0.1",
     "@element-plus/icons-vue": "^2.3.1",
     "algoliasearch": "^4.10.5",

From 5934ac3aa89e1d6511364273f8b996f24b0f15ed Mon Sep 17 00:00:00 2001
From: akhuoa <aung.kyaw.hein@auckland.ac.nz>
Date: Tue, 22 Oct 2024 17:21:01 +1300
Subject: [PATCH 10/20] Update map utilities for connectivity graph update

---
 package-lock.json | 8 ++++----
 package.json      | 2 +-
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index f809d254..aeacc5dc 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,7 +9,7 @@
       "version": "2.4.1",
       "dependencies": {
         "@abi-software/gallery": "^1.1.2",
-        "@abi-software/map-utilities": "^1.1.3-beta.6",
+        "@abi-software/map-utilities": "^1.1.3-beta.7",
         "@abi-software/svg-sprite": "^1.0.1",
         "@element-plus/icons-vue": "^2.3.1",
         "algoliasearch": "^4.10.5",
@@ -65,9 +65,9 @@
       }
     },
     "node_modules/@abi-software/map-utilities": {
-      "version": "1.1.3-beta.6",
-      "resolved": "https://registry.npmjs.org/@abi-software/map-utilities/-/map-utilities-1.1.3-beta.6.tgz",
-      "integrity": "sha512-XWPss3rZGfGknoYLLrIfkpAuCB43U9menupS6o//siAo+4NZozY+LpYKw36Ex3jQ5Yn5kSn7poMfKehoz1iUwA==",
+      "version": "1.1.3-beta.7",
+      "resolved": "https://registry.npmjs.org/@abi-software/map-utilities/-/map-utilities-1.1.3-beta.7.tgz",
+      "integrity": "sha512-Cb3KrAeqgvIVYcTbFCtqsV27omCCUJdJN7TlZBv+ZUHkY53UfSReGM+o6IESV6Y8Kr1BRs7XkO5pEvK4SdNE+Q==",
       "dependencies": {
         "@abi-software/svg-sprite": "^1.0.1",
         "@element-plus/icons-vue": "^2.3.1",
diff --git a/package.json b/package.json
index eef9c4ea..6b020f5c 100644
--- a/package.json
+++ b/package.json
@@ -39,7 +39,7 @@
   },
   "dependencies": {
     "@abi-software/gallery": "^1.1.2",
-    "@abi-software/map-utilities": "^1.1.3-beta.6",
+    "@abi-software/map-utilities": "^1.1.3-beta.7",
     "@abi-software/svg-sprite": "^1.0.1",
     "@element-plus/icons-vue": "^2.3.1",
     "algoliasearch": "^4.10.5",

From ddd6c738e53313e329a9daa2c4ea5568ee7e3947 Mon Sep 17 00:00:00 2001
From: akhuoa <aung.kyaw.hein@auckland.ac.nz>
Date: Wed, 23 Oct 2024 16:34:39 +1300
Subject: [PATCH 11/20] Show connectivity graph error

---
 src/components/ConnectivityInfo.vue | 9 +++++++++
 src/components/SideBar.vue          | 7 +++++++
 2 files changed, 16 insertions(+)

diff --git a/src/components/ConnectivityInfo.vue b/src/components/ConnectivityInfo.vue
index 8dcd2a91..b23a08be 100644
--- a/src/components/ConnectivityInfo.vue
+++ b/src/components/ConnectivityInfo.vue
@@ -490,6 +490,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>
 
diff --git a/src/components/SideBar.vue b/src/components/SideBar.vue
index da79805f..92cf0786 100644
--- a/src/components/SideBar.vue
+++ b/src/components/SideBar.vue
@@ -272,6 +272,13 @@ export default {
     tabClose: function (id) {
       this.$emit('connectivity-info-close');
     },
+    /**
+     * To receive error message for connectivity graph
+     * @param {String} errorMessage
+     */
+    updateConnectivityGraphError: function (errorMessage) {
+      EventBus.emit('connectivity-graph-error', errorMessage);
+    },
   },
   created: function () {
     this.drawerOpen = this.openAtStart

From 1c7b419aec6f4ce96fc35121833ab7458c59e4a3 Mon Sep 17 00:00:00 2001
From: akhuoa <aung.kyaw.hein@auckland.ac.nz>
Date: Wed, 23 Oct 2024 17:02:05 +1300
Subject: [PATCH 12/20] Update map-utilities to show connectivity graph error

---
 package-lock.json | 8 ++++----
 package.json      | 2 +-
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index aeacc5dc..b448d352 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,7 +9,7 @@
       "version": "2.4.1",
       "dependencies": {
         "@abi-software/gallery": "^1.1.2",
-        "@abi-software/map-utilities": "^1.1.3-beta.7",
+        "@abi-software/map-utilities": "^1.1.3-beta.8",
         "@abi-software/svg-sprite": "^1.0.1",
         "@element-plus/icons-vue": "^2.3.1",
         "algoliasearch": "^4.10.5",
@@ -65,9 +65,9 @@
       }
     },
     "node_modules/@abi-software/map-utilities": {
-      "version": "1.1.3-beta.7",
-      "resolved": "https://registry.npmjs.org/@abi-software/map-utilities/-/map-utilities-1.1.3-beta.7.tgz",
-      "integrity": "sha512-Cb3KrAeqgvIVYcTbFCtqsV27omCCUJdJN7TlZBv+ZUHkY53UfSReGM+o6IESV6Y8Kr1BRs7XkO5pEvK4SdNE+Q==",
+      "version": "1.1.3-beta.8",
+      "resolved": "https://registry.npmjs.org/@abi-software/map-utilities/-/map-utilities-1.1.3-beta.8.tgz",
+      "integrity": "sha512-wsSd9OL7vZbbVzif3v5hR3mWz4zyNaslW+DcMIttSWBQuVWkL0J7iS/HBGWWcB21z4GHhO6sfIIy4gdc6sEFMQ==",
       "dependencies": {
         "@abi-software/svg-sprite": "^1.0.1",
         "@element-plus/icons-vue": "^2.3.1",
diff --git a/package.json b/package.json
index 6b020f5c..c449d8da 100644
--- a/package.json
+++ b/package.json
@@ -39,7 +39,7 @@
   },
   "dependencies": {
     "@abi-software/gallery": "^1.1.2",
-    "@abi-software/map-utilities": "^1.1.3-beta.7",
+    "@abi-software/map-utilities": "^1.1.3-beta.8",
     "@abi-software/svg-sprite": "^1.0.1",
     "@element-plus/icons-vue": "^2.3.1",
     "algoliasearch": "^4.10.5",

From b88373bd4195062054aac2e2a0d070ea6cebec6c Mon Sep 17 00:00:00 2001
From: akhuoa <aung.kyaw.hein@auckland.ac.nz>
Date: Thu, 24 Oct 2024 13:55:05 +1300
Subject: [PATCH 13/20] Update map utilities for connectivity graph updates

---
 package-lock.json | 8 ++++----
 package.json      | 2 +-
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index b448d352..4bc2c9cc 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,7 +9,7 @@
       "version": "2.4.1",
       "dependencies": {
         "@abi-software/gallery": "^1.1.2",
-        "@abi-software/map-utilities": "^1.1.3-beta.8",
+        "@abi-software/map-utilities": "^1.1.3-beta.9",
         "@abi-software/svg-sprite": "^1.0.1",
         "@element-plus/icons-vue": "^2.3.1",
         "algoliasearch": "^4.10.5",
@@ -65,9 +65,9 @@
       }
     },
     "node_modules/@abi-software/map-utilities": {
-      "version": "1.1.3-beta.8",
-      "resolved": "https://registry.npmjs.org/@abi-software/map-utilities/-/map-utilities-1.1.3-beta.8.tgz",
-      "integrity": "sha512-wsSd9OL7vZbbVzif3v5hR3mWz4zyNaslW+DcMIttSWBQuVWkL0J7iS/HBGWWcB21z4GHhO6sfIIy4gdc6sEFMQ==",
+      "version": "1.1.3-beta.9",
+      "resolved": "https://registry.npmjs.org/@abi-software/map-utilities/-/map-utilities-1.1.3-beta.9.tgz",
+      "integrity": "sha512-vJtBjHXTiWvA2MirXi5AWWXcq/t1wE5TPkXmvCIxHvAIaj32iMYFue5+GU1uLpPDLsuY6iGeeY+nV2fUAEw5dQ==",
       "dependencies": {
         "@abi-software/svg-sprite": "^1.0.1",
         "@element-plus/icons-vue": "^2.3.1",
diff --git a/package.json b/package.json
index c449d8da..f6b5ebb0 100644
--- a/package.json
+++ b/package.json
@@ -39,7 +39,7 @@
   },
   "dependencies": {
     "@abi-software/gallery": "^1.1.2",
-    "@abi-software/map-utilities": "^1.1.3-beta.8",
+    "@abi-software/map-utilities": "^1.1.3-beta.9",
     "@abi-software/svg-sprite": "^1.0.1",
     "@element-plus/icons-vue": "^2.3.1",
     "algoliasearch": "^4.10.5",

From 2f27f97aa9ab5a7e62bb6b744625629bc84c5be7 Mon Sep 17 00:00:00 2001
From: akhuoa <aung.kyaw.hein@auckland.ac.nz>
Date: Fri, 1 Nov 2024 13:03:35 +1300
Subject: [PATCH 14/20] Update map utilities for connectivity graph

---
 package-lock.json | 8 ++++----
 package.json      | 2 +-
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 4bc2c9cc..7d4590c0 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,7 +9,7 @@
       "version": "2.4.1",
       "dependencies": {
         "@abi-software/gallery": "^1.1.2",
-        "@abi-software/map-utilities": "^1.1.3-beta.9",
+        "@abi-software/map-utilities": "^1.1.3-beta.10",
         "@abi-software/svg-sprite": "^1.0.1",
         "@element-plus/icons-vue": "^2.3.1",
         "algoliasearch": "^4.10.5",
@@ -65,9 +65,9 @@
       }
     },
     "node_modules/@abi-software/map-utilities": {
-      "version": "1.1.3-beta.9",
-      "resolved": "https://registry.npmjs.org/@abi-software/map-utilities/-/map-utilities-1.1.3-beta.9.tgz",
-      "integrity": "sha512-vJtBjHXTiWvA2MirXi5AWWXcq/t1wE5TPkXmvCIxHvAIaj32iMYFue5+GU1uLpPDLsuY6iGeeY+nV2fUAEw5dQ==",
+      "version": "1.1.3-beta.10",
+      "resolved": "https://registry.npmjs.org/@abi-software/map-utilities/-/map-utilities-1.1.3-beta.10.tgz",
+      "integrity": "sha512-RHnd9MJbmklv2YvAkPfhYqWQ1Tb7MMNyLuCy7zFPaBuwDyKYni+srzKaIA+npfoasLYZ2bNXHtkpx5A097xQWw==",
       "dependencies": {
         "@abi-software/svg-sprite": "^1.0.1",
         "@element-plus/icons-vue": "^2.3.1",
diff --git a/package.json b/package.json
index f6b5ebb0..5688924a 100644
--- a/package.json
+++ b/package.json
@@ -39,7 +39,7 @@
   },
   "dependencies": {
     "@abi-software/gallery": "^1.1.2",
-    "@abi-software/map-utilities": "^1.1.3-beta.9",
+    "@abi-software/map-utilities": "^1.1.3-beta.10",
     "@abi-software/svg-sprite": "^1.0.1",
     "@element-plus/icons-vue": "^2.3.1",
     "algoliasearch": "^4.10.5",

From 02c8b4f6111cf08ac5c2d5efec098fffeb35cb78 Mon Sep 17 00:00:00 2001
From: akhuoa <aung.kyaw.hein@auckland.ac.nz>
Date: Mon, 4 Nov 2024 12:38:56 +1300
Subject: [PATCH 15/20] Add connectivity graph and list view switch

---
 src/components/ConnectivityInfo.vue | 80 +++++++++++++++++++++--------
 1 file changed, 58 insertions(+), 22 deletions(-)

diff --git a/src/components/ConnectivityInfo.vue b/src/components/ConnectivityInfo.vue
index b23a08be..b832ca91 100644
--- a/src/components/ConnectivityInfo.vue
+++ b/src/components/ConnectivityInfo.vue
@@ -38,14 +38,6 @@
         <div class="block" v-if="resources.length">
           <external-resource-card :resources="resources"></external-resource-card>
         </div>
-        <div class="block">
-          <el-button
-            class="button"
-            @click="goToConnectivityGraph()"
-          >
-            Show connectivity graph
-          </el-button>
-        </div>
       </div>
       <div class="title-buttons">
         <el-popover
@@ -68,7 +60,28 @@
         <CopyToClipboard :content="updatedCopyContent" />
       </div>
     </div>
-    <div class="content-container">
+
+    <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">
@@ -189,10 +202,8 @@
         </el-button>
       </div>
     </div>
-    <div class="content-container">
-      <div class="attribute-title-container">
-        <span class="attribute-title">Connectivity Graph</span>
-      </div>
+
+    <div class="content-container" v-if="activeView === 'graphView'">
       <connectivity-graph
         :entry="entry.featureId[0]"
         :mapServer="envVars.FLATMAPAPI_LOCATION"
@@ -273,6 +284,7 @@ export default {
       activeSpecies: undefined,
       pubmedSearchUrl: '',
       loading: false,
+      activeView: 'listView',
       facetList: [],
       showToolip: false,
       showDetails: false,
@@ -381,12 +393,16 @@ export default {
       // connected to flatmapvuer > moveMap(featureIds) function
       this.$emit('show-connectivity', featureIds);
     },
-    goToConnectivityGraph: function () {
-      const connectivityGraphRef = this.$refs.connectivityGraphRef;
-      if (connectivityGraphRef && connectivityGraphRef.$el) {
-        connectivityGraphRef.$el.scrollIntoView({
-          behavior: 'smooth',
-        });
+    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) {
@@ -675,14 +691,34 @@ 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;
     border: 1px solid #ac76c5 !important;
   }
+
+  & + .button {
+    margin-top: 10px !important;
+  }
+}
+
+.buttons-row {
+  text-align: right;
+
+  .el-button + .el-button {
+    margin-top: 0 !important;
+    margin-left: 10px !important;
+  }
+}
+
+.population-display {
+  display: flex;
+  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 {

From 298792c0be23cecb195664ee84ef195635171110 Mon Sep 17 00:00:00 2001
From: akhuoa <aung.kyaw.hein@auckland.ac.nz>
Date: Mon, 4 Nov 2024 12:47:59 +1300
Subject: [PATCH 16/20] Fix connectivity graph and list view UI

---
 src/components/ConnectivityInfo.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/ConnectivityInfo.vue b/src/components/ConnectivityInfo.vue
index b832ca91..b3f0e3d3 100644
--- a/src/components/ConnectivityInfo.vue
+++ b/src/components/ConnectivityInfo.vue
@@ -714,6 +714,7 @@ export default {
 
 .population-display {
   display: flex;
+  flex: 1 1 auto !important;
   flex-direction: row !important;
   align-items: center;
   justify-content: space-between;

From 663d4000e078c079d8fc28878c6bc8307c053181 Mon Sep 17 00:00:00 2001
From: akhuoa <aung.kyaw.hein@auckland.ac.nz>
Date: Tue, 5 Nov 2024 11:09:44 +1300
Subject: [PATCH 17/20] Update connectivity graph and list view styles

---
 src/components/ConnectivityInfo.vue | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/components/ConnectivityInfo.vue b/src/components/ConnectivityInfo.vue
index b3f0e3d3..cfe41ded 100644
--- a/src/components/ConnectivityInfo.vue
+++ b/src/components/ConnectivityInfo.vue
@@ -694,7 +694,7 @@ export default {
 
   &:hover {
     color: #fff !important;
-    background: #ac76c5 !important;
+    background-color: #ac76c5 !important;
     border: 1px solid #ac76c5 !important;
   }
 
@@ -703,6 +703,11 @@ export default {
   }
 }
 
+.el-button-secondary {
+  border-color: transparent;
+  background-color: transparent;
+}
+
 .buttons-row {
   text-align: right;
 

From 8c15124c969375b64844c40b36a2d74cb2510726 Mon Sep 17 00:00:00 2001
From: akhuoa <aung.kyaw.hein@auckland.ac.nz>
Date: Tue, 5 Nov 2024 11:14:28 +1300
Subject: [PATCH 18/20] Updte map utilities for connectivity graph updates

---
 package-lock.json | 8 ++++----
 package.json      | 2 +-
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 1daa923b..86ce1e0c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,7 +9,7 @@
       "version": "2.4.2",
       "dependencies": {
         "@abi-software/gallery": "^1.1.2",
-        "@abi-software/map-utilities": "^1.1.3-beta.10",
+        "@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",
@@ -65,9 +65,9 @@
       }
     },
     "node_modules/@abi-software/map-utilities": {
-      "version": "1.1.3-beta.10",
-      "resolved": "https://registry.npmjs.org/@abi-software/map-utilities/-/map-utilities-1.1.3-beta.10.tgz",
-      "integrity": "sha512-RHnd9MJbmklv2YvAkPfhYqWQ1Tb7MMNyLuCy7zFPaBuwDyKYni+srzKaIA+npfoasLYZ2bNXHtkpx5A097xQWw==",
+      "version": "1.1.3-beta.11",
+      "resolved": "https://registry.npmjs.org/@abi-software/map-utilities/-/map-utilities-1.1.3-beta.11.tgz",
+      "integrity": "sha512-t/BSMpaYIwIi4YykMkg6on/32/9ug9yk0m0y9wYyu8YZjNBuDewwy9GIA8bOhA1mZ9ei9WHD109IQdXnWZYuHw==",
       "dependencies": {
         "@abi-software/svg-sprite": "^1.0.1",
         "@element-plus/icons-vue": "^2.3.1",
diff --git a/package.json b/package.json
index bf9da582..5051fc0a 100644
--- a/package.json
+++ b/package.json
@@ -39,7 +39,7 @@
   },
   "dependencies": {
     "@abi-software/gallery": "^1.1.2",
-    "@abi-software/map-utilities": "^1.1.3-beta.10",
+    "@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",

From 002076ecd838ab73330bd9eec7ebee5868a3019b Mon Sep 17 00:00:00 2001
From: akhuoa <aung.kyaw.hein@auckland.ac.nz>
Date: Tue, 5 Nov 2024 13:29:23 +1300
Subject: [PATCH 19/20] Update connectivity graph button styles

---
 src/components/ConnectivityInfo.vue | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/src/components/ConnectivityInfo.vue b/src/components/ConnectivityInfo.vue
index cfe41ded..762c25f5 100644
--- a/src/components/ConnectivityInfo.vue
+++ b/src/components/ConnectivityInfo.vue
@@ -711,6 +711,16 @@ export default {
 .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;

From 5b85302d73395206a34e781f4879bccb6d8f83ab Mon Sep 17 00:00:00 2001
From: alan-wu <alan.wu@auckland.ac.nz>
Date: Thu, 14 Nov 2024 11:33:35 +1300
Subject: [PATCH 20/20] Add console message for on connectivity component click
 for demo.

---
 src/App.vue | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/App.vue b/src/App.vue
index 07405d30..323cbf82 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -26,6 +26,7 @@
       @tabClicked="tabClicked"
       @search-changed="searchChanged($event)"
       @hover-changed="hoverChanged($event)"
+      @connectivity-component-click="onConnectivityComponentClick"
       @actionClick="action"
     />
   </div>
@@ -225,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')