Root Cause Tree

angular/app.component.html

<div class="angular-root" theme="industrial">
    <div class="smart-demo-container">

        <section id="overview">
            <h2>Smart.RootCauseTree displays the result of a root-cause analysis as a ranked tree.</h2>
            <p>
                The deviation is the root node. Below it are the conditions that contribute to it, each with its share of the contribution as a bar and a percentage and the evidence used by the model, and below those the conditions that contribute to them. The component displays the analysis as it was produced; it does not rank or prune the causes itself. Selecting a node raises the <code>nodeSelect</code> event, where the application can open the underlying data and record whether the engineer agreed with the result.
            </p>
        </section>

        <section>
            <h2>Deviation 17: reactor temperature above forecast</h2>
            <smart-root-cause-tree id="tree" label="Deviation 17" [minContribution]="0.05"></smart-root-cause-tree>
            <div class="demo-actions">
                <button type="button" id="collapse">Collapse all</button>
                <button type="button" id="expand">Expand all</button>
                <button type="button" id="prune">Show everything</button>
                <button type="button" id="evidence">Hide evidence</button>
            </div>
            <p class="demo-log" id="log">Use Tab to focus the tree. The up and down arrow keys move between nodes, the left and right arrow keys collapse and expand a node, and Enter selects it.</p>
            <p class="demo-ranked" id="ranked"></p>
        </section>

        <section>
            <h2>Maximum depth</h2>
            <p>
                The <code>maxDepth</code> property limits how many levels of the tree are expanded. A node at the limit shows no expander. This is useful on a screen that has room for the first two levels and a link to the full analysis.
            </p>
            <smart-root-cause-tree id="shallow" [maxDepth]="1" [showEvidence]="false"></smart-root-cause-tree>
        </section>

    </div>
</div>

angular/app.component.ts

import { Component, AfterViewInit, OnDestroy } from '@angular/core';

import { RootCauseTreeModule } from 'smart-industrial/angular/rootcausetree';

import { runDemo } from './demo';

/**
 * Smart.UI Industrial - RootCauseTree in Angular.
 *
 * The template is the HTML demo's markup: the elements are the wrappers, so what is
 * written on them is checked against their inputs. demo.ts drives them the way the
 * plant's data would, once every element in the view has rendered.
 */
@Component({
    selector: 'app-root',
    standalone: true,
    imports: [RootCauseTreeModule],
    templateUrl: './app.component.html',
    styleUrl: './app.component.css'
})
export class AppComponent implements AfterViewInit, OnDestroy {
    private unmounted = false;

    ngAfterViewInit(): void {
        const root = document.querySelector('.angular-root') as HTMLElement,
            pending: Promise<void>[] = [];

        root.querySelectorAll('*').forEach((element: any) => {
            if (typeof element.whenRendered === 'function' && !element.isRendered) {
                pending.push(element.whenRendered());
            }
        });

        Promise.all(pending).then(() => {
            if (!this.unmounted) {
                runDemo();
            }
        });
    }

    ngOnDestroy(): void {
        this.unmounted = true;
    }
}

angular/demo.ts

// @ts-nocheck
/* The HTML demo's script, as it was written: page code that feeds the elements, not a typed
   API. The types are on the wrappers in app.component.ts. */

/* Root-cause tree overview.
 *
 * The analysis is written by hand here, in the shape a model's output takes: ids, labels,
 * tags, contributions and the evidence behind each. A plant's comes from its model service
 * as JSON and is assigned to `root` unchanged. */

