Slider for only one trace

plotly.js
1

I have a contour plot mixed with scatter plot.

image

I would like to be able to use slider to change only the dots in scatter plot.

With my current code, on each change the contour plot is redrawn which results in blinking.

Here are relevant snippets from my current code:

for (let i = 0; i < frames.length; i++) {
//  ...
    let name = '' + (i + 1);
    steps[i] = {
      method: 'animate',
      args: [[name], {
        mode: 'immediate',
        frame: {redraw: true, duration: 500},
        transition: {duration: 500}
      }]
    };

    frames[i] = {
      name: name,
      data: [
        {},
        {
          x: x,
          y: y,
        }
      ]
    }
  }

 Plotly.react(t3.node, {
     data: [{
       x: data.x,
       y: data.y,
       z: data.z,
       type: 'contour',
       colorscale: 'Bluered', // Jet
     }, {
       x: [optimum[0]],
       y: [optimum[1]],
       mode: 'markers',
       marker: {
         color: 'rgb(248,248,255)',
         size: 16,
         line: {
           color: 'rgba(0,0,0)',
           width: 4,
         }
       }
     }],
     layout: {
       updatemenus: [{ x: 0,
         y: 0,
         type: 'buttons',
         buttons: [{
           method: 'animate',
           args: [null, {
             mode: 'immediate',
             fromcurrent: true,
             transition: {duration: 300},
             frame: {duration: 500, redraw: true}
           }],
           label: 'Play'
         }, {
           method: 'animate',
           args: [[null], {
             mode: 'immediate',
             transition: {duration: 0},
             frame: {duration: 0, redraw: true}
           }],
           label: 'Pause'
         }]
       }],
       sliders: [{
         pad: {t: 30},
         x: 0.05,
         len: 0.95,
         currentvalue: {
           visible: false
         },
         transition: {duration: 500},
         steps: steps,
         ticklen: 0
       }],
       margin: {t: 28, r: 28, b: 28, l: 28}
     },
     config: t3.config(),
     frames: frames
   }
  ).then(resize);

I if set redraw to false, the contour plot is removed and only the scatter plot is visible.

2

You need to set the traces key in each frame.

See example: https://codepen.io/etpinard/pen/JZRXME?editors=1010