Live 1D Data Plotting (Motor vs. Detector) #392

Part of #373 Live Data & Image Plotting

Live 1d plotting on UI showing live scan.

Currently avaiable: Non-web base ui: #406

Goals

Acceptance criteria : What journeys should the user be able to complete to consider your feature done
Be as specific as you can, check them off once they work. Add more if you find more requirements during development. Issue should only be considered done after all of them are checked

• Real-Time 1D Streaming (PUSH From Blueapi): The UI dynamically streams and renders 1D line/scatter graphs of detector scalar readbacks (e.g., photodiodes, counters, integrated intensities) against device/motor positions as BlueSky line scans execute .
• Flexible Axis & Channel Selection: Users can select any recorded independent variable (motors) for the X-axis and any detectors/device for the Y-axis on the fly, with single-click axis swapping.
• Multi-Channel Overlay & Dual Y-Axis: Supports selecting and rendering multiple Y-detector channels simultaneously, with dual Y-axis (left vs. right scale) for channels with different physical units or intensity ranges.
• Historical Comparison (Overlay vs. Replace): Users can query past scans via Tiled and overlay historical 1D curves onto active live scans for direct comparison, or switch to single-run inspection mode.
• Interactive Plot Controls: Supports auto-scaling, zoom/pan bounds, hover displaying exact coordinates/counts, and basic peak identification markers.

Tasks

base on the goals, deduce the tasks required. check them off once they're done

• WebSocket Data Ingestion: Integrate the BlueAPI WebSocket client (BlueAPI -> WebSockets -> UI) to listen to live 1D scan event documents.
• Buffer: Buffer to store the incoming point streams without UI lag.
• Channel & Axis Selector Panel: Build dropdown controls for selecting X and Y variables, multi-select checkboxes for Y channels..
• Dual Y-Axis Toggle: Implement dual Y-axis scaling logic for multi-channel overlays with differing dynamic ranges or physical units.
• 1D Chart Component Integration: Integrate a lightweight, 1D line/scatter chart component (e.g., Davidia 1D or Canvas 2D) supporting dynamic dataset.
• Scatter / Point Mode: Add rendering toggles to switch between continuous line plots and scatter for adaptive-step scans.
• Tiled Data Fetcher: Implement a client to query Tiled scan data to pull historical run datasets.
• Overlay: Build overlay to render old data as secondary lines alongside active live scan data.

Related Resources

BlueAPI Websockets: websockets.
With web socket client, we should be able to get data push into out UI and proved live Live STXM / 1D Scan Updates.
Davidia: It seem to provides us all the 1d plot needs, the question will be are we going inbed the service in the UI service or have a davida Plot running in an other service.
Possible data flow.

flowchart LR
   subgraph Live Stream - PUSH
       blueAPI[blueAPI / RE] -->|Python API| DavidiaServer[Davidia Plot Server]
       DavidiaServer -->|WebSockets PUSH| UI["React Web UI - DavidiaPlotComponent"]
   end

   subgraph Historical Overlay - PULL
       Tiled[Tiled Data API] -->|REST API PULL| UI
   end

Additional context