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

Fixes #1080

I tested with this snippet. Then added an input filter and checked that
all columns showed up and worked. Also tested clear all filters button
and shortcut

```py
from deephaven import ui, empty_table
from deephaven.plot import express as dx

_stocks = dx.data.stocks()

my_tabs_basic = ui.flex(
    ui.table(_stocks),
    empty_table(10).update("I=i"),
)
```

Author: mattrunyon

package-lock.json

@@ -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": "^1.0.0",
+    "@deephaven/components": "^1.0.0",
+    "@deephaven/console": "^1.0.0",
+    "@deephaven/dashboard": "^1.0.0",
+    "@deephaven/dashboard-core-plugins": "^1.0.0",
+    "@deephaven/golden-layout": "^1.0.0",
+    "@deephaven/grid": "^1.0.0",
+    "@deephaven/icons": "^1.0.0",
+    "@deephaven/iris-grid": "^1.0.0",
+    "@deephaven/jsapi-bootstrap": "^1.0.0",
+    "@deephaven/jsapi-components": "^1.0.0",
     "@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": "^1.0.0",
+    "@deephaven/log": "^1.0.0",
+    "@deephaven/plugin": "^1.0.0",
+    "@deephaven/react-hooks": "^1.0.0",
+    "@deephaven/redux": "^1.0.0",
+    "@deephaven/test-utils": "^1.0.0",
+    "@deephaven/utils": "^1.0.0",
     "@fortawesome/react-fontawesome": "^0.2.0",
     "@internationalized/date": "^3.5.5",
     "classnames": "^2.5.1",

plugins/ui/src/js/package.json

@@ -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;
 
@@ -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);

plugins/ui/src/js/src/elements/ObjectView.tsx

@@ -27,6 +27,11 @@ import {
   useTheme,
   viewStyleProps,
 } from '@deephaven/components';
+import {
+  InputFilterEvent,
+  useDashboardColumnFilters,
+} from '@deephaven/dashboard-core-plugins';
+import { useLayoutManager, useListener } from '@deephaven/dashboard';
 import { useApi } from '@deephaven/jsapi-bootstrap';
 import type { dh as DhType } from '@deephaven/jsapi-types';
 import Log from '@deephaven/log';
@@ -213,6 +218,7 @@ export function UITable({
   );
 
   const dh = useApi();
+  const { eventHub } = useLayoutManager();
   const theme = useTheme();
   const [irisGrid, setIrisGrid] = useState<IrisGridType | null>(null);
   const utils = useMemo(() => new IrisGridUtils(dh), [dh]);
@@ -527,6 +533,24 @@ export function UITable({
     };
   }, [irisGridServerProps, initialHydratedState]);
 
+  const inputFilters = useDashboardColumnFilters(
+    model?.columns ?? EMPTY_ARRAY,
+    model?.table
+  );
+
+  const handleClearAllFilters = useCallback(() => {
+    if (irisGrid == null) {
+      return;
+    }
+    irisGrid.clearAllFilters();
+  }, [irisGrid]);
+
+  useListener(
+    eventHub,
+    InputFilterEvent.CLEAR_ALL_FILTERS,
+    handleClearAllFilters
+  );
+
   return model ? (
     <div
       // eslint-disable-next-line react/jsx-props-no-spreading
@@ -539,6 +563,7 @@ export function UITable({
         onStateChange={onStateChange}
         // eslint-disable-next-line react/jsx-props-no-spreading
         {...mergedIrisGridProps}
+        inputFilters={inputFilters}
       />
     </div>
   ) : null;

plugins/ui/src/js/src/elements/UITable/UITable.tsx

@@ -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);
@@ -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) {

plugins/ui/src/js/src/elements/utils/ElementUtils.test.tsx

@@ -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

plugins/ui/src/js/src/elements/utils/ElementUtils.tsx

@@ -10,6 +10,7 @@ import { nanoid } from 'nanoid';
 import {
   LayoutUtils,
   PanelEvent,
+  PanelIdContext,
   useLayoutManager,
   useListener,
 } from '@deephaven/dashboard';
@@ -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}
+          <PanelIdContext.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}
+                  </PersistentStateProvider>
+                </ReactPanelErrorBoundary>
+              </Flex>
+            </View>
+          </PanelIdContext.Provider>
         </ReactPanelContext.Provider>,
         portal,
         contentKey

plugins/ui/src/js/src/layout/ReactPanel.tsx

@@ -41,6 +41,7 @@ function DashboardWidgetHandler({
 
   return (
     <WidgetHandler
+      id={id}
       onDataChange={handleDataChange}
       onClose={handleClose}
       // eslint-disable-next-line react/jsx-props-no-spreading

plugins/ui/src/js/src/widget/DashboardWidgetHandler.tsx

@@ -45,6 +45,7 @@ function makeWidgetHandler({
 }: Partial<WidgetHandlerProps> = {}) {
   return (
     <WidgetHandler
+      id="test-widget-handler"
       widgetDescriptor={widget}
       onClose={onClose}
       initialData={initialData}