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 Blazor
The Razor component is <RootCauseTree> in Smart.Blazor.Industrial: every property is a parameter in PascalCase, every event an EventCallback<Event> named On<Event> whose ev["Detail"] is the typed detail class, and the methods are called on the @ref. String choices are enums. In a Blazor Web App (.NET 8 and later) the page needs an interactive render mode, for example @rendermode InteractiveServer; a statically rendered component stays empty.
@using Smart.Blazor.Industrial
@* .NET 8 and later: an interactive render mode, on the page or for the whole app *@
@rendermode InteractiveServer
<RootCauseTree @ref="rootCauseTree" MinContribution="42"
OnNodeSelect="OnNodeSelect" />
@code {
RootCauseTree rootCauseTree;
void OnNodeSelect(Event ev)
{
RootCauseTreeNodeSelectEventDetail detail = ev["Detail"];
}
// Task<object> NodeById(string id)
void Call() => rootCauseTree.NodeById("value");
}
Properties
| Parameter | 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 | double | 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 | int | 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 | IEnumerable<object> | 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 | bool | Determines whether each node's evidence is shown under its label. |
ShowTags | bool | Determines whether each node's tag is shown beside its label and spoken with it. |
SortByContribution | bool | 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 |
|---|---|
Task<object> NodeById(string id) | 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. |
Task<IEnumerable<object>> PathTo(string id) | 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. |
Task<IEnumerable<object>> Ranked() | 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. |
void Select(string id) | Selects a node, expands the path to it, moves focus to it and raises the nodeSelect event.id string The node's id. |
void Toggle(string id) | 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. |
void ExpandAll() | Expands every node. |
void CollapseAll() | Collapses every node except the root. |
Events
Every event is an EventCallback<Event>; Event is a dictionary and ev["Detail"] converts to the detail class named under the event.
| Event | Description and detail |
|---|---|
OnNodeSelect | 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 dynamic The ids from the root to the node.Depth int How many levels below the root. |
OnExpand | This event is triggered when a node is opened.Id string The node's id.Node object The node as it was given. |
OnCollapse | This event is triggered when a node is closed.Id string The node's id.Node object The node as it was given. |
OnStructureWarning | 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 IEnumerable<string> What was found: cycle, depth, or both.Cycles IEnumerable<object> The loops, as [{ id, parent }]: the node that repeats and the node whose child it is.MaxLevels double 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