Function GraphProvided

src/components/graph/Graph.tsx:232–1027

({
  initialNodes,
  initialEdges,
  onAutoSave,
})

 * @param initialNodes the initial nodes to start the graph with
 */
const GraphProvided: FC<GraphProvidedProps> = ({
  initialNodes,
  initialEdges,
  onAutoSave,
}) => {
  const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes);
  const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);
  const { fitView, screenToFlowPosition, zoomIn, zoomOut } = useReactFlow();

  // Node Internals -----------------------------------------------------------

  const updateNodeInternals = useUpdateNodeInternals();

  /** Tells React Flow to update the handle positions of a node. Because a node's
   * width and height change when it receives an API response from the server with
   * the address' labels, it must be updated.
   *
   * NOTE: There exists a bug in React Flow that makes it so the node's width has
   * a non-determinstic delay betweeen rendering the new node width and being able
   * to update its internals. To go around this, this function should be used with
   * a timeout of at least 1000ms.
   *
   * More info here: https://github.com/xyflow/xyflow/issues/3910
   *
   * @param id the id of the node to update
   *
   */
  const updateNodeInternalsByID = useCallback(
    (id: string) => {
      updateNodeInternals(id);
    },
    [nodes],
  );

  // Record Optimization -------------------------------------------------------

  /* For performance reasons, we store the edges and nodes
   * in a ref so lookups are O(1) instead of O(n) */
  const { nodesRecord } = useMemo(() => {
    return {
      nodesRecord: convertNodeListToRecord(nodes),
    };
  }, [nodes]);
  const { edgesRecord } = useMemo(() => {
    return {
      edgesRecord: convertEdgeListToRecord(edges),
    };
  }, [edges]);

  // Auto Save -----------------------------------------------------------------

  /* We want to save the graph whenever a change is made. We'll use a debounce
   * to prevent too many saves from happening at once. */

  const { personalGraphInfo } = useMemo<{
    personalGraphInfo: PersonalGraphInfo;
  }>(() => {
    // Only non-hidden edges should be included in the graph info