Remove plot components for stable UI

optuna_dashboard/ts/components/GraphEdf.tsx

@@ -27,7 +27,7 @@ interface EdfPlotInfo {
   trials: Trial[]
 }
 
-export const GraphEdfBeta: FC<{
+export const GraphEdf: FC<{
   study: StudyDetail | null
   objectiveId: number
 }> = ({ study, objectiveId }) => {
@@ -57,60 +57,6 @@ export const GraphEdfBeta: FC<{
   )
 }
 
-export const GraphEdf: FC<{
-  study: StudyDetail | null
-}> = ({ study = null }) => {
-  const theme = useTheme()
-  const [targets, selected, setTarget] = useObjectiveTargets(study)
-  const trials = useFilteredTrials(study, [selected], false)
-
-  const handleObjectiveChange = (event: SelectChangeEvent<string>) => {
-    setTarget(event.target.value)
-  }
-
-  useEffect(() => {
-    if (study != null) {
-      plotEdf(trials, selected, plotDomId, theme.palette.mode)
-    }
-  }, [trials, selected, theme.palette.mode])
-  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 }}
-        >
-          EDF
-        </Typography>
-        {study !== null && study.directions.length !== 1 ? (
-          <FormControl component="fieldset">
-            <FormLabel component="legend">Objective:</FormLabel>
-            <Select
-              value={selected.identifier()}
-              onChange={handleObjectiveChange}
-            >
-              {targets.map((target, i) => (
-                <MenuItem value={target.identifier()} key={i}>
-                  {target.toLabel(study?.objective_names)}
-                </MenuItem>
-              ))}
-            </Select>
-          </FormControl>
-        ) : null}
-      </Grid>
-      <Grid item xs={9}>
-        <Box id={plotDomId} sx={{ height: "450px" }} />
-      </Grid>
-    </Grid>
-  )
-}
-
 export const GraphEdfMultiStudies: FC<{
   studies: StudyDetail[]
 }> = ({ studies }) => {

optuna_dashboard/ts/components/GraphHyperparameterImportances.tsx

@@ -1,25 +1,13 @@
 import * as plotly from "plotly.js-dist-min"
-import React, { FC, useEffect, useState } from "react"
-import {
-  Grid,
-  FormControl,
-  FormLabel,
-  MenuItem,
-  Select,
-  Typography,
-  SelectChangeEvent,
-  useTheme,
-  Box,
-  Card,
-  CardContent,
-} from "@mui/material"
+import React, { FC, useEffect } from "react"
+import { Typography, useTheme, Box, Card, CardContent } from "@mui/material"
 
 import { plotlyDarkTemplate } from "./PlotlyDarkMode"
 import { actionCreator } from "../action"
 import { useParamImportanceValue, useStudyDirections } from "../state"
 const plotDomId = "graph-hyperparameter-importances"
 
-export const GraphHyperparameterImportanceBeta: FC<{
+export const GraphHyperparameterImportance: FC<{
   studyId: number
   study: StudyDetail | null
   graphHeight: string
@@ -41,7 +29,7 @@ export const GraphHyperparameterImportanceBeta: FC<{
 
   useEffect(() => {
     if (importances !== null && nObjectives === importances.length) {
-      plotParamImportancesBeta(importances, objectiveNames, theme.palette.mode)
+      plotParamImportance(importances, objectiveNames, theme.palette.mode)
     }
   }, [nObjectives, importances, theme.palette.mode])
 
@@ -60,7 +48,7 @@ export const GraphHyperparameterImportanceBeta: FC<{
   )
 }
 
-const plotParamImportancesBeta = (
+const plotParamImportance = (
   importances: ParamImportance[][],
   objectiveNames: string[],
   mode: string
@@ -111,110 +99,3 @@ const plotParamImportancesBeta = (
   )
   plotly.react(plotDomId, traces, layout)
 }
-
-export const GraphHyperparameterImportances: FC<{
-  study: StudyDetail | null
-  studyId: number
-}> = ({ study = null, studyId }) => {
-  const theme = useTheme()
-  const action = actionCreator()
-  const importances = useParamImportanceValue(studyId)
-  const [objectiveId, setObjectiveId] = useState<number>(0)
-  const numCompletedTrials =
-    study?.trials.filter((t) => t.state === "Complete").length || 0
-
-  const handleObjectiveChange = (event: SelectChangeEvent<number>) => {
-    setObjectiveId(event.target.value as number)
-  }
-
-  useEffect(() => {
-    action.updateParamImportance(studyId)
-  }, [numCompletedTrials])
-
-  useEffect(() => {
-    if (importances !== null && importances.length > objectiveId) {
-      plotParamImportances(importances[objectiveId], theme.palette.mode)
-    }
-  }, [importances, objectiveId, theme.palette.mode])
-
-  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 }}
-        >
-          Hyperparameter importance
-        </Typography>
-        {study !== null && study.directions.length !== 1 ? (
-          <FormControl component="fieldset">
-            <FormLabel component="legend">Objective ID:</FormLabel>
-            <Select value={objectiveId} onChange={handleObjectiveChange}>
-              {study.directions.map((d, i) => (
-                <MenuItem value={i} key={i}>
-                  {i}
-                </MenuItem>
-              ))}
-            </Select>
-          </FormControl>
-        ) : null}
-      </Grid>
-      <Grid item xs={9}>
-        <Box id={plotDomId} sx={{ height: "450px" }} />
-      </Grid>
-    </Grid>
-  )
-}
-
-const plotParamImportances = (importance: ParamImportance[], mode: string) => {
-  if (document.getElementById(plotDomId) === null) {
-    return
-  }
-  const reversed = [...importance].reverse()
-  const importance_values = reversed.map((p) => p.importance)
-  const param_names = reversed.map((p) => p.name)
-  const param_hover_templates = reversed.map(
-    (p) => `${p.name} (${p.distribution}): ${p.importance} <extra></extra>`
-  )
-
-  const layout: Partial<plotly.Layout> = {
-    xaxis: {
-      title: `Importance for the Objective Value`,
-    },
-    yaxis: {
-      title: "Hyperparameter",
-      automargin: true,
-    },
-    margin: {
-      l: 50,
-      t: 0,
-      r: 50,
-      b: 50,
-    },
-    showlegend: false,
-    template: mode === "dark" ? plotlyDarkTemplate : {},
-  }
-
-  const plotData: Partial<plotly.PlotData>[] = [
-    {
-      type: "bar",
-      orientation: "h",
-      x: importance_values,
-      y: param_names,
-      text: importance_values.map((v) => String(v.toFixed(2))),
-      textposition: "outside",
-      hovertemplate: param_hover_templates,
-      marker: {
-        color: "rgb(66,146,198)",
-      },
-    },
-  ]
-
-  plotly.react(plotDomId, plotData, layout)
-}

optuna_dashboard/ts/components/GraphIntermediateValues.tsx

@@ -1,22 +1,11 @@
 import * as plotly from "plotly.js-dist-min"
-import React, { ChangeEvent, FC, useEffect, useState } from "react"
-import {
-  Box,
-  Checkbox,
-  FormControl,
-  FormLabel,
-  FormControlLabel,
-  Grid,
-  Typography,
-  useTheme,
-  CardContent,
-  Card,
-} from "@mui/material"
+import React, { FC, useEffect } from "react"
+import { Box, Typography, useTheme, CardContent, Card } from "@mui/material"
 import { plotlyDarkTemplate } from "./PlotlyDarkMode"
 
 const plotDomId = "graph-intermediate-values"
 
-export const GraphIntermediateValuesBeta: FC<{
+export const GraphIntermediateValues: FC<{
   trials: Trial[]
   includePruned: boolean
   logScale: boolean
@@ -48,78 +37,6 @@ export const GraphIntermediateValuesBeta: FC<{
   )
 }
 
-export const GraphIntermediateValues: FC<{
-  trials: Trial[]
-}> = ({ trials = [] }) => {
-  const theme = useTheme()
-  const [filterCompleteTrial, setFilterCompleteTrial] = useState<boolean>(false)
-  const [filterPrunedTrial, setFilterPrunedTrial] = useState<boolean>(false)
-
-  useEffect(() => {
-    plotIntermediateValue(
-      trials,
-      theme.palette.mode,
-      filterCompleteTrial,
-      filterPrunedTrial,
-      false
-    )
-  }, [trials, theme.palette.mode, filterCompleteTrial, filterPrunedTrial])
-
-  const handleFilterCompleteChange = (e: ChangeEvent<HTMLInputElement>) => {
-    e.preventDefault()
-    setFilterCompleteTrial(!filterCompleteTrial)
-  }
-  const handleFilterPrunedChange = (e: ChangeEvent<HTMLInputElement>) => {
-    e.preventDefault()
-    setFilterPrunedTrial(!filterPrunedTrial)
-  }
-  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 }}
-        >
-          Intermediate values
-        </Typography>
-        <FormControl
-          component="fieldset"
-          sx={{ marginBottom: theme.spacing(2) }}
-        >
-          <FormLabel component="legend">Filter state:</FormLabel>
-          <FormControlLabel
-            control={
-              <Checkbox
-                checked={!filterCompleteTrial}
-                onChange={handleFilterCompleteChange}
-              />
-            }
-            label="Complete"
-          />
-          <FormControlLabel
-            control={
-              <Checkbox
-                checked={!filterPrunedTrial}
-                onChange={handleFilterPrunedChange}
-              />
-            }
-            label="Pruned"
-          />
-        </FormControl>
-      </Grid>
-      <Grid item xs={9}>
-        <Box id={plotDomId} sx={{ height: "450px" }} />
-      </Grid>
-    </Grid>
-  )
-}
-
 const plotIntermediateValue = (
   trials: Trial[],
   mode: string,

optuna_dashboard/ts/components/StudyDetail.tsx

@@ -25,7 +25,7 @@ import { AppDrawer, PageId } from "./AppDrawer"
 import { GraphParallelCoordinate } from "./GraphParallelCoordinate"
 import { Contour } from "./GraphContour"
 import { GraphSlice } from "./GraphSlice"
-import { GraphEdfBeta } from "./GraphEdf"
+import { GraphEdf } from "./GraphEdf"
 import { TrialList } from "./TrialList"
 import { StudyHistory } from "./StudyHistory"
 
@@ -113,7 +113,7 @@ export const StudyDetail: FC<{
                 <Grid2 xs={6} key={i}>
                   <Card>
                     <CardContent>
-                      <GraphEdfBeta study={studyDetail} objectiveId={i} />
+                      <GraphEdf study={studyDetail} objectiveId={i} />
                     </CardContent>
                   </Card>
                 </Grid2>

optuna_dashboard/ts/components/StudyHistory.tsx

@@ -10,10 +10,10 @@ import {
 } from "@mui/material"
 import { GraphParetoFront } from "./GraphParetoFront"
 import { GraphHistory } from "./GraphHistory"
-import { GraphIntermediateValuesBeta } from "./GraphIntermediateValues"
+import { GraphIntermediateValues } from "./GraphIntermediateValues"
 import Grid2 from "@mui/material/Unstable_Grid2"
 import { DataGrid, DataGridColumn } from "./DataGrid"
-import { GraphHyperparameterImportanceBeta } from "./GraphHyperparameterImportances"
+import { GraphHyperparameterImportance } from "./GraphHyperparameterImportances"
 import { BestTrialsCard } from "./BestTrialsCard"
 import {
   useStudyDetailValue,
@@ -106,7 +106,7 @@ export const StudyHistory: FC<{ studyId: number }> = ({ studyId }) => {
         studyDetail.directions.length == 1 &&
         studyDetail.has_intermediate_values ? (
           <Grid2 xs={6}>
-            <GraphIntermediateValuesBeta
+            <GraphIntermediateValues
               trials={trials}
               includePruned={includePruned}
               logScale={logScale}
@@ -114,7 +114,7 @@ export const StudyHistory: FC<{ studyId: number }> = ({ studyId }) => {
           </Grid2>
         ) : null}
         <Grid2 xs={6}>
-          <GraphHyperparameterImportanceBeta
+          <GraphHyperparameterImportance
             studyId={studyId}
             study={studyDetail}
             graphHeight="450px"