From 5c5b00e6add3522eb23211ee8cf39ce73ea443b5 Mon Sep 17 00:00:00 2001
From: porink0424 <daichi2120@gmail.com>
Date: Wed, 10 Apr 2024 17:28:03 +0900
Subject: [PATCH] Move PlotIntermediateValues from standalone_app to
 tslib/react

---
 standalone_app/src/components/StudyDetail.tsx |  3 +-
 .../PlotIntermediateValues.stories.tsx        | 39 +++++++++++++++++
 .../src/components/PlotIntermediateValues.tsx |  9 ++--
 .../PlotIntermediateValuesDark.stories.tsx    | 42 +++++++++++++++++++
 tslib/react/src/index.ts                      |  5 ++-
 5 files changed, 90 insertions(+), 8 deletions(-)
 create mode 100644 tslib/react/src/components/PlotIntermediateValues.stories.tsx
 rename {standalone_app => tslib/react}/src/components/PlotIntermediateValues.tsx (92%)
 create mode 100644 tslib/react/src/components/PlotIntermediateValuesDark.stories.tsx

diff --git a/standalone_app/src/components/StudyDetail.tsx b/standalone_app/src/components/StudyDetail.tsx
index de64c81e..f6906713 100644
--- a/standalone_app/src/components/StudyDetail.tsx
+++ b/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<{
diff --git a/tslib/react/src/components/PlotIntermediateValues.stories.tsx b/tslib/react/src/components/PlotIntermediateValues.stories.tsx
new file mode 100644
index 00000000..62a971a1
--- /dev/null
+++ b/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,
+  },
+}
diff --git a/standalone_app/src/components/PlotIntermediateValues.tsx b/tslib/react/src/components/PlotIntermediateValues.tsx
similarity index 92%
rename from standalone_app/src/components/PlotIntermediateValues.tsx
rename to tslib/react/src/components/PlotIntermediateValues.tsx
index 1330dfa2..233fdcb1 100644
--- a/standalone_app/src/components/PlotIntermediateValues.tsx
+++ b/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,
diff --git a/tslib/react/src/components/PlotIntermediateValuesDark.stories.tsx b/tslib/react/src/components/PlotIntermediateValuesDark.stories.tsx
new file mode 100644
index 00000000..48d6df55
--- /dev/null
+++ b/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,
+  },
+}
diff --git a/tslib/react/src/index.ts b/tslib/react/src/index.ts
index e690ba58..4d6401fd 100644
--- a/tslib/react/src/index.ts
+++ b/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"