16 function fitting in job view

frontend/jest.config.js

@@ -0,0 +1,7 @@
+/** @type {import('ts-jest').JestConfigWithTsJest} **/
+export default {
+  testEnvironment: "node",
+  transform: {
+    "^.+.tsx?$": ["ts-jest", {}],
+  },
+};

frontend/src/components/JobView.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useMemo, useState } from "react";
+import { useCallback, useEffect, useMemo, useState } from "react";
 import {
   Alert,
   Button,
@@ -27,6 +27,7 @@ import { deserialize } from "../utils/deserializer";
 import { updateJobParams } from "../utils/updateJobParams";
 import { cancelJob } from "../utils/cancelJob";
 import HistogramPlot from "./jobView/HistogramPlot";
+import FitPanel from "./jobView/FitPanel";
 
 function getPlotTitle(scheduledTime?: string, experimentName?: string): string {
   if (!scheduledTime) return experimentName || "";
@@ -37,9 +38,11 @@ function getPlotTitle(scheduledTime?: string, experimentName?: string): string {
 export const JobView = ({
   jobId,
   onLoaded,
+  showFitPanel = false,
 }: {
   jobId: string | undefined;
   onLoaded?: () => void;
+  showFitPanel?: boolean;
 }) => {
   const [experimentMetadata, setExperimentMetadata] =
     useState<ExperimentMetadata | null>(null);
@@ -90,6 +93,12 @@ export const JobView = ({
     experimentData.total_data_points > 0 &&
     loadedDataPoints < experimentData.total_data_points;
 
+  const [clickedX, setClickedX] = useState<number | null>(null);
+  const handleChartClick = useCallback((x: number) => setClickedX(x), []);
+
+  // Reset clicked position when switching jobs
+  useEffect(() => setClickedX(null), [jobId]);
+
   const [showRepetitions, setShowRepetitions] = useState<boolean>(() => {
     const v = localStorage.getItem("showRepetitions");
     return v ? JSON.parse(v) : false;
@@ -206,10 +215,10 @@ export const JobView = ({
                 <JobStatusIndicator status={jobRunInfo?.status} log={jobRunInfo?.log} />
                 <Typography variant="h6">
                   {jobId}
-                  {experimentMetadata?.constructor_kwargs.name && (
+                  {experimentMetadata?.constructor_kwargs?.name && (
                     <>
                       {" "}
-                      - {experimentMetadata?.constructor_kwargs.name} (
+                      - {experimentMetadata?.constructor_kwargs?.name} (
                       {experimentMetadata?.class_name})
                     </>
                   )}
@@ -396,7 +405,7 @@ export const JobView = ({
                     title={win.name}
                     subtitle={getPlotTitle(
                       jobRunInfo?.scheduled_time,
-                      experimentMetadata?.constructor_kwargs.name,
+                      experimentMetadata?.constructor_kwargs?.name,
                     )}
                   />
                 )}
@@ -435,19 +444,32 @@ export const JobView = ({
                     title={win.name}
                     subtitle={getPlotTitle(
                       jobRunInfo?.scheduled_time,
-                      experimentMetadata?.constructor_kwargs.name,
+                      experimentMetadata?.constructor_kwargs?.name,
                     )}
                     repetitions={jobInfo?.repetitions}
                     showRepetitions={showRepetitions}
                     scanParameters={jobInfo?.scan_parameters}
                     windowSize={windowSize}
                     yRange={{ min: yMin, max: yMax }}
+                    fits={showFitPanel && is1D ? experimentData.fits : undefined}
+                    onChartClick={showFitPanel && is1D ? handleChartClick : undefined}
                   />
                 )}
               </CardContent>
             </Card>
           </Grid>
         ))}
+        {showFitPanel && is1D && jobId && jobInfo?.status === JobStatus.PROCESSED && (
+          <Grid size={{ xs: 12 }}>
+            <FitPanel
+              jobId={jobId}
+              experimentData={experimentData}
+              clickedX={clickedX}
+              scanParameters={jobInfo?.scan_parameters}
+            />
+          </Grid>
+        )}
+
         <Grid size={{ xs: 12 }}>
           <Card>
             <CardContent>

frontend/src/components/ResultChannelPlot.tsx

@@ -1,5 +1,5 @@
 import React, { useCallback, useEffect, useMemo, useState } from "react";
-import { ExperimentData } from "../types/ExperimentData";
+import { ExperimentData, FitResult } from "../types/ExperimentData";
 import { ReactECharts, ReactEChartsProps } from "./ReactEcharts";
 import { EChartsOption } from "echarts";
 import type { ECharts } from "echarts/core";
@@ -19,6 +19,8 @@ interface ResultChannelPlotProps {
   scanParameters: ScanParameter[] | undefined;
   windowSize?: number | null;
   yRange?: { min: number | null; max: number | null };
+  fits?: Record<string, FitResult>;
+  onChartClick?: (xValue: number) => void;
 }
 
 const formatAxisLabel = (value: string): string => {
@@ -100,6 +102,8 @@ const ResultChannelPlot = ({
   scanParameters = [],
   windowSize = null,
   yRange,
+  fits = {},
+  onChartClick,
 }: ResultChannelPlotProps) => {
   const [chart, setChart] = useState<ECharts | null>(null);
   const notifications = useNotifications();
@@ -340,6 +344,28 @@ const ResultChannelPlot = ({
       };
     }
 
+    // Add fit curve overlays for 1D scans
+    if (scanParameters.length === 1 && fits) {
+      for (const [channelName, fitResult] of Object.entries(fits)) {
+        if (!fitResult.success || !fitResult.fit_curve) continue;
+        if (!channelNames.includes(channelName)) continue;
+
+        const fitData = fitResult.fit_curve.x.map((x, i) => [
+          x,
+          fitResult.fit_curve!.y[i],
+        ]);
+
+        (chartSeries as unknown[]).push({
+          name: `${channelName} fit`,
+          type: "line",
+          data: fitData,
+          showSymbol: false,
+          lineStyle: { type: "dashed", width: 2 },
+          tooltip: { show: false },
+        });
+      }
+    }
+
     return {
       title,
       textStyle: { fontFamily: "sans-serif", fontSize: 12 },
@@ -381,6 +407,8 @@ const ResultChannelPlot = ({
     showRepetitions,
     windowSize,
     yRange,
+    fits,
+    channelNames,
   ]);
 
   const updateChart = useCallback(
@@ -390,6 +418,24 @@ const ResultChannelPlot = ({
     [setChart],
   );
 
+  useEffect(() => {
+    if (!chart || !onChartClick) return;
+    const zr = chart.getZr();
+    const handler = (params: { offsetX: number; offsetY: number }) => {
+      const point = [params.offsetX, params.offsetY];
+      if (chart.containPixel("grid", point)) {
+        const dataPoint = chart.convertFromPixel("grid", point);
+        if (dataPoint && typeof dataPoint[0] === "number" && isFinite(dataPoint[0])) {
+          onChartClick(dataPoint[0]);
+        }
+      }
+    };
+    zr.on("click", handler);
+    return () => {
+      zr.off("click", handler);
+    };
+  }, [chart, onChartClick]);
+
   useEffect(() => {
     if (!is2D || !chart) return;