Model outputs

Root Cause Tree <smart-root-cause-tree>

RootCauseTree displays the ranked, nested explanation produced by a root-cause analysis model: the deviation at the root, the contributing conditions below it and their share of the contribution as a bar and a percentage, with the evidence for each node.

<smart-root-cause-tree> · 9 properties, 7 methods, 4 events · source/modules/smart.rootcausetree.js

Usage in TypeScript

The package ships its definitions: RootCauseTree is the element type and RootCauseTreeProperties the properties, both exported from smart-industrial/source/typescript/smart.industrial. document.querySelector('smart-root-cause-tree') is typed as RootCauseTree.

import { RootCauseTree, RootCauseTreeProperties } from 'smart-industrial/source/typescript/smart.industrial';

const rootCauseTree = document.querySelector('smart-root-cause-tree') as RootCauseTree;

rootCauseTree.minContribution = 42;
rootCauseTree.addEventListener('nodeSelect', (event: CustomEvent) => console.log(event.detail));
rootCauseTree.nodeById('value');

Properties

Property	Type, default	Description
root	object?	Sets or retrieves the analysis, as { id, label, tag, contribution, evidence, children }, contribution being 0 to 1 and children more of the same. Assign a new object to update the component. A contribution outside 0 to 1 is shown as the number the model gave (300 %, -30 %) with OVER or UNDER beside it and in the spoken name, the bar held inside its track; one that is not a number (missing, NaN, Infinity, text) shows "--" and is spoken "no reading". Neither is ever folded away. A node that is its own ancestor (a loop in the data) is drawn once, with a "Loop back to ..." marker where the loop would start again (Enter on it selects the node it repeats), and the tree is drawn at most 64 levels deep and 5000 nodes, with a note where it is cut; either raises structureWarning once per root and one console warning. The property is not reflected to an attribute.
minContribution	number 0	Sets or retrieves the contribution share below which nodes are collapsed into a count under their parent, for example "and 4 more under 5 %". 0 shows every node. Only a share inside 0 to 1 is folded: a contribution out of range, or none at all, is always shown. A value that is not a number counts as 0.
maxDepth	number 0	Sets or retrieves the number of levels shown below the root. 0 shows every level. A node at the limit shows no expander.
selected	string?	Sets or retrieves the selected node's id, or null.
expandedIds	array?	Sets or retrieves the ids of the nodes shown open. Every node is open until this is set. Assign a new array to update the component.
showEvidence	boolean true	Determines whether each node's evidence is shown under its label.
showTags	boolean true	Determines whether each node's tag is shown beside its label and spoken with it.
sortByContribution	boolean true	Determines whether children are ordered by contribution, largest first, or shown in the order given.
label	string	Sets or retrieves a name for the analysis, spoken as part of the tree's label.

Methods

Method	Description
nodeById(id: string): any	Returns a node by id, as it was given, or null. A loop in the data is not followed round. id string The node's id.
pathTo(id: string): any[]	Returns the nodes from the root to one, root first, empty when the id is not in the tree. A loop in the data is not followed round. id string The node's id.
ranked(count?: number): any[]	Returns the causes of the whole tree ranked by contribution, largest first, as [{ id, label, tag, contribution, depth }]. contribution is the number the model gave, outside 0 to 1 too; null where it gave none that is a number, and those come last. A loop in the data is not followed round. count number How many. All when omitted.
select(id: string): void	Selects a node, expands the path to it, moves focus to it and raises the nodeSelect event. id string The node's id.
toggle(id: string, open?: boolean): void	Expands or collapses one node and raises the expand or collapse event. id string The node's id. open boolean Force a state instead of toggling.
expandAll(): void	Expands every node.
collapseAll(): void	Collapses every node except the root.

Events

The data of an event is in event.detail. The root cause tree opens or closes a node and then raises expand or collapse, and sets selected and then raises nodeSelect. The application reads the node and its path from event.detail.

Event	Description and detail
nodeSelect	This event is triggered when a node is selected, clicked, Enter or Space pressed on it, or select() called. id string The node's id. node object The node as it was given. path any[] The ids from the root to the node. depth number How many levels below the root.
expand	This event is triggered when a node is opened. id string The node's id. node object The node as it was given.
collapse	This event is triggered when a node is closed. id string The node's id. node object The node as it was given.
structureWarning	This event is triggered once when a root is assigned that cannot be drawn as given: a node that is its own ancestor (a loop) or more than 64 levels. The tree is drawn with markers where it is cut, and nothing is thrown. reasons array What was found: cycle, depth, or both. cycles array The loops, as [{ id, parent }]: the node that repeats and the node whose child it is. maxLevels number The most levels drawn, 64.

CSS variables

The component declares 4 CSS variables; the CSS page shows how to set them.

--smart-rct-indent --smart-rct-bar-height --smart-rct-bar-color --smart-rct-line-color