Skip to content

feat: DH-18354 Add input filter support to UITable #1180

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
mattrunyon merged 10 commits into from
Jun 17, 2025
Merged

feat: DH-18354 Add input filter support to UITable #1180

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
4a6a55b
feat: Add input filter support to UITable
mattrunyon May 8, 2025
10e4036
Temp IDs for input filters
mattrunyon May 8, 2025
f31ae5e
Update and add tests
mattrunyon May 28, 2025
68f2ecf
Update to alpha and fix type error
mattrunyon May 28, 2025
f11c0b4
Address review comments
mattrunyon Jun 2, 2025
92031ed
Address review comments
mattrunyon Jun 11, 2025
cd02434
Add clear all filters
mattrunyon Jun 13, 2025
efc76e6
Update to 1.0.0 packages
mattrunyon Jun 13, 2025
89e9bfd
Switch to PanelIdContext
mattrunyon Jun 13, 2025
a87d6dc
Fix unit tests
mattrunyon Jun 13, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
374 changes: 185 additions & 189 deletions package-lock.json
View file
Open in desktop

Large diffs are not rendered by default.

36 changes: 18 additions & 18 deletions plugins/ui/src/js/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,25 +40,25 @@
"react-dom": "^17.0.2"
},
"dependencies": {
"@deephaven/chart": "^0.109.0",
"@deephaven/components": "^0.109.0",
"@deephaven/console": "^0.109.0",
"@deephaven/dashboard": "^0.109.0",
"@deephaven/dashboard-core-plugins": "^0.109.0",
"@deephaven/golden-layout": "^0.109.0",
"@deephaven/grid": "^0.109.0",
"@deephaven/icons": "^0.109.0",
"@deephaven/iris-grid": "^0.109.0",
"@deephaven/jsapi-bootstrap": "^0.109.0",
"@deephaven/jsapi-components": "^0.109.0",
"@deephaven/chart": "0.108.1-input-filters.21",
"@deephaven/components": "0.108.1-input-filters.21",
"@deephaven/console": "0.108.1-input-filters.21",
"@deephaven/dashboard": "0.108.1-input-filters.21",
"@deephaven/dashboard-core-plugins": "0.108.1-input-filters.21",
"@deephaven/golden-layout": "0.108.1-input-filters.21",
"@deephaven/grid": "0.108.1-input-filters.21",
"@deephaven/icons": "0.108.1-input-filters.21",
"@deephaven/iris-grid": "0.108.1-input-filters.21",
"@deephaven/jsapi-bootstrap": "0.108.1-input-filters.21",
"@deephaven/jsapi-components": "0.108.1-input-filters.21",
"@deephaven/jsapi-types": "^1.0.0-dev0.35.0",
"@deephaven/jsapi-utils": "^0.109.0",
"@deephaven/log": "^0.109.0",
"@deephaven/plugin": "^0.109.0",
"@deephaven/react-hooks": "^0.109.0",
"@deephaven/redux": "^0.109.0",
"@deephaven/test-utils": "^0.109.0",
"@deephaven/utils": "^0.109.0",
"@deephaven/jsapi-utils": "0.108.1-input-filters.21",
"@deephaven/log": "0.108.1-input-filters.21",
"@deephaven/plugin": "0.108.1-input-filters.21",
"@deephaven/react-hooks": "0.108.1-input-filters.21",
"@deephaven/redux": "0.108.1-input-filters.21",
"@deephaven/test-utils": "0.108.1-input-filters.21",
"@deephaven/utils": "0.108.1-input-filters.21",
"@fortawesome/react-fontawesome": "^0.2.0",
"@internationalized/date": "^3.5.5",
"classnames": "^2.5.1",
Expand Down
10 changes: 7 additions & 3 deletions plugins/ui/src/js/src/elements/ObjectView.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,9 +5,13 @@ import type { dh } from '@deephaven/jsapi-types';

const log = Log.module('@deephaven/js-plugin-ui/ObjectView');

export type ObjectViewProps = { object: dh.WidgetExportedObject };
export type ObjectViewProps = {
object: dh.WidgetExportedObject;
__dhId?: string;
};

function ObjectView(props: ObjectViewProps): JSX.Element {
const { object } = props;
const { object, __dhId } = props;
log.info('Object is', object);
const { type } = object;

Expand All @@ -32,7 +36,7 @@ function ObjectView(props: ObjectViewProps): JSX.Element {
if (plugin != null) {
const Component = plugin.component;
// eslint-disable-next-line react/jsx-props-no-spreading
return <Component {...props} fetch={fetch} />;
return <Component {...props} fetch={fetch} __dhId={__dhId} />;
}

log.warn('Unknown object type', object.type);
Expand Down
4 changes: 4 additions & 0 deletions plugins/ui/src/js/src/elements/UITable/UITable.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,7 @@ import {
useTheme,
viewStyleProps,
} from '@deephaven/components';
import { useDashboardColumnFilters } from '@deephaven/dashboard-core-plugins';
import { useApi } from '@deephaven/jsapi-bootstrap';
import type { dh as DhType } from '@deephaven/jsapi-types';
import Log from '@deephaven/log';
Expand Down Expand Up @@ -527,6 +528,8 @@ export function UITable({
};
}, [irisGridServerProps, initialHydratedState]);

const inputFilters = useDashboardColumnFilters(model?.columns ?? EMPTY_ARRAY);
Copy link
Copy Markdown
Member

@mofojed mofojed May 30, 2025

Choose a reason for hiding this comment

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

We should be passing the table here as well if the model has a table.
What else do we need for ChartBuilder? I guess we need a stable way to fetch the table as well so we can refetch it on reload...

Copy link
Copy Markdown
Collaborator Author

@mattrunyon mattrunyon May 30, 2025

Choose a reason for hiding this comment

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

The table for chart builder is actually sent with the event (not a fetch function). Although we could send the fetch function, but that would change if the table changes. So not sure how we would want to handle that.

Other than that, there's a relatively short handleCreateChart function in IrisGridPanel that would need to have its logic added to a hook that can be used by GridWidgetPlugin and UITable and pass the handler to IrisGrid in each of those


return model ? (
<div
// eslint-disable-next-line react/jsx-props-no-spreading
Expand All @@ -539,6 +542,7 @@ export function UITable({
onStateChange={onStateChange}
// eslint-disable-next-line react/jsx-props-no-spreading
{...mergedIrisGridProps}
inputFilters={inputFilters}
/>
</div>
) : null;
Expand Down
19 changes: 14 additions & 5 deletions plugins/ui/src/js/src/elements/utils/ElementUtils.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -68,32 +68,41 @@ describe('wrapElementChildren', () => {

it.each([
[
'single',
mock.exportedA1,
<ObjectView key={`${mock.exportedA1.type}-0`} object={mock.exportedA1} />,
<ObjectView
key={`${mock.exportedA1.type}-0`}
object={mock.exportedA1}
__dhId={`test-root/${mock.exportedA1.type}-0`}
/>,
],
[
'multiple',
[mock.exportedA1, mock.exportedA2, mock.exportedB1],
[
<ObjectView
key={`${mock.exportedA1.type}-0`}
object={mock.exportedA1}
__dhId={`test-root/${mock.exportedA1.type}-0`}
/>,
<ObjectView
key={`${mock.exportedA1.type}-1`}
object={mock.exportedA1}
__dhId={`test-root/${mock.exportedA1.type}-1`}
/>,
<ObjectView
key={`${mock.exportedB1.type}-0`}
object={mock.exportedB1}
__dhId={`test-root/${mock.exportedB1.type}-0`}
/>,
],
],
])(
'should wrap exported object children in ObjectView: %s, %s',
(children, expectedChildren) => {
'should wrap exported object children in ObjectView: %s',
(testName, children, expectedChildren) => {
const actual = wrapElementChildren({
[ELEMENT_KEY]: 'mock.element',
props: { children },
props: { children, __dhId: 'test-root' },
});

expect(actual.props?.children).toEqual(expectedChildren);
Expand All @@ -119,7 +128,7 @@ describe('wrapElementChildren', () => {
],
],
])(
'should wrap primitive item element children in Text elements: %s, %s',
'should wrap primitive item element children in Text elements: %s',
(children, expectedChildren) => {
const givenProps: Record<string, unknown> = { children };
if (textValue != null) {
Expand Down
10 changes: 9 additions & 1 deletion plugins/ui/src/js/src/elements/utils/ElementUtils.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -191,7 +191,15 @@ export function wrapElementChildren(element: ElementNode): ElementNode {
const wrappedChildren = children.map(child => {
// Exported objects need to be converted to `ObjectView` to be rendered
if (isExportedObject(child)) {
return <ObjectView key={getChildKey(child.type)} object={child} />;
const key = getChildKey(child.type);
return (
<ObjectView
key={key}
object={child}
// eslint-disable-next-line no-underscore-dangle
__dhId={`${element.props?.__dhId}/${key}`}
/>
);
}

// Auto wrap primitive children of `Item` elements in `Text` elements
Expand Down
91 changes: 46 additions & 45 deletions plugins/ui/src/js/src/layout/ReactPanel.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ import { nanoid } from 'nanoid';
import {
LayoutUtils,
PanelEvent,
DhIdContext,
useLayoutManager,
useListener,
} from '@deephaven/dashboard';
Expand Down Expand Up @@ -218,52 +219,52 @@ function ReactPanel({
return portal
? ReactDOM.createPortal(
<ReactPanelContext.Provider value={panelId}>
<View
height="100%"
width="100%"
backgroundColor={backgroundColor}
padding={padding}
paddingTop={paddingTop}
paddingBottom={paddingBottom}
paddingStart={paddingStart}
paddingEnd={paddingEnd}
paddingX={paddingX}
paddingY={paddingY}
overflow={overflow}
UNSAFE_style={UNSAFE_style}
UNSAFE_className={
UNSAFE_className == null
? 'dh-react-panel'
: `${UNSAFE_className} dh-react-panel`
}
>
<Flex
UNSAFE_className="dh-inner-react-panel"
wrap={wrap}
direction={direction}
justifyContent={justifyContent}
alignContent={alignContent}
alignItems={alignItems}
gap={gap}
rowGap={rowGap}
columnGap={columnGap}
<DhIdContext.Provider value={panelId}>
<View
height="100%"
width="100%"
backgroundColor={backgroundColor}
padding={padding}
paddingTop={paddingTop}
paddingBottom={paddingBottom}
paddingStart={paddingStart}
paddingEnd={paddingEnd}
paddingX={paddingX}
paddingY={paddingY}
overflow={overflow}
UNSAFE_style={UNSAFE_style}
UNSAFE_className={
UNSAFE_className == null
? 'dh-react-panel'
: `${UNSAFE_className} dh-react-panel`
}
>
<ReactPanelErrorBoundary onReset={onErrorReset}>
{/**
* Don't render the children if there's an error with the widget. If there's an error with the widget, we can assume the children won't render properly,
* but we still want the panels to appear so things don't disappear/jump around.
*/}
<PersistentStateProvider
initialState={initialData}
onChange={onDataChange}
>
{React.Children.map(renderedChildren, child =>
React.cloneElement(child as React.ReactElement)
)}
</PersistentStateProvider>
</ReactPanelErrorBoundary>
</Flex>
</View>
<Flex
UNSAFE_className="dh-inner-react-panel"
wrap={wrap}
direction={direction}
justifyContent={justifyContent}
alignContent={alignContent}
alignItems={alignItems}
gap={gap}
rowGap={rowGap}
columnGap={columnGap}
>
<ReactPanelErrorBoundary onReset={onErrorReset}>
{/**
* Don't render the children if there's an error with the widget. If there's an error with the widget, we can assume the children won't render properly,
* but we still want the panels to appear so things don't disappear/jump around.
*/}
<PersistentStateProvider
initialState={initialData}
onChange={onDataChange}
>
{renderedChildren ?? null}
Comment thread
mattrunyon marked this conversation as resolved.
</PersistentStateProvider>
</ReactPanelErrorBoundary>
</Flex>
</View>
</DhIdContext.Provider>
</ReactPanelContext.Provider>,
portal,
contentKey
Expand Down
1 change: 1 addition & 0 deletions plugins/ui/src/js/src/widget/DashboardWidgetHandler.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,6 +41,7 @@ function DashboardWidgetHandler({

return (
<WidgetHandler
id={id}
onDataChange={handleDataChange}
onClose={handleClose}
// eslint-disable-next-line react/jsx-props-no-spreading
Expand Down
1 change: 1 addition & 0 deletions plugins/ui/src/js/src/widget/WidgetHandler.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,6 +45,7 @@ function makeWidgetHandler({
}: Partial<WidgetHandlerProps> = {}) {
return (
<WidgetHandler
id="test-widget-handler"
widgetDescriptor={widget}
onClose={onClose}
initialData={initialData}
Expand Down
Loading
Loading
⚡