feat: DH-21344: Dropdown for input table enums by dgodinez-dh · Pull Request #2704 · deephaven/web-client-ui

dgodinez-dh · 2026-06-17T20:12:33Z

Consumes the new Column Restriction JS API to add an dropdown cell renderer for input tables. The renderer is pass to Grid via a function in a registry in a context around IrisGrid. This will allow Enterprise to register more input table cell renderers.

codecov · 2026-06-17T20:16:22Z

Codecov Report

❌ Patch coverage is 34.95935% with 80 lines in your changes missing coverage. Please review.
✅ Project coverage is 51.11%. Comparing base (2ab7e2f) to head (9eded27).
⚠️ Report is 1 commits behind head on main.

Files with missing lines	Patch %	Lines
packages/iris-grid/src/CellDropdownField.tsx	0.00%	49 Missing ⚠️
packages/grid/src/key-handlers/EditKeyHandler.ts	30.00%	14 Missing ⚠️
packages/iris-grid/src/IrisGridContextProvider.tsx	25.00%	6 Missing ⚠️
packages/iris-grid/src/IrisGridModel.ts	16.66%	5 Missing ⚠️
...ackages/iris-grid/src/CellInputRendererContext.tsx	50.00%	4 Missing ⚠️
packages/grid/src/Grid.tsx	92.59%	2 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #2704      +/-   ##
==========================================
+ Coverage   50.93%   51.11%   +0.17%     
==========================================
  Files         794      798       +4     
  Lines       45211    45677     +466     
  Branches    11510    11652     +142     
==========================================
+ Hits        23028    23346     +318     
- Misses      22164    22312     +148     
  Partials       19       19

Flag	Coverage Δ
unit	`51.11% <34.95%> (+0.17%)`	⬆️

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Harness.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

Copilot

Pull request overview

This PR introduces column-restriction–driven cell editors for input tables by adding a registry-based mechanism to @deephaven/grid, wiring that registry through @deephaven/iris-grid via context, and providing a default dropdown editor for string-list (enum-like) restrictions.

Changes:

Add ColumnRestriction support and a cellInputRendererRegistry to @deephaven/grid to render custom cell editors based on restriction type.
Add IrisGridContextProvider + default registry plumbing in @deephaven/iris-grid, including a dropdown editor (CellDropdownField) for string-list restrictions.
Add an IrisGrid key handler to preserve existing values for restriction-backed editors when editing is initiated by typing.

Reviewed changes

Copilot reviewed 16 out of 16 changed files in this pull request and generated 3 comments.

Show a summary per file

File	Description
packages/iris-grid/src/key-handlers/RestrictedEditKeyHandler.ts	Intercepts printable-key edits to open restriction-backed editors without overwriting existing values.
packages/iris-grid/src/key-handlers/index.ts	Exports the new key handler.
packages/iris-grid/src/IrisGridModel.ts	Adds `getColumnRestriction` and defines string-list restriction type helpers.
packages/iris-grid/src/IrisGridContextProvider.tsx	Combines theme + renderer registry into a single context IrisGrid can consume.
packages/iris-grid/src/IrisGrid.tsx	Switches IrisGrid to the combined context and passes the registry down to `Grid`.
packages/iris-grid/src/IrisGrid.scss	Adds styling so dropdown editors get a visible focus/outline treatment.
packages/iris-grid/src/index.ts	Exposes new context/provider and dropdown/editor context exports.
packages/iris-grid/src/CellInputRendererContext.tsx	Defines default renderer registry and maps string-list restrictions to the dropdown editor.
packages/iris-grid/src/CellDropdownField.tsx	Implements the dropdown cell editor using Spectrum Picker wrapper.
packages/iris-grid/src/CellDropdownField.scss	Styles dropdown editor to fit within grid cell geometry and visuals.
packages/grid/src/key-handlers/EditKeyHandler.ts	Adds Enter-to-start-editing behavior for editable cells.
packages/grid/src/index.ts	Re-exports `CellInputField`, renderer types, and `GridModel` types.
packages/grid/src/GridRendererTypes.ts	Adds `CellInputRendererFn` and `CellInputRendererRegistry` types.
packages/grid/src/GridModel.ts	Adds `ColumnRestriction` type and `getColumnRestriction` hook on models.
packages/grid/src/Grid.tsx	Uses `cellInputRendererRegistry` to render custom editors and sets CSS vars for editor styling.
packages/app-utils/src/components/AppBootstrap.tsx	Wraps app tree with `IrisGridContextProvider` to supply the combined context.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot

Pull request overview

Copilot reviewed 16 out of 16 changed files in this pull request and generated 4 comments.

Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>

mofojed · 2026-07-03T14:39:06Z

+    // Compute the stripe color for this visible row, mirroring how the canvas renderer draws row stripes
+    let cellBackgroundColor: string | undefined;
+    if (rowBackgroundColors) {
+      const colorSets = GridRenderer.getCachedBackgroundColors(
+        rowBackgroundColors,
+        maxDepth
+      );
+      const depth = isExpandableGridModel(model) ? model.depthForRow(row) : 0;
+      const colorSet = colorSets[row % colorSets.length];
+      cellBackgroundColor = colorSet[Math.min(depth, colorSet.length - 1)];
+    }


Hmm this doesn't take into account if the cell background has been set via formatting. I don't particularly like how it's duplicating a bunch of the logic in GridRenderer either, but I don't have a good answer for that.

Formatting is now taken into account. I tried to refactor for common code, but the GridRenderer does row stripes and formats and two different passes, so I ended up with something that seemed less readable (which I did not commit).

mofojed · 2026-07-03T14:46:03Z

+    const renderer =
+      columnRestrictions.length === 1
+        ? cellInputRendererRegistry?.get(columnRestrictions[0].type)
+        : undefined;


So if column restrictions has more than one element, we just use undefined? Then what's the point of having an array for column restrictions?

We need to discuss this. It is an array of restrictions because a user can add as many as they want. I should have a comment on this code, but I think this code is essentially saying, "The UI doesn't know how to render multiple column restrictions, so if you have more than one then we use the default cell renderer."

That being said, maybe there is a discussion to be had about how we render columns with multiple restrictions. But I feel like it would be difficult to create an algorithm or hierarchy that would handle all cases correctly given that a user can combine an restrictions even if they make no sense.

mofojed · 2026-07-03T14:55:26Z

