From a0c3240701ea46aa8da2bdff860c9918833d7f91 Mon Sep 17 00:00:00 2001 From: c-bata Date: Wed, 10 May 2023 12:07:23 +0900 Subject: [PATCH] Rename components --- optuna_dashboard/ts/components/App.tsx | 18 +- .../{StudyDetailBeta.tsx => StudyDetail.tsx} | 8 +- .../{StudyListBeta.tsx => StudyList.tsx} | 2 +- optuna_dashboard/ts/components/TrialTable.tsx | 248 ++---------------- typescript_tests/TrialTable.test.tsx | 222 ---------------- 5 files changed, 33 insertions(+), 465 deletions(-) rename optuna_dashboard/ts/components/{StudyDetailBeta.tsx => StudyDetail.tsx} (96%) rename optuna_dashboard/ts/components/{StudyListBeta.tsx => StudyList.tsx} (99%) delete mode 100644 typescript_tests/TrialTable.test.tsx diff --git a/optuna_dashboard/ts/components/App.tsx b/optuna_dashboard/ts/components/App.tsx index 41aa8c1e..5a3d6573 100644 --- a/optuna_dashboard/ts/components/App.tsx +++ b/optuna_dashboard/ts/components/App.tsx @@ -13,8 +13,8 @@ import { } from "@mui/material" import { CompareStudies } from "./CompareStudies" -import { StudyDetailBeta } from "./StudyDetailBeta" -import { StudyListBeta } from "./StudyListBeta" +import { StudyDetail } from "./StudyDetail" +import { StudyList } from "./StudyList" export const App: FC = () => { const prefersDarkMode = useMediaQuery("(prefers-color-scheme: dark)") @@ -54,7 +54,7 @@ export const App: FC = () => { @@ -63,7 +63,7 @@ export const App: FC = () => { @@ -72,7 +72,7 @@ export const App: FC = () => { @@ -81,7 +81,7 @@ export const App: FC = () => { @@ -90,7 +90,7 @@ export const App: FC = () => { @@ -99,7 +99,7 @@ export const App: FC = () => { @@ -113,7 +113,7 @@ export const App: FC = () => { /> } + children={} /> diff --git a/optuna_dashboard/ts/components/StudyDetailBeta.tsx b/optuna_dashboard/ts/components/StudyDetail.tsx similarity index 96% rename from optuna_dashboard/ts/components/StudyDetailBeta.tsx rename to optuna_dashboard/ts/components/StudyDetail.tsx index 4de16577..d1024ad6 100644 --- a/optuna_dashboard/ts/components/StudyDetailBeta.tsx +++ b/optuna_dashboard/ts/components/StudyDetail.tsx @@ -39,7 +39,7 @@ export const useURLVars = (): number => { return useMemo(() => parseInt(studyId, 10), [studyId]) } -export const StudyDetailBeta: FC<{ +export const StudyDetail: FC<{ toggleColorMode: () => void page: PageId }> = ({ toggleColorMode, page }) => { @@ -126,11 +126,7 @@ export const StudyDetailBeta: FC<{ content = ( - + ) diff --git a/optuna_dashboard/ts/components/StudyListBeta.tsx b/optuna_dashboard/ts/components/StudyList.tsx similarity index 99% rename from optuna_dashboard/ts/components/StudyListBeta.tsx rename to optuna_dashboard/ts/components/StudyList.tsx index f010f048..2cdfc08f 100644 --- a/optuna_dashboard/ts/components/StudyListBeta.tsx +++ b/optuna_dashboard/ts/components/StudyList.tsx @@ -33,7 +33,7 @@ import { useCreateStudyDialog } from "./CreateStudyDialog" import { useDeleteStudyDialog } from "./DeleteStudyDialog" import { useRenameStudyDialog } from "./RenameStudyDialog" -export const StudyListBeta: FC<{ +export const StudyList: FC<{ toggleColorMode: () => void }> = ({ toggleColorMode }) => { const theme = useTheme() diff --git a/optuna_dashboard/ts/components/TrialTable.tsx b/optuna_dashboard/ts/components/TrialTable.tsx index 32206e8a..ed930c9c 100644 --- a/optuna_dashboard/ts/components/TrialTable.tsx +++ b/optuna_dashboard/ts/components/TrialTable.tsx @@ -1,28 +1,16 @@ -import React, { createRef, FC, FormEvent, MouseEvent } from "react" -import { - Typography, - Grid, - Box, - Button, - IconButton, - Stack, - TextField, -} from "@mui/material" +import React, { FC } from "react" +import { IconButton } from "@mui/material" import LinkIcon from "@mui/icons-material/Link" import { DataGridColumn, DataGrid } from "./DataGrid" import { Link } from "react-router-dom" -import { actionCreator } from "../action" - export const TrialTable: FC<{ studyDetail: StudyDetail | null - isBeta: boolean initialRowsPerPage?: number -}> = ({ studyDetail, isBeta, initialRowsPerPage }) => { +}> = ({ studyDetail, initialRowsPerPage }) => { const trials: Trial[] = studyDetail !== null ? studyDetail.trials : [] const objectiveNames: string[] = studyDetail?.objective_names || [] - const action = actionCreator() const columns: DataGridColumn[] = [ { field: "number", label: "Number", sortable: true, padding: "none" }, @@ -103,48 +91,6 @@ export const TrialTable: FC<{ })) columns.push(...objectiveColumns) } - if (!isBeta) { - columns.push({ - field: "datetime_start", - label: "Duration(ms)", - toCellValue: (i) => { - const startMs = trials[i].datetime_start?.getTime() - const completeMs = trials[i].datetime_complete?.getTime() - if (startMs !== undefined && completeMs !== undefined) { - return (completeMs - startMs).toString() - } - return null - }, - sortable: true, - less: (firstEl, secondEl): number => { - const firstStartMs = firstEl.datetime_start?.getTime() - const firstCompleteMs = firstEl.datetime_complete?.getTime() - const firstDurationMs = - firstStartMs !== undefined && firstCompleteMs !== undefined - ? firstCompleteMs - firstStartMs - : undefined - const secondStartMs = secondEl.datetime_start?.getTime() - const secondCompleteMs = secondEl.datetime_complete?.getTime() - const secondDurationMs = - secondStartMs !== undefined && secondCompleteMs !== undefined - ? secondCompleteMs - secondStartMs - : undefined - - if (firstDurationMs === secondDurationMs) { - return 0 - } else if ( - firstDurationMs !== undefined && - secondDurationMs !== undefined - ) { - return firstDurationMs < secondDurationMs ? 1 : -1 - } else if (firstDurationMs !== undefined) { - return -1 - } else { - return 1 - } - }, - }) - } if ( studyDetail?.union_search_space.length === studyDetail?.intersection_search_space.length @@ -220,175 +166,24 @@ export const TrialTable: FC<{ }, }) }) - if (isBeta) { - columns.push({ - field: "trial_id", - label: "Detail", - toCellValue: (i) => ( - - - - ), - }) - } - - const collapseIntermediateValueColumns: DataGridColumn[] = - [ - { field: "step", label: "Step", sortable: true }, - { - field: "value", - label: "Value", - sortable: true, - less: (firstEl, secondEl): number => { - const firstVal = firstEl.value - const secondVal = secondEl.value - if (firstVal === secondVal) { - return 0 - } - if (firstVal === "nan") { - return -1 - } else if (secondVal === "nan") { - return 1 - } - if (firstVal === "-inf" || secondVal === "inf") { - return 1 - } else if (secondVal === "-inf" || firstVal === "inf") { - return -1 - } - return firstVal < secondVal ? 1 : -1 - }, - }, - ] - const collapseAttrColumns: DataGridColumn[] = [ - { field: "key", label: "Key", sortable: true }, - { field: "value", label: "Value", sortable: true }, - ] - - const collapseBody = (index: number) => { - const objectiveFormRefs = studyDetail?.directions.map((d) => - createRef() - ) - const handleSubmit = (e: FormEvent): void => { - if (objectiveFormRefs === undefined) { - return - } - if (studyDetail === null) { - return - } - - e.preventDefault() - const studyId = studyDetail.id - const trialId = trials[index].trial_id - const objectiveValues = objectiveFormRefs.map((ref) => - ref.current ? Number(ref.current.value) : NaN - ) - if (objectiveValues.includes(NaN)) { - return - } - - action.makeTrialComplete(studyId, trialId, objectiveValues) - } - - const handleFailTrial = (e: MouseEvent): void => { - if (studyDetail === null) { - return - } - const studyId = studyDetail.id - const trialId = trials[index].trial_id - action.makeTrialFail(studyId, trialId) - } - - return ( - - - - - Intermediate values - - - columns={collapseIntermediateValueColumns} - rows={trials[index].intermediate_values} - keyField={"step"} - dense={true} - rowsPerPageOption={[5, 10, { label: "All", value: -1 }]} - /> - - - - - - Trial system attributes - - - columns={collapseAttrColumns} - rows={trials[index].system_attrs} - keyField={"key"} - dense={true} - rowsPerPageOption={[5, 10, { label: "All", value: -1 }]} - /> - - - {trials[index].state === "Running" ? ( - - - - Trial tell - -
- - - {objectiveFormRefs !== undefined && - objectiveFormRefs.map((ref, i) => ( - - ))} - - - - - - - - -
- - - ) : null} - - ) - } + columns.push({ + field: "trial_id", + label: "Detail", + toCellValue: (i) => ( + + + + ), + }) return ( @@ -396,7 +191,6 @@ export const TrialTable: FC<{ rows={trials} keyField={"trial_id"} dense={true} - collapseBody={isBeta ? undefined : collapseBody} initialRowsPerPage={initialRowsPerPage} /> ) diff --git a/typescript_tests/TrialTable.test.tsx b/typescript_tests/TrialTable.test.tsx deleted file mode 100644 index 81e1178a..00000000 --- a/typescript_tests/TrialTable.test.tsx +++ /dev/null @@ -1,222 +0,0 @@ -import React from "react" -global.URL.createObjectURL = jest.fn() - -import { SnackbarProvider } from "notistack" -import { RecoilRoot } from "recoil" -import { cleanup, render, within, fireEvent } from "@testing-library/react" -import { TrialTable } from "../optuna_dashboard/ts/components/TrialTable" - -afterEach(cleanup) - -const dummyDistribution: FloatDistribution = { - type: "FloatDistribution", - low: 0, - high: 10, - step: 1, - log: false, -} -const trials: Trial[] = [ - { - trial_id: 1, - study_id: 0, - number: 0, - state: "Complete" as TrialState, - values: [-1], - intermediate_values: [], - datetime_start: new Date("2021-06-15T00:00:00"), - datetime_complete: new Date("2021-06-15T00:00:01"), - params: [ - { - name: "x", - param_internal_value: 1, - param_external_value: "1", - param_external_type: "float", - distribution: dummyDistribution, - }, - { - name: "y", - param_internal_value: 2, - param_external_value: "2", - param_external_type: "float", - distribution: dummyDistribution, - }, - ], - fixed_params: [], - user_attrs: [], - system_attrs: [], - note: { - body: "", - version: 0, - }, - artifacts: [], - }, - { - trial_id: 2, - study_id: 0, - number: 1, - state: "Fail" as TrialState, - values: [-2], - intermediate_values: [], - datetime_start: new Date("2021-06-15T00:00:01"), - datetime_complete: new Date("2021-06-15T00:00:03"), - params: [ - { - name: "x", - param_internal_value: 1, - param_external_value: "1", - param_external_type: "float", - distribution: dummyDistribution, - }, - { - name: "y", - param_internal_value: 2, - param_external_value: "2", - param_external_type: "float", - distribution: dummyDistribution, - }, - ], - fixed_params: [], - user_attrs: [], - system_attrs: [], - note: { - body: "", - version: 0, - }, - artifacts: [], - }, -] - -const study_direction: StudyDirection = "minimize" as StudyDirection - -const studyDetail: StudyDetail = { - id: 1, - name: "study_0", - directions: [study_direction], - datetime_start: new Date("2021-06-15T00:00:00"), - best_trials: [trials[1]], - trials: trials, - intersection_search_space: [ - { - name: "x", - distribution: dummyDistribution, - }, - { - name: "y", - distribution: dummyDistribution, - }, - ], - union_search_space: [ - { - name: "x", - distribution: dummyDistribution, - }, - { - name: "y", - distribution: dummyDistribution, - }, - ], - union_user_attrs: [ - { key: "foo", sortable: false }, - { key: "bar", sortable: false }, - ], - has_intermediate_values: false, - note: { - version: 0, - body: "", - }, -} - -it("Sort TrialTable by trial number", () => { - const { getAllByRole, getByText } = render( - - - - - - ) - const rows = getAllByRole("row") - - expect(within(rows[1]).getByText("0")).toBeTruthy() - expect(within(rows[3]).getAllByText("1")[0]).toBeTruthy() - - fireEvent.click(getByText("Number")) - - const rows_updated = getAllByRole("row") - expect(within(rows_updated[1]).getAllByText("1")[0]).toBeTruthy() - expect(within(rows_updated[3]).getByText("0")).toBeTruthy() -}) - -it("Sort TrialTable by value", () => { - const { getAllByRole, getByText } = render( - - - - - - ) - fireEvent.click(getByText("Value")) - const rows = getAllByRole("row") - expect(within(rows[1]).getByText("-2")).toBeTruthy() - expect(within(rows[3]).getByText("-1")).toBeTruthy() - - fireEvent.click(getByText("Value")) - const rows_updated = getAllByRole("row") - expect(within(rows_updated[1]).getByText("-1")).toBeTruthy() - expect(within(rows_updated[3]).getByText("-2")).toBeTruthy() -}) - -it("Sort TrialTable by duration", () => { - const { getAllByRole, getByText } = render( - - - - - - ) - fireEvent.click(getByText("Duration(ms)")) - const rows = getAllByRole("row") - expect(within(rows[1]).getByText("1000")).toBeTruthy() - expect(within(rows[3]).getByText("2000")).toBeTruthy() - - fireEvent.click(getByText("Duration(ms)")) - const rows_updated = getAllByRole("row") - expect(within(rows_updated[1]).getByText("2000")).toBeTruthy() - expect(within(rows_updated[3]).getByText("1000")).toBeTruthy() -}) - -it("Sort TrialTable by state", () => { - const { getAllByRole, getByText } = render( - - - - - - ) - fireEvent.click(getByText("State")) - const rows = getAllByRole("row") - expect(within(rows[1]).getByText("Complete")).toBeTruthy() - expect(within(rows[3]).getByText("Fail")).toBeTruthy() - - fireEvent.click(getByText("State")) - const rows_updated = getAllByRole("row") - expect(within(rows_updated[1]).getByText("Fail")).toBeTruthy() - expect(within(rows_updated[3]).getByText("Complete")).toBeTruthy() -}) - -it("Filter trials by state", () => { - const { queryAllByText } = render( - - - - - - ) - expect(queryAllByText("Fail").length).toBe(1) - - // Click 'Complete' state - const completedRows = queryAllByText("Complete") - expect(completedRows.length).toBe(1) - fireEvent.click(completedRows[0]) - - expect(queryAllByText("Fail").length).toBe(0) -})