Merge branch 'dev' into fix-graph-customdata-for-pointnumbers

Author: alexcjohnson

.circleci/config.yml

@@ -54,7 +54,7 @@ jobs:
             pip install -e .[ci,dev,testing,celery,diskcache] --progress-bar off
             pip list | grep dash
             npm i
-            npm run build
+            npm run build.sequential
             python setup.py sdist
             mkdir dash-package && cp dist/*.tar.gz dash-package/dash-package.tar.gz
             ls -la dash-package
@@ -120,7 +120,7 @@ jobs:
             set -eo pipefail
             pip install -e . --progress-bar off && pip list | grep dash
             npm install npm run initialize
-            npm run build
+            npm run build.sequential
             npm run lint
       - run:
           name: 🐍 Python Unit Tests & ☕ JS Unit Tests

CHANGELOG.md

@@ -2,6 +2,30 @@
 All notable changes to `dash` will be documented in this file.
 This project adheres to [Semantic Versioning](https://semver.org/).
 
+## [Unreleased]
+
+### Added
+- [#1949](https://github.com/plotly/dash/pull/1915) Add built-in MathJax support to both `dcc.Markdown` and `dcc.Graph`. A new boolean prop `mathjax` was added to these two components, defaulting to `False`. Set `mathjax=True` to enable math rendering. This work uses MathJax v3, although `dcc.Graph` and Plotly.js can also be used with MathJax v2.
+  - In `dcc.Markdown` this has two flavors: inline math is any content between single dollar signs, for example `"$E=mc^2$"`, and "display" math (on its own line, potentially multi-line) is delimited by double dollar signs.
+  - In `dcc.Graph`, most text fields (graph and axis titles, trace names, scatter and bar text) can use math, and it's enabled with single dollar sign delimiters. A limitation here is that currently a given piece of text can only be one or the other: if math is found, everything outside the delimiters is ignored. See https://plotly.com/python/LaTeX/ for details.
+  - For an intro to LaTeX math, see https://en.wikibooks.org/wiki/LaTeX/Mathematics.
+  - Big thanks to [Equinor](https://www.equinor.com/) for sponsoring this development, including the related work in Plotly.js!
+
+### Updated
+- [#1949](https://github.com/plotly/dash/pull/1915) Upgrade Plotly.js to v2.11.0 (from v2.9.0)
+  - [Feature release 2.10.0](https://github.com/plotly/plotly.js/releases/tag/v2.10.0):
+    - Support for MathJax v3
+    - `fillpattern` for `scatter` traces with filled area
+  - [Feature release 2.11.0](https://github.com/plotly/plotly.js/releases/tag/v2.11.0):
+    - Every trace type can now be rendered in a stricter CSP environment, specifically avoiding `unsafe-eval`. Please note: the `regl`-based traces (`scattergl`, `scatterpolargl`, `parcoords`, and `splom`) are only strict in the `strict` bundle, which is NOT served by default in Dash. To use this bundle with Dash, you must either download it and put it in your `assets/` folder, or include it as an `external_script` from the CDN: https://cdn.plot.ly/plotly-strict-2.11.0.min.js. All other trace types are strict in the normal bundle.
+  - Patch release [2.10.1](https://github.com/plotly/plotly.js/releases/tag/v2.5.1) containing a bugfix for `mesh3d` traces.
+
+
+### Fixed
+- [#1915](https://github.com/plotly/dash/pull/1915) Fix bug [#1474](https://github.com/plotly/dash/issues/1474) when both dcc.Graph and go.Figure have animation, and when the second animation in Figure is executed, the Frames from the first animation are played instead of the second one.
+
+- [#1953](https://github.com/plotly/dash/pull/1953) Fix bug [#1783](https://github.com/plotly/dash/issues/1783) in which a failed hot reloader blocks the UI with alerts.
+
 ## [2.2.0] - 2022-02-18
 
 ### Added

components/dash-core-components/.eslintignore

@@ -4,6 +4,7 @@ lib/
 lib/bundle.js*
 coverage/
 node_modules/
+packages/
 .npm
 vv/
 venv/

components/dash-core-components/.gitignore

@@ -19,6 +19,7 @@ venv/
 /build
 /dash_core_components
 dash_core_components_base/plotly.min.js
+dash_core_components_base/mathjax.js
 /deps
 /inst
 /man

components/dash-core-components/CONTRIBUTING.md

@@ -31,9 +31,9 @@ you've pulled from upstream otherwise you may be running with an out of date
 `bundle.js`. See the instructions for building `bundle.js` in the [Testing
 Locally](README.md#testing-locally) section of README.md.
 
-## Updating Plotly.js
+## Updating official version of Plotly.js
 
-1. Update the version of `plotly.js` in package.json. Always use an exact version without "^" or "~"
+1. Update the version of `plotly.js-dist-min` in package.json. Always use an exact version without "^" or "~"
 2. Run `npm install` followed by `npm run build`, the Plotly.js artifact will be copied and bundled over as required
 4. Update `CHANGELOG.md` with links to the releases and a description of the changes. The message should state (see the existing `CHANGELOG.md` for examples):
     * If you're only bumping the patch level, the heading is "Fixed" and the text starts "Patched plotly.js". Otherwise the heading is "Updated" and the text starts "Upgraded plotly.js"
@@ -42,6 +42,11 @@ Locally](README.md#testing-locally) section of README.md.
     * All patch versions included, with links to their release pages and a note that these fix bugs
 5. When bumping the dcc version, a plotly.js patch/minor/major constitutes a dcc patch/minor/major respectively as well.
 
+### Using a temporary `plotly.js-dist-min` package (or other dependencies)
+
+> During integrated development of new features or bug fixes in plotly.js and dash, it may be required to install a temporary plotly.js-dist-min package (or other packages) including proposed changes. To do so, please place the `.tgz` file in `packages/` folder then `npm install` the file.
+
+
 ## Financial Contributions
 
 If your company wishes to sponsor development of open source dash components, please [get in touch][].

components/dash-core-components/dash_core_components_base/__init__.py

@@ -48,6 +48,7 @@
     "graph",
     "highlight",
     "markdown",
+    "mathjax",
     "slider",
     "upload",
 ]

components/dash-core-components/package-lock.json

@@ -23,7 +23,7 @@
     "test": "run-s -c lint test:intg test:pyimport",
     "test:intg": "pytest --nopercyfinalize --headless tests/integration",
     "test:pyimport": "python -m unittest tests/test_dash_import.py",
-    "prebuild:js": "cp node_modules/plotly.js-dist-min/plotly.min.js dash_core_components_base/plotly.min.js",
+    "prebuild:js": "cp node_modules/plotly.js-dist-min/plotly.min.js dash_core_components_base/plotly.min.js && cp node_modules/mathjax/es5/tex-svg.js dash_core_components_base/mathjax.js",
     "build:js": "webpack --mode production",
     "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",
     "build": "run-s prepublishOnly build:js build:backends",
@@ -46,9 +46,10 @@
     "fast-isnumeric": "^1.1.4",
     "file-saver": "^2.0.5",
     "highlight.js": "^11.4.0",
+    "mathjax": "^3.2.0",
     "moment": "^2.29.1",
     "node-polyfill-webpack-plugin": "^1.1.4",
-    "plotly.js-dist-min": "2.9.0",
+    "plotly.js-dist-min": "2.11.0",
     "prop-types": "^15.7.2",
     "ramda": "^0.27.1",
     "rc-slider": "^9.7.5",
@@ -60,6 +61,7 @@
     "react-resize-detector": "^6.7.6",
     "react-select-fast-filter-options": "^0.2.3",
     "react-virtualized-select": "^3.1.3",
+    "remark-math": "^3.0.1",
     "uniqid": "^5.4.0"
   },
   "devDependencies": {

components/dash-core-components/package.json

@@ -0,0 +1 @@
+Folder to place temporary modules e.g. plotly.js-dist-min in .tgz format

components/dash-core-components/packages/README.md

@@ -4,6 +4,7 @@ import PropTypes from 'prop-types';
 import {asyncDecorator} from '@plotly/dash-component-plugins';
 import graph from '../utils/LazyLoader/graph';
 import plotly from '../utils/LazyLoader/plotly';
+import lazyLoadMathJax from '../utils/LazyLoader/mathjax';
 import {
     privatePropTypes,
     privateDefaultProps,
@@ -21,6 +22,10 @@ class PlotlyGraph extends Component {
     constructor(props) {
         super(props);
 
+        if (props.mathjax) {
+            PlotlyGraph._loadMathjax = true;
+        }
+
         this.state = {
             prependData: [],
             extendData: [],
@@ -120,7 +125,11 @@ class PlotlyGraph extends Component {
 }
 
 const RealPlotlyGraph = asyncDecorator(PlotlyGraph, () =>
-    Promise.all([plotly(), graph()]).then(([, graph]) => graph)
+    Promise.all([
+        graph(),
+        plotly(),
+        PlotlyGraph._loadMathjax ? lazyLoadMathJax() : undefined,
+    ]).then(([graph]) => graph)
 );
 
 const ControlledPlotlyGraph = memo(props => {
@@ -266,6 +275,11 @@ PlotlyGraph.propTypes = {
      */
     className: PropTypes.string,
 
+    /**
+     * If true, loads mathjax v3 (tex-svg) into the page and use it in the graph
+     */
+    mathjax: PropTypes.bool,
+
     /**
      * Beta: If true, animate between updates using
      * plotly.js's `animate` function
@@ -574,6 +588,7 @@ PlotlyGraph.defaultProps = {
         frames: [],
     },
     responsive: 'auto',
+    mathjax: false,
     animate: false,
     animation_options: {
         frame: {