+ * value rather than replacing it with the typed character.
+ */
+export type CellInputRendererFn = ((
+  props: CellInputFieldProps & { columnRestrictions: ColumnRestriction[] }


I think just restrictions makes more sense here? Is there a reason to specify the restrictions are for the whole column?
From the perspective of the cell input, it should only matter what the restrictions are for that cell. Doesn't matter if those restrictions are applied to the whole column or just that row for some reason.
Also, should be a readonly array provided.
Also strange how it's tacked on to the type here, instead of this type being defined on it's own. Feel like it should just be on CellInputProps and that's defined in this file, and then CellInputField should reference this for it's props (just ignoring the restrictions in that case).
Also weird that we have an onContextMenu prop that is never used. I wonder why that is. Maybe we should just remove that prop.

mofojed · 2026-07-03T15:01:55Z

+      cursorColumn == null ||
+      cursorRow == null ||
+      !isEditableGridModel(model) ||
+      !model.isEditableRange(GridRange.makeCell(cursorColumn, cursorRow))


Hmm I see this is already in the EditKeyHandler, but it's incorrect that we're passing the visible column/row down instead of the model index. I think this might cause problems if you move a key column and then try to edit.

mofojed · 2026-07-03T15:05:42Z

+ * Key handler that intercepts printable-character keystrokes on cells whose
+ * column restriction type has a registered custom renderer (e.g. a dropdown).
+ *


Why isn't this just baked into the EditKeyHandler? I don't think any of this is IrisGrid specific.

mofojed · 2026-07-03T15:06:22Z

+import { SELECTION_DIRECTION } from '@deephaven/grid';
+import './CellDropdownField.scss';
+
+export type CellDropdownFieldProps = {


Should extend the CellInputProps as mentioned in my other comment.

mofojed · 2026-07-03T15:23:44Z


 class IrisGrid extends Component<IrisGridProps, IrisGridState> {
-  static contextType = IrisGridThemeContext;
+  static contextType = IrisGridContext;


This is a breaking change now; existing users of IrisGridThemeContext (including ThemeBootstrap) will not be wired up correctly; they need to add the IrisGridContextProvider as a child to the ThemeBootstrap (since IrisGridContextProvider still uses the IrisGridThemeContext). Though having IrisGridContextProvider makes more sense when it's providing more things than just the theme.
Hmm. Obviously functional component would make this a little bit easier to handle both contexts, but that's a huge change...
I think instead, I'd just rename IrisGridThemeProvider and IrisGridThemeContext to IrisGridContextProvider and IrisGridContext, have all the functionality in there, and re-export as IrisGridThemeProvider/IrisGridThemeContext with a deprecated tag. Then we don't break existing users/UIs, and we can build on top of it.

mofojed · 2026-07-03T15:24:30Z

    return null;
  }
+
+  getColumnRestriction(column: ModelIndex): ColumnRestriction[] {


getColumnRestriction - but it returns an array? Should it be getColumnRestrictions, or are we just sticking to one restriction for each column? We only seem to use one restriction in the renderer anyways, so why do we allow an array?

Updated to be plural, but per my earlier comment, we should discuss what plural restrictions means.

mofojed · 2026-07-03T15:24:44Z

How should I go about testing/using this?

dgodinez-dh · 2026-07-06T13:31:28Z

How should I go about testing/using this?

I've been testing by running the branch with latest deephaven-core. There is a script in the test plan for the ticket:
https://deephaven.atlassian.net/browse/DH-21344

Co-authored-by: Mike Bender <mikebender@deephaven.io>

dgodinez-dh added 30 commits June 9, 2026 09:13

feat: DH-21344: Dropdown for input table enums

c3b8162

CellDropdownField

a9eddaa

render drop down

55585eb

fix focus change behavior

9691562

allowed values

ca75fe8

clean up

395c778

quiet picker

bd85994

insets

4a38561

background

c999ac9

defaultOpen

c044e58

fix height

4ee9b22

fix width

26ca065

clean up

a5e0438

box shadow

3c27203

padding

6d454e2

multiple restrictions

3b8f0b6

More padding

bb689a8

context

2711f50

move context provider

01162cd

more renaming

44d3a2d

Separate contexts

35a87f0

separate theme provider

2798ae1

render chevron

8ae03f0

better chevron

05b051b

wider

5375bc2

fix text shifting

4d315de

fix esc behavior

a37e044

better enter behavior

3c36809

even better enter

4821cb0

edit on enter

c13b1a4

move types

9f6058b

dgodinez-dh requested review from Copilot and mofojed June 17, 2026 20:12

Copilot started reviewing on behalf of dgodinez-dh June 17, 2026 20:13 View session

Copilot AI reviewed Jun 17, 2026

View reviewed changes

Comment thread packages/iris-grid/src/key-handlers/RestrictedEditKeyHandler.ts Outdated

Comment thread packages/grid/src/Grid.tsx Outdated

Comment thread packages/iris-grid/src/IrisGridContextProvider.tsx

mofojed requested a review from Copilot June 22, 2026 14:30

Copilot started reviewing on behalf of mofojed June 22, 2026 14:30 View session

Copilot AI reviewed Jun 22, 2026

View reviewed changes

Comment thread packages/iris-grid/src/key-handlers/RestrictedEditKeyHandler.ts Outdated

Comment thread packages/iris-grid/src/IrisGridModel.ts Outdated

Comment thread packages/iris-grid/src/IrisGridContextProvider.tsx

Comment thread packages/grid/src/Grid.tsx Outdated

dgodinez-dh and others added 6 commits June 22, 2026 09:20

key handler should use model column index

18e6bd4

Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>

account for depth in cell background color

ef0eb88

update comment

2afdc7b

remove any

53f7d9b

unit test

3449614

merge latest

87aa247

dgodinez-dh marked this pull request as ready for review July 2, 2026 13:55

mofojed requested changes Jul 3, 2026

View reviewed changes

dgodinez-dh and others added 11 commits July 6, 2026 08:34

batch suggestions

c225ced

Co-authored-by: Mike Bender <mikebender@deephaven.io>

fix type

d485f4e

merge latest

5989f85

fix type

929b529

formatted backgrond color

a7e2170

account for foreground color

1b66c47

refactor type

4ab56be

use model column

91f4966

combine restriction key handler with edit key handler

09c6e82

exctend prop type

5852f2f

plural

9eded27

Uh oh!

Conversation

dgodinez-dh commented Jun 17, 2026

Uh oh!

codecov Bot commented Jun 17, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

mofojed commented Jul 3, 2026

Uh oh!

dgodinez-dh commented Jul 6, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

codecov Bot commented Jun 17, 2026 •

edited

Loading