fix(pipelines): Handle collapsed groups better (#186)

patternfly · May 6, 2024 · 8c5ae7a · 8c5ae7a
1 parent 9d21ab6
commit 8c5ae7a
Show file tree

Hide file tree

Showing 21 changed files with 983 additions and 239 deletions.
diff --git a/packages/demo-app-ts/src/Demos.ts b/packages/demo-app-ts/src/Demos.ts
@@ -1,6 +1,9 @@
 import { PipelineTasksDemo } from './demos/pipelinesDemo/PipelineTasksDemo';
 import { PipelineLayoutDemo } from './demos/pipelinesDemo/PipelineLayoutDemo';
-import { PipelineGroupsDemo } from './demos/pipelineGroupsDemo/PipelineGroupsDemo';
+import {
+  PipelineGroupsComplexDemo,
+  PipelineGroupsDemo
+} from './demos/pipelineGroupsDemo/PipelineGroupsDemo';
 import { Basics } from './demos/Basics';
 import { StyleEdges, StyleGroups, StyleLabels, StyleNodes } from './demos/stylesDemo/Styles';
 import { Selection } from './demos/Selection';
@@ -56,6 +59,11 @@ export const Demos: DemoInterface[] = [
         name: 'Pipeline Groups Layout',
         componentType: PipelineGroupsDemo,
       },
+      {
+        id: 'pipelines-groups-complex-layout-demo',
+        name: 'Pipeline Groups Complex Layout',
+        componentType: PipelineGroupsComplexDemo,
+      },
     ]
   },
   {

diff --git a/packages/demo-app-ts/src/demos/pipelineGroupsDemo/DemoTaskEdge.tsx b/packages/demo-app-ts/src/demos/pipelineGroupsDemo/DemoTaskEdge.tsx
@@ -1,24 +1,27 @@
 import * as React from 'react';
 import { observer } from 'mobx-react';
-import { Edge, EdgeTerminalType, GraphElement, TaskEdge } from '@patternfly/react-topology';
+import {
+  DEFAULT_SPACER_NODE_TYPE,
+  Edge,
+  EdgeTerminalType,
+  GraphElement,
+  TaskEdge
+} from '@patternfly/react-topology';
 
 interface DemoTaskEdgeProps {
   element: GraphElement;
 }
 
-const DemoTaskEdge: React.FunctionComponent<DemoTaskEdgeProps> = ({ element, ...props }) => {
-
-  const isDependency = (element as Edge).getTarget().getData()?.isDependency;
-
-  return (
-    <TaskEdge
-      element={element as Edge}
-      endTerminalType={
-        isDependency ? EdgeTerminalType.directional : EdgeTerminalType.none
-      }
-      {...props}
-    />
-  );
-};
+const DemoTaskEdge: React.FunctionComponent<DemoTaskEdgeProps> = ({ element, ...props }) => (
+  <TaskEdge
+    element={element as Edge}
+    endTerminalType={
+      (element as Edge).getTarget().getType() !== DEFAULT_SPACER_NODE_TYPE
+        ? EdgeTerminalType.directional
+        : undefined
+    }
+    {...props}
+  />
+);
 
 export default observer(DemoTaskEdge);
diff --git a/packages/demo-app-ts/src/demos/pipelineGroupsDemo/DemoTaskGroup.tsx b/packages/demo-app-ts/src/demos/pipelineGroupsDemo/DemoTaskGroup.tsx
@@ -18,14 +18,12 @@ import {
   GROUPS_LAYER,
   RunStatus
 } from '@patternfly/react-topology';
+import { DEFAULT_TASK_HEIGHT, GROUP_TASK_WIDTH } from './createDemoPipelineGroupsNodes';
 
 type DemoTaskGroupProps = {
   element: GraphElement;
 } & WithSelectionProps;
 
-export const DEFAULT_TASK_WIDTH = 180;
-export const DEFAULT_TASK_HEIGHT = 32;
-
 const getEdgeCreationTypes = (): EdgeCreationTypes => ({
   edgeType: 'edge',
   spacerEdgeType: 'edge'
@@ -48,7 +46,7 @@ const DemoTaskGroup: React.FunctionComponent<DemoTaskGroupProps> = ({ element, .
         <DefaultTaskGroup
           labelPosition={verticalLayout ? LabelPosition.top : LabelPosition.bottom}
           collapsible
-          collapsedWidth={DEFAULT_TASK_WIDTH}
+          collapsedWidth={GROUP_TASK_WIDTH}
           collapsedHeight={DEFAULT_TASK_HEIGHT}
           element={element as Node}
           recreateLayoutOnCollapseChange

diff --git a/packages/demo-app-ts/src/demos/pipelineGroupsDemo/OptionsBar.tsx b/packages/demo-app-ts/src/demos/pipelineGroupsDemo/OptionsBar.tsx
@@ -11,15 +11,6 @@ const OptionsBar: React.FC = observer(() => {
       <ToolbarItem>
         <Text className="pf-u-mr-sm">Layout:</Text>
       </ToolbarItem>
-      <ToolbarItem>
-        <Radio
-          id="horizontal-layout-radio"
-          name="horizontalLayout"
-          isChecked={!pipelineOptions.verticalLayout}
-          onChange={() => pipelineOptions.setVerticalLayout(false)}
-          label="Horizontal"
-        />
-      </ToolbarItem>
       <ToolbarItem>
         <Radio
           id="vertical-layout-radio"
@@ -29,6 +20,15 @@ const OptionsBar: React.FC = observer(() => {
           label="Vertical"
         />
       </ToolbarItem>
+      <ToolbarItem>
+        <Radio
+          id="horizontal-layout-radio"
+          name="horizontalLayout"
+          isChecked={!pipelineOptions.verticalLayout}
+          onChange={() => pipelineOptions.setVerticalLayout(false)}
+          label="Horizontal"
+        />
+      </ToolbarItem>
     </>
   );
 });

diff --git a/packages/demo-app-ts/src/demos/pipelineGroupsDemo/PipelineGroupsDemo.tsx b/packages/demo-app-ts/src/demos/pipelineGroupsDemo/PipelineGroupsDemo.tsx
@@ -19,14 +19,17 @@ import {
   TOP_TO_BOTTOM,
   PipelineNodeModel,
   useVisualizationController,
+  addSpacerNodes,
+  pipelineElementFactory,
 } from '@patternfly/react-topology';
 import pipelineGroupsComponentFactory from './pipelineGroupsComponentFactory';
-import { createDemoPipelineGroupsNodes } from './createDemoPipelineGroupsNodes';
+import {
+  createComplexDemoPipelineGroupsNodes,
+  createDemoPipelineGroupsNodes
+} from './createDemoPipelineGroupsNodes';
 import { PipelineGroupsDemoContext, PipelineGroupsDemoModel } from './PipelineGroupsDemoContext';
 import OptionsBar from './OptionsBar';
 import DemoControlBar from '../DemoControlBar';
-import pipelineElementFactory
-  from '@patternfly/react-topology/dist/esm/pipelines/elements/pipelineElementFactory';
 
 const TopologyPipelineGroups: React.FC<{ nodes: PipelineNodeModel[] }> = observer(({ nodes }) => {
   const controller = useVisualizationController();
@@ -38,7 +41,9 @@ const TopologyPipelineGroups: React.FC<{ nodes: PipelineNodeModel[] }> = observe
   });
 
   React.useEffect(() => {
-    const edges = getEdgesFromNodes(nodes, DEFAULT_SPACER_NODE_TYPE, 'edge', 'edge');
+    const pipelineNodes = addSpacerNodes(nodes);
+    const edges = getEdgesFromNodes(pipelineNodes, DEFAULT_SPACER_NODE_TYPE, 'edge', 'edge');
+
     controller.fromModel(
       {
         graph: {
@@ -48,7 +53,7 @@ const TopologyPipelineGroups: React.FC<{ nodes: PipelineNodeModel[] }> = observe
           y: 25,
           layout: options.verticalLayout ? TOP_TO_BOTTOM : LEFT_TO_RIGHT
         },
-        nodes,
+        nodes: pipelineNodes,
         edges,
       },
       false
@@ -64,7 +69,7 @@ const TopologyPipelineGroups: React.FC<{ nodes: PipelineNodeModel[] }> = observe
 
 TopologyPipelineGroups.displayName = 'TopologyPipelineLayout';
 
-export const PipelineGroupsDemo = observer(() => {
+export const PipelineGroupsDemoComponent: React.FC<{ complex?: boolean }> = ({ complex }) => {
   const controller = new Visualization();
   controller.registerElementFactory(pipelineElementFactory);
   controller.registerComponentFactory(pipelineGroupsComponentFactory);
@@ -77,7 +82,7 @@ export const PipelineGroupsDemo = observer(() => {
         ignoreGroups: true,
       })
   );
-  const nodes = createDemoPipelineGroupsNodes();
+  const nodes = complex ? createComplexDemoPipelineGroupsNodes() : createDemoPipelineGroupsNodes();
   return (
     <div className="pf-ri__topology-demo">
       <VisualizationProvider controller={controller}>
@@ -87,4 +92,13 @@ export const PipelineGroupsDemo = observer(() => {
       </VisualizationProvider>
     </div>
   );
-});
+};
+
+export const PipelineGroupsDemo = () => {
+  return <PipelineGroupsDemoComponent />
+};
+
+export const PipelineGroupsComplexDemo = () => {
+  return <PipelineGroupsDemoComponent complex />
+};
+
diff --git a/packages/demo-app-ts/src/demos/pipelineGroupsDemo/PipelineGroupsDemoContext.tsx b/packages/demo-app-ts/src/demos/pipelineGroupsDemo/PipelineGroupsDemoContext.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import { makeObservable, observable, action } from 'mobx';
 
 export class PipelineGroupsDemoModel {
-  protected verticalLayoutP: boolean = false;
+  protected verticalLayoutP: boolean = true;
 
   constructor() {
     makeObservable<