export function runDemo(): void {
    const tree = document.getElementById('tree'),
        shallow = document.getElementById('shallow'),
        log = document.getElementById('log'),
        ranked = document.getElementById('ranked');

    const analysis = {
        id: 'dev-17', label: 'TIC-201 above forecast by 6.4 °C', tag: 'TIC-201', contribution: 1,
        evidence: 'Reactor temperature left the 95 % forecast band at 09:52 and stayed out for 14 min.',
        children: [
            {
                id: 'c1', label: 'Cooling water flow low', tag: 'FIC-204', contribution: 0.62,
                evidence: 'FIC-204 fell 18 % in the 20 min before the deviation; the loop was in auto with the valve at 94 %.',
                children: [
                    { id: 'c1a', label: 'Pump P-204 speed reduced', tag: 'SI-204', contribution: 0.55, evidence: 'Speed setpoint lowered from 1480 to 1320 rpm at 09:41 (operator, station 3).' },
                    { id: 'c1b', label: 'Strainer differential pressure', tag: 'PDI-204', contribution: 0.04, evidence: 'PDI-204 at 0.31 bar, within its normal band.' },
                    { id: 'c1c', label: 'Valve position', tag: 'FCV-204', contribution: 0.03, evidence: 'FCV-204 followed its controller output within 1 %.' }
                ]
            },
            {
                id: 'c2', label: 'Feed temperature high', tag: 'TI-088', contribution: 0.27,
                evidence: 'TI-088 rose 4 °C over the hour; the feed preheater outlet has run 2 °C above its usual since the night shift.',
                children: [
                    { id: 'c2a', label: 'Preheater steam pressure', tag: 'PI-071', contribution: 0.19, evidence: 'PI-071 up 0.4 bar since 06:00.' },
                    { id: 'c2b', label: 'Ambient', contribution: 0.02 }
                ]
            },
            { id: 'c3', label: 'Agitator speed', tag: 'SI-230', contribution: 0.06, evidence: 'SI-230 steady; ruled out by timing.' },
            { id: 'c4', label: 'Sensor drift on TIC-201', tag: 'TIC-201', contribution: 0.03, evidence: 'Redundant TT-201B agrees within 0.3 °C.' },
            { id: 'c5', label: 'Catalyst batch change', contribution: 0.02 }
        ]
    };

    tree.root = analysis;
    shallow.root = analysis;

    function rank() {
        ranked.textContent = 'Ranked: ' + tree.ranked(4).map(function (cause) {
            return cause.label + ' (' + Math.round(cause.contribution * 100) + ' %)';
        }).join(' · ');
    }

    rank();

    tree.addEventListener('nodeSelect', function (event) {
        /* The host's move: open the tag's trend, or record the engineer's verdict. */
        log.textContent = 'Selected ' + event.detail.node.label + (event.detail.node.tag ? ' [' + event.detail.node.tag + ']' : '') +
            ' - path ' + event.detail.path.join(' > ') + '. A screen would open the evidence here.';
    });

    tree.addEventListener('collapse', function (event) {
        log.textContent = 'Collapsed ' + event.detail.node.label + '.';
    });

    tree.addEventListener('expand', function (event) {
        log.textContent = 'Expanded ' + event.detail.node.label + '.';
    });

    document.getElementById('collapse').addEventListener('click', function () {
        tree.collapseAll();
    });

    document.getElementById('expand').addEventListener('click', function () {
        tree.expandAll();
    });

    document.getElementById('prune').addEventListener('click', function () {
        const pruning = tree.minContribution > 0;

        tree.minContribution = pruning ? 0 : 0.05;
        this.textContent = pruning ? 'Fold what is under 5 %' : 'Show everything';
        rank();
    });

    document.getElementById('evidence').addEventListener('click', function () {
        tree.showEvidence = !tree.showEvidence;
        this.textContent = tree.showEvidence ? 'Hide evidence' : 'Show evidence';
    });
}

angular/app.component.css

.smart-demo-container {
    max-width: 900px;
}

section {
    margin-bottom: 34px;
}

section h2 {
    font-size: 16px;
    font-weight: 500;
    margin: 0 0 8px;
}

section p {
    color: var(--smart-text-secondary-color);
    margin: 0 0 14px;
    max-width: 74ch;
}

code {
    background: var(--smart-ui-state-hover);
    font-family: Consolas, "Courier New", monospace;
    font-size: 12px;
    padding: 1px 5px;
}

.demo-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
}

.demo-actions button {
    background: transparent;
    border: 1px solid var(--smart-border);
    border-radius: var(--smart-border-radius);
    color: var(--smart-text-secondary-color);
    cursor: pointer;
    font-family: inherit;
    font-size: 11px;
    letter-spacing: .06em;
    padding: 7px 14px;
    text-transform: uppercase;
}

.demo-actions button:hover {
    background: var(--smart-ui-state-hover);
    border-color: var(--smart-ui-state-border-hover);
    color: var(--smart-ui-state-color-hover);
}

.demo-log,
.demo-counts {
    font-family: Consolas, "Courier New", monospace;
    font-size: 12px;
    margin: 12px 0 0;
    color: var(--smart-text-tertiary-color);
}

smart-root-cause-tree {
    display: block;
    max-width: 720px;
    padding: 6px 0;
    border: 1px solid var(--smart-border);
    border-radius: var(--smart-border-radius);
    background: var(--smart-industrial-panel-background, var(--smart-surface));
}

