Issue 256, 257, 608 - Add conditional styling capabilities #729

Marc-Andre-Rivet · 2020-04-06T21:48:15Z

Closes #256
Closes #257
Closes #608

Replaces use of var for selected/active cells background and edge colors (IE11 fix)
Adds support for row_index, header_index, column_id array of values in style_**_conditional props
Adds support for state:'active'|'selected' condition on style_data_conditional prop

#752 for follow up selected_row support.

… column_id

- Partial style generation for edges (for memoization optimization) - Additional visual tests - changelog entry

Marc-Andre-Rivet · 2020-04-06T21:48:47Z

src/dash-table/conditional/index.ts

+export interface IActiveElement {
+    is_active?: boolean;
+    is_selected?: boolean;
+}


New styling conditions

Marc-Andre-Rivet · 2020-04-06T21:48:59Z

src/dash-table/conditional/index.ts

@@ -13,11 +18,11 @@ export interface IIndexedHeaderElement {
 }

 export interface IIndexedRowElement {
-    row_index?: number | 'odd' | 'even';
+    row_index?: number[] | number | 'odd' | 'even';


Support array of values

Marc-Andre-Rivet · 2020-04-06T21:49:05Z

src/dash-table/conditional/index.ts

 }

 export interface INamedElement {
-    column_id?: ColumnId;
+    column_id?: ColumnId[] | ColumnId;


Support array of values

Marc-Andre-Rivet · 2020-04-06T21:49:29Z

src/dash-table/conditional/index.ts

-        rowCondition === 'odd' ? rowIndex % 2 === 1 : rowIndex % 2 === 0;
+    return typeof rowCondition === 'string' ?
+        rowCondition === 'odd' ? rowIndex % 2 === 1 : rowIndex % 2 === 0 :
+        Array.isArray(rowCondition) ?


Check for array

Marc-Andre-Rivet · 2020-04-06T21:49:34Z

src/dash-table/conditional/index.ts

-        headerCondition === 'odd' ? headerIndex % 2 === 1 : headerIndex % 2 === 0;
+    return typeof headerCondition === 'string' ?
+        headerCondition === 'odd' ? headerIndex % 2 === 1 : headerIndex % 2 === 0 :
+        Array.isArray(headerCondition) ?


Check for array

Marc-Andre-Rivet · 2020-04-06T21:51:38Z

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

@@ -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)


Partial getter now assume all cells are active=False, selected=False

Marc-Andre-Rivet · 2020-04-06T21:51:59Z

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

+        const style = {
+            ...SELECTED_CELL_STYLE,
+            ...getDataCellStyle(data[i], i + offset.rows, columns[j], active, true)(styles)
+        };


Combine default selected cell styling with calculated style

Marc-Andre-Rivet · 2020-04-06T21:52:41Z

src/dash-table/derived/edges/data.ts

+            i + offset.rows,
+            column,
+            false,
+            false


Since border calculations are now done on active cells too - need a partial calculation that assumes active=False, selected=False for all cells

Marc-Andre-Rivet · 2020-04-06T21:53:15Z

src/dash-table/derived/edges/data.ts

