diff --git a/src/renderers/InfluenceConditionsRenderer.js b/src/renderers/InfluenceConditionsRenderer.js
index b187aec83d5a939b8d1c720cdc311172dce09db7..a01dd8e2f41ccef8eb8d0ba6f988e2717cab3d00 100644
--- a/src/renderers/InfluenceConditionsRenderer.js
+++ b/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 = {};