feat: add average line to raw data plot on average point click

Author: rinriko

src/app/layout.tsx

@@ -2,8 +2,7 @@
 import './globals.css';
 import { ReactNode } from 'react';
 import Navbar from '@/components/Navbar/Navbar';
-// import Controller from '@/components/Controller';
-import SidebarLayout from '@/components/Sidebar/SidebarLayout';
+import Sidebar from '@/components/Sidebar/Sidebar';
 import { PlotSettingsProvider } from '@/context/PlotSettingsContext';
 export const metadata = {
   title: 'JWST Precision Timing',
@@ -18,8 +17,8 @@ export default function RootLayout({ children }: { children: ReactNode }) {
           <PlotSettingsProvider>
             <Navbar />
             <div className="flex flex-1 overflow-hidden">
-              <SidebarLayout />
-              <main className="flex-1 h-[calc(100vh-4rem)] overflow-auto">
+              <Sidebar />
+              <main className="flex-1 h-[calc(100vh-52px)] overflow-auto">
                 {children}
               </main>
             </div>

src/app/page.tsx

@@ -2,7 +2,7 @@ import LightCurvePlot from '@/components/LightCurvePlot';
 
 export default function HomePage() {
   return (
-    <main className="min-h-screen bg-gray-50">
+    <main className="min-h-full bg-gray-50 overflow-auto">
       <LightCurvePlot />
     </main>
   );

src/components/Controller.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import {  Fragment } from 'react';
+import { Fragment } from 'react';
 import { Dialog, Transition } from '@headlessui/react';
 
 /*
@@ -18,6 +18,7 @@ interface ImageModalProps {
     mjd?: number;
     filename?: string;
     rows?: Array<{
+      color?: string;
       epoch: string;
       r_in: string;
       r_out: string;
@@ -74,6 +75,7 @@ export function ImageModal({
                     <table className="min-w-full text-sm border border-gray-300 rounded overflow-hidden">
                       <thead className="bg-gray-100 text-black font-semibold">
                         <tr>
+                          <th className="px-3 py-2 text-left"> </th>
                           <th className="px-3 py-2 text-left">Epoch</th>
                           <th className="px-3 py-2 text-left">r_in</th>
                           <th className="px-3 py-2 text-left">r_out</th>
@@ -83,10 +85,22 @@ export function ImageModal({
                       <tbody>
                         {details.rows.map((row, idx) => (
                           <tr key={idx} className="border-t hover:bg-gray-50">
+                            <td className="px-3 py-1">
+                              {row.color ? (
+                                <div
+                                  className="w-4 h-4 rounded-full border border-gray-300"
+                                  style={{ backgroundColor: row.color }}
+                                  title={row.color}
+                                />
+                              ) : (
+                                <div className="w-4 h-4 rounded-full border border-gray-200 bg-white" title="No color" />
+                              )}
+                            </td>
                             <td className="px-3 py-1 font-mono text-black">{row.epoch}</td>
                             <td className="px-3 py-1 font-mono text-black">{row.r_in}</td>
                             <td className="px-3 py-1 font-mono text-black">{row.r_out}</td>
-                            <td className="px-3 py-1 text-blue-600 font-semibold">{row.y.toFixed(2)}</td>
+                            <td className="px-3 py-1 text-black font-semibold">{row.y.toFixed(2)}</td>
+                            {/* <td className="px-3 py-1 text-blue-600 font-semibold">{row.y.toFixed(2)}</td> */}
                           </tr>
                         ))}
                       </tbody>