@mieweb/ui 0.11.0-dev.55 → 0.11.0-dev.56

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/agent/README.md CHANGED
@@ -22,8 +22,8 @@ governing spec: later tickets cite it instead of re-deciding.
22
22
  | ------------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
23
23
  | [mieweb-ui.instructions.md](mieweb-ui.instructions.md) | The rules template. Copied verbatim to the consumer's `.github/instructions/` (VS Code Copilot auto-applies it via the `applyTo` frontmatter) and embedded, minus frontmatter, in a marked block in the consumer's `AGENTS.md` (the cross-tool convention). |
24
24
  | [init-agent.mjs](init-agent.mjs) | The `mieweb-ui` bin. Idempotent — rerun after upgrading `@mieweb/ui` to refresh all targets. `--experimental-agents` additionally installs the agent team below. |
25
- | [agents/](agents/) | Agent templates: `mieweb-ui-design` (orchestrator) + `mieweb-ui-styling` + `mieweb-ui-install` + `mieweb-ui-a11y` + `mieweb-ui-i18n` + `mieweb-ui-migration` + `mieweb-ui-richtext`. Installed to the consumer's `.github/agents/` behind `--experimental-agents`. |
26
- | [skills/](skills/) | Skill templates: `mieweb-ui-catalog`, `mieweb-ui-tokens`, `mieweb-ui-icons` (generated — `pnpm agent:skills`, never hand-edit) + `mieweb-ui-brands`, `mieweb-ui-tailwind4`, `mieweb-ui-a11y-checklist`, `mieweb-ui-i18n-checklist`, `mieweb-ui-kerebron` (hand-written). Installed to `.github/skills/` behind `--experimental-agents`. |
25
+ | [agents/](agents/) | Agent templates: `mieweb-ui-design` (orchestrator) + `mieweb-ui-styling` + `mieweb-ui-install` + `mieweb-ui-a11y` + `mieweb-ui-i18n` + `mieweb-ui-migration` + `mieweb-ui-richtext` + `mieweb-ui-grids`. Installed to the consumer's `.github/agents/` behind `--experimental-agents`. |
26
+ | [skills/](skills/) | Skill templates: `mieweb-ui-catalog`, `mieweb-ui-tokens`, `mieweb-ui-icons` (generated — `pnpm agent:skills`, never hand-edit) + `mieweb-ui-brands`, `mieweb-ui-tailwind4`, `mieweb-ui-a11y-checklist`, `mieweb-ui-i18n-checklist`, `mieweb-ui-kerebron`, `mieweb-ui-datavis-api` (hand-written). Installed to `.github/skills/` behind `--experimental-agents`. |
27
27
  | `evals/` _(Phase 2+)_ | Golden-question eval sets per specialist; the regression harness for agent knowledge. |
28
28
 
29
29
  Rule content is sourced from [lessons/component-policy.md](../lessons/component-policy.md);
@@ -27,6 +27,10 @@ handoffs:
27
27
  agent: MIE UI Rich Text Agent
28
28
  prompt: Handle the rich-text question above (Kerebron editors, install legs, WASM/patches, collaboration, markdown round-trip, EmailEditor) and report the minimal fix.
29
29
  send: false
30
+ - label: Grids & eSheet
31
+ agent: MIE UI Grids Agent
32
+ prompt: Handle the grid/eSheet question above (DataVis NITRO sources, columns, features, operations, eSheet Builder/Renderer) and report the minimal fix.
33
+ send: false
30
34
  ---
31
35
 
32
36
  # MIE UI Design Agent (orchestrator)
@@ -65,8 +69,9 @@ comparison tables) and `mieweb-ui-icons` (icon aliases and conventions):
65
69
  | translations, locale bundles, Intl formats, RTL | MIE UI i18n Agent |
66
70
  | migrating code to @mieweb/ui, raw-HTML compliance | MIE UI Migration Agent |
67
71
  | rich text editors (RichEditor, TextAreaRich, EmailEditor), Kerebron peers/WASM/patches, collab, Markdown rendering | MIE UI Rich Text Agent |
72
+ | DataVis NITRO config (sources, columns, features, operations), eSheet Builder/Renderer, grid debugging | MIE UI Grids Agent |
68
73
 
