Merge pull request plotly#444 from plotly/Issue435

Issue 435 - Table selected cell

Author: alinastarkov

packages/dash-table/CHANGELOG.md

@@ -7,6 +7,9 @@ This project adheres to [Semantic Versioning](http://semver.org/).
 [#434](https://github.com/plotly/dash-table/issues/434)
 - Fix CSS borders propeties overwrite style_* borders properties. 
 
+[#435](https://github.com/plotly/dash-table/issues/434)
+- selected_cells background color is set through styling pipeline / derivations. 
+
 ## [3.7.0] - 2019-05-15
 ### Added
 [#397](https://github.com/plotly/dash-table/pull/397), [#410](https://github.com/plotly/dash-table/pull/410)

packages/dash-table/generator/cssPropertiesGenerator.js

@@ -300,9 +300,6 @@ snakes.forEach(([snake, camel]) => map.set(snake, camel));
 kebabs.forEach(([kebab, camel]) => map.set(kebab, camel));
 camels.forEach(([camel]) => map.set(camel, camel));
 
-map.forEach((value, key) => console.log(value, key));
-console.log(map.size);
-
 const fs = require('fs');
 
 var stream1 = fs.createWriteStream("src/dash-table/derived/style/py2jsCssProperties.ts");

packages/dash-table/src/dash-table/components/CellFactory.tsx

@@ -63,7 +63,8 @@ export default class CellFactory {
             columns,
             relevantStyles,
             virtualized.data,
-            virtualized.offset
+            virtualized.offset,
+            selected_cells
         );
 
         const dataOpStyles = this.dataOpStyles(

packages/dash-table/src/dash-table/components/Table/Dropdown.css

@@ -113,8 +113,3 @@
 .dash-spreadsheet .Select-control {
     padding-left: 2px;
 }
-
-.dash-spreadsheet .cell--selected .Select-control {
-    background-color: var(--selected-background);
-    border-radius: 0;
-}

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

@@ -244,23 +244,13 @@
             }
         }
 
-        .selected-row {
-            td, th {
-                background-color: var(--selected-row);
-            }
-        }
-
         tr {
             background-color: white;
         }
 
         td {
             background-color: inherit;
 
-            &.cell--selected {
-                background-color: var(--selected-background);
-            }
-
             &.focused {
                 margin: -1px;
                 z-index: 200;
@@ -367,7 +357,6 @@
         --faded-text-header: rgb(180, 180, 180);
         --selected-background: rgba(255, 65, 54, 0.2);
         --faded-dropdown: rgb(240, 240, 240);
-        --selected-row: #fff0ff;
         --muted: rgb(200, 200, 200);
     }
 

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

@@ -2,7 +2,7 @@ import * as R from 'ramda';
 import { CSSProperties } from 'react';
 
 import { memoizeOneFactory } from 'core/memoizer';
-import { Data, VisibleColumns, IViewportOffset } from 'dash-table/components/Table/props';
+import { Data, VisibleColumns, IViewportOffset, SelectedCells, ICellCoordinates } from 'dash-table/components/Table/props';
 import { IConvertedStyle } from '../style';
 import { BORDER_PROPERTIES_AND_FRAGMENTS } from '../edges/type';
 
@@ -12,9 +12,10 @@ function getter(
     columns: VisibleColumns,
     columnStyles: IConvertedStyle[],
     data: Data,
-    offset: IViewportOffset
+    offset: IViewportOffset,
+    selectedCells: SelectedCells
 ): Style[][] {
-    return R.addIndex<any, Style[]>(R.map)((datum, index) => R.map(column => {
+    return R.addIndex<any, Style[]>(R.map)((datum, index) => R.addIndex<any, Style>(R.map)((column, columnIndex) => {
         const relevantStyles = R.map(
             s => s.style,
             R.filter<IConvertedStyle>(
@@ -25,7 +26,11 @@ function getter(
                 columnStyles
             )
         );
-
+        const matchCell = (cell: ICellCoordinates) => cell.row === index && cell.column === columnIndex;
+        const isSelectedCell: boolean = R.any(matchCell)(selectedCells);
+        if (isSelectedCell) {
+            relevantStyles.push({backgroundColor:  'var(--selected-background)'});
+        }
         return relevantStyles.length ?
             R.omit(
                 BORDER_PROPERTIES_AND_FRAGMENTS,

packages/dash-table/src/dash-table/derived/cell/wrappers.tsx

@@ -33,9 +33,7 @@ class Wrappers {
             (column, columnIndex) => {
                 const active = isActiveCell(activeCell, rowIndex + offset.rows, columnIndex + offset.columns);
                 const selected = isSelectedCell(selectedCells, rowIndex + offset.rows, columnIndex + offset.columns);
-
                 const isDropdown = column.presentation === Presentation.Dropdown;
-
                 const classes =
                     'dash-cell' +
                     ` column-${columnIndex}` +

packages/dash-table/tests/visual/percy-storybook/DashTable.percy.tsx

@@ -229,6 +229,7 @@ storiesOf('DashTable/Hidden Columns', module)
         id='table'
         data={dataA2J}
         columns={hiddenColumns}
+        active_cell={makeCell(1, 1, dataA2J, hiddenColumns)}
         selected_cells={makeSelection([[1, 1], [1, 2], [2, 1], [2, 2]], dataA2J, hiddenColumns)}
         style_data_conditional={style_data_conditional}
     />));

packages/dash-table/tests/visual/percy-storybook/Style.percy.tsx

@@ -134,5 +134,42 @@ storiesOf('DashTable/Style type condition', module)
             if: { column_id: 'Humidity', filter: '{Humidity} eq 20' },
             background_color: 'yellow'
         }]}
-
+    />))
+    .add('single selected cells on dark themes', () => (<DataTable
+        id='styling-11'
+        data={data}
+        selected_cells={[{row: 1, column: 1, column_id: 'Region'}]}
+        active_cell={{row: 1, column: 1}}
+        columns={R.map(
+            i => ({ name: i, id: i }),
+            R.keysIn(data[0]))
+        }
+        content_style='grow'
+        style_table={{
+            width: '100%'
+        }}
+        style_data_conditional={[{
+            background_color: 'rgb(50, 50, 50)',
+            color: 'white',
+            font_family: 'arial'
+        }]}
+    />))
+    .add('multiple selected cells on dark themes', () => (<DataTable
+        id='styling-12'
+        data={data}
+        selected_cells={[{row: 1, column: 1, column_id: 'Region'}, {row: 1, column: 2, column_id: 'Temperature'}, {row: 2, column: 1, column_id: 'Region'}, {row: 2, column: 2, column_id: 'Temperature'}]}
+        active_cell={{row: 1, column: 1}}
+        columns={R.map(
+            i => ({ name: i, id: i }),
+            R.keysIn(data[0]))
+        }
+        content_style='grow'
+        style_table={{
+            width: '100%'
+        }}
+        style_data_conditional={[{
+            background_color: 'rgb(50, 50, 50)',
+            color: 'white',
+            font_family: 'arial'
+        }]}
     />));

packages/dash-table/tests/visual/percy-storybook/fixtures.ts

@@ -410,6 +410,7 @@ export default [
             id: 'table',
             editable: true,
             selected_cells: [[1, 1], [1, 2], [1, 3], [2, 1], [2, 2], [2, 3], [3, 1], [3, 2], [3, 3]],
+            active_cell: [1, 1],
             columns: [
                 {
                     name: 'Column 1',
@@ -444,6 +445,7 @@ export default [
             id: 'table',
             editable: true,
             selected_cells: [[1, 1], [1, 2], [1, 3], [2, 1], [2, 2], [2, 3], [3, 1], [3, 2], [3, 3]],
+            active_cell: [1, 1],
             merge_duplicate_headers: true,
             columns: [
                 {