Move PlotIntermediateValues from standalone_app to tslib/react

standalone_app/src/components/StudyDetail.tsx

@@ -13,10 +13,9 @@ import {
   useTheme,
 } from "@mui/material"
 import Grid2 from "@mui/material/Unstable_Grid2"
-import { PlotHistory, PlotImportance, TrialTable } from "@optuna/react"
+import { PlotHistory, PlotImportance, PlotIntermediateValues, TrialTable } from "@optuna/react"
 import React, { FC, useContext, useState, useEffect } from "react"
 import { Link, useParams } from "react-router-dom"
-import { PlotIntermediateValues } from "./PlotIntermediateValues"
 import { StorageContext } from "./StorageProvider"
 
 export const StudyDetail: FC<{

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

@@ -0,0 +1,39 @@
+import { CssBaseline, ThemeProvider } from "@mui/material"
+import { Meta, StoryObj } from "@storybook/react"
+import React from "react"
+import { useMockStudy } from "../MockStudies"
+import { lightTheme } from "../styles/lightTheme"
+import { PlotIntermediateValues } from "./PlotIntermediateValues"
+
+const meta: Meta<typeof PlotIntermediateValues> = {
+  component: PlotIntermediateValues,
+  title: "PlotIntermediateValues",
+  tags: ["autodocs"],
+  decorators: [
+    (Story, storyContext) => {
+      const study = useMockStudy(storyContext.parameters?.studyId)
+      if (!study) return <p>loading...</p>
+      return (
+        <ThemeProvider theme={lightTheme}>
+          <CssBaseline />
+          <Story
+            args={{
+              trials: study.trials,
+              includePruned: false,
+              logScale: false,
+            }}
+          />
+        </ThemeProvider>
+      )
+    },
+  ],
+}
+
+export default meta
+type Story = StoryObj<typeof PlotIntermediateValues>
+
+export const MockStudy1: Story = {
+  parameters: {
+    studyId: 1,
+  },
+}

tslib/react/src/components/PlotIntermediateValues.tsx

@@ -1,12 +1,13 @@
 import { Box, Typography, useTheme } from "@mui/material"
-import { plotlyDarkTemplate } from "@optuna/react"
 import * as plotly from "plotly.js-dist-min"
-import React, { FC, useEffect } from "react"
+import { FC, useEffect } from "react"
+import * as Optuna from "@optuna/types"
+import { plotlyDarkTemplate } from "./PlotlyDarkMode"
 
 const plotDomId = "graph-intermediate-values"
 
 export const PlotIntermediateValues: FC<{
-  trials: Trial[]
+  trials: Optuna.Trial[]
   includePruned: boolean
   logScale: boolean
 }> = ({ trials, includePruned, logScale }) => {
@@ -36,7 +37,7 @@ export const PlotIntermediateValues: FC<{
 }
 
 const plotIntermediateValue = (
-  trials: Trial[],
+  trials: Optuna.Trial[],
   mode: string,
   filterCompleteTrial: boolean,
   filterPrunedTrial: boolean,

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

@@ -0,0 +1,42 @@
+import { CssBaseline, ThemeProvider } from "@mui/material"
+import { Meta, StoryObj } from "@storybook/react"
+import React from "react"
+import { useMockStudy } from "../MockStudies"
+import { darkTheme } from "../styles/darkTheme"
+import { PlotIntermediateValues } from "./PlotIntermediateValues"
+
+const meta: Meta<typeof PlotIntermediateValues> = {
+  component: PlotIntermediateValues,
+  title: "PlotIntermediateValuesDark",
+  tags: ["autodocs"],
+  decorators: [
+    (Story, storyContext) => {
+      const study = useMockStudy(storyContext.parameters?.studyId)
+      if (!study) return <p>loading...</p>
+      return (
+        <ThemeProvider theme={darkTheme}>
+          <CssBaseline />
+          <Story
+            args={{
+              trials: study.trials,
+              includePruned: false,
+              logScale: false,
+            }}
+          />
+        </ThemeProvider>
+      )
+    },
+  ],
+  parameters: {
+    backgrounds: { default: "dark" },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof PlotIntermediateValues>
+
+export const MockStudy1: Story = {
+  parameters: {
+    studyId: 1,
+  },
+}

tslib/react/src/index.ts

@@ -1,6 +1,7 @@
 export { DataGrid } from "./components/DataGrid"
 export type { DataGridColumn } from "./components/DataGrid"
-export { PlotHistory } from "./components/PlotHistory"
-export { TrialTable } from "./components/TrialTable"
 export { plotlyDarkTemplate } from "./components/PlotlyDarkMode"
+export { PlotHistory } from "./components/PlotHistory"
 export { PlotImportance } from "./components/PlotImportance"
+export { PlotIntermediateValues } from "./components/PlotIntermediateValues"
+export { TrialTable } from "./components/TrialTable"