@abi-software/map-side-bar 2.4.0 → 2.4.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abi-software/map-side-bar",
-  "version": "2.4.0",
+  "version": "2.4.1",
   "files": [
     "dist/*",
     "src/*",

package/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 &&
@@ -41,22 +58,6 @@
         <CopyToClipboard :content="updatedCopyContent" />
       </div>
     </div>
-    <div v-if="featuresAlert" class="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">
-          {{ featuresAlert }}
-        </span>
-      </el-popover>
-    </div>
     <div class="content-container scrollbar">
       {{ entry.paths }}
       <div v-if="entry.origins && entry.origins.length > 0" class="block">
@@ -229,6 +230,7 @@ export default {
         originsWithDatasets: [],
         componentsWithDatasets: [],
         resource: undefined,
+        featuresAlert: undefined,
       }),
     },
     availableAnatomyFacets: {
@@ -236,7 +238,6 @@ export default {
       default: () => [],
     },
   },
-  // inject: ['getFeaturesAlert'],
   data: function () {
     return {
       controller: undefined,
@@ -274,9 +275,6 @@ export default {
       }
       return resources;
     },
-    featuresAlert() {
-      // return this.getFeaturesAlert()
-    },
     originDescription: function () {
       if (
         this.entry &&
@@ -517,6 +515,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;
@@ -525,12 +526,27 @@ export default {
   }
 }
 
+.info,
+.alert {
+  color: #8300bf;
+}
+
 .info {
   transform: rotate(180deg);
-  color: #8300bf;
   margin-left: 8px;
 }
 
+.alert {
+  margin-left: 5px;
+  vertical-align: text-bottom;
+
+  &,
+  > svg {
+    width: 1.25rem;
+    height: 1.25rem;
+  }
+}
+
 .seperator {
   width: 90%;
   height: 1px;

package/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']