Dynamic filename for image download

plotly.js
1

Curious about getting plotly to accept a dynamic filename in react / plotly.js. I can successfully manage the desired name in a state variable. But once the plot is created, the image name is set, and doesn’t recognize the subsequent changes that could occur through changes in variable values.

For instance:

const [imageName, setImageName] = useState("my chart-" + var1 + "-" + var2);

  const dlButton = {
  name: "downloadHighRes",
  title: "Download Image",
  icon: downloadIcon,
  click: (gd: any) => {
    Plotly.downloadImage(gd, {
      format: "png",
      width: 1920,
      height: 1080,
      filename: imageName,
    });
  },
};

used in chart config:

const chartConfig: any = {
    responsive: true,
    modeBarButtonsToAdd: [
      dlButton,
    ],
  };

That is applied to the chart:

<Plot
  data={data}
  layout={layout as Partial<Plotly.Layout>}
  config={chartConfig}
...

Im trying to use a function that creates the button, and call it each time the imageName changes:

  const updateButtonConfig = () => {
    if (plotInstance) {
      Plotly.newPlot(plotInstance, plotInstance.data, plotInstance.layout, {
        modeBarButtonsToAdd: [
          {
            name: "downloadHighRes",
            title: "Download Image",
            icon: downloadIcon,
            click: () => {
              Plotly.downloadImage(plotInstance, {
                format: "png",
                width: 1920,
                height: 1080,
                filename: imageName,
              });
            },
          },
        ],
      });
    }
  };

useEffect:

  useEffect(() => {
    updateButtonConfig();
  }, [imageName, plotInstance]);

I’m sure I need to layer in a plot refresh or redraw after updateButtonConfig; I’m just not sure if that will work for modebar buttons, or if anyone has gone through this if they could show me a simple way.

Thanks,