redo timeplot web

1 files changed, 56 insertions, 27 deletions

diff --git a/web-timeplot/README.md b/web-timeplot/README.md
index 867ae7a..491753a 100644
--- a/web-timeplot/README.md
+++ b/web-timeplot/README.md
@@ -1,49 +1,78 @@
-# Web TimePlot - PixiJS Implementation
+# TimePlot
 
-A web-based waterfall display using PixiJS with WebGPU/WebGL support.
+TimePlot is now a clean restart: a small PixiJS time-series sandbox built around a simple state core, a pluggable data source layer, and toggleable UI panels.
 
-## Features
+## What it does
 
-- **Dual Renderer Support**: Automatically uses WebGPU if available, falls back to WebGL
-- **Real-time Performance Metrics**: FPS, frame timing, vertex counts
-- **Interactive Controls**: Keyboard shortcuts and UI controls
-- **Data Export**: Export performance metrics to CSV
+- Real-time scrolling plot with PixiJS
+- Pause/resume plot time
+- Adjustable playback speed
+- Current real-time and plot-time labels
+- Hover tooltip for data points
+- Modular synthetic data input system
+- Toggleable side panels for status, source config, app config, and help
 
-## Getting Started
+## Getting started
 
 ```bash
-# Install dependencies
 npm install
-
-# Start development server
 npm run dev
+```
 
-# Build for production
-npm run build
+Production build:
 
-# Preview production build
+```bash
+npm run build
 npm run preview
 ```
 
 ## Controls
 
-- **G** - Toggle grid display
-- **M** - Toggle metrics display
-- **E** - Export metrics to CSV
+- `Space` — pause/resume
+- `[` — slow down playback
+- `]` — speed up playback
+- `G` — toggle grid
+- Hover plot — inspect nearest sample
 
-## Architecture
+## Project structure
 
-```
+```text
 src/
-├── main.js       - Application entry point and orchestration
-├── waterfall.js  - Waterfall graph visualization component
-└── metrics.js    - Performance metrics collection and analysis
+├── app/
+│   └── create-app.js       # application composition root
+├── core/
+│   ├── event-bus.js        # lightweight pub/sub
+│   ├── store.js            # centralized app state
+│   └── time-controller.js  # real time + plot time transport
+├── data/
+│   ├── base-source.js      # source interface
+│   ├── source-registry.js  # source lifecycle + routing
+│   └── synthetic-wave-source.js
+├── plot/
+│   ├── plot-buffer.js      # bounded in-memory sample history
+│   └── timeplot-view.js    # Pixi rendering + hover picking
+├── ui/
+│   └── panel-manager.js    # DOM shell, controls, panels, tooltip
+├── bootstrap.js            # startup entry
+├── main.js                 # compatibility shim to bootstrap
+├── styles.css              # global UI styling
+└── utils-format.js         # display formatting helpers
 ```
 
-## Performance Comparison
+## Design direction
+
+This restart intentionally optimizes for a strong foundation instead of feature sprawl:
+
+- transport and time are first-class systems
+- data generation is isolated from rendering
+- the plot owns visualization only
+- DOM panels handle controls and diagnostics
+- app composition happens in one predictable bootstrap path
 
-This implementation can be directly compared with:
-- Rust/wgpu version (`../src/`)
-- C++ version (`../cpp-timeplot/`)
+## Next good additions
 
-All three implementations track the same metrics for fair comparison.
+- real external data sources (WebSocket, REST replay, files)
+- richer panel layout system with docking/persistence
+- plot annotations and multiple stacked plots
+- configurable schemas for incoming data types
+- persistent user settings