@react-fabric/graph 1.0.0-beta.59 → 1.0.0-beta.60

package/dist/esm/programs/node-badge/vert.glsl.js

@@ -14,6 +14,6 @@ var POSITION = {
 };
 
 // language=GLSL
-var VERTEX_SHADER_SOURCE = /* glsl */"\nattribute vec4 a_id;\nattribute vec4 a_fill;\nattribute vec4 a_color;\nattribute vec2 a_position;\nattribute float a_circle;\nattribute float a_placement;\nattribute float a_size;\nattribute float a_angle;\nattribute float a_opacity;\nattribute vec4 a_texture;\n\nuniform mat3 u_matrix;\nuniform float u_sizeRatio;\nuniform float u_correctionRatio;\n\nvarying vec4 v_fill;\nvarying vec4 v_color;\nvarying vec2 v_diffVector;\nvarying float v_radius;\nvarying float v_opacity;\nvarying vec4 v_texture;\n\nconst float bias = 255.0 / 254.0;\nconst float marginRatio = 1.1;\nconst vec4 transparent = vec4(0.0, 0.0, 0.0, 0.0);\n\nvoid main() {\n  float size = (a_size / 4.0) * u_correctionRatio / u_sizeRatio * 4.0;\n  float originalSize = a_size * u_correctionRatio / u_sizeRatio * 4.0;\n  vec2 diffVector = size * vec2(cos(a_angle), sin(a_angle));\n  vec2 position = a_position + diffVector * marginRatio;\n  float divisor = a_circle == 1.0 ? 2.5 : 2.0;\n  if(a_placement == ".concat(POSITION["top-left"], ") {\n    position.x -= originalSize / divisor;\n    position.y += originalSize / divisor;\n  }\n  if(a_placement == ").concat(POSITION["top-right"], ") {\n    position.x += originalSize / divisor;\n    position.y += originalSize / divisor;\n  }\n  if(a_placement == ").concat(POSITION["bottom-left"], ") {\n    position.x -= originalSize / divisor;\n    position.y -= originalSize / divisor;\n  }\n  if(a_placement == ").concat(POSITION["bottom-right"], ") {\n    position.x += originalSize / divisor;\n    position.y -= originalSize / divisor;\n  }\n  if(a_placement == ").concat(POSITION["top"], ") {\n    position.y += originalSize / 2.0;\n  }\n  if(a_placement == ").concat(POSITION["bottom"], ") {\n    position.y -= originalSize / 2.0;\n  }\n  if(a_placement == ").concat(POSITION["left"], ") {\n    position.x -= originalSize / 2.0;\n  }\n  if(a_placement == ").concat(POSITION["right"], ") {\n    position.x += originalSize / 2.0;\n  }\n  gl_Position = vec4(\n    (u_matrix * vec3(position, 1)).xy,\n    0,\n    1\n  );\n\n  v_diffVector = diffVector;\n  v_radius = size / 2.0 / marginRatio;\n\n  #ifdef PICKING_MODE\n  // For picking mode, we use the ID as the color:\n  v_color = a_id;\n  #else\n  // For normal mode, we use the color:\n  v_fill = mix(transparent, a_fill, a_opacity * bias);\n  v_color = vec4(a_color.rgb, a_opacity * bias);\n  v_opacity = a_opacity;\n  // Pass the texture coordinates:\n  v_texture = a_texture;\n  #endif\n}\n");
+var VERTEX_SHADER_SOURCE = /* glsl */"\nattribute vec4 a_id;\nattribute vec4 a_fill;\nattribute vec4 a_color;\nattribute vec2 a_position;\nattribute float a_circle;\nattribute float a_placement;\nattribute float a_size;\nattribute float a_angle;\nattribute float a_opacity;\nattribute vec4 a_texture;\n\nuniform mat3 u_matrix;\nuniform float u_sizeRatio;\nuniform float u_correctionRatio;\n\nvarying vec4 v_fill;\nvarying vec4 v_color;\nvarying vec2 v_diffVector;\nvarying float v_radius;\nvarying float v_opacity;\nvarying vec4 v_texture;\n\nconst float bias = 255.0 / 254.0;\nconst float marginRatio = 1.1;\nconst vec4 transparent = vec4(0.0, 0.0, 0.0, 0.0);\n\nvoid main() {\n  float size = (a_size / 4.0) * u_correctionRatio / u_sizeRatio * 4.0;\n  float originalSize = a_size * u_correctionRatio / u_sizeRatio * 4.0;\n  vec2 diffVector = size * vec2(cos(a_angle), sin(a_angle));\n  vec2 position = a_position + diffVector * marginRatio;\n  float divisor = a_circle == 1.0 ? 2.5 : 2.0;\n  if(a_placement == ".concat(POSITION["top-left"], ") {\n    position.x -= originalSize / divisor;\n    position.y += originalSize / divisor;\n  }\n  if(a_placement == ").concat(POSITION["top-right"], ") {\n    position.x += originalSize / divisor;\n    position.y += originalSize / divisor;\n  }\n  if(a_placement == ").concat(POSITION["bottom-left"], ") {\n    position.x -= originalSize / divisor;\n    position.y -= originalSize / divisor;\n  }\n  if(a_placement == ").concat(POSITION["bottom-right"], ") {\n    position.x += originalSize / divisor;\n    position.y -= originalSize / divisor;\n  }\n  if(a_placement == ").concat(POSITION.top, ") {\n    position.y += originalSize / 2.0;\n  }\n  if(a_placement == ").concat(POSITION.bottom, ") {\n    position.y -= originalSize / 2.0;\n  }\n  if(a_placement == ").concat(POSITION.left, ") {\n    position.x -= originalSize / 2.0;\n  }\n  if(a_placement == ").concat(POSITION.right, ") {\n    position.x += originalSize / 2.0;\n  }\n  gl_Position = vec4(\n    (u_matrix * vec3(position, 1)).xy,\n    0,\n    1\n  );\n\n  v_diffVector = diffVector;\n  v_radius = size / 2.0 / marginRatio;\n\n  #ifdef PICKING_MODE\n  // For picking mode, we use the ID as the color:\n  v_color = a_id;\n  #else\n  // For normal mode, we use the color:\n  v_fill = mix(transparent, a_fill, a_opacity * bias);\n  v_color = vec4(a_color.rgb, a_opacity * bias);\n  v_opacity = a_opacity;\n  // Pass the texture coordinates:\n  v_texture = a_texture;\n  #endif\n}\n");
 
 export { VERTEX_SHADER_SOURCE as default };

package/dist/esm/programs/node-circle/base/drawHover.js

@@ -5,6 +5,7 @@ import { drawNodeLabel } from './drawLabel.js';
 /* istanbul ignore file */
 
 function drawNodeHover(context, data, settings) {
+  var _ref, _data$labelColor;
   var nodeSize = data.size;
   var size = settings.labelSize;
   var font = settings.labelFont;
@@ -12,7 +13,7 @@ function drawNodeHover(context, data, settings) {
   // use node color or default node color
   var bg = settings.defaultNodeColor || "#fff";
   // use label color or default label color
-  var color = data.labelColor || settings.labelColor.color || "#000";
+  var color = (_ref = (_data$labelColor = data.labelColor) !== null && _data$labelColor !== void 0 ? _data$labelColor : settings.labelColor.color) !== null && _ref !== void 0 ? _ref : "#000";
   context.font = "".concat(weight, " ").concat(size, "px ").concat(font);
 
   // Then we draw the label background

package/dist/esm/programs/node-circle/base/drawLabel.js

@@ -3,6 +3,7 @@
 /* istanbul ignore file */
 
 function drawNodeLabel(context, data, settings) {
+  var _ref, _data$labelColor;
   var nodeSize = data.size;
   var size = settings.labelSize;
   var font = settings.labelFont;
@@ -10,7 +11,7 @@ function drawNodeLabel(context, data, settings) {
   // use node color or default node color
   var bg = settings.defaultNodeColor || "#fff";
   // use label color or default label color
-  var color = data.labelColor || settings.labelColor.color || "#000";
+  var color = (_ref = (_data$labelColor = data.labelColor) !== null && _data$labelColor !== void 0 ? _data$labelColor : settings.labelColor.color) !== null && _ref !== void 0 ? _ref : "#000";
   if (data.highlight) {
     var _data$highlightColor, _data$highlightColor2;
     // Then we draw the label background

package/dist/esm/programs/node-rect/base/drawHover.js

@@ -5,6 +5,7 @@ import { drawNodeLabel } from './drawLabel.js';
 /* istanbul ignore file */
 
 function drawNodeHover(context, data, settings) {
+  var _ref, _data$labelColor;
   var nodeSize = data.size;
   var size = settings.labelSize;
   var font = settings.labelFont;
@@ -12,7 +13,7 @@ function drawNodeHover(context, data, settings) {
   // use node color or default node color
   var bg = settings.defaultNodeColor || "#fff";
   // use label color or default label color
-  var color = data.labelColor || settings.labelColor.color || "#000";
+  var color = (_ref = (_data$labelColor = data.labelColor) !== null && _data$labelColor !== void 0 ? _data$labelColor : settings.labelColor.color) !== null && _ref !== void 0 ? _ref : "#000";
   context.font = "".concat(weight, " ").concat(size, "px ").concat(font);
 
   // Then we draw the label background

package/dist/esm/programs/node-rect/base/drawLabel.js

@@ -3,6 +3,7 @@
 /* istanbul ignore file */
 
 function drawNodeLabel(context, data, settings) {
+  var _ref, _data$labelColor;
   var nodeSize = data.size;
   var size = settings.labelSize;
   var font = settings.labelFont;
@@ -10,7 +11,7 @@ function drawNodeLabel(context, data, settings) {
   // use node color or default node color
   var bg = settings.defaultNodeColor || "#fff";
   // use label color or default label color
-  var color = data.labelColor || settings.labelColor.color || "#000";
+  var color = (_ref = (_data$labelColor = data.labelColor) !== null && _data$labelColor !== void 0 ? _data$labelColor : settings.labelColor.color) !== null && _ref !== void 0 ? _ref : "#000";
   if (data.highlight) {
     var _data$highlightColor, _data$color;
     // Then we draw the label background

package/dist/types/components/Context.d.ts

@@ -1,8 +1,8 @@
-import { PropsWithChildren } from "react";
-import { Graph } from "../graph";
+import { type PropsWithChildren } from "react";
+import { type Graph } from "../graph";
 import { useDragSelection } from "../hooks/sigmaDragSelect";
 import { useSigma } from "../hooks/useSigma";
-import { EdgeAttributes, GraphProps, NodeAttributes } from "../types";
+import { type EdgeAttributes, type GraphProps, type NodeAttributes } from "../types";
 interface Context<N = KeyValue, E = KeyValue> {
     sigma: ReturnType<typeof useSigma>;
     graph: Graph<NodeAttributes<N>, EdgeAttributes<E>>;

package/dist/types/components/Viewer.d.ts

@@ -1,2 +1,2 @@
-import { GraphProps } from "../types";
+import { type GraphProps } from "../types";
 export declare const SigmaGraph: <N = KeyValue, E = KeyValue>(props: GraphProps<N, E>) => import("react/jsx-runtime").JSX.Element;

package/dist/types/graph/index.d.ts

@@ -1,6 +1,7 @@
 import Graphology from "graphology";
-import { GraphEvents, GraphOptions } from "graphology-types";
-import { EdgeAttributes, InternalNodeAttributes, NodeAttributes, RawGraph } from "../types";
+import { type ForceAtlas2Settings } from "graphology-layout-forceatlas2";
+import { type GraphEvents, type GraphOptions } from "graphology-types";
+import { type EdgeAttributes, type InternalNodeAttributes, type NodeAttributes, type RawGraph } from "../types";
 interface ExtendedEvents extends GraphEvents {
     nodesLoaded: (nodes: string[]) => void;
     nodesDropped: (nodes: string[]) => void;
@@ -13,11 +14,15 @@ export declare class Graph<N = KeyValue, E = KeyValue> extends Graphology<Intern
     on<Event extends keyof ExtendedEvents>(type: Event, listener: ExtendedEvents[Event]): this;
     off<Event extends keyof ExtendedEvents>(type: Event, listener: ExtendedEvents[Event]): this;
     emit<Event extends keyof ExtendedEvents>(type: Event, ...args: Parameters<ExtendedEvents[Event]>): boolean;
-    mergeNodes(key: string, nodes: string[], attributesOrNodeReducer?: NodeAttributes<N> | ((attributes: NodeAttributes<N>[]) => NodeAttributes<N>), edgeReducer?: (edges: RawGraph<N, E>["edges"]) => RawGraph<N, E>["edges"]): this | undefined;
-    groupNodes(key: string, nodes: string[], attributesOrNodeReducer?: NodeAttributes<N> | ((attributes: NodeAttributes<N>[]) => NodeAttributes<N>), edgeReducer?: (edges: RawGraph<N, E>["edges"]) => RawGraph<N, E>["edges"]): this | undefined;
+    mergeNodes(key: string, nodes: string[], attributesOrNodeReducer?: NodeAttributes<N> | ((attributes: Array<NodeAttributes<N>>) => NodeAttributes<N>), edgeReducer?: (edges: RawGraph<N, E>["edges"]) => RawGraph<N, E>["edges"]): this | undefined;
+    groupNodes(key: string, nodes: string[], attributesOrNodeReducer?: NodeAttributes<N> | ((attributes: Array<NodeAttributes<N>>) => NodeAttributes<N>), edgeReducer?: (edges: RawGraph<N, E>["edges"]) => RawGraph<N, E>["edges"]): this | undefined;
     ungroupNode(node: string): this | undefined;
     toggleExpanded(node: string, force?: boolean): this;
     import(data: RawGraph<N, E> | Graph<N, E>, merge?: boolean): this;
+    circularLayout(): this;
+    private _timer;
+    private _worker?;
+    forceLayout(settings?: ForceAtlas2Settings): this;
     private elk;
     elkLayout(type: string): Promise<void>;
     dropNodes(nodes: string[]): void;

package/dist/types/hooks/sigmaHilighter.d.ts

@@ -1,3 +1,3 @@
 import type Sigma from "sigma";
-import { EdgeAttributes, NodeAttributes } from "../types";
+import { type EdgeAttributes, type NodeAttributes } from "../types";
 export declare const attachHighlighter: (renderer: Sigma<NodeAttributes<any>, EdgeAttributes<any>>) => void;

package/dist/types/hooks/sigmaMouseActions.d.ts

@@ -1,3 +1,3 @@
 import type Sigma from "sigma";
-import { EdgeAttributes, NodeAttributes } from "../types";
+import { type EdgeAttributes, type NodeAttributes } from "../types";
 export declare const attachMouseActions: (renderer: Sigma<NodeAttributes<any>, EdgeAttributes<any>>) => void;

package/dist/types/hooks/useGraphology.d.ts

@@ -1,5 +1,5 @@
 import { Graph } from "../graph";
-import { GraphProps } from "../types";
+import { type GraphProps } from "../types";
 export declare const useGraphology: <N, E>(data: GraphProps<N, E>["data"]) => {
     graph: Graph<N, E>;
     selected: string[];

package/dist/types/hooks/useSigma.d.ts

@@ -1,6 +1,6 @@
 import Sigma from "sigma";
-import { Graph } from "../graph";
-import { EdgeAttributes, NodeAttributes } from "../types";
+import { type Graph } from "../graph";
+import { type EdgeAttributes, type NodeAttributes } from "../types";
 export declare const useSigma: <N, E>(graph: Graph<N, E>, nodeReducer?: (node: NodeAttributes<N>) => NodeAttributes<N>, edgeReducer?: (edge: EdgeAttributes<E>) => EdgeAttributes<E>) => {
     instance: Sigma<NodeAttributes<N>, EdgeAttributes<E>, import("graphology-types").Attributes> | undefined;
     containerRef: import("react").Dispatch<import("react").SetStateAction<HTMLDivElement | null>>;

package/dist/types/programs/arrow-head/index.d.ts

@@ -1,9 +1,9 @@
-import { Attributes } from "graphology-types";
-import { EdgeProgramType } from "sigma/rendering";
-export type CreateEdgeArrowHeadProgramOptions = {
+import { type Attributes } from "graphology-types";
+import { type EdgeProgramType } from "sigma/rendering";
+export interface CreateEdgeArrowHeadProgramOptions {
     extremity: "source" | "target";
     lengthToThicknessRatio: number;
     widenessToThicknessRatio: number;
-};
+}
 export declare const DEFAULT_EDGE_ARROW_HEAD_PROGRAM_OPTIONS: CreateEdgeArrowHeadProgramOptions;
 export declare function createEdgeArrowHeadProgram<N extends Attributes = Attributes, E extends Attributes = Attributes, G extends Attributes = Attributes>(inputOptions?: Partial<CreateEdgeArrowHeadProgramOptions>): EdgeProgramType<N, E, G>;

package/dist/types/programs/edge-curve/index.d.ts

@@ -1,7 +1,7 @@
 import { type Attributes } from "graphology-types";
 import { EdgeProgram, type ProgramInfo } from "sigma/rendering";
 import { type EdgeDisplayData, type NodeDisplayData, type RenderParams } from "sigma/types";
-import { InternalEdgeAttributes } from "../../types";
+import { type InternalEdgeAttributes } from "../../types";
 declare const UNIFORMS: readonly ["u_matrix", "u_sizeRatio", "u_dimensions", "u_pixelRatio", "u_feather", "u_minEdgeThickness", "u_lengthToThicknessRatio", "u_widenessToThicknessRatio"];
 export declare class EdgeCurveProgramBase<N extends Attributes = Attributes, E extends Attributes = Attributes, G extends Attributes = Attributes> extends EdgeProgram<(typeof UNIFORMS)[number], N, E, G> {
     getDefinition(): {

package/dist/types/programs/node-circle/base/drawHover.d.ts

@@ -1,5 +1,5 @@
 import { type Settings } from "sigma/settings";
-import { EdgeAttributes, NodeAttributes } from "../../../types";
+import { type EdgeAttributes, type NodeAttributes } from "../../../types";
 export declare function drawNodeHover(context: CanvasRenderingContext2D, data: NodeAttributes & {
     opacity: number;
     x: number;

package/dist/types/programs/node-circle/base/drawLabel.d.ts

@@ -1,5 +1,5 @@
 import { type Settings } from "sigma/settings";
-import { EdgeAttributes, InternalNodeAttributes, NodeAttributes } from "../../../types";
+import { type EdgeAttributes, type InternalNodeAttributes, type NodeAttributes } from "../../../types";
 export declare function drawNodeLabel(context: CanvasRenderingContext2D, data: InternalNodeAttributes & {
     opacity: number;
     x: number;

package/dist/types/programs/node-circle/index.d.ts

@@ -1,4 +1,4 @@
-import { NodeAttributes } from "../../types";
+import { type NodeAttributes } from "../../types";
 export declare const NodeCircleProgram: {
     new (_gl: WebGLRenderingContext, _pickingBuffer: WebGLFramebuffer | null, _renderer: import("sigma").default<NodeAttributes<any>, import("graphology-types").Attributes, import("graphology-types").Attributes>): {
         drawLabel: import("sigma/rendering").NodeLabelDrawingFunction<NodeAttributes<any>, import("graphology-types").Attributes, import("graphology-types").Attributes> | undefined;

package/dist/types/programs/node-rect/base/drawHover.d.ts

@@ -1,5 +1,5 @@
 import { type Settings } from "sigma/settings";
-import { EdgeAttributes, NodeAttributes } from "../../../types";
+import { type EdgeAttributes, type NodeAttributes } from "../../../types";
 export declare function drawNodeHover(context: CanvasRenderingContext2D, data: NodeAttributes & {
     opacity: number;
     x: number;

package/dist/types/programs/node-rect/base/drawLabel.d.ts

@@ -1,5 +1,5 @@
 import { type Settings } from "sigma/settings";
-import { EdgeAttributes, InternalNodeAttributes, NodeAttributes } from "../../../types";
+import { type EdgeAttributes, type InternalNodeAttributes, type NodeAttributes } from "../../../types";
 export declare function drawNodeLabel(context: CanvasRenderingContext2D, data: InternalNodeAttributes & {
     opacity: number;
     x: number;

package/dist/types/programs/node-rect/index.d.ts

@@ -1,4 +1,4 @@
-import { NodeAttributes } from "../../types";
+import { type NodeAttributes } from "../../types";
 export declare const NodeRectProgram: {
     new (_gl: WebGLRenderingContext, _pickingBuffer: WebGLFramebuffer | null, _renderer: import("sigma").default<NodeAttributes<any>, import("graphology-types").Attributes, import("graphology-types").Attributes>): {
         drawLabel: import("sigma/rendering").NodeLabelDrawingFunction<NodeAttributes<any>, import("graphology-types").Attributes, import("graphology-types").Attributes> | undefined;

package/dist/types/types/index.d.ts

@@ -1,6 +1,6 @@
-import { GraphOptions } from "graphology-types";
-import { RefObject } from "react";
-import { Graph } from "../graph";
+import { type GraphOptions } from "graphology-types";
+import { type RefObject } from "react";
+import { type Graph } from "../graph";
 interface NodeBadge {
     position: "top-left" | "top-right" | "bottom-left" | "bottom-right" | "top" | "left" | "right";
     type?: "star" | "exclaim" | "thumbUp" | "thumbDown";
@@ -161,16 +161,16 @@ export interface InternalEdgeAttributes<E = KeyValue> extends EdgeAttributes<E>
     id?: string;
 }
 export interface RawGraph<N = KeyValue, E = KeyValue> {
-    nodes: {
+    nodes: Array<{
         key: string;
         attributes?: NodeAttributes<N>;
-    }[];
-    edges: {
+    }>;
+    edges: Array<{
         key: string;
         source: string;
         target: string;
         attributes?: EdgeAttributes<E>;
-    }[];
+    }>;
     attributes?: KeyValue;
     options?: GraphOptions;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-fabric/graph",
-  "version": "1.0.0-beta.59",
+  "version": "1.0.0-beta.60",
   "description": "RUF: SigmaJS link analysis graph",
   "author": "Adarsh Pastakia <adarshpastakia@outlook.com>",
   "license": "MIT",
@@ -36,8 +36,8 @@
   },
   "dependencies": {
     "@floating-ui/react": "~0.27.16",
-    "@react-fabric/core": "^1.0.0-beta.59",
-    "@react-fabric/utilities": "^1.0.0-beta.59",
+    "@react-fabric/core": "^1.0.0-beta.60",
+    "@react-fabric/utilities": "^1.0.0-beta.60",
     "@sigma/edge-curve": "~3.1.0",
     "@sigma/utils": "~3.0.0",
     "classnames": "~2.5.1",
@@ -65,5 +65,5 @@
     "node": ">=18.12.0",
     "npm": ">=8.19.0"
   },
-  "gitHead": "74efd06c9c5ac629b6ef5cdc6d53ecb1c356f2eb"
+  "gitHead": "a79f053ee7e13422c06d7d9c35d4f0c2610cdf5d"
 }

package/src/components/Context.tsx

@@ -2,18 +2,22 @@ import { CoreIcons, Icon } from "@react-fabric/core";
 import { fitViewportToNodes } from "@sigma/utils";
 import {
   createContext,
-  PropsWithChildren,
+  type PropsWithChildren,
   useContext,
   useEffect,
   useImperativeHandle,
   useState,
 } from "react";
-import { SigmaNodeEventPayload } from "sigma/types";
-import { Graph } from "../graph";
+import { type SigmaNodeEventPayload } from "sigma/types";
+import { type Graph } from "../graph";
 import { useDragSelection } from "../hooks/sigmaDragSelect";
 import { useGraphology } from "../hooks/useGraphology";
 import { useSigma } from "../hooks/useSigma";
-import { EdgeAttributes, GraphProps, NodeAttributes } from "../types";
+import {
+  type EdgeAttributes,
+  type GraphProps,
+  type NodeAttributes,
+} from "../types";
 
 interface Context<N = KeyValue, E = KeyValue> {
   sigma: ReturnType<typeof useSigma>;
@@ -50,28 +54,32 @@ export const GraphProvider = <N = KeyValue, E = KeyValue>({
 
   const resetViewport = () => {
     if (graph.size === 0) return;
-    sigma.instance &&
+    void (
+      sigma.instance &&
       fitViewportToNodes(sigma.instance, graph.nodes(), {
         animate: true,
-      });
+      })
+    );
   };
 
   const zoomIn = () => {
     if (graph.size === 0) return;
-    sigma.instance?.getCamera().animatedZoom();
+    void sigma.instance?.getCamera().animatedZoom();
   };
 
   const zoomOut = () => {
     if (graph.size === 0) return;
-    sigma.instance?.getCamera().animatedUnzoom();
+    void sigma.instance?.getCamera().animatedUnzoom();
   };
 
   useEffect(() => {
     const resetHandler = () => {
-      sigma.instance &&
+      void (
+        sigma.instance &&
         fitViewportToNodes(sigma.instance, graph.nodes(), {
           animate: true,
-        });
+        })
+      );
     };
     graph.on("layoutRunning", setLayoutRunning);
     graph.on("layoutDone", resetHandler);

package/src/components/ContextMenu.tsx

@@ -32,21 +32,23 @@ import {
   useFloatingNodeId,
   useInteractions,
 } from "@floating-ui/react";
+import { Divider, Menu, MenuItem } from "@react-fabric/core";
 import { cloneElement, useEffect, useRef, useState } from "react";
 import {
-  SigmaEdgeEventPayload,
-  SigmaNodeEventPayload,
-  SigmaStageEventPayload,
+  type SigmaEdgeEventPayload,
+  type SigmaNodeEventPayload,
+  type SigmaStageEventPayload,
 } from "sigma/types";
-import { useGraph } from "./Context";
-import { Divider, Menu, MenuItem } from "@react-fabric/core";
 import { ICONS } from "../constants";
+import { useGraph } from "./Context";
 
 export const GraphContextMenu = () => {
   const [isOpen, setIsOpen] = useState(false);
   const nodeId = useFloatingNodeId();
-  const { sigma, graph } = useGraph();
-  const [menu, setMenu] = useState<React.ReactElement<typeof MenuItem>[]>([]);
+  const { sigma } = useGraph();
+  const [menu, setMenu] = useState<Array<React.ReactElement<typeof MenuItem>>>(
+    [],
+  );
 
   const { refs, floatingStyles, context } = useFloating({
     open: isOpen,
@@ -80,24 +82,40 @@ export const GraphContextMenu = () => {
     ) => {
       if ("node" in e) {
         setMenu([
-          <MenuItem label="Select neighbors" />,
-          <Divider />,
+          <MenuItem key="0.0" label="Select neighbors" />,
+          <Divider key="0.1" />,
           <MenuItem
+            key="0.2"
             label="Delete node(s)"
             color="danger"
             icon={ICONS.delete}
           />,
-          <MenuItem label="Clear graph" color="danger" icon={ICONS.clear} />,
+          <MenuItem
+            key="0.3"
+            label="Clear graph"
+            color="danger"
+            icon={ICONS.clear}
+          />,
         ]);
       } else if ("edge" in e) {
         setMenu([
-          <MenuItem label="Select neighbors" />,
-          <Divider />,
-          <MenuItem label="Clear graph" color="danger" icon={ICONS.clear} />,
+          <MenuItem key="1.0" label="Select neighbors" />,
+          <Divider key="1.1" />,
+          <MenuItem
+            key="1.2"
+            label="Clear graph"
+            color="danger"
+            icon={ICONS.clear}
+          />,
         ]);
       } else {
         setMenu([
-          <MenuItem label="Clear graph" color="danger" icon={ICONS.clear} />,
+          <MenuItem
+            key="2.0"
+            label="Clear graph"
+            color="danger"
+            icon={ICONS.clear}
+          />,
         ]);
       }
       const virtual = {

package/src/components/Tools.tsx

@@ -9,15 +9,8 @@ import { ICONS } from "../constants";
 import { useGraph } from "./Context";
 
 export const Tools = () => {
-  const {
-    dragSelector,
-    graph,
-    selected,
-    layoutRunning,
-    resetViewport,
-    zoomIn,
-    zoomOut,
-  } = useGraph();
+  const { dragSelector, graph, selected, resetViewport, zoomIn, zoomOut } =
+    useGraph();
 
   return (
     <div className="flex flex-nowrap outline absolute top-0 start-0 p-0 z-1 bg-base">
@@ -62,27 +55,33 @@ export const Tools = () => {
             }
           />
           <Menu className="text-sm">
-            <MenuItem label="box" onClick={() => graph.elkLayout("box")} />
-            <MenuItem label="force" onClick={() => graph.elkLayout("force")} />
+            <MenuItem
+              label="box"
+              onClick={async () => await graph.elkLayout("box")}
+            />
+            <MenuItem
+              label="force"
+              onClick={async () => await graph.elkLayout("force")}
+            />
             <MenuItem
               label="layered"
-              onClick={() => graph.elkLayout("layered")}
+              onClick={async () => await graph.elkLayout("layered")}
             />
             <MenuItem
               label="stress"
-              onClick={() => graph.elkLayout("stress")}
+              onClick={async () => await graph.elkLayout("stress")}
             />
             <MenuItem
               label="radial"
-              onClick={() => graph.elkLayout("radial")}
+              onClick={async () => await graph.elkLayout("radial")}
             />
             <MenuItem
               label="sporeOverlap"
-              onClick={() => graph.elkLayout("sporeOverlap")}
+              onClick={async () => await graph.elkLayout("sporeOverlap")}
             />
             <MenuItem
               label="sporeCompaction"
-              onClick={() => graph.elkLayout("sporeCompaction")}
+              onClick={async () => await graph.elkLayout("sporeCompaction")}
             />
           </Menu>
         </Dropdown>

package/src/components/Viewer.tsx

@@ -22,7 +22,7 @@
  */
 
 import { Section } from "@react-fabric/core";
-import { GraphProps } from "../types";
+import { type GraphProps } from "../types";
 import { GraphProvider, useGraph } from "./Context";
 import { Tools } from "./Tools";
 import { useEffect, useRef } from "react";
@@ -48,6 +48,7 @@ const Graph = () => {
     <div className="area-content relative bg-base graph-viewer">
       <div dir="ltr" ref={sigma.containerRef} className="absolute inset-0" />
       <div
+        role="none"
         ref={handlesRef}
         dir="ltr"
         onClick={(e) => {