Hide sections with no valid properties

[rreusser]

The presence or lack of an attribute value in fullData is enough to hide or show the corresponding field automatically. Visibility of the section headings isn't free. It might be necessary to traverse the config and hide/show them accordingly, depending on whether any specific fields are present or not.

[chriddyp]

The presence or lack of an attribute value in fullData is enough to hide or show the corresponding field automatically.

Just to throw in my 2 cents from creating the panels in the workspace. I found that for some types of UIs I couldn't solely depend on this. For some examples, look through the visibility property of the different schemas.

I'm not sure how this repo is implementing these panels and so it may be possible to build out this type of UI without a property like this. Just wanted to give you a heads up.

One example that I recall is with Box Plots and Display Points:

Display Points - None

Display Points - Suspected & Outliers

Display Points - Outliers

Display Points - All

Note how the same attributes have different names depending on what was selected. In "schema" way of doing things, I was hiding and showing controls using visibility for the same attribute. FOr example, box.marker.color changes between "Outlier Color" and "Fill" depending on whether display points is "all" vs "outliers". See https://github.com/plotly/streambed/blob/5f0363ec499ae897166927c60f478f4c9ba750dc/shelly/webapp/static/webapp/src/workspace/schemas/Traces.js#L2039-L2091 for how this was defined.

---

There were several other cases where plotly.js didn't remove the attribute from _fullData. Some of these attributes might just be considered bugs and could be fixed. When I wrote the original style panels, I decided to just be explicit about how and when things should be visible rather than wait on plotly.js releases. Here are some of these cases:

• If the symbol has open in it, then marker.line.width and marker.line.color doesn't visibly change anything. Since it doesn't do anything, we hide it: https://github.com/plotly/streambed/blob/5f0363ec499ae897166927c60f478f4c9ba750dc/shelly/webapp/static/webapp/src/workspace/schemas/Traces.js#L2097-L2103
• box.jitter is hidden unless box.boxpoints is all: https://github.com/plotly/streambed/blob/5f0363ec499ae897166927c60f478f4c9ba750dc/shelly/webapp/static/webapp/src/workspace/schemas/Traces.js#L2033
• We hide the "Display in legend" option inside the traces panel if the legend is hidden: https://github.com/plotly/streambed/blob/5f0363ec499ae897166927c60f478f4c9ba750dc/shelly/webapp/static/webapp/src/workspace/schemas/Traces.js#L117-L130
• histogram binning options change depending on the axis type: https://github.com/plotly/streambed/blob/5f0363ec499ae897166927c60f478f4c9ba750dc/shelly/webapp/static/webapp/src/workspace/schemas/Traces.js#L215-L303
• hiding contour.line.color unless contours.coloring is lines: https://github.com/plotly/streambed/blob/5f0363ec499ae897166927c60f478f4c9ba750dc/shelly/webapp/static/webapp/src/workspace/schemas/Traces.js#L1619-L1630
• hiding contour.show unless layout.hovermode is closest: https://github.com/plotly/streambed/blob/5f0363ec499ae897166927c60f478f4c9ba750dc/shelly/webapp/static/webapp/src/workspace/schemas/Traces.js#L1825-L1835

anyway, lots more these files https://github.com/plotly/streambed/tree/5f0363ec499ae897166927c60f478f4c9ba750dc/shelly/webapp/static/webapp/src/workspace/schemas. I took a lot of time to carefully think about those UIs and tried to make sure that we only displayed attributes that had an effect on the plot and that we updated the labels of the attributes (like box.marker.color) depending on the values of the rest of the attributes.

[bpostlethwaite]

Thanks @chriddyp for the thorough write up! You are totally right that there are a tonne of great UI improvements in those schemas. I'll try hard to maintain them.

The hope is to take these UI wins from the Workspace2 and rebuild them as best as possible on top of something like the simpler approach taken in Workspace1.

When we encounter inconsistencies in fullData they will be treated as plotly.js bugs and we'll fix them as blockers for this project. When it isn't possible to resolve the issue in plotly.js the idea is to break from the 1:1 attribute UI framework with specialty components. For example the TraceSelector patches the input and outputs of the Editor widget machinery to allow "area" and "line" traces.

I'm not exactly sure how we'll figure out some of the other deviations yet (and we might have to drop some) but the intent is to rely on plotly.js data with no additional stateful abstraction layer while presenting an external API for building panels that is bread and butter JSX (example:
https://github.com/plotly/react-plotly.js-lab/blob/master/src/components/app.js#L185)

[bpostlethwaite]

Done! Though there are outstanding visibility questions open in other issues.