.demo-ranked {
    color: var(--smart-text-secondary-color);
    font-size: 12px;
}

/* ── Demo chrome, shared by the Industrial demos ─────────────────────────
   Headings, prose, buttons and notes are the same on every demo page. This block
   is appended by scripts and comes last, so it wins over the rules above. */
.smart-demo-container {
    padding: 4px 0 32px;
}

.smart-demo-container section {
    margin-bottom: 36px;
}

.smart-demo-container section h2 {
    margin: 0 0 8px;
    font-size: 17px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--smart-text-color);
}

.smart-demo-container #overview h2 {
    margin-bottom: 10px;
    font-size: 20px;
    max-width: 78ch;
}

.smart-demo-container section > p {
    margin: 0 0 14px;
    max-width: 84ch;
    font-size: 14px;
    line-height: 1.55;
    color: var(--smart-text-secondary-color);
}

.smart-demo-container code {
    padding: 1px 5px;
    border-radius: 2px;
    background: var(--smart-ui-state-hover);
    font-family: Consolas, "Courier New", monospace;
    font-size: 12px;
}

.smart-demo-container .demo-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 10px;
    margin-top: 12px;
}

.smart-demo-container .demo-actions label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--smart-text-color);
}

.smart-demo-container .demo-actions button,
.smart-demo-container .demo-button {
    min-height: 30px;
    padding: 0 12px;
    border: 1px solid var(--smart-border);
    border-radius: 3px;
    background: var(--smart-industrial-panel-background, var(--smart-surface));
    color: var(--smart-text-color);
    font: inherit;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    cursor: pointer;
}

.smart-demo-container .demo-actions button:hover,
.smart-demo-container .demo-button:hover {
    border-color: var(--smart-ui-state-border-hover);
    background: var(--smart-ui-state-hover);
    color: var(--smart-ui-state-color-hover);
}

