@hestia-earth/ui-components 0.11.2 → 0.11.4

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

@@ -29,7 +29,7 @@ import { DeltaDisplayType, delta, customDeltaFuncs } from '@hestia-earth/utils/d
 import orderBy from 'lodash.orderby';
 import Gradient from 'javascript-color-gradient';
 import { ShadeGenerator } from 'shade-generator/dist/shadeGenerator';
-import { select } from 'd3-selection';
+import { select, selectAll } from 'd3-selection';
 import { json2csvAsync } from 'json-2-csv';
 import * as i4 from '@angular/cdk/drag-drop';
 import { moveItemInArray, DragDropModule } from '@angular/cdk/drag-drop';
@@ -1619,9 +1619,9 @@ class HeEngineService {
         const configUrl = this._orchestratorBaseUrl;
         return type ? `${configUrl}/${type}.json` : configUrl.substring(0, configUrl.indexOf('/raw'));
     }
-    ochestratorConfig(type) {
+    ochestratorConfig(type, id) {
         return this.http.get(`${this._calculationsBaseUrl}/recalculate/config`, {
-            params: { type, '@type': type }
+            params: filterParams({ type, '@type': type, id, '@id': id })
         }).toPromise();
     }
 }
@@ -4063,9 +4063,7 @@ const searchableTypes = [
 const matchType = (type) => Object.freeze({
     match: { '@type': type }
 });
-const matchTermType = (termType) => Object.freeze({
-    match: { termType }
-});
+const matchTermType = (termType) => Object.freeze(matchExactQuery('termType', termType));
 const matchRegex = (key, value) => Object.freeze({
     regexp: { [key]: { value: value.toString() } }
 });
@@ -5618,7 +5616,7 @@ class NodeLogsModelsComponent {
             const groupedLogs = groupLogsByModel(this.logs);
             const logs = this.logsKey ? groupedLogs[this.logsKey] : groupedLogs;
             this.nodeType = this.node['@type'] || this.node.type;
-            const config = yield this.engineService.ochestratorConfig(this.nodeType);
+            const config = yield this.engineService.ochestratorConfig(this.nodeType, this.node['@id'] || this.node.id);
             const models = yield this.searchTerms({
                 bool: {
                     must: [
@@ -5698,10 +5696,10 @@ class NodeLogsModelsComponent {
     }
 }
 NodeLogsModelsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: NodeLogsModelsComponent, deps: [{ token: HeNodeService }, { token: HeSearchService }, { token: HeEngineService }], target: i0.ɵɵFactoryTarget.Component });
-NodeLogsModelsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.8", type: NodeLogsModelsComponent, selector: "he-node-logs-models", inputs: { node: "node", nodeKey: "nodeKey", originalValues: "originalValues", recalculatedValues: "recalculatedValues", terms: "terms", filterTermTypes: "filterTermTypes", logsKey: "logsKey" }, ngImport: i0, template: "<div class=\"px-3 pb-3\">\n  <div class=\"has-text-right mb-2\" *ngIf=\"!isExternal\">\n    <a class=\"is-size-7\" *ngIf=\"logsUrl\" [href]=\"logsUrl\" target=\"_blank\">\n      <fa-icon icon=\"external-link-alt\"></fa-icon>\n      <span class=\"pl-2\">Open Full Logs</span>\n    </a>\n  </div>\n\n  <he-data-table class=\"mb-1 is-small\" [small]=\"true\" [nbRows]=\"rowsCount\" maxHeight=\"320\">\n    <table class=\"table is-fullwidth is-narrow is-striped\">\n      <thead>\n        <tr>\n          <th class=\"width-auto has-border-right\">\n            <div class=\"field\">\n              <div class=\"control is-expanded has-icons-right\">\n                <input class=\"input search-input is-small\"\n                  [(ngModel)]=\"term\" name=\"term\"\n                  placeholder=\"Filter by name\"\n                  [ngbTypeahead]=\"suggestTerm\"\n                  [focusFirst]=\"false\"\n                  (selectItem)=\"filterResults()\"\n                >\n                <a class=\"icon is-small is-right\"\n                  [class.is-hidden]=\"!term\"\n                  (click)=\"term = ''; filterResults();\"\n                >\n                  <fa-icon icon=\"times\"></fa-icon>\n                </a>\n              </div>\n            </div>\n          </th>\n          <th>Units</th>\n          <th>Original</th>\n          <th>Recalculated</th>\n          <th>Difference</th>\n          <th *ngFor=\"let c of methodModelsCount | times; let i = index\">({{i + 1}})</th>\n        </tr>\n      </thead>\n      <tbody>\n        <tr *ngIf=\"loading\">\n          <td class=\"has-text-centered\" colspan=\"6\">\n            <div class=\"has-text-center py-3\">\n              <fa-icon icon=\"spinner\" [pulse]=\"true\" size=\"lg\"></fa-icon>\n            </div>\n          </td>\n        </tr>\n        <tr *ngIf=\"!loading && blankNodes.length === 0\">\n          <td class=\"has-text-centered\" colspan=\"6\">\n            <span>No data</span>\n          </td>\n        </tr>\n        <ng-container *ngFor=\"let blankNode of blankNodes; trackBy: trackByBlankNode\">\n          <tr [class.has-sub-rows]=\"blankNode.canOpen\">\n            <td class=\"width-auto has-border-right\" [attr.title]=\"blankNode.term.name\">\n              <a class=\"is-inline-block is-align-top pr-2 open-node\"\n                (click)=\"blankNode.isOpen = !blankNode.isOpen\"\n                *ngIf=\"blankNode.canOpen\"\n              >\n                <fa-icon icon=\"angle-down\" [class.is-hidden]=\"!blankNode.isOpen\"></fa-icon>\n                <fa-icon icon=\"angle-right\" [class.is-hidden]=\"blankNode.isOpen\"></fa-icon>\n              </a>\n              <he-node-link class=\"is-inline-block\" [node]=\"blankNode.term\">\n                <span class=\"is-nowrap has-text-ellipsis\" [innerHtml]=\"blankNode.term.name | compound\"></span>\n              </he-node-link>\n            </td>\n            <td>\n              <span [innerHtml]=\"blankNode.term?.units | compound\"></span>\n            </td>\n            <td>\n              <ng-template #defaultOriginalValue>\n                <span>{{blankNode.originalValue | precision:3 | default:'-'}}</span>\n              </ng-template>\n              <ng-container *ngIf=\"blankNode.allParallel; else defaultOriginalValue\">\n                <div *ngFor=\"let model of blankNode.configModels[0]\">{{blankNode.originalValueByMethodId[model.methodId] | precision:3 | default:'-'}}</div>\n              </ng-container>\n            </td>\n            <td>\n              <ng-container *ngIf=\"!blankNode.isOriginal || blankNode.isRecalculated; else notRecalculated\">\n                <ng-template #defaultRecalculatedValue>\n                  <span>{{blankNode.recalculatedValue | precision:3 | default:'-'}}</span>\n                </ng-template>\n                <ng-container *ngIf=\"blankNode.allParallel; else defaultRecalculatedValue\">\n                  <div *ngFor=\"let model of blankNode.configModels[0]\">{{blankNode.recalculatedValueByMethodId[model.methodId] | precision:3 | default:'-'}}</div>\n                </ng-container>\n              </ng-container>\n            </td>\n            <td class=\"is-nowrap\">\n              <ng-template #defaultDeltaValue>\n                <he-blank-node-value-delta *ngIf=\"blankNode.original.length && blankNode.isRecalculated; else noValue\"\n                  [value]=\"blankNode.recalculatedValue\"\n                  [originalValue]=\"blankNode.originalValue\"\n                ></he-blank-node-value-delta>\n              </ng-template>\n              <ng-container *ngIf=\"blankNode.allParallel; else defaultDeltaValue\">\n                <div *ngFor=\"let model of blankNode.configModels[0]\">\n                  <he-blank-node-value-delta *ngIf=\"blankNode.originalValueByMethodId[model.methodId] !== null && blankNode.recalculatedValueByMethodId[model.methodId] !== null; else noValue\"\n                    [value]=\"blankNode.recalculatedValueByMethodId[model.methodId]\"\n                    [originalValue]=\"blankNode.originalValueByMethodId[model.methodId]\"\n                  ></he-blank-node-value-delta>\n                </div>\n              </ng-container>\n            </td>\n            <ng-container *ngTemplateOutlet=\"blankNodeModels; context: {data: blankNode}\"></ng-container>\n          </tr>\n\n          <tr\n            *ngFor=\"let subValue of blankNode.keys\"\n            [class.is-hidden]=\"!blankNode.isOpen\"\n            [class.has-sub-rows]=\"blankNode.subValues?.length\"\n          >\n            <td class=\"width-auto has-border-right\">\n              <span class=\"is-inline-block is-align-top pl-3 pr-1 field-node\">Field:</span>\n\n              <a class=\"is-inline-block\" *ngIf=\"blankNode.type\"\n                [href]=\"baseUrl + '/schema/' + blankNode.type + '#' + subValue.key\" target=\"_blank\" [title]=\"subValue.key\"\n              >\n                <span class=\"is-nowrap has-text-ellipsis\">{{subValue.key}}</span>\n              </a>\n              <span class=\"is-inline-block is-align-top\" *ngIf=\"!blankNode.type\">{{subValue.key}}</span>\n            </td>\n            <td></td>\n            <td>\n              <span *ngIf=\"subValue.originalValue !== null; else noValue\">{{subValue.originalValue | precision:3 | default:'-'}}</span>\n            </td>\n            <td>\n              <span *ngIf=\"subValue.isRecalculated || subValue.key === 'impactAssessment'; else notRecalculated\">\n                {{subValue.recalculatedValue | precision:3 | default:'-'}}\n              </span>\n            </td>\n            <td>-</td>\n            <ng-container *ngTemplateOutlet=\"blankNodeModels; context: {data: subValue}\"></ng-container>\n          </tr>\n\n          <tr\n            *ngFor=\"let subValue of blankNode.subValues\"\n            [class.is-hidden]=\"!blankNode.isOpen\"\n          >\n            <td class=\"width-auto has-border-right\">\n              <span class=\"is-inline-block is-align-top pl-3\">{{subValue.key | keyToLabel}}</span>\n\n              <ng-container *ngIf=\"subValue.id\">\n                <span class=\"is-inline-block\" class=\"is-inline-block is-align-top pr-1\">:</span>\n\n                <ng-container [ngSwitch]=\"subValue.key\">\n                  <span class=\"is-inline-block\" *ngSwitchCase=\"'backgroundData'\">{{subValue.id | keyToLabel}}</span>\n                  <he-node-link *ngSwitchDefault class=\"is-block pl-4\" [node]=\"termById(subValue.id)\" [attr.title]=\"termById(subValue.id).name\">\n                    <span class=\"is-nowrap has-text-ellipsis\" [innerHtml]=\"termById(subValue.id).name | compound\"></span>\n                  </he-node-link>\n                </ng-container>\n              </ng-container>\n            </td>\n            <td>\n              <span *ngIf=\"subValue.showUnits\" [innerHtml]=\"blankNode.term?.units | compound\"></span>\n            </td>\n            <td>\n              <span *ngIf=\"subValue.originalValue !== null; else noValue\">{{subValue.originalValue | precision:3 | default:'-'}}</span>\n            </td>\n            <td>\n              <span *ngIf=\"subValue.isRecalculated; else notRecalculated\">\n                {{subValue.recalculatedValue | precision:3 | default:'-'}}\n              </span>\n            </td>\n            <td>-</td>\n            <ng-container *ngTemplateOutlet=\"blankNodeModels; context: {data: subValue}\"></ng-container>\n          </tr>\n        </ng-container>\n      </tbody>\n    </table>\n  </he-data-table>\n\n  <div class=\"is-size-7 is-italic\">\n    <div class=\"columns is-variable is-1 my-0\">\n      <div class=\"column is-narrow\">\n        <p>\n          <a class=\"is-inline-block pr-2\"\n            (click)=\"showLegend = !showLegend\"\n          >\n            <fa-icon icon=\"angle-down\" [class.is-hidden]=\"!showLegend\"></fa-icon>\n            <fa-icon icon=\"angle-right\" [class.is-hidden]=\"showLegend\"></fa-icon>\n          </a>\n          <span class=\"is-inline-block\">Legend:</span>\n        </p>\n        <ul class=\"content pl-2\" [class.is-hidden]=\"!showLegend\">\n          <ng-container *ngFor=\"let status of LogStatus | keys\">\n            <li *ngIf=\"logIcon[status.value]\" class=\"has-text-{{logColor[status.value]}}\">\n              <fa-icon [icon]=\"logIcon[status.value]\"></fa-icon>\n              <span class=\"pl-1\">{{status.value}}</span>\n            </li>\n          </ng-container>\n        </ul>\n      </div>\n      <div class=\"column has-text-right\" *ngIf=\"filteredType\">\n        <label class=\"is-inline-block checkbox\">\n          <input type=\"checkbox\" class=\"selector\"\n            [(ngModel)]=\"onlyRequired\"\n            (change)=\"filterResults()\"\n            [disabled]=\"!!term\"\n          >\n          <span class=\"ml-2\">Show only {{filteredType | pluralize}} included in the default Hestia system boundary</span>\n        </label>\n      </div>\n    </div>\n  </div>\n</div>\n\n<ng-template #blankNodeModels let-data=\"data\">\n  <td class=\"blank-node-index-{{i}}\" *ngFor=\"let c of methodModelsCount | times; let i = index\">\n    <ng-container *ngIf=\"getModelsAt(data, i); let models; else noValue\">\n      <ng-template #modelSerie>\n        <ng-container *ngTemplateOutlet=\"blankNodeModel; context: {model:models, data}\"></ng-container>\n      </ng-template>\n      <div *ngIf=\"models | isArray; else modelSerie\">\n        <p *ngFor=\"let model of models\">\n          <ng-container *ngTemplateOutlet=\"blankNodeModel; context: {model, data}\"></ng-container>\n        </p>\n      </div>\n    </ng-container>\n  </td>\n</ng-template>\n\n<ng-template #blankNodeModel let-model=\"model\" let-data=\"data\">\n  <span\n    [class.trigger-popover]=\"model.showLogs\"\n    [ngbPopover]=\"logDetails\" [autoClose]=\"'outside'\" popoverClass=\"is-narrow\"\n    triggers=\"manual\" #p=\"ngbPopover\" placement=\"left\" container=\"body\"\n    (click)=\"p.isOpen() ? p.close() : (model.showLogs ? p.open({ logs: model.logs }) : null)\"\n  >\n    <span class=\"is-capitalized\">{{methodName(model)}}</span>\n    <span class=\"pl-1\" *ngIf=\"model.logs?.methodTier || model.model?.methodTier\">[{{model.logs?.methodTier || model.model?.methodTier}}]</span>\n\n    <span class=\"pl-1 has-text-{{logColor[model.status]}} trigger-popover\"\n      [ngbPopover]=\"logStatusDetails\" [autoClose]=\"'outside'\" popoverClass=\"is-narrow\"\n      triggers=\"manual\" #p1=\"ngbPopover\" placement=\"left\" container=\"body\"\n      (click)=\"$event.stopPropagation(); p1.isOpen() ? p1.close() : p1.open({ model, data })\"\n    >\n      <fa-icon [icon]=\"logIcon[model.status]\"></fa-icon>\n    </span>\n\n    <span class=\"pl-1\" *ngIf=\"model.model\">\n      (<ng-container *ngTemplateOutlet=\"docsLink; context: {$implicit: model.model}\"></ng-container>)\n    </span>\n  </span>\n</ng-template>\n\n<ng-template #noValue>-</ng-template>\n\n<ng-template #notRecalculated>not recalculated</ng-template>\n\n<ng-template #logDetails let-logs=\"logs\">\n  <ng-container *bindOnce=\"logs\">\n    <ng-container *ngIf=\"logs?.requirements\">\n      <div class=\"is-requirement\" *ngFor=\"let key of requirementKeys(logs.requirements)\">\n        <ng-container *ngTemplateOutlet=\"logLine; context:{key, value:logs.requirements[key]}\"></ng-container>\n      </div>\n    </ng-container>\n    <ng-container *ngIf=\"logs?.logs\">\n      <div class=\"is-log\" *ngFor=\"let key of logs.logs | keys\">\n        <ng-container *ngTemplateOutlet=\"logLine; context:key\"></ng-container>\n      </div>\n    </ng-container>\n    <ng-container *ngIf=\"logs?.missingLookups?.length\">\n      <p class=\"mt-2\">Optional data missing:</p>\n\n      <div class=\"table-container data-table-container\">\n        <table class=\"table is-fullwidth mb-0\">\n          <thead>\n            <tr>\n              <th>\n                <span>Filename</span>\n              </th>\n              <th>\n                <span>Column Title</span>\n              </th>\n              <th>\n                <span>Row (term.id)</span>\n              </th>\n            </tr>\n          </thead>\n          <tbody class=\"has-background-black has-text-white\">\n            <tr *ngFor=\"let data of logs.missingLookups\">\n              <td>{{data.filename}}</td>\n              <td>{{data.column}}</td>\n              <td>{{data.termId}}</td>\n            </tr>\n          </tbody>\n        </table>\n      </div>\n    </ng-container>\n  </ng-container>\n</ng-template>\n\n<ng-template #logLineValue let-key=\"key\" let-value=\"value\">\n  <ng-template #defaultValue>\n    <span class=\"is-inline-block is-align-middle\">{{value}}</span>\n  </ng-template>\n  <ng-container *ngIf=\"requirementLinkedNode(key, value); let linkedNode; else defaultValue\">\n    <he-node-link class=\"is-inline-block is-align-middle\" linkClass=\"is-dark\" [node]=\"linkedNode\" [showExternalLink]=\"true\"></he-node-link>\n  </ng-container>\n</ng-template>\n\n<ng-template #logLine let-key=\"key\" let-value=\"value\">\n  <span class=\"is-inline-block is-align-middle\" [ngSwitch]=\"key\">\n    <ng-container *ngSwitchDefault>{{key | keyToLabel}}</ng-container>\n\n    <ng-container *ngSwitchCase=\"'node_type_allowed'\">Is the current <code>Node</code> allowed to run this model</ng-container>\n    <ng-container *ngSwitchCase=\"'siteType_allowed'\">Is the current <code>siteType</code> allowed to run this model</ng-container>\n    <ng-container *ngSwitchCase=\"'primary_product_id_allowed'\">Is the current primary product <code>@id</code> allowed to run this model</ng-container>\n    <ng-container *ngSwitchCase=\"'primary_product_termType_allowed'\">Is the current primary product <code>termType</code> allowed to run this model</ng-container>\n\n    <ng-container *ngSwitchCase=\"'geospatial_data'\">Has geospatial data necessary to run this model</ng-container>\n    <ng-container *ngSwitchCase=\"'contains_geospatial_data'\">Has geospatial data necessary to run this model</ng-container>\n    <ng-container *ngSwitchCase=\"'current_size'\">Current polygon area</ng-container>\n    <ng-container *ngSwitchCase=\"'max_area_size'\">Maximum polygon area to run this model</ng-container>\n    <ng-container *ngSwitchCase=\"'below_max_area_size'\">Polygon below the maximum area</ng-container>\n    <ng-container *ngSwitchCase=\"'region_factor'\">Factor from region lookup</ng-container>\n\n    <ng-container *ngSwitchCase=\"'pesticides_complete'\">Pesticide data are <code>complete</code></ng-container>\n    <ng-container *ngSwitchCase=\"'has_pesticides_inputs'\">Cycle contains <code>pesticideAI</code> Inputs</ng-container>\n    <ng-container *ngSwitchCase=\"'all_pesticideAI_have_lookup_value'\">All <code>pesticideAI</code> Inputs have a lookup value</ng-container>\n\n    <ng-container *ngSwitchCase=\"'has_aboveGroundCropResidueBurnt'\"><code>aboveGroundCropResidueBurnt</code> is present as Product</ng-container>\n\n    <ng-container *ngSwitchCase=\"'liquid_slurry_sludge_P'\">Liquid, Slurry, and Sludge P</ng-container>\n  </span>\n  <he-clipboard class=\"is-inline-block is-align-middle\" clipboardClass=\"is-size-7 is-p-1\" [icon]=\"['far', 'clone']\" [value]=\"key\" [hideText]=\"true\"></he-clipboard>\n  <span class=\"is-pr-1 is-inline-block is-align-middle\">:</span>\n  <ng-template #singleValue>\n    <ng-container *ngTemplateOutlet=\"logLineValue; context:{key,value}\"></ng-container>\n  </ng-template>\n  <div class=\"is-inline-block is-align-middle\" *ngIf=\"logValueArray(value); let valueArray; else singleValue\">\n    <table class=\"table is-bordered has-background-secondary has-text-white\">\n      <thead *ngIf=\"valueArray[0] | isObject\">\n        <tr>\n          <th class=\"has-text-white\" *ngFor=\"let v of valueArray[0] | keys\">{{v.key}}</th>\n        </tr>\n      </thead>\n      <tbody>\n        <tr *ngFor=\"let v of valueArray\">\n          <ng-template #singleArrayValue>\n            <td>{{v}}</td>\n          </ng-template>\n          <ng-container *ngIf=\"v | isObject; else singleArrayValue\">\n            <td *ngFor=\"let vv of v | keys\">{{vv.value}}</td>\n          </ng-container>\n        </tr>\n      </tbody>\n    </table>\n  </div>\n</ng-template>\n\n<ng-template #logStatusDetails let-model=\"model\" let-data=\"data\">\n  <ng-container *bindOnce=\"model\">\n    <div class=\"is-mb-2\">\n      <span>Status:</span>\n      <span class=\"is-pl-1\">{{model.status}}</span>\n    </div>\n\n    <ng-template #showRunOrchestrator>\n      <div class=\"is-run-orchestrator\">\n        <p *ngIf=\"model.logs?.shouldRun\">All the requirements were met to run the model.</p>\n        <p *ngIf=\"!model.logs?.shouldRun\">\n          Some of the requirements were not met to run the model.\n          You can click on the model name on the left to view the debugging logs.\n        </p>\n        <div *ngIf=\"model.logs?.logs?.error\">\n          <p>The model failed to run for the following reason:</p>\n          <p><code>{{model.logs.logs.error}}</code></p>\n        </div>\n      </div>\n    </ng-template>\n\n    <div class=\"is-no-run-orchestrator\" *ngIf=\"model.logs?.shouldRunOrchestrator === false; else showRunOrchestrator\">\n      <ng-container *ngIf=\"!model.logs.runRequired\">\n        <span class=\"is-run-node-type-not-allowed\" *ngIf=\"model.logs.logs?.node_type_allowed === 'False'\">\n          This model should not run for {{nodeType | pluralize:0}}\n        </span>\n      </ng-container>\n\n      <ng-template #runNoConfig>\n        <span class=\"is-run-not-empty\" *ngIf=\"model.logs.logs?.is_empty === 'False'\">\n          The {{data.type || 'blank node'}} with Term <code>{{data.termId}}</code> is already present or already added by another model.\n        </span>\n      </ng-template>\n\n      <ng-container *ngIf=\"model.config; else runNoConfig\">\n        <div class=\"is-run-strategy-{{model.config.runStrategy}}\" [ngSwitch]=\"model.config.runStrategy\">\n          <span *ngSwitchCase=\"'always'\"></span>\n          <span *ngSwitchCase=\"'add_key_if_missing'\">\n            We only gap-fill this key if not present\n          </span>\n          <span *ngSwitchCase=\"'add_blank_node_if_missing'\">\n            We only gap-fill this Blank Node if not present.\n          </span>\n\n          <span class=\"is-run-with-measured\" *ngIf=\"model.config.runArgs?.runNonMeasured && hasMethodTier(data.original, EmissionMethodTier.measured)\">\n            The <code>{{model.config.value}}</code> was already reported as measured.\n          </span>\n        </div>\n      </ng-container>\n    </div>\n\n    <div class=\"is-no-merge-orchestrator\" *ngIf=\"model.logs?.shouldMerge === false\">\n      <p class=\"is-merge-replaceThreshold\" *ngIf=\"model.logs.logs?.replaceThreshold\">\n        <span>The</span>\n        <span class=\"is-pl-1\">{{model.config?.mergeArgs?.replaceThreshold?.[0] || 'value'}}</span>\n        <span class=\"is-pl-1\">from this model was</span>\n        <span class=\"is-pl-1\">\n          <ng-container *ngIf=\"model.config.mergeArgs\">\n            <span class=\"is-pl-1\" *ngIf=\"model.logs.logs.replaceThreshold === 'False'\">less than</span>\n            <span class=\"is-pl-1\" *ngIf=\"model.logs.logs.replaceThreshold === 'True'\">more than</span>\n            <span class=\"is-pl-1\">{{model.config.mergeArgs.replaceThreshold[1] * 100}}%</span>\n          </ng-container>\n          <ng-container *ngIf=\"!model.config.mergeArgs\">\n            <span class=\"is-pl-1\" *ngIf=\"model.logs.logs.replaceThreshold === 'False'\">not sufficiently</span>\n            <span class=\"is-pl-1\" *ngIf=\"model.logs.logs.replaceThreshold === 'True'\">sufficiently</span>\n          </ng-container>\n        </span>\n        <span class=\"is-pl-1\">different from the original</span>\n        <span class=\"is-pl-1\">{{model.config?.mergeArgs?.replaceThreshold?.[0] || 'value'}}.</span>\n      </p>\n    </div>\n    <p class=\"is-merge-replaceLowerTier\" *ngIf=\"model.logs.logs?.replaceLowerTier\">\n      <span>The model <code>methodTier</code> was</span>\n      <span class=\"is-pl-1\" *ngIf=\"model.logs.logs.replaceLowerTier === 'False'\">higher than</span>\n      <span class=\"is-pl-1\" *ngIf=\"model.logs.logs.replaceLowerTier === 'True'\">lower than</span>\n      <span class=\"is-pl-1\">the original <code>methodTier</code></span>\n    </p>\n  </ng-container>\n</ng-template>\n\n<ng-template #docsLink let-model>\n  <a [href]=\"model.apiDocsPath || model.docPath || model.path\" target=\"_blank\"\n    (click)=\"$event.stopPropagation()\"\n  >\n    <span>Docs</span>\n    <fa-icon class=\"ml-1\" icon=\"external-link-alt\" size=\"sm\"></fa-icon>\n  </a>\n</ng-template>\n", styles: [":host{display:block}::ng-deep tr.has-sub-rows td{border-bottom-style:dotted}::ng-deep td he-node-link{width:190px}@media screen and (max-width: 768px){::ng-deep td he-node-link{width:150px}}::ng-deep td .open-node+he-node-link{width:170px}@media screen and (max-width: 768px){::ng-deep td .open-node+he-node-link{width:130px}}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3$1.NgbTypeahead, selector: "input[ngbTypeahead]", inputs: ["autocomplete", "container", "editable", "focusFirst", "inputFormatter", "ngbTypeahead", "resultFormatter", "resultTemplate", "showHint", "placement", "popperOptions", "popupClass"], outputs: ["selectItem"], exportAs: ["ngbTypeahead"] }, { kind: "directive", type: i3$1.NgbPopover, selector: "[ngbPopover]", inputs: ["animation", "autoClose", "ngbPopover", "popoverTitle", "placement", "popperOptions", "triggers", "positionTarget", "container", "disablePopover", "popoverClass", "openDelay", "closeDelay"], outputs: ["shown", "hidden"], exportAs: ["ngbPopover"] }, { kind: "component", type: i3.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { kind: "directive", type: BindOnceDirective, selector: "[bindOnce]", inputs: ["bindOnce"] }, { kind: "component", type: BlankNodeValueDeltaComponent, selector: "he-blank-node-value-delta", inputs: ["value", "originalValue", "displayType"] }, { kind: "component", type: ClipboardComponent, selector: "he-clipboard", inputs: ["value", "disabled", "hideText", "icon", "size", "rotate", "clipboardClass"] }, { kind: "component", type: DataTableComponent, selector: "he-data-table", inputs: ["minHeight", "maxHeight", "nbRows", "small", "height", "width"] }, { kind: "component", type: NodeLinkComponent, selector: "he-node-link", inputs: ["node", "showExternalLink", "linkClass"] }, { kind: "pipe", type: CompoundPipe, name: "compound" }, { kind: "pipe", type: DefaultPipe, name: "default" }, { kind: "pipe", type: KeysPipe, name: "keys" }, { kind: "pipe", type: PluralizePipe, name: "pluralize" }, { kind: "pipe", type: KeyToLabelPipe, name: "keyToLabel" }, { kind: "pipe", type: PrecisionPipe, name: "precision" }, { kind: "pipe", type: TimesPipe, name: "times" }, { kind: "pipe", type: IsArrayPipe, name: "isArray" }, { kind: "pipe", type: IsObjectPipe, name: "isObject" }] });
+NodeLogsModelsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.8", type: NodeLogsModelsComponent, selector: "he-node-logs-models", inputs: { node: "node", nodeKey: "nodeKey", originalValues: "originalValues", recalculatedValues: "recalculatedValues", terms: "terms", filterTermTypes: "filterTermTypes", logsKey: "logsKey" }, ngImport: i0, template: "<div class=\"px-3 pb-3\">\n  <div class=\"has-text-right mb-2\" *ngIf=\"!isExternal\">\n    <a class=\"is-size-7\" *ngIf=\"logsUrl\" [href]=\"logsUrl\" target=\"_blank\">\n      <fa-icon icon=\"external-link-alt\"></fa-icon>\n      <span class=\"pl-2\">Open Full Logs</span>\n    </a>\n  </div>\n\n  <he-data-table class=\"mb-1 is-small\" [small]=\"true\" [nbRows]=\"rowsCount\" maxHeight=\"320\">\n    <table class=\"table is-fullwidth is-narrow is-striped\">\n      <thead>\n        <tr>\n          <th class=\"width-auto has-border-right\">\n            <div class=\"field\">\n              <div class=\"control is-expanded has-icons-right\">\n                <input class=\"input search-input is-small\"\n                  [(ngModel)]=\"term\" name=\"term\"\n                  placeholder=\"Filter by name\"\n                  [ngbTypeahead]=\"suggestTerm\"\n                  [focusFirst]=\"false\"\n                  (selectItem)=\"filterResults()\"\n                >\n                <a class=\"icon is-small is-right\"\n                  [class.is-hidden]=\"!term\"\n                  (click)=\"term = ''; filterResults();\"\n                >\n                  <fa-icon icon=\"times\"></fa-icon>\n                </a>\n              </div>\n            </div>\n          </th>\n          <th>Units</th>\n          <th>Original</th>\n          <th>Recalculated</th>\n          <th>Difference</th>\n          <th *ngFor=\"let c of methodModelsCount | times; let i = index\">({{i + 1}})</th>\n        </tr>\n      </thead>\n      <tbody>\n        <tr *ngIf=\"loading\">\n          <td class=\"has-text-centered\" colspan=\"6\">\n            <div class=\"has-text-center py-3\">\n              <fa-icon icon=\"spinner\" [pulse]=\"true\" size=\"lg\"></fa-icon>\n            </div>\n          </td>\n        </tr>\n        <tr *ngIf=\"!loading && blankNodes.length === 0\">\n          <td class=\"has-text-centered\" colspan=\"6\">\n            <span>No data</span>\n          </td>\n        </tr>\n        <ng-container *ngFor=\"let blankNode of blankNodes; trackBy: trackByBlankNode\">\n          <tr [class.has-sub-rows]=\"blankNode.canOpen\">\n            <td class=\"width-auto has-border-right\" [attr.title]=\"blankNode.term.name\">\n              <a class=\"is-inline-block is-align-top pr-2 open-node\"\n                (click)=\"blankNode.isOpen = !blankNode.isOpen\"\n                *ngIf=\"blankNode.canOpen\"\n              >\n                <fa-icon icon=\"angle-down\" [class.is-hidden]=\"!blankNode.isOpen\"></fa-icon>\n                <fa-icon icon=\"angle-right\" [class.is-hidden]=\"blankNode.isOpen\"></fa-icon>\n              </a>\n              <he-node-link class=\"is-inline-block\" [node]=\"blankNode.term\">\n                <span class=\"is-nowrap has-text-ellipsis\" [innerHtml]=\"blankNode.term.name | compound\"></span>\n              </he-node-link>\n            </td>\n            <td>\n              <span [innerHtml]=\"blankNode.term?.units | compound\"></span>\n            </td>\n            <td>\n              <ng-template #defaultOriginalValue>\n                <span>{{blankNode.originalValue | precision:3 | default:'-'}}</span>\n              </ng-template>\n              <ng-container *ngIf=\"blankNode.allParallel; else defaultOriginalValue\">\n                <div *ngFor=\"let model of blankNode.configModels[0]\">{{blankNode.originalValueByMethodId[model.methodId] | precision:3 | default:'-'}}</div>\n              </ng-container>\n            </td>\n            <td>\n              <ng-container *ngIf=\"!blankNode.isOriginal || blankNode.isRecalculated; else notRecalculated\">\n                <ng-template #defaultRecalculatedValue>\n                  <span>{{blankNode.recalculatedValue | precision:3 | default:'-'}}</span>\n                </ng-template>\n                <ng-container *ngIf=\"blankNode.allParallel; else defaultRecalculatedValue\">\n                  <div *ngFor=\"let model of blankNode.configModels[0]\">{{blankNode.recalculatedValueByMethodId[model.methodId] | precision:3 | default:'-'}}</div>\n                </ng-container>\n              </ng-container>\n            </td>\n            <td class=\"is-nowrap\">\n              <ng-template #defaultDeltaValue>\n                <he-blank-node-value-delta *ngIf=\"blankNode.original.length && blankNode.isRecalculated; else noValue\"\n                  [value]=\"blankNode.recalculatedValue\"\n                  [originalValue]=\"blankNode.originalValue\"\n                ></he-blank-node-value-delta>\n              </ng-template>\n              <ng-container *ngIf=\"blankNode.allParallel; else defaultDeltaValue\">\n                <div *ngFor=\"let model of blankNode.configModels[0]\">\n                  <he-blank-node-value-delta *ngIf=\"blankNode.originalValueByMethodId[model.methodId] !== null && blankNode.recalculatedValueByMethodId[model.methodId] !== null; else noValue\"\n                    [value]=\"blankNode.recalculatedValueByMethodId[model.methodId]\"\n                    [originalValue]=\"blankNode.originalValueByMethodId[model.methodId]\"\n                  ></he-blank-node-value-delta>\n                </div>\n              </ng-container>\n            </td>\n            <ng-container *ngTemplateOutlet=\"blankNodeModels; context: {data: blankNode}\"></ng-container>\n          </tr>\n\n          <tr\n            *ngFor=\"let subValue of blankNode.keys\"\n            [class.is-hidden]=\"!blankNode.isOpen\"\n            [class.has-sub-rows]=\"blankNode.subValues?.length\"\n          >\n            <td class=\"width-auto has-border-right\">\n              <span class=\"is-inline-block is-align-top pl-3 pr-1 field-node\">Field:</span>\n\n              <a class=\"is-inline-block\" *ngIf=\"blankNode.type\"\n                [href]=\"baseUrl + '/schema/' + blankNode.type + '#' + subValue.key\" target=\"_blank\" [title]=\"subValue.key\"\n              >\n                <span class=\"is-nowrap has-text-ellipsis\">{{subValue.key}}</span>\n              </a>\n              <span class=\"is-inline-block is-align-top\" *ngIf=\"!blankNode.type\">{{subValue.key}}</span>\n            </td>\n            <td></td>\n            <td>\n              <span *ngIf=\"subValue.originalValue !== null; else noValue\">{{subValue.originalValue | precision:3 | default:'-'}}</span>\n            </td>\n            <td>\n              <span *ngIf=\"subValue.isRecalculated || subValue.key === 'impactAssessment'; else notRecalculated\">\n                {{subValue.recalculatedValue | precision:3 | default:'-'}}\n              </span>\n            </td>\n            <td>-</td>\n            <ng-container *ngTemplateOutlet=\"blankNodeModels; context: {data: subValue}\"></ng-container>\n          </tr>\n\n          <tr\n            *ngFor=\"let subValue of blankNode.subValues\"\n            [class.is-hidden]=\"!blankNode.isOpen\"\n          >\n            <td class=\"width-auto has-border-right\">\n              <span class=\"is-inline-block is-align-top pl-3\">{{subValue.key | keyToLabel}}</span>\n\n              <ng-container *ngIf=\"subValue.id\">\n                <span class=\"is-inline-block\" class=\"is-inline-block is-align-top pr-1\">:</span>\n\n                <ng-container [ngSwitch]=\"subValue.key\">\n                  <span class=\"is-inline-block\" *ngSwitchCase=\"'backgroundData'\">{{subValue.id | keyToLabel}}</span>\n                  <he-node-link *ngSwitchDefault class=\"is-block pl-4\" [node]=\"termById(subValue.id)\" [attr.title]=\"termById(subValue.id).name\">\n                    <span class=\"is-nowrap has-text-ellipsis\" [innerHtml]=\"termById(subValue.id).name | compound\"></span>\n                  </he-node-link>\n                </ng-container>\n              </ng-container>\n            </td>\n            <td>\n              <span *ngIf=\"subValue.showUnits\" [innerHtml]=\"blankNode.term?.units | compound\"></span>\n            </td>\n            <td>\n              <span *ngIf=\"subValue.originalValue !== null; else noValue\">{{subValue.originalValue | precision:3 | default:'-'}}</span>\n            </td>\n            <td>\n              <span *ngIf=\"subValue.isRecalculated; else notRecalculated\">\n                {{subValue.recalculatedValue | precision:3 | default:'-'}}\n              </span>\n            </td>\n            <td>-</td>\n            <ng-container *ngTemplateOutlet=\"blankNodeModels; context: {data: subValue}\"></ng-container>\n          </tr>\n        </ng-container>\n      </tbody>\n    </table>\n  </he-data-table>\n\n  <div class=\"is-size-7 is-italic\">\n    <div class=\"columns is-variable is-1 my-0\">\n      <div class=\"column is-narrow\">\n        <p>\n          <a class=\"is-inline-block pr-2\"\n            (click)=\"showLegend = !showLegend\"\n          >\n            <fa-icon icon=\"angle-down\" [class.is-hidden]=\"!showLegend\"></fa-icon>\n            <fa-icon icon=\"angle-right\" [class.is-hidden]=\"showLegend\"></fa-icon>\n          </a>\n          <span class=\"is-inline-block\">Legend:</span>\n        </p>\n        <ul class=\"content pl-2\" [class.is-hidden]=\"!showLegend\">\n          <ng-container *ngFor=\"let status of LogStatus | keys\">\n            <li *ngIf=\"logIcon[status.value]\" class=\"has-text-{{logColor[status.value]}}\">\n              <fa-icon [icon]=\"logIcon[status.value]\"></fa-icon>\n              <span class=\"pl-1\">{{status.value}}</span>\n            </li>\n          </ng-container>\n        </ul>\n      </div>\n      <div class=\"column has-text-right\" *ngIf=\"filteredType\">\n        <label class=\"is-inline-block checkbox\">\n          <input type=\"checkbox\" class=\"selector\"\n            [(ngModel)]=\"onlyRequired\"\n            (change)=\"filterResults()\"\n            [disabled]=\"!!term\"\n          >\n          <span class=\"ml-2\">Show only {{filteredType | pluralize}} included in the default Hestia system boundary</span>\n        </label>\n      </div>\n    </div>\n  </div>\n</div>\n\n<ng-template #blankNodeModels let-data=\"data\">\n  <td class=\"blank-node-index-{{i}}\" *ngFor=\"let c of methodModelsCount | times; let i = index\">\n    <ng-container *ngIf=\"getModelsAt(data, i); let models; else noValue\">\n      <ng-template #modelSerie>\n        <ng-container *ngTemplateOutlet=\"blankNodeModel; context: {model:models, data}\"></ng-container>\n      </ng-template>\n      <div *ngIf=\"models | isArray; else modelSerie\">\n        <p *ngFor=\"let model of models\">\n          <ng-container *ngTemplateOutlet=\"blankNodeModel; context: {model, data}\"></ng-container>\n        </p>\n      </div>\n    </ng-container>\n  </td>\n</ng-template>\n\n<ng-template #blankNodeModel let-model=\"model\" let-data=\"data\">\n  <span\n    [class.trigger-popover]=\"model.showLogs\"\n    [ngbPopover]=\"logDetails\" [autoClose]=\"'outside'\" popoverClass=\"is-narrow\"\n    triggers=\"manual\" #p=\"ngbPopover\" placement=\"left\" container=\"body\"\n    (click)=\"p.isOpen() ? p.close() : (model.showLogs ? p.open({ logs: model.logs }) : null)\"\n  >\n    <span class=\"is-capitalized\">{{methodName(model)}}</span>\n    <span class=\"pl-1\" *ngIf=\"model.logs?.methodTier || model.model?.methodTier\">[{{model.logs?.methodTier || model.model?.methodTier}}]</span>\n\n    <span class=\"pl-1 has-text-{{logColor[model.status]}} trigger-popover\"\n      [ngbPopover]=\"logStatusDetails\" [autoClose]=\"'outside'\" popoverClass=\"is-narrow\"\n      triggers=\"manual\" #p1=\"ngbPopover\" placement=\"left\" container=\"body\"\n      (click)=\"$event.stopPropagation(); p1.isOpen() ? p1.close() : p1.open({ model, data })\"\n    >\n      <fa-icon [icon]=\"logIcon[model.status]\"></fa-icon>\n    </span>\n\n    <span class=\"pl-1\" *ngIf=\"model.model\">\n      (<ng-container *ngTemplateOutlet=\"docsLink; context: {$implicit: model.model}\"></ng-container>)\n    </span>\n  </span>\n</ng-template>\n\n<ng-template #noValue>-</ng-template>\n\n<ng-template #notRecalculated>not recalculated</ng-template>\n\n<ng-template #logDetails let-logs=\"logs\">\n  <ng-container *bindOnce=\"logs\">\n    <ng-container *ngIf=\"logs?.requirements\">\n      <div class=\"is-requirement\" *ngFor=\"let key of requirementKeys(logs.requirements)\">\n        <ng-container *ngTemplateOutlet=\"logLine; context:{key, value:logs.requirements[key]}\"></ng-container>\n      </div>\n    </ng-container>\n    <ng-container *ngIf=\"logs?.logs\">\n      <div class=\"is-log\" *ngFor=\"let key of logs.logs | keys\">\n        <ng-container *ngTemplateOutlet=\"logLine; context:key\"></ng-container>\n      </div>\n    </ng-container>\n    <ng-container *ngIf=\"logs?.missingLookups?.length\">\n      <p class=\"mt-2\">Optional data missing:</p>\n\n      <div class=\"table-container data-table-container\">\n        <table class=\"table is-fullwidth mb-0\">\n          <thead>\n            <tr>\n              <th>\n                <span>Filename</span>\n              </th>\n              <th>\n                <span>Column Title</span>\n              </th>\n              <th>\n                <span>Row (term.id)</span>\n              </th>\n            </tr>\n          </thead>\n          <tbody class=\"has-background-black has-text-white\">\n            <tr *ngFor=\"let data of logs.missingLookups\">\n              <td>{{data.filename}}</td>\n              <td>{{data.column}}</td>\n              <td>{{data.termId}}</td>\n            </tr>\n          </tbody>\n        </table>\n      </div>\n    </ng-container>\n  </ng-container>\n</ng-template>\n\n<ng-template #logLineValue let-key=\"key\" let-value=\"value\">\n  <ng-template #defaultValue>\n    <span class=\"is-inline-block is-align-middle\">{{value}}</span>\n  </ng-template>\n  <ng-container *ngIf=\"requirementLinkedNode(key, value); let linkedNode; else defaultValue\">\n    <he-node-link class=\"is-inline-block is-align-middle\" linkClass=\"is-dark\" [node]=\"linkedNode\" [showExternalLink]=\"true\"></he-node-link>\n  </ng-container>\n</ng-template>\n\n<ng-template #logLine let-key=\"key\" let-value=\"value\">\n  <span class=\"is-inline-block is-align-middle\" [ngSwitch]=\"key\">\n    <ng-container *ngSwitchDefault>{{key | keyToLabel}}</ng-container>\n\n    <ng-container *ngSwitchCase=\"'node_type_allowed'\">Is the current <code>Node</code> allowed to run this model</ng-container>\n    <ng-container *ngSwitchCase=\"'siteType_allowed'\">Is the current <code>siteType</code> allowed to run this model</ng-container>\n    <ng-container *ngSwitchCase=\"'primary_product_id_allowed'\">Is the current primary product <code>@id</code> allowed to run this model</ng-container>\n    <ng-container *ngSwitchCase=\"'primary_product_termType_allowed'\">Is the current primary product <code>termType</code> allowed to run this model</ng-container>\n\n    <ng-container *ngSwitchCase=\"'geospatial_data'\">Has geospatial data necessary to run this model</ng-container>\n    <ng-container *ngSwitchCase=\"'contains_geospatial_data'\">Has geospatial data necessary to run this model</ng-container>\n    <ng-container *ngSwitchCase=\"'current_size'\">Current polygon area</ng-container>\n    <ng-container *ngSwitchCase=\"'max_area_size'\">Maximum polygon area to run this model</ng-container>\n    <ng-container *ngSwitchCase=\"'below_max_area_size'\">Polygon below the maximum area</ng-container>\n    <ng-container *ngSwitchCase=\"'region_factor'\">Factor from region lookup</ng-container>\n\n    <ng-container *ngSwitchCase=\"'pesticides_complete'\">Pesticide data are <code>complete</code></ng-container>\n    <ng-container *ngSwitchCase=\"'has_pesticides_inputs'\">Cycle contains <code>pesticideAI</code> Inputs</ng-container>\n    <ng-container *ngSwitchCase=\"'all_pesticideAI_have_lookup_value'\">All <code>pesticideAI</code> Inputs have a lookup value</ng-container>\n\n    <ng-container *ngSwitchCase=\"'has_crop_residue_burnt'\"><code>aboveGroundCropResidueBurnt</code> is present as Product</ng-container>\n\n    <ng-container *ngSwitchCase=\"'liquid_slurry_sludge_P'\">Liquid, Slurry, and Sludge P</ng-container>\n  </span>\n  <he-clipboard class=\"is-inline-block is-align-middle\" clipboardClass=\"is-size-7 is-p-1\" [icon]=\"['far', 'clone']\" [value]=\"key\" [hideText]=\"true\"></he-clipboard>\n  <span class=\"is-pr-1 is-inline-block is-align-middle\">:</span>\n  <ng-template #singleValue>\n    <ng-container *ngTemplateOutlet=\"logLineValue; context:{key,value}\"></ng-container>\n  </ng-template>\n  <div class=\"is-inline-block is-align-middle\" *ngIf=\"logValueArray(value); let valueArray; else singleValue\">\n    <table class=\"table is-bordered has-background-secondary has-text-white\">\n      <thead *ngIf=\"valueArray[0] | isObject\">\n        <tr>\n          <th class=\"has-text-white\" *ngFor=\"let v of valueArray[0] | keys\">{{v.key}}</th>\n        </tr>\n      </thead>\n      <tbody>\n        <tr *ngFor=\"let v of valueArray\">\n          <ng-template #singleArrayValue>\n            <td>{{v}}</td>\n          </ng-template>\n          <ng-container *ngIf=\"v | isObject; else singleArrayValue\">\n            <td *ngFor=\"let vv of v | keys\">{{vv.value}}</td>\n          </ng-container>\n        </tr>\n      </tbody>\n    </table>\n  </div>\n</ng-template>\n\n<ng-template #logStatusDetails let-model=\"model\" let-data=\"data\">\n  <ng-container *bindOnce=\"model\">\n    <div class=\"is-mb-2\">\n      <span>Status:</span>\n      <span class=\"is-pl-1\">{{model.status}}</span>\n    </div>\n\n    <ng-template #showRunOrchestrator>\n      <div class=\"is-run-orchestrator\">\n        <p *ngIf=\"model.logs?.shouldRun\">All the requirements were met to run the model.</p>\n        <p *ngIf=\"!model.logs?.shouldRun\">\n          Some of the requirements were not met to run the model.\n          You can click on the model name on the left to view the debugging logs.\n        </p>\n        <div *ngIf=\"model.logs?.logs?.error\">\n          <p>The model failed to run for the following reason:</p>\n          <p><code>{{model.logs.logs.error}}</code></p>\n        </div>\n      </div>\n    </ng-template>\n\n    <div class=\"is-no-run-orchestrator\" *ngIf=\"model.logs?.shouldRunOrchestrator === false; else showRunOrchestrator\">\n      <ng-container *ngIf=\"!model.logs.runRequired\">\n        <span class=\"is-run-node-type-not-allowed\" *ngIf=\"model.logs.logs?.node_type_allowed === 'False'\">\n          This model should not run for {{nodeType | pluralize:0}}\n        </span>\n      </ng-container>\n\n      <ng-template #runNoConfig>\n        <span class=\"is-run-not-empty\" *ngIf=\"model.logs.logs?.is_empty === 'False'\">\n          The {{data.type || 'blank node'}} with Term <code>{{data.termId}}</code> is already present or already added by another model.\n        </span>\n      </ng-template>\n\n      <ng-container *ngIf=\"model.config; else runNoConfig\">\n        <div class=\"is-run-strategy-{{model.config.runStrategy}}\" [ngSwitch]=\"model.config.runStrategy\">\n          <span *ngSwitchCase=\"'always'\"></span>\n          <span *ngSwitchCase=\"'add_key_if_missing'\">\n            We only gap-fill this key if not present\n          </span>\n          <span *ngSwitchCase=\"'add_blank_node_if_missing'\">\n            We only gap-fill this Blank Node if not present.\n          </span>\n\n          <span class=\"is-run-with-measured\" *ngIf=\"model.config.runArgs?.runNonMeasured && hasMethodTier(data.original, EmissionMethodTier.measured)\">\n            The <code>{{model.config.value}}</code> was already reported as measured.\n          </span>\n        </div>\n      </ng-container>\n    </div>\n\n    <div class=\"is-no-merge-orchestrator\" *ngIf=\"model.logs?.shouldMerge === false\">\n      <p class=\"is-merge-replaceThreshold\" *ngIf=\"model.logs.logs?.replaceThreshold\">\n        <span>The</span>\n        <span class=\"is-pl-1\">{{model.config?.mergeArgs?.replaceThreshold?.[0] || 'value'}}</span>\n        <span class=\"is-pl-1\">from this model was</span>\n        <span class=\"is-pl-1\">\n          <ng-container *ngIf=\"model.config.mergeArgs\">\n            <span class=\"is-pl-1\" *ngIf=\"model.logs.logs.replaceThreshold === 'False'\">less than</span>\n            <span class=\"is-pl-1\" *ngIf=\"model.logs.logs.replaceThreshold === 'True'\">more than</span>\n            <span class=\"is-pl-1\">{{model.config.mergeArgs.replaceThreshold[1] * 100}}%</span>\n          </ng-container>\n          <ng-container *ngIf=\"!model.config.mergeArgs\">\n            <span class=\"is-pl-1\" *ngIf=\"model.logs.logs.replaceThreshold === 'False'\">not sufficiently</span>\n            <span class=\"is-pl-1\" *ngIf=\"model.logs.logs.replaceThreshold === 'True'\">sufficiently</span>\n          </ng-container>\n        </span>\n        <span class=\"is-pl-1\">different from the original</span>\n        <span class=\"is-pl-1\">{{model.config?.mergeArgs?.replaceThreshold?.[0] || 'value'}}.</span>\n      </p>\n    </div>\n    <p class=\"is-merge-replaceLowerTier\" *ngIf=\"model.logs.logs?.replaceLowerTier\">\n      <span>The model <code>methodTier</code> was</span>\n      <span class=\"is-pl-1\" *ngIf=\"model.logs.logs.replaceLowerTier === 'False'\">higher than</span>\n      <span class=\"is-pl-1\" *ngIf=\"model.logs.logs.replaceLowerTier === 'True'\">lower than</span>\n      <span class=\"is-pl-1\">the original <code>methodTier</code></span>\n    </p>\n  </ng-container>\n</ng-template>\n\n<ng-template #docsLink let-model>\n  <a [href]=\"model.apiDocsPath || model.docPath || model.path\" target=\"_blank\"\n    (click)=\"$event.stopPropagation()\"\n  >\n    <span>Docs</span>\n    <fa-icon class=\"ml-1\" icon=\"external-link-alt\" size=\"sm\"></fa-icon>\n  </a>\n</ng-template>\n", styles: [":host{display:block}::ng-deep tr.has-sub-rows td{border-bottom-style:dotted}::ng-deep td he-node-link{width:190px}@media screen and (max-width: 768px){::ng-deep td he-node-link{width:150px}}::ng-deep td .open-node+he-node-link{width:170px}@media screen and (max-width: 768px){::ng-deep td .open-node+he-node-link{width:130px}}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3$1.NgbTypeahead, selector: "input[ngbTypeahead]", inputs: ["autocomplete", "container", "editable", "focusFirst", "inputFormatter", "ngbTypeahead", "resultFormatter", "resultTemplate", "showHint", "placement", "popperOptions", "popupClass"], outputs: ["selectItem"], exportAs: ["ngbTypeahead"] }, { kind: "directive", type: i3$1.NgbPopover, selector: "[ngbPopover]", inputs: ["animation", "autoClose", "ngbPopover", "popoverTitle", "placement", "popperOptions", "triggers", "positionTarget", "container", "disablePopover", "popoverClass", "openDelay", "closeDelay"], outputs: ["shown", "hidden"], exportAs: ["ngbPopover"] }, { kind: "component", type: i3.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { kind: "directive", type: BindOnceDirective, selector: "[bindOnce]", inputs: ["bindOnce"] }, { kind: "component", type: BlankNodeValueDeltaComponent, selector: "he-blank-node-value-delta", inputs: ["value", "originalValue", "displayType"] }, { kind: "component", type: ClipboardComponent, selector: "he-clipboard", inputs: ["value", "disabled", "hideText", "icon", "size", "rotate", "clipboardClass"] }, { kind: "component", type: DataTableComponent, selector: "he-data-table", inputs: ["minHeight", "maxHeight", "nbRows", "small", "height", "width"] }, { kind: "component", type: NodeLinkComponent, selector: "he-node-link", inputs: ["node", "showExternalLink", "linkClass"] }, { kind: "pipe", type: CompoundPipe, name: "compound" }, { kind: "pipe", type: DefaultPipe, name: "default" }, { kind: "pipe", type: KeysPipe, name: "keys" }, { kind: "pipe", type: PluralizePipe, name: "pluralize" }, { kind: "pipe", type: KeyToLabelPipe, name: "keyToLabel" }, { kind: "pipe", type: PrecisionPipe, name: "precision" }, { kind: "pipe", type: TimesPipe, name: "times" }, { kind: "pipe", type: IsArrayPipe, name: "isArray" }, { kind: "pipe", type: IsObjectPipe, name: "isObject" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: NodeLogsModelsComponent, decorators: [{
             type: Component$1,
-            args: [{ selector: 'he-node-logs-models', template: "<div class=\"px-3 pb-3\">\n  <div class=\"has-text-right mb-2\" *ngIf=\"!isExternal\">\n    <a class=\"is-size-7\" *ngIf=\"logsUrl\" [href]=\"logsUrl\" target=\"_blank\">\n      <fa-icon icon=\"external-link-alt\"></fa-icon>\n      <span class=\"pl-2\">Open Full Logs</span>\n    </a>\n  </div>\n\n  <he-data-table class=\"mb-1 is-small\" [small]=\"true\" [nbRows]=\"rowsCount\" maxHeight=\"320\">\n    <table class=\"table is-fullwidth is-narrow is-striped\">\n      <thead>\n        <tr>\n          <th class=\"width-auto has-border-right\">\n            <div class=\"field\">\n              <div class=\"control is-expanded has-icons-right\">\n                <input class=\"input search-input is-small\"\n                  [(ngModel)]=\"term\" name=\"term\"\n                  placeholder=\"Filter by name\"\n                  [ngbTypeahead]=\"suggestTerm\"\n                  [focusFirst]=\"false\"\n                  (selectItem)=\"filterResults()\"\n                >\n                <a class=\"icon is-small is-right\"\n                  [class.is-hidden]=\"!term\"\n                  (click)=\"term = ''; filterResults();\"\n                >\n                  <fa-icon icon=\"times\"></fa-icon>\n                </a>\n              </div>\n            </div>\n          </th>\n          <th>Units</th>\n          <th>Original</th>\n          <th>Recalculated</th>\n          <th>Difference</th>\n          <th *ngFor=\"let c of methodModelsCount | times; let i = index\">({{i + 1}})</th>\n        </tr>\n      </thead>\n      <tbody>\n        <tr *ngIf=\"loading\">\n          <td class=\"has-text-centered\" colspan=\"6\">\n            <div class=\"has-text-center py-3\">\n              <fa-icon icon=\"spinner\" [pulse]=\"true\" size=\"lg\"></fa-icon>\n            </div>\n          </td>\n        </tr>\n        <tr *ngIf=\"!loading && blankNodes.length === 0\">\n          <td class=\"has-text-centered\" colspan=\"6\">\n            <span>No data</span>\n          </td>\n        </tr>\n        <ng-container *ngFor=\"let blankNode of blankNodes; trackBy: trackByBlankNode\">\n          <tr [class.has-sub-rows]=\"blankNode.canOpen\">\n            <td class=\"width-auto has-border-right\" [attr.title]=\"blankNode.term.name\">\n              <a class=\"is-inline-block is-align-top pr-2 open-node\"\n                (click)=\"blankNode.isOpen = !blankNode.isOpen\"\n                *ngIf=\"blankNode.canOpen\"\n              >\n                <fa-icon icon=\"angle-down\" [class.is-hidden]=\"!blankNode.isOpen\"></fa-icon>\n                <fa-icon icon=\"angle-right\" [class.is-hidden]=\"blankNode.isOpen\"></fa-icon>\n              </a>\n              <he-node-link class=\"is-inline-block\" [node]=\"blankNode.term\">\n                <span class=\"is-nowrap has-text-ellipsis\" [innerHtml]=\"blankNode.term.name | compound\"></span>\n              </he-node-link>\n            </td>\n            <td>\n              <span [innerHtml]=\"blankNode.term?.units | compound\"></span>\n            </td>\n            <td>\n              <ng-template #defaultOriginalValue>\n                <span>{{blankNode.originalValue | precision:3 | default:'-'}}</span>\n              </ng-template>\n              <ng-container *ngIf=\"blankNode.allParallel; else defaultOriginalValue\">\n                <div *ngFor=\"let model of blankNode.configModels[0]\">{{blankNode.originalValueByMethodId[model.methodId] | precision:3 | default:'-'}}</div>\n              </ng-container>\n            </td>\n            <td>\n              <ng-container *ngIf=\"!blankNode.isOriginal || blankNode.isRecalculated; else notRecalculated\">\n                <ng-template #defaultRecalculatedValue>\n                  <span>{{blankNode.recalculatedValue | precision:3 | default:'-'}}</span>\n                </ng-template>\n                <ng-container *ngIf=\"blankNode.allParallel; else defaultRecalculatedValue\">\n                  <div *ngFor=\"let model of blankNode.configModels[0]\">{{blankNode.recalculatedValueByMethodId[model.methodId] | precision:3 | default:'-'}}</div>\n                </ng-container>\n              </ng-container>\n            </td>\n            <td class=\"is-nowrap\">\n              <ng-template #defaultDeltaValue>\n                <he-blank-node-value-delta *ngIf=\"blankNode.original.length && blankNode.isRecalculated; else noValue\"\n                  [value]=\"blankNode.recalculatedValue\"\n                  [originalValue]=\"blankNode.originalValue\"\n                ></he-blank-node-value-delta>\n              </ng-template>\n              <ng-container *ngIf=\"blankNode.allParallel; else defaultDeltaValue\">\n                <div *ngFor=\"let model of blankNode.configModels[0]\">\n                  <he-blank-node-value-delta *ngIf=\"blankNode.originalValueByMethodId[model.methodId] !== null && blankNode.recalculatedValueByMethodId[model.methodId] !== null; else noValue\"\n                    [value]=\"blankNode.recalculatedValueByMethodId[model.methodId]\"\n                    [originalValue]=\"blankNode.originalValueByMethodId[model.methodId]\"\n                  ></he-blank-node-value-delta>\n                </div>\n              </ng-container>\n            </td>\n            <ng-container *ngTemplateOutlet=\"blankNodeModels; context: {data: blankNode}\"></ng-container>\n          </tr>\n\n          <tr\n            *ngFor=\"let subValue of blankNode.keys\"\n            [class.is-hidden]=\"!blankNode.isOpen\"\n            [class.has-sub-rows]=\"blankNode.subValues?.length\"\n          >\n            <td class=\"width-auto has-border-right\">\n              <span class=\"is-inline-block is-align-top pl-3 pr-1 field-node\">Field:</span>\n\n              <a class=\"is-inline-block\" *ngIf=\"blankNode.type\"\n                [href]=\"baseUrl + '/schema/' + blankNode.type + '#' + subValue.key\" target=\"_blank\" [title]=\"subValue.key\"\n              >\n                <span class=\"is-nowrap has-text-ellipsis\">{{subValue.key}}</span>\n              </a>\n              <span class=\"is-inline-block is-align-top\" *ngIf=\"!blankNode.type\">{{subValue.key}}</span>\n            </td>\n            <td></td>\n            <td>\n              <span *ngIf=\"subValue.originalValue !== null; else noValue\">{{subValue.originalValue | precision:3 | default:'-'}}</span>\n            </td>\n            <td>\n              <span *ngIf=\"subValue.isRecalculated || subValue.key === 'impactAssessment'; else notRecalculated\">\n                {{subValue.recalculatedValue | precision:3 | default:'-'}}\n              </span>\n            </td>\n            <td>-</td>\n            <ng-container *ngTemplateOutlet=\"blankNodeModels; context: {data: subValue}\"></ng-container>\n          </tr>\n\n          <tr\n            *ngFor=\"let subValue of blankNode.subValues\"\n            [class.is-hidden]=\"!blankNode.isOpen\"\n          >\n            <td class=\"width-auto has-border-right\">\n              <span class=\"is-inline-block is-align-top pl-3\">{{subValue.key | keyToLabel}}</span>\n\n              <ng-container *ngIf=\"subValue.id\">\n                <span class=\"is-inline-block\" class=\"is-inline-block is-align-top pr-1\">:</span>\n\n                <ng-container [ngSwitch]=\"subValue.key\">\n                  <span class=\"is-inline-block\" *ngSwitchCase=\"'backgroundData'\">{{subValue.id | keyToLabel}}</span>\n                  <he-node-link *ngSwitchDefault class=\"is-block pl-4\" [node]=\"termById(subValue.id)\" [attr.title]=\"termById(subValue.id).name\">\n                    <span class=\"is-nowrap has-text-ellipsis\" [innerHtml]=\"termById(subValue.id).name | compound\"></span>\n                  </he-node-link>\n                </ng-container>\n              </ng-container>\n            </td>\n            <td>\n              <span *ngIf=\"subValue.showUnits\" [innerHtml]=\"blankNode.term?.units | compound\"></span>\n            </td>\n            <td>\n              <span *ngIf=\"subValue.originalValue !== null; else noValue\">{{subValue.originalValue | precision:3 | default:'-'}}</span>\n            </td>\n            <td>\n              <span *ngIf=\"subValue.isRecalculated; else notRecalculated\">\n                {{subValue.recalculatedValue | precision:3 | default:'-'}}\n              </span>\n            </td>\n            <td>-</td>\n            <ng-container *ngTemplateOutlet=\"blankNodeModels; context: {data: subValue}\"></ng-container>\n          </tr>\n        </ng-container>\n      </tbody>\n    </table>\n  </he-data-table>\n\n  <div class=\"is-size-7 is-italic\">\n    <div class=\"columns is-variable is-1 my-0\">\n      <div class=\"column is-narrow\">\n        <p>\n          <a class=\"is-inline-block pr-2\"\n            (click)=\"showLegend = !showLegend\"\n          >\n            <fa-icon icon=\"angle-down\" [class.is-hidden]=\"!showLegend\"></fa-icon>\n            <fa-icon icon=\"angle-right\" [class.is-hidden]=\"showLegend\"></fa-icon>\n          </a>\n          <span class=\"is-inline-block\">Legend:</span>\n        </p>\n        <ul class=\"content pl-2\" [class.is-hidden]=\"!showLegend\">\n          <ng-container *ngFor=\"let status of LogStatus | keys\">\n            <li *ngIf=\"logIcon[status.value]\" class=\"has-text-{{logColor[status.value]}}\">\n              <fa-icon [icon]=\"logIcon[status.value]\"></fa-icon>\n              <span class=\"pl-1\">{{status.value}}</span>\n            </li>\n          </ng-container>\n        </ul>\n      </div>\n      <div class=\"column has-text-right\" *ngIf=\"filteredType\">\n        <label class=\"is-inline-block checkbox\">\n          <input type=\"checkbox\" class=\"selector\"\n            [(ngModel)]=\"onlyRequired\"\n            (change)=\"filterResults()\"\n            [disabled]=\"!!term\"\n          >\n          <span class=\"ml-2\">Show only {{filteredType | pluralize}} included in the default Hestia system boundary</span>\n        </label>\n      </div>\n    </div>\n  </div>\n</div>\n\n<ng-template #blankNodeModels let-data=\"data\">\n  <td class=\"blank-node-index-{{i}}\" *ngFor=\"let c of methodModelsCount | times; let i = index\">\n    <ng-container *ngIf=\"getModelsAt(data, i); let models; else noValue\">\n      <ng-template #modelSerie>\n        <ng-container *ngTemplateOutlet=\"blankNodeModel; context: {model:models, data}\"></ng-container>\n      </ng-template>\n      <div *ngIf=\"models | isArray; else modelSerie\">\n        <p *ngFor=\"let model of models\">\n          <ng-container *ngTemplateOutlet=\"blankNodeModel; context: {model, data}\"></ng-container>\n        </p>\n      </div>\n    </ng-container>\n  </td>\n</ng-template>\n\n<ng-template #blankNodeModel let-model=\"model\" let-data=\"data\">\n  <span\n    [class.trigger-popover]=\"model.showLogs\"\n    [ngbPopover]=\"logDetails\" [autoClose]=\"'outside'\" popoverClass=\"is-narrow\"\n    triggers=\"manual\" #p=\"ngbPopover\" placement=\"left\" container=\"body\"\n    (click)=\"p.isOpen() ? p.close() : (model.showLogs ? p.open({ logs: model.logs }) : null)\"\n  >\n    <span class=\"is-capitalized\">{{methodName(model)}}</span>\n    <span class=\"pl-1\" *ngIf=\"model.logs?.methodTier || model.model?.methodTier\">[{{model.logs?.methodTier || model.model?.methodTier}}]</span>\n\n    <span class=\"pl-1 has-text-{{logColor[model.status]}} trigger-popover\"\n      [ngbPopover]=\"logStatusDetails\" [autoClose]=\"'outside'\" popoverClass=\"is-narrow\"\n      triggers=\"manual\" #p1=\"ngbPopover\" placement=\"left\" container=\"body\"\n      (click)=\"$event.stopPropagation(); p1.isOpen() ? p1.close() : p1.open({ model, data })\"\n    >\n      <fa-icon [icon]=\"logIcon[model.status]\"></fa-icon>\n    </span>\n\n    <span class=\"pl-1\" *ngIf=\"model.model\">\n      (<ng-container *ngTemplateOutlet=\"docsLink; context: {$implicit: model.model}\"></ng-container>)\n    </span>\n  </span>\n</ng-template>\n\n<ng-template #noValue>-</ng-template>\n\n<ng-template #notRecalculated>not recalculated</ng-template>\n\n<ng-template #logDetails let-logs=\"logs\">\n  <ng-container *bindOnce=\"logs\">\n    <ng-container *ngIf=\"logs?.requirements\">\n      <div class=\"is-requirement\" *ngFor=\"let key of requirementKeys(logs.requirements)\">\n        <ng-container *ngTemplateOutlet=\"logLine; context:{key, value:logs.requirements[key]}\"></ng-container>\n      </div>\n    </ng-container>\n    <ng-container *ngIf=\"logs?.logs\">\n      <div class=\"is-log\" *ngFor=\"let key of logs.logs | keys\">\n        <ng-container *ngTemplateOutlet=\"logLine; context:key\"></ng-container>\n      </div>\n    </ng-container>\n    <ng-container *ngIf=\"logs?.missingLookups?.length\">\n      <p class=\"mt-2\">Optional data missing:</p>\n\n      <div class=\"table-container data-table-container\">\n        <table class=\"table is-fullwidth mb-0\">\n          <thead>\n            <tr>\n              <th>\n                <span>Filename</span>\n              </th>\n              <th>\n                <span>Column Title</span>\n              </th>\n              <th>\n                <span>Row (term.id)</span>\n              </th>\n            </tr>\n          </thead>\n          <tbody class=\"has-background-black has-text-white\">\n            <tr *ngFor=\"let data of logs.missingLookups\">\n              <td>{{data.filename}}</td>\n              <td>{{data.column}}</td>\n              <td>{{data.termId}}</td>\n            </tr>\n          </tbody>\n        </table>\n      </div>\n    </ng-container>\n  </ng-container>\n</ng-template>\n\n<ng-template #logLineValue let-key=\"key\" let-value=\"value\">\n  <ng-template #defaultValue>\n    <span class=\"is-inline-block is-align-middle\">{{value}}</span>\n  </ng-template>\n  <ng-container *ngIf=\"requirementLinkedNode(key, value); let linkedNode; else defaultValue\">\n    <he-node-link class=\"is-inline-block is-align-middle\" linkClass=\"is-dark\" [node]=\"linkedNode\" [showExternalLink]=\"true\"></he-node-link>\n  </ng-container>\n</ng-template>\n\n<ng-template #logLine let-key=\"key\" let-value=\"value\">\n  <span class=\"is-inline-block is-align-middle\" [ngSwitch]=\"key\">\n    <ng-container *ngSwitchDefault>{{key | keyToLabel}}</ng-container>\n\n    <ng-container *ngSwitchCase=\"'node_type_allowed'\">Is the current <code>Node</code> allowed to run this model</ng-container>\n    <ng-container *ngSwitchCase=\"'siteType_allowed'\">Is the current <code>siteType</code> allowed to run this model</ng-container>\n    <ng-container *ngSwitchCase=\"'primary_product_id_allowed'\">Is the current primary product <code>@id</code> allowed to run this model</ng-container>\n    <ng-container *ngSwitchCase=\"'primary_product_termType_allowed'\">Is the current primary product <code>termType</code> allowed to run this model</ng-container>\n\n    <ng-container *ngSwitchCase=\"'geospatial_data'\">Has geospatial data necessary to run this model</ng-container>\n    <ng-container *ngSwitchCase=\"'contains_geospatial_data'\">Has geospatial data necessary to run this model</ng-container>\n    <ng-container *ngSwitchCase=\"'current_size'\">Current polygon area</ng-container>\n    <ng-container *ngSwitchCase=\"'max_area_size'\">Maximum polygon area to run this model</ng-container>\n    <ng-container *ngSwitchCase=\"'below_max_area_size'\">Polygon below the maximum area</ng-container>\n    <ng-container *ngSwitchCase=\"'region_factor'\">Factor from region lookup</ng-container>\n\n    <ng-container *ngSwitchCase=\"'pesticides_complete'\">Pesticide data are <code>complete</code></ng-container>\n    <ng-container *ngSwitchCase=\"'has_pesticides_inputs'\">Cycle contains <code>pesticideAI</code> Inputs</ng-container>\n    <ng-container *ngSwitchCase=\"'all_pesticideAI_have_lookup_value'\">All <code>pesticideAI</code> Inputs have a lookup value</ng-container>\n\n    <ng-container *ngSwitchCase=\"'has_aboveGroundCropResidueBurnt'\"><code>aboveGroundCropResidueBurnt</code> is present as Product</ng-container>\n\n    <ng-container *ngSwitchCase=\"'liquid_slurry_sludge_P'\">Liquid, Slurry, and Sludge P</ng-container>\n  </span>\n  <he-clipboard class=\"is-inline-block is-align-middle\" clipboardClass=\"is-size-7 is-p-1\" [icon]=\"['far', 'clone']\" [value]=\"key\" [hideText]=\"true\"></he-clipboard>\n  <span class=\"is-pr-1 is-inline-block is-align-middle\">:</span>\n  <ng-template #singleValue>\n    <ng-container *ngTemplateOutlet=\"logLineValue; context:{key,value}\"></ng-container>\n  </ng-template>\n  <div class=\"is-inline-block is-align-middle\" *ngIf=\"logValueArray(value); let valueArray; else singleValue\">\n    <table class=\"table is-bordered has-background-secondary has-text-white\">\n      <thead *ngIf=\"valueArray[0] | isObject\">\n        <tr>\n          <th class=\"has-text-white\" *ngFor=\"let v of valueArray[0] | keys\">{{v.key}}</th>\n        </tr>\n      </thead>\n      <tbody>\n        <tr *ngFor=\"let v of valueArray\">\n          <ng-template #singleArrayValue>\n            <td>{{v}}</td>\n          </ng-template>\n          <ng-container *ngIf=\"v | isObject; else singleArrayValue\">\n            <td *ngFor=\"let vv of v | keys\">{{vv.value}}</td>\n          </ng-container>\n        </tr>\n      </tbody>\n    </table>\n  </div>\n</ng-template>\n\n<ng-template #logStatusDetails let-model=\"model\" let-data=\"data\">\n  <ng-container *bindOnce=\"model\">\n    <div class=\"is-mb-2\">\n      <span>Status:</span>\n      <span class=\"is-pl-1\">{{model.status}}</span>\n    </div>\n\n    <ng-template #showRunOrchestrator>\n      <div class=\"is-run-orchestrator\">\n        <p *ngIf=\"model.logs?.shouldRun\">All the requirements were met to run the model.</p>\n        <p *ngIf=\"!model.logs?.shouldRun\">\n          Some of the requirements were not met to run the model.\n          You can click on the model name on the left to view the debugging logs.\n        </p>\n        <div *ngIf=\"model.logs?.logs?.error\">\n          <p>The model failed to run for the following reason:</p>\n          <p><code>{{model.logs.logs.error}}</code></p>\n        </div>\n      </div>\n    </ng-template>\n\n    <div class=\"is-no-run-orchestrator\" *ngIf=\"model.logs?.shouldRunOrchestrator === false; else showRunOrchestrator\">\n      <ng-container *ngIf=\"!model.logs.runRequired\">\n        <span class=\"is-run-node-type-not-allowed\" *ngIf=\"model.logs.logs?.node_type_allowed === 'False'\">\n          This model should not run for {{nodeType | pluralize:0}}\n        </span>\n      </ng-container>\n\n      <ng-template #runNoConfig>\n        <span class=\"is-run-not-empty\" *ngIf=\"model.logs.logs?.is_empty === 'False'\">\n          The {{data.type || 'blank node'}} with Term <code>{{data.termId}}</code> is already present or already added by another model.\n        </span>\n      </ng-template>\n\n      <ng-container *ngIf=\"model.config; else runNoConfig\">\n        <div class=\"is-run-strategy-{{model.config.runStrategy}}\" [ngSwitch]=\"model.config.runStrategy\">\n          <span *ngSwitchCase=\"'always'\"></span>\n          <span *ngSwitchCase=\"'add_key_if_missing'\">\n            We only gap-fill this key if not present\n          </span>\n          <span *ngSwitchCase=\"'add_blank_node_if_missing'\">\n            We only gap-fill this Blank Node if not present.\n          </span>\n\n          <span class=\"is-run-with-measured\" *ngIf=\"model.config.runArgs?.runNonMeasured && hasMethodTier(data.original, EmissionMethodTier.measured)\">\n            The <code>{{model.config.value}}</code> was already reported as measured.\n          </span>\n        </div>\n      </ng-container>\n    </div>\n\n    <div class=\"is-no-merge-orchestrator\" *ngIf=\"model.logs?.shouldMerge === false\">\n      <p class=\"is-merge-replaceThreshold\" *ngIf=\"model.logs.logs?.replaceThreshold\">\n        <span>The</span>\n        <span class=\"is-pl-1\">{{model.config?.mergeArgs?.replaceThreshold?.[0] || 'value'}}</span>\n        <span class=\"is-pl-1\">from this model was</span>\n        <span class=\"is-pl-1\">\n          <ng-container *ngIf=\"model.config.mergeArgs\">\n            <span class=\"is-pl-1\" *ngIf=\"model.logs.logs.replaceThreshold === 'False'\">less than</span>\n            <span class=\"is-pl-1\" *ngIf=\"model.logs.logs.replaceThreshold === 'True'\">more than</span>\n            <span class=\"is-pl-1\">{{model.config.mergeArgs.replaceThreshold[1] * 100}}%</span>\n          </ng-container>\n          <ng-container *ngIf=\"!model.config.mergeArgs\">\n            <span class=\"is-pl-1\" *ngIf=\"model.logs.logs.replaceThreshold === 'False'\">not sufficiently</span>\n            <span class=\"is-pl-1\" *ngIf=\"model.logs.logs.replaceThreshold === 'True'\">sufficiently</span>\n          </ng-container>\n        </span>\n        <span class=\"is-pl-1\">different from the original</span>\n        <span class=\"is-pl-1\">{{model.config?.mergeArgs?.replaceThreshold?.[0] || 'value'}}.</span>\n      </p>\n    </div>\n    <p class=\"is-merge-replaceLowerTier\" *ngIf=\"model.logs.logs?.replaceLowerTier\">\n      <span>The model <code>methodTier</code> was</span>\n      <span class=\"is-pl-1\" *ngIf=\"model.logs.logs.replaceLowerTier === 'False'\">higher than</span>\n      <span class=\"is-pl-1\" *ngIf=\"model.logs.logs.replaceLowerTier === 'True'\">lower than</span>\n      <span class=\"is-pl-1\">the original <code>methodTier</code></span>\n    </p>\n  </ng-container>\n</ng-template>\n\n<ng-template #docsLink let-model>\n  <a [href]=\"model.apiDocsPath || model.docPath || model.path\" target=\"_blank\"\n    (click)=\"$event.stopPropagation()\"\n  >\n    <span>Docs</span>\n    <fa-icon class=\"ml-1\" icon=\"external-link-alt\" size=\"sm\"></fa-icon>\n  </a>\n</ng-template>\n", styles: [":host{display:block}::ng-deep tr.has-sub-rows td{border-bottom-style:dotted}::ng-deep td he-node-link{width:190px}@media screen and (max-width: 768px){::ng-deep td he-node-link{width:150px}}::ng-deep td .open-node+he-node-link{width:170px}@media screen and (max-width: 768px){::ng-deep td .open-node+he-node-link{width:130px}}\n"] }]
+            args: [{ selector: 'he-node-logs-models', template: "<div class=\"px-3 pb-3\">\n  <div class=\"has-text-right mb-2\" *ngIf=\"!isExternal\">\n    <a class=\"is-size-7\" *ngIf=\"logsUrl\" [href]=\"logsUrl\" target=\"_blank\">\n      <fa-icon icon=\"external-link-alt\"></fa-icon>\n      <span class=\"pl-2\">Open Full Logs</span>\n    </a>\n  </div>\n\n  <he-data-table class=\"mb-1 is-small\" [small]=\"true\" [nbRows]=\"rowsCount\" maxHeight=\"320\">\n    <table class=\"table is-fullwidth is-narrow is-striped\">\n      <thead>\n        <tr>\n          <th class=\"width-auto has-border-right\">\n            <div class=\"field\">\n              <div class=\"control is-expanded has-icons-right\">\n                <input class=\"input search-input is-small\"\n                  [(ngModel)]=\"term\" name=\"term\"\n                  placeholder=\"Filter by name\"\n                  [ngbTypeahead]=\"suggestTerm\"\n                  [focusFirst]=\"false\"\n                  (selectItem)=\"filterResults()\"\n                >\n                <a class=\"icon is-small is-right\"\n                  [class.is-hidden]=\"!term\"\n                  (click)=\"term = ''; filterResults();\"\n                >\n                  <fa-icon icon=\"times\"></fa-icon>\n                </a>\n              </div>\n            </div>\n          </th>\n          <th>Units</th>\n          <th>Original</th>\n          <th>Recalculated</th>\n          <th>Difference</th>\n          <th *ngFor=\"let c of methodModelsCount | times; let i = index\">({{i + 1}})</th>\n        </tr>\n      </thead>\n      <tbody>\n        <tr *ngIf=\"loading\">\n          <td class=\"has-text-centered\" colspan=\"6\">\n            <div class=\"has-text-center py-3\">\n              <fa-icon icon=\"spinner\" [pulse]=\"true\" size=\"lg\"></fa-icon>\n            </div>\n          </td>\n        </tr>\n        <tr *ngIf=\"!loading && blankNodes.length === 0\">\n          <td class=\"has-text-centered\" colspan=\"6\">\n            <span>No data</span>\n          </td>\n        </tr>\n        <ng-container *ngFor=\"let blankNode of blankNodes; trackBy: trackByBlankNode\">\n          <tr [class.has-sub-rows]=\"blankNode.canOpen\">\n            <td class=\"width-auto has-border-right\" [attr.title]=\"blankNode.term.name\">\n              <a class=\"is-inline-block is-align-top pr-2 open-node\"\n                (click)=\"blankNode.isOpen = !blankNode.isOpen\"\n                *ngIf=\"blankNode.canOpen\"\n              >\n                <fa-icon icon=\"angle-down\" [class.is-hidden]=\"!blankNode.isOpen\"></fa-icon>\n                <fa-icon icon=\"angle-right\" [class.is-hidden]=\"blankNode.isOpen\"></fa-icon>\n              </a>\n              <he-node-link class=\"is-inline-block\" [node]=\"blankNode.term\">\n                <span class=\"is-nowrap has-text-ellipsis\" [innerHtml]=\"blankNode.term.name | compound\"></span>\n              </he-node-link>\n            </td>\n            <td>\n              <span [innerHtml]=\"blankNode.term?.units | compound\"></span>\n            </td>\n            <td>\n              <ng-template #defaultOriginalValue>\n                <span>{{blankNode.originalValue | precision:3 | default:'-'}}</span>\n              </ng-template>\n              <ng-container *ngIf=\"blankNode.allParallel; else defaultOriginalValue\">\n                <div *ngFor=\"let model of blankNode.configModels[0]\">{{blankNode.originalValueByMethodId[model.methodId] | precision:3 | default:'-'}}</div>\n              </ng-container>\n            </td>\n            <td>\n              <ng-container *ngIf=\"!blankNode.isOriginal || blankNode.isRecalculated; else notRecalculated\">\n                <ng-template #defaultRecalculatedValue>\n                  <span>{{blankNode.recalculatedValue | precision:3 | default:'-'}}</span>\n                </ng-template>\n                <ng-container *ngIf=\"blankNode.allParallel; else defaultRecalculatedValue\">\n                  <div *ngFor=\"let model of blankNode.configModels[0]\">{{blankNode.recalculatedValueByMethodId[model.methodId] | precision:3 | default:'-'}}</div>\n                </ng-container>\n              </ng-container>\n            </td>\n            <td class=\"is-nowrap\">\n              <ng-template #defaultDeltaValue>\n                <he-blank-node-value-delta *ngIf=\"blankNode.original.length && blankNode.isRecalculated; else noValue\"\n                  [value]=\"blankNode.recalculatedValue\"\n                  [originalValue]=\"blankNode.originalValue\"\n                ></he-blank-node-value-delta>\n              </ng-template>\n              <ng-container *ngIf=\"blankNode.allParallel; else defaultDeltaValue\">\n                <div *ngFor=\"let model of blankNode.configModels[0]\">\n                  <he-blank-node-value-delta *ngIf=\"blankNode.originalValueByMethodId[model.methodId] !== null && blankNode.recalculatedValueByMethodId[model.methodId] !== null; else noValue\"\n                    [value]=\"blankNode.recalculatedValueByMethodId[model.methodId]\"\n                    [originalValue]=\"blankNode.originalValueByMethodId[model.methodId]\"\n                  ></he-blank-node-value-delta>\n                </div>\n              </ng-container>\n            </td>\n            <ng-container *ngTemplateOutlet=\"blankNodeModels; context: {data: blankNode}\"></ng-container>\n          </tr>\n\n          <tr\n            *ngFor=\"let subValue of blankNode.keys\"\n            [class.is-hidden]=\"!blankNode.isOpen\"\n            [class.has-sub-rows]=\"blankNode.subValues?.length\"\n          >\n            <td class=\"width-auto has-border-right\">\n              <span class=\"is-inline-block is-align-top pl-3 pr-1 field-node\">Field:</span>\n\n              <a class=\"is-inline-block\" *ngIf=\"blankNode.type\"\n                [href]=\"baseUrl + '/schema/' + blankNode.type + '#' + subValue.key\" target=\"_blank\" [title]=\"subValue.key\"\n              >\n                <span class=\"is-nowrap has-text-ellipsis\">{{subValue.key}}</span>\n              </a>\n              <span class=\"is-inline-block is-align-top\" *ngIf=\"!blankNode.type\">{{subValue.key}}</span>\n            </td>\n            <td></td>\n            <td>\n              <span *ngIf=\"subValue.originalValue !== null; else noValue\">{{subValue.originalValue | precision:3 | default:'-'}}</span>\n            </td>\n            <td>\n              <span *ngIf=\"subValue.isRecalculated || subValue.key === 'impactAssessment'; else notRecalculated\">\n                {{subValue.recalculatedValue | precision:3 | default:'-'}}\n              </span>\n            </td>\n            <td>-</td>\n            <ng-container *ngTemplateOutlet=\"blankNodeModels; context: {data: subValue}\"></ng-container>\n          </tr>\n\n          <tr\n            *ngFor=\"let subValue of blankNode.subValues\"\n            [class.is-hidden]=\"!blankNode.isOpen\"\n          >\n            <td class=\"width-auto has-border-right\">\n              <span class=\"is-inline-block is-align-top pl-3\">{{subValue.key | keyToLabel}}</span>\n\n              <ng-container *ngIf=\"subValue.id\">\n                <span class=\"is-inline-block\" class=\"is-inline-block is-align-top pr-1\">:</span>\n\n                <ng-container [ngSwitch]=\"subValue.key\">\n                  <span class=\"is-inline-block\" *ngSwitchCase=\"'backgroundData'\">{{subValue.id | keyToLabel}}</span>\n                  <he-node-link *ngSwitchDefault class=\"is-block pl-4\" [node]=\"termById(subValue.id)\" [attr.title]=\"termById(subValue.id).name\">\n                    <span class=\"is-nowrap has-text-ellipsis\" [innerHtml]=\"termById(subValue.id).name | compound\"></span>\n                  </he-node-link>\n                </ng-container>\n              </ng-container>\n            </td>\n            <td>\n              <span *ngIf=\"subValue.showUnits\" [innerHtml]=\"blankNode.term?.units | compound\"></span>\n            </td>\n            <td>\n              <span *ngIf=\"subValue.originalValue !== null; else noValue\">{{subValue.originalValue | precision:3 | default:'-'}}</span>\n            </td>\n            <td>\n              <span *ngIf=\"subValue.isRecalculated; else notRecalculated\">\n                {{subValue.recalculatedValue | precision:3 | default:'-'}}\n              </span>\n            </td>\n            <td>-</td>\n            <ng-container *ngTemplateOutlet=\"blankNodeModels; context: {data: subValue}\"></ng-container>\n          </tr>\n        </ng-container>\n      </tbody>\n    </table>\n  </he-data-table>\n\n  <div class=\"is-size-7 is-italic\">\n    <div class=\"columns is-variable is-1 my-0\">\n      <div class=\"column is-narrow\">\n        <p>\n          <a class=\"is-inline-block pr-2\"\n            (click)=\"showLegend = !showLegend\"\n          >\n            <fa-icon icon=\"angle-down\" [class.is-hidden]=\"!showLegend\"></fa-icon>\n            <fa-icon icon=\"angle-right\" [class.is-hidden]=\"showLegend\"></fa-icon>\n          </a>\n          <span class=\"is-inline-block\">Legend:</span>\n        </p>\n        <ul class=\"content pl-2\" [class.is-hidden]=\"!showLegend\">\n          <ng-container *ngFor=\"let status of LogStatus | keys\">\n            <li *ngIf=\"logIcon[status.value]\" class=\"has-text-{{logColor[status.value]}}\">\n              <fa-icon [icon]=\"logIcon[status.value]\"></fa-icon>\n              <span class=\"pl-1\">{{status.value}}</span>\n            </li>\n          </ng-container>\n        </ul>\n      </div>\n      <div class=\"column has-text-right\" *ngIf=\"filteredType\">\n        <label class=\"is-inline-block checkbox\">\n          <input type=\"checkbox\" class=\"selector\"\n            [(ngModel)]=\"onlyRequired\"\n            (change)=\"filterResults()\"\n            [disabled]=\"!!term\"\n          >\n          <span class=\"ml-2\">Show only {{filteredType | pluralize}} included in the default Hestia system boundary</span>\n        </label>\n      </div>\n    </div>\n  </div>\n</div>\n\n<ng-template #blankNodeModels let-data=\"data\">\n  <td class=\"blank-node-index-{{i}}\" *ngFor=\"let c of methodModelsCount | times; let i = index\">\n    <ng-container *ngIf=\"getModelsAt(data, i); let models; else noValue\">\n      <ng-template #modelSerie>\n        <ng-container *ngTemplateOutlet=\"blankNodeModel; context: {model:models, data}\"></ng-container>\n      </ng-template>\n      <div *ngIf=\"models | isArray; else modelSerie\">\n        <p *ngFor=\"let model of models\">\n          <ng-container *ngTemplateOutlet=\"blankNodeModel; context: {model, data}\"></ng-container>\n        </p>\n      </div>\n    </ng-container>\n  </td>\n</ng-template>\n\n<ng-template #blankNodeModel let-model=\"model\" let-data=\"data\">\n  <span\n    [class.trigger-popover]=\"model.showLogs\"\n    [ngbPopover]=\"logDetails\" [autoClose]=\"'outside'\" popoverClass=\"is-narrow\"\n    triggers=\"manual\" #p=\"ngbPopover\" placement=\"left\" container=\"body\"\n    (click)=\"p.isOpen() ? p.close() : (model.showLogs ? p.open({ logs: model.logs }) : null)\"\n  >\n    <span class=\"is-capitalized\">{{methodName(model)}}</span>\n    <span class=\"pl-1\" *ngIf=\"model.logs?.methodTier || model.model?.methodTier\">[{{model.logs?.methodTier || model.model?.methodTier}}]</span>\n\n    <span class=\"pl-1 has-text-{{logColor[model.status]}} trigger-popover\"\n      [ngbPopover]=\"logStatusDetails\" [autoClose]=\"'outside'\" popoverClass=\"is-narrow\"\n      triggers=\"manual\" #p1=\"ngbPopover\" placement=\"left\" container=\"body\"\n      (click)=\"$event.stopPropagation(); p1.isOpen() ? p1.close() : p1.open({ model, data })\"\n    >\n      <fa-icon [icon]=\"logIcon[model.status]\"></fa-icon>\n    </span>\n\n    <span class=\"pl-1\" *ngIf=\"model.model\">\n      (<ng-container *ngTemplateOutlet=\"docsLink; context: {$implicit: model.model}\"></ng-container>)\n    </span>\n  </span>\n</ng-template>\n\n<ng-template #noValue>-</ng-template>\n\n<ng-template #notRecalculated>not recalculated</ng-template>\n\n<ng-template #logDetails let-logs=\"logs\">\n  <ng-container *bindOnce=\"logs\">\n    <ng-container *ngIf=\"logs?.requirements\">\n      <div class=\"is-requirement\" *ngFor=\"let key of requirementKeys(logs.requirements)\">\n        <ng-container *ngTemplateOutlet=\"logLine; context:{key, value:logs.requirements[key]}\"></ng-container>\n      </div>\n    </ng-container>\n    <ng-container *ngIf=\"logs?.logs\">\n      <div class=\"is-log\" *ngFor=\"let key of logs.logs | keys\">\n        <ng-container *ngTemplateOutlet=\"logLine; context:key\"></ng-container>\n      </div>\n    </ng-container>\n    <ng-container *ngIf=\"logs?.missingLookups?.length\">\n      <p class=\"mt-2\">Optional data missing:</p>\n\n      <div class=\"table-container data-table-container\">\n        <table class=\"table is-fullwidth mb-0\">\n          <thead>\n            <tr>\n              <th>\n                <span>Filename</span>\n              </th>\n              <th>\n                <span>Column Title</span>\n              </th>\n              <th>\n                <span>Row (term.id)</span>\n              </th>\n            </tr>\n          </thead>\n          <tbody class=\"has-background-black has-text-white\">\n            <tr *ngFor=\"let data of logs.missingLookups\">\n              <td>{{data.filename}}</td>\n              <td>{{data.column}}</td>\n              <td>{{data.termId}}</td>\n            </tr>\n          </tbody>\n        </table>\n      </div>\n    </ng-container>\n  </ng-container>\n</ng-template>\n\n<ng-template #logLineValue let-key=\"key\" let-value=\"value\">\n  <ng-template #defaultValue>\n    <span class=\"is-inline-block is-align-middle\">{{value}}</span>\n  </ng-template>\n  <ng-container *ngIf=\"requirementLinkedNode(key, value); let linkedNode; else defaultValue\">\n    <he-node-link class=\"is-inline-block is-align-middle\" linkClass=\"is-dark\" [node]=\"linkedNode\" [showExternalLink]=\"true\"></he-node-link>\n  </ng-container>\n</ng-template>\n\n<ng-template #logLine let-key=\"key\" let-value=\"value\">\n  <span class=\"is-inline-block is-align-middle\" [ngSwitch]=\"key\">\n    <ng-container *ngSwitchDefault>{{key | keyToLabel}}</ng-container>\n\n    <ng-container *ngSwitchCase=\"'node_type_allowed'\">Is the current <code>Node</code> allowed to run this model</ng-container>\n    <ng-container *ngSwitchCase=\"'siteType_allowed'\">Is the current <code>siteType</code> allowed to run this model</ng-container>\n    <ng-container *ngSwitchCase=\"'primary_product_id_allowed'\">Is the current primary product <code>@id</code> allowed to run this model</ng-container>\n    <ng-container *ngSwitchCase=\"'primary_product_termType_allowed'\">Is the current primary product <code>termType</code> allowed to run this model</ng-container>\n\n    <ng-container *ngSwitchCase=\"'geospatial_data'\">Has geospatial data necessary to run this model</ng-container>\n    <ng-container *ngSwitchCase=\"'contains_geospatial_data'\">Has geospatial data necessary to run this model</ng-container>\n    <ng-container *ngSwitchCase=\"'current_size'\">Current polygon area</ng-container>\n    <ng-container *ngSwitchCase=\"'max_area_size'\">Maximum polygon area to run this model</ng-container>\n    <ng-container *ngSwitchCase=\"'below_max_area_size'\">Polygon below the maximum area</ng-container>\n    <ng-container *ngSwitchCase=\"'region_factor'\">Factor from region lookup</ng-container>\n\n    <ng-container *ngSwitchCase=\"'pesticides_complete'\">Pesticide data are <code>complete</code></ng-container>\n    <ng-container *ngSwitchCase=\"'has_pesticides_inputs'\">Cycle contains <code>pesticideAI</code> Inputs</ng-container>\n    <ng-container *ngSwitchCase=\"'all_pesticideAI_have_lookup_value'\">All <code>pesticideAI</code> Inputs have a lookup value</ng-container>\n\n    <ng-container *ngSwitchCase=\"'has_crop_residue_burnt'\"><code>aboveGroundCropResidueBurnt</code> is present as Product</ng-container>\n\n    <ng-container *ngSwitchCase=\"'liquid_slurry_sludge_P'\">Liquid, Slurry, and Sludge P</ng-container>\n  </span>\n  <he-clipboard class=\"is-inline-block is-align-middle\" clipboardClass=\"is-size-7 is-p-1\" [icon]=\"['far', 'clone']\" [value]=\"key\" [hideText]=\"true\"></he-clipboard>\n  <span class=\"is-pr-1 is-inline-block is-align-middle\">:</span>\n  <ng-template #singleValue>\n    <ng-container *ngTemplateOutlet=\"logLineValue; context:{key,value}\"></ng-container>\n  </ng-template>\n  <div class=\"is-inline-block is-align-middle\" *ngIf=\"logValueArray(value); let valueArray; else singleValue\">\n    <table class=\"table is-bordered has-background-secondary has-text-white\">\n      <thead *ngIf=\"valueArray[0] | isObject\">\n        <tr>\n          <th class=\"has-text-white\" *ngFor=\"let v of valueArray[0] | keys\">{{v.key}}</th>\n        </tr>\n      </thead>\n      <tbody>\n        <tr *ngFor=\"let v of valueArray\">\n          <ng-template #singleArrayValue>\n            <td>{{v}}</td>\n          </ng-template>\n          <ng-container *ngIf=\"v | isObject; else singleArrayValue\">\n            <td *ngFor=\"let vv of v | keys\">{{vv.value}}</td>\n          </ng-container>\n        </tr>\n      </tbody>\n    </table>\n  </div>\n</ng-template>\n\n<ng-template #logStatusDetails let-model=\"model\" let-data=\"data\">\n  <ng-container *bindOnce=\"model\">\n    <div class=\"is-mb-2\">\n      <span>Status:</span>\n      <span class=\"is-pl-1\">{{model.status}}</span>\n    </div>\n\n    <ng-template #showRunOrchestrator>\n      <div class=\"is-run-orchestrator\">\n        <p *ngIf=\"model.logs?.shouldRun\">All the requirements were met to run the model.</p>\n        <p *ngIf=\"!model.logs?.shouldRun\">\n          Some of the requirements were not met to run the model.\n          You can click on the model name on the left to view the debugging logs.\n        </p>\n        <div *ngIf=\"model.logs?.logs?.error\">\n          <p>The model failed to run for the following reason:</p>\n          <p><code>{{model.logs.logs.error}}</code></p>\n        </div>\n      </div>\n    </ng-template>\n\n    <div class=\"is-no-run-orchestrator\" *ngIf=\"model.logs?.shouldRunOrchestrator === false; else showRunOrchestrator\">\n      <ng-container *ngIf=\"!model.logs.runRequired\">\n        <span class=\"is-run-node-type-not-allowed\" *ngIf=\"model.logs.logs?.node_type_allowed === 'False'\">\n          This model should not run for {{nodeType | pluralize:0}}\n        </span>\n      </ng-container>\n\n      <ng-template #runNoConfig>\n        <span class=\"is-run-not-empty\" *ngIf=\"model.logs.logs?.is_empty === 'False'\">\n          The {{data.type || 'blank node'}} with Term <code>{{data.termId}}</code> is already present or already added by another model.\n        </span>\n      </ng-template>\n\n      <ng-container *ngIf=\"model.config; else runNoConfig\">\n        <div class=\"is-run-strategy-{{model.config.runStrategy}}\" [ngSwitch]=\"model.config.runStrategy\">\n          <span *ngSwitchCase=\"'always'\"></span>\n          <span *ngSwitchCase=\"'add_key_if_missing'\">\n            We only gap-fill this key if not present\n          </span>\n          <span *ngSwitchCase=\"'add_blank_node_if_missing'\">\n            We only gap-fill this Blank Node if not present.\n          </span>\n\n          <span class=\"is-run-with-measured\" *ngIf=\"model.config.runArgs?.runNonMeasured && hasMethodTier(data.original, EmissionMethodTier.measured)\">\n            The <code>{{model.config.value}}</code> was already reported as measured.\n          </span>\n        </div>\n      </ng-container>\n    </div>\n\n    <div class=\"is-no-merge-orchestrator\" *ngIf=\"model.logs?.shouldMerge === false\">\n      <p class=\"is-merge-replaceThreshold\" *ngIf=\"model.logs.logs?.replaceThreshold\">\n        <span>The</span>\n        <span class=\"is-pl-1\">{{model.config?.mergeArgs?.replaceThreshold?.[0] || 'value'}}</span>\n        <span class=\"is-pl-1\">from this model was</span>\n        <span class=\"is-pl-1\">\n          <ng-container *ngIf=\"model.config.mergeArgs\">\n            <span class=\"is-pl-1\" *ngIf=\"model.logs.logs.replaceThreshold === 'False'\">less than</span>\n            <span class=\"is-pl-1\" *ngIf=\"model.logs.logs.replaceThreshold === 'True'\">more than</span>\n            <span class=\"is-pl-1\">{{model.config.mergeArgs.replaceThreshold[1] * 100}}%</span>\n          </ng-container>\n          <ng-container *ngIf=\"!model.config.mergeArgs\">\n            <span class=\"is-pl-1\" *ngIf=\"model.logs.logs.replaceThreshold === 'False'\">not sufficiently</span>\n            <span class=\"is-pl-1\" *ngIf=\"model.logs.logs.replaceThreshold === 'True'\">sufficiently</span>\n          </ng-container>\n        </span>\n        <span class=\"is-pl-1\">different from the original</span>\n        <span class=\"is-pl-1\">{{model.config?.mergeArgs?.replaceThreshold?.[0] || 'value'}}.</span>\n      </p>\n    </div>\n    <p class=\"is-merge-replaceLowerTier\" *ngIf=\"model.logs.logs?.replaceLowerTier\">\n      <span>The model <code>methodTier</code> was</span>\n      <span class=\"is-pl-1\" *ngIf=\"model.logs.logs.replaceLowerTier === 'False'\">higher than</span>\n      <span class=\"is-pl-1\" *ngIf=\"model.logs.logs.replaceLowerTier === 'True'\">lower than</span>\n      <span class=\"is-pl-1\">the original <code>methodTier</code></span>\n    </p>\n  </ng-container>\n</ng-template>\n\n<ng-template #docsLink let-model>\n  <a [href]=\"model.apiDocsPath || model.docPath || model.path\" target=\"_blank\"\n    (click)=\"$event.stopPropagation()\"\n  >\n    <span>Docs</span>\n    <fa-icon class=\"ml-1\" icon=\"external-link-alt\" size=\"sm\"></fa-icon>\n  </a>\n</ng-template>\n", styles: [":host{display:block}::ng-deep tr.has-sub-rows td{border-bottom-style:dotted}::ng-deep td he-node-link{width:190px}@media screen and (max-width: 768px){::ng-deep td he-node-link{width:150px}}::ng-deep td .open-node+he-node-link{width:170px}@media screen and (max-width: 768px){::ng-deep td .open-node+he-node-link{width:130px}}\n"] }]
         }], ctorParameters: function () { return [{ type: HeNodeService }, { type: HeSearchService }, { type: HeEngineService }]; }, propDecorators: { node: [{
                 type: Input
             }], nodeKey: [{
@@ -8561,46 +8559,34 @@ const getWeightedValueText = (nodeDatum) => {
     var _a, _b, _c, _d, _f, _g, _h;
     return `${toPrecision(nodeDatum.data.weightedValue, 3)}${((_a = nodeDatum.parent) === null || _a === void 0 ? void 0 : _a.data.value) === null
         ? ''
-        : ` of ${toPrecision(((_b = nodeDatum.parent) === null || _b === void 0 ? void 0 : _b.data.value) || ((_c = nodeDatum.parent) === null || _c === void 0 ? void 0 : _c.data.weightedValue), 3)}`} ${((_d = nodeDatum.parent) === null || _d === void 0 ? void 0 : _d.data.value) ? (_f = nodeDatum.parent) === null || _f === void 0 ? void 0 : _f.data.units : (_h = (_g = nodeDatum.parent) === null || _g === void 0 ? void 0 : _g.parent) === null || _h === void 0 ? void 0 : _h.data.units} - `;
+        : ` of ${toPrecision(((_b = nodeDatum.parent) === null || _b === void 0 ? void 0 : _b.data.value) || ((_c = nodeDatum.parent) === null || _c === void 0 ? void 0 : _c.data.weightedValue), 3)}`} ${((_d = nodeDatum.parent) === null || _d === void 0 ? void 0 : _d.data.value) ? (_f = nodeDatum.parent) === null || _f === void 0 ? void 0 : _f.data.units : (_h = (_g = nodeDatum.parent) === null || _g === void 0 ? void 0 : _g.parent) === null || _h === void 0 ? void 0 : _h.data.units}`;
 };
-const generateTipData = (nodeDatum) => [
-    nodeDatum.data.weightedValue
-        ? [
-            { text: 'contribution' },
-            {
-                text: getWeightedValueText(nodeDatum)
-            },
-            { text: `Docs `, href: nodeDatum.data.modelDocs }
-        ]
-        : null,
-    nodeDatum.data.value
-        ? [
-            { text: 'value', href: `${baseUrl()}/schema/Indicator#value` },
-            { text: `${toPrecision(nodeDatum.data.value, 3)} ${nodeDatum.data.units} - ` },
-            { text: `Docs `, href: nodeDatum.data.modelDocs }
-        ]
-        : [
-            { text: 'value' },
-            { text: isTypeWithoutValue(nodeDatum) ? 'no data (under development)' : 'no contribution' }
-        ],
-    [
-        { text: 'methodModel', href: `${baseUrl()}/schema/Indicator#methodModel` },
-        { text: `${nodeDatum.data.modelName}`, href: `${baseUrl()}/model/${nodeDatum.data.modelId}` }
-    ],
-    [
-        { text: 'term', href: `${baseUrl()}/schema/Indicator#term` },
-        { text: nodeDatum.data.term, href: `${baseUrl()}/term/${nodeDatum.data.id}` }
-    ]
-].filter(Boolean);
-const rightTipPath = (w, h, tail) => `M${-tail},${h / 2} l${tail},-${tail} v-${h / 2 - tail} h${w} v${h} h-${w} v-${h / 2 - tail} z`;
-const leftTipPath = (w, h, tail) => `M${0},${0} h${w} v${h / 2 - tail} l${tail},${tail} l${-tail},${tail} v${h / 2 - tail} h${-w} z`;
-const addTooltip = (selection, { tipSelection }) => {
+const generateTipData = (nodeDatum) => ({
+    hasWeightedValue: nodeDatum.data.weightedValue,
+    weightedValueText: getWeightedValueText(nodeDatum),
+    valueKeyHref: `${baseUrl()}/schema/Indicator#value`,
+    modelDocsHref: nodeDatum.data.modelDocs,
+    valueValueText: nodeDatum.data.value
+        ? `${toPrecision(nodeDatum.data.value, 3)} ${nodeDatum.data.units} - `
+        : isTypeWithoutValue(nodeDatum)
+            ? 'no data (under development)'
+            : 'no contribution',
+    hasValue: nodeDatum.data.value,
+    modelKeyHref: `${baseUrl()}/schema/Indicator#methodModel`,
+    modelValue: nodeDatum.data.modelName,
+    modelValueHref: `${baseUrl()}/model/${nodeDatum.data.modelId}`,
+    termKeyHref: `${baseUrl()}/schema/Indicator#term`,
+    termValue: nodeDatum.data.term,
+    termValueText: nodeDatum.data.term,
+    termValueHref: `${baseUrl()}/term/${nodeDatum.data.id}`
+});
+const addTooltip = (selection, { tooltipOperator, zone }) => {
     let hoveringTip = false;
     let hoveringNode = false;
     let lastNodeId;
     const closeTip = () => {
-        tipSelection.style('pointer-events', 'none').transition().duration(100).style('opacity', 0);
-        tipSelection.style('display', 'none');
+        zone.run(() => tooltipOperator.close(false));
+        selectAll('.tip-target').classed('tip-target', false);
         lastNodeId = null;
     };
     const startCloseTip = () => {
@@ -8610,18 +8596,9 @@ const addTooltip = (selection, { tipSelection }) => {
             }
         }, 100);
     };
-    tipSelection
-        .on('pointerenter', () => {
-        hoveringTip = true;
-    })
-        .on('pointerleave', () => {
-        hoveringTip = false;
-        startCloseTip();
-    });
     selection
         .on('click', (_e, d) => {
         closeTip();
-        clearTimeout(d._timeout);
     })
         .on('pointerenter', (event, nodeDatum) => {
         hoveringNode = true;
@@ -8630,72 +8607,24 @@ const addTooltip = (selection, { tipSelection }) => {
         }
         closeTip();
         lastNodeId = nodeDatum.data.id;
-        nodeDatum._timeout = setTimeout(() => {
-            tipSelection.style('display', null).style('pointer-events', 'all').transition().duration(100).style('opacity', 1);
-            const tipBackground = tipSelection.selectAll('path').data([,]).join('path').classed('tip-background', true);
-            const tipText = tipSelection.selectAll('g').data([,]).join('g').classed('tip-text', true);
-            const tipRow = tipText
-                .selectAll('g > g')
-                .data(generateTipData(nodeDatum))
-                .join('g')
-                .attr('transform', (_, i) => `translate(0,${i * fontSize * 1.5 + fontSize / 2})`);
-            tipRow.append('text').each(function (d) {
-                const t = select(this);
-                const aOrTspan = d[0].href ? t.append('a').attr('href', d[0].href) : t.append('tspan');
-                aOrTspan.append('tspan').text(d[0].text);
-                aOrTspan.classed('tip-text-key', true);
-                t.append('tspan').text(': ');
-                if (d[1] && !d[1].href) {
-                    t.append('tspan').text(d[1].text);
-                }
-            });
-            // svg icon cannot be child of text so position final link manually
-            tipRow
-                .filter((d) => d[d.length - 1].href)
-                .each(function (d) {
-                const { width: textWidth } = this.getBBox();
-                const a = select(this)
-                    .append('a')
-                    .attr('href', d[d.length - 1].href)
-                    .attr('transform', `translate(${textWidth + nodePadding},0)`);
-                a.append('text').text(d[d.length - 1].text);
-                const { width: aWidth } = a.node().getBBox();
-                const g = a.append('g').attr('transform', `translate(${aWidth + nodePadding},${-fontSize / 2})`);
-                g.append('rect')
-                    .attr('width', fontSize)
-                    .attr('height', fontSize)
-                    .attr('fill', 'none')
-                    .attr('stroke', 'none');
-                g.append('svg')
-                    .attr('viewBox', `0 0 ${faExternalLinkAlt.icon[0]} ${faExternalLinkAlt.icon[1]}`)
-                    .attr('width', fontSize)
-                    .attr('height', fontSize)
-                    .append('path')
-                    .attr('d', faExternalLinkAlt.icon[4])
-                    .attr('fill', 'white');
-            });
-            tipText.selectAll('a').classed('tip-anchor', true).attr('target', '_blank');
-            const { width: tipWidth, height: tipHeight } = tipText.node().getBBox();
-            const orientLeft = nodeDatum.y + tipWidth + nodeWidth > width - margin.left;
-            const tipPathArgs = [tipWidth + nodePadding * 2, tipHeight + nodePadding * 2, 5];
-            tipBackground
-                .attr('d', orientLeft ? leftTipPath(...tipPathArgs) : rightTipPath(...tipPathArgs))
-                .attr('transform', `translate(${-nodePadding},${-nodePadding})`)
-                .attr('stroke-linejoin', 'round')
-                .attr('stroke-width', 3)
-                .attr('stroke', 'black');
-            const xOffset = orientLeft ? -tipWidth - nodePadding * 2 : nodeWidth + nodePadding * 2;
-            tipSelection.attr('transform', `translate(${nodeDatum.y + xOffset},${nodeDatum.x + nodeHeight / 2 - tipHeight / 2})`);
-        }, 250);
+        select(event.target).classed('tip-target', true);
+        zone.run(() => tooltipOperator.open({ tipData: generateTipData(nodeDatum) }));
+        select('.driver-chart-tooltip')
+            .on('pointerenter', () => {
+            hoveringTip = true;
+        })
+            .on('pointerleave', () => {
+            hoveringTip = false;
+            startCloseTip();
+        });
     })
         .on('pointerleave', (_e, d) => {
         hoveringNode = false;
         startCloseTip();
-        clearTimeout(d._timeout);
     });
     return selection;
 };
-const mergedNodes = (selection, { tipSelection }) => {
+const mergedNodes = (selection, { tooltipOperator, zone }) => {
     selection
         .selectAll('.node-box')
         .classed('node-openable', (d) => !!d.height)
@@ -8706,7 +8635,7 @@ const mergedNodes = (selection, { tipSelection }) => {
         .style('user-select', window.innerWidth < 768 ? 'none' : null);
     selection
         .filter((d) => !d.data.group && d.data.id !== nonLCAIndicatorsId)
-        .call(addTooltip, { tipSelection });
+        .call(addTooltip, { tooltipOperator, zone });
     selection
         .selectAll('.node-label')
         .attr('y', (d) => (d.data.showBar ? lineHeight / 2 + nodePadding / 2 : 0))
@@ -9128,7 +9057,6 @@ class ImpactAssessmentsGraphComponent {
             .attr('font-size', `${fontSize}px`);
         this.node = this.svg.append('g').selectAll('g');
         this.link = this.svg.append('g').selectAll('path');
-        this.tooltip = this.svg.append('g').classed('tooltip', true).style('opacity', 0);
         this.handleNodeClick(null, this.root.find((node) => node.depth === 1));
     }
     // flip x/y to go left-right instead of top-bottom
@@ -9183,20 +9111,28 @@ class ImpactAssessmentsGraphComponent {
             .append('g')
             .call(enterNodes)
             .attr('opacity', 0)
-            .attr('transform', (d) => 'translate(' + (togglingGroup ? d.y : d.y - nodeWidth / 2) + ',' + d.x + ')'), (update) => update, (exit) => exit
-            .transition()
-            .duration(nodeDuration / 2)
-            .delay((d) => {
-            var _a, _b;
-            const children = ((_a = d.parent) === null || _a === void 0 ? void 0 : _a.children) || ((_b = d.parent) === null || _b === void 0 ? void 0 : _b._children);
-            return ((children === null || children === void 0 ? void 0 : children.length) - (children === null || children === void 0 ? void 0 : children.indexOf(d)) - 1) * 10;
-        })
-            .ease(easeElasticIn.amplitude(0.5).period(1))
-            .attr('transform', (d) => 'translate(' + (togglingGroup ? d.y : d.y - nodeWidth / 2) + ',' + d.x + ')')
-            .attr('opacity', 0)
-            .remove());
+            .attr('transform', (d) => 'translate(' + (togglingGroup ? d.y : d.y - nodeWidth / 2) + ',' + d.x + ')'), (update) => update, (exit) => {
+            this.ngZone.run(() => this.tooltipOperator.close(false));
+            return exit
+                .style('pointer-events', 'none')
+                .transition()
+                .duration(nodeDuration / 2)
+                .delay((d) => {
+                var _a, _b;
+                const children = ((_a = d.parent) === null || _a === void 0 ? void 0 : _a.children) || ((_b = d.parent) === null || _b === void 0 ? void 0 : _b._children);
+                return ((children === null || children === void 0 ? void 0 : children.length) - (children === null || children === void 0 ? void 0 : children.indexOf(d)) - 1) * 10;
+            })
+                .ease(easeElasticIn.amplitude(0.5).period(1))
+                .attr('transform', (d) => 'translate(' + (togglingGroup ? d.y : d.y - nodeWidth / 2) + ',' + d.x + ')')
+                .attr('opacity', 0)
+                .remove()
+                .on('end', () => {
+                // in case a tooltip was opened on a transitioning element
+                this.ngZone.run(() => this.tooltipOperator.close(false));
+            });
+        });
         this.node
-            .call(mergedNodes, { tipSelection: this.tooltip })
+            .call(mergedNodes, { tooltipOperator: this.tooltipOperator, zone: this.ngZone })
             .transition()
             .delay((d) => {
             var _a, _b, _c, _d;
@@ -9249,13 +9185,16 @@ class ImpactAssessmentsGraphComponent {
     }
 }
 ImpactAssessmentsGraphComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: ImpactAssessmentsGraphComponent, deps: [{ token: i0.NgZone }, { token: HeSearchService }, { token: HeNodeService }, { token: HeEngineService }], target: i0.ɵɵFactoryTarget.Component });
-ImpactAssessmentsGraphComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.8", type: ImpactAssessmentsGraphComponent, selector: "he-impact-assessments-graph", inputs: { impactAssessments: "impactAssessments", dataState: "dataState" }, viewQueries: [{ propertyName: "chartRef", first: true, predicate: ["chart"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"!loading; else loader\">\n  <ng-container *ngIf=\"isRecalculated; else showSwitchRecalculated\">\n    <div class=\"field has-addons pt-2 px-3 mb-0\" *ngIf=\"filteredImpactAssessments.length > 1\">\n      <div class=\"control\">\n        <span class=\"button is-small is-static is-secondary\">Select an Impact Assessment</span>\n      </div>\n      <div class=\"control is-expanded\">\n        <div class=\"select is-small is-fullwidth is-secondary\">\n          <select [(ngModel)]=\"selectedImpactAssessmentId\" (change)=\"reloadChart()\" [disabled]=\"loading\">\n            <option *ngFor=\"let value of filteredImpactAssessments\" [value]=\"value['@id']\">\n              {{ value.name || value['@id'] }}\n            </option>\n          </select>\n        </div>\n      </div>\n    </div>\n    <div *ngIf=\"!noData\" class=\"field has-addons py-2 px-3\">\n      <div class=\"control\">\n        <span class=\"button is-small is-static is-secondary\">Select a model</span>\n      </div>\n      <div class=\"control is-expanded\">\n        <div class=\"select is-small is-fullwidth is-secondary\">\n          <select [(ngModel)]=\"selectedModelId\" (change)=\"initChart()\" [disabled]=\"loading\">\n            <option *ngFor=\"let model of models\" [value]=\"model['@id']\">{{ model.name || model['@id'] }}</option>\n          </select>\n        </div>\n      </div>\n    </div>\n\n    <ng-container *ngIf=\"!noData && !showWarnings\">\n      <div class=\"columns is-centered py-2 is-size-7 is-mobile is-multiline\">\n        <ng-container *ngFor=\"let legendItem of legend\">\n          <div class=\"column is-narrow py-0 is-flex-mobile is-flex-direction-column is-align-items-center is-legend-item\">\n            <span\n              class=\"key-colour is-inline-block-tablet is-align-middle\"\n              [style.backgroundColor]=\"nodeColours[legendItem.type]\"\n            ></span>\n            <strong class=\"has-text-black is-align-middle key-label is-pl-tablet-2\">\n              <span class=\"is-hidden-desktop\">{{legendItem.mobileText}}</span>\n              <span class=\"is-hidden-touch\">{{legendItem.text}}</span>\n            </strong>\n          </div>\n        </ng-container>\n      </div>\n    </ng-container>\n\n    <p *ngIf=\"error\" class=\"has-text-danger py-3\">\n      <ng-container [ngSwitch]=\"error\">\n        <p *ngSwitchCase=\"'not-found'\">Impact Assessment not found</p>\n        <div *ngSwitchDefault>\n          <span>An unexpected error occurred:</span>\n          <p class=\"mt-1\">{{ error }}</p>\n        </div>\n      </ng-container>\n    </p>\n\n    <div *ngIf=\"showWarnings\" class=\"has-text-warning py-3 has-text-centered\">\n      <p class=\"is-mb-2\" *ngFor=\"let warning of warnings\">\n        <fa-icon class=\"pr-2\" icon=\"exclamation-triangle\"></fa-icon>\n        <ng-container [ngSwitch]=\"warning\">\n          <span *ngSwitchCase=\"'missing-terms'\">Calculations are not up to date. Some terms may not display correctly.</span>\n        </ng-container>\n      </p>\n      <p class=\"is-underlined is-size-7\"><a (click)=\"showWarnings = false\">View chart anyway.</a></p>\n    </div>\n\n    <div *ngIf=\"noData\" class=\"py-3\">\n      <p class=\"has-text-centered\">No chart available.</p>\n    </div>\n  </ng-container>\n</ng-container>\n\n<div [class.is-hidden]=\"!isRecalculated || loading || error || noData || showWarnings\" class=\"chart-container is-relative w-100\">\n  <svg class=\"w-100 h-100\" #chart></svg>\n</div>\n\n<ng-template #loader>\n  <div class=\"loading-container has-text-center my-5 py-5\">\n    <fa-icon icon=\"spinner\" [pulse]=\"true\" size=\"lg\"></fa-icon>\n  </div>\n</ng-template>\n\n<ng-template #showSwitchRecalculated>\n  <p class=\"has-text-centered py-3\">No chart available. Switch to <code>recalculated</code> version.</p>\n</ng-template>\n", styles: [".is-marginless{margin:0!important}.is-paddingless{padding:0!important}.m-0{margin:0!important}.mt-0{margin-top:0!important}.mr-0{margin-right:0!important}.mb-0{margin-bottom:0!important}.ml-0{margin-left:0!important}.mx-0{margin-left:0!important;margin-right:0!important}.my-0{margin-top:0!important;margin-bottom:0!important}.m-1{margin:.25rem!important}.mt-1{margin-top:.25rem!important}.mr-1{margin-right:.25rem!important}.mb-1{margin-bottom:.25rem!important}.ml-1{margin-left:.25rem!important}.mx-1{margin-left:.25rem!important;margin-right:.25rem!important}.my-1{margin-top:.25rem!important;margin-bottom:.25rem!important}.m-2{margin:.5rem!important}.mt-2{margin-top:.5rem!important}.mr-2{margin-right:.5rem!important}.mb-2{margin-bottom:.5rem!important}.ml-2{margin-left:.5rem!important}.mx-2{margin-left:.5rem!important;margin-right:.5rem!important}.my-2{margin-top:.5rem!important;margin-bottom:.5rem!important}.m-3{margin:.75rem!important}.mt-3{margin-top:.75rem!important}.mr-3{margin-right:.75rem!important}.mb-3{margin-bottom:.75rem!important}.ml-3{margin-left:.75rem!important}.mx-3{margin-left:.75rem!important;margin-right:.75rem!important}.my-3{margin-top:.75rem!important;margin-bottom:.75rem!important}.m-4{margin:1rem!important}.mt-4{margin-top:1rem!important}.mr-4{margin-right:1rem!important}.mb-4{margin-bottom:1rem!important}.ml-4{margin-left:1rem!important}.mx-4{margin-left:1rem!important;margin-right:1rem!important}.my-4{margin-top:1rem!important;margin-bottom:1rem!important}.m-5{margin:1.5rem!important}.mt-5{margin-top:1.5rem!important}.mr-5{margin-right:1.5rem!important}.mb-5{margin-bottom:1.5rem!important}.ml-5{margin-left:1.5rem!important}.mx-5{margin-left:1.5rem!important;margin-right:1.5rem!important}.my-5{margin-top:1.5rem!important;margin-bottom:1.5rem!important}.m-6{margin:3rem!important}.mt-6{margin-top:3rem!important}.mr-6{margin-right:3rem!important}.mb-6{margin-bottom:3rem!important}.ml-6{margin-left:3rem!important}.mx-6{margin-left:3rem!important;margin-right:3rem!important}.my-6{margin-top:3rem!important;margin-bottom:3rem!important}.m-auto{margin:auto!important}.mt-auto{margin-top:auto!important}.mr-auto{margin-right:auto!important}.mb-auto{margin-bottom:auto!important}.ml-auto{margin-left:auto!important}.mx-auto{margin-left:auto!important;margin-right:auto!important}.my-auto{margin-top:auto!important;margin-bottom:auto!important}.p-0{padding:0!important}.pt-0{padding-top:0!important}.pr-0{padding-right:0!important}.pb-0{padding-bottom:0!important}.pl-0{padding-left:0!important}.px-0{padding-left:0!important;padding-right:0!important}.py-0{padding-top:0!important;padding-bottom:0!important}.p-1{padding:.25rem!important}.pt-1{padding-top:.25rem!important}.pr-1{padding-right:.25rem!important}.pb-1{padding-bottom:.25rem!important}.pl-1{padding-left:.25rem!important}.px-1{padding-left:.25rem!important;padding-right:.25rem!important}.py-1{padding-top:.25rem!important;padding-bottom:.25rem!important}.p-2{padding:.5rem!important}.pt-2{padding-top:.5rem!important}.pr-2{padding-right:.5rem!important}.pb-2{padding-bottom:.5rem!important}.pl-2{padding-left:.5rem!important}.px-2{padding-left:.5rem!important;padding-right:.5rem!important}.py-2{padding-top:.5rem!important;padding-bottom:.5rem!important}.p-3{padding:.75rem!important}.pt-3{padding-top:.75rem!important}.pr-3{padding-right:.75rem!important}.pb-3{padding-bottom:.75rem!important}.pl-3{padding-left:.75rem!important}.px-3{padding-left:.75rem!important;padding-right:.75rem!important}.py-3{padding-top:.75rem!important;padding-bottom:.75rem!important}.p-4{padding:1rem!important}.pt-4{padding-top:1rem!important}.pr-4{padding-right:1rem!important}.pb-4{padding-bottom:1rem!important}.pl-4{padding-left:1rem!important}.px-4{padding-left:1rem!important;padding-right:1rem!important}.py-4{padding-top:1rem!important;padding-bottom:1rem!important}.p-5{padding:1.5rem!important}.pt-5{padding-top:1.5rem!important}.pr-5{padding-right:1.5rem!important}.pb-5{padding-bottom:1.5rem!important}.pl-5{padding-left:1.5rem!important}.px-5{padding-left:1.5rem!important;padding-right:1.5rem!important}.py-5{padding-top:1.5rem!important;padding-bottom:1.5rem!important}.p-6{padding:3rem!important}.pt-6{padding-top:3rem!important}.pr-6{padding-right:3rem!important}.pb-6{padding-bottom:3rem!important}.pl-6{padding-left:3rem!important}.px-6{padding-left:3rem!important;padding-right:3rem!important}.py-6{padding-top:3rem!important;padding-bottom:3rem!important}.p-auto{padding:auto!important}.pt-auto{padding-top:auto!important}.pr-auto{padding-right:auto!important}.pb-auto{padding-bottom:auto!important}.pl-auto{padding-left:auto!important}.px-auto{padding-left:auto!important;padding-right:auto!important}.py-auto{padding-top:auto!important;padding-bottom:auto!important}.key-colour{border-radius:2px;box-shadow:0 2px 3px #0000001a,inset 0 0 0 1px #0000001a;height:1.5em;width:1.5em;opacity:.7}@media screen and (max-width: 768px){.key-label{font-size:.675rem}}svg{pointer-events:none}@media screen and (min-width: 1216px){.is-legend-item{min-width:130px}}@media screen and (min-width: 1408px){.is-legend-item{min-width:200px}}.loading-container{min-height:200px}:host ::ng-deep .node-box{rx:10px;ry:10px;fill-opacity:0;stroke-opacity:.5;pointer-events:auto}:host ::ng-deep .node-open{stroke-width:3}:host ::ng-deep .node-openable{cursor:pointer;stroke-opacity:1;fill-opacity:.1}:host ::ng-deep .node-openable:hover{stroke-width:3}:host ::ng-deep .group-button{fill:#fff;cursor:pointer;pointer-events:auto;stroke-dasharray:2,5;stroke:#999;stroke-width:2}:host ::ng-deep .group-button:hover{fill:#000}:host ::ng-deep .group-button:hover+text{fill:#fff}:host ::ng-deep .group-button-text{text-anchor:middle;alignment-baseline:central}:host ::ng-deep .group-border,:host ::ng-deep .group-line{stroke-dasharray:2,5;stroke:#999;stroke-width:2;fill:none}:host ::ng-deep .group-label{font-weight:700;fill:#696969;text-anchor:start;alignment-baseline:central}:host ::ng-deep .node-label{font-weight:700;fill:#000;text-anchor:middle;alignment-baseline:central}:host ::ng-deep .node-label tspan{alignment-baseline:inherit}:host ::ng-deep .bar-label{font-weight:700;fill:#696969;alignment-baseline:central}:host ::ng-deep .sibling-mask{fill:#fafafa;fill-opacity:.8;stroke-opacity:.9;stroke:#fafafa;rx:10px;ry:10px;stroke-width:3;pointer-events:none}:host ::ng-deep .mask-openable{pointer-events:all}:host ::ng-deep .mask-openable:hover{fill:none;stroke:none}:host ::ng-deep .bar-background{fill:#d3d3d3;fill-opacity:.5}:host ::ng-deep .link-path{fill:none;stroke:#999}:host ::ng-deep .bar-foreground{fill-opacity:.5}:host ::ng-deep .tip-background{fill:#000}:host ::ng-deep .tip-text{font-weight:400;alignment-baseline:central;fill:#fff}:host ::ng-deep .tip-text *{font-weight:inherit;alignment-baseline:inherit}:host ::ng-deep .tip-text-key{font-weight:700}:host ::ng-deep .tip-anchor{text-decoration:underline;color:#fff;cursor:pointer;fill:#fff}:host ::ng-deep .tip-anchor:hover{text-decoration:underline}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }] });
+ImpactAssessmentsGraphComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.8", type: ImpactAssessmentsGraphComponent, selector: "he-impact-assessments-graph", inputs: { impactAssessments: "impactAssessments", dataState: "dataState" }, viewQueries: [{ propertyName: "chartRef", first: true, predicate: ["chart"], descendants: true }, { propertyName: "tooltipOperator", first: true, predicate: ["t"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"!loading; else loader\">\n  <ng-container *ngIf=\"isRecalculated; else showSwitchRecalculated\">\n    <div class=\"field has-addons pt-2 px-3 mb-0\" *ngIf=\"filteredImpactAssessments.length > 1\">\n      <div class=\"control\">\n        <span class=\"button is-small is-static is-secondary\">Select an Impact Assessment</span>\n      </div>\n      <div class=\"control is-expanded\">\n        <div class=\"select is-small is-fullwidth is-secondary\">\n          <select [(ngModel)]=\"selectedImpactAssessmentId\" (change)=\"reloadChart()\" [disabled]=\"loading\">\n            <option *ngFor=\"let value of filteredImpactAssessments\" [value]=\"value['@id']\">\n              {{ value.name || value['@id'] }}\n            </option>\n          </select>\n        </div>\n      </div>\n    </div>\n    <div *ngIf=\"!noData\" class=\"field has-addons py-2 px-3\">\n      <div class=\"control\">\n        <span class=\"button is-small is-static is-secondary\">Select a model</span>\n      </div>\n      <div class=\"control is-expanded\">\n        <div class=\"select is-small is-fullwidth is-secondary\">\n          <select [(ngModel)]=\"selectedModelId\" (change)=\"initChart()\" [disabled]=\"loading\">\n            <option *ngFor=\"let model of models\" [value]=\"model['@id']\">{{ model.name || model['@id'] }}</option>\n          </select>\n        </div>\n      </div>\n    </div>\n\n    <ng-container *ngIf=\"!noData && !showWarnings\">\n      <div class=\"columns is-centered py-2 is-size-7 is-mobile is-multiline\">\n        <ng-container *ngFor=\"let legendItem of legend\">\n          <div class=\"column is-narrow py-0 is-flex-mobile is-flex-direction-column is-align-items-center is-legend-item\">\n            <span\n              class=\"key-colour is-inline-block-tablet is-align-middle\"\n              [style.backgroundColor]=\"nodeColours[legendItem.type]\"\n            ></span>\n            <strong class=\"has-text-black is-align-middle key-label is-pl-tablet-2\">\n              <span class=\"is-hidden-desktop\">{{legendItem.mobileText}}</span>\n              <span class=\"is-hidden-touch\">{{legendItem.text}}</span>\n            </strong>\n          </div>\n        </ng-container>\n      </div>\n    </ng-container>\n\n    <p *ngIf=\"error\" class=\"has-text-danger py-3\">\n      <ng-container [ngSwitch]=\"error\">\n        <p *ngSwitchCase=\"'not-found'\">Impact Assessment not found</p>\n        <div *ngSwitchDefault>\n          <span>An unexpected error occurred:</span>\n          <p class=\"mt-1\">{{ error }}</p>\n        </div>\n      </ng-container>\n    </p>\n\n    <div *ngIf=\"showWarnings\" class=\"has-text-warning py-3 has-text-centered\">\n      <p class=\"is-mb-2\" *ngFor=\"let warning of warnings\">\n        <fa-icon class=\"pr-2\" icon=\"exclamation-triangle\"></fa-icon>\n        <ng-container [ngSwitch]=\"warning\">\n          <span *ngSwitchCase=\"'missing-terms'\">Calculations are not up to date. Some terms may not display correctly.</span>\n        </ng-container>\n      </p>\n      <p class=\"is-underlined is-size-7\"><a (click)=\"showWarnings = false\">View chart anyway.</a></p>\n    </div>\n\n    <div *ngIf=\"noData\" class=\"py-3\">\n      <p class=\"has-text-centered\">No chart available.</p>\n    </div>\n  </ng-container>\n</ng-container>\n\n<div [class.is-hidden]=\"!isRecalculated || loading || error || noData || showWarnings\" class=\"chart-container is-relative w-100\">\n  <svg class=\"w-100 h-100\" #chart></svg>\n  <span\n    class=\"is-hidden\"\n    [ngbPopover]=\"tipContent\"\n    triggers=\"manual\"\n    placement=\"right left auto\"\n    container=\"body\"\n    #t=\"ngbPopover\"\n    positionTarget=\".tip-target\"\n    popoverClass=\"is-narrow driver-chart-tooltip\"\n    [animation]=\"true\"\n  ></span>\n</div>\n\n<ng-template #loader>\n  <div class=\"loading-container has-text-center my-5 py-5\">\n    <fa-icon icon=\"spinner\" [pulse]=\"true\" size=\"lg\"></fa-icon>\n  </div>\n</ng-template>\n\n<ng-template #showSwitchRecalculated>\n  <p class=\"has-text-centered py-3\">No chart available. Switch to <code>recalculated</code> version.</p>\n</ng-template>\n\n<ng-template #tipContent let-tipData=\"tipData\">\n  <p *ngIf=\"tipData.hasWeightedValue\">contribution: {{ tipData.weightedValueText }}</p>\n  <p>\n    <a class=\"is-dark\" target=\"_blank\" [href]=\"tipData.valueKeyHref\">value</a>: {{ tipData.valueValueText }}\n    <a class=\"is-dark\" *ngIf=\"tipData.hasValue\" [href]=\"tipData.modelDocsHref\" target=\"_blank\">\n      <span>Docs</span>\n      <fa-icon class=\"ml-1\" icon=\"external-link-alt\" size=\"sm\"></fa-icon>\n    </a>\n  </p>\n  <p>\n    <a class=\"is-dark\" target=\"_blank\" [href]=\"tipData.modelKeyHref\">methodModel</a>: \n    <a class=\"is-dark\" target=\"_blank\" [href]=\"tipData.modelValueHref\">{{ tipData.modelValue }}</a>\n  </p>\n  <p>\n    <a class=\"is-dark\" target=\"_blank\" [href]=\"tipData.termKeyHref\">term</a>: \n    <a class=\"is-dark\" target=\"_blank\" [href]=\"tipData.termValueHref\">{{ tipData.termValue }}</a>\n  </p>\n</ng-template>\n", styles: [".is-marginless{margin:0!important}.is-paddingless{padding:0!important}.m-0{margin:0!important}.mt-0{margin-top:0!important}.mr-0{margin-right:0!important}.mb-0{margin-bottom:0!important}.ml-0{margin-left:0!important}.mx-0{margin-left:0!important;margin-right:0!important}.my-0{margin-top:0!important;margin-bottom:0!important}.m-1{margin:.25rem!important}.mt-1{margin-top:.25rem!important}.mr-1{margin-right:.25rem!important}.mb-1{margin-bottom:.25rem!important}.ml-1{margin-left:.25rem!important}.mx-1{margin-left:.25rem!important;margin-right:.25rem!important}.my-1{margin-top:.25rem!important;margin-bottom:.25rem!important}.m-2{margin:.5rem!important}.mt-2{margin-top:.5rem!important}.mr-2{margin-right:.5rem!important}.mb-2{margin-bottom:.5rem!important}.ml-2{margin-left:.5rem!important}.mx-2{margin-left:.5rem!important;margin-right:.5rem!important}.my-2{margin-top:.5rem!important;margin-bottom:.5rem!important}.m-3{margin:.75rem!important}.mt-3{margin-top:.75rem!important}.mr-3{margin-right:.75rem!important}.mb-3{margin-bottom:.75rem!important}.ml-3{margin-left:.75rem!important}.mx-3{margin-left:.75rem!important;margin-right:.75rem!important}.my-3{margin-top:.75rem!important;margin-bottom:.75rem!important}.m-4{margin:1rem!important}.mt-4{margin-top:1rem!important}.mr-4{margin-right:1rem!important}.mb-4{margin-bottom:1rem!important}.ml-4{margin-left:1rem!important}.mx-4{margin-left:1rem!important;margin-right:1rem!important}.my-4{margin-top:1rem!important;margin-bottom:1rem!important}.m-5{margin:1.5rem!important}.mt-5{margin-top:1.5rem!important}.mr-5{margin-right:1.5rem!important}.mb-5{margin-bottom:1.5rem!important}.ml-5{margin-left:1.5rem!important}.mx-5{margin-left:1.5rem!important;margin-right:1.5rem!important}.my-5{margin-top:1.5rem!important;margin-bottom:1.5rem!important}.m-6{margin:3rem!important}.mt-6{margin-top:3rem!important}.mr-6{margin-right:3rem!important}.mb-6{margin-bottom:3rem!important}.ml-6{margin-left:3rem!important}.mx-6{margin-left:3rem!important;margin-right:3rem!important}.my-6{margin-top:3rem!important;margin-bottom:3rem!important}.m-auto{margin:auto!important}.mt-auto{margin-top:auto!important}.mr-auto{margin-right:auto!important}.mb-auto{margin-bottom:auto!important}.ml-auto{margin-left:auto!important}.mx-auto{margin-left:auto!important;margin-right:auto!important}.my-auto{margin-top:auto!important;margin-bottom:auto!important}.p-0{padding:0!important}.pt-0{padding-top:0!important}.pr-0{padding-right:0!important}.pb-0{padding-bottom:0!important}.pl-0{padding-left:0!important}.px-0{padding-left:0!important;padding-right:0!important}.py-0{padding-top:0!important;padding-bottom:0!important}.p-1{padding:.25rem!important}.pt-1{padding-top:.25rem!important}.pr-1{padding-right:.25rem!important}.pb-1{padding-bottom:.25rem!important}.pl-1{padding-left:.25rem!important}.px-1{padding-left:.25rem!important;padding-right:.25rem!important}.py-1{padding-top:.25rem!important;padding-bottom:.25rem!important}.p-2{padding:.5rem!important}.pt-2{padding-top:.5rem!important}.pr-2{padding-right:.5rem!important}.pb-2{padding-bottom:.5rem!important}.pl-2{padding-left:.5rem!important}.px-2{padding-left:.5rem!important;padding-right:.5rem!important}.py-2{padding-top:.5rem!important;padding-bottom:.5rem!important}.p-3{padding:.75rem!important}.pt-3{padding-top:.75rem!important}.pr-3{padding-right:.75rem!important}.pb-3{padding-bottom:.75rem!important}.pl-3{padding-left:.75rem!important}.px-3{padding-left:.75rem!important;padding-right:.75rem!important}.py-3{padding-top:.75rem!important;padding-bottom:.75rem!important}.p-4{padding:1rem!important}.pt-4{padding-top:1rem!important}.pr-4{padding-right:1rem!important}.pb-4{padding-bottom:1rem!important}.pl-4{padding-left:1rem!important}.px-4{padding-left:1rem!important;padding-right:1rem!important}.py-4{padding-top:1rem!important;padding-bottom:1rem!important}.p-5{padding:1.5rem!important}.pt-5{padding-top:1.5rem!important}.pr-5{padding-right:1.5rem!important}.pb-5{padding-bottom:1.5rem!important}.pl-5{padding-left:1.5rem!important}.px-5{padding-left:1.5rem!important;padding-right:1.5rem!important}.py-5{padding-top:1.5rem!important;padding-bottom:1.5rem!important}.p-6{padding:3rem!important}.pt-6{padding-top:3rem!important}.pr-6{padding-right:3rem!important}.pb-6{padding-bottom:3rem!important}.pl-6{padding-left:3rem!important}.px-6{padding-left:3rem!important;padding-right:3rem!important}.py-6{padding-top:3rem!important;padding-bottom:3rem!important}.p-auto{padding:auto!important}.pt-auto{padding-top:auto!important}.pr-auto{padding-right:auto!important}.pb-auto{padding-bottom:auto!important}.pl-auto{padding-left:auto!important}.px-auto{padding-left:auto!important;padding-right:auto!important}.py-auto{padding-top:auto!important;padding-bottom:auto!important}.key-colour{border-radius:2px;box-shadow:0 2px 3px #0000001a,inset 0 0 0 1px #0000001a;height:1.5em;width:1.5em;opacity:.7}@media screen and (max-width: 767px){.key-label{font-size:calc(.9 * .8rem)}}svg{pointer-events:none}@media screen and (min-width: 1216px){.is-legend-item{min-width:130px}}@media screen and (min-width: 1408px){.is-legend-item{min-width:200px}}.loading-container{min-height:200px}:host ::ng-deep .node-box{rx:10px;ry:10px;fill-opacity:0;stroke-opacity:.5;pointer-events:auto}:host ::ng-deep .node-open{stroke-width:3}:host ::ng-deep .node-openable{cursor:pointer;stroke-opacity:1;fill-opacity:.1}:host ::ng-deep .node-openable:hover{stroke-width:3}:host ::ng-deep .group-button{fill:#fff;cursor:pointer;pointer-events:auto;stroke-dasharray:2,5;stroke:#999;stroke-width:2}:host ::ng-deep .group-button:hover{fill:#000}:host ::ng-deep .group-button:hover+text{fill:#fff}:host ::ng-deep .group-button-text{text-anchor:middle;alignment-baseline:central}:host ::ng-deep .group-border,:host ::ng-deep .group-line{stroke-dasharray:2,5;stroke:#999;stroke-width:2;fill:none}:host ::ng-deep .group-label{font-weight:700;fill:#696969;text-anchor:start;alignment-baseline:central}:host ::ng-deep .node-label{font-weight:700;fill:#000;text-anchor:middle;alignment-baseline:central}:host ::ng-deep .node-label tspan{alignment-baseline:inherit}:host ::ng-deep .bar-label{font-weight:700;fill:#696969;alignment-baseline:central}:host ::ng-deep .sibling-mask{fill:#fafafa;fill-opacity:.8;stroke-opacity:.9;stroke:#fafafa;rx:10px;ry:10px;stroke-width:3;pointer-events:none}:host ::ng-deep .mask-openable{pointer-events:all}:host ::ng-deep .mask-openable:hover{fill:none;stroke:none}:host ::ng-deep .bar-background{fill:#d3d3d3;fill-opacity:.5}:host ::ng-deep .link-path{fill:none;stroke:#999}:host ::ng-deep .bar-foreground{fill-opacity:.5}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3$1.NgbPopover, selector: "[ngbPopover]", inputs: ["animation", "autoClose", "ngbPopover", "popoverTitle", "placement", "popperOptions", "triggers", "positionTarget", "container", "disablePopover", "popoverClass", "openDelay", "closeDelay"], outputs: ["shown", "hidden"], exportAs: ["ngbPopover"] }, { kind: "component", type: i3.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: ImpactAssessmentsGraphComponent, decorators: [{
             type: Component$1,
-            args: [{ selector: 'he-impact-assessments-graph', template: "<ng-container *ngIf=\"!loading; else loader\">\n  <ng-container *ngIf=\"isRecalculated; else showSwitchRecalculated\">\n    <div class=\"field has-addons pt-2 px-3 mb-0\" *ngIf=\"filteredImpactAssessments.length > 1\">\n      <div class=\"control\">\n        <span class=\"button is-small is-static is-secondary\">Select an Impact Assessment</span>\n      </div>\n      <div class=\"control is-expanded\">\n        <div class=\"select is-small is-fullwidth is-secondary\">\n          <select [(ngModel)]=\"selectedImpactAssessmentId\" (change)=\"reloadChart()\" [disabled]=\"loading\">\n            <option *ngFor=\"let value of filteredImpactAssessments\" [value]=\"value['@id']\">\n              {{ value.name || value['@id'] }}\n            </option>\n          </select>\n        </div>\n      </div>\n    </div>\n    <div *ngIf=\"!noData\" class=\"field has-addons py-2 px-3\">\n      <div class=\"control\">\n        <span class=\"button is-small is-static is-secondary\">Select a model</span>\n      </div>\n      <div class=\"control is-expanded\">\n        <div class=\"select is-small is-fullwidth is-secondary\">\n          <select [(ngModel)]=\"selectedModelId\" (change)=\"initChart()\" [disabled]=\"loading\">\n            <option *ngFor=\"let model of models\" [value]=\"model['@id']\">{{ model.name || model['@id'] }}</option>\n          </select>\n        </div>\n      </div>\n    </div>\n\n    <ng-container *ngIf=\"!noData && !showWarnings\">\n      <div class=\"columns is-centered py-2 is-size-7 is-mobile is-multiline\">\n        <ng-container *ngFor=\"let legendItem of legend\">\n          <div class=\"column is-narrow py-0 is-flex-mobile is-flex-direction-column is-align-items-center is-legend-item\">\n            <span\n              class=\"key-colour is-inline-block-tablet is-align-middle\"\n              [style.backgroundColor]=\"nodeColours[legendItem.type]\"\n            ></span>\n            <strong class=\"has-text-black is-align-middle key-label is-pl-tablet-2\">\n              <span class=\"is-hidden-desktop\">{{legendItem.mobileText}}</span>\n              <span class=\"is-hidden-touch\">{{legendItem.text}}</span>\n            </strong>\n          </div>\n        </ng-container>\n      </div>\n    </ng-container>\n\n    <p *ngIf=\"error\" class=\"has-text-danger py-3\">\n      <ng-container [ngSwitch]=\"error\">\n        <p *ngSwitchCase=\"'not-found'\">Impact Assessment not found</p>\n        <div *ngSwitchDefault>\n          <span>An unexpected error occurred:</span>\n          <p class=\"mt-1\">{{ error }}</p>\n        </div>\n      </ng-container>\n    </p>\n\n    <div *ngIf=\"showWarnings\" class=\"has-text-warning py-3 has-text-centered\">\n      <p class=\"is-mb-2\" *ngFor=\"let warning of warnings\">\n        <fa-icon class=\"pr-2\" icon=\"exclamation-triangle\"></fa-icon>\n        <ng-container [ngSwitch]=\"warning\">\n          <span *ngSwitchCase=\"'missing-terms'\">Calculations are not up to date. Some terms may not display correctly.</span>\n        </ng-container>\n      </p>\n      <p class=\"is-underlined is-size-7\"><a (click)=\"showWarnings = false\">View chart anyway.</a></p>\n    </div>\n\n    <div *ngIf=\"noData\" class=\"py-3\">\n      <p class=\"has-text-centered\">No chart available.</p>\n    </div>\n  </ng-container>\n</ng-container>\n\n<div [class.is-hidden]=\"!isRecalculated || loading || error || noData || showWarnings\" class=\"chart-container is-relative w-100\">\n  <svg class=\"w-100 h-100\" #chart></svg>\n</div>\n\n<ng-template #loader>\n  <div class=\"loading-container has-text-center my-5 py-5\">\n    <fa-icon icon=\"spinner\" [pulse]=\"true\" size=\"lg\"></fa-icon>\n  </div>\n</ng-template>\n\n<ng-template #showSwitchRecalculated>\n  <p class=\"has-text-centered py-3\">No chart available. Switch to <code>recalculated</code> version.</p>\n</ng-template>\n", styles: [".is-marginless{margin:0!important}.is-paddingless{padding:0!important}.m-0{margin:0!important}.mt-0{margin-top:0!important}.mr-0{margin-right:0!important}.mb-0{margin-bottom:0!important}.ml-0{margin-left:0!important}.mx-0{margin-left:0!important;margin-right:0!important}.my-0{margin-top:0!important;margin-bottom:0!important}.m-1{margin:.25rem!important}.mt-1{margin-top:.25rem!important}.mr-1{margin-right:.25rem!important}.mb-1{margin-bottom:.25rem!important}.ml-1{margin-left:.25rem!important}.mx-1{margin-left:.25rem!important;margin-right:.25rem!important}.my-1{margin-top:.25rem!important;margin-bottom:.25rem!important}.m-2{margin:.5rem!important}.mt-2{margin-top:.5rem!important}.mr-2{margin-right:.5rem!important}.mb-2{margin-bottom:.5rem!important}.ml-2{margin-left:.5rem!important}.mx-2{margin-left:.5rem!important;margin-right:.5rem!important}.my-2{margin-top:.5rem!important;margin-bottom:.5rem!important}.m-3{margin:.75rem!important}.mt-3{margin-top:.75rem!important}.mr-3{margin-right:.75rem!important}.mb-3{margin-bottom:.75rem!important}.ml-3{margin-left:.75rem!important}.mx-3{margin-left:.75rem!important;margin-right:.75rem!important}.my-3{margin-top:.75rem!important;margin-bottom:.75rem!important}.m-4{margin:1rem!important}.mt-4{margin-top:1rem!important}.mr-4{margin-right:1rem!important}.mb-4{margin-bottom:1rem!important}.ml-4{margin-left:1rem!important}.mx-4{margin-left:1rem!important;margin-right:1rem!important}.my-4{margin-top:1rem!important;margin-bottom:1rem!important}.m-5{margin:1.5rem!important}.mt-5{margin-top:1.5rem!important}.mr-5{margin-right:1.5rem!important}.mb-5{margin-bottom:1.5rem!important}.ml-5{margin-left:1.5rem!important}.mx-5{margin-left:1.5rem!important;margin-right:1.5rem!important}.my-5{margin-top:1.5rem!important;margin-bottom:1.5rem!important}.m-6{margin:3rem!important}.mt-6{margin-top:3rem!important}.mr-6{margin-right:3rem!important}.mb-6{margin-bottom:3rem!important}.ml-6{margin-left:3rem!important}.mx-6{margin-left:3rem!important;margin-right:3rem!important}.my-6{margin-top:3rem!important;margin-bottom:3rem!important}.m-auto{margin:auto!important}.mt-auto{margin-top:auto!important}.mr-auto{margin-right:auto!important}.mb-auto{margin-bottom:auto!important}.ml-auto{margin-left:auto!important}.mx-auto{margin-left:auto!important;margin-right:auto!important}.my-auto{margin-top:auto!important;margin-bottom:auto!important}.p-0{padding:0!important}.pt-0{padding-top:0!important}.pr-0{padding-right:0!important}.pb-0{padding-bottom:0!important}.pl-0{padding-left:0!important}.px-0{padding-left:0!important;padding-right:0!important}.py-0{padding-top:0!important;padding-bottom:0!important}.p-1{padding:.25rem!important}.pt-1{padding-top:.25rem!important}.pr-1{padding-right:.25rem!important}.pb-1{padding-bottom:.25rem!important}.pl-1{padding-left:.25rem!important}.px-1{padding-left:.25rem!important;padding-right:.25rem!important}.py-1{padding-top:.25rem!important;padding-bottom:.25rem!important}.p-2{padding:.5rem!important}.pt-2{padding-top:.5rem!important}.pr-2{padding-right:.5rem!important}.pb-2{padding-bottom:.5rem!important}.pl-2{padding-left:.5rem!important}.px-2{padding-left:.5rem!important;padding-right:.5rem!important}.py-2{padding-top:.5rem!important;padding-bottom:.5rem!important}.p-3{padding:.75rem!important}.pt-3{padding-top:.75rem!important}.pr-3{padding-right:.75rem!important}.pb-3{padding-bottom:.75rem!important}.pl-3{padding-left:.75rem!important}.px-3{padding-left:.75rem!important;padding-right:.75rem!important}.py-3{padding-top:.75rem!important;padding-bottom:.75rem!important}.p-4{padding:1rem!important}.pt-4{padding-top:1rem!important}.pr-4{padding-right:1rem!important}.pb-4{padding-bottom:1rem!important}.pl-4{padding-left:1rem!important}.px-4{padding-left:1rem!important;padding-right:1rem!important}.py-4{padding-top:1rem!important;padding-bottom:1rem!important}.p-5{padding:1.5rem!important}.pt-5{padding-top:1.5rem!important}.pr-5{padding-right:1.5rem!important}.pb-5{padding-bottom:1.5rem!important}.pl-5{padding-left:1.5rem!important}.px-5{padding-left:1.5rem!important;padding-right:1.5rem!important}.py-5{padding-top:1.5rem!important;padding-bottom:1.5rem!important}.p-6{padding:3rem!important}.pt-6{padding-top:3rem!important}.pr-6{padding-right:3rem!important}.pb-6{padding-bottom:3rem!important}.pl-6{padding-left:3rem!important}.px-6{padding-left:3rem!important;padding-right:3rem!important}.py-6{padding-top:3rem!important;padding-bottom:3rem!important}.p-auto{padding:auto!important}.pt-auto{padding-top:auto!important}.pr-auto{padding-right:auto!important}.pb-auto{padding-bottom:auto!important}.pl-auto{padding-left:auto!important}.px-auto{padding-left:auto!important;padding-right:auto!important}.py-auto{padding-top:auto!important;padding-bottom:auto!important}.key-colour{border-radius:2px;box-shadow:0 2px 3px #0000001a,inset 0 0 0 1px #0000001a;height:1.5em;width:1.5em;opacity:.7}@media screen and (max-width: 768px){.key-label{font-size:.675rem}}svg{pointer-events:none}@media screen and (min-width: 1216px){.is-legend-item{min-width:130px}}@media screen and (min-width: 1408px){.is-legend-item{min-width:200px}}.loading-container{min-height:200px}:host ::ng-deep .node-box{rx:10px;ry:10px;fill-opacity:0;stroke-opacity:.5;pointer-events:auto}:host ::ng-deep .node-open{stroke-width:3}:host ::ng-deep .node-openable{cursor:pointer;stroke-opacity:1;fill-opacity:.1}:host ::ng-deep .node-openable:hover{stroke-width:3}:host ::ng-deep .group-button{fill:#fff;cursor:pointer;pointer-events:auto;stroke-dasharray:2,5;stroke:#999;stroke-width:2}:host ::ng-deep .group-button:hover{fill:#000}:host ::ng-deep .group-button:hover+text{fill:#fff}:host ::ng-deep .group-button-text{text-anchor:middle;alignment-baseline:central}:host ::ng-deep .group-border,:host ::ng-deep .group-line{stroke-dasharray:2,5;stroke:#999;stroke-width:2;fill:none}:host ::ng-deep .group-label{font-weight:700;fill:#696969;text-anchor:start;alignment-baseline:central}:host ::ng-deep .node-label{font-weight:700;fill:#000;text-anchor:middle;alignment-baseline:central}:host ::ng-deep .node-label tspan{alignment-baseline:inherit}:host ::ng-deep .bar-label{font-weight:700;fill:#696969;alignment-baseline:central}:host ::ng-deep .sibling-mask{fill:#fafafa;fill-opacity:.8;stroke-opacity:.9;stroke:#fafafa;rx:10px;ry:10px;stroke-width:3;pointer-events:none}:host ::ng-deep .mask-openable{pointer-events:all}:host ::ng-deep .mask-openable:hover{fill:none;stroke:none}:host ::ng-deep .bar-background{fill:#d3d3d3;fill-opacity:.5}:host ::ng-deep .link-path{fill:none;stroke:#999}:host ::ng-deep .bar-foreground{fill-opacity:.5}:host ::ng-deep .tip-background{fill:#000}:host ::ng-deep .tip-text{font-weight:400;alignment-baseline:central;fill:#fff}:host ::ng-deep .tip-text *{font-weight:inherit;alignment-baseline:inherit}:host ::ng-deep .tip-text-key{font-weight:700}:host ::ng-deep .tip-anchor{text-decoration:underline;color:#fff;cursor:pointer;fill:#fff}:host ::ng-deep .tip-anchor:hover{text-decoration:underline}\n"] }]
+            args: [{ selector: 'he-impact-assessments-graph', template: "<ng-container *ngIf=\"!loading; else loader\">\n  <ng-container *ngIf=\"isRecalculated; else showSwitchRecalculated\">\n    <div class=\"field has-addons pt-2 px-3 mb-0\" *ngIf=\"filteredImpactAssessments.length > 1\">\n      <div class=\"control\">\n        <span class=\"button is-small is-static is-secondary\">Select an Impact Assessment</span>\n      </div>\n      <div class=\"control is-expanded\">\n        <div class=\"select is-small is-fullwidth is-secondary\">\n          <select [(ngModel)]=\"selectedImpactAssessmentId\" (change)=\"reloadChart()\" [disabled]=\"loading\">\n            <option *ngFor=\"let value of filteredImpactAssessments\" [value]=\"value['@id']\">\n              {{ value.name || value['@id'] }}\n            </option>\n          </select>\n        </div>\n      </div>\n    </div>\n    <div *ngIf=\"!noData\" class=\"field has-addons py-2 px-3\">\n      <div class=\"control\">\n        <span class=\"button is-small is-static is-secondary\">Select a model</span>\n      </div>\n      <div class=\"control is-expanded\">\n        <div class=\"select is-small is-fullwidth is-secondary\">\n          <select [(ngModel)]=\"selectedModelId\" (change)=\"initChart()\" [disabled]=\"loading\">\n            <option *ngFor=\"let model of models\" [value]=\"model['@id']\">{{ model.name || model['@id'] }}</option>\n          </select>\n        </div>\n      </div>\n    </div>\n\n    <ng-container *ngIf=\"!noData && !showWarnings\">\n      <div class=\"columns is-centered py-2 is-size-7 is-mobile is-multiline\">\n        <ng-container *ngFor=\"let legendItem of legend\">\n          <div class=\"column is-narrow py-0 is-flex-mobile is-flex-direction-column is-align-items-center is-legend-item\">\n            <span\n              class=\"key-colour is-inline-block-tablet is-align-middle\"\n              [style.backgroundColor]=\"nodeColours[legendItem.type]\"\n            ></span>\n            <strong class=\"has-text-black is-align-middle key-label is-pl-tablet-2\">\n              <span class=\"is-hidden-desktop\">{{legendItem.mobileText}}</span>\n              <span class=\"is-hidden-touch\">{{legendItem.text}}</span>\n            </strong>\n          </div>\n        </ng-container>\n      </div>\n    </ng-container>\n\n    <p *ngIf=\"error\" class=\"has-text-danger py-3\">\n      <ng-container [ngSwitch]=\"error\">\n        <p *ngSwitchCase=\"'not-found'\">Impact Assessment not found</p>\n        <div *ngSwitchDefault>\n          <span>An unexpected error occurred:</span>\n          <p class=\"mt-1\">{{ error }}</p>\n        </div>\n      </ng-container>\n    </p>\n\n    <div *ngIf=\"showWarnings\" class=\"has-text-warning py-3 has-text-centered\">\n      <p class=\"is-mb-2\" *ngFor=\"let warning of warnings\">\n        <fa-icon class=\"pr-2\" icon=\"exclamation-triangle\"></fa-icon>\n        <ng-container [ngSwitch]=\"warning\">\n          <span *ngSwitchCase=\"'missing-terms'\">Calculations are not up to date. Some terms may not display correctly.</span>\n        </ng-container>\n      </p>\n      <p class=\"is-underlined is-size-7\"><a (click)=\"showWarnings = false\">View chart anyway.</a></p>\n    </div>\n\n    <div *ngIf=\"noData\" class=\"py-3\">\n      <p class=\"has-text-centered\">No chart available.</p>\n    </div>\n  </ng-container>\n</ng-container>\n\n<div [class.is-hidden]=\"!isRecalculated || loading || error || noData || showWarnings\" class=\"chart-container is-relative w-100\">\n  <svg class=\"w-100 h-100\" #chart></svg>\n  <span\n    class=\"is-hidden\"\n    [ngbPopover]=\"tipContent\"\n    triggers=\"manual\"\n    placement=\"right left auto\"\n    container=\"body\"\n    #t=\"ngbPopover\"\n    positionTarget=\".tip-target\"\n    popoverClass=\"is-narrow driver-chart-tooltip\"\n    [animation]=\"true\"\n  ></span>\n</div>\n\n<ng-template #loader>\n  <div class=\"loading-container has-text-center my-5 py-5\">\n    <fa-icon icon=\"spinner\" [pulse]=\"true\" size=\"lg\"></fa-icon>\n  </div>\n</ng-template>\n\n<ng-template #showSwitchRecalculated>\n  <p class=\"has-text-centered py-3\">No chart available. Switch to <code>recalculated</code> version.</p>\n</ng-template>\n\n<ng-template #tipContent let-tipData=\"tipData\">\n  <p *ngIf=\"tipData.hasWeightedValue\">contribution: {{ tipData.weightedValueText }}</p>\n  <p>\n    <a class=\"is-dark\" target=\"_blank\" [href]=\"tipData.valueKeyHref\">value</a>: {{ tipData.valueValueText }}\n    <a class=\"is-dark\" *ngIf=\"tipData.hasValue\" [href]=\"tipData.modelDocsHref\" target=\"_blank\">\n      <span>Docs</span>\n      <fa-icon class=\"ml-1\" icon=\"external-link-alt\" size=\"sm\"></fa-icon>\n    </a>\n  </p>\n  <p>\n    <a class=\"is-dark\" target=\"_blank\" [href]=\"tipData.modelKeyHref\">methodModel</a>: \n    <a class=\"is-dark\" target=\"_blank\" [href]=\"tipData.modelValueHref\">{{ tipData.modelValue }}</a>\n  </p>\n  <p>\n    <a class=\"is-dark\" target=\"_blank\" [href]=\"tipData.termKeyHref\">term</a>: \n    <a class=\"is-dark\" target=\"_blank\" [href]=\"tipData.termValueHref\">{{ tipData.termValue }}</a>\n  </p>\n</ng-template>\n", styles: [".is-marginless{margin:0!important}.is-paddingless{padding:0!important}.m-0{margin:0!important}.mt-0{margin-top:0!important}.mr-0{margin-right:0!important}.mb-0{margin-bottom:0!important}.ml-0{margin-left:0!important}.mx-0{margin-left:0!important;margin-right:0!important}.my-0{margin-top:0!important;margin-bottom:0!important}.m-1{margin:.25rem!important}.mt-1{margin-top:.25rem!important}.mr-1{margin-right:.25rem!important}.mb-1{margin-bottom:.25rem!important}.ml-1{margin-left:.25rem!important}.mx-1{margin-left:.25rem!important;margin-right:.25rem!important}.my-1{margin-top:.25rem!important;margin-bottom:.25rem!important}.m-2{margin:.5rem!important}.mt-2{margin-top:.5rem!important}.mr-2{margin-right:.5rem!important}.mb-2{margin-bottom:.5rem!important}.ml-2{margin-left:.5rem!important}.mx-2{margin-left:.5rem!important;margin-right:.5rem!important}.my-2{margin-top:.5rem!important;margin-bottom:.5rem!important}.m-3{margin:.75rem!important}.mt-3{margin-top:.75rem!important}.mr-3{margin-right:.75rem!important}.mb-3{margin-bottom:.75rem!important}.ml-3{margin-left:.75rem!important}.mx-3{margin-left:.75rem!important;margin-right:.75rem!important}.my-3{margin-top:.75rem!important;margin-bottom:.75rem!important}.m-4{margin:1rem!important}.mt-4{margin-top:1rem!important}.mr-4{margin-right:1rem!important}.mb-4{margin-bottom:1rem!important}.ml-4{margin-left:1rem!important}.mx-4{margin-left:1rem!important;margin-right:1rem!important}.my-4{margin-top:1rem!important;margin-bottom:1rem!important}.m-5{margin:1.5rem!important}.mt-5{margin-top:1.5rem!important}.mr-5{margin-right:1.5rem!important}.mb-5{margin-bottom:1.5rem!important}.ml-5{margin-left:1.5rem!important}.mx-5{margin-left:1.5rem!important;margin-right:1.5rem!important}.my-5{margin-top:1.5rem!important;margin-bottom:1.5rem!important}.m-6{margin:3rem!important}.mt-6{margin-top:3rem!important}.mr-6{margin-right:3rem!important}.mb-6{margin-bottom:3rem!important}.ml-6{margin-left:3rem!important}.mx-6{margin-left:3rem!important;margin-right:3rem!important}.my-6{margin-top:3rem!important;margin-bottom:3rem!important}.m-auto{margin:auto!important}.mt-auto{margin-top:auto!important}.mr-auto{margin-right:auto!important}.mb-auto{margin-bottom:auto!important}.ml-auto{margin-left:auto!important}.mx-auto{margin-left:auto!important;margin-right:auto!important}.my-auto{margin-top:auto!important;margin-bottom:auto!important}.p-0{padding:0!important}.pt-0{padding-top:0!important}.pr-0{padding-right:0!important}.pb-0{padding-bottom:0!important}.pl-0{padding-left:0!important}.px-0{padding-left:0!important;padding-right:0!important}.py-0{padding-top:0!important;padding-bottom:0!important}.p-1{padding:.25rem!important}.pt-1{padding-top:.25rem!important}.pr-1{padding-right:.25rem!important}.pb-1{padding-bottom:.25rem!important}.pl-1{padding-left:.25rem!important}.px-1{padding-left:.25rem!important;padding-right:.25rem!important}.py-1{padding-top:.25rem!important;padding-bottom:.25rem!important}.p-2{padding:.5rem!important}.pt-2{padding-top:.5rem!important}.pr-2{padding-right:.5rem!important}.pb-2{padding-bottom:.5rem!important}.pl-2{padding-left:.5rem!important}.px-2{padding-left:.5rem!important;padding-right:.5rem!important}.py-2{padding-top:.5rem!important;padding-bottom:.5rem!important}.p-3{padding:.75rem!important}.pt-3{padding-top:.75rem!important}.pr-3{padding-right:.75rem!important}.pb-3{padding-bottom:.75rem!important}.pl-3{padding-left:.75rem!important}.px-3{padding-left:.75rem!important;padding-right:.75rem!important}.py-3{padding-top:.75rem!important;padding-bottom:.75rem!important}.p-4{padding:1rem!important}.pt-4{padding-top:1rem!important}.pr-4{padding-right:1rem!important}.pb-4{padding-bottom:1rem!important}.pl-4{padding-left:1rem!important}.px-4{padding-left:1rem!important;padding-right:1rem!important}.py-4{padding-top:1rem!important;padding-bottom:1rem!important}.p-5{padding:1.5rem!important}.pt-5{padding-top:1.5rem!important}.pr-5{padding-right:1.5rem!important}.pb-5{padding-bottom:1.5rem!important}.pl-5{padding-left:1.5rem!important}.px-5{padding-left:1.5rem!important;padding-right:1.5rem!important}.py-5{padding-top:1.5rem!important;padding-bottom:1.5rem!important}.p-6{padding:3rem!important}.pt-6{padding-top:3rem!important}.pr-6{padding-right:3rem!important}.pb-6{padding-bottom:3rem!important}.pl-6{padding-left:3rem!important}.px-6{padding-left:3rem!important;padding-right:3rem!important}.py-6{padding-top:3rem!important;padding-bottom:3rem!important}.p-auto{padding:auto!important}.pt-auto{padding-top:auto!important}.pr-auto{padding-right:auto!important}.pb-auto{padding-bottom:auto!important}.pl-auto{padding-left:auto!important}.px-auto{padding-left:auto!important;padding-right:auto!important}.py-auto{padding-top:auto!important;padding-bottom:auto!important}.key-colour{border-radius:2px;box-shadow:0 2px 3px #0000001a,inset 0 0 0 1px #0000001a;height:1.5em;width:1.5em;opacity:.7}@media screen and (max-width: 767px){.key-label{font-size:calc(.9 * .8rem)}}svg{pointer-events:none}@media screen and (min-width: 1216px){.is-legend-item{min-width:130px}}@media screen and (min-width: 1408px){.is-legend-item{min-width:200px}}.loading-container{min-height:200px}:host ::ng-deep .node-box{rx:10px;ry:10px;fill-opacity:0;stroke-opacity:.5;pointer-events:auto}:host ::ng-deep .node-open{stroke-width:3}:host ::ng-deep .node-openable{cursor:pointer;stroke-opacity:1;fill-opacity:.1}:host ::ng-deep .node-openable:hover{stroke-width:3}:host ::ng-deep .group-button{fill:#fff;cursor:pointer;pointer-events:auto;stroke-dasharray:2,5;stroke:#999;stroke-width:2}:host ::ng-deep .group-button:hover{fill:#000}:host ::ng-deep .group-button:hover+text{fill:#fff}:host ::ng-deep .group-button-text{text-anchor:middle;alignment-baseline:central}:host ::ng-deep .group-border,:host ::ng-deep .group-line{stroke-dasharray:2,5;stroke:#999;stroke-width:2;fill:none}:host ::ng-deep .group-label{font-weight:700;fill:#696969;text-anchor:start;alignment-baseline:central}:host ::ng-deep .node-label{font-weight:700;fill:#000;text-anchor:middle;alignment-baseline:central}:host ::ng-deep .node-label tspan{alignment-baseline:inherit}:host ::ng-deep .bar-label{font-weight:700;fill:#696969;alignment-baseline:central}:host ::ng-deep .sibling-mask{fill:#fafafa;fill-opacity:.8;stroke-opacity:.9;stroke:#fafafa;rx:10px;ry:10px;stroke-width:3;pointer-events:none}:host ::ng-deep .mask-openable{pointer-events:all}:host ::ng-deep .mask-openable:hover{fill:none;stroke:none}:host ::ng-deep .bar-background{fill:#d3d3d3;fill-opacity:.5}:host ::ng-deep .link-path{fill:none;stroke:#999}:host ::ng-deep .bar-foreground{fill-opacity:.5}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.NgZone }, { type: HeSearchService }, { type: HeNodeService }, { type: HeEngineService }]; }, propDecorators: { chartRef: [{
                 type: ViewChild,
                 args: ['chart']
+            }], tooltipOperator: [{
+                type: ViewChild,
+                args: ['t']
             }], impactAssessments: [{
                 type: Input
             }], dataState: [{