3.1 refactor cells rendering by Marc-Andre-Rivet · Pull Request #123 · plotly/dash-table

Marc-Andre-Rivet · 2018-10-02T20:05:41Z

Rewriting the table's rendering layer in a more flexible, performance-analysable, testable by using FP concepts.. in essence the entire table can be seen as the result of a complex calculation on the props. This here breaks this process up into multiple steps / calculations to arrive to the final result. Along the way the more expensive calculations are cached for reuse -- and all calculations are memoized to catch the simple cases and refreshes (e.g. selected_cell will not trigger a dropdowns recalculation but updating the dataframe will)

Here is a general idea of what's going on -- not all props involved nor all calculations are shown, just the major ones:

- memoize cell event handlers as derived values - isolate cell event handlers

- attempt to isolate cell logic from input logic for individual datum

- celan up cell wrapper - isolate input logic a bit more

- separating operation cells from content

…-rendering # Conflicts: # dash_table/bundle.js # dash_table/demo.js

- separate wrappers from styles

- fix rendering perf regression

Marc-Andre-Rivet · 2018-10-03T14:07:38Z

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

+    return memoizeOne(getter).bind(undefined, astCache, styleCache);
+}
+
+export default memoizeAll(decorator);


Calculate and cache (individually) each style entry -- styles are expensive to calculate and apply, so making sure we keep the same instance if possible improves performance greatly.

Marc-Andre-Rivet · 2018-10-03T14:08:48Z

src/dash-table/derived/table/fragments.tsx

+        [renderFragment(fixedRowAndColumnCells), renderFragment(fixedRowCells)],
+        [renderFragment(fixedColumnCells), renderFragment(cells)]
+    ];
+};


calculate the table fragments from the entire matrix of cells + fixed rows/columns

Marc-Andre-Rivet · 2018-10-03T14:09:20Z

src/dash-table/derived/table/index.tsx

+    const headerFactory = new HeaderFactory(propsFn);
+
+    return getter.bind(undefined, cellFactory, filterFactory, headerFactory);
+};


calculate all cells of table (headers+filters+content)

Marc-Andre-Rivet · 2018-10-03T14:10:28Z

tests/cypress/tsconfig.json

        "strictPropertyInitialization": false,
        "target": "esnext",
-        "traceResolution": true,
+        "traceResolution": false,


Reduce the build output related to TS figuring out type information -- it's mostly useless anyway

…-rendering

cldougl · 2018-10-04T20:10:18Z

on paging edits get applied to page 1 rather than the appropriate cell

add test that a change on the next page is applied to the correct cell

Marc-Andre-Rivet · 2018-10-04T23:57:47Z

@cldougl Added two new test cases

edit cell on 2nd page
delete cell and edit a cell located after the deleted cell (on 2nd page) -- this tests that the df row resolution is still accurate after a df modification

valentijnnieman · 2018-10-05T15:31:46Z

Looks like the #127 issue is almost resolved here, except that, if you edit a cell and click somewhere else (losing focus), it doesn't save. Here's a gif of it:

:edit I guess you can't see my mouse here - I'm clicking outside of the table for the first couple of cell changes, and at the last one I'm clicking on another cell (that works).

I also still see the FE error as in #127, but the other issues seem resolved here

cldougl

qa is looking good to me 💃

@cldougl

