refactor: Move Panel into @deephaven/dashboard

packages/dashboard-core-plugins/src/events/TabEventMap.ts

@@ -1,5 +1,5 @@
 import { type ValueOf } from '@deephaven/utils';
-import type TabEvent from './TabEvent';
+import { type TabEvent } from '@deephaven/dashboard';
 
 export type TabEventType = ValueOf<typeof TabEvent>;
 

packages/dashboard-core-plugins/src/events/index.ts

@@ -1,8 +1,14 @@
+import { TabEvent as DashboardTabEvent } from '@deephaven/dashboard';
+
 export { default as ChartEvent } from './ChartEvent';
 export { default as ConsoleEvent } from './ConsoleEvent';
 export { default as InputFilterEvent } from './InputFilterEvent';
 export { default as IrisGridEvent } from './IrisGridEvent';
 export { default as MarkdownEvent } from './MarkdownEvent';
 export { default as NotebookEvent } from './NotebookEvent';
 export { default as PandasEvent } from './PandasEvent';
-export { default as TabEvent } from './TabEvent';
+
+/**
+ * @deprecated Use TabEvent from @deephaven/dashboard
+ */
+export const TabEvent = DashboardTabEvent;

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

@@ -15,7 +15,7 @@ import { assertNotNull, Pending } from '@deephaven/utils';
 import type { dh } from '@deephaven/jsapi-types';
 import { ConsoleEvent, NotebookEvent } from '../events';
 import './CommandHistoryPanel.scss';
-import Panel from './Panel';
+import Panel from './CorePanel';
 import { getDashboardSessionWrapper } from '../redux';
 
 const log = Log.module('CommandHistoryPanel');

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

@@ -38,7 +38,7 @@ import {
 } from '@deephaven/plugin';
 import type { JSZipObject } from 'jszip';
 import { ConsoleEvent } from '../events';
-import Panel from './Panel';
+import Panel from './CorePanel';
 import { getDashboardSessionWrapper } from '../redux';
 import './ConsolePanel.scss';
 

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

@@ -0,0 +1,80 @@
+import React, { PureComponent, type ReactElement } from 'react';
+import { createXComponent } from '@deephaven/components';
+import { type BasePanelProps, BasePanel } from '@deephaven/dashboard';
+import type { dh } from '@deephaven/jsapi-types';
+import { ConsoleEvent, InputFilterEvent } from '../events';
+
+export type CorePanelProps = BasePanelProps & {
+  onClearAllFilters?: (...args: unknown[]) => void;
+  onSessionClose?: (session: dh.IdeSession) => void;
+  onSessionOpen?: (
+    session: dh.IdeSession,
+    { language, sessionId }: { language: string; sessionId: string }
+  ) => void;
+};
+
+/**
+ * Generic panel component that emits mount/unmount/focus events.
+ * Also wires up some triggers for common events:
+ * Focus, Resize, Show, Session open/close, client disconnect/reconnect.
+ */
+class CorePanel extends PureComponent<CorePanelProps> {
+  constructor(props: CorePanelProps) {
+    super(props);
+
+    this.handleClearAllFilters = this.handleClearAllFilters.bind(this);
+    this.handleSessionClosed = this.handleSessionClosed.bind(this);
+    this.handleSessionOpened = this.handleSessionOpened.bind(this);
+  }
+
+  componentDidMount(): void {
+    const { glEventHub } = this.props;
+
+    glEventHub.on(ConsoleEvent.SESSION_CLOSED, this.handleSessionClosed);
+    glEventHub.on(ConsoleEvent.SESSION_OPENED, this.handleSessionOpened);
+    glEventHub.on(
+      InputFilterEvent.CLEAR_ALL_FILTERS,
+      this.handleClearAllFilters
+    );
+  }
+
+  componentWillUnmount(): void {
+    const { glEventHub } = this.props;
+
+    glEventHub.off(ConsoleEvent.SESSION_CLOSED, this.handleSessionClosed);
+    glEventHub.off(ConsoleEvent.SESSION_OPENED, this.handleSessionOpened);
+    glEventHub.off(
+      InputFilterEvent.CLEAR_ALL_FILTERS,
+      this.handleClearAllFilters
+    );
+  }
+
+  handleClearAllFilters(...args: unknown[]): void {
+    const { onClearAllFilters } = this.props;
+    onClearAllFilters?.(...args);
+  }
+
+  handleSessionClosed(session: dh.IdeSession): void {
+    const { onSessionClose } = this.props;
+    onSessionClose?.(session);
+  }
+
+  handleSessionOpened(
+    session: dh.IdeSession,
+    params: { language: string; sessionId: string }
+  ): void {
+    const { onSessionOpen } = this.props;
+    onSessionOpen?.(session, params);
+  }
+
+  render(): ReactElement {
+    const { children, ...otherProps } = this.props;
+
+    // eslint-disable-next-line react/jsx-props-no-spreading
+    return <BasePanel {...otherProps}>{children}</BasePanel>;
+  }
+}
+
+const XCorePanel = createXComponent(CorePanel);
+
+export default XCorePanel;

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

