Merge pull request #220 from CybercentreCanada/emit-a-filter-for-a-de…

…fault-column-in-aggrid-context-menu

added option to emit a filter from a default column for a row in ag grid

superset-frontend/src/cccs-viz/plugins/plugin-chart-cccs-grid/src/CccsGrid.tsx

@@ -75,6 +75,7 @@ export default function CccsGrid({
  tooltipShowDelay,
  rowSelection,
  emitFilter,
+ principalColumns,
  include_search,
  page_length = 0,
  enable_grouping = false,
@@ -88,6 +89,7 @@ export default function CccsGrid({
  );
 
  const [filters, setFilters] = useState(initialFilters);
+ const [principalColumnFilters, setPrincipalColumnFilters] = useState({});
  const [searchValue, setSearchValue] = useState('');
  const [pageSize, setPageSize] = useState<number>(page_length);
 
@@ -125,7 +127,7 @@ export default function CccsGrid({
  },
  });
  },
- [emitFilter, setDataMask],
+ [emitFilter, setDataMask, filters, principalColumnFilters],
  ); // only take relevant page size options
 
  const getContextMenuItems = useCallback(
@@ -146,6 +148,18 @@ export default function CccsGrid({
  // eslint-disable-next-line theme-colors/no-literal-colors
  icon: '<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" class=""><path fill-rule="evenodd" clip-rule="evenodd" d="M18.1573 17.864C21.2763 14.745 21.2763 9.66935 18.1573 6.5503C15.0382 3.43125 9.96264 3.43125 6.84359 6.5503L5.42938 5.13609C9.32836 1.2371 15.6725 1.2371 19.5715 5.13609C23.4705 9.03507 23.4705 15.3792 19.5715 19.2782C15.6725 23.1772 9.32836 23.1772 5.42938 19.2782L6.84359 17.864C9.96264 20.9831 15.0375 20.9838 18.1573 17.864ZM2.00035 11.5C2.00035 11.2239 2.2242 11 2.50035 11H5.00035L5.00035 10C5.00035 9.58798 5.47073 9.35279 5.80035 9.60001L9.00035 12C9.17125 12.1032 6.98685 13.637 5.77613 14.4703C5.44613 14.6975 5.00035 14.4601 5.00035 14.0595V13L2.50035 13C2.22421 13 2.00035 12.7761 2.00035 12.5L2.00035 11.5ZM9.67202 9.37873C11.2319 7.81885 13.7697 7.81956 15.3289 9.37873C16.888 10.9379 16.8887 13.4757 15.3289 15.0356C13.769 16.5955 11.2312 16.5948 9.67202 15.0356L8.2578 16.4498C10.5976 18.7896 14.4033 18.7896 16.7431 16.4498C19.0829 14.11 19.0829 10.3043 16.7431 7.96451C14.4033 5.6247 10.5976 5.6247 8.2578 7.96451L9.67202 9.37873Z" fill="#20A7C9"></path></svg>',
  },
+ {
+ name: 'Emit Principal Column Filter(s)',
+ disabled:
+ ensureIsArray(principalColumns).length === 0 ||
+ Object.keys(principalColumnFilters).some(column =>
+ principalColumnFilters[column].some((val: any) => val === null),
+ ) ||
+ params.node === null,
+ action: () => handleChange(principalColumnFilters),
+ // eslint-disable-next-line theme-colors/no-literal-colors
+ icon: '<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" class=""><path fill-rule="evenodd" clip-rule="evenodd" d="M18.1573 17.864C21.2763 14.745 21.2763 9.66935 18.1573 6.5503C15.0382 3.43125 9.96264 3.43125 6.84359 6.5503L5.42938 5.13609C9.32836 1.2371 15.6725 1.2371 19.5715 5.13609C23.4705 9.03507 23.4705 15.3792 19.5715 19.2782C15.6725 23.1772 9.32836 23.1772 5.42938 19.2782L6.84359 17.864C9.96264 20.9831 15.0375 20.9838 18.1573 17.864ZM2.00035 11.5C2.00035 11.2239 2.2242 11 2.50035 11H5.00035L5.00035 10C5.00035 9.58798 5.47073 9.35279 5.80035 9.60001L9.00035 12C9.17125 12.1032 6.98685 13.637 5.77613 14.4703C5.44613 14.6975 5.00035 14.4601 5.00035 14.0595V13L2.50035 13C2.22421 13 2.00035 12.7761 2.00035 12.5L2.00035 11.5ZM9.67202 9.37873C11.2319 7.81885 13.7697 7.81956 15.3289 9.37873C16.888 10.9379 16.8887 13.4757 15.3289 15.0356C13.769 16.5955 11.2312 16.5948 9.67202 15.0356L8.2578 16.4498C10.5976 18.7896 14.4033 18.7896 16.7431 16.4498C19.0829 14.11 19.0829 10.3043 16.7431 7.96451C14.4033 5.6247 10.5976 5.6247 8.2578 7.96451L9.67202 9.37873Z" fill="#20A7C9"></path></svg>',
+ },
  {
  name: 'Clear Emitted Filter(s)',
  disabled: crossFilterValue === undefined,
@@ -159,12 +173,14 @@ export default function CccsGrid({
  return result;
  },
  [
- crossFilterValue,
- dispatch,
  emitFilter,
+ principalColumns,
+ crossFilterValue,
+ handleChange,
  filters,
+ principalColumnFilters,
+ dispatch,
  formData.slice_id,
- handleChange,
  ],
  );
 
@@ -177,6 +193,10 @@ export default function CccsGrid({
  customTooltip: CustomTooltip,
  };
 
+ function getEmitTarget(col: string) {
+ return formData.column_config?.[col]?.emitTarget || col;
+ }
+
  const onGridReady = (params: any) => {
  if (column_state) {
  params.columnApi.applyColumnState({
@@ -202,6 +222,8 @@ export default function CccsGrid({
  const cellRanges = gridApi.getCellRanges();
 
  const updatedFilters = {};
+ const updatedPrincipalColumnFilters = {};
+
  cellRanges.forEach((range: any) => {
  range.columns.forEach((column: any) => {
  const col = getEmitTarget(column.colDef?.field);
@@ -211,7 +233,7 @@ export default function CccsGrid({
  range.endRow.rowIndex,
  );
  const endRow = Math.max(range.startRow.rowIndex, range.endRow.rowIndex);
- for (let rowIndex = startRow; rowIndex <= endRow; rowIndex++) {
+ for (let rowIndex = startRow; rowIndex <= endRow; rowIndex += 1) {
  const value = gridApi.getValue(
  column,
  gridApi.getModel().getRow(rowIndex),
@@ -221,15 +243,31 @@ export default function CccsGrid({
  }
  }
  });
+ ensureIsArray(principalColumns).forEach((column: any) => {
+ const col = getEmitTarget(column);
+ updatedPrincipalColumnFilters[col] =
+ updatedPrincipalColumnFilters[col] || [];
+ const startRow = Math.min(
+ range.startRow.rowIndex,
+ range.endRow.rowIndex,
+ );
+ const endRow = Math.max(range.startRow.rowIndex, range.endRow.rowIndex);
+ for (let rowIndex = startRow; rowIndex <= endRow; rowIndex += 1) {
+ const defaultValue = gridApi.getValue(
+ column,
+ gridApi.getModel().getRow(rowIndex),
+ );
+ if (!updatedPrincipalColumnFilters[col].includes(defaultValue)) {
+ updatedPrincipalColumnFilters[col].push(defaultValue);
+ }
+ }
+ });
  });
 
  setFilters(updatedFilters);
+ setPrincipalColumnFilters(updatedPrincipalColumnFilters);
  };
 
- function getEmitTarget(col: string) {
- return formData.column_config?.[col]?.emitTarget || col;
- }
-
  function autoSizeFirst100Columns(params: any) {
  // Autosizes only the first 100 Columns in Ag-Grid
  const allColumnIds = params.columnApi

superset-frontend/src/cccs-viz/plugins/plugin-chart-cccs-grid/src/plugin/controlPanel.tsx

@@ -40,6 +40,7 @@ import {
  ControlPanelState,
  ControlState,
  formatSelectOptions,
+ ColumnMeta,
 } from '@superset-ui/chart-controls';
 import { StyledColumnOption } from 'src/explore/components/optionRenderers';
 
@@ -245,7 +246,11 @@ const config: ControlPanelConfig = {
  );
  return newState;
  },
- rerender: ['metrics', 'percent_metrics'],
+ rerender: [
+ 'metrics',
+ 'percent_metrics',
+ 'principalEmitFilterColumn',
+ ],
  canCopy: true,
  } as typeof sharedControls.groupby,
  },
@@ -339,6 +344,7 @@ const config: ControlPanelConfig = {
  : [];
  return newState;
  },
+ rerender: ['principalColumns'],
  visibility: isRawMode,
  canCopy: true,
  } as typeof sharedControls.groupby,
@@ -401,6 +407,74 @@ const config: ControlPanelConfig = {
  }
  : null,
  ],
+ [
+ isFeatureEnabled(FeatureFlag.DASHBOARD_CROSS_FILTERS)
+ ? {
+ name: 'principalColumns',
+ config: {
+ type: 'SelectControl',
+ label: t('Principal Column(s) to Emit'),
+ description: t(
+ 'Preselect a set of principal columns that can easily be emitted from the context menu',
+ ),
+ multi: true,
+ freeForm: true,
+ allowAll: true,
+ default: [],
+ canSelectAll: true,
+ optionRenderer: (c: ColumnMeta) => (
+ // eslint-disable-next-line react/react-in-jsx-scope
+ <StyledColumnOption showType column={c} />
+ ),
+ // eslint-disable-next-line react/react-in-jsx-scope
+ valueRenderer: (c: ColumnMeta) => (
+ // eslint-disable-next-line react/react-in-jsx-scope
+ <StyledColumnOption column={c} />
+ ),
+ valueKey: 'column_name',
+ mapStateToProps: (
+ state: ControlPanelState,
+ controlState: ControlState,
+ ) => {
+ const { controls } = state;
+ const originalMapStateToProps =
+ sharedControls?.columns?.mapStateToProps;
+ const newState =
+ originalMapStateToProps?.(state, controlState) ?? {};
+ const choices = isRawMode({ controls })
+ ? controls?.columns?.value
+ : controls?.groupby?.value;
+ newState.options = newState.options.filter(
+ (o: { column_name: string }) =>
+ ensureIsArray(choices).includes(o.column_name),
+ );
+ const invalidOptions = ensureIsArray(
+ controlState.value,
+ ).filter(c => !ensureIsArray(choices).includes(c));
+ newState.externalValidationErrors =
+ invalidOptions.length > 0
+ ? invalidOptions.length > 1
+ ? [
+ `'${invalidOptions.join(', ')}'${t(
+ ' are not valid options',
+ )}`,
+ ]
+ : [
+ `'${invalidOptions}'${t(
+ ' is not a valid option',
+ )}`,
+ ]
+ : [];
+ return newState;
+ },
+ visibility: ({ controls }) =>
+ // TODO properly emsure is Bool
+ Boolean(controls?.emitFilter?.value),
+ canCopy: true,
+ },
+ }
+ : null,
+ ],
  [
  {
  name: 'column_state',

superset-frontend/src/cccs-viz/plugins/plugin-chart-cccs-grid/src/plugin/transformProps.ts

@@ -76,6 +76,7 @@ export default function transformProps(chartProps: CccsGridChartProps) {
  headerFontSize,
  headerText,
  emitFilter,
+ principalColumns,
  page_length,
  query_mode,
  include_search,
@@ -328,6 +329,7 @@ export default function transformProps(chartProps: CccsGridChartProps) {
  headerFontSize,
  headerText,
  emitFilter,
+ principalColumns,
  include_search,
  page_length,
  enable_grouping,

superset-frontend/src/cccs-viz/plugins/plugin-chart-cccs-grid/src/types.ts

@@ -69,6 +69,7 @@ export interface CccsGridTransformedProps extends CccsGridStylesProps {
  setControlValue: HandlerFunction;
  selectedValues: Record<number, string>;
  emitFilter: boolean;
+ principalColumns: any;
  data: TimeseriesDataRecord[];
  columnDefs: any;
  rowData: any;