@abi-software/map-side-bar 2.14.1-simulation.8 → 2.14.2-demo.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abi-software/map-side-bar",
-  "version": "2.14.1-simulation.8",
+  "version": "2.14.2-demo.0",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",

package/src/App.vue

@@ -19,7 +19,6 @@
       <el-button @click="getFacets">Get facets</el-button>
       <el-button @click="toggleCreateData">Create Data/Annotation</el-button>
       <el-button @click="openConnectivitySearch()">Connectivity Search</el-button>
-      <el-button @click="displayFileInfo()">Display file info</el-button>
     </div>
     <SideBar
       :envVars="envVars"
@@ -136,7 +135,6 @@ export default {
         PENNSIEVE_API_LOCATION: import.meta.env.VITE_APP_PENNSIEVE_API_LOCATION,
         BL_SERVER_URL: import.meta.env.VITE_APP_BL_SERVER_URL,
         ROOT_URL: import.meta.env.VITE_APP_ROOT_URL,
-        TEST_DATA_LOCATION: import.meta.env.VITE_APP_TEST_DATA_LOCATION,
         FLATMAPAPI_LOCATION: import.meta.env.VITE_FLATMAPAPI_LOCATION,
       },
       connectivityEntry: [],
@@ -368,10 +366,6 @@ export default {
     },
     onConnectivityCollapseChange: function () {
       this.connectivityEntry = [...exampleConnectivityInput]
-    },
-    displayFileInfo: function() {
-      this.$refs.sideBar.displayFileInfo(1024, "csv", "reveal")
-
     }
   },
   mounted: async function () {

package/src/components/BadgesGroup.vue

@@ -1,6 +1,6 @@
 <template>
-  <div v-if="visible" class="container" ref="container">
-    <div v-if="displayText">View data types:</div>
+  <div v-if="categories['All'].size > 1" class="container" ref="container">
+    <div>View data types:</div>
     <template v-for="(item, key) in categories">
       <el-button
         v-if="item.size > 0"
@@ -32,15 +32,7 @@ export default {
         return []
       },
     },
-    displayDataset: {
-      type: Boolean,
-      default: true,
-    },
-    displayText: {
-      type: Boolean,
-      default: true,
-    },
-    items: {
+    entry: {
       type: Object,
       default: () => {
         return {}
@@ -50,24 +42,22 @@ export default {
   data: function () {
     return {
       //Always start with 1 image - the dataset thumbnail itself
-      categories: { },
+      categories: { All: { size: 1 }, Dataset: { size: 1 } },
       active: 'All',
-      totalSize: 0,
-    }
-  },
-  computed: {
-    // This computed property populates filter data's entry object with $data from this sidebar
-    visible: function () {
-      return (this.displayDataset && this.totalSize > 1) ||
-        (!this.displayDataset && this.totalSize > 0)
     }
   },
   methods: {
-    addToCategories: function (name) {
-      const array = this.items[name]
+    addToCategories: function (array, name) {
       if (array && array.length > 0) {
         this.categories[name] = { size: array.length }
-        this.totalSize += array.length
+        this.categories['All'].size += array.length
+      }
+    },
+    addSimulationsToCategories: function (array) {
+      if (array && array.length > 0) {
+        const size = array.length
+        this.categories['Simulations'] = { size }
+        this.categories['All'].size += size
       }
     },
     categoryClicked: function (name) {
@@ -76,34 +66,14 @@ export default {
     },
   },
   watch: {
-    items: {
+    entry: {
       deep: true,
       immediate: true,
       handler: function () {
-        this.categories = {}
-        this.totalSize = 0
-        this.active = "All"
-        let keys = ['Flatmaps', 'Plots', 'Protocol Data', 'Scaffolds', 'Simulations']
-        keys.forEach(key => this.addToCategories(key))
-        if (this.displayDataset) {
-          this.totalSize += 1
-          this.categories.All = { size: this.totalSize }
-          this.categories.Dataset = { size: 1 }
-        } else {
-          const keys = Object.keys(this.categories)
-          if (keys.length > 1) {
-            this.categories.All = { size: this.totalSize }
-          } else if (keys.length === 1) {
-            this.categoryClicked(keys[0])
-          }
-        }
-        this.categories = Object.keys(this.categories).sort().reduce(
-          (obj, key) => {
-            obj[key] = this.categories[key];
-            return obj;
-          },
-          {}
-        );
+        this.addToCategories(this.entry.flatmaps, 'Flatmaps')
+        this.addToCategories(this.entry.plots, 'Plots')
+        this.addToCategories(this.entry.scaffolds, 'Scaffolds')
+        this.addSimulationsToCategories(this.entry.simulation)
         /** disable the following
         this.addToCategories(this.entry.images, 'Images');
         this.addToCategories(this.entry.videos, 'Videos');

package/src/components/ConnectivityInfo.vue

@@ -12,21 +12,6 @@
               @click="toggleTitleExpansion"
             >
               <span>{{ capitalise(displayTitle) }}</span>
-              <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>
             <button
               v-if="showTitleToggle"
@@ -41,7 +26,19 @@
               </el-icon>
             </button>
           </div>
-          <div class="subtitle"><strong>Id: </strong>{{ entry.featureId[0] }}</div>
+          <div class="subtitle">
+            <strong>Id: </strong>{{ entry.featureId[0] }}
+            <el-button
+              round
+              size="small"
+              class="alert-chip"
+              @click="showAlertMessage"
+              v-if="entry.featuresAlert"
+            >
+              <el-icon class="alert"><el-icon-warn-triangle-filled /></el-icon>
+              Notes
+            </el-button>
+          </div>
           <div v-if="hasProvenanceTaxonomyLabel" class="subtitle">
             {{ provSpeciesDescription }}
           </div>
@@ -290,6 +287,22 @@
         @trackEvent="onTrackEvent"
       />
     </div>
+
+    <div
+      ref="alertElement"
+      class="content-container content-container-alert"
+      v-if="entry.featuresAlert"
+    >
+      <div class="block attribute-title-container">
+        <span class="attribute-title">Alert</span>
+      </div>
+      <div class="block">
+        <div class="alert-block"
+          v-for="alert in entry.featuresAlert"
+          v-html="formatAlertText(alert)"
+        ></div>
+      </div>
+    </div>
   </div>
 </template>
 
@@ -784,6 +797,14 @@ export default {
         contentArray.push(contentString);
       }
 
+      // Alert
+      if (this.entry.featuresAlert) {
+        const alertContent = this.entry.featuresAlert
+          .map((alert) => this.formatAlertText(alert))
+          .join('\n');
+        contentArray.push(`<div><strong>Alert</strong></div>\n${alertContent}`);
+      }
+
       return contentArray.join('\n\n<br>');
     },
     getConnectivityDatasets: function (label) {
@@ -910,6 +931,51 @@ export default {
     onTrackEvent: function (data) {
       EventBus.emit('trackEvent', data);
     },
+    showAlertMessage: function () {
+      // scroll to alert message
+      this.$nextTick(() => {
+        const alertElement = this.$refs.alertElement;
+        if (alertElement) {
+          alertElement.scrollIntoView({
+            behavior: 'smooth',
+            block: 'start',
+            inline: 'nearest',
+          });
+        }
+      });
+    },
+    formatAlertText: function (text) {
+      if (!text) return '';
+      const escaped = text
+        .replace(/&/g, '&amp;')
+        .replace(/</g, '&lt;')
+        .replace(/>/g, '&gt;');
+      const linkified = escaped.replace(
+        /(https?:\/\/[^\s"<>\[]+)/g,
+        (url) => {
+          const parts = url.match(/^(.*?)([\].,;:!?]*)$/);
+          const cleanUrl = parts ? parts[1] : url;
+          const suffix = parts ? parts[2] : '';
+          return `<a href="${cleanUrl}" target="_blank" rel="noopener noreferrer">${cleanUrl}</a>${suffix}`;
+        }
+      );
+
+      const normalised = linkified
+        .replace(/\\n/g, '\n')
+        .replace(/\r\n/g, '\n')
+        .replace(/\r/g, '\n');
+
+      return normalised
+        .split('\n')
+        .map((line) => {
+          const withBoldLabel = line.replace(
+            /^\s*([A-Za-z][^:<]{0,120}:)/,
+            '<strong>$1</strong>'
+          );
+          return `<div class="alert-line">${withBoldLabel}</div>`;
+        })
+        .join('\n');
+    },
   },
   mounted: function () {
     this.updatedCopyContent = this.getUpdateCopyContent();
@@ -1088,15 +1154,6 @@ export default {
   text-transform: uppercase;
 }
 
-.main {
-  .el-button.is-round {
-    border-radius: 4px;
-    padding: 9px 20px 10px 20px;
-    display: flex;
-    height: 36px;
-  }
-}
-
 .button {
   margin-left: 0px !important;
   margin-top: 0px !important;
@@ -1419,10 +1476,6 @@ export default {
 
 .content-container-connectivity {
   position: relative;
-
-  &:not([style*="display: none"]) ~ .content-container-references {
-    margin-top: -1.25rem;
-  }
 }
 
 .attribute-content {
@@ -1466,4 +1519,48 @@ export default {
     margin-bottom: 0.5em;
   }
 }
+
+.alert-block {
+  background-color: var(--el-color-warning-light-9);
+  border: 1px dashed var(--el-color-warning);
+  padding: 0.75rem;
+  border-radius: 4px;
+
+  :deep(.alert-line + .alert-line) {
+    margin-top: 0.5rem;
+  }
+
+  :deep(a) {
+    color: $app-primary-color;
+    word-break: break-all;
+
+    &:hover {
+      opacity: 0.8;
+    }
+  }
+}
+
+.alert-chip {
+  margin-left: 5px;
+  background-color: $app-primary-color;
+  border-color: $app-primary-color;
+  color: #fff;
+
+  &:hover {
+    color: #fff !important;
+    background-color: #ac76c5 !important;
+    border: 1px solid #ac76c5 !important;
+  }
+
+  :deep(> span) {
+    gap: 2px;
+  }
+
+  .alert {
+    width: 1rem;
+    height: 1rem;
+    color: inherit;
+    margin: 0;
+  }
+}
 </style>