Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add color scale setting #632

Merged
merged 33 commits into from
Feb 9, 2024
Merged

Add color scale setting #632

Show file tree
Hide file tree
Changes from 8 commits
Commits
Show all changes
33 commits
Select commit Hold shift + click to select a range
48df828
Create base UI
gen740 Sep 7, 2023
45f5813
add color palettes
gen740 Sep 7, 2023
30e0ac5
Update
gen740 Sep 12, 2023
f95ac90
Merge branch 'main' into add_color_scale_setting
gen740 Sep 12, 2023
8863946
Implement color theme
gen740 Sep 13, 2023
167f631
Change all plotly template.
gen740 Sep 22, 2023
85e3a1f
Merge branch 'main' into add_color_scale_setting
gen740 Sep 27, 2023
2006dd0
Merge branch 'main' into add_color_scale_setting
gen740 Sep 27, 2023
5e3898b
revert `optuna_dashboard/index.html`
gen740 Oct 3, 2023
45db781
Delete unnecessary blank line.
gen740 Oct 3, 2023
49fa791
Fix typo
gen740 Nov 17, 2023
70752dd
Merge branch 'main' into add_color_scale_setting
gen740 Nov 17, 2023
0d4f0b4
Update optuna_dashboard/ts/components/Settings.tsx
gen740 Nov 17, 2023
0346f66
Format
gen740 Nov 17, 2023
5f5efb4
Merge branch 'main' into add_color_scale_setting
gen740 Nov 17, 2023
59a251a
Merge branch 'main' into add_color_scale_setting
gen740 Dec 11, 2023
651ac76
Update optuna_dashboard/ts/components/Settings.tsx
gen740 Dec 28, 2023
4ec52d2
Delete grid color scale
gen740 Dec 28, 2023
1a61af6
Apply changes to GraphRank.tsx
gen740 Dec 28, 2023
0d5db75
Rename PlotlyDarkTheme to PlotlyCloroTemplates
gen740 Dec 28, 2023
5c6baf7
Delete unnecessary console.log
gen740 Dec 28, 2023
cdb8c48
format
gen740 Dec 28, 2023
54706ea
Add coloTheme to useEffect watch list
gen740 Jan 11, 2024
b99b877
Update setting UI to Popover
gen740 Jan 19, 2024
af6f5cb
Use Modal instead of Popover
gen740 Jan 19, 2024
fc3dda0
Merge branch 'main' into add_color_scale_setting
gen740 Jan 19, 2024
ab31b63
format
gen740 Jan 19, 2024
1525e37
Delete "getColorTemplate" Function
gen740 Jan 21, 2024
280f6a5
Merge branch 'main' into add_color_scale_setting
gen740 Feb 2, 2024
2a7cf2c
[Delete] Delete `prettier-ignore`
gen740 Feb 6, 2024
2c07611
Merge branch 'main' into add_color_scale_setting
gen740 Feb 6, 2024
9229780
Apply format
gen740 Feb 6, 2024
4b74031
Update biome.json
gen740 Feb 6, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
155 changes: 100 additions & 55 deletions optuna_dashboard/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,75 +1,120 @@
<!DOCTYPE html>
<html lang="en">
<head>
<head>
gen740 marked this conversation as resolved.
Show resolved Hide resolved
<title>Optuna Dashboard</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<script defer src="/static/bundle.js"></script>
<style>
.optuna-loading-wrapper {
height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.optuna-loading-wrapper {
height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}

.optuna-loading-message {
font-weight: 700;
font-size: 32px;
color: gray;
}
.optuna-loading-message {
font-weight: 700;
font-size: 32px;
color: gray;
}

.optuna-animation {
-webkit-transition-property: -webkit-transform;
-webkit-transition-duration: 6s;
-webkit-animation-name: rotate;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: ease;
.optuna-animation {
-webkit-transition-property: -webkit-transform;
-webkit-transition-duration: 6s;
-webkit-animation-name: rotate;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: ease;

-moz-transition-property: -moz-transform;
-moz-animation-name: rotate;
-moz-animation-duration: 6s;
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: ease;
-moz-transition-property: -moz-transform;
-moz-animation-name: rotate;
-moz-animation-duration: 6s;
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: ease;

transition-property: transform;
animation-name: rotate;
animation-duration: 6s;
animation-iteration-count: infinite;
animation-timing-function: ease;
}
transition-property: transform;
animation-name: rotate;
animation-duration: 6s;
animation-iteration-count: infinite;
animation-timing-function: ease;
}

@-webkit-keyframes rotate {
from {-webkit-transform: rotate(-1080deg); opacity: 0; }
50% { -webkit-transform: rotate(0deg); opacity: 1; }
to {-webkit-transform: rotate(1080deg); opacity: 0;}
@-webkit-keyframes rotate {
from {
-webkit-transform: rotate(-1080deg);
opacity: 0;
}
50% {
-webkit-transform: rotate(0deg);
opacity: 1;
}
to {
-webkit-transform: rotate(1080deg);
opacity: 0;
}
}

@-moz-keyframes rotate {
from {-moz-transform: rotate(-1080deg); opacity: 0; }
50% { -moz-transform: rotate(0deg); opacity: 1; }
to {-moz-transform: rotate(1080deg); opacity: 0;}
@-moz-keyframes rotate {
from {
-moz-transform: rotate(-1080deg);
opacity: 0;
}
50% {
-moz-transform: rotate(0deg);
opacity: 1;
}
to {
-moz-transform: rotate(1080deg);
opacity: 0;
}
}

@keyframes rotate {
from {transform: rotate(-1080deg); opacity: 0; }
50% { transform: rotate(0deg); opacity: 1; }
to {transform: rotate(1080deg); opacity: 0; }
@keyframes rotate {
from {
transform: rotate(-1080deg);
opacity: 0;
}
50% {
transform: rotate(0deg);
opacity: 1;
}
to {
transform: rotate(1080deg);
opacity: 0;
}
}
</style>
</head>
<body>
</head>
<body>
<div id="dashboard">
<span class="optuna-loading-wrapper">
<svg class="optuna-animation" xmlns="http://www.w3.org/2000/svg" width="294.7" height="280" viewBox="0 0 221 210">
<path fill="rgb(6, 71, 135)" d="M104.5.6c-31.2 4.6-55 16.5-74.5 37A107.3 107.3 0 0 0 3.2 84.9a78.4 78.4 0 0 0-2.6 24.6c0 12.5.3 16.4 2.2 23.5a114.2 114.2 0 0 0 19.5 38 114 114 0 0 0 103.3 37.5 111.6 111.6 0 0 0 83.1-63.1 100.3 100.3 0 0 0 11-44.9c.4-11.5.1-15.7-1.5-23.5a85.3 85.3 0 0 0-25.1-47.1 98 98 0 0 0-49.4-27c-8-2-31.9-3.4-39.2-2.3zm35.3 16.8A90 90 0 0 1 206.7 80a112 112 0 0 1 0 40.8 103.3 103.3 0 0 1-73.7 72 76.6 76.6 0 0 1-25 2.5 77 77 0 0 1-23.2-2.1 99.6 99.6 0 0 1-68.4-66.7 64 64 0 0 1-2.8-22.5c-.1-11.3.3-14.8 2.2-21.4C25.5 49.2 53.6 25 92.5 16.9a156 156 0 0 1 47.3.5z"/>
<path fill="rgb(12, 97, 152)" d="M94.6 29.5A88.3 88.3 0 0 0 68 39.1c-17 8.8-30.5 22-38.1 37.4a56.4 56.4 0 0 0-6.7 32c.9 18.9 7.2 32.1 22.7 47.5 13 12.8 25.8 20 44.9 25.2 11 3 31.5 2.9 42.7-.1a85.5 85.5 0 0 0 61.1-60.1c2.3-8.8 2.4-26.3.1-35a78.6 78.6 0 0 0-55.2-54.6 74.9 74.9 0 0 0-23.5-3c-9.9-.2-16.7.1-21.4 1.1zm37.2 11.1a61 61 0 0 1 29.7 17.9 55 55 0 0 1 18.6 43.6c.3 39.1-30.4 68.9-71.1 69.1-16.9 0-30-4.1-42.5-13.4A59.7 59.7 0 0 1 47.1 83c15.6-33 51.5-51 84.7-42.4z"/>
<path fill="rgb(39, 126, 170)" d="M96 57.6a58.6 58.6 0 0 0-40 35 43 43 0 0 0 1.6 30.4 62.8 62.8 0 0 0 20.2 22.6 70.7 70.7 0 0 0 28.8 10c34.6 3.2 64.7-28.1 58-60.4a50 50 0 0 0-37.3-37.7c-7.2-1.9-24-1.8-31.3.1zm31.9 16.1A32 32 0 0 1 148 93.4c.7 2.4 1.1 6.8.8 11.5a28 28 0 0 1-3.8 13.9 43.4 43.4 0 0 1-18.8 17.9c-5.2 2.5-6.7 2.8-16.7 2.8-9.8 0-11.6-.3-16.7-2.7-17.2-8-24.7-25.5-17.6-41a43.9 43.9 0 0 1 52.7-22.1z"/>
<path fill="rgb(77, 154, 184)" d="M109.5 86.9c-12.1 3-20.9 13.7-19.1 23.4 2.6 14.1 25 17.3 37.4 5.4 4.5-4.3 6.4-8.1 6.4-13.1.2-11.4-11.6-18.8-24.7-15.7zm7.7 11.8c4.5 4 .5 13.3-5.7 13.3-4.3 0-6.5-2.2-6.5-6.6 0-6.6 7.6-10.9 12.2-6.7z"/>
</svg>
<p class="optuna-loading-message">NOW LOADING</p>
</span>
<span class="optuna-loading-wrapper">
<svg
class="optuna-animation"
xmlns="http://www.w3.org/2000/svg"
width="294.7"
height="280"
viewBox="0 0 221 210"
>
<path
fill="rgb(6, 71, 135)"
d="M104.5.6c-31.2 4.6-55 16.5-74.5 37A107.3 107.3 0 0 0 3.2 84.9a78.4 78.4 0 0 0-2.6 24.6c0 12.5.3 16.4 2.2 23.5a114.2 114.2 0 0 0 19.5 38 114 114 0 0 0 103.3 37.5 111.6 111.6 0 0 0 83.1-63.1 100.3 100.3 0 0 0 11-44.9c.4-11.5.1-15.7-1.5-23.5a85.3 85.3 0 0 0-25.1-47.1 98 98 0 0 0-49.4-27c-8-2-31.9-3.4-39.2-2.3zm35.3 16.8A90 90 0 0 1 206.7 80a112 112 0 0 1 0 40.8 103.3 103.3 0 0 1-73.7 72 76.6 76.6 0 0 1-25 2.5 77 77 0 0 1-23.2-2.1 99.6 99.6 0 0 1-68.4-66.7 64 64 0 0 1-2.8-22.5c-.1-11.3.3-14.8 2.2-21.4C25.5 49.2 53.6 25 92.5 16.9a156 156 0 0 1 47.3.5z"
/>
<path
fill="rgb(12, 97, 152)"
d="M94.6 29.5A88.3 88.3 0 0 0 68 39.1c-17 8.8-30.5 22-38.1 37.4a56.4 56.4 0 0 0-6.7 32c.9 18.9 7.2 32.1 22.7 47.5 13 12.8 25.8 20 44.9 25.2 11 3 31.5 2.9 42.7-.1a85.5 85.5 0 0 0 61.1-60.1c2.3-8.8 2.4-26.3.1-35a78.6 78.6 0 0 0-55.2-54.6 74.9 74.9 0 0 0-23.5-3c-9.9-.2-16.7.1-21.4 1.1zm37.2 11.1a61 61 0 0 1 29.7 17.9 55 55 0 0 1 18.6 43.6c.3 39.1-30.4 68.9-71.1 69.1-16.9 0-30-4.1-42.5-13.4A59.7 59.7 0 0 1 47.1 83c15.6-33 51.5-51 84.7-42.4z"
/>
<path
fill="rgb(39, 126, 170)"
d="M96 57.6a58.6 58.6 0 0 0-40 35 43 43 0 0 0 1.6 30.4 62.8 62.8 0 0 0 20.2 22.6 70.7 70.7 0 0 0 28.8 10c34.6 3.2 64.7-28.1 58-60.4a50 50 0 0 0-37.3-37.7c-7.2-1.9-24-1.8-31.3.1zm31.9 16.1A32 32 0 0 1 148 93.4c.7 2.4 1.1 6.8.8 11.5a28 28 0 0 1-3.8 13.9 43.4 43.4 0 0 1-18.8 17.9c-5.2 2.5-6.7 2.8-16.7 2.8-9.8 0-11.6-.3-16.7-2.7-17.2-8-24.7-25.5-17.6-41a43.9 43.9 0 0 1 52.7-22.1z"
/>
<path
fill="rgb(77, 154, 184)"
d="M109.5 86.9c-12.1 3-20.9 13.7-19.1 23.4 2.6 14.1 25 17.3 37.4 5.4 4.5-4.3 6.4-8.1 6.4-13.1.2-11.4-11.6-18.8-24.7-15.7zm7.7 11.8c4.5 4 .5 13.3-5.7 13.3-4.3 0-6.5-2.2-6.5-6.6 0-6.6 7.6-10.9 12.2-6.7z"
/>
</svg>
<p class="optuna-loading-message">NOW LOADING</p>
</span>
</div>
</body>
</html>
</body>
</html>
10 changes: 10 additions & 0 deletions optuna_dashboard/ts/components/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -87,6 +87,16 @@ export const App: FC = () => {
/>
}
/>

gen740 marked this conversation as resolved.
Show resolved Hide resolved
<Route
path={URL_PREFIX + "/studies/:studyId/settings"}
element={
<StudyDetail
toggleColorMode={toggleColorMode}
page={"settings"}
/>
}
/>
<Route
path={URL_PREFIX + "/studies/:studyId/graph"}
element={
Expand Down
16 changes: 16 additions & 0 deletions optuna_dashboard/ts/components/AppDrawer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,8 @@ import Brightness4Icon from "@mui/icons-material/Brightness4"
import Brightness7Icon from "@mui/icons-material/Brightness7"
import TableViewIcon from "@mui/icons-material/TableView"
import RateReviewIcon from "@mui/icons-material/RateReview"
import SettingsIcon from "@mui/icons-material/Settings"

import MenuIcon from "@mui/icons-material/Menu"
import GitHubIcon from "@mui/icons-material/GitHub"
import OpenInNewIcon from "@mui/icons-material/OpenInNew"
Expand All @@ -46,6 +48,7 @@ export type PageId =
| "trialTable"
| "trialList"
| "note"
| "settings"
| "preferenceHistory"
| "graph"

Expand Down Expand Up @@ -300,6 +303,19 @@ export const AppDrawer: FC<{
<ListItemText primary="Note" sx={styleListItemText} />
</ListItemButton>
</ListItem>
<ListItem key="Settings" disablePadding sx={styleListItem}>
<ListItemButton
component={Link}
to={`${URL_PREFIX}/studies/${studyId}/settings`}
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This settings seem to be shared among every study. In that case, the url should be${URL_PREFIX}/settings?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I understand the situation, and you want to remember study_id by url, and go back to previous study page.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

How about using pop-up to show setting page? I roughly created my example here, although it is very early implementation and needs improvement.

Some reasons:

  1. You can use ${URL_PREFIX}/settings instead of "${URL_PREFIX}/studies/${studyId}/settings" here.
  2. You can show change during tweaking theme on settings.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Also, the place of setting should be below because it is for setting for all pages, imo.
スクリーンショット 2024-01-01 11 49 14

You can see this example here

sx={styleListItemButton}
selected={page === "settings"}
>
<ListItemIcon sx={styleListItemIcon}>
<SettingsIcon />
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is it better with ColorLens?
Optionally, I would like to discuss if "settings" is an appropriate name for this feature because the name is too general.
If we add any further configurations here in the future, I am definitely for it:)

</ListItemIcon>
<ListItemText primary="Settings" sx={styleListItemText} />
</ListItemButton>
</ListItem>
</List>
)}
<Box sx={{ flexGrow: 1 }} />
Expand Down
22 changes: 17 additions & 5 deletions optuna_dashboard/ts/components/GraphContour.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,8 +12,10 @@ import {
Box,
} from "@mui/material"
import blue from "@mui/material/colors/blue"
import { plotlyDarkTemplate } from "./PlotlyDarkMode"
import { useMergedUnionSearchSpace } from "../searchSpace"
import { getColorTemplate } from "./PlotlyDarkMode"
import { useRecoilValue } from "recoil"
import { plotlyColorTheme } from "../state"

// eslint-disable-next-line @typescript-eslint/no-explicit-any
const unique = (array: any[]) => {
Expand Down Expand Up @@ -64,9 +66,18 @@ export const Contour: FC<{
setYParam(param || null)
}

const colorTheme = useRecoilValue<PlotlyColorTheme>(plotlyColorTheme)

useEffect(() => {
if (study != null) {
plotContour(study, objectiveId, xParam, yParam, theme.palette.mode)
plotContour(
study,
objectiveId,
xParam,
yParam,
theme.palette.mode,
colorTheme
)
}
}, [study, objectiveId, xParam, yParam, theme.palette.mode])
gen740 marked this conversation as resolved.
Show resolved Hide resolved

Expand Down Expand Up @@ -147,7 +158,8 @@ const plotContour = (
objectiveId: number,
xParam: SearchSpaceItem | null,
yParam: SearchSpaceItem | null,
mode: string
mode: string,
colorTheme: PlotlyColorTheme
) => {
if (document.getElementById(plotDomId) === null) {
return
Expand All @@ -157,7 +169,7 @@ const plotContour = (
const filteredTrials = trials.filter((t) => filterFunc(t, objectiveId))
if (filteredTrials.length < 2 || xParam === null || yParam === null) {
plotly.react(plotDomId, [], {
template: mode === "dark" ? plotlyDarkTemplate : {},
template: getColorTemplate(mode, colorTheme),
})
return
}
Expand All @@ -183,7 +195,7 @@ const plotContour = (
b: 50,
},
uirevision: "true",
template: mode === "dark" ? plotlyDarkTemplate : {},
template: getColorTemplate(mode, colorTheme),
}

// TODO(c-bata): Support parameters that only have the single value
Expand Down
15 changes: 10 additions & 5 deletions optuna_dashboard/ts/components/GraphEdf.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,10 @@
import * as plotly from "plotly.js-dist-min"
import React, { FC, useEffect, useMemo } from "react"
import { Typography, useTheme, Box } from "@mui/material"
import { plotlyDarkTemplate } from "./PlotlyDarkMode"
import { Target, useFilteredTrialsFromStudies } from "../trialFilter"
import { getColorTemplate } from "./PlotlyDarkMode"
import { plotlyColorTheme } from "../state"
import { useRecoilValue } from "recoil"

const getPlotDomId = (objectiveId: number) => `graph-edf-${objectiveId}`

Expand Down Expand Up @@ -30,8 +32,10 @@ export const GraphEdf: FC<{
return e
})

const colorTheme = useRecoilValue<PlotlyColorTheme>(plotlyColorTheme)

useEffect(() => {
plotEdf(edfPlotInfos, target, domId, theme.palette.mode)
plotEdf(edfPlotInfos, target, domId, theme.palette.mode, colorTheme)
}, [studies, target, theme.palette.mode])

return (
Expand All @@ -51,14 +55,15 @@ const plotEdf = (
edfPlotInfos: EdfPlotInfo[],
target: Target,
domId: string,
mode: string
mode: string,
colorTheme: PlotlyColorTheme
) => {
if (document.getElementById(domId) === null) {
return
}
if (edfPlotInfos.length === 0) {
plotly.react(domId, [], {
template: mode === "dark" ? plotlyDarkTemplate : {},
template: getColorTemplate(mode, colorTheme),
})
return
}
Expand All @@ -77,7 +82,7 @@ const plotEdf = (
r: 50,
b: 50,
},
template: mode === "dark" ? plotlyDarkTemplate : {},
template: getColorTemplate(mode, colorTheme),
}

const plotData: Partial<plotly.PlotData>[] = edfPlotInfos.map((h) => {
Expand Down
Loading