cytoscape-graph-rendering

What problem does it solve?

This Skill solves the challenge of building an interactive, touch-friendly ontology graph UI that visually distinguishes classes, instances, literals, and different edge types while supporting inference animations and user-driven graph editing.

Core Features & Use Cases

• Cytoscape.js graph initialization: Create a graph from node/edge slices with layout hints and zoom constraints for responsive rendering.
• Node and edge styling by ontology semantics: Apply distinct visual styles for class/instance/literal nodes and for object/is-a/data edges, including highlighted and selected states.
• Interactive editing tools: Add nodes, draw edges via Cytoscape edgehandles, delete selected elements, and extract current user edges for validation.
• Inference animation workflow: Stepwise emphasize matched rule edges, fade in derived triples, and convert inferred styling into confirmed styles.
• Mobile touch support: Enable zoom/pan, add double-tap to create nodes, and long-press context menus, with resizing/fit handling.

Quick Start

Use this skill to generate the Cytoscape.js graph-renderer implementation for your ontology learning chapter, then wire it into your UI so users can drag, connect, and animate inferred triples on desktop and mobile.