Run prettier

optuna_dashboard/static/components/DataGrid.tsx

@@ -9,9 +9,10 @@ import {
   TableRow,
   TableSortLabel,
   Collapse,
-  IconButton, useTheme,
+  IconButton,
+  useTheme,
 } from "@mui/material"
-import { styled } from "@mui/system";
+import { styled } from "@mui/system"
 import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown"
 import KeyboardArrowUpIcon from "@mui/icons-material/KeyboardArrowUp"
 import { Clear } from "@mui/icons-material"
@@ -114,10 +115,10 @@ function DataGrid<T>(props: {
   const emptyRows =
     rowsPerPage - Math.min(rowsPerPage, sortedRows.length - page * rowsPerPage)
 
-  const RootDiv = styled('div')({
+  const RootDiv = styled("div")({
     width: "100%",
   })
-  const HiddenSpan = styled('span')({
+  const HiddenSpan = styled("span")({
     border: 0,
     clip: "rect(0 0 0 0)",
     height: 1,
@@ -128,7 +129,7 @@ function DataGrid<T>(props: {
     top: 20,
     width: 1,
   })
-  const TableHeaderCellSpan = styled('span')({
+  const TableHeaderCellSpan = styled("span")({
     display: "inline-flex",
   })
   return (
@@ -238,9 +239,9 @@ function DataGridRow<T>(props: {
     handleClickFilterCell,
   } = props
   const [open, setOpen] = React.useState(false)
-  const theme = useTheme();
+  const theme = useTheme()
 
-  const FilterableDiv = styled('div')({
+  const FilterableDiv = styled("div")({
     color: theme.palette.primary.main,
     textDecoration: "underline",
     cursor: "pointer",

optuna_dashboard/static/components/GraphEdf.tsx

@@ -6,7 +6,9 @@ import {
   FormLabel,
   MenuItem,
   Select,
-  Typography, SelectChangeEvent, useTheme,
+  Typography,
+  SelectChangeEvent,
+  useTheme,
 } from "@mui/material"
 
 const plotDomId = "graph-edf"
@@ -14,12 +16,10 @@ const plotDomId = "graph-edf"
 export const Edf: FC<{
   study: StudyDetail | null
 }> = ({ study = null }) => {
-  const theme = useTheme();
+  const theme = useTheme()
   const [objectiveId, setObjectiveId] = useState<number>(0)
 
-  const handleObjectiveChange = (
-    event: SelectChangeEvent<number>
-  ) => {
+  const handleObjectiveChange = (event: SelectChangeEvent<number>) => {
     setObjectiveId(event.target.value as number)
   }
 
@@ -36,10 +36,13 @@ export const Edf: FC<{
             EDF
           </Typography>
           {study !== null && study.directions.length !== 1 ? (
-            <FormControl component="fieldset" sx={{
-              marginBottom: theme.spacing(2),
-              marginRight: theme.spacing(5),
-            }}>
+            <FormControl
+              component="fieldset"
+              sx={{
+                marginBottom: theme.spacing(2),
+                marginRight: theme.spacing(5),
+              }}
+            >
               <FormLabel component="legend">Objective ID:</FormLabel>
               <Select value={objectiveId} onChange={handleObjectiveChange}>
                 {study.directions.map((d, i) => (

optuna_dashboard/static/components/GraphHistory.tsx

@@ -11,7 +11,9 @@ import {
   Select,
   Radio,
   RadioGroup,
-  Typography, SelectChangeEvent, useTheme,
+  Typography,
+  SelectChangeEvent,
+  useTheme,
 } from "@mui/material"
 
 const plotDomId = "graph-history"
@@ -19,16 +21,14 @@ const plotDomId = "graph-history"
 export const GraphHistory: FC<{
   study: StudyDetail | null
 }> = ({ study = null }) => {
-  const theme = useTheme();
+  const theme = useTheme()
   const [xAxis, setXAxis] = useState<string>("number")
   const [objectiveId, setObjectiveId] = useState<number>(0)
   const [logScale, setLogScale] = useState<boolean>(false)
   const [filterCompleteTrial, setFilterCompleteTrial] = useState<boolean>(false)
   const [filterPrunedTrial, setFilterPrunedTrial] = useState<boolean>(false)
 
-  const handleObjectiveChange = (
-    event: SelectChangeEvent<number>
-  ) => {
+  const handleObjectiveChange = (event: SelectChangeEvent<number>) => {
     setObjectiveId(event.target.value as number)
   }
 
@@ -79,7 +79,10 @@ export const GraphHistory: FC<{
             History
           </Typography>
           {study !== null && study.directions.length !== 1 ? (
-            <FormControl component="fieldset" sx={{ marginBottom: theme.spacing(2) }}>
+            <FormControl
+              component="fieldset"
+              sx={{ marginBottom: theme.spacing(2) }}
+            >
               <FormLabel component="legend">Objective ID:</FormLabel>
               <Select value={objectiveId} onChange={handleObjectiveChange}>
                 {study.directions.map((d, i) => (
@@ -90,7 +93,10 @@ export const GraphHistory: FC<{
               </Select>
             </FormControl>
           ) : null}
-          <FormControl component="fieldset" sx={{ marginBottom: theme.spacing(2) }}>
+          <FormControl
+            component="fieldset"
+            sx={{ marginBottom: theme.spacing(2) }}
+          >
             <FormLabel component="legend">Log y scale:</FormLabel>
             <Switch
               checked={logScale}
@@ -98,7 +104,10 @@ export const GraphHistory: FC<{
               value="enable"
             />
           </FormControl>
-          <FormControl component="fieldset" sx={{ marginBottom: theme.spacing(2) }}>
+          <FormControl
+            component="fieldset"
+            sx={{ marginBottom: theme.spacing(2) }}
+          >
             <FormLabel component="legend">Filter state:</FormLabel>
             <FormControlLabel
               control={
@@ -119,7 +128,10 @@ export const GraphHistory: FC<{
               label="Pruned"
             />
           </FormControl>
-          <FormControl component="fieldset" sx={{ marginBottom: theme.spacing(2) }}>
+          <FormControl
+            component="fieldset"
+            sx={{ marginBottom: theme.spacing(2) }}
+          >
             <FormLabel component="legend">X-axis:</FormLabel>
             <RadioGroup
               aria-label="gender"

optuna_dashboard/static/components/GraphHyperparameterImportances.tsx

@@ -6,7 +6,9 @@ import {
   FormLabel,
   MenuItem,
   Select,
-  Typography, SelectChangeEvent, useTheme,
+  Typography,
+  SelectChangeEvent,
+  useTheme,
 } from "@mui/material"
 
 import { getParamImportances } from "../apiClient"
@@ -40,13 +42,11 @@ export const GraphHyperparameterImportances: FC<{
   study: StudyDetail | null
   studyId: number
 }> = ({ study = null, studyId }) => {
-  const theme = useTheme();
+  const theme = useTheme()
   const [objectiveId, setObjectiveId] = useState<number>(0)
   const numOfTrials = study?.trials.length || 0
 
-  const handleObjectiveChange = (
-    event: SelectChangeEvent<number>
-  ) => {
+  const handleObjectiveChange = (event: SelectChangeEvent<number>) => {
     setObjectiveId(event.target.value as number)
   }
 
@@ -71,14 +71,17 @@ export const GraphHyperparameterImportances: FC<{
     <Grid container direction="row">
       <Grid item xs={3}>
         <Grid container direction="column">
-          <Typography variant="h6" sx={{margin: "1em 0"}}>
+          <Typography variant="h6" sx={{ margin: "1em 0" }}>
             Hyperparameter importance
           </Typography>
           {study !== null && study.directions.length !== 1 ? (
-              <FormControl component="fieldset" sx={{
+            <FormControl
+              component="fieldset"
+              sx={{
                 marginBottom: theme.spacing(2),
                 marginRight: theme.spacing(5),
-              }}>
+              }}
+            >
               <FormLabel component="legend">Objective ID:</FormLabel>
               <Select value={objectiveId} onChange={handleObjectiveChange}>
                 {study.directions.map((d, i) => (

optuna_dashboard/static/components/GraphIntermediateValues.tsx

@@ -14,7 +14,7 @@ export const GraphIntermediateValues: FC<{
     <Grid container direction="row">
       <Grid item xs={3}>
         <Grid container direction="column">
-          <Typography variant="h6" sx={{margin: "1em 0"}}>
+          <Typography variant="h6" sx={{ margin: "1em 0" }}>
             Intermediate values
           </Typography>
         </Grid>

optuna_dashboard/static/components/GraphParallelCoordinate.tsx

@@ -6,7 +6,9 @@ import {
   FormLabel,
   MenuItem,
   Select,
-  Typography, SelectChangeEvent, useTheme
+  Typography,
+  SelectChangeEvent,
+  useTheme,
 } from "@mui/material"
 
 const plotDomId = "graph-parallel-coordinate"
@@ -14,12 +16,10 @@ const plotDomId = "graph-parallel-coordinate"
 export const GraphParallelCoordinate: FC<{
   study: StudyDetail | null
 }> = ({ study = null }) => {
-  const theme = useTheme();
+  const theme = useTheme()
   const [objectiveId, setObjectiveId] = useState<number>(0)
 
-  const handleObjectiveChange = (
-    event: SelectChangeEvent<number>
-  ) => {
+  const handleObjectiveChange = (event: SelectChangeEvent<number>) => {
     setObjectiveId(event.target.value as number)
   }
 
@@ -33,14 +33,17 @@ export const GraphParallelCoordinate: FC<{
     <Grid container direction="row">
       <Grid item xs={3}>
         <Grid container direction="column">
-          <Typography variant="h6" sx={{margin: "1em 0"}}>
+          <Typography variant="h6" sx={{ margin: "1em 0" }}>
             Parallel coordinate
           </Typography>
           {study !== null && study.directions.length !== 1 ? (
-            <FormControl component="fieldset" sx={{
-              marginBottom: theme.spacing(2),
-              marginRight: theme.spacing(5),
-            }}>
+            <FormControl
+              component="fieldset"
+              sx={{
+                marginBottom: theme.spacing(2),
+                marginRight: theme.spacing(5),
+              }}
+            >
               <FormLabel component="legend">Objective ID:</FormLabel>
               <Select value={objectiveId} onChange={handleObjectiveChange}>
                 {study.directions.map((d, i) => (

optuna_dashboard/static/components/GraphParetoFront.tsx

@@ -6,7 +6,9 @@ import {
   FormLabel,
   MenuItem,
   Select,
-  Typography, SelectChangeEvent, useTheme
+  Typography,
+  SelectChangeEvent,
+  useTheme,
 } from "@mui/material"
 
 const plotDomId = "graph-pareto-front"
@@ -14,19 +16,15 @@ const plotDomId = "graph-pareto-front"
 export const GraphParetoFront: FC<{
   study: StudyDetail | null
 }> = ({ study = null }) => {
-  const theme = useTheme();
+  const theme = useTheme()
   const [objectiveXId, setObjectiveXId] = useState<number>(0)
   const [objectiveYId, setObjectiveYId] = useState<number>(1)
 
-  const handleObjectiveXChange = (
-    event: SelectChangeEvent<number>
-  ) => {
+  const handleObjectiveXChange = (event: SelectChangeEvent<number>) => {
     setObjectiveXId(event.target.value as number)
   }
 
-  const handleObjectiveYChange = (
-    event: SelectChangeEvent<number>
-  ) => {
+  const handleObjectiveYChange = (event: SelectChangeEvent<number>) => {
     setObjectiveYId(event.target.value as number)
   }
 
@@ -41,13 +39,16 @@ export const GraphParetoFront: FC<{
       {study !== null && study.directions.length !== 1 ? (
         <Grid item xs={3}>
           <Grid container direction="column">
-            <Typography variant="h6" sx={{margin: "1em 0"}}>
+            <Typography variant="h6" sx={{ margin: "1em 0" }}>
               Pareto Front
             </Typography>
-            <FormControl component="fieldset" sx={{
-              marginBottom: theme.spacing(2),
-              marginRight: theme.spacing(5),
-            }}>
+            <FormControl
+              component="fieldset"
+              sx={{
+                marginBottom: theme.spacing(2),
+                marginRight: theme.spacing(5),
+              }}
+            >
               <FormLabel component="legend">Objective X ID:</FormLabel>
               <Select value={objectiveXId} onChange={handleObjectiveXChange}>
                 {study.directions.map((d, i) => (
@@ -57,10 +58,13 @@ export const GraphParetoFront: FC<{
                 ))}
               </Select>
             </FormControl>
-            <FormControl component="fieldset" sx={{
-              marginBottom: theme.spacing(2),
-              marginRight: theme.spacing(5),
-            }}>
+            <FormControl
+              component="fieldset"
+              sx={{
+                marginBottom: theme.spacing(2),
+                marginRight: theme.spacing(5),
+              }}
+            >
               <FormLabel component="legend">Objective Y ID:</FormLabel>
               <Select value={objectiveYId} onChange={handleObjectiveYChange}>
                 {study.directions.map((d, i) => (

optuna_dashboard/static/components/GraphSlice.tsx

@@ -8,7 +8,9 @@ import {
   MenuItem,
   Switch,
   Select,
-  Typography, SelectChangeEvent, useTheme
+  Typography,
+  SelectChangeEvent,
+  useTheme,
 } from "@mui/material"
 
 const plotDomId = "graph-slice"
@@ -19,7 +21,7 @@ const logDistributions = ["LogUniformDistribution", "IntLogUniformDistribution"]
 export const GraphSlice: FC<{
   study: StudyDetail | null
 }> = ({ study = null }) => {
-  const theme = useTheme();
+  const theme = useTheme()
   const trials: Trial[] = study !== null ? study.trials : []
   const [objectiveId, setObjectiveId] = useState<number>(0)
   const [selected, setSelected] = useState<string | null>(null)
@@ -39,9 +41,7 @@ export const GraphSlice: FC<{
     plotSlice(trials, objectiveId, selected, logXScale, logYScale)
   }, [trials, objectiveId, selected, logXScale, logYScale])
 
-  const handleObjectiveChange = (
-    event: SelectChangeEvent<number>
-  ) => {
+  const handleObjectiveChange = (event: SelectChangeEvent<number>) => {
     setObjectiveId(event.target.value as number)
   }
 
@@ -61,14 +61,17 @@ export const GraphSlice: FC<{
     <Grid container direction="row">
       <Grid item xs={3}>
         <Grid container direction="column">
-          <Typography variant="h6" sx={{margin: "1em 0"}}>
+          <Typography variant="h6" sx={{ margin: "1em 0" }}>
             Slice
           </Typography>
           {study !== null && study.directions.length !== 1 ? (
-            <FormControl component="fieldset" sx={{
-              marginBottom: theme.spacing(2),
-              marginRight: theme.spacing(5),
-            }}>
+            <FormControl
+              component="fieldset"
+              sx={{
+                marginBottom: theme.spacing(2),
+                marginRight: theme.spacing(5),
+              }}
+            >
               <FormLabel component="legend">Objective ID:</FormLabel>
               <Select value={objectiveId} onChange={handleObjectiveChange}>
                 {study.directions.map((d, i) => (
@@ -79,10 +82,13 @@ export const GraphSlice: FC<{
               </Select>
             </FormControl>
           ) : null}
-          <FormControl component="fieldset" sx={{
-            marginBottom: theme.spacing(2),
-            marginRight: theme.spacing(5),
-          }}>
+          <FormControl
+            component="fieldset"
+            sx={{
+              marginBottom: theme.spacing(2),
+              marginRight: theme.spacing(5),
+            }}
+          >
             <InputLabel id="parameter">Parameter</InputLabel>
             <Select value={selected || ""} onChange={handleSelectedParam}>
               {paramNames?.map((p, i) => (
@@ -92,10 +98,13 @@ export const GraphSlice: FC<{
               ))}
             </Select>
           </FormControl>
-          <FormControl component="fieldset" sx={{
-            marginBottom: theme.spacing(2),
-            marginRight: theme.spacing(5),
-          }}>
+          <FormControl
+            component="fieldset"
+            sx={{
+              marginBottom: theme.spacing(2),
+              marginRight: theme.spacing(5),
+            }}
+          >
             <FormLabel component="legend">Log y scale:</FormLabel>
             <Switch
               checked={logYScale}

optuna_dashboard/static/components/StudyDetail.tsx

@@ -17,7 +17,9 @@ import {
   Select,
   MenuItem,
   FormGroup,
-  useTheme, FormLabel, FormControl
+  useTheme,
+  FormLabel,
+  FormControl,
 } from "@mui/material"
 import { Home, Settings } from "@mui/icons-material"
 import FormControlLabel from "@mui/material/FormControlLabel"
@@ -50,7 +52,7 @@ export const useStudyDetailValue = (studyId: number): StudyDetail | null => {
 }
 
 export const StudyDetail: FC = () => {
-  const theme = useTheme();
+  const theme = useTheme()
   const action = actionCreator()
   const { studyId } = useParams<ParamTypes>()
   const studyIdNumber = parseInt(studyId, 10)
@@ -69,7 +71,7 @@ export const StudyDetail: FC = () => {
   useEffect(() => {
     const localStoragePreferences = localStorage.getItem("savedPref")
     if (localStoragePreferences !== null) {
-      const merged = {...preferences, ...JSON.parse(localStoragePreferences)}
+      const merged = { ...preferences, ...JSON.parse(localStoragePreferences) }
       setPreferences(merged)
     }
   }, [])
@@ -114,11 +116,13 @@ export const StudyDetail: FC = () => {
   return (
     <div>
       <Dialog onClose={handleClose} aria-labelledby="vis-pref" open={prefOpen}>
-        <MuiDialogTitle sx={{
-          margin: 0,
-          padding: theme.spacing(2),
-          minWidth: 300,
-        }}>
+        <MuiDialogTitle
+          sx={{
+            margin: 0,
+            padding: theme.spacing(2),
+            minWidth: 300,
+          }}
+        >
           <Typography variant="h6">Preferences</Typography>
           <IconButton
             aria-label="close"
@@ -213,17 +217,19 @@ export const StudyDetail: FC = () => {
               label="Slice"
             />
           </FormGroup>
-          <FormLabel component="legend" sx={{marginTop: theme.spacing(2) }}>Reload Interval</FormLabel>
+          <FormLabel component="legend" sx={{ marginTop: theme.spacing(2) }}>
+            Reload Interval
+          </FormLabel>
           <FormControl variant="standard">
             <Select
-                labelId="pref-reload-interval"
-                value={preferences.reloadInterval}
-                onChange={(e) => {
-                  setPreferences({
-                    ...preferences,
-                    ["reloadInterval"]: e.target.value as number,
-                  })
-                }}
+              labelId="pref-reload-interval"
+              value={preferences.reloadInterval}
+              onChange={(e) => {
+                setPreferences({
+                  ...preferences,
+                  ["reloadInterval"]: e.target.value as number,
+                })
+              }}
             >
               <MenuItem value={-1}>stop</MenuItem>
               <MenuItem value={5}>5s</MenuItem>
@@ -235,14 +241,16 @@ export const StudyDetail: FC = () => {
         </MuiDialogContent>
       </Dialog>
       <AppBar position="static">
-        <Container sx={{
-          ["@media (min-width: 1280px)"]: {
-            maxWidth: "100%",
-          },
-        }}>
+        <Container
+          sx={{
+            ["@media (min-width: 1280px)"]: {
+              maxWidth: "100%",
+            },
+          }}
+        >
           <Toolbar>
             <Typography variant="h6">{APP_BAR_TITLE}</Typography>
-            <Box sx={{flexGrow: 1}} />
+            <Box sx={{ flexGrow: 1 }} />
             <IconButton color="inherit" onClick={handleClickOpen}>
               <Settings />
             </IconButton>
@@ -258,22 +266,28 @@ export const StudyDetail: FC = () => {
           </Toolbar>
         </Container>
       </AppBar>
-      <Container sx={{
+      <Container
+        sx={{
           ["@media (min-width: 1280px)"]: {
             maxWidth: "100%",
           },
-        }}>
+        }}
+      >
         <div>
-          <Paper sx={{
-            margin: theme.spacing(2),
-            padding: theme.spacing(2),
-          }}>
+          <Paper
+            sx={{
+              margin: theme.spacing(2),
+              padding: theme.spacing(2),
+            }}
+          >
             <Typography variant="h6">{title}</Typography>
           </Paper>
           {preferences.graphHistoryChecked ? (
-              <Card sx={{
+            <Card
+              sx={{
                 margin: theme.spacing(2),
-              }}>
+              }}
+            >
               <CardContent>
                 <GraphHistory study={studyDetail} />
               </CardContent>
@@ -283,14 +297,14 @@ export const StudyDetail: FC = () => {
           {studyDetail !== null &&
           !isSingleObjectiveStudy(studyDetail) &&
           preferences.graphParetoFrontChecked ? (
-            <Card sx={{margin: theme.spacing(2)}}>
+            <Card sx={{ margin: theme.spacing(2) }}>
               <CardContent>
                 <GraphParetoFront study={studyDetail} />
               </CardContent>
             </Card>
           ) : null}
           {preferences.graphParallelCoordinateChecked ? (
-            <Card sx={{margin: theme.spacing(2)}}>
+            <Card sx={{ margin: theme.spacing(2) }}>
               <CardContent>
                 <GraphParallelCoordinate study={studyDetail} />
               </CardContent>
@@ -300,21 +314,21 @@ export const StudyDetail: FC = () => {
           {studyDetail !== null &&
           isSingleObjectiveStudy(studyDetail) &&
           preferences.graphIntermediateValuesChecked ? (
-            <Card sx={{margin: theme.spacing(2)}}>
+            <Card sx={{ margin: theme.spacing(2) }}>
               <CardContent>
                 <GraphIntermediateValues trials={trials} />
               </CardContent>
             </Card>
           ) : null}
           {preferences.edfChecked ? (
-            <Card sx={{margin: theme.spacing(2)}}>
+            <Card sx={{ margin: theme.spacing(2) }}>
               <CardContent>
                 <Edf study={studyDetail} />
               </CardContent>
             </Card>
           ) : null}
           {preferences.graphHyperparameterImportancesChecked ? (
-            <Card sx={{margin: theme.spacing(2)}}>
+            <Card sx={{ margin: theme.spacing(2) }}>
               <CardContent>
                 <GraphHyperparameterImportances
                   study={studyDetail}
@@ -325,13 +339,13 @@ export const StudyDetail: FC = () => {
           ) : null}
 
           {studyDetail !== null && preferences.graphSliceChecked ? (
-            <Card sx={{margin: theme.spacing(2)}}>
+            <Card sx={{ margin: theme.spacing(2) }}>
               <CardContent>
                 <GraphSlice study={studyDetail} />
               </CardContent>
             </Card>
           ) : null}
-          <Card sx={{margin: theme.spacing(2)}}>
+          <Card sx={{ margin: theme.spacing(2) }}>
             <TrialTable studyDetail={studyDetail} />
           </Card>
         </div>

optuna_dashboard/static/components/StudyList.tsx

@@ -24,7 +24,7 @@ import {
   FormControl,
   FormLabel,
   Select,
-    useTheme,
+  useTheme,
 } from "@mui/material"
 import { Add, AddBox, Delete, Refresh, Remove } from "@mui/icons-material"
 
@@ -202,14 +202,16 @@ export const StudyList: FC = () => {
   return (
     <div>
       <AppBar position="static">
-        <Container sx={{
-          ["@media (min-width: 1280px)"]: {
-            maxWidth: "100%",
-          },
-        }}>
+        <Container
+          sx={{
+            ["@media (min-width: 1280px)"]: {
+              maxWidth: "100%",
+            },
+          }}
+        >
           <Toolbar>
             <Typography variant="h6">{APP_BAR_TITLE}</Typography>
-            <Box sx={{flexGrow: 1}} />
+            <Box sx={{ flexGrow: 1 }} />
             <IconButton
               aria-controls="menu-appbar"
               aria-haspopup="true"
@@ -267,12 +269,14 @@ export const StudyList: FC = () => {
           </Toolbar>
         </Container>
       </AppBar>
-      <Container sx={{
-        ["@media (min-width: 1280px)"]: {
-          maxWidth: "100%",
-        },
-      }}>
-        <Card sx={{margin: theme.spacing(2)}}>
+      <Container
+        sx={{
+          ["@media (min-width: 1280px)"]: {
+            maxWidth: "100%",
+          },
+        }}
+      >
+        <Card sx={{ margin: theme.spacing(2) }}>
           <DataGrid<StudySummary>
             columns={columns}
             rows={studies}
@@ -390,7 +394,7 @@ export const StudyList: FC = () => {
           <Button
             variant="outlined"
             startIcon={<Add />}
-            sx={{marginRight: theme.spacing(1)}}
+            sx={{ marginRight: theme.spacing(1) }}
             onClick={() => {
               const newVal: StudyDirection[] = [...directions, "minimize"]
               setDirections(newVal)
@@ -401,7 +405,7 @@ export const StudyList: FC = () => {
           <Button
             variant="outlined"
             startIcon={<Remove />}
-            sx={{marginRight: theme.spacing(1)}}
+            sx={{ marginRight: theme.spacing(1) }}
             disabled={directions.length <= 1}
             onClick={() => {
               const newVal: StudyDirection[] = [...directions]