wassname/optuna-dashboard
1
0
Fork 0
mirror of https://github.com/wassname/optuna-dashboard.git synced 2026-09-11 12:30:25 +08:00
Code Issues Packages Projects Releases Wiki Activity

Update DataGrid & TrialTable

Browse Source
This commit is contained in:
porink0424
2024-03-22 11:02:09 +09:00
parent ffc096263a
commit d477e3b5df
3 changed files with 41 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files
tslib/src/components/DataGrid.tsx
+20 -10
View File
@@ -15,8 +15,7 @@ import {
useTheme,
} from "@mui/material";
import { styled } from "@mui/system";
import { Fragment, useState } from "react";
import { DataGridColumn } from "./DataGridColumn";
import React from "react";
type Order = "asc" | "desc";
@@ -25,6 +24,16 @@ type Value = any;
const defaultRowsPerPageOption = [10, 50, 100, { label: "All", value: -1 }];
interface DataGridColumn<T> {
field: keyof T;
label: string;
sortable?: boolean;
less?: (a: T, b: T, ascending: boolean) => number;
filterable?: boolean;
toCellValue?: (rowIndex: number) => string | React.ReactNode;
padding?: "normal" | "checkbox" | "none";
}
interface RowFilter {
columnIdx: number;
value: Value;
@@ -42,10 +51,10 @@ function DataGrid<T>(props: {
}): React.ReactElement {
const { columns, rows, keyField, dense, collapseBody, defaultFilter } = props;
let { initialRowsPerPage, rowsPerPageOption } = props;
const [order, setOrder] = useState<Order>("asc");
const [orderBy, setOrderBy] = useState<number>(0); // index of columns
const [page, setPage] = useState(0);
const [filters, setFilters] = useState<RowFilter[]>([]);
const [order, setOrder] = React.useState<Order>("asc");
const [orderBy, setOrderBy] = React.useState<number>(0); // index of columns
const [page, setPage] = React.useState(0);
const [filters, setFilters] = React.useState<RowFilter[]>([]);
const getRowIndex = (row: T): number => {
return rows.findIndex((row2) => row[keyField] === row2[keyField]);
@@ -58,7 +67,7 @@ function DataGrid<T>(props: {
: isNumber(rowsPerPageOption[0])
? rowsPerPageOption[0]
: rowsPerPageOption[0].value;
const [rowsPerPage, setRowsPerPage] = useState(initialRowsPerPage);
const [rowsPerPage, setRowsPerPage] = React.useState(initialRowsPerPage);
const handleChangePage = (_event: unknown, newPage: number) => {
setPage(newPage);
@@ -247,7 +256,7 @@ function DataGridRow<T>(props: {
collapseBody,
handleClickFilterCell,
} = props;
const [open, setOpen] = useState(false);
const [open, setOpen] = React.useState(false);
const theme = useTheme();
const FilterableDiv = styled("div")({
@@ -256,7 +265,7 @@ function DataGridRow<T>(props: {
cursor: "pointer",
});
return (
<Fragment>
<React.Fragment>
<TableRow hover tabIndex={-1}>
{collapseBody ? (
<TableCell>
@@ -308,7 +317,7 @@ function DataGridRow<T>(props: {
</TableCell>
</TableRow>
) : null}
</Fragment>
</React.Fragment>
);
}
@@ -371,3 +380,4 @@ const isNumber = (
};
export { DataGrid };
export type { DataGridColumn };
tslib/src/components/DataGridColumn.ts
-9
View File
@@ -1,9 +0,0 @@
export interface DataGridColumn<T> {
field: keyof T;
label: string;
sortable?: boolean;
less?: (a: T, b: T, ascending: boolean) => number;
filterable?: boolean;
toCellValue?: (rowIndex: number) => string | React.ReactNode;
padding?: "normal" | "checkbox" | "none";
}
tslib/src/components/TrialTable.tsx
+21 -30
View File
@@ -1,7 +1,6 @@
import { FC } from "react";
import { DataGrid } from "./DataGrid";
import { DataGridColumn } from "./DataGridColumn";
import { DataGrid, DataGridColumn } from "./DataGrid";
export const TrialTable: FC<{
study: Study;
@@ -35,13 +34,9 @@ export const TrialTable: FC<{
}
if (firstVal === undefined) {
return ascending ? -1 : 1;
} else if (secondVal === undefined) {
return ascending ? 1 : -1;
}
if (firstVal === "-inf" || secondVal === "inf") {
return 1;
} else if (secondVal === "-inf" || firstVal === "inf") {
return -1;
if (secondVal === undefined) {
return ascending ? 1 : -1;
}
return firstVal < secondVal ? 1 : -1;
},
@@ -67,13 +62,9 @@ export const TrialTable: FC<{
}
if (firstVal === undefined) {
return ascending ? -1 : 1;
} else if (secondVal === undefined) {
return ascending ? 1 : -1;
}
if (firstVal === "-inf" || secondVal === "inf") {
return 1;
} else if (secondVal === "-inf" || firstVal === "inf") {
return -1;
if (secondVal === undefined) {
return ascending ? 1 : -1;
}
return firstVal < secondVal ? 1 : -1;
},
@@ -97,8 +88,7 @@ export const TrialTable: FC<{
null,
sortable: true,
filterable: false,
// eslint-disable-next-line @typescript-eslint/no-unused-vars
less: (firstEl, secondEl, _): number => {
less: (firstEl, secondEl): number => {
const firstVal = firstEl.params.find(
(p) => p.name === s.name,
)?.param_internal_value;
@@ -108,13 +98,14 @@ export const TrialTable: FC<{
if (firstVal === secondVal) {
return 0;
} else if (firstVal && secondVal) {
return firstVal < secondVal ? 1 : -1;
} else if (firstVal) {
return -1;
} else {
return 1;
}
if (firstVal && secondVal) {
return firstVal < secondVal ? 1 : -1;
}
if (firstVal) {
return -1;
}
return 1;
},
});
});
@@ -128,8 +119,7 @@ export const TrialTable: FC<{
?.value || null,
sortable: attr_spec.sortable,
filterable: false,
// eslint-disable-next-line @typescript-eslint/no-unused-vars
less: (firstEl, secondEl, _): number => {
less: (firstEl, secondEl): number => {
const firstVal = firstEl.user_attrs.find(
(attr) => attr.key === attr_spec.key,
)?.value;
@@ -139,13 +129,14 @@ export const TrialTable: FC<{
if (firstVal === secondVal) {
return 0;
} else if (firstVal && secondVal) {
return firstVal < secondVal ? 1 : -1;
} else if (firstVal) {
return -1;
} else {
return 1;
}
if (firstVal && secondVal) {
return firstVal < secondVal ? 1 : -1;
}
if (firstVal) {
return -1;
}
return 1;
},
});
});