.smart-demo-container .demo-actions button.demo-button-primary,
.smart-demo-container .demo-button-primary {
    border-color: var(--smart-primary);
    background: var(--smart-primary);
    color: var(--smart-primary-color, #fff);
}

.smart-demo-container .demo-actions button[disabled],
.smart-demo-container .demo-button[disabled] {
    opacity: 0.5;
    cursor: default;
}

.smart-demo-container .demo-actions select,
.smart-demo-container .demo-actions input[type="text"],
.smart-demo-container .demo-actions input[type="number"] {
    min-height: 30px;
    padding: 2px 6px;
    border: 1px solid var(--smart-border);
    border-radius: 3px;
    background: var(--smart-background);
    color: var(--smart-text-color);
    font: inherit;
    font-size: 13px;
}

.smart-demo-container .hint,
.smart-demo-container .demo-log,
.smart-demo-container .demo-counts {
    margin: 10px 0 0;
    font-size: 12px;
    line-height: 1.5;
    color: var(--smart-text-secondary-color);
    opacity: 1;
}

.smart-demo-container .demo-log,
.smart-demo-container .demo-counts {
    font-family: Consolas, "Courier New", monospace;
}

.smart-demo-container .log {
    list-style: none;
    margin: 10px 0 0;
    padding: 0;
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    color: var(--smart-text-secondary-color);
    opacity: 1;
}

.smart-demo-container .log li {
    padding: 2px 0;
}

react/App.jsx

import 'smart-industrial/source/styles/smart.default.css';
import 'smart-industrial/source/styles/smart.industrial-elements.css';
import 'smart-industrial/source/styles/smart.industrial.css';
import 'smart-industrial/source/styles/smart.industrial-dark.css';
import './App.css';
import React from 'react';
import { RootCauseTree } from 'smart-industrial/react/rootcausetree';


/* The demo logic is the HTML demo's: it feeds the elements the way a plant's data would. */
/* Root-cause tree overview.
 *
 * The analysis is written by hand here, in the shape a model's output takes: ids, labels,
 * tags, contributions and the evidence behind each. A plant's comes from its model service
 * as JSON and is assigned to `root` unchanged. */

const App = () => {
    const root = React.useRef(null);

    React.useEffect(() => {
        /* The elements render after React has mounted them, and the demo's logic - written
           for a page's load event - reads their parts, so it waits for every element in the
           tree to have rendered first. */
        const pending = Array.from(root.current.querySelectorAll('*'))
            .filter((element) => typeof element.whenRendered === 'function' && !element.isRendered)
            .map((element) => element.whenRendered());
        let unmounted = false;

        Promise.all(pending).then(() => {
            if (unmounted) {
                return;
            }

            const tree = document.getElementById('tree'),
                shallow = document.getElementById('shallow'),
                log = document.getElementById('log'),
                ranked = document.getElementById('ranked');

            const analysis = {
                id: 'dev-17', label: 'TIC-201 above forecast by 6.4 °C', tag: 'TIC-201', contribution: 1,
                evidence: 'Reactor temperature left the 95 % forecast band at 09:52 and stayed out for 14 min.',
                children: [
                    {
                        id: 'c1', label: 'Cooling water flow low', tag: 'FIC-204', contribution: 0.62,
                        evidence: 'FIC-204 fell 18 % in the 20 min before the deviation; the loop was in auto with the valve at 94 %.',
                        children: [
                            { id: 'c1a', label: 'Pump P-204 speed reduced', tag: 'SI-204', contribution: 0.55, evidence: 'Speed setpoint lowered from 1480 to 1320 rpm at 09:41 (operator, station 3).' },
                            { id: 'c1b', label: 'Strainer differential pressure', tag: 'PDI-204', contribution: 0.04, evidence: 'PDI-204 at 0.31 bar, within its normal band.' },
                            { id: 'c1c', label: 'Valve position', tag: 'FCV-204', contribution: 0.03, evidence: 'FCV-204 followed its controller output within 1 %.' }
                        ]
                    },
                    {
                        id: 'c2', label: 'Feed temperature high', tag: 'TI-088', contribution: 0.27,
                        evidence: 'TI-088 rose 4 °C over the hour; the feed preheater outlet has run 2 °C above its usual since the night shift.',
                        children: [
                            { id: 'c2a', label: 'Preheater steam pressure', tag: 'PI-071', contribution: 0.19, evidence: 'PI-071 up 0.4 bar since 06:00.' },
                            { id: 'c2b', label: 'Ambient', contribution: 0.02 }
                        ]
                    },
                    { id: 'c3', label: 'Agitator speed', tag: 'SI-230', contribution: 0.06, evidence: 'SI-230 steady; ruled out by timing.' },
                    { id: 'c4', label: 'Sensor drift on TIC-201', tag: 'TIC-201', contribution: 0.03, evidence: 'Redundant TT-201B agrees within 0.3 °C.' },
                    { id: 'c5', label: 'Catalyst batch change', contribution: 0.02 }
                ]
            };

            tree.root = analysis;
            shallow.root = analysis;

            function rank() {
                ranked.textContent = 'Ranked: ' + tree.ranked(4).map(function (cause) {
                    return cause.label + ' (' + Math.round(cause.contribution * 100) + ' %)';
                }).join(' · ');
            }

            rank();

            tree.addEventListener('nodeSelect', function (event) {
                /* The host's move: open the tag's trend, or record the engineer's verdict. */
                log.textContent = 'Selected ' + event.detail.node.label + (event.detail.node.tag ? ' [' + event.detail.node.tag + ']' : '') +
                    ' - path ' + event.detail.path.join(' > ') + '. A screen would open the evidence here.';
            });

            tree.addEventListener('collapse', function (event) {
                log.textContent = 'Collapsed ' + event.detail.node.label + '.';
            });

            tree.addEventListener('expand', function (event) {
                log.textContent = 'Expanded ' + event.detail.node.label + '.';
            });

            document.getElementById('collapse').addEventListener('click', function () {
                tree.collapseAll();
            });

            document.getElementById('expand').addEventListener('click', function () {
                tree.expandAll();
            });

            document.getElementById('prune').addEventListener('click', function () {
                const pruning = tree.minContribution > 0;

                tree.minContribution = pruning ? 0 : 0.05;
                this.textContent = pruning ? 'Fold what is under 5 %' : 'Show everything';
                rank();
            });

            document.getElementById('evidence').addEventListener('click', function () {
                tree.showEvidence = !tree.showEvidence;
                this.textContent = tree.showEvidence ? 'Hide evidence' : 'Show evidence';
            });
        });

        return () => {
            unmounted = true;
        };
    }, []);

    return (
        <div className="react-root" ref={root} theme="industrial">
            <div className="smart-demo-container">
                <section id="overview">
                    <h2>Smart.RootCauseTree displays the result of a root-cause analysis as a ranked tree.</h2>
                    <p>The deviation is the root node. Below it are the conditions that contribute to it, each with its share of the contribution as a bar and a percentage and the evidence used by the model, and below those the conditions that contribute to them. The component displays the analysis as it was produced; it does not rank or prune the causes itself. Selecting a node raises the <code>nodeSelect</code> event, where the application can open the underlying data and record whether the engineer agreed with the result.</p>
                </section>
                <section>
                    <h2>Deviation 17: reactor temperature above forecast</h2>
                    <RootCauseTree id="tree" label="Deviation 17" minContribution={0.05}></RootCauseTree>
                    <div className="demo-actions">
                        <button type="button" id="collapse">Collapse all</button>
                        <button type="button" id="expand">Expand all</button>
                        <button type="button" id="prune">Show everything</button>
                        <button type="button" id="evidence">Hide evidence</button>
                    </div>
                    <p className="demo-log" id="log">Use Tab to focus the tree. The up and down arrow keys move between nodes, the left and right arrow keys collapse and expand a node, and Enter selects it.</p>
                    <p className="demo-ranked" id="ranked"></p>
                </section>
                <section>
                    <h2>Maximum depth</h2>
                    <p>The <code>maxDepth</code> property limits how many levels of the tree are expanded. A node at the limit shows no expander. This is useful on a screen that has room for the first two levels and a link to the full analysis.</p>
                    <RootCauseTree id="shallow" maxDepth={1} showEvidence={false}></RootCauseTree>
                </section>
            </div>
        </div>
    );
};

export default App;

react/App.css

.smart-demo-container {
    max-width: 900px;
}

section {
    margin-bottom: 34px;
}

section h2 {
    font-size: 16px;
    font-weight: 500;
    margin: 0 0 8px;
}

section p {
    color: var(--smart-text-secondary-color);
    margin: 0 0 14px;
    max-width: 74ch;
}

code {
    background: var(--smart-ui-state-hover);
    font-family: Consolas, "Courier New", monospace;
    font-size: 12px;
    padding: 1px 5px;
}

.demo-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
}