@@ -12,7 +12,7 @@ import FileExplorer, {
 import React, { type ReactNode } from 'react';
 import { connect, type ConnectedProps } from 'react-redux';
 import type { dh } from '@deephaven/jsapi-types';
-import Panel from './Panel';
+import Panel from './CorePanel';
 import { NotebookEvent } from '../events';
 import './FileExplorerPanel.scss';
 import { getDashboardSessionWrapper } from '../redux';

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

@@ -22,7 +22,7 @@ import {
   getTableMapForDashboard,
   setDashboardFilterSets as setDashboardFilterSetsAction,
 } from '../redux';
-import Panel from './Panel';
+import Panel from './CorePanel';
 import FilterSetManager, {
   type ChangeHandlerArgs,
   type FilterSet,

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

@@ -5,7 +5,7 @@ import type { Container, EventEmitter } from '@deephaven/golden-layout';
 import { type RootState } from '@deephaven/redux';
 import { LayoutUtils } from '@deephaven/dashboard';
 import { assertNotNull } from '@deephaven/utils';
-import Panel from './Panel';
+import Panel from './CorePanel';
 import InputFilter, {
   type InputFilterColumn,
 } from '../controls/input-filter/InputFilter';

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

@@ -8,7 +8,7 @@ import { type DashboardPanelProps } from '@deephaven/dashboard';
 import Log from '@deephaven/log';
 import { type RootState } from '@deephaven/redux';
 import './LogPanel.scss';
-import Panel from './Panel';
+import Panel from './CorePanel';
 import { getDashboardSessionWrapper } from '../redux';
 
 const log = Log.module('LogPanel');

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

@@ -21,7 +21,7 @@ import type * as monaco from 'monaco-editor';
 import { assertNotNull } from '@deephaven/utils';
 import { type RootState } from '@deephaven/redux';
 import { LoadingOverlay } from '@deephaven/components';
-import Panel from './Panel';
+import Panel from './CorePanel';
 import MarkdownContainer from '../controls/markdown/MarkdownContainer';
 import MarkdownStartPage from '../controls/markdown/MarkdownStartPage';
 import './MarkdownPanel.scss';

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

@@ -58,7 +58,7 @@ import type { Tab, CloseOptions } from '@deephaven/golden-layout';
 import type { dh } from '@deephaven/jsapi-types';
 import { ConsoleEvent, NotebookEvent } from '../events';
 import { getDashboardSessionWrapper } from '../redux';
-import Panel from './Panel';
+import Panel from './CorePanel';
 import './NotebookPanel.scss';
 
 const MarkdownNotebook = lazy(() => import('./MarkdownNotebook'));

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

@@ -8,7 +8,7 @@ import {
 } from '@deephaven/components';
 import type { dh } from '@deephaven/jsapi-types';
 import { copyToClipboard, EMPTY_ARRAY } from '@deephaven/utils';
-import Panel, { type CorePanelProps } from './Panel';
+import Panel, { type CorePanelProps } from './CorePanel';
 import WidgetPanelTooltip from './WidgetPanelTooltip';
 import './WidgetPanel.scss';
 import { type WidgetPanelDescriptor } from './WidgetPanelTypes';

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

@@ -1,3 +1,5 @@
+import CorePanelImport from './CorePanel';
+
 export { default as ChartPanel } from './ChartPanel';
 export * from './ChartPanel';
 export * from './ChartPanelUtils';
@@ -17,8 +19,13 @@ export { default as MarkdownPanel } from './MarkdownPanel';
 export { default as NotebookPanel } from './NotebookPanel';
 export { default as PandasPanel } from './PandasPanel';
 export * from './PandasPanel';
-export { default as Panel } from './Panel';
 export * from './WidgetPanelTypes';
 export { default as WidgetPanel, type WidgetPanelProps } from './WidgetPanel';
 export { default as WidgetPanelTooltip } from './WidgetPanelTooltip';
 export { default as MockFileStorage } from './MockFileStorage';
+export const CorePanel = CorePanelImport;
+
+/**
+ * @deprecated Use CorePanel instead.
+ */
+export const Panel = CorePanelImport;

packages/dashboard/package.json

@@ -28,9 +28,11 @@
     "@deephaven/react-hooks": "file:../react-hooks",
     "@deephaven/redux": "file:../redux",
     "@deephaven/utils": "file:../utils",
+    "classnames": "^2.3.1",
     "fast-deep-equal": "^3.1.3",
     "lodash.ismatch": "^4.1.1",
     "lodash.throttle": "^4.1.1",
+    "memoize-one": "^5.1.1",
     "nanoid": "^5.0.7",
     "prop-types": "^15.7.2"
   },

packages/dashboard-core-plugins/src/panels/Panel.tsx → packages/dashboard/src/Panel.tsx

@@ -16,11 +16,6 @@ import {
   type ResolvableContextAction,
   Tooltip,
 } from '@deephaven/components';
-import {
-  LayoutUtils,
-  type PanelComponent,
-  PanelEvent,
-} from '@deephaven/dashboard';
 import type {
   Container,
   EventEmitter,
@@ -29,15 +24,17 @@ import type {
 } from '@deephaven/golden-layout';
 import { assertNotNull, EMPTY_ARRAY } from '@deephaven/utils';
 import Log from '@deephaven/log';
-import type { dh } from '@deephaven/jsapi-types';
-import { ConsoleEvent, InputFilterEvent, TabEvent } from '../events';
+import LayoutUtils from './layout/LayoutUtils';
+import { type PanelComponent } from './DashboardPlugin';
+import PanelEvent from './PanelEvent';
 import PanelContextMenu from './PanelContextMenu';
 import RenameDialog from './RenameDialog';
+import TabEvent from './TabEvent';
 import './Panel.scss';
 
 const log = Log.module('Panel');
 
-export type CorePanelProps = {
+export type BasePanelProps = {
   /**
    * Reference to the component panel.
    * Will wait until it is set before emitting mount/unmount events.
@@ -52,14 +49,8 @@ export type CorePanelProps = {
   onBlur?: FocusEventHandler<HTMLDivElement>;
   onTab?: (tab: Tab) => void;
   onTabClicked?: (e: MouseEvent) => void;
-  onClearAllFilters?: (...args: unknown[]) => void;
   onHide?: (...args: unknown[]) => void;
   onResize?: (...args: unknown[]) => void;
-  onSessionClose?: (session: dh.IdeSession) => void;
-  onSessionOpen?: (
-    session: dh.IdeSession,
-    { language, sessionId }: { language: string; sessionId: string }
-  ) => void;
   onBeforeShow?: (...args: unknown[]) => void;
   onShow?: (...args: unknown[]) => void;
   onTabBlur?: (...args: unknown[]) => void;
@@ -81,20 +72,17 @@ interface PanelState {
 /**
  * Generic panel component that emits mount/unmount/focus events.
  * Also wires up some triggers for common events:
- * Focus, Resize, Show, Session open/close, client disconnect/reconnect.
+ * Focus, Resize, Show
  */
-class Panel extends PureComponent<CorePanelProps, PanelState> {
-  constructor(props: CorePanelProps) {
+class Panel extends PureComponent<BasePanelProps, PanelState> {
+  constructor(props: BasePanelProps) {
     super(props);
 
-    this.handleClearAllFilters = this.handleClearAllFilters.bind(this);
     this.handleCopyPanel = this.handleCopyPanel.bind(this);
     this.handleFocus = this.handleFocus.bind(this);
     this.handleBlur = this.handleBlur.bind(this);
     this.handleHide = this.handleHide.bind(this);
     this.handleResize = this.handleResize.bind(this);
-    this.handleSessionClosed = this.handleSessionClosed.bind(this);
-    this.handleSessionOpened = this.handleSessionOpened.bind(this);
     this.handleBeforeShow = this.handleBeforeShow.bind(this);
     this.handleShow = this.handleShow.bind(this);
     this.handleTabBlur = this.handleTabBlur.bind(this);
@@ -124,14 +112,8 @@ class Panel extends PureComponent<CorePanelProps, PanelState> {
     glContainer.on('hide', this.handleHide);
     glContainer.on('tab', this.handleTab);
     glContainer.on('tabClicked', this.handleTabClicked);
-    glEventHub.on(ConsoleEvent.SESSION_CLOSED, this.handleSessionClosed);
-    glEventHub.on(ConsoleEvent.SESSION_OPENED, this.handleSessionOpened);
     glEventHub.on(TabEvent.focus, this.handleTabFocus);
     glEventHub.on(TabEvent.blur, this.handleTabBlur);
-    glEventHub.on(
-      InputFilterEvent.CLEAR_ALL_FILTERS,
-      this.handleClearAllFilters
-    );
 
     glEventHub.emit(PanelEvent.MOUNT, componentPanel ?? this);
 
@@ -150,14 +132,8 @@ class Panel extends PureComponent<CorePanelProps, PanelState> {
     glContainer.off('hide', this.handleHide);
     glContainer.off('tab', this.handleTab);
     glContainer.off('tabClicked', this.handleTabClicked);
-    glEventHub.off(ConsoleEvent.SESSION_CLOSED, this.handleSessionClosed);
-    glEventHub.off(ConsoleEvent.SESSION_OPENED, this.handleSessionOpened);
     glEventHub.off(TabEvent.focus, this.handleTabFocus);
     glEventHub.off(TabEvent.blur, this.handleTabBlur);
-    glEventHub.off(
-      InputFilterEvent.CLEAR_ALL_FILTERS,
-      this.handleClearAllFilters
-    );
 
     glEventHub.emit(PanelEvent.UNMOUNT, componentPanel ?? this);
   }
@@ -183,11 +159,6 @@ class Panel extends PureComponent<CorePanelProps, PanelState> {
     onTabClicked?.(e);
   }
 
-  handleClearAllFilters(...args: unknown[]): void {
-    const { onClearAllFilters } = this.props;
-    onClearAllFilters?.(...args);
-  }
-
   handleFocus(event: FocusEvent<HTMLDivElement>): void {
     const { componentPanel, glEventHub } = this.props;
     glEventHub.emit(PanelEvent.FOCUS, componentPanel ?? this);
@@ -211,19 +182,6 @@ class Panel extends PureComponent<CorePanelProps, PanelState> {
     onResize?.(...args);
   }
 
-  handleSessionClosed(session: dh.IdeSession): void {
-    const { onSessionClose } = this.props;
-    onSessionClose?.(session);
-  }
-
-  handleSessionOpened(
-    session: dh.IdeSession,
-    params: { language: string; sessionId: string }
-  ): void {
-    const { onSessionOpen } = this.props;
-    onSessionOpen?.(session, params);
-  }
-
   handleBeforeShow(...args: unknown[]): void {
     const { onBeforeShow } = this.props;
     onBeforeShow?.(...args);

packages/dashboard-core-plugins/src/panels/PanelContextMenu.tsx → packages/dashboard/src/PanelContextMenu.tsx

@@ -11,11 +11,9 @@ import {
   setWorkspace as setWorkspaceAction,
 } from '@deephaven/redux';
 import { connect } from 'react-redux';
-import {
-  type ClosedPanel,
-  LayoutUtils,
-  PanelEvent,
-} from '@deephaven/dashboard';
+import { type ClosedPanel } from './PanelManager';
+import { LayoutUtils } from './layout';
+import { PanelEvent } from './PanelEvent';
 
 interface PanelContextMenuProps {
   additionalActions: ResolvableContextAction[];