feat: added separate colors for sideInput and dynamic legend (#1292)

Signed-off-by: veds-g <guptavedant2312@gmail.com> Co-authored-by: Bradley Behnke <bradleybehnke@yahoo.com>
numaproj · Oct 30, 2023 · 17b7b31 · 17b7b31
1 parent 6efab64
commit 17b7b31
Show file tree

Hide file tree

Showing 19 changed files with 410 additions and 262 deletions.
diff --git a/ui/src/App.tsx b/ui/src/App.tsx
@@ -308,7 +308,7 @@ function App() {
                 width: "100%",
                 height: "100%",
                 overflow: "auto",
-                marginTop: EXCLUDE_CRUMBS[location.pathname] ? 0 : "2.75rem",
+                marginTop: EXCLUDE_CRUMBS[location.pathname] ? 0 : "2.5rem",
               }}
             >
               {routes}

diff --git a/ui/src/components/common/SlidingSidebar/partials/GeneratorDetails/index.tsx b/ui/src/components/common/SlidingSidebar/partials/GeneratorDetails/index.tsx
@@ -3,7 +3,7 @@ import Tabs from "@mui/material/Tabs";
 import Tab from "@mui/material/Tab";
 import Box from "@mui/material/Box";
 import { GeneratorUpdate } from "./partials/GeneratorUpdate";
-import generatorIcon from "../../../../../images/generator.svg";
+import generatorIcon from "../../../../../images/generator0.svg";
 
 import "./style.css";
 

diff --git a/ui/src/components/common/SummaryPageLayout/index.tsx b/ui/src/components/common/SummaryPageLayout/index.tsx
@@ -35,6 +35,7 @@ export interface SummarySection {
 }
 
 export interface SummaryPageLayoutProps {
+  excludeContentMargin?: boolean;
   collapsable?: boolean;
   defaultCollapsed?: boolean;
   offsetOnCollapse?: boolean; // Add top margin to content when collapsed to avoid content overlap
@@ -45,6 +46,8 @@ export interface SummaryPageLayoutProps {
   contentHideOverflow?: boolean;
 }
 
+export const CollapseContext = React.createContext(false);
+
 const SUMMARY_HEIGHT = "6.5625rem";
 const COLLAPSED_HEIGHT = "2.25rem";
 
@@ -193,6 +196,7 @@ const getSummaryComponent = (summarySections: SummarySection[]) => {
 };
 
 export function SummaryPageLayout({
+  excludeContentMargin = false,
   collapsable = false,
   defaultCollapsed = false,
   offsetOnCollapse = false,
@@ -240,9 +244,11 @@ export function SummaryPageLayout({
             boxShadow: "0 0.25rem 0.375rem rgba(39, 76, 119, 0.16)",
             zIndex: (theme) => theme.zIndex.drawer - 1,
             position: "fixed",
-            top: "5.75rem",
+            top: "6.25rem",
             padding: "0 1.25rem",
             alignItems: "center",
+            borderBottomLeftRadius: "1.25rem",
+            borderBottomRightRadius: "1.25rem",
           }}
         >
           <span className={"summary-page-layout-collapsed-text"}>
@@ -301,6 +307,7 @@ export function SummaryPageLayout({
   ]);
 
   const contentMargin = useMemo(() => {
+    if (excludeContentMargin) return 0;
     if (collapsed) {
       return offsetOnCollapse ? `${summaryHeight}px` : undefined;
     }
@@ -323,7 +330,9 @@ export function SummaryPageLayout({
           height: "100%",
         }}
       >
-        {contentComponent}
+        <CollapseContext.Provider value={collapsed}>
+          {contentComponent}
+        </CollapseContext.Provider>
       </Box>
     </Box>
   );

diff --git a/ui/src/components/pages/Pipeline/index.tsx b/ui/src/components/pages/Pipeline/index.tsx
@@ -1,4 +1,4 @@
-import React, { useCallback, useContext, useMemo } from "react";
+import { useCallback, useContext, useMemo, createContext } from "react";
 import { useParams } from "react-router-dom";
 import CircularProgress from "@mui/material/CircularProgress";
 import Box from "@mui/material/Box";
@@ -26,6 +26,10 @@ export interface PipelineProps {
   namespaceId?: string;
 }
 
+export const GeneratorColorContext = createContext<Map<string, string>>(
+  new Map()
+);
+
 export function Pipeline({ namespaceId: nsIdProp }: PipelineProps) {
   const { namespaceId: nsIdParam, pipelineId } = useParams();
   const namespaceId = nsIdProp || nsIdParam;
@@ -41,6 +45,7 @@ export function Pipeline({ namespaceId: nsIdProp }: PipelineProps) {
     pipeline,
     vertices,
     edges,
+    generatorToColorIdxMap,
     pipelineErr,
     buffersErr,
     loading,
@@ -184,18 +189,21 @@ export function Pipeline({ namespaceId: nsIdProp }: PipelineProps) {
       );
     }
     return (
-      <Graph
-        data={{
-          edges: edges,
-          vertices: vertices,
-          pipeline: pipeline,
-        }}
-        namespaceId={namespaceId}
-        pipelineId={pipelineId}
-        refresh={refresh}
-      />
+      <GeneratorColorContext.Provider value={generatorToColorIdxMap}>
+        <Graph
+          data={{
+            edges: edges,
+            vertices: vertices,
+            pipeline: pipeline,
+          }}
+          namespaceId={namespaceId}
+          pipelineId={pipelineId}
+          refresh={refresh}
+        />
+      </GeneratorColorContext.Provider>
     );
   }, [
+    generatorToColorIdxMap,
     pipelineErr,
     buffersErr,
     loading,
@@ -209,6 +217,7 @@ export function Pipeline({ namespaceId: nsIdProp }: PipelineProps) {
 
   return (
     <SummaryPageLayout
+      excludeContentMargin={true}
       contentPadding={false}
       contentHideOverflow
       collapsable