.demo-actions button {
    background: transparent;
    border: 1px solid var(--smart-border);
    border-radius: var(--smart-border-radius);
    color: var(--smart-text-secondary-color);
    cursor: pointer;
    font-family: inherit;
    font-size: 11px;
    letter-spacing: .06em;
    padding: 7px 14px;
    text-transform: uppercase;
}

.demo-actions button:hover {
    background: var(--smart-ui-state-hover);
    border-color: var(--smart-ui-state-border-hover);
    color: var(--smart-ui-state-color-hover);
}

.demo-log,
.demo-counts {
    font-family: Consolas, "Courier New", monospace;
    font-size: 12px;
    margin: 12px 0 0;
    color: var(--smart-text-tertiary-color);
}

smart-root-cause-tree {
    display: block;
    max-width: 720px;
    padding: 6px 0;
    border: 1px solid var(--smart-border);
    border-radius: var(--smart-border-radius);
    background: var(--smart-industrial-panel-background, var(--smart-surface));
}

.demo-ranked {
    color: var(--smart-text-secondary-color);
    font-size: 12px;
}

/* ── Demo chrome, shared by the Industrial demos ─────────────────────────
   Headings, prose, buttons and notes are the same on every demo page. This block
   is appended by scripts and comes last, so it wins over the rules above. */
.smart-demo-container {
    padding: 4px 0 32px;
}

.smart-demo-container section {
    margin-bottom: 36px;
}

.smart-demo-container section h2 {
    margin: 0 0 8px;
    font-size: 17px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--smart-text-color);
}

.smart-demo-container #overview h2 {
    margin-bottom: 10px;
    font-size: 20px;
    max-width: 78ch;
}

.smart-demo-container section > p {
    margin: 0 0 14px;
    max-width: 84ch;
    font-size: 14px;
    line-height: 1.55;
    color: var(--smart-text-secondary-color);
}

.smart-demo-container code {
    padding: 1px 5px;
    border-radius: 2px;
    background: var(--smart-ui-state-hover);
    font-family: Consolas, "Courier New", monospace;
    font-size: 12px;
}

.smart-demo-container .demo-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 10px;
    margin-top: 12px;
}

.smart-demo-container .demo-actions label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--smart-text-color);
}

.smart-demo-container .demo-actions button,
.smart-demo-container .demo-button {
    min-height: 30px;
    padding: 0 12px;
    border: 1px solid var(--smart-border);
    border-radius: 3px;
    background: var(--smart-industrial-panel-background, var(--smart-surface));
    color: var(--smart-text-color);
    font: inherit;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    cursor: pointer;
}

