Skip to content

Commit 197f72d

Browse files
vbabichvbabich
committed
Expose more IrisGridState properties
1 parent 66f5a7d commit 197f72d

6 files changed

Lines changed: 437 additions & 84 deletions

File tree

‎packages/dashboard-core-plugins/src/GridMiddlewarePlugin.tsx‎

Lines changed: 83 additions & 79 deletions
Original file line numberDiff line numberDiff line change
@@ -62,7 +62,17 @@ const MIDDLEWARE_OPTION_TYPE = 'middleware-custom-option';
6262
function MiddlewareConfigPanel(_props: TableOptionPanelProps): JSX.Element {
6363
// Access the Table Options context for state and dispatch
6464
const { gridState, dispatch, closePanel } = useTableOptionsHost();
65-
const { model, selectDistinctColumns, customColumns } = gridState;
65+
const {
66+
model,
67+
selectDistinctColumns,
68+
customColumns,
69+
quickFilters,
70+
advancedFilters,
71+
searchValue,
72+
selectedSearchColumns,
73+
sorts,
74+
reverse,
75+
} = gridState;
6676

6777
const handleButtonClick = useCallback(() => {
6878
log.info('MiddlewareConfigPanel button clicked!');
@@ -72,73 +82,76 @@ function MiddlewareConfigPanel(_props: TableOptionPanelProps): JSX.Element {
7282
console.log('Current selectDistinctColumns:', selectDistinctColumns);
7383
// eslint-disable-next-line no-console
7484
console.log('Current customColumns:', customColumns);
75-
}, [selectDistinctColumns, customColumns]);
85+
// eslint-disable-next-line no-console
86+
console.log('Current quickFilters:', quickFilters);
87+
// eslint-disable-next-line no-console
88+
console.log('Current advancedFilters:', advancedFilters);
89+
// eslint-disable-next-line no-console
90+
console.log('Current searchValue:', searchValue, 'columns:', selectedSearchColumns);
91+
// eslint-disable-next-line no-console
92+
console.log('Current sorts:', sorts, 'reverse:', reverse);
93+
}, [
94+
selectDistinctColumns,
95+
customColumns,
96+
quickFilters,
97+
advancedFilters,
98+
searchValue,
99+
selectedSearchColumns,
100+
sorts,
101+
reverse,
102+
]);
76103

77104
const handleClearSelectDistinct = useCallback(() => {
78105
log.info('Clearing selectDistinctColumns');
79106
dispatch({ type: 'SET_SELECT_DISTINCT_COLUMNS', columns: [] });
80107
closePanel();
81108
}, [dispatch, closePanel]);
82109

