Skip to content

Commit 15839f0

Browse files
JavierGOrdonnezJavierGOrdonnez
authored
Merge pull request #245 from ITISFoundation/349-add-title-to-moga-pareto-table
349 add title to moga pareto table
2 parents 61fb15f + 39c729f commit 15839f0

File tree

4 files changed

+74
-67
lines changed

4 files changed

+74
-67
lines changed

‎node/src/components/navigation/Header.tsx‎

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { HelpOutline, InfoOutline } from "@mui/icons-material";
2-
import { Box, Typography, styled } from "@mui/material";
2+
import { Box, Typography, styled, useTheme } from "@mui/material";
33
import CustomTooltip from "../utils/CustomTooltip";
44

55
const HeaderContainer = styled("div", {
@@ -44,6 +44,7 @@ const types: { [key in HeaderTypes]: TypographyVariant } = {
4444

4545
function Header(props: HeaderProps) {
4646
const { tabTitle, infoText, ExtendedInfoText, headerType, helpContents, fontWeight } = props;
47+
const theme = useTheme();
4748
return (
4849
<HeaderContainer headerType={headerType}>
4950
<Box flex={1} display="flex" alignItems="center">
@@ -58,29 +59,29 @@ function Header(props: HeaderProps) {
5859
{infoText && infoText.length > 0 && (
5960
<CustomTooltip title={infoText} ExtendedTootlip={ExtendedInfoText} placement="right" arrow>
6061
<InfoOutline
61-
sx={theme => ({
62+
sx={{
6263
color: theme.palette.primary.light,
6364
backgroundColor: theme.palette.background.default,
6465
borderRadius: "50%",
6566
padding: "2px",
6667
marginLeft: "8px",
6768
marginBottom: "2px",
6869
fontSize: "24px",
69-
})}
70+
}}
7071
/>
7172
</CustomTooltip>
7273
)}
7374
</Box>
7475
{helpContents && (
7576
<CustomTooltip title={helpContents} placement="right" arrow>
7677
<HelpOutline
77-
sx={theme => ({
78+
sx={{
7879
color: theme.palette.primary.light,
7980
backgroundColor: theme.palette.background.default,
8081
borderRadius: "50%",
8182
padding: "2px",
8283
fontSize: "32px",
83-
})}
84+
}}
8485
/>
8586
</CustomTooltip>
8687
)}

‎node/src/components/plots/MOGAParetoTable.tsx‎

Lines changed: 59 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import { useEffect, useState } from "react";
22
import { Typography, Button, Box, Chip, Popover, Slider } from "@mui/material";
33
import { DataGrid, GridColDef, GridSortModel } from "@mui/x-data-grid";
44
import { useMMUXContext } from "../../context/MMUXContext";
5+
import Header from "../navigation/Header";
56

67
interface MogaParetoTableProps {
78
tableData: MogaDataType | undefined;
@@ -185,64 +186,67 @@ function MogaParetoTable({ tableData, hovered, setHovered }: MogaParetoTableProp
185186
]);
186187

187188
return (
188-
<DataGrid
189-
rows={data?.rows || []}
190-
columns={columns}
191-
sx={theme => ({
192-
borderRadius: theme.spacing(2),
193-
overflow: "hidden",
194-
fontFamily: "inherit",
195-
padding: "0px 8px",
196-
"& .MuiDataGrid-cell": {
197-
fontWeight: 400,
198-
},
199-
"& .MuiDataGrid-row:hover": {
200-
backgroundColor: `color-mix(in srgb, ${theme.palette.primary.main} 50%, ${theme.palette.mode === "dark" ? "black" : "white"}`,
201-
},
202-
"& .MuiDataGrid-row.Mui-selected": {
203-
backgroundColor: `color-mix(in srgb, ${theme.palette.primary.main} 70%, ${theme.palette.mode === "dark" ? "black" : "white"}`,
204-
},
205-
"& .MuiDataGrid-row.Mui-selected:hover": {
206-
backgroundColor: `color-mix(in srgb, ${theme.palette.primary.main} 50%, ${theme.palette.mode === "dark" ? "black" : "white"}`,
207-
},
208-
"& .MuiDataGrid-sortButton": {
209-
backgroundColor: theme.palette.background.paper,
210-
},
211-
})}
212-
getRowId={getRowId}
213-
initialState={{
214-
pagination: {
215-
paginationModel: { pageSize: 10 },
216-
},
217-
filter: {
218-
filterModel: {
219-
items: [],
189+
<>
190+
<Header tabTitle="Pareto-Optimal MOGA Samples" headerType="subTitle" infoText="Explore the pareto-optimal solutions" />
191+
<DataGrid
192+
rows={data?.rows || []}
193+
columns={columns}
194+
sx={theme => ({
195+
borderRadius: theme.spacing(2),
196+
overflow: "hidden",
197+
fontFamily: "inherit",
198+
padding: "0px 8px",
199+
"& .MuiDataGrid-cell": {
200+
fontWeight: 400,
220201
},
221-
},
222-
}}
223-
pageSizeOptions={[5, 10, 20, 50]}
224-
loading={loading}
225-
slotProps={{
226-
loadingOverlay: {
227-
variant: "linear-progress",
228-
noRowsVariant: "linear-progress",
229-
},
230-
row: {
231-
onMouseEnter: (event: React.MouseEvent<HTMLElement>) => {
232-
const rowData = event.currentTarget!.dataset;
233-
setHovered(Number(rowData.id));
202+
"& .MuiDataGrid-row:hover": {
203+
backgroundColor: `color-mix(in srgb, ${theme.palette.primary.main} 50%, ${theme.palette.mode === "dark" ? "black" : "white"}`,
234204
},
235-
onMouseLeave: () => {
236-
setHovered(null);
205+
"& .MuiDataGrid-row.Mui-selected": {
206+
backgroundColor: `color-mix(in srgb, ${theme.palette.primary.main} 70%, ${theme.palette.mode === "dark" ? "black" : "white"}`,
237207
},
238-
},
239-
}}
240-
sortModel={localSortModel}
241-
onSortModelChange={handleSortModelChange}
242-
disableColumnMenu
243-
disableColumnSelector
244-
disableRowSelectionOnClick
245-
/>
208+
"& .MuiDataGrid-row.Mui-selected:hover": {
209+
backgroundColor: `color-mix(in srgb, ${theme.palette.primary.main} 50%, ${theme.palette.mode === "dark" ? "black" : "white"}`,
210+
},
211+
"& .MuiDataGrid-sortButton": {
212+
backgroundColor: theme.palette.background.paper,
213+
},
214+
})}
215+
getRowId={getRowId}
216+
initialState={{
217+
pagination: {
218+
paginationModel: { pageSize: 10 },
219+
},
220+
filter: {
221+
filterModel: {
222+
items: [],
223+
},
224+
},
225+
}}
226+
pageSizeOptions={[5, 10, 20, 50]}
227+
loading={loading}
228+
slotProps={{
229+
loadingOverlay: {
230+
variant: "linear-progress",
231+
noRowsVariant: "linear-progress",
232+
},
233+
row: {
234+
onMouseEnter: (event: React.MouseEvent<HTMLElement>) => {
235+
const rowData = event.currentTarget!.dataset;
236+
setHovered(Number(rowData.id));
237+
},
238+
onMouseLeave: () => {
239+
setHovered(null);
240+
},
241+
},
242+
}}
243+
sortModel={localSortModel}
244+
onSortModelChange={handleSortModelChange}
245+
disableColumnMenu
246+
disableColumnSelector
247+
disableRowSelectionOnClick
248+
/>
249+
</>
246250
);
247251
}
248252

‎node/src/components/sampling/JobSampling.tsx‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { InfoOutline } from "@mui/icons-material";
2-
import { Accordion, Button, AccordionDetails } from "@mui/material";
2+
import { Accordion, Button, AccordionDetails, useTheme } from "@mui/material";
33
import React, { useState } from "react";
44
import CustomTooltip from "../utils/CustomTooltip";
55
import AdaptExtedSamplingDocument from "../documents/AdaptExtendSamplingDocument";
@@ -23,6 +23,7 @@ interface JobSamplingProps {
2323
export function JobSampling(props: JobSamplingProps) {
2424
const { loading, setLoading, progress, setProgress, jobProgress, setJobProgress, colsFetched, jobsFetched, selectedFunction } =
2525
props;
26+
const theme = useTheme();
2627
const [jobPanelOpen, setJobPanelOpen] = useState<boolean>(false);
2728

2829
return (
@@ -51,13 +52,13 @@ export function JobSampling(props: JobSamplingProps) {
5152
arrow
5253
>
5354
<InfoOutline
54-
sx={theme => ({
55+
sx={{
5556
color: loading ? theme.palette.grey[400] : theme.palette.primary.light,
5657
backgroundColor: loading ? theme.palette.grey[200] : theme.palette.background.default,
5758
borderRadius: "50%",
5859
padding: "2px",
5960
marginLeft: "8px",
60-
})}
61+
}}
6162
/>
6263
</CustomTooltip>
6364
</Button>

‎node/src/components/sampling/RunSamplingButton.tsx‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Button, CircularProgress } from "@mui/material";
1+
import { Button, CircularProgress, useTheme } from "@mui/material";
22
import { toast } from "react-toastify";
33
import { useServiceContext } from "../../context/ServiceContext";
44
import CustomTooltip from "../utils/CustomTooltip";
@@ -18,8 +18,9 @@ const tooltipMessage = {
1818
};
1919

2020
export function RunSamplingButton(props: RunSamplingButtonProps) {
21-
const { permissions } = useServiceContext();
2221
const { handleRunSampling, disabled } = props;
22+
const theme = useTheme();
23+
const { permissions } = useServiceContext();
2324
const { launchingSampling, setLaunchingSampling, setRunningSampling } = useSamplingContext();
2425
const simplifiedHost = getSimplifiedHost();
2526

@@ -52,12 +53,12 @@ export function RunSamplingButton(props: RunSamplingButtonProps) {
5253
variant="contained"
5354
onClick={handleRunSamplingWithErrorHandling}
5455
disabled={launchingSampling || disabled || permissions !== "WRITE"}
55-
sx={theme => ({
56+
sx={{
5657
"&:disabled": {
5758
backgroundColor: launchingSampling ? theme.palette.grey[100] : undefined,
5859
color: launchingSampling ? theme.palette.primary.contrastText : undefined,
5960
},
60-
})}
61+
}}
6162
>
6263
{launchingSampling ? (
6364
<>

0 commit comments

Comments
 (0)