.smart-demo-container .demo-actions button:hover,
.smart-demo-container .demo-button:hover {
    border-color: var(--smart-ui-state-border-hover);
    background: var(--smart-ui-state-hover);
    color: var(--smart-ui-state-color-hover);
}

.smart-demo-container .demo-actions button.demo-button-primary,
.smart-demo-container .demo-button-primary {
    border-color: var(--smart-primary);
    background: var(--smart-primary);
    color: var(--smart-primary-color, #fff);
}

.smart-demo-container .demo-actions button[disabled],
.smart-demo-container .demo-button[disabled] {
    opacity: 0.5;
    cursor: default;
}

.smart-demo-container .demo-actions select,
.smart-demo-container .demo-actions input[type="text"],
.smart-demo-container .demo-actions input[type="number"] {
    min-height: 30px;
    padding: 2px 6px;
    border: 1px solid var(--smart-border);
    border-radius: 3px;
    background: var(--smart-background);
    color: var(--smart-text-color);
    font: inherit;
    font-size: 13px;
}

.smart-demo-container .hint,
.smart-demo-container .demo-log,
.smart-demo-container .demo-counts {
    margin: 10px 0 0;
    font-size: 12px;
    line-height: 1.5;
    color: var(--smart-text-secondary-color);
    opacity: 1;
}

.smart-demo-container .demo-log,
.smart-demo-container .demo-counts {
    font-family: Consolas, "Courier New", monospace;
}

.smart-demo-container .log {
    list-style: none;
    margin: 10px 0 0;
    padding: 0;
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    color: var(--smart-text-secondary-color);
    opacity: 1;
}

.smart-demo-container .log li {
    padding: 2px 0;
}

vue/App.vue

<template>
  <div class="vue-root" theme="industrial" v-pre>
    <div class="smart-demo-container">

        <section id="overview">
            <h2>Smart.RootCauseTree displays the result of a root-cause analysis as a ranked tree.</h2>
            <p>
                The deviation is the root node. Below it are the conditions that contribute to it, each with its share of the contribution as a bar and a percentage and the evidence used by the model, and below those the conditions that contribute to them. The component displays the analysis as it was produced; it does not rank or prune the causes itself. Selecting a node raises the <code>nodeSelect</code> event, where the application can open the underlying data and record whether the engineer agreed with the result.
            </p>
        </section>

        <section>
            <h2>Deviation 17: reactor temperature above forecast</h2>
            <smart-root-cause-tree id="tree" label="Deviation 17" min-contribution="0.05"></smart-root-cause-tree>
            <div class="demo-actions">
                <button type="button" id="collapse">Collapse all</button>
                <button type="button" id="expand">Expand all</button>
                <button type="button" id="prune">Show everything</button>
                <button type="button" id="evidence">Hide evidence</button>
            </div>
            <p class="demo-log" id="log">Use Tab to focus the tree. The up and down arrow keys move between nodes, the left and right arrow keys collapse and expand a node, and Enter selects it.</p>
            <p class="demo-ranked" id="ranked"></p>
        </section>

        <section>
            <h2>Maximum depth</h2>
            <p>
                The <code>maxDepth</code> property limits how many levels of the tree are expanded. A node at the limit shows no expander. This is useful on a screen that has room for the first two levels and a link to the full analysis.
            </p>
            <smart-root-cause-tree id="shallow" max-depth="1" show-evidence="false"></smart-root-cause-tree>
        </section>

    </div>
  </div>
</template>

<script>
import { onMounted } from "vue";
import "smart-industrial/source/styles/smart.default.css";
import "smart-industrial/source/styles/smart.industrial-elements.css";
import "smart-industrial/source/styles/smart.industrial.css";
import "smart-industrial/source/styles/smart.industrial-dark.css";
import "smart-industrial/source/modules/smart.rootcausetree.js";


/* Root-cause tree overview.
 *
 * The analysis is written by hand here, in the shape a model's output takes: ids, labels,
 * tags, contributions and the evidence behind each. A plant's comes from its model service
 * as JSON and is assigned to `root` unchanged. */

export default {
  name: "app",
  setup() {
    onMounted(() => {
      /* The elements render after Vue has mounted them, and the demo's logic - written for
         a page's load event - reads their parts, so it waits for every element in the tree
         to have rendered first. */
      const pending = Array.from(document.querySelector(".vue-root").querySelectorAll("*"))
        .filter((element) => typeof element.whenRendered === "function" && !element.isRendered)
        .map((element) => element.whenRendered());

      Promise.all(pending).then(() => {
        const tree = document.getElementById('tree'),
            shallow = document.getElementById('shallow'),
            log = document.getElementById('log'),
            ranked = document.getElementById('ranked');

        const analysis = {
            id: 'dev-17', label: 'TIC-201 above forecast by 6.4 °C', tag: 'TIC-201', contribution: 1,
            evidence: 'Reactor temperature left the 95 % forecast band at 09:52 and stayed out for 14 min.',
            children: [
                {
                    id: 'c1', label: 'Cooling water flow low', tag: 'FIC-204', contribution: 0.62,
                    evidence: 'FIC-204 fell 18 % in the 20 min before the deviation; the loop was in auto with the valve at 94 %.',
                    children: [
                        { id: 'c1a', label: 'Pump P-204 speed reduced', tag: 'SI-204', contribution: 0.55, evidence: 'Speed setpoint lowered from 1480 to 1320 rpm at 09:41 (operator, station 3).' },
                        { id: 'c1b', label: 'Strainer differential pressure', tag: 'PDI-204', contribution: 0.04, evidence: 'PDI-204 at 0.31 bar, within its normal band.' },
                        { id: 'c1c', label: 'Valve position', tag: 'FCV-204', contribution: 0.03, evidence: 'FCV-204 followed its controller output within 1 %.' }
                    ]
                },
                {
                    id: 'c2', label: 'Feed temperature high', tag: 'TI-088', contribution: 0.27,
                    evidence: 'TI-088 rose 4 °C over the hour; the feed preheater outlet has run 2 °C above its usual since the night shift.',
                    children: [
                        { id: 'c2a', label: 'Preheater steam pressure', tag: 'PI-071', contribution: 0.19, evidence: 'PI-071 up 0.4 bar since 06:00.' },
                        { id: 'c2b', label: 'Ambient', contribution: 0.02 }
                    ]
                },
                { id: 'c3', label: 'Agitator speed', tag: 'SI-230', contribution: 0.06, evidence: 'SI-230 steady; ruled out by timing.' },
                { id: 'c4', label: 'Sensor drift on TIC-201', tag: 'TIC-201', contribution: 0.03, evidence: 'Redundant TT-201B agrees within 0.3 °C.' },
                { id: 'c5', label: 'Catalyst batch change', contribution: 0.02 }
            ]
        };

        tree.root = analysis;
        shallow.root = analysis;

        function rank() {
            ranked.textContent = 'Ranked: ' + tree.ranked(4).map(function (cause) {
                return cause.label + ' (' + Math.round(cause.contribution * 100) + ' %)';
            }).join(' · ');
        }

        rank();

        tree.addEventListener('nodeSelect', function (event) {
            /* The host's move: open the tag's trend, or record the engineer's verdict. */
            log.textContent = 'Selected ' + event.detail.node.label + (event.detail.node.tag ? ' [' + event.detail.node.tag + ']' : '') +
                ' - path ' + event.detail.path.join(' > ') + '. A screen would open the evidence here.';
        });

        tree.addEventListener('collapse', function (event) {
            log.textContent = 'Collapsed ' + event.detail.node.label + '.';
        });

        tree.addEventListener('expand', function (event) {
            log.textContent = 'Expanded ' + event.detail.node.label + '.';
        });

        document.getElementById('collapse').addEventListener('click', function () {
            tree.collapseAll();
        });

        document.getElementById('expand').addEventListener('click', function () {
            tree.expandAll();
        });

        document.getElementById('prune').addEventListener('click', function () {
            const pruning = tree.minContribution > 0;

            tree.minContribution = pruning ? 0 : 0.05;
            this.textContent = pruning ? 'Fold what is under 5 %' : 'Show everything';
            rank();
        });

        document.getElementById('evidence').addEventListener('click', function () {
            tree.showEvidence = !tree.showEvidence;
            this.textContent = tree.showEvidence ? 'Hide evidence' : 'Show evidence';
        });
      });
    });
  }
};
</script>

<style>
.smart-demo-container {
    max-width: 900px;
}

section {
    margin-bottom: 34px;
}

section h2 {
    font-size: 16px;
    font-weight: 500;
    margin: 0 0 8px;
}

section p {
    color: var(--smart-text-secondary-color);
    margin: 0 0 14px;
    max-width: 74ch;
}

code {
    background: var(--smart-ui-state-hover);
    font-family: Consolas, "Courier New", monospace;
    font-size: 12px;
    padding: 1px 5px;
}

.demo-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
}

