@hestia-earth/ui-components 0.43.20 → 0.43.22

package/fesm2022/hestia-earth-ui-components.mjs

@@ -95,6 +95,7 @@ const gitBranch = () => (['dev', 'staging'].some(env => baseUrl().includes(env))
  */
 const windowRef = () => (typeof window === 'undefined' ? undefined : window);
 const origin = () => windowRef()?.location?.origin ?? '';
+const openUrl = (url, target = '_self') => windowRef()?.open(url, target);
 const isChrome = () => windowRef()?.navigator?.userAgent?.includes('Chrome') ?? false;
 const baseUrl = (allowLocalhost = true) => origin().includes('localhost')
     ? allowLocalhost
@@ -173,6 +174,26 @@ const nodeDefaultLabel = {
 const defaultLabel = (node) => node
     ? (node['@type'] in nodeDefaultLabel ? nodeDefaultLabel[node['@type']](node) : node.name) || node['@id'] || node.id
     : '';
+const labelWithId = (label, id, maxLength) => {
+    const suffix = ` (${id})`;
+    // `ellipsis` appends 3 characters to the length it is given
+    return `${ellipsis(label, Math.max(maxLength - suffix.length - 3, 0))}${suffix}`;
+};
+/**
+ * Numbered labels for a list of nodes compared on a chart.
+ * Nodes sharing a name are indistinguishable once drawn, so the `@id` is appended to every label
+ * that is not unique. The name is shortened to make room for it, as a label longer than `maxLength`
+ * is truncated by the chart and would lose the `@id` it was given.
+ */
+const nodeChartLabels = (nodes, maxLength) => {
+    const names = (nodes || []).map(node => defaultLabel(node));
+    const duplicates = names.filter((name, index) => names.indexOf(name) !== index);
+    return names.map((name, index) => {
+        const label = `${index + 1}. ${name}`;
+        const id = nodes[index]?.['@id'];
+        return duplicates.includes(name) && id ? labelWithId(label, id, maxLength) : label;
+    });
+};
 /**
  * Stable `@for` track key for a node that uniquely identifies it across data versions.
  * Two nodes with the same `@id` but a different `dataVersion` (e.g. current vs a compared version)
@@ -1057,6 +1078,9 @@ const methodTierOrder = (methodTier) => [
     EmissionMethodTier.background,
     EmissionMethodTier['not relevant']
 ].indexOf(methodTier);
+// an emission also produced by a Transformation is written on the Cycle twice, the second one
+// "not relevant" with a value of 0 - the tier holding the real value is the one to report under
+const highestMethodTier = (methodTiers) => methodTiers.filter(Boolean).sort((a, b) => methodTierOrder(a) - methodTierOrder(b))[0];
 const grouppedValueKeys = [
     'dates',
     'sd',
@@ -1086,12 +1110,14 @@ const groupNodesByTerm = (nodes = [], key, includeNode = (_node) => true, hideZe
         // (same `@id`, different `dataVersion`) are grouped separately instead of merged
         const nodeId = nodeVersionKey(node);
         const groupedKey = groupNodeKey(blankNode);
-        group[groupedKey] = group[groupedKey] || {
+        const methodTier = highestMethodTier([group[groupedKey]?.methodTier, blankNode.methodTier]);
+        group[groupedKey] = {
             visible: true,
             term: blankNode.term,
-            methodTier: blankNode.methodTier,
-            methodTierOrder: methodTierOrder(blankNode.methodTier),
-            values: {}
+            values: {},
+            ...group[groupedKey],
+            methodTier,
+            methodTierOrder: methodTierOrder(methodTier)
         };
         group[groupedKey].values[nodeId] = group[groupedKey].values[nodeId] || {
             index,
@@ -3657,6 +3683,10 @@ const termKeyToLabel = {
     agrovoc: 'AGROVOC'
 };
 const termTypeLabel = (value = 'N/A') => termTypeToLabel[value] || termKeyToLabel[value] || keyToLabel(value);
+// glossary names are punctuated ("Land transformation, 20 year average") and a reader typing one
+// leaves the punctuation out, so neither side keeps it
+const termSearch = (term = '') => term.replace(/[,\s]/g, '').toLowerCase();
+const suggestTerms = (terms, value) => terms.filter(({ name }) => termSearch(name).includes(termSearch(value)));
 
 class KeyToLabelPipe {
     transform(value) {
@@ -5899,18 +5929,18 @@ class ChartExportButtonComponent {
         this.close();
     }
     open() {
-        this.modalService.open(this.modal());
+        this.modalService.open(this.modal(), { windowClass: 'is-above-popover' });
     }
     close() {
         this.exportFormat.set(undefined);
         this.modalService.dismissAll();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ChartExportButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: ChartExportButtonComponent, isStandalone: true, selector: "he-chart-export-button", inputs: { buttonClass: { classPropertyName: "buttonClass", publicName: "buttonClass", isSignal: true, isRequired: false, transformFunction: null }, chart: { classPropertyName: "chart", publicName: "chart", isSignal: true, isRequired: false, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null }, exportFormats: { classPropertyName: "exportFormats", publicName: "exportFormats", isSignal: true, isRequired: false, transformFunction: null }, chartExportFn: { classPropertyName: "chartExportFn", publicName: "chartExportFn", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "modal", first: true, predicate: ["modal"], descendants: true, isSignal: true }], ngImport: i0, template: "<button\n  class=\"{{ buttonClass() }}\"\n  type=\"button\"\n  [ngbTooltip]=\"chart()?.exporting() ? '' : 'Download'\"\n  placement=\"bottom\"\n  (click)=\"open()\">\n  <he-svg-icon name=\"download\" />\n</button>\n\n<ng-template #modal>\n  <div class=\"modal is-active\">\n    <div class=\"modal-background\"></div>\n    <div class=\"modal-card\">\n      <header class=\"modal-card-head\">\n        <p class=\"modal-card-title\">Download Chart</p>\n        <button class=\"delete is-small\" aria-label=\"close\" type=\"button\" (click)=\"close()\"></button>\n      </header>\n      <section class=\"modal-card-body\">\n        <p class=\"has-text-secondary is-mb-2\">Download chart as:</p>\n        <div class=\"is-flex is-flex-direction-column is-gap-4\">\n          @for (format of exportFormats(); track format.extension) {\n            <div class=\"is-flex is-gap-4\">\n              <div class=\"field is-mb-0\">\n                <input\n                  type=\"checkbox\"\n                  [id]=\"format.extension\"\n                  [checked]=\"exportFormat() === format.extension\"\n                  (change)=\"exportFormat.set(format.extension)\" />\n              </div>\n              <he-svg-icon name=\"image\" />\n              <label class=\"has-text-grey-dark is-clickable\" [for]=\"format.extension\">\n                {{ format.label }} (.{{ format.extension }})\n              </label>\n            </div>\n          }\n        </div>\n      </section>\n      <footer class=\"modal-card-foot\">\n        <button class=\"button is-primary\" [disabled]=\"!exportFormat()\" (click)=\"download()\">\n          @if (chart()?.exporting()) {\n            <he-svg-icon name=\"loading\" animation=\"spin\" />\n          } @else {\n            <he-svg-icon name=\"download\" />\n          }\n          <span class=\"is-pl-2\">Download</span>\n        </button>\n      </footer>\n    </div>\n  </div>\n</ng-template>\n", styles: [""], dependencies: [{ kind: "component", type: HESvgIconComponent, selector: "he-svg-icon", inputs: ["name", "size", "animation"] }, { kind: "directive", type: NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: ChartExportButtonComponent, isStandalone: true, selector: "he-chart-export-button", inputs: { buttonClass: { classPropertyName: "buttonClass", publicName: "buttonClass", isSignal: true, isRequired: false, transformFunction: null }, chart: { classPropertyName: "chart", publicName: "chart", isSignal: true, isRequired: false, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null }, exportFormats: { classPropertyName: "exportFormats", publicName: "exportFormats", isSignal: true, isRequired: false, transformFunction: null }, chartExportFn: { classPropertyName: "chartExportFn", publicName: "chartExportFn", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "modal", first: true, predicate: ["modal"], descendants: true, isSignal: true }], ngImport: i0, template: "<button\n  class=\"{{ buttonClass() }}\"\n  type=\"button\"\n  [ngbTooltip]=\"chart()?.exporting() ? '' : 'Download'\"\n  placement=\"bottom\"\n  (click)=\"open()\">\n  <he-svg-icon name=\"download\" />\n</button>\n\n<ng-template #modal>\n  <!-- the chart may sit in a popover closing on outside clicks: keep it open, or the chart is gone -->\n  <div class=\"modal is-active\" (mousedown)=\"$event.stopPropagation()\">\n    <div class=\"modal-background\"></div>\n    <div class=\"modal-card\">\n      <header class=\"modal-card-head\">\n        <p class=\"modal-card-title\">Download Chart</p>\n        <button class=\"delete is-small\" aria-label=\"close\" type=\"button\" (click)=\"close()\"></button>\n      </header>\n      <section class=\"modal-card-body\">\n        <p class=\"has-text-secondary is-mb-2\">Download chart as:</p>\n        <div class=\"is-flex is-flex-direction-column is-gap-4\">\n          @for (format of exportFormats(); track format.extension) {\n            <div class=\"is-flex is-gap-4\">\n              <div class=\"field is-mb-0\">\n                <input\n                  type=\"checkbox\"\n                  [id]=\"format.extension\"\n                  [checked]=\"exportFormat() === format.extension\"\n                  (change)=\"exportFormat.set(format.extension)\" />\n              </div>\n              <he-svg-icon name=\"image\" />\n              <label class=\"has-text-grey-dark is-clickable\" [for]=\"format.extension\">\n                {{ format.label }} (.{{ format.extension }})\n              </label>\n            </div>\n          }\n        </div>\n      </section>\n      <footer class=\"modal-card-foot\">\n        <button class=\"button is-primary\" [disabled]=\"!exportFormat()\" (click)=\"download()\">\n          @if (chart()?.exporting()) {\n            <he-svg-icon name=\"loading\" animation=\"spin\" />\n          } @else {\n            <he-svg-icon name=\"download\" />\n          }\n          <span class=\"is-pl-2\">Download</span>\n        </button>\n      </footer>\n    </div>\n  </div>\n</ng-template>\n", styles: [""], dependencies: [{ kind: "component", type: HESvgIconComponent, selector: "he-svg-icon", inputs: ["name", "size", "animation"] }, { kind: "directive", type: NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ChartExportButtonComponent, decorators: [{
             type: Component$1,
-            args: [{ selector: 'he-chart-export-button', changeDetection: ChangeDetectionStrategy.OnPush, imports: [HESvgIconComponent, NgbTooltip], template: "<button\n  class=\"{{ buttonClass() }}\"\n  type=\"button\"\n  [ngbTooltip]=\"chart()?.exporting() ? '' : 'Download'\"\n  placement=\"bottom\"\n  (click)=\"open()\">\n  <he-svg-icon name=\"download\" />\n</button>\n\n<ng-template #modal>\n  <div class=\"modal is-active\">\n    <div class=\"modal-background\"></div>\n    <div class=\"modal-card\">\n      <header class=\"modal-card-head\">\n        <p class=\"modal-card-title\">Download Chart</p>\n        <button class=\"delete is-small\" aria-label=\"close\" type=\"button\" (click)=\"close()\"></button>\n      </header>\n      <section class=\"modal-card-body\">\n        <p class=\"has-text-secondary is-mb-2\">Download chart as:</p>\n        <div class=\"is-flex is-flex-direction-column is-gap-4\">\n          @for (format of exportFormats(); track format.extension) {\n            <div class=\"is-flex is-gap-4\">\n              <div class=\"field is-mb-0\">\n                <input\n                  type=\"checkbox\"\n                  [id]=\"format.extension\"\n                  [checked]=\"exportFormat() === format.extension\"\n                  (change)=\"exportFormat.set(format.extension)\" />\n              </div>\n              <he-svg-icon name=\"image\" />\n              <label class=\"has-text-grey-dark is-clickable\" [for]=\"format.extension\">\n                {{ format.label }} (.{{ format.extension }})\n              </label>\n            </div>\n          }\n        </div>\n      </section>\n      <footer class=\"modal-card-foot\">\n        <button class=\"button is-primary\" [disabled]=\"!exportFormat()\" (click)=\"download()\">\n          @if (chart()?.exporting()) {\n            <he-svg-icon name=\"loading\" animation=\"spin\" />\n          } @else {\n            <he-svg-icon name=\"download\" />\n          }\n          <span class=\"is-pl-2\">Download</span>\n        </button>\n      </footer>\n    </div>\n  </div>\n</ng-template>\n" }]
+            args: [{ selector: 'he-chart-export-button', changeDetection: ChangeDetectionStrategy.OnPush, imports: [HESvgIconComponent, NgbTooltip], template: "<button\n  class=\"{{ buttonClass() }}\"\n  type=\"button\"\n  [ngbTooltip]=\"chart()?.exporting() ? '' : 'Download'\"\n  placement=\"bottom\"\n  (click)=\"open()\">\n  <he-svg-icon name=\"download\" />\n</button>\n\n<ng-template #modal>\n  <!-- the chart may sit in a popover closing on outside clicks: keep it open, or the chart is gone -->\n  <div class=\"modal is-active\" (mousedown)=\"$event.stopPropagation()\">\n    <div class=\"modal-background\"></div>\n    <div class=\"modal-card\">\n      <header class=\"modal-card-head\">\n        <p class=\"modal-card-title\">Download Chart</p>\n        <button class=\"delete is-small\" aria-label=\"close\" type=\"button\" (click)=\"close()\"></button>\n      </header>\n      <section class=\"modal-card-body\">\n        <p class=\"has-text-secondary is-mb-2\">Download chart as:</p>\n        <div class=\"is-flex is-flex-direction-column is-gap-4\">\n          @for (format of exportFormats(); track format.extension) {\n            <div class=\"is-flex is-gap-4\">\n              <div class=\"field is-mb-0\">\n                <input\n                  type=\"checkbox\"\n                  [id]=\"format.extension\"\n                  [checked]=\"exportFormat() === format.extension\"\n                  (change)=\"exportFormat.set(format.extension)\" />\n              </div>\n              <he-svg-icon name=\"image\" />\n              <label class=\"has-text-grey-dark is-clickable\" [for]=\"format.extension\">\n                {{ format.label }} (.{{ format.extension }})\n              </label>\n            </div>\n          }\n        </div>\n      </section>\n      <footer class=\"modal-card-foot\">\n        <button class=\"button is-primary\" [disabled]=\"!exportFormat()\" (click)=\"download()\">\n          @if (chart()?.exporting()) {\n            <he-svg-icon name=\"loading\" animation=\"spin\" />\n          } @else {\n            <he-svg-icon name=\"download\" />\n          }\n          <span class=\"is-pl-2\">Download</span>\n        </button>\n      </footer>\n    </div>\n  </div>\n</ng-template>\n" }]
         }], propDecorators: { modal: [{ type: i0.ViewChild, args: ['modal', { isSignal: true }] }], buttonClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "buttonClass", required: false }] }], chart: [{ type: i0.Input, args: [{ isSignal: true, alias: "chart", required: false }] }], config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: false }] }], exportFormats: [{ type: i0.Input, args: [{ isSignal: true, alias: "exportFormats", required: false }] }], chartExportFn: [{ type: i0.Input, args: [{ isSignal: true, alias: "chartExportFn", required: false }] }] } });
 
 const defaultSettings$5 = Object.freeze({
@@ -5928,6 +5958,10 @@ const defaultTicksFont = {
     family: 'Lato',
     size: 13
 };
+/**
+ * Maximum length of an axis label, past which the charts truncate it.
+ */
+const chartLabelMaxLength = 50;
 class ChartComponent {
     constructor() {
         this.data = input(undefined, ...(ngDevMode ? [{ debugName: "data" }] : []));
@@ -6064,19 +6098,46 @@ const afterBarDrawPlugin = settings => ({
     }
 });
 
+/**
+ * Hover handler turning the pointer into a cursor over a clickable axis label.
+ */
+const axisLabelCursor = ({ label, event }) => {
+    const canvas = event?.native?.target;
+    if (label && canvas) {
+        canvas.style.cursor = 'pointer';
+    }
+};
+const axisSettings = (chart) => (chart.config.options.plugins?.axisHover || {});
+const disabled = (chart, { onHoverLabel, onClickLabel }) => !chart.scales.y || (!onHoverLabel && !onClickLabel);
+const isOverAxis = (scale, event) => event.x != null && event.x >= scale.left && event.x <= scale.right;
+const tickAt = (scale, y, maxDistance) => {
+    const ticks = scale.getTicks();
+    const position = ticks.findIndex((_, index) => Math.abs(y - scale.getPixelForTick(index)) < maxDistance);
+    return position < 0 ? null : { index: ticks[position].value, y: scale.getPixelForTick(position) };
+};
+const labelAt = (chart, index) => (index >= 0 ? chart.data.labels[index] : '');
+const labelEvent = (chart, event, maxDistance) => {
+    const scale = chart.scales.y;
+    const tick = isOverAxis(scale, event) ? tickAt(scale, event.y, maxDistance) : null;
+    const index = tick ? tick.index : -1;
+    return {
+        label: labelAt(chart, index),
+        index,
+        anchorX: (scale.left + scale.right) / 2,
+        anchorY: (tick ? tick.y : event.y) + maxDistance,
+        event
+    };
+};
+const notifyClick = ({ onClickLabel }, data) => data.index >= 0 && data.event.type === 'click' ? onClickLabel?.(data) : undefined;
 const axisHoverPlugin = {
     id: 'axisHover',
-    afterEvent(chart, args) {
-        const { event } = args;
-        const { maxDistance = 15, onHoverLabel } = (chart.config.options.plugins.axisHover ||
-            {});
-        const yScale = chart.scales.y;
-        const isOverYAxis = event.x >= yScale.left && event.x <= yScale.right;
-        const closestTick = isOverYAxis
-            ? yScale.getTicks().find((tick, index) => Math.abs(event.y - yScale.getPixelForTick(index)) < maxDistance)
-            : null;
-        const label = closestTick ? chart.data.labels[closestTick.value] : '';
-        onHoverLabel({ label, event });
+    afterEvent(chart, { event }) {
+        const settings = axisSettings(chart);
+        if (disabled(chart, settings))
+            return;
+        const data = labelEvent(chart, event, settings.maxDistance ?? 15);
+        settings.onHoverLabel?.(data);
+        notifyClick(settings, data);
     }
 };
 
@@ -6381,6 +6442,30 @@ const increaseScaleLimits = (scale, handleMinScaleZero = true) => {
     scale.max += padding;
 };
 
+// below the row being read, never on it, and never over the plot beside it
+const placements = ['bottom', 'top'];
+/**
+ * Hover and click behaviour for axis labels, which are drawn on the canvas and so can carry
+ * neither a `title` nor a link. The tooltip opens once per label rather than on every mouse move,
+ * and the pointer only becomes a cursor where a click does something.
+ */
+const axisLabelSettings = (tooltip, tooltipFn, clickFn) => {
+    let openIndex = -1;
+    const moveTooltip = (data) => {
+        openIndex >= 0 && tooltip()?.hide();
+        openIndex = data.index;
+        data.index >= 0 &&
+            tooltip()?.show(data, data.anchorX, data.anchorY, { container: 'body', placement: placements });
+    };
+    return {
+        onHoverLabel: data => {
+            clickFn() && data.label && axisLabelCursor(data);
+            data.index !== openIndex && moveTooltip(data);
+        },
+        onClickLabel: ({ index }) => clickFn()?.(index)
+    };
+};
+
 const registerChart = (items = []) => () => {
     Chart.register(BarController, LineController, CategoryScale, LinearScale, PointElement, BarElement, LineElement, Title, Tooltip, Legend, TimeScale, annotationPlugin, ...items);
 };
@@ -6451,7 +6536,7 @@ const defaultSettings$3 = Object.freeze({
                     },
                     callback: function (value) {
                         const label = this.getLabelForValue(value);
-                        return ellipsis$1(label, 50);
+                        return ellipsis$1(label, chartLabelMaxLength);
                     }
                 }
             }
@@ -6746,7 +6831,7 @@ const defaultSettings$2 = Object.freeze({
                     },
                     callback: function (value) {
                         const label = this.getLabelForValue(value);
-                        return ellipsis$1(label, 50);
+                        return ellipsis$1(label, chartLabelMaxLength);
                     }
                 }
             }
@@ -6874,6 +6959,14 @@ class ContributionChartComponent {
          * Override the default configuration.
          */
         this.config = input({}, ...(ngDevMode ? [{ debugName: "config" }] : []));
+        /**
+         * Tooltip shown when hovering an axis label. Without it the labels are not interactive.
+         */
+        this.axisTooltipFn = input(...(ngDevMode ? [undefined, { debugName: "axisTooltipFn" }] : []));
+        /**
+         * Called with the index of the axis label that was clicked.
+         */
+        this.axisLabelClickFn = input(...(ngDevMode ? [undefined, { debugName: "axisLabelClickFn" }] : []));
         this.minHeight = input(100, ...(ngDevMode ? [{ debugName: "minHeight" }] : []));
         this.maxHeight = input(400, ...(ngDevMode ? [{ debugName: "maxHeight" }] : []));
         this.height = input(0, ...(ngDevMode ? [{ debugName: "height" }] : []));
@@ -6883,6 +6976,10 @@ class ContributionChartComponent {
         this.category = input(undefined, ...(ngDevMode ? [{ debugName: "category" }] : []));
         this.chart = viewChild.required(ChartComponent);
         this.tooltip = viewChild.required(ChartTooltipComponent);
+        this.axisTooltip = viewChild('axisTooltip', ...(ngDevMode ? [{ debugName: "axisTooltip" }] : []));
+        this.axisSettings = axisLabelSettings(() => this.axisTooltip(), () => this.axisTooltipFn(), () => this.axisLabelClickFn());
+        this.axisEnabled = computed(() => !!this.axisTooltipFn() || !!this.axisLabelClickFn(), ...(ngDevMode ? [{ debugName: "axisEnabled" }] : []));
+        this.axisTooltipContent = computed(() => (data) => this.axisTooltipFn()?.(data.label, data.index) ?? '', ...(ngDevMode ? [{ debugName: "axisTooltipContent" }] : []));
         this.exporting = computed(() => this.chart()?.exporting(), ...(ngDevMode ? [{ debugName: "exporting" }] : []));
         this.chartHeight = computed(() => this.height() || chartHeight$1(this.minHeight(), this.maxHeight(), this.labels()?.length ?? 0), ...(ngDevMode ? [{ debugName: "chartHeight" }] : []));
         this.hasNegativeContributions = computed(() => this.displayData()?.some(value => value.values.some(v => v < 0)), ...(ngDevMode ? [{ debugName: "hasNegativeContributions" }] : []));
@@ -6890,6 +6987,7 @@ class ContributionChartComponent {
         this.defaultConfig = computed(() => ({
             options: {
                 onClick: (event, activeElements, chart) => this.onItemClick(event, activeElements, chart),
+                plugins: { axisHover: this.axisSettings },
                 scales: {
                     x: {
                         display: !this.responsiveService.isMobile(),
@@ -6912,7 +7010,8 @@ class ContributionChartComponent {
                 afterBarDrawPlugin({
                     placement: 'right',
                     textFn: ({ data }) => (isUndefined(data) ? 'No data' : '')
-                })
+                }),
+                ...(this.axisEnabled() ? [axisHoverPlugin] : [])
             ]
         }), ...(ngDevMode ? [{ debugName: "defaultConfig" }] : []));
         this.dataConfig = computed(() => ({
@@ -6958,12 +7057,12 @@ class ContributionChartComponent {
         return downloadFile(this.csvContent(), `${title}-contribution.csv`);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ContributionChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: ContributionChartComponent, isStandalone: true, selector: "he-contribution-chart", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, labels: { classPropertyName: "labels", publicName: "labels", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, showExportButton: { classPropertyName: "showExportButton", publicName: "showExportButton", isSignal: true, isRequired: false, transformFunction: null }, showLegend: { classPropertyName: "showLegend", publicName: "showLegend", isSignal: true, isRequired: false, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null }, minHeight: { classPropertyName: "minHeight", publicName: "minHeight", isSignal: true, isRequired: false, transformFunction: null }, maxHeight: { classPropertyName: "maxHeight", publicName: "maxHeight", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, category: { classPropertyName: "category", publicName: "category", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "chart", first: true, predicate: ChartComponent, descendants: true, isSignal: true }, { propertyName: "tooltip", first: true, predicate: ChartTooltipComponent, descendants: true, isSignal: true }], exportAs: ["contributionChart"], ngImport: i0, template: "<div class=\"is-relative\" [class.chart-area-border]=\"showLegend()\">\n  <he-chart\n    [data]=\"dataConfig()\"\n    [config]=\"configuration()\"\n    [showExportButton]=\"showExportButton()\"\n    [style.height.px]=\"chartHeight()\">\n    <he-chart-tooltip [tooltipFn]=\"tooltipFn\" />\n  </he-chart>\n\n  @if (!data()?.length) {\n    <div class=\"is-absolute w-100 h-100 | no-data\">\n      <div class=\"is-flex is-justify-content-center is-align-items-center w-100 h-100\">\n        <span class=\"is-size-7\">No contribution available.</span>\n      </div>\n    </div>\n  }\n</div>\n\n@if (showLegend()) {\n  <he-bar-chart-legend [data]=\"displayData()\" />\n}\n", styles: [":host{display:block}he-chart{height:400px}he-bar-chart-legend ::ng-deep .breakdown-legend--color{border-radius:3px}.no-data{top:0;background-color:#0000004d}\n"], dependencies: [{ kind: "component", type: ChartComponent, selector: "he-chart", inputs: ["data", "config", "showExportButton"], exportAs: ["chart"] }, { kind: "component", type: ChartTooltipComponent, selector: "he-chart-tooltip", inputs: ["tooltipFn"], exportAs: ["chartTooltip"] }, { kind: "component", type: BarChartLegendComponent, selector: "he-bar-chart-legend", inputs: ["data"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: ContributionChartComponent, isStandalone: true, selector: "he-contribution-chart", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, labels: { classPropertyName: "labels", publicName: "labels", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, showExportButton: { classPropertyName: "showExportButton", publicName: "showExportButton", isSignal: true, isRequired: false, transformFunction: null }, showLegend: { classPropertyName: "showLegend", publicName: "showLegend", isSignal: true, isRequired: false, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null }, axisTooltipFn: { classPropertyName: "axisTooltipFn", publicName: "axisTooltipFn", isSignal: true, isRequired: false, transformFunction: null }, axisLabelClickFn: { classPropertyName: "axisLabelClickFn", publicName: "axisLabelClickFn", isSignal: true, isRequired: false, transformFunction: null }, minHeight: { classPropertyName: "minHeight", publicName: "minHeight", isSignal: true, isRequired: false, transformFunction: null }, maxHeight: { classPropertyName: "maxHeight", publicName: "maxHeight", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, category: { classPropertyName: "category", publicName: "category", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "chart", first: true, predicate: ChartComponent, descendants: true, isSignal: true }, { propertyName: "tooltip", first: true, predicate: ChartTooltipComponent, descendants: true, isSignal: true }, { propertyName: "axisTooltip", first: true, predicate: ["axisTooltip"], descendants: true, isSignal: true }], exportAs: ["contributionChart"], ngImport: i0, template: "<div class=\"is-relative\" [class.chart-area-border]=\"showLegend()\">\n  <he-chart\n    [data]=\"dataConfig()\"\n    [config]=\"configuration()\"\n    [showExportButton]=\"showExportButton()\"\n    [style.height.px]=\"chartHeight()\">\n    <he-chart-tooltip [tooltipFn]=\"tooltipFn\" />\n    @if (axisEnabled()) {\n      <he-chart-tooltip #axisTooltip=\"chartTooltip\" [tooltipFn]=\"axisTooltipContent()\" />\n    }\n  </he-chart>\n\n  @if (!data()?.length) {\n    <div class=\"is-absolute w-100 h-100 | no-data\">\n      <div class=\"is-flex is-justify-content-center is-align-items-center w-100 h-100\">\n        <span class=\"is-size-7\">No contribution available.</span>\n      </div>\n    </div>\n  }\n</div>\n\n@if (showLegend()) {\n  <he-bar-chart-legend [data]=\"displayData()\" />\n}\n", styles: [":host{display:block}he-chart{height:400px}he-bar-chart-legend ::ng-deep .breakdown-legend--color{border-radius:3px}.no-data{top:0;background-color:#0000004d}\n"], dependencies: [{ kind: "component", type: ChartComponent, selector: "he-chart", inputs: ["data", "config", "showExportButton"], exportAs: ["chart"] }, { kind: "component", type: ChartTooltipComponent, selector: "he-chart-tooltip", inputs: ["tooltipFn"], exportAs: ["chartTooltip"] }, { kind: "component", type: BarChartLegendComponent, selector: "he-bar-chart-legend", inputs: ["data"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ContributionChartComponent, decorators: [{
             type: Component$1,
-            args: [{ selector: 'he-contribution-chart', exportAs: 'contributionChart', changeDetection: ChangeDetectionStrategy.OnPush, imports: [ChartComponent, ChartTooltipComponent, BarChartLegendComponent], template: "<div class=\"is-relative\" [class.chart-area-border]=\"showLegend()\">\n  <he-chart\n    [data]=\"dataConfig()\"\n    [config]=\"configuration()\"\n    [showExportButton]=\"showExportButton()\"\n    [style.height.px]=\"chartHeight()\">\n    <he-chart-tooltip [tooltipFn]=\"tooltipFn\" />\n  </he-chart>\n\n  @if (!data()?.length) {\n    <div class=\"is-absolute w-100 h-100 | no-data\">\n      <div class=\"is-flex is-justify-content-center is-align-items-center w-100 h-100\">\n        <span class=\"is-size-7\">No contribution available.</span>\n      </div>\n    </div>\n  }\n</div>\n\n@if (showLegend()) {\n  <he-bar-chart-legend [data]=\"displayData()\" />\n}\n", styles: [":host{display:block}he-chart{height:400px}he-bar-chart-legend ::ng-deep .breakdown-legend--color{border-radius:3px}.no-data{top:0;background-color:#0000004d}\n"] }]
-        }], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], labels: [{ type: i0.Input, args: [{ isSignal: true, alias: "labels", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], showExportButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showExportButton", required: false }] }], showLegend: [{ type: i0.Input, args: [{ isSignal: true, alias: "showLegend", required: false }] }], config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: false }] }], minHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "minHeight", required: false }] }], maxHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxHeight", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], category: [{ type: i0.Input, args: [{ isSignal: true, alias: "category", required: false }] }], chart: [{ type: i0.ViewChild, args: [i0.forwardRef(() => ChartComponent), { isSignal: true }] }], tooltip: [{ type: i0.ViewChild, args: [i0.forwardRef(() => ChartTooltipComponent), { isSignal: true }] }] } });
+            args: [{ selector: 'he-contribution-chart', exportAs: 'contributionChart', changeDetection: ChangeDetectionStrategy.OnPush, imports: [ChartComponent, ChartTooltipComponent, BarChartLegendComponent], template: "<div class=\"is-relative\" [class.chart-area-border]=\"showLegend()\">\n  <he-chart\n    [data]=\"dataConfig()\"\n    [config]=\"configuration()\"\n    [showExportButton]=\"showExportButton()\"\n    [style.height.px]=\"chartHeight()\">\n    <he-chart-tooltip [tooltipFn]=\"tooltipFn\" />\n    @if (axisEnabled()) {\n      <he-chart-tooltip #axisTooltip=\"chartTooltip\" [tooltipFn]=\"axisTooltipContent()\" />\n    }\n  </he-chart>\n\n  @if (!data()?.length) {\n    <div class=\"is-absolute w-100 h-100 | no-data\">\n      <div class=\"is-flex is-justify-content-center is-align-items-center w-100 h-100\">\n        <span class=\"is-size-7\">No contribution available.</span>\n      </div>\n    </div>\n  }\n</div>\n\n@if (showLegend()) {\n  <he-bar-chart-legend [data]=\"displayData()\" />\n}\n", styles: [":host{display:block}he-chart{height:400px}he-bar-chart-legend ::ng-deep .breakdown-legend--color{border-radius:3px}.no-data{top:0;background-color:#0000004d}\n"] }]
+        }], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], labels: [{ type: i0.Input, args: [{ isSignal: true, alias: "labels", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], showExportButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showExportButton", required: false }] }], showLegend: [{ type: i0.Input, args: [{ isSignal: true, alias: "showLegend", required: false }] }], config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: false }] }], axisTooltipFn: [{ type: i0.Input, args: [{ isSignal: true, alias: "axisTooltipFn", required: false }] }], axisLabelClickFn: [{ type: i0.Input, args: [{ isSignal: true, alias: "axisLabelClickFn", required: false }] }], minHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "minHeight", required: false }] }], maxHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxHeight", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], category: [{ type: i0.Input, args: [{ isSignal: true, alias: "category", required: false }] }], chart: [{ type: i0.ViewChild, args: [i0.forwardRef(() => ChartComponent), { isSignal: true }] }], tooltip: [{ type: i0.ViewChild, args: [i0.forwardRef(() => ChartTooltipComponent), { isSignal: true }] }], axisTooltip: [{ type: i0.ViewChild, args: ['axisTooltip', { isSignal: true }] }] } });
 
 const colors = {
     darkBlue: 'rgba(25, 57, 87, 1)',
@@ -7423,9 +7522,21 @@ class HorizontalBarChartComponent extends BarChartComponent {
         super(...arguments);
         this.tooltipFn = input(defaultTooltipFn, ...(ngDevMode ? [{ debugName: "tooltipFn" }] : []));
         this.afterBarDrawSettings = input(...(ngDevMode ? [undefined, { debugName: "afterBarDrawSettings" }] : []));
+        /**
+         * Tooltip shown when hovering an axis label. Without it the labels are not interactive.
+         */
+        this.axisTooltipFn = input(...(ngDevMode ? [undefined, { debugName: "axisTooltipFn" }] : []));
+        /**
+         * Called with the index of the axis label that was clicked.
+         */
+        this.axisLabelClickFn = input(...(ngDevMode ? [undefined, { debugName: "axisLabelClickFn" }] : []));
         this.minHeight = input(100, ...(ngDevMode ? [{ debugName: "minHeight" }] : []));
         this.maxHeight = input(400, ...(ngDevMode ? [{ debugName: "maxHeight" }] : []));
         this.tooltip = viewChild.required(ChartTooltipComponent);
+        this.axisTooltip = viewChild('axisTooltip', ...(ngDevMode ? [{ debugName: "axisTooltip" }] : []));
+        this.axisSettings = axisLabelSettings(() => this.axisTooltip(), () => this.axisTooltipFn(), () => this.axisLabelClickFn());
+        this.axisEnabled = computed(() => !!this.axisTooltipFn() || !!this.axisLabelClickFn(), ...(ngDevMode ? [{ debugName: "axisEnabled" }] : []));
+        this.axisTooltipContent = computed(() => (data) => this.axisTooltipFn()?.(data.label, data.index) ?? '', ...(ngDevMode ? [{ debugName: "axisTooltipContent" }] : []));
         this.height = computed(() => chartHeight(this.minHeight(), this.maxHeight(), this.maximumData()?.length ?? 0), ...(ngDevMode ? [{ debugName: "height" }] : []));
         this.horizontalConfiguration = computed(() => ({
             ...merge$1(this.configuration(), defaultConfig, {
@@ -7435,6 +7546,7 @@ class HorizontalBarChartComponent extends BarChartComponent {
                         const data = this.maximumData()[index];
                         !isUndefined(index) && this.tooltip().show({ ...data, index }, event.x, event.y, { container: 'body' });
                     },
+                    plugins: { axisHover: this.axisSettings },
                     scales: {
                         x: {
                             grid: {
@@ -7451,17 +7563,18 @@ class HorizontalBarChartComponent extends BarChartComponent {
                 lollipopChartPlugin(),
                 backgroundHoverPlugin({ threshold: 5 }),
                 afterBarDrawPlugin(this.afterBarDrawSettings()),
+                ...(this.axisEnabled() ? [axisHoverPlugin] : []),
                 ...(this.configuration().plugins ?? [])
             ]
         }), ...(ngDevMode ? [{ debugName: "horizontalConfiguration" }] : []));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: HorizontalBarChartComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.0.6", type: HorizontalBarChartComponent, isStandalone: true, selector: "he-horizontal-bar-chart", inputs: { tooltipFn: { classPropertyName: "tooltipFn", publicName: "tooltipFn", isSignal: true, isRequired: false, transformFunction: null }, afterBarDrawSettings: { classPropertyName: "afterBarDrawSettings", publicName: "afterBarDrawSettings", isSignal: true, isRequired: false, transformFunction: null }, minHeight: { classPropertyName: "minHeight", publicName: "minHeight", isSignal: true, isRequired: false, transformFunction: null }, maxHeight: { classPropertyName: "maxHeight", publicName: "maxHeight", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "tooltip", first: true, predicate: ChartTooltipComponent, descendants: true, isSignal: true }], exportAs: ["horizontalBarChart"], usesInheritance: true, ngImport: i0, template: "<div class=\"chart-area-border\">\n  <he-chart\n    class=\"is-relative h-100\"\n    [data]=\"dataConfig()\"\n    [config]=\"horizontalConfiguration()\"\n    [showExportButton]=\"showExportButton()\"\n    [style.height.px]=\"height()\">\n    <he-chart-tooltip [tooltipFn]=\"tooltipFn()\" />\n\n    <ng-content />\n  </he-chart>\n</div>\n\n<he-bar-chart-legend class=\"is-hidden-tablet\" [data]=\"maximumData()\" />\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "component", type: ChartComponent, selector: "he-chart", inputs: ["data", "config", "showExportButton"], exportAs: ["chart"] }, { kind: "component", type: ChartTooltipComponent, selector: "he-chart-tooltip", inputs: ["tooltipFn"], exportAs: ["chartTooltip"] }, { kind: "component", type: BarChartLegendComponent, selector: "he-bar-chart-legend", inputs: ["data"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: HorizontalBarChartComponent, isStandalone: true, selector: "he-horizontal-bar-chart", inputs: { tooltipFn: { classPropertyName: "tooltipFn", publicName: "tooltipFn", isSignal: true, isRequired: false, transformFunction: null }, afterBarDrawSettings: { classPropertyName: "afterBarDrawSettings", publicName: "afterBarDrawSettings", isSignal: true, isRequired: false, transformFunction: null }, axisTooltipFn: { classPropertyName: "axisTooltipFn", publicName: "axisTooltipFn", isSignal: true, isRequired: false, transformFunction: null }, axisLabelClickFn: { classPropertyName: "axisLabelClickFn", publicName: "axisLabelClickFn", isSignal: true, isRequired: false, transformFunction: null }, minHeight: { classPropertyName: "minHeight", publicName: "minHeight", isSignal: true, isRequired: false, transformFunction: null }, maxHeight: { classPropertyName: "maxHeight", publicName: "maxHeight", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "tooltip", first: true, predicate: ChartTooltipComponent, descendants: true, isSignal: true }, { propertyName: "axisTooltip", first: true, predicate: ["axisTooltip"], descendants: true, isSignal: true }], exportAs: ["horizontalBarChart"], usesInheritance: true, ngImport: i0, template: "<div class=\"chart-area-border\">\n  <he-chart\n    class=\"is-relative h-100\"\n    [data]=\"dataConfig()\"\n    [config]=\"horizontalConfiguration()\"\n    [showExportButton]=\"showExportButton()\"\n    [style.height.px]=\"height()\">\n    <he-chart-tooltip [tooltipFn]=\"tooltipFn()\" />\n    @if (axisEnabled()) {\n      <he-chart-tooltip #axisTooltip=\"chartTooltip\" [tooltipFn]=\"axisTooltipContent()\" />\n    }\n\n    <ng-content />\n  </he-chart>\n</div>\n\n<he-bar-chart-legend class=\"is-hidden-tablet\" [data]=\"maximumData()\" />\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "component", type: ChartComponent, selector: "he-chart", inputs: ["data", "config", "showExportButton"], exportAs: ["chart"] }, { kind: "component", type: ChartTooltipComponent, selector: "he-chart-tooltip", inputs: ["tooltipFn"], exportAs: ["chartTooltip"] }, { kind: "component", type: BarChartLegendComponent, selector: "he-bar-chart-legend", inputs: ["data"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: HorizontalBarChartComponent, decorators: [{
             type: Component$1,
-            args: [{ selector: 'he-horizontal-bar-chart', exportAs: 'horizontalBarChart', changeDetection: ChangeDetectionStrategy.OnPush, imports: [ChartComponent, ChartTooltipComponent, BarChartLegendComponent], template: "<div class=\"chart-area-border\">\n  <he-chart\n    class=\"is-relative h-100\"\n    [data]=\"dataConfig()\"\n    [config]=\"horizontalConfiguration()\"\n    [showExportButton]=\"showExportButton()\"\n    [style.height.px]=\"height()\">\n    <he-chart-tooltip [tooltipFn]=\"tooltipFn()\" />\n\n    <ng-content />\n  </he-chart>\n</div>\n\n<he-bar-chart-legend class=\"is-hidden-tablet\" [data]=\"maximumData()\" />\n", styles: [":host{display:block}\n"] }]
-        }], propDecorators: { tooltipFn: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltipFn", required: false }] }], afterBarDrawSettings: [{ type: i0.Input, args: [{ isSignal: true, alias: "afterBarDrawSettings", required: false }] }], minHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "minHeight", required: false }] }], maxHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxHeight", required: false }] }], tooltip: [{ type: i0.ViewChild, args: [i0.forwardRef(() => ChartTooltipComponent), { isSignal: true }] }] } });
+            args: [{ selector: 'he-horizontal-bar-chart', exportAs: 'horizontalBarChart', changeDetection: ChangeDetectionStrategy.OnPush, imports: [ChartComponent, ChartTooltipComponent, BarChartLegendComponent], template: "<div class=\"chart-area-border\">\n  <he-chart\n    class=\"is-relative h-100\"\n    [data]=\"dataConfig()\"\n    [config]=\"horizontalConfiguration()\"\n    [showExportButton]=\"showExportButton()\"\n    [style.height.px]=\"height()\">\n    <he-chart-tooltip [tooltipFn]=\"tooltipFn()\" />\n    @if (axisEnabled()) {\n      <he-chart-tooltip #axisTooltip=\"chartTooltip\" [tooltipFn]=\"axisTooltipContent()\" />\n    }\n\n    <ng-content />\n  </he-chart>\n</div>\n\n<he-bar-chart-legend class=\"is-hidden-tablet\" [data]=\"maximumData()\" />\n", styles: [":host{display:block}\n"] }]
+        }], propDecorators: { tooltipFn: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltipFn", required: false }] }], afterBarDrawSettings: [{ type: i0.Input, args: [{ isSignal: true, alias: "afterBarDrawSettings", required: false }] }], axisTooltipFn: [{ type: i0.Input, args: [{ isSignal: true, alias: "axisTooltipFn", required: false }] }], axisLabelClickFn: [{ type: i0.Input, args: [{ isSignal: true, alias: "axisLabelClickFn", required: false }] }], minHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "minHeight", required: false }] }], maxHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxHeight", required: false }] }], tooltip: [{ type: i0.ViewChild, args: [i0.forwardRef(() => ChartTooltipComponent), { isSignal: true }] }], axisTooltip: [{ type: i0.ViewChild, args: ['axisTooltip', { isSignal: true }] }] } });
 
 const primaryProduct = ({ products }) => (products || []).find(({ primary }) => primary);
 /**
@@ -8095,6 +8208,12 @@ const nodeLinkEnabled = (node) => [
         isExternal() && !!node.id
     ].some(Boolean)
 ].every(Boolean);
+/**
+ * Open a node's page, as `he-node-link` would.
+ */
+const openNodeUrl = (node, dataVersion) => nodeLinkEnabled(node)
+    ? openUrl([baseUrl(), nodeLink(node, nodeDataState(node), nodeDataVersion(node) || dataVersion)].join('/'), isExternal() ? '_blank' : '_self')
+    : undefined;
 var NodeQualityScore;
 (function (NodeQualityScore) {
     NodeQualityScore["low"] = "Low";
@@ -9483,11 +9602,11 @@ class FormulaBlockComponent {
         this.substituted.set(!this.substituted());
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: FormulaBlockComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: FormulaBlockComponent, isStandalone: true, selector: "he-formula-block", inputs: { formulas: { classPropertyName: "formulas", publicName: "formulas", isSignal: true, isRequired: false, transformFunction: null }, hasSubstitutions: { classPropertyName: "hasSubstitutions", publicName: "hasSubstitutions", isSignal: true, isRequired: false, transformFunction: null }, emptyTitle: { classPropertyName: "emptyTitle", publicName: "emptyTitle", isSignal: true, isRequired: false, transformFunction: null }, heading: { classPropertyName: "heading", publicName: "heading", isSignal: true, isRequired: false, transformFunction: null }, note: { classPropertyName: "note", publicName: "note", isSignal: true, isRequired: false, transformFunction: null }, showToggle: { classPropertyName: "showToggle", publicName: "showToggle", isSignal: true, isRequired: false, transformFunction: null }, collapsible: { classPropertyName: "collapsible", publicName: "collapsible", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, substituted: { classPropertyName: "substituted", publicName: "substituted", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange", substituted: "substitutedChange" }, ngImport: i0, template: "@if (items().length) {\n  <he-collapsible-block [heading]=\"blockHeading()\" [collapsible]=\"collapsible()\" [(open)]=\"open\">\n    @if (showToggle()) {\n      <div blockActions class=\"field\">\n        <input\n          type=\"checkbox\"\n          class=\"switch is-small is-rounded\"\n          [id]=\"toggleId\"\n          [checked]=\"substituted()\"\n          [disabled]=\"!hasSubstitutions()\"\n          (change)=\"toggle()\" />\n        <label [for]=\"toggleId\" [title]=\"hasSubstitutions() ? '' : emptyTitle()\">\n          <span>{{ substituted() ? 'Substituted' : 'Raw' }}</span>\n        </label>\n      </div>\n    }\n\n    <div class=\"formula-block\">\n      @if (note()) {\n        <p class=\"is-size-8 is-mb-1 | formula-note\">{{ note() }}</p>\n      }\n\n      @for (item of items(); track $index) {\n        @if (item.section) {\n          <p class=\"is-size-8 is-uppercase has-text-weight-semibold is-mt-2 | formula-section\">{{ item.section }}</p>\n        }\n\n        @if (item.contextParts.length) {\n          <p class=\"is-size-7 is-mt-1 | formula-context\">\n            <ng-container *ngTemplateOutlet=\"textParts; context: { parts: item.contextParts }\" />\n          </p>\n        }\n\n        <div class=\"formula\" [heKatex]=\"item.rendered\"></div>\n\n        @if (item.variables.length) {\n          <ul class=\"is-size-7 is-mt-1 is-mb-2 is-list-style-disc | formula-variables\">\n            @for (variable of item.variables; track $index) {\n              <li>\n                <div class=\"is-flex is-align-items-baseline is-gap-4\">\n                  <span class=\"formula-variable-symbol is-nowrap\">\n                    <span [heKatex]=\"variable.symbol\" [heKatexInline]=\"true\"></span>\n                    @if (variable.descriptionParts.length) {\n                      <span>:</span>\n                    }\n                  </span>\n                  @if (variable.descriptionParts.length) {\n                    <span class=\"is-italic | formula-variable-desc\">\n                      <ng-container *ngTemplateOutlet=\"textParts; context: { parts: variable.descriptionParts }\" />\n                    </span>\n                  }\n                  @if (variable.note) {\n                    <span class=\"formula-variable-note\">({{ variable.note }})</span>\n                  } @else if (variable.missing) {\n                    <span class=\"has-text-warning\">(missing)</span>\n                  }\n                </div>\n              </li>\n            }\n          </ul>\n        }\n      }\n    </div>\n  </he-collapsible-block>\n}\n\n<!-- documentation text: the symbols it names render as math, the rest as markdown -->\n<ng-template #textParts let-parts=\"parts\">\n  @for (part of parts; track $index) {\n    @if (part.math) {\n      <span class=\"formula-inline-math\" [heKatex]=\"part.math\" [heKatexInline]=\"true\"></span>\n    } @else {\n      <markdown class=\"is-inline-block\" [data]=\"part.text\" />\n    }\n  }\n</ng-template>\n", styles: [":host{display:block}.formula-section{opacity:.7;letter-spacing:.03em}.formula-note{opacity:.7}.formula-context{opacity:.9}.formula-variables{padding-inline-start:1rem}.formula-variable-symbol{flex-shrink:0}.formula-variable-symbol ::ng-deep .katex{font-size:1em}.formula-variable-desc{opacity:.85}.formula-variable-note{opacity:.7;white-space:nowrap}.formula-context ::ng-deep markdown,.formula-context ::ng-deep markdown *,.formula-variable-desc ::ng-deep markdown,.formula-variable-desc ::ng-deep markdown *{display:inline;margin:0;white-space:pre-wrap}.formula-context .formula-inline-math ::ng-deep .katex,.formula-variable-desc .formula-inline-math ::ng-deep .katex{font-size:1em}.formula{overflow-x:auto;overflow-y:hidden}.formula ::ng-deep .katex-display{margin:.35rem 0}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: KatexDirective, selector: "[heKatex]", inputs: ["heKatex", "heKatexInline"] }, { kind: "component", type: MarkdownComponent, selector: "markdown, [markdown]", inputs: ["data", "src", "disableSanitizer", "inline", "clipboard", "clipboardButtonComponent", "clipboardButtonTemplate", "emoji", "katex", "katexOptions", "mermaid", "mermaidOptions", "lineHighlight", "line", "lineOffset", "lineNumbers", "start", "commandLine", "filterOutput", "host", "prompt", "output", "user"], outputs: ["error", "load", "ready"] }, { kind: "component", type: CollapsibleBlockComponent, selector: "he-collapsible-block", inputs: ["heading", "collapsible", "open"], outputs: ["openChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: FormulaBlockComponent, isStandalone: true, selector: "he-formula-block", inputs: { formulas: { classPropertyName: "formulas", publicName: "formulas", isSignal: true, isRequired: false, transformFunction: null }, hasSubstitutions: { classPropertyName: "hasSubstitutions", publicName: "hasSubstitutions", isSignal: true, isRequired: false, transformFunction: null }, emptyTitle: { classPropertyName: "emptyTitle", publicName: "emptyTitle", isSignal: true, isRequired: false, transformFunction: null }, heading: { classPropertyName: "heading", publicName: "heading", isSignal: true, isRequired: false, transformFunction: null }, note: { classPropertyName: "note", publicName: "note", isSignal: true, isRequired: false, transformFunction: null }, showToggle: { classPropertyName: "showToggle", publicName: "showToggle", isSignal: true, isRequired: false, transformFunction: null }, collapsible: { classPropertyName: "collapsible", publicName: "collapsible", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, substituted: { classPropertyName: "substituted", publicName: "substituted", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange", substituted: "substitutedChange" }, ngImport: i0, template: "@if (items().length) {\n  <he-collapsible-block [heading]=\"blockHeading()\" [collapsible]=\"collapsible()\" [(open)]=\"open\">\n    @if (showToggle()) {\n      <div blockActions class=\"field\">\n        <input\n          type=\"checkbox\"\n          class=\"switch is-small is-rounded\"\n          [id]=\"toggleId\"\n          [checked]=\"substituted()\"\n          [disabled]=\"!hasSubstitutions()\"\n          (change)=\"toggle()\" />\n        <label [for]=\"toggleId\" [title]=\"hasSubstitutions() ? '' : emptyTitle()\">\n          <span>{{ substituted() ? 'Substituted' : 'Raw' }}</span>\n        </label>\n      </div>\n    }\n\n    <div class=\"formula-block\">\n      @if (note()) {\n        <p class=\"is-size-8 is-mb-1 | formula-note\">{{ note() }}</p>\n      }\n\n      @for (item of items(); track $index) {\n        @if (item.section) {\n          <p class=\"is-size-8 is-uppercase has-text-weight-semibold is-mt-2 | formula-section\">{{ item.section }}</p>\n        }\n\n        @if (item.contextParts.length) {\n          <p class=\"is-size-7 is-mt-1 | formula-context\">\n            <ng-container *ngTemplateOutlet=\"textParts; context: { parts: item.contextParts }\" />\n          </p>\n        }\n\n        <div class=\"formula\" [heKatex]=\"item.rendered\"></div>\n\n        @if (item.variables.length) {\n          <ul class=\"is-size-7 is-mt-1 is-mb-2 is-list-style-disc | formula-variables\">\n            @for (variable of item.variables; track $index) {\n              <li>\n                <div class=\"is-flex is-align-items-baseline is-gap-4\">\n                  <span class=\"formula-variable-symbol is-nowrap\">\n                    <span [heKatex]=\"variable.symbol\" [heKatexInline]=\"true\"></span>\n                    @if (variable.descriptionParts.length) {\n                      <span>:</span>\n                    }\n                  </span>\n                  @if (variable.descriptionParts.length) {\n                    <span class=\"is-italic | formula-variable-desc\">\n                      <ng-container *ngTemplateOutlet=\"textParts; context: { parts: variable.descriptionParts }\" />\n                    </span>\n                  }\n                  @if (variable.note) {\n                    <span class=\"formula-variable-note\">({{ variable.note }})</span>\n                  } @else if (variable.missing) {\n                    <span class=\"has-text-warning\">(missing)</span>\n                  }\n                </div>\n              </li>\n            }\n          </ul>\n        }\n      }\n    </div>\n  </he-collapsible-block>\n}\n\n<!-- documentation text: the symbols it names render as math, the rest as markdown -->\n<ng-template #textParts let-parts=\"parts\">\n  @for (part of parts; track $index) {\n    @if (part.math) {\n      <span class=\"formula-inline-math\" [heKatex]=\"part.math\" [heKatexInline]=\"true\"></span>\n    } @else {\n      <markdown [data]=\"part.text\" />\n    }\n  }\n</ng-template>\n", styles: [":host{display:block}.formula-section{opacity:.7;letter-spacing:.03em}.formula-note{opacity:.7}.formula-context{opacity:.9}.formula-variables{padding-inline-start:1rem}.formula-variable-symbol{flex-shrink:0}.formula-variable-symbol ::ng-deep .katex{font-size:1em}.formula-variable-desc{opacity:.85}.formula-variable-note{opacity:.7;white-space:nowrap}.formula-context ::ng-deep markdown,.formula-context ::ng-deep markdown *,.formula-variable-desc ::ng-deep markdown,.formula-variable-desc ::ng-deep markdown *{display:inline;margin:0;white-space:pre-wrap}.formula-context .formula-inline-math ::ng-deep .katex,.formula-variable-desc .formula-inline-math ::ng-deep .katex{font-size:1em}.formula{overflow-x:auto;overflow-y:hidden}.formula ::ng-deep .katex-display{margin:.35rem 0}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: KatexDirective, selector: "[heKatex]", inputs: ["heKatex", "heKatexInline"] }, { kind: "component", type: MarkdownComponent, selector: "markdown, [markdown]", inputs: ["data", "src", "disableSanitizer", "inline", "clipboard", "clipboardButtonComponent", "clipboardButtonTemplate", "emoji", "katex", "katexOptions", "mermaid", "mermaidOptions", "lineHighlight", "line", "lineOffset", "lineNumbers", "start", "commandLine", "filterOutput", "host", "prompt", "output", "user"], outputs: ["error", "load", "ready"] }, { kind: "component", type: CollapsibleBlockComponent, selector: "he-collapsible-block", inputs: ["heading", "collapsible", "open"], outputs: ["openChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: FormulaBlockComponent, decorators: [{
             type: Component$1,
-            args: [{ selector: 'he-formula-block', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgTemplateOutlet, KatexDirective, MarkdownComponent, CollapsibleBlockComponent], template: "@if (items().length) {\n  <he-collapsible-block [heading]=\"blockHeading()\" [collapsible]=\"collapsible()\" [(open)]=\"open\">\n    @if (showToggle()) {\n      <div blockActions class=\"field\">\n        <input\n          type=\"checkbox\"\n          class=\"switch is-small is-rounded\"\n          [id]=\"toggleId\"\n          [checked]=\"substituted()\"\n          [disabled]=\"!hasSubstitutions()\"\n          (change)=\"toggle()\" />\n        <label [for]=\"toggleId\" [title]=\"hasSubstitutions() ? '' : emptyTitle()\">\n          <span>{{ substituted() ? 'Substituted' : 'Raw' }}</span>\n        </label>\n      </div>\n    }\n\n    <div class=\"formula-block\">\n      @if (note()) {\n        <p class=\"is-size-8 is-mb-1 | formula-note\">{{ note() }}</p>\n      }\n\n      @for (item of items(); track $index) {\n        @if (item.section) {\n          <p class=\"is-size-8 is-uppercase has-text-weight-semibold is-mt-2 | formula-section\">{{ item.section }}</p>\n        }\n\n        @if (item.contextParts.length) {\n          <p class=\"is-size-7 is-mt-1 | formula-context\">\n            <ng-container *ngTemplateOutlet=\"textParts; context: { parts: item.contextParts }\" />\n          </p>\n        }\n\n        <div class=\"formula\" [heKatex]=\"item.rendered\"></div>\n\n        @if (item.variables.length) {\n          <ul class=\"is-size-7 is-mt-1 is-mb-2 is-list-style-disc | formula-variables\">\n            @for (variable of item.variables; track $index) {\n              <li>\n                <div class=\"is-flex is-align-items-baseline is-gap-4\">\n                  <span class=\"formula-variable-symbol is-nowrap\">\n                    <span [heKatex]=\"variable.symbol\" [heKatexInline]=\"true\"></span>\n                    @if (variable.descriptionParts.length) {\n                      <span>:</span>\n                    }\n                  </span>\n                  @if (variable.descriptionParts.length) {\n                    <span class=\"is-italic | formula-variable-desc\">\n                      <ng-container *ngTemplateOutlet=\"textParts; context: { parts: variable.descriptionParts }\" />\n                    </span>\n                  }\n                  @if (variable.note) {\n                    <span class=\"formula-variable-note\">({{ variable.note }})</span>\n                  } @else if (variable.missing) {\n                    <span class=\"has-text-warning\">(missing)</span>\n                  }\n                </div>\n              </li>\n            }\n          </ul>\n        }\n      }\n    </div>\n  </he-collapsible-block>\n}\n\n<!-- documentation text: the symbols it names render as math, the rest as markdown -->\n<ng-template #textParts let-parts=\"parts\">\n  @for (part of parts; track $index) {\n    @if (part.math) {\n      <span class=\"formula-inline-math\" [heKatex]=\"part.math\" [heKatexInline]=\"true\"></span>\n    } @else {\n      <markdown class=\"is-inline-block\" [data]=\"part.text\" />\n    }\n  }\n</ng-template>\n", styles: [":host{display:block}.formula-section{opacity:.7;letter-spacing:.03em}.formula-note{opacity:.7}.formula-context{opacity:.9}.formula-variables{padding-inline-start:1rem}.formula-variable-symbol{flex-shrink:0}.formula-variable-symbol ::ng-deep .katex{font-size:1em}.formula-variable-desc{opacity:.85}.formula-variable-note{opacity:.7;white-space:nowrap}.formula-context ::ng-deep markdown,.formula-context ::ng-deep markdown *,.formula-variable-desc ::ng-deep markdown,.formula-variable-desc ::ng-deep markdown *{display:inline;margin:0;white-space:pre-wrap}.formula-context .formula-inline-math ::ng-deep .katex,.formula-variable-desc .formula-inline-math ::ng-deep .katex{font-size:1em}.formula{overflow-x:auto;overflow-y:hidden}.formula ::ng-deep .katex-display{margin:.35rem 0}\n"] }]
+            args: [{ selector: 'he-formula-block', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgTemplateOutlet, KatexDirective, MarkdownComponent, CollapsibleBlockComponent], template: "@if (items().length) {\n  <he-collapsible-block [heading]=\"blockHeading()\" [collapsible]=\"collapsible()\" [(open)]=\"open\">\n    @if (showToggle()) {\n      <div blockActions class=\"field\">\n        <input\n          type=\"checkbox\"\n          class=\"switch is-small is-rounded\"\n          [id]=\"toggleId\"\n          [checked]=\"substituted()\"\n          [disabled]=\"!hasSubstitutions()\"\n          (change)=\"toggle()\" />\n        <label [for]=\"toggleId\" [title]=\"hasSubstitutions() ? '' : emptyTitle()\">\n          <span>{{ substituted() ? 'Substituted' : 'Raw' }}</span>\n        </label>\n      </div>\n    }\n\n    <div class=\"formula-block\">\n      @if (note()) {\n        <p class=\"is-size-8 is-mb-1 | formula-note\">{{ note() }}</p>\n      }\n\n      @for (item of items(); track $index) {\n        @if (item.section) {\n          <p class=\"is-size-8 is-uppercase has-text-weight-semibold is-mt-2 | formula-section\">{{ item.section }}</p>\n        }\n\n        @if (item.contextParts.length) {\n          <p class=\"is-size-7 is-mt-1 | formula-context\">\n            <ng-container *ngTemplateOutlet=\"textParts; context: { parts: item.contextParts }\" />\n          </p>\n        }\n\n        <div class=\"formula\" [heKatex]=\"item.rendered\"></div>\n\n        @if (item.variables.length) {\n          <ul class=\"is-size-7 is-mt-1 is-mb-2 is-list-style-disc | formula-variables\">\n            @for (variable of item.variables; track $index) {\n              <li>\n                <div class=\"is-flex is-align-items-baseline is-gap-4\">\n                  <span class=\"formula-variable-symbol is-nowrap\">\n                    <span [heKatex]=\"variable.symbol\" [heKatexInline]=\"true\"></span>\n                    @if (variable.descriptionParts.length) {\n                      <span>:</span>\n                    }\n                  </span>\n                  @if (variable.descriptionParts.length) {\n                    <span class=\"is-italic | formula-variable-desc\">\n                      <ng-container *ngTemplateOutlet=\"textParts; context: { parts: variable.descriptionParts }\" />\n                    </span>\n                  }\n                  @if (variable.note) {\n                    <span class=\"formula-variable-note\">({{ variable.note }})</span>\n                  } @else if (variable.missing) {\n                    <span class=\"has-text-warning\">(missing)</span>\n                  }\n                </div>\n              </li>\n            }\n          </ul>\n        }\n      }\n    </div>\n  </he-collapsible-block>\n}\n\n<!-- documentation text: the symbols it names render as math, the rest as markdown -->\n<ng-template #textParts let-parts=\"parts\">\n  @for (part of parts; track $index) {\n    @if (part.math) {\n      <span class=\"formula-inline-math\" [heKatex]=\"part.math\" [heKatexInline]=\"true\"></span>\n    } @else {\n      <markdown [data]=\"part.text\" />\n    }\n  }\n</ng-template>\n", styles: [":host{display:block}.formula-section{opacity:.7;letter-spacing:.03em}.formula-note{opacity:.7}.formula-context{opacity:.9}.formula-variables{padding-inline-start:1rem}.formula-variable-symbol{flex-shrink:0}.formula-variable-symbol ::ng-deep .katex{font-size:1em}.formula-variable-desc{opacity:.85}.formula-variable-note{opacity:.7;white-space:nowrap}.formula-context ::ng-deep markdown,.formula-context ::ng-deep markdown *,.formula-variable-desc ::ng-deep markdown,.formula-variable-desc ::ng-deep markdown *{display:inline;margin:0;white-space:pre-wrap}.formula-context .formula-inline-math ::ng-deep .katex,.formula-variable-desc .formula-inline-math ::ng-deep .katex{font-size:1em}.formula{overflow-x:auto;overflow-y:hidden}.formula ::ng-deep .katex-display{margin:.35rem 0}\n"] }]
         }], propDecorators: { formulas: [{ type: i0.Input, args: [{ isSignal: true, alias: "formulas", required: false }] }], hasSubstitutions: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasSubstitutions", required: false }] }], emptyTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyTitle", required: false }] }], heading: [{ type: i0.Input, args: [{ isSignal: true, alias: "heading", required: false }] }], note: [{ type: i0.Input, args: [{ isSignal: true, alias: "note", required: false }] }], showToggle: [{ type: i0.Input, args: [{ isSignal: true, alias: "showToggle", required: false }] }], collapsible: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsible", required: false }] }], open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], substituted: [{ type: i0.Input, args: [{ isSignal: true, alias: "substituted", required: false }] }, { type: i0.Output, args: ["substitutedChange"] }] } });
 
 const isMissing$1 = (value) => value === undefined || value === null || value === '';
@@ -10949,7 +11068,6 @@ const methodIdLabel$1 = (methodId) => (methodId
 const modelKeyLabel = {
     'input.hestiaAggregatedData': 'HESTIA aggregated data'
 };
-const termSearch$1 = (term = '') => term.replace(/[,\s]/g, '').toLowerCase();
 class NodeJLogModelsComponent {
     constructor() {
         this.searchService = inject(HeSearchService);
@@ -11052,7 +11170,7 @@ class NodeJLogModelsComponent {
             .filter(Boolean), ...(ngDevMode ? [{ debugName: "allTerms" }] : []));
         this.enableFilterByTerm = computed(() => this.allTerms().length > 0, ...(ngDevMode ? [{ debugName: "enableFilterByTerm" }] : []));
         this.termFormatter = ({ name }) => name;
-        this.suggestTerm = (text$) => text$.pipe(distinctUntilChanged(), map(value => this.allTerms().filter(v => termSearch$1(v.name).includes(termSearch$1(value)))));
+        this.suggestTerm = (text$) => text$.pipe(distinctUntilChanged(), map(value => suggestTerms(this.allTerms(), value)));
         this.methodsById = toSignal(this.searchTerms({
             bool: { must: [matchType(NodeType.Term), { match: { termType: TermTermType.model } }] }
         }).pipe(map(groupTerms$1)));
@@ -11199,7 +11317,6 @@ const orderBlankNodesByNodeKey = {
     })), ['methodTierOrder'], ['asc']).map(({ value }) => value)
 };
 const orderBlankNodes = (blankNodes, nodeKey) => (orderBlankNodesByNodeKey[nodeKey] || (v => v))(blankNodes);
-const termSearch = (term = '') => term.replace(/[,\s]/g, '').toLowerCase();
 const functionalUnit = {
     [NodeType.Cycle]: (data) => data.functionalUnit === CycleFunctionalUnit['1 ha'] ? 'hectare' : 'functional unit',
     [NodeType.ImpactAssessment]: data => (data.product?.term?.units || data.term?.units) === 'kg'
@@ -11390,7 +11507,7 @@ class NodeLogsModelsComponent {
         this.term = signal(undefined, ...(ngDevMode ? [{ debugName: "term" }] : []));
         this.enableFilterByTerm = computed(() => this.allTerms()?.length > 0, ...(ngDevMode ? [{ debugName: "enableFilterByTerm" }] : []));
         this.termFormatter = ({ name }) => name;
-        this.suggestTerm = (text$) => text$.pipe(distinctUntilChanged(), map(v => this.suggestByTerm(v)));
+        this.suggestTerm = (text$) => text$.pipe(distinctUntilChanged(), map(value => suggestTerms(this.allTerms(), value)));
         this.typeaheadFocus = typeaheadFocus;
         this.loading = computed(() => [
             !this.logsResource.hasValue(),
@@ -11406,9 +11523,6 @@ class NodeLogsModelsComponent {
         ].some(Boolean), ...(ngDevMode ? [{ debugName: "loading" }] : []));
         this.isNumber = (value) => typeof value === 'number';
     }
-    suggestByTerm(term) {
-        return this.allTerms().filter(v => termSearch(v.name).includes(termSearch(term)));
-    }
     searchTerms(query, ...extraFields) {
         return this.searchService
             .search$({
@@ -11579,20 +11693,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
         }], ctorParameters: () => [], propDecorators: { dataState: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataState", required: false }] }], hideIdenticalValues: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideIdenticalValues", required: false }] }] } });
 
 const cycleValue = (cycle, values) => (values[nodeVersionKey(cycle)]?.nodes[0] || { value: [0] }).value;
-const cycleName = (cycle, index) => `${index + 1}. ${defaultLabel(cycle)}`;
 class CyclesEmissionsChartComponent {
     constructor() {
+        this.route = inject(ActivatedRoute);
         this.cycles = input.required(...(ngDevMode ? [{ debugName: "cycles" }] : []));
+        this.dataVersion = toSignal(this.route.queryParams.pipe(map(({ dataVersion }) => dataVersion)));
         this.emissionPerCycle = computed(() => groupNodesByTerm(this.cycles(), 'emissions'), ...(ngDevMode ? [{ debugName: "emissionPerCycle" }] : []));
         this.terms = computed(() => Object.values(this.emissionPerCycle() ?? {})
             .filter(({ values }) => Object.values(values).some(({ nodes: [{ value }] }) => propertyValue$1(value) > 0))
             .map(({ term }) => term)
             .sort((a, b) => a.name.localeCompare(b.name)), ...(ngDevMode ? [{ debugName: "terms" }] : []));
         this.selectedTerm = signal(undefined, ...(ngDevMode ? [{ debugName: "selectedTerm" }] : []));
-        this.labels = computed(() => this.cycles().map(cycleName), ...(ngDevMode ? [{ debugName: "labels" }] : []));
+        this.labels = computed(() => nodeChartLabels(this.cycles(), chartLabelMaxLength), ...(ngDevMode ? [{ debugName: "labels" }] : []));
+        this.axisTooltipFn = (label, index) => this.cycleLabelTooltip(index) || label;
+        this.axisLabelClickFn = index => this.openCycle(index);
         this.chartValues = computed(() => this.emissionPerCycle()?.[this.selectedTerm()?.name]?.values || {}, ...(ngDevMode ? [{ debugName: "chartValues" }] : []));
         this.chartData = computed(() => this.cycles().map((cycle, index) => ({
-            label: cycleName(cycle, index),
+            label: this.labels()[index],
             count: propertyValue$1(cycleValue(cycle, this.chartValues()), this.selectedTerm?.['@id']),
             color: listColor(cycle, index)
         })), ...(ngDevMode ? [{ debugName: "chartData" }] : []));
@@ -11609,12 +11726,20 @@ class CyclesEmissionsChartComponent {
         const term = this.terms().find(term => term['@id'] === value);
         this.selectedTerm.set(term);
     }
+    cycleLabelTooltip(index) {
+        const cycle = this.cycles()[index];
+        return cycle ? [`${index + 1}. ${defaultLabel(cycle)}`, cycle['@id']].filter(Boolean).join('<br />') : '';
+    }
+    openCycle(index) {
+        const cycle = this.cycles()[index];
+        return cycle ? openNodeUrl(cycle, this.dataVersion()) : undefined;
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CyclesEmissionsChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: CyclesEmissionsChartComponent, isStandalone: true, selector: "he-cycles-emissions-chart", inputs: { cycles: { classPropertyName: "cycles", publicName: "cycles", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div class=\"is-flex is-gap-8 is-justify-content-space-between is-align-items-center is-mb-3\">\n  <he-chart-export-button [chart]=\"chart\" [config]=\"{ lollipopConfig: null }\" />\n\n  <ng-content />\n</div>\n\n@if (terms().length) {\n  <div class=\"field\">\n    <div class=\"control is-expanded\">\n      <div class=\"select is-small is-fullwidth\">\n        <select (change)=\"selectTerm($event)\" id=\"selectTerm\">\n          @for (term of terms(); track term) {\n            <option [value]=\"term['@id']\">{{ term.name }}</option>\n          }\n        </select>\n      </div>\n    </div>\n  </div>\n}\n\n<he-horizontal-bar-chart\n  #chart=\"horizontalBarChart\"\n  class=\"is-relative h-100\"\n  [title]=\"selectedTerm()?.units\"\n  [data]=\"chartData()\"\n  [labels]=\"labels()\"\n  [showExportButton]=\"false\" />\n", styles: [":host{display:block;overflow:visible}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "component", type: HorizontalBarChartComponent, selector: "he-horizontal-bar-chart", inputs: ["tooltipFn", "afterBarDrawSettings", "minHeight", "maxHeight"], exportAs: ["horizontalBarChart"] }, { kind: "component", type: ChartExportButtonComponent, selector: "he-chart-export-button", inputs: ["buttonClass", "chart", "config", "exportFormats", "chartExportFn"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: CyclesEmissionsChartComponent, isStandalone: true, selector: "he-cycles-emissions-chart", inputs: { cycles: { classPropertyName: "cycles", publicName: "cycles", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div class=\"is-flex is-gap-8 is-justify-content-space-between is-align-items-center is-mb-3\">\n  <he-chart-export-button [chart]=\"chart\" [config]=\"{ lollipopConfig: null }\" />\n\n  <ng-content />\n</div>\n\n@if (terms().length) {\n  <div class=\"field\">\n    <div class=\"control is-expanded\">\n      <div class=\"select is-small is-fullwidth\">\n        <select (change)=\"selectTerm($event)\" id=\"selectTerm\">\n          @for (term of terms(); track term) {\n            <option [value]=\"term['@id']\">{{ term.name }}</option>\n          }\n        </select>\n      </div>\n    </div>\n  </div>\n}\n\n<he-horizontal-bar-chart\n  #chart=\"horizontalBarChart\"\n  class=\"is-relative h-100\"\n  [title]=\"selectedTerm()?.units\"\n  [data]=\"chartData()\"\n  [labels]=\"labels()\"\n  [axisTooltipFn]=\"axisTooltipFn\"\n  [axisLabelClickFn]=\"axisLabelClickFn\"\n  [showExportButton]=\"false\" />\n", styles: [":host{display:block;overflow:visible}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "component", type: HorizontalBarChartComponent, selector: "he-horizontal-bar-chart", inputs: ["tooltipFn", "afterBarDrawSettings", "axisTooltipFn", "axisLabelClickFn", "minHeight", "maxHeight"], exportAs: ["horizontalBarChart"] }, { kind: "component", type: ChartExportButtonComponent, selector: "he-chart-export-button", inputs: ["buttonClass", "chart", "config", "exportFormats", "chartExportFn"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CyclesEmissionsChartComponent, decorators: [{
             type: Component$1,
-            args: [{ selector: 'he-cycles-emissions-chart', changeDetection: ChangeDetectionStrategy.OnPush, imports: [FormsModule, HorizontalBarChartComponent, ChartExportButtonComponent], template: "<div class=\"is-flex is-gap-8 is-justify-content-space-between is-align-items-center is-mb-3\">\n  <he-chart-export-button [chart]=\"chart\" [config]=\"{ lollipopConfig: null }\" />\n\n  <ng-content />\n</div>\n\n@if (terms().length) {\n  <div class=\"field\">\n    <div class=\"control is-expanded\">\n      <div class=\"select is-small is-fullwidth\">\n        <select (change)=\"selectTerm($event)\" id=\"selectTerm\">\n          @for (term of terms(); track term) {\n            <option [value]=\"term['@id']\">{{ term.name }}</option>\n          }\n        </select>\n      </div>\n    </div>\n  </div>\n}\n\n<he-horizontal-bar-chart\n  #chart=\"horizontalBarChart\"\n  class=\"is-relative h-100\"\n  [title]=\"selectedTerm()?.units\"\n  [data]=\"chartData()\"\n  [labels]=\"labels()\"\n  [showExportButton]=\"false\" />\n", styles: [":host{display:block;overflow:visible}\n"] }]
+            args: [{ selector: 'he-cycles-emissions-chart', changeDetection: ChangeDetectionStrategy.OnPush, imports: [FormsModule, HorizontalBarChartComponent, ChartExportButtonComponent], template: "<div class=\"is-flex is-gap-8 is-justify-content-space-between is-align-items-center is-mb-3\">\n  <he-chart-export-button [chart]=\"chart\" [config]=\"{ lollipopConfig: null }\" />\n\n  <ng-content />\n</div>\n\n@if (terms().length) {\n  <div class=\"field\">\n    <div class=\"control is-expanded\">\n      <div class=\"select is-small is-fullwidth\">\n        <select (change)=\"selectTerm($event)\" id=\"selectTerm\">\n          @for (term of terms(); track term) {\n            <option [value]=\"term['@id']\">{{ term.name }}</option>\n          }\n        </select>\n      </div>\n    </div>\n  </div>\n}\n\n<he-horizontal-bar-chart\n  #chart=\"horizontalBarChart\"\n  class=\"is-relative h-100\"\n  [title]=\"selectedTerm()?.units\"\n  [data]=\"chartData()\"\n  [labels]=\"labels()\"\n  [axisTooltipFn]=\"axisTooltipFn\"\n  [axisLabelClickFn]=\"axisLabelClickFn\"\n  [showExportButton]=\"false\" />\n", styles: [":host{display:block;overflow:visible}\n"] }]
         }], ctorParameters: () => [], propDecorators: { cycles: [{ type: i0.Input, args: [{ isSignal: true, alias: "cycles", required: true }] }] } });
 
 class CyclesFunctionalUnitMeasureComponent {
@@ -12021,9 +12146,7 @@ const distinguishingLabels = (ids) => {
  */
 const contributorsTable = (values, formulas) => {
     const bindings = formulas.flatMap(formula => formula.bindings.filter(isTableBinding));
-    const key = bindings
-        .map(binding => binding.key)
-        .find(name => !isMissing(values[name]) || tableCount(values, name));
+    const key = bindings.map(binding => binding.key).find(name => !isMissing(values[name]) || tableCount(values, name));
     if (!key)
         return undefined;
     const parsed = parseRows(values[key]);
@@ -12083,7 +12206,6 @@ const inclusionRule = (term, values) => {
     const fallback = hasLogs(values) ? SKIPPED_RULE : undefined;
     return areas.length ? completenessRule(areas) : (termRule(term) ?? fallback);
 };
-
 // The page every aggregation follows, whatever the product.
 const GENERAL_PAGE = 'general-process';
 // The product-specific page, by the primary product's `termType`. A term type with no page of its
@@ -12092,17 +12214,6 @@ const PRODUCT_PAGES = {
     crop: 'crop',
     processedFood: 'processed-food'
 };
-/**
- * The rules are shown in the order they answer a reader's questions: how this value was calculated,
- * which Cycles went into it, then how each of those was weighted. Grouping them by what they
- * compute rather than by the page they are documented on is what puts the two calculations either
- * side of the contributors they combine.
- */
-const GROUPS = [
-    { id: 'value', heading: 'How the value is calculated', pageOrder: pages => pages },
-    // a weight is derived by the product's own rules first, then normalised by the general one
-    { id: 'weights', heading: 'How the weights are calculated', pageOrder: pages => [...pages].reverse() }
-];
 // A symbol worth listing under its formula: it carries documentation the reader needs. Constants
 // (e.g. `365`) are self-evident in the formula itself.
 const isDocumented = (binding) => !!binding.symbol && !!binding.description;
@@ -12127,6 +12238,79 @@ const isPlantationWeight = (formula) => bindsTo(formula, 'plantation_lifespan');
 // The blank node keys whose terms carry a completeness area.
 const COMPLETENESS_KEYS = ['products', 'emissions', 'inputs', 'practices'];
 const PRODUCTS_KEY = 'products';
+/**
+ * The rules are shown in the order they answer a reader's questions: how this value was calculated,
+ * which Cycles went into it, then how each of those was weighted. Grouping them by what they
+ * compute rather than by the page they are documented on is what puts the two calculations either
+ * side of the contributors they combine.
+ */
+const GROUPS = [
+    { id: 'value', heading: 'How the value is calculated', pageOrder: pages => pages },
+    // a weight is derived by the product's own rules first, then normalised by the general one
+    { id: 'weights', heading: 'How the weights are calculated', pageOrder: pages => [...pages].reverse() }
+];
+/**
+ * Whether the values were combined by a weighting structure rather than counted equally, which
+ * decides which of the two means is shown. Only `crop` aggregations are split into sub-systems, so
+ * every other product type combines its Cycles unweighted however it was built.
+ */
+const isWeightedAggregation = ({ termType, termId, worldAggregation, subAggregation }) => !!worldAggregation || isPlantation(termId ?? '') || (termType === TermTermType.crop && !subAggregation);
+/**
+ * The pages whose formulas are shown: the general rules, then the product-specific ones.
+ */
+const aggregationPages = (termType) => {
+    const productPage = PRODUCT_PAGES[termType ?? ''];
+    return [GENERAL_PAGE, ...(productPage ? [productPage] : [])];
+};
+/**
+ * Whether the rule ran for this aggregation at all. Some stages depend on what was aggregated
+ * rather than on the data item shown: the production-share weighting only combines countries into
+ * a World aggregation, and the phase weighting only splits the lifespan of a plantation crop.
+ */
+const ranForAggregation = (rules) => (formula) => {
+    // the stages that only run for some aggregations, and whether each ran for this one. A formula
+    // matching none of them is part of every aggregation.
+    const stages = [
+        { applies: isWorldWeight, ran: () => !!rules.worldAggregation },
+        { applies: isSubSystemWeight, ran: () => !!rules.subAggregation },
+        { applies: isPlantationWeight, ran: () => isPlantation(rules.termId ?? '') },
+        { applies: isWeightNormalisation, ran: () => isWeightedAggregation(rules) }
+    ];
+    return stages.find(({ applies }) => applies(formula))?.ran() ?? true;
+};
+/**
+ * Whether the rule applies to the kind of data item shown. With no `nodeKey` every rule is kept,
+ * which is the whole-aggregation view.
+ */
+const appliesToNodeKey = (nodeKey) => (formula) => {
+    if (!nodeKey)
+        return true;
+    if (isEconomicValueShare(formula))
+        return nodeKey === PRODUCTS_KEY;
+    if (isCompletenessZeroFill(formula))
+        return COMPLETENESS_KEYS.includes(nodeKey);
+    return true;
+};
+const appliesToAggregation = (rules) => (formula) => ranForAggregation(rules)(formula) &&
+    appliesToNodeKey(rules.nodeKey)(formula) &&
+    isMeanThatRan(formula, isWeightedAggregation(rules));
+/**
+ * Empty when the documentation carries no rule that applies: `@hestia-earth/aggregation-engine`
+ * before 0.23.5 documents only the weighted mean, so an unweighted aggregation matches nothing.
+ * `pageFormulas` is how it is read - a build resolves the package's JSON module, a test does not.
+ */
+const aggregationSections = (rules, pageFormulas = getFormulas$1) => {
+    const applies = appliesToAggregation(rules);
+    return GROUPS.map(({ id, heading, pageOrder }) => ({
+        id,
+        heading,
+        formulas: pageOrder(aggregationPages(rules.termType))
+            .flatMap(page => pageFormulas(page))
+            .filter(formula => formulaGroup(formula) === id && applies(formula))
+    })).filter(section => section.formulas.length > 0);
+};
+const documentedBindings = (formula) => formula.bindings.filter(isDocumented);
+
 class NodeAggregatedFormulasComponent {
     constructor() {
         /**
@@ -12170,20 +12354,15 @@ class NodeAggregatedFormulasComponent {
         // show the substituted formula rather than the symbolic one, when there is anything to substitute
         this.substituted = model(false, ...(ngDevMode ? [{ debugName: "substituted" }] : []));
         /**
-         * The pages whose formulas are shown: the general rules, then the product-specific ones.
-         */
-        this.pages = computed(() => {
-            const productPage = PRODUCT_PAGES[this.termType() ?? ''];
-            return [GENERAL_PAGE, ...(productPage ? [productPage] : [])];
-        }, ...(ngDevMode ? [{ debugName: "pages" }] : []));
-        /**
-         * Whether the values were combined by a weighting structure rather than counted equally, which
-         * decides which of the two means is shown. Only `crop` aggregations are split into sub-systems, so
-         * every other product type combines its Cycles unweighted however it was built.
+         * The rules that produced this value, grouped by what each one computes.
          */
-        this.weighted = computed(() => this.worldAggregation() ||
-            isPlantation(this.termId() ?? '') ||
-            (this.termType() === TermTermType.crop && !this.subAggregation()), ...(ngDevMode ? [{ debugName: "weighted" }] : []));
+        this.sections = computed(() => aggregationSections({
+            termType: this.termType(),
+            termId: this.termId(),
+            nodeKey: this.nodeKey(),
+            worldAggregation: this.worldAggregation(),
+            subAggregation: this.subAggregation()
+        }), ...(ngDevMode ? [{ debugName: "sections" }] : []));
         this.inclusion = computed(() => inclusionRule(this.term(), this.values()), ...(ngDevMode ? [{ debugName: "inclusion" }] : []));
         // whether any symbol actually resolves; when none does, the substituted view would be identical
         // to the symbolic one, so the toggle is disabled rather than silently doing nothing
@@ -12191,16 +12370,6 @@ class NodeAggregatedFormulasComponent {
             const values = this.values();
             return this.sections().some(section => section.formulas.some(formula => hasAnySubstitution(values, formula.bindings)));
         }, ...(ngDevMode ? [{ debugName: "hasSubstitutions" }] : []));
-        /**
-         * The rules that produced this value, grouped by what each one computes.
-         */
-        this.sections = computed(() => GROUPS.map(({ id, heading, pageOrder }) => ({
-            id,
-            heading,
-            formulas: pageOrder(this.pages())
-                .flatMap(page => getFormulas$1(page))
-                .filter(formula => formulaGroup(formula) === id && this.applies(formula))
-        })).filter(section => section.formulas.length > 0), ...(ngDevMode ? [{ debugName: "sections" }] : []));
         /**
          * What this value was combined from, as the aggregation recorded it: one row per contributor,
          * under the symbols the formulas above read them with. Absent where the contributors were too
@@ -12232,7 +12401,7 @@ class NodeAggregatedFormulasComponent {
                         // this formula was extracted from - so the panel explains it in the documentation's words
                         section: formula.section,
                         context: formula.context,
-                        variables: formula.bindings.filter(isDocumented).map(binding => ({
+                        variables: documentedBindings(formula).map(binding => ({
                             symbol: binding.symbol,
                             description: binding.description,
                             // only an input that should have resolved is flagged - a constant, or a quantity the
@@ -12247,41 +12416,6 @@ class NodeAggregatedFormulasComponent {
             }));
         }, ...(ngDevMode ? [{ debugName: "renderedSections" }] : []));
     }
-    /**
-     * Whether the rule ran for this aggregation at all. Some stages depend on what was aggregated
-     * rather than on the data item shown: the production-share weighting only combines countries into
-     * a World aggregation, and the phase weighting only splits the lifespan of a plantation crop.
-     */
-    ranForAggregation(formula) {
-        // the stages that only run for some aggregations, and whether each ran for this one. A formula
-        // matching none of them is part of every aggregation.
-        const stages = [
-            { applies: isWorldWeight, ran: () => this.worldAggregation() },
-            { applies: isSubSystemWeight, ran: () => this.subAggregation() },
-            { applies: isPlantationWeight, ran: () => isPlantation(this.termId() ?? '') },
-            { applies: isWeightNormalisation, ran: () => this.weighted() }
-        ];
-        return stages.find(({ applies }) => applies(formula))?.ran() ?? true;
-    }
-    /**
-     * Whether the rule applies to the kind of data item shown. With no `nodeKey` every rule is kept,
-     * which is the whole-aggregation view.
-     */
-    appliesToNodeKey(formula) {
-        const nodeKey = this.nodeKey();
-        if (!nodeKey)
-            return true;
-        if (isEconomicValueShare(formula))
-            return nodeKey === PRODUCTS_KEY;
-        if (isCompletenessZeroFill(formula))
-            return COMPLETENESS_KEYS.includes(nodeKey);
-        return true;
-    }
-    applies(formula) {
-        return (this.ranForAggregation(formula) &&
-            this.appliesToNodeKey(formula) &&
-            isMeanThatRan(formula, this.weighted()));
-    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: NodeAggregatedFormulasComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: NodeAggregatedFormulasComponent, isStandalone: true, selector: "he-node-aggregated-formulas", inputs: { termType: { classPropertyName: "termType", publicName: "termType", isSignal: true, isRequired: false, transformFunction: null }, termId: { classPropertyName: "termId", publicName: "termId", isSignal: true, isRequired: false, transformFunction: null }, nodeKey: { classPropertyName: "nodeKey", publicName: "nodeKey", isSignal: true, isRequired: false, transformFunction: null }, term: { classPropertyName: "term", publicName: "term", isSignal: true, isRequired: false, transformFunction: null }, values: { classPropertyName: "values", publicName: "values", isSignal: true, isRequired: false, transformFunction: null }, worldAggregation: { classPropertyName: "worldAggregation", publicName: "worldAggregation", isSignal: true, isRequired: false, transformFunction: null }, subAggregation: { classPropertyName: "subAggregation", publicName: "subAggregation", isSignal: true, isRequired: false, transformFunction: null }, substituted: { classPropertyName: "substituted", publicName: "substituted", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { substituted: "substitutedChange" }, ngImport: i0, template: "@if (renderedSections().length) {\n  <div class=\"aggregated-formulas\">\n    <p class=\"is-size-7 is-mb-2 | formula-intro\">\n      Aggregated values are calculated from the underlying {{ contributor().group }}, not measured. These are the rules\n      that produced this one, in the order they are applied.\n    </p>\n\n    <div class=\"is-pt-2 is-pr-1 is-overflow-y-auto | aggregated-formulas-rules\">\n      <!-- what went in, before the rules that combine it: the formulas cannot show this -->\n      @if (inclusion(); as rule) {\n        <he-collapsible-block heading=\"Which Cycles are included\">\n          <p class=\"is-size-7\">{{ rule.included }}</p>\n          <p class=\"is-size-7\">{{ rule.blank }}</p>\n        </he-collapsible-block>\n      }\n\n      @for (section of renderedSections(); track section.id; let first = $first) {\n        <he-formula-block\n          [formulas]=\"section.formulas\"\n          [heading]=\"section.heading\"\n          [collapsible]=\"true\"\n          [showToggle]=\"first\"\n          [hasSubstitutions]=\"hasSubstitutions()\"\n          [(substituted)]=\"substituted\"\n          emptyTitle=\"No recorded values to substitute\" />\n\n        <!-- the contributors sit between the two calculations: what went in, above how a weight is derived -->\n        @if (section.id === 'value' && contributors(); as table) {\n          <he-collapsible-block [heading]=\"contributor().heading\">\n            @if (table.rows.length) {\n              <table class=\"table is-narrow is-size-7 w-100 | contributors-table\">\n                <thead>\n                  <tr>\n                    <th>{{ contributor().row }}</th>\n                    @for (column of table.columns; track column.symbol) {\n                      <th class=\"has-text-right\">\n                        <span [heKatex]=\"column.symbol\" [heKatexInline]=\"true\"></span>\n                      </th>\n                    }\n                  </tr>\n                </thead>\n                <tbody>\n                  @for (row of table.rows; track row.id) {\n                    <tr>\n                      <td [attr.title]=\"row.id\">\n                        <he-node-link [node]=\"row.node\" linkClass=\"has-text-white\">\n                          <span class=\"break-word\">{{ row.label }}</span>\n                        </he-node-link>\n                      </td>\n                      @for (value of row.values; track $index) {\n                        <td class=\"has-text-right is-nowrap\">{{ value | precision: 4 | default: '-' }}</td>\n                      }\n                    </tr>\n                  }\n                </tbody>\n              </table>\n            } @else {\n              <p class=\"is-size-7\">\n                Combined from {{ table.count }} {{ contributor().group }}, too many for the aggregation to record one by\n                one.\n              </p>\n            }\n          </he-collapsible-block>\n        }\n      }\n    </div>\n  </div>\n}\n", styles: [".formula-intro{opacity:.85}.contributors-table{background-color:transparent;color:inherit}.contributors-table th,.contributors-table td{border-color:#fff3;color:inherit;padding:.15rem .5rem .15rem 0;vertical-align:top}.contributors-table th{opacity:.7}.contributors-table ::ng-deep .katex{font-size:1em}.aggregated-formulas-rules{max-height:50vh}\n"], dependencies: [{ kind: "directive", type: KatexDirective, selector: "[heKatex]", inputs: ["heKatex", "heKatexInline"] }, { kind: "component", type: NodeLinkComponent, selector: "he-node-link", inputs: ["node", "dataState", "showExternalLink", "linkClass"] }, { kind: "component", type: FormulaBlockComponent, selector: "he-formula-block", inputs: ["formulas", "hasSubstitutions", "emptyTitle", "heading", "note", "showToggle", "collapsible", "open", "substituted"], outputs: ["openChange", "substitutedChange"] }, { kind: "component", type: CollapsibleBlockComponent, selector: "he-collapsible-block", inputs: ["heading", "collapsible", "open"], outputs: ["openChange"] }, { kind: "pipe", type: DefaultPipe, name: "default" }, { kind: "pipe", type: PrecisionPipe, name: "precision" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
@@ -12530,7 +12664,7 @@ class NodeAggregationLogsComponent {
          * entries for one term (e.g. a measurement at two depths) collapse into one expandable group whose
          * rows are labelled by what tells them apart.
          */
-        this.groups = computed(() => {
+        this.allGroups = computed(() => {
             const blankNodes = (this.node()?.[this.nodeKey()] ?? []);
             const logs = this.scopedJlog()?.[this.nodeKey()] ?? {};
             const open = this.openGroups();
@@ -12547,6 +12681,33 @@ class NodeAggregationLogsComponent {
                 }));
                 return { ...group, rows, isOpen: open.has(group.termId), observations: groupObservations(rows) };
             });
+        }, ...(ngDevMode ? [{ debugName: "allGroups" }] : []));
+        /**
+         * The rules that produced these values, which the row's `Logs` panel shows. They are read from the
+         * documentation shipped by `@hestia-earth/aggregation-engine`, so an older copy of it can document
+         * none that apply to this aggregation - and the panel would then open on nothing.
+         */
+        this.hasRules = computed(() => aggregationSections({
+            termType: this.termType(),
+            termId: this.termId(),
+            nodeKey: this.nodeKey(),
+            worldAggregation: this.worldAggregation(),
+            subAggregation: this.subAggregation()
+        }).length > 0, ...(ngDevMode ? [{ debugName: "hasRules" }] : []));
+        // filter the list of results by a single Term, as the recalculation logs do
+        this.term = signal(undefined, ...(ngDevMode ? [{ debugName: "term" }] : []));
+        this.typeaheadFocus = typeaheadFocus;
+        this.allTerms = computed(() => this.allGroups()
+            .map(({ term }) => term)
+            .filter(Boolean), ...(ngDevMode ? [{ debugName: "allTerms" }] : []));
+        this.enableFilterByTerm = computed(() => this.allTerms().length > 0, ...(ngDevMode ? [{ debugName: "enableFilterByTerm" }] : []));
+        this.termFormatter = ({ name }) => name;
+        this.suggestTerm = (text$) => text$.pipe(distinctUntilChanged(), map(value => suggestTerms(this.allTerms(), value)));
+        this.groups = computed(() => {
+            const selected = this.term();
+            return selected
+                ? this.allGroups().filter(({ term }) => term?.name?.toLowerCase().includes(selected.name.toLowerCase()))
+                : this.allGroups();
         }, ...(ngDevMode ? [{ debugName: "groups" }] : []));
     }
     toggleGroup(group) {
@@ -12563,13 +12724,15 @@ class NodeAggregationLogsComponent {
         return `${row.index}-${row.label}`;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: NodeAggregationLogsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: NodeAggregationLogsComponent, isStandalone: true, selector: "he-node-aggregation-logs", inputs: { node: { classPropertyName: "node", publicName: "node", isSignal: true, isRequired: false, transformFunction: null }, nodeKey: { classPropertyName: "nodeKey", publicName: "nodeKey", isSignal: true, isRequired: false, transformFunction: null }, termType: { classPropertyName: "termType", publicName: "termType", isSignal: true, isRequired: false, transformFunction: null }, termId: { classPropertyName: "termId", publicName: "termId", isSignal: true, isRequired: false, transformFunction: null }, jlogParentKey: { classPropertyName: "jlogParentKey", publicName: "jlogParentKey", isSignal: true, isRequired: false, transformFunction: null }, jlogParentIndex: { classPropertyName: "jlogParentIndex", publicName: "jlogParentIndex", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"is-flex is-gap-8 is-justify-content-space-between is-align-items-center is-my-2\">\n  <div>\n    <ng-content />\n  </div>\n</div>\n\n<he-data-table class=\"is-mt-2 is-mb-1 is-bordered\" [small]=\"true\" maxHeight=\"320\">\n  <table class=\"table is-fullwidth is-narrow is-striped\">\n    <thead>\n      <tr>\n        <th class=\"width-auto has-border-right\"></th>\n        <th class=\"has-border-right\"><span>Units</span></th>\n        <th class=\"has-border-right\"><span>Aggregated</span></th>\n        <th class=\"has-border-right\">\n          <span title=\"The number of Cycles the value was aggregated from\">Observations</span>\n        </th>\n        <th class=\"has-border-right\"><span>Model</span></th>\n      </tr>\n    </thead>\n    <tbody>\n      @if (groups().length === 0) {\n        <tr>\n          <td class=\"has-border-right has-text-centered\" colspan=\"100\">\n            <p class=\"is-p-1\">No aggregated data to show.</p>\n          </td>\n        </tr>\n      }\n      @for (group of groups(); track trackByGroup($index, group)) {\n        @let single = group.rows.length === 1;\n        <tr [class.has-sub-rows]=\"group.canOpen\" [class.is-open]=\"group.isOpen\">\n          <td class=\"width-auto has-border-right is-nowrap\" [attr.title]=\"group.term?.name\">\n            <div class=\"is-flex is-align-items-flex-start is-gap-4\">\n              @if (group.canOpen) {\n                <a class=\"open-node\" (click)=\"toggleGroup(group)\">\n                  <he-svg-icon [name]=\"group.isOpen ? 'chevron-down' : 'chevron-right'\" />\n                </a>\n              }\n              <he-node-link class=\"is-inline-block is-pre-wrap is-pr-2\" [node]=\"group.term\">\n                <span class=\"break-word\" [innerHtml]=\"group.term?.name | compound: group.term?.termType\"></span>\n              </he-node-link>\n            </div>\n          </td>\n\n          @if (single) {\n            <ng-container *ngTemplateOutlet=\"valueCells; context: { row: group.rows[0], term: group.term }\" />\n            <ng-container *ngTemplateOutlet=\"modelCell; context: { row: group.rows[0] }\" />\n          } @else {\n            <td class=\"has-border-right\">\n              <span class=\"is-nowrap\" [innerHtml]=\"group.term?.units | compound\"></span>\n            </td>\n            <td class=\"has-border-right is-nowrap\">\n              @if (group.valueFormula) {\n                <span\n                  class=\"has-formula\"\n                  [ngbPopover]=\"group.valueFormula\"\n                  popoverClass=\"is-narrow\"\n                  triggers=\"click\"\n                  container=\"body\">\n                  {{ group.value | precision: 3 | default: '-' }}\n                </span>\n              } @else {\n                {{ group.value | precision: 3 | default: '-' }}\n              }\n            </td>\n            <td class=\"has-border-right is-nowrap\">{{ group.observations | default: '-' }}</td>\n            <ng-container *ngTemplateOutlet=\"modelCell\" />\n          }\n        </tr>\n\n        @if (!single && group.isOpen) {\n          @for (row of group.rows; track trackByRow($index, row)) {\n            <tr class=\"is-sub-row\">\n              <td class=\"width-auto has-border-right\">\n                <div class=\"is-flex is-align-items-flex-start is-gap-4 is-pl-3\">\n                  <he-svg-icon class=\"sub-sub-row-icon\" name=\"chevron-double-right\" />\n                  <he-blank-node-identity\n                    [segments]=\"row.segments\"\n                    [scalars]=\"row.scalars\"\n                    [type]=\"group.type\"\n                    [fallback]=\"'entry ' + (row.index + 1)\" />\n                </div>\n              </td>\n              <ng-container *ngTemplateOutlet=\"valueCells; context: { row, term: group.term }\" />\n              <ng-container *ngTemplateOutlet=\"modelCell; context: { row }\" />\n            </tr>\n          }\n        }\n      }\n    </tbody>\n  </table>\n</he-data-table>\n\n<ng-template #valueCells let-row=\"row\" let-term=\"term\">\n  <td class=\"has-border-right\">\n    <span class=\"is-nowrap\" [innerHtml]=\"term?.units | compound\"></span>\n  </td>\n  <td class=\"has-border-right is-nowrap\">\n    {{ row.displayValue | precision: 3 | default: '-' }}\n  </td>\n  <td class=\"has-border-right is-nowrap\">\n    {{ row.observations | default: '-' }}\n  </td>\n</ng-template>\n\n<!-- `row` is left out on a term group: the rules are the same for every entry it holds, so the guide\n  is shown there too, but the values to substitute belong to one entry - those stay on the sub-rows -->\n<ng-template #modelCell let-row=\"row\">\n  <td class=\"has-border-right\">\n    <div class=\"is-flex is-align-self-stretch is-align-items-center is-gap-8\">\n      <span class=\"is-flex-grow-1 is-nowrap\">{{ modelName }}</span>\n\n      <div class=\"is-flex is-gap-4 is-flex-shrink-0 is-align-items-center\">\n        @if (row) {\n          <span\n            class=\"is-nowrap is-clickable\"\n            [ngbPopover]=\"aggregationRules\"\n            autoClose=\"outside\"\n            popoverClass=\"is-narrow\"\n            triggers=\"manual\"\n            #p=\"ngbPopover\"\n            placement=\"bottom left right auto\"\n            container=\"body\"\n            (click)=\"p.isOpen() ? p.close() : p.open({ values: row.values, term: row.term })\">\n            <span class=\"has-text-link\">Logs</span>\n          </span>\n        } @else {\n          <span class=\"has-text-grey is-nowrap\">Expand for logs</span>\n        }\n\n        <div class=\"vertical-divider\"></div>\n\n        @if (guideEnabled) {\n          <he-guide-overlay [pageId]=\"guidePage()\" [width]=\"500\" />\n        } @else {\n          <a [href]=\"guideHref()\" target=\"_blank\" rel=\"noopener\" (click)=\"$event.stopPropagation()\">\n            <span>Docs</span>\n            <he-svg-icon name=\"external-link\" class=\"ml-2\" />\n          </a>\n        }\n      </div>\n    </div>\n  </td>\n</ng-template>\n\n<ng-template #aggregationRules let-values=\"values\" let-term=\"term\">\n  <he-node-aggregated-formulas\n    [termType]=\"termType()\"\n    [termId]=\"termId()\"\n    [nodeKey]=\"nodeKey()\"\n    [term]=\"term\"\n    [values]=\"values\"\n    [worldAggregation]=\"worldAggregation()\"\n    [subAggregation]=\"subAggregation()\" />\n</ng-template>\n", styles: [":host{display:block}:host .vertical-divider{width:1px;height:20px;background:#dbe3ea}:host .has-formula{cursor:help;border-bottom:1px dotted currentColor}::ng-deep .table{background-color:transparent}::ng-deep .table td.has-border-right{box-shadow:1px 0 #4c7194}::ng-deep .table td>div{min-height:24px}::ng-deep .table .has-sub-rows.is-open>td:first-child:before,::ng-deep .table .is-sub-row>td:first-child:before{display:block;position:absolute;content:\" \";background-color:#4c719433;height:100%;width:1px;top:0;left:14px}::ng-deep .table .has-sub-rows.is-open>td:first-child:before{top:25px}::ng-deep .table .is-sub-row .open-node>he-svg-icon,::ng-deep .table .is-sub-row .sub-sub-row-icon{height:16px!important;width:16px!important}::ng-deep .table .is-sub-sub-row td:first-child{padding-left:24px}::ng-deep .table th:last-child,::ng-deep .table td:last-child{min-width:12rem}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgbPopover, selector: "[ngbPopover]", inputs: ["animation", "autoClose", "ngbPopover", "popoverTitle", "placement", "popperOptions", "triggers", "positionTarget", "container", "disablePopover", "popoverClass", "popoverContext", "openDelay", "closeDelay"], outputs: ["shown", "hidden"], exportAs: ["ngbPopover"] }, { kind: "component", type: DataTableComponent, selector: "he-data-table", inputs: ["minHeight", "maxHeight", "small"] }, { kind: "component", type: HESvgIconComponent, selector: "he-svg-icon", inputs: ["name", "size", "animation"] }, { kind: "component", type: NodeLinkComponent, selector: "he-node-link", inputs: ["node", "dataState", "showExternalLink", "linkClass"] }, { kind: "component", type: BlankNodeIdentityComponent, selector: "he-blank-node-identity", inputs: ["segments", "scalars", "type", "fallback"] }, { kind: "component", type: GuideOverlayComponent, selector: "he-guide-overlay", inputs: ["pageId", "width", "height", "positions"], outputs: ["widthChange", "heightChange"] }, { kind: "component", type: NodeAggregatedFormulasComponent, selector: "he-node-aggregated-formulas", inputs: ["termType", "termId", "nodeKey", "term", "values", "worldAggregation", "subAggregation", "substituted"], outputs: ["substitutedChange"] }, { kind: "pipe", type: CompoundPipe, name: "compound" }, { kind: "pipe", type: DefaultPipe, name: "default" }, { kind: "pipe", type: PrecisionPipe, name: "precision" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: NodeAggregationLogsComponent, isStandalone: true, selector: "he-node-aggregation-logs", inputs: { node: { classPropertyName: "node", publicName: "node", isSignal: true, isRequired: false, transformFunction: null }, nodeKey: { classPropertyName: "nodeKey", publicName: "nodeKey", isSignal: true, isRequired: false, transformFunction: null }, termType: { classPropertyName: "termType", publicName: "termType", isSignal: true, isRequired: false, transformFunction: null }, termId: { classPropertyName: "termId", publicName: "termId", isSignal: true, isRequired: false, transformFunction: null }, jlogParentKey: { classPropertyName: "jlogParentKey", publicName: "jlogParentKey", isSignal: true, isRequired: false, transformFunction: null }, jlogParentIndex: { classPropertyName: "jlogParentIndex", publicName: "jlogParentIndex", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"is-flex is-gap-8 is-justify-content-space-between is-align-items-center is-my-2\">\n  <div>\n    <ng-content />\n  </div>\n</div>\n\n<he-data-table class=\"is-mt-2 is-mb-1 is-bordered\" [small]=\"true\" maxHeight=\"320\">\n  <table class=\"table is-fullwidth is-narrow is-striped\">\n    <thead>\n      <tr>\n        <th class=\"width-auto has-border-right\">\n          @if (enableFilterByTerm()) {\n            <div class=\"field is-pb-1\">\n              <div class=\"control is-expanded has-icons-right\">\n                <input\n                  class=\"input search-input is-small\"\n                  [ngModel]=\"term()\"\n                  name=\"term\"\n                  placeholder=\"Select entry by name\"\n                  [ngbTypeahead]=\"suggestTerm\"\n                  [resultFormatter]=\"termFormatter\"\n                  [inputFormatter]=\"termFormatter\"\n                  [focusFirst]=\"true\"\n                  (focus)=\"typeaheadFocus($event)\"\n                  (selectItem)=\"term.set($event.item)\"\n                  container=\"body\"\n                  popupClass=\"is-small\" />\n                <a class=\"icon is-small is-right\" [class.is-hidden]=\"!term()\" (click)=\"term.set(undefined)\">\n                  <he-svg-icon name=\"xmark\" />\n                </a>\n              </div>\n            </div>\n          }\n        </th>\n        <th class=\"has-border-right\"><span>Units</span></th>\n        <th class=\"has-border-right\"><span>Aggregated</span></th>\n        <th class=\"has-border-right\">\n          <span title=\"The number of Cycles the value was aggregated from\">Observations</span>\n        </th>\n        <th class=\"has-border-right\"><span>Model</span></th>\n      </tr>\n    </thead>\n    <tbody>\n      @if (groups().length === 0) {\n        <tr>\n          <td class=\"has-border-right has-text-centered\" colspan=\"100\">\n            <p class=\"is-p-1\">\n              No aggregated data to show\n              @if (term()) {\n                <span>matching your search criteria</span>\n              }\n              <span>.</span>\n            </p>\n          </td>\n        </tr>\n      }\n      @for (group of groups(); track trackByGroup($index, group)) {\n        @let single = group.rows.length === 1;\n        <tr [class.has-sub-rows]=\"group.canOpen\" [class.is-open]=\"group.isOpen\">\n          <td class=\"width-auto has-border-right is-nowrap\" [attr.title]=\"group.term?.name\">\n            <div class=\"is-flex is-align-items-flex-start is-gap-4\">\n              @if (group.canOpen) {\n                <a class=\"open-node\" (click)=\"toggleGroup(group)\">\n                  <he-svg-icon [name]=\"group.isOpen ? 'chevron-down' : 'chevron-right'\" />\n                </a>\n              }\n              <he-node-link class=\"is-inline-block is-pre-wrap is-pr-2\" [node]=\"group.term\">\n                <span class=\"break-word\" [innerHtml]=\"group.term?.name | compound: group.term?.termType\"></span>\n              </he-node-link>\n            </div>\n          </td>\n\n          @if (single) {\n            <ng-container *ngTemplateOutlet=\"valueCells; context: { row: group.rows[0], term: group.term }\" />\n            <ng-container *ngTemplateOutlet=\"modelCell; context: { row: group.rows[0] }\" />\n          } @else {\n            <td class=\"has-border-right\">\n              <span class=\"is-nowrap\" [innerHtml]=\"group.term?.units | compound\"></span>\n            </td>\n            <td class=\"has-border-right is-nowrap\">\n              @if (group.valueFormula) {\n                <span\n                  class=\"has-formula\"\n                  [ngbPopover]=\"group.valueFormula\"\n                  popoverClass=\"is-narrow\"\n                  triggers=\"click\"\n                  container=\"body\">\n                  {{ group.value | precision: 3 | default: '-' }}\n                </span>\n              } @else {\n                {{ group.value | precision: 3 | default: '-' }}\n              }\n            </td>\n            <td class=\"has-border-right is-nowrap\">{{ group.observations | default: '-' }}</td>\n            <ng-container *ngTemplateOutlet=\"modelCell\" />\n          }\n        </tr>\n\n        @if (!single && group.isOpen) {\n          @for (row of group.rows; track trackByRow($index, row)) {\n            <tr class=\"is-sub-row\">\n              <td class=\"width-auto has-border-right\">\n                <div class=\"is-flex is-align-items-flex-start is-gap-4 is-pl-3\">\n                  <he-svg-icon class=\"sub-sub-row-icon\" name=\"chevron-double-right\" />\n                  <he-blank-node-identity\n                    [segments]=\"row.segments\"\n                    [scalars]=\"row.scalars\"\n                    [type]=\"group.type\"\n                    [fallback]=\"'entry ' + (row.index + 1)\" />\n                </div>\n              </td>\n              <ng-container *ngTemplateOutlet=\"valueCells; context: { row, term: group.term }\" />\n              <ng-container *ngTemplateOutlet=\"modelCell; context: { row }\" />\n            </tr>\n          }\n        }\n      }\n    </tbody>\n  </table>\n</he-data-table>\n\n<ng-template #valueCells let-row=\"row\" let-term=\"term\">\n  <td class=\"has-border-right\">\n    <span class=\"is-nowrap\" [innerHtml]=\"term?.units | compound\"></span>\n  </td>\n  <td class=\"has-border-right is-nowrap\">\n    {{ row.displayValue | precision: 3 | default: '-' }}\n  </td>\n  <td class=\"has-border-right is-nowrap\">\n    {{ row.observations | default: '-' }}\n  </td>\n</ng-template>\n\n<!-- `row` is left out on a term group: the rules are the same for every entry it holds, so the guide\n  is shown there too, but the values to substitute belong to one entry - those stay on the sub-rows -->\n<ng-template #modelCell let-row=\"row\">\n  <td class=\"has-border-right\">\n    <div class=\"is-flex is-align-self-stretch is-align-items-center is-gap-8\">\n      <span class=\"is-flex-grow-1 is-nowrap\">{{ modelName }}</span>\n\n      <div class=\"is-flex is-gap-4 is-flex-shrink-0 is-align-items-center\">\n        <!-- nothing opens the panel when no rule applies: it would open on an empty popover -->\n        @if (hasRules()) {\n          @if (row) {\n            <span\n              class=\"is-nowrap is-clickable\"\n              [ngbPopover]=\"aggregationRules\"\n              autoClose=\"outside\"\n              popoverClass=\"is-narrow\"\n              triggers=\"manual\"\n              #p=\"ngbPopover\"\n              placement=\"bottom left right auto\"\n              container=\"body\"\n              (click)=\"p.isOpen() ? p.close() : p.open({ values: row.values, term: row.term })\">\n              <span class=\"has-text-link\">Logs</span>\n            </span>\n          } @else {\n            <span class=\"has-text-grey is-nowrap\">Expand for logs</span>\n          }\n\n          <div class=\"vertical-divider\"></div>\n        }\n\n        @if (guideEnabled) {\n          <he-guide-overlay [pageId]=\"guidePage()\" [width]=\"500\" />\n        } @else {\n          <a [href]=\"guideHref()\" target=\"_blank\" rel=\"noopener\" (click)=\"$event.stopPropagation()\">\n            <span>Docs</span>\n            <he-svg-icon name=\"external-link\" class=\"ml-2\" />\n          </a>\n        }\n      </div>\n    </div>\n  </td>\n</ng-template>\n\n<ng-template #aggregationRules let-values=\"values\" let-term=\"term\">\n  <he-node-aggregated-formulas\n    [termType]=\"termType()\"\n    [termId]=\"termId()\"\n    [nodeKey]=\"nodeKey()\"\n    [term]=\"term\"\n    [values]=\"values\"\n    [worldAggregation]=\"worldAggregation()\"\n    [subAggregation]=\"subAggregation()\" />\n</ng-template>\n", styles: [":host{display:block}:host .vertical-divider{width:1px;height:20px;background:#dbe3ea}:host .has-formula{cursor:help;border-bottom:1px dotted currentColor}::ng-deep .table{background-color:transparent}::ng-deep .table td.has-border-right{box-shadow:1px 0 #4c7194}::ng-deep .table td>div{min-height:24px}::ng-deep .table .has-sub-rows.is-open>td:first-child:before,::ng-deep .table .is-sub-row>td:first-child:before{display:block;position:absolute;content:\" \";background-color:#4c719433;height:100%;width:1px;top:0;left:14px}::ng-deep .table .has-sub-rows.is-open>td:first-child:before{top:25px}::ng-deep .table .is-sub-row .open-node>he-svg-icon,::ng-deep .table .is-sub-row .sub-sub-row-icon{height:16px!important;width:16px!important}::ng-deep .table .is-sub-sub-row td:first-child{padding-left:24px}::ng-deep .table th:last-child,::ng-deep .table td:last-child{min-width:12rem}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NgbPopover, selector: "[ngbPopover]", inputs: ["animation", "autoClose", "ngbPopover", "popoverTitle", "placement", "popperOptions", "triggers", "positionTarget", "container", "disablePopover", "popoverClass", "popoverContext", "openDelay", "closeDelay"], outputs: ["shown", "hidden"], exportAs: ["ngbPopover"] }, { kind: "directive", type: NgbTypeahead, selector: "input[ngbTypeahead]", inputs: ["autocomplete", "container", "editable", "focusFirst", "inputFormatter", "ngbTypeahead", "resultFormatter", "resultTemplate", "selectOnExact", "showHint", "placement", "popperOptions", "popupClass"], outputs: ["selectItem"], exportAs: ["ngbTypeahead"] }, { kind: "component", type: DataTableComponent, selector: "he-data-table", inputs: ["minHeight", "maxHeight", "small"] }, { kind: "component", type: HESvgIconComponent, selector: "he-svg-icon", inputs: ["name", "size", "animation"] }, { kind: "component", type: NodeLinkComponent, selector: "he-node-link", inputs: ["node", "dataState", "showExternalLink", "linkClass"] }, { kind: "component", type: BlankNodeIdentityComponent, selector: "he-blank-node-identity", inputs: ["segments", "scalars", "type", "fallback"] }, { kind: "component", type: GuideOverlayComponent, selector: "he-guide-overlay", inputs: ["pageId", "width", "height", "positions"], outputs: ["widthChange", "heightChange"] }, { kind: "component", type: NodeAggregatedFormulasComponent, selector: "he-node-aggregated-formulas", inputs: ["termType", "termId", "nodeKey", "term", "values", "worldAggregation", "subAggregation", "substituted"], outputs: ["substitutedChange"] }, { kind: "pipe", type: CompoundPipe, name: "compound" }, { kind: "pipe", type: DefaultPipe, name: "default" }, { kind: "pipe", type: PrecisionPipe, name: "precision" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: NodeAggregationLogsComponent, decorators: [{
             type: Component$1,
             args: [{ selector: 'he-node-aggregation-logs', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
                         NgTemplateOutlet,
+                        FormsModule,
                         NgbPopover,
+                        NgbTypeahead,
                         CompoundPipe,
                         DefaultPipe,
                         PrecisionPipe,
@@ -12579,7 +12742,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
                         BlankNodeIdentityComponent,
                         GuideOverlayComponent,
                         NodeAggregatedFormulasComponent
-                    ], template: "<div class=\"is-flex is-gap-8 is-justify-content-space-between is-align-items-center is-my-2\">\n  <div>\n    <ng-content />\n  </div>\n</div>\n\n<he-data-table class=\"is-mt-2 is-mb-1 is-bordered\" [small]=\"true\" maxHeight=\"320\">\n  <table class=\"table is-fullwidth is-narrow is-striped\">\n    <thead>\n      <tr>\n        <th class=\"width-auto has-border-right\"></th>\n        <th class=\"has-border-right\"><span>Units</span></th>\n        <th class=\"has-border-right\"><span>Aggregated</span></th>\n        <th class=\"has-border-right\">\n          <span title=\"The number of Cycles the value was aggregated from\">Observations</span>\n        </th>\n        <th class=\"has-border-right\"><span>Model</span></th>\n      </tr>\n    </thead>\n    <tbody>\n      @if (groups().length === 0) {\n        <tr>\n          <td class=\"has-border-right has-text-centered\" colspan=\"100\">\n            <p class=\"is-p-1\">No aggregated data to show.</p>\n          </td>\n        </tr>\n      }\n      @for (group of groups(); track trackByGroup($index, group)) {\n        @let single = group.rows.length === 1;\n        <tr [class.has-sub-rows]=\"group.canOpen\" [class.is-open]=\"group.isOpen\">\n          <td class=\"width-auto has-border-right is-nowrap\" [attr.title]=\"group.term?.name\">\n            <div class=\"is-flex is-align-items-flex-start is-gap-4\">\n              @if (group.canOpen) {\n                <a class=\"open-node\" (click)=\"toggleGroup(group)\">\n                  <he-svg-icon [name]=\"group.isOpen ? 'chevron-down' : 'chevron-right'\" />\n                </a>\n              }\n              <he-node-link class=\"is-inline-block is-pre-wrap is-pr-2\" [node]=\"group.term\">\n                <span class=\"break-word\" [innerHtml]=\"group.term?.name | compound: group.term?.termType\"></span>\n              </he-node-link>\n            </div>\n          </td>\n\n          @if (single) {\n            <ng-container *ngTemplateOutlet=\"valueCells; context: { row: group.rows[0], term: group.term }\" />\n            <ng-container *ngTemplateOutlet=\"modelCell; context: { row: group.rows[0] }\" />\n          } @else {\n            <td class=\"has-border-right\">\n              <span class=\"is-nowrap\" [innerHtml]=\"group.term?.units | compound\"></span>\n            </td>\n            <td class=\"has-border-right is-nowrap\">\n              @if (group.valueFormula) {\n                <span\n                  class=\"has-formula\"\n                  [ngbPopover]=\"group.valueFormula\"\n                  popoverClass=\"is-narrow\"\n                  triggers=\"click\"\n                  container=\"body\">\n                  {{ group.value | precision: 3 | default: '-' }}\n                </span>\n              } @else {\n                {{ group.value | precision: 3 | default: '-' }}\n              }\n            </td>\n            <td class=\"has-border-right is-nowrap\">{{ group.observations | default: '-' }}</td>\n            <ng-container *ngTemplateOutlet=\"modelCell\" />\n          }\n        </tr>\n\n        @if (!single && group.isOpen) {\n          @for (row of group.rows; track trackByRow($index, row)) {\n            <tr class=\"is-sub-row\">\n              <td class=\"width-auto has-border-right\">\n                <div class=\"is-flex is-align-items-flex-start is-gap-4 is-pl-3\">\n                  <he-svg-icon class=\"sub-sub-row-icon\" name=\"chevron-double-right\" />\n                  <he-blank-node-identity\n                    [segments]=\"row.segments\"\n                    [scalars]=\"row.scalars\"\n                    [type]=\"group.type\"\n                    [fallback]=\"'entry ' + (row.index + 1)\" />\n                </div>\n              </td>\n              <ng-container *ngTemplateOutlet=\"valueCells; context: { row, term: group.term }\" />\n              <ng-container *ngTemplateOutlet=\"modelCell; context: { row }\" />\n            </tr>\n          }\n        }\n      }\n    </tbody>\n  </table>\n</he-data-table>\n\n<ng-template #valueCells let-row=\"row\" let-term=\"term\">\n  <td class=\"has-border-right\">\n    <span class=\"is-nowrap\" [innerHtml]=\"term?.units | compound\"></span>\n  </td>\n  <td class=\"has-border-right is-nowrap\">\n    {{ row.displayValue | precision: 3 | default: '-' }}\n  </td>\n  <td class=\"has-border-right is-nowrap\">\n    {{ row.observations | default: '-' }}\n  </td>\n</ng-template>\n\n<!-- `row` is left out on a term group: the rules are the same for every entry it holds, so the guide\n  is shown there too, but the values to substitute belong to one entry - those stay on the sub-rows -->\n<ng-template #modelCell let-row=\"row\">\n  <td class=\"has-border-right\">\n    <div class=\"is-flex is-align-self-stretch is-align-items-center is-gap-8\">\n      <span class=\"is-flex-grow-1 is-nowrap\">{{ modelName }}</span>\n\n      <div class=\"is-flex is-gap-4 is-flex-shrink-0 is-align-items-center\">\n        @if (row) {\n          <span\n            class=\"is-nowrap is-clickable\"\n            [ngbPopover]=\"aggregationRules\"\n            autoClose=\"outside\"\n            popoverClass=\"is-narrow\"\n            triggers=\"manual\"\n            #p=\"ngbPopover\"\n            placement=\"bottom left right auto\"\n            container=\"body\"\n            (click)=\"p.isOpen() ? p.close() : p.open({ values: row.values, term: row.term })\">\n            <span class=\"has-text-link\">Logs</span>\n          </span>\n        } @else {\n          <span class=\"has-text-grey is-nowrap\">Expand for logs</span>\n        }\n\n        <div class=\"vertical-divider\"></div>\n\n        @if (guideEnabled) {\n          <he-guide-overlay [pageId]=\"guidePage()\" [width]=\"500\" />\n        } @else {\n          <a [href]=\"guideHref()\" target=\"_blank\" rel=\"noopener\" (click)=\"$event.stopPropagation()\">\n            <span>Docs</span>\n            <he-svg-icon name=\"external-link\" class=\"ml-2\" />\n          </a>\n        }\n      </div>\n    </div>\n  </td>\n</ng-template>\n\n<ng-template #aggregationRules let-values=\"values\" let-term=\"term\">\n  <he-node-aggregated-formulas\n    [termType]=\"termType()\"\n    [termId]=\"termId()\"\n    [nodeKey]=\"nodeKey()\"\n    [term]=\"term\"\n    [values]=\"values\"\n    [worldAggregation]=\"worldAggregation()\"\n    [subAggregation]=\"subAggregation()\" />\n</ng-template>\n", styles: [":host{display:block}:host .vertical-divider{width:1px;height:20px;background:#dbe3ea}:host .has-formula{cursor:help;border-bottom:1px dotted currentColor}::ng-deep .table{background-color:transparent}::ng-deep .table td.has-border-right{box-shadow:1px 0 #4c7194}::ng-deep .table td>div{min-height:24px}::ng-deep .table .has-sub-rows.is-open>td:first-child:before,::ng-deep .table .is-sub-row>td:first-child:before{display:block;position:absolute;content:\" \";background-color:#4c719433;height:100%;width:1px;top:0;left:14px}::ng-deep .table .has-sub-rows.is-open>td:first-child:before{top:25px}::ng-deep .table .is-sub-row .open-node>he-svg-icon,::ng-deep .table .is-sub-row .sub-sub-row-icon{height:16px!important;width:16px!important}::ng-deep .table .is-sub-sub-row td:first-child{padding-left:24px}::ng-deep .table th:last-child,::ng-deep .table td:last-child{min-width:12rem}\n"] }]
+                    ], template: "<div class=\"is-flex is-gap-8 is-justify-content-space-between is-align-items-center is-my-2\">\n  <div>\n    <ng-content />\n  </div>\n</div>\n\n<he-data-table class=\"is-mt-2 is-mb-1 is-bordered\" [small]=\"true\" maxHeight=\"320\">\n  <table class=\"table is-fullwidth is-narrow is-striped\">\n    <thead>\n      <tr>\n        <th class=\"width-auto has-border-right\">\n          @if (enableFilterByTerm()) {\n            <div class=\"field is-pb-1\">\n              <div class=\"control is-expanded has-icons-right\">\n                <input\n                  class=\"input search-input is-small\"\n                  [ngModel]=\"term()\"\n                  name=\"term\"\n                  placeholder=\"Select entry by name\"\n                  [ngbTypeahead]=\"suggestTerm\"\n                  [resultFormatter]=\"termFormatter\"\n                  [inputFormatter]=\"termFormatter\"\n                  [focusFirst]=\"true\"\n                  (focus)=\"typeaheadFocus($event)\"\n                  (selectItem)=\"term.set($event.item)\"\n                  container=\"body\"\n                  popupClass=\"is-small\" />\n                <a class=\"icon is-small is-right\" [class.is-hidden]=\"!term()\" (click)=\"term.set(undefined)\">\n                  <he-svg-icon name=\"xmark\" />\n                </a>\n              </div>\n            </div>\n          }\n        </th>\n        <th class=\"has-border-right\"><span>Units</span></th>\n        <th class=\"has-border-right\"><span>Aggregated</span></th>\n        <th class=\"has-border-right\">\n          <span title=\"The number of Cycles the value was aggregated from\">Observations</span>\n        </th>\n        <th class=\"has-border-right\"><span>Model</span></th>\n      </tr>\n    </thead>\n    <tbody>\n      @if (groups().length === 0) {\n        <tr>\n          <td class=\"has-border-right has-text-centered\" colspan=\"100\">\n            <p class=\"is-p-1\">\n              No aggregated data to show\n              @if (term()) {\n                <span>matching your search criteria</span>\n              }\n              <span>.</span>\n            </p>\n          </td>\n        </tr>\n      }\n      @for (group of groups(); track trackByGroup($index, group)) {\n        @let single = group.rows.length === 1;\n        <tr [class.has-sub-rows]=\"group.canOpen\" [class.is-open]=\"group.isOpen\">\n          <td class=\"width-auto has-border-right is-nowrap\" [attr.title]=\"group.term?.name\">\n            <div class=\"is-flex is-align-items-flex-start is-gap-4\">\n              @if (group.canOpen) {\n                <a class=\"open-node\" (click)=\"toggleGroup(group)\">\n                  <he-svg-icon [name]=\"group.isOpen ? 'chevron-down' : 'chevron-right'\" />\n                </a>\n              }\n              <he-node-link class=\"is-inline-block is-pre-wrap is-pr-2\" [node]=\"group.term\">\n                <span class=\"break-word\" [innerHtml]=\"group.term?.name | compound: group.term?.termType\"></span>\n              </he-node-link>\n            </div>\n          </td>\n\n          @if (single) {\n            <ng-container *ngTemplateOutlet=\"valueCells; context: { row: group.rows[0], term: group.term }\" />\n            <ng-container *ngTemplateOutlet=\"modelCell; context: { row: group.rows[0] }\" />\n          } @else {\n            <td class=\"has-border-right\">\n              <span class=\"is-nowrap\" [innerHtml]=\"group.term?.units | compound\"></span>\n            </td>\n            <td class=\"has-border-right is-nowrap\">\n              @if (group.valueFormula) {\n                <span\n                  class=\"has-formula\"\n                  [ngbPopover]=\"group.valueFormula\"\n                  popoverClass=\"is-narrow\"\n                  triggers=\"click\"\n                  container=\"body\">\n                  {{ group.value | precision: 3 | default: '-' }}\n                </span>\n              } @else {\n                {{ group.value | precision: 3 | default: '-' }}\n              }\n            </td>\n            <td class=\"has-border-right is-nowrap\">{{ group.observations | default: '-' }}</td>\n            <ng-container *ngTemplateOutlet=\"modelCell\" />\n          }\n        </tr>\n\n        @if (!single && group.isOpen) {\n          @for (row of group.rows; track trackByRow($index, row)) {\n            <tr class=\"is-sub-row\">\n              <td class=\"width-auto has-border-right\">\n                <div class=\"is-flex is-align-items-flex-start is-gap-4 is-pl-3\">\n                  <he-svg-icon class=\"sub-sub-row-icon\" name=\"chevron-double-right\" />\n                  <he-blank-node-identity\n                    [segments]=\"row.segments\"\n                    [scalars]=\"row.scalars\"\n                    [type]=\"group.type\"\n                    [fallback]=\"'entry ' + (row.index + 1)\" />\n                </div>\n              </td>\n              <ng-container *ngTemplateOutlet=\"valueCells; context: { row, term: group.term }\" />\n              <ng-container *ngTemplateOutlet=\"modelCell; context: { row }\" />\n            </tr>\n          }\n        }\n      }\n    </tbody>\n  </table>\n</he-data-table>\n\n<ng-template #valueCells let-row=\"row\" let-term=\"term\">\n  <td class=\"has-border-right\">\n    <span class=\"is-nowrap\" [innerHtml]=\"term?.units | compound\"></span>\n  </td>\n  <td class=\"has-border-right is-nowrap\">\n    {{ row.displayValue | precision: 3 | default: '-' }}\n  </td>\n  <td class=\"has-border-right is-nowrap\">\n    {{ row.observations | default: '-' }}\n  </td>\n</ng-template>\n\n<!-- `row` is left out on a term group: the rules are the same for every entry it holds, so the guide\n  is shown there too, but the values to substitute belong to one entry - those stay on the sub-rows -->\n<ng-template #modelCell let-row=\"row\">\n  <td class=\"has-border-right\">\n    <div class=\"is-flex is-align-self-stretch is-align-items-center is-gap-8\">\n      <span class=\"is-flex-grow-1 is-nowrap\">{{ modelName }}</span>\n\n      <div class=\"is-flex is-gap-4 is-flex-shrink-0 is-align-items-center\">\n        <!-- nothing opens the panel when no rule applies: it would open on an empty popover -->\n        @if (hasRules()) {\n          @if (row) {\n            <span\n              class=\"is-nowrap is-clickable\"\n              [ngbPopover]=\"aggregationRules\"\n              autoClose=\"outside\"\n              popoverClass=\"is-narrow\"\n              triggers=\"manual\"\n              #p=\"ngbPopover\"\n              placement=\"bottom left right auto\"\n              container=\"body\"\n              (click)=\"p.isOpen() ? p.close() : p.open({ values: row.values, term: row.term })\">\n              <span class=\"has-text-link\">Logs</span>\n            </span>\n          } @else {\n            <span class=\"has-text-grey is-nowrap\">Expand for logs</span>\n          }\n\n          <div class=\"vertical-divider\"></div>\n        }\n\n        @if (guideEnabled) {\n          <he-guide-overlay [pageId]=\"guidePage()\" [width]=\"500\" />\n        } @else {\n          <a [href]=\"guideHref()\" target=\"_blank\" rel=\"noopener\" (click)=\"$event.stopPropagation()\">\n            <span>Docs</span>\n            <he-svg-icon name=\"external-link\" class=\"ml-2\" />\n          </a>\n        }\n      </div>\n    </div>\n  </td>\n</ng-template>\n\n<ng-template #aggregationRules let-values=\"values\" let-term=\"term\">\n  <he-node-aggregated-formulas\n    [termType]=\"termType()\"\n    [termId]=\"termId()\"\n    [nodeKey]=\"nodeKey()\"\n    [term]=\"term\"\n    [values]=\"values\"\n    [worldAggregation]=\"worldAggregation()\"\n    [subAggregation]=\"subAggregation()\" />\n</ng-template>\n", styles: [":host{display:block}:host .vertical-divider{width:1px;height:20px;background:#dbe3ea}:host .has-formula{cursor:help;border-bottom:1px dotted currentColor}::ng-deep .table{background-color:transparent}::ng-deep .table td.has-border-right{box-shadow:1px 0 #4c7194}::ng-deep .table td>div{min-height:24px}::ng-deep .table .has-sub-rows.is-open>td:first-child:before,::ng-deep .table .is-sub-row>td:first-child:before{display:block;position:absolute;content:\" \";background-color:#4c719433;height:100%;width:1px;top:0;left:14px}::ng-deep .table .has-sub-rows.is-open>td:first-child:before{top:25px}::ng-deep .table .is-sub-row .open-node>he-svg-icon,::ng-deep .table .is-sub-row .sub-sub-row-icon{height:16px!important;width:16px!important}::ng-deep .table .is-sub-sub-row td:first-child{padding-left:24px}::ng-deep .table th:last-child,::ng-deep .table td:last-child{min-width:12rem}\n"] }]
         }], propDecorators: { node: [{ type: i0.Input, args: [{ isSignal: true, alias: "node", required: false }] }], nodeKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "nodeKey", required: false }] }], termType: [{ type: i0.Input, args: [{ isSignal: true, alias: "termType", required: false }] }], termId: [{ type: i0.Input, args: [{ isSignal: true, alias: "termId", required: false }] }], jlogParentKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "jlogParentKey", required: false }] }], jlogParentIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "jlogParentIndex", required: false }] }] } });
 
 const isValidDate = (date) => (date || '').trim().length === 10;
@@ -12978,13 +13141,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
                     ], template: "@if (isGroupNode()) {\n  <div class=\"tabs is-mb-1 | group-nodes-tabs\">\n    <ul>\n      @for (value of groupNodeValues(); track value) {\n        <li\n          [class.is-active]=\"selectedGroup() === value.value\"\n          [ngbTooltip]=\"value.term.name\"\n          placement=\"top\"\n          container=\"body\">\n          <a (click)=\"selectedGroup.set(value.value)\">\n            <span class=\"is-capitalized is-pr-1\">{{ nodeKeyGroup() | pluralize: 1 }}:</span>\n            <span>{{ value.value }}</span>\n          </a>\n        </li>\n      }\n    </ul>\n  </div>\n}\n\n@if (isNodeKeyAllowed()) {\n  @switch (selectedView()) {\n    @case (View.table) {\n      <ng-container *ngTemplateOutlet=\"selectView\" />\n\n      @if (hasData()) {\n        @if (hasVisibleData() || !hideIdentical()) {\n          <he-data-table class=\"is-mt-3 is-bordered\" [small]=\"true\" maxHeight=\"320\">\n            <table class=\"table is-fullwidth is-narrow is-striped\">\n              <thead>\n                @if (dataKeys().length > 1) {\n                  <tr class=\"has-text-weight-bold\">\n                    <th class=\"width-auto has-border-right\"></th>\n                    <th class=\"has-border-right\" [class.is-hidden]=\"isGroupNode()\"></th>\n                    @for (dataKey of dataKeys(); track dataKey; let dataKeyLast = $last) {\n                      @let blankNodes = data()[dataKey];\n                      @let blankNodesCount = countGroupVisibleNodes(blankNodes);\n                      @if (blankNodesCount > 0) {\n                        <th [attr.colspan]=\"blankNodesCount\" [class.has-border-right]=\"!dataKeyLast\">\n                          <span>{{ dataKey | keyToLabel }}</span>\n                        </th>\n                      }\n                    }\n                  </tr>\n                }\n                <tr class=\"has-text-weight-semibold\">\n                  <th class=\"width-auto has-border-right\"></th>\n                  <th class=\"has-border-right\" [class.is-hidden]=\"isGroupNode()\"></th>\n                  @for (dataKey of dataKeys(); track dataKey; let dataKeyLast = $last) {\n                    @let blankNodes = data()[dataKey];\n                    @for (node of blankNodes; track node.value.term.name; let nodeLast = $last) {\n                      @if (node.value.visible) {\n                        <th\n                          [attr.title]=\"node.value.term.name\"\n                          [class.has-border-right]=\"dataKeys().length > 1 && !dataKeyLast && nodeLast\">\n                          <he-node-link [node]=\"node.value.term\">\n                            <span\n                              [innerHtml]=\"\n                                node.value.term.name | ellipsis: 30 | compound: node.value.term.termType\n                              \"></span>\n                          </he-node-link>\n                        </th>\n                      }\n                    }\n                  }\n                </tr>\n                <tr class=\"is-italic has-text-weight-semibold\">\n                  <th class=\"width-auto has-border-right\"></th>\n                  <th class=\"has-border-right\" [class.is-hidden]=\"isGroupNode()\">\n                    <a [href]=\"schemaBaseUrl + '/Cycle#functionalUnit'\" target=\"_blank\">Functional unit</a>\n                  </th>\n                  @for (dataKey of dataKeys(); track dataKey; let dataKeyLast = $last) {\n                    @let blankNodes = data()[dataKey];\n                    @for (node of blankNodes; track node.value.term.name; let nodeLast = $last) {\n                      @if (node.value.visible) {\n                        <th\n                          [attr.title]=\"node.value.term.units\"\n                          [class.has-border-right]=\"dataKeys().length > 1 && !dataKeyLast && nodeLast\">\n                          <span [innerHtml]=\"node.value.term.units | compound\"></span>\n                          <he-terms-units-description class=\"is-inline-block is-ml-2\" [term]=\"node.value.term\" />\n                        </th>\n                      }\n                    }\n                  }\n                </tr>\n              </thead>\n              <tbody>\n                @for (cycle of cycles(); track nodeVersionKey(cycle); let cycleIndex = $index) {\n                  <tr [class.is-suggested]=\"$any(cycle).suggested\">\n                    <td class=\"width-auto has-border-right\" [attr.title]=\"defaultLabel(cycle)\">\n                      <he-node-link [node]=\"cycleNode(cycle)\">\n                        <span class=\"has-text-ellipsis is-ellipsis-3\">\n                          @if ($any(cycle).suggested) {\n                            <he-svg-icon name=\"compare\" />\n                          } @else {\n                            <span>{{ cycleIndex + 1 }}.</span>\n                          }\n                          <span class=\"is-pl-1\">{{ defaultLabel(cycle) }}</span>\n                        </span>\n                      </he-node-link>\n                    </td>\n                    <td class=\"has-border-right\" [class.is-hidden]=\"isGroupNode()\">\n                      <he-cycles-functional-unit-measure [cycle]=\"cycle\" />\n                    </td>\n                    @for (dataKey of dataKeys(); track dataKey; let dataKeyLast = $last) {\n                      @let blankNodes = data()[dataKey];\n                      @for (node of blankNodes; track node.value.term.name; let nodeLast = $last) {\n                        @if (node.value.visible) {\n                          @let cycleData = node.value.values[nodeVersionKey(cycle)];\n                          <td\n                            class=\"is-nowrap\"\n                            [class.has-border-right]=\"dataKeys().length > 1 && !dataKeyLast && nodeLast\">\n                            @if (cycleData) {\n                              <span\n                                class=\"trigger-popover\"\n                                [ngbPopover]=\"details\"\n                                autoClose=\"outside\"\n                                popoverClass=\"is-narrow is-overflow-visible\"\n                                placement=\"left bottom auto\"\n                                container=\"body\"\n                                [popoverContext]=\"{ data: cycleData, cycle, key: dataKey }\">\n                                <span pointer>\n                                  {{ cycleData.propertyValue | precision: 3 | default: '-' }}\n                                </span>\n                                <he-blank-node-state\n                                  class=\"ml-1\"\n                                  [dataState]=\"dataState()\"\n                                  [node]=\"cycleData.node\"\n                                  key=\"value\" />\n                              </span>\n                            } @else {\n                              <span>-</span>\n                            }\n                          </td>\n                        }\n                      }\n                    }\n                  </tr>\n                }\n              </tbody>\n            </table>\n          </he-data-table>\n        } @else {\n          <div class=\"is-pt-3 has-text-centered\">\n            <span>No differences between the nodes compared.</span>\n          </div>\n        }\n        <div class=\"is-flex is-align-items-center is-flex-wrap-wrap is-justify-content-space-between is-mt-2\">\n          <he-blank-node-state-notice\n            [dataState]=\"dataState()\"\n            [showDeleted]=\"firstNodeKey() === BlankNodesKey.emissions\" />\n          <div class=\"is-flex is-flex-wrap-wrap is-gap-8\">\n            @if (showHideZeroValues()) {\n              <div class=\"field is-relative is-mb-0\">\n                <input\n                  type=\"checkbox\"\n                  class=\"switch is-small is-rounded\"\n                  [id]=\"componentId() + 'hideZeroValues'\"\n                  name=\"hideZeroValues\"\n                  [(ngModel)]=\"hideZeroValues\" />\n                <label [for]=\"componentId() + 'hideZeroValues'\">\n                  <span>\n                    Hide\n                    <b>0</b>\n                    values\n                  </span>\n                </label>\n              </div>\n            }\n            @if (cycles().length > 1) {\n              <div class=\"field is-relative is-mb-0\">\n                <input\n                  type=\"checkbox\"\n                  class=\"switch is-small is-rounded\"\n                  [id]=\"componentId() + 'hideIdenticalValues'\"\n                  name=\"hideIdenticalValues\"\n                  [(ngModel)]=\"hideIdenticalSelected\" />\n                <label [for]=\"componentId() + 'hideIdenticalValues'\">\n                  <span>Hide identical values</span>\n                </label>\n              </div>\n            }\n          </div>\n        </div>\n      } @else {\n        <div class=\"is-pt-3 has-text-centered\">\n          <span>No data available</span>\n          @if (filterTerm()) {\n            <span class=\"is-pl-1\">matching your search criteria</span>\n          }\n          <span>.</span>\n          @if (showSwitchToRecalculated()) {\n            <span>\n              Switch to\n              <code>recalculated</code>\n              version.\n            </span>\n          }\n        </div>\n      }\n    }\n    @case (View.chart) {\n      @switch (firstNodeKey()) {\n        @case (BlankNodesKey.emissions) {\n          <he-cycles-emissions-chart [cycles]=\"cycles()\">\n            <ng-container *ngTemplateOutlet=\"selectView\" />\n          </he-cycles-emissions-chart>\n        }\n      }\n    }\n    @case (View.aggregationLogs) {\n      <ng-container *ngTemplateOutlet=\"selectView\" />\n\n      @if (selectedNode()) {\n        <he-node-aggregation-logs\n          [node]=\"selectedNode()\"\n          [nodeKey]=\"selectedNodeKey()\"\n          [termType]=\"primaryProductTermType()\"\n          [termId]=\"primaryProductTermId()\"\n          [jlogParentKey]=\"nodeKeyGroup()\"\n          [jlogParentIndex]=\"jlogParentIndex()\">\n          @if (nodeKeys().length > 1) {\n            <div class=\"tabs is-m-0\">\n              <ul>\n                @for (nodeKey of nodeKeys(); track nodeKey) {\n                  <li [class.is-active]=\"selectedNodeKey() === nodeKey\">\n                    <a (click)=\"selectedNodeKey.set(nodeKey)\">{{ nodeKey | keyToLabel }}</a>\n                  </li>\n                }\n              </ul>\n            </div>\n          }\n        </he-node-aggregation-logs>\n      }\n    }\n    @case (View.timeline) {\n      <he-cycles-nodes-timeline\n        [values]=\"timelineValues()\"\n        [minDate]=\"selectedCycle().startDate\"\n        [maxDate]=\"selectedCycle().endDate\">\n        <ng-container *ngTemplateOutlet=\"selectView\" />\n      </he-cycles-nodes-timeline>\n    }\n    @case (View.logs) {\n      <!-- keep the cycle selector visible even when the selected cycle has no grouped node (e.g. a cycle\n           with no transformations under \"Transformation: Inputs\"), so the user can switch to one that has -->\n      <ng-container *ngTemplateOutlet=\"selectView\" />\n\n      @if (selectedNode()) {\n        <he-node-logs-models\n          [node]=\"selectedNode()\"\n          [cycle]=\"selectedNode()\"\n          [nodeKey]=\"selectedNodeKey()\"\n          [logsKey]=\"selectedLogsKey()\"\n          [jlogParentKey]=\"nodeKeyGroup()\"\n          [jlogParentIndex]=\"jlogParentIndex()\"\n          [originalValues]=\"selectedOriginalValues()\"\n          [recalculatedValues]=\"selectedRecalculatedValues()\"\n          [filterTermTypes]=\"filterTermTypes()\">\n          @if (nodeKeys().length > 1) {\n            <div class=\"tabs is-m-0\">\n              <ul>\n                @for (nodeKey of nodeKeys(); track nodeKey) {\n                  <li [class.is-active]=\"selectedNodeKey() === nodeKey\">\n                    <a (click)=\"selectedNodeKey.set(nodeKey)\">{{ nodeKey | keyToLabel }}</a>\n                  </li>\n                }\n              </ul>\n            </div>\n          }\n        </he-node-logs-models>\n      } @else if (isGroupNode()) {\n        <p class=\"is-p-3 has-text-grey\">\n          No recalculation logs for the selected {{ nodeKeyGroup() | pluralize: 1 }} in this cycle \u2014 select another\n          cycle above.\n        </p>\n      }\n    }\n  }\n}\n\n<ng-template #selectView>\n  <div class=\"is-flex is-gap-8 is-align-items-center is-justify-content-space-between\">\n    <div class=\"is-flex is-gap-8 is-align-items-center\">\n      @if (selectedView() === View.table) {\n        @if (hasData()) {\n          <button class=\"button is-small is-ghost is-p-2\" (click)=\"showDownload()\">\n            <he-svg-icon name=\"download\" />\n          </button>\n        }\n        <he-search-extend\n          class=\"is-secondary\"\n          collapsedClass=\"is-p-2\"\n          placeholder=\"Filter terms by name\"\n          (searchText)=\"filterTerm.set($event)\" />\n      } @else if (showSelectCycle()) {\n        <ng-container *ngTemplateOutlet=\"selectCycle\" />\n      }\n    </div>\n\n    @if (views()?.length > 1) {\n      <div class=\"field has-addons button-segments\">\n        @for (view of views(); track view) {\n          <div class=\"control\">\n            <button\n              class=\"button is-small\"\n              [class.is-selected]=\"selectedView() === view\"\n              (click)=\"selectedView.set(view)\">\n              <he-svg-icon\n                name=\"checkmark\"\n                aria-hidden=\"true\"\n                class=\"is-hidden-mobile\"\n                [class.is-hidden-tablet]=\"selectedView() !== view\" />\n              <he-svg-icon\n                [name]=\"viewIcon[view]\"\n                aria-hidden=\"true\"\n                [class.is-hidden-tablet]=\"selectedView() === view\" />\n              <span class=\"is-hidden-mobile\">{{ view }}</span>\n            </button>\n          </div>\n        }\n      </div>\n    }\n  </div>\n</ng-template>\n\n<ng-template #selectCycle>\n  @if (selectableCycles().length > 1) {\n    <div class=\"field is-horizontal is-mb-0\">\n      <div class=\"field-label is-normal\">\n        <label class=\"label has-text-secondary is-nowrap\" for=\"selectCycle\">Cycle</label>\n      </div>\n      <div class=\"field-body\">\n        <div class=\"field\">\n          <div class=\"control is-expanded\">\n            <div class=\"select is-small is-fullwidth\">\n              <select [value]=\"selectedIndex()\" (change)=\"selectIndex($event)\" if=\"selectCycle\">\n                @for (entry of selectableCycles(); track nodeVersionKey(entry.cycle)) {\n                  <option [value]=\"entry.index\">{{ entry.index + 1 }}. {{ defaultLabel(entry.cycle) }}</option>\n                }\n              </select>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  }\n</ng-template>\n\n<ng-template #details let-node=\"cycle\" let-data=\"data\" let-key=\"key\">\n  <p>\n    <b>{{ defaultLabel(node) }}</b>\n  </p>\n  <he-node-value-details\n    class=\"is-overflow-visible\"\n    [data]=\"data\"\n    [dataState]=\"dataState()\"\n    [nodeType]=\"node['@type']\"\n    [dataKey]=\"key\"\n    [aggregated]=\"node.aggregated\" />\n</ng-template>\n", styles: [":host{display:block}he-data-table ::ng-deep .table thead tr th:nth-child(2),he-data-table ::ng-deep .table tbody tr td:nth-child(2){max-width:106px;width:106px}\n"] }]
         }], ctorParameters: () => [], propDecorators: { dataState: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataState", required: false }] }], nodeKeys: [{ type: i0.Input, args: [{ isSignal: true, alias: "nodeKeys", required: true }] }], nodeKeyGroup: [{ type: i0.Input, args: [{ isSignal: true, alias: "nodeKeyGroup", required: false }] }], hideIdenticalValues: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideIdenticalValues", required: false }] }] } });
 
