Skip to content

Latest commit

 

History

History
48 lines (33 loc) · 1.05 KB

README.md

File metadata and controls

48 lines (33 loc) · 1.05 KB
Raw

trace4d frontend

Usage

Setup

Get node and yarn (tested on node v16.8.0 and yarn 1.22.10).

yarn install

Running (debug mode)

yarn dev

Building

yarn build

Running (production mode)

# (after building)
mkdir dist/traces && cp ../../assets/traces/* dist/traces/
npx http-server dist

Using the Visualization

See /README.md.

Package Structure

The frontend consists of two pages:

  • index.html: Landing page, provides links to some traces, allows to select a local trace file
  • app.html/app.js: Actual visualization using three.js
    • graph.js: scene elements (entities for objects, fields, classes, etc.; connections; trail)
    • map.js: main logic (scene construction and management, event handling)
    • player.js: timeline (player and flame graph)
    • resizers.js: helper for attaching resize logic to .resizer elements
    • trace.js: program trace model (loading, traversing, etc.)
    • utils/: helpers for standard libraries, stats.js, three.js, etc.