Issue 256, 257, 608 - Add conditional styling capabilities

CHANGELOG.md

@@ -2,6 +2,15 @@
 All notable changes to this project will be documented in this file.
 This project adheres to [Semantic Versioning](http://semver.org/).
 
+## [Unreleased]
+### Added
+- []() Improve conditional styling
+    - `style_data_conditional`: Add support for `row_index` and `column_id` array of values
+    - `style_header_conditional`: Add support for `header_index` and `column_id` array of values
+    - `style_filter_conditional`: Add support for `column_id` array of values
+    - `style_cell_conditional`: Add support for `column_id` array of values
+    - `style_data_conditional`: Add new conditions `is_active: bool` and `is_selected: bool` to customize selected and active cell styles
+
 ## [4.6.2] - 2020-04-01
 ### Changed
 - [#713](https://github.com/plotly/dash-table/pull/713) Update from React 16.8.6 to 16.13.0

src/dash-table/components/CellFactory.tsx

@@ -73,7 +73,11 @@ export default class CellFactory {
 
         const cellStyles = this.dataStyles(
             partialCellStyles,
+            visibleColumns,
+            relevantStyles,
+            virtualized.data,
             virtualized.offset,
+            active_cell,
             selected_cells
         );
 

src/dash-table/components/EdgeFactory.tsx

@@ -2,7 +2,7 @@ import * as R from 'ramda';
 
 import { memoizeOne } from 'core/memoizer';
 
-import derivedDataEdges from 'dash-table/derived/edges/data';
+import { derivedPartialDataEdges, derivedDataEdges } from 'dash-table/derived/edges/data';
 import derivedDataOpEdges from 'dash-table/derived/edges/operationOfData';
 import derivedFilterEdges from 'dash-table/derived/edges/filter';
 import derivedFilterOpEdges from 'dash-table/derived/edges/operationOfFilters';
@@ -15,7 +15,7 @@ import getHeaderRows from 'dash-table/derived/header/headerRows';
 import { derivedRelevantCellStyles, derivedRelevantFilterStyles, derivedRelevantHeaderStyles } from 'dash-table/derived/style';
 import { Style, Cells, DataCells, BasicFilters, Headers } from 'dash-table/derived/style/props';
 
-import { ControlledTableProps, Columns, IViewportOffset, Data, ICellCoordinates, TableAction } from './Table/props';
+import { ControlledTableProps, Columns, IViewportOffset, Data, ICellCoordinates, TableAction, SelectedCells } from './Table/props';
 import { SingleColumnSyntaxTree } from 'dash-table/syntax-tree';
 
 type EdgesMatricesOp = EdgesMatrices | undefined;
@@ -25,6 +25,7 @@ export default class EdgeFactory {
     private readonly filterStyles = derivedRelevantFilterStyles();
     private readonly headerStyles = derivedRelevantHeaderStyles();
 
+    private readonly getPartialDataEdges = derivedPartialDataEdges();
     private readonly getDataEdges = derivedDataEdges();
     private readonly getDataOpEdges = derivedDataOpEdges();
     private readonly getFilterEdges = derivedFilterEdges();
@@ -146,6 +147,7 @@ export default class EdgeFactory {
             fixed_rows,
             row_deletable,
             row_selectable,
+            selected_cells,
             style_as_list_view,
             style_cell,
             style_cell_conditional,
@@ -168,6 +170,7 @@ export default class EdgeFactory {
             workFilter.map,
             fixed_columns,
             fixed_rows,
+            selected_cells,
             style_as_list_view,
             style_cell,
             style_cell_conditional,
@@ -191,6 +194,7 @@ export default class EdgeFactory {
         filterMap: Map<string, SingleColumnSyntaxTree>,
         fixed_columns: number,
         fixed_rows: number,
+        selected_cells: SelectedCells,
         style_as_list_view: boolean,
         style_cell: Style,
         style_cell_conditional: Cells,
@@ -226,13 +230,22 @@ export default class EdgeFactory {
 
         const headerRows = getHeaderRows(columns);
 
+        const partialDataEdges = this.getPartialDataEdges(
+            visibleColumns,
+            dataStyles,
+            data,
+            offset,
+            style_as_list_view
+        )
+
         let dataEdges = this.getDataEdges(
+            partialDataEdges,
             visibleColumns,
             dataStyles,
             data,
             offset,
             active_cell,
-            style_as_list_view
+            selected_cells
         );
 
         let dataOpEdges = this.getDataOpEdges(

src/dash-table/conditional/index.ts

@@ -4,6 +4,11 @@ import { ColumnId, Datum, ColumnType, IColumn } from 'dash-table/components/Tabl
 import { QuerySyntaxTree } from 'dash-table/syntax-tree';
 import { IConvertedStyle } from 'dash-table/derived/style';
 
+export interface IActiveElement {
+    is_active?: boolean;
+    is_selected?: boolean;
+}
+
 export interface IConditionalElement {
     filter_query?: string;
 }
@@ -13,11 +18,11 @@ export interface IIndexedHeaderElement {
 }
 
 export interface IIndexedRowElement {
-    row_index?: number | 'odd' | 'even';
+    row_index?: number[] | number | 'odd' | 'even';
 }
 
 export interface INamedElement {
-    column_id?: ColumnId;
+    column_id?: ColumnId[] | ColumnId;
 }
 
 export interface ITypedElement {
@@ -29,17 +34,31 @@ export interface IEditableElement {
 }
 
 export type ConditionalBasicFilter = INamedElement & ITypedElement;
-export type ConditionalDataCell = IConditionalElement & IIndexedRowElement & INamedElement & ITypedElement & IEditableElement;
+export type ConditionalDataCell = IActiveElement & IConditionalElement & IIndexedRowElement & INamedElement & ITypedElement & IEditableElement;
 export type ConditionalCell = INamedElement & ITypedElement;
 export type ConditionalHeader = IIndexedHeaderElement & INamedElement & ITypedElement;
 
 function ifAstFilter(ast: QuerySyntaxTree, datum: Datum) {
     return ast.isValid && ast.evaluate(datum);
 }
 
+export function ifColumnActive(condition: IActiveElement | undefined, active: boolean, selected: boolean) {
+    if (!condition) {
+        return true;
+    }
+
+    // Apply active if active, apply selected if selected AND not active (active and selected styling don't overlap)
+    return (condition.is_active === undefined || active === condition.is_active) &&
+        (condition.is_selected === undefined || (selected === condition.is_selected && !active));
+}
+
 export function ifColumnId(condition: INamedElement | undefined, columnId: ColumnId) {
-    return !condition ||
-        condition.column_id === undefined ||
+    if (!condition || condition.column_id === undefined) {
+        return true;
+    }
+
+    return Array.isArray(condition.column_id) ?
+        R.contains(columnId, condition.column_id) :
         condition.column_id === columnId;
 }
 
@@ -56,9 +75,11 @@ export function ifRowIndex(condition: IIndexedRowElement | undefined, rowIndex:
     }
 
     const rowCondition = condition.row_index;
-    return typeof rowCondition === 'number' ?
-        rowIndex === rowCondition :
-        rowCondition === 'odd' ? rowIndex % 2 === 1 : rowIndex % 2 === 0;
+    return typeof rowCondition === 'string' ?
+        rowCondition === 'odd' ? rowIndex % 2 === 1 : rowIndex % 2 === 0 :
+        Array.isArray(rowCondition) ?
+            R.contains(rowIndex, rowCondition) :
+            rowIndex === rowCondition;
 }
 
 export function ifHeaderIndex(condition: IIndexedHeaderElement | undefined, headerIndex: number) {
@@ -68,9 +89,11 @@ export function ifHeaderIndex(condition: IIndexedHeaderElement | undefined, head
     }
 
     const headerCondition = condition.header_index;
-    return typeof headerCondition === 'number' ?
-        headerIndex === headerCondition :
-        headerCondition === 'odd' ? headerIndex % 2 === 1 : headerIndex % 2 === 0;
+    return typeof headerCondition === 'string' ?
+        headerCondition === 'odd' ? headerIndex % 2 === 1 : headerIndex % 2 === 0 :
+        Array.isArray(headerCondition) ?
+            R.contains(headerIndex, headerCondition) :
+            headerIndex === headerCondition;
 }
 
 export function ifFilter(condition: IConditionalElement | undefined, datum: Datum) {
@@ -89,13 +112,20 @@ export function ifEditable(condition: IEditableElement | undefined, isEditable:
 
 export type Filter<T> = (s: T[]) => T[];
 
-export const matchesDataCell = (datum: Datum, i: number, column: IColumn): Filter<IConvertedStyle> => R.filter<IConvertedStyle>((style =>
+export const matchesDataCell = (
+    datum: Datum,
+    i: number, column: IColumn,
+    active: boolean,
+    selected: boolean
+): Filter<IConvertedStyle> => R.filter<IConvertedStyle>((style =>
+    style.matchesActive(active, selected) &&
     style.matchesRow(i) &&
     style.matchesColumn(column) &&
     style.matchesFilter(datum)
 ));
 
 export const matchesFilterCell = (column: IColumn): Filter<IConvertedStyle> => R.filter<IConvertedStyle>((style =>
+    !style.checksActive() &&
     style.matchesColumn(column)
 ));
 
@@ -105,6 +135,7 @@ export const matchesHeaderCell = (i: number, column: IColumn): Filter<IConverted
 ));
 
 export const matchesDataOpCell = (datum: Datum, i: number): Filter<IConvertedStyle> => R.filter<IConvertedStyle>((style =>
+    !style.checksActive() &&
     !style.checksColumn() &&
     style.matchesRow(i) &&
     style.matchesFilter(datum)

src/dash-table/dash/DataTable.js

@@ -1062,7 +1062,7 @@ export const propTypes = {
      */
     style_cell_conditional: PropTypes.arrayOf(PropTypes.shape({
         if: PropTypes.exact({
-            column_id: PropTypes.string,
+            column_id: PropTypes.oneOf([PropTypes.string, PropTypes.arrayOf(PropTypes.string)]),
             column_type: PropTypes.oneOf(['any', 'numeric', 'text', 'datetime'])
         })
     })),
@@ -1073,12 +1073,15 @@ export const propTypes = {
      */
     style_data_conditional: PropTypes.arrayOf(PropTypes.shape({
         if: PropTypes.exact({
-            column_id: PropTypes.string,
+            column_id: PropTypes.oneOf([PropTypes.string, PropTypes.arrayOf(PropTypes.string)]),
             column_type: PropTypes.oneOf(['any', 'numeric', 'text', 'datetime']),
             filter_query: PropTypes.string,
+            is_active: PropTypes.bool,
+            is_selected: PropTypes.bool,
             row_index: PropTypes.oneOfType([
                 PropTypes.number,
-                PropTypes.oneOf(['odd', 'even'])
+                PropTypes.oneOf(['odd', 'even']),
+                PropTypes.arrayOf(PropTypes.number)
             ]),
             column_editable: PropTypes.bool
         })
@@ -1090,7 +1093,7 @@ export const propTypes = {
      */
     style_filter_conditional: PropTypes.arrayOf(PropTypes.shape({
         if: PropTypes.exact({
-            column_id: PropTypes.string,
+            column_id: PropTypes.oneOf([PropTypes.string, PropTypes.arrayOf(PropTypes.string)]),
             column_type: PropTypes.oneOf(['any', 'numeric', 'text', 'datetime']),
             column_editable: PropTypes.bool
         })
@@ -1102,10 +1105,11 @@ export const propTypes = {
      */
     style_header_conditional: PropTypes.arrayOf(PropTypes.shape({
         if: PropTypes.exact({
-            column_id: PropTypes.string,
+            column_id: PropTypes.oneOf([PropTypes.string, PropTypes.arrayOf(PropTypes.string)]),
             column_type: PropTypes.oneOf(['any', 'numeric', 'text', 'datetime']),
             header_index: PropTypes.oneOfType([
                 PropTypes.number,
+                PropTypes.arrayOf(PropTypes.number),
                 PropTypes.oneOf(['odd', 'even'])
             ]),
             column_editable: PropTypes.bool

src/dash-table/derived/cell/wrapperStyles.ts

@@ -2,10 +2,12 @@ import * as R from 'ramda';
 import { CSSProperties } from 'react';
 
 import { memoizeOneFactory } from 'core/memoizer';
-import { Data, Columns, IViewportOffset, SelectedCells } from 'dash-table/components/Table/props';
+import { Data, Columns, IViewportOffset, SelectedCells, ICellCoordinates } from 'dash-table/components/Table/props';
 import { IConvertedStyle, getDataCellStyle, getDataOpCellStyle } from '../style';
 import { traverseMap2, shallowClone } from 'core/math/matrixZipMap';
 
+import isActiveCell from 'dash-table/derived/cell/isActive';
+
 const SELECTED_CELL_STYLE = { backgroundColor: 'var(--selected-background)' };
 
 const partialGetter = (
@@ -16,28 +18,39 @@ const partialGetter = (
 ) => traverseMap2(
     data,
     columns,
-    (datum, column, i) => getDataCellStyle(datum, i + offset.rows, column)(styles)
+    (datum, column, i) => getDataCellStyle(datum, i + offset.rows, column, false, false)(styles)
 );
 
 const getter = (
-    styles: CSSProperties[][],
+    baseline: CSSProperties[][],
+    columns: Columns,
+    styles: IConvertedStyle[],
+    data: Data,
     offset: IViewportOffset,
+    activeCell: ICellCoordinates,
     selectedCells: SelectedCells
 ) => {
-    styles = shallowClone(styles);
+    baseline = shallowClone(baseline);
 
     R.forEach(({ row: i, column: j }) => {
-        i -= offset.rows;
-        j -= offset.columns;
+        const iNoOffset = i - offset.rows;
+        const jNoOffset = j - offset.columns;
 
-        if (i < 0 || j < 0 || styles.length <= i || styles[i].length <= j) {
+        if (iNoOffset < 0 || jNoOffset < 0 || baseline.length <= iNoOffset || baseline[iNoOffset].length <= jNoOffset) {
             return;
         }
 
-        styles[i][j] = R.merge(styles[i][j], SELECTED_CELL_STYLE);
+        const active = isActiveCell(activeCell, i, j);
+
+        const style = {
+            ...SELECTED_CELL_STYLE,
+            ...getDataCellStyle(data[i], i + offset.rows, columns[j], active, true)(styles)
+        };
+
+        baseline[iNoOffset][jNoOffset] = style;
     }, selectedCells);
 
-    return styles;
+    return baseline;
 };
 
 const opGetter = (