@hestia-earth/ui-components 0.43.10 → 0.43.12

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

@@ -6899,7 +6899,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
 
 const colors = {
     darkBlue: 'rgba(25, 57, 87, 1)',
-    lightBlue: 'rgba(132, 160, 220, 1)'
+    lightBlue: 'rgba(132, 160, 220, 1)',
+    // `$warning` — marks the reported value, and is the one colour that reads against both a white
+    // page and the dark blue popover the parametric chart is shown in
+    orange: 'rgba(255, 136, 27, 1)'
 };
 const opaqueColor = (color, opacity = 0.5) => color.replace(', 1)', `, ${opacity})`);
 const defaultSettings$1 = Object.freeze({
@@ -6960,6 +6963,96 @@ const createDynamicHistogramData = (values, numberOfBins) => {
     frequencies[numberOfBins - 1] += values.filter(p => p === max).length;
     return { labels, frequencies };
 };
+/**
+ * Parametric mode: how far either side of the mean the curve is drawn, in standard deviations.
+ * Four covers ~99.99% of the density, so the tails are visually flat by the time it stops.
+ */
+const curveSpread = 4;
+const curvePoints = 120;
+/** Fraction of the drawn range kept clear at each end, so a marker on the edge is not clipped. */
+const curvePadding = 0.05;
+const normalPdf = (x, mu, sd) => Math.exp(-0.5 * ((x - mu) / sd) ** 2) / (sd * Math.sqrt(2 * Math.PI));
+/**
+ * The x range to draw. The reported value is included when it is known, because the whole point of
+ * the chart is to show how far outside the interval it sits — clipping it to the curve would hide
+ * exactly what the reader came to see.
+ */
+const curveRange = (mu, sd, value, minX) => {
+    const values = [mu - curveSpread * sd, mu + curveSpread * sd, ...(Number.isFinite(value) ? [value] : [])];
+    const from = Math.min(...values);
+    const to = Math.max(...values);
+    const padding = (to - from) * curvePadding;
+    // a fitted normal has mass either side of the mean, but the quantity it describes may not:
+    // drawing a physical amount below its floor invites the reader to think that is possible
+    return { from: Number.isFinite(minX) ? Math.max(from - padding, minX) : from - padding, to: to + padding };
+};
+/** Samples the normal PDF, as `{x, y}` points for a linear x axis. */
+const createNormalCurve = (mu, sd, value, minX) => {
+    const { from, to } = curveRange(mu, sd, value, minX);
+    return Array.from({ length: curvePoints + 1 }, (_, index) => from + ((to - from) * index) / curvePoints).map(x => ({
+        x,
+        y: normalPdf(x, mu, sd)
+    }));
+};
+/**
+ * The shaded confidence interval, the mean, and the vertical marker at the reported value.
+ *
+ * The mean earns its line: the y axis is a probability density, whose absolute value means nothing
+ * to a reader, so without it there is no way to tell what the peak of the curve represents.
+ */
+const distributionAnnotations = (min, max, value, mean) => ({
+    ...(Number.isFinite(min) && Number.isFinite(max)
+        ? {
+            interval: {
+                type: 'box',
+                xMin: min,
+                xMax: max,
+                backgroundColor: opaqueColor(colors.lightBlue, 0.3),
+                borderWidth: 0,
+                drawTime: 'beforeDatasetsDraw'
+            }
+        }
+        : {}),
+    ...(Number.isFinite(mean)
+        ? {
+            mean: {
+                type: 'line',
+                xMin: mean,
+                xMax: mean,
+                borderColor: colors.lightBlue,
+                borderWidth: 1,
+                borderDash: [4, 4],
+                label: {
+                    display: true,
+                    content: 'average',
+                    position: 'start',
+                    backgroundColor: colors.lightBlue,
+                    color: colors.darkBlue,
+                    font: { size: 9 }
+                }
+            }
+        }
+        : {}),
+    ...(Number.isFinite(value)
+        ? {
+            value: {
+                type: 'line',
+                xMin: value,
+                xMax: value,
+                borderColor: colors.orange,
+                borderWidth: 2,
+                label: {
+                    display: true,
+                    content: `${transform(value, 3, true)}`,
+                    position: 'start',
+                    backgroundColor: colors.orange,
+                    color: '#fff',
+                    font: { size: 10 }
+                }
+            }
+        }
+        : {})
+});
 const createSinglePointDataset = (labels, pointValue) => {
     // Create an array with the same length as the labels, filled with nulls.
     const pointData = new Array(labels.length).fill(null);
@@ -7003,6 +7096,34 @@ class DistributionChartComponent {
          */
         this.maxPercentile = input(0, ...(ngDevMode ? [{ debugName: "maxPercentile" }] : []));
         this.config = input({}, ...(ngDevMode ? [{ debugName: "config" }] : []));
+        /**
+         * Parametric mode: the mean of the distribution. Set `mu` and `sd` to plot the normal curve
+         * instead of binning `distribution` into a histogram — used where only the parameters are known
+         * and there are no samples to bin.
+         */
+        this.mu = input(...(ngDevMode ? [undefined, { debugName: "mu" }] : []));
+        /**
+         * Parametric mode: the standard deviation of the distribution. See `mu`.
+         */
+        this.sd = input(...(ngDevMode ? [undefined, { debugName: "sd" }] : []));
+        /**
+         * Parametric mode: lower bound of the confidence interval to shade.
+         */
+        this.intervalMin = input(...(ngDevMode ? [undefined, { debugName: "intervalMin" }] : []));
+        /**
+         * Parametric mode: upper bound of the confidence interval to shade.
+         */
+        this.intervalMax = input(...(ngDevMode ? [undefined, { debugName: "intervalMax" }] : []));
+        /**
+         * Parametric mode: floor for the drawn range, for a quantity that cannot go below it — pass `0`
+         * for a physical amount. Left unset the curve is drawn symmetrically about `mu`.
+         */
+        this.minX = input(...(ngDevMode ? [undefined, { debugName: "minX" }] : []));
+        /**
+         * `sd` must be strictly positive: a zero or negative deviation makes the PDF a division by zero.
+         */
+        this.parametric = computed(() => Number.isFinite(this.mu()) && Number.isFinite(this.sd()) && this.sd() > 0, ...(ngDevMode ? [{ debugName: "parametric" }] : []));
+        this.curve = computed(() => createNormalCurve(this.mu(), this.sd(), this.value(), this.minX()), ...(ngDevMode ? [{ debugName: "curve" }] : []));
         this.maxPercentileValue = computed(() => this.maxPercentile() ? getPercentileValue(this.distribution(), this.maxPercentile()) : null, ...(ngDevMode ? [{ debugName: "maxPercentileValue" }] : []));
         this.groupedData = computed(() => createDynamicHistogramData(this.maxPercentileValue()
             ? (this.distribution() ?? []).filter(v => v <= this.maxPercentileValue())
@@ -7050,7 +7171,51 @@ class DistributionChartComponent {
                 }
             }
         }), ...(ngDevMode ? [{ debugName: "defaultConfig" }] : []));
-        this.dataConfig = computed(() => ({
+        /**
+         * The x axis is `linear` here, not the category axis the histogram uses: the curve is `{x, y}`
+         * points, and the annotations position the interval and the marker at real x values.
+         */
+        this.parametricConfig = computed(() => ({
+            options: {
+                plugins: {
+                    annotation: {
+                        annotations: distributionAnnotations(this.intervalMin(), this.intervalMax(), this.value(), this.mu())
+                    }
+                },
+                scales: {
+                    x: {
+                        type: 'linear',
+                        display: true,
+                        ticks: {
+                            font: {
+                                family: defaultTicksFont.family,
+                                size: 10,
+                                weight: 400
+                            },
+                            color: '#4A4A4A',
+                            callback: value => `${transform(value, 3, true)}`
+                        },
+                        title: {
+                            display: true,
+                            text: this.label()
+                        }
+                    },
+                    y: {
+                        // the density itself carries no meaning for the reader, only the shape does
+                        ticks: {
+                            display: false
+                        },
+                        grid: {
+                            display: false
+                        },
+                        title: {
+                            display: false
+                        }
+                    }
+                }
+            }
+        }), ...(ngDevMode ? [{ debugName: "parametricConfig" }] : []));
+        this.histogramData = computed(() => ({
             datasets: [
                 this.distribution()
                     ? [
@@ -7089,16 +7254,32 @@ class DistributionChartComponent {
                     : []
             ].flat(),
             labels: this.groupedData().labels
-        }), ...(ngDevMode ? [{ debugName: "dataConfig" }] : []));
-        this.configuration = computed(() => merge$1({}, defaultSettings$1, this.defaultConfig(), this.config()), ...(ngDevMode ? [{ debugName: "configuration" }] : []));
+        }), ...(ngDevMode ? [{ debugName: "histogramData" }] : []));
+        this.parametricData = computed(() => ({
+            datasets: [
+                {
+                    label: 'Distribution',
+                    data: this.curve(),
+                    backgroundColor: opaqueColor(colors.lightBlue, 0.2),
+                    // light enough to read on a dark panel, dark enough to read on a white one
+                    borderColor: colors.lightBlue,
+                    borderWidth: 1,
+                    fill: true,
+                    pointRadius: 0,
+                    type: 'line'
+                }
+            ]
+        }), ...(ngDevMode ? [{ debugName: "parametricData" }] : []));
+        this.dataConfig = computed(() => this.parametric() ? this.parametricData() : this.histogramData(), ...(ngDevMode ? [{ debugName: "dataConfig" }] : []));
+        this.configuration = computed(() => merge$1({}, defaultSettings$1, this.parametric() ? this.parametricConfig() : this.defaultConfig(), this.config()), ...(ngDevMode ? [{ debugName: "configuration" }] : []));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DistributionChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.6", type: DistributionChartComponent, isStandalone: true, selector: "he-distribution-chart", inputs: { distribution: { classPropertyName: "distribution", publicName: "distribution", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, nbBins: { classPropertyName: "nbBins", publicName: "nbBins", isSignal: true, isRequired: false, transformFunction: null }, maxPercentile: { classPropertyName: "maxPercentile", publicName: "maxPercentile", isSignal: true, isRequired: false, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null } }, exportAs: ["distributionChart"], ngImport: i0, template: "<he-chart [data]=\"dataConfig()\" [config]=\"configuration()\" />\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "component", type: ChartComponent, selector: "he-chart", inputs: ["data", "config", "showExportButton"], exportAs: ["chart"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.6", type: DistributionChartComponent, isStandalone: true, selector: "he-distribution-chart", inputs: { distribution: { classPropertyName: "distribution", publicName: "distribution", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, nbBins: { classPropertyName: "nbBins", publicName: "nbBins", isSignal: true, isRequired: false, transformFunction: null }, maxPercentile: { classPropertyName: "maxPercentile", publicName: "maxPercentile", isSignal: true, isRequired: false, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null }, mu: { classPropertyName: "mu", publicName: "mu", isSignal: true, isRequired: false, transformFunction: null }, sd: { classPropertyName: "sd", publicName: "sd", isSignal: true, isRequired: false, transformFunction: null }, intervalMin: { classPropertyName: "intervalMin", publicName: "intervalMin", isSignal: true, isRequired: false, transformFunction: null }, intervalMax: { classPropertyName: "intervalMax", publicName: "intervalMax", isSignal: true, isRequired: false, transformFunction: null }, minX: { classPropertyName: "minX", publicName: "minX", isSignal: true, isRequired: false, transformFunction: null } }, exportAs: ["distributionChart"], ngImport: i0, template: "<he-chart [data]=\"dataConfig()\" [config]=\"configuration()\" />\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "component", type: ChartComponent, selector: "he-chart", inputs: ["data", "config", "showExportButton"], exportAs: ["chart"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DistributionChartComponent, decorators: [{
             type: Component$1,
             args: [{ selector: 'he-distribution-chart', exportAs: 'distributionChart', changeDetection: ChangeDetectionStrategy.OnPush, imports: [ChartComponent], template: "<he-chart [data]=\"dataConfig()\" [config]=\"configuration()\" />\n", styles: [":host{display:block}\n"] }]
-        }], propDecorators: { distribution: [{ type: i0.Input, args: [{ isSignal: true, alias: "distribution", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], nbBins: [{ type: i0.Input, args: [{ isSignal: true, alias: "nbBins", required: false }] }], maxPercentile: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxPercentile", required: false }] }], config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: false }] }] } });
+        }], propDecorators: { distribution: [{ type: i0.Input, args: [{ isSignal: true, alias: "distribution", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], nbBins: [{ type: i0.Input, args: [{ isSignal: true, alias: "nbBins", required: false }] }], maxPercentile: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxPercentile", required: false }] }], config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: false }] }], mu: [{ type: i0.Input, args: [{ isSignal: true, alias: "mu", required: false }] }], sd: [{ type: i0.Input, args: [{ isSignal: true, alias: "sd", required: false }] }], intervalMin: [{ type: i0.Input, args: [{ isSignal: true, alias: "intervalMin", required: false }] }], intervalMax: [{ type: i0.Input, args: [{ isSignal: true, alias: "intervalMax", required: false }] }], minX: [{ type: i0.Input, args: [{ isSignal: true, alias: "minX", required: false }] }] } });
 
 const defaultSettings = Object.freeze({
     type: 'line',
@@ -9130,6 +9311,39 @@ const toTextParts = (value) => {
     return parts;
 };
 
+/**
+ * A titled block that can be folded away, with room for a control beside its heading.
+ *
+ * Presentation only: it holds no opinion on what it contains, so several of them stacked read as
+ * one document a reader can collapse section by section.
+ */
+class CollapsibleBlockComponent {
+    constructor() {
+        /**
+         * The label above the content.
+         */
+        this.heading = input('', ...(ngDevMode ? [{ debugName: "heading" }] : []));
+        /**
+         * Whether the block can be folded away. Turn it off and it renders as a plain titled block.
+         */
+        this.collapsible = input(true, ...(ngDevMode ? [{ debugName: "collapsible" }] : []));
+        /**
+         * Whether the content is shown. Two-way, so the caller can fold a block from outside.
+         */
+        this.open = model(true, ...(ngDevMode ? [{ debugName: "open" }] : []));
+    }
+    toggle() {
+        if (this.collapsible())
+            this.open.set(!this.open());
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CollapsibleBlockComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: CollapsibleBlockComponent, isStandalone: true, selector: "he-collapsible-block", inputs: { heading: { classPropertyName: "heading", publicName: "heading", 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 } }, outputs: { open: "openChange" }, ngImport: i0, template: "<div class=\"collapsible-block is-mb-2\">\n  <div class=\"is-flex is-align-items-center is-justify-content-space-between is-gap-8 is-mb-1 is-size-8\">\n    <span\n      class=\"is-flex is-align-items-center is-gap-4 is-uppercase has-text-weight-semibold\"\n      [class.is-clickable]=\"collapsible()\"\n      (click)=\"toggle()\">\n      @if (collapsible()) {\n        <he-svg-icon [name]=\"open() ? 'chevron-down' : 'chevron-right'\" />\n      }\n      <span>{{ heading() }}</span>\n    </span>\n\n    <!-- a control that belongs to the block rather than to its content, e.g. a display switch -->\n    <ng-content select=\"[blockActions]\" />\n  </div>\n\n  @if (open()) {\n    <ng-content />\n  }\n</div>\n", styles: [".collapsible-block{border-bottom:1px solid rgba(255,255,255,.2)}\n"], dependencies: [{ kind: "component", type: HESvgIconComponent, selector: "he-svg-icon", inputs: ["name", "size", "animation"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CollapsibleBlockComponent, decorators: [{
+            type: Component$1,
+            args: [{ selector: 'he-collapsible-block', changeDetection: ChangeDetectionStrategy.OnPush, imports: [HESvgIconComponent], template: "<div class=\"collapsible-block is-mb-2\">\n  <div class=\"is-flex is-align-items-center is-justify-content-space-between is-gap-8 is-mb-1 is-size-8\">\n    <span\n      class=\"is-flex is-align-items-center is-gap-4 is-uppercase has-text-weight-semibold\"\n      [class.is-clickable]=\"collapsible()\"\n      (click)=\"toggle()\">\n      @if (collapsible()) {\n        <he-svg-icon [name]=\"open() ? 'chevron-down' : 'chevron-right'\" />\n      }\n      <span>{{ heading() }}</span>\n    </span>\n\n    <!-- a control that belongs to the block rather than to its content, e.g. a display switch -->\n    <ng-content select=\"[blockActions]\" />\n  </div>\n\n  @if (open()) {\n    <ng-content />\n  }\n</div>\n", styles: [".collapsible-block{border-bottom:1px solid rgba(255,255,255,.2)}\n"] }]
+        }], propDecorators: { heading: [{ type: i0.Input, args: [{ isSignal: true, alias: "heading", 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"] }] } });
+
 /**
  * Displays a set of formulas with the variables documented under them, and a switch between the
  * symbolic and the substituted view.
@@ -9167,10 +9381,19 @@ class FormulaBlockComponent {
          * several blocks: they share one state, so repeating the switch only repeats the same control.
          */
         this.showToggle = input(true, ...(ngDevMode ? [{ debugName: "showToggle" }] : []));
+        /**
+         * Whether the block can be folded away, so a reader can put aside the part they are not reading.
+         */
+        this.collapsible = input(false, ...(ngDevMode ? [{ debugName: "collapsible" }] : []));
+        /**
+         * Whether the block is unfolded. Two-way, so the caller can fold it from outside.
+         */
+        this.open = model(true, ...(ngDevMode ? [{ debugName: "open" }] : []));
         /**
          * Whether the substituted view is shown. Two-way, so the caller can render accordingly.
          */
         this.substituted = model(false, ...(ngDevMode ? [{ debugName: "substituted" }] : []));
+        this.blockHeading = computed(() => this.heading() || `Formula${this.formulas().length > 1 ? 's' : ''}`, ...(ngDevMode ? [{ debugName: "blockHeading" }] : []));
         // unique per instance so a label only toggles its own checkbox - several can co-exist on a page
         this.toggleId = uuid('formulaSubstituted-');
         /**
@@ -9192,12 +9415,12 @@ 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 }, substituted: { classPropertyName: "substituted", publicName: "substituted", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { substituted: "substitutedChange" }, ngImport: i0, template: "@if (items().length) {\n  <div class=\"formula-block is-mb-2\">\n    <div class=\"is-flex is-align-items-center is-justify-content-space-between is-gap-8 is-mb-1 is-size-8\">\n      <span class=\"is-uppercase has-text-weight-semibold\">\n        {{ heading() || 'Formula' + (items().length > 1 ? 's' : '') }}\n      </span>\n      @if (showToggle()) {\n        <div 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    </div>\n\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.missing) {\n                  <span class=\"has-text-warning\">(missing)</span>\n                }\n              </div>\n            </li>\n          }\n        </ul>\n      }\n    }\n  </div>\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: [".formula-block{border-bottom:1px solid rgba(255,255,255,.2)}.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-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"] }], 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 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 }); }
 }
 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], template: "@if (items().length) {\n  <div class=\"formula-block is-mb-2\">\n    <div class=\"is-flex is-align-items-center is-justify-content-space-between is-gap-8 is-mb-1 is-size-8\">\n      <span class=\"is-uppercase has-text-weight-semibold\">\n        {{ heading() || 'Formula' + (items().length > 1 ? 's' : '') }}\n      </span>\n      @if (showToggle()) {\n        <div 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    </div>\n\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.missing) {\n                  <span class=\"has-text-warning\">(missing)</span>\n                }\n              </div>\n            </li>\n          }\n        </ul>\n      }\n    }\n  </div>\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: [".formula-block{border-bottom:1px solid rgba(255,255,255,.2)}.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-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 }] }], substituted: [{ type: i0.Input, args: [{ isSignal: true, alias: "substituted", required: false }] }, { type: i0.Output, args: ["substitutedChange"] }] } });
+            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"] }]
+        }], 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 === '';
 // the result symbol (left-hand side) - it is the model's output, not an input that "was not logged", so
@@ -9350,7 +9573,7 @@ class NodeLogsModelsFormulaComponent {
         return omitKeys(values, omit);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: NodeLogsModelsFormulaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.6", type: NodeLogsModelsFormulaComponent, isStandalone: true, selector: "he-node-logs-models-formula", inputs: { model: { classPropertyName: "model", publicName: "model", isSignal: true, isRequired: false, transformFunction: null }, logs: { classPropertyName: "logs", publicName: "logs", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, node: { classPropertyName: "node", publicName: "node", isSignal: true, isRequired: false, transformFunction: null }, substituted: { classPropertyName: "substituted", publicName: "substituted", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { substituted: "substitutedChange" }, ngImport: i0, template: "<he-formula-block\n  [formulas]=\"renderedFormulas()\"\n  [hasSubstitutions]=\"hasSubstitutions()\"\n  [(substituted)]=\"substituted\" />\n", dependencies: [{ kind: "component", type: FormulaBlockComponent, selector: "he-formula-block", inputs: ["formulas", "hasSubstitutions", "emptyTitle", "heading", "note", "showToggle", "substituted"], outputs: ["substitutedChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.6", type: NodeLogsModelsFormulaComponent, isStandalone: true, selector: "he-node-logs-models-formula", inputs: { model: { classPropertyName: "model", publicName: "model", isSignal: true, isRequired: false, transformFunction: null }, logs: { classPropertyName: "logs", publicName: "logs", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, node: { classPropertyName: "node", publicName: "node", isSignal: true, isRequired: false, transformFunction: null }, substituted: { classPropertyName: "substituted", publicName: "substituted", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { substituted: "substitutedChange" }, ngImport: i0, template: "<he-formula-block\n  [formulas]=\"renderedFormulas()\"\n  [hasSubstitutions]=\"hasSubstitutions()\"\n  [(substituted)]=\"substituted\" />\n", dependencies: [{ kind: "component", type: FormulaBlockComponent, selector: "he-formula-block", inputs: ["formulas", "hasSubstitutions", "emptyTitle", "heading", "note", "showToggle", "collapsible", "open", "substituted"], outputs: ["openChange", "substitutedChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: NodeLogsModelsFormulaComponent, decorators: [{
             type: Component$1,
@@ -11549,7 +11772,7 @@ class NodeValueDetailsComponent {
         this.updateKeys(selectedKeys);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: NodeValueDetailsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: NodeValueDetailsComponent, isStandalone: true, selector: "he-node-value-details", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, nodeType: { classPropertyName: "nodeType", publicName: "nodeType", isSignal: true, isRequired: true, transformFunction: null }, dataState: { classPropertyName: "dataState", publicName: "dataState", isSignal: true, isRequired: true, transformFunction: null }, dataKey: { classPropertyName: "dataKey", publicName: "dataKey", isSignal: true, isRequired: true, transformFunction: null }, aggregated: { classPropertyName: "aggregated", publicName: "aggregated", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (showInline()) {\n  @for (key of keys; track key) {\n    <he-link-key-value\n      [node]=\"node()\"\n      [nodeType]=\"nodeType()\"\n      [dataState]=\"dataState()\"\n      [dataKey]=\"dataKey()\"\n      [key]=\"key\" />\n  }\n  @for (key of additionalKeys; track key) {\n    <he-link-key-value\n      [node]=\"node()\"\n      [nodeType]=\"nodeType()\"\n      [dataState]=\"dataState()\"\n      [dataKey]=\"dataKey()\"\n      [key]=\"key\" />\n  }\n\n  <ng-container *ngTemplateOutlet=\"showModels\" />\n\n  @if (node().distribution?.length) {\n    <p>\n      <a class=\"is-dark\" [href]=\"schemaBaseUrl + '/' + node['@type'] + '#distribution'\" target=\"_blank\">\n        <b>distribution</b>\n      </a>\n      <span class=\"pr-2\">:</span>\n      <ng-container *ngTemplateOutlet=\"distributionContent; context: { node: node() }\" />\n    </p>\n  }\n} @else {\n  <he-link-key-value\n    [node]=\"node()\"\n    [nodeType]=\"nodeType()\"\n    [dataState]=\"dataState()\"\n    [dataKey]=\"dataKey()\"\n    key=\"term\" />\n\n  <ng-container *ngTemplateOutlet=\"showModels\" />\n\n  <div class=\"columns is-p-0 is-my-0 is-overflow-visible\">\n    <div class=\"column is-p-0 is-my-0\"></div>\n    <div class=\"column is-p-0 is-my-0 is-narrow is-overflow-visible\">\n      <div ngbDropdown class=\"is-overflow-visible\" autoClose=\"outside\" placement=\"bottom-end\">\n        <button\n          ngbDropdownToggle\n          class=\"button is-small is-ghost has-text-white\"\n          type=\"button\"\n          aria-controls=\"config-menu\">\n          <span>Customise fields</span>\n          <span class=\"icon is-small\">\n            <he-svg-icon name=\"settings\" aria-hidden=\"true\" />\n          </span>\n        </button>\n\n        <div ngbDropdownMenu id=\"config-menu\">\n          <div\n            class=\"dropdown-content is-overflow-y-auto\"\n            (click)=\"$event.stopPropagation()\"\n            cdkDropList\n            (cdkDropListDropped)=\"dropTableKey($event)\">\n            @for (key of tableKeys(); track key.key; let keyIndex = $index) {\n              <div class=\"dropdown-item cdk-drag-item\" cdkDrag>\n                <div class=\"field is-relative\">\n                  <input\n                    type=\"checkbox\"\n                    class=\"selector\"\n                    [id]=\"key.key\"\n                    [name]=\"key.key\"\n                    [checked]=\"key.selected\"\n                    (change)=\"onTableKeyChange(key, keyIndex, $event.target.checked)\" />\n                  <label class=\"is-pl-2\" [for]=\"key.key\">{{ key.key }}</label>\n                </div>\n              </div>\n            }\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"table-container is-mt-2\">\n    <table class=\"table is-dark is-narrow is-striped\">\n      <thead>\n        @for (key of visibleTableKeys(); track key) {\n          <th>\n            <a class=\"is-dark\" [href]=\"schemaBaseUrl + '/' + type() + '#' + key.split('.')[0]\" target=\"_blank\">\n              <b>{{ key.includes('.') ? key.split('.')[1] : key }}</b>\n            </a>\n          </th>\n        }\n      </thead>\n      <tbody>\n        @for (node of nodes(); track node) {\n          <tr>\n            @for (key of visibleTableKeys(); track key) {\n              <td>\n                @if (key === 'distribution') {\n                  <ng-container *ngTemplateOutlet=\"distributionContent; context: { node }\" />\n                } @else {\n                  <he-link-key-value\n                    [node]=\"node\"\n                    [nodeType]=\"nodeType()\"\n                    [dataState]=\"dataState()\"\n                    [dataKey]=\"dataKey()\"\n                    [key]=\"key\"\n                    [defaultValue]=\"defaultValue(key)\" />\n                }\n              </td>\n            }\n          </tr>\n        }\n      </tbody>\n    </table>\n  </div>\n}\n\n<ng-template #distributionContent let-node=\"node\">\n  @if (node.distribution?.length) {\n    @if (showDistribution() === node) {\n      <a class=\"has-text-white\" (click)=\"showDistribution.set(undefined)\">Hide</a>\n    } @else {\n      <a class=\"has-text-white\" (click)=\"showDistribution.set(node)\">Show</a>\n    }\n  } @else {\n    <span>N/A</span>\n  }\n</ng-template>\n\n@if (chartDistribution()) {\n  <div class=\"has-background-white is-mt-2 is-p-2 is-rounded | chart-container\">\n    <he-distribution-chart\n      [distribution]=\"chartDistribution()\"\n      [value]=\"chartValue()\"\n      [label]=\"chartLabel()\"\n      [nbBins]=\"10\"\n      [maxPercentile]=\"0.99\" />\n  </div>\n}\n\n<ng-template #showModels>\n  @if (models().length) {\n    <p>\n      <span class=\"is-inline-block\">\n        <b>possible models used</b>\n      </span>\n      <span class=\"pr-2\">:</span>\n      @for (model of models(); track model; let lastModel = $last) {\n        <a class=\"is-dark\" [href]=\"model.link\">{{ model.name }}</a>\n        @if (!lastModel) {\n          <span class=\"is-pr-1 is-inline-block\">;</span>\n        }\n      }\n    </p>\n  }\n</ng-template>\n", styles: ["table{background-color:transparent}table::ng-deep he-link-key-value>a:first-child,table::ng-deep he-link-key-value>a:first-child+span{display:none}.dropdown-content{max-height:300px}.cdk-drag-preview{box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f;list-style:none}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.cdk-drag-item{cursor:move}.chart-container{border-radius:3px}.chart-container he-distribution-chart{height:250px;min-width:400px}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "ngmodule", type: NgbTooltipModule }, { kind: "ngmodule", type: NgbDropdownModule }, { kind: "directive", type: i1$1.NgbDropdown, selector: "[ngbDropdown]", inputs: ["autoClose", "dropdownClass", "open", "placement", "popperOptions", "container", "display"], outputs: ["openChange"], exportAs: ["ngbDropdown"] }, { kind: "directive", type: i1$1.NgbDropdownToggle, selector: "[ngbDropdownToggle]" }, { kind: "directive", type: i1$1.NgbDropdownMenu, selector: "[ngbDropdownMenu]" }, { kind: "component", type: LinkKeyValueComponent, selector: "he-link-key-value", inputs: ["node", "nodeType", "dataState", "dataKey", "key", "defaultValue"] }, { kind: "component", type: HESvgIconComponent, selector: "he-svg-icon", inputs: ["name", "size", "animation"] }, { kind: "component", type: DistributionChartComponent, selector: "he-distribution-chart", inputs: ["distribution", "value", "label", "nbBins", "maxPercentile", "config"], exportAs: ["distributionChart"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: NodeValueDetailsComponent, isStandalone: true, selector: "he-node-value-details", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, nodeType: { classPropertyName: "nodeType", publicName: "nodeType", isSignal: true, isRequired: true, transformFunction: null }, dataState: { classPropertyName: "dataState", publicName: "dataState", isSignal: true, isRequired: true, transformFunction: null }, dataKey: { classPropertyName: "dataKey", publicName: "dataKey", isSignal: true, isRequired: true, transformFunction: null }, aggregated: { classPropertyName: "aggregated", publicName: "aggregated", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (showInline()) {\n  @for (key of keys; track key) {\n    <he-link-key-value\n      [node]=\"node()\"\n      [nodeType]=\"nodeType()\"\n      [dataState]=\"dataState()\"\n      [dataKey]=\"dataKey()\"\n      [key]=\"key\" />\n  }\n  @for (key of additionalKeys; track key) {\n    <he-link-key-value\n      [node]=\"node()\"\n      [nodeType]=\"nodeType()\"\n      [dataState]=\"dataState()\"\n      [dataKey]=\"dataKey()\"\n      [key]=\"key\" />\n  }\n\n  <ng-container *ngTemplateOutlet=\"showModels\" />\n\n  @if (node().distribution?.length) {\n    <p>\n      <a class=\"is-dark\" [href]=\"schemaBaseUrl + '/' + node['@type'] + '#distribution'\" target=\"_blank\">\n        <b>distribution</b>\n      </a>\n      <span class=\"pr-2\">:</span>\n      <ng-container *ngTemplateOutlet=\"distributionContent; context: { node: node() }\" />\n    </p>\n  }\n} @else {\n  <he-link-key-value\n    [node]=\"node()\"\n    [nodeType]=\"nodeType()\"\n    [dataState]=\"dataState()\"\n    [dataKey]=\"dataKey()\"\n    key=\"term\" />\n\n  <ng-container *ngTemplateOutlet=\"showModels\" />\n\n  <div class=\"columns is-p-0 is-my-0 is-overflow-visible\">\n    <div class=\"column is-p-0 is-my-0\"></div>\n    <div class=\"column is-p-0 is-my-0 is-narrow is-overflow-visible\">\n      <div ngbDropdown class=\"is-overflow-visible\" autoClose=\"outside\" placement=\"bottom-end\">\n        <button\n          ngbDropdownToggle\n          class=\"button is-small is-ghost has-text-white\"\n          type=\"button\"\n          aria-controls=\"config-menu\">\n          <span>Customise fields</span>\n          <span class=\"icon is-small\">\n            <he-svg-icon name=\"settings\" aria-hidden=\"true\" />\n          </span>\n        </button>\n\n        <div ngbDropdownMenu id=\"config-menu\">\n          <div\n            class=\"dropdown-content is-overflow-y-auto\"\n            (click)=\"$event.stopPropagation()\"\n            cdkDropList\n            (cdkDropListDropped)=\"dropTableKey($event)\">\n            @for (key of tableKeys(); track key.key; let keyIndex = $index) {\n              <div class=\"dropdown-item cdk-drag-item\" cdkDrag>\n                <div class=\"field is-relative\">\n                  <input\n                    type=\"checkbox\"\n                    class=\"selector\"\n                    [id]=\"key.key\"\n                    [name]=\"key.key\"\n                    [checked]=\"key.selected\"\n                    (change)=\"onTableKeyChange(key, keyIndex, $event.target.checked)\" />\n                  <label class=\"is-pl-2\" [for]=\"key.key\">{{ key.key }}</label>\n                </div>\n              </div>\n            }\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"table-container is-mt-2\">\n    <table class=\"table is-dark is-narrow is-striped\">\n      <thead>\n        @for (key of visibleTableKeys(); track key) {\n          <th>\n            <a class=\"is-dark\" [href]=\"schemaBaseUrl + '/' + type() + '#' + key.split('.')[0]\" target=\"_blank\">\n              <b>{{ key.includes('.') ? key.split('.')[1] : key }}</b>\n            </a>\n          </th>\n        }\n      </thead>\n      <tbody>\n        @for (node of nodes(); track node) {\n          <tr>\n            @for (key of visibleTableKeys(); track key) {\n              <td>\n                @if (key === 'distribution') {\n                  <ng-container *ngTemplateOutlet=\"distributionContent; context: { node }\" />\n                } @else {\n                  <he-link-key-value\n                    [node]=\"node\"\n                    [nodeType]=\"nodeType()\"\n                    [dataState]=\"dataState()\"\n                    [dataKey]=\"dataKey()\"\n                    [key]=\"key\"\n                    [defaultValue]=\"defaultValue(key)\" />\n                }\n              </td>\n            }\n          </tr>\n        }\n      </tbody>\n    </table>\n  </div>\n}\n\n<ng-template #distributionContent let-node=\"node\">\n  @if (node.distribution?.length) {\n    @if (showDistribution() === node) {\n      <a class=\"has-text-white\" (click)=\"showDistribution.set(undefined)\">Hide</a>\n    } @else {\n      <a class=\"has-text-white\" (click)=\"showDistribution.set(node)\">Show</a>\n    }\n  } @else {\n    <span>N/A</span>\n  }\n</ng-template>\n\n@if (chartDistribution()) {\n  <div class=\"has-background-white is-mt-2 is-p-2 is-rounded | chart-container\">\n    <he-distribution-chart\n      [distribution]=\"chartDistribution()\"\n      [value]=\"chartValue()\"\n      [label]=\"chartLabel()\"\n      [nbBins]=\"10\"\n      [maxPercentile]=\"0.99\" />\n  </div>\n}\n\n<ng-template #showModels>\n  @if (models().length) {\n    <p>\n      <span class=\"is-inline-block\">\n        <b>possible models used</b>\n      </span>\n      <span class=\"pr-2\">:</span>\n      @for (model of models(); track model; let lastModel = $last) {\n        <a class=\"is-dark\" [href]=\"model.link\">{{ model.name }}</a>\n        @if (!lastModel) {\n          <span class=\"is-pr-1 is-inline-block\">;</span>\n        }\n      }\n    </p>\n  }\n</ng-template>\n", styles: ["table{background-color:transparent}table::ng-deep he-link-key-value>a:first-child,table::ng-deep he-link-key-value>a:first-child+span{display:none}.dropdown-content{max-height:300px}.cdk-drag-preview{box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f;list-style:none}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.cdk-drag-item{cursor:move}.chart-container{border-radius:3px}.chart-container he-distribution-chart{height:250px;min-width:400px}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "ngmodule", type: NgbTooltipModule }, { kind: "ngmodule", type: NgbDropdownModule }, { kind: "directive", type: i1$1.NgbDropdown, selector: "[ngbDropdown]", inputs: ["autoClose", "dropdownClass", "open", "placement", "popperOptions", "container", "display"], outputs: ["openChange"], exportAs: ["ngbDropdown"] }, { kind: "directive", type: i1$1.NgbDropdownToggle, selector: "[ngbDropdownToggle]" }, { kind: "directive", type: i1$1.NgbDropdownMenu, selector: "[ngbDropdownMenu]" }, { kind: "component", type: LinkKeyValueComponent, selector: "he-link-key-value", inputs: ["node", "nodeType", "dataState", "dataKey", "key", "defaultValue"] }, { kind: "component", type: HESvgIconComponent, selector: "he-svg-icon", inputs: ["name", "size", "animation"] }, { kind: "component", type: DistributionChartComponent, selector: "he-distribution-chart", inputs: ["distribution", "value", "label", "nbBins", "maxPercentile", "config", "mu", "sd", "intervalMin", "intervalMax", "minX"], exportAs: ["distributionChart"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: NodeValueDetailsComponent, decorators: [{
             type: Component$1,
@@ -11565,6 +11788,125 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
                     ], template: "@if (showInline()) {\n  @for (key of keys; track key) {\n    <he-link-key-value\n      [node]=\"node()\"\n      [nodeType]=\"nodeType()\"\n      [dataState]=\"dataState()\"\n      [dataKey]=\"dataKey()\"\n      [key]=\"key\" />\n  }\n  @for (key of additionalKeys; track key) {\n    <he-link-key-value\n      [node]=\"node()\"\n      [nodeType]=\"nodeType()\"\n      [dataState]=\"dataState()\"\n      [dataKey]=\"dataKey()\"\n      [key]=\"key\" />\n  }\n\n  <ng-container *ngTemplateOutlet=\"showModels\" />\n\n  @if (node().distribution?.length) {\n    <p>\n      <a class=\"is-dark\" [href]=\"schemaBaseUrl + '/' + node['@type'] + '#distribution'\" target=\"_blank\">\n        <b>distribution</b>\n      </a>\n      <span class=\"pr-2\">:</span>\n      <ng-container *ngTemplateOutlet=\"distributionContent; context: { node: node() }\" />\n    </p>\n  }\n} @else {\n  <he-link-key-value\n    [node]=\"node()\"\n    [nodeType]=\"nodeType()\"\n    [dataState]=\"dataState()\"\n    [dataKey]=\"dataKey()\"\n    key=\"term\" />\n\n  <ng-container *ngTemplateOutlet=\"showModels\" />\n\n  <div class=\"columns is-p-0 is-my-0 is-overflow-visible\">\n    <div class=\"column is-p-0 is-my-0\"></div>\n    <div class=\"column is-p-0 is-my-0 is-narrow is-overflow-visible\">\n      <div ngbDropdown class=\"is-overflow-visible\" autoClose=\"outside\" placement=\"bottom-end\">\n        <button\n          ngbDropdownToggle\n          class=\"button is-small is-ghost has-text-white\"\n          type=\"button\"\n          aria-controls=\"config-menu\">\n          <span>Customise fields</span>\n          <span class=\"icon is-small\">\n            <he-svg-icon name=\"settings\" aria-hidden=\"true\" />\n          </span>\n        </button>\n\n        <div ngbDropdownMenu id=\"config-menu\">\n          <div\n            class=\"dropdown-content is-overflow-y-auto\"\n            (click)=\"$event.stopPropagation()\"\n            cdkDropList\n            (cdkDropListDropped)=\"dropTableKey($event)\">\n            @for (key of tableKeys(); track key.key; let keyIndex = $index) {\n              <div class=\"dropdown-item cdk-drag-item\" cdkDrag>\n                <div class=\"field is-relative\">\n                  <input\n                    type=\"checkbox\"\n                    class=\"selector\"\n                    [id]=\"key.key\"\n                    [name]=\"key.key\"\n                    [checked]=\"key.selected\"\n                    (change)=\"onTableKeyChange(key, keyIndex, $event.target.checked)\" />\n                  <label class=\"is-pl-2\" [for]=\"key.key\">{{ key.key }}</label>\n                </div>\n              </div>\n            }\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"table-container is-mt-2\">\n    <table class=\"table is-dark is-narrow is-striped\">\n      <thead>\n        @for (key of visibleTableKeys(); track key) {\n          <th>\n            <a class=\"is-dark\" [href]=\"schemaBaseUrl + '/' + type() + '#' + key.split('.')[0]\" target=\"_blank\">\n              <b>{{ key.includes('.') ? key.split('.')[1] : key }}</b>\n            </a>\n          </th>\n        }\n      </thead>\n      <tbody>\n        @for (node of nodes(); track node) {\n          <tr>\n            @for (key of visibleTableKeys(); track key) {\n              <td>\n                @if (key === 'distribution') {\n                  <ng-container *ngTemplateOutlet=\"distributionContent; context: { node }\" />\n                } @else {\n                  <he-link-key-value\n                    [node]=\"node\"\n                    [nodeType]=\"nodeType()\"\n                    [dataState]=\"dataState()\"\n                    [dataKey]=\"dataKey()\"\n                    [key]=\"key\"\n                    [defaultValue]=\"defaultValue(key)\" />\n                }\n              </td>\n            }\n          </tr>\n        }\n      </tbody>\n    </table>\n  </div>\n}\n\n<ng-template #distributionContent let-node=\"node\">\n  @if (node.distribution?.length) {\n    @if (showDistribution() === node) {\n      <a class=\"has-text-white\" (click)=\"showDistribution.set(undefined)\">Hide</a>\n    } @else {\n      <a class=\"has-text-white\" (click)=\"showDistribution.set(node)\">Show</a>\n    }\n  } @else {\n    <span>N/A</span>\n  }\n</ng-template>\n\n@if (chartDistribution()) {\n  <div class=\"has-background-white is-mt-2 is-p-2 is-rounded | chart-container\">\n    <he-distribution-chart\n      [distribution]=\"chartDistribution()\"\n      [value]=\"chartValue()\"\n      [label]=\"chartLabel()\"\n      [nbBins]=\"10\"\n      [maxPercentile]=\"0.99\" />\n  </div>\n}\n\n<ng-template #showModels>\n  @if (models().length) {\n    <p>\n      <span class=\"is-inline-block\">\n        <b>possible models used</b>\n      </span>\n      <span class=\"pr-2\">:</span>\n      @for (model of models(); track model; let lastModel = $last) {\n        <a class=\"is-dark\" [href]=\"model.link\">{{ model.name }}</a>\n        @if (!lastModel) {\n          <span class=\"is-pr-1 is-inline-block\">;</span>\n        }\n      }\n    </p>\n  }\n</ng-template>\n", styles: ["table{background-color:transparent}table::ng-deep he-link-key-value>a:first-child,table::ng-deep he-link-key-value>a:first-child+span{display:none}.dropdown-content{max-height:300px}.cdk-drag-preview{box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f;list-style:none}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.cdk-drag-item{cursor:move}.chart-container{border-radius:3px}.chart-container he-distribution-chart{height:250px;min-width:400px}\n"] }]
         }], ctorParameters: () => [], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: true }] }], nodeType: [{ type: i0.Input, args: [{ isSignal: true, alias: "nodeType", required: true }] }], dataState: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataState", required: true }] }], dataKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataKey", required: true }] }], aggregated: [{ type: i0.Input, args: [{ isSignal: true, alias: "aggregated", required: false }] }] } });
 
+const isMissing = (value) => value === undefined || value === null || value === '';
+/**
+ * The quantities only a weighting rule binds, so a rule is placed by what it computes rather than
+ * by where the documentation happens to write it. The weight normalisation stores none of its
+ * symbols, so it is named by the one it defines.
+ */
+const WEIGHT_KEYS = [
+    'organic_factor',
+    'organic_weight_lookup_value',
+    'irrigated_area',
+    'plantation_lifespan',
+    'world_production'
+];
+const WEIGHT_SYMBOLS = ['\\hat{w}_i'];
+const formulaGroup = (formula) => formula.bindings.some(({ key, symbol }) => WEIGHT_KEYS.includes(key ?? '') || WEIGHT_SYMBOLS.includes(symbol ?? ''))
+    ? 'weights'
+    : 'value';
+/**
+ * A symbol that should carry a value: the result and the inputs, but never a fixed constant or a
+ * quantity the aggregation deliberately does not store.
+ */
+const isSubstitutable = (binding) => !!binding.key && binding.constant === undefined && !binding.display;
+/**
+ * The number of rows a table would have had, which the aggregation records under `<table>_count`
+ * when there were too many contributors to name every one of them.
+ */
+const tableCount = (values, key) => {
+    const count = key ? values[`${key}_count`] : undefined;
+    return typeof count === 'number' && count > 0 ? count : undefined;
+};
+const rowCount = (values, binding) => binding.column ? tableCount(values, binding.key) : undefined;
+/**
+ * How a symbol that did not resolve is explained: the contributors were not recorded one by one,
+ * only counted - which is a different thing from a value the aggregation never logged.
+ */
+const notListedNote = (values, binding) => {
+    const count = rowCount(values, binding);
+    return isSubstitutable(binding) && isMissing(values[binding.key]) && count
+        ? `${count} Cycles, not listed`
+        : undefined;
+};
+/**
+ * Whether a symbol that should have resolved did not. A symbol whose contributors were counted
+ * rather than listed is not missing: `notListedNote` says how many there were instead.
+ */
+const isMissingValue = (values, binding) => isSubstitutable(binding) && isMissing(values[binding.key]) && !rowCount(values, binding);
+/**
+ * Whether any symbol of these formulas resolves. When none does, the substituted view would be
+ * identical to the symbolic one.
+ */
+const hasAnySubstitution = (values, bindings) => bindings.some(binding => isSubstitutable(binding) && !isMissing(values[binding.key]));
+// a symbol reading one column of a contributors table: `key` names the table, `column` the field
+const isTableBinding = (binding) => !!binding.key && !!binding.column && !binding.match;
+// the packed `log_as_table` string: rows split on `;`, columns on `_`, each column a `key:value`
+const parseRows = (packed) => typeof packed !== 'string'
+    ? []
+    : packed
+        .split(';')
+        .filter(Boolean)
+        .map(row => row.split('_').reduce((columns, pair) => {
+        const at = pair.indexOf(':');
+        return at === -1 ? columns : { ...columns, [pair.slice(0, at)]: pair.slice(at + 1) };
+    }, {}));
+const ID_COLUMN$1 = 'id';
+// how many leading segments every id shares, e.g. the product and country of a sub-aggregation
+const commonPrefix = (ids) => {
+    const [first = [], ...rest] = ids;
+    const shared = first.findIndex((segment, index) => rest.some(other => other[index] !== segment));
+    return shared === -1 ? first.length : shared;
+};
+/**
+ * How many trailing segments every id shares, counting only the period and run date they are all
+ * stamped with. Stopping at the first word is what keeps a compound apart from what it is compared
+ * against: `irrigated` and `non-irrigated` share a word, and dropping it would lose the difference.
+ */
+const commonPeriod = (ids) => {
+    const [first = [], ...rest] = ids;
+    const shared = [...first]
+        .reverse()
+        .findIndex((segment, index) => !/^\d+$/.test(segment) || rest.some(other => other[other.length - 1 - index] !== segment));
+    return shared === -1 ? first.length : shared;
+};
+/**
+ * The part of each id that tells the contributors apart, dropping what they all share - the
+ * product, country and period, which the Cycle being read already names. Falls back to the full id
+ * where that leaves nothing, so a row is never unlabelled.
+ */
+const distinguishingLabels = (ids) => {
+    const segments = ids.map(id => id.split('-'));
+    const start = commonPrefix(segments);
+    const end = commonPeriod(segments);
+    return ids.map((id, index) => segments[index].slice(start, segments[index].length - end).join('-') || id);
+};
+/**
+ * The contributors table these formulas read from: the first one the aggregation recorded, since
+ * they all list the same Cycles - the zero-filled table is the wider of the two.
+ *
+ * Undefined when nothing was recorded, which is every aggregation that logs no values at all.
+ */
+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));
+    if (!key)
+        return undefined;
+    const columns = bindings
+        .filter(binding => binding.key === key)
+        .map(({ symbol, description, column }) => ({ symbol, description, column: column }));
+    const parsed = parseRows(values[key]);
+    const labels = distinguishingLabels(parsed.map(row => row[ID_COLUMN$1]));
+    const rows = parsed.map((row, index) => ({
+        id: row[ID_COLUMN$1],
+        label: labels[index],
+        values: columns.map(({ column }) => row[column])
+    }));
+    return { columns, rows, count: tableCount(values, key) };
+};
+
 // 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
@@ -11573,16 +11915,17 @@ const PRODUCT_PAGES = {
     crop: 'crop',
     processedFood: 'processed-food'
 };
-// How each page's rules relate to the others, so a reader told "here are two sets of formulas" knows
-// which is which. Named after the guide pages they come from, which the row's guide button opens.
-const PAGE_HEADINGS = {
-    'general-process': { heading: 'General rules', applies: 'Applied to every aggregation, whatever the product.' },
-    crop: { heading: 'Crop aggregation', applies: 'Applied on top of the general rules, for crop products.' },
-    'processed-food': {
-        heading: 'Processed food aggregation',
-        applies: 'Applied on top of the general rules, for processed food.'
-    }
-};
+/**
+ * The rules are shown in the order they answer a reader's questions: how this value was calculated,
+ * which values 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 values 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;
@@ -11597,16 +11940,16 @@ const isCompletenessZeroFill = (formula) => bindsTo(formula, 'zero_filled_weight
 // The production-share weight is what combines country aggregations into a World one, so it is only
 // part of how a World aggregation was produced - a country aggregation never applies it.
 const isWorldWeight = (formula) => bindsTo(formula, 'world_production');
+// The sub-system weight is the product of one sub-aggregation's organic and irrigation factors, so
+// it is only part of how that sub-aggregation was produced. On the Cycle they are combined into,
+// each of its symbols holds one value per sub-system rather than the single one bound here.
+const isSubSystemWeight = (formula) => bindsTo(formula, 'organic_factor');
 // The phase weighting splits a plantation's lifespan between its productive and non-productive
 // years, so it only ran where the product is a permanent crop.
 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';
-const isMissing = (value) => value === undefined || value === null || value === '';
-// a symbol that should carry a value: the result and the inputs, but never a fixed constant or a
-// quantity the aggregation deliberately does not store
-const isSubstitutable = (binding) => !!binding.key && binding.constant === undefined && !binding.display;
 class NodeAggregatedFormulasComponent {
     constructor() {
         /**
@@ -11636,6 +11979,12 @@ class NodeAggregatedFormulasComponent {
          * is not part of how its values were produced.
          */
         this.worldAggregation = input(false, ...(ngDevMode ? [{ debugName: "worldAggregation" }] : []));
+        /**
+         * Whether the Cycle is one of the sub-aggregations an aggregation is combined from, in which case
+         * the sub-system weighting is one of the stages that produced its values. Defaults to showing the
+         * stage, so a caller that cannot tell keeps the rule documented.
+         */
+        this.subAggregation = input(true, ...(ngDevMode ? [{ debugName: "subAggregation" }] : []));
         // show the substituted formula rather than the symbolic one, when there is anything to substitute
         this.substituted = model(false, ...(ngDevMode ? [{ debugName: "substituted" }] : []));
         /**
@@ -11649,20 +11998,33 @@ class NodeAggregatedFormulasComponent {
         // to the symbolic one, so the toggle is disabled rather than silently doing nothing
         this.hasSubstitutions = computed(() => {
             const values = this.values();
-            return this.sections().some(section => section.formulas.some(formula => formula.bindings.some(binding => isSubstitutable(binding) && !isMissing(values[binding.key]))));
+            return this.sections().some(section => section.formulas.some(formula => hasAnySubstitution(values, formula.bindings)));
         }, ...(ngDevMode ? [{ debugName: "hasSubstitutions" }] : []));
         /**
-         * Each page with its formulas, rendered symbolically or with values substituted, and the
-         * variables documented under each. A variable with nothing to substitute is flagged, so the
-         * reader can tell a value that was not recorded from one that is genuinely absent.
+         * The rules that produced this value, grouped by what each one computes.
          */
-        this.sections = computed(() => this.pages()
-            .map(page => ({
-            page,
-            ...(PAGE_HEADINGS[page] ?? { heading: 'Formulas', applies: '' }),
-            formulas: getFormulas$1(page).filter((formula) => this.applies(formula))
-        }))
-            .filter(section => section.formulas.length > 0), ...(ngDevMode ? [{ debugName: "sections" }] : []));
+        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" }] : []));
+        /**
+         * The values this one was combined from, as the aggregation recorded them: one row per Cycle or
+         * sub-aggregation, under the symbols the formulas above read them with. Absent where the
+         * contributors were too many to record, which is every aggregation built straight from source
+         * Cycles - their number is shown instead.
+         */
+        this.contributors = computed(() => {
+            const table = contributorsTable(this.values(), this.sections().flatMap(section => section.formulas));
+            // the node each row links to is built here rather than in the template, so it keeps its
+            // identity between change detection runs
+            return (table && {
+                ...table,
+                rows: table.rows.map(row => ({ ...row, node: { '@type': NodeType.Cycle, '@id': row.id } }))
+            });
+        }, ...(ngDevMode ? [{ debugName: "contributors" }] : []));
         this.renderedSections = computed(() => {
             const values = this.values();
             const showValues = this.substituted() && this.hasSubstitutions();
@@ -11681,7 +12043,10 @@ class NodeAggregatedFormulasComponent {
                             description: binding.description,
                             // only an input that should have resolved is flagged - a constant, or a quantity the
                             // aggregation deliberately does not store, is never substitutable rather than missing
-                            missing: showValues && isSubstitutable(binding) && isMissing(values[binding.key])
+                            missing: showValues && isMissingValue(values, binding),
+                            // a symbol reading from a table of contributors too long to record says how many there
+                            // were, which is not the same as a value the aggregation never logged
+                            note: showValues ? notListedNote(values, binding) : undefined
                         }))
                     };
                 })
@@ -11694,11 +12059,14 @@ class NodeAggregatedFormulasComponent {
      * a World aggregation, and the phase weighting only splits the lifespan of a plantation crop.
      */
     ranForAggregation(formula) {
-        if (isWorldWeight(formula))
-            return this.worldAggregation();
-        if (isPlantationWeight(formula))
-            return isPlantation(this.termId() ?? '');
-        return true;
+        // 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() ?? '') }
+        ];
+        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,
@@ -11718,12 +12086,133 @@ class NodeAggregatedFormulasComponent {
         return this.ranForAggregation(formula) && this.appliesToNodeKey(formula);
     }
     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 }, values: { classPropertyName: "values", publicName: "values", isSignal: true, isRequired: false, transformFunction: null }, worldAggregation: { classPropertyName: "worldAggregation", publicName: "worldAggregation", 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 Cycles, not measured. These are the rules that produced this\n      one, in the order they are applied.\n    </p>\n\n    <div class=\"aggregated-formulas-rules\">\n      @for (section of renderedSections(); track section.page; let first = $first) {\n        <he-formula-block\n          [formulas]=\"section.formulas\"\n          [heading]=\"section.heading\"\n          [note]=\"section.applies\"\n          [showToggle]=\"first\"\n          [hasSubstitutions]=\"hasSubstitutions()\"\n          [(substituted)]=\"substituted\"\n          emptyTitle=\"No recorded values to substitute\" />\n      }\n    </div>\n  </div>\n}\n", styles: [".formula-intro{opacity:.85}.aggregated-formulas-rules{max-height:50vh;overflow-y:auto;padding-right:.25rem}\n"], dependencies: [{ kind: "component", type: FormulaBlockComponent, selector: "he-formula-block", inputs: ["formulas", "hasSubstitutions", "emptyTitle", "heading", "note", "showToggle", "substituted"], outputs: ["substitutedChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    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 }, 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 Cycles, not measured. These are the rules that produced this\n      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      @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 values combined sit between the two calculations: what went in, above how each was weighted -->\n        @if (section.id === 'value' && contributors(); as table) {\n          <he-collapsible-block heading=\"Values combined\">\n            @if (table.rows.length) {\n              <table class=\"table is-narrow is-size-7 w-100 | contributors-table\">\n                <thead>\n                  <tr>\n                    <th>Cycle</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 }} Cycles, too many for the aggregation to record one by 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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: NodeAggregatedFormulasComponent, decorators: [{
             type: Component$1,
-            args: [{ selector: 'he-node-aggregated-formulas', changeDetection: ChangeDetectionStrategy.OnPush, imports: [FormulaBlockComponent], 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 Cycles, not measured. These are the rules that produced this\n      one, in the order they are applied.\n    </p>\n\n    <div class=\"aggregated-formulas-rules\">\n      @for (section of renderedSections(); track section.page; let first = $first) {\n        <he-formula-block\n          [formulas]=\"section.formulas\"\n          [heading]=\"section.heading\"\n          [note]=\"section.applies\"\n          [showToggle]=\"first\"\n          [hasSubstitutions]=\"hasSubstitutions()\"\n          [(substituted)]=\"substituted\"\n          emptyTitle=\"No recorded values to substitute\" />\n      }\n    </div>\n  </div>\n}\n", styles: [".formula-intro{opacity:.85}.aggregated-formulas-rules{max-height:50vh;overflow-y:auto;padding-right:.25rem}\n"] }]
-        }], propDecorators: { termType: [{ type: i0.Input, args: [{ isSignal: true, alias: "termType", required: false }] }], termId: [{ type: i0.Input, args: [{ isSignal: true, alias: "termId", required: false }] }], nodeKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "nodeKey", required: false }] }], values: [{ type: i0.Input, args: [{ isSignal: true, alias: "values", required: false }] }], worldAggregation: [{ type: i0.Input, args: [{ isSignal: true, alias: "worldAggregation", required: false }] }], substituted: [{ type: i0.Input, args: [{ isSignal: true, alias: "substituted", required: false }] }, { type: i0.Output, args: ["substitutedChange"] }] } });
+            args: [{ selector: 'he-node-aggregated-formulas', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+                        DefaultPipe,
+                        PrecisionPipe,
+                        KatexDirective,
+                        NodeLinkComponent,
+                        FormulaBlockComponent,
+                        CollapsibleBlockComponent
+                    ], 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 Cycles, not measured. These are the rules that produced this\n      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      @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 values combined sit between the two calculations: what went in, above how each was weighted -->\n        @if (section.id === 'value' && contributors(); as table) {\n          <he-collapsible-block heading=\"Values combined\">\n            @if (table.rows.length) {\n              <table class=\"table is-narrow is-size-7 w-100 | contributors-table\">\n                <thead>\n                  <tr>\n                    <th>Cycle</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 }} Cycles, too many for the aggregation to record one by 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"] }]
+        }], propDecorators: { termType: [{ type: i0.Input, args: [{ isSignal: true, alias: "termType", required: false }] }], termId: [{ type: i0.Input, args: [{ isSignal: true, alias: "termId", required: false }] }], nodeKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "nodeKey", required: false }] }], values: [{ type: i0.Input, args: [{ isSignal: true, alias: "values", required: false }] }], worldAggregation: [{ type: i0.Input, args: [{ isSignal: true, alias: "worldAggregation", required: false }] }], subAggregation: [{ type: i0.Input, args: [{ isSignal: true, alias: "subAggregation", required: false }] }], substituted: [{ type: i0.Input, args: [{ isSignal: true, alias: "substituted", required: false }] }, { type: i0.Output, args: ["substitutedChange"] }] } });
+
+// the `.jlog` entries the aggregation records are tagged with its own model name
+const JLOG_MODEL = 'aggregation';
+const LOGS_KEY = 'logs';
+// the table of contributors an aggregated value is recorded with, one row per Cycle it was
+// combined from: `id:<cycle id>_value:<value>_weight:<weight>;...`
+const WEIGHTS_KEY = 'weights';
+const ID_COLUMN = 'id:';
+/**
+ * The share of world production a country aggregation was weighted by. It is only recorded on a
+ * Cycle that a World aggregation combines, so its presence is what tells the two node-level
+ * entries apart.
+ */
+const WORLD_STAGE_KEY = 'world_production';
+// the sub-system stage: the organic and irrigated factors a sub-aggregation's weight is the product of
+const SUB_SYSTEM_KEY = 'organic_factor';
+/**
+ * The lookups an aggregation is weighted by: the shares of the country's area, keyed by country and
+ * period, and the plantation lifespans, keyed by product. Every sub-aggregation of the same country
+ * and period records the same values, so any one of them answers for the aggregation as a whole.
+ */
+const LOOKUP_KEYS = [
+    'organic_weight',
+    'organic_weight_lookup_value',
+    'irrigated_weight',
+    'irrigated_area',
+    'total_area',
+    'plantation_lifespan',
+    'plantation_non_productive_lifespan'
+];
+/**
+ * A Cycle combined from sub-aggregations has a handful of contributors (organic or conventional,
+ * irrigated or rainfed); one aggregated straight from source Cycles has hundreds, and those record
+ * no aggregation logs at all - so a longer list means there is nothing to fetch.
+ */
+const MAX_CONTRIBUTORS = 4;
+// the quantities of one `.jlog` entry, dropping the `model` marker that tags them
+const entryValues = (entry) => (entry?.[LOGS_KEY] ?? [])
+    .filter(log => log?.model === JLOG_MODEL)
+    .reduce((values, { model: _model, ...fields }) => ({ ...values, ...fields }), {});
+/**
+ * The quantities recorded for one blank node. A field of the blank node (e.g. a product's
+ * `economicValueShare`) is logged one level deeper, the way the models' `.jlog` nests it - merge
+ * those in so a formula resolves whichever of the two it describes, the blank node's own values
+ * winning any collision.
+ */
+const loggedValues = (entry) => {
+    const nested = Object.entries(entry ?? {})
+        .filter(([key]) => key !== LOGS_KEY)
+        .reduce((values, [, field]) => ({ ...values, ...entryValues(field) }), {});
+    return { ...nested, ...entryValues(entry) };
+};
+/**
+ * The quantities describing the Cycle itself, recorded once at the top of its `.jlog` rather than
+ * on each data item: how it was weighted into the aggregation it belongs to, and the shares that
+ * weight was derived from.
+ *
+ * A country aggregation records its share of world production here, weighted by `weight` - the same
+ * key the sub-system stage binds to. Drop it there, so the world share can never stand in for a
+ * sub-system weight.
+ */
+const nodeValues = (jlog) => {
+    const values = entryValues(jlog);
+    return WORLD_STAGE_KEY in values
+        ? Object.fromEntries(Object.entries(values).filter(([key]) => key !== 'weight'))
+        : values;
+};
+/**
+ * Whether the sub-system stage is one of the stages that produced this Cycle's values, which its
+ * own node-level entry says. Everywhere else its symbols hold one value per sub-system rather than
+ * the single one the formula binds, so it describes another Cycle rather than this one.
+ *
+ * With nothing logged at all the stage is left to render symbolically, as every other rule does,
+ * rather than hidden on a guess.
+ */
+const isSubAggregation = (jlog) => {
+    const values = nodeValues(jlog);
+    return isEmpty(values) || SUB_SYSTEM_KEY in values;
+};
+// the ids of a packed contributors table, in the order they were recorded
+const tableIds = (packed) => typeof packed === 'string'
+    ? packed
+        .split(';')
+        .map(row => row.split('_')[0])
+        .filter(column => column.startsWith(ID_COLUMN))
+        .map(column => column.slice(ID_COLUMN.length))
+    : [];
+/**
+ * The Cycles this one was combined from, named in the contributors table of any of its data items -
+ * the only place a sub-aggregation is named, as the Cycle links the source Cycles it covers rather
+ * than the sub-aggregations it was built from.
+ *
+ * Empty for a sub-aggregation, which records the lookups itself and was built from source Cycles
+ * that log nothing, and when there are more contributors than there are sub-systems - a longer list
+ * is source Cycles rather than sub-aggregations.
+ */
+const contributorIds = (jlog) => {
+    if (SUB_SYSTEM_KEY in nodeValues(jlog))
+        return [];
+    const tables = Object.values(jlog ?? {})
+        .filter(section => !!section && typeof section === 'object' && !Array.isArray(section))
+        .flatMap(section => Object.values(section).map(entry => entryValues(entry)[WEIGHTS_KEY]));
+    const ids = unique(tableIds(tables.find(table => typeof table === 'string')));
+    return ids.length > MAX_CONTRIBUTORS ? [] : ids;
+};
+/**
+ * The country shares, taken from the first contributor that records them. They are the same on
+ * every sub-aggregation of the country and period, so one readable Cycle answers for all of them -
+ * and none being readable leaves those symbols symbolic, as they are today.
+ */
+const sharedLookups = (jlogs) => (jlogs ?? [])
+    .map(jlog => Object.entries(nodeValues(jlog)).filter(([key]) => LOOKUP_KEYS.includes(key)))
+    .map(entries => Object.fromEntries(entries))
+    .find(values => !isEmpty(values)) ?? {};
 
 // Aggregation has a single "model" - unlike a recalculation, where each term may be produced by a
 // different one - so the column is a constant rather than something resolved per row.
@@ -11748,25 +12237,6 @@ const isWorldAggregation = (node) => {
         ? country['@id'] === WORLD_COUNTRY_ID
         : node?.name?.split(' - ')?.[1]?.trim() === WORLD_COUNTRY_NAME;
 };
-// the `.jlog` entries the aggregation records are tagged with its own model name
-const JLOG_MODEL = 'aggregation';
-const LOGS_KEY = 'logs';
-// the quantities of one `.jlog` entry, dropping the `model` marker that tags them
-const entryValues = (entry) => (entry?.[LOGS_KEY] ?? [])
-    .filter(log => log?.model === JLOG_MODEL)
-    .reduce((values, { model: _model, ...fields }) => ({ ...values, ...fields }), {});
-/**
- * The quantities recorded for one blank node. A field of the blank node (e.g. a product's
- * `economicValueShare`) is logged one level deeper, the way the models' `.jlog` nests it - merge
- * those in so a formula resolves whichever of the two it describes, the blank node's own values
- * winning any collision.
- */
-const loggedValues = (entry) => {
-    const nested = Object.entries(entry ?? {})
-        .filter(([key]) => key !== LOGS_KEY)
-        .reduce((values, [, field]) => ({ ...values, ...entryValues(field) }), {});
-    return { ...nested, ...entryValues(entry) };
-};
 const groupObservations = (rows) => {
     const counts = rows.map(({ observations }) => observations).filter(count => typeof count === 'number');
     if (!counts.length)
@@ -11827,6 +12297,23 @@ class NodeAggregationLogsComponent {
             const index = this.jlogParentIndex();
             return key && typeof index === 'number' && index >= 0 ? (this.jlog()?.[key]?.[index] ?? {}) : this.jlog();
         }, ...(ngDevMode ? [{ debugName: "scopedJlog" }] : []));
+        // the quantities describing the Cycle itself rather than one of its data items, which the
+        // aggregation records once at the top of the `.jlog`
+        this.nodeValues = computed(() => nodeValues(this.scopedJlog()), ...(ngDevMode ? [{ debugName: "nodeValues" }] : []));
+        // whether the sub-system weighting is one of the stages that produced these values
+        this.subAggregation = computed(() => isSubAggregation(this.scopedJlog()), ...(ngDevMode ? [{ debugName: "subAggregation" }] : []));
+        /**
+         * The `.jlog` of every sub-aggregation this Cycle was combined from, for the country shares the
+         * aggregation only records on them. Best effort: a reader without access to a sub-aggregation
+         * gets nothing back, and those symbols stay symbolic - which is how they render today.
+         */
+        this.contributorsResource = rxResource({
+            params: () => ({ ids: contributorIds(this.scopedJlog()) }),
+            stream: ({ params: { ids } }) => ids.length
+                ? forkJoin(ids.map(id => this.nodeLogsModelsService.getJLog$({ '@type': NodeType.Cycle, '@id': id, aggregated: true })))
+                : of([])
+        });
+        this.sharedLookups = computed(() => sharedLookups(this.contributorsResource.value() ?? []), ...(ngDevMode ? [{ debugName: "sharedLookups" }] : []));
         // groups kept open, by term id: expanding is view state, so it survives the rows being rebuilt
         this.openGroups = signal(new Set(), ...(ngDevMode ? [{ debugName: "openGroups" }] : []));
         /**
@@ -11838,10 +12325,13 @@ class NodeAggregationLogsComponent {
             const blankNodes = (this.node()?.[this.nodeKey()] ?? []);
             const logs = this.scopedJlog()?.[this.nodeKey()] ?? {};
             const open = this.openGroups();
+            // a data item's own quantities win over the ones describing the whole Cycle, which in turn win
+            // over the country shares read from a sub-aggregation
+            const shared = { ...this.sharedLookups(), ...this.nodeValues() };
             return groupBlankNodesByTermIdentity(blankNodes, this.nodeType(), this.nodeKey()).map(group => {
                 const rows = group.rows.map(row => ({
                     ...row,
-                    values: loggedValues(logs[row.index]),
+                    values: { ...shared, ...loggedValues(logs[row.index]) },
                     displayValue: propertyValue$1(row.value?.value, group.termId),
                     observations: row.value?.observations
                 }));
@@ -11863,7 +12353,7 @@ 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 })\">\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\">\n  <he-node-aggregated-formulas\n    [termType]=\"termType()\"\n    [termId]=\"termId()\"\n    [nodeKey]=\"nodeKey()\"\n    [values]=\"values\"\n    [worldAggregation]=\"worldAggregation()\" />\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", "values", "worldAggregation", "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\"></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 })\">\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\">\n  <he-node-aggregated-formulas\n    [termType]=\"termType()\"\n    [termId]=\"termId()\"\n    [nodeKey]=\"nodeKey()\"\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", "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,
@@ -11879,7 +12369,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 })\">\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\">\n  <he-node-aggregated-formulas\n    [termType]=\"termType()\"\n    [termId]=\"termId()\"\n    [nodeKey]=\"nodeKey()\"\n    [values]=\"values\"\n    [worldAggregation]=\"worldAggregation()\" />\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\"></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 })\">\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\">\n  <he-node-aggregated-formulas\n    [termType]=\"termType()\"\n    [termId]=\"termId()\"\n    [nodeKey]=\"nodeKey()\"\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;
@@ -12479,18 +12969,37 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
 
 // default for all product termType, can be overwritten
 const defaultMinNbObservations = 50;
+// the `.jlog` section the aggregation stores the quality score in, and the model tagging its entries
+const jlogKey = 'aggregatedQualityScore';
+const jlogModel = 'aggregation';
+const isTrue = (value) => value === true || value === 'True';
+/**
+ * Whether a quantity was logged: one that was not found is logged as `None`, which the `.jlog`
+ * carries as it is written.
+ */
+const hasLogValue = (value) => !isUndefined(value) && !isNaN(+value);
 const isScoreValid = {
-    0: ({ all_included }) => all_included === 'True',
+    0: ({ all_included }) => isTrue(all_included),
     1: ({ nb_observations, min_nb_observations }) => +nb_observations >= (+min_nb_observations || defaultMinNbObservations),
     2: ({ delta, delta_min, yield_delta, yield_delta_min }) => isUndefined(delta) ? +yield_delta <= +yield_delta_min : +delta <= +delta_min,
-    3: ({ is_complete }) => is_complete === 'True',
+    3: ({ is_complete }) => isTrue(is_complete),
     4: ({ production_delta, production_delta_min }) => +production_delta >= +production_delta_min
 };
+/**
+ * The quality score recorded in the `.jlog`, merged into a single set of values.
+ * Empty for every aggregation that predates it, which only has the text logs.
+ */
+const jlogScore = (jlog) => (jlog?.[jlogKey]?.logs ?? [])
+    .filter(({ model }) => model === jlogModel)
+    .reduce((values, { model: _model, ...fields }) => ({ ...values, ...fields }), {});
+const toValidScores = (logs) => Object.fromEntries(Object.entries(isScoreValid).map(([key, isValid]) => [key, isValid(logs)]));
+
 const getCountryName = (node) => node?.site?.country?.name || node.name?.split(' - ')?.[1]?.trim();
 class NodeAggregatedQualityScoreComponent {
     constructor() {
         this.searchService = inject(HeSearchService);
         this.nodeService = inject(HeNodeService);
+        this.nodeLogsModelsService = inject(NodeLogsModelsService);
         this.node = input.required(...(ngDevMode ? [{ debugName: "node" }] : []));
         this.country = input(...(ngDevMode ? [undefined, { debugName: "country" }] : []));
         /**
@@ -12530,22 +13039,34 @@ class NodeAggregatedQualityScoreComponent {
                     : of(undefined)
         });
         this.countryId = computed(() => this.countryResource.value()?.['@id'], ...(ngDevMode ? [{ debugName: "countryId" }] : []));
-        this.logsResource = rxResource({
+        // the score as recorded in the `.jlog`, which is where every new aggregation logs it
+        this.jlogResource = rxResource({
             params: () => ({
                 showInfo: this.showInfo(),
                 node: this.node()
             }),
-            stream: ({ params: { showInfo, node } }) => showInfo
-                ? this.nodeService
+            stream: ({ params: { showInfo, node } }) => showInfo ? this.nodeLogsModelsService.getJLog$(node) : of({})
+        });
+        this.jlogLogs = computed(() => jlogScore(this.jlogResource.value() ?? {}), ...(ngDevMode ? [{ debugName: "jlogLogs" }] : []));
+        this.loadingJLog = computed(() => !this.jlogResource.hasValue() || this.jlogResource.isLoading(), ...(ngDevMode ? [{ debugName: "loadingJLog" }] : []));
+        this.useJLog = computed(() => !isEmpty(this.jlogLogs()), ...(ngDevMode ? [{ debugName: "useJLog" }] : []));
+        // only fetch the legacy text logs once we know the `.jlog` does not carry the score
+        this.logsResource = rxResource({
+            params: () => ({
+                skip: !this.showInfo() || this.loadingJLog() || this.useJLog(),
+                node: this.node()
+            }),
+            stream: ({ params: { skip, node } }) => skip
+                ? of({})
+                : this.nodeService
                     .getLog$({
                     '@type': node['@type'],
                     '@id': node['@id']
                 })
                     .pipe(map(value => (value ? parseLines(value) : [])), mergeAll(), filter(({ data: { message } }) => !!message), map(({ data: { message } }) => parseMessage(message)), filter(({ id }) => id === this.node()['@id']), reduce((a, b) => ({ ...a, ...b }), {}))
-                : of({})
         });
-        this.logs = computed(() => this.logsResource.value() ?? {}, ...(ngDevMode ? [{ debugName: "logs" }] : []));
-        this.validScores = computed(() => Object.fromEntries(Object.entries(isScoreValid).map(([key, value]) => [key, value(this.logs())])), ...(ngDevMode ? [{ debugName: "validScores" }] : []));
+        this.logs = computed(() => this.useJLog() ? this.jlogLogs() : (this.logsResource.value() ?? {}), ...(ngDevMode ? [{ debugName: "logs" }] : []));
+        this.validScores = computed(() => toValidScores(this.logs()), ...(ngDevMode ? [{ debugName: "validScores" }] : []));
         this.minObservations = computed(() => +this.logs().min_nb_observations || defaultMinNbObservations, ...(ngDevMode ? [{ debugName: "minObservations" }] : []));
         this.observations = computed(() => +this.logs().nb_observations, ...(ngDevMode ? [{ debugName: "observations" }] : []));
         this.missingEmissionIds = computed(() => this.logs().missing_emissions?.split(';') ?? [], ...(ngDevMode ? [{ debugName: "missingEmissionIds" }] : []));
@@ -12591,10 +13112,16 @@ class NodeAggregatedQualityScoreComponent {
         this.isGlobal = computed(() => this.countryId()?.startsWith('region-'), ...(ngDevMode ? [{ debugName: "isGlobal" }] : []));
         this.schemaBaseUrl = computed(() => [schemaBaseUrl(), this.node()?.['@type']].join('/'), ...(ngDevMode ? [{ debugName: "schemaBaseUrl" }] : []));
         this.schemaUrl = computed(() => `${this.schemaBaseUrl()}#aggregatedQualityScore`, ...(ngDevMode ? [{ debugName: "schemaUrl" }] : []));
-        this.hasProductionQuantity = computed(() => this.logs()?.region_production_quantity !== 'None', ...(ngDevMode ? [{ debugName: "hasProductionQuantity" }] : []));
+        this.hasFaostatYield = computed(() => hasLogValue(this.logs()?.faostat_yield), ...(ngDevMode ? [{ debugName: "hasFaostatYield" }] : []));
+        this.hasProductionQuantity = computed(() => hasLogValue(this.logs()?.region_production_quantity), ...(ngDevMode ? [{ debugName: "hasProductionQuantity" }] : []));
         this.regionProductionQuantity = computed(() => +this.logs()?.region_production_quantity, ...(ngDevMode ? [{ debugName: "regionProductionQuantity" }] : []));
         this.countriesProductionQuantity = computed(() => +this.logs()?.countries_production_quantity, ...(ngDevMode ? [{ debugName: "countriesProductionQuantity" }] : []));
-        this.loading = computed(() => [this.logsResource.isLoading(), this.countryResource.isLoading(), this.missingEmissionsResource.isLoading()].some(Boolean), ...(ngDevMode ? [{ debugName: "loading" }] : []));
+        this.loading = computed(() => [
+            this.jlogResource.isLoading(),
+            this.logsResource.isLoading(),
+            this.countryResource.isLoading(),
+            this.missingEmissionsResource.isLoading()
+        ].some(Boolean), ...(ngDevMode ? [{ debugName: "loading" }] : []));
     }
     get hidden() {
         return isUndefined(this.score());
@@ -12606,7 +13133,7 @@ class NodeAggregatedQualityScoreComponent {
         return term['@id'];
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: NodeAggregatedQualityScoreComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: NodeAggregatedQualityScoreComponent, isStandalone: true, selector: "he-node-aggregated-quality-score", inputs: { node: { classPropertyName: "node", publicName: "node", isSignal: true, isRequired: true, transformFunction: null }, country: { classPropertyName: "country", publicName: "country", isSignal: true, isRequired: false, transformFunction: null }, showInfo: { classPropertyName: "showInfo", publicName: "showInfo", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.is-none": "this.hidden" } }, ngImport: i0, template: "@if (score() >= 0) {\n  @switch (mode()) {\n    @case ('tag') {\n      <div class=\"tags has-addons\">\n        <a class=\"tag\" [href]=\"schemaUrl()\" target=\"_blank\">Data Quality</a>\n        <ng-container *ngTemplateOutlet=\"quality\" />\n        @if (showInfo()) {\n          <span\n            class=\"tag pointer\"\n            [ngbTooltip]=\"logsTooltip\"\n            [placement]=\"placement() + ' auto'\"\n            triggers=\"click\"\n            container=\"body\"\n            autoClose=\"outside\"\n            tooltipClass=\"quality-tooltip\">\n            @if (loading()) {\n              <he-svg-icon name=\"loading\" animation=\"spin\" />\n            } @else if (logs()) {\n              <he-svg-icon name=\"help-circle\" />\n            }\n          </span>\n        }\n      </div>\n    }\n    @default {\n      <ng-container *ngTemplateOutlet=\"quality\" />\n    }\n  }\n}\n\n<ng-template #quality>\n  <span\n    [ngStyle]=\"{\n      'background-color': scoreColor()\n    }\"\n    class=\"tag-score | tag is-primary has-text-white has-text-weight-semibold\">\n    <span>{{ scoreLevel() | uppercase }}</span>\n  </span>\n</ng-template>\n\n<ng-template #logsTooltip>\n  <div>\n    <p class=\"mb-2\">\n      Up to {{ scoreMax() }} points are awarded for the following criteria, where \"low\" is 0 to\n      {{ scoreMax() - 3 }} points, \"medium\" is {{ scoreMax() - 2 }} to {{ scoreMax() - 1 }} points, and \"high\" is\n      {{ scoreMax() }} points:\n    </p>\n    @if (validScores()) {\n      <div class=\"table-container\">\n        <table class=\"table is-fullwidth has-text-white has-background-secondary\">\n          <thead>\n            <tr>\n              <th class=\"has-text-white\">Condition</th>\n              <th class=\"has-text-white\">Met</th>\n              @if (isCycle()) {\n                <th class=\"has-text-white\">Details</th>\n              }\n            </tr>\n          </thead>\n          <tbody>\n            <tr>\n              <td>No aggregated emissions included in the system boundary are missing</td>\n              <td [class.has-text-success]=\"validScores()[0]\" [class.has-text-danger]=\"!validScores()[0]\">\n                {{ validScores()[0] ? 'Yes' : 'No' }}\n              </td>\n              @if (isCycle()) {\n                <td>\n                  @if (missingEmissions()?.length) {\n                    <span>{{ missingEmissions().length }}</span>\n                    <span class=\"is-pl-1\">{{ 'emission' | pluralize: missingEmissions().length }} are missing:</span>\n                    <div class=\"is-mt-2 | missing-emissions\">\n                      <ul class=\"is-list-style-disc is-pl-4\">\n                        @for (term of missingEmissions(); track trackByTerm($index, term); let l = $last) {\n                          <li>\n                            <he-node-link class=\"is-inline-block is-pl-1\" linkClass=\"is-dark\" [node]=\"term\">\n                              <span class=\"is-nowrap has-text-ellipsis\">{{ term.name }}</span>\n                            </he-node-link>\n                          </li>\n                        }\n                      </ul>\n                    </div>\n                  } @else if (logs()?.included_emissions) {\n                    <span>\n                      All {{ logs().included_emissions }} {{ 'emission' | pluralize: +logs().included_emissions }} for\n                      this product are included.\n                    </span>\n                  }\n                </td>\n              }\n            </tr>\n            <tr>\n              <td>The aggregation is based on data from over {{ minObservations() }} Cycles</td>\n              <td [class.has-text-success]=\"validScores()[1]\" [class.has-text-danger]=\"!validScores()[1]\">\n                {{ validScores()[1] ? 'Yes' : 'No' }}\n              </td>\n              @if (isCycle()) {\n                <td>\n                  <span>Based on {{ observations() }} {{ 'Cycle' | pluralize: observations() }}.</span>\n                </td>\n              }\n            </tr>\n            @if (isCrop()) {\n              <tr>\n                <td>\n                  The difference between yield per hectare here and FAOSTAT is less than \u00B1{{\n                    logs().yield_delta_min || logs().delta_min | number\n                  }}%\n                </td>\n                <td [class.has-text-success]=\"validScores()[2]\" [class.has-text-danger]=\"!validScores()[2]\">\n                  {{ validScores()[2] ? 'Yes' : 'No' }}\n                </td>\n                @if (isCycle()) {\n                  <td>\n                    @if (logs()?.faostat_yield !== 'None') {\n                      <span>FAOSTAT yield =</span>\n                      <span class=\"is-pl-1\">{{ logs()?.faostat_yield | precision: 3 }}</span>\n                      <span class=\"is-pl-1\">kg/ha;</span>\n                      <span class=\"is-pl-1\">Aggregated data yield =</span>\n                      <span class=\"is-pl-1\">{{ logs()?.product_yield | precision: 3 }}</span>\n                      <span class=\"is-pl-1\">kg/ha.</span>\n                    } @else {\n                      No yield found on FAOSTAT for this product.\n                    }\n                  </td>\n                }\n              </tr>\n            }\n            <tr>\n              <td>\n                Data completeness is\n                <code class=\"is-p-1\">true</code>\n                for all priority areas\n              </td>\n              <td [class.has-text-success]=\"validScores()[3]\" [class.has-text-danger]=\"!validScores()[3]\">\n                {{ validScores()[3] ? 'Yes' : 'No' }}\n              </td>\n              @if (isCycle()) {\n                <td>\n                  @if (missingCompletenessFields()?.length) {\n                    <span>{{ missingCompletenessFields().length }}</span>\n                    <span class=\"is-pl-1\">completeness areas missing data:</span>\n                    @for (field of missingCompletenessFields(); track field; let l = $last) {\n                      <a class=\"is-inline-block is-pl-1 is-dark\" [href]=\"completenessUrl(field)\" target=\"_blank\">\n                        {{ field }}\n                      </a>\n                      <span>{{ l ? '.' : ',' }}</span>\n                    }\n                  }\n                </td>\n              }\n            </tr>\n            @if (isCrop() && isGlobal()) {\n              <tr>\n                <td>Aggregated countries represent at least 75% of {{ countryName() }} production</td>\n                <td [class.has-text-success]=\"validScores()[4]\" [class.has-text-danger]=\"!validScores()[4]\">\n                  {{ validScores()[4] ? 'Yes' : 'No' }}\n                </td>\n                @if (isCycle()) {\n                  <td>\n                    @if (hasProductionQuantity()) {\n                      <span>{{ countryName() }} production quantity =</span>\n                      <span class=\"is-pl-1\">{{ regionProductionQuantity() / 1000000 | number: '1.0-0' }}</span>\n                      <span class=\"is-pl-1\">million tonnes;</span>\n                      <span class=\"is-pl-1\">Production of countries included in the aggregation =</span>\n                      <span class=\"is-pl-1\">{{ countriesProductionQuantity() / 1000000 | number: '1.0-0' }}</span>\n                      <span class=\"is-pl-1\">million tonnes.</span>\n                    } @else {\n                      No production quantity found on FAOSTAT for this product.\n                    }\n                  </td>\n                }\n              </tr>\n            }\n          </tbody>\n        </table>\n      </div>\n    }\n  </div>\n</ng-template>\n", styles: [":host{display:inline-block}::ng-deep .quality-tooltip{min-width:500px}.missing-emissions{max-height:250px;overflow-y:auto}\n"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: NodeLinkComponent, selector: "he-node-link", inputs: ["node", "dataState", "showExternalLink", "linkClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: NgbTooltipModule }, { kind: "directive", type: i1$1.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "component", type: HESvgIconComponent, selector: "he-svg-icon", inputs: ["name", "size", "animation"] }, { kind: "pipe", type: PluralizePipe, name: "pluralize" }, { kind: "pipe", type: DecimalPipe, name: "number" }, { kind: "pipe", type: PrecisionPipe, name: "precision" }, { kind: "pipe", type: UpperCasePipe, name: "uppercase" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: NodeAggregatedQualityScoreComponent, isStandalone: true, selector: "he-node-aggregated-quality-score", inputs: { node: { classPropertyName: "node", publicName: "node", isSignal: true, isRequired: true, transformFunction: null }, country: { classPropertyName: "country", publicName: "country", isSignal: true, isRequired: false, transformFunction: null }, showInfo: { classPropertyName: "showInfo", publicName: "showInfo", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.is-none": "this.hidden" } }, ngImport: i0, template: "@if (score() >= 0) {\n  @switch (mode()) {\n    @case ('tag') {\n      <div class=\"tags has-addons\">\n        <a class=\"tag\" [href]=\"schemaUrl()\" target=\"_blank\">Data Quality</a>\n        <ng-container *ngTemplateOutlet=\"quality\" />\n        @if (showInfo()) {\n          <span\n            class=\"tag pointer\"\n            [ngbTooltip]=\"logsTooltip\"\n            [placement]=\"placement() + ' auto'\"\n            triggers=\"click\"\n            container=\"body\"\n            autoClose=\"outside\"\n            tooltipClass=\"quality-tooltip\">\n            @if (loading()) {\n              <he-svg-icon name=\"loading\" animation=\"spin\" />\n            } @else if (logs()) {\n              <he-svg-icon name=\"help-circle\" />\n            }\n          </span>\n        }\n      </div>\n    }\n    @default {\n      <ng-container *ngTemplateOutlet=\"quality\" />\n    }\n  }\n}\n\n<ng-template #quality>\n  <span\n    [ngStyle]=\"{\n      'background-color': scoreColor()\n    }\"\n    class=\"tag-score | tag is-primary has-text-white has-text-weight-semibold\">\n    <span>{{ scoreLevel() | uppercase }}</span>\n  </span>\n</ng-template>\n\n<ng-template #logsTooltip>\n  <div>\n    <p class=\"mb-2\">\n      Up to {{ scoreMax() }} points are awarded for the following criteria, where \"low\" is 0 to\n      {{ scoreMax() - 3 }} points, \"medium\" is {{ scoreMax() - 2 }} to {{ scoreMax() - 1 }} points, and \"high\" is\n      {{ scoreMax() }} points:\n    </p>\n    @if (validScores()) {\n      <div class=\"table-container\">\n        <table class=\"table is-fullwidth has-text-white has-background-secondary\">\n          <thead>\n            <tr>\n              <th class=\"has-text-white\">Condition</th>\n              <th class=\"has-text-white\">Met</th>\n              @if (isCycle()) {\n                <th class=\"has-text-white\">Details</th>\n              }\n            </tr>\n          </thead>\n          <tbody>\n            <tr>\n              <td>No aggregated emissions included in the system boundary are missing</td>\n              <td [class.has-text-success]=\"validScores()[0]\" [class.has-text-danger]=\"!validScores()[0]\">\n                {{ validScores()[0] ? 'Yes' : 'No' }}\n              </td>\n              @if (isCycle()) {\n                <td>\n                  @if (missingEmissions()?.length) {\n                    <span>{{ missingEmissions().length }}</span>\n                    <span class=\"is-pl-1\">{{ 'emission' | pluralize: missingEmissions().length }} are missing:</span>\n                    <div class=\"is-mt-2 | missing-emissions\">\n                      <ul class=\"is-list-style-disc is-pl-4\">\n                        @for (term of missingEmissions(); track trackByTerm($index, term); let l = $last) {\n                          <li>\n                            <he-node-link class=\"is-inline-block is-pl-1\" linkClass=\"is-dark\" [node]=\"term\">\n                              <span class=\"is-nowrap has-text-ellipsis\">{{ term.name }}</span>\n                            </he-node-link>\n                          </li>\n                        }\n                      </ul>\n                    </div>\n                  } @else if (logs()?.included_emissions) {\n                    <span>\n                      All {{ logs().included_emissions }} {{ 'emission' | pluralize: +logs().included_emissions }} for\n                      this product are included.\n                    </span>\n                  }\n                </td>\n              }\n            </tr>\n            <tr>\n              <td>The aggregation is based on data from over {{ minObservations() }} Cycles</td>\n              <td [class.has-text-success]=\"validScores()[1]\" [class.has-text-danger]=\"!validScores()[1]\">\n                {{ validScores()[1] ? 'Yes' : 'No' }}\n              </td>\n              @if (isCycle()) {\n                <td>\n                  <span>Based on {{ observations() }} {{ 'Cycle' | pluralize: observations() }}.</span>\n                </td>\n              }\n            </tr>\n            @if (isCrop()) {\n              <tr>\n                <td>\n                  The difference between yield per hectare here and FAOSTAT is less than \u00B1{{\n                    logs().yield_delta_min || logs().delta_min | number\n                  }}%\n                </td>\n                <td [class.has-text-success]=\"validScores()[2]\" [class.has-text-danger]=\"!validScores()[2]\">\n                  {{ validScores()[2] ? 'Yes' : 'No' }}\n                </td>\n                @if (isCycle()) {\n                  <td>\n                    @if (hasFaostatYield()) {\n                      <span>FAOSTAT yield =</span>\n                      <span class=\"is-pl-1\">{{ logs()?.faostat_yield | precision: 3 }}</span>\n                      <span class=\"is-pl-1\">kg/ha;</span>\n                      <span class=\"is-pl-1\">Aggregated data yield =</span>\n                      <span class=\"is-pl-1\">{{ logs()?.product_yield | precision: 3 }}</span>\n                      <span class=\"is-pl-1\">kg/ha.</span>\n                    } @else {\n                      No yield found on FAOSTAT for this product.\n                    }\n                  </td>\n                }\n              </tr>\n            }\n            <tr>\n              <td>\n                Data completeness is\n                <code class=\"is-p-1\">true</code>\n                for all priority areas\n              </td>\n              <td [class.has-text-success]=\"validScores()[3]\" [class.has-text-danger]=\"!validScores()[3]\">\n                {{ validScores()[3] ? 'Yes' : 'No' }}\n              </td>\n              @if (isCycle()) {\n                <td>\n                  @if (missingCompletenessFields()?.length) {\n                    <span>{{ missingCompletenessFields().length }}</span>\n                    <span class=\"is-pl-1\">completeness areas missing data:</span>\n                    @for (field of missingCompletenessFields(); track field; let l = $last) {\n                      <a class=\"is-inline-block is-pl-1 is-dark\" [href]=\"completenessUrl(field)\" target=\"_blank\">\n                        {{ field }}\n                      </a>\n                      <span>{{ l ? '.' : ',' }}</span>\n                    }\n                  }\n                </td>\n              }\n            </tr>\n            @if (isCrop() && isGlobal()) {\n              <tr>\n                <td>Aggregated countries represent at least 75% of {{ countryName() }} production</td>\n                <td [class.has-text-success]=\"validScores()[4]\" [class.has-text-danger]=\"!validScores()[4]\">\n                  {{ validScores()[4] ? 'Yes' : 'No' }}\n                </td>\n                @if (isCycle()) {\n                  <td>\n                    @if (hasProductionQuantity()) {\n                      <span>{{ countryName() }} production quantity =</span>\n                      <span class=\"is-pl-1\">{{ regionProductionQuantity() / 1000000 | number: '1.0-0' }}</span>\n                      <span class=\"is-pl-1\">million tonnes;</span>\n                      <span class=\"is-pl-1\">Production of countries included in the aggregation =</span>\n                      <span class=\"is-pl-1\">{{ countriesProductionQuantity() / 1000000 | number: '1.0-0' }}</span>\n                      <span class=\"is-pl-1\">million tonnes.</span>\n                    } @else {\n                      No production quantity found on FAOSTAT for this product.\n                    }\n                  </td>\n                }\n              </tr>\n            }\n          </tbody>\n        </table>\n      </div>\n    }\n  </div>\n</ng-template>\n", styles: [":host{display:inline-block}::ng-deep .quality-tooltip{min-width:500px}.missing-emissions{max-height:250px;overflow-y:auto}\n"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: NodeLinkComponent, selector: "he-node-link", inputs: ["node", "dataState", "showExternalLink", "linkClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: NgbTooltipModule }, { kind: "directive", type: i1$1.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "component", type: HESvgIconComponent, selector: "he-svg-icon", inputs: ["name", "size", "animation"] }, { kind: "pipe", type: PluralizePipe, name: "pluralize" }, { kind: "pipe", type: DecimalPipe, name: "number" }, { kind: "pipe", type: PrecisionPipe, name: "precision" }, { kind: "pipe", type: UpperCasePipe, name: "uppercase" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: NodeAggregatedQualityScoreComponent, decorators: [{
             type: Component$1,
@@ -12620,7 +13147,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
                         NgTemplateOutlet,
                         NgbTooltipModule,
                         HESvgIconComponent
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (score() >= 0) {\n  @switch (mode()) {\n    @case ('tag') {\n      <div class=\"tags has-addons\">\n        <a class=\"tag\" [href]=\"schemaUrl()\" target=\"_blank\">Data Quality</a>\n        <ng-container *ngTemplateOutlet=\"quality\" />\n        @if (showInfo()) {\n          <span\n            class=\"tag pointer\"\n            [ngbTooltip]=\"logsTooltip\"\n            [placement]=\"placement() + ' auto'\"\n            triggers=\"click\"\n            container=\"body\"\n            autoClose=\"outside\"\n            tooltipClass=\"quality-tooltip\">\n            @if (loading()) {\n              <he-svg-icon name=\"loading\" animation=\"spin\" />\n            } @else if (logs()) {\n              <he-svg-icon name=\"help-circle\" />\n            }\n          </span>\n        }\n      </div>\n    }\n    @default {\n      <ng-container *ngTemplateOutlet=\"quality\" />\n    }\n  }\n}\n\n<ng-template #quality>\n  <span\n    [ngStyle]=\"{\n      'background-color': scoreColor()\n    }\"\n    class=\"tag-score | tag is-primary has-text-white has-text-weight-semibold\">\n    <span>{{ scoreLevel() | uppercase }}</span>\n  </span>\n</ng-template>\n\n<ng-template #logsTooltip>\n  <div>\n    <p class=\"mb-2\">\n      Up to {{ scoreMax() }} points are awarded for the following criteria, where \"low\" is 0 to\n      {{ scoreMax() - 3 }} points, \"medium\" is {{ scoreMax() - 2 }} to {{ scoreMax() - 1 }} points, and \"high\" is\n      {{ scoreMax() }} points:\n    </p>\n    @if (validScores()) {\n      <div class=\"table-container\">\n        <table class=\"table is-fullwidth has-text-white has-background-secondary\">\n          <thead>\n            <tr>\n              <th class=\"has-text-white\">Condition</th>\n              <th class=\"has-text-white\">Met</th>\n              @if (isCycle()) {\n                <th class=\"has-text-white\">Details</th>\n              }\n            </tr>\n          </thead>\n          <tbody>\n            <tr>\n              <td>No aggregated emissions included in the system boundary are missing</td>\n              <td [class.has-text-success]=\"validScores()[0]\" [class.has-text-danger]=\"!validScores()[0]\">\n                {{ validScores()[0] ? 'Yes' : 'No' }}\n              </td>\n              @if (isCycle()) {\n                <td>\n                  @if (missingEmissions()?.length) {\n                    <span>{{ missingEmissions().length }}</span>\n                    <span class=\"is-pl-1\">{{ 'emission' | pluralize: missingEmissions().length }} are missing:</span>\n                    <div class=\"is-mt-2 | missing-emissions\">\n                      <ul class=\"is-list-style-disc is-pl-4\">\n                        @for (term of missingEmissions(); track trackByTerm($index, term); let l = $last) {\n                          <li>\n                            <he-node-link class=\"is-inline-block is-pl-1\" linkClass=\"is-dark\" [node]=\"term\">\n                              <span class=\"is-nowrap has-text-ellipsis\">{{ term.name }}</span>\n                            </he-node-link>\n                          </li>\n                        }\n                      </ul>\n                    </div>\n                  } @else if (logs()?.included_emissions) {\n                    <span>\n                      All {{ logs().included_emissions }} {{ 'emission' | pluralize: +logs().included_emissions }} for\n                      this product are included.\n                    </span>\n                  }\n                </td>\n              }\n            </tr>\n            <tr>\n              <td>The aggregation is based on data from over {{ minObservations() }} Cycles</td>\n              <td [class.has-text-success]=\"validScores()[1]\" [class.has-text-danger]=\"!validScores()[1]\">\n                {{ validScores()[1] ? 'Yes' : 'No' }}\n              </td>\n              @if (isCycle()) {\n                <td>\n                  <span>Based on {{ observations() }} {{ 'Cycle' | pluralize: observations() }}.</span>\n                </td>\n              }\n            </tr>\n            @if (isCrop()) {\n              <tr>\n                <td>\n                  The difference between yield per hectare here and FAOSTAT is less than \u00B1{{\n                    logs().yield_delta_min || logs().delta_min | number\n                  }}%\n                </td>\n                <td [class.has-text-success]=\"validScores()[2]\" [class.has-text-danger]=\"!validScores()[2]\">\n                  {{ validScores()[2] ? 'Yes' : 'No' }}\n                </td>\n                @if (isCycle()) {\n                  <td>\n                    @if (logs()?.faostat_yield !== 'None') {\n                      <span>FAOSTAT yield =</span>\n                      <span class=\"is-pl-1\">{{ logs()?.faostat_yield | precision: 3 }}</span>\n                      <span class=\"is-pl-1\">kg/ha;</span>\n                      <span class=\"is-pl-1\">Aggregated data yield =</span>\n                      <span class=\"is-pl-1\">{{ logs()?.product_yield | precision: 3 }}</span>\n                      <span class=\"is-pl-1\">kg/ha.</span>\n                    } @else {\n                      No yield found on FAOSTAT for this product.\n                    }\n                  </td>\n                }\n              </tr>\n            }\n            <tr>\n              <td>\n                Data completeness is\n                <code class=\"is-p-1\">true</code>\n                for all priority areas\n              </td>\n              <td [class.has-text-success]=\"validScores()[3]\" [class.has-text-danger]=\"!validScores()[3]\">\n                {{ validScores()[3] ? 'Yes' : 'No' }}\n              </td>\n              @if (isCycle()) {\n                <td>\n                  @if (missingCompletenessFields()?.length) {\n                    <span>{{ missingCompletenessFields().length }}</span>\n                    <span class=\"is-pl-1\">completeness areas missing data:</span>\n                    @for (field of missingCompletenessFields(); track field; let l = $last) {\n                      <a class=\"is-inline-block is-pl-1 is-dark\" [href]=\"completenessUrl(field)\" target=\"_blank\">\n                        {{ field }}\n                      </a>\n                      <span>{{ l ? '.' : ',' }}</span>\n                    }\n                  }\n                </td>\n              }\n            </tr>\n            @if (isCrop() && isGlobal()) {\n              <tr>\n                <td>Aggregated countries represent at least 75% of {{ countryName() }} production</td>\n                <td [class.has-text-success]=\"validScores()[4]\" [class.has-text-danger]=\"!validScores()[4]\">\n                  {{ validScores()[4] ? 'Yes' : 'No' }}\n                </td>\n                @if (isCycle()) {\n                  <td>\n                    @if (hasProductionQuantity()) {\n                      <span>{{ countryName() }} production quantity =</span>\n                      <span class=\"is-pl-1\">{{ regionProductionQuantity() / 1000000 | number: '1.0-0' }}</span>\n                      <span class=\"is-pl-1\">million tonnes;</span>\n                      <span class=\"is-pl-1\">Production of countries included in the aggregation =</span>\n                      <span class=\"is-pl-1\">{{ countriesProductionQuantity() / 1000000 | number: '1.0-0' }}</span>\n                      <span class=\"is-pl-1\">million tonnes.</span>\n                    } @else {\n                      No production quantity found on FAOSTAT for this product.\n                    }\n                  </td>\n                }\n              </tr>\n            }\n          </tbody>\n        </table>\n      </div>\n    }\n  </div>\n</ng-template>\n", styles: [":host{display:inline-block}::ng-deep .quality-tooltip{min-width:500px}.missing-emissions{max-height:250px;overflow-y:auto}\n"] }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (score() >= 0) {\n  @switch (mode()) {\n    @case ('tag') {\n      <div class=\"tags has-addons\">\n        <a class=\"tag\" [href]=\"schemaUrl()\" target=\"_blank\">Data Quality</a>\n        <ng-container *ngTemplateOutlet=\"quality\" />\n        @if (showInfo()) {\n          <span\n            class=\"tag pointer\"\n            [ngbTooltip]=\"logsTooltip\"\n            [placement]=\"placement() + ' auto'\"\n            triggers=\"click\"\n            container=\"body\"\n            autoClose=\"outside\"\n            tooltipClass=\"quality-tooltip\">\n            @if (loading()) {\n              <he-svg-icon name=\"loading\" animation=\"spin\" />\n            } @else if (logs()) {\n              <he-svg-icon name=\"help-circle\" />\n            }\n          </span>\n        }\n      </div>\n    }\n    @default {\n      <ng-container *ngTemplateOutlet=\"quality\" />\n    }\n  }\n}\n\n<ng-template #quality>\n  <span\n    [ngStyle]=\"{\n      'background-color': scoreColor()\n    }\"\n    class=\"tag-score | tag is-primary has-text-white has-text-weight-semibold\">\n    <span>{{ scoreLevel() | uppercase }}</span>\n  </span>\n</ng-template>\n\n<ng-template #logsTooltip>\n  <div>\n    <p class=\"mb-2\">\n      Up to {{ scoreMax() }} points are awarded for the following criteria, where \"low\" is 0 to\n      {{ scoreMax() - 3 }} points, \"medium\" is {{ scoreMax() - 2 }} to {{ scoreMax() - 1 }} points, and \"high\" is\n      {{ scoreMax() }} points:\n    </p>\n    @if (validScores()) {\n      <div class=\"table-container\">\n        <table class=\"table is-fullwidth has-text-white has-background-secondary\">\n          <thead>\n            <tr>\n              <th class=\"has-text-white\">Condition</th>\n              <th class=\"has-text-white\">Met</th>\n              @if (isCycle()) {\n                <th class=\"has-text-white\">Details</th>\n              }\n            </tr>\n          </thead>\n          <tbody>\n            <tr>\n              <td>No aggregated emissions included in the system boundary are missing</td>\n              <td [class.has-text-success]=\"validScores()[0]\" [class.has-text-danger]=\"!validScores()[0]\">\n                {{ validScores()[0] ? 'Yes' : 'No' }}\n              </td>\n              @if (isCycle()) {\n                <td>\n                  @if (missingEmissions()?.length) {\n                    <span>{{ missingEmissions().length }}</span>\n                    <span class=\"is-pl-1\">{{ 'emission' | pluralize: missingEmissions().length }} are missing:</span>\n                    <div class=\"is-mt-2 | missing-emissions\">\n                      <ul class=\"is-list-style-disc is-pl-4\">\n                        @for (term of missingEmissions(); track trackByTerm($index, term); let l = $last) {\n                          <li>\n                            <he-node-link class=\"is-inline-block is-pl-1\" linkClass=\"is-dark\" [node]=\"term\">\n                              <span class=\"is-nowrap has-text-ellipsis\">{{ term.name }}</span>\n                            </he-node-link>\n                          </li>\n                        }\n                      </ul>\n                    </div>\n                  } @else if (logs()?.included_emissions) {\n                    <span>\n                      All {{ logs().included_emissions }} {{ 'emission' | pluralize: +logs().included_emissions }} for\n                      this product are included.\n                    </span>\n                  }\n                </td>\n              }\n            </tr>\n            <tr>\n              <td>The aggregation is based on data from over {{ minObservations() }} Cycles</td>\n              <td [class.has-text-success]=\"validScores()[1]\" [class.has-text-danger]=\"!validScores()[1]\">\n                {{ validScores()[1] ? 'Yes' : 'No' }}\n              </td>\n              @if (isCycle()) {\n                <td>\n                  <span>Based on {{ observations() }} {{ 'Cycle' | pluralize: observations() }}.</span>\n                </td>\n              }\n            </tr>\n            @if (isCrop()) {\n              <tr>\n                <td>\n                  The difference between yield per hectare here and FAOSTAT is less than \u00B1{{\n                    logs().yield_delta_min || logs().delta_min | number\n                  }}%\n                </td>\n                <td [class.has-text-success]=\"validScores()[2]\" [class.has-text-danger]=\"!validScores()[2]\">\n                  {{ validScores()[2] ? 'Yes' : 'No' }}\n                </td>\n                @if (isCycle()) {\n                  <td>\n                    @if (hasFaostatYield()) {\n                      <span>FAOSTAT yield =</span>\n                      <span class=\"is-pl-1\">{{ logs()?.faostat_yield | precision: 3 }}</span>\n                      <span class=\"is-pl-1\">kg/ha;</span>\n                      <span class=\"is-pl-1\">Aggregated data yield =</span>\n                      <span class=\"is-pl-1\">{{ logs()?.product_yield | precision: 3 }}</span>\n                      <span class=\"is-pl-1\">kg/ha.</span>\n                    } @else {\n                      No yield found on FAOSTAT for this product.\n                    }\n                  </td>\n                }\n              </tr>\n            }\n            <tr>\n              <td>\n                Data completeness is\n                <code class=\"is-p-1\">true</code>\n                for all priority areas\n              </td>\n              <td [class.has-text-success]=\"validScores()[3]\" [class.has-text-danger]=\"!validScores()[3]\">\n                {{ validScores()[3] ? 'Yes' : 'No' }}\n              </td>\n              @if (isCycle()) {\n                <td>\n                  @if (missingCompletenessFields()?.length) {\n                    <span>{{ missingCompletenessFields().length }}</span>\n                    <span class=\"is-pl-1\">completeness areas missing data:</span>\n                    @for (field of missingCompletenessFields(); track field; let l = $last) {\n                      <a class=\"is-inline-block is-pl-1 is-dark\" [href]=\"completenessUrl(field)\" target=\"_blank\">\n                        {{ field }}\n                      </a>\n                      <span>{{ l ? '.' : ',' }}</span>\n                    }\n                  }\n                </td>\n              }\n            </tr>\n            @if (isCrop() && isGlobal()) {\n              <tr>\n                <td>Aggregated countries represent at least 75% of {{ countryName() }} production</td>\n                <td [class.has-text-success]=\"validScores()[4]\" [class.has-text-danger]=\"!validScores()[4]\">\n                  {{ validScores()[4] ? 'Yes' : 'No' }}\n                </td>\n                @if (isCycle()) {\n                  <td>\n                    @if (hasProductionQuantity()) {\n                      <span>{{ countryName() }} production quantity =</span>\n                      <span class=\"is-pl-1\">{{ regionProductionQuantity() / 1000000 | number: '1.0-0' }}</span>\n                      <span class=\"is-pl-1\">million tonnes;</span>\n                      <span class=\"is-pl-1\">Production of countries included in the aggregation =</span>\n                      <span class=\"is-pl-1\">{{ countriesProductionQuantity() / 1000000 | number: '1.0-0' }}</span>\n                      <span class=\"is-pl-1\">million tonnes.</span>\n                    } @else {\n                      No production quantity found on FAOSTAT for this product.\n                    }\n                  </td>\n                }\n              </tr>\n            }\n          </tbody>\n        </table>\n      </div>\n    }\n  </div>\n</ng-template>\n", styles: [":host{display:inline-block}::ng-deep .quality-tooltip{min-width:500px}.missing-emissions{max-height:250px;overflow-y:auto}\n"] }]
         }], propDecorators: { hidden: [{
                 type: HostBinding,
                 args: ['class.is-none']
@@ -14211,6 +14738,71 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
             args: [{ selector: 'he-sites-maps', changeDetection: ChangeDetectionStrategy.OnPush, imports: [GoogleMap, MapMarker, MapPolygon, AsyncPipe], template: "@if (mapLoaded$ | async) {\n  <google-map (mapInitialized)=\"mapLoaded()\" height=\"100%\" width=\"100%\" [zoom]=\"zoom()\" [center]=\"mapCenter()\">\n    @for (marker of markers(); track trackByMarker($index, marker)) {\n      <map-marker [position]=\"marker.position\" [icon]=\"marker.icon\"></map-marker>\n    }\n    @for (polygon of sitePolygons(); track trackByPolygon($index, polygon)) {\n      <map-polygon [paths]=\"polygon.paths\" [options]=\"polygon.options\" />\n    }\n    @for (polygon of termPolygons(); track trackByPolygon($index, polygon)) {\n      <map-polygon [paths]=\"polygon.paths\" [options]=\"polygon.options\" />\n    }\n  </google-map>\n}\n\n@if (showNotice()) {\n  <p class=\"mt-2 is-italic is-size-7\">The information provided might not be complete</p>\n}\n\n@if (showNoLocation()) {\n  <div class=\"no-location has-text-center has-text-light\">\n    <span>No precise location data</span>\n  </div>\n}\n", styles: [":host{display:block;height:100%;position:relative;width:100%}.no-location{background-color:#0000004d;left:0;height:100%;position:absolute;top:0;width:100%;z-index:9}.no-location>span{display:inline-block;margin-top:12%}\n"] }]
         }], ctorParameters: () => [], propDecorators: { map: [{ type: i0.ViewChild, args: [i0.forwardRef(() => GoogleMap), { isSignal: true }] }], loadPolygons: [{ type: i0.Input, args: [{ isSignal: true, alias: "loadPolygons", required: false }] }], sites: [{ type: i0.Input, args: [{ isSignal: true, alias: "sites", required: false }] }], zoom: [{ type: i0.Input, args: [{ isSignal: true, alias: "zoom", required: false }] }], showNotice: [{ type: i0.Input, args: [{ isSignal: true, alias: "showNotice", required: false }] }] } });
 
+/**
+ * The distribution behind an `is outside confidence interval` warning, shown on demand.
+ *
+ * The chart cannot be part of the error message itself: the catalog is framework-agnostic and its
+ * output is injected with `[innerHTML]`, which Angular sanitizes — canvas and inline SVG are
+ * stripped. So the message stays text and this sits beside it.
+ */
+class FilesErrorDistributionComponent {
+    constructor() {
+        this.error = input(...(ngDevMode ? [undefined, { debugName: "error" }] : []));
+        this.params = computed(() => this.error()?.params, ...(ngDevMode ? [{ debugName: "params" }] : []));
+        /**
+         * `mu`/`sd` are only sent by the validation service from `@hestia-earth/data-validation` 0.41.1
+         * on. Older warnings carry `min`/`max` alone, which cannot reconstruct the curve — `min` is
+         * clamped at 0 — so the button is hidden rather than opening onto a wrong distribution.
+         */
+        this.available = computed(() => Number.isFinite(this.params()?.mu) && Number.isFinite(this.params()?.sd) && this.params()?.sd > 0, ...(ngDevMode ? [{ debugName: "available" }] : []));
+        /** What was checked: the grouped input key where there is one, else the term itself. */
+        this.label = computed(() => this.params()?.group || this.params()?.term?.name, ...(ngDevMode ? [{ debugName: "label" }] : []));
+        this.country = computed(() => this.params()?.country?.name, ...(ngDevMode ? [{ debugName: "country" }] : []));
+        /**
+         * The reported value to mark. `outliers` holds every value that fell outside for this field —
+         * in practice one, since each warning is raised per value.
+         */
+        this.value = computed(() => this.params()?.outliers?.[0], ...(ngDevMode ? [{ debugName: "value" }] : []));
+        /** `threshold` is the share of the data the shaded interval covers, e.g. `0.95` → `95%`. */
+        this.thresholdPercent = computed(() => Number.isFinite(this.params()?.threshold) ? this.params().threshold * 100 : null, ...(ngDevMode ? [{ debugName: "thresholdPercent" }] : []));
+        this.isPrior = computed(() => this.params()?.source === 'prior', ...(ngDevMode ? [{ debugName: "isPrior" }] : []));
+        /**
+         * The warning is always raised on an Input or Product `value` — a physical amount, which cannot
+         * be negative however far the fitted normal's left tail reaches. The validation service clamps
+         * `min` at 0 for the same reason.
+         */
+        this.minX = 0;
+        /**
+         * The popover body is the platform's dark blue (`$blue`), so the axis has to be drawn light on
+         * it. The chart's own colours are background-agnostic; only the axis needs saying.
+         */
+        this.chartConfig = {
+            options: {
+                scales: {
+                    x: {
+                        ticks: { color: '#fff' },
+                        title: { color: '#fff' },
+                        grid: { color: 'rgba(255, 255, 255, 0.15)' },
+                        border: { color: 'rgba(255, 255, 255, 0.3)' }
+                    }
+                }
+            }
+        };
+    }
+    get hidden() {
+        return !this.available();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: FilesErrorDistributionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: FilesErrorDistributionComponent, isStandalone: true, selector: "he-files-error-distribution", inputs: { error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.is-none": "this.hidden" } }, ngImport: i0, template: "@if (available()) {\n  <a\n    class=\"is-nowrap\"\n    [ngbPopover]=\"distributionPopover\"\n    [popoverTitle]=\"'Distribution for ' + label()\"\n    triggers=\"click\"\n    autoClose=\"outside\"\n    placement=\"bottom auto\"\n    popoverClass=\"he-distribution-popover\"\n    container=\"body\">\n    <he-svg-icon name=\"chart\" size=\"24\" />\n    <span class=\"is-pl-2\">Show distribution</span>\n  </a>\n}\n\n<ng-template #distributionPopover>\n  <div>\n    <he-distribution-chart\n      [mu]=\"params().mu\"\n      [sd]=\"params().sd\"\n      [intervalMin]=\"params().min\"\n      [intervalMax]=\"params().max\"\n      [value]=\"value()\"\n      [label]=\"label()\"\n      [minX]=\"minX\"\n      [config]=\"chartConfig\" />\n\n    <p class=\"is-size-7\">\n      How common each value of\n      <b>{{ label() }}</b>\n      is\n      @if (country()) {\n        in\n        <b>{{ country() }}</b>\n      }\n      on the HESTIA platform: the taller the curve, the more common the value. It peaks at the average,\n      <b>{{ params().mu | precision }}</b>\n      <span>.</span>\n    </p>\n\n    <p class=\"is-size-7 is-mt-2\">\n      The shaded band is the\n      @if (thresholdPercent()) {\n        {{ thresholdPercent() }}%\n      }\n      confidence interval, from\n      <b>{{ params().min | precision }}</b>\n      to\n      <b>{{ params().max | precision }}</b>\n      <span>. The orange line marks your value.</span>\n    </p>\n\n    @if (isPrior()) {\n      <p class=\"is-size-7 is-mt-2\">\n        This is the FAOSTAT prior (national average), not HESTIA Cycle data for this product, so it is weak evidence.\n      </p>\n    }\n  </div>\n</ng-template>\n", styles: [":host{display:flex;flex-grow:0}::ng-deep .he-distribution-popover .popover-body{width:320px;max-width:100%}::ng-deep .he-distribution-popover he-distribution-chart{display:block;height:200px}\n"], dependencies: [{ kind: "ngmodule", type: NgbPopoverModule }, { kind: "directive", type: i1$1.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: HESvgIconComponent, selector: "he-svg-icon", inputs: ["name", "size", "animation"] }, { kind: "component", type: DistributionChartComponent, selector: "he-distribution-chart", inputs: ["distribution", "value", "label", "nbBins", "maxPercentile", "config", "mu", "sd", "intervalMin", "intervalMax", "minX"], exportAs: ["distributionChart"] }, { kind: "pipe", type: PrecisionPipe, name: "precision" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: FilesErrorDistributionComponent, decorators: [{
+            type: Component$1,
+            args: [{ selector: 'he-files-error-distribution', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgbPopoverModule, HESvgIconComponent, DistributionChartComponent, PrecisionPipe], template: "@if (available()) {\n  <a\n    class=\"is-nowrap\"\n    [ngbPopover]=\"distributionPopover\"\n    [popoverTitle]=\"'Distribution for ' + label()\"\n    triggers=\"click\"\n    autoClose=\"outside\"\n    placement=\"bottom auto\"\n    popoverClass=\"he-distribution-popover\"\n    container=\"body\">\n    <he-svg-icon name=\"chart\" size=\"24\" />\n    <span class=\"is-pl-2\">Show distribution</span>\n  </a>\n}\n\n<ng-template #distributionPopover>\n  <div>\n    <he-distribution-chart\n      [mu]=\"params().mu\"\n      [sd]=\"params().sd\"\n      [intervalMin]=\"params().min\"\n      [intervalMax]=\"params().max\"\n      [value]=\"value()\"\n      [label]=\"label()\"\n      [minX]=\"minX\"\n      [config]=\"chartConfig\" />\n\n    <p class=\"is-size-7\">\n      How common each value of\n      <b>{{ label() }}</b>\n      is\n      @if (country()) {\n        in\n        <b>{{ country() }}</b>\n      }\n      on the HESTIA platform: the taller the curve, the more common the value. It peaks at the average,\n      <b>{{ params().mu | precision }}</b>\n      <span>.</span>\n    </p>\n\n    <p class=\"is-size-7 is-mt-2\">\n      The shaded band is the\n      @if (thresholdPercent()) {\n        {{ thresholdPercent() }}%\n      }\n      confidence interval, from\n      <b>{{ params().min | precision }}</b>\n      to\n      <b>{{ params().max | precision }}</b>\n      <span>. The orange line marks your value.</span>\n    </p>\n\n    @if (isPrior()) {\n      <p class=\"is-size-7 is-mt-2\">\n        This is the FAOSTAT prior (national average), not HESTIA Cycle data for this product, so it is weak evidence.\n      </p>\n    }\n  </div>\n</ng-template>\n", styles: [":host{display:flex;flex-grow:0}::ng-deep .he-distribution-popover .popover-body{width:320px;max-width:100%}::ng-deep .he-distribution-popover he-distribution-chart{display:block;height:200px}\n"] }]
+        }], propDecorators: { error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], hidden: [{
+                type: HostBinding,
+                args: ['class.is-none']
+            }] } });
+
 const stringify = (value) => JSON.stringify(value);
 const focusFirstGroupError = (element) => {
     const groupError = (element.querySelectorAll('.is-group-error-danger')?.[0] ||
@@ -14331,7 +14923,7 @@ class FilesFormComponent {
         return focusFirstError(this.ref.nativeElement);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: FilesFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: FilesFormComponent, isStandalone: true, selector: "he-files-form", inputs: { isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: true, isRequired: false, transformFunction: null }, node: { classPropertyName: "node", publicName: "node", isSignal: true, isRequired: true, transformFunction: null }, errors: { classPropertyName: "errors", publicName: "errors", isSignal: true, isRequired: false, transformFunction: null }, showNodeLink: { classPropertyName: "showNodeLink", publicName: "showNodeLink", isSignal: true, isRequired: false, transformFunction: null }, errorGuidePrefix: { classPropertyName: "errorGuidePrefix", publicName: "errorGuidePrefix", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { isOpen: "isOpenChange", nodeErorrResolved: "nodeErorrResolved" }, exportAs: ["filesForm"], ngImport: i0, template: "<div class=\"is-flex is-flex-direction-column is-align-items-flex-start is-align-self-stretch | files-form-container\">\n  <div\n    class=\"is-flex is-flex-direction-row is-justify-content-space-between is-align-items-center is-align-self-stretch is-gap-16 px-4 py-2 has-text-secondary | files-form-header\"\n    (click)=\"isOpen.set(!isOpen())\"\n    pointer>\n    <div class=\"is-flex is-gap-8 is-align-items-center\">\n      @if (nodeProperty()) {\n        <he-node-icon class=\"is-flex\" [type]=\"schemaType()\" [size]=\"24\" />\n        <span class=\"has-text-weight-bold has-text-secondary is-size-5\">{{ schemaType() }}</span>\n        @if (nodeProperty().hasError || hasError()) {\n          <he-svg-icon name=\"xmark-circle\" class=\"has-text-danger is-flex is-align-items-center\" />\n          <span class=\"has-text-danger has-text-weight-bold is-italic\">Error</span>\n        } @else if (nodeProperty().hasWarning || hasWarning()) {\n          <he-svg-icon name=\"exclamation-triangle\" class=\"has-text-warning is-flex is-align-items-center\" />\n          <span class=\"has-text-warning has-text-weight-bold is-italic\">Warning</span>\n        }\n      }\n    </div>\n    @if ((showNodeLink() && nodeUrl()) || canOpen()) {\n      <div class=\"is-flex is-flex-direction-row is-align-items-center is-gap-16\">\n        @if (showNodeLink() && nodeUrl()) {\n          <ng-container *ngTemplateOutlet=\"nodeLink; context: { url: nodeUrl(), nodeType: schemaType() }\" />\n        }\n        @if (canOpen()) {\n          <he-svg-icon [name]=\"isOpen() ? 'minus' : 'plus'\" />\n        }\n      </div>\n    }\n  </div>\n\n  <div class=\"is-flex is-flex-direction-column is-align-items-flex-start is-align-self-stretch\">\n    @if (isOpen()) {\n      @if (nodeProperty()?.error) {\n        <ng-container\n          *ngTemplateOutlet=\"\n            propertyError;\n            context: { property: nodeProperty(), classes: 'is-my-1 is-py-1 is-px-3' }\n          \" />\n      }\n    }\n\n    @if (unmatchedErrors().length) {\n      @for (property of unmatchedErrors(); track property.id) {\n        <ng-container *ngTemplateOutlet=\"propertyError; context: { property, classes: 'is-my-1 is-py-1 is-px-3' }\" />\n      }\n    }\n\n    <div class=\"is-flex is-flex-direction-row is-flex-wrap-wrap is-align-self-stretch\">\n      @for (property of properties(); track trackByProperty($index, property)) {\n        <ng-container *ngTemplateOutlet=\"showProperty; context: { $implicit: property }\" />\n      }\n    </div>\n\n    @if (isOpen()) {\n      <ng-container *ngTemplateOutlet=\"propertyMap; context: { $implicit: nodeProperty() }\" />\n    }\n  </div>\n\n  <ng-content />\n</div>\n\n<ng-template #propertyKeyTooltip let-property=\"property\">\n  <markdown [data]=\"property.schema.description\" />\n</ng-template>\n\n<ng-template #propertyKey let-property=\"property\">\n  @if (property.schema?.description) {\n    <span\n      class=\"trigger-popover | property-key\"\n      [ngbTooltip]=\"propertyKeyTooltip\"\n      [tooltipContext]=\"{ property }\"\n      triggers=\"click\"\n      autoClose=\"outside\"\n      tooltipClass=\"property-tooltip\"\n      placement=\"bottom-left auto\"\n      container=\"body\"\n      (click)=\"$event.stopPropagation()\">\n      <span>{{ property.key }}</span>\n    </span>\n  } @else {\n    <span>{{ property.key }}</span>\n  }\n</ng-template>\n\n<ng-template #propertyContent let-property=\"property\">\n  <div class=\"is-flex is-align-items-center is-flex-wrap-wrap is-gap-4\">\n    <div class=\"is-flex has-text-secondary\">\n      <ng-container *ngTemplateOutlet=\"propertyKey; context: { property }\" />\n      <span>:</span>\n    </div>\n\n    @if (property.isCollapsible && property.showMaxLength) {\n      <span class=\"is-flex is-size-7 | property-value\">\n        {{ property.value | ellipsis: property.showMaxLength }}\n      </span>\n\n      <a class=\"is-flex is-size-7\" (click)=\"property.showMaxLength = 0\">Show more</a>\n    } @else {\n      <span class=\"is-flex is-size-7 | property-value\">\n        {{ property.value }}\n      </span>\n    }\n\n    @if (property.schema?.internal && property.key !== 'originalId') {\n      <div class=\"property-internal\" ngbTooltip=\"This value is auto-generated.\">\n        <he-svg-icon name=\"autogenerate-circle\" />\n      </div>\n    }\n\n    <div class=\"copy-button\">\n      <he-clipboard [value]=\"property.value\" [hideText]=\"true\" />\n    </div>\n  </div>\n\n  <div class=\"is-flex is-gap-8\">\n    @if (property.externalUrl?.url) {\n      <a\n        [href]=\"property.externalUrl.url + (property.externalUrl.urlParamValue ? property.value : '')\"\n        target=\"_blank\"\n        [title]=\"property.externalUrl.title\"\n        class=\"ml-2\"\n        [ngClass]=\"{ 'is-info': property.key === 'type' }\"\n        [attr.disabled]=\"property.externalUrl.urlParamValue && !property.value ? true : null\">\n        <he-svg-icon [name]=\"property.externalUrl.icon || 'external-link'\" />\n      </a>\n    }\n  </div>\n</ng-template>\n\n<ng-template #showProperty let-property>\n  @if ((isOpen() || property.closedVisible) && !property.isHidden) {\n    @if (property.properties.length) {\n      <div class=\"is-flex is-flex-direction-column is-flex-wrap-wrap w-100 | properties-container\">\n        <div\n          class=\"is-flex is-flex-direction-row is-justify-content-space-between is-gap-4 has-text-secondary w-100 | properties-container--title\"\n          (click)=\"property.isOpen = !property.isOpen\"\n          pointer\n          [class.is-open]=\"property.isOpen\"\n          [class.is-group-error-danger]=\"property.hasError\"\n          [class.is-group-error-warning]=\"!property.hasError && property.hasWarning\">\n          <div class=\"is-flex is-gap-8 has-text-weight-bold\">\n            <!-- @if (property.schemaType === SchemaType.Term) {\n              <he-node-icon [type]=\"property.schemaType\" />\n            } -->\n            <ng-container *ngTemplateOutlet=\"propertyKey; context: { property }\" />\n          </div>\n          <he-svg-icon [name]=\"property.isOpen ? 'minus' : 'plus'\" />\n        </div>\n        @if (property.isOpen) {\n          @if (property.error) {\n            <ng-container *ngTemplateOutlet=\"propertyError; context: { property, classes: 'is-my-1 is-px-3' }\" />\n          }\n          @if (property.isArray) {\n            <div class=\"py-2 px-3 w-100\">\n              @if (property.hasError) {\n                <div class=\"is-flex is-align-items-center is-size-7 is-italic is-mb-2 has-text-warning\">\n                  <he-svg-icon name=\"exclamation-triangle\" />\n                  @if (showAllErrors()) {\n                    <a class=\"is-pl-2\" (click)=\"showAllErrors.set(false)\">Only show items in error.</a>\n                  } @else {\n                    <span class=\"is-pl-2\">Only showing items in error.</span>\n                    <a class=\"is-pl-1\" (click)=\"showAllErrors.set(true)\">Show all items</a>\n                  }\n                </div>\n              }\n\n              @for (prop2 of property.properties; track trackByProperty($index, prop2)) {\n                @if (prop2.key && (showAllErrors() || !property.hasError || prop2.hasError)) {\n                  <div class=\"pt-2 my-4 | property-array-container\" [id]=\"prop2.fullKey + '_' + prop2.id\">\n                    <div class=\"ml-2 is-mb-2 | property-array-number\">\n                      <span class=\"has-text-info is-px-1 | number-tag\">{{ prop2.key }}</span>\n                    </div>\n                    @if (prop2.error) {\n                      <ng-container\n                        *ngTemplateOutlet=\"propertyError; context: { property: prop2, classes: 'is-py-1 is-px-3' }\" />\n                    }\n                    <div class=\"p-3\">\n                      <div class=\"is-flex is-flex-direction-row is-flex-wrap-wrap is-align-self-stretch\">\n                        @for (prop3 of prop2.properties; track trackByProperty($index, prop3)) {\n                          <ng-container *ngTemplateOutlet=\"showProperty; context: { $implicit: prop3 }\" />\n                        }\n                      </div>\n                    </div>\n                  </div>\n                }\n              }\n            </div>\n          } @else {\n            <div class=\"is-flex is-flex-direction-row is-flex-wrap-wrap is-align-self-stretch\">\n              @for (prop2 of property.properties; track trackByProperty($index, prop2)) {\n                <ng-container *ngTemplateOutlet=\"showProperty; context: { $implicit: prop2 }\" />\n              }\n            </div>\n          }\n        }\n      </div>\n    } @else {\n      <div\n        class=\"is-flex is-flex-direction-column is-gap-4 | property-container\"\n        [class.is-error-danger]=\"property.hasError\"\n        [class.is-error-warning]=\"!property.hasError && property.hasWarning\">\n        <div\n          class=\"is-flex is-flex-direction-row is-align-items-center is-justify-content-space-between is-gap-4 | field-container\">\n          @if (property.key) {\n            <ng-container *ngTemplateOutlet=\"propertyContent; context: { property }\" />\n          }\n        </div>\n        @if (property.hasError || property.hasWarning) {\n          <ng-container *ngTemplateOutlet=\"propertyError; context: { property }\" />\n        }\n      </div>\n    }\n  }\n</ng-template>\n\n<ng-template #propertyError let-property=\"property\" let-classes=\"classes\">\n  @if (property.error?.message) {\n    <div\n      class=\"is-flex is-flex-direction-row is-gap-8 is-size-6 is-m-0 w-100 has-text-grey {{ classes }} | property-error\"\n      [class.is-error-danger]=\"property.hasError\"\n      [class.is-error-warning]=\"!property.hasError && property.hasWarning\">\n      @if (property.hasError) {\n        <he-svg-icon name=\"xmark-circle\" size=\"24\" class=\"has-text-danger is-flex-grow-0\" />\n      } @else {\n        <he-svg-icon name=\"exclamation-triangle\" size=\"24\" class=\"has-text-warning is-flex-grow-0\" />\n      }\n\n      <div class=\"is-flex is-flex-grow-1\">\n        <span [innerHTML]=\"property.error.message\"></span>\n      </div>\n\n      @if (errorGuidePrefix() && property.errorGuidePageId) {\n        <he-guide-overlay class=\"is-flex-grow-0\" [pageId]=\"errorGuidePrefix() + property.errorGuidePageId\" />\n      }\n\n      @if (property.error.index >= 0) {\n        @if (property.hasWarning) {\n          <a (click)=\"resolveError(property)\">\n            <he-svg-icon name=\"checkmark\" />\n            <span class=\"is-pl-2\">Resolved</span>\n          </a>\n        }\n      }\n    </div>\n  }\n</ng-template>\n\n<ng-template #propertyMap let-property>\n  @if (showMap()) {\n    <div class=\"is-flex is-flex-direction-column is-flex-wrap-wrap w-100 | properties-container\">\n      <div\n        class=\"is-flex is-flex-direction-row is-justify-content-space-between is-gap-4 w-100 | properties-container--title\"\n        (click)=\"mapVisible.set(!mapVisible())\"\n        pointer\n        [class.is-open]=\"mapVisible()\">\n        <span class=\"is-size-6\">View on Map</span>\n        <he-svg-icon [name]=\"mapVisible() ? 'minus' : 'plus'\" />\n      </div>\n      @if (mapVisible()) {\n        <he-sites-maps [sites]=\"[node()]\" [showNotice]=\"false\" />\n      }\n    </div>\n  }\n</ng-template>\n\n<ng-template #nodeLink let-url=\"url\" let-nodeType=\"nodeType\">\n  <a class=\"external-link\" [href]=\"url\" target=\"_blank\" (click)=\"$event.stopPropagation()\">\n    <span class=\"is-hidden-mobile\">View</span>\n    <span class=\"is-hidden-mobile is-pl-1\">{{ nodeType }}</span>\n    <he-svg-icon name=\"external-link\" class=\"ml-2\" />\n  </a>\n</ng-template>\n", styles: [".notification{color:#0a0a0a!important}.notification.is-success{background-color:#d5f3d8}.notification.is-success *:not(.button):not(.icon):not(.dropdown-item)>fa-icon,.notification.is-success>fa-icon,.notification.is-success *:not(.button):not(.icon):not(.dropdown-item)>he-svg-icon,.notification.is-success>he-svg-icon{color:#2b8434}.notification.is-info{background-color:#d3ebed}.notification.is-info *:not(.button):not(.icon):not(.dropdown-item)>fa-icon,.notification.is-info>fa-icon,.notification.is-info *:not(.button):not(.icon):not(.dropdown-item)>he-svg-icon,.notification.is-info>he-svg-icon{color:#249da5}.notification.is-warning{background-color:#ffdec0}.notification.is-warning *:not(.button):not(.icon):not(.dropdown-item)>fa-icon,.notification.is-warning>fa-icon,.notification.is-warning *:not(.button):not(.icon):not(.dropdown-item)>he-svg-icon,.notification.is-warning>he-svg-icon{color:#ff881b}.notification.is-danger{background-color:#ffcdd0}.notification.is-danger *:not(.button):not(.icon):not(.dropdown-item)>fa-icon,.notification.is-danger>fa-icon,.notification.is-danger *:not(.button):not(.icon):not(.dropdown-item)>he-svg-icon,.notification.is-danger>he-svg-icon{color:#ff3844}he-sites-maps{height:200px}.external-link{color:#4c7194}.files-form-container{box-shadow:2px 2px 4px #00000029;background-color:#fff}.files-form-header{padding:10px 12px;background-color:#dbe3ea;border-top-left-radius:3px;border-top-right-radius:3px}.properties-container--title,.property-container{padding:6px 12px}.property-container{flex:none;flex-grow:1;min-width:50%;max-width:100%;border:1px solid #f5f5f5}.property-container.is-error-danger{border-color:#ff3844}.property-container.is-error-warning{border-color:#ff881b}.properties-container--title{border-top:1px solid #dbe3ea;border-bottom:1px solid #dbe3ea;background:#f5f7f9}.properties-container .properties-container{border-radius:6px;border:1px solid #dbe3ea;margin:4px 0}.properties-container .properties-container--title{border-top:none}.property-internal{color:#249da5}.property-key,.property-value{word-break:break-word}.property-array-container{border-radius:6px;border:1px solid #dbdbdb}.number-tag{border:1px solid #249da5;border-radius:50%}.copy-button{visibility:hidden}.field-container:hover .copy-button{visibility:visible}.is-group-error-danger{background-color:#ffcdd0}.is-group-error-warning{background-color:#ffdec0}.property-error.is-error-danger{background-color:#ffeced}.field-container+.property-error.is-error-danger{background-color:transparent;color:#ff3844!important}.property-error.is-error-warning{background-color:#fff5ec}.field-container+.property-error.is-error-warning{background-color:transparent;color:#ff881b!important}::ng-deep .property-tooltip{background-color:#fff;color:#0a0a0a;border:1px solid #dbdbdb;z-index:11;max-width:50vw;max-height:50vh;overflow:auto}::ng-deep .property-tooltip pre{white-space:pre-wrap}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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: "directive", type: NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "component", type: NodeIconComponent, selector: "he-node-icon", inputs: ["type", "size"] }, { kind: "component", type: SitesMapsComponent, selector: "he-sites-maps", inputs: ["loadPolygons", "sites", "zoom", "showNotice"] }, { kind: "component", type: HESvgIconComponent, selector: "he-svg-icon", inputs: ["name", "size", "animation"] }, { kind: "component", type: ClipboardComponent, selector: "he-clipboard", inputs: ["icon", "value", "disabled", "hideText", "hideIcon", "size", "clipboardClass", "tooltipPlacement"] }, { kind: "component", type: GuideOverlayComponent, selector: "he-guide-overlay", inputs: ["pageId", "width", "height", "positions"], outputs: ["widthChange", "heightChange"] }, { kind: "pipe", type: EllipsisPipe, name: "ellipsis" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: FilesFormComponent, isStandalone: true, selector: "he-files-form", inputs: { isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: true, isRequired: false, transformFunction: null }, node: { classPropertyName: "node", publicName: "node", isSignal: true, isRequired: true, transformFunction: null }, errors: { classPropertyName: "errors", publicName: "errors", isSignal: true, isRequired: false, transformFunction: null }, showNodeLink: { classPropertyName: "showNodeLink", publicName: "showNodeLink", isSignal: true, isRequired: false, transformFunction: null }, errorGuidePrefix: { classPropertyName: "errorGuidePrefix", publicName: "errorGuidePrefix", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { isOpen: "isOpenChange", nodeErorrResolved: "nodeErorrResolved" }, exportAs: ["filesForm"], ngImport: i0, template: "<div class=\"is-flex is-flex-direction-column is-align-items-flex-start is-align-self-stretch | files-form-container\">\n  <div\n    class=\"is-flex is-flex-direction-row is-justify-content-space-between is-align-items-center is-align-self-stretch is-gap-16 px-4 py-2 has-text-secondary | files-form-header\"\n    (click)=\"isOpen.set(!isOpen())\"\n    pointer>\n    <div class=\"is-flex is-gap-8 is-align-items-center\">\n      @if (nodeProperty()) {\n        <he-node-icon class=\"is-flex\" [type]=\"schemaType()\" [size]=\"24\" />\n        <span class=\"has-text-weight-bold has-text-secondary is-size-5\">{{ schemaType() }}</span>\n        @if (nodeProperty().hasError || hasError()) {\n          <he-svg-icon name=\"xmark-circle\" class=\"has-text-danger is-flex is-align-items-center\" />\n          <span class=\"has-text-danger has-text-weight-bold is-italic\">Error</span>\n        } @else if (nodeProperty().hasWarning || hasWarning()) {\n          <he-svg-icon name=\"exclamation-triangle\" class=\"has-text-warning is-flex is-align-items-center\" />\n          <span class=\"has-text-warning has-text-weight-bold is-italic\">Warning</span>\n        }\n      }\n    </div>\n    @if ((showNodeLink() && nodeUrl()) || canOpen()) {\n      <div class=\"is-flex is-flex-direction-row is-align-items-center is-gap-16\">\n        @if (showNodeLink() && nodeUrl()) {\n          <ng-container *ngTemplateOutlet=\"nodeLink; context: { url: nodeUrl(), nodeType: schemaType() }\" />\n        }\n        @if (canOpen()) {\n          <he-svg-icon [name]=\"isOpen() ? 'minus' : 'plus'\" />\n        }\n      </div>\n    }\n  </div>\n\n  <div class=\"is-flex is-flex-direction-column is-align-items-flex-start is-align-self-stretch\">\n    @if (isOpen()) {\n      @if (nodeProperty()?.error) {\n        <ng-container\n          *ngTemplateOutlet=\"\n            propertyError;\n            context: { property: nodeProperty(), classes: 'is-my-1 is-py-1 is-px-3' }\n          \" />\n      }\n    }\n\n    @if (unmatchedErrors().length) {\n      @for (property of unmatchedErrors(); track property.id) {\n        <ng-container *ngTemplateOutlet=\"propertyError; context: { property, classes: 'is-my-1 is-py-1 is-px-3' }\" />\n      }\n    }\n\n    <div class=\"is-flex is-flex-direction-row is-flex-wrap-wrap is-align-self-stretch\">\n      @for (property of properties(); track trackByProperty($index, property)) {\n        <ng-container *ngTemplateOutlet=\"showProperty; context: { $implicit: property }\" />\n      }\n    </div>\n\n    @if (isOpen()) {\n      <ng-container *ngTemplateOutlet=\"propertyMap; context: { $implicit: nodeProperty() }\" />\n    }\n  </div>\n\n  <ng-content />\n</div>\n\n<ng-template #propertyKeyTooltip let-property=\"property\">\n  <markdown [data]=\"property.schema.description\" />\n</ng-template>\n\n<ng-template #propertyKey let-property=\"property\">\n  @if (property.schema?.description) {\n    <span\n      class=\"trigger-popover | property-key\"\n      [ngbTooltip]=\"propertyKeyTooltip\"\n      [tooltipContext]=\"{ property }\"\n      triggers=\"click\"\n      autoClose=\"outside\"\n      tooltipClass=\"property-tooltip\"\n      placement=\"bottom-left auto\"\n      container=\"body\"\n      (click)=\"$event.stopPropagation()\">\n      <span>{{ property.key }}</span>\n    </span>\n  } @else {\n    <span>{{ property.key }}</span>\n  }\n</ng-template>\n\n<ng-template #propertyContent let-property=\"property\">\n  <div class=\"is-flex is-align-items-center is-flex-wrap-wrap is-gap-4\">\n    <div class=\"is-flex has-text-secondary\">\n      <ng-container *ngTemplateOutlet=\"propertyKey; context: { property }\" />\n      <span>:</span>\n    </div>\n\n    @if (property.isCollapsible && property.showMaxLength) {\n      <span class=\"is-flex is-size-7 | property-value\">\n        {{ property.value | ellipsis: property.showMaxLength }}\n      </span>\n\n      <a class=\"is-flex is-size-7\" (click)=\"property.showMaxLength = 0\">Show more</a>\n    } @else {\n      <span class=\"is-flex is-size-7 | property-value\">\n        {{ property.value }}\n      </span>\n    }\n\n    @if (property.schema?.internal && property.key !== 'originalId') {\n      <div class=\"property-internal\" ngbTooltip=\"This value is auto-generated.\">\n        <he-svg-icon name=\"autogenerate-circle\" />\n      </div>\n    }\n\n    <div class=\"copy-button\">\n      <he-clipboard [value]=\"property.value\" [hideText]=\"true\" />\n    </div>\n  </div>\n\n  <div class=\"is-flex is-gap-8\">\n    @if (property.externalUrl?.url) {\n      <a\n        [href]=\"property.externalUrl.url + (property.externalUrl.urlParamValue ? property.value : '')\"\n        target=\"_blank\"\n        [title]=\"property.externalUrl.title\"\n        class=\"ml-2\"\n        [ngClass]=\"{ 'is-info': property.key === 'type' }\"\n        [attr.disabled]=\"property.externalUrl.urlParamValue && !property.value ? true : null\">\n        <he-svg-icon [name]=\"property.externalUrl.icon || 'external-link'\" />\n      </a>\n    }\n  </div>\n</ng-template>\n\n<ng-template #showProperty let-property>\n  @if ((isOpen() || property.closedVisible) && !property.isHidden) {\n    @if (property.properties.length) {\n      <div class=\"is-flex is-flex-direction-column is-flex-wrap-wrap w-100 | properties-container\">\n        <div\n          class=\"is-flex is-flex-direction-row is-justify-content-space-between is-gap-4 has-text-secondary w-100 | properties-container--title\"\n          (click)=\"property.isOpen = !property.isOpen\"\n          pointer\n          [class.is-open]=\"property.isOpen\"\n          [class.is-group-error-danger]=\"property.hasError\"\n          [class.is-group-error-warning]=\"!property.hasError && property.hasWarning\">\n          <div class=\"is-flex is-gap-8 has-text-weight-bold\">\n            <!-- @if (property.schemaType === SchemaType.Term) {\n              <he-node-icon [type]=\"property.schemaType\" />\n            } -->\n            <ng-container *ngTemplateOutlet=\"propertyKey; context: { property }\" />\n          </div>\n          <he-svg-icon [name]=\"property.isOpen ? 'minus' : 'plus'\" />\n        </div>\n        @if (property.isOpen) {\n          @if (property.error) {\n            <ng-container *ngTemplateOutlet=\"propertyError; context: { property, classes: 'is-my-1 is-px-3' }\" />\n          }\n          @if (property.isArray) {\n            <div class=\"py-2 px-3 w-100\">\n              @if (property.hasError) {\n                <div class=\"is-flex is-align-items-center is-size-7 is-italic is-mb-2 has-text-warning\">\n                  <he-svg-icon name=\"exclamation-triangle\" />\n                  @if (showAllErrors()) {\n                    <a class=\"is-pl-2\" (click)=\"showAllErrors.set(false)\">Only show items in error.</a>\n                  } @else {\n                    <span class=\"is-pl-2\">Only showing items in error.</span>\n                    <a class=\"is-pl-1\" (click)=\"showAllErrors.set(true)\">Show all items</a>\n                  }\n                </div>\n              }\n\n              @for (prop2 of property.properties; track trackByProperty($index, prop2)) {\n                @if (prop2.key && (showAllErrors() || !property.hasError || prop2.hasError)) {\n                  <div class=\"pt-2 my-4 | property-array-container\" [id]=\"prop2.fullKey + '_' + prop2.id\">\n                    <div class=\"ml-2 is-mb-2 | property-array-number\">\n                      <span class=\"has-text-info is-px-1 | number-tag\">{{ prop2.key }}</span>\n                    </div>\n                    @if (prop2.error) {\n                      <ng-container\n                        *ngTemplateOutlet=\"propertyError; context: { property: prop2, classes: 'is-py-1 is-px-3' }\" />\n                    }\n                    <div class=\"p-3\">\n                      <div class=\"is-flex is-flex-direction-row is-flex-wrap-wrap is-align-self-stretch\">\n                        @for (prop3 of prop2.properties; track trackByProperty($index, prop3)) {\n                          <ng-container *ngTemplateOutlet=\"showProperty; context: { $implicit: prop3 }\" />\n                        }\n                      </div>\n                    </div>\n                  </div>\n                }\n              }\n            </div>\n          } @else {\n            <div class=\"is-flex is-flex-direction-row is-flex-wrap-wrap is-align-self-stretch\">\n              @for (prop2 of property.properties; track trackByProperty($index, prop2)) {\n                <ng-container *ngTemplateOutlet=\"showProperty; context: { $implicit: prop2 }\" />\n              }\n            </div>\n          }\n        }\n      </div>\n    } @else {\n      <div\n        class=\"is-flex is-flex-direction-column is-gap-4 | property-container\"\n        [class.is-error-danger]=\"property.hasError\"\n        [class.is-error-warning]=\"!property.hasError && property.hasWarning\">\n        <div\n          class=\"is-flex is-flex-direction-row is-align-items-center is-justify-content-space-between is-gap-4 | field-container\">\n          @if (property.key) {\n            <ng-container *ngTemplateOutlet=\"propertyContent; context: { property }\" />\n          }\n        </div>\n        @if (property.hasError || property.hasWarning) {\n          <ng-container *ngTemplateOutlet=\"propertyError; context: { property }\" />\n        }\n      </div>\n    }\n  }\n</ng-template>\n\n<ng-template #propertyError let-property=\"property\" let-classes=\"classes\">\n  @if (property.error?.message) {\n    <div\n      class=\"is-flex is-flex-direction-row is-gap-8 is-size-6 is-m-0 w-100 has-text-grey {{ classes }} | property-error\"\n      [class.is-error-danger]=\"property.hasError\"\n      [class.is-error-warning]=\"!property.hasError && property.hasWarning\">\n      @if (property.hasError) {\n        <he-svg-icon name=\"xmark-circle\" size=\"24\" class=\"has-text-danger is-flex-grow-0\" />\n      } @else {\n        <he-svg-icon name=\"exclamation-triangle\" size=\"24\" class=\"has-text-warning is-flex-grow-0\" />\n      }\n\n      <div class=\"is-flex is-flex-direction-column is-align-items-start is-flex-grow-1\">\n        <span [innerHTML]=\"property.error.message\"></span>\n        <he-files-error-distribution [error]=\"property.error\" />\n      </div>\n\n      @if (errorGuidePrefix() && property.errorGuidePageId) {\n        <he-guide-overlay class=\"is-flex-grow-0\" [pageId]=\"errorGuidePrefix() + property.errorGuidePageId\" />\n      }\n\n      @if (property.error.index >= 0) {\n        @if (property.hasWarning) {\n          <a (click)=\"resolveError(property)\">\n            <he-svg-icon name=\"checkmark\" />\n            <span class=\"is-pl-2\">Resolved</span>\n          </a>\n        }\n      }\n    </div>\n  }\n</ng-template>\n\n<ng-template #propertyMap let-property>\n  @if (showMap()) {\n    <div class=\"is-flex is-flex-direction-column is-flex-wrap-wrap w-100 | properties-container\">\n      <div\n        class=\"is-flex is-flex-direction-row is-justify-content-space-between is-gap-4 w-100 | properties-container--title\"\n        (click)=\"mapVisible.set(!mapVisible())\"\n        pointer\n        [class.is-open]=\"mapVisible()\">\n        <span class=\"is-size-6\">View on Map</span>\n        <he-svg-icon [name]=\"mapVisible() ? 'minus' : 'plus'\" />\n      </div>\n      @if (mapVisible()) {\n        <he-sites-maps [sites]=\"[node()]\" [showNotice]=\"false\" />\n      }\n    </div>\n  }\n</ng-template>\n\n<ng-template #nodeLink let-url=\"url\" let-nodeType=\"nodeType\">\n  <a class=\"external-link\" [href]=\"url\" target=\"_blank\" (click)=\"$event.stopPropagation()\">\n    <span class=\"is-hidden-mobile\">View</span>\n    <span class=\"is-hidden-mobile is-pl-1\">{{ nodeType }}</span>\n    <he-svg-icon name=\"external-link\" class=\"ml-2\" />\n  </a>\n</ng-template>\n", styles: [".notification{color:#0a0a0a!important}.notification.is-success{background-color:#d5f3d8}.notification.is-success *:not(.button):not(.icon):not(.dropdown-item)>fa-icon,.notification.is-success>fa-icon,.notification.is-success *:not(.button):not(.icon):not(.dropdown-item)>he-svg-icon,.notification.is-success>he-svg-icon{color:#2b8434}.notification.is-info{background-color:#d3ebed}.notification.is-info *:not(.button):not(.icon):not(.dropdown-item)>fa-icon,.notification.is-info>fa-icon,.notification.is-info *:not(.button):not(.icon):not(.dropdown-item)>he-svg-icon,.notification.is-info>he-svg-icon{color:#249da5}.notification.is-warning{background-color:#ffdec0}.notification.is-warning *:not(.button):not(.icon):not(.dropdown-item)>fa-icon,.notification.is-warning>fa-icon,.notification.is-warning *:not(.button):not(.icon):not(.dropdown-item)>he-svg-icon,.notification.is-warning>he-svg-icon{color:#ff881b}.notification.is-danger{background-color:#ffcdd0}.notification.is-danger *:not(.button):not(.icon):not(.dropdown-item)>fa-icon,.notification.is-danger>fa-icon,.notification.is-danger *:not(.button):not(.icon):not(.dropdown-item)>he-svg-icon,.notification.is-danger>he-svg-icon{color:#ff3844}he-sites-maps{height:200px}.external-link{color:#4c7194}.files-form-container{box-shadow:2px 2px 4px #00000029;background-color:#fff}.files-form-header{padding:10px 12px;background-color:#dbe3ea;border-top-left-radius:3px;border-top-right-radius:3px}.properties-container--title,.property-container{padding:6px 12px}.property-container{flex:none;flex-grow:1;min-width:50%;max-width:100%;border:1px solid #f5f5f5}.property-container.is-error-danger{border-color:#ff3844}.property-container.is-error-warning{border-color:#ff881b}.properties-container--title{border-top:1px solid #dbe3ea;border-bottom:1px solid #dbe3ea;background:#f5f7f9}.properties-container .properties-container{border-radius:6px;border:1px solid #dbe3ea;margin:4px 0}.properties-container .properties-container--title{border-top:none}.property-internal{color:#249da5}.property-key,.property-value{word-break:break-word}.property-array-container{border-radius:6px;border:1px solid #dbdbdb}.number-tag{border:1px solid #249da5;border-radius:50%}.copy-button{visibility:hidden}.field-container:hover .copy-button{visibility:visible}.is-group-error-danger{background-color:#ffcdd0}.is-group-error-warning{background-color:#ffdec0}.property-error.is-error-danger{background-color:#ffeced}.field-container+.property-error.is-error-danger{background-color:transparent;color:#ff3844!important}.property-error.is-error-warning{background-color:#fff5ec}.field-container+.property-error.is-error-warning{background-color:transparent;color:#ff881b!important}::ng-deep .property-tooltip{background-color:#fff;color:#0a0a0a;border:1px solid #dbdbdb;z-index:11;max-width:50vw;max-height:50vh;overflow:auto}::ng-deep .property-tooltip pre{white-space:pre-wrap}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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: "directive", type: NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "component", type: NodeIconComponent, selector: "he-node-icon", inputs: ["type", "size"] }, { kind: "component", type: SitesMapsComponent, selector: "he-sites-maps", inputs: ["loadPolygons", "sites", "zoom", "showNotice"] }, { kind: "component", type: HESvgIconComponent, selector: "he-svg-icon", inputs: ["name", "size", "animation"] }, { kind: "component", type: ClipboardComponent, selector: "he-clipboard", inputs: ["icon", "value", "disabled", "hideText", "hideIcon", "size", "clipboardClass", "tooltipPlacement"] }, { kind: "component", type: GuideOverlayComponent, selector: "he-guide-overlay", inputs: ["pageId", "width", "height", "positions"], outputs: ["widthChange", "heightChange"] }, { kind: "component", type: FilesErrorDistributionComponent, selector: "he-files-error-distribution", inputs: ["error"] }, { kind: "pipe", type: EllipsisPipe, name: "ellipsis" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: FilesFormComponent, decorators: [{
             type: Component$1,
@@ -14346,8 +14938,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
                         HESvgIconComponent,
                         ClipboardComponent,
                         GuideOverlayComponent,
+                        FilesErrorDistributionComponent,
                         EllipsisPipe
-                    ], template: "<div class=\"is-flex is-flex-direction-column is-align-items-flex-start is-align-self-stretch | files-form-container\">\n  <div\n    class=\"is-flex is-flex-direction-row is-justify-content-space-between is-align-items-center is-align-self-stretch is-gap-16 px-4 py-2 has-text-secondary | files-form-header\"\n    (click)=\"isOpen.set(!isOpen())\"\n    pointer>\n    <div class=\"is-flex is-gap-8 is-align-items-center\">\n      @if (nodeProperty()) {\n        <he-node-icon class=\"is-flex\" [type]=\"schemaType()\" [size]=\"24\" />\n        <span class=\"has-text-weight-bold has-text-secondary is-size-5\">{{ schemaType() }}</span>\n        @if (nodeProperty().hasError || hasError()) {\n          <he-svg-icon name=\"xmark-circle\" class=\"has-text-danger is-flex is-align-items-center\" />\n          <span class=\"has-text-danger has-text-weight-bold is-italic\">Error</span>\n        } @else if (nodeProperty().hasWarning || hasWarning()) {\n          <he-svg-icon name=\"exclamation-triangle\" class=\"has-text-warning is-flex is-align-items-center\" />\n          <span class=\"has-text-warning has-text-weight-bold is-italic\">Warning</span>\n        }\n      }\n    </div>\n    @if ((showNodeLink() && nodeUrl()) || canOpen()) {\n      <div class=\"is-flex is-flex-direction-row is-align-items-center is-gap-16\">\n        @if (showNodeLink() && nodeUrl()) {\n          <ng-container *ngTemplateOutlet=\"nodeLink; context: { url: nodeUrl(), nodeType: schemaType() }\" />\n        }\n        @if (canOpen()) {\n          <he-svg-icon [name]=\"isOpen() ? 'minus' : 'plus'\" />\n        }\n      </div>\n    }\n  </div>\n\n  <div class=\"is-flex is-flex-direction-column is-align-items-flex-start is-align-self-stretch\">\n    @if (isOpen()) {\n      @if (nodeProperty()?.error) {\n        <ng-container\n          *ngTemplateOutlet=\"\n            propertyError;\n            context: { property: nodeProperty(), classes: 'is-my-1 is-py-1 is-px-3' }\n          \" />\n      }\n    }\n\n    @if (unmatchedErrors().length) {\n      @for (property of unmatchedErrors(); track property.id) {\n        <ng-container *ngTemplateOutlet=\"propertyError; context: { property, classes: 'is-my-1 is-py-1 is-px-3' }\" />\n      }\n    }\n\n    <div class=\"is-flex is-flex-direction-row is-flex-wrap-wrap is-align-self-stretch\">\n      @for (property of properties(); track trackByProperty($index, property)) {\n        <ng-container *ngTemplateOutlet=\"showProperty; context: { $implicit: property }\" />\n      }\n    </div>\n\n    @if (isOpen()) {\n      <ng-container *ngTemplateOutlet=\"propertyMap; context: { $implicit: nodeProperty() }\" />\n    }\n  </div>\n\n  <ng-content />\n</div>\n\n<ng-template #propertyKeyTooltip let-property=\"property\">\n  <markdown [data]=\"property.schema.description\" />\n</ng-template>\n\n<ng-template #propertyKey let-property=\"property\">\n  @if (property.schema?.description) {\n    <span\n      class=\"trigger-popover | property-key\"\n      [ngbTooltip]=\"propertyKeyTooltip\"\n      [tooltipContext]=\"{ property }\"\n      triggers=\"click\"\n      autoClose=\"outside\"\n      tooltipClass=\"property-tooltip\"\n      placement=\"bottom-left auto\"\n      container=\"body\"\n      (click)=\"$event.stopPropagation()\">\n      <span>{{ property.key }}</span>\n    </span>\n  } @else {\n    <span>{{ property.key }}</span>\n  }\n</ng-template>\n\n<ng-template #propertyContent let-property=\"property\">\n  <div class=\"is-flex is-align-items-center is-flex-wrap-wrap is-gap-4\">\n    <div class=\"is-flex has-text-secondary\">\n      <ng-container *ngTemplateOutlet=\"propertyKey; context: { property }\" />\n      <span>:</span>\n    </div>\n\n    @if (property.isCollapsible && property.showMaxLength) {\n      <span class=\"is-flex is-size-7 | property-value\">\n        {{ property.value | ellipsis: property.showMaxLength }}\n      </span>\n\n      <a class=\"is-flex is-size-7\" (click)=\"property.showMaxLength = 0\">Show more</a>\n    } @else {\n      <span class=\"is-flex is-size-7 | property-value\">\n        {{ property.value }}\n      </span>\n    }\n\n    @if (property.schema?.internal && property.key !== 'originalId') {\n      <div class=\"property-internal\" ngbTooltip=\"This value is auto-generated.\">\n        <he-svg-icon name=\"autogenerate-circle\" />\n      </div>\n    }\n\n    <div class=\"copy-button\">\n      <he-clipboard [value]=\"property.value\" [hideText]=\"true\" />\n    </div>\n  </div>\n\n  <div class=\"is-flex is-gap-8\">\n    @if (property.externalUrl?.url) {\n      <a\n        [href]=\"property.externalUrl.url + (property.externalUrl.urlParamValue ? property.value : '')\"\n        target=\"_blank\"\n        [title]=\"property.externalUrl.title\"\n        class=\"ml-2\"\n        [ngClass]=\"{ 'is-info': property.key === 'type' }\"\n        [attr.disabled]=\"property.externalUrl.urlParamValue && !property.value ? true : null\">\n        <he-svg-icon [name]=\"property.externalUrl.icon || 'external-link'\" />\n      </a>\n    }\n  </div>\n</ng-template>\n\n<ng-template #showProperty let-property>\n  @if ((isOpen() || property.closedVisible) && !property.isHidden) {\n    @if (property.properties.length) {\n      <div class=\"is-flex is-flex-direction-column is-flex-wrap-wrap w-100 | properties-container\">\n        <div\n          class=\"is-flex is-flex-direction-row is-justify-content-space-between is-gap-4 has-text-secondary w-100 | properties-container--title\"\n          (click)=\"property.isOpen = !property.isOpen\"\n          pointer\n          [class.is-open]=\"property.isOpen\"\n          [class.is-group-error-danger]=\"property.hasError\"\n          [class.is-group-error-warning]=\"!property.hasError && property.hasWarning\">\n          <div class=\"is-flex is-gap-8 has-text-weight-bold\">\n            <!-- @if (property.schemaType === SchemaType.Term) {\n              <he-node-icon [type]=\"property.schemaType\" />\n            } -->\n            <ng-container *ngTemplateOutlet=\"propertyKey; context: { property }\" />\n          </div>\n          <he-svg-icon [name]=\"property.isOpen ? 'minus' : 'plus'\" />\n        </div>\n        @if (property.isOpen) {\n          @if (property.error) {\n            <ng-container *ngTemplateOutlet=\"propertyError; context: { property, classes: 'is-my-1 is-px-3' }\" />\n          }\n          @if (property.isArray) {\n            <div class=\"py-2 px-3 w-100\">\n              @if (property.hasError) {\n                <div class=\"is-flex is-align-items-center is-size-7 is-italic is-mb-2 has-text-warning\">\n                  <he-svg-icon name=\"exclamation-triangle\" />\n                  @if (showAllErrors()) {\n                    <a class=\"is-pl-2\" (click)=\"showAllErrors.set(false)\">Only show items in error.</a>\n                  } @else {\n                    <span class=\"is-pl-2\">Only showing items in error.</span>\n                    <a class=\"is-pl-1\" (click)=\"showAllErrors.set(true)\">Show all items</a>\n                  }\n                </div>\n              }\n\n              @for (prop2 of property.properties; track trackByProperty($index, prop2)) {\n                @if (prop2.key && (showAllErrors() || !property.hasError || prop2.hasError)) {\n                  <div class=\"pt-2 my-4 | property-array-container\" [id]=\"prop2.fullKey + '_' + prop2.id\">\n                    <div class=\"ml-2 is-mb-2 | property-array-number\">\n                      <span class=\"has-text-info is-px-1 | number-tag\">{{ prop2.key }}</span>\n                    </div>\n                    @if (prop2.error) {\n                      <ng-container\n                        *ngTemplateOutlet=\"propertyError; context: { property: prop2, classes: 'is-py-1 is-px-3' }\" />\n                    }\n                    <div class=\"p-3\">\n                      <div class=\"is-flex is-flex-direction-row is-flex-wrap-wrap is-align-self-stretch\">\n                        @for (prop3 of prop2.properties; track trackByProperty($index, prop3)) {\n                          <ng-container *ngTemplateOutlet=\"showProperty; context: { $implicit: prop3 }\" />\n                        }\n                      </div>\n                    </div>\n                  </div>\n                }\n              }\n            </div>\n          } @else {\n            <div class=\"is-flex is-flex-direction-row is-flex-wrap-wrap is-align-self-stretch\">\n              @for (prop2 of property.properties; track trackByProperty($index, prop2)) {\n                <ng-container *ngTemplateOutlet=\"showProperty; context: { $implicit: prop2 }\" />\n              }\n            </div>\n          }\n        }\n      </div>\n    } @else {\n      <div\n        class=\"is-flex is-flex-direction-column is-gap-4 | property-container\"\n        [class.is-error-danger]=\"property.hasError\"\n        [class.is-error-warning]=\"!property.hasError && property.hasWarning\">\n        <div\n          class=\"is-flex is-flex-direction-row is-align-items-center is-justify-content-space-between is-gap-4 | field-container\">\n          @if (property.key) {\n            <ng-container *ngTemplateOutlet=\"propertyContent; context: { property }\" />\n          }\n        </div>\n        @if (property.hasError || property.hasWarning) {\n          <ng-container *ngTemplateOutlet=\"propertyError; context: { property }\" />\n        }\n      </div>\n    }\n  }\n</ng-template>\n\n<ng-template #propertyError let-property=\"property\" let-classes=\"classes\">\n  @if (property.error?.message) {\n    <div\n      class=\"is-flex is-flex-direction-row is-gap-8 is-size-6 is-m-0 w-100 has-text-grey {{ classes }} | property-error\"\n      [class.is-error-danger]=\"property.hasError\"\n      [class.is-error-warning]=\"!property.hasError && property.hasWarning\">\n      @if (property.hasError) {\n        <he-svg-icon name=\"xmark-circle\" size=\"24\" class=\"has-text-danger is-flex-grow-0\" />\n      } @else {\n        <he-svg-icon name=\"exclamation-triangle\" size=\"24\" class=\"has-text-warning is-flex-grow-0\" />\n      }\n\n      <div class=\"is-flex is-flex-grow-1\">\n        <span [innerHTML]=\"property.error.message\"></span>\n      </div>\n\n      @if (errorGuidePrefix() && property.errorGuidePageId) {\n        <he-guide-overlay class=\"is-flex-grow-0\" [pageId]=\"errorGuidePrefix() + property.errorGuidePageId\" />\n      }\n\n      @if (property.error.index >= 0) {\n        @if (property.hasWarning) {\n          <a (click)=\"resolveError(property)\">\n            <he-svg-icon name=\"checkmark\" />\n            <span class=\"is-pl-2\">Resolved</span>\n          </a>\n        }\n      }\n    </div>\n  }\n</ng-template>\n\n<ng-template #propertyMap let-property>\n  @if (showMap()) {\n    <div class=\"is-flex is-flex-direction-column is-flex-wrap-wrap w-100 | properties-container\">\n      <div\n        class=\"is-flex is-flex-direction-row is-justify-content-space-between is-gap-4 w-100 | properties-container--title\"\n        (click)=\"mapVisible.set(!mapVisible())\"\n        pointer\n        [class.is-open]=\"mapVisible()\">\n        <span class=\"is-size-6\">View on Map</span>\n        <he-svg-icon [name]=\"mapVisible() ? 'minus' : 'plus'\" />\n      </div>\n      @if (mapVisible()) {\n        <he-sites-maps [sites]=\"[node()]\" [showNotice]=\"false\" />\n      }\n    </div>\n  }\n</ng-template>\n\n<ng-template #nodeLink let-url=\"url\" let-nodeType=\"nodeType\">\n  <a class=\"external-link\" [href]=\"url\" target=\"_blank\" (click)=\"$event.stopPropagation()\">\n    <span class=\"is-hidden-mobile\">View</span>\n    <span class=\"is-hidden-mobile is-pl-1\">{{ nodeType }}</span>\n    <he-svg-icon name=\"external-link\" class=\"ml-2\" />\n  </a>\n</ng-template>\n", styles: [".notification{color:#0a0a0a!important}.notification.is-success{background-color:#d5f3d8}.notification.is-success *:not(.button):not(.icon):not(.dropdown-item)>fa-icon,.notification.is-success>fa-icon,.notification.is-success *:not(.button):not(.icon):not(.dropdown-item)>he-svg-icon,.notification.is-success>he-svg-icon{color:#2b8434}.notification.is-info{background-color:#d3ebed}.notification.is-info *:not(.button):not(.icon):not(.dropdown-item)>fa-icon,.notification.is-info>fa-icon,.notification.is-info *:not(.button):not(.icon):not(.dropdown-item)>he-svg-icon,.notification.is-info>he-svg-icon{color:#249da5}.notification.is-warning{background-color:#ffdec0}.notification.is-warning *:not(.button):not(.icon):not(.dropdown-item)>fa-icon,.notification.is-warning>fa-icon,.notification.is-warning *:not(.button):not(.icon):not(.dropdown-item)>he-svg-icon,.notification.is-warning>he-svg-icon{color:#ff881b}.notification.is-danger{background-color:#ffcdd0}.notification.is-danger *:not(.button):not(.icon):not(.dropdown-item)>fa-icon,.notification.is-danger>fa-icon,.notification.is-danger *:not(.button):not(.icon):not(.dropdown-item)>he-svg-icon,.notification.is-danger>he-svg-icon{color:#ff3844}he-sites-maps{height:200px}.external-link{color:#4c7194}.files-form-container{box-shadow:2px 2px 4px #00000029;background-color:#fff}.files-form-header{padding:10px 12px;background-color:#dbe3ea;border-top-left-radius:3px;border-top-right-radius:3px}.properties-container--title,.property-container{padding:6px 12px}.property-container{flex:none;flex-grow:1;min-width:50%;max-width:100%;border:1px solid #f5f5f5}.property-container.is-error-danger{border-color:#ff3844}.property-container.is-error-warning{border-color:#ff881b}.properties-container--title{border-top:1px solid #dbe3ea;border-bottom:1px solid #dbe3ea;background:#f5f7f9}.properties-container .properties-container{border-radius:6px;border:1px solid #dbe3ea;margin:4px 0}.properties-container .properties-container--title{border-top:none}.property-internal{color:#249da5}.property-key,.property-value{word-break:break-word}.property-array-container{border-radius:6px;border:1px solid #dbdbdb}.number-tag{border:1px solid #249da5;border-radius:50%}.copy-button{visibility:hidden}.field-container:hover .copy-button{visibility:visible}.is-group-error-danger{background-color:#ffcdd0}.is-group-error-warning{background-color:#ffdec0}.property-error.is-error-danger{background-color:#ffeced}.field-container+.property-error.is-error-danger{background-color:transparent;color:#ff3844!important}.property-error.is-error-warning{background-color:#fff5ec}.field-container+.property-error.is-error-warning{background-color:transparent;color:#ff881b!important}::ng-deep .property-tooltip{background-color:#fff;color:#0a0a0a;border:1px solid #dbdbdb;z-index:11;max-width:50vw;max-height:50vh;overflow:auto}::ng-deep .property-tooltip pre{white-space:pre-wrap}\n"] }]
+                    ], template: "<div class=\"is-flex is-flex-direction-column is-align-items-flex-start is-align-self-stretch | files-form-container\">\n  <div\n    class=\"is-flex is-flex-direction-row is-justify-content-space-between is-align-items-center is-align-self-stretch is-gap-16 px-4 py-2 has-text-secondary | files-form-header\"\n    (click)=\"isOpen.set(!isOpen())\"\n    pointer>\n    <div class=\"is-flex is-gap-8 is-align-items-center\">\n      @if (nodeProperty()) {\n        <he-node-icon class=\"is-flex\" [type]=\"schemaType()\" [size]=\"24\" />\n        <span class=\"has-text-weight-bold has-text-secondary is-size-5\">{{ schemaType() }}</span>\n        @if (nodeProperty().hasError || hasError()) {\n          <he-svg-icon name=\"xmark-circle\" class=\"has-text-danger is-flex is-align-items-center\" />\n          <span class=\"has-text-danger has-text-weight-bold is-italic\">Error</span>\n        } @else if (nodeProperty().hasWarning || hasWarning()) {\n          <he-svg-icon name=\"exclamation-triangle\" class=\"has-text-warning is-flex is-align-items-center\" />\n          <span class=\"has-text-warning has-text-weight-bold is-italic\">Warning</span>\n        }\n      }\n    </div>\n    @if ((showNodeLink() && nodeUrl()) || canOpen()) {\n      <div class=\"is-flex is-flex-direction-row is-align-items-center is-gap-16\">\n        @if (showNodeLink() && nodeUrl()) {\n          <ng-container *ngTemplateOutlet=\"nodeLink; context: { url: nodeUrl(), nodeType: schemaType() }\" />\n        }\n        @if (canOpen()) {\n          <he-svg-icon [name]=\"isOpen() ? 'minus' : 'plus'\" />\n        }\n      </div>\n    }\n  </div>\n\n  <div class=\"is-flex is-flex-direction-column is-align-items-flex-start is-align-self-stretch\">\n    @if (isOpen()) {\n      @if (nodeProperty()?.error) {\n        <ng-container\n          *ngTemplateOutlet=\"\n            propertyError;\n            context: { property: nodeProperty(), classes: 'is-my-1 is-py-1 is-px-3' }\n          \" />\n      }\n    }\n\n    @if (unmatchedErrors().length) {\n      @for (property of unmatchedErrors(); track property.id) {\n        <ng-container *ngTemplateOutlet=\"propertyError; context: { property, classes: 'is-my-1 is-py-1 is-px-3' }\" />\n      }\n    }\n\n    <div class=\"is-flex is-flex-direction-row is-flex-wrap-wrap is-align-self-stretch\">\n      @for (property of properties(); track trackByProperty($index, property)) {\n        <ng-container *ngTemplateOutlet=\"showProperty; context: { $implicit: property }\" />\n      }\n    </div>\n\n    @if (isOpen()) {\n      <ng-container *ngTemplateOutlet=\"propertyMap; context: { $implicit: nodeProperty() }\" />\n    }\n  </div>\n\n  <ng-content />\n</div>\n\n<ng-template #propertyKeyTooltip let-property=\"property\">\n  <markdown [data]=\"property.schema.description\" />\n</ng-template>\n\n<ng-template #propertyKey let-property=\"property\">\n  @if (property.schema?.description) {\n    <span\n      class=\"trigger-popover | property-key\"\n      [ngbTooltip]=\"propertyKeyTooltip\"\n      [tooltipContext]=\"{ property }\"\n      triggers=\"click\"\n      autoClose=\"outside\"\n      tooltipClass=\"property-tooltip\"\n      placement=\"bottom-left auto\"\n      container=\"body\"\n      (click)=\"$event.stopPropagation()\">\n      <span>{{ property.key }}</span>\n    </span>\n  } @else {\n    <span>{{ property.key }}</span>\n  }\n</ng-template>\n\n<ng-template #propertyContent let-property=\"property\">\n  <div class=\"is-flex is-align-items-center is-flex-wrap-wrap is-gap-4\">\n    <div class=\"is-flex has-text-secondary\">\n      <ng-container *ngTemplateOutlet=\"propertyKey; context: { property }\" />\n      <span>:</span>\n    </div>\n\n    @if (property.isCollapsible && property.showMaxLength) {\n      <span class=\"is-flex is-size-7 | property-value\">\n        {{ property.value | ellipsis: property.showMaxLength }}\n      </span>\n\n      <a class=\"is-flex is-size-7\" (click)=\"property.showMaxLength = 0\">Show more</a>\n    } @else {\n      <span class=\"is-flex is-size-7 | property-value\">\n        {{ property.value }}\n      </span>\n    }\n\n    @if (property.schema?.internal && property.key !== 'originalId') {\n      <div class=\"property-internal\" ngbTooltip=\"This value is auto-generated.\">\n        <he-svg-icon name=\"autogenerate-circle\" />\n      </div>\n    }\n\n    <div class=\"copy-button\">\n      <he-clipboard [value]=\"property.value\" [hideText]=\"true\" />\n    </div>\n  </div>\n\n  <div class=\"is-flex is-gap-8\">\n    @if (property.externalUrl?.url) {\n      <a\n        [href]=\"property.externalUrl.url + (property.externalUrl.urlParamValue ? property.value : '')\"\n        target=\"_blank\"\n        [title]=\"property.externalUrl.title\"\n        class=\"ml-2\"\n        [ngClass]=\"{ 'is-info': property.key === 'type' }\"\n        [attr.disabled]=\"property.externalUrl.urlParamValue && !property.value ? true : null\">\n        <he-svg-icon [name]=\"property.externalUrl.icon || 'external-link'\" />\n      </a>\n    }\n  </div>\n</ng-template>\n\n<ng-template #showProperty let-property>\n  @if ((isOpen() || property.closedVisible) && !property.isHidden) {\n    @if (property.properties.length) {\n      <div class=\"is-flex is-flex-direction-column is-flex-wrap-wrap w-100 | properties-container\">\n        <div\n          class=\"is-flex is-flex-direction-row is-justify-content-space-between is-gap-4 has-text-secondary w-100 | properties-container--title\"\n          (click)=\"property.isOpen = !property.isOpen\"\n          pointer\n          [class.is-open]=\"property.isOpen\"\n          [class.is-group-error-danger]=\"property.hasError\"\n          [class.is-group-error-warning]=\"!property.hasError && property.hasWarning\">\n          <div class=\"is-flex is-gap-8 has-text-weight-bold\">\n            <!-- @if (property.schemaType === SchemaType.Term) {\n              <he-node-icon [type]=\"property.schemaType\" />\n            } -->\n            <ng-container *ngTemplateOutlet=\"propertyKey; context: { property }\" />\n          </div>\n          <he-svg-icon [name]=\"property.isOpen ? 'minus' : 'plus'\" />\n        </div>\n        @if (property.isOpen) {\n          @if (property.error) {\n            <ng-container *ngTemplateOutlet=\"propertyError; context: { property, classes: 'is-my-1 is-px-3' }\" />\n          }\n          @if (property.isArray) {\n            <div class=\"py-2 px-3 w-100\">\n              @if (property.hasError) {\n                <div class=\"is-flex is-align-items-center is-size-7 is-italic is-mb-2 has-text-warning\">\n                  <he-svg-icon name=\"exclamation-triangle\" />\n                  @if (showAllErrors()) {\n                    <a class=\"is-pl-2\" (click)=\"showAllErrors.set(false)\">Only show items in error.</a>\n                  } @else {\n                    <span class=\"is-pl-2\">Only showing items in error.</span>\n                    <a class=\"is-pl-1\" (click)=\"showAllErrors.set(true)\">Show all items</a>\n                  }\n                </div>\n              }\n\n              @for (prop2 of property.properties; track trackByProperty($index, prop2)) {\n                @if (prop2.key && (showAllErrors() || !property.hasError || prop2.hasError)) {\n                  <div class=\"pt-2 my-4 | property-array-container\" [id]=\"prop2.fullKey + '_' + prop2.id\">\n                    <div class=\"ml-2 is-mb-2 | property-array-number\">\n                      <span class=\"has-text-info is-px-1 | number-tag\">{{ prop2.key }}</span>\n                    </div>\n                    @if (prop2.error) {\n                      <ng-container\n                        *ngTemplateOutlet=\"propertyError; context: { property: prop2, classes: 'is-py-1 is-px-3' }\" />\n                    }\n                    <div class=\"p-3\">\n                      <div class=\"is-flex is-flex-direction-row is-flex-wrap-wrap is-align-self-stretch\">\n                        @for (prop3 of prop2.properties; track trackByProperty($index, prop3)) {\n                          <ng-container *ngTemplateOutlet=\"showProperty; context: { $implicit: prop3 }\" />\n                        }\n                      </div>\n                    </div>\n                  </div>\n                }\n              }\n            </div>\n          } @else {\n            <div class=\"is-flex is-flex-direction-row is-flex-wrap-wrap is-align-self-stretch\">\n              @for (prop2 of property.properties; track trackByProperty($index, prop2)) {\n                <ng-container *ngTemplateOutlet=\"showProperty; context: { $implicit: prop2 }\" />\n              }\n            </div>\n          }\n        }\n      </div>\n    } @else {\n      <div\n        class=\"is-flex is-flex-direction-column is-gap-4 | property-container\"\n        [class.is-error-danger]=\"property.hasError\"\n        [class.is-error-warning]=\"!property.hasError && property.hasWarning\">\n        <div\n          class=\"is-flex is-flex-direction-row is-align-items-center is-justify-content-space-between is-gap-4 | field-container\">\n          @if (property.key) {\n            <ng-container *ngTemplateOutlet=\"propertyContent; context: { property }\" />\n          }\n        </div>\n        @if (property.hasError || property.hasWarning) {\n          <ng-container *ngTemplateOutlet=\"propertyError; context: { property }\" />\n        }\n      </div>\n    }\n  }\n</ng-template>\n\n<ng-template #propertyError let-property=\"property\" let-classes=\"classes\">\n  @if (property.error?.message) {\n    <div\n      class=\"is-flex is-flex-direction-row is-gap-8 is-size-6 is-m-0 w-100 has-text-grey {{ classes }} | property-error\"\n      [class.is-error-danger]=\"property.hasError\"\n      [class.is-error-warning]=\"!property.hasError && property.hasWarning\">\n      @if (property.hasError) {\n        <he-svg-icon name=\"xmark-circle\" size=\"24\" class=\"has-text-danger is-flex-grow-0\" />\n      } @else {\n        <he-svg-icon name=\"exclamation-triangle\" size=\"24\" class=\"has-text-warning is-flex-grow-0\" />\n      }\n\n      <div class=\"is-flex is-flex-direction-column is-align-items-start is-flex-grow-1\">\n        <span [innerHTML]=\"property.error.message\"></span>\n        <he-files-error-distribution [error]=\"property.error\" />\n      </div>\n\n      @if (errorGuidePrefix() && property.errorGuidePageId) {\n        <he-guide-overlay class=\"is-flex-grow-0\" [pageId]=\"errorGuidePrefix() + property.errorGuidePageId\" />\n      }\n\n      @if (property.error.index >= 0) {\n        @if (property.hasWarning) {\n          <a (click)=\"resolveError(property)\">\n            <he-svg-icon name=\"checkmark\" />\n            <span class=\"is-pl-2\">Resolved</span>\n          </a>\n        }\n      }\n    </div>\n  }\n</ng-template>\n\n<ng-template #propertyMap let-property>\n  @if (showMap()) {\n    <div class=\"is-flex is-flex-direction-column is-flex-wrap-wrap w-100 | properties-container\">\n      <div\n        class=\"is-flex is-flex-direction-row is-justify-content-space-between is-gap-4 w-100 | properties-container--title\"\n        (click)=\"mapVisible.set(!mapVisible())\"\n        pointer\n        [class.is-open]=\"mapVisible()\">\n        <span class=\"is-size-6\">View on Map</span>\n        <he-svg-icon [name]=\"mapVisible() ? 'minus' : 'plus'\" />\n      </div>\n      @if (mapVisible()) {\n        <he-sites-maps [sites]=\"[node()]\" [showNotice]=\"false\" />\n      }\n    </div>\n  }\n</ng-template>\n\n<ng-template #nodeLink let-url=\"url\" let-nodeType=\"nodeType\">\n  <a class=\"external-link\" [href]=\"url\" target=\"_blank\" (click)=\"$event.stopPropagation()\">\n    <span class=\"is-hidden-mobile\">View</span>\n    <span class=\"is-hidden-mobile is-pl-1\">{{ nodeType }}</span>\n    <he-svg-icon name=\"external-link\" class=\"ml-2\" />\n  </a>\n</ng-template>\n", styles: [".notification{color:#0a0a0a!important}.notification.is-success{background-color:#d5f3d8}.notification.is-success *:not(.button):not(.icon):not(.dropdown-item)>fa-icon,.notification.is-success>fa-icon,.notification.is-success *:not(.button):not(.icon):not(.dropdown-item)>he-svg-icon,.notification.is-success>he-svg-icon{color:#2b8434}.notification.is-info{background-color:#d3ebed}.notification.is-info *:not(.button):not(.icon):not(.dropdown-item)>fa-icon,.notification.is-info>fa-icon,.notification.is-info *:not(.button):not(.icon):not(.dropdown-item)>he-svg-icon,.notification.is-info>he-svg-icon{color:#249da5}.notification.is-warning{background-color:#ffdec0}.notification.is-warning *:not(.button):not(.icon):not(.dropdown-item)>fa-icon,.notification.is-warning>fa-icon,.notification.is-warning *:not(.button):not(.icon):not(.dropdown-item)>he-svg-icon,.notification.is-warning>he-svg-icon{color:#ff881b}.notification.is-danger{background-color:#ffcdd0}.notification.is-danger *:not(.button):not(.icon):not(.dropdown-item)>fa-icon,.notification.is-danger>fa-icon,.notification.is-danger *:not(.button):not(.icon):not(.dropdown-item)>he-svg-icon,.notification.is-danger>he-svg-icon{color:#ff3844}he-sites-maps{height:200px}.external-link{color:#4c7194}.files-form-container{box-shadow:2px 2px 4px #00000029;background-color:#fff}.files-form-header{padding:10px 12px;background-color:#dbe3ea;border-top-left-radius:3px;border-top-right-radius:3px}.properties-container--title,.property-container{padding:6px 12px}.property-container{flex:none;flex-grow:1;min-width:50%;max-width:100%;border:1px solid #f5f5f5}.property-container.is-error-danger{border-color:#ff3844}.property-container.is-error-warning{border-color:#ff881b}.properties-container--title{border-top:1px solid #dbe3ea;border-bottom:1px solid #dbe3ea;background:#f5f7f9}.properties-container .properties-container{border-radius:6px;border:1px solid #dbe3ea;margin:4px 0}.properties-container .properties-container--title{border-top:none}.property-internal{color:#249da5}.property-key,.property-value{word-break:break-word}.property-array-container{border-radius:6px;border:1px solid #dbdbdb}.number-tag{border:1px solid #249da5;border-radius:50%}.copy-button{visibility:hidden}.field-container:hover .copy-button{visibility:visible}.is-group-error-danger{background-color:#ffcdd0}.is-group-error-warning{background-color:#ffdec0}.property-error.is-error-danger{background-color:#ffeced}.field-container+.property-error.is-error-danger{background-color:transparent;color:#ff3844!important}.property-error.is-error-warning{background-color:#fff5ec}.field-container+.property-error.is-error-warning{background-color:transparent;color:#ff881b!important}::ng-deep .property-tooltip{background-color:#fff;color:#0a0a0a;border:1px solid #dbdbdb;z-index:11;max-width:50vw;max-height:50vh;overflow:auto}::ng-deep .property-tooltip pre{white-space:pre-wrap}\n"] }]
         }], propDecorators: { isOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "isOpen", required: false }] }, { type: i0.Output, args: ["isOpenChange"] }], node: [{ type: i0.Input, args: [{ isSignal: true, alias: "node", required: true }] }], errors: [{ type: i0.Input, args: [{ isSignal: true, alias: "errors", required: false }] }], showNodeLink: [{ type: i0.Input, args: [{ isSignal: true, alias: "showNodeLink", required: false }] }], errorGuidePrefix: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorGuidePrefix", required: false }] }], nodeErorrResolved: [{ type: i0.Output, args: ["nodeErorrResolved"] }] } });
 
 class SchemaInfoComponent {
@@ -17226,5 +17819,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, 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, 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, evaluateSuccess, exportAsSVG, exportFormats, externalLink, externalNodeLink, fillColor, fillStyle, filterBlankNode$1 as filterBlankNode, filterParams, findConfigModels, findMatchingModel, findModels, findNodeModel, findOrchestratorModel, findProperty, findPropertyById, flatFilterData, flatFilterNode, formatCustomErrorMessage, formatDate, formatError, formatPropertyError, formatter, getColor, getDatesBetween, gitBranch, gitHome, gitlabRawUrl, 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, 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, backgroundHoverPlugin, 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, evaluateSuccess, exportAsSVG, exportFormats, externalLink, externalNodeLink, fillColor, fillStyle, filterBlankNode$1 as filterBlankNode, filterParams, findConfigModels, findMatchingModel, findModels, findNodeModel, findOrchestratorModel, findProperty, findPropertyById, flatFilterData, flatFilterNode, formatCustomErrorMessage, formatDate, formatError, formatPropertyError, formatter, getColor, getDatesBetween, gitBranch, gitHome, gitlabRawUrl, 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, 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 };
 //# sourceMappingURL=hestia-earth-ui-components.mjs.map