[xyChart] When switching the seriesProps, the chart doesn't render first series

[mbondyra]

Describe the bug
When I want to programatically reorder yAccessors in xy_chart, the first series is not displayed.
I’ve simplified the example here in codesandbox – toggle the 'click' button - the series should switch and display in order from [1,2,3] to [2,1,3], but only the second and third series is visible.

https://codesandbox.io/s/charts-interval-bug-l8th9?file=/src/App.tsx

Version (please complete the following information):

• current Kibana version (master)

[markov00]

The root cause is the specComponentFactory. We are in the following situation:

• we have two components with respective ids A and B
• this got "parsed" and stored in our state
• the consumer the switch the ids of the two components: the first component (previously with id A) becomes the one with id B and the second component (previously with id B) becomes A.
  Because we are processing these specs sequentially following the React life cycle, the first component calls the following part of the specComponentFactory

if (prevId && prevId !== props.id) {
    removeSpec(prevId);
}
upsertSpec(SpecInstance);

this removes the prevId spec (the A for the first component) and then add the spec B to the store.
Then it's time for the second component. the id of the component has changed so it follows the same path as the previous one: removes the spec B (its previous ID) and then upsert the spec A, but the removed spec B is not the old one, but a new one, the new one provided by the first component.

[markov00]

🎉 This issue has been resolved in version 24.1.0 🎉

The release is available on:

• GitHub release
• npm package (@latest dist-tag)

Your semantic-release bot 📦🚀