Fix IE11 #1932

alexcjohnson · 2022-02-17T03:34:44Z

Fixes dash >= 1.21.0 doesn't load on IE 11 #1925 - Main purpose of this PR is to re-establish Dash compatibility with IE11 (5b3745d). Unfortunately as part of this I had to pin fontawesome versions back a bit, as the newest ones use a feature (regexp u flag) that IE does not support. Some of this will only be caught in manual tests with IE, but I did improve our es-check coverage by changing the sourcemap method away from eval which puts all the dev bundle code in strings - since the dash-renderer dev bundle is much bigger than its prod bundle (it contains all the devtools) that was a pretty big blind spot.

While I was at it I tackled two other small bugs:

Fixes [BUG] Dash DataTable style_header text_alignment breaks between Dash v2.0.0 and v2.1.0 #1914 - text alignment is preserved in dash_table headers. This bug was introduced by Fix unwanted overflow in DashTable header columns #1788 as part of fixing Datatable cutting off last letter of columns headers dash-table#867, the updated css AFAICT covers all of these cases as desired (f5a9a0c)
Fixes Remove webdriver-manager from dash[testing] requirements #1919 - webdriver-manager was added in Fix Dash Table filter options position #1801, but I believe this was just a misunderstanding of the new CircleCI cimg images. I removed it, looks like the tests are running just fine.
I have added entry in the CHANGELOG.md

and cleaner formatting

need to downgrade some fontawesome packages I *JUST* upgraded

I think this was really just a misunderstanding of the cimg CI images

was introduced by #1788 - AFAICT this way still solves plotly/dash-table#867

archmoj · 2022-02-17T21:18:09Z

Some tests are failing here: https://app.circleci.com/pipelines/github/plotly/dash/3112/workflows/08f0d10f-5ca6-42ec-b25a-e87b0bee23fd/jobs/51859/parallel-runs/3?filterBy=ALL

… anymore

alexcjohnson · 2022-02-18T14:06:58Z

components/dash-table/tests/visual/percy-storybook/Header.percy.tsx

+                style_header={{textAlign: alignment}}
+                {...actionProps}
+                {...common}
+            />


This is the one new test, to 🔒 header text alignment.

These percy storybook tests are really great for performance, when we're just testing visuals. But I don't like the way most of them were written, to give a separate screenshot for every case. This means we end up with a ton of very similar-looking screenshots. This makes it hard to tell what things should be the same or different, encourages reviewers to gloss over them all if there's a small change, and uses an unnecessarily large fraction of our Percy quota.

So I started a pattern here of merging a bunch of cases into one screenshot:

The rest of the changes in the percy-storybook dir are me continuing this pattern with a few more tests. Some of the other changes also label each case separately, which helps reviewers know what they're looking at. I didn't do that above because it seemed self-explanatory.

archmoj · 2022-02-18T14:08:23Z

Looking great to me.

archmoj · 2022-02-21T19:02:56Z

dash/development/update_components.py

-            "🟢 Finished updating the following component packages {} (status={}) 🟢".format(
-                source_glob, status
-            ),
+            f"🚨 Finished updating component packages: {source_glob} (status={status}) 🚨",


npm run build fails on my machine after this commit as well as on dev branch with the following error:

lerna ERR! npm run build exited 1 in 'dash-core-components' lerna ERR! npm run build exited 1 in 'dash-core-components' 🚨 Finished updating component packages: dash-core-components|dash-html-components|dash-table (status=1) 🚨 ERROR: "private::build.components" exited with 1.

cc: @alexcjohnson

And what if you call npm run build from components/dash-core-components?

