wassname/optuna-dashboard
1
0
Fork 0
mirror of https://github.com/wassname/optuna-dashboard.git synced 2026-09-09 11:28:14 +08:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #935 from c-bata/storybook-improvement

Browse Source 
Remove `*Dark.stories.tsx` and add some improvements
This commit is contained in:
c-bata
2024-08-19 09:50:49 +09:00
committed by GitHub
parent 8bbbd81b5e c42f838f0a
commit a0dd548c3a
21 changed files with 1132 additions and 4254 deletions
Download Patch File Download Diff File Expand all files Collapse all files
optuna_dashboard/package-lock.json
Generated
+9 -8
View File
@@ -79,15 +79,16 @@
"react-dom": "^18.2.0"
},
"devDependencies": {
"@chromatic-com/storybook": "^1.6.1",
"@optuna/storage": "file:../storage",
"@optuna/types": "file:../types",
"@storybook/addon-essentials": "^8.0.4",
"@storybook/addon-interactions": "^8.0.4",
"@storybook/addon-links": "^8.0.4",
"@storybook/blocks": "^8.0.4",
"@storybook/react": "^8.0.4",
"@storybook/react-vite": "^8.0.4",
"@storybook/test": "^8.0.4",
"@storybook/addon-essentials": "^8.2.9",
"@storybook/addon-interactions": "^8.2.9",
"@storybook/addon-links": "^8.2.9",
"@storybook/blocks": "^8.2.9",
"@storybook/react": "^8.2.9",
"@storybook/react-vite": "^8.2.9",
"@storybook/test": "^8.2.9",
"@testing-library/jest-dom": "^6.4.2",
"@testing-library/react": "^14.2.2",
"@types/plotly.js-dist-min": "^2.3.4",
@@ -95,7 +96,7 @@
"@types/react-dom": "^18.2.19",
"@vitejs/plugin-react-swc": "^3.5.0",
"jsdom": "^24.0.0",
"storybook": "^8.0.4",
"storybook": "^8.2.9",
"typescript": "^5.2.2",
"vite": "^5.1.0",
"vitest": "^1.4.0"
standalone_app/package-lock.json
Generated
+9 -8
View File
@@ -62,15 +62,16 @@
"react-dom": "^18.2.0"
},
"devDependencies": {
"@chromatic-com/storybook": "^1.6.1",
"@optuna/storage": "file:../storage",
"@optuna/types": "file:../types",
"@storybook/addon-essentials": "^8.0.4",
"@storybook/addon-interactions": "^8.0.4",
"@storybook/addon-links": "^8.0.4",
"@storybook/blocks": "^8.0.4",
"@storybook/react": "^8.0.4",
"@storybook/react-vite": "^8.0.4",
"@storybook/test": "^8.0.4",
"@storybook/addon-essentials": "^8.2.9",
"@storybook/addon-interactions": "^8.2.9",
"@storybook/addon-links": "^8.2.9",
"@storybook/blocks": "^8.2.9",
"@storybook/react": "^8.2.9",
"@storybook/react-vite": "^8.2.9",
"@storybook/test": "^8.2.9",
"@testing-library/jest-dom": "^6.4.2",
"@testing-library/react": "^14.2.2",
"@types/plotly.js-dist-min": "^2.3.4",
@@ -78,7 +79,7 @@
"@types/react-dom": "^18.2.19",
"@vitejs/plugin-react-swc": "^3.5.0",
"jsdom": "^24.0.0",
"storybook": "^8.0.4",
"storybook": "^8.2.9",
"typescript": "^5.2.2",
"vite": "^5.1.0",
"vitest": "^1.4.0"
tslib/react/.storybook/main.ts
+8 -3
View File
@@ -2,18 +2,19 @@ import type { StorybookConfig } from "@storybook/react-vite"
const config: StorybookConfig = {
stories: ["../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
addons: [
"@storybook/addon-links",
"@storybook/addon-essentials",
"@storybook/addon-interactions",
"@chromatic-com/storybook",
],
framework: {
name: "@storybook/react-vite",
options: {},
},
docs: {
autodocs: "tag",
},
async viteFinal(config) {
const { mergeConfig } = await import("vite")
return mergeConfig(config, {
@@ -25,5 +26,9 @@ const config: StorybookConfig = {
},
})
},
typescript: {
reactDocgen: "react-docgen-typescript",
},
}
export default config
tslib/react/.storybook/preview.ts
-14
View File
@@ -1,14 +0,0 @@
import type { Preview } from "@storybook/react"
const preview: Preview = {
parameters: {
controls: {
matchers: {
color: /(background|color)$/i,
date: /Date$/i,
},
},
},
}
export default preview
tslib/react/.storybook/preview.tsx
+32
View File
@@ -0,0 +1,32 @@
import {
Controls,
Description,
Primary,
Subtitle,
Title,
} from "@storybook/blocks"
import type { Preview } from "@storybook/react"
const preview: Preview = {
parameters: {
controls: {
matchers: {
color: /(background|color)$/i,
date: /Date$/i,
},
},
docs: {
page: () => (
<>
<Title />
<Subtitle />
<Description />
<Primary />
<Controls />
</>
),
},
},
}
export default preview
tslib/react/package-lock.json
Generated
+945 -3945
View File
File diff suppressed because it is too large Load Diff
tslib/react/package.json
+10 -9
View File
@@ -38,15 +38,16 @@
"react-dom": "^18.2.0"
},
"devDependencies": {
"@optuna/types": "file:../types",
"@chromatic-com/storybook": "^1.6.1",
"@optuna/storage": "file:../storage",
"@storybook/addon-essentials": "^8.0.4",
"@storybook/addon-interactions": "^8.0.4",
"@storybook/addon-links": "^8.0.4",
"@storybook/blocks": "^8.0.4",
"@storybook/react": "^8.0.4",
"@storybook/react-vite": "^8.0.4",
"@storybook/test": "^8.0.4",
"@optuna/types": "file:../types",
"@storybook/addon-essentials": "^8.2.9",
"@storybook/addon-interactions": "^8.2.9",
"@storybook/addon-links": "^8.2.9",
"@storybook/blocks": "^8.2.9",
"@storybook/react": "^8.2.9",
"@storybook/react-vite": "^8.2.9",
"@storybook/test": "^8.2.9",
"@testing-library/jest-dom": "^6.4.2",
"@testing-library/react": "^14.2.2",
"@types/plotly.js-dist-min": "^2.3.4",
@@ -54,7 +55,7 @@
"@types/react-dom": "^18.2.19",
"@vitejs/plugin-react-swc": "^3.5.0",
"jsdom": "^24.0.0",
"storybook": "^8.0.4",
"storybook": "^8.2.9",
"typescript": "^5.2.2",
"vite": "^5.1.0",
"vitest": "^1.4.0"
tslib/react/src/MockStudies.ts
+1 -1
View File
@@ -1,6 +1,6 @@
import * as Optuna from "@optuna/types"
import { useEffect, useState } from "react"
import { loadStorageFromFile } from "./utils/loadStorageFromFile"
import { loadStorageFromFile } from "../test/loadStorageFromFile"
const fetchMockStudies = async () => {
const filePath = "sample_db.sqlite3"
tslib/react/src/components/PlotEdf.stories.tsx
+30 -4
View File
@@ -2,19 +2,22 @@ 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 { lightTheme } from "../styles/lightTheme"
import { PlotEdf } from "./PlotEdf"
const meta: Meta<typeof PlotEdf> = {
component: PlotEdf,
title: "PlotEdf",
title: "Plot/EDF",
tags: ["autodocs"],
decorators: [
(Story, storyContext) => {
const { study } = useMockStudy(storyContext.parameters?.studyId)
const studyId = storyContext.parameters?.studyId
const { study } = useMockStudy(studyId)
if (!study) return <p>loading...</p>
return (
<ThemeProvider theme={lightTheme}>
<ThemeProvider theme={storyContext.parameters?.theme}>
<CssBaseline />
<Story
args={{
@@ -29,10 +32,33 @@ const meta: Meta<typeof PlotEdf> = {
}
export default meta
type Story = StoryObj<typeof PlotEdf>
export const MockStudyExample1: Story = {
export const LightTheme: Story = {
parameters: {
studyId: 1,
theme: lightTheme,
},
}
export const DarkTheme: Story = {
parameters: {
studyId: 1,
theme: darkTheme,
},
}
// TODO(c-bata): Add a story for the case where two studies are compared.
// export const CompareStudy: Story = {
// parameters: {
// ...
// },
// }
// TODO(c-bata): Add a story for multi objective study.
// export const MultiObjective: Story = {
// parameters: {
// ...
// },
// }
tslib/react/src/components/PlotEdfDark.stories.tsx
-41
View File
@@ -1,41 +0,0 @@
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 { PlotEdf } from "./PlotEdf"
const meta: Meta<typeof PlotEdf> = {
component: PlotEdf,
title: "PlotEdfDark",
tags: ["autodocs"],
decorators: [
(Story, storyContext) => {
const { study } = useMockStudy(storyContext.parameters?.studyId)
if (!study) return <p>loading...</p>
return (
<ThemeProvider theme={darkTheme}>
<CssBaseline />
<Story
args={{
studies: [study],
objectiveId: 0,
}}
/>
</ThemeProvider>
)
},
],
parameters: {
backgrounds: { default: "dark" },
},
}
export default meta
type Story = StoryObj<typeof PlotEdf>
export const MockStudyExample1: Story = {
parameters: {
studyId: 1,
},
}
tslib/react/src/components/PlotHistory.stories.tsx
+26 -3
View File
@@ -2,19 +2,20 @@ 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 { lightTheme } from "../styles/lightTheme"
import { PlotHistory } from "./PlotHistory"
const meta: Meta<typeof PlotHistory> = {
component: PlotHistory,
title: "PlotHistory",
title: "Plot/History",
tags: ["autodocs"],
decorators: [
(Story, storyContext) => {
const { study } = useMockStudy(storyContext.parameters?.studyId)
if (!study) return <p>loading...</p>
return (
<ThemeProvider theme={lightTheme}>
<ThemeProvider theme={storyContext.parameters?.theme}>
<CssBaseline />
<Story
args={{
@@ -30,8 +31,30 @@ const meta: Meta<typeof PlotHistory> = {
export default meta
type Story = StoryObj<typeof PlotHistory>
export const MockStudyExample1: Story = {
export const LightTheme: Story = {
parameters: {
studyId: 1,
theme: lightTheme,
},
}
export const DarkTheme: Story = {
parameters: {
studyId: 1,
theme: darkTheme,
},
}
// TODO(c-bata): Add a story for the case where two studies are compared.
// export const CompareStudy: Story = {
// parameters: {
// ...
// },
// }
// TODO(c-bata): Add a story for multi objective study.
// export const MultiObjective: Story = {
// parameters: {
// ...
// },
// }
tslib/react/src/components/PlotHistoryDark.stories.tsx
-40
View File
@@ -1,40 +0,0 @@
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 { PlotHistory } from "./PlotHistory"
const meta: Meta<typeof PlotHistory> = {
component: PlotHistory,
title: "PlotHistoryDark",
tags: ["autodocs"],
decorators: [
(Story, storyContext) => {
const { study } = useMockStudy(storyContext.parameters?.studyId)
if (!study) return <p>loading...</p>
return (
<ThemeProvider theme={darkTheme}>
<CssBaseline />
<Story
args={{
study,
}}
/>
</ThemeProvider>
)
},
],
parameters: {
backgrounds: { default: "dark" },
},
}
export default meta
type Story = StoryObj<typeof PlotHistory>
export const MockStudyExample1: Story = {
parameters: {
studyId: 1,
},
}
tslib/react/src/components/PlotImportance.stories.tsx
+19 -3
View File
@@ -2,12 +2,13 @@ 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 { lightTheme } from "../styles/lightTheme"
import { PlotImportance } from "./PlotImportance"
const meta: Meta<typeof PlotImportance> = {
component: PlotImportance,
title: "PlotImportance",
title: "Plot/Importance",
tags: ["autodocs"],
decorators: [
(Story, storyContext) => {
@@ -16,7 +17,7 @@ const meta: Meta<typeof PlotImportance> = {
)
if (!study) return <p>loading...</p>
return (
<ThemeProvider theme={lightTheme}>
<ThemeProvider theme={storyContext.parameters?.theme}>
<CssBaseline />
<Story
args={{
@@ -33,8 +34,23 @@ const meta: Meta<typeof PlotImportance> = {
export default meta
type Story = StoryObj<typeof PlotImportance>
export const MockStudyExample1: Story = {
export const LightTheme: Story = {
parameters: {
studyId: 1,
theme: lightTheme,
},
}
export const DarkTheme: Story = {
parameters: {
studyId: 1,
theme: darkTheme,
},
}
// TODO(c-bata): Add a story for multi objective study.
// export const MultiObjective: Story = {
// parameters: {
// ...
// },
// }
tslib/react/src/components/PlotImportanceDark.stories.tsx
-43
View File
@@ -1,43 +0,0 @@
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 { PlotImportance } from "./PlotImportance"
const meta: Meta<typeof PlotImportance> = {
component: PlotImportance,
title: "PlotImportanceDark",
tags: ["autodocs"],
decorators: [
(Story, storyContext) => {
const { study, importance } = useMockStudy(
storyContext.parameters?.studyId
)
if (!study) return <p>loading...</p>
return (
<ThemeProvider theme={darkTheme}>
<CssBaseline />
<Story
args={{
study,
importance,
}}
/>
</ThemeProvider>
)
},
],
parameters: {
backgrounds: { default: "dark" },
},
}
export default meta
type Story = StoryObj<typeof PlotImportance>
export const MockStudyExample1: Story = {
parameters: {
studyId: 1,
},
}
tslib/react/src/components/PlotIntermediateValues.stories.tsx
+12 -3
View File
@@ -2,19 +2,20 @@ 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 { lightTheme } from "../styles/lightTheme"
import { PlotIntermediateValues } from "./PlotIntermediateValues"
const meta: Meta<typeof PlotIntermediateValues> = {
component: PlotIntermediateValues,
title: "PlotIntermediateValues",
title: "Plot/IntermediateValues",
tags: ["autodocs"],
decorators: [
(Story, storyContext) => {
const { study } = useMockStudy(storyContext.parameters?.studyId)
if (!study) return <p>loading...</p>
return (
<ThemeProvider theme={lightTheme}>
<ThemeProvider theme={storyContext.parameters?.theme}>
<CssBaseline />
<Story
args={{
@@ -32,8 +33,16 @@ const meta: Meta<typeof PlotIntermediateValues> = {
export default meta
type Story = StoryObj<typeof PlotIntermediateValues>
export const MockStudyExample1: Story = {
export const LightTheme: Story = {
parameters: {
studyId: 1,
theme: lightTheme,
},
}
export const DarkTheme: Story = {
parameters: {
studyId: 1,
theme: darkTheme,
},
}
tslib/react/src/components/PlotIntermediateValuesDark.stories.tsx
-42
View File
@@ -1,42 +0,0 @@
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 MockStudyExample1: Story = {
parameters: {
studyId: 1,
},
}
tslib/react/src/components/PlotSlice.stories.tsx
+19 -3
View File
@@ -2,19 +2,20 @@ 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 { lightTheme } from "../styles/lightTheme"
import { PlotSlice } from "./PlotSlice"
const meta: Meta<typeof PlotSlice> = {
component: PlotSlice,
title: "PlotSlice",
title: "Plot/Slice",
tags: ["autodocs"],
decorators: [
(Story, storyContext) => {
const { study } = useMockStudy(storyContext.parameters?.studyId)
if (!study) return <p>loading...</p>
return (
<ThemeProvider theme={lightTheme}>
<ThemeProvider theme={storyContext.parameters?.theme}>
<CssBaseline />
<Story
args={{
@@ -30,8 +31,23 @@ const meta: Meta<typeof PlotSlice> = {
export default meta
type Story = StoryObj<typeof PlotSlice>
export const MockStudyExample1: Story = {
export const LightTheme: Story = {
parameters: {
studyId: 1,
theme: lightTheme,
},
}
export const DarkTheme: Story = {
parameters: {
studyId: 1,
theme: darkTheme,
},
}
// TODO(c-bata): Add a story for multi objective study.
// export const MultiObjective: Story = {
// parameters: {
// ...
// },
// }
tslib/react/src/components/PlotSliceDark.stories.tsx
-40
View File
@@ -1,40 +0,0 @@
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 { PlotSlice } from "./PlotSlice"
const meta: Meta<typeof PlotSlice> = {
component: PlotSlice,
title: "PlotSliceDark",
tags: ["autodocs"],
decorators: [
(Story, storyContext) => {
const { study } = useMockStudy(storyContext.parameters?.studyId)
if (!study) return <p>loading...</p>
return (
<ThemeProvider theme={darkTheme}>
<CssBaseline />
<Story
args={{
study,
}}
/>
</ThemeProvider>
)
},
],
parameters: {
backgrounds: { default: "dark" },
},
}
export default meta
type Story = StoryObj<typeof PlotSlice>
export const MockStudyExample1: Story = {
parameters: {
studyId: 1,
},
}
tslib/react/src/components/TrialTable.stories.tsx
+12 -3
View File
@@ -2,19 +2,20 @@ 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 { lightTheme } from "../styles/lightTheme"
import { TrialTable } from "./TrialTable"
const meta: Meta<typeof TrialTable> = {
component: TrialTable,
title: "TrialTable",
title: "Table/TrialTable",
tags: ["autodocs"],
decorators: [
(Story, storyContext) => {
const { study } = useMockStudy(storyContext.parameters?.studyId)
if (!study) return <p>loading...</p>
return (
<ThemeProvider theme={lightTheme}>
<ThemeProvider theme={storyContext.parameters?.theme}>
<CssBaseline />
<Story
args={{
@@ -30,8 +31,16 @@ const meta: Meta<typeof TrialTable> = {
export default meta
type Story = StoryObj<typeof TrialTable>
export const MockStudyExample1: Story = {
export const LightTheme: Story = {
parameters: {
studyId: 1,
theme: lightTheme,
},
}
export const DarkTheme: Story = {
parameters: {
studyId: 1,
theme: darkTheme,
},
}
tslib/react/src/components/TrialTableDark.stories.tsx
-40
View File
@@ -1,40 +0,0 @@
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 { TrialTable } from "./TrialTable"
const meta: Meta<typeof TrialTable> = {
component: TrialTable,
title: "TrialTableDark",
tags: ["autodocs"],
decorators: [
(Story, storyContext) => {
const { study } = useMockStudy(storyContext.parameters?.studyId)
if (!study) return <p>loading...</p>
return (
<ThemeProvider theme={darkTheme}>
<CssBaseline />
<Story
args={{
study,
}}
/>
</ThemeProvider>
)
},
],
parameters: {
backgrounds: { default: "dark" },
},
}
export default meta
type Story = StoryObj<typeof TrialTable>
export const MockStudyExample1: Story = {
parameters: {
studyId: 1,
},
}
tslib/react/tsconfig.json
-1
View File
@@ -28,7 +28,6 @@
"src/**/*.stories.tsx",
"src/**/*.stories.ts",
"src/MockStudies.ts",
"src/utils/loadStorageFromFile.ts"
],
"references": [{ "path": "./tsconfig.node.json" }]
}