@abi-software/map-side-bar 2.3.2-beta.2 → 2.3.2-beta.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abi-software/map-side-bar",
-  "version": "2.3.2-beta.2",
+  "version": "2.3.2-beta.4",
   "files": [
     "dist/*",
     "src/*",

package/src/components/ConnectivityInfo.vue

@@ -20,12 +20,12 @@
         </div>
         <external-resource-card :resources="resources"></external-resource-card>
       </div>
-      <div>
+      <div class="title-buttons">
         <el-popover
-          width="200"
+          width="auto"
           trigger="hover"
           :teleported="false"
-          popper-class="popover-origin-help"
+          popper-class="popover-map-pin"
         >
           <template #reference>
             <el-button class="button-circle" circle @click="showConnectivity(entry)">
@@ -38,6 +38,7 @@
             Show connectivity on map
           </span>
         </el-popover>
+        <CopyToClipboard :content="updatedCopyContent" />
       </div>
     </div>
     <div v-if="featuresAlert" class="attribute-title-container">
@@ -174,11 +175,6 @@
         Search for data on components
       </el-button>
     </div>
-
-    <!-- Copy to clipboard button container -->
-    <div class="float-button-container">
-      <CopyToClipboard :content="updatedCopyContent" />
-    </div>
   </div>
 </template>
 
@@ -400,38 +396,54 @@ export default {
         contentArray.push(`<div>${this.entry.paths}</div>`);
       }
 
+      function transformData(title, items, itemsWithDatasets = []) {
+        let contentString = `<div><strong>${title}</strong></div>`;
+        const transformedItems = [];
+        items.forEach((item) => {
+          let itemNames = [];
+          item.split(',').forEach((name) => {
+            const match = itemsWithDatasets.find((a) => a.name === name.trim());
+            if (match) {
+              itemNames.push(`${capitalise(name)} (${match.id})`);
+            } else {
+              itemNames.push(`${capitalise(name)}`);
+            }
+          });
+          transformedItems.push(itemNames.join(','));
+        });
+        const contentList = transformedItems
+          .map((item) => `<li>${item}</li>`)
+          .join('\n');
+        contentString += '\n';
+        contentString += `<ul>${contentList}</ul>`;
+        return contentString;
+      }
+
       // Origins
       if (this.entry.origins?.length) {
-        let originsContent = '<div><strong>Origin</strong></div>';
-        const origins = this.entry.origins
-          .map((item) => `<li>${capitalise(item)}</li>`)
-          .join('\n');
-        originsContent += '\n';
-        originsContent += `<ul>${origins}</ul>`;
-        contentArray.push(originsContent);
+        const title = 'Origin';
+        const origins = this.entry.origins;
+        const originsWithDatasets = this.entry.originsWithDatasets;
+        const transformedOrigins = transformData(title, origins, originsWithDatasets);
+        contentArray.push(transformedOrigins);
       }
 
       // Components
       if (this.entry.components?.length) {
-        contentArray.push();
-        let componentsContent = '<div><strong>Components</strong></div>';
-        const components = this.entry.components
-          .map((item) => `<li>${capitalise(item)}</li>`)
-          .join('\n');
-        componentsContent += '\n';
-        componentsContent += `<ul>${components}</ul>`;
-        contentArray.push(componentsContent);
+        const title = 'Components';
+        const components = this.entry.components;
+        const componentsWithDatasets = this.entry.componentsWithDatasets;
+        const transformedComponents = transformData(title, components, componentsWithDatasets);
+        contentArray.push(transformedComponents);
       }
 
       // Destination
       if (this.entry.destinations?.length) {
-        let destinationsContent = '<div><strong>Destination</strong></div>';
-        const destinations = this.entry.destinations
-          .map((item) => `<li>${capitalise(item)}</li>`)
-          .join('\n');
-        destinationsContent += '\n';
-        destinationsContent += `<ul>${destinations}</ul>`;
-        contentArray.push(destinationsContent);
+        const title = 'Destination';
+        const destinations = this.entry.destinations;
+        const destinationsWithDatasets = this.entry.destinationsWithDatasets;
+        const transformedDestinations = transformData(title, destinations, destinationsWithDatasets);
+        contentArray.push(transformedDestinations);
       }
 
       return contentArray.join('\n\n<br>');
@@ -479,6 +491,7 @@ export default {
 }
 
 .button-circle {
+  margin: 0;
   width: 24px !important;
   height: 24px !important;
 
@@ -706,16 +719,35 @@ export default {
   top: 99.4%;
 }
 
-.float-button-container {
-  position: absolute;
-  bottom: 8px;
-  right: 16px;
-  opacity: 0;
-  visibility: hidden;
+.title-buttons {
+  display: flex;
+  flex-direction: row;
+  gap: 0.5rem;
+
+  :deep(.copy-clipboard-button) {
+    &,
+    &:hover,
+    &:focus {
+      border-color: $app-primary-color !important;
+      border-radius: 50%;
+    }
+  }
+}
 
-  .main:hover & {
-    opacity: 1;
-    visibility: visible;
+:deep(.el-popper.popover-map-pin) {
+  padding: 4px 10px;
+  min-width: max-content;
+  font-family: Asap;
+  font-size: 12px;
+  line-height: inherit;
+  color: inherit;
+  background: #f3ecf6 !important;
+  border: 1px solid $app-primary-color;
+
+  & .el-popper__arrow::before {
+    border: 1px solid;
+    border-color: $app-primary-color;
+    background: #f3ecf6;
   }
 }
 </style>