~/plotly/dash/components/dash-core-components (dev)$ npm run build > dash-core-components@2.2.0 build > run-s prepublishOnly build:js build:backends > dash-core-components@2.2.0 prepublishOnly > rm -rf lib && babel src --out-dir lib --copy-files && rm -rf lib/jl/ lib/*.jl Successfully compiled 57 files with Babel (2102ms). > dash-core-components@2.2.0 prebuild:js > cp node_modules/plotly.js-dist-min/plotly.min.js dash_core_components_base/plotly.min.js > dash-core-components@2.2.0 build:js > webpack --mode production assets by chunk 4.32 MiB (id hint: async) assets by status 3.74 MiB [big] asset async-plotlyjs.js 3.49 MiB [compared for emit] [minimized] [big] (name: async-plotlyjs) (id hint: async) 1 related asset asset async-datepicker.js 258 KiB [compared for emit] [minimized] [big] (name: async-datepicker) (id hint: async) 1 related asset asset async-markdown.js 189 KiB [compared for emit] [minimized] (name: async-markdown) (id hint: async) 2 related assets asset async-dropdown.js 139 KiB [compared for emit] [minimized] (name: async-dropdown) (id hint: async) 2 related assets asset async-slider.js 129 KiB [compared for emit] [minimized] (name: async-slider) (id hint: async) 1 related asset asset async-highlight.js 102 KiB [compared for emit] [minimized] (name: async-highlight) (id hint: async) 1 related asset asset async-upload.js 19 KiB [compared for emit] [minimized] (name: async-upload) (id hint: async) 1 related asset asset async-graph.js 16.6 KiB [compared for emit] [minimized] (name: async-graph) (id hint: async) 1 related asset asset dash_core_components.js 730 KiB [emitted] [compared for emit] [minimized] [big] (name: main) 2 related assets asset dash_core_components-shared.js 14.3 KiB [compared for emit] [minimized] (name: dash_core_components-shared) (id hint: shared) 2 related assets orphan modules 1.22 MiB [orphan] 477 modules runtime modules 10.2 KiB 13 modules modules by path ./node_modules/ 6.14 MiB javascript modules 6.14 MiB 709 modules json modules 2.03 KiB 3 modules modules by path ./src/ 961 KiB modules by path ./src/components/ 123 KiB 16 modules modules by path ./src/fragments/*.js 123 KiB 8 modules modules by path ./src/utils/*.js 29.4 KiB 5 modules + 2 modules external "PropTypes" 42 bytes [built] [code generated] external "React" 42 bytes [built] [code generated] external "ReactDOM" 42 bytes [built] [code generated] ./util.inspect (ignored) 15 bytes [built] [code generated] WARNING in asset size limit: The following asset(s) exceed the recommended size limit (244 KiB). This can impact web performance. Assets: dash_core_components.js (730 KiB) async-datepicker.js (258 KiB) async-plotlyjs.js (3.49 MiB) WARNING in entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (244 KiB). This can impact web performance. Entrypoints: main (730 KiB) dash_core_components.js webpack 5.69.0 compiled with 2 warnings in 44207 ms > dash-core-components@2.2.0 build:backends > dash-generate-components ./src/components dash_core_components -p package-info.json && cp dash_core_components_base/** dash_core_components/ && dash-generate-components ./src/components dash_core_components -p package-info.json -k RangeSlider,Slider,Dropdown,RadioItems,Checklist,DatePickerSingle,DatePickerRange,Input,Link --r-prefix 'dcc' --r-suggests 'dash,dashHtmlComponents,jsonlite,plotly' --jl-prefix 'dcc' && black dash_core_components Generated Checklist.py Generated Clipboard.py Generated ConfirmDialog.py Generated ConfirmDialogProvider.py Generated DatePickerRange.py Generated DatePickerSingle.py Generated Download.py Generated Dropdown.py Generated Graph.py Generated Input.py Generated Interval.py Generated Link.py Generated Loading.py Generated Location.py Generated LogoutButton.py Generated Markdown.py Generated RadioItems.py Generated RangeSlider.py Generated Slider.py Generated Store.py Generated Tab.py Generated Tabs.py Generated Textarea.py Generated Tooltip.py Generated Upload.py Generated Checklist.py Generated dccChecklist.R Generated dcc_checklist.jl Generated Clipboard.py Generated dccClipboard.R Generated dcc_clipboard.jl Generated ConfirmDialog.py Generated dccConfirmDialog.R Generated dcc_confirmdialog.jl Generated ConfirmDialogProvider.py Generated dccConfirmDialogProvider.R Generated dcc_confirmdialogprovider.jl Generated DatePickerRange.py Generated dccDatePickerRange.R Generated dcc_datepickerrange.jl Generated DatePickerSingle.py Generated dccDatePickerSingle.R Generated dcc_datepickersingle.jl Generated Download.py Generated dccDownload.R Generated dcc_download.jl Generated Dropdown.py Generated dccDropdown.R Generated dcc_dropdown.jl Generated Graph.py Generated dccGraph.R Generated dcc_graph.jl Generated Input.py Generated dccInput.R Generated dcc_input.jl Generated Interval.py Generated dccInterval.R Generated dcc_interval.jl Generated Link.py Generated dccLink.R Generated dcc_link.jl Generated Loading.py Generated dccLoading.R Generated dcc_loading.jl Generated Location.py Generated dccLocation.R Generated dcc_location.jl Generated LogoutButton.py Generated dccLogoutButton.R Generated dcc_logoutbutton.jl Generated Markdown.py Generated dccMarkdown.R Generated dcc_markdown.jl Generated RadioItems.py Generated dccRadioItems.R Generated dcc_radioitems.jl Generated RangeSlider.py Generated dccRangeSlider.R Generated dcc_rangeslider.jl Generated Slider.py Generated dccSlider.R Generated dcc_slider.jl Generated Store.py Generated dccStore.R Generated dcc_store.jl Generated Tab.py Generated dccTab.R Generated dcc_tab.jl Generated Tabs.py Generated dccTabs.R Generated dcc_tabs.jl Generated Textarea.py Generated dccTextarea.R Generated dcc_textarea.jl Generated Tooltip.py Generated dccTooltip.R Generated dcc_tooltip.jl Generated Upload.py Generated dccUpload.R Generated dcc_upload.jl Generated src/DashCoreComponents.jl Generated Project.toml reformatted dash_core_components/Download.py reformatted dash_core_components/ConfirmDialog.py reformatted dash_core_components/Clipboard.py reformatted dash_core_components/ConfirmDialogProvider.py reformatted dash_core_components/Checklist.py reformatted dash_core_components/DatePickerSingle.py reformatted dash_core_components/Interval.py reformatted dash_core_components/Dropdown.py reformatted dash_core_components/Link.py reformatted dash_core_components/DatePickerRange.py reformatted dash_core_components/Graph.py reformatted dash_core_components/Loading.py reformatted dash_core_components/Location.py reformatted dash_core_components/LogoutButton.py reformatted dash_core_components/Markdown.py reformatted dash_core_components/RadioItems.py reformatted dash_core_components/Store.py reformatted dash_core_components/Input.py reformatted dash_core_components/RangeSlider.py reformatted dash_core_components/Slider.py reformatted dash_core_components/Tab.py reformatted dash_core_components/Tabs.py reformatted dash_core_components/_imports_.py reformatted dash_core_components/Tooltip.py reformatted dash_core_components/Upload.py reformatted dash_core_components/Textarea.py All done! ✨ 🍰 ✨ 26 files reformatted, 2 files left unchanged. > dash-core-components@2.2.0 postbuild > es-check es5 dash_core_components/*.js error: ES-Check: there were 3 ES version matching errors. info: ES-Check Error: ---- · erroring file: dash_core_components/async-mathjax.js · error: SyntaxError: Unexpected token (1:2543) · see the printed err.stack below for context ---- SyntaxError: Unexpected token (1:2543) at Parser.pp$4.raise (/home/plotly/dash/components/dash-core-components/node_modules/acorn/dist/acorn.js:3460:15) at Parser.pp$9.unexpected (/home/plotly/dash/components/dash-core-components/node_modules/acorn/dist/acorn.js:756:10) at Parser.pp$5.parseExprAtom (/home/plotly/dash/components/dash-core-components/node_modules/acorn/dist/acorn.js:2835:12) at Parser.pp$5.parseExprSubscripts (/home/plotly/dash/components/dash-core-components/node_modules/acorn/dist/acorn.js:2627:21) at Parser.pp$5.parseMaybeUnary (/home/plotly/dash/components/dash-core-components/node_modules/acorn/dist/acorn.js:2593:19) at Parser.pp$5.parseExprOps (/home/plotly/dash/components/dash-core-components/node_modules/acorn/dist/acorn.js:2520:21) at Parser.pp$5.parseMaybeConditional (/home/plotly/dash/components/dash-core-components/node_modules/acorn/dist/acorn.js:2503:21) at Parser.pp$5.parseMaybeAssign (/home/plotly/dash/components/dash-core-components/node_modules/acorn/dist/acorn.js:2470:21) at Parser.pp$5.parseMaybeAssign (/home/plotly/dash/components/dash-core-components/node_modules/acorn/dist/acorn.js:2488:25) at Parser.pp$5.parseMaybeAssign (/home/plotly/dash/components/dash-core-components/node_modules/acorn/dist/acorn.js:2488:25) info: ES-Check Error: ---- · erroring file: dash_core_components/async-mathjaxjs.js · error: SyntaxError: Unexpected token (1:2543) · see the printed err.stack below for context ---- SyntaxError: Unexpected token (1:2543) at Parser.pp$4.raise (/home/plotly/dash/components/dash-core-components/node_modules/acorn/dist/acorn.js:3460:15) at Parser.pp$9.unexpected (/home/plotly/dash/components/dash-core-components/node_modules/acorn/dist/acorn.js:756:10) at Parser.pp$5.parseExprAtom (/home/plotly/dash/components/dash-core-components/node_modules/acorn/dist/acorn.js:2835:12) at Parser.pp$5.parseExprSubscripts (/home/plotly/dash/components/dash-core-components/node_modules/acorn/dist/acorn.js:2627:21) at Parser.pp$5.parseMaybeUnary (/home/plotly/dash/components/dash-core-components/node_modules/acorn/dist/acorn.js:2593:19) at Parser.pp$5.parseExprOps (/home/plotly/dash/components/dash-core-components/node_modules/acorn/dist/acorn.js:2520:21) at Parser.pp$5.parseMaybeConditional (/home/plotly/dash/components/dash-core-components/node_modules/acorn/dist/acorn.js:2503:21) at Parser.pp$5.parseMaybeAssign (/home/plotly/dash/components/dash-core-components/node_modules/acorn/dist/acorn.js:2470:21) at Parser.pp$5.parseMaybeAssign (/home/plotly/dash/components/dash-core-components/node_modules/acorn/dist/acorn.js:2488:25) at Parser.pp$5.parseMaybeAssign (/home/plotly/dash/components/dash-core-components/node_modules/acorn/dist/acorn.js:2488:25) info: ES-Check Error: ---- · erroring file: dash_core_components/mathjax.js · error: SyntaxError: The keyword 'import' is reserved (1:0) · see the printed err.stack below for context ---- SyntaxError: The keyword 'import' is reserved (1:0) at Parser.pp$4.raise (/home/plotly/dash/components/dash-core-components/node_modules/acorn/dist/acorn.js:3460:15) at Parser.pp$5.checkUnreserved (/home/plotly/dash/components/dash-core-components/node_modules/acorn/dist/acorn.js:3367:12) at Parser.pp$5.parseIdent (/home/plotly/dash/components/dash-core-components/node_modules/acorn/dist/acorn.js:3396:12) at Parser.pp$5.parseExprAtom (/home/plotly/dash/components/dash-core-components/node_modules/acorn/dist/acorn.js:2759:21) at Parser.pp$5.parseExprSubscripts (/home/plotly/dash/components/dash-core-components/node_modules/acorn/dist/acorn.js:2627:21) at Parser.pp$5.parseMaybeUnary (/home/plotly/dash/components/dash-core-components/node_modules/acorn/dist/acorn.js:2593:19) at Parser.pp$5.parseExprOps (/home/plotly/dash/components/dash-core-components/node_modules/acorn/dist/acorn.js:2520:21) at Parser.pp$5.parseMaybeConditional (/home/plotly/dash/components/dash-core-components/node_modules/acorn/dist/acorn.js:2503:21) at Parser.pp$5.parseMaybeAssign (/home/plotly/dash/components/dash-core-components/node_modules/acorn/dist/acorn.js:2470:21) at Parser.pp$5.parseExpression (/home/plotly/dash/components/dash-core-components/node_modules/acorn/dist/acorn.js:2433:21)

OK. It looks like we need to empty some .gitignored directories when switching between different dev branches.
In this case:

./components/dash-core-components/lib/utils/LazyLoader/mathjax.js ./components/dash-core-components/deps/mathjax.js ./components/dash-core-components/inst/deps/mathjax.js ./components/dash-core-components/dash_core_components_base/mathjax.js ./components/dash-core-components/node_modules/mathjax-full/js/mathjax.js ./components/dash-core-components/node_modules/mathjax-full/components/src/core/lib/mathjax.js ./components/dash-core-components/dash_core_components/mathjax.js ./dash/dcc/mathjax.js

alexcjohnson added 8 commits February 16, 2022 19:09

tweak update_components script to exit on all failures

5268595

and cleaner formatting

IE11 compatibility for renderer, dcc, table

5b3745d

need to downgrade some fontawesome packages I *JUST* upgraded

remove webdriver-manager

9e92714

I think this was really just a misunderstanding of the cimg CI images

fix #1914 - text alignment in table headers

f5a9a0c

was introduced by #1788 - AFAICT this way still solves plotly/dash-table#867

changelog for ie11 fix PR

514eb54

tweak header css and add a test

ef8bf17

simplify table visual tests a bit

f2f57b7

Merge branch 'dev' into fix-ie11

49d2924

alexcjohnson added 2 commits February 17, 2022 16:46

Merge branch 'dev' into fix-ie11

2f70e59

wider table column actions test - since we aren't auto-wrapping these…

451ea2f

… anymore

alexcjohnson commented Feb 18, 2022

View reviewed changes

alexcjohnson merged commit 62cf1df into dev Feb 18, 2022

alexcjohnson deleted the fix-ie11 branch February 18, 2022 14:09

archmoj reviewed Feb 21, 2022

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Fix IE11 #1932

Fix IE11 #1932

alexcjohnson commented Feb 17, 2022 •

edited

Loading

archmoj commented Feb 17, 2022

alexcjohnson Feb 18, 2022

archmoj commented Feb 18, 2022

archmoj Feb 21, 2022 •

edited

Loading

archmoj Feb 21, 2022

alexcjohnson Feb 21, 2022

archmoj Feb 21, 2022

archmoj Feb 21, 2022

Fix IE11 #1932

Fix IE11 #1932

Conversation

alexcjohnson commented Feb 17, 2022 • edited Loading

archmoj commented Feb 17, 2022

alexcjohnson Feb 18, 2022

Choose a reason for hiding this comment

archmoj commented Feb 18, 2022

archmoj Feb 21, 2022 • edited Loading

Choose a reason for hiding this comment

archmoj Feb 21, 2022

Choose a reason for hiding this comment

alexcjohnson Feb 21, 2022

Choose a reason for hiding this comment

archmoj Feb 21, 2022

Choose a reason for hiding this comment

archmoj Feb 21, 2022

Choose a reason for hiding this comment

alexcjohnson commented Feb 17, 2022 •

edited

Loading

archmoj Feb 21, 2022 •

edited

Loading