Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: Add support to pass in mouseHandlers into IrisGrid #1857

Merged
merged 2 commits into from
Mar 8, 2024
Merged
Show file tree
Hide file tree
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 18 additions & 0 deletions packages/grid/src/mouse-handlers/GridSelectionMouseHandler.ts
Original file line number Diff line number Diff line change
Expand Up @@ -214,6 +214,24 @@ class GridSelectionMouseHandler extends GridMouseHandler {
return false;
}

// eslint-disable-next-line class-methods-use-this
onDoubleClick(
gridPoint: GridPoint,
grid: Grid,
event: GridMouseEvent
): EventHandlerResult {
const { column, row } = gridPoint;
if (row == null || column == null) {
return false;
}

grid.clearSelectedRanges();
grid.moveCursorToPosition(column, row);
grid.commitSelection();

return true;
}

onContextMenu(
gridPoint: GridPoint,
grid: Grid,
Expand Down
61 changes: 49 additions & 12 deletions packages/iris-grid/src/IrisGrid.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -282,7 +282,7 @@ export interface IrisGridProps {
onCreateChart: (settings: ChartBuilderSettings, model: IrisGridModel) => void;
onColumnSelected: (column: DhType.Column) => void;
onError: (error: unknown) => void;
onDataSelected: (index: ModelIndex, map: Record<ColumnName, unknown>) => void;
onDataSelected: (index: ModelIndex, map: RowDataMap) => void;
onStateChange: (irisGridState: IrisGridState, gridState: GridState) => void;
onAdvancedSettingsChange: AdvancedSettingsMenuCallback;

Expand Down Expand Up @@ -341,6 +341,10 @@ export interface IrisGridProps {
canToggleSearch: boolean;

columnHeaderGroups?: readonly ColumnHeaderGroup[];

// Optional key and mouse handlers
keyHandlers: readonly KeyHandler[];
mouseHandlers: readonly GridMouseHandler[];
}

export interface IrisGridState {
Expand All @@ -349,8 +353,6 @@ export interface IrisGridState {
focusedFilterBarColumn: number | null;
metricCalculator: IrisGridMetricCalculator;
metrics?: GridMetrics;
keyHandlers: readonly KeyHandler[];
mouseHandlers: readonly GridMouseHandler[];

partitionConfig?: PartitionConfig;

Expand Down Expand Up @@ -519,6 +521,8 @@ class IrisGrid extends Component<IrisGridProps, IrisGridState> {
frozenColumns: null,
theme: null,
canToggleSearch: true,
mouseHandlers: EMPTY_ARRAY,
keyHandlers: EMPTY_ARRAY,
};

constructor(props: IrisGridProps) {
Expand Down Expand Up @@ -754,14 +758,15 @@ class IrisGrid extends Component<IrisGridProps, IrisGridState> {

this.tableUtils = new TableUtils(dh);

this.mouseHandlers = mouseHandlers;
this.keyHandlers = keyHandlers;

this.state = {
isFilterBarShown,
isSelectingPartition,
focusedFilterBarColumn: null,
metricCalculator,
metrics: undefined,
keyHandlers,
mouseHandlers,

partitionConfig:
partitionConfig ??
Expand Down Expand Up @@ -1032,6 +1037,10 @@ class IrisGrid extends Component<IrisGridProps, IrisGridState> {

tableUtils: TableUtils;

keyHandlers: readonly KeyHandler[];

mouseHandlers: readonly GridMouseHandler[];

get gridWrapper(): HTMLDivElement | null {
return this.grid?.canvasWrapper.current ?? null;
}
Expand Down Expand Up @@ -1394,6 +1403,26 @@ class IrisGrid extends Component<IrisGridProps, IrisGridState> {
{ max: 1 }
);

getCachedKeyHandlers = memoize((keyHandlers: readonly KeyHandler[]) =>
[...keyHandlers, ...this.keyHandlers].sort((a, b) => a.order - b.order)
);

getKeyHandlers(): readonly KeyHandler[] {
const { keyHandlers } = this.props;
return this.getCachedKeyHandlers(keyHandlers);
}

getCachedMouseHandlers = memoize(
(
mouseHandlers: readonly GridMouseHandler[]
): readonly GridMouseHandler[] => [...mouseHandlers, ...this.mouseHandlers]
Copy link
Contributor

@bmingles bmingles Mar 7, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It looks like this.mouseHandlers gets set by initial props and then any updates to the props get combined with the initial. Am I understanding this correctly, and if so, is that what we want, or should the initial props be dropped if props change? Same question for getCachedKeyHandlers

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this.mouseHandlers and this.keyHandlers are not getting by initial props, that's a local value that is initialized in the constructor.
Then the getCachedMouseHandlers combines the default/code IrisGrid mouseHandlers with the custom provided mouseHandlers provided from the props.
We use a similar pattern in Grid.tsx as well.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ah, misread. Looks good then

);

getMouseHandlers(): readonly GridMouseHandler[] {
const { mouseHandlers } = this.props;
return this.getCachedMouseHandlers(mouseHandlers);
}

getValueForCell(
columnIndex: GridRangeIndex,
rowIndex: GridRangeIndex,
Expand Down Expand Up @@ -2723,9 +2752,20 @@ class IrisGrid extends Component<IrisGridProps, IrisGridState> {
}

/**
* Select all the data for a given row and notify listener
* Get the row data map for a given row and notifies the listener
*/
selectData(columnIndex: ModelIndex, rowIndex: ModelIndex): void {
const dataMap = this.getRowDataMap(rowIndex);
const { onDataSelected } = this.props;
onDataSelected(rowIndex, dataMap);
}

/**
* Get the data map for the given row
* @param rowIndex Row to get the data map for
* @returns Data map for the row
*/
getRowDataMap(rowIndex: ModelIndex): RowDataMap {
const { model } = this.props;
const { columns, groupedColumns } = model;
const dataMap: RowDataMap = {};
Expand All @@ -2747,8 +2787,7 @@ class IrisGrid extends Component<IrisGridProps, IrisGridState> {
visibleIndex,
};
}
const { onDataSelected } = this.props;
onDataSelected(rowIndex, dataMap);
return dataMap;
}

handleAdvancedFilterChange(
Expand Down Expand Up @@ -4042,8 +4081,6 @@ class IrisGrid extends Component<IrisGridProps, IrisGridState> {
loadingText,
loadingScrimProgress,
loadingSpinnerShown,
keyHandlers,
mouseHandlers,
shownColumnTooltip,
hoverAdvancedFilter,
shownAdvancedFilter,
Expand Down Expand Up @@ -4615,8 +4652,8 @@ class IrisGrid extends Component<IrisGridProps, IrisGridState> {
isStuckToRight={isStuckToRight}
metricCalculator={metricCalculator}
model={model}
keyHandlers={keyHandlers}
mouseHandlers={mouseHandlers}
keyHandlers={this.getKeyHandlers()}
mouseHandlers={this.getMouseHandlers()}
movedColumns={movedColumns}
movedRows={movedRows}
onError={this.handleGridError}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ import type IrisGrid from '../IrisGrid';
*/
class IrisGridDataSelectMouseHandler extends GridMouseHandler {
constructor(irisGrid: IrisGrid) {
super();
super(825);
bmingles marked this conversation as resolved.
Show resolved Hide resolved

this.irisGrid = irisGrid;
}
Expand All @@ -27,9 +27,7 @@ class IrisGridDataSelectMouseHandler extends GridMouseHandler {

this.irisGrid.selectData(column, row);

grid.moveCursorToPosition(column, row);

return true;
return false;
}
}

Expand Down
Loading