Comments (3)
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 - Suspected & Outliers
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, thenmarker.line.width
andmarker.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 unlessbox.boxpoints
isall
: 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
unlesscontours.coloring
islines
: https://github.com/plotly/streambed/blob/5f0363ec499ae897166927c60f478f4c9ba750dc/shelly/webapp/static/webapp/src/workspace/schemas/Traces.js#L1619-L1630 - hiding
contour.show
unlesslayout.hovermode
isclosest
: 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.
from react-chart-editor.
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)
from react-chart-editor.
Done! Though there are outstanding visibility questions open in other issues.
from react-chart-editor.
Related Issues (20)
- Legend Group Dropdown doesn't display selected option
- settings for subplot
- Different map tile provider HOT 1
- jupyterlab-chart-editor build issues HOT 4
- Action Required: Fix Renovate Configuration HOT 1
- Incorrect styling for foldable section HOT 3
- React 16 HOT 2
- Enable webgl for scatter by default? HOT 1
- TypeScript declarations HOT 1
- Bar chart with base defined
- Trying to get in touch regarding a security issue HOT 2
- Dependency Dashboard
- [Question] Is there a way to limit the max number of traces? HOT 1
- Translation for Editor HOT 2
- Compiled version of dependency NextJS
- missing translation keys
- LaTeX editor doesn't work
- Can Chart Editor Supports Angular ?
- Editing titles within the plot doesn't call onUpdate HOT 1
- Incomplete translation
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-chart-editor.