Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Hide sections with no valid properties #6

Closed
rreusser opened this issue Oct 13, 2017 · 3 comments
Closed

Hide sections with no valid properties #6

rreusser opened this issue Oct 13, 2017 · 3 comments
Assignees
Labels

Comments

@rreusser
Copy link
Contributor

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.

screen shot 2017-10-13 at 15 14 32

@rreusser rreusser self-assigned this Oct 13, 2017
@chriddyp
Copy link
Member

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
image

Display Points - Suspected & Outliers
image

Display Points - Outliers
image

Display Points - All
image

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:

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
Copy link
Member

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
Copy link
Member

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

3 participants