Skip to content

Using the Visualizer

Risansym features a beautiful, React-based web application designed to parse and animate the JSON traces generated by the Python core.

Running the Web App

Currently, the visualizer is a Next.js application located in the web/ folder of the repository. You can run it locally:

cd web
npm install
npm run dev

Navigate to http://localhost:3000 in your browser.

Uploading Traces

When you run a simulation in Python with trace_enabled=True, a JSON file is saved in the traces/ folder. Simply drag and drop this JSON file into the Web Visualizer's drop zone.

Trace files use schema version 1.0. The visualizer rejects malformed node identifiers, times, payloads, metadata, and unsupported schema versions. The metadata.capture object reports whether the in-memory trace was truncated.

Features

  • Timeline Playback: Play, pause, fast-forward, and rewind the entire simulation event by event.
  • De Casteljau Animations: Message transmissions are dynamically rendered as beautiful Bezier curves connecting nodes, animated perfectly based on mathematical time curves.
  • State Inspection: Click on any event node (the geometric dots on the lifelines) to open a floating panel containing the event's raw JSON payload, timing information, and the node's internal state at that exact moment.
  • Zoom & Pan: Fully scalable vector-based (SVG) rendering allows you to zoom in on dense event clusters.