Updates the UI to display multiple attributes

This allows us to display multiple logged attributes. The names are just title-case versions of the keys.
DAGWorks-Inc · Jun 17, 2024 · de47c6b · de47c6b
1 parent 7e2267a
commit de47c6b
Show file tree

Hide file tree

Showing 2 changed files with 60 additions and 15 deletions.
diff --git a/ui/frontend/src/components/dashboard/Runs/Task/Task.tsx b/ui/frontend/src/components/dashboard/Runs/Task/Task.tsx
@@ -16,7 +16,10 @@ import {
   getNodeOutputType,
 } from "../../../../state/api/friendlyApi";
 import { NodeMetadataPythonType1 } from "../../../../state/api/backendApiRaw";
-import { ResultsSummaryView } from "./result-summaries/DataObservability";
+import {
+  MultiResultSummaryView,
+  ResultsSummaryView,
+} from "./result-summaries/DataObservability";
 import { RunLink } from "../../../common/CommonLinks";
 import { extractCodeContents } from "../../../../utils/codeExtraction";
 
@@ -334,8 +337,7 @@ export const TaskView = (props: {
   };
   const whichTab = searchParams.get("tab");
   return (
-    <div className="pt-10">
-      <div className="text-gray-500 text-xl pb-2">Viewing {taskName}</div>
+    <div className="pt-10 flex flex-col gap-5">
       <div className="sm:hidden">
         <label htmlFor="tabs" className="sr-only">
           Select a tab
@@ -363,7 +365,7 @@ export const TaskView = (props: {
           <Link
             className={classNames(
               "text-gray-500 hover:text-gray-700",
-              "px-3 py-2 font-medium text-md rounded-md"
+              "py-2 font-medium text-md rounded-md"
             )}
             to={path.split("/task/")[0]}
           >
@@ -412,6 +414,8 @@ export const TaskView = (props: {
         upstreamNodes={upstreamNodes}
         downstreamNodes={downstreamNodes}
       /> */}
+      <h2 className="text-gray-800 text-xl pb-2 font-semibold">{taskName}</h2>
+
       {whichTab === "Errors" ? (
         <div className="pt-4">
           <ErrorView
@@ -420,7 +424,7 @@ export const TaskView = (props: {
           ></ErrorView>
         </div>
       ) : whichTab === "Output" ? (
-        <ResultsSummaryView
+        <MultiResultSummaryView
           projectId={props.projectId}
           nodeRunData={nodeRunData}
           taskName={taskName}

diff --git a/ui/frontend/src/components/dashboard/Runs/Task/result-summaries/DataObservability.tsx b/ui/frontend/src/components/dashboard/Runs/Task/result-summaries/DataObservability.tsx
@@ -8,6 +8,7 @@ import {
   AttributeUnsupported1,
 } from "../../../../../state/api/backendApiRaw";
 import {
+  NodeRunAttribute,
   NodeRunWithAttributes,
   getNodeRunAttributes,
 } from "../../../../../state/api/friendlyApi";
@@ -131,11 +132,52 @@ const Unsupported1View = (props: {
   );
 };
 
-export const ResultsSummaryView = (props: {
+export const snakeToTitle = (s: string) => {
+  return s
+    .split("_")
+    .map((i, n) => (n === 0 ? i[0].toUpperCase() : i[0]) + i.slice(1))
+    .join(" ");
+};
+
+export const MultiResultSummaryView = (props: {
   nodeRunData: (NodeRunWithAttributes | null)[];
   taskName: string | undefined;
   projectId: number;
   runIds: number[];
+}) => {
+  const attributes = props.nodeRunData.flatMap((i) => i?.attributes || []);
+  const attributesGroupedByName = attributes.reduce((acc, item) => {
+    if (acc[item.name]) {
+      acc[item.name].push(item);
+    } else {
+      acc[item.name] = [item];
+    }
+    return acc;
+  }, {} as { [key: string]: NodeRunAttribute[] });
+  return (
+    <div className="flex flex-col gap-2">
+      {Object.entries(attributesGroupedByName).map(([key, value], i) => (
+        <div key={key}>
+          <h2 className="text-lg font-semibold text-gray-800">
+            {snakeToTitle(key)}
+          </h2>
+          <ResultsSummaryView
+            runAttributes={value}
+            taskName={props.taskName}
+            projectId={props.projectId}
+            runIds={props.runIds}
+          />
+        </div>
+      ))}
+    </div>
+  );
+};
+export const ResultsSummaryView = (props: {
+  // nodeRunData: (NodeRunWithAttributes | null)[];
+  runAttributes: NodeRunAttribute[];
+  taskName: string | undefined;
+  projectId: number;
+  runIds: number[];
 }) => {
   const allViews = [];
   /**
@@ -148,7 +190,7 @@ export const ResultsSummaryView = (props: {
    */
 
   const primitive1Views = getNodeRunAttributes<AttributePrimitive1>(
-    props.nodeRunData.flatMap((i) => i?.attributes || []),
+    props.runAttributes,
     props.runIds,
     "AttributePrimitive1"
   );
@@ -163,11 +205,10 @@ export const ResultsSummaryView = (props: {
     );
   }
 
-
   // ... [similar blocks for other attributes]
 
   // const error1Views = getNodeRunAttributes<AttributeError1>(
-  //   props.nodeRunData.flatMap((i) => i?.attributes || []),
+  //   props.runAttributes
   //   "AttributeError1"
   // );
   // if (error1Views.length > 0) {
@@ -181,7 +222,7 @@ export const ResultsSummaryView = (props: {
   // }
 
   const dict1Views = getNodeRunAttributes<AttributeDict1>(
-    props.nodeRunData.flatMap((i) => i?.attributes || []),
+    props.runAttributes,
     props.runIds,
     "AttributeDict1"
   );
@@ -197,7 +238,7 @@ export const ResultsSummaryView = (props: {
   }
 
   const dict2Views = getNodeRunAttributes<AttributeDict2>(
-    props.nodeRunData.flatMap((i) => i?.attributes || []),
+    props.runAttributes,
     props.runIds,
     "AttributeDict2"
   );
@@ -213,7 +254,7 @@ export const ResultsSummaryView = (props: {
 
   const dagworksDescribe3Views =
     getNodeRunAttributes<AttributeDagworksDescribe3>(
-      props.nodeRunData.flatMap((i) => i?.attributes || []),
+      props.runAttributes,
       props.runIds,
       "AttributeDagworksDescribe3"
     );
@@ -229,7 +270,7 @@ export const ResultsSummaryView = (props: {
   }
 
   const pandasDescribe1View = getNodeRunAttributes<AttributePandasDescribe1>(
-    props.nodeRunData.flatMap((i) => i?.attributes || []),
+    props.runAttributes,
     props.runIds,
     "AttributePandasDescribe1"
   );
@@ -246,7 +287,7 @@ export const ResultsSummaryView = (props: {
   }
 
   const unsupportedViews = getNodeRunAttributes<AttributeUnsupported1>(
-    props.nodeRunData.flatMap((i) => i?.attributes || []),
+    props.runAttributes,
     props.runIds,
     "AttributeUnsupported1"
   );
@@ -262,7 +303,7 @@ export const ResultsSummaryView = (props: {
   }
 
   return (
-    <div className="flex flex-col">
+    <div className="flex flex-col border-l-8 my-2 border-gray-100 hover:bg-gray-100">
       {allViews.map((item, i) => {
         return <div key={i}>{item}</div>;
       })}