MSAGLJS

The benchmark environment consists of the following components:

Server and Logging

• server.js: A static HTTP+POST server running on port 8765. It serves files from its directory and /graphs/* from the configured graph directory. It provides two logging endpoints:
  • POST /log: Used by the routing-modes benchmark. Appends JSON bodies to /tmp/chrome_bench_results.log.
  • POST /loadlog: Used by the loading benchmark. Appends JSON bodies to /tmp/chrome_load_results.log.

Benchmark Pages

• Routing Modes Benchmark: Uses index.html and bench.js to test A*, Dijkstra-tree, and Dijkstra+VC modes. Accessible at http://127.0.0.1:8765/.
• Loading Benchmark: Uses loading.html and loading.js to test full loading (parse + MDS layout with sleeve router + tile pyramid build). Accessible at http://127.0.0.1:8765/loading.html.

Required Assets

• msagl.min.js: A copy of modules/core/dist.min.js that must be placed in the benchmark directory.

When using MSAGL-JS, adhere to these technical constraints and patterns to avoid errors:

Graph Construction

• Edge Registration: new Edge(source, target) automatically registers the edge with both endpoint nodes. Do not use a separate addEdge call.
• Node Registration: Always add every node to its Graph object.
• Core Layout Requirements: For direct core layout, you must provide a GeomGraph, a GeomNode with a boundary curve for each node, and a GeomEdge for each edge before calling layoutGeomGraph.

Rendering

• Synchronicity: RendererSvg.setGraph() is synchronous. However, WebGL Renderer.setGraph() is asynchronous and must be awaited.
• Environment: Browser renderers require window, document, canvas text measurement, and a mounted container with non-zero dimensions. Do not run them during Server-Side Rendering (SSR).
• Container Management: Always pass a dedicated container to a renderer. Do not rely on the document.body default in embedded applications.
• Instance Lifecycle: Retain one renderer instance per mounted container. Update it using setGraph() or setOptions() instead of reconstructing it on every framework render.

Configuration

• Layout Types: Omit layoutType to use the renderer's default. Note that the string 'default' is not a valid LayoutOptions.layoutType.
• API Usage: Use only public package exports; avoid internal source paths.
• Exporting: When generating PDF, EPS, or PostScript, preserve the textual graph source so the binary figure is not the only editable artifact.

The @msagl/core library uses a minimal and efficient graph structure based on three primary classes: Node, Graph, and Edge.

• Node: Represents a vertex. It provides methods to access adjacent edges: outEdges(), inEdges(), and selfEdges().
• Edge: Represents a connection between two Node instances (source and target). Creating an Edge(source, target) automatically attaches it to the source's outEdges and the target's inEdges.
• Graph: Extends Node and contains a NodeCollection (a wrapper for Map<string, Node>) to manage its nodes. You can create sub-graphs by adding a Graph instance as a node to another Graph.

All these classes extend Entity, meaning they have a parent reference to the entity they belong to (e.g., a Node knows its parent Graph).

// Iterating over edges from a node
for (const e of n.outEdges()) {
  // process edge 'e'
}

// Creating a subgraph
const graph = new Graph()
const subgraph = new Graph('a')
graph.addNode(subgraph)

When integrating MSAGL renderers into modern web frameworks (like React or Vue), follow these lifecycle patterns to avoid performance issues and remount loops:

1. Initialization: Construct the renderer only after the target container has been mounted to the DOM.
2. Persistence: Store the renderer instance in a module-level variable or a framework ref (e.g., useRef). Do not store it in component state, as this can trigger unnecessary re-renders.
3. Updates: Instead of re-instantiating the renderer when data changes, reuse the existing instance by calling setGraph() or setOptions().
4. Avoid Re-instantiation: Never instantiate a new renderer during every framework render cycle.
5. Cleanup: The renderers do not currently expose a public disposal API. To prevent memory leaks or unexpected behavior, ensure you manually remove any application-owned listeners or data fetches during component unmounting. Do not attempt to access private renderer or deck.gl fields for manual disposal.