dashboard-core-plugins typescript conversion

packages/chart/src/Chart.tsx

@@ -533,9 +533,11 @@ export class Chart extends Component<ChartProps, ChartState> {
     ) {
       // Call relayout to resize avoiding the debouncing plotly does
       // https://github.com/plotly/plotly.js/issues/2769#issuecomment-402099552
-      Plotly.relayout(this.plot.current.el, { autosize: true }).catch(e => {
-        log.debug('Unable to resize, promise rejected', e);
-      });
+      Plotly.relayout(this.plot.current.el, { autosize: true }).catch(
+        (e: unknown) => {
+          log.debug('Unable to resize, promise rejected', e);
+        }
+      );
     }
   }
 

packages/components/src/TimeSlider.tsx

@@ -29,7 +29,7 @@ type TimeSliderProps = {
 
 /**
  * Creates a time slider for setting a start and end time, that can also run overnight
- * @param {startTime, endTime, onChange} props takes times in seconds 0 - 86399 and a callback
+ * @param props takes times in seconds 0 - 86399 and a callback
  */
 const TimeSlider = ({
   startTime: propStartTime,
@@ -293,7 +293,7 @@ const Handle = (props: HandleProps): JSX.Element => {
    * The handle offset changes for the first and last tick range dynmaically. Normally,
    * the center of the handle (size/2) is the selection origin, but at edges, it becomes either
    * end of the handle, requireing a relative offset range of 0 - 0.5,  and 0.5 - 1 of handle size.
-   * @param {number} t time in seconds
+   * @param t time in seconds
    */
   const transform = useMemo(() => {
     const ONE_HOUR = 60 * 60;

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

@@ -93,12 +93,12 @@ export const FilterPlugin = (props: FilterPluginProps): JSX.Element => {
   /**
    * Handler for the COLUMNS_CHANGED event.
    * @param panel The component that's emitting the filter change
-   * @param {Column|Array<Column>} columns The columns in this panel
+   * @param columns The columns in this panel
    */
   const handleColumnsChanged = useCallback(
-    (panel: Component, columns) => {
+    (panel: Component, columns: Column | Column[]) => {
       log.debug2('handleColumnsChanged', panel, columns);
-      panelColumns.set(panel, [].concat(columns) as Column[]);
+      panelColumns.set(panel, ([] as Column[]).concat(columns));
       sendUpdate();
     },
     [panelColumns, sendUpdate]

packages/dashboard-core-plugins/src/linker/Linker.tsx

@@ -43,6 +43,7 @@ import LinkerUtils, {
   LinkFilterMap,
   LinkType,
 } from './LinkerUtils';
+import { ColumnSelectionValidator } from '../panels/ColumnSelectionValidator';
 
 const log = Log.module('Linker');
 
@@ -550,7 +551,7 @@ export class Linker extends Component<LinkerProps, LinkerState> {
       case ToolType.LINKER:
         setDashboardColumnSelectionValidator(
           localDashboardId,
-          this.isColumnSelectionValid
+          this.isColumnSelectionValid as ColumnSelectionValidator
         );
         break;
       default:

packages/dashboard-core-plugins/src/panels/ChartPanel.tsx

@@ -57,6 +57,7 @@ import ChartColumnSelectorOverlay, {
 import './ChartPanel.scss';
 import { Link } from '../linker/LinkerUtils';
 import { PanelState as IrisGridPanelState } from './IrisGridPanel';
+import { ColumnSelectionValidator } from './ColumnSelectionValidator';
 
 const log = Log.module('ChartPanel');
 const UPDATE_MODEL_DEBOUNCE = 150;
@@ -111,10 +112,7 @@ interface ChartPanelProps {
   isLinkerActive: boolean;
   source?: TableTemplate;
   sourcePanel?: PanelComponent;
-  columnSelectionValidator: (
-    value: unknown,
-    column: { name: string; type: string } | null
-  ) => boolean;
+  columnSelectionValidator?: ColumnSelectionValidator;
   setActiveTool: (tool: string) => void;
   setDashboardIsolatedLinkerPanelId: (
     id: string,
@@ -414,10 +412,7 @@ export class ChartPanel extends Component<ChartPanelProps, ChartPanelState> {
     (
       columnMap: ColumnMap,
       linkedColumnMap: LinkedColumnMap,
-      columnSelectionValidator: (
-        value: unknown,
-        column: { name: string; type: string } | null
-      ) => boolean
+      columnSelectionValidator?: ColumnSelectionValidator
     ) =>
       Array.from(columnMap.values()).map(column => ({
         name: column.name,
@@ -501,7 +496,7 @@ export class ChartPanel extends Component<ChartPanelProps, ChartPanelState> {
     if (!columnSelectionValidator) {
       return;
     }
-    columnSelectionValidator(this, null);
+    columnSelectionValidator(this, undefined);
   }
 
   handleDisconnect(): void {
@@ -758,7 +753,7 @@ export class ChartPanel extends Component<ChartPanelProps, ChartPanelState> {
 
   /**
    * Set chart filters based on the filter map
-   * @param {Map<string, Object>} filterMapParam Filter map
+   * @param filterMapParam Filter map
    */
   setFilterMap(
     filterMapParam: Map<string, { columnType: string; value: string }>

packages/dashboard-core-plugins/src/panels/ColumnSelectionValidator.ts

@@ -0,0 +1,7 @@
+import { PanelComponent } from '@deephaven/dashboard';
+import { LinkColumn } from '../linker/LinkerUtils';
+
+export type ColumnSelectionValidator = (
+  panel: PanelComponent,
+  tableColumn?: Partial<LinkColumn>
+) => boolean;

packages/dashboard-core-plugins/src/panels/ConsolePanel.test.tsx

@@ -0,0 +1,50 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import { CommandHistoryStorage } from '@deephaven/console';
+import { Container } from '@deephaven/golden-layout';
+import { ConsolePanel } from './ConsolePanel';
+import { SessionWrapper } from '../../../code-studio/src/main/SessionUtils';
+
+jest.mock('@deephaven/console', () => ({
+  ...(jest.requireActual('@deephaven/console') as Record<string, unknown>),
+  Console: jest.fn(() => null),
+  default: jest.fn(() => null),
+}));
+
+jest.mock('./Panel', () => jest.fn(() => null));
+
+function makeSession() {
+  return {
+    addEventListener: jest.fn(),
+    subscribeToFieldUpdates: jest.fn(() => () => null),
+    removeEventListener: jest.fn(),
+    getTable: jest.fn(),
+    getObject: jest.fn(),
+    runCode: jest.fn(),
+  };
+}
+
+it('renders without crashing', () => {
+  const eventHub = {
+    emit: () => undefined,
+    on: () => undefined,
+    off: () => undefined,
+    trigger: () => undefined,
+    unbind: () => undefined,
+  };
+  const container: Partial<Container> = {
+    emit: () => undefined,
+    on: () => undefined,
+    off: () => undefined,
+  };
+  const session = makeSession();
+  render(
+    <ConsolePanel
+      glEventHub={eventHub}
+      glContainer={container as Container}
+      commandHistoryStorage={{} as CommandHistoryStorage}
+      timeZone="MockTimeZone"
+      sessionWrapper={({ session, config: {} } as unknown) as SessionWrapper}
+    />
+  );
+});

packages/dashboard-core-plugins/src/panels/ConsolePanel.tsx

@@ -23,7 +23,7 @@ import type { JSZipObject } from 'jszip';
 import { ConsoleEvent } from '../events';
 import './ConsolePanel.scss';
 import Panel from './Panel';
-import { getDashboardSessionWrapper } from '../redux';
+import { getDashboardSessionWrapper, SessionWrapper } from '../redux';
 
 const log = Log.module('ConsolePanel');
 
@@ -45,13 +45,6 @@ interface PanelState {
 
 type ItemIds = Map<string, string>;
 
-interface SessionWrapper {
-  session: IdeSession;
-  config: {
-    type: string;
-    id: string;
-  };
-}
 interface ConsolePanelProps {
   commandHistoryStorage: CommandHistoryStorage;
   glContainer: Container;
@@ -260,8 +253,8 @@ export class ConsolePanel extends PureComponent<
   }
 
   /**
-   * @param {VariableDefinition} widget The widget to open
-   * @param {dh.Session} session The session object
+   * @param widget The widget to open
+   * @param session The session object
    */
   openWidget(widget: VariableDefinition, session: IdeSession): void {
     const { glEventHub } = this.props;
@@ -285,7 +278,7 @@ export class ConsolePanel extends PureComponent<
 
   /**
    * Close the disconnected panels from this session
-   * @param {boolean} force True to force the panels closed regardless of the current setting
+   * @param force True to force the panels closed regardless of the current setting
    */
   closeDisconnectedPanels(force = false): void {
     const { consoleSettings, itemIds } = this.state;

packages/dashboard-core-plugins/src/panels/DropdownFilterPanel.tsx

@@ -31,6 +31,7 @@ import './DropdownFilterPanel.scss';
 import ToolType from '../linker/ToolType';
 import WidgetPanel from './WidgetPanel';
 import { Link } from '../linker/LinkerUtils';
+import { ColumnSelectionValidator } from './ColumnSelectionValidator';
 
 const log = Log.module('DropdownFilterPanel');
 
@@ -50,10 +51,7 @@ interface DropdownFilterPanelProps {
   panelState?: PanelState;
   isLinkerActive: boolean;
   columns: Column[];
-  columnSelectionValidator?: (
-    value: unknown,
-    column: DropdownFilterColumn | null
-  ) => boolean;
+  columnSelectionValidator?: ColumnSelectionValidator;
   disableLinking: boolean;
   settings: {
     formatter: FormattingRule[];
@@ -240,7 +238,7 @@ class DropdownFilterPanel extends Component<
       { type, name }: DropdownFilterColumn,
       formatter: Formatter
     ) => {
-      if (TableUtils.isDateType(type)) {
+      if (type && TableUtils.isDateType(type)) {
         return rawValues.map(value =>
           DropdownFilterPanel.DATETIME_FORMATTER.format(value as number)
         );
@@ -479,8 +477,8 @@ class DropdownFilterPanel extends Component<
 
   /**
    * Set the filter value, card side, selected column
-   * @param {Object} state Filter state to set
-   * @param {boolean} sendUpdate Emit filters changed event if true
+   * @param state Filter state to set
+   * @param sendUpdate Emit filters changed event if true
    */
   setPanelState(
     state: {
@@ -671,7 +669,7 @@ class DropdownFilterPanel extends Component<
     if (!columnSelectionValidator) {
       return;
     }
-    columnSelectionValidator(this, null);
+    columnSelectionValidator(this, undefined);
   }
 
   render() {

packages/dashboard-core-plugins/src/panels/InputFilterPanel.tsx

@@ -169,8 +169,8 @@ class InputFilterPanel extends Component<
 
   /**
    * Set the filter value, card side, selected column
-   * @param {Object} state Filter state to set
-   * @param {boolean} sendUpdate Emit filters changed event if true
+   * @param state Filter state to set
+   * @param sendUpdate Emit filters changed event if true
    */
   setPanelState(state: PanelState, sendUpdate = false) {
     // Set the skipUpdate flag so the next onChange handler call doesn't emit the FILTERS_CHANGED event