feat: Expandable rows shows tooltip (#1068)

emilyhuxng · web-flow · commit f2efc0ad2497 · 2023-02-03T14:59:02.000-05:00
Closes #1061 Upon hovering an expandable row, display a tooltip with instructions on how to expand or expand all children. The tooltip closes on any action but shows again if you move on the expandable row.
diff --git a/packages/iris-grid/src/IrisGrid.tsx b/packages/iris-grid/src/IrisGrid.tsx
@@ -24,6 +24,7 @@ import {
   PopperOptions,
   ReferenceObject,
   Button,
+  ContextActionUtils,
 } from '@deephaven/components';
 import {
   Grid,
@@ -119,6 +120,7 @@ import {
   IrisGridContextMenuHandler,
   IrisGridDataSelectMouseHandler,
   IrisGridFilterMouseHandler,
+  IrisGridRowTreeMouseHandler,
   IrisGridSortMouseHandler,
   PendingMouseHandler,
 } from './mousehandlers';
@@ -409,6 +411,8 @@ export interface IrisGridState {
   showOverflowModal: boolean;
   overflowText: string;
   overflowButtonTooltipProps: CSSProperties | null;
+  expandCellTooltipProps: CSSProperties | null;
+  expandTooltipDisplayValue: string;
 
   gotoRow: string;
   gotoRowError: string;
@@ -716,6 +720,7 @@ export class IrisGrid extends Component<IrisGridProps, IrisGridState> {
     }
     const mouseHandlers = [
       new IrisGridCellOverflowMouseHandler(this),
+      new IrisGridRowTreeMouseHandler(this),
       new IrisGridColumnSelectMouseHandler(this),
       new IrisGridColumnTooltipMouseHandler(this),
       new IrisGridSortMouseHandler(this),
@@ -832,6 +837,8 @@ export class IrisGrid extends Component<IrisGridProps, IrisGridState> {
       showOverflowModal: false,
       overflowText: '',
       overflowButtonTooltipProps: null,
+      expandCellTooltipProps: null,
+      expandTooltipDisplayValue: 'expand',
       isGotoShown: false,
       gotoRow: '',
       gotoRowError: '',
@@ -3552,6 +3559,43 @@ export class IrisGrid extends Component<IrisGridProps, IrisGridState> {
     }
   );
 
+  getExpandCellTooltip = memoize(
+    (expandCellTooltipProps: CSSProperties): ReactNode => {
+      if (expandCellTooltipProps == null) {
+        return null;
+      }
+
+      const { expandTooltipDisplayValue } = this.state;
+
+      const wrapperStyle: CSSProperties = {
+        position: 'absolute',
+        ...expandCellTooltipProps,
+        pointerEvents: 'none',
+      };
+
+      const popperOptions: PopperOptions = {
+        placement: 'bottom-start',
+      };
+
+      return (
+        <div style={wrapperStyle}>
+          <Tooltip
+            key={Date.now()}
+            options={popperOptions}
+            ref={this.handleTooltipRef}
+          >
+            <div style={{ textAlign: 'left' }}>
+              Click to {expandTooltipDisplayValue} row
+              <br />
+              {ContextActionUtils.isMacPlatform() ? '⌘' : 'Ctrl+'}Click to
+              expand row and all children
+            </div>
+          </Tooltip>
+        </div>
+      );
+    }
+  );
+
   handleGotoRowSelectedRowNumberSubmit(): void {
     const { gotoRow: rowNumber } = this.state;
     this.focusRowInGrid(rowNumber);
@@ -3793,6 +3837,7 @@ export class IrisGrid extends Component<IrisGridProps, IrisGridState> {
       showOverflowModal,
       overflowText,
       overflowButtonTooltipProps,
+      expandCellTooltipProps,
       isGotoShown,
       gotoRow,
       gotoRowError,
@@ -4403,6 +4448,8 @@ export class IrisGrid extends Component<IrisGridProps, IrisGridState> {
             {advancedFilterMenus}
             {overflowButtonTooltipProps &&
               this.getOverflowButtonTooltip(overflowButtonTooltipProps)}
+            {expandCellTooltipProps &&
+              this.getExpandCellTooltip(expandCellTooltipProps)}
           </div>
           <GotoRow
             model={model}
diff --git a/packages/iris-grid/src/IrisGridRenderer.ts b/packages/iris-grid/src/IrisGridRenderer.ts
@@ -42,6 +42,7 @@ const ICON_NAMES = Object.freeze({
   CELL_OVERFLOW: 'cellOverflow',
 });
 
+const EXPAND_ICON_SIZE = 10;
 const ICON_SIZE = 16;
 
 export type IrisGridRenderState = GridRenderState & {
@@ -1076,6 +1077,53 @@ class IrisGridRenderer extends GridRenderer {
 
     context.restore();
   }
+
+  getExpandButtonPosition(
+    {
+      mouseX,
+      mouseY,
+      metrics,
+      theme,
+    }: {
+      mouseX: Coordinate | null;
+      mouseY: Coordinate | null;
+      metrics: GridMetrics | undefined;
+      theme: GridThemeType;
+    },
+    depth: number | null
+  ): {
+    left: Coordinate | null;
+    top: Coordinate | null;
+    width: number | null;
+    height: number | null;
+  } {
+    const NULL_POSITION = { left: null, top: null, width: null, height: null };
+    if (mouseX == null || mouseY == null || depth == null || !metrics) {
+      return NULL_POSITION;
+    }
+    const { rowHeight, left, top } = GridUtils.getCellInfoFromXY(
+      mouseX,
+      mouseY,
+      metrics
+    );
+
+    assertNotNull(left);
+    assertNotNull(rowHeight);
+    assertNotNull(top);
+    const { cellHorizontalPadding } = theme;
+
+    const width = EXPAND_ICON_SIZE + 2 * cellHorizontalPadding;
+
+    const buttonLeft = Math.max(left + EXPAND_ICON_SIZE * depth, metrics.gridX);
+    const buttonTop = metrics.gridY + top;
+
+    return {
+      left: buttonLeft,
+      top: buttonTop,
+      width,
+      height: rowHeight,
+    };
+  }
 }
 
 export default IrisGridRenderer;
diff --git a/packages/iris-grid/src/mousehandlers/IrisGridRowTreeMouseHandler.ts b/packages/iris-grid/src/mousehandlers/IrisGridRowTreeMouseHandler.ts
@@ -0,0 +1,123 @@
+import {
+  EventHandlerResult,
+  Grid,
+  GridMouseHandler,
+  GridPoint,
+  GridRowTreeMouseHandler,
+  isExpandableGridModel,
+} from '@deephaven/grid';
+import { assertNotNull } from '@deephaven/utils';
+import deepEqual from 'deep-equal';
+import type IrisGrid from '../IrisGrid';
+
+class IrisGridRowTreeMouseHandler extends GridMouseHandler {
+  private irisGrid: IrisGrid;
+
+  constructor(irisGrid: IrisGrid) {
+    super(750); // Needs to be before GridRowTreeMouseHandler
+
+    this.irisGrid = irisGrid;
+  }
+
+  private destroyTooltip(): void {
+    this.irisGrid.setState({ expandCellTooltipProps: null });
+  }
+
+  private setCursor(gridPoint: GridPoint, grid: Grid): EventHandlerResult {
+    if (GridRowTreeMouseHandler.isInTreeBox(gridPoint, grid)) {
+      this.cursor = 'pointer';
+      return { stopPropagation: false, preventDefault: false };
+    }
+
+    this.cursor = null;
+    return false;
+  }
+
+  private getButtonPosition({
+    x,
+    y,
+    column,
+    row,
+  }: GridPoint): {
+    left: number;
+    top: number;
+    width: number;
+    height: number;
+  } | null {
+    if (column == null || row == null) {
+      return null;
+    }
+    const { renderer, grid, state, props } = this.irisGrid;
+    if (!grid) {
+      return null;
+    }
+    const { metrics } = state;
+    const { model } = props;
+
+    const { canvasContext: context } = grid;
+    const theme = grid.getTheme();
+    const rendererState = {
+      context,
+      mouseX: x,
+      mouseY: y,
+      metrics,
+      model,
+      theme,
+    };
+
+    const depth = isExpandableGridModel(model) ? model.depthForRow(row) : null;
+
+    const { left, top, width, height } = renderer.getExpandButtonPosition(
+      rendererState,
+      depth
+    );
+    if (left == null || width == null || top == null || height == null) {
+      return null;
+    }
+
+    return { left, top, width, height };
+  }
+
+  onMove(gridPoint: GridPoint, grid: Grid): EventHandlerResult {
+    if (GridRowTreeMouseHandler.isInTreeBox(gridPoint, grid)) {
+      const { expandCellTooltipProps } = this.irisGrid.state;
+      const { model } = this.irisGrid.props;
+      const newProps = this.getButtonPosition(gridPoint);
+      const { row } = gridPoint;
+      assertNotNull(row);
+      const isRowExpanded =
+        isExpandableGridModel(model) && model.isRowExpanded(row);
+      if (!deepEqual(expandCellTooltipProps, newProps)) {
+        this.irisGrid.setState({
+          expandCellTooltipProps: newProps,
+          expandTooltipDisplayValue: isRowExpanded ? 'collapse' : 'expand',
+        });
+      }
+    } else {
+      this.destroyTooltip();
+    }
+    return this.setCursor(gridPoint, grid);
+  }
+
+  onDown(): EventHandlerResult {
+    this.destroyTooltip();
+    return false;
+  }
+
+  onContextMenu(): EventHandlerResult {
+    this.destroyTooltip();
+    return false;
+  }
+
+  onWheel(): EventHandlerResult {
+    this.destroyTooltip();
+    return false;
+  }
+
+  onLeave(): EventHandlerResult {
+    this.destroyTooltip();
+    return false;
+  }
+}
+
+export default IrisGridRowTreeMouseHandler;
diff --git a/packages/iris-grid/src/mousehandlers/index.ts b/packages/iris-grid/src/mousehandlers/index.ts
@@ -4,5 +4,6 @@ export { default as IrisGridColumnTooltipMouseHandler } from './IrisGridColumnTo
 export { default as IrisGridContextMenuHandler } from './IrisGridContextMenuHandler';
 export { default as IrisGridDataSelectMouseHandler } from './IrisGridDataSelectMouseHandler';
 export { default as IrisGridFilterMouseHandler } from './IrisGridFilterMouseHandler';
+export { default as IrisGridRowTreeMouseHandler } from './IrisGridRowTreeMouseHandler';
 export { default as IrisGridSortMouseHandler } from './IrisGridSortMouseHandler';
 export { default as PendingMouseHandler } from './PendingMouseHandler';
