Performance

stats shows an overlay of draw time, frame rate and pool sizes. Turn it on while you tune, and watch the draws count: it stops climbing whenever nothing is moving, because at rest nothing is drawn. Only a pulse, an animated renderer or a transition on screen asks for frames.

Running the code below: performance.tsx

import { useState } from "react";
import { createSceneSource, DataExplorer, type ExplorerEdge } from "@data-xplorer/core";

// A thousand items and some edges, with the stats overlay on: draw time, frame rate, pool sizes.
const COUNT = 1_000;
let seed = 7;
const random = () => ((seed = (seed * 16807) % 2147483647) - 1) / 2147483646; // repeatable

const nodes = Array.from({ length: COUNT }, (_, i) => ({
  id: `n${i}`,
  label: `Item ${i}`,
  weight: 1 + Math.floor(random() * 100),
  href: `#n${i}`,
  drillsInto: null,
  shape: (i % 5 === 0 ? "square" : "disc") as "square" | "disc",
  ramp: random(),
}));
const edges: ExplorerEdge[] = Array.from({ length: 800 }, (_, i) => ({
  id: `e${i}`,
  sourceId: `n${Math.floor(random() * COUNT)}`,
  targetId: `n${Math.floor(random() * COUNT)}`,
  kind: "link",
}));
const source = createSceneSource<null>({
  load: () => ({ id: "many", heading: `${COUNT} items`, clusters: [], nodes, edges }),
});

export default function Performance() {
  const [max, setMax] = useState(0);
  return (
    <>
      <div className="demo-toolbar">
        {[0, 200, 500, 800].map((n) => (
          <button key={n} aria-pressed={max === n} onClick={() => setMax(n)}>
            {n === 0 ? "No edges" : `${n} edges`}
          </button>
        ))}
      </div>
      <DataExplorer
        source={source}
        focus={null}
        stats // the overlay, top left; read once at mount
        edges={{ visible: max > 0, max }} // at most `max` edges drawn (the default is 500)
      />
    </>
  );
}

Measured on desktop Chrome (Apple silicon), canvas 1102 × 631 at a device pixel ratio of 2: the rolling average draw time over 300 small zoom steps.

Scene	Fit to view	Zoomed in about 6×
1,000 plain items	1.65 ms	1.41 ms
1,000 items with 500 edges, a texture each and custom renderers	3.39 ms	2.71 ms

Edges (1,000 items)	Draw time
500 straight	2.3 ms
2,000 straight	2.9 ms
2,000 curved	5.4 ms
2,000 dashed	18.0 ms
1,000 curved, dashed, with arrows	11.2 ms

The defaults come from these measurements: at most 500 edges, 200 custom views and 128 textures (32 MB) at once. They were measured on a desktop, and a phone is several times slower, so check yours before raising them. Dashes are the expensive edge style, because each dash is its own geometry.

The package itself adds about 23 KB (gzipped) to the page that uses it, and 11 KB more when the first explorer mounts, besides PixiJS and React.