Bar transition oddities

[nicolaskruchten]

In this pen which is in "layout first" transition ordering, there seems to be an extra bar-height jump: https://codepen.io/nicolaskruchten/pen/WNNeZgz?editors=0010

[etpinard]

Hmm. Interesting, scatter seems to behave the same: https://codepen.io/etpinard/pen/dyyPvvZ?editors=0010

[etpinard]

... and by the way, transition.ordering: 'layout first' is the default:

plotly.js/src/plots/animation_attributes.js

Lines 123 to 133 in bead43f

	ordering: {
	valType: 'enumerated',
	values: ['layout first', 'traces first'],
	dflt: 'layout first',
	role: 'info',
	editType: 'none',
	description: [
	'Determines whether the figure\'s layout or traces smoothly transitions',
	'during updates that make both traces and layout change.'
	].join(' ')
	}

[nicolaskruchten]

Yep, I know, I was just calling attention to it and making it easier to change to the non-default options in the pen ;)

[etpinard]

After some investigations, it doesn't look like bar/plot.js (cc @antoinerg ) is doing anything that results in any discrepancies between bar and scatter transitions.

Layout + traces transitions don't look very good at the moment, but they don't look any worse than what was proposed in #3217

So, this ticket is essentially a duplicate of #1687

[nicolaskruchten]

I agree in principle, although solving the double-jump issue seems easier than solving #1687 altogether... what does that first jump represent? The middle point/bar jumps from 4 to 5, then the yaxis range smoothly transitions along with the point/bar, then the point/bar jumps from 5 to 6. I would expect that under layout-first the first jump wouldn't happen, and the point/bar would jump from 4 to 6... ?

[etpinard]

although solving the double-jump issue seems easier than solving

Double jump? In the gif above I can only detect one "jump"

what does that first jump represent?

Here's the current logic under transition.ordering: 'layout first':

plotly.js/src/plots/plots.js

Lines 2617 to 2621 in bead43f

	axisTransitionOpts = transitionOpts;
	transitionedTraces = null;
	traceTransitionOpts = Lib.extendFlat({}, transitionOpts, {duration: 0});
	transitionAxes();
	transitionTraces();

• We first transition the y-axis range from ~ [3,5] to ~ [3,6] while not updating the trace position
• Then, we update the trace position instantaneously from y=[3,4,5] to y=[3,6,5] (aka the "jump")

[nicolaskruchten]

You don’t see the immediate jump 4-5, then slide, then jump 5-6?

[etpinard]

... so w/o the "jump" at the end of the transition we'd get: the correct y-axis range of ~ [3,6] but the trace would have coordinates y=[3,4,5].

[nicolaskruchten]

Yeah the jump at the end is fine. This issue is about the first jump :)

[etpinard]

Ah now I see it, there's a race condition in:

plotly.js/src/plots/plots.js

Lines 2617 to 2621 in bead43f

	axisTransitionOpts = transitionOpts;
	transitionedTraces = null;
	traceTransitionOpts = Lib.extendFlat({}, transitionOpts, {duration: 0});
	transitionAxes();
	transitionTraces();

Sorry for the confusion!

Codepen attempt: https://codepen.io/etpinard/pen/oNNgGem?editors=0010

[etpinard]

Scatter version: https://codepen.io/etpinard/pen/NWWPaaR?editors=0010

[nicolaskruchten]

phew! Those pens look like what I would expect, yep!