Skip to content

Matrix plugin makeover - #48

Open
luke-kustra wants to merge 6 commits into
esnet:2.1.1from
luke-kustra:master
Open

Matrix plugin makeover#48
luke-kustra wants to merge 6 commits into
esnet:2.1.1from
luke-kustra:master

Conversation

@luke-kustra

Copy link
Copy Markdown

See "makeover.md" for makeover notes and changes made.

luke-kustra and others added 6 commits July 17, 2026 16:37
…ements

Cells & interaction: rounded corners + surface-gap spacers, hover cross-highlight
(dim other cells, bold matching axis labels), distinct null vs no-data rendering,
tooltip fix + value-led hierarchy.

Color: built-in sequential (default) and diverging color modes with theme-aware
neutrals; standard-options mode preserved.

Layout & reading: sort by marginal total, category-group background bands,
fit-to-panel sizing, frozen axis labels, marginal total bars, size-encodes-value
(dual encoding). Axis margins now sized to measured label width so labels are no
longer clipped; pixel-accurate truncation.

Legend: range legend gains a title and start/mid/end ticks.

Adds sample-data/ CSV fixtures and makeover.md documenting the changes.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Clarity: legend null/no-data key; continuous gradient legend for
sequential/diverging modes with labeled min/max and a diverging midpoint tick;
guided empty/onboarding states that explain what's missing instead of a bare
"No Data".

Analytical: cluster ordering (dependency-free spectral seriation) as a third
row/column sort mode; explicit/shared manual color domain for comparable panels;
value-threshold focus that dims or hides cells outside a range.

Interaction & accessibility: keyboard navigation (roving tabindex, arrow keys,
Enter/Space to pin, Escape), focus parity with hover, ARIA grid roles + per-cell
labels, accessible HTML table-view fallback, interactive legend (hover to
highlight matching cells), click-to-pin row/column, and auto-horizontal column
labels when they fit.

Also: render hook is now called unconditionally for stable React hook order
(fixes a crash when toggling the table view), with a hardened createViz guard.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Two runtime bugs found while adding regression tests:

- makeRamp threw on non-finite input (NaN/Infinity) by dereferencing rgb[NaN],
  which could blank the whole panel. Now clamps the index and falls back to the
  low end of the ramp for non-finite t.

- Color domain was extracted with Object.values(field.values), which returns the
  internal buffer (not the values) when field.values is a Vector rather than a
  plain array — leaving the domain empty and rendering sequential/diverging cells
  as a single flat color. Added fieldValuesArray() that handles plain arrays,
  Vectors (toArray) and Vector-like (length+get) uniformly, used for both the
  color domain and the categorical legend.

Adds src/verify.test.tsx exercising parseData across all color/sort/grouping/
focus/null-vs-no-data/empty combinations; these assertions catch both bugs.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
- matrix.js: replace sanitize-html import with Grafana's textUtil.sanitize,
  matching upstream 2.1.1 which drops the sanitize-html dependency (keeps the
  branch buildable after merging 2.1.1).
- dataParser.ts: guard the static Row/Column list against undefined/empty input
  and trim whitespace, so enabling "Use Static Row/Column Lists" before filling
  the fields no longer throws and " a, b " no longer yields phantom/padded keys.
- makeover.md: correct the Verifying section — no demo dashboard is bundled in
  the repo; describe adding the panel + a sample CSV manually.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
# Conflicts:
#	src/EsnetMatrix.tsx
#	src/dataParser.ts
#	src/matrix.d.ts
#	src/matrix.js
#	src/module.ts
Taking the makeover's matrix.js reverted 2.1.1's block-scoped-variable and
strict-equality refactor, so `yarn lint` (a CI gate) failed on it. Restore that
cleanliness without changing behavior:
- var -> let/const
- == -> === (legendType check)
- add the same `/* eslint-disable react-hooks/rules-of-hooks */` upstream uses
  for the d3 render entry point.

All authored source is now lint-clean (0 errors). The only remaining lint
output is src/d3.min.js, which is byte-identical to upstream 2.1.1.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Copilot AI review requested due to automatic review settings July 24, 2026 01:25

Copilot AI left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Copilot was unable to review this pull request because the user who requested the review has reached their quota limit.

@luke-kustra

Copy link
Copy Markdown
Author

Legend redo complete. See makeover.md for changes made.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants