feat: Extensible table options

.github/copilot/skills/use-log-debug.md

@@ -0,0 +1,56 @@
+# Skill: Use log.debug Instead of console.log
+
+When adding debug logging in JavaScript/TypeScript files in this codebase, use the `@deephaven/log` module instead of `console.log` or `console.debug`.
+
+## Pattern
+
+1. **Import the Log module** at the top of the file:
+   ```typescript
+   import Log from '@deephaven/log';
+   ```
+
+2. **Create a module-specific logger** after imports:
+   ```typescript
+   const log = Log.module('ModuleName');
+   ```
+   Replace `'ModuleName'` with the name of the current file/module (e.g., `'ChartUtils'`, `'TableUtils'`).
+
+3. **Use the logger** for debug output:
+   ```typescript
+   log.debug('message', data);
+   log.debug2('more verbose message', data);  // For very verbose logging
+   ```
+
+## Why
+
+- Consistent logging across the codebase
+- Log levels can be configured at runtime
+- Module-specific filtering is possible
+- Avoids ESLint `no-console` warnings
+- Better production behavior (logs can be silenced)
+
+## Example
+
+```typescript
+import Log from '@deephaven/log';
+
+const log = Log.module('MyComponent');
+
+function processData(data: SomeType): void {
+  log.debug('Processing data:', data);
+  // ... processing logic
+  log.debug2('Detailed step completed');
+}
+```
+
+## Avoid
+
+```typescript
+// ❌ Don't use console directly
+console.log('Processing data:', data);
+console.debug('Step completed');
+
+// ❌ Don't add eslint-disable for console
+// eslint-disable-next-line no-console
+console.log('debug info');
+```

packages/code-studio/src/index.tsx

@@ -46,6 +46,7 @@ async function getCorePlugins() {
   );
   const {
     GridPluginConfig,
+    TableHistoryPluginConfig,
     PandasPluginConfig,
     ChartPluginConfig,
     ChartBuilderPluginConfig,
@@ -56,6 +57,7 @@ async function getCorePlugins() {
   } = dashboardCorePlugins;
   return [
     GridPluginConfig,
+    TableHistoryPluginConfig,
     PandasPluginConfig,
     ChartPluginConfig,
     ChartBuilderPluginConfig,

packages/dashboard-core-plugins/src/GridMiddlewarePlugin.tsx

@@ -0,0 +1,265 @@
+import React, { useCallback, useEffect } from 'react';
+import {
+  PluginType,
+  type WidgetMiddlewarePlugin,
+  type WidgetMiddlewareComponentProps,
+  type WidgetMiddlewarePanelProps,
+} from '@deephaven/plugin';
+import { type dh } from '@deephaven/jsapi-types';
+import Log from '@deephaven/log';
+import { Button } from '@deephaven/components';
+import { vsGear } from '@deephaven/icons';
+import {
+  type TableOption,
+  type TableOptionPanelProps,
+  useTableOptionsHost,
+  defaultTableOptionsRegistry,
+} from '@deephaven/iris-grid';
+
+const log = Log.module('GridMiddlewarePlugin');
+
+/**
+ * Example middleware plugin that wraps the GridWidgetPlugin.
+ * This demonstrates how middleware can intercept and enhance widget rendering.
+ *
+ * Middleware plugins:
+ * - Must set `isMiddleware: true`
+ * - Receive the wrapped component as `Component` prop
+ * - Must render `Component` to continue the chain
+ * - Are chained in registration order (first registered = outermost wrapper)
+ */
+function GridMiddleware({
+  Component,
+  ...props
+}: WidgetMiddlewareComponentProps<dh.Table>): JSX.Element {
+  // Register the option when the middleware mounts (not as a module side effect)
+  useEffect(() => {
+    defaultTableOptionsRegistry.register(MiddlewareCustomOption);
+    return () => {
+      defaultTableOptionsRegistry.unregister(MIDDLEWARE_OPTION_TYPE);
+    };
+  }, []);
+
+  // Log when middleware is mounted (for debugging)
+  useEffect(() => {
+    log.debug('GridMiddleware (component) mounted');
+    return () => {
+      log.debug('GridMiddleware (component) unmounted');
+    };
+  }, []);
+
+  // Pass through to the wrapped component
+  // Middleware can add context providers, state, or modify props here
+  // eslint-disable-next-line react/jsx-props-no-spreading
+  return <Component {...props} />;
+}
+
+GridMiddleware.displayName = 'GridMiddleware';
+
+/**
+ * Custom option type for the middleware plugin.
+ * Using a unique string to avoid conflicts with built-in option types.
+ */
+const MIDDLEWARE_OPTION_TYPE = 'middleware-custom-option';
+
+/**
+ * A sample configuration panel similar to SelectDistinctBuilder.
+ * Demonstrates how middleware plugins can use the useTableOptionsHost hook
+ * to access and modify grid state.
+ */
+function MiddlewareConfigPanel(_props: TableOptionPanelProps): JSX.Element {
+  // Access the Table Options context for state and dispatch
+  const { gridState, dispatch, closePanel } = useTableOptionsHost();
+  const {
+    model,
+    selectDistinctColumns,
+    customColumns,
+    quickFilters,
+    advancedFilters,
+    searchValue,
+    selectedSearchColumns,
+    sorts,
+    reverse,
+  } = gridState;
+
+  const handleButtonClick = useCallback(() => {
+    log.info('MiddlewareConfigPanel button clicked!');
+    // eslint-disable-next-line no-console
+    console.log('MiddlewareConfigPanel: Sample button clicked!');
+    // eslint-disable-next-line no-console
+    console.log('Current selectDistinctColumns:', selectDistinctColumns);
+    // eslint-disable-next-line no-console
+    console.log('Current customColumns:', customColumns);
+    // eslint-disable-next-line no-console
+    console.log('Current quickFilters:', quickFilters);
+    // eslint-disable-next-line no-console
+    console.log('Current advancedFilters:', advancedFilters);
+    // eslint-disable-next-line no-console
+    console.log('Current searchValue:', searchValue, 'columns:', selectedSearchColumns);
+    // eslint-disable-next-line no-console
+    console.log('Current sorts:', sorts, 'reverse:', reverse);
+  }, [
+    selectDistinctColumns,
+    customColumns,
+    quickFilters,
+    advancedFilters,
+    searchValue,
+    selectedSearchColumns,
+    sorts,
+    reverse,
+  ]);
+
+  const handleClearSelectDistinct = useCallback(() => {
+    log.info('Clearing selectDistinctColumns');
+    dispatch({ type: 'SET_SELECT_DISTINCT_COLUMNS', columns: [] });
+    closePanel();
+  }, [dispatch, closePanel]);
+
+  const handleClearFilters = useCallback(() => {
+    log.info('Clearing all filters');
+    dispatch({ type: 'CLEAR_ALL_FILTERS' });
+    closePanel();
+  }, [dispatch, closePanel]);
+
+  const hasFilters =
+    quickFilters.size > 0 ||
+    advancedFilters.size > 0 ||
+    searchValue !== '' ||
+    sorts.length > 0;
+
+  return (
+    <div className="container mt-3">
+      <p className="text-muted small">Columns: {model.columns?.length ?? 0}</p>
+      <p className="text-muted small">
+        Select Distinct:{' '}
+        {selectDistinctColumns.length > 0
+          ? selectDistinctColumns.join(', ')
+          : 'None'}
+      </p>
+      <p className="text-muted small">
+        Custom Columns:{' '}
+        {customColumns.length > 0 ? customColumns.join(', ') : 'None'}
+      </p>
+      <p className="text-muted small">
+        Quick Filters: {quickFilters.size > 0 ? quickFilters.size : 'None'}
+      </p>
+      <p className="text-muted small">
+        Advanced Filters:{' '}
+        {advancedFilters.size > 0 ? advancedFilters.size : 'None'}
+      </p>
+      <p className="text-muted small">
+        Cross-Column Search:{' '}
+        {searchValue || 'None'}
+        {selectedSearchColumns.length > 0
+          ? ` (in ${selectedSearchColumns.join(', ')})`
+          : ''}
+      </p>
+      <p className="text-muted small">
+        Sorts: {sorts.length > 0 ? sorts.length : 'None'}
+        {reverse ? ' (reversed)' : ''}
+      </p>
+
+      <div className="d-flex flex-column gap-2 mt-3">
+        <Button kind="primary" onClick={handleButtonClick}>
+          Log State to Console
+        </Button>
+        {selectDistinctColumns.length > 0 && (
+          <Button kind="secondary" onClick={handleClearSelectDistinct}>
+            Clear Select Distinct
+          </Button>
+        )}
+        {hasFilters && (
+          <Button kind="secondary" onClick={handleClearFilters}>
+            Clear All Filters &amp; Sorts
+          </Button>
+        )}
+      </div>
+
+      <p className="text-muted small mt-3">
+        This panel demonstrates using the useTableOptionsHost hook to access and
+        modify grid state from a plugin.
+      </p>
+    </div>
+  );
+}
+
+MiddlewareConfigPanel.displayName = 'MiddlewareConfigPanel';
+
+/**
+ * Middleware custom option registered with the Table Options registry.
+ * This demonstrates how plugins can add custom options via the registry.
+ */
+const MiddlewareCustomOption: TableOption = {
+  type: MIDDLEWARE_OPTION_TYPE,
+
+  menuItem: {
+    title: 'Middleware Custom Option',
+    subtitle: 'Opens a configuration panel',
+    icon: vsGear,
+    // Show at top of menu
+    order: -100,
+    // Always available
+    isAvailable: () => true,
+  },
+
+  Panel: MiddlewareConfigPanel,
+};
+
+// Note: Registration moved to GridMiddleware component to avoid side effects at module load time
+// defaultTableOptionsRegistry.register(MiddlewareCustomOption);
+
+/**
+ * Panel middleware that wraps the GridPanelPlugin.
+ * This is used when the base plugin has a panelComponent defined.
+ */
+function GridPanelMiddleware({
+  Component,
+  ...props
+}: WidgetMiddlewarePanelProps<dh.Table>): JSX.Element {
+  // Log when panel middleware is mounted (for debugging)
+  useEffect(() => {
+    log.debug('GridMiddleware (panel) mounted');
+    return () => {
+      log.debug('GridMiddleware (panel) unmounted');
+    };
+  }, []);
+
+  // Simply pass through - registry handles the option
+  return (
+    <Component
+      /* eslint-disable-next-line react/jsx-props-no-spreading */
+      {...props}
+    />
+  );
+}
+
+GridPanelMiddleware.displayName = 'GridPanelMiddleware';
+
+/**
+ * Middleware plugin configuration for GridWidgetPlugin.
+ * This plugin wraps the base grid widget and can be used to:
+ * - Add custom Table Options menu items
+ * - Inject additional context or state
+ * - Add UI elements around the grid
+ * - Intercept and modify props before they reach the grid
+ *
+ * Since GridPluginConfig has a panelComponent, we must also provide
+ * a panelComponent to have our middleware applied.
+ */
+const GridMiddlewarePluginConfig: WidgetMiddlewarePlugin<dh.Table> = {
+  name: '@deephaven/grid-middleware',
+  title: 'Grid Middleware',
+  type: PluginType.WIDGET_PLUGIN,
+  component: GridMiddleware,
+  panelComponent: GridPanelMiddleware,
+  supportedTypes: [
+    'Table',
+    'TreeTable',
+    'HierarchicalTable',
+    'PartitionedTable',
+  ],
+  isMiddleware: true,
+};
+
+export { GridMiddleware, GridPanelMiddleware };
+export default GridMiddlewarePluginConfig;