Apply PlotHistory to standalone

standalone_app/src/components/StudyDetail.tsx

@@ -173,7 +173,7 @@ export const StudyDetail: FC<{
           </Typography>
           <Card sx={{ margin: theme.spacing(2) }}>
             <CardContent>
-              <PlotHistory study={study} />
+              {!!study && <PlotHistory studies={[study]} />}
             </CardContent>
           </Card>
           <Grid container spacing={0}>

tslib/react/src/components/PlotHistory.stories.tsx

@@ -14,12 +14,13 @@ const meta: Meta<typeof PlotHistory> = {
     (Story, storyContext) => {
       const { study } = useMockStudy(storyContext.parameters?.studyId)
       if (!study) return <p>loading...</p>
+      const studies = [study]
       return (
         <ThemeProvider theme={storyContext.parameters?.theme}>
           <CssBaseline />
           <Story
             args={{
-              study,
+              studies,
             }}
           />
         </ThemeProvider>

tslib/react/src/components/PlotHistory.tsx

@@ -84,6 +84,7 @@ export const PlotHistory: FC<{
     }
   }
 
+  // biome-ignore lint/correctness/useExhaustiveDependencies: <explanation>
   useEffect(() => {
     if (graphComponentState !== "componentWillMount") {
       plotHistory(
@@ -93,9 +94,16 @@ export const PlotHistory: FC<{
         logScale,
         colorThemeUsed,
         markerSize
-      )
+      )?.then(notifyGraphDidRender)
     }
-  }, [graphComponentState, studies, selected, logScale, xAxis, colorThemeUsed, markerSize])
+  }, [
+    historyPlotInfos,
+    selected,
+    xAxis,
+    colorThemeUsed,
+    markerSize,
+    graphComponentState,
+  ])
 
   return (
     <Grid container direction="row">
@@ -122,8 +130,8 @@ export const PlotHistory: FC<{
               value={selected.identifier()}
               onChange={handleObjectiveChange}
             >
-              {targets.map((t, i) => (
-                <MenuItem value={t.identifier()} key={i}>
+              {targets.map((t) => (
+                <MenuItem value={t.identifier()} key={t.identifier()}>
                   {t.toLabel(studies[0].metric_names)}
                 </MenuItem>
               ))}
@@ -324,5 +332,5 @@ const plotHistory = (
     })
   }
   plotData.push(...infeasiblePlotData)
-  plotly.react(plotDomId, plotData, layout)
+  return plotly.react(plotDomId, plotData, layout)
 }

tslib/react/src/components/PlotParallelCoordinate.stories.tsx

@@ -14,12 +14,13 @@ const meta: Meta<typeof PlotParallelCoordinate> = {
     (Story, storyContext) => {
       const { study } = useMockStudy(storyContext.parameters?.studyId)
       if (!study) return <p>loading...</p>
+      const studies = [study]
       return (
         <ThemeProvider theme={storyContext.parameters?.theme}>
           <CssBaseline />
           <Story
             args={{
-              study,
+              studies,
             }}
           />
         </ThemeProvider>

tslib/react/test/PlotHistory.test.tsx

@@ -18,7 +18,7 @@ describe("PlotHistory Tests", async () => {
     }) => <div data-testid={dataTestId}>{children}</div>
     return render(
       <Wrapper dataTestId={dataTestId}>
-        <PlotHistory study={study} />
+        <PlotHistory studies={[study]} />
       </Wrapper>
     )
   }