+const labelMaxLength = 25;
 class CyclesResultComponent {
     constructor() {
         this.cycles = input.required(...(ngDevMode ? [{ debugName: "cycles" }] : []));
         this.productsPerCycle = computed(() => groupNodesByTerm(this.cycles(), 'products'), ...(ngDevMode ? [{ debugName: "productsPerCycle" }] : []));
-        this.chartLabels = computed(() => this.cycles()
-            .map((cycle, index) => ({ cycle, index }))
-            .map(({ cycle, index }) => `${index + 1}. ${defaultLabel(cycle)}`), ...(ngDevMode ? [{ debugName: "chartLabels" }] : []));
+        this.chartLabels = computed(() => nodeChartLabels(this.cycles(), labelMaxLength), ...(ngDevMode ? [{ debugName: "chartLabels" }] : []));
         this.chartDatasets = computed(() => Object.values(this.productsPerCycle() ?? {}).map(({ term: { name, units, '@id': termId }, values }, index) => {
             const color = getColor(index);
             return {
@@ -13032,7 +13194,7 @@ class CyclesResultComponent {
         };
         Chart.defaults.scales.category.ticks.callback = function (val) {
             const label = this.getLabelForValue(val);
-            return ellipsis(`${label}`, 25);
+            return ellipsis(`${label}`, labelMaxLength);
         };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CyclesResultComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
@@ -15876,6 +16038,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
                 }]
         }] });
 
+/**
+ * The product of an impact assessment, which aggregated ones carry as a `term`.
+ */
+const impactAssessmentProduct = (impactAssessment) => impactAssessment?.product?.term || impactAssessment?.term;
+
 /* eslint-disable complexity */
 var ChartNodeType;
 (function (ChartNodeType) {
@@ -17089,7 +17256,7 @@ class ImpactAssessmentsIndicatorBreakdownChartComponent {
         return [blankNodeTermId, modelId, impactTermId].join('-');
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ImpactAssessmentsIndicatorBreakdownChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: ImpactAssessmentsIndicatorBreakdownChartComponent, isStandalone: true, selector: "he-impact-assessments-indicator-breakdown-chart", inputs: { impactAssessment: { classPropertyName: "impactAssessment", publicName: "impactAssessment", isSignal: true, isRequired: true, transformFunction: null }, indicators: { classPropertyName: "indicators", publicName: "indicators", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"is-flex is-gap-8 is-justify-content-space-between is-align-items-center is-mb-3\">\n  <he-chart-export-button [chart]=\"chart\" [chartExportFn]=\"chartExportFn\" [exportFormats]=\"exportFormats\" />\n\n  <ng-content />\n</div>\n\n@if (logsResource.isLoading()) {\n  <div class=\"has-text-center py-3\">\n    <he-svg-icon name=\"loading\" animation=\"spin\" size=\"40\" />\n  </div>\n} @else if (terms()?.length) {\n  <div class=\"is-flex is-align-items-center is-gap-12 is-mb-2 | breakdown-actions-table\">\n    @if (terms()?.length) {\n      <div class=\"control is-expanded is-flex-grow-1\">\n        <div class=\"select is-fullwidth is-small\">\n          <select [(ngModel)]=\"selectedTermId\" name=\"selectedTermId\">\n            @for (term of terms(); track term['@id']) {\n              <option [value]=\"term['@id']\">{{ term.name }}</option>\n            }\n          </select>\n        </div>\n      </div>\n    }\n    @if (methods()?.length) {\n      <div class=\"control is-expanded is-flex-shrink-0\">\n        <div class=\"select is-fullwidth is-small\">\n          <select [(ngModel)]=\"selectedMethodId\" name=\"selectedMethodId\">\n            @for (term of methods(); track term['@id']) {\n              <option [value]=\"term['@id']\">{{ term.name }}</option>\n            }\n          </select>\n        </div>\n      </div>\n    }\n    <div class=\"control is-expanded is-flex-shrink-0\">\n      <div class=\"select is-fullwidth is-small\">\n        <select [(ngModel)]=\"selectedCategory\" name=\"selectedCategory\">\n          <option [ngValue]=\"undefined\">No Disaggregation</option>\n          @for (category of categories; track category.key) {\n            <option [value]=\"category.key\">{{ category.label }}</option>\n          }\n        </select>\n      </div>\n    </div>\n\n    <div class=\"is-flex is-justify-content-space-between\">\n      <div class=\"field is-relative is-mb-0 is-hidden-tablet\">\n        <input\n          type=\"checkbox\"\n          class=\"switch is-small is-rounded is-secondary\"\n          id=\"displayValue\"\n          name=\"displayValue\"\n          [(ngModel)]=\"displayValue\" />\n        <label for=\"displayValue\">Show numerical value</label>\n      </div>\n    </div>\n  </div>\n}\n\n@if (!logsResource.isLoading() && noData()) {\n  <div class=\"chart-area-border\">\n    <p class=\"has-text-centered\">\n      <span>No breakdown available for</span>\n      @if (selectedTerm()) {\n        <span class=\"is-pl-1\">{{ selectedTerm().name }}</span>\n      }\n      @if (selectedMethod()) {\n        <span class=\"is-pl-1\">({{ selectedMethod().name }})</span>\n      }\n      <span>.</span>\n    </p>\n  </div>\n}\n\n<he-horizontal-bar-chart\n  #chart=\"horizontalBarChart\"\n  class=\"is-relative h-100\"\n  [class.is-hidden]=\"!logsResource.isLoading() && noData()\"\n  [title]=\"selectedTerm()?.units\"\n  [config]=\"configuration()\"\n  [data]=\"chartData()\"\n  [max]=\"totalPositive()\"\n  [maximumValues]=\"maximumValues()\"\n  [showExportButton]=\"false\"\n  [showNegativeValues]=\"true\"\n  [tooltipFn]=\"chartTooltipFn\"\n  [afterBarDrawSettings]=\"afterBarDrawSettings()\" />\n", styles: [":host{display:block;overflow:visible}@media screen and (max-width:767px){.chart-area-border{padding:0}}@media screen and (max-width:767px){.breakdown-actions-table{flex-direction:column;align-items:flex-start!important}}.breakdown-legend{background:#fafafa}.breakdown-legend--color{width:8px;height:8px;border-radius:50%}\n"], dependencies: [{ kind: "component", type: HESvgIconComponent, selector: "he-svg-icon", inputs: ["name", "size", "animation"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: HorizontalBarChartComponent, selector: "he-horizontal-bar-chart", inputs: ["tooltipFn", "afterBarDrawSettings", "minHeight", "maxHeight"], exportAs: ["horizontalBarChart"] }, { kind: "component", type: ChartExportButtonComponent, selector: "he-chart-export-button", inputs: ["buttonClass", "chart", "config", "exportFormats", "chartExportFn"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: ImpactAssessmentsIndicatorBreakdownChartComponent, isStandalone: true, selector: "he-impact-assessments-indicator-breakdown-chart", inputs: { impactAssessment: { classPropertyName: "impactAssessment", publicName: "impactAssessment", isSignal: true, isRequired: true, transformFunction: null }, indicators: { classPropertyName: "indicators", publicName: "indicators", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"is-flex is-gap-8 is-justify-content-space-between is-align-items-center is-mb-3\">\n  <he-chart-export-button [chart]=\"chart\" [chartExportFn]=\"chartExportFn\" [exportFormats]=\"exportFormats\" />\n\n  <ng-content />\n</div>\n\n@if (logsResource.isLoading()) {\n  <div class=\"has-text-center py-3\">\n    <he-svg-icon name=\"loading\" animation=\"spin\" size=\"40\" />\n  </div>\n} @else if (terms()?.length) {\n  <div class=\"is-flex is-align-items-center is-gap-12 is-mb-2 | breakdown-actions-table\">\n    @if (terms()?.length) {\n      <div class=\"control is-expanded is-flex-grow-1\">\n        <div class=\"select is-fullwidth is-small\">\n          <select [(ngModel)]=\"selectedTermId\" name=\"selectedTermId\">\n            @for (term of terms(); track term['@id']) {\n              <option [value]=\"term['@id']\">{{ term.name }}</option>\n            }\n          </select>\n        </div>\n      </div>\n    }\n    @if (methods()?.length) {\n      <div class=\"control is-expanded is-flex-shrink-0\">\n        <div class=\"select is-fullwidth is-small\">\n          <select [(ngModel)]=\"selectedMethodId\" name=\"selectedMethodId\">\n            @for (term of methods(); track term['@id']) {\n              <option [value]=\"term['@id']\">{{ term.name }}</option>\n            }\n          </select>\n        </div>\n      </div>\n    }\n    <div class=\"control is-expanded is-flex-shrink-0\">\n      <div class=\"select is-fullwidth is-small\">\n        <select [(ngModel)]=\"selectedCategory\" name=\"selectedCategory\">\n          <option [ngValue]=\"undefined\">No Disaggregation</option>\n          @for (category of categories; track category.key) {\n            <option [value]=\"category.key\">{{ category.label }}</option>\n          }\n        </select>\n      </div>\n    </div>\n\n    <div class=\"is-flex is-justify-content-space-between\">\n      <div class=\"field is-relative is-mb-0 is-hidden-tablet\">\n        <input\n          type=\"checkbox\"\n          class=\"switch is-small is-rounded is-secondary\"\n          id=\"displayValue\"\n          name=\"displayValue\"\n          [(ngModel)]=\"displayValue\" />\n        <label for=\"displayValue\">Show numerical value</label>\n      </div>\n    </div>\n  </div>\n}\n\n@if (!logsResource.isLoading() && noData()) {\n  <div class=\"chart-area-border\">\n    <p class=\"has-text-centered\">\n      <span>No breakdown available for</span>\n      @if (selectedTerm()) {\n        <span class=\"is-pl-1\">{{ selectedTerm().name }}</span>\n      }\n      @if (selectedMethod()) {\n        <span class=\"is-pl-1\">({{ selectedMethod().name }})</span>\n      }\n      <span>.</span>\n    </p>\n  </div>\n}\n\n<he-horizontal-bar-chart\n  #chart=\"horizontalBarChart\"\n  class=\"is-relative h-100\"\n  [class.is-hidden]=\"!logsResource.isLoading() && noData()\"\n  [title]=\"selectedTerm()?.units\"\n  [config]=\"configuration()\"\n  [data]=\"chartData()\"\n  [max]=\"totalPositive()\"\n  [maximumValues]=\"maximumValues()\"\n  [showExportButton]=\"false\"\n  [showNegativeValues]=\"true\"\n  [tooltipFn]=\"chartTooltipFn\"\n  [afterBarDrawSettings]=\"afterBarDrawSettings()\" />\n", styles: [":host{display:block;overflow:visible}@media screen and (max-width:767px){.chart-area-border{padding:0}}@media screen and (max-width:767px){.breakdown-actions-table{flex-direction:column;align-items:flex-start!important}}.breakdown-legend{background:#fafafa}.breakdown-legend--color{width:8px;height:8px;border-radius:50%}\n"], dependencies: [{ kind: "component", type: HESvgIconComponent, selector: "he-svg-icon", inputs: ["name", "size", "animation"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: HorizontalBarChartComponent, selector: "he-horizontal-bar-chart", inputs: ["tooltipFn", "afterBarDrawSettings", "axisTooltipFn", "axisLabelClickFn", "minHeight", "maxHeight"], exportAs: ["horizontalBarChart"] }, { kind: "component", type: ChartExportButtonComponent, selector: "he-chart-export-button", inputs: ["buttonClass", "chart", "config", "exportFormats", "chartExportFn"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ImpactAssessmentsIndicatorBreakdownChartComponent, decorators: [{
             type: Component$1,
@@ -17097,10 +17264,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
         }], ctorParameters: () => [], propDecorators: { impactAssessment: [{ type: i0.Input, args: [{ isSignal: true, alias: "impactAssessment", required: true }] }], indicators: [{ type: i0.Input, args: [{ isSignal: true, alias: "indicators", required: false }] }] } });
 
 const impactValue = (impact, values) => (values[nodeVersionKey(impact)]?.nodes[0] || { value: 0 }).value;
-const impactName = (impact, index) => `${index + 1}. ${defaultLabel(impact)}`;
 const termAllowed$1 = (filterTermTypes = [], term) => !filterTermTypes?.length || (filterTermTypes || []).includes(term?.termType);
 class ImpactAssessmentsIndicatorsChartComponent {
     constructor() {
+        this.route = inject(ActivatedRoute);
         this.nodeStoreService = inject(HeNodeStoreService);
         this.nodeService = inject(HeNodeService);
         this.emissionCategoryService = inject(CyclesEmissionsCategoryService);
@@ -17111,9 +17278,19 @@ class ImpactAssessmentsIndicatorsChartComponent {
         this.filterTermTypes = input([], ...(ngDevMode ? [{ debugName: "filterTermTypes" }] : []));
         this.categories = this.emissionCategoryService.categories;
         this.selectedCategory = signal(undefined, ...(ngDevMode ? [{ debugName: "selectedCategory" }] : []));
-        this.impactAssessments = computed(() => this.nodeStoreService.findByState(NodeType.ImpactAssessment, DataState.recalculated), ...(ngDevMode ? [{ debugName: "impactAssessments" }] : []));
+        this.dataVersion = toSignal(this.route.queryParams.pipe(map(({ dataVersion }) => dataVersion)));
+        this.allImpactAssessments = computed(() => this.nodeStoreService.findByState(NodeType.ImpactAssessment, DataState.recalculated), ...(ngDevMode ? [{ debugName: "allImpactAssessments" }] : []));
+        this.products = computed(() => uniqBy(this.allImpactAssessments().map(impactAssessmentProduct).filter(Boolean), '@id').sort((a, b) => a.name.localeCompare(b.name)), ...(ngDevMode ? [{ debugName: "products" }] : []));
+        this.selectedProductId = signal(undefined, ...(ngDevMode ? [{ debugName: "selectedProductId" }] : []));
+        // labels are built from every impact assessment, so a bar keeps the number it has in the table
+        // view whichever product is selected
+        this.labels = computed(() => nodeChartLabels(this.allImpactAssessments(), chartLabelMaxLength), ...(ngDevMode ? [{ debugName: "labels" }] : []));
+        this.displayedImpactAssessments = computed(() => this.allImpactAssessments()
+            .map((impactAssessment, index) => ({ impactAssessment, index, label: this.labels()[index] }))
+            .filter(({ impactAssessment }) => !this.selectedProductId() || impactAssessmentProduct(impactAssessment)?.['@id'] === this.selectedProductId()), ...(ngDevMode ? [{ debugName: "displayedImpactAssessments" }] : []));
+        this.impactAssessments = computed(() => this.displayedImpactAssessments().map(({ impactAssessment }) => impactAssessment), ...(ngDevMode ? [{ debugName: "impactAssessments" }] : []));
         this.contributionsResource = rxResource({
-            params: () => ({ impactAssessments: this.impactAssessments() }),
+            params: () => ({ impactAssessments: this.allImpactAssessments() }),
             stream: ({ params: { impactAssessments } }) => from(impactAssessments).pipe(mergeMap(impactAssessment => this.nodeService.getContributions$(impactAssessment).pipe(map(contributions => ({
                 impactAssessment,
                 contributions: simplifyContributions(impactAssessment, contributions)
@@ -17123,7 +17300,7 @@ class ImpactAssessmentsIndicatorsChartComponent {
             }, {}))
         });
         this.contributionsPerImpactAssessment = computed(() => this.contributionsResource.value() ?? {}, ...(ngDevMode ? [{ debugName: "contributionsPerImpactAssessment" }] : []));
-        this.termsMap = computed(() => this.impactAssessments()
+        this.termsMap = computed(() => this.allImpactAssessments()
             .flatMap(impact => [...impact.emissionsResourceUse, ...impact.impacts])
             .reduce((prev, curr) => {
             prev[curr.term['@id']] = curr.term;
@@ -17149,12 +17326,12 @@ class ImpactAssessmentsIndicatorsChartComponent {
         this.methods = computed(() => unique(this.termToMethods()[this.selectedTerm()?.['@id']]), ...(ngDevMode ? [{ debugName: "methods" }] : []));
         this.selectedMethod = computed(() => this.methods().find(term => term['@id'] == this.selectedMethodId()), ...(ngDevMode ? [{ debugName: "selectedMethod" }] : []));
         this.groupedValues = computed(() => this.indicatorPerImpactAssessment()?.[this.selectedTerm()?.name]?.values || {}, ...(ngDevMode ? [{ debugName: "groupedValues" }] : []));
-        this.selectedContributionData = computed(() => Object.fromEntries(Object.entries(this.contributionsPerImpactAssessment()).map(([id, contributions]) => [
-            id,
-            contributions?.[this.selectedTermId()]?.[this.selectedMethodId()] || {}
+        this.selectedContributionData = computed(() => Object.fromEntries(this.impactAssessments().map(impact => [
+            nodeVersionKey(impact),
+            this.contributionsPerImpactAssessment()[nodeVersionKey(impact)]?.[this.selectedTermId()]?.[this.selectedMethodId()] || {}
         ])), ...(ngDevMode ? [{ debugName: "selectedContributionData" }] : []));
         this.contributionTerms = computed(() => unique(Object.values(this.selectedContributionData()).flatMap(v => Object.keys(v))), ...(ngDevMode ? [{ debugName: "contributionTerms" }] : []));
-        this.enableContributions = computed(() => Object.values(this.contributionsPerImpactAssessment())?.length === this.impactAssessments()?.length, ...(ngDevMode ? [{ debugName: "enableContributions" }] : []));
+        this.enableContributions = computed(() => this.impactAssessments().every(impact => !!this.contributionsPerImpactAssessment()[nodeVersionKey(impact)]), ...(ngDevMode ? [{ debugName: "enableContributions" }] : []));
         this.contributionData = computed(() => this.contributionTerms().map((term, index) => ({
             id: term,
             label: this.termsMap()[term]?.name || term,
@@ -17165,12 +17342,14 @@ class ImpactAssessmentsIndicatorsChartComponent {
             ? this.contributionData()
                 .filter(({ values }) => !values.every(v => !v))
                 .sort((a, b) => Math.max(...b.values.map(v => Math.abs(v))) - Math.max(...a.values.map(v => Math.abs(v))))
-            : this.impactAssessments().map((impact, index) => ({
-                label: impactName(impact, index),
-                count: impactValue(impact, this.groupedValues()),
-                color: listColor(impact, index)
+            : this.displayedImpactAssessments().map(({ impactAssessment, index, label }) => ({
+                label,
+                count: impactValue(impactAssessment, this.groupedValues()),
+                color: listColor(impactAssessment, index)
             })), ...(ngDevMode ? [{ debugName: "chartData" }] : []));
-        this.chartLabels = computed(() => this.impactAssessments().map((impact, index) => impactName(impact, index)), ...(ngDevMode ? [{ debugName: "chartLabels" }] : []));
+        this.chartLabels = computed(() => this.displayedImpactAssessments().map(({ label }) => label), ...(ngDevMode ? [{ debugName: "chartLabels" }] : []));
+        this.axisTooltipFn = (label, index) => this.impactLabelTooltip(index) || label;
+        this.axisLabelClickFn = index => this.openImpactAssessment(index);
         this.exportFormats = computed(() => [
             ...exportFormats,
             this.enableContributions()
@@ -17211,12 +17390,22 @@ class ImpactAssessmentsIndicatorsChartComponent {
             }
         });
     }
+    impactLabelTooltip(index) {
+        const impactAssessment = this.displayedImpactAssessments()[index]?.impactAssessment;
+        return impactAssessment
+            ? [`${index + 1}. ${defaultLabel(impactAssessment)}`, impactAssessment['@id']].filter(Boolean).join('<br />')
+            : '';
+    }
+    openImpactAssessment(index) {
+        const impactAssessment = this.displayedImpactAssessments()[index]?.impactAssessment;
+        return impactAssessment ? openNodeUrl(impactAssessment, this.dataVersion()) : undefined;
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ImpactAssessmentsIndicatorsChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: ImpactAssessmentsIndicatorsChartComponent, isStandalone: true, selector: "he-impact-assessments-indicators-chart", inputs: { key: { classPropertyName: "key", publicName: "key", isSignal: true, isRequired: false, transformFunction: null }, filterTermTypes: { classPropertyName: "filterTermTypes", publicName: "filterTermTypes", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "barChart", first: true, predicate: HorizontalBarChartComponent, descendants: true, isSignal: true }, { propertyName: "contributionChart", first: true, predicate: ContributionChartComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"is-flex is-gap-8 is-justify-content-space-between is-align-items-center is-mb-3\">\n  <he-chart-export-button [chart]=\"chart()\" [chartExportFn]=\"chartExportFn\" [exportFormats]=\"exportFormats()\" />\n\n  <ng-content />\n</div>\n\n@if (terms()?.length) {\n  <div class=\"is-flex is-align-items-center is-flex-wrap-wrap is-gap-12 is-mb-2 | breakdown-actions-table\">\n    @if (terms()?.length) {\n      <div class=\"control is-expanded is-flex-grow-1\">\n        <div class=\"select is-fullwidth is-small\">\n          <select [(ngModel)]=\"selectedTermId\" name=\"selectedTermId\">\n            @for (term of terms(); track term['@id']) {\n              <option [value]=\"term['@id']\">{{ term.name }}</option>\n            }\n          </select>\n        </div>\n      </div>\n    }\n    @if (methods()?.length) {\n      <div class=\"control is-expanded is-flex-shrink-0\">\n        <div class=\"select is-fullwidth is-small\">\n          <select [(ngModel)]=\"selectedMethodId\" name=\"selectedMethodId\">\n            @for (term of methods(); track term['@id']) {\n              <option [value]=\"term['@id']\">{{ term.name }}</option>\n            }\n          </select>\n        </div>\n      </div>\n    }\n    @if (enableContributions()) {\n      <div class=\"control is-expanded is-flex-shrink-0\">\n        <div class=\"select is-fullwidth is-small\">\n          <select [(ngModel)]=\"selectedCategory\" name=\"selectedCategory\">\n            <option [ngValue]=\"undefined\">No Disaggregation</option>\n            @for (category of categories; track category.key) {\n              <option [value]=\"category.key\">{{ category.label }}</option>\n            }\n          </select>\n        </div>\n      </div>\n    }\n  </div>\n}\n\n@if (enableContributions()) {\n  <he-contribution-chart\n    class=\"is-relative h-100\"\n    [label]=\"selectedTerm()?.units\"\n    [data]=\"chartData()\"\n    [labels]=\"chartLabels()\"\n    [category]=\"selectedCategory()\"\n    [showExportButton]=\"false\"\n    [showLegend]=\"false\" />\n} @else {\n  <he-horizontal-bar-chart\n    class=\"is-relative h-100\"\n    [title]=\"selectedTerm()?.units\"\n    [data]=\"chartData()\"\n    [showExportButton]=\"false\" />\n}\n", styles: [":host{display:block;overflow:visible}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: HorizontalBarChartComponent, selector: "he-horizontal-bar-chart", inputs: ["tooltipFn", "afterBarDrawSettings", "minHeight", "maxHeight"], exportAs: ["horizontalBarChart"] }, { kind: "component", type: ContributionChartComponent, selector: "he-contribution-chart", inputs: ["data", "labels", "label", "showExportButton", "showLegend", "config", "minHeight", "maxHeight", "height", "category"], exportAs: ["contributionChart"] }, { kind: "component", type: ChartExportButtonComponent, selector: "he-chart-export-button", inputs: ["buttonClass", "chart", "config", "exportFormats", "chartExportFn"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: ImpactAssessmentsIndicatorsChartComponent, isStandalone: true, selector: "he-impact-assessments-indicators-chart", inputs: { key: { classPropertyName: "key", publicName: "key", isSignal: true, isRequired: false, transformFunction: null }, filterTermTypes: { classPropertyName: "filterTermTypes", publicName: "filterTermTypes", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "barChart", first: true, predicate: HorizontalBarChartComponent, descendants: true, isSignal: true }, { propertyName: "contributionChart", first: true, predicate: ContributionChartComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"is-flex is-gap-8 is-justify-content-space-between is-align-items-center is-mb-3\">\n  <he-chart-export-button [chart]=\"chart()\" [chartExportFn]=\"chartExportFn\" [exportFormats]=\"exportFormats()\" />\n\n  <ng-content />\n</div>\n\n@if (terms()?.length || products()?.length > 1) {\n  <div class=\"is-flex is-align-items-center is-flex-wrap-wrap is-gap-12 is-mb-2 | breakdown-actions-table\">\n    @if (terms()?.length) {\n      <div class=\"control is-expanded is-flex-grow-1\">\n        <div class=\"select is-fullwidth is-small\">\n          <select [(ngModel)]=\"selectedTermId\" name=\"selectedTermId\">\n            @for (term of terms(); track term['@id']) {\n              <option [value]=\"term['@id']\">{{ term.name }}</option>\n            }\n          </select>\n        </div>\n      </div>\n    }\n    @if (products()?.length > 1) {\n      <div class=\"control is-expanded is-flex-shrink-0\">\n        <div class=\"select is-fullwidth is-small\">\n          <select [(ngModel)]=\"selectedProductId\" name=\"selectedProductId\">\n            <option [ngValue]=\"undefined\">All products</option>\n            @for (product of products(); track product['@id']) {\n              <option [value]=\"product['@id']\">{{ product.name }}</option>\n            }\n          </select>\n        </div>\n      </div>\n    }\n    @if (methods()?.length) {\n      <div class=\"control is-expanded is-flex-shrink-0\">\n        <div class=\"select is-fullwidth is-small\">\n          <select [(ngModel)]=\"selectedMethodId\" name=\"selectedMethodId\">\n            @for (term of methods(); track term['@id']) {\n              <option [value]=\"term['@id']\">{{ term.name }}</option>\n            }\n          </select>\n        </div>\n      </div>\n    }\n    @if (enableContributions()) {\n      <div class=\"control is-expanded is-flex-shrink-0\">\n        <div class=\"select is-fullwidth is-small\">\n          <select [(ngModel)]=\"selectedCategory\" name=\"selectedCategory\">\n            <option [ngValue]=\"undefined\">No Disaggregation</option>\n            @for (category of categories; track category.key) {\n              <option [value]=\"category.key\">{{ category.label }}</option>\n            }\n          </select>\n        </div>\n      </div>\n    }\n  </div>\n}\n\n@if (enableContributions()) {\n  <he-contribution-chart\n    class=\"is-relative h-100\"\n    [label]=\"selectedTerm()?.units\"\n    [data]=\"chartData()\"\n    [labels]=\"chartLabels()\"\n    [category]=\"selectedCategory()\"\n    [axisTooltipFn]=\"axisTooltipFn\"\n    [axisLabelClickFn]=\"axisLabelClickFn\"\n    [showExportButton]=\"false\"\n    [showLegend]=\"false\" />\n} @else {\n  <he-horizontal-bar-chart\n    class=\"is-relative h-100\"\n    [title]=\"selectedTerm()?.units\"\n    [data]=\"chartData()\"\n    [axisTooltipFn]=\"axisTooltipFn\"\n    [axisLabelClickFn]=\"axisLabelClickFn\"\n    [showExportButton]=\"false\" />\n}\n", styles: [":host{display:block;overflow:visible}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: HorizontalBarChartComponent, selector: "he-horizontal-bar-chart", inputs: ["tooltipFn", "afterBarDrawSettings", "axisTooltipFn", "axisLabelClickFn", "minHeight", "maxHeight"], exportAs: ["horizontalBarChart"] }, { kind: "component", type: ContributionChartComponent, selector: "he-contribution-chart", inputs: ["data", "labels", "label", "showExportButton", "showLegend", "config", "axisTooltipFn", "axisLabelClickFn", "minHeight", "maxHeight", "height", "category"], exportAs: ["contributionChart"] }, { kind: "component", type: ChartExportButtonComponent, selector: "he-chart-export-button", inputs: ["buttonClass", "chart", "config", "exportFormats", "chartExportFn"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ImpactAssessmentsIndicatorsChartComponent, decorators: [{
             type: Component$1,
-            args: [{ selector: 'he-impact-assessments-indicators-chart', changeDetection: ChangeDetectionStrategy.OnPush, imports: [FormsModule, HorizontalBarChartComponent, ContributionChartComponent, ChartExportButtonComponent], template: "<div class=\"is-flex is-gap-8 is-justify-content-space-between is-align-items-center is-mb-3\">\n  <he-chart-export-button [chart]=\"chart()\" [chartExportFn]=\"chartExportFn\" [exportFormats]=\"exportFormats()\" />\n\n  <ng-content />\n</div>\n\n@if (terms()?.length) {\n  <div class=\"is-flex is-align-items-center is-flex-wrap-wrap is-gap-12 is-mb-2 | breakdown-actions-table\">\n    @if (terms()?.length) {\n      <div class=\"control is-expanded is-flex-grow-1\">\n        <div class=\"select is-fullwidth is-small\">\n          <select [(ngModel)]=\"selectedTermId\" name=\"selectedTermId\">\n            @for (term of terms(); track term['@id']) {\n              <option [value]=\"term['@id']\">{{ term.name }}</option>\n            }\n          </select>\n        </div>\n      </div>\n    }\n    @if (methods()?.length) {\n      <div class=\"control is-expanded is-flex-shrink-0\">\n        <div class=\"select is-fullwidth is-small\">\n          <select [(ngModel)]=\"selectedMethodId\" name=\"selectedMethodId\">\n            @for (term of methods(); track term['@id']) {\n              <option [value]=\"term['@id']\">{{ term.name }}</option>\n            }\n          </select>\n        </div>\n      </div>\n    }\n    @if (enableContributions()) {\n      <div class=\"control is-expanded is-flex-shrink-0\">\n        <div class=\"select is-fullwidth is-small\">\n          <select [(ngModel)]=\"selectedCategory\" name=\"selectedCategory\">\n            <option [ngValue]=\"undefined\">No Disaggregation</option>\n            @for (category of categories; track category.key) {\n              <option [value]=\"category.key\">{{ category.label }}</option>\n            }\n          </select>\n        </div>\n      </div>\n    }\n  </div>\n}\n\n@if (enableContributions()) {\n  <he-contribution-chart\n    class=\"is-relative h-100\"\n    [label]=\"selectedTerm()?.units\"\n    [data]=\"chartData()\"\n    [labels]=\"chartLabels()\"\n    [category]=\"selectedCategory()\"\n    [showExportButton]=\"false\"\n    [showLegend]=\"false\" />\n} @else {\n  <he-horizontal-bar-chart\n    class=\"is-relative h-100\"\n    [title]=\"selectedTerm()?.units\"\n    [data]=\"chartData()\"\n    [showExportButton]=\"false\" />\n}\n", styles: [":host{display:block;overflow:visible}\n"] }]
+            args: [{ selector: 'he-impact-assessments-indicators-chart', changeDetection: ChangeDetectionStrategy.OnPush, imports: [FormsModule, HorizontalBarChartComponent, ContributionChartComponent, ChartExportButtonComponent], template: "<div class=\"is-flex is-gap-8 is-justify-content-space-between is-align-items-center is-mb-3\">\n  <he-chart-export-button [chart]=\"chart()\" [chartExportFn]=\"chartExportFn\" [exportFormats]=\"exportFormats()\" />\n\n  <ng-content />\n</div>\n\n@if (terms()?.length || products()?.length > 1) {\n  <div class=\"is-flex is-align-items-center is-flex-wrap-wrap is-gap-12 is-mb-2 | breakdown-actions-table\">\n    @if (terms()?.length) {\n      <div class=\"control is-expanded is-flex-grow-1\">\n        <div class=\"select is-fullwidth is-small\">\n          <select [(ngModel)]=\"selectedTermId\" name=\"selectedTermId\">\n            @for (term of terms(); track term['@id']) {\n              <option [value]=\"term['@id']\">{{ term.name }}</option>\n            }\n          </select>\n        </div>\n      </div>\n    }\n    @if (products()?.length > 1) {\n      <div class=\"control is-expanded is-flex-shrink-0\">\n        <div class=\"select is-fullwidth is-small\">\n          <select [(ngModel)]=\"selectedProductId\" name=\"selectedProductId\">\n            <option [ngValue]=\"undefined\">All products</option>\n            @for (product of products(); track product['@id']) {\n              <option [value]=\"product['@id']\">{{ product.name }}</option>\n            }\n          </select>\n        </div>\n      </div>\n    }\n    @if (methods()?.length) {\n      <div class=\"control is-expanded is-flex-shrink-0\">\n        <div class=\"select is-fullwidth is-small\">\n          <select [(ngModel)]=\"selectedMethodId\" name=\"selectedMethodId\">\n            @for (term of methods(); track term['@id']) {\n              <option [value]=\"term['@id']\">{{ term.name }}</option>\n            }\n          </select>\n        </div>\n      </div>\n    }\n    @if (enableContributions()) {\n      <div class=\"control is-expanded is-flex-shrink-0\">\n        <div class=\"select is-fullwidth is-small\">\n          <select [(ngModel)]=\"selectedCategory\" name=\"selectedCategory\">\n            <option [ngValue]=\"undefined\">No Disaggregation</option>\n            @for (category of categories; track category.key) {\n              <option [value]=\"category.key\">{{ category.label }}</option>\n            }\n          </select>\n        </div>\n      </div>\n    }\n  </div>\n}\n\n@if (enableContributions()) {\n  <he-contribution-chart\n    class=\"is-relative h-100\"\n    [label]=\"selectedTerm()?.units\"\n    [data]=\"chartData()\"\n    [labels]=\"chartLabels()\"\n    [category]=\"selectedCategory()\"\n    [axisTooltipFn]=\"axisTooltipFn\"\n    [axisLabelClickFn]=\"axisLabelClickFn\"\n    [showExportButton]=\"false\"\n    [showLegend]=\"false\" />\n} @else {\n  <he-horizontal-bar-chart\n    class=\"is-relative h-100\"\n    [title]=\"selectedTerm()?.units\"\n    [data]=\"chartData()\"\n    [axisTooltipFn]=\"axisTooltipFn\"\n    [axisLabelClickFn]=\"axisLabelClickFn\"\n    [showExportButton]=\"false\" />\n}\n", styles: [":host{display:block;overflow:visible}\n"] }]
         }], ctorParameters: () => [], propDecorators: { barChart: [{ type: i0.ViewChild, args: [i0.forwardRef(() => HorizontalBarChartComponent), { isSignal: true }] }], contributionChart: [{ type: i0.ViewChild, args: [i0.forwardRef(() => ContributionChartComponent), { isSignal: true }] }], key: [{ type: i0.Input, args: [{ isSignal: true, alias: "key", required: false }] }], filterTermTypes: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterTermTypes", required: false }] }] } });
 
 var View$1;
@@ -17267,6 +17456,7 @@ class ImpactAssessmentsProductsComponent {
         this.filterTermTypes = input([], ...(ngDevMode ? [{ debugName: "filterTermTypes" }] : []));
         this.enableFilterMethodModel = input(false, ...(ngDevMode ? [{ debugName: "enableFilterMethodModel" }] : []));
         this.schemaBaseUrl = schemaBaseUrl();
+        this.productTerm = impactAssessmentProduct;
         this.nodeVersionKey = nodeVersionKey;
         this.countGroupVisibleNodes = countGroupVisibleNodes;
         this.headerKeys = computed(() => [
@@ -17362,9 +17552,6 @@ class ImpactAssessmentsProductsComponent {
     cycleLabel({ '@id': id, name }) {
         return name || this.cycles().find(v => v['@id'] === id)?.name;
     }
-    productTerm(impactAssessment) {
-        return impactAssessment.product?.term || impactAssessment.term;
-    }
     selectIndex({ target: { value } }) {
         this.selectedIndex.set(+value);
     }
@@ -18065,5 +18252,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { ARRAY_DELIMITER, ApplyPurePipe, BarChartComponent, BibliographiesSearchConfirmComponent, BlankNodeStateComponent, BlankNodeStateNoticeComponent, BlankNodeValueDeltaComponent, CapitalizePipe, ChartComponent, ChartConfigurationDirective, ChartExportButtonComponent, ChartTooltipComponent, ClickOutsideDirective, ClipboardComponent, CollapsibleBlockComponent, CollapsibleBoxComponent, CollapsibleBoxStyle, ColorPalette, CompoundDirective, CompoundPipe, ContributionChartComponent, ControlValueAccessor, CycleNodesKeyGroup, CyclesCompletenessComponent, CyclesEmissionsCategoryService, CyclesEmissionsChartComponent, CyclesFunctionalUnitMeasureComponent, CyclesMetadataComponent, CyclesNodesComponent, CyclesNodesTimelineComponent, CyclesResultComponent, DataTableComponent, DefaultPipe, DeltaColour, DistributionChartComponent, DrawerContainerComponent, DurationPipe, EllipsisPipe, EngineModelsLinkComponent, EngineModelsLookupInfoComponent, EngineModelsStageComponent, EngineModelsStageDeepComponent, EngineModelsStageDeepService, EngineModelsVersionInfoComponent, EngineModelsVersionLinkComponent, EngineOrchestratorEditComponent, EngineRequirementsFormComponent, FileSizePipe, FileUploadErrorKeys, FilesDragDropDirective, FilesDropZoneComponent, FilesErrorSummaryComponent, FilesFormComponent, FilesFormEditableComponent, FilesUploadErrorsComponent, FilterAccordionComponent, FormulaBlockComponent, GUIDE_ENABLED, GetPipe, GlossaryMigrationFormat, GuideOverlayComponent, HE_API_BASE_URL, HE_CALCULATIONS_BASE_URL, HE_MAP_LOADED, HeAuthService, HeCommonService, HeEngineService, HeGlossaryService, HeMendeleyService, HeNodeCsvService, HeNodeService, HeNodeStoreService, HeSchemaService, HeSearchService, HeToastService, HorizontalBarChartComponent, HorizontalButtonsGroupComponent, ImpactAssessmentsGraphComponent, ImpactAssessmentsIndicatorBreakdownChartComponent, ImpactAssessmentsIndicatorsChartComponent, ImpactAssessmentsProductsComponent, IsArrayPipe, IsObjectPipe, IssueConfirmComponent, KeyToLabelPipe, Level, LineChartComponent, LinkKeyValueComponent, LogStatus, LongPressDirective, MAX_RESULTS, MapsDrawingComponent, MapsDrawingConfirmComponent, MaxPipe, MeanPipe, MedianPipe, MendeleySearchResult, MinPipe, MobileShellComponent, NavigationMenuComponent, NoExtPipe, NodeAggregatedComponent, NodeAggregatedFormulasComponent, NodeAggregatedInfoComponent, NodeAggregatedQualityScoreComponent, NodeAggregationLogsComponent, NodeCsvExportConfirmComponent, NodeCsvPreviewComponent, NodeCsvSelectHeadersComponent, NodeIconComponent, NodeJLogModelsComponent, NodeJsonldComponent, NodeJsonldSchemaComponent, NodeKeyState, NodeLinkComponent, NodeLogsFileComponent, NodeLogsModelsComponent, NodeLogsTimeComponent, NodeMissingLookupFactorsComponent, NodeQualityScore, NodeRecommendationsComponent, NodeSelectComponent, NodeValueDetailsComponent, PipelineStagesProgressComponent, PluralizePipe, PopoverComponent, PopoverConfirmComponent, PrecisionPipe, RelatedNodeResult, RemoveMarkdownPipe, RepeatPipe, Repository, ResizedDirective, ResizedEvent, ResponsiveService, SchemaInfoComponent, SchemaVersionLinkComponent, SearchExtendComponent, ShelfDialogComponent, ShellComponent, SiteNodesKeyGroup, SitesManagementChartComponent, SitesMapsComponent, SitesNodesComponent, SkeletonTextComponent, SocialTagsComponent, SortByPipe, SortSelectComponent, SumPipe, TagsInputDirective, Template, TermsPropertyContentComponent, TermsSubClassOfContentComponent, TermsUnitsDescriptionComponent, ThousandSuffixesPipe, ThousandsPipe, TimesPipe, ToastComponent, UncapitalizePipe, addPolygonToFeature, afterBarDrawPlugin, allCountriesQuery, allGroups, allOptions, availableProperties, axisHoverPlugin, backgroundHoverPlugin, backgroundModelParams, baseApiUrl, baseUrl, bottom, buildSummary, bytesSize, calculateCycleDuration, calculateCycleDurationEnabled, calculateCycleStartDate, calculateCycleStartDateEnabled, capitalize, changelogUrl, clustererImage, code, colorToRgba, compoundToHtml, computeKeys, computeTerms, contactUsEmail, contactUsLink, convertToSvg, coordinatesToPoint, copyObject, countGroupVisibleNodes, countriesQuery, createMarker, cropsQuery, d3ellipse, d3wrap, dataPathLabel, dataPathToKey, dataVersionHeader, dataVersionHeaderKey, defaultFeature, defaultLabel, defaultSuggestionType, defaultTicksFont, definitionToSchemaType, distinctUntilChangedDeep, downloadFile, downloadPng, downloadSvg, ellipsis, engineGitBaseUrl, engineGitUrl, errorText, errorsLabel, evaluateSuccess, exportAsSVG, exportFormats, externalLink, externalNodeLink, fillColor, fillStyle, filterBlankNode$1 as filterBlankNode, filterParams, findBackgroundModel, findConfigModels, findMatchingModel, findModels, findNodeModel, findOrchestratorModel, findProperty, findPropertyById, findTermModels, flatFilterData, flatFilterNode, formatCustomErrorMessage, formatDate, formatError, formatPropertyError, formatter$1 as formatter, getColor, getDatesBetween, gitBranch, gitHome, glossaryBaseUrl, glossaryLink, groupBlankNodesByTermIdentity, groupChanged, groupDataByCategory, groupJLogByField, groupJLogByTerm, groupLogsByTerm, groupNodesByTerm, groupdLogsByKey, grouppedKeys, grouppedValueKeys, groupsLogsByFields, guideModelUrl, guideNamespace, handleAPIError, handleGuideEvent, hasError, hasValidationError, hasWarning, hexToRgba, ignoreKeys$2 as ignoreKeys, increaseScaleLimits, initialFilterState, injectResizeEvent$, inputGroupsTermTypes, isAddPropertyEnabled, isChrome, isDateBetween, isEqual, isExternal, isIdenticalNodeValue, isKeyClosedVisible, isKeyHidden, isMaxStage, isMethodModelAllowed, isNonNodeModelKey, isSchemaIri, isScrolledBelow, isState, isTermTypeAllowed, isValidKey, jLogModelCount, keyToDataPath, levels, listColor, listColorContinuous, listColorWithAlpha, loadMapApi, locationQuery, logToCsv$2 as logToCsv, logValueArray, logsKey, lollipopChartPlugin, lookupUrl, mapFilterData, mapsUrl, markerIcon, markerPie, matchAggregatedQuery, matchAggregatedValidatedQuery, matchBoolPrefixQuery, matchCountry, matchExactQuery, matchGlobalRegion, matchId, matchNameNormalized, matchNestedKey, matchPhrasePrefixQuery, matchPhraseQuery, matchPrimaryProductQuery, matchQuery, matchRegex, matchRegion, matchTermType, matchType, maxAreaSize, measurementValue, mergeDataWithHeaders, methodTierOrder, migrationErrorMessage, migrationsUrl, modelCount, modelKeyParams, modelParams, models, multiMatchQuery, nestedProperty, nestingEnabled, nestingTypeEnabled, noValue, nodeAvailableProperties, nodeById, nodeColours$1 as nodeColours, nodeDataState, nodeDataStates, nodeDataVersion, nodeId, nodeIdWithoutDataVersion, nodeIds, nodeLink, nodeLinkEnabled, nodeLinkTypeEnabled, nodeLogsUrl, nodeQualityScoreColor, nodeQualityScoreLevel, nodeQualityScoreMaxDefault, nodeQualityScoreOrder, nodeRequestId, nodeSecondaryColours, nodeToAggregationFilename, nodeType, nodeTypeDataState, nodeTypeIcon, nodeTypeIconSchema, nodeUrl, nodeUrlParams, nodeVersion, nodeVersionKey, nodesByState, nodesByType, numberGte, optionsFromGroup, parentKey, parentProperty, parseColor, parseData, parseDataPath, parseLines, parseMessage, parseNewValue, pluralize, pointToCoordinates, polygonBounds, polygonToCoordinates, polygonToMap, polygonsFromFeature, populateWithTrackIdsFilterData, postGuideEvent, primaryProduct, productsQuery, propertyError, propertyId, recursiveProperties, refToSchemaType, refreshPropertyKeys, regionsQuery, registerChart, repeat, reportIssueLink, reportIssueUrl, safeJSONParse, safeJSONStringify, schemaBaseUrl, schemaDataBaseUrl, schemaLink, schemaRequiredProperties, schemaTypeToDefaultValue, scrollToEl, scrollTop, searchFilterData, searchableTypes, siblingProperty, simplifyContributions, singleProperty, siteTooBig, siteTypeToColor, siteTypeToIcon, sortProperties, sortedDates, strokeColor, strokeStyle, subValueKeys, suggestMatchQuery, suggestQuery, sumValues, takeAfterViewInit, termLocation, termLocationName, termProperties, termTypeLabel, toSnakeCase, toTextParts, toThousands, typeToNewProperty, typeaheadFocus, uncapitalize, uniqueDatesBetween, updateProperties, valueLink, valueToString, valueTypeToDefault, valueValue, waitFor, wildcardQuery };
+export { ARRAY_DELIMITER, ApplyPurePipe, BarChartComponent, BibliographiesSearchConfirmComponent, BlankNodeStateComponent, BlankNodeStateNoticeComponent, BlankNodeValueDeltaComponent, CapitalizePipe, ChartComponent, ChartConfigurationDirective, ChartExportButtonComponent, ChartTooltipComponent, ClickOutsideDirective, ClipboardComponent, CollapsibleBlockComponent, CollapsibleBoxComponent, CollapsibleBoxStyle, ColorPalette, CompoundDirective, CompoundPipe, ContributionChartComponent, ControlValueAccessor, CycleNodesKeyGroup, CyclesCompletenessComponent, CyclesEmissionsCategoryService, CyclesEmissionsChartComponent, CyclesFunctionalUnitMeasureComponent, CyclesMetadataComponent, CyclesNodesComponent, CyclesNodesTimelineComponent, CyclesResultComponent, DataTableComponent, DefaultPipe, DeltaColour, DistributionChartComponent, DrawerContainerComponent, DurationPipe, EllipsisPipe, EngineModelsLinkComponent, EngineModelsLookupInfoComponent, EngineModelsStageComponent, EngineModelsStageDeepComponent, EngineModelsStageDeepService, EngineModelsVersionInfoComponent, EngineModelsVersionLinkComponent, EngineOrchestratorEditComponent, EngineRequirementsFormComponent, FileSizePipe, FileUploadErrorKeys, FilesDragDropDirective, FilesDropZoneComponent, FilesErrorSummaryComponent, FilesFormComponent, FilesFormEditableComponent, FilesUploadErrorsComponent, FilterAccordionComponent, FormulaBlockComponent, GUIDE_ENABLED, GetPipe, GlossaryMigrationFormat, GuideOverlayComponent, HE_API_BASE_URL, HE_CALCULATIONS_BASE_URL, HE_MAP_LOADED, HeAuthService, HeCommonService, HeEngineService, HeGlossaryService, HeMendeleyService, HeNodeCsvService, HeNodeService, HeNodeStoreService, HeSchemaService, HeSearchService, HeToastService, HorizontalBarChartComponent, HorizontalButtonsGroupComponent, ImpactAssessmentsGraphComponent, ImpactAssessmentsIndicatorBreakdownChartComponent, ImpactAssessmentsIndicatorsChartComponent, ImpactAssessmentsProductsComponent, IsArrayPipe, IsObjectPipe, IssueConfirmComponent, KeyToLabelPipe, Level, LineChartComponent, LinkKeyValueComponent, LogStatus, LongPressDirective, MAX_RESULTS, MapsDrawingComponent, MapsDrawingConfirmComponent, MaxPipe, MeanPipe, MedianPipe, MendeleySearchResult, MinPipe, MobileShellComponent, NavigationMenuComponent, NoExtPipe, NodeAggregatedComponent, NodeAggregatedFormulasComponent, NodeAggregatedInfoComponent, NodeAggregatedQualityScoreComponent, NodeAggregationLogsComponent, NodeCsvExportConfirmComponent, NodeCsvPreviewComponent, NodeCsvSelectHeadersComponent, NodeIconComponent, NodeJLogModelsComponent, NodeJsonldComponent, NodeJsonldSchemaComponent, NodeKeyState, NodeLinkComponent, NodeLogsFileComponent, NodeLogsModelsComponent, NodeLogsTimeComponent, NodeMissingLookupFactorsComponent, NodeQualityScore, NodeRecommendationsComponent, NodeSelectComponent, NodeValueDetailsComponent, PipelineStagesProgressComponent, PluralizePipe, PopoverComponent, PopoverConfirmComponent, PrecisionPipe, RelatedNodeResult, RemoveMarkdownPipe, RepeatPipe, Repository, ResizedDirective, ResizedEvent, ResponsiveService, SchemaInfoComponent, SchemaVersionLinkComponent, SearchExtendComponent, ShelfDialogComponent, ShellComponent, SiteNodesKeyGroup, SitesManagementChartComponent, SitesMapsComponent, SitesNodesComponent, SkeletonTextComponent, SocialTagsComponent, SortByPipe, SortSelectComponent, SumPipe, TagsInputDirective, Template, TermsPropertyContentComponent, TermsSubClassOfContentComponent, TermsUnitsDescriptionComponent, ThousandSuffixesPipe, ThousandsPipe, TimesPipe, ToastComponent, UncapitalizePipe, addPolygonToFeature, afterBarDrawPlugin, allCountriesQuery, allGroups, allOptions, availableProperties, axisHoverPlugin, axisLabelCursor, axisLabelSettings, backgroundHoverPlugin, backgroundModelParams, baseApiUrl, baseUrl, bottom, buildSummary, bytesSize, calculateCycleDuration, calculateCycleDurationEnabled, calculateCycleStartDate, calculateCycleStartDateEnabled, capitalize, changelogUrl, chartLabelMaxLength, clustererImage, code, colorToRgba, compoundToHtml, computeKeys, computeTerms, contactUsEmail, contactUsLink, convertToSvg, coordinatesToPoint, copyObject, countGroupVisibleNodes, countriesQuery, createMarker, cropsQuery, d3ellipse, d3wrap, dataPathLabel, dataPathToKey, dataVersionHeader, dataVersionHeaderKey, defaultFeature, defaultLabel, defaultSuggestionType, defaultTicksFont, definitionToSchemaType, distinctUntilChangedDeep, downloadFile, downloadPng, downloadSvg, ellipsis, engineGitBaseUrl, engineGitUrl, errorText, errorsLabel, evaluateSuccess, exportAsSVG, exportFormats, externalLink, externalNodeLink, fillColor, fillStyle, filterBlankNode$1 as filterBlankNode, filterParams, findBackgroundModel, findConfigModels, findMatchingModel, findModels, findNodeModel, findOrchestratorModel, findProperty, findPropertyById, findTermModels, flatFilterData, flatFilterNode, formatCustomErrorMessage, formatDate, formatError, formatPropertyError, formatter$1 as formatter, getColor, getDatesBetween, gitBranch, gitHome, glossaryBaseUrl, glossaryLink, groupBlankNodesByTermIdentity, groupChanged, groupDataByCategory, groupJLogByField, groupJLogByTerm, groupLogsByTerm, groupNodesByTerm, groupdLogsByKey, grouppedKeys, grouppedValueKeys, groupsLogsByFields, guideModelUrl, guideNamespace, handleAPIError, handleGuideEvent, hasError, hasValidationError, hasWarning, hexToRgba, highestMethodTier, ignoreKeys$2 as ignoreKeys, impactAssessmentProduct, increaseScaleLimits, initialFilterState, injectResizeEvent$, inputGroupsTermTypes, isAddPropertyEnabled, isChrome, isDateBetween, isEqual, isExternal, isIdenticalNodeValue, isKeyClosedVisible, isKeyHidden, isMaxStage, isMethodModelAllowed, isNonNodeModelKey, isSchemaIri, isScrolledBelow, isState, isTermTypeAllowed, isValidKey, jLogModelCount, keyToDataPath, levels, listColor, listColorContinuous, listColorWithAlpha, loadMapApi, locationQuery, logToCsv$2 as logToCsv, logValueArray, logsKey, lollipopChartPlugin, lookupUrl, mapFilterData, mapsUrl, markerIcon, markerPie, matchAggregatedQuery, matchAggregatedValidatedQuery, matchBoolPrefixQuery, matchCountry, matchExactQuery, matchGlobalRegion, matchId, matchNameNormalized, matchNestedKey, matchPhrasePrefixQuery, matchPhraseQuery, matchPrimaryProductQuery, matchQuery, matchRegex, matchRegion, matchTermType, matchType, maxAreaSize, measurementValue, mergeDataWithHeaders, methodTierOrder, migrationErrorMessage, migrationsUrl, modelCount, modelKeyParams, modelParams, models, multiMatchQuery, nestedProperty, nestingEnabled, nestingTypeEnabled, noValue, nodeAvailableProperties, nodeById, nodeChartLabels, nodeColours$1 as nodeColours, nodeDataState, nodeDataStates, nodeDataVersion, nodeId, nodeIdWithoutDataVersion, nodeIds, nodeLink, nodeLinkEnabled, nodeLinkTypeEnabled, nodeLogsUrl, nodeQualityScoreColor, nodeQualityScoreLevel, nodeQualityScoreMaxDefault, nodeQualityScoreOrder, nodeRequestId, nodeSecondaryColours, nodeToAggregationFilename, nodeType, nodeTypeDataState, nodeTypeIcon, nodeTypeIconSchema, nodeUrl, nodeUrlParams, nodeVersion, nodeVersionKey, nodesByState, nodesByType, numberGte, openNodeUrl, openUrl, optionsFromGroup, parentKey, parentProperty, parseColor, parseData, parseDataPath, parseLines, parseMessage, parseNewValue, pluralize, pointToCoordinates, polygonBounds, polygonToCoordinates, polygonToMap, polygonsFromFeature, populateWithTrackIdsFilterData, postGuideEvent, primaryProduct, productsQuery, propertyError, propertyId, recursiveProperties, refToSchemaType, refreshPropertyKeys, regionsQuery, registerChart, repeat, reportIssueLink, reportIssueUrl, safeJSONParse, safeJSONStringify, schemaBaseUrl, schemaDataBaseUrl, schemaLink, schemaRequiredProperties, schemaTypeToDefaultValue, scrollToEl, scrollTop, searchFilterData, searchableTypes, siblingProperty, simplifyContributions, singleProperty, siteTooBig, siteTypeToColor, siteTypeToIcon, sortProperties, sortedDates, strokeColor, strokeStyle, subValueKeys, suggestMatchQuery, suggestQuery, suggestTerms, sumValues, takeAfterViewInit, termLocation, termLocationName, termProperties, termSearch, termTypeLabel, toSnakeCase, toTextParts, toThousands, typeToNewProperty, typeaheadFocus, uncapitalize, uniqueDatesBetween, updateProperties, valueLink, valueToString, valueTypeToDefault, valueValue, waitFor, wildcardQuery };
 //# sourceMappingURL=hestia-earth-ui-components.mjs.map