Skip to content

Commit

Permalink
fix: Use picker for iris grid partition selector (#2012)
Browse files Browse the repository at this point in the history
Resolves #1970

**Changes Implemented:**
- Replace TableDropdown with Picker for the Partition Selector for Iris
Grid
- Change corresponding test, since role is no longer "combobox"

**Testing Information:**

Code used:
```
from deephaven import empty_table
t = empty_table(15000).update(["x = i", "y = i"]).partition_by(["x"]) 
```

Sample visual of new Picker:

![image](https://github.com/deephaven/web-client-ui/assets/69530774/1b08571f-9c25-4488-83b4-042ae3de09ca)
  • Loading branch information
AkshatJawne committed May 16, 2024
1 parent 6cf1240 commit b61c518
Show file tree
Hide file tree
Showing 2 changed files with 29 additions and 20 deletions.
6 changes: 4 additions & 2 deletions packages/iris-grid/src/IrisGridPartitionSelector.test.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -46,8 +46,10 @@ it('should display multiple selectors to match columns', () => {
irisGridTestUtils.makeColumn('a'),
irisGridTestUtils.makeColumn('b'),
];
const component = makeIrisGridPartitionSelector(makeModel(columns));
const { container } = makeIrisGridPartitionSelector(makeModel(columns));

const selectors = component.getAllByRole('combobox');
const selectors = Array.from(
container.getElementsByClassName('column-selector')
);
expect(selectors).toHaveLength(2);
});
43 changes: 25 additions & 18 deletions packages/iris-grid/src/IrisGridPartitionSelector.tsx
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
import React, { Component } from 'react';
import memoizee from 'memoizee';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { Button } from '@deephaven/components';
import { Button, ItemKey } from '@deephaven/components';
import { vsChevronRight, vsMerge, vsKey } from '@deephaven/icons';
import Log from '@deephaven/log';
import { TableDropdown } from '@deephaven/jsapi-components';
import { Picker } from '@deephaven/jsapi-components';
import type { dh } from '@deephaven/jsapi-types';
import { TableUtils } from '@deephaven/jsapi-utils';
import { assertNotNull, Pending, PromiseUtils } from '@deephaven/utils';
Expand Down Expand Up @@ -294,23 +294,32 @@ class IrisGridPartitionSelector extends Component<
const { model, partitionConfig } = this.props;
const { isLoading, partitionFilters, partitionTables } = this.state;

const { mode, partitions } = partitionConfig;
const { partitions } = partitionConfig;

if (partitionFilters !== null && partitionTables !== null) {
partitionFilters.forEach((filter, index) => {
partitionTables[index].applyFilter(filter as dh.FilterCondition[]);
});
}
const partitionSelectors = model.partitionColumns.map((column, index) => (
<div key={`selector-${column.name}`} className="column-selector">
<div className="column-name">{column.name}</div>
<TableDropdown
className="custom-select-sm"
table={partitionTables?.[index]}
column={partitionTables?.[index]?.columns[index]}
filter={partitionFilters?.[index]}
onChange={this.getCachedChangeCallback(index)}
selectedValue={mode === 'partition' ? partitions[index] : undefined}
disabled={
(index > 0 && partitionConfig.mode !== 'partition') || isLoading
}
formatValue={this.getCachedFormatValueCallback(index)}
/>
{partitionTables?.[index] && (
<Picker
label={column.name}
labelPosition="side"
table={partitionTables[index]}
direction="bottom"
shouldFlip={false}
keyColumn={partitionTables[index].columns[index].name}
placeholder={'Loading...' as string}
labelColumn={partitionTables[index].columns[index].name}
onChange={this.getCachedChangeCallback(index)}
defaultSelectedKey={partitions[index] as ItemKey}
isDisabled={
(index > 0 && partitionConfig.mode !== 'partition') || isLoading
}
/>
)}
{model.partitionColumns.length - 1 === index || (
<FontAwesomeIcon icon={vsChevronRight} />
)}
Expand All @@ -321,7 +330,6 @@ class IrisGridPartitionSelector extends Component<
<div className="table-name">Partitioned Table</div>
<div className="partition-button-group">
<Button
className="btn-sm"
onClick={this.handleKeyTableClick}
kind="inline"
tooltip="View keys as table"
Expand All @@ -332,7 +340,6 @@ class IrisGridPartitionSelector extends Component<
Keys
</Button>
<Button
className="btn-sm"
onClick={this.handleMergeClick}
kind="inline"
tooltip="View all partitions as one merged table"
Expand Down

0 comments on commit b61c518

Please sign in to comment.