plotly.js theme / style extraction and application

initial requirements

1. Generic style only. Items that apply to any data setup such as trace color, size, background, and fonts are applied.
2. The template data shall be stored without any design point data. For example, the x and y source data shall not be included. If an attribute such as color, size, or opacity is bound to a variable (has individual values), then the individual values will not be stored.
3. The template shall be applied to an existing graph (a new graph is not generated).
4. A mechanism shall be enabled through the API to report items from the template that do not apply. Example 1) The template has a different number of traces than the plot to which it is being applied. Example 2) The template is from a line plot and being applied to a heat map, therefore the point glyph cannot be applied.

cc @alexcjohnson @etpinard for implementation discussions cc @chriddyp @sglyon for possible applications to and requirements of plotly.[py|jl] and Dash cc @nicolaskruchten @VeraZab for general input.

To get the conversation rolling how about I take a stab at an API:

const figureStyle = plotly.extractStyle(gd || {data, layout}, config)
const info = plotly.applyStyle(gd || {data, layout}, {figureStyle [, config]} [, config])

where info is an object containing a subset of the structure in figureTheme documenting each item that was not applied and possibly an optional reason why it was not applied.

note: It would be great if this operation was immutable however point 3. requires mutation. Perhaps someone has suggestions for an API that allows both immutable application and mutation.

[alexcjohnson]

Plotly.extractStyle looks great - I’m assuming config is potential config for the extraction operation itself, as opposed to the plot config as in newPlot? I might change the name to extractTemplate or makeTemplate, which would accommodate future expansion beyond style information.

I don’t think mutation itself (of data and layout) is a requirement, just the ability to update an existing plot (replacing gd.data and gd.layout)… so if we use:

// or Plotly.applyTemplate
const {info, figureWithStyle} = Plotly.applyStyle(gd || {data, layout}, {figureStyle [, config]} [, config])

then we can follow it up with:

Plotly.react(gd, figureWithStyle);

It’s less compact to apply the style this way, but it feels to me like it may be preferable as it would give the dev a chance to look at info and decide if the templating worked as intended before going ahead and plugging the result into the plot.

The config can control whether the data arrays are cloned or referenced.

I would assume referenced is better and omit cloning until someone explicitly asks.

[etpinard]

Most of it was merged in https://github.com/plotly/plotly.js/pull/2761 and release in 1.39.0, but I suspect there’s a few open items remaining and @alexcjohnson wanted to keep this ticket open to track them.