.demo-actions button {
    background: transparent;
    border: 1px solid var(--smart-border);
    border-radius: var(--smart-border-radius);
    color: var(--smart-text-secondary-color);
    cursor: pointer;
    font-family: inherit;
    font-size: 11px;
    letter-spacing: .06em;
    padding: 7px 14px;
    text-transform: uppercase;
}

.demo-actions button:hover {
    background: var(--smart-ui-state-hover);
    border-color: var(--smart-ui-state-border-hover);
    color: var(--smart-ui-state-color-hover);
}

.demo-log,
.demo-counts {
    font-family: Consolas, "Courier New", monospace;
    font-size: 12px;
    margin: 12px 0 0;
    color: var(--smart-text-tertiary-color);
}

smart-root-cause-tree {
    display: block;
    max-width: 720px;
    padding: 6px 0;
    border: 1px solid var(--smart-border);
    border-radius: var(--smart-border-radius);
    background: var(--smart-industrial-panel-background, var(--smart-surface));
}

.demo-ranked {
    color: var(--smart-text-secondary-color);
    font-size: 12px;
}

/* ── Demo chrome, shared by the Industrial demos ─────────────────────────
   Headings, prose, buttons and notes are the same on every demo page. This block
   is appended by scripts and comes last, so it wins over the rules above. */
