From f2c28fd44495e7b6745116aaefc9076fe0e37ac0 Mon Sep 17 00:00:00 2001 From: David Butenhof Date: Thu, 7 Nov 2024 14:22:59 -0500 Subject: [PATCH] Add metadata flyover on comparison page Extract the "Metadata" into a separate component, which allows it to be reused as an info flyover on the comparison page to help in identifying target runs to be compared. --- .../templates/ILab/ILabMetadata.jsx | 125 ++++++++++++++++++ .../templates/ILab/IlabCompareComponent.jsx | 26 +++- .../templates/ILab/IlabExpandedRow.jsx | 75 +---------- .../src/components/templates/ILab/MetaRow.jsx | 6 +- .../src/components/templates/ILab/index.less | 13 +- 5 files changed, 161 insertions(+), 84 deletions(-) create mode 100644 frontend/src/components/templates/ILab/ILabMetadata.jsx diff --git a/frontend/src/components/templates/ILab/ILabMetadata.jsx b/frontend/src/components/templates/ILab/ILabMetadata.jsx new file mode 100644 index 00000000..7356b3ed --- /dev/null +++ b/frontend/src/components/templates/ILab/ILabMetadata.jsx @@ -0,0 +1,125 @@ +import PropType from "prop-types"; +import { uid } from "@/utils/helper"; +import MetaRow from "./MetaRow"; +import { + Accordion, + AccordionContent, + AccordionItem, + AccordionToggle, + Split, + SplitItem, +} from "@patternfly/react-core"; +import { Table, Tbody, Th, Thead, Tr, Td } from "@patternfly/react-table"; +import { setMetaRowExpanded } from "@/actions/ilabActions"; +import { useDispatch, useSelector } from "react-redux"; + +const ILabMetadata = (props) => { + const { item } = props; + const { metaRowExpanded } = useSelector((state) => state.ilab); + const dispatch = useDispatch(); + + const onToggle = (id) => { + const index = metaRowExpanded.indexOf(id); + const newExpanded = + index >= 0 + ? [ + ...metaRowExpanded.slice(0, index), + ...metaRowExpanded.slice(index + 1, metaRowExpanded.length), + ] + : [...metaRowExpanded, id]; + + dispatch(setMetaRowExpanded(newExpanded)); + }; + + return ( + + + + + + + + + + {item.iterations.length > 1 && ( + + + { + onToggle(`iterations-toggle-${item.id}`); + }} + isExpanded={metaRowExpanded.includes( + `iterations-toggle-${item.id}` + )} + id={`iterations-toggle-${item.id}`} + > + {`Unique parameters for ${item.iterations.length} Iterations`} + + + + + + + + + + + + {item.iterations.map((i) => + Object.entries(i.params) + .filter((p) => !(p[0] in item.params)) + .map((p) => ( + + + + + + )) + )} + +
IterationParameterValue
{i.iteration}{p[0]}{p[1]}
+ + + + )} + + + ); +}; + +ILabMetadata.propTypes = { + item: PropType.object, +}; +export default ILabMetadata; diff --git a/frontend/src/components/templates/ILab/IlabCompareComponent.jsx b/frontend/src/components/templates/ILab/IlabCompareComponent.jsx index b2c5eb8f..19b8364f 100644 --- a/frontend/src/components/templates/ILab/IlabCompareComponent.jsx +++ b/frontend/src/components/templates/ILab/IlabCompareComponent.jsx @@ -5,8 +5,8 @@ import { Menu, MenuContent, MenuItem, - MenuItemAction, MenuList, + Popover, Stack, StackItem, Title, @@ -22,6 +22,7 @@ import { handleMultiGraph, handleSummaryData } from "@/actions/ilabActions.js"; import { uid } from "@/utils/helper"; import { useState } from "react"; import ILabSummary from "./ILabSummary"; +import ILabMetadata from "./ILabMetadata"; const IlabCompareComponent = () => { const { page, perPage, totalItems, tableData } = useSelector( @@ -72,12 +73,23 @@ const IlabCompareComponent = () => { itemId={item.id} isSelected={selectedItems.includes(item.id)} actions={ - } - actionId="code" - onClick={() => console.log("clicked on code icon")} - aria-label="Code" - /> + Metadata} + appendTo={() => document.body} + // hasAutoWidth + hasNoPadding + position="auto" + className="mini-metadata" + bodyContent={ +
+ +
+ } + > + + } > {`${new Date(item.begin_date).toLocaleDateString()} ${ diff --git a/frontend/src/components/templates/ILab/IlabExpandedRow.jsx b/frontend/src/components/templates/ILab/IlabExpandedRow.jsx index 495a88d7..06078fe5 100644 --- a/frontend/src/components/templates/ILab/IlabExpandedRow.jsx +++ b/frontend/src/components/templates/ILab/IlabExpandedRow.jsx @@ -3,20 +3,17 @@ import { AccordionContent, AccordionItem, AccordionToggle, - Card, - CardBody, Stack, StackItem, } from "@patternfly/react-core"; import { useDispatch, useSelector } from "react-redux"; import ILabGraph from "./ILabGraph"; -import MetaRow from "./MetaRow"; -import MetricsSelect from "./MetricsDropdown"; import ILabSummary from "./ILabSummary"; +import MetricsSelect from "./MetricsDropdown"; import PropTypes from "prop-types"; import { setMetaRowExpanded } from "@/actions/ilabActions"; -import { uid } from "@/utils/helper"; +import ILabMetadata from "./ILabMetadata"; const IlabRowContent = (props) => { const { item } = props; @@ -52,73 +49,7 @@ const IlabRowContent = (props) => { id={`metadata-${item.id}`} isHidden={!metaRowExpanded.includes(`metadata-toggle-${item.id}`)} > -
- - - - - - - - - - - - - - {item.iterations.length > 1 && ( - - { - onToggle(`iterations-toggle-${item.id}`); - }} - isExpanded={metaRowExpanded.includes( - `iterations-toggle-${item.id}` - )} - id={`iterations-toggle-${item.id}`} - > - {`Unique parameters for ${item.iterations.length} Iterations`} - - - {item.iterations.map((i) => ( - !(i[0] in item.params) - )} - /> - ))} - - - )} - - -
+ diff --git a/frontend/src/components/templates/ILab/MetaRow.jsx b/frontend/src/components/templates/ILab/MetaRow.jsx index c196e79f..d8928716 100644 --- a/frontend/src/components/templates/ILab/MetaRow.jsx +++ b/frontend/src/components/templates/ILab/MetaRow.jsx @@ -11,13 +11,13 @@ const MetaRow = (props) => { {heading} - +
- - + diff --git a/frontend/src/components/templates/ILab/index.less b/frontend/src/components/templates/ILab/index.less index 399c6c77..443ec967 100644 --- a/frontend/src/components/templates/ILab/index.less +++ b/frontend/src/components/templates/ILab/index.less @@ -4,11 +4,9 @@ .metadata-wrapper { display: flex; flex-direction: row; - margin-bottom: 1vw; .metadata-card { flex: 1; /* additionally, equal width */ padding: 1em; - margin-right: 1.5vw; } } .comparison-container { @@ -39,3 +37,14 @@ margin-bottom: 2vh; } } +.mini-metadata { + display: inline flex; + // transform: scale(.75); +} +.summary-box { + display: inline flex; + width: 100%; + height: 100%; + overflow-x: auto; + overflow-y: visible; +}
+ Key ValueValue