Merge pull request #31 from optuna/eslint

Introduce eslint

.eslintrc.js

@@ -0,0 +1,14 @@
+module.exports = {
+  root: true,
+  parser: '@typescript-eslint/parser',
+  plugins: [
+    '@typescript-eslint',
+  ],
+  rules: {
+      "@typescript-eslint/ban-ts-comment": "off"
+  },
+  extends: [
+    'eslint:recommended',
+    'plugin:@typescript-eslint/recommended',
+  ],
+};

optuna_dashboard/static/action.ts

@@ -37,7 +37,7 @@ export const actionCreator = () => {
   const updateStudyDetail = (studyId: number) => {
     getStudyDetailAPI(studyId)
       .then((study) => {
-        let newVal = Object.assign({}, studyDetails)
+        const newVal = Object.assign({}, studyDetails)
         newVal[studyId] = study
         setStudyDetails(newVal)
       })

optuna_dashboard/static/apiClient.ts

@@ -161,8 +161,8 @@ export const createNewStudyAPI = (
     })
 }
 
-export const deleteStudyAPI = (studyId: number): Promise<{}> => {
-  return axiosInstance.delete<{}>(`/api/studies/${studyId}`).then((res) => {
+export const deleteStudyAPI = (studyId: number) => {
+  return axiosInstance.delete(`/api/studies/${studyId}`).then((res) => {
     return {}
   })
 }

optuna_dashboard/static/components/App.tsx

@@ -6,7 +6,7 @@ import { SnackbarProvider } from "notistack"
 import { StudyDetail } from "./StudyDetail"
 import { StudyList } from "./StudyList"
 
-export const App: FC<{}> = () => {
+export const App: FC = () => {
   return (
     <RecoilRoot>
       <SnackbarProvider maxSnack={3}>

optuna_dashboard/static/components/GraphHistory.tsx

@@ -199,7 +199,7 @@ const plotHistory = (
     plotly.react(plotDomId, [])
     return
   }
-  let trialsForLinePlot: Trial[] = []
+  const trialsForLinePlot: Trial[] = []
   let currentBest: number | null = null
   filteredTrials.forEach((item) => {
     if (currentBest === null) {
@@ -228,9 +228,9 @@ const plotHistory = (
       : trial.datetime_complete!
   }
 
-  let xForLinePlot = trialsForLinePlot.map(getAxisX)
+  const xForLinePlot = trialsForLinePlot.map(getAxisX)
   xForLinePlot.push(getAxisX(filteredTrials[filteredTrials.length - 1]))
-  let yForLinePlot = trialsForLinePlot.map(
+  const yForLinePlot = trialsForLinePlot.map(
     (t: Trial): number => t.values![objectiveId]
   )
   yForLinePlot.push(yForLinePlot[yForLinePlot.length - 1])

optuna_dashboard/static/components/GraphIntermediateValues.tsx

@@ -30,7 +30,7 @@ const plotIntermediateValue = (trials: Trial[]) => {
     return
   }
 
-  let filteredTrials = trials.filter(
+  const filteredTrials = trials.filter(
     (t) => t.state === "Complete" || t.state === "Pruned"
   )
   const plotData: Partial<plotly.PlotData>[] = filteredTrials.map((trial) => {

optuna_dashboard/static/components/GraphParallelCoordinate.tsx

@@ -30,7 +30,7 @@ const plotCoordinate = (trials: Trial[], objectiveId: number) => {
     plotly.react(plotDomId, [])
     return
   }
-  let filteredTrials = trials.filter(
+  const filteredTrials = trials.filter(
     (t) => t.state === "Complete" || t.state === "Pruned"
   )
 
@@ -50,7 +50,7 @@ const plotCoordinate = (trials: Trial[], objectiveId: number) => {
   const objectiveValues: number[] = filteredTrials.map(
     (t) => t.values![objectiveId]
   )
-  let dimensions = [
+  const dimensions = [
     {
       label: "Objective value",
       values: objectiveValues,

optuna_dashboard/static/components/StudyDetail.tsx

@@ -90,7 +90,7 @@ export const useStudyDetailValue = (studyId: number): StudyDetail | null => {
   return studyDetails[studyId] || null
 }
 
-export const StudyDetail: FC<{}> = () => {
+export const StudyDetail: FC = () => {
   const classes = useStyles()
   const action = actionCreator()
   const { studyId } = useParams<ParamTypes>()
@@ -209,7 +209,7 @@ const TrialTable: FC<{ studyDetail: StudyDetail | null }> = ({
 }) => {
   const trials: Trial[] = studyDetail !== null ? studyDetail.trials : []
 
-  let columns: DataGridColumn<Trial>[] = [
+  const columns: DataGridColumn<Trial>[] = [
     { field: "number", label: "Number", sortable: true, padding: "none" },
     {
       field: "state",

optuna_dashboard/static/components/StudyList.tsx

@@ -46,7 +46,7 @@ const useStyles = makeStyles((theme: Theme) =>
   })
 )
 
-export const StudyList: FC<{}> = () => {
+export const StudyList: FC = () => {
   const classes = useStyles()
 
   const [
@@ -384,7 +384,7 @@ export const StudyList: FC<{}> = () => {
               <Select
                 value={directions[i]}
                 onChange={(e) => {
-                  let newVal: StudyDirection[] = [...directions]
+                  const newVal: StudyDirection[] = [...directions]
                   newVal[i] = e.target.value as StudyDirection
                   setDirections(newVal)
                 }}
@@ -413,7 +413,7 @@ export const StudyList: FC<{}> = () => {
             className={classes.objectiveButton}
             disabled={directions.length <= 1}
             onClick={(e) => {
-              let newVal: StudyDirection[] = [...directions]
+              const newVal: StudyDirection[] = [...directions]
               newVal.pop()
               setDirections(newVal)
             }}

package.json

@@ -6,7 +6,7 @@
   "main": "index.js",
   "scripts": {
     "fmt": "prettier --write \"optuna_dashboard/static/**/*.{ts,tsx}\"",
-    "lint": "prettier --list-different \"optuna_dashboard/static/**/*.{ts,tsx}\"",
+    "lint": "eslint . --ext .ts,.tsx && prettier --list-different \"optuna_dashboard/static/**/*.{ts,tsx}\"",
     "watch": "webpack --watch",
     "build": "webpack",
     "build:dev": "NODE_ENV=development webpack",
@@ -31,9 +31,12 @@
     "@types/react": "^16.9.53",
     "@types/react-dom": "^16.9.8",
     "@types/react-router-dom": "^5.1.6",
+    "@typescript-eslint/eslint-plugin": "^4.15.0",
+    "@typescript-eslint/parser": "^4.15.0",
+    "eslint": "^7.19.0",
     "prettier": "^2.1.2",
     "ts-loader": "^8.0.6",
-    "typescript": "^4.0.3",
+    "typescript": "^4.1.4",
     "webpack": "^5.1.3",
     "webpack-cli": "^4.1.0"
   }