Cytoscape Graph Visualization

Master the art of creating high-performance, aesthetically striking network visualizations using Cytoscape.js, with a focus on Svelte 5 integration and the "Codex Arcana" sci-fi aesthetic.

Core Patterns

1. Svelte 5 Integration

Manage Cytoscape lifecycle and reactivity using Svelte 5 $effect and onMount.

svelte
1<script lang="ts">
2  import { onMount, onDestroy } from "svelte";
3  import cytoscape, { type Core } from "cytoscape";
4
5  let container: HTMLElement;
6  let cy: Core | undefined = $state();
7  let { elements } = $props();
8
9  onMount(() => {
10    cy = cytoscape({
11      container,
12      elements,
13      style: [
14        /* styles */
15      ],
16      layout: { name: "cose" },
17    });
18  });
19
20  onDestroy(() => {
21    cy?.destroy();
22  });
23
24  // Reactive updates
25  $effect(() => {
26    if (cy && elements) {
27      cy.elements().remove();
28      cy.add(elements);
29      cy.layout({ name: "cose", animate: true }).run();
30    }
31  });
32</script>
33
34<div bind:this={container} class="w-full h-full"></div>

2. Sci-Fi "Terminal" Styling

Embrace a high-contrast, glowing aesthetic. Use dark backgrounds with vibrant green or amber accents.

Example Sci-Fi Style:

ts
1const SCIFI_STYLE = [
2  {
3    selector: "node",
4    style: {
5      "background-color": "#022c22",
6      "border-width": 1,
7      "border-color": "#15803d",
8      label: "data(label)",
9      color: "#86efac",
10      "font-family": "Inter, monospace",
11      "font-size": 10,
12      "text-transform": "uppercase",
13    },
14  },
15  {
16    selector: "edge",
17    style: {
18      "line-color": "#14532d",
19      "target-arrow-shape": "triangle",
20      "curve-style": "bezier",
21      opacity: 0.6,
22    },
23  },
24];

3. Layout Strategies

• Cose: Good for organic, balanced layouts.
• Circle/GridLayout: Use for structured overviews or specific groupings.
• Fcose/Cola: Advanced force-directed layouts for complex networks (require plugins).
• Manual: Use metadata.coordinates if entities have fixed positions.

Interaction Patterns

Selection & Focus

Animate the view when a node is selected to provide feedback.

ts
1cy.on("tap", "node", (evt) => {
2  const node = evt.target;
3  cy.animate({
4    center: { eles: node },
5    zoom: 1.5,
6    duration: 500,
7    easing: "ease-out-cubic",
8  });
9});

Connection Management

Implement a "Connect Mode" to allow users to link nodes visually.

• Tap Source -> Tap Target -> Save relationship.
• Visual feedback via classes (e.g., .selected-source).

Performance Guidelines

1. Batch Updates: Use cy.batch() when performing many operations.
2. Selective Layouts: Only run layouts when elements change significantly, not on every prop update.
3. Hardware Acceleration: Cytoscape uses Canvas, which is generally performant, but keep texture usage low.

Best Practices

1. Lifecycle Management: Always destroy() the instance in onDestroy.
2. Viewport Handling: Use cy.fit() and cy.resize() to ensure the graph looks good on all screens.
3. Data Transformation: Use a separate Transformer utility to map domain objects (Entities) to Cytoscape elements.
4. Overlay Elements: Use HTML/CSS overlays for UI (zoom controls, legends) instead of rendering them in the Canvas.