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

Jump to bottom

Merge the implementation of GraphHistory and GraphHistoryMultiStudies #516

Merged
merged 6 commits into from
Aug 4, 2023
+73 −280
Merged

Merge the implementation of GraphHistory and GraphHistoryMultiStudies #516

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
b1162f4
Merge the implementation of GraphHistory and GraphHistoryMultiStudies
keisuke-umezawa Jul 2, 2023
c045511
Use intersect of attrs, not union
keisuke-umezawa Jul 9, 2023
c790f41
Rename GraphHistoryMultiStudies to GraphHistory
keisuke-umezawa Jul 9, 2023
d76ed93
Fix typo
keisuke-umezawa Jul 18, 2023
025e061
Fix CLS issue
keisuke-umezawa Jul 29, 2023
3a5ed27
Fix equality of attribute
keisuke-umezawa Jul 29, 2023
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
4 changes: 2 additions & 2 deletions optuna_dashboard/ts/components/CompareStudies.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ import { actionCreator } from "../action"
import { studySummariesState, studyDetailsState } from "../state"
import { AppDrawer } from "./AppDrawer"
import { GraphEdfMultiStudies } from "./GraphEdf"
import { GraphHistoryMultiStudies } from "./GraphHistory"
import { GraphHistory } from "./GraphHistory"
import { useNavigate, useLocation } from "react-router-dom"

const useQuery = (): URLSearchParams => {
Expand Down Expand Up @@ -313,7 +313,7 @@ const StudiesGraph: FC<{ studies: StudySummary[] }> = ({ studies }) => {
}}
>
<CardContent>
<GraphHistoryMultiStudies
<GraphHistory
studies={showStudyDetails}
includePruned={includePruned}
logScale={logScale}
Expand Down
289 changes: 12 additions & 277 deletions optuna_dashboard/ts/components/GraphHistory.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import * as plotly from "plotly.js-dist-min"
import React, { ChangeEvent, FC, useEffect, useState } from "react"
import {
Box,
Grid,
FormControl,
FormLabel,
Expand All @@ -16,10 +17,11 @@
} from "@mui/material"
import { plotlyDarkTemplate } from "./PlotlyDarkMode"
import {
useFilteredTrials,

Check warning on line 20 in optuna_dashboard/ts/components/GraphHistory.tsx

View workflow job for this annotation

GitHub Actions / Lint checking on Ubuntu 

'useFilteredTrials' is defined but never used
useFilteredTrialsFromStudies,
Target,
useObjectiveAndUserAttrTargets,

Check warning on line 23 in optuna_dashboard/ts/components/GraphHistory.tsx

View workflow job for this annotation

GitHub Actions / Lint checking on Ubuntu 

'useObjectiveAndUserAttrTargets' is defined but never used
useObjectiveAndUserAttrTargetsFromStudies,
} from "../trialFilter"

const plotDomId = "graph-history"
Expand All @@ -32,141 +34,6 @@
}

