@hestia-earth/ui-components 0.42.27 → 0.42.28

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

@@ -1,12 +1,12 @@
 import * as i0 from '@angular/core';
-import { Injectable, InjectionToken, inject, ElementRef, output, Directive, DestroyRef, input, computed, HostBinding, Component as Component$1, ChangeDetectionStrategy, Pipe, viewChild, HostListener, model, ViewEncapsulation, signal, effect, contentChild, untracked, viewChildren, forwardRef, LOCALE_ID } from '@angular/core';
+import { Injectable, InjectionToken, inject, ElementRef, PLATFORM_ID, output, Directive, DestroyRef, input, computed, HostBinding, Component as Component$1, ChangeDetectionStrategy, Pipe, viewChild, HostListener, model, ViewEncapsulation, signal, effect, contentChild, untracked, viewChildren, forwardRef, LOCALE_ID } from '@angular/core';
 import { toObservable, toSignal, outputFromObservable, takeUntilDestroyed, rxResource } from '@angular/core/rxjs-interop';
 import * as i1 from '@angular/forms';
 import { FormsModule, NG_VALUE_ACCESSOR, UntypedFormBuilder, Validators, ReactiveFormsModule, FormControl } from '@angular/forms';
-import { NgClass, DecimalPipe, NgTemplateOutlet, KeyValuePipe, DOCUMENT, PlatformLocation, NgStyle, UpperCasePipe, JsonPipe, DatePipe, AsyncPipe, formatDate as formatDate$1 } from '@angular/common';
+import { isPlatformBrowser, NgClass, DecimalPipe, NgTemplateOutlet, DOCUMENT, KeyValuePipe, PlatformLocation, NgStyle, UpperCasePipe, JsonPipe, DatePipe, AsyncPipe, formatDate as formatDate$1 } from '@angular/common';
 import * as i1$1 from '@ng-bootstrap/ng-bootstrap';
 import { NgbTooltip, NgbDropdown, NgbDropdownMenu, NgbDropdownToggle, NgbActiveModal, NgbHighlight, NgbModal, NgbDropdownItem, NgbTypeahead, NgbPopover, NgbTooltipModule, NgbDropdownModule, NgbPopoverModule } from '@ng-bootstrap/ng-bootstrap';
-import { ReplaySubject, of, mergeMap, shareReplay, delay, map, catchError, distinctUntilChanged, timer, take, first, Subject, combineLatest, filter, fromEvent, startWith, merge, skip, switchMap, EMPTY, throttleTime, animationFrameScheduler, debounceTime, takeUntil, lastValueFrom, tap, skipUntil, zip, mergeAll, reduce, forkJoin, throwError, from, firstValueFrom, toArray, distinct, groupBy } from 'rxjs';
+import { ReplaySubject, of, mergeMap, shareReplay, delay, map, catchError, distinctUntilChanged, timer, take, first, EMPTY, Subject, combineLatest, filter, fromEvent, startWith, merge, skip, switchMap, throttleTime, animationFrameScheduler, debounceTime, takeUntil, lastValueFrom, tap, skipUntil, zip, mergeAll, reduce, forkJoin, throwError, from, firstValueFrom, toArray, distinct, groupBy } from 'rxjs';
 import { HttpClient } from '@angular/common/http';
 import get from 'lodash.get';
 import { SCHEMA_VERSION, SchemaType, NodeType, TermTermType, productTermTermType, nestedSearchableKeys, SiteSiteType, EmissionMethodTier, isExpandable, sortKeysByType, isTypeNode, uniquenessFields, BlankNodesKey, impactAssessmentTermTermType, measurementTermTermType, emissionTermTermType, inputTermTermType, CycleFunctionalUnit, NonBlankNodesKey, jsonldPath, isTypeValid, typeToSchemaType, infrastructureTermTermType, managementTermTermType } from '@hestia-earth/schema';
@@ -76,16 +76,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
 
 const gitHome = 'https://gitlab.com/hestia-earth';
 const gitBranch = () => (['dev', 'staging'].some(env => baseUrl().includes(env)) ? 'develop' : 'master');
-const isChrome = () => window.navigator.userAgent.includes('Chrome');
-const baseUrl = (allowLocalhost = true) => window.location.origin?.includes('localhost')
+/**
+ * Access `window` defensively so this module can be evaluated outside the browser
+ * (SSR / prerender / Node). On the server there is no location, so callers fall
+ * back to production defaults.
+ */
+const windowRef = () => (typeof window === 'undefined' ? undefined : window);
+const origin = () => windowRef()?.location?.origin ?? '';
+const isChrome = () => windowRef()?.navigator?.userAgent?.includes('Chrome') ?? false;
+const baseUrl = (allowLocalhost = true) => origin().includes('localhost')
     ? allowLocalhost
