Apply formatter

optuna_dashboard/ts/action.ts

@@ -271,7 +271,10 @@ export const actionCreator = () => {
       })
   }
 
-  const createNewStudy = (studyName: string, directions: Optuna.StudyDirection[]) => {
+  const createNewStudy = (
+    studyName: string,
+    directions: Optuna.StudyDirection[]
+  ) => {
     createNewStudyAPI(studyName, directions)
       .then((study_summary) => {
         const newVal = [...studySummaries, study_summary]

optuna_dashboard/ts/components/CreateStudyDialog.tsx

@@ -26,7 +26,9 @@ export const useCreateStudyDialog = (): [() => void, () => ReactNode] => {
 
   const [newStudyName, setNewStudyName] = useState("")
   const [openNewStudyDialog, setOpenNewStudyDialog] = useState(false)
-  const [directions, setDirections] = useState<Optuna.StudyDirection[]>(["minimize"])
+  const [directions, setDirections] = useState<Optuna.StudyDirection[]>([
+    "minimize",
+  ])
   const studies = useRecoilValue<StudySummary[]>(studySummariesState)
   const newStudyNameAlreadyUsed = studies.some(
     (v) => v.study_name === newStudyName
@@ -104,7 +106,10 @@ export const useCreateStudyDialog = (): [() => void, () => ReactNode] => {
             startIcon={<AddIcon />}
             sx={{ marginRight: theme.spacing(1) }}
             onClick={() => {
-              const newVal: Optuna.StudyDirection[] = [...directions, "minimize"]
+              const newVal: Optuna.StudyDirection[] = [
+                ...directions,
+                "minimize",
+              ]
               setDirections(newVal)
             }}
           >

optuna_dashboard/ts/components/GraphContour.tsx

@@ -207,10 +207,7 @@ const ContourFrontend: FC<{
 }
 
 const filterFunc = (trial: Trial, objectiveId: number): boolean => {
-  return (
-    trial.state === "Complete" &&
-    trial.values !== undefined
-  )
+  return trial.state === "Complete" && trial.values !== undefined
 }
 
 const plotContour = (

optuna_dashboard/ts/components/GraphParallelCoordinate.tsx

@@ -246,7 +246,9 @@ const plotCoordinate = (
       )
       if (s.distribution.type === "CategoricalDistribution") {
         // categorical
-        const vocabArr: string[] = s.distribution.choices.map((c) => c?.toString() ?? "null")
+        const vocabArr: string[] = s.distribution.choices.map(
+          (c) => c?.toString() ?? "null"
+        )
         const tickvals: number[] = vocabArr.map((v, i) => i)
         return {
           label: breakLabelIfTooLong(s.name),

optuna_dashboard/ts/components/GraphParetoFront.tsx

@@ -161,7 +161,10 @@ const GraphParetoFrontFrontend: FC<{
   )
 }
 
-const filterFunc = (trial: Trial, directions: Optuna.StudyDirection[]): boolean => {
+const filterFunc = (
+  trial: Trial,
+  directions: Optuna.StudyDirection[]
+): boolean => {
   return (
     trial.state === "Complete" &&
     trial.values !== undefined &&

optuna_dashboard/ts/components/GraphSlice.tsx

@@ -291,7 +291,9 @@ const plotSlice = (
       automargin: true, // Otherwise the label is outside of the plot
     }
   } else {
-    const vocabArr = selectedParamSpace.distribution.choices.map((c) => c?.toString() ?? "null")
+    const vocabArr = selectedParamSpace.distribution.choices.map(
+      (c) => c?.toString() ?? "null"
+    )
     const tickvals: number[] = vocabArr.map((v, i) => i)
     layout["xaxis"] = {
       title: selectedParamTarget.toLabel(),

optuna_dashboard/ts/components/StudyHistory.tsx

@@ -52,7 +52,10 @@ export const StudyHistory: FC<{ studyId: number }> = ({ studyId }) => {
   ]
   const trials: Trial[] = studyDetail?.trials || []
   return (
-    <Box component="div" sx={{ display: "flex", width: "100%", flexDirection: "column" }}>
+    <Box
+      component="div"
+      sx={{ display: "flex", width: "100%", flexDirection: "column" }}
+    >
       <FormControl
         component="fieldset"
         sx={{

optuna_dashboard/ts/components/TrialFormWidgets.tsx

@@ -150,7 +150,7 @@ const UpdatableFormWidgets: FC<{
       >
         {widgetStates.map((ws) => ws.render())}
         <Box
-        component="div"
+          component="div"
           sx={{
             display: "flex",
             flexDirection: "row",
@@ -428,9 +428,7 @@ const ReadonlyFormWidgets: FC<{
                 </FormLabel>
                 <Box component="div" sx={{ padding: theme.spacing(0, 2) }}>
                   <Slider
-                    defaultValue={
-                      value
-                    }
+                    defaultValue={value}
                     min={widget.min}
                     max={widget.max}
                     step={widget.step}

optuna_dashboard/ts/components/TrialList.tsx

@@ -186,7 +186,7 @@ export const TrialListDetail: FC<{
     value: string | null | ReactNode
   ): ReactNode => (
     <Box
-    component="div"
+      component="div"
       key={key}
       sx={{
         display: "flex",
@@ -204,7 +204,7 @@ export const TrialListDetail: FC<{
         {key}
       </Typography>
       <Box
-      component="div"
+        component="div"
         sx={{
           bgcolor:
             theme.palette.mode === "dark"
@@ -225,7 +225,10 @@ export const TrialListDetail: FC<{
   )
 
   return (
-    <Box component="div" sx={{ width: "100%", padding: theme.spacing(2, 2, 0, 2) }}>
+    <Box
+      component="div"
+      sx={{ width: "100%", padding: theme.spacing(2, 2, 0, 2) }}
+    >
       <Typography
         variant="h4"
         sx={{
@@ -236,7 +239,7 @@ export const TrialListDetail: FC<{
         Trial {trial.number} (trial_id={trial.trial_id})
       </Typography>
       <Box
-      component="div"
+        component="div"
         sx={{
           marginBottom: theme.spacing(1),
           display: "flex",
@@ -289,7 +292,7 @@ export const TrialListDetail: FC<{
         formWidgets={formWidgets}
       />
       <Box
-      component="div"
+        component="div"
         sx={{
           marginBottom: theme.spacing(2),
           display: "flex",
@@ -360,9 +363,12 @@ export const TrialList: FC<{ studyDetail: StudyDetail | null }> = ({
     queried.length > 0 ? queried : trials.length > 0 ? [trials[0]] : []
 
   return (
-    <Box component="div" sx={{ display: "flex", flexDirection: "row", width: "100%" }}>
-      <Box
+    <Box
       component="div"
+      sx={{ display: "flex", flexDirection: "row", width: "100%" }}
+    >
+      <Box
+        component="div"
         ref={listParentRef}
         sx={{
           minWidth: trialListWidth,
@@ -429,7 +435,7 @@ export const TrialList: FC<{ studyDetail: StudyDetail | null }> = ({
           </ListSubheader>
           <Divider />
           <Box
-          component="div"
+            component="div"
             sx={{
               width: "100%",
               height: `${rowVirtualizer.getTotalSize()}px`,
@@ -518,14 +524,17 @@ export const TrialList: FC<{ studyDetail: StudyDetail | null }> = ({
       </Box>
       <Divider orientation="vertical" flexItem />
       <Box
-      component="div"
+        component="div"
         sx={{
           flexGrow: 1,
           overflow: "auto",
           height: `calc(100vh - ${theme.spacing(8)})`,
         }}
       >
-        <Box component="div" sx={{ display: "flex", flexDirection: "row", width: "100%" }}>
+        <Box
+          component="div"
+          sx={{ display: "flex", flexDirection: "row", width: "100%" }}
+        >
           {selected.length === 0
             ? null
             : selected.map((t) => (

optuna_dashboard/ts/dominatedTrials.ts

@@ -1,6 +1,9 @@
 import * as Optuna from "@optuna/types"
 
-const filterFunc = (trial: Trial, directions: Optuna.StudyDirection[]): boolean => {
+const filterFunc = (
+  trial: Trial,
+  directions: Optuna.StudyDirection[]
+): boolean => {
   return (
     trial.state === "Complete" &&
     trial.values !== undefined &&

optuna_dashboard/ts/trialFilter.ts

@@ -211,7 +211,10 @@ export const useObjectiveAndUserAttrTargetsFromStudies = (
   }, [studies])
 
   const intersect = (arrays: Optuna.AttributeSpec[][]) => {
-    const atrEqual = (obj1: Optuna.AttributeSpec, obj2: Optuna.AttributeSpec) => {
+    const atrEqual = (
+      obj1: Optuna.AttributeSpec,
+      obj2: Optuna.AttributeSpec
+    ) => {
       return obj1.key === obj2.key
     }
     return arrays.reduce((a, b) =>