69
- More specialists (Grids, DataVis, Views,
74
+ More specialists (DataVis, Views,
70
75
  SuperChat) land in later phases; until one ships, answer its domain
71
76
  from the skills and the component docs, or defer (below).
72
77
 
@@ -0,0 +1,87 @@
1
+ ---
2
+ name: MIE UI Grids Agent
3
+ description: Grids specialist for the @mieweb/ui design system — DataVis NITRO (DataVisNitroSource/Grid/Graph, column API, feature flags, grouping/aggregates, operations palette, perspectives) and the eSheet form pair (Builder/Renderer, clinical fields, EncounterVisit). Invoke for configuring or debugging a NITRO grid or graph, source/column/feature questions, row selection and mass operations, grid performance with large datasets, AGGrid deprecation questions, and eSheet Builder/Renderer integration.
4
+ tools: ['search', 'codebase', 'fetch', 'runInTerminal']
5
+ handoffs:
6
+ - label: Apply Fixes
7
+ agent: agent
8
+ prompt: Apply the grid/eSheet integration fixes identified above to the codebase.
9
+ send: false
10
+ ---
11
+
12
+ # MIE UI Grids Agent
13
+
14
+ You are the grids specialist for the **@mieweb/ui** design system. Consumers
15
+ come to you after they have a grid (or know they need one) — to configure
16
+ columns, sources and features, to wire selection and mass operations, to
17
+ debug an empty or misbehaving grid, and to integrate the eSheet
18
+ Builder/Renderer pair. You diagnose from evidence and report a minimal fix —
19
+ you do not edit files (offer the **Apply Fixes** handoff instead).
20
+
21
+ ## Your sources of truth (never inline-duplicate them)
22
+
23
+ - **`mieweb-ui-datavis-api` skill** — the domain bible: the grid policy,
24
+ Source/Grid/Graph architecture and context coupling, source types
25
+ (`http`/`local`/`file`) and declarative `groupBy`/`aggregates`, the curated
26
+ grid props (chrome, columns, features, operations, perspectives), the
27
+ no-virtualization reality, orders-grid composition patterns, the eSheet
28
+ pair and clinical fields, and the symptom→fix troubleshooting table. Start
29
+ every answer here.
30
+ - **`mieweb-ui-catalog` skill** — entry points, the Grids family "Which one?"
31
+ table, and per-entry peer requirements.
32
+ - **`mieweb-ui-kerebron` skill** — when EncounterVisit's RichEdit mode or
33
+ eSheet narrative fields drag in the Kerebron editor stack.
34
+
35
+ ## Workflow
36
+
37
+ 1. **Enforce the policy before configuring.** Any plain `<table>` growing
38
+ sort/filter/page/export features, any new `AGGrid` usage, or `Pagination`
39
+ bolted onto a NITRO grid is the real finding — redirect to NITRO first,
40
+ then configure.
41
+ 2. **Check the coupling before the props.** An empty or dead grid is usually
42
+ structural: Grid/Graph not nested inside a `DataVisNitroSource`, a
43
+ `local` source whose global isn't set at mount, or `datavis-ace` failing
44
+ to resolve.
45
+ 3. **Prefer declarative configuration.** `groupBy`/`aggregates` on the
46
+ Source, `features`/`columns`/`operations` on the Grid. Imperative
47
+ `setGroup`/`setAggregate` through `DataVisNitroContext` is library-internal
48
+ composition, not consumer API.
49
+ 4. **Be honest about limits.** There is no row virtualization and no
50
+ server-side row model — all operations run client-side over the fetched
51
+ dataset. For very large data, the fix is upstream (serve less, group,
52
+ aggregate), not a grid prop. Treat genuine capability gaps as NITRO
53
+ feature requests, never as a reason to reach for AGGrid.
54
+ 5. **Match the skill's troubleshooting table**, then report root cause,
55
+ evidence, and the smallest fix. Offer **Apply Fixes** for the edit.
56
+
57
+ ## Redirects
58
+
59
+ - "Which component should I use?" → **MIE UI Design Agent** (selection is the
60
+ orchestrator's domain; you own configuration, APIs and debugging of a
61
+ chosen grid).
62
+ - Install plumbing — Tailwind setup, `styles.css`, peer errors outside
63
+ `datavis-ace`/`@esheet/*` → **MIE UI Install Agent**.
64
+ - Token/Tailwind/brand theming of surrounding UI → **MIE UI Styling Agent**.
65
+ - Grid accessibility audits → **MIE UI A11y Agent** — but always carry the
66
+ caveat yourself: the engine's DOM is not screen-reader friendly; keep
67
+ critical actions reachable outside the grid.
68
+ - Charts beyond the NITRO Graph (YChart, Deck, Globe, maps) → the DataVis
69
+ specialist once it ships; until then the orchestrator answers from the
70
+ catalog skill.
71
+
72
+ ## Rules
73
+
74
+ 1. Never invent grid props, feature flags, or engine capabilities — the grid
75
+ surface is deliberately curated; verify against the skill or the installed
76
+ types before recommending a prop.
77
+ 2. `AGGrid` is deprecated: never recommend it for new work; when NITRO lacks
78
+ a capability, say so and point to filing a NITRO feature request.
79
+ 3. Never tell a consumer to call `setGroup`/`setAggregate` on
80
+ `DataVisNitroContext` — declarative props only.
81
+ 4. eSheet Builder/Renderer never persist — storage always lives with the
82
+ host. Submission is either the Renderer's opt-in `onSubmit` button or a
83
+ host-driven `getValidResponse()` read (which returns
84
+ `{ response, errors }`, not a bare `FormResponse`) — never both.
85
+ 5. Prefer the smallest change that fixes the root cause; no grid rewrites.
86
+ 6. The installed `mieweb-ui.instructions.md` rules apply to any code you
87
+ recommend.
@@ -21,6 +21,7 @@ These files are maintainer-side quality tooling. They are **not** shipped by
21
21
  | [i18n.md](./i18n.md) | Internationalization / RTL | MIE UI i18n Agent |
22
22
  | [migration.md](./migration.md) | Migration / compliance (incl. icons) | MIE UI Migration Agent |
23
23
  | [richtext.md](./richtext.md) | Rich text / Kerebron editors | MIE UI Rich Text Agent |
24
+ | [grids.md](./grids.md) | DataVis NITRO + eSheet grids | MIE UI Grids Agent |
24
25
 
25
26
  ## Entry format
26
27
 
@@ -0,0 +1,241 @@
1
+ # Evals — DataVis NITRO + eSheet grids
2
+
3
+ Primary agent: **MIE UI Grids Agent**. See [README.md](./README.md) for
4
+ format and scoring. Selection-level grid questions (Table vs NITRO) live in
5
+ [selection.md](./selection.md); these cover configuration, APIs and
6
+ debugging of a chosen grid.
7
+
8
+ ### GRD-1 — Minimal NITRO setup
9
+
10
+ - **Ask:** "What's the minimal code to show a sortable, filterable grid over a JSON endpoint?"
11
+ - **Expect:** `DataVisNitroGrid` nested inside
12
+ `<DataVisNitroSource type="http" url="…">` from `@mieweb/ui/datavis`;
13
+ parsing/type-inference automatic; sort/filter/group/export come from the
14
+ engine. No extra installs (`@mieweb/datavis` is bundled, `datavis-ace`
15
+ arrives as a dependency) and no extra CSS (base stylesheet already imports
16
+ the datavis styles).
17
+ - **Agent:** MIE UI Grids Agent
18
+ - **Source:** agent/skills/mieweb-ui-datavis-api/SKILL.md — Architecture/Source; DataVisNITRO MAINTAINERS.md
19
+
20
+ ### GRD-2 — Empty grid, no error
21
+
22
+ - **Ask:** "My DataVisNitroGrid renders nothing and the console is clean."
23
+ - **Expect:** Structural first: the Grid must render **inside** a
24
+ `DataVisNitroSource` (they're coupled through `DataVisNitroContext`); for
25
+ `type="local"`, `window[varName]` must be set (shaped `{ typeInfo, data }`)
26
+ before mount.
27
+ - **Agent:** MIE UI Grids Agent
28
+ - **Source:** datavis-api skill — troubleshooting; DataVisNitro.tsx
29
+
30
+ ### GRD-3 — Source is not a constructor
31
+
32
+ - **Ask:** "I get `datavis_ace.Source is not a constructor` at runtime."
33
+ - **Expect:** `datavis-ace` is a hard runtime requirement of
34
+ `DataVisNitroSource`, shipped as a regular dependency of `@mieweb/ui`
35
+ (external in the bundle) — it's missing or mis-resolved. Reinstall / check
36
+ `pnpm why datavis-ace`; never import it directly or add it manually as a
37
+ workaround.
38
+ - **Agent:** MIE UI Grids Agent
39
+ - **Source:** DataVisNITRO MAINTAINERS.md — Dependencies
40
+
41
+ ### GRD-4 — Local data without a server
42
+
43
+ - **Ask:** "How do I feed an in-memory array of rows to a NITRO grid?"
44
+ - **Expect:** `type="local"` + `varName`: set
45
+ `window[varName] = { typeInfo, data }` before mounting and delete it on
46
+ unmount; the engine reads the global. Changing `varName` rebuilds the
47
+ source.
48
+ - **Agent:** MIE UI Grids Agent
49
+ - **Source:** DataVisNitro.tsx — LocalDataVisNitroSourceProps; demo stories LocalDataset
50
+
51
+ ### GRD-5 — Column API
52
+
53
+ - **Ask:** "How do I pin a column, set a header label, and render HTML in cells?"
54
+ - **Expect:** `columns` on the grid: string = bare field name; object form
55
+ `{ field, header, pinned, allowHtml, … }` (plus
56
+ width/minWidth/maxWidth, visible, align, className,
57
+ typeInfo/sortable/filterable).
58
+ - **Agent:** MIE UI Grids Agent
59
+ - **Source:** nitro-columns.ts — DataVisNitroColumn; table/types.ts — TableColumn
60
+
61
+ ### GRD-6 — Grouping declaratively
62
+
63
+ - **Ask:** "I'm calling `view.setGroup(…)` through DataVisNitroContext to group my grid — is that right?"
64
+ - **Expect:** No — configure declaratively via the Source's
65
+ `groupBy={[ 'status' ]}` (or `{ field, functionName }`) and `aggregates`
66
+ (`{ functionName, fields }`). Imperative context calls are
67
+ library-internal composition (e.g. `OrdersGroupPresets`), not consumer
68
+ API, and fight the declarative props.
69
+ - **Agent:** MIE UI Grids Agent
70
+ - **Source:** DataVisNITRO MAINTAINERS.md — gotchas; datavis-api skill — Source
71
+
72
+ ### GRD-7 — Checkbox selection + bulk actions
73
+
74
+ - **Ask:** "Users need to select multiple rows and run a bulk delete."
75
+ - **Expect:** `features={{ rowSelection: 'checkbox' }}` (tri-state select-all
76
+ over the currently filtered rows) + an `operations` array —
77
+ `{ label, icon?, category?, callback(ctx) }` with `ctx.rows` as the
78
+ selection; surfaces in the operations palette. `onSelectionChange` for
79
+ host-side tracking.
80
+ - **Agent:** MIE UI Grids Agent
81
+ - **Source:** table/types.ts — TableFeatures; DataVisNITRO.stories.tsx — Operations
82
+
83
+ ### GRD-8 — Feature flags inventory
84
+
85
+ - **Ask:** "What built-in behaviours can I toggle on the grid without custom code?"
86
+ - **Expect:** `features`: columnResize, columnReorder, stickyHeaders,
87
+ rowSelection (true | 'checkbox'), headerContextMenu, zebraStripe,
88
+ keyboardNav (j/k), drillDown, showMore, rowMode ('wrapped' | 'clipped').
89
+ Not an invented list — anything else needs verification against the types.
90
+ - **Agent:** MIE UI Grids Agent
91
+ - **Source:** table/types.ts — TableFeatures
92
+
93
+ ### GRD-9 — Virtualization
94
+
95
+ - **Ask:** "How do I turn on row virtualization for my 50k-row grid?"
96
+ - **Expect:** You can't — the engine has **no row virtualization**; `height`
97
+ + show-more/limit is the scrolling story. For very large data, fix it
98
+ upstream: serve a narrower dataset at the http `url`, group/aggregate, or
99
+ page before the grid. Honest-limit answers pass; invented virtualization
100
+ props FAIL.
101
+ - **Agent:** MIE UI Grids Agent
102
+ - **Source:** datavis-api skill — Grid chrome/troubleshooting (verified: no virtualization in packages/datavis)
103
+
104
+ ### GRD-10 — Server-side rows?
105
+
106
+ - **Ask:** "Does NITRO support a server-side row model like AG Grid Enterprise?"
107
+ - **Expect:** No — `type="http"` fetches the dataset and **all operations run
108
+ client-side** over it. The server-side pattern is serving the right
109
+ dataset at `url`. No new AGGrid usage either (deprecated); a genuine gap
110
+ is a NITRO feature request.
111
+ - **Agent:** MIE UI Grids Agent
112
+ - **Source:** datavis-api skill — Source; MAINTAINERS.md — Prefer NITRO over AGGrid
113
+
114
+ ### GRD-11 — Detail rows
115
+
116
+ - **Ask:** "Can a row expand to show a full-width detail panel?"
117
+ - **Expect:** `renderDetailRow` (adds a disclosure toggle per plain-mode row)
118
+ + `detailRowsExpanded` to expand/collapse all; leave undefined for per-row
119
+ control.
120
+ - **Agent:** MIE UI Grids Agent
121
+ - **Source:** DataGrid.tsx — renderDetailRow/detailRowsExpanded
122
+
123
+ ### GRD-12 — Minimal chrome
124
+
125
+ - **Ask:** "I want the grid without the title bar — just the table with a floating menu."
126
+ - **Expect:** `mode="minimal"` (floating hamburger over the table);
127
+ `minimalMode` is deprecated in its favor. `'full'` restores the classic
128
+ title bar with row count and inline buttons; `titleActions` adds custom
129
+ title-bar controls (hidden in minimal mode).
130
+ - **Agent:** MIE UI Grids Agent
131
+ - **Source:** DataGrid.tsx — mode/minimalMode/titleActions
132
+
133
+ ### GRD-13 — Perspectives on shared devices
134
+
135
+ - **Ask:** "We deploy on shared kiosk machines — users' pinned grid views are leaking between logins."
136
+ - **Expect:** Pinned-perspective names persist to localStorage by default;
137
+ set `persistPinnedPerspectives={false}` so pins stay in memory for the
138
+ session.
139
+ - **Agent:** MIE UI Grids Agent
140
+ - **Source:** DataGrid.tsx — persistPinnedPerspectives
141
+
142
+ ### GRD-14 — Grid + chart over one fetch
143
+
144
+ - **Ask:** "A dashboard needs the same records as a grid and a chart the user can reconfigure — do I fetch twice?"
145
+ - **Expect:** No — Grid and Graph are two renderers over the same
146
+ `DataVisNitroSource`/view; render `DataVisNitroGraph`
147
+ (`config`/`onConfigChange` for user-changed axes/chart type) beside the
148
+ grid inside one Source. Tiny inline trend → `Sparkline` instead.
149
+ - **Agent:** MIE UI Grids Agent
150
+ - **Source:** Grids.mdx — How they fit together; DataVisNitroGraph.tsx
151
+
152
+ ### GRD-15 — i18n of the grid
153
+
154
+ - **Ask:** "How do I localize the grid's labels and number/date formats?"
155
+ - **Expect:** `locale` (BCP-47) drives number/date formatting;
156
+ `DataVisNitroLanguageSelector` switches the engine's own UI language
157
+ (toolbar/table strings). `trans` only customizes built-in
158
+ grouping-function labels — answers presenting it as a general grid
159
+ translator FAIL. Deeper string audits → i18n agent.
160
+ - **Agent:** MIE UI Grids Agent
161
+ - **Source:** DataVisNitro.tsx — trans/locale; stories LocalizedGrid
162
+
163
+ ### GRD-16 — Grid accessibility
164
+
165
+ - **Ask:** "Is the NITRO grid screen-reader accessible?"
166
+ - **Expect:** Honest caveat: the engine's DOM is **not** screen-reader
167
+ friendly and automated a11y checks are disabled on the NITRO pages. Keep
168
+ critical actions reachable outside the grid; provide textual summaries for
169
+ charts. Full audit → A11y agent.
170
+ - **Agent:** MIE UI Grids Agent
171
+ - **Source:** Grids.mdx — Shared limitations
172
+
173
+ ### GRD-17 — Hover row actions
174
+
175
+ - **Ask:** "I need per-row edit/delete buttons that appear on hover, consistent with our Table rows."
176
+ - **Expect:** `RowActionToolbar` (main barrel) with `group="grid"` composes
177
+ with NITRO cells — same component as `Table` rows use.
178
+ - **Agent:** MIE UI Grids Agent
179
+ - **Source:** Grids.mdx — How they fit together
180
+
181
+ ### GRD-18 — Pagination on a NITRO grid
182
+
183
+ - **Ask:** "Which component adds page controls under my NITRO grid?"
184
+ - **Expect:** None — `Pagination` is for server-paged `Table`/card lists;
185
+ rows already in a NITRO grid never need it (filter/group/show-more replace
186
+ paging).
187
+ - **Agent:** MIE UI Grids Agent
188
+ - **Source:** Grids.mdx — Which one? (Pagination row)
189
+
190
+ ### GRD-19 — eSheet pair contract
191
+
192
+ - **Ask:** "How do Builder and Renderer hand data to each other, and where's the submit button?"
193
+ - **Expect:** Builder `onChange` emits a `FormDefinition`; Renderer takes it
194
+ as `formDataInput`. Reading answers: the ref's `getValidResponse()`
195
+ returns `{ response: FormResponse | null, errors }` (store `response`, not
196
+ the wrapper), or opt into the built-in submit button via
197
+ `onSubmit`/`submitLabel`. Persistence is host-owned either way. Entry
198
+ `@mieweb/ui/esheet` needs **all four** matching `@esheet/*` peers
199
+ (`core`/`fields`/`builder`/`renderer`, `>=0.0.6-17`) even for
200
+ renderer-only use.
201
+ - **Agent:** MIE UI Grids Agent
202
+ - **Source:** CompositeForms.mdx — the eSheet pair; src/esheet.ts
203
+
204
+ ### GRD-20 — Clinical fields unknown
205
+
206
+ - **Ask:** "My eSheet definition uses `medicationList` but the Renderer shows an unknown field type."
207
+ - **Expect:** Call `registerMieEsheetFields()` once before rendering
208
+ definitions that use the Healthcare list fields (`medicationList`,
209
+ `allergyList`, …) — it plugs them into both Builder and Renderer.
210
+ - **Agent:** MIE UI Grids Agent
211
+ - **Source:** src/esheet.ts; CompositeForms.mdx — two install surfaces
212
+
213
+ ### GRD-21 — EncounterVisit RichEdit stack
214
+
215
+ - **Ask:** "EncounterVisit's RichEdit mode won't load in my app — what does it need beyond @esheet?"
216
+ - **Expect:** RichEdit rides the Kerebron editor: the `@kerebron/*` peers at
217
+ exactly 0.8.12 + ProseMirror overrides, `@mieweb/ui/kerebron.css`, and the
218
+ WASM assets at `/kerebron-wasm` — the full kerebron-skill install legs
219
+ (route depth to the Rich Text agent / kerebron skill).
220
+ - **Agent:** MIE UI Grids Agent
221
+ - **Source:** src/esheet.ts header; MIGRATION.md — eSheet and EncounterVisit
222
+
223
+ ### GRD-22 — AGGrid escape hatch
224
+
225
+ - **Ask:** "NITRO doesn't do X that AG Grid does — can I use `@mieweb/ui/ag-grid` for this one grid?"
226
+ - **Expect:** No — `AGGrid` is deprecated, never for new work. Treat the gap
227
+ as a NITRO feature request (file an issue) so usages can move back; the
228
+ maintainers' stated policy is to close gaps in NITRO, not fall back.
229
+ - **Agent:** MIE UI Grids Agent
230
+ - **Source:** MAINTAINERS.md — Prefer NITRO over AGGrid; Grids.mdx policy
231
+
232
+ ### GRD-23 — Orders grids as the pattern
233
+
234
+ - **Ask:** "We're building an order-history grid with group-by chips and bulk status updates — is there prior art?"
235
+ - **Expect:** `ChartOrdersGrid`/`EncounterOrdersGrid` (datavis entry) over
236
+ the HealthSurveillance order history, with `OrdersGroupPresets` chips and
237
+ native NITRO `rowSelection: 'checkbox'` + `operations` for mass updates;
238
+ pure row builders (`buildChartOrderRows`/`buildEncounterOrderRows`) in the
239
+ main entry. Copy the composition, don't re-implement it.
240
+ - **Agent:** MIE UI Grids Agent
241
+ - **Source:** src/datavis.ts; ordersGridShared.tsx
@@ -0,0 +1,173 @@
1
+ ---
2
+ name: mieweb-ui-datavis-api
3
+ description: Deep API reference for @mieweb/ui grids — DataVis NITRO (DataVisNitroSource/Grid/Graph, column API, feature flags, grouping/aggregates, operations palette, perspectives) and the eSheet form pair (Builder/Renderer, registerMieEsheetFields, EncounterVisit). USE WHEN configuring or debugging a NITRO grid or graph, choosing columns/features/sources, wiring row selection and mass operations, grouping or aggregating, or integrating eSheet Builder/Renderer and its clinical fields.
4
+ ---
5
+
6
+ # DataVis NITRO + eSheet in @mieweb/ui
7
+
8
+ Sourced from `src/catalog/Grids.mdx`, `CompositeForms.mdx`, the DataVisNITRO
9
+ MAINTAINERS notes, `packages/datavis` source and `MIGRATION.md`. Grid
10
+ *selection* policy lives in the catalog skill; this is the configuration/API
11
+ layer.
12
+
13
+ ## Policy (non-negotiable)
14
+
15
+ > **Tables and data grids start with DataVis NITRO.** Use `Table` only for a
16
+ > few static rows the user will not sort, filter, page or export. Never
17
+ > hand-roll grid features on a plain table; `AGGrid` is deprecated.
18
+
19
+ `Pagination` is for server-paged `Table`/card lists only — rows already in a
20
+ NITRO grid never need it.
21
+
22
+ ## Architecture
23
+
24
+ - Entry: **`@mieweb/ui/datavis`** — exports `DataVisNitroSource`,
25
+ `DataVisNitroGrid`, `DataVisNitroGraph`, `DataVisNitroContext`,
26
+ `DataVisNitroLanguageSelector`, plus `ChartOrdersGrid`/`EncounterOrdersGrid`
27
+ and `OrdersGroupPresets`.
28
+ - **Two moving parts, zero consumer installs:** `@mieweb/datavis` (the
29
+ engine's React surface) is **bundled into** the entry; `datavis-ace` (the
30
+ data engine: fetch/parse/type-inference/aggregation) is a regular
31
+ **dependency** of `@mieweb/ui` — consumers never install or import either.
32
+ - **Source and Grid are coupled through React context:** a `DataVisNitroGrid`
33
+ must render inside a `DataVisNitroSource` (which creates the source/view
34
+ pair and publishes it through `DataVisNitroContext`). **Grid** and
35
+ **Graph** are two renderers over the same source — a dashboard flips
36
+ between rows and a chart without refetching.
37
+ - Styles: the base `@mieweb/ui/styles.css` already imports
38
+ `@mieweb/datavis/styles.css` — no extra CSS wiring.
39
+
40
+ ## DataVisNitroSource
41
+
42
+ ```tsx
43
+ <DataVisNitroSource type="http" url="/api/orders.json" groupBy={['status']}>
44
+ <DataVisNitroGrid title="Orders" />
45
+ </DataVisNitroSource>
46
+ ```
47
+
48
+ - `type: 'http'` — `url` is fetched by the engine; parsing and type inference
49
+ are automatic. **All grid operations (sort/filter/group/aggregate) run
50
+ client-side** over the fetched dataset — there is no server-side row model;
51
+ the "server-side pattern" is serving the right dataset at `url`.
52
+ - `type: 'local'` — `varName` names a global: set
53
+ `window[varName] = { typeInfo, data }` **before** mounting (the engine
54
+ reads it from `globalThis`); clean it up on unmount.
55
+ - `type: 'file'` — user-supplied file (the engine's file picker/parse path).
56
+ - `groupBy?: Array<string | { field, functionName? }>` and
57
+ `aggregates?: Array<{ functionName, fields }>` configure grouped/aggregated
58
+ views **declaratively**. Do not reach into `DataVisNitroContext` to call
59
+ `setGroup`/`setAggregate` — that context is for the library's own
60
+ composition (e.g. `OrdersGroupPresets`), not the consumer API.
61
+ - Changing `type`/`url`/`varName` rebuilds the source; changing
62
+ `groupBy`/`aggregates` reconfigures the live view.
63
+
64
+ ## DataVisNitroGrid
65
+
66
+ A curated surface over the engine's `DataGrid` (the maintainers deliberately
67
+ `Omit` `view`/`children`/`allColumns` and re-add a vetted set — do not assume
68
+ an upstream `DataGrid` prop exists here without checking the types):
69
+
70
+ - **Chrome:** `title`, `helpText`, `titleActions` (title-bar React nodes),
71
+ `mode: 'default' | 'full' | 'minimal'` (`minimalMode` is deprecated — use
72
+ `mode="minimal"`), `showToolbar`, `showControls`, `height` (CSS value —
73
+ this plus the engine's show-more/limit is the scrolling story; **there is
74
+ no row virtualization**, so cap very large result sets at the source).
75
+ - **Columns:** `columns?: Array<string | TableColumn>` — a bare string is a
76
+ field name; the object form is
77
+ `{ field, header, width/minWidth/maxWidth, visible, pinned, align,
78
+ className, allowHtml, typeInfo: { type, format }, sortable, filterable }`.
79
+ Column menus, pinning, resize/reorder persistence and saved
80
+ **perspectives** come from the engine (`prefs`,
81
+ `persistPinnedPerspectives={false}` for shared/public devices).
82
+ - **Features** (`features?: TableFeatures`): `columnResize`, `columnReorder`,
83
+ `stickyHeaders`, `rowSelection: true | 'checkbox'` (checkbox mode adds a
84
+ tri-state select-all over the currently *filtered* rows),
85
+ `headerContextMenu`, `zebraStripe`, `keyboardNav` (j/k), `drillDown`,
86
+ `showMore`, `rowMode: 'wrapped' | 'clipped'`.
87
+ - **Rows:** `formatCell`, `onRowClick`, `onRowDoubleClick`,
88
+ `onSelectionChange`, `renderDetailRow` + `detailRowsExpanded` (disclosure
89
+ rows), `onColumnReorder`/`onColumnResize`/`onHeaderContextMenu`.
90
+ - **Mass operations:** `operations?: Operation[]` — each
91
+ `{ label, icon?, category?, callback(ctx) }` surfaces in the operations
92
+ palette; `ctx.rows` is the current selection. Pair with
93
+ `features.rowSelection: 'checkbox'` for bulk edit/delete/export flows.
94
+ - **i18n/formatting:** `locale` (BCP-47) drives number/date formatting.
95
+ `DataVisNitroLanguageSelector` is the UI-language mechanism — it switches
96
+ the engine's own i18next language (toolbar/table strings). `trans` is
97
+ narrower than it looks: it only customizes the built-in grouping-function
98
+ labels; it does **not** translate the general grid UI.
99
+ - **Hover row actions:** `RowActionToolbar` with `group="grid"` (main
100
+ barrel) composes with NITRO cells, same as with `Table` rows.
101
+
102
+ ## DataVisNitroGraph
103
+
104
+ Same source, chart renderer: `columns`, `config?: Partial<GraphConfig>` +
105
+ `onConfigChange` (users may change axes/chart type), `locale`, `height`,
106
+ `className`. For a tiny inline dependency-free trend use `Sparkline` (main
107
+ barrel) instead.
108
+
109
+ ## Real-world composition (orders grids)
110
+
111
+ `ChartOrdersGrid` / `EncounterOrdersGrid` (this entry) are NITRO grids over
112
+ HealthSurveillance order history; the pure row builders
113
+ (`buildChartOrderRows`/`buildEncounterOrderRows`) live in the **main** entry.
114
+ `OrdersGroupPresets` renders one-click group-by chips. Row selection and mass
115
+ operations there are native NITRO features — the pattern to copy, not
116
+ re-implement.
117
+
118
+ ## Accessibility caveat
119
+
120
+ The DataVis engine's DOM is **not screen-reader friendly** and automated a11y
121
+ checks are disabled on the NITRO pages. Keep critical actions reachable
122
+ outside the grid and provide textual summaries for charts. Route full audits
123
+ to the A11y agent.
124
+
125
+ ## eSheet (Builder/Renderer)
126
+
127
+ - Entry: **`@mieweb/ui/esheet`**; optional peers are **all four** `@esheet/*`
128
+ packages — `@esheet/core`, `@esheet/fields`, `@esheet/builder`,
129
+ `@esheet/renderer` — at matching versions (`>=0.0.6-17`), even for
130
+ renderer-only use: the shared entry exports the builder too, so all four
131
+ must resolve. Styles: Builder and Renderer import their
132
+ `@esheet/styles` dependency automatically (explicit entry
133
+ `@esheet/styles/styles.css`); keep loading `@mieweb/ui/styles.css` for
134
+ composed UI components.
135
+ - **The pair:** `EsheetBuilder` (`definition`/`onChange`) emits a
136
+ `FormDefinition`; `EsheetRenderer` takes that object as `formDataInput`.
137
+ Answers come back two ways: imperatively via the ref's
138
+ `getValidResponse()`, which returns `{ response: FormResponse | null,
139
+ errors: ValidationError[] }` (`response` is `null` while invalid — store
140
+ `response`, not the wrapper), or via the opt-in built-in submit button —
141
+ pass `onSubmit` (+ `submitLabel`) and the Renderer renders it and calls
142
+ back with the validated `FormResponse`; don't build a duplicate submit
143
+ flow next to it. **Persistence is host-owned either way** — no autosave,
144
+ no `name`, no server calls; the host stores definition and response.
145
+ - **Clinical fields:** `registerMieEsheetFields()` plugs the Healthcare list
146
+ fields (`medicationList`, `allergyList`, …) into both Builder and
147
+ Renderer — call it once before rendering definitions that use them.
148
+ - **EncounterVisit** (same entry) is the coded clinical visit document; its
149
+ RichEdit mode rides the Kerebron editor — the `@kerebron/*` peers, WASM
150
+ assets and `kerebron.css` from the **mieweb-ui-kerebron** skill apply.
151
+ - Known gaps: upstream axe failures (contrast, unlabeled landmarks, role-less
152
+ drag handles) tracked in the mieweb/eSheet repo; no locale/translation
153
+ hooks — built-in strings are English — but layout **does** mirror under an
154
+ inherited `dir="rtl"` (panels swap, toolbar flips), with a handful of
155
+ physical-direction styling gaps tracked as an upstream eSheet RTL
156
+ enhancement; it themes via its own `--msprimary` tokens + `dark`
157
+ class, independent of `ThemeProvider`.
158
+
159
+ ## Troubleshooting
160
+
161
+ | Symptom | Cause | Fix |
162
+ | --- | --- | --- |
163
+ | `datavis_ace.Source is not a constructor` | `datavis-ace` missing/unresolved — it is a hard runtime requirement of `DataVisNitroSource` (ships as a regular dependency of `@mieweb/ui`, external in the bundle) | Reinstall; check the host's resolution (`pnpm why datavis-ace`) — never add it as a direct import |
164
+ | Grid renders nothing, no error | `DataVisNitroGrid` not inside a `DataVisNitroSource` (context is null) | Nest Grid/Graph inside the Source |
165
+ | `type="local"` grid is empty | `window[varName]` unset at mount, or not shaped `{ typeInfo, data }` | Set the global before mounting; delete it on unmount |
166
+ | Grouping/aggregation "doesn't stick" | Imperative `setGroup`/`setAggregate` calls on the context fight the declarative props | Use the Source's `groupBy`/`aggregates` props only |
167
+ | Huge dataset scrolls poorly | No virtualization in the engine — `height` + show-more/limit is the mechanism | Reduce the served dataset (http source), group/aggregate, or page upstream |
168
+ | "How do I turn on pagination?" | NITRO has no page controls; `Pagination` is for server-paged `Table`/card lists | Filtering/grouping/show-more replace paging in NITRO |
169
+ | Rows selectable but bulk action missing | `rowSelection` without `operations` | Add `operations` entries — `callback(ctx)` receives `ctx.rows` |
170
+ | Pinned perspectives leak across users on a kiosk | Pins persist to localStorage by default | `persistPinnedPerspectives={false}` |
171
+ | eSheet fields for meds/allergies render as unknown type | `registerMieEsheetFields()` not called | Call it once at startup before rendering such definitions |
172
+ | eSheet looks unstyled | Very old `@esheet/*` versions required manual CSS copying | Upgrade — current Builder/Renderer import `@esheet/styles` automatically |
173
+ | Grid needed AG Grid feature X | `@mieweb/ui/ag-grid` is deprecated | Treat the gap as a NITRO feature request (file an issue); don't start new AGGrid usage |
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@mieweb/ui",
3
- "version": "0.11.0-dev.55",
3
+ "version": "0.11.0-dev.56",
4
4
  "description": "A themeable, accessible React component library built with Tailwind CSS",
5
5
  "author": "Medical Informatics Engineering, Inc.",
6
6
  "license": "SEE LICENSE IN LICENSE",