-        ? window.location.origin
+        ? origin()
         : 'https://www-dev.hestia.earth'
-    : window.location.origin?.includes('hestia.earth')
-        ? window.location.origin
+    : origin().includes('hestia.earth')
+        ? origin()
         : 'https://www.hestia.earth';
 const baseApiUrl = () => baseUrl(false).replace('www', 'api');
-const isExternal = () => baseUrl() !== window.location.origin;
+const isExternal = () => baseUrl() !== origin();
 const schemaBaseUrl = (version) => [baseUrl(), 'schema', version].filter(Boolean).join('/');
 const schemaDataBaseUrl = (version) => [baseUrl(false), 'schema-data', version || SCHEMA_VERSION].filter(Boolean).join('/');
 const glossaryBaseUrl = (allowLocalhost = true) => [baseUrl(allowLocalhost), 'glossary'].filter(Boolean).join('/');
@@ -120,7 +127,11 @@ const filterParams = (obj) => {
     });
     return res;
 };
-const waitFor = (variable, callback) => get(window, variable, false) ? callback() : setTimeout(() => waitFor(variable, callback), 100);
+const waitFor = (variable, callback) => typeof window === 'undefined'
+    ? undefined
+    : get(window, variable, false)
+        ? callback()
+        : setTimeout(() => waitFor(variable, callback), 100);
 const bottom = (element) => element.offsetTop + element.getBoundingClientRect().height;
 const isScrolledBelow = (element) => (element ? window.scrollY > bottom(element) : false);
 const scrollToEl = (id, args = {
@@ -1545,14 +1556,18 @@ class ResizedEvent {
 class ResizedDirective {
     constructor() {
         this.element = inject(ElementRef);
+        this.isBrowser = isPlatformBrowser(inject(PLATFORM_ID));
         this.resized = output();
-        this.observer = new ResizeObserver(entries => this.observe(entries));
+        // `ResizeObserver` is browser-only; there are no resize events during SSR.
+        if (this.isBrowser) {
+            this.observer = new ResizeObserver(entries => this.observe(entries));
+        }
     }
     ngOnInit() {
-        this.observer.observe(this.element.nativeElement);
+        this.observer?.observe(this.element.nativeElement);
     }
     ngOnDestroy() {
-        this.observer.disconnect();
+        this.observer?.disconnect();
     }
     observe(entries) {
         const domSize = entries[0];
@@ -1574,6 +1589,10 @@ const distinctUntilChangedDeep = () => distinctUntilChanged((x, y) => isEqual$1(
 const takeAfterViewInit = (fn, settings = { take: 10 }) => timer(0, 50).pipe(take(settings.take), map(() => fn()), first(returnItem => !!returnItem));
 const injectResizeEvent$ = (elementRef) => {
     const destroyRef = inject(DestroyRef);
+    // `ResizeObserver` is browser-only; there are no resize events during SSR.
+    if (!isPlatformBrowser(inject(PLATFORM_ID))) {
+        return EMPTY;
+    }
     const resizedEvent$ = new Subject();
     let oldRect;
     const observer = new ResizeObserver(entries => {
@@ -1723,7 +1742,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
 
 const GUIDE_ENABLED = new InjectionToken('HESTIA_GUIDE_ENABLED');
 const guideNamespace = 'he-guide';
-const postGuideEvent = (data) => window.parent.postMessage({ namespace: guideNamespace, ...data }, '*');
+const postGuideEvent = (data) => typeof window === 'undefined'
+    ? undefined
+    : window.parent.postMessage({ namespace: guideNamespace, ...data }, '*');
 const handleGuideEvent = (handler) => (event) => {
     const data = event.data;
     if (data.namespace == guideNamespace) {
@@ -2029,7 +2050,10 @@ const toBreakpoint = ({ min, max }) => [min ? toSize(beakpointWidths[min], 'min'
 class ResponsiveService {
     constructor() {
         this.breakPointObserver = inject(BreakpointObserver);
-        this.windowWidth$ = fromEvent(window, 'resize').pipe(startWith(window.innerWidth), map(() => window.innerWidth));
+        this.isBrowser = isPlatformBrowser(inject(PLATFORM_ID));
+        this.windowWidth$ = this.isBrowser
+            ? fromEvent(window, 'resize').pipe(startWith(window.innerWidth), map(() => window.innerWidth))
+            : of(0);
         this.isMobile$ = this.breakPointObserver.observe(toBreakpoint({ max: Breakpoint.tablet })).pipe(map(state => state.matches), distinctUntilChanged());
         this.isTablet$ = this.breakPointObserver
             .observe(toBreakpoint({ min: Breakpoint.tablet, max: Breakpoint.desktop }))
@@ -2047,7 +2071,7 @@ class ResponsiveService {
          */
         this.is1080p$ = this.breakPointObserver.observe(toSize(1920, 'min')).pipe(map(state => state.matches), distinctUntilChanged());
         this.isRetinaDisplay = () => {
-            if (window.matchMedia) {
+            if (this.isBrowser && window.matchMedia) {
                 const mq = window.matchMedia([
                     'min--moz-device-pixel-ratio: 1.3',
                     '-o-min-device-pixel-ratio: 2.6/2',
@@ -2117,6 +2141,8 @@ class DrawerContainerComponent {
     constructor() {
         this.responsiveService = inject(ResponsiveService);
         this.localStorage = inject(LocalStorageService);
+        this.document = inject(DOCUMENT);
+        this.isBrowser = isPlatformBrowser(inject(PLATFORM_ID));
         this.contentContainer = viewChild('contentContainer', { ...(ngDevMode ? { debugName: "contentContainer" } : {}), read: ElementRef });
         this.menuState = signal('close', ...(ngDevMode ? [{ debugName: "menuState" }] : []));
         /**
@@ -2199,7 +2225,9 @@ class DrawerContainerComponent {
         this.destroy$ = new Subject();
         this._updateSidenavEvent$ = toObservable(this.isResizing).pipe(switchMap(listen => (listen ? moveEvent() : EMPTY)), throttleTime(0, animationFrameScheduler));
         this._contentContainer$ = toObservable(this.contentContainer).pipe(filter(v => !!v));
-        this._hostComponentWidth$ = fromEvent(window, 'resize').pipe(startWith(window.innerWidth));
+        this._hostComponentWidth$ = this.isBrowser
+            ? fromEvent(window, 'resize').pipe(startWith(window.innerWidth))
+            : of(0);
         /**
          * we use combineLatest instead of computed to avoid the animation flickering (wait for all sources to emit)
          */
@@ -2221,13 +2249,13 @@ class DrawerContainerComponent {
         effect(() => {
             const position = this.position();
             const width = this.sidenavWidth();
-            document.body.style.setProperty(`--sidenav-${position}-width`, `${width}px`);
+            this.document.body.style.setProperty(`--sidenav-${position}-width`, `${width}px`);
         });
         effect(() => {
             const expanded = this.expanded();
             const position = this.position();
             const value = this.contentContainerTransform();
-            document.body.style.setProperty(`--content-transition-${position}-x`, `${expanded ? value : 0}px`);
+            this.document.body.style.setProperty(`--content-transition-${position}-x`, `${expanded ? value : 0}px`);
         });
         // initial load of configuration
         effect(() => this.storageKey() && this.storeConfiguration());
@@ -2304,6 +2332,8 @@ class DrawerContainerComponent {
         this.menuState.set(didOpen ? 'open' : 'close');
     }
     _getContentLeftSideSpace(element) {
+        if (!this.isBrowser)
+            return 0;
         const position = this.position();
         const styles = window.getComputedStyle(element.nativeElement, null);
         const padding = styles.getPropertyValue('padding-' + position);
@@ -3006,6 +3036,12 @@ const loadSvgSprite = () => {
     const http = inject(HttpClient);
     const document = inject(DOCUMENT);
     const platformLocation = inject(PlatformLocation);
+    // The sprite is injected into the DOM for the browser to render `<use>` refs.
+    // During SSR/prerender there is no asset server to fetch it from, and the
+    // client re-injects it on hydration, so skip the fetch on the server.
+    if (!isPlatformBrowser(inject(PLATFORM_ID))) {
+        return Promise.resolve();
+    }
     const baseUrl = platformLocation.getBaseHrefFromDOM();
     return lastValueFrom(http.get(`${baseUrl}assets/svg-icons/icons-sprite.svg`, { responseType: 'text' }).pipe(tap(svgContent => {
         const div = document.createElement('div');
@@ -3464,10 +3500,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
 class SocialTagsComponent {
     constructor() {
         this.meta = inject(Meta);
+        this.document = inject(DOCUMENT);
         this.config = input({}, ...(ngDevMode ? [{ debugName: "config" }] : []));
         this.classes = 'is-hidden';
         this.configs = computed(() => ({
-            'og:url': window.location.href.split('?')[0],
+            'og:url': this.document.location.href.split('?')[0],
             ...this.config
         }), ...(ngDevMode ? [{ debugName: "configs" }] : []));
         this.meta.addTag({ charset: 'UTF-8' });
@@ -3562,8 +3599,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
 /* eslint-disable @angular-eslint/directive-selector */
 class DocumentClickService {
     constructor() {
+        this.document = inject(DOCUMENT);
         this.documentClick$ = new Subject();
-        fromEvent(document, 'click')
+        // Document click events only exist in the browser; skip on the server (SSR).
+        if (!isPlatformBrowser(inject(PLATFORM_ID))) {
+            return;
+        }
+        fromEvent(this.document, 'click')
             .pipe(takeUntilDestroyed(), tap(event => this.documentClick$.next(event)))
             .subscribe();
     }
@@ -8933,16 +8975,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
 
 class GuideOverlayService {
     constructor() {
+        this.isBrowser = isPlatformBrowser(inject(PLATFORM_ID));
         this.message = signal(null, ...(ngDevMode ? [{ debugName: "message" }] : []));
         this.messageListener = ({ data }) => {
             if (data.namespace == guideNamespace) {
                 this.message.set(data);
             }
         };
-        window.addEventListener('message', this.messageListener);
+        // `postMessage` communication only exists in the browser; skip on the server (SSR).
+        if (this.isBrowser) {
+            window.addEventListener('message', this.messageListener);
+        }
     }
     ngOnDestroy() {
-        window.removeEventListener('message', this.messageListener);
+        if (this.isBrowser) {
+            window.removeEventListener('message', this.messageListener);
+        }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: GuideOverlayService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: GuideOverlayService, providedIn: 'root' }); }
@@ -9290,6 +9338,10 @@ const isMissing = (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
 // it is excluded from the missing-values notice (e.g. a failed model has no result value)
 const resultKey = 'value';
+// the reserved table key a `\sum` over per-contributor products binds to (e.g. `[contributions:value]`).
+// its rows come from the ImpactAssessment's contribution data (register_contribution), not the jlog, so
+// these "characterisation = Σ contributions" models render fully without duplicating values into the logs
+const contributionsKey = 'contributions';
 // the "value formula" computes the model's result (`key: "value"`); any others are sub-formulas that
 // compute its components (possibly chained: a sub-formula's result feeds another sub-formula)
 const isValueFormula = (formula) => formula.bindings.some(binding => binding.key === resultKey);
@@ -9352,15 +9404,42 @@ class NodeLogsModelsFormulaComponent {
         // the value the model returned (the recalculated node value): the result symbol (`key: "value"`) is
         // usually not logged, so it falls back to this
         this.value = input(...(ngDevMode ? [undefined, { debugName: "value" }] : []));
+        // the ImpactAssessment the model ran on: lets a contribution-based `\sum` pull its per-contributor
+        // summands from the stored contribution data instead of duplicating them into the jlog
+        this.node = input(...(ngDevMode ? [undefined, { debugName: "node" }] : []));
+        this.nodeService = inject(HeNodeService);
         // show the substituted formula (values in place of symbols) rather than the raw symbolic one
         this.substituted = signal(false, ...(ngDevMode ? [{ debugName: "substituted" }] : []));
         // a unique id per instance so the switch label only toggles its own checkbox (several popovers can co-exist)
         this.toggleId = uuid('formulaSubstituted-');
         this.formulas = computed(() => getModelFormulas(this.model()), ...(ngDevMode ? [{ debugName: "formulas" }] : []));
+        // whether any formula sums over per-contributor products (bound to the reserved `contributions` table)
+        this.hasContributionBinding = computed(() => this.formulas().some(formula => formula.bindings.some(binding => binding.key === contributionsKey)), ...(ngDevMode ? [{ debugName: "hasContributionBinding" }] : []));
+        // only fetch contributions when a formula actually needs them and we have an ImpactAssessment to fetch for
+        this.contributionResource = rxResource({
+            params: () => (this.hasContributionBinding() && this.node() ? { node: this.node() } : undefined),
+            stream: ({ params: { node } }) => this.nodeService.getContributions$(node)
+        });
+        // the contributions to this indicator term, grouped by method model (empty until loaded / when N/A)
+        this.termContributions = computed(() => {
+            const node = this.node();
+            const contributions = this.contributionResource.value();
+            if (!node || !contributions)
+                return {};
+            return simplifyContributions(node, contributions)[this.model()?.term ?? ''] ?? {};
+        }, ...(ngDevMode ? [{ debugName: "termContributions" }] : []));
+        // the per-contributor summands for this model, shaped as `\sum` rows: { id: contributor term, value }
+        this.contributionRows = computed(() => {
+            const byIndicator = this.termContributions()[this.model()?.model ?? ''] ?? {};
+            return Object.entries(byIndicator).map(([id, value]) => ({ id, value }));
+        }, ...(ngDevMode ? [{ debugName: "contributionRows" }] : []));
         this.values = computed(() => {
             const values = logValues(this.logs());
             // the result (`value`) is usually the model's returned value rather than a logged field
-            return isMissing(values.value) && !isMissing(this.value()) ? { ...values, value: this.value() } : values;
+            const withResult = isMissing(values.value) && !isMissing(this.value()) ? { ...values, value: this.value() } : values;
+            // feed a contribution-based `\sum` from the stored contributions (nothing to merge for other formulas)
+            const rows = this.contributionRows();
+            return rows.length ? { ...withResult, [contributionsKey]: rows } : withResult;
         }, ...(ngDevMode ? [{ debugName: "values" }] : []));
         this.valueFormula = computed(() => this.formulas().find(isValueFormula), ...(ngDevMode ? [{ debugName: "valueFormula" }] : []));
         // the value formula's own symbol keys - kept symbolic in the sub-formulas (they are substituted only in
@@ -9411,12 +9490,12 @@ class NodeLogsModelsFormulaComponent {
         this.substituted.update(value => !value);
     }
     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.0.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 } }, ngImport: i0, template: "@if (formulas().length) {\n  <div class=\"formula-block is-mb-2 has-text-white\">\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\">Formula{{ formulas().length > 1 ? 's' : '' }}</span>\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() ? '' : 'No logged values to substitute'\">\n          <span>{{ substituted() ? 'Substituted' : 'Raw' }}</span>\n        </label>\n      </div>\n    </div>\n\n    @for (item of renderedFormulas(); track $index) {\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.description) {\n                    <span>:</span>\n                  }\n                </span>\n                @if (variable.description) {\n                  <markdown class=\"is-inline-block is-italic | formula-variable-desc\" [data]=\"variable.description\" />\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", styles: [".formula-block{border-bottom:1px solid rgba(255,255,255,.2)}.formula-variable-symbol{flex-shrink:0}.formula-variable-symbol ::ng-deep .katex{font-size:1em}.formula-variable-desc{opacity:.85}.formula-variable-desc ::ng-deep *{display:inline;margin:0}.formula{overflow-x:auto;overflow-y:hidden}.formula ::ng-deep .katex-display{margin:.35rem 0}\n"], dependencies: [{ 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: 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 } }, ngImport: i0, template: "@if (formulas().length) {\n  <div class=\"formula-block is-mb-2 has-text-white\">\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\">Formula{{ formulas().length > 1 ? 's' : '' }}</span>\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() ? '' : 'No logged values to substitute'\">\n          <span>{{ substituted() ? 'Substituted' : 'Raw' }}</span>\n        </label>\n      </div>\n    </div>\n\n    @for (item of renderedFormulas(); track $index) {\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.description) {\n                    <span>:</span>\n                  }\n                </span>\n                @if (variable.description) {\n                  <markdown class=\"is-inline-block is-italic | formula-variable-desc\" [data]=\"variable.description\" />\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", styles: [".formula-block{border-bottom:1px solid rgba(255,255,255,.2)}.formula-variable-symbol{flex-shrink:0}.formula-variable-symbol ::ng-deep .katex{font-size:1em}.formula-variable-desc{opacity:.85}.formula-variable-desc ::ng-deep *{display:inline;margin:0}.formula{overflow-x:auto;overflow-y:hidden}.formula ::ng-deep .katex-display{margin:.35rem 0}\n"], dependencies: [{ 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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: NodeLogsModelsFormulaComponent, decorators: [{
             type: Component$1,
             args: [{ selector: 'he-node-logs-models-formula', changeDetection: ChangeDetectionStrategy.OnPush, imports: [KatexDirective, MarkdownComponent], template: "@if (formulas().length) {\n  <div class=\"formula-block is-mb-2 has-text-white\">\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\">Formula{{ formulas().length > 1 ? 's' : '' }}</span>\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() ? '' : 'No logged values to substitute'\">\n          <span>{{ substituted() ? 'Substituted' : 'Raw' }}</span>\n        </label>\n      </div>\n    </div>\n\n    @for (item of renderedFormulas(); track $index) {\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.description) {\n                    <span>:</span>\n                  }\n                </span>\n                @if (variable.description) {\n                  <markdown class=\"is-inline-block is-italic | formula-variable-desc\" [data]=\"variable.description\" />\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", styles: [".formula-block{border-bottom:1px solid rgba(255,255,255,.2)}.formula-variable-symbol{flex-shrink:0}.formula-variable-symbol ::ng-deep .katex{font-size:1em}.formula-variable-desc{opacity:.85}.formula-variable-desc ::ng-deep *{display:inline;margin:0}.formula{overflow-x:auto;overflow-y:hidden}.formula ::ng-deep .katex-display{margin:.35rem 0}\n"] }]
-        }], propDecorators: { model: [{ type: i0.Input, args: [{ isSignal: true, alias: "model", required: false }] }], logs: [{ type: i0.Input, args: [{ isSignal: true, alias: "logs", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }] } });
+        }], propDecorators: { model: [{ type: i0.Input, args: [{ isSignal: true, alias: "model", required: false }] }], logs: [{ type: i0.Input, args: [{ isSignal: true, alias: "logs", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], node: [{ type: i0.Input, args: [{ isSignal: true, alias: "node", required: false }] }] } });
 
 class NodeLogsModelsDetailsComponent {
     constructor() {
@@ -9460,7 +9539,7 @@ class NodeLogsModelsDetailsComponent {
         this.openKeys.set(next);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: NodeLogsModelsDetailsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: NodeLogsModelsDetailsComponent, isStandalone: true, selector: "he-node-logs-models-details", inputs: { model: { classPropertyName: "model", publicName: "model", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, node: { classPropertyName: "node", publicName: "node", isSignal: true, isRequired: false, transformFunction: null }, nodeKey: { classPropertyName: "nodeKey", publicName: "nodeKey", isSignal: true, isRequired: false, transformFunction: null }, hasContributions: { classPropertyName: "hasContributions", publicName: "hasContributions", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@for (section of sections(); track section.key; let last = $last) {\n  <div class=\"log-section\" [class.has-border-bottom]=\"!last || isOpen(section.key)\">\n    @if (section.key === 'formula' && isOpen('formula')) {\n      <!-- the formula component renders its own \"Formula BETA\" title + Raw/Substituted switch on one\n        line, so keep the toggle chevron inline with it rather than adding a duplicate header -->\n      <div class=\"log-section-header is-flex is-align-items-flex-start is-gap-4\">\n        <a class=\"has-text-white\" (click)=\"toggle('formula')\">\n          <he-svg-icon name=\"chevron-down\" size=\"16\" />\n        </a>\n        <div class=\"is-flex-grow-1\">\n          <he-node-logs-models-formula [model]=\"model().model\" [logs]=\"model().logs\" [value]=\"value()\" />\n        </div>\n      </div>\n    } @else {\n      <a\n        class=\"log-section-header is-flex is-align-items-center is-gap-4 has-text-white is-size-8 is-uppercase has-text-weight-semibold\"\n        (click)=\"toggle(section.key)\">\n        <he-svg-icon [name]=\"isOpen(section.key) ? 'chevron-down' : 'chevron-right'\" size=\"16\" />\n        <span>{{ section.label }}</span>\n      </a>\n\n      @if (isOpen(section.key)) {\n        <div class=\"log-section-body is-pb-2\">\n          @switch (section.key) {\n            @case ('logs') {\n              <he-node-logs-models-logs [logs]=\"model().logs\" [renderRaw]=\"false\" />\n            }\n            @case ('raw') {\n              <div class=\"is-flex is-justify-content-flex-end is-mb-1\">\n                <he-clipboard clipboardClass=\"is-size-7 is-p-1\" [value]=\"rawJson()\" [hideText]=\"true\" />\n              </div>\n              <pre class=\"raw-log\">{{ rawJson() }}</pre>\n            }\n            @case ('contributions') {\n              <he-node-logs-models-contributions [node]=\"node()\" [nodeKey]=\"nodeKey()\" [model]=\"model()\" />\n            }\n          }\n        </div>\n      }\n    }\n  </div>\n}\n", styles: [".log-section{border-color:#fff3!important}.log-section-header{cursor:pointer;padding:.5rem 0}.log-section-header ::ng-deep .formula-block{margin-bottom:0;border-bottom:none}.raw-log{max-height:300px;overflow:auto;white-space:pre;font-size:.75rem;background:#00000059;color:inherit;padding:.5rem;border-radius:3px}\n"], dependencies: [{ 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: NodeLogsModelsFormulaComponent, selector: "he-node-logs-models-formula", inputs: ["model", "logs", "value"] }, { kind: "component", type: NodeLogsModelsLogsComponent, selector: "he-node-logs-models-logs", inputs: ["logs", "renderRaw"] }, { kind: "component", type: NodeLogsModelsContributionsComponent, selector: "he-node-logs-models-contributions", inputs: ["node", "nodeKey", "model"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: NodeLogsModelsDetailsComponent, isStandalone: true, selector: "he-node-logs-models-details", inputs: { model: { classPropertyName: "model", publicName: "model", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, node: { classPropertyName: "node", publicName: "node", isSignal: true, isRequired: false, transformFunction: null }, nodeKey: { classPropertyName: "nodeKey", publicName: "nodeKey", isSignal: true, isRequired: false, transformFunction: null }, hasContributions: { classPropertyName: "hasContributions", publicName: "hasContributions", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@for (section of sections(); track section.key; let last = $last) {\n  <div class=\"log-section\" [class.has-border-bottom]=\"!last || isOpen(section.key)\">\n    @if (section.key === 'formula' && isOpen('formula')) {\n      <!-- the formula component renders its own \"Formula BETA\" title + Raw/Substituted switch on one\n        line, so keep the toggle chevron inline with it rather than adding a duplicate header -->\n      <div class=\"log-section-header is-flex is-align-items-flex-start is-gap-4\">\n        <a class=\"has-text-white\" (click)=\"toggle('formula')\">\n          <he-svg-icon name=\"chevron-down\" size=\"16\" />\n        </a>\n        <div class=\"is-flex-grow-1\">\n          <he-node-logs-models-formula\n            [model]=\"model().model\"\n            [logs]=\"model().logs\"\n            [value]=\"value()\"\n            [node]=\"node()\" />\n        </div>\n      </div>\n    } @else {\n      <a\n        class=\"log-section-header is-flex is-align-items-center is-gap-4 has-text-white is-size-8 is-uppercase has-text-weight-semibold\"\n        (click)=\"toggle(section.key)\">\n        <he-svg-icon [name]=\"isOpen(section.key) ? 'chevron-down' : 'chevron-right'\" size=\"16\" />\n        <span>{{ section.label }}</span>\n      </a>\n\n      @if (isOpen(section.key)) {\n        <div class=\"log-section-body is-pb-2\">\n          @switch (section.key) {\n            @case ('logs') {\n              <he-node-logs-models-logs [logs]=\"model().logs\" [renderRaw]=\"false\" />\n            }\n            @case ('raw') {\n              <div class=\"is-flex is-justify-content-flex-end is-mb-1\">\n                <he-clipboard clipboardClass=\"is-size-7 is-p-1\" [value]=\"rawJson()\" [hideText]=\"true\" />\n              </div>\n              <pre class=\"raw-log\">{{ rawJson() }}</pre>\n            }\n            @case ('contributions') {\n              <he-node-logs-models-contributions [node]=\"node()\" [nodeKey]=\"nodeKey()\" [model]=\"model()\" />\n            }\n          }\n        </div>\n      }\n    }\n  </div>\n}\n", styles: [".log-section{border-color:#fff3!important}.log-section-header{cursor:pointer;padding:.5rem 0}.log-section-header ::ng-deep .formula-block{margin-bottom:0;border-bottom:none}.raw-log{max-height:300px;overflow:auto;white-space:pre;font-size:.75rem;background:#00000059;color:inherit;padding:.5rem;border-radius:3px}\n"], dependencies: [{ 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: NodeLogsModelsFormulaComponent, selector: "he-node-logs-models-formula", inputs: ["model", "logs", "value", "node"] }, { kind: "component", type: NodeLogsModelsLogsComponent, selector: "he-node-logs-models-logs", inputs: ["logs", "renderRaw"] }, { kind: "component", type: NodeLogsModelsContributionsComponent, selector: "he-node-logs-models-contributions", inputs: ["node", "nodeKey", "model"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: NodeLogsModelsDetailsComponent, decorators: [{
             type: Component$1,
@@ -9470,7 +9549,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
                         NodeLogsModelsFormulaComponent,
                         NodeLogsModelsLogsComponent,
                         NodeLogsModelsContributionsComponent
-                    ], template: "@for (section of sections(); track section.key; let last = $last) {\n  <div class=\"log-section\" [class.has-border-bottom]=\"!last || isOpen(section.key)\">\n    @if (section.key === 'formula' && isOpen('formula')) {\n      <!-- the formula component renders its own \"Formula BETA\" title + Raw/Substituted switch on one\n        line, so keep the toggle chevron inline with it rather than adding a duplicate header -->\n      <div class=\"log-section-header is-flex is-align-items-flex-start is-gap-4\">\n        <a class=\"has-text-white\" (click)=\"toggle('formula')\">\n          <he-svg-icon name=\"chevron-down\" size=\"16\" />\n        </a>\n        <div class=\"is-flex-grow-1\">\n          <he-node-logs-models-formula [model]=\"model().model\" [logs]=\"model().logs\" [value]=\"value()\" />\n        </div>\n      </div>\n    } @else {\n      <a\n        class=\"log-section-header is-flex is-align-items-center is-gap-4 has-text-white is-size-8 is-uppercase has-text-weight-semibold\"\n        (click)=\"toggle(section.key)\">\n        <he-svg-icon [name]=\"isOpen(section.key) ? 'chevron-down' : 'chevron-right'\" size=\"16\" />\n        <span>{{ section.label }}</span>\n      </a>\n\n      @if (isOpen(section.key)) {\n        <div class=\"log-section-body is-pb-2\">\n          @switch (section.key) {\n            @case ('logs') {\n              <he-node-logs-models-logs [logs]=\"model().logs\" [renderRaw]=\"false\" />\n            }\n            @case ('raw') {\n              <div class=\"is-flex is-justify-content-flex-end is-mb-1\">\n                <he-clipboard clipboardClass=\"is-size-7 is-p-1\" [value]=\"rawJson()\" [hideText]=\"true\" />\n              </div>\n              <pre class=\"raw-log\">{{ rawJson() }}</pre>\n            }\n            @case ('contributions') {\n              <he-node-logs-models-contributions [node]=\"node()\" [nodeKey]=\"nodeKey()\" [model]=\"model()\" />\n            }\n          }\n        </div>\n      }\n    }\n  </div>\n}\n", styles: [".log-section{border-color:#fff3!important}.log-section-header{cursor:pointer;padding:.5rem 0}.log-section-header ::ng-deep .formula-block{margin-bottom:0;border-bottom:none}.raw-log{max-height:300px;overflow:auto;white-space:pre;font-size:.75rem;background:#00000059;color:inherit;padding:.5rem;border-radius:3px}\n"] }]
+                    ], template: "@for (section of sections(); track section.key; let last = $last) {\n  <div class=\"log-section\" [class.has-border-bottom]=\"!last || isOpen(section.key)\">\n    @if (section.key === 'formula' && isOpen('formula')) {\n      <!-- the formula component renders its own \"Formula BETA\" title + Raw/Substituted switch on one\n        line, so keep the toggle chevron inline with it rather than adding a duplicate header -->\n      <div class=\"log-section-header is-flex is-align-items-flex-start is-gap-4\">\n        <a class=\"has-text-white\" (click)=\"toggle('formula')\">\n          <he-svg-icon name=\"chevron-down\" size=\"16\" />\n        </a>\n        <div class=\"is-flex-grow-1\">\n          <he-node-logs-models-formula\n            [model]=\"model().model\"\n            [logs]=\"model().logs\"\n            [value]=\"value()\"\n            [node]=\"node()\" />\n        </div>\n      </div>\n    } @else {\n      <a\n        class=\"log-section-header is-flex is-align-items-center is-gap-4 has-text-white is-size-8 is-uppercase has-text-weight-semibold\"\n        (click)=\"toggle(section.key)\">\n        <he-svg-icon [name]=\"isOpen(section.key) ? 'chevron-down' : 'chevron-right'\" size=\"16\" />\n        <span>{{ section.label }}</span>\n      </a>\n\n      @if (isOpen(section.key)) {\n        <div class=\"log-section-body is-pb-2\">\n          @switch (section.key) {\n            @case ('logs') {\n              <he-node-logs-models-logs [logs]=\"model().logs\" [renderRaw]=\"false\" />\n            }\n            @case ('raw') {\n              <div class=\"is-flex is-justify-content-flex-end is-mb-1\">\n                <he-clipboard clipboardClass=\"is-size-7 is-p-1\" [value]=\"rawJson()\" [hideText]=\"true\" />\n              </div>\n              <pre class=\"raw-log\">{{ rawJson() }}</pre>\n            }\n            @case ('contributions') {\n              <he-node-logs-models-contributions [node]=\"node()\" [nodeKey]=\"nodeKey()\" [model]=\"model()\" />\n            }\n          }\n        </div>\n      }\n    }\n  </div>\n}\n", styles: [".log-section{border-color:#fff3!important}.log-section-header{cursor:pointer;padding:.5rem 0}.log-section-header ::ng-deep .formula-block{margin-bottom:0;border-bottom:none}.raw-log{max-height:300px;overflow:auto;white-space:pre;font-size:.75rem;background:#00000059;color:inherit;padding:.5rem;border-radius:3px}\n"] }]
         }], propDecorators: { model: [{ type: i0.Input, args: [{ isSignal: true, alias: "model", required: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], node: [{ type: i0.Input, args: [{ isSignal: true, alias: "node", required: false }] }], nodeKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "nodeKey", required: false }] }], hasContributions: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasContributions", required: false }] }] } });
 
 /**
@@ -14234,7 +14313,7 @@ ${JSON.stringify(error)}
 
 ## Details
 
-* Path: [open](${window.location.href})
+* Path: [open](${typeof window === 'undefined' ? baseUrl() : window.location.href})
 * Stage: \`${fileStatus?.replace('Done', '')?.replace('Error', '')}\`
 
 /label ~"Type::bug"
@@ -14823,7 +14902,7 @@ const mergedNodes = (selection, { tooltipOperator }) => {
         .attr('stroke-width', '2')
         .attr('rx', '3px')
         .attr('ry', '3px')
-        .style('user-select', window.innerWidth < 768 ? 'none' : null);
+        .style('user-select', typeof window !== 'undefined' && window.innerWidth < 768 ? 'none' : null);
     selection.filter(d => !d.data.group && d.data.id !== nonLCAIndicatorsId).call(addTooltip, { tooltipOperator });
     selection
         .selectAll('.node-label')