feat: SW-1162 Add self-describing visualization metadata#75
feat: SW-1162 Add self-describing visualization metadata#75darwinboersma wants to merge 6 commits into
Conversation
Adds a visualization metadata contract and helper so chart components can be self-describing. Consumers (e.g. the GlassBox sandbox) can scan kit exports for components carrying a .visualization static property and dispatch calculation outputs to compatible visualizations without maintaining a separate registry. - src/lib/visualization.ts — VisualizationParameter, VisualizationMeta, VisualizationComponent types, plus withVisualization() helper and an isVisualizationComponent type guard - Re-exported from src/index.ts so consumers can import the types - PlateMap is wrapped with withVisualization, declaring inputKind "plate_map" and the user-tunable subset of its props (colorScale, precision, showColorBar, showLegend, markerShape, visualizationMode) Tests cover the helper's metadata attachment, the type guard, and the attached PlateMap metadata. Plotly is mocked in the PlateMap unit test because importing the component triggers Plotly's module-load access to window.URL.createObjectURL, which is unavailable in jsdom. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
darwinboersma
temporarily deployed
to
artifactory-prod
GitHub Actions
Inactive
![chatgpt-codex-connector[bot]](https://avatars.githubusercontent.com/in/1144995?s=60&v=4){kind=small}
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 67adb8700d
ℹ️ About Codex in GitHub
Codex has been enabled to automatically review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
When you sign up for Codex through ChatGPT, Codex can also answer questions or update the PR, like "@codex address that feedback".
| name: "colorScale", | ||
| type: "select", | ||
| description: "Color scale used to render well values in heatmap mode.", | ||
| default: "Viridis", |
There was a problem hiding this comment.
Set the colorScale metadata default to match the component’s real default; right now the metadata says "Viridis", but PlateMap itself defaults colorScale to DEFAULT_COLOR_SCALE (a custom array). Any consumer that applies defaults from .visualization.tunableProps will render a different palette than direct PlateMap usage, which breaks the stated self-describing/defaults contract and can cause inconsistent charts across integration paths.
Useful? React with 👍 / 👎.
There was a problem hiding this comment.
Pull request overview
This PR introduces a first-class “self-describing visualization” contract so chart components can expose discoverability metadata (.visualization) directly on the component export, removing the need for a separate consumer-side registry.
Changes:
- Added
src/lib/visualization.tswithVisualizationMeta/VisualizationComponenttypes, awithVisualizationhelper, and anisVisualizationComponenttype guard. - Wrapped
PlateMapwithwithVisualization(...)and defined itsinputKindand tunable prop metadata. - Re-exported visualization utilities from the package root and added unit tests for both the helper and PlateMap metadata.
Reviewed changes
Copilot reviewed 5 out of 5 changed files in this pull request and generated 3 comments.
Show a summary per file
| File | Description |
|---|---|
| src/lib/visualization.ts | Introduces the visualization metadata contract + helper/guard APIs. |
| src/lib/visualization.test.ts | Adds unit tests for withVisualization and isVisualizationComponent. |
| src/index.ts | Re-exports visualization APIs from the package root. |
| src/components/charts/PlateMap/PlateMap.tsx | Attaches .visualization metadata to the exported PlateMap component. |
| src/components/charts/PlateMap/tests/visualization.test.ts | Verifies PlateMap exposes expected visualization metadata. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| return ( | ||
| typeof value === "function" && | ||
| "visualization" in value && | ||
| typeof (value as { visualization?: unknown }).visualization === "object" |
| name: "colorScale", | ||
| type: "select", | ||
| description: "Color scale used to render well values in heatmap mode.", | ||
| default: "Viridis", |
| }); | ||
|
|
||
| it("rejects non-component values", () => { | ||
| expect(isVisualizationComponent()).toBe(false); |
darwinboersma
temporarily deployed
to
artifactory-prod
GitHub Actions
Inactive
darwinboersma
changed the title
darwinboersma
changed the title
darwinboersma
temporarily deployed
to
artifactory-prod
GitHub Actions
Inactive
darwinboersma
temporarily deployed
to
artifactory-prod
GitHub Actions
Inactive
darwinboersma
temporarily deployed
to
artifactory-prod
GitHub Actions
Inactive
darwinboersma
force-pushed
the
dboersma/glassbox-viz-metadata
branch
from
75c0148 to
4d06afb
Compare
darwinboersma
temporarily deployed
to
artifactory-prod
GitHub Actions
Inactive
darwinboersma
temporarily deployed
to
artifactory-prod
GitHub Actions
Inactive
54321jenn-ts
left a comment
54321jenn-ts
left a comment
There was a problem hiding this comment.
I don't think this needs a UX review, but just in case LGTM
blee-tetrascience
left a comment
blee-tetrascience
left a comment
There was a problem hiding this comment.
Requesting changes because CI is failing and the diff includes large unrelated AI component work. CI is failing because overall coverage dropped and several new AI files miss the coverage gate.
| export * from "@/components/ui/code-editor"; | ||
| export * from "@/components/ui/tetrascience-icon"; | ||
|
|
||
| // AI |
There was a problem hiding this comment.
These exports add a broad AI component surface to a PR whose stated scope is visualization metadata. That also brings many new runtime dependencies. Please split the AI components into their own Jira scoped PR or remove them here.
|
Actually this PR isn't needed anymore, right @darwinboersma ? This was just for our onsite prototyping |
Summary
Introduces a metadata contract so visualization components can carry their own discoverability information, removing the need for a separate registry on the consumer side.
src/lib/visualization.tsexportsVisualizationParameter,VisualizationMeta,VisualizationComponent, plus awithVisualization(Component, meta)helper and anisVisualizationComponenttype guard.PlateMapis wrapped with the helper, declaringid: "plate-map",inputKind: "plate_map", and the user-tunable subset of its props.PlotlyVisualization->id: "plotly",inputKind: "plot"TableVisualization->id: "table",inputKind: "table"ScalarVisualization->id: "scalar",inputKind: "number"Why
The TetraScience GlassBox sandbox maintains a consumer-side visualization registry. Letting toolkit components self-describe means consumers can scan kit exports at runtime and dispatch by
inputKindwith minimal per-component glue. The kit owns IDs, versioning, metadata, and tested defaults; the consumer owns routing.How consumers use it
Test plan
yarn typecheckyarn lintyarn test src/components/visualizations/__tests__/visualization.test.ts src/components/charts/PlateMap/__tests__/visualization.test.tsyarn buildNotes
yarn format:checkstill reports broad pre-existing formatting drift in this repo; only the files touched here were formatted.