+
+    R.forEach(({ row: i, column: j }) => {
+        const active = isActiveCell(activeCell, i, j);
+        const priority = active ? Number.MAX_SAFE_INTEGER : Number.MAX_SAFE_INTEGER - 1;


active beats selected, so it gets a higher priority

Marc-Andre-Rivet · 2020-04-06T21:53:46Z

src/dash-table/derived/edges/index.ts

@@ -4,7 +4,7 @@ import { Datum, IColumn } from 'dash-table/components/Table/props';
 import { matchesDataCell, matchesDataOpCell, matchesFilterCell, getFilterOpStyles, matchesHeaderCell, getHeaderOpStyles } from 'dash-table/conditional';
 import { traverse2 } from 'core/math/matrixZipMap';

-function resolveEdges(styles: IConvertedStyle[]): BorderStyle {
+function resolveEdges(styles: IConvertedStyle[], priority?: number): BorderStyle {


Now allow for priority override - useful for the active/selected borders

Marc-Andre-Rivet · 2020-04-06T21:54:08Z

src/dash-table/derived/edges/index.ts

@@ -14,15 +14,22 @@ function resolveEdges(styles: IConvertedStyle[]): BorderStyle {
            const border = s.style[p] || s.style.border;

            if (border) {
-                res[p] = [border, i];
+                res[p] = [border, priority ?? i];


null-coalescing operator, equivalent to isNil(priority) ? i : priority

Whoa, I'd never seen that before 🥇 That could simplify our lives in a million places! Can you confirm that it's properly transpiled for IE and the other browsers that don't support it?

The null-coalescing operator is a new addition to ESx, and supported by TypeScript since 3.7
https://www.typescriptlang.org/docs/handbook/release-notes/typescript-3-7.html#nullish-coalescing. I've been waiting for this in JS since forever :)

This transpiles to (yes, old style void 0 for undefined!):

if (border) { res[p] = [border, priority !== null && priority !== void 0 ? priority : i]; }

Marc-Andre-Rivet · 2020-04-06T21:55:12Z

tests/visual/percy-storybook/Style.percy.tsx

+        active_cell={{ row: 1, column: 1 }}
+        selected_cells={[
+            { row: 1, column: 1, column_id: 'b' }
+        ]}


Bunch of new visual tests. There's no need for new unit tests on the EdgesMatrix as only usage changed, no additional logic/functionality was added.

…ble into style-active-focused-cell

…cted cells styling

Marc-Andre-Rivet · 2020-04-07T21:40:36Z

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

+        const style = {
+            ...getDataCellStyle(data[i], i + offset.rows, columns[j], active, true)(inactiveStyles),
+            ...SELECTED_CELL_STYLE,
+            ...getDataCellStyle(data[i], i + offset.rows, columns[j], active, true)(activeStyles)


Make an exception for active/selected, apply !active/!selected styles first, apply the baseline, then apply active/selected styles

Marc-Andre-Rivet · 2020-04-07T21:41:11Z

src/dash-table/derived/edges/data.ts

+                active,
+                true,
+                priority
+            )(activeStyles)


Same here: apply !active/!selected edges, apply default active/selected edges, then apply active/selected

…ble into style-active-focused-cell

wbrgss · 2020-04-17T15:24:29Z

@Marc-Andre-Rivet

ce95cfc verified to have fixed the issue I mentioned above (#729 (comment)), nice!

254fb2c is going to break theming for a certain project. I could use state:'active'|'selected' in the wrapper, but then it's difficult to override the theme for users. I think the best solution for me would be to override the new CSS rule in that commit in order to preserve the theming and free up state:'active'|'selected' for user overrides. But right now, that project overrides the CSS rule that uses the IE11-incompatible var(--. So this might slow down this getting released from my perspective unless I do a maintenance release 🙁

…s - use the varible by default otherwise

Marc-Andre-Rivet · 2020-04-17T17:30:07Z

@wbrgss 345918a should allow you to continue using the variables for existing overrides and will allow IE11 to work with the defaults (won't be able to override through the var, but that could never work anyway)

wbrgss · 2020-04-17T17:36:56Z

src/dash-table/components/Table/Table.less

@@ -521,6 +521,7 @@
            --background-color-ellipses: rgb(253, 253, 253);
            --faded-text: rgb(250, 250, 250);
            --faded-text-header: rgb(180, 180, 180);
+            --selected-background: rgba(255, 65, 54, 0.2)


needs a semicolon ;)

alexcjohnson · 2020-04-20T13:57:00Z

src/core/environment/index.ts

 interface ISearchParams {
    get: (key: string) => string | null;
 }

 export default class Environment {
+    private static readonly _supportsCssVariables = Boolean(window.CSS?.supports?.('.some-selector', 'var(--some-var)'));


Whoa, the optional chaining operator ?. was new to me as well 🤯 🤩
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining

Yup. Using all the new things! 😀

tests/visual/percy-storybook/Style.percy.tsx

alexcjohnson · 2020-04-20T22:07:17Z

@wbrgss The regression is in the PR, thanks for pointing it out, it would have been a pretty nasty bug. Fixed by ce95cfc

We want the datum, not the prop

Is there a test covering this nasty bug?

…ble into style-active-focused-cell

Marc-Andre-Rivet · 2020-04-21T00:53:06Z

@alexcjohnson

Is there a test covering this nasty bug?

Short answer: no.
Long answer: Added improved typing in 8350c64, should be impossible to try and use a row field as an object now.

The buggy code will now trigger a TypeScript build error:

alexcjohnson

💃 love it!

rallyemax · 2020-05-06T22:25:51Z

private static readonly _supportsCssVariables = Boolean(window.CSS?.supports?.('.some-selector', 'var(--some-var)'));

private static readonly _activeEdge: Edge = Environment._supportsCssVariables ? '1px solid var(--accent)' : '1px solid hotpink';

This test returns false in Chromium/Chrome 81.0.4044.129 (Linux, Win10) and Firefox 75.0. The result is that the accent color reverts to a hardcoded hotpink, preventing it from being overridden generally in CSS. (Unless I'm missing something, a general override is needed to prevent the selected cell from having accented borders, since vertically adjacent cells have adjacent borders set to this color as well and those don't have any unique class name that can be targeted with CSS.)

This works and appears to be slightly more idiomatic:

window.CSS.supports('color', 'var(--fake-var)')

That also works with other valid attributes, like the ones at issue here (border and its directional siblings).

In a more general sense, it would be nice if active edge highlighting could be toggled on and off from the Python side. If that can't be implemented, then I would kindly request that the name of the variable be unique to active edge highlighting so that it can be changed or disabled in CSS without affecting other elements (like the sort arrows).

Is this really only to support IE? I think it's worth asking the question of whether it should be done at all. If supporting a deprecated browser requires the kind of gymnastics that even might break functionality in non-deprecated browsers...well, what's the point?

bhofmei · 2020-07-08T18:46:12Z

This PR really messed with my dash apps. I have numerous dash apps built on top of flask and most of the dash apps currently use data table. To keep a consistent theme across all dash apps, I was able to change the selected ground color by just creating a custom CSS and having that CSS used in all the dash apps.

With this update, it now always uses the default pink set as element style so I can't override the CSS. To keep the previous styling, I will now need to add this conditional to EVERY table. I currently have 20+ tables and many more coming.

ghost · 2020-08-18T15:38:30Z

I am also very interested how this could be implemented in a separate css stylesheet. I found a potential solution in the community forum but it leads to an error in my case: https://community.plotly.com/t/remove-or-change-hotpink-selection-from-datatable/26168/12

Marc-André Rivet added 2 commits April 6, 2020 15:39

Support arrays for conditional styling if: row_index, header_index,…

edc3bf1

… column_id

- Add support for is_active and is_selected conditional styling

a02c8d3

- Partial style generation for edges (for memoization optimization) - Additional visual tests - changelog entry

Marc-Andre-Rivet commented Apr 6, 2020

View reviewed changes

remove useless check (cell & filter don't support active conditions)

09d7f53

Marc-Andre-Rivet commented Apr 6, 2020

View reviewed changes

Marc-Andre-Rivet and others added 9 commits April 6, 2020 17:57

Update CHANGELOG.md

6ce6ef6

update unit tests

4fa6feb

Merge branch 'style-active-focused-cell' of github.com:plotly/dash-ta…

fe025ef

…ble into style-active-focused-cell

consider offset when calculating edges

c843e7e

selectedCells || [activeCell]

6e007b3

clean up

e8257d4

clean up tests

de55351

base style for active vs. selected

ee5b9ff

only apply styles for active/selected cells when updating active/sele…

6f93020

…cted cells styling

Marc-Andre-Rivet requested review from HammadTheOne and harryturr April 7, 2020 20:38

inactive -> baseline -> active style

6a0bc64

Marc-Andre-Rivet marked this pull request as ready for review April 7, 2020 21:35

Marc-Andre-Rivet commented Apr 7, 2020

View reviewed changes

Merge branch 'style-active-focused-cell' of github.com:plotly/dash-ta…

b8d482c

…ble into style-active-focused-cell

Marc-Andre-Rivet changed the title ~~Add conditional styling capabilities~~ Issue 256, 257, 608 - Add conditional styling capabilities Apr 16, 2020

Marc-André Rivet added 3 commits April 17, 2020 08:43

fix bug with row_index and header_index handling + new test

7252b03

clean up visual tests

53753e1

update edges unit cases

7e9601b

Use hard-coded values for IE11 / browsers that don't support variable…

345918a

…s - use the varible by default otherwise

wbrgss reviewed Apr 17, 2020

View reviewed changes

missing ;

bb1f6e5

alexcjohnson reviewed Apr 20, 2020

View reviewed changes

tests/visual/percy-storybook/Style.percy.tsx Show resolved Hide resolved

Marc-André Rivet and others added 3 commits April 20, 2020 16:51

active partially overrides selected

8085950

Merge branch 'dev' into style-active-focused-cell

e6d05fb

Merge branch 'dev' into style-active-focused-cell

d387aae

Marc-André Rivet added 3 commits April 20, 2020 20:35

Remove invalid check - object.length === 0 -> always le to offset

e3d6fca

Improving typing on data prop and related manipulations

8350c64

Merge branch 'style-active-focused-cell' of github.com:plotly/dash-ta…

b5065ef

…ble into style-active-focused-cell

Merge branch 'dev' into style-active-focused-cell

22fc0ad

alexcjohnson approved these changes Apr 21, 2020

View reviewed changes

Marc-Andre-Rivet merged commit 2ec0b43 into dev Apr 21, 2020

Marc-Andre-Rivet deleted the style-active-focused-cell branch April 21, 2020 02:53

Marc-Andre-Rivet added dash-type-enhancement New feature or request size: 3 labels Apr 21, 2020

alexcjohnson mentioned this pull request May 13, 2020

Issue-1213 clientside callback_context Initial Commit plotly/dash#1240

Merged

6 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Issue 256, 257, 608 - Add conditional styling capabilities #729

Issue 256, 257, 608 - Add conditional styling capabilities #729

Marc-Andre-Rivet commented Apr 6, 2020 •

edited

Loading

Marc-Andre-Rivet Apr 6, 2020

Marc-Andre-Rivet Apr 6, 2020

Marc-Andre-Rivet Apr 6, 2020

Marc-Andre-Rivet Apr 6, 2020

Marc-Andre-Rivet Apr 6, 2020

Marc-Andre-Rivet Apr 6, 2020

Marc-Andre-Rivet Apr 6, 2020

Marc-Andre-Rivet Apr 6, 2020

Marc-Andre-Rivet Apr 6, 2020

Marc-Andre-Rivet Apr 6, 2020

Marc-Andre-Rivet Apr 6, 2020

alexcjohnson Apr 7, 2020

Marc-Andre-Rivet Apr 7, 2020 •

edited

Loading

Marc-Andre-Rivet Apr 6, 2020

Marc-Andre-Rivet Apr 7, 2020

Marc-Andre-Rivet Apr 7, 2020

wbrgss commented Apr 17, 2020

Marc-Andre-Rivet commented Apr 17, 2020

wbrgss Apr 17, 2020

alexcjohnson Apr 20, 2020

Marc-Andre-Rivet Apr 20, 2020

alexcjohnson commented Apr 20, 2020

Marc-Andre-Rivet commented Apr 21, 2020 •

edited

Loading

alexcjohnson left a comment

rallyemax commented May 6, 2020

bhofmei commented Jul 8, 2020

ghost commented Aug 18, 2020

Issue 256, 257, 608 - Add conditional styling capabilities #729

Issue 256, 257, 608 - Add conditional styling capabilities #729

Conversation

Marc-Andre-Rivet commented Apr 6, 2020 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Marc-Andre-Rivet Apr 7, 2020 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

wbrgss commented Apr 17, 2020

Marc-Andre-Rivet commented Apr 17, 2020

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

alexcjohnson commented Apr 20, 2020

Marc-Andre-Rivet commented Apr 21, 2020 • edited Loading

alexcjohnson left a comment

Choose a reason for hiding this comment

rallyemax commented May 6, 2020

bhofmei commented Jul 8, 2020

ghost commented Aug 18, 2020

Marc-Andre-Rivet commented Apr 6, 2020 •

edited

Loading

Marc-Andre-Rivet Apr 7, 2020 •

edited

Loading

Marc-Andre-Rivet commented Apr 21, 2020 •

edited

Loading