.smart-demo-container {
    padding: 4px 0 32px;
}

.smart-demo-container section {
    margin-bottom: 36px;
}

.smart-demo-container section h2 {
    margin: 0 0 8px;
    font-size: 17px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--smart-text-color);
}

.smart-demo-container #overview h2 {
    margin-bottom: 10px;
    font-size: 20px;
    max-width: 78ch;
}

.smart-demo-container section > p {
    margin: 0 0 14px;
    max-width: 84ch;
    font-size: 14px;
    line-height: 1.55;
    color: var(--smart-text-secondary-color);
}

.smart-demo-container code {
    padding: 1px 5px;
    border-radius: 2px;
    background: var(--smart-ui-state-hover);
    font-family: Consolas, "Courier New", monospace;
    font-size: 12px;
}

.smart-demo-container .demo-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 10px;
    margin-top: 12px;
}

.smart-demo-container .demo-actions label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--smart-text-color);
}

.smart-demo-container .demo-actions button,
.smart-demo-container .demo-button {
    min-height: 30px;
    padding: 0 12px;
    border: 1px solid var(--smart-border);
    border-radius: 3px;
    background: var(--smart-industrial-panel-background, var(--smart-surface));
    color: var(--smart-text-color);
    font: inherit;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    cursor: pointer;
}

.smart-demo-container .demo-actions button:hover,
.smart-demo-container .demo-button:hover {
    border-color: var(--smart-ui-state-border-hover);
    background: var(--smart-ui-state-hover);
    color: var(--smart-ui-state-color-hover);
}

.smart-demo-container .demo-actions button.demo-button-primary,
.smart-demo-container .demo-button-primary {
    border-color: var(--smart-primary);
    background: var(--smart-primary);
    color: var(--smart-primary-color, #fff);
}

.smart-demo-container .demo-actions button[disabled],
.smart-demo-container .demo-button[disabled] {
    opacity: 0.5;
    cursor: default;
}

.smart-demo-container .demo-actions select,
.smart-demo-container .demo-actions input[type="text"],
.smart-demo-container .demo-actions input[type="number"] {
    min-height: 30px;
    padding: 2px 6px;
    border: 1px solid var(--smart-border);
    border-radius: 3px;
    background: var(--smart-background);
    color: var(--smart-text-color);
    font: inherit;
    font-size: 13px;
}

.smart-demo-container .hint,
.smart-demo-container .demo-log,
.smart-demo-container .demo-counts {
    margin: 10px 0 0;
    font-size: 12px;
    line-height: 1.5;
    color: var(--smart-text-secondary-color);
    opacity: 1;
}

.smart-demo-container .demo-log,
.smart-demo-container .demo-counts {
    font-family: Consolas, "Courier New", monospace;
}

.smart-demo-container .log {
    list-style: none;
    margin: 10px 0 0;
    padding: 0;
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    color: var(--smart-text-secondary-color);
    opacity: 1;
}

.smart-demo-container .log li {
    padding: 2px 0;
}
</style>