This program is an interactive, web-based visualization system designed for exploratory analysis of time-resolved astronomical light-curve data, with a particular focus on ZTF J1539 PSF surface-brightness measurements used in JWST precision timing studies. The application enables users to seamlessly switch between raw observational data and statistically averaged representations, while preserving a direct link between aggregated points and their underlying measurements.

The system renders dual-panel light curves using Plotly, displaying short-wavelength (SW) and long-wavelength (LW) surface brightness measurements simultaneously. Users can:

• Select different data representations (raw, averaged, or combined)
• Configure binning parameters
• Choose among multiple x-axis domains:
  • Phase
  • MJD
  • Absolute time
  • Derived temporal units (days, hours, minutes, seconds)

A central design goal of the tool is traceability: every averaged data point retains a mapping to the raw points that contributed to it. This mapping allows users to drill down from a statistical summary to the exact measurements used to compute it.

The program supports rich, event-driven interaction:

• Clicking an averaged point dynamically opens a floating panel displaying all associated raw data points.
• The raw-data panel is draggable and resizable, allowing side-by-side comparison with the main light curve.
• The raw view overlays the mean value and uncertainty bands, enabling visual assessment of scatter and outliers.
• Users can interactively switch the raw-data x-axis (e.g., phase → time → seconds) without recomputing the data.

Hover interactions provide context-aware tooltips, showing metadata such as epoch, radial bounds, phase, MJD, and measurement uncertainty, ensuring that scientific context is always available.

To support data-quality assessment, the program includes configurable raw-point filtering mechanisms:

• Percent-based filtering, which keeps points within a user-defined percentage of the average
• Sigma-band filtering, which selects points within a specified standard-deviation range

Filters can be applied inside or outside the selected band, and the accepted range is visually highlighted directly on the plot. Filtered results update both the displayed raw points and the corresponding averaged annotations, enabling rapid sensitivity testing of binning and filtering assumptions.

For datasets with associated observational images, the tool allows users to:

• Click individual raw or averaged points to attach annotated thumbnails
• Maintain a synchronized collection of selected images below the plot
• Open high-resolution images in a modal view alongside contextual numerical values extracted from the plotted data

This tightly integrates numerical trends and image-level evidence, supporting visual validation of astrophysical features or anomalies.

The system is implemented as a client-side React / Next.js application, leveraging:

• React Plotly.js for high-performance interactive plotting
• A centralized PlotSettings context for consistent global state management
• Modular utilities for trace construction, filtering, and annotation generation
• Dynamic imports to ensure compatibility with server-side rendering constraints

The architecture cleanly separates data processing, visual styling, and interaction logic, making the tool extensible to additional targets, wavelength bands, or survey datasets.

This program is intended for astronomers and data analysts who require:

• Transparent linkage between averaged results and raw observations
• Interactive validation of binning, filtering, and uncertainty modeling
• High-precision timing and variability studies using JWST-related datasets

By combining statistical aggregation with direct access to raw measurements and imagery, the tool bridges the gap between quantitative analysis and visual inspection, enabling more robust scientific interpretation.

Before installing the project, ensure you have the following installed:

• Node.js (version 18 or later recommended)
• npm, yarn, or pnpm (npm is used in the examples below)
• A modern web browser (Chrome, Firefox, Edge)

1. Clone the repository

git clone https://github.com/your-org/your-repo-name.git
cd your-repo-name

2. Install dependencies

npm install

3. Build

npm run build

4. Start

npm run start