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.
cloud-bulldozer · Nov 7, 2024 · f2c28fd · f2c28fd
1 parent 1245407
commit f2c28fd
Show file tree

Hide file tree

Showing 5 changed files with 161 additions and 84 deletions.
diff --git a/frontend/src/components/templates/ILab/ILabMetadata.jsx 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 (
+    <Split className="metadata-wrapper" hasGutter>
+      <SplitItem className="metadata-card" span={4}>
+        <MetaRow
+          key={uid()}
+          heading={"Fields"}
+          metadata={[
+            ["benchmark", item.benchmark],
+            ["name", item.name],
+            ["email", item.email],
+            ["source", item.source],
+            ["start_date", (new Date(item.begin)).toLocaleString()],
+            ["end_date", (new Date(item.end)).toLocaleString()],
+            ["status", item.status],
+          ]}
+        />
+      </SplitItem>
+      <SplitItem className="metadata-card" span={4}>
+        <MetaRow
+          key={uid()}
+          heading={"Tags"}
+          metadata={Object.entries(item.tags)}
+        />
+      </SplitItem>
+      <SplitItem className="metadata-card" span={4}>
+        <MetaRow
+          key={uid()}
+          heading={"Common Parameters"}
+          metadata={Object.entries(item.params)}
+        />
+        {item.iterations.length > 1 && (
+          <Accordion asDefinitionList={false} togglePosition="start">
+            <AccordionItem>
+              <AccordionToggle
+                onClick={() => {
+                  onToggle(`iterations-toggle-${item.id}`);
+                }}
+                isExpanded={metaRowExpanded.includes(
+                  `iterations-toggle-${item.id}`
+                )}
+                id={`iterations-toggle-${item.id}`}
+              >
+                {`Unique parameters for ${item.iterations.length} Iterations`}
+              </AccordionToggle>
+              <AccordionContent
+                id={`iterations-${item.id}`}
+                isHidden={
+                  !metaRowExpanded.includes(`iterations-toggle-${item.id}`)
+                }
+              >
+                <Table
+                  variant="compact"
+                  hasNoInset
+                  className="box"
+                  key={uid()}
+                  aria-label="metadata-table"
+                  isStriped
+                >
+                  <Thead>
+                    <Tr>
+                      <Th>Iteration</Th>
+                      <Th>Parameter</Th>
+                      <Th>Value</Th>
+                    </Tr>
+                  </Thead>
+                  <Tbody>
+                    {item.iterations.map((i) =>
+                      Object.entries(i.params)
+                        .filter((p) => !(p[0] in item.params))
+                        .map((p) => (
+                          <Tr>
+                            <Td>{i.iteration}</Td>
+                            <Td>{p[0]}</Td>
+                            <Td>{p[1]}</Td>
+                          </Tr>
+                        ))
+                    )}
+                  </Tbody>
+                </Table>
+              </AccordionContent>
+            </AccordionItem>
+          </Accordion>
+        )}
+      </SplitItem>
+    </Split>
+  );
+};
+
+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
@@ -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={
-                      <MenuItemAction
-                        icon={<InfoCircleIcon aria-hidden />}
-                        actionId="code"
-                        onClick={() => console.log("clicked on code icon")}
-                        aria-label="Code"
-                      />
+                      <Popover
+                        triggerAction="hover"
+                        aria-label="Metadata popover"
+                        headerContent={<h3>Metadata</h3>}
+                        appendTo={() => document.body}
+                        // hasAutoWidth
+                        hasNoPadding
+                        position="auto"
+                        className="mini-metadata"
+                        bodyContent={
+                          <div position="auto" className="mini-metadata">
+                            <ILabMetadata item={item} />
+                          </div>
+                        }
+                      >
+                        <Button icon={<InfoCircleIcon aria-hidden />}></Button>
+                      </Popover>
                     }
                   >
                     {`${new Date(item.begin_date).toLocaleDateString()} ${

diff --git 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}`)}
         >
-          <div className="metadata-wrapper">
-            <Card className="metadata-card" isCompact>
-              <CardBody>
-                <MetaRow
-                  key={uid()}
-                  heading={"Fields"}
-                  metadata={[
-                    ["benchmark", item.benchmark],
-                    ["name", item.name],
-                    ["email", item.email],
-                    ["source", item.source],
-                  ]}
-                />
-              </CardBody>
-            </Card>
-            <Card className="metadata-card" isCompact>
-              <CardBody>
-                <MetaRow
-                  key={uid()}
-                  heading={"Tags"}
-                  metadata={Object.entries(item.tags)}
-                />
-              </CardBody>
-            </Card>
-            <Card className="metadata-card" isCompact>
-              <CardBody>
-                <MetaRow
-                  key={uid()}
-                  heading={"Common Parameters"}
-                  metadata={Object.entries(item.params)}
-                />
-                {item.iterations.length > 1 && (
-                  <AccordionItem>
-                    <AccordionToggle
-                      onClick={() => {
-                        onToggle(`iterations-toggle-${item.id}`);
-                      }}
-                      isExpanded={metaRowExpanded.includes(
-                        `iterations-toggle-${item.id}`
-                      )}
-                      id={`iterations-toggle-${item.id}`}
-                    >
-                      {`Unique parameters for ${item.iterations.length} Iterations`}
-                    </AccordionToggle>
-                    <AccordionContent
-                      id={`iterations-${item.id}`}
-                      isHidden={
-                        !metaRowExpanded.includes(
-                          `iterations-toggle-${item.id}`
-                        )
-                      }
-                    >
-                      {item.iterations.map((i) => (
-                        <MetaRow
-                          key={uid()}
-                          heading={`Iteration ${i.iteration} Parameters`}
-                          metadata={Object.entries(i.params).filter(
-                            (i) => !(i[0] in item.params)
-                          )}
-                        />
-                      ))}
-                    </AccordionContent>
-                  </AccordionItem>
-                )}
-              </CardBody>
-            </Card>
-          </div>
+          <ILabMetadata item={item} />
         </AccordionContent>
       </AccordionItem>
       <AccordionItem>

diff --git a/frontend/src/components/templates/ILab/MetaRow.jsx b/frontend/src/components/templates/ILab/MetaRow.jsx
@@ -11,13 +11,13 @@ const MetaRow = (props) => {
       <Title headingLevel="h4" className="type_heading">
         {heading}
       </Title>
-      <Table className="box" key={uid()} aria-label="metadata-table">
+      <Table className="box" key={uid()} aria-label="metadata-table" variant="compact">
         <Thead>
           <Tr>
-            <Th width={20} style={{ textAlign: "left" }}>
+            <Th width={25} style={{ textAlign: "left" }}>
               Key
             </Th>
-            <Th width={20}>Value</Th>
+            <Th width={75} style={{ overflow: "wrap" }}>Value</Th>
           </Tr>
         </Thead>
         <Tbody>

diff --git 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;
+}