mrc-5484 Link x-axes across multiple graphs #209
Conversation
| } | ||
| }, | ||
| components: { | ||
| WodinPlot | ||
| }, | ||
| setup(props) { | ||
| emits: ["updateXAxis"], |
There was a problem hiding this comment.
best to type as well 😄
| }; | ||
| }; | ||
|
|
||
| const relayout = async (event: PlotRelayoutEvent) => { |
There was a problem hiding this comment.
| const relayout = async (event: PlotRelayoutEvent) => { | |
| const reLayout = async (event: PlotRelayoutEvent) => { |
There was a problem hiding this comment.
I think I'm going to leave this as is, since this is a Plotly word, and it doesn't capitalise the l wherever 'relayout` appears, so I think it would be inconsistent if we did.
| }; | ||
|
|
||
| const relayout = async (event: PlotRelayoutEvent) => { | ||
| if (event["xaxis.autorange"] || (event["xaxis.range[0]"] && event["xaxis.range[1]"])) { |
There was a problem hiding this comment.
whats the reason for accessing with [] brackets? and not with dot notation? which is much safer 😄
There was a problem hiding this comment.
Because for some reason, this is a flat single level dictionary object but the dictionary keys are things like "xaxis.range[0]", implying a more nested structure, so it wouldn't work if you just went event.xaxis.range[0] as it would expect to find that non-existent nested structure... I don't really know why Plotly have done it this way.. but they have!
| const longestVar = graphsGetters[GraphsGetter.allSelectedVariables].sort((a: string, b: string) => | ||
| a.length < b.length ? 1 : -1 | ||
| )[0]; | ||
| return longestVar.length * 10 + 40; |
There was a problem hiding this comment.
would be get these names as variables
There was a problem hiding this comment.
Do you mean unmagic these numbers? Will do.
This branch implements synchronising the x axes when there are multiple graphs on the Run Tab - in other words, when the user zooms in on one graph, changing the x axis zoom from the default, the other graphs should likewise zoom to the same x axis range, so the user can view values for all variables across the same time sub-range.
The mechanism for doing this is through a shared
linkedXAxisprop which is emitted to the parent tab, and propagated to all child graphs by updating the prop value. This prop is optional, as not all graphs have linked x axes (it's not yet in Sensitivity, and possibly won't ever be in Fit).I've lightly refactored the plot updating code, which was already a bit of a confusing tangle, and added some comments which I find meaningful, but let me know if that doesn't work for you! I have added a
lastYAxisFromZoomvalue to the plot, which enables a previous Y-only zoom to be retained, across an x-axis emit and propagate. This value will be overriden by locked y axis range, if any.Lock y axis currently behaves weirdly if you have multiple graphs because the final graph's current y axis range is used and propagates to the other graphs. This will be fixed in the next ticket when we have separate graph settings for each graph.
We also set the right margin on the plot so that legend width is fixed for all graphs. We currently just use a heuristic to calculate a reasonable width from the maximum variable length.
As mentioned in standup, I've added an id to the GraphConfig which can be used as a key for the plot component - this is so that the component and its internal state (particularly
lastYAxisFromZoom) can be retained when an earlier plot is deleted (which is not the case if you just use the array index as the key). This id is a generated uid, which is not serialised (so that sessions which only differ by this id are correctly identified as duplicates).Some outstanding issues:
(mean)to some variable labels... It's also going to be wider than it needs to be for Fit potentially, which does not show all selected variables, only the linked ones.