From 0c88e2a2395f7775e6e2c47962a65dd7e892d935 Mon Sep 17 00:00:00 2001
From: akhuoa <aung.kyaw.hein@auckland.ac.nz>
Date: Fri, 26 Jul 2024 12:01:31 +1200
Subject: [PATCH 1/4] Fix missing features alert

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

diff --git a/src/components/ConnectivityInfo.vue b/src/components/ConnectivityInfo.vue
index d4120bf8..4fef5c08 100644
--- a/src/components/ConnectivityInfo.vue
+++ b/src/components/ConnectivityInfo.vue
@@ -40,7 +40,7 @@
         </el-popover>
       </div>
     </div>
-    <div v-if="featuresAlert" class="attribute-title-container">
+    <div v-if="entry.featuresAlert" class="attribute-title-container">
       <span class="attribute-title">Alert</span>
       <el-popover
         width="250"
@@ -52,7 +52,7 @@
           <el-icon class="info"><el-icon-warning /></el-icon>
         </template>
         <span style="word-break: keep-all">
-          {{ featuresAlert }}
+          {{ entry.featuresAlert }}
         </span>
       </el-popover>
     </div>
@@ -225,6 +225,7 @@ export default {
         originsWithDatasets: [],
         componentsWithDatasets: [],
         resource: undefined,
+        featuresAlert: undefined,
       }),
     },
     availableAnatomyFacets: {
@@ -232,7 +233,6 @@ export default {
       default: () => [],
     },
   },
-  // inject: ['getFeaturesAlert'],
   data: function () {
     return {
       controller: undefined,
@@ -267,9 +267,6 @@ export default {
       }
       return resources;
     },
-    featuresAlert() {
-      // return this.getFeaturesAlert()
-    },
     originDescription: function () {
       if (
         this.entry &&

From f7012ff73c9fb75d7700647c8387513b8f57b3dc Mon Sep 17 00:00:00 2001
From: akhuoa <aung.kyaw.hein@auckland.ac.nz>
Date: Fri, 26 Jul 2024 12:06:21 +1200
Subject: [PATCH 2/4] Fix features alert style

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

diff --git a/src/components/ConnectivityInfo.vue b/src/components/ConnectivityInfo.vue
index 4fef5c08..8a121a88 100644
--- a/src/components/ConnectivityInfo.vue
+++ b/src/components/ConnectivityInfo.vue
@@ -40,7 +40,7 @@
         </el-popover>
       </div>
     </div>
-    <div v-if="entry.featuresAlert" class="attribute-title-container">
+    <div v-if="entry.featuresAlert" class="content-container attribute-title-container">
       <span class="attribute-title">Alert</span>
       <el-popover
         width="250"

From 1bdd36279a237b3fbdb4ec69353c6fc0cef897bf Mon Sep 17 00:00:00 2001
From: akhuoa <aung.kyaw.hein@auckland.ac.nz>
Date: Mon, 29 Jul 2024 11:24:31 +1200
Subject: [PATCH 3/4] Update alert placement in connectivity info

---
 src/components/ConnectivityInfo.vue | 55 +++++++++++++++++++----------
 1 file changed, 37 insertions(+), 18 deletions(-)

diff --git a/src/components/ConnectivityInfo.vue b/src/components/ConnectivityInfo.vue
index 8a121a88..6294c651 100644
--- a/src/components/ConnectivityInfo.vue
+++ b/src/components/ConnectivityInfo.vue
@@ -18,6 +18,24 @@
         <div class="block" v-else>
           <div class="title">{{ entry.featureId }}</div>
         </div>
+        <div class="block" v-if="entry.featuresAlert">
+          <div class="attribute-title-container flex">
+            <span class="attribute-title">Alert</span>
+            <el-popover
+              width="250"
+              trigger="hover"
+              :teleported="false"
+              popper-class="popover-origin-help"
+            >
+              <template #reference>
+                <el-icon class="alert"><el-icon-warn-triangle-filled /></el-icon>
+              </template>
+              <span style="word-break: keep-all">
+                {{ entry.featuresAlert }}
+              </span>
+            </el-popover>
+          </div>
+        </div>
         <external-resource-card :resources="resources"></external-resource-card>
       </div>
       <div>
@@ -40,22 +58,6 @@
         </el-popover>
       </div>
     </div>
-    <div v-if="entry.featuresAlert" class="content-container attribute-title-container">
-      <span class="attribute-title">Alert</span>
-      <el-popover
-        width="250"
-        trigger="hover"
-        :teleported="false"
-        popper-class="popover-origin-help"
-      >
-        <template #reference>
-          <el-icon class="info"><el-icon-warning /></el-icon>
-        </template>
-        <span style="word-break: keep-all">
-          {{ entry.featuresAlert }}
-        </span>
-      </el-popover>
-    </div>
     <div class="content-container scrollbar">
       {{ entry.paths }}
       <div v-if="entry.origins && entry.origins.length > 0" class="block">
@@ -420,12 +422,25 @@ export default {
   }
 }
 
-.info {
-  transform: rotate(180deg);
+.info,
+.alert {
   color: #8300bf;
   margin-left: 8px;
 }
 
+.info {
+  transform: rotate(180deg);
+}
+
+.alert {
+  &,
+  > svg {
+    display: block;
+    width: 1.25rem;
+    height: 1.25rem;
+  }
+}
+
 .seperator {
   width: 90%;
   height: 1px;
@@ -470,6 +485,10 @@ export default {
   margin-bottom: 0.5em;
 }
 
+.flex {
+  display: flex;
+}
+
 .attribute-title {
   font-size: 16px;
   font-weight: 600;

From 51a8e25131b233aeb0f862fa7294cc0b3dad69c9 Mon Sep 17 00:00:00 2001
From: akhuoa <aung.kyaw.hein@auckland.ac.nz>
Date: Mon, 29 Jul 2024 11:45:50 +1200
Subject: [PATCH 4/4] Alert beside connectivity title

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

diff --git a/src/components/ConnectivityInfo.vue b/src/components/ConnectivityInfo.vue
index 6294c651..8529b3f0 100644
--- a/src/components/ConnectivityInfo.vue
+++ b/src/components/ConnectivityInfo.vue
@@ -4,7 +4,24 @@
     <div class="connectivity-info-title">
       <div>
         <div class="block" v-if="entry.title">
-          <div class="title">{{ capitalise(entry.title) }}</div>
+          <div class="title">
+            {{ capitalise(entry.title) }}
+            <template v-if="entry.featuresAlert">
+              <el-popover
+                width="250"
+                trigger="hover"
+                :teleported="false"
+                popper-class="popover-origin-help"
+              >
+                <template #reference>
+                  <el-icon class="alert"><el-icon-warn-triangle-filled /></el-icon>
+                </template>
+                <span style="word-break: keep-all">
+                  {{ entry.featuresAlert }}
+                </span>
+              </el-popover>
+            </template>
+          </div>
           <div
             v-if="
               entry.provenanceTaxonomyLabel &&
@@ -18,24 +35,6 @@
         <div class="block" v-else>
           <div class="title">{{ entry.featureId }}</div>
         </div>
-        <div class="block" v-if="entry.featuresAlert">
-          <div class="attribute-title-container flex">
-            <span class="attribute-title">Alert</span>
-            <el-popover
-              width="250"
-              trigger="hover"
-              :teleported="false"
-              popper-class="popover-origin-help"
-            >
-              <template #reference>
-                <el-icon class="alert"><el-icon-warn-triangle-filled /></el-icon>
-              </template>
-              <span style="word-break: keep-all">
-                {{ entry.featuresAlert }}
-              </span>
-            </el-popover>
-          </div>
-        </div>
         <external-resource-card :resources="resources"></external-resource-card>
       </div>
       <div>
@@ -414,6 +413,9 @@ export default {
 :deep(.popover-origin-help.el-popover) {
   text-transform: none !important; // need to overide the tooltip text transform
   border: 1px solid $app-primary-color;
+  font-weight: 400;
+  font-family: Asap, sans-serif, Helvetica;
+
   .el-popper__arrow {
     &:before {
       border-color: $app-primary-color;
@@ -425,17 +427,19 @@ export default {
 .info,
 .alert {
   color: #8300bf;
-  margin-left: 8px;
 }
 
 .info {
   transform: rotate(180deg);
+  margin-left: 8px;
 }
 
 .alert {
+  margin-left: 5px;
+  vertical-align: text-bottom;
+
   &,
   > svg {
-    display: block;
     width: 1.25rem;
     height: 1.25rem;
   }
@@ -485,10 +489,6 @@ export default {
   margin-bottom: 0.5em;
 }
 
-.flex {
-  display: flex;
-}
-
 .attribute-title {
   font-size: 16px;
   font-weight: 600;