export const GraphHistory: FC<{
study: StudyDetail | null
logScale: boolean
includePruned: boolean
}> = ({ study, logScale, includePruned }) => {
const theme = useTheme()
const [xAxis, setXAxis] = useState<
"number" | "datetime_start" | "datetime_complete"
>("number")
const [markerSize, setMarkerSize] = useState<number>(5)

const [targets, selected, setTarget] = useObjectiveAndUserAttrTargets(study)
const trials = useFilteredTrials(study, [selected], !includePruned)

useEffect(() => {
if (study !== null) {
plotHistory(
trials,
study.directions,
selected,
xAxis,
logScale,
theme.palette.mode,
study?.objective_names,
markerSize
)
}
}, [
trials,
study?.directions,
selected,
logScale,
xAxis,
theme.palette.mode,
study?.objective_names,
markerSize,
])

const handleObjectiveChange = (event: SelectChangeEvent<string>) => {
setTarget(event.target.value)
}

const handleXAxisChange = (e: ChangeEvent<HTMLInputElement>) => {
if (e.target.value === "number") {
setXAxis("number")
} else if (e.target.value === "datetime_start") {
setXAxis("datetime_start")
} else if (e.target.value === "datetime_complete") {
setXAxis("datetime_complete")
}
}

return (
<Grid container direction="row">
<Grid
item
xs={3}
container
direction="column"
sx={{ paddingRight: theme.spacing(2) }}
>
<Typography
variant="h6"
sx={{ margin: "1em 0", fontWeight: theme.typography.fontWeightBold }}
>
History
</Typography>
{targets.length >= 2 ? (
<FormControl
component="fieldset"
sx={{ marginBottom: theme.spacing(2) }}
>
<FormLabel component="legend">y Axis</FormLabel>
<Select
value={selected.identifier()}
onChange={handleObjectiveChange}
>
{targets.map((t, i) => (
<MenuItem value={t.identifier()} key={i}>
{t.toLabel(study?.objective_names)}
</MenuItem>
))}
</Select>
</FormControl>
) : null}
<FormControl
component="fieldset"
sx={{ marginBottom: theme.spacing(2) }}
>
<FormLabel component="legend">X-axis:</FormLabel>
<RadioGroup
aria-label="gender"
name="gender1"
value={xAxis}
onChange={handleXAxisChange}
>
<FormControlLabel
value="number"
control={<Radio />}
label="Number"
/>
<FormControlLabel
value="datetime_start"
control={<Radio />}
label="Datetime start"
/>
<FormControlLabel
value="datetime_complete"
control={<Radio />}
label="Datetime complete"
/>
</RadioGroup>
</FormControl>
<FormControl>
<FormLabel component="legend">Marker size:</FormLabel>
<Slider
defaultValue={5}
marks={true}
min={1}
max={10}
step={1}
onChange={(e) => {
// @ts-ignore
setMarkerSize(e.target.value as number)
}}
/>
</FormControl>
</Grid>
<Grid item xs={9}>
<div id={plotDomId} />
</Grid>
</Grid>
)
}

export const GraphHistoryMultiStudies: FC<{
studies: StudyDetail[]
logScale: boolean
includePruned: boolean
Expand All @@ -177,10 +44,8 @@
>("number")
const [markerSize, setMarkerSize] = useState<number>(5)

// TODO(umezawa): Prepare targets with all studies.
const [targets, selected, setTarget] = useObjectiveAndUserAttrTargets(
studies.length !== 0 ? studies[0] : null
)
const [targets, selected, setTarget] =
useObjectiveAndUserAttrTargetsFromStudies(studies)

const trials = useFilteredTrialsFromStudies(
studies,
Expand All @@ -198,15 +63,15 @@
})

useEffect(() => {
plotHistoryMultiStudies(
plotHistory(
historyPlotInfos,
selected,
xAxis,
logScale,
theme.palette.mode,
markerSize
)
}, [studies, selected, logScale, xAxis, theme.palette.mode])
}, [studies, selected, logScale, xAxis, theme.palette.mode, markerSize])
Copy link
Member

Choose a reason for hiding this comment

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

Good catch 🙇


const handleObjectiveChange = (event: SelectChangeEvent<string>) => {
setTarget(event.target.value)
Expand Down Expand Up @@ -299,148 +164,18 @@
</FormControl>
</Grid>
<Grid item xs={9}>
<div id={plotDomId} />
<Box
id={plotDomId}
sx={{
height: "450px",
}}
/>
</Grid>
</Grid>
)
}

const plotHistory = (
trials: Trial[],
directions: StudyDirection[],
target: Target,
xAxis: "number" | "datetime_start" | "datetime_complete",
logScale: boolean,
mode: string,
objectiveNames?: string[],
markerSize: number
) => {
if (document.getElementById(plotDomId) === null) {
return
}

const layout: Partial<plotly.Layout> = {
margin: {
l: 50,
t: 0,
r: 50,
b: 0,
},
yaxis: {
title: target.toLabel(objectiveNames),
type: logScale ? "log" : "linear",
},
xaxis: {
title: xAxis === "number" ? "Trial" : "Time",
type: xAxis === "number" ? "linear" : "date",
},
showlegend: true,
uirevision: "true",
template: mode === "dark" ? plotlyDarkTemplate : {},
}
if (trials.length === 0) {
plotly.react(plotDomId, [], layout)
return
}

const feasibleTrials: Trial[] = []
const infeasibleTrials: Trial[] = []
trials.forEach((t) => {
if (t.constraints.every((c) => c <= 0)) {
feasibleTrials.push(t)
} else {
infeasibleTrials.push(t)
}
})

const getAxisX = (trial: Trial): number | Date => {
return xAxis === "number"
? trial.number
: xAxis === "datetime_start"
? trial.datetime_start!
: trial.datetime_complete!
}

const plotData: Partial<plotly.PlotData>[] = [
{
x: feasibleTrials.map(getAxisX),
y: feasibleTrials.map(
(t: Trial): number => target.getTargetValue(t) as number
),
name: target.toLabel(objectiveNames),
marker: {
size: markerSize,
},
mode: "markers",
type: "scatter",
},
]

const objectiveId = target.getObjectiveId()
if (objectiveId !== null) {
const xForLinePlot: (number | Date)[] = []
const yForLinePlot: number[] = []
let currentBest: number | null = null
for (let i = 0; i < feasibleTrials.length; i++) {
const t = feasibleTrials[i]
if (currentBest === null) {
currentBest = t.values![objectiveId] as number
xForLinePlot.push(getAxisX(t))
yForLinePlot.push(t.values![objectiveId] as number)
} else if (
directions[objectiveId] === "maximize" &&
t.values![objectiveId] > currentBest
) {
const p = trials[i - 1]
if (!xForLinePlot.includes(getAxisX(p))) {
xForLinePlot.push(getAxisX(p))
yForLinePlot.push(currentBest)
}
currentBest = t.values![objectiveId] as number
xForLinePlot.push(getAxisX(t))
yForLinePlot.push(t.values![objectiveId] as number)
} else if (
directions[objectiveId] === "minimize" &&
t.values![objectiveId] < currentBest
) {
const p = feasibleTrials[i - 1]
if (!xForLinePlot.includes(getAxisX(p))) {
xForLinePlot.push(getAxisX(p))
yForLinePlot.push(currentBest)
}
currentBest = t.values![objectiveId] as number
xForLinePlot.push(getAxisX(t))
yForLinePlot.push(t.values![objectiveId] as number)
}
}
xForLinePlot.push(getAxisX(trials[trials.length - 1]))
yForLinePlot.push(yForLinePlot[yForLinePlot.length - 1])
plotData.push({
x: xForLinePlot,
y: yForLinePlot,
name: "Best Value",
mode: "lines",
type: "scatter",
})
}
plotData.push({
x: infeasibleTrials.map(getAxisX),
y: infeasibleTrials.map(
(t: Trial): number => target.getTargetValue(t) as number
),
name: "Infeasible Trial",
marker: {
size: markerSize,
color: mode === "dark" ? "#666666" : "#cccccc",
},
mode: "markers",
type: "scatter",
showlegend: false,
})
plotly.react(plotDomId, plotData, layout)
}

const plotHistoryMultiStudies = (
historyPlotInfos: HistoryPlotInfo[],
target: Target,
xAxis: "number" | "datetime_start" | "datetime_complete",
Expand Down Expand Up @@ -481,8 +216,8 @@
return xAxis === "number"
? trial.number
: xAxis === "datetime_start"
? trial.datetime_start!

Check warning on line 219 in optuna_dashboard/ts/components/GraphHistory.tsx

View workflow job for this annotation

GitHub Actions / Lint checking on Ubuntu 

Forbidden non-null assertion
: trial.datetime_complete!

Check warning on line 220 in optuna_dashboard/ts/components/GraphHistory.tsx

View workflow job for this annotation

GitHub Actions / Lint checking on Ubuntu 

Forbidden non-null assertion
}

const plotData: Partial<plotly.PlotData>[] = []
Expand Down
2 changes: 1 addition & 1 deletion optuna_dashboard/ts/components/StudyHistory.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -96,7 +96,7 @@ export const StudyHistory: FC<{ studyId: number }> = ({ studyId }) => {
>
<CardContent>
<GraphHistory
study={studyDetail}
studies={studyDetail !== null ? [studyDetail] : []}
includePruned={includePruned}
logScale={logScale}
/>
Expand Down
Loading
Loading