feat: add tooltips, failure definitions, and semantic class colours#7
Merged
jrkasprzyk merged 21 commits intomainfrom May 7, 2026
Merged
feat: add tooltips, failure definitions, and semantic class colours#7jrkasprzyk merged 21 commits intomainfrom
jrkasprzyk merged 21 commits intomainfrom
Conversation
add_performance.R: add whole-tree performance info from txt files into JSON files also expose this information in the viewer .gitattributes seeks to avoid LF and CRLF problems between windows and mac
- Hover tooltips on performance stat labels (accuracy,
kappa, etc.)
using a fixed-position tooltip driven by CSS vars from
styles.css
- Success/Failure class names now resolve to
--success/--failure CSS
vars instead of Tableau10, keeping tree nodes, class bars,
and
confusion matrix highlights visually consistent
- Single source of truth: change --success/--failure in
styles.css
to update all three colour sites at once
Provides per-dataset context on what 'Failure' means, surfaced directly on the visualization rather than buried in docs. - Overlay panel: absolute-positioned top-left of canvas - ailure_definition?: string added to Arbor type - R/add_failure_definition.R: CLI patcher to set/clear the field - Muted placeholder when field absent; normal ink when set
- README.md — added 2 features to list, new step 1c for add_failure_definition.R, updated project structure table, added failure_definition row to JSON schema table - public/about.md — new step 2 for Failure Definition panel, metric tooltip hint on performance step, renumbered steps - CHANGELOG.md — full Unreleased section now covers all 4 feature additions (failure def overlay, R CLIs, performance panel, metric tooltips, semantic colours) plus original Changed entries for node labels/spacing/drag
…lors Tree nodes encode predicted class label (domain meaning); confusion matrix encodes model accuracy. Sharing --success/--failure for both caused users to infer accuracy from node color — incorrect, since one leaf holds a mix of correct and incorrect observations. Split into four CSS variables, single source of truth in styles.css: - --node-success / --node-failure: blue/amber for class labels - --cm-correct / --cm-error: green/red for accuracy utils.ts semanticColors() reads --node-* vars. README documents the two-system distinction.
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Owner
Author
|
Edit: I intended to do the variable-importance stuff later, but because it was easier to handle, I did it first. |
Contributor
There was a problem hiding this comment.
Pull request overview
Adds UI affordances and supporting data/schema to better interpret classification trees: an always-visible “Failure Definition” overlay, a whole-tree performance panel (confusion matrix + stats) with metric tooltips, and semantic class coloring decoupled from confusion-matrix correctness coloring.
Changes:
- Add optional
failure_definitionandperformancefields to the dataset JSON schema and render them in the UI (overlay + sidebar panel). - Add metric hover tooltips for performance statistics, plus styling for confusion matrix / panels.
- Introduce semantic class color mapping (
Success/Failure) via CSS variables and use it for tree nodes and probability bars.
Reviewed changes
Copilot reviewed 21 out of 21 changed files in this pull request and generated 11 comments.
Show a summary per file
| File | Description |
|---|---|
| src/utils.ts | Adds semantic class → CSS-variable color mapping helper used across UI. |
| src/types.ts | Extends top-level Arbor schema with optional failure_definition and performance types. |
| src/tree.ts | Applies semantic colors (with Tableau fallback) for node class coloring. |
| src/styles.css | Adds styling for performance panel, confusion matrix, metric tooltip, and failure definition overlay; introduces new CSS variables. |
| src/main.ts | Renders failure definition overlay + performance panel; adds metric-tooltip behavior; aligns probability bar colors with semantic mapping. |
| README.md | Documents new features, new R scripts, and customization guidance for class/correctness colors. |
| R/add_performance.R | New CLI script to parse caret confusionMatrix() text output and patch performance into exported JSON. |
| R/add_failure_definition.R | New CLI script to set/clear failure_definition in exported JSON. |
| public/data/EOWY5_classification.json | Adds performance + failure_definition to example dataset (and reformats JSON). |
| public/data/EOWY3_classification.json | Adds performance + failure_definition to example dataset. |
| public/data/EOWY2_classification.json | Adds performance + failure_definition to example dataset. |
| public/data/EOWY1_classification.json | Adds performance + failure_definition to example dataset. |
| public/about.md | Updates user-facing documentation to include failure definition + performance panel and metric meanings. |
| index.html | Adds failure-definition overlay container, performance panel container, and metric-tooltip element. |
| example_data/SE_Oct2025_CART_performance_P3500_EOWY5.txt | Adds sample caret output used for performance patching. |
| example_data/SE_Oct2025_CART_performance_P3500_EOWY4.txt | Adds sample caret output used for performance patching. |
| example_data/SE_Oct2025_CART_performance_P3500_EOWY3.txt | Adds sample caret output used for performance patching. |
| example_data/SE_Oct2025_CART_performance_P3500_EOWY2.txt | Adds sample caret output used for performance patching. |
| example_data/SE_Oct2025_CART_performance_P3500_EOWY1.txt | Adds sample caret output used for performance patching. |
| CHANGELOG.md | Documents the new overlay/panel/scripts and color behavior (needs alignment with implementation). |
| .gitattributes | Normalizes text files to LF endings. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Clarify in README that there are four colors for the classes and confusion matrix, but there are other colors elsewhere in the app. Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>
…positioning Agent-Logs-Url: https://github.com/jrkasprzyk/ArborView/sessions/2b3b7ee3-f742-4a48-85a7-144eeed8dd04 Co-authored-by: jrkasprzyk <4161712+jrkasprzyk@users.noreply.github.com>
Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>
This entry describes semantic class colours as --success/--failure and says the confusion matrix uses the same palette, but the implementation uses --node-success/--node-failure for node classes and separate --cm-correct/--cm-error for confusion-matrix correctness. Update this changelog item to match the actual CSS variables and the decoupled palettes. Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>
parse_num() assumes s is a non-empty string; if a statistic key is missing (so s is NULL), trimws()/grepl() will produce length-0 values and if (grepl(...)) will error. Handle NULL/empty input explicitly (e.g., return NA_real_ when is.null(s) or length(s)==0). Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>
Add validation to avoid errors Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>
… code Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>
In a previous commit, the failure definitions were truncated. They have now been edited!
…kasprzyk/ArborView into feat/tooltips-failures-colors Update local copy to reflect new changes
accuracy_ci typed as [number | null, number | null] → TS2531 on direct arithmetic. Vercel build failed. Null-check before formatting; fall back to empty string.
zaca1902
reviewed
May 7, 2026
zaca1902
reviewed
May 7, 2026
Collaborator
zaca1902
left a comment
zaca1902
left a comment
There was a problem hiding this comment.
I only left one comment regarding the wording of a paragraph that we looked at in yesterday's meeting regarding the reasoning for two color systems. I suggested a rewording that may be easier to understand, but we can definitely tweak it further!
Add language suggested here #7 (comment) to README.md
src/main.ts declared importanceEl in both branches; kept all five selectors — resizeHandleEl from main, performanceEl/metricTooltipEl/failureDefTextEl from feat branch.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
What to review