83-
return (
84-
<div
85-
style={{
86-
width: '100%',
87-
height: '100%',
88-
padding: 0,
89-
overflow: 'auto',
90-
display: 'flex',
91-
justifyContent: 'space-between',
92-
flexFlow: 'column',
93-
}}
94-
>
95-
<div
96-
style={{
97-
padding: '1rem',
98-
fontWeight: 500,
99-
textAlign: 'left',
100-
}}
101-
>
102-
Middleware Custom Option
103-
</div>
110+
const handleClearFilters = useCallback(() => {
111+
log.info('Clearing all filters');
112+
dispatch({ type: 'CLEAR_ALL_FILTERS' });
113+
closePanel();
114+
}, [dispatch, closePanel]);
104115

105-
<div
106-
style={{
107-
padding: '1rem',
108-
display: 'flex',
109-
flexDirection: 'column',
110-
gap: '0.5rem',
111-
}}
112-
>
113-
<div
114-
style={{ color: 'var(--dh-color-text-muted)', fontSize: 'smaller' }}
115-
>
116-
Columns: {model.columns?.length ?? 0}
117-
</div>
118-
<div
119-
style={{ color: 'var(--dh-color-text-muted)', fontSize: 'smaller' }}
120-
>
121-
Select Distinct:{' '}
122-
{selectDistinctColumns.length > 0
123-
? selectDistinctColumns.join(', ')
124-
: 'None'}
125-
</div>
126-
<div
127-
style={{ color: 'var(--dh-color-text-muted)', fontSize: 'smaller' }}
128-
>
129-
Custom Columns:{' '}
130-
{customColumns.length > 0 ? customColumns.join(', ') : 'None'}
131-
</div>
132-
</div>
116+
const hasFilters =
117+
quickFilters.size > 0 ||
118+
advancedFilters.size > 0 ||
119+
searchValue !== '' ||
120+
sorts.length > 0;
121+
122+
return (
123+
<div className="container mt-3">
124+
<p className="text-muted small">Columns: {model.columns?.length ?? 0}</p>
125+
<p className="text-muted small">
126+
Select Distinct:{' '}
127+
{selectDistinctColumns.length > 0
128+
? selectDistinctColumns.join(', ')
129+
: 'None'}
130+
</p>
131+
<p className="text-muted small">
132+
Custom Columns:{' '}
133+
{customColumns.length > 0 ? customColumns.join(', ') : 'None'}
134+
</p>
135+
<p className="text-muted small">
136+
Quick Filters: {quickFilters.size > 0 ? quickFilters.size : 'None'}
137+
</p>
138+
<p className="text-muted small">
139+
Advanced Filters:{' '}
140+
{advancedFilters.size > 0 ? advancedFilters.size : 'None'}
141+
</p>
142+
<p className="text-muted small">
143+
Cross-Column Search:{' '}
144+
{searchValue || 'None'}
145+
{selectedSearchColumns.length > 0
146+
? ` (in ${selectedSearchColumns.join(', ')})`
147+
: ''}
148+
</p>
149+
<p className="text-muted small">
150+
Sorts: {sorts.length > 0 ? sorts.length : 'None'}
151+
{reverse ? ' (reversed)' : ''}
152+
</p>
133153

134-
<div
135-
style={{
136-
padding: '1rem',
137-
display: 'flex',
138-
flexDirection: 'column',
139-
gap: '0.5rem',
140-
}}
141-
>
154+
<div className="d-flex flex-column gap-2 mt-3">
142155
<Button kind="primary" onClick={handleButtonClick}>
143156
Log State to Console
144157
</Button>
@@ -147,27 +160,17 @@ function MiddlewareConfigPanel(_props: TableOptionPanelProps): JSX.Element {
147160
Clear Select Distinct
148161
</Button>
149162
)}
163+
{hasFilters && (
164+
<Button kind="secondary" onClick={handleClearFilters}>
165+
Clear All Filters &amp; Sorts
166+
</Button>
167+
)}
150168
</div>
151169

152-
<div
153-
style={{
154-
margin: '1rem',
155-
marginBottom: 'auto',
156-
display: 'flex',
157-
flexDirection: 'column',
158-
paddingBottom: '1rem',
159-
}}
160-
>
161-
<div
162-
style={{
163-
color: 'var(--dh-color-text-muted)',
164-
fontSize: 'smaller',
165-
}}
166-
>
167-
This panel demonstrates using the useTableOptionsHost hook to access
168-
and modify grid state from a plugin.
169-
</div>
170-
</div>
170+
<p className="text-muted small mt-3">
171+
This panel demonstrates using the useTableOptionsHost hook to access and
172+
modify grid state from a plugin.
173+
</p>
171174
</div>
172175
);
173176
}
@@ -216,7 +219,8 @@ function GridPanelMiddleware({
216219
// Simply pass through - registry handles the option
217220
return (
218221
<Component
219-
/* eslint-disable-next-line react/jsx-props-no-spreading */ {...props}
222+
/* eslint-disable-next-line react/jsx-props-no-spreading */
223+
{...props}
220224
/>
221225
);
222226
}

‎packages/iris-grid/src/IrisGrid.tsx‎

Lines changed: 94 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -633,6 +633,11 @@ class IrisGrid extends Component<IrisGridProps, IrisGridState> {
633633
this.setFilterMap = this.setFilterMap.bind(this);
634634
this.handleFrozenColumnsChanged =
635635
this.handleFrozenColumnsChanged.bind(this);
636+
this.handleSetQuickFilters = this.handleSetQuickFilters.bind(this);
637+
this.handleSetAdvancedFilters = this.handleSetAdvancedFilters.bind(this);
638+
this.handleSetSorts = this.handleSetSorts.bind(this);
639+
this.handleSetReverse = this.handleSetReverse.bind(this);
640+
this.clearAllFilters = this.clearAllFilters.bind(this);
636641

637642
this.grid = null;
638643
this.lastLoadedConfig = null;
@@ -1138,7 +1143,15 @@ class IrisGrid extends Component<IrisGridProps, IrisGridState> {
11381143
isTableDownloading: boolean,
11391144
tableDownloadStatus: string,
11401145
tableDownloadProgress: number,
1141-
tableDownloadEstimatedTime: number | null
1146+
tableDownloadEstimatedTime: number | null,
1147+
quickFilters: ReadonlyQuickFilterMap,
1148+
advancedFilters: ReadonlyAdvancedFilterMap,
1149+
searchFilter: DhType.FilterCondition | undefined,
1150+
searchValue: string,
1151+
selectedSearchColumns: readonly ColumnName[],
1152+
invertSearchColumns: boolean,
1153+
sorts: readonly SortDescriptor[],
1154+
reverse: boolean
11421155
): GridStateSnapshot => ({
11431156
model,
11441157
customColumns,
@@ -1158,6 +1171,14 @@ class IrisGrid extends Component<IrisGridProps, IrisGridState> {
11581171
tableDownloadStatus,
11591172
tableDownloadProgress,
11601173
tableDownloadEstimatedTime,
1174+
quickFilters,
1175+
advancedFilters,
1176+
searchFilter,
1177+
searchValue,
1178+
selectedSearchColumns,
1179+
invertSearchColumns,
1180+
sorts,
1181+
reverse,
11611182
}),
11621183
{ max: 1 }
11631184
);
@@ -1219,6 +1240,28 @@ class IrisGrid extends Component<IrisGridProps, IrisGridState> {
12191240
case 'CANCEL_DOWNLOAD':
12201241
this.handleCancelDownloadTable();
12211242
break;
1243+
case 'SET_QUICK_FILTERS':
1244+
this.handleSetQuickFilters(action.filters);
1245+
break;
1246+
case 'SET_ADVANCED_FILTERS':
1247+
this.handleSetAdvancedFilters(action.filters);
1248+
break;
1249+
case 'SET_SORTS':
1250+
this.handleSetSorts(action.sorts);
1251+
break;
1252+
case 'SET_REVERSE':
1253+
this.handleSetReverse(action.reverse);
1254+
break;
1255+
case 'CLEAR_ALL_FILTERS':
1256+
this.clearAllFilters();
1257+
break;
1258+
case 'SET_CROSS_COLUMN_SEARCH':
1259+
this.handleCrossColumnSearch(
1260+
action.searchValue,
1261+
action.selectedSearchColumns,
1262+
action.invertSearchColumns
1263+
);
1264+
break;
12221265
default:
12231266
log.warn(
12241267
`Unknown TableOptions action type: ${(action as GridAction).type}`
@@ -1870,6 +1913,42 @@ class IrisGrid extends Component<IrisGridProps, IrisGridState> {
18701913
});
18711914
}
18721915

1916+
/**
1917+
* Handler for setting quick filters from table options.
1918+
*/
1919+
handleSetQuickFilters(filters: ReadonlyQuickFilterMap): void {
1920+
log.debug('Setting quick filters', filters);
1921+
this.startLoading('Applying Filters...');
1922+
this.setState({ quickFilters: filters });
1923+
}
1924+
1925+
/**
1926+
* Handler for setting advanced filters from table options.
1927+
*/
1928+
handleSetAdvancedFilters(filters: ReadonlyAdvancedFilterMap): void {
1929+
log.debug('Setting advanced filters', filters);
1930+
this.startLoading('Applying Filters...');
1931+
this.setState({ advancedFilters: filters });
1932+
}
1933+
1934+
/**
1935+
* Handler for setting sorts from table options.
1936+
*/
1937+
handleSetSorts(newSorts: readonly SortDescriptor[]): void {
1938+
log.debug('Setting sorts', newSorts);
1939+
this.startLoading('Sorting...');
1940+
this.setState({ sorts: newSorts });
1941+
}
1942+
1943+
/**
1944+
* Handler for setting reverse sort from table options.
1945+
*/
1946+
handleSetReverse(newReverse: boolean): void {
1947+
log.debug('Setting reverse', newReverse);
1948+
this.startLoading('Sorting...');
1949+
this.setState({ reverse: newReverse });
1950+
}
1951+
18731952
clearAllAggregations(): void {
18741953
log.debug('Clearing all aggregations');
18751954

@@ -5216,6 +5295,14 @@ class IrisGrid extends Component<IrisGridProps, IrisGridState> {
52165295
isChartBuilderAvailable={
52175296
onCreateChart !== undefined && model.isChartBuilderAvailable
52185297
}
5298+
quickFilters={quickFilters}
5299+
advancedFilters={advancedFilters}
5300+
searchFilter={searchFilter}
5301+
searchValue={searchValue}
5302+
selectedSearchColumns={selectedSearchColumns}
5303+
invertSearchColumns={invertSearchColumns}
5304+
sorts={sorts}
5305+
reverse={reverse}
52195306
onCreateChart={
52205307
onCreateChart
52215308
? settings => onCreateChart(settings, model)
@@ -5224,6 +5311,12 @@ class IrisGrid extends Component<IrisGridProps, IrisGridState> {
52245311
onChartChange={() => {
52255312
// TODO: IDS-4242 Update Chart Preview
52265313
}}
5314+
onSetQuickFilters={this.handleSetQuickFilters}
5315+
onSetAdvancedFilters={this.handleSetAdvancedFilters}
5316+
onSetSorts={this.handleSetSorts}
5317+
onSetReverse={this.handleSetReverse}
5318+
onClearAllFilters={this.clearAllFilters}
5319+
onSetCrossColumnSearch={this.handleCrossColumnSearch}
52275320
onClose={this.handleMenuClose}
52285321
/>
52295322
</div>

0 commit comments

Comments
 (0)
⚡