* 3.1 props refactoring (#106) * refactor virtualization, virtualization settings, and derived props * refactor renaming paging / pagination props * refactor virtual, viewport and pagination into adapters * isolate derived props * build update * fix regression * improve typing * fix test regression * simplify pagination adapter / refactor * lint * clean up unused props * - change factory - clean up props / build update * fix lint * bump version * add dash level props for virtual_dataframe * refactor fp / derived props * derived props * refactor viewport and virtual controlled props * fix fp regression * fix fp regression * refactor controlled table / table fp * controlled table purecomponent * fix test (rebrake it!) * fix selection regression for be paging/sorting/filtering * improve re-renders & controlled props * fix test regressions * update inner-selection fixture * remove useless spy * - fix pr comment - fix for IE/Edge * clean up * 3.0 clean offsets (#110) * refactor virtualization, virtualization settings, and derived props * refactor renaming paging / pagination props * refactor virtual, viewport and pagination into adapters * isolate derived props * build update * fix regression * improve typing * fix test regression * simplify pagination adapter / refactor * lint * clean up unused props * - change factory - clean up props / build update * fix lint * bump version * add dash level props for virtual_dataframe * cleaup offsets * triad validation * - define external facing classes and attributes * fix regression, update build * fix test regression (invalid props) * update test name * refactor fp / derived props * derived props * refactor viewport and virtual controlled props * fix fp regression * fix fp regression * refactor controlled table / table fp * controlled table purecomponent * fix test (rebrake it!) * fix selection regression for be paging/sorting/filtering * improve re-renders & controlled props * fix test regressions * update inner-selection fixture * remove useless spy * - control columns into visible columns - cleanup "hidden" conditional processing * update changelog * clean up header factory * apply style on first controlled table render * typo/merge miss * derived visible columns * - visual tests for hidden columns * rename functions * - fix dropdown styling regression * lint * 3.1 props fixes (#112) * props fixes * update changelog * bump version * filter typing * Update derivedViewport_test.ts Add basic viewport test with |df| > page_size * ☝️ 3 new review / documentation / target apps see discussion in #108 * 🙈 forgot file * 📝 incorporate @cldougl suggestions 🙇 * 3.1 refactor tests (#113) * props fixes * update changelog * bump version * filter typing * - delete unused usage files - restructure tests folder * - separate cypress and visual tests into 2 ci jobs * - build before tests! * add browsers to the node image for visual-test * 💯 add percent examples * 📝 title/example clarification * reformat sizing test app for failing tests (#125) * Removed .only from dash_test.ts * Production build instead of dev 🙈 * Fix failing tests * 3.1 refactor cells rendering (#123) * WIP - memoize cell event handlers as derived values - isolate cell event handlers * wip - attempt to isolate cell logic from input logic for individual datum * wip - celan up cell wrapper - isolate input logic a bit more * further down the rabbit hole.. - separating operation cells from content * fix dropdown navigation regression * fix selected row regression * renaming / restructuring * rename/restructure * - clean up zipping - separate wrappers from styles * rework style/ast cache * clean up * clean up * build update * improve rendering perf * optimize wrappers generation * build config * - fix typing regression - fix rendering perf regression * - fix navigation regression * simplify slightly the derived props / ui * fix copy/paste regressions * clean up wrapper props * clean up * fix regression on conditional dropdowns * wip, fp the headers * fp content, wrappers, labels, indices from header factory * fix regressions * fp the table itself * fix typing and behavior for table fp * fix sorting icon regression * fix regression * regression * fix column name regression with only 1 header row * fix header actions regression * fix style application on mount * fix regression edit cell in n-th page * fix editing on non-first page (continued) * fix test * 3.1 issue118 width behavior (#130) * WIP - memoize cell event handlers as derived values - isolate cell event handlers * wip - attempt to isolate cell logic from input logic for individual datum * wip - celan up cell wrapper - isolate input logic a bit more * further down the rabbit hole.. - separating operation cells from content * fix dropdown navigation regression * fix selected row regression * renaming / restructuring * rename/restructure * - clean up zipping - separate wrappers from styles * rework style/ast cache * clean up * clean up * build update * improve rendering perf * optimize wrappers generation * build config * - fix typing regression - fix rendering perf regression * - fix navigation regression * simplify slightly the derived props / ui * fix copy/paste regressions * clean up wrapper props * clean up * fix regression on conditional dropdowns * wip, fp the headers * fp content, wrappers, labels, indices from header factory * fix regressions * fp the table itself * fix typing and behavior for table fp * fix sorting icon regression * fix regression * regression * fix column name regression with only 1 header row * fix header actions regression * add width percentage support + content_style * fix style application on mount * fix visual regression with empty df * only apply row style when necessary * fix tab test (no offset) * clean up header styling * use dash-* classes * support default column width (override input behavior) * fix regression edit cell in n-th page * fix editing on non-first page (continued) * fix test * fit to content behavior * fix regressions * fix lint * add column width visual tests * fix dropdown minimum size when using default width * sizing examples * black * fix navigation test regression * fix regressions in visual tests * default column width - fix dropdown width eval * default width columns - fix width when first content row is search filter * percy - add delay before screenshot (attempt to fix FF visual tests) * debugging selenium * fix black * debug selenium * debug selenium * fix black * debug selenium * debug selenium * debug selenium * undo all selenium modifications * default column width - filter inputs behave like cell inputs (do not affect width) * - fixed rows+columns height evaluated correctly * remove dead code * remove .only from tests * add data-dash-column to filter cells * styling examples (#117) * 🌈 styling examples examples that represent of the level of customization that we need in dash-table. The examples are implemented with HTML tables to demonstrate the intended behaviour. I’d like to see each of these examples implemented with the `dash_table` syntax. We’ll use these examples as our `dash-table` documentation * ❌ removing black and pylint this keeps tripping us up and I don’t think it’s worth the pain right now. * Backend examples (#119) * 🏭 backend computed data usage examples * 📊 tying it together w a graph * ❓ not sure what `displayed_pages` does? * Dropdown usage examples (#120) * ⬇️ dropdown usage examples * add conditional dropdown example

@cldougl

* 3.1 props refactoring (#106) * refactor virtualization, virtualization settings, and derived props * refactor renaming paging / pagination props * refactor virtual, viewport and pagination into adapters * isolate derived props * build update * fix regression * improve typing * fix test regression * simplify pagination adapter / refactor * lint * clean up unused props * - change factory - clean up props / build update * fix lint * bump version * add dash level props for virtual_dataframe * refactor fp / derived props * derived props * refactor viewport and virtual controlled props * fix fp regression * fix fp regression * refactor controlled table / table fp * controlled table purecomponent * fix test (rebrake it!) * fix selection regression for be paging/sorting/filtering * improve re-renders & controlled props * fix test regressions * update inner-selection fixture * remove useless spy * - fix pr comment - fix for IE/Edge * clean up * 3.0 clean offsets (#110) * refactor virtualization, virtualization settings, and derived props * refactor renaming paging / pagination props * refactor virtual, viewport and pagination into adapters * isolate derived props * build update * fix regression * improve typing * fix test regression * simplify pagination adapter / refactor * lint * clean up unused props * - change factory - clean up props / build update * fix lint * bump version * add dash level props for virtual_dataframe * cleaup offsets * triad validation * - define external facing classes and attributes * fix regression, update build * fix test regression (invalid props) * update test name * refactor fp / derived props * derived props * refactor viewport and virtual controlled props * fix fp regression * fix fp regression * refactor controlled table / table fp * controlled table purecomponent * fix test (rebrake it!) * fix selection regression for be paging/sorting/filtering * improve re-renders & controlled props * fix test regressions * update inner-selection fixture * remove useless spy * - control columns into visible columns - cleanup "hidden" conditional processing * update changelog * clean up header factory * apply style on first controlled table render * typo/merge miss * derived visible columns * - visual tests for hidden columns * rename functions * - fix dropdown styling regression * lint * 3.1 props fixes (#112) * props fixes * update changelog * bump version * filter typing * Update derivedViewport_test.ts Add basic viewport test with |df| > page_size * ☝️ 3 new review / documentation / target apps see discussion in #108 * 🙈 forgot file * 📝 incorporate @cldougl suggestions 🙇 * 3.1 refactor tests (#113) * props fixes * update changelog * bump version * filter typing * - delete unused usage files - restructure tests folder * - separate cypress and visual tests into 2 ci jobs * - build before tests! * add browsers to the node image for visual-test * 💯 add percent examples * 📝 title/example clarification * reformat sizing test app for failing tests (#125) * Removed .only from dash_test.ts * Production build instead of dev 🙈 * Fix failing tests * 3.1 refactor cells rendering (#123) * WIP - memoize cell event handlers as derived values - isolate cell event handlers * wip - attempt to isolate cell logic from input logic for individual datum * wip - celan up cell wrapper - isolate input logic a bit more * further down the rabbit hole.. - separating operation cells from content * fix dropdown navigation regression * fix selected row regression * renaming / restructuring * rename/restructure * - clean up zipping - separate wrappers from styles * rework style/ast cache * clean up * clean up * build update * improve rendering perf * optimize wrappers generation * build config * - fix typing regression - fix rendering perf regression * - fix navigation regression * simplify slightly the derived props / ui * fix copy/paste regressions * clean up wrapper props * clean up * fix regression on conditional dropdowns * wip, fp the headers * fp content, wrappers, labels, indices from header factory * fix regressions * fp the table itself * fix typing and behavior for table fp * fix sorting icon regression * fix regression * regression * fix column name regression with only 1 header row * fix header actions regression * fix style application on mount * fix regression edit cell in n-th page * fix editing on non-first page (continued) * fix test * 3.1 issue118 width behavior (#130) * WIP - memoize cell event handlers as derived values - isolate cell event handlers * wip - attempt to isolate cell logic from input logic for individual datum * wip - celan up cell wrapper - isolate input logic a bit more * further down the rabbit hole.. - separating operation cells from content * fix dropdown navigation regression * fix selected row regression * renaming / restructuring * rename/restructure * - clean up zipping - separate wrappers from styles * rework style/ast cache * clean up * clean up * build update * improve rendering perf * optimize wrappers generation * build config * - fix typing regression - fix rendering perf regression * - fix navigation regression * simplify slightly the derived props / ui * fix copy/paste regressions * clean up wrapper props * clean up * fix regression on conditional dropdowns * wip, fp the headers * fp content, wrappers, labels, indices from header factory * fix regressions * fp the table itself * fix typing and behavior for table fp * fix sorting icon regression * fix regression * regression * fix column name regression with only 1 header row * fix header actions regression * add width percentage support + content_style * fix style application on mount * fix visual regression with empty df * only apply row style when necessary * fix tab test (no offset) * clean up header styling * use dash-* classes * support default column width (override input behavior) * fix regression edit cell in n-th page * fix editing on non-first page (continued) * fix test * fit to content behavior * fix regressions * fix lint * add column width visual tests * fix dropdown minimum size when using default width * sizing examples * black * fix navigation test regression * fix regressions in visual tests * default column width - fix dropdown width eval * default width columns - fix width when first content row is search filter * percy - add delay before screenshot (attempt to fix FF visual tests) * debugging selenium * fix black * debug selenium * debug selenium * fix black * debug selenium * debug selenium * debug selenium * undo all selenium modifications * default column width - filter inputs behave like cell inputs (do not affect width) * - fixed rows+columns height evaluated correctly * remove dead code * remove .only from tests * add data-dash-column to filter cells * styling examples (#117) * 🌈 styling examples examples that represent of the level of customization that we need in dash-table. The examples are implemented with HTML tables to demonstrate the intended behaviour. I’d like to see each of these examples implemented with the `dash_table` syntax. We’ll use these examples as our `dash-table` documentation * ❌ removing black and pylint this keeps tripping us up and I don’t think it’s worth the pain right now. * Backend examples (#119) * 🏭 backend computed data usage examples * 📊 tying it together w a graph * ❓ not sure what `displayed_pages` does? * Dropdown usage examples (#120) * ⬇️ dropdown usage examples * add conditional dropdown example * - additional tests for editable/readonly - fixes for editable/readonly * bump version * remove useless test column * add editable prop to fixtures * update tests to take into account readonly 'rows' column * - refactor column isEditable calculation

Marc-André Rivet added 30 commits September 27, 2018 11:12

WIP

2af1d3e

- memoize cell event handlers as derived values - isolate cell event handlers

wip

0646dc0

- attempt to isolate cell logic from input logic for individual datum

wip

cdb93f5

- celan up cell wrapper - isolate input logic a bit more

further down the rabbit hole..

50053fa

- separating operation cells from content

Merge remote-tracking branch 'origin/develop' into 3.1-refactor-cells…

fcc1edb

…-rendering # Conflicts: # dash_table/bundle.js # dash_table/demo.js

fix dropdown navigation regression

70048e2

fix selected row regression

d5bed92

renaming / restructuring

f03d02f

rename/restructure

7bebb9d

- clean up zipping

4473467

- separate wrappers from styles

rework style/ast cache

966681f

clean up

75736ed

clean up

219da49

build update

1bbc70e

improve rendering perf

172d3ab

optimize wrappers generation

ed7053c

build config

1d93552

- fix typing regression

b91af6a

- fix rendering perf regression

- fix navigation regression

72231b8

simplify slightly the derived props / ui

61d3b74

fix copy/paste regressions

443d380

clean up wrapper props

47be714

clean up

4c16af0

merge with develop

c4a3609

fix regression on conditional dropdowns

54a9b49

wip, fp the headers

617ce7b

fp content, wrappers, labels, indices from header factory

caecaf5

fix regressions

e8b6751

fp the table itself

f3b4671

fix typing and behavior for table fp

bf28720

Marc-Andre-Rivet commented Oct 3, 2018

View reviewed changes

fix header actions regression

1544031

chriddyp temporarily deployed to dash-table-review-pr-123 October 3, 2018 14:57 Inactive

Marc-Andre-Rivet requested review from bpostlethwaite, chriddyp, cldougl and valentijnnieman October 3, 2018 15:05

Merge remote-tracking branch 'origin/develop' into 3.1-refactor-cells…

9334516

…-rendering

chriddyp temporarily deployed to dash-table-review-pr-123 October 3, 2018 15:36 Inactive

fix style application on mount

ed6c5c9

chriddyp temporarily deployed to dash-table-review-pr-123 October 3, 2018 20:33 Inactive

fix regression edit cell in n-th page

0cd7e2c

chriddyp temporarily deployed to dash-table-review-pr-123 October 4, 2018 21:06 Inactive

fix editing on non-first page (continued)

7a0b167

chriddyp temporarily deployed to dash-table-review-pr-123 October 4, 2018 23:07 Inactive

merge develop into 3.1-refactor-cell-rendering

fd2ec45

chriddyp temporarily deployed to dash-table-review-pr-123 October 4, 2018 23:34 Inactive

fix test

8033eb8

chriddyp deployed to dash-table-review-pr-123 October 4, 2018 23:45 View deployment

cldougl approved these changes Oct 5, 2018

View reviewed changes

Marc-Andre-Rivet merged commit 0612c4c into develop Oct 5, 2018

Marc-Andre-Rivet deleted the 3.1-refactor-cells-rendering branch July 18, 2019 12:49

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

3.1 refactor cells rendering#123

3.1 refactor cells rendering#123
Marc-Andre-Rivet merged 42 commits intodevelopfrom
3.1-refactor-cells-rendering

Marc-Andre-Rivet commented Oct 2, 2018 •

edited

Loading

Uh oh!

Marc-Andre-Rivet Oct 3, 2018

Uh oh!

Marc-Andre-Rivet Oct 3, 2018

Uh oh!

Marc-Andre-Rivet Oct 3, 2018

Uh oh!

Marc-Andre-Rivet Oct 3, 2018

Uh oh!

cldougl commented Oct 4, 2018 •

edited

Loading

Uh oh!

Marc-Andre-Rivet commented Oct 4, 2018

Uh oh!

valentijnnieman commented Oct 5, 2018 •

edited

Loading

Uh oh!

cldougl left a comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

Uh oh!

Conversation

Marc-Andre-Rivet commented Oct 2, 2018 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Marc-Andre-Rivet Oct 3, 2018

Choose a reason for hiding this comment

Uh oh!

Marc-Andre-Rivet Oct 3, 2018

Choose a reason for hiding this comment

Uh oh!

Marc-Andre-Rivet Oct 3, 2018

Choose a reason for hiding this comment

Uh oh!

Marc-Andre-Rivet Oct 3, 2018

Choose a reason for hiding this comment

Uh oh!

cldougl commented Oct 4, 2018 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Marc-Andre-Rivet commented Oct 4, 2018

Uh oh!

valentijnnieman commented Oct 5, 2018 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

cldougl left a comment

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

Marc-Andre-Rivet commented Oct 2, 2018 •

edited

Loading

cldougl commented Oct 4, 2018 •

edited

Loading

valentijnnieman commented Oct 5, 2018 •

edited

Loading