influence condition render now uses correctly parsed units in header.

src/renderers/InfluenceConditionsRenderer.js

@@ -19,27 +19,28 @@ export class InfluenceConditionsRenderer {
             conditions = [conditions];
         }
         conditions.forEach(condition => {
-            // Create collapsible section for each influence condition
+            // Create a collapsible section for each influence condition
             const details = document.createElement('details');
             details.style.border = '1px solid #ccc';
             details.style.padding = '8px';
             details.style.marginBottom = '10px';
 
-            // Summary always shows condition name and (if only one quantity) its value/unit
+            // Summary: always visible, shows the condition name and, if only one quantity exists, its value (plain text)
             const summary = document.createElement('summary');
             const condName = this._getText(condition['dcc:name']);
             let summaryText = condName;
             const quantities = this._getQuantities(condition);
             if (quantities.length === 1) {
-                // If only one quantity, append its value and unit
+                // Use plain flag for summary display so that HTML is not double-escaped
                 const qty = quantities[0];
-                const valueStr = this._formatQuantity(qty);
-                summaryText += `:  ${valueStr}`;
+                const valueStr = this._formatQuantity(qty, true);
+                summaryText += ` : ${valueStr}`;
             }
-            summary.textContent = summaryText;
+            // Use innerHTML here so that any HTML markup in the unit is rendered
+            summary.innerHTML = summaryText;
             details.appendChild(summary);
 
-            // Expanded content: description and quantities table
+            // Expanded content: condition description and quantities table
             const contentDiv = document.createElement('div');
             contentDiv.style.marginTop = '8px';
             contentDiv.style.fontFamily = 'sans-serif';
@@ -49,14 +50,16 @@ export class InfluenceConditionsRenderer {
                 p.textContent = descText;
                 contentDiv.appendChild(p);
             }
-            // Render quantities table (if any)
+            // Render quantities table if available
             if (condition['dcc:data'] && condition['dcc:data']['dcc:quantity']) {
+                let quantities = this._getQuantities(condition);
                 const table = document.createElement('table');
                 table.style.width = '100%';
                 table.style.borderCollapse = 'collapse';
-                // Header row
+
+                // Header row for the table
                 const headerRow = document.createElement('tr');
-                ['Quantity', 'Value', 'Description'].forEach(text => {
+                ['Quantity', 'Value', 'Description', 'Additional Info'].forEach(text => {
                     const th = document.createElement('th');
                     th.textContent = text;
                     th.style.border = '1px solid #ccc';
@@ -64,39 +67,50 @@ export class InfluenceConditionsRenderer {
                     headerRow.appendChild(th);
                 });
                 table.appendChild(headerRow);
-                // Data rows for each quantity
-                this._getQuantities(condition).forEach(q => {
+
+                // Render each quantity as a row
+                quantities.forEach(q => {
                     const row = document.createElement('tr');
-                    // Quantity name cell
+
+                    // Column 1: Quantity name
                     const nameCell = document.createElement('td');
                     nameCell.style.border = '1px solid #ccc';
                     nameCell.style.padding = '4px';
                     nameCell.textContent = this._getText(q['dcc:name']);
                     row.appendChild(nameCell);
-                    // Value cell with merged unit and uncertainty, plus tooltip for additional info
+
+                    // Column 2: Value (with unit, uncertainty, merged) – rendered with HTML markup
                     const valueCell = document.createElement('td');
                     valueCell.style.border = '1px solid #ccc';
                     valueCell.style.padding = '4px';
-                    const formattedValue = this._formatQuantity(q);
+                    const formattedValue = this._formatQuantity(q, false);
                     valueCell.innerHTML = formattedValue;
-                    // If there is additional (non-standard) data, add a tooltip
+                    // If additional (non-standard) data exists, attach a tooltip
                     const additional = this._getAdditionalData(q);
                     if (Object.keys(additional).length > 0) {
                         const infoSpan = document.createElement('span');
                         infoSpan.textContent = ' ⓘ';
                         infoSpan.style.cursor = 'pointer';
                         infoSpan.style.color = '#888';
-                        // Use the title attribute for a basic tooltip (or later replace with a dynamic tree)
                         infoSpan.title = JSON.stringify(additional, null, 2);
                         valueCell.appendChild(infoSpan);
                     }
                     row.appendChild(valueCell);
-                    // Description cell
+
+                    // Column 3: Description for the quantity
                     const descCell = document.createElement('td');
                     descCell.style.border = '1px solid #ccc';
                     descCell.style.padding = '4px';
                     descCell.textContent = this._getText(q['dcc:description']);
                     row.appendChild(descCell);
+
+                    // Column 4: Additional info (if any)
+                    const additionalCell = document.createElement('td');
+                    additionalCell.style.border = '1px solid #ccc';
+                    additionalCell.style.padding = '4px';
+                    additionalCell.textContent = Object.keys(additional).length > 0 ? JSON.stringify(additional) : '';
+                    row.appendChild(additionalCell);
+
                     table.appendChild(row);
                 });
                 contentDiv.appendChild(table);
@@ -129,13 +143,14 @@ export class InfluenceConditionsRenderer {
         return quantities;
     }
 
-    // Helper: format a quantity’s value (supporting si:hybrid, si:realListXMLList, si:real, and dcc:noQuantity)
-    _formatQuantity(quantity) {
+    // Helper: format a quantity's value.
+    // If plain is true, render unit as plain text; otherwise use HTML from DSIUnit.
+    _formatQuantity(quantity, plain = false) {
         // Handle noQuantity (categorical data)
         if (quantity['dcc:noQuantity']) {
             return this._getText(quantity['dcc:noQuantity']);
         }
-        // Handle si:hybrid: if there are two si:real elements, render first normally and second in light gray.
+        // Handle si:hybrid block: map over si:real elements.
         if (quantity['si:hybrid']) {
             const hybrid = quantity['si:hybrid'];
             let reals = hybrid['si:real'];
@@ -148,7 +163,7 @@ export class InfluenceConditionsRenderer {
                 if (real['si:unit']) {
                     const rawUnit = real['si:unit'].trim();
                     const unitObj = new DSIUnit(rawUnit);
-                    unit = unitObj.toHTML({ oneLine: true });
+                    unit = plain ?  unitObj.toHTML() : unitObj.toHTML({ oneLine: true });
                 }
                 let uncertainty = '';
                 if (real['si:measurementUncertaintyUnivariate'] &&
@@ -161,11 +176,11 @@ export class InfluenceConditionsRenderer {
                     : `${value} ${unit}`;
                 if (index > 0) {
                     // For subsequent representations, wrap in a light gray span.
-                    result = `<span style="color:lightgray;">${result}</span>`;
+                    result = `<span style="color:lightgray;">(${result})</span>`;
                 }
                 return result;
             });
-            return formatted.join(' / ');
+            return formatted.join(' ');
         }
         // Handle si:realListXMLList
         if (quantity['si:realListXMLList']) {
@@ -175,13 +190,14 @@ export class InfluenceConditionsRenderer {
             if (rl['si:unitXMLList']) {
                 const rawUnit = rl['si:unitXMLList'].trim();
                 const unitObj = new DSIUnit(rawUnit);
-                unit = unitObj.toHTML({ oneLine: true });
+                unit = plain ? unitObj.toHTML() : unitObj.toHTML({ oneLine: true });
             }
             let uncertainty = [];
             if (rl['si:measurementUncertaintyUnivariateXMLList'] &&
                 rl['si:measurementUncertaintyUnivariateXMLList']['si:expandedMUXMLList'] &&
                 rl['si:measurementUncertaintyUnivariateXMLList']['si:expandedMUXMLList']['si:valueExpandedMUXMLList']) {
-                uncertainty = rl['si:measurementUncertaintyUnivariateXMLList']['si:expandedMUXMLList']['si:valueExpandedMUXMLList'].trim().split(/\s+/);
+                uncertainty = rl['si:measurementUncertaintyUnivariateXMLList']['si:expandedMUXMLList']['si:valueExpandedMUXMLList']
+                    .trim().split(/\s+/);
             }
             const formatted = values.map((val, i) => {
                 const unc = (uncertainty[i] !== undefined) ? uncertainty[i] : '';
@@ -197,7 +213,7 @@ export class InfluenceConditionsRenderer {
             if (real['si:unit']) {
                 const rawUnit = real['si:unit'].trim();
                 const unitObj = new DSIUnit(rawUnit);
-                unit = unitObj.toHTML({ oneLine: true });
+                unit = plain ? unitObj.toHTML() : unitObj.toHTML({ oneLine: true });
             }
             let uncertainty = '';
             if (real['si:measurementUncertaintyUnivariate'] &&
@@ -210,7 +226,7 @@ export class InfluenceConditionsRenderer {
         return '';
     }
 
-    // Helper: extract additional data (all keys except the common ones)
+    // Helper: extract additional data (all keys except the common ones) for tooltip purposes
     _getAdditionalData(quantity) {
         const exclude = ['dcc:name', 'dcc:description', 'si:real', 'si:realListXMLList', 'dcc:noQuantity'];
         const additional = {};