Custom cross-section & projection (two-click axis)

[Marek55S]

Summary

Allow a user to define a custom axis by clicking two points on an image (JSRoot canvas) and produce:

• a cross-section (pixel values sampled along the line between the two clicks), and
• a projection/histogram computed across a band around that line (configurable width > 1 px).

This behaves like JSRoot's projection tool but with an arbitrary axis defined by two user clicks. The band can be a thin 1px line or a wider rectangular strip.

Why

Interactive profiles and projections along arbitrary directions are valuable for inspecting features that are not axis-aligned. Providing this in the UI improves analysis workflows and enables quick visual diagnostics.

Requirements (core)

• UI: capture two clicks to define axis; provide band-width control (integer px); show overlay (center line + translucent band).
• Output: cross-section array (values along axis) and projection/histogram aggregated over the band (sum or mean per sampled position and optional binning).
• Types: support u8, u16 and f32 pixel buffers (client or backend must respect pixel type).
• Performance: interactive for typical images (≤~2048×2048). If client-side compute is too slow, provide backend endpoint.
• Research: check whether JSRoot offers arbitrary-axis projection; otherwise implement sampling in JS or backend.

Design approaches

1. Client-side (preferred if feasible)

• Use JSRoot only for coordinate capture and overlay rendering.
• Access pixel buffer in JS/WasM and sample along the axis. For width>1 sample perpendicular offsets and aggregate.
• Compute histogram locally and render results client-side.

Pros: low latency, no API changes. Cons: CPU load on client for large images or wide bands.

2. Backend-assisted

• Send axis params (and image id or pixels) to backend (Rust/wasm API). Backend computes cross-section and histogram and returns results.

Pros: better performance for big images, simpler client. Cons: needs new API and careful payload handling.

3. Hybrid

• Try client-first, fallback to backend for heavy work.

Acceptance criteria

• Two clicks define axis; overlay shows line and band; user can change band width and recompute.
• Compute returns cross-section + projection/histogram displayed in UI (chart + numeric data).
• Works for u8 and u16 test images; f32 support optional but preferred.
• Handles out-of-bounds points (clamping) and border bands gracefully (uses fewer pixels where band leaves image).

Tasks

1. Research: verify JSRoot capabilities and confirm where pixel buffers are accessible in the client (wasm bindings/useWasm). Decide client vs backend compute.
2. UI: add a Cross-section tool (two-click capture, width slider, overlay). Draw overlay on top of JSRoot canvas with SVG/canvas.
3. Sampling: implement client-side sampler (nearest or bilinear) that walks the line and aggregates perpendicular offsets for band width.
4. Display: render cross-section curve and projection histogram; allow export of raw values.
5. Backend fallback (if needed): add API endpoint (Rust) to accept axis params and return computed results.

Suggested UX

1. Activate "Cross-section" tool.
2. Click point A, click point B to finish axis.
3. Adjust band width slider (live preview).
4. Click "Compute" → show cross-section curve and histogram; allow export.