Why Cytoscape over vis.js

Details

Raw Data

{
  "id": "39b5f392-78a3-4908-840a-42eceb3cb980",
  "type": "general",
  "status": "completed",
  "title": "Why Cytoscape over vis.js",
  "description": "Deeper comparison of Cytoscape.js vs vis.js for our specific use case",
  "context": {
    "output": "<div style=\"background:#1e1e1e;color:#e0e0e0;padding:20px;border-radius:8px;font-family:'Consolas','Monaco',monospace;\">\n<h2 style=\"font-family:sans-serif;color:#fff;margin:0 0 16px 0;\">🤔 Why Not vis.js? Actually... Good Question</h2>\n\n<p style=\"color:#98c379;margin-bottom:20px;\">Honestly, vis.js Network is a <strong>totally valid choice</strong> and might actually be better for us. Let me be more honest about the tradeoffs:</p>\n\n<h3 style=\"color:#61afef;margin:24px 0 16px 0;\">✅ vis.js Advantages</h3>\n\n<table style=\"width:100%;border-collapse:collapse;margin-bottom:24px;\">\n<tr style=\"background:#2d2d2d;\">\n<th style=\"padding:12px;text-align:left;border-bottom:2px solid #444;\">Feature</th>\n<th style=\"padding:12px;text-align:left;border-bottom:2px solid #444;\">vis.js</th>\n<th style=\"padding:12px;text-align:left;border-bottom:2px solid #444;\">Cytoscape</th>\n</tr>\n<tr>\n<td style=\"padding:10px;border-bottom:1px solid #333;\">Setup time</td>\n<td style=\"padding:10px;border-bottom:1px solid #333;\"><span style=\"color:#98c379;\">~1 hour</span></td>\n<td style=\"padding:10px;border-bottom:1px solid #333;\"><span style=\"color:#e5c07b;\">~3 hours</span></td>\n</tr>\n<tr>\n<td style=\"padding:10px;border-bottom:1px solid #333;\">Clustering built-in</td>\n<td style=\"padding:10px;border-bottom:1px solid #333;\"><span style=\"color:#98c379;\">✅ Native</span></td>\n<td style=\"padding:10px;border-bottom:1px solid #333;\"><span style=\"color:#e5c07b;\">🔌 Plugin</span></td>\n</tr>\n<tr>\n<td style=\"padding:10px;border-bottom:1px solid #333;\">Hierarchical layout</td>\n<td style=\"padding:10px;border-bottom:1px solid #333;\"><span style=\"color:#98c379;\">✅ Built-in</span></td>\n<td style=\"padding:10px;border-bottom:1px solid #333;\"><span style=\"color:#98c379;\">✅ dagre ext</span></td>\n</tr>\n<tr>\n<td style=\"padding:10px;border-bottom:1px solid #333;\">Physics simulation</td>\n<td style=\"padding:10px;border-bottom:1px solid #333;\"><span style=\"color:#98c379;\">✅ Excellent</span></td>\n<td style=\"padding:10px;border-bottom:1px solid #333;\"><span style=\"color:#98c379;\">✅ Good</span></td>\n</tr>\n<tr>\n<td style=\"padding:10px;border-bottom:1px solid #333;\">Learning curve</td>\n<td style=\"padding:10px;border-bottom:1px solid #333;\"><span style=\"color:#98c379;\">Gentle</span></td>\n<td style=\"padding:10px;border-bottom:1px solid #333;\"><span style=\"color:#e5c07b;\">Steeper</span></td>\n</tr>\n<tr>\n<td style=\"padding:10px;border-bottom:1px solid #333;\">Documentation</td>\n<td style=\"padding:10px;border-bottom:1px solid #333;\"><span style=\"color:#98c379;\">Very clear</span></td>\n<td style=\"padding:10px;border-bottom:1px solid #333;\"><span style=\"color:#98c379;\">Good but dense</span></td>\n</tr>\n</table>\n\n<h3 style=\"color:#c678dd;margin:24px 0 16px 0;\">🎯 Why I Initially Said Cytoscape</h3>\n\n<div style=\"background:#2d2d2d;padding:16px;border-radius:6px;margin-bottom:20px;\">\n<ol style=\"margin:0;padding-left:20px;color:#e0e0e0;line-height:2;\">\n<li><strong>Compound nodes</strong> - Cytoscape has native parent/child node containment. A flow could visually \"contain\" its kontasks.</li>\n<li><strong>CSS-like selectors</strong> - <code>node[type=\"flow\"]</code> styling feels familiar</li>\n<li><strong>Graph algorithms</strong> - Built-in BFS, DFS, Dijkstra (might be useful for tracing)</li>\n<li><strong>Academic pedigree</strong> - Used heavily in bioinformatics for network analysis</li>\n</ol>\n</div>\n\n<h3 style=\"color:#e5c07b;margin:24px 0 16px 0;\">🔄 But For Our Use Case...</h3>\n\n<div style=\"background:#2d2d2d;padding:16px;border-radius:6px;margin-bottom:20px;border-left:4px solid #61afef;\">\n<p style=\"margin:0 0 12px 0;\">We mostly need:</p>\n<ul style=\"margin:0;padding-left:20px;color:#e0e0e0;\">\n<li>Show flows as big nodes, kontasks as smaller connected nodes</li>\n<li>Click to navigate</li>\n<li>Zoom/pan on mobile</li>\n<li>Maybe clustering by scope or status</li>\n<li>Hierarchical or force layout</li>\n</ul>\n<p style=\"margin:12px 0 0 0;color:#98c379;\"><strong>vis.js handles ALL of this easily.</strong></p>\n</div>\n\n<h3 style=\"color:#e06c75;margin:24px 0 16px 0;\">⚠️ vis.js Downsides</h3>\n\n<ul style=\"color:#e0e0e0;line-height:2;\">\n<li><strong>Larger bundle</strong> - ~500KB vs ~400KB (not huge difference)</li>\n<li><strong>Less active development</strong> - Last major release older than Cytoscape</li>\n<li><strong>Compound nodes workaround</strong> - Have to use clustering to simulate containment</li>\n</ul>\n\n<h3 style=\"color:#56b6c2;margin:24px 0 16px 0;\">💡 My Updated Take</h3>\n\n<div style=\"background:#2d2d2d;padding:16px;border-radius:6px;margin-bottom:20px;border-left:4px solid #98c379;\">\n<p style=\"margin:0;color:#e0e0e0;line-height:1.8;\">\n<strong style=\"color:#98c379;\">Start with vis.js</strong> - it's faster to prototype and has everything we need for v1.\n<br><br>\nIf we later need advanced graph algorithms or true compound node containment, we can swap to Cytoscape. The data model (nodes + edges JSON) is nearly identical.\n<br><br>\n<span style=\"color:#7f848e;\">I was being a bit purist recommending Cytoscape. For a dashboard graph that needs to \"just work\" on mobile with nice interactivity, vis.js is the pragmatic choice.</span>\n</p>\n</div>\n\n</div>",
    "requestedAt": "2026-01-10T12:45:00.000Z",
    "requestId": "0fd4e465-0de6-48c8-80e4-976ffd1430c5",
    "choices": [
      {
        "label": "Go with vis.js",
        "value": "Let's use vis.js Network for the flow graph. Create a prototype replacing the Mermaid graph on the flow detail page.",
        "primary": true
      },
      {
        "label": "Stick with Cytoscape",
        "value": "I still prefer Cytoscape for the compound nodes feature - let's go with that."
      },
      {
        "label": "Quick prototype both",
        "value": "Build a quick 30-min prototype of each and compare them side-by-side on the actual flow data."
      }
    ],
    "turnTiming": {
      "totalMs": 51325,
      "ttfeMs": 50,
      "thinkingMs": 51275,
      "toolExecutionMs": 0,
      "toolCallCount": 0,
      "thinkingPct": 100,
      "toolsPct": 0,
      "ttfePct": 0
    }
  },
  "createdBy": "claude",
  "createdAt": "2026-01-09T14:49:43.820Z",
  "updatedAt": "2026-01-09T14:49:49.575Z",
  "requestId": "0fd4e465-0de6-48c8-80e4-976ffd1430c5",
  "scope": "vibetools",
  "tags": [
    "ui",
    "visualization",
    "flows"
  ],
  "sessionId": "ses_793682af-433",
  "flowId": "flow_01KEHFNV42KC3ZT34N4MJJFWXB",
  "flowLinks": [
    {
      "flowId": "flow_01KEHFNV42KC3ZT34N4MJJFWXB",
      "edgeType": "evidence",
      "createdAt": "2026-01-09T14:49:43.820Z"
    }
  ]
}