@abi-software/map-side-bar 2.3.2-beta.3 → 2.3.2-beta.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abi-software/map-side-bar",
-  "version": "2.3.2-beta.3",
+  "version": "2.3.2-beta.5",
   "files": [
     "dist/*",
     "src/*",
@@ -39,7 +39,7 @@
   },
   "dependencies": {
     "@abi-software/gallery": "^1.1.1",
-    "@abi-software/map-utilities": "^1.0.1-beta.2",
+    "@abi-software/map-utilities": "^1.0.1-beta.3",
     "@abi-software/svg-sprite": "^1.0.0",
     "@element-plus/icons-vue": "^2.3.1",
     "algoliasearch": "^4.10.5",

package/src/components/ConnectivityInfo.vue

@@ -396,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>');