fix(ui): hide subscriptions per warehouse in DAG

ui/src/features/project/pipelines/nodes/repo-node.tsx

@@ -29,6 +29,7 @@ type Props = {
   nodeData: RepoNodeType;
   children?: React.ReactNode;
   onClick?: () => void;
+  hidden?: boolean;
 };
 
 const ico = {
@@ -38,7 +39,7 @@ const ico = {
   [NodeType.REPO_CHART]: faAnchor
 };
 
-export const RepoNode = ({ nodeData, children, onClick }: Props) => {
+export const RepoNode = ({ nodeData, children, onClick, hidden }: Props) => {
   const { warehouseColorMap } = useContext(ColorContext);
   const type = nodeData.type;
   const value =
@@ -48,6 +49,9 @@ export const RepoNode = ({ nodeData, children, onClick }: Props) => {
         ? nodeData?.data?.metadata?.name || ''
         : nodeData?.data?.repoURL || '';
 
+  if (hidden) {
+    return null;
+  }
   const [hasError, message, refreshing] = useMemo(() => {
     let hasError = false;
     let message: string | null = null;

ui/src/features/project/pipelines/pipelines.tsx

@@ -168,8 +168,7 @@ export const Pipelines = ({ project }: { project: Project }) => {
   const [nodes, connectors, box, sortedStages, stageColorMap, warehouseColorMap] = usePipelineGraph(
     name,
     data?.stages || [],
-    warehouseData?.warehouses || [],
-    hideSubscriptions
+    warehouseData?.warehouses || []
   );
 
   const { mutate: manualApproveAction } = useMutation(approveFreight, {
@@ -459,6 +458,9 @@ export const Pipelines = ({ project }: { project: Project }) => {
                       </>
                     ) : (
                       <RepoNode
+                        hidden={
+                          node.type !== NodeType.WAREHOUSE && hideSubscriptions[node.warehouseName]
+                        }
                         nodeData={node}
                         onClick={
                           node.type === NodeType.WAREHOUSE
@@ -509,8 +511,13 @@ export const Pipelines = ({ project }: { project: Project }) => {
                         {node.type === NodeType.WAREHOUSE && (
                           <Nodule
                             nodeHeight={RepoNodeDimensions().height}
-                            onClick={() => setHideSubscriptions(!hideSubscriptions)}
-                            icon={hideSubscriptions ? faEye : faEyeSlash}
+                            onClick={() =>
+                              setHideSubscriptions({
+                                ...hideSubscriptions,
+                                [node.warehouseName]: !hideSubscriptions[node.warehouseName]
+                              })
+                            }
+                            icon={hideSubscriptions[node.warehouseName] ? faEye : faEyeSlash}
                             begin={true}
                           />
                         )}
@@ -519,22 +526,24 @@ export const Pipelines = ({ project }: { project: Project }) => {
                   </div>
                 ))}
                 {connectors?.map((connector) =>
-                  connector.map((line, i) => (
-                    <div
-                      className='absolute bg-gray-300 rounded-full'
-                      style={{
-                        padding: 0,
-                        margin: 0,
-                        height: LINE_THICKNESS,
-                        width: line.width,
-                        left: line.x,
-                        top: line.y,
-                        transform: `rotate(${line.angle}deg)`,
-                        backgroundColor: line.color
-                      }}
-                      key={i}
-                    />
-                  ))
+                  connector.map((line, i) =>
+                    hideSubscriptions[line.to] && line.from === 'subscription' ? null : (
+                      <div
+                        className='absolute bg-gray-300 rounded-full'
+                        style={{
+                          padding: 0,
+                          margin: 0,
+                          height: LINE_THICKNESS,
+                          width: line.width,
+                          left: line.x,
+                          top: line.y,
+                          transform: `rotate(${line.angle}deg)`,
+                          backgroundColor: line.color
+                        }}
+                        key={i}
+                      />
+                    )
+                  )
                 )}
               </div>
             </div>

ui/src/features/project/pipelines/types.ts

@@ -99,6 +99,8 @@ export interface ConnectorsType {
   width: number;
   angle: number;
   color: string;
+  from: string;
+  to: string;
 }
 
 export interface BoxType {

ui/src/features/project/pipelines/utils/graph.ts

@@ -6,14 +6,13 @@ import { AnyNodeType, ConnectorsType, NodeType, RepoNodeType } from '../types';
 
 export const LINE_THICKNESS = 2;
 
-export const initNodeArray = (s: Stage) =>
-  [
-    {
-      data: s,
-      type: NodeType.STAGE,
-      color: '#000'
-    }
-  ] as AnyNodeType[];
+export const initNode = (s: Stage) => {
+  return {
+    data: s,
+    type: NodeType.STAGE,
+    color: '#000'
+  } as AnyNodeType;
+};
 
 export const getNodeType = (sub: RepoSubscription) =>
   sub.chart ? NodeType.REPO_CHART : sub.image ? NodeType.REPO_IMAGE : NodeType.REPO_GIT;
@@ -57,7 +56,7 @@ export const getConnectors = (g: graphlib.Graph) => {
       const cy = (y1 + y2) / 2 - LINE_THICKNESS / 2;
 
       const angle = Math.atan2(y1 - y2, x1 - x2) * (180 / Math.PI);
-      lines.push({ x: cx, y: cy, width, angle, color: edge['color'] });
+      lines.push({ x: cx, y: cy, width, angle, color: edge['color'], from, to });
     }
 
     const fromGr = forward[from] || {};

ui/src/features/project/pipelines/utils/use-pipeline-graph.ts

@@ -15,63 +15,47 @@ import {
   getNodeDimensions
 } from '../types';
 
-import { getConnectors, initNodeArray, newSubscriptionNode } from './graph';
+import { getConnectors, initNode, newSubscriptionNode } from './graph';
 import { IndexCache } from './index-cache';
 
 const initializeNodes = (
   warehouses: Warehouse[],
   stages: Stage[],
-  hideSubscriptions: boolean,
   project?: string
 ): [AnyNodeType[], ColorMap] => {
-  const warehouseMap = {} as { [key: string]: Warehouse };
   const warehouseNodeMap = {} as { [key: string]: RepoNodeType };
+  const nodes = [];
 
   (warehouses || []).forEach((w: Warehouse) => {
-    warehouseMap[w?.metadata?.name || ''] = w;
-    warehouseNodeMap[w.metadata?.name || ''] = NewWarehouseNode(w);
+    const warehouseName = w?.metadata?.name;
+    if (warehouseName) {
+      w?.spec?.subscriptions?.forEach((sub) => {
+        nodes.push(newSubscriptionNode(sub, warehouseName));
+      });
+      warehouseNodeMap[warehouseName] = NewWarehouseNode(w);
+    }
   });
 
-  const nodes = stages.slice().flatMap((stage) => {
-    const n = initNodeArray(stage);
-
-    const requestedFreight = stage.spec?.requestedFreight;
-    (requestedFreight || []).forEach((f) => {
+  stages.forEach((stage) => {
+    (stage.spec?.requestedFreight || []).forEach((f) => {
       if (f?.origin?.kind === 'Warehouse' && f?.sources?.direct) {
         const warehouseName = f.origin?.name;
-        // create warehouse nodes
         if (warehouseName) {
-          const cur = warehouseMap[warehouseName];
-          if (!warehouseNodeMap[warehouseName] && cur) {
-            // if warehouse node does not yet exist, create it and add this stage as its first child
-            warehouseNodeMap[warehouseName] = NewWarehouseNode(cur, [stage.metadata?.name || '']);
-          } else {
-            // the warehouse node already exists, so add this stage to its children
-            const stageNames = [
+          // the warehouse node will already exist, unless a stage references a missing warehouse
+          warehouseNodeMap[warehouseName] = {
+            ...warehouseNodeMap[warehouseName],
+            stageNames: [
               ...(warehouseNodeMap[warehouseName]?.stageNames || []),
               stage.metadata?.name || ''
-            ];
-            warehouseNodeMap[warehouseName] = {
-              ...warehouseNodeMap[warehouseName],
-              stageNames
-            };
-          }
+            ]
+          };
         }
       }
     });
 
-    return n;
+    nodes.push(initNode(stage));
   });
 
-  if (!hideSubscriptions) {
-    warehouses.forEach((w) => {
-      // create subscription nodes
-      w?.spec?.subscriptions?.forEach((sub) => {
-        nodes.push(newSubscriptionNode(sub, w.metadata?.name || ''));
-      });
-    });
-  }
-
   const warehouseColorMap = getColors(project || '', warehouses, 'warehouses');
 
   nodes.push(...Object.values(warehouseNodeMap));
@@ -81,8 +65,7 @@ const initializeNodes = (
 export const usePipelineGraph = (
   project: string | undefined,
   stages: Stage[],
-  warehouses: Warehouse[],
-  hideSubscriptions: boolean
+  warehouses: Warehouse[]
 ): [DagreNode[], ConnectorsType[][], BoxType, Stage[], ColorMap, ColorMap] => {
   return useMemo(() => {
     if (!stages || !warehouses || !project) {
@@ -93,12 +76,7 @@ export const usePipelineGraph = (
     g.setGraph({ rankdir: 'LR' });
     g.setDefaultEdgeLabel(() => ({}));
 
-    const [myNodes, warehouseColorMap] = initializeNodes(
-      warehouses,
-      stages,
-      hideSubscriptions,
-      project
-    );
+    const [myNodes, warehouseColorMap] = initializeNodes(warehouses, stages, project);
     const parentIndexCache = new IndexCache((node, warehouseName) => {
       return node.type === NodeType.WAREHOUSE && node.warehouseName === warehouseName;
     });
@@ -155,7 +133,7 @@ export const usePipelineGraph = (
           {
             color: warehouseColorMap[item.warehouseName]
           },
-          `${item.warehouseName} ${index}`
+          `subscription ${item.warehouseName} ${index}`
         );
       }
     });
@@ -204,5 +182,5 @@ export const usePipelineGraph = (
     });
 
     return [nodes, connectors, box, sortedStages, stageColorMap, warehouseColorMap];
-  }, [stages, warehouses, hideSubscriptions, project]);
+  }, [stages, warehouses, project]);
 };