How to improve Treemap render when changing the depth attribute

plotly.js
1

I’m displaying a directory structure in a Treemap using react-plotly.js. Everything works great for smaller directories, but when the directory is very large, the Treemap is slow to render, which isn’t a big deal for the first render.

I include a slider to change the depth. This is where I’m looking to speed up how quickly the Treemap renders. Is there a way I can speed up the rendering of the Treemap when the depth is changed?

Here’s my code:

import * as React from "react";
import Plot from "react-plotly.js";
import { Button, Slider, TextField } from "@mui/material";

const marks = [
  {
    label: "-1",
    value: -1
  },
  {
    label: "2",
    value: 2
  },
  {
    label: "3",
    value: 3
  },
  {
    label: "4",
    value: 4
  }
];

export default function Treemap() {
  const [directory, setDirectory] = React.useState("");
  const [data, setData] = React.useState([]);
  const [depth, setDepth] = React.useState(2);

  const plotLayout = {
    width: 700,
    height: 500,
    margin: {
      t: "25",
      r: "25",
      b: "25",
      l: "25"
    }
  };

  const handlePlotData = (response) => {
    const dir = response.directory;

    const newData = [
      {
        branchvalues: "total",
        ids: dir.ids,
        labels: dir.labels,
        parents: dir.parents,
        values: dir.values,
        maxdepth: depth,
        type: "treemap",
        hovertemplate: "<b>%{text}</b><extra></extra>",
        textinfo: "label",
        root: {
          color: "lightgrey"
        }
      }
    ];

    setData(newData);

  };

  const handleButtonClick = () => {
    // POST to backend not included here
    // where handlePlotData is called
  };

  React.useEffect(() => {
    const [prevObject] = data;
    const prevData = { ...prevObject, maxdepth: depth };
    setData([prevData]);
  }, [depth]);

  return (
    <div>
      <TextField
        id="directory"
        label="Outlined"
        variant="outlined"
        fullWidth
        value={ directory }
        onChange={ (event) => setDirectory(event.target.value) }
      />
      <Button handleClick={ handleButtonClick }>Click</Button>
      <Slider
        aria-label="Depth"
        value={ depth }
        valueLabelDisplay="auto"
        marks={ marks }
        step={ null }
        min={ -1 }
        max={ 4 }
        onChange={ (event) => setDepth(event.target.value) }
      />
      <Plot data={ data } layout={ plotLayout } />
    </div>
  );
}