Function Graph

packages/website/src/components/Graph.tsx:25–136

({ data, width, height })

  width?: number;
  height?: number;
}> = ({ data, width, height }) => {
  const fgRef = useRef<any>(undefined);

  let angle = 0;
  let cam: NodeJS.Timeout;

  const createCamMovement = () => {
    cam = setInterval(() => {
      // next available frame
      requestAnimationFrame(() => {
        const pos = fgRef.current.cameraPosition();
        // find the distance from the current camera position, taking into account the angle
        const distance = pos.z ?? 1400;

        // const distance = fgRef.current?.distance;
        fgRef.current?.cameraPosition({
          x: distance * Math.sin(angle),
          y: distance * Math.cos(angle),
          z: distance,
          distance,
        });
        angle += Math.PI / 5000;
      });
    }, 10);
  };

  // Initialize the camera position
  useEffect(() => {
    fgRef.current?.cameraPosition({ z: 1400 });

    createCamMovement();
  }, []);

  return (
    <ForceGraph3D
      ref={fgRef}
      width={width}
      height={height}
      graphData={data}
      backgroundColor="#ffffff00"
      extraRenderers={[new CSS3DRenderer()]}
      nodeThreeObjectExtend={true}
      linkAutoColorBy={(node: any) => node.source.type}
      linkCurvature={0.1}
      linkOpacity={1}
      nodeThreeObject={(node: GraphNode) => {
        const slug = node.id.split("-").slice(-1).join("-");
        const icon = iconOf(slug) ?? iconOf(node.icon);

        // const nodeEl = document.createElement("div");
        // nodeEl.innerHTML = 'icon?.svg ?? ""';
        // nodeEl.style.color = icon?.hex;
        // nodeEl.className = "node-label";
        const nodeEl = document.createElement("div");
        nodeEl.style.width = "20px";
        nodeEl.style.height = "20px";
        nodeEl.style.borderRadius = "50%";
        console.log(nodeEl);