Skip to content

Commit 348bbae

Browse files
appukuttan-shaileshappukuttan-shailesh
committed
update compare multi table appearance
1 parent d25d083 commit 348bbae

1 file changed

Lines changed: 51 additions & 28 deletions

File tree

‎apps/validation_framework_v2/src/CompareMultiResults.js‎

Lines changed: 51 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -45,6 +45,21 @@ import ResultDetail from "./ResultDetail";
4545
import ResultGraphs from "./ResultGraphs";
4646
import Theme from "./theme";
4747
import { formatTimeStampToCompact, roundFloat } from "./utils";
48+
import styled from "styled-components";
49+
50+
const StyledTableRow = styled(TableRow)(({ theme }) => ({
51+
'&:nth-of-type(odd)': {
52+
backgroundColor: "white",
53+
borderBottom: "1px solid #DDDDDD"
54+
},
55+
'&:nth-of-type(even)': {
56+
backgroundColor: "#F3F3F3",
57+
},
58+
'&:last-of-type': {
59+
borderBottom: "2px solid",
60+
borderColor: Theme.darkBackground
61+
},
62+
}));
4863

4964
const styles = (theme) => ({
5065
root: {
@@ -243,7 +258,7 @@ class ResultEntryModel extends React.Component {
243258
<React.Fragment>
244259
{Object.keys(result_model.model_instances).map(
245260
(model_inst_id, index_tt) => (
246-
<TableRow key={model_inst_id}>
261+
<StyledTableRow key={model_inst_id}>
247262
{index_tt === 0 ? (
248263
<TableCell
249264
align="right"
@@ -343,7 +358,7 @@ class ResultEntryModel extends React.Component {
343358
});
344359
})
345360
}
346-
</TableRow>
361+
</StyledTableRow>
347362
)
348363
)}
349364
</React.Fragment>
@@ -366,7 +381,7 @@ class ResultEntryTest extends React.Component {
366381
<React.Fragment>
367382
{Object.keys(result_test.test_instances).map(
368383
(test_inst_id, index_tt) => (
369-
<TableRow key={test_inst_id}>
384+
<StyledTableRow key={test_inst_id}>
370385
{index_tt === 0 ? (
371386
<TableCell
372387
align="right"
@@ -464,7 +479,7 @@ class ResultEntryTest extends React.Component {
464479
});
465480
})
466481
}
467-
</TableRow>
482+
</StyledTableRow>
468483
)
469484
)}
470485
</React.Fragment>
@@ -1485,18 +1500,20 @@ class CompareMultiResults extends React.Component {
14851500
style={{
14861501
width: "auto",
14871502
tableLayout: "auto",
1488-
border: 2,
1489-
borderColor: "lightgrey",
1490-
borderStyle: "solid",
1503+
borderStyle: "none",
1504+
borderRadius: "20px 20px 0 0",
1505+
overflow: "hidden",
1506+
marginTop: "10px"
14911507
}}
14921508
>
14931509
<TableHead>
1494-
<TableRow>
1510+
<StyledTableRow>
14951511
<TableCell
14961512
align="center"
14971513
colSpan={2}
14981514
rowSpan={2}
14991515
bgcolor={Theme.darkBackground}
1516+
style={{ color: Theme.lightText, fontSize: "18px" }}
15001517
>
15011518
Model \ Validation Test
15021519
</TableCell>
@@ -1509,6 +1526,7 @@ class CompareMultiResults extends React.Component {
15091526
}
15101527
key={test.test_id}
15111528
bgcolor={Theme.darkBackground}
1529+
style={{ color: Theme.lightText, fontSize: "18px" }}
15121530
>
15131531
<Tooltip
15141532
title="Test"
@@ -1521,8 +1539,8 @@ class CompareMultiResults extends React.Component {
15211539
</Tooltip>
15221540
</TableCell>
15231541
))}
1524-
</TableRow>
1525-
<TableRow>
1542+
</StyledTableRow>
1543+
<StyledTableRow>
15261544
{list_tests.map((test, index) =>
15271545
dict_test_versions[test.test_id].map(
15281546
(test_inst, index) => (
@@ -1531,6 +1549,7 @@ class CompareMultiResults extends React.Component {
15311549
colSpan={3}
15321550
key={test_inst.test_inst_id}
15331551
bgcolor={Theme.tableHeader}
1552+
style={{ color: Theme.darkText, fontSize: "16px" }}
15341553
>
15351554
<Tooltip
15361555
title="Test Version"
@@ -1546,19 +1565,19 @@ class CompareMultiResults extends React.Component {
15461565
)
15471566
)
15481567
)}
1549-
</TableRow>
1550-
<TableRow>
1568+
</StyledTableRow>
1569+
<StyledTableRow>
15511570
<TableCell
15521571
align="center"
15531572
bgcolor={Theme.tableHeader}
1554-
style={{ width: 200, maxWidth: 200 }}
1573+
style={{ width: 200, maxWidth: 200, color: Theme.darkText, fontSize: "16px" }}
15551574
>
15561575
Model Name
15571576
</TableCell>
15581577
<TableCell
15591578
align="center"
15601579
bgcolor={Theme.tableHeader}
1561-
style={{ width: 200, maxWidth: 200 }}
1580+
style={{ width: 200, maxWidth: 200, color: Theme.darkText, fontSize: "16px" }}
15621581
>
15631582
Model Version
15641583
</TableCell>
@@ -1604,7 +1623,7 @@ class CompareMultiResults extends React.Component {
16041623
)
16051624
)
16061625
)}
1607-
</TableRow>
1626+
</StyledTableRow>
16081627
</TableHead>
16091628
<TableBody>
16101629
{Object.keys(dict_results).map(
@@ -1646,18 +1665,20 @@ class CompareMultiResults extends React.Component {
16461665
style={{
16471666
width: "auto",
16481667
tableLayout: "auto",
1649-
border: 2,
1650-
borderColor: "lightgrey",
1651-
borderStyle: "solid",
1668+
borderStyle: "none",
1669+
borderRadius: "20px 20px 0 0",
1670+
overflow: "hidden",
1671+
marginTop: "10px"
16521672
}}
16531673
>
16541674
<TableHead>
1655-
<TableRow>
1675+
<StyledTableRow>
16561676
<TableCell
16571677
align="center"
16581678
colSpan={2}
16591679
rowSpan={2}
16601680
bgcolor={Theme.darkBackground}
1681+
style={{ color: Theme.lightText, fontSize: "18px" }}
16611682
>
16621683
Validation Test \ Model
16631684
</TableCell>
@@ -1671,6 +1692,7 @@ class CompareMultiResults extends React.Component {
16711692
}
16721693
key={model.model_id}
16731694
bgcolor={Theme.darkBackground}
1695+
style={{ color: Theme.lightText, fontSize: "18px" }}
16741696
>
16751697
<Tooltip
16761698
title="Model"
@@ -1683,8 +1705,8 @@ class CompareMultiResults extends React.Component {
16831705
</Tooltip>
16841706
</TableCell>
16851707
))}
1686-
</TableRow>
1687-
<TableRow>
1708+
</StyledTableRow>
1709+
<StyledTableRow>
16881710
{list_models.map((model, index) =>
16891711
dict_model_versions[model.model_id].map(
16901712
(model_inst, index) => (
@@ -1695,6 +1717,7 @@ class CompareMultiResults extends React.Component {
16951717
model_inst.model_inst_id
16961718
}
16971719
bgcolor={Theme.tableHeader}
1720+
style={{ color: Theme.darkText, fontSize: "16px" }}
16981721
>
16991722
<Tooltip
17001723
title="Model Version"
@@ -1710,19 +1733,19 @@ class CompareMultiResults extends React.Component {
17101733
)
17111734
)
17121735
)}
1713-
</TableRow>
1714-
<TableRow>
1736+
</StyledTableRow>
1737+
<StyledTableRow>
17151738
<TableCell
17161739
align="center"
17171740
bgcolor={Theme.tableHeader}
1718-
style={{ width: 200, maxWidth: 200 }}
1741+
style={{ width: 200, maxWidth: 200, color: Theme.darkText, fontSize: "16px" }}
17191742
>
17201743
Test Name
17211744
</TableCell>
17221745
<TableCell
17231746
align="center"
17241747
bgcolor={Theme.tableHeader}
1725-
style={{ width: 200, maxWidth: 200 }}
1748+
style={{ width: 200, maxWidth: 200, color: Theme.darkText, fontSize: "16px" }}
17261749
>
17271750
Test Version
17281751
</TableCell>
@@ -1768,7 +1791,7 @@ class CompareMultiResults extends React.Component {
17681791
)
17691792
)
17701793
)}
1771-
</TableRow>
1794+
</StyledTableRow>
17721795
</TableHead>
17731796
<TableBody>
17741797
{Object.keys(dict_results).map(
@@ -2194,7 +2217,7 @@ class CompareMultiResults extends React.Component {
21942217
xs={5}
21952218
style={{
21962219
backgroundColor:
2197-
Theme.tableRowHoverColor,
2220+
Theme.StyledTableRowHoverColor,
21982221
}}
21992222
>
22002223
<Typography variant="h6">
@@ -2386,7 +2409,7 @@ class CompareMultiResults extends React.Component {
23862409
xs={5}
23872410
style={{
23882411
backgroundColor:
2389-
Theme.tableRowHoverColor,
2412+
Theme.StyledTableRowHoverColor,
23902413
}}
23912414
>
23922415
<Typography variant="h6">

0 commit comments

Comments
 (0)