|
| 1 | +'use client'; |
| 2 | + |
| 3 | +import { useEffect, useState } from "react"; |
| 4 | +import MatrixPlot from "@/components/MatrixPlot"; |
| 5 | +import { usePlotSettings } from '@/context/PlotSettingsContext'; |
| 6 | +import { update_df, getEpoch } from '@/utils/matrixUtils'; |
| 7 | + |
| 8 | +const MatrixPage = () => { |
| 9 | + const { |
| 10 | + dataType, |
| 11 | + dataSelection, |
| 12 | + labelFontSize, |
| 13 | + plotType, |
| 14 | + noOfDataPoint, |
| 15 | + setSettings |
| 16 | + } = usePlotSettings(); |
| 17 | + const epochs = [...new Set(dataSelection.map(sel => getEpoch(sel)))]; |
| 18 | + const isValid = dataSelection.length >= 2 && epochs.length === 1; |
| 19 | + // eslint-disable-next-line @typescript-eslint/no-explicit-any |
| 20 | + const [swMatrix, setSwMatrix] = useState<any[] | null>(null); |
| 21 | + // eslint-disable-next-line @typescript-eslint/no-explicit-any |
| 22 | + const [lwMatrix, setLwMatrix] = useState<any[] | null>(null); |
| 23 | + const [loading, setLoading] = useState(false); |
| 24 | + const [error, setError] = useState(false); |
| 25 | +const baseHeight = 600; |
| 26 | +const extraPerDimension = 120; // adjust as needed |
| 27 | + |
| 28 | +// eslint-disable-next-line @typescript-eslint/no-explicit-any |
| 29 | +const calcPlotHeight = (matrixData: any[]) => { |
| 30 | + const dimCount = matrixData.length > 0 ? Object.keys(matrixData[0]).length : 2; |
| 31 | + return dataSelection.length > 5 |
| 32 | + ? baseHeight + (dimCount - 2) * extraPerDimension |
| 33 | + : baseHeight; |
| 34 | +}; |
| 35 | + useEffect(() => { |
| 36 | + if (!isValid) return; |
| 37 | + setLoading(true); |
| 38 | + Promise.all([ |
| 39 | + update_df('SW', dataType as 'average' | 'raw', dataSelection, noOfDataPoint), |
| 40 | + update_df('LW', dataType as 'average' | 'raw', dataSelection, noOfDataPoint) |
| 41 | + ]) |
| 42 | + .then(([swData, lwData]) => { |
| 43 | + setSwMatrix(swData); |
| 44 | + setLwMatrix(lwData); |
| 45 | + setSettings({ focusRangeMax: 100, focusRangeMaxManuallySet: false }); |
| 46 | + setError(false); |
| 47 | + }) |
| 48 | + .catch((err) => { |
| 49 | + console.error("Matrix loading error", err); |
| 50 | + setError(true); |
| 51 | + }) |
| 52 | + .finally(() => setLoading(false)); |
| 53 | + }, [dataSelection, dataType, plotType, noOfDataPoint, noOfDataPoint]); |
| 54 | + |
| 55 | + return ( |
| 56 | + <div className="p-4"> |
| 57 | + <h1 className="text-xl font-bold mb-4 text-black">Scatter Matrix of Different Frames</h1> |
| 58 | + |
| 59 | + {!isValid ? ( |
| 60 | + <p className="text-red-500">Please select at least two items from the same epoch to generate a matrix plot.</p> |
| 61 | + ) : loading ? ( |
| 62 | + <p>Loading matrix...</p> |
| 63 | + ) : error || !swMatrix || !lwMatrix ? ( |
| 64 | + <p className="text-red-500">Failed to load matrix data.</p> |
| 65 | + ) : ( |
| 66 | + <div className={`grid gap-6 ${dataSelection.length > 5 ? 'grid-rows-2 grid-cols-1' : 'grid-cols-1 lg:grid-cols-2'}`}> |
| 67 | + <MatrixPlot |
| 68 | + // <D3MatrixPlot |
| 69 | + matrixData={swMatrix} |
| 70 | + labelFontSize={labelFontSize} |
| 71 | + title="SW Scatter Matrix" |
| 72 | + subtitle={`Source Brightness measured with BG annulus at each frame (e.g., SW.<i>r<sub>in</sub></i>.<i>r<sub>out</sub></i> → SW.10.30)`} |
| 73 | + // subtitle="sw" |
| 74 | + height={calcPlotHeight(swMatrix)} |
| 75 | + /> |
| 76 | + |
| 77 | + <MatrixPlot |
| 78 | + // <D3MatrixPlot |
| 79 | + matrixData={lwMatrix} |
| 80 | + labelFontSize={labelFontSize} |
| 81 | + title="LW Scatter Matrix" |
| 82 | + subtitle={`Source Brightness measured with BG annulus at each frame (e.g., LW.<i>r<sub>in</sub></i>.<i>r<sub>out</sub></i> → LW.10.30)`} |
| 83 | + // subtitle="lw" |
| 84 | + height={calcPlotHeight(lwMatrix)} |
| 85 | + /> |
| 86 | + </div> |
| 87 | + )} |
| 88 | + </div> |
| 89 | + ); |
| 90 | +}; |
| 91 | + |
| 92 | +export default MatrixPage; |
0 commit comments