diff --git a/apps/gitness/src/pages-v2/project/settings-layout.tsx b/apps/gitness/src/pages-v2/project/settings-layout.tsx
index 82aa830a0..776a770f7 100644
--- a/apps/gitness/src/pages-v2/project/settings-layout.tsx
+++ b/apps/gitness/src/pages-v2/project/settings-layout.tsx
@@ -5,7 +5,7 @@ import { ProjectSettingsPage } from '@harnessio/ui/views'
export const SettingsLayout = () => {
return (
<>
-
+
diff --git a/apps/gitness/src/pages-v2/repo/repo-layout.tsx b/apps/gitness/src/pages-v2/repo/repo-layout.tsx
index 328b1671b..687c8d4e5 100644
--- a/apps/gitness/src/pages-v2/repo/repo-layout.tsx
+++ b/apps/gitness/src/pages-v2/repo/repo-layout.tsx
@@ -7,7 +7,7 @@ import { useTranslationStore } from '../../i18n/stores/i18n-store'
const RepoLayout = () => {
return (
<>
-
+
diff --git a/apps/gitness/src/pages/pipeline-edit/components/pipeline-studio-graph-view.tsx b/apps/gitness/src/pages/pipeline-edit/components/pipeline-studio-graph-view.tsx
deleted file mode 100644
index 6e0ee5c31..000000000
--- a/apps/gitness/src/pages/pipeline-edit/components/pipeline-studio-graph-view.tsx
+++ /dev/null
@@ -1,49 +0,0 @@
-import { useEffect, useState } from 'react'
-
-import { parse } from 'yaml'
-
-import { getNodesFromPipelineYaml, PipelineStudio, type Node } from '@harnessio/unified-pipeline'
-
-import { InteractionContextProvider } from '../context/InteractionContextProvider'
-import { usePipelineDataContext } from '../context/PipelineStudioDataProvider'
-import { StepDrawer, usePipelineViewContext } from '../context/PipelineStudioViewProvider'
-
-export const PipelineStudioGraphView = (): React.ReactElement => {
- const {
- state: { yamlRevision },
- setEditStepIntention
- } = usePipelineDataContext()
- const { setStepDrawerOpen } = usePipelineViewContext()
-
- const [nodes, setNodes] = useState
([])
-
- useEffect(() => {
- return () => {
- setNodes([])
- }
- }, [])
-
- useEffect(() => {
- const yamlJson = parse(yamlRevision.yaml)
- const nodes: Node[] = getNodesFromPipelineYaml(yamlJson)
- setNodes(nodes)
- }, [yamlRevision])
-
- return (
-
-
- {}}
- onDeleteNode={() => {}}
- onSelectNode={node => {
- if (node.type === 'atomic') {
- setStepDrawerOpen(StepDrawer.Form)
- setEditStepIntention({ path: node.data.path })
- }
- }}
- />
-
-
- {pipelineId}
- /
- Executions
-
- )
- }
+ breadcrumb: ({ pipelineId }: { pipelineId: string }) => {pipelineId}
+ },
+ children: [
+ {
+ index: true,
+ element: ,
+ handle: {
+ breadcrumb: () => Executions
+ }
+ },
+ {
+ path: 'edit',
+ element: ,
+ handle: {
+ breadcrumb: () => Edit
+ }
+ }
+ ]
}
]
},
diff --git a/apps/gitness/tailwind.config.js b/apps/gitness/tailwind.config.js
index b7fd7d95a..f9f6f3d0d 100644
--- a/apps/gitness/tailwind.config.js
+++ b/apps/gitness/tailwind.config.js
@@ -7,7 +7,6 @@ module.exports = {
require('@harnessio/ui/tailwind.config')
],
content: [
- 'node_modules/@harnessio/unified-pipeline/src/**/*.{ts,tsx}',
'node_modules/@harnessio/views/src/**/*.{ts,tsx}',
'node_modules/@harnessio/ui/src/**/*.{ts,tsx}',
'./src/**/*.{ts,tsx}'
diff --git a/packages/pipeline-graph/.gitignore b/packages/pipeline-graph/.gitignore
new file mode 100644
index 000000000..13caefaf1
--- /dev/null
+++ b/packages/pipeline-graph/.gitignore
@@ -0,0 +1,4 @@
+/node_modules
+/coverage
+/build
+.DS_Store
diff --git a/packages/pipeline-graph/README.md b/packages/pipeline-graph/README.md
new file mode 100644
index 000000000..00cd5f12c
--- /dev/null
+++ b/packages/pipeline-graph/README.md
@@ -0,0 +1,89 @@
+# Pipeline Graph
+
+A library for generating and interacting with pipeline graphs.
+
+
+
+## Anatomy
+
+- Model
+- Container and Content nodes
+- Edges
+- Canvas
+
+### Model
+
+Type **AnyContainerNodeType** us a union of **LeafContainerNodeType** | **ParallelContainerNodeType** | **SerialContainerNodeType** and represent one node.
+**LeafContainerNodeType** node does not have children while other have.
+
+Example of the model
+
+```ts
+const model: AnyContainerNodeType[] = [
+ {
+ type: 'stage',
+ children: [{ type: 'step' }, { type: 'step' }]
+ }
+]
+```
+
+In order to visualize our model we need **container** and **content** nodes.
+
+### Container and Content nodes
+
+#### Container node
+
+Container node is responsible for layout and basic user interaction like adding/deleting nodes. There are three containers: **Leaf**, **Serial** and **Parallel**. **Leaf** render one **Content** node, while **Serial**/**Parallel** renders itself and children.
+
+Container node anatomy:
+
+- **Metadata** - At the very root div we have **data-path** and **data-action** attributes which are used for event delegation purpose.
+- **Relative positioning** - root div has _position:relative_ so we can use absolute position for styling in the **content** node.
+- **Ports** - Port is div. It's position is used for calculating and drawing links between ports.
+- **Add/Delete containers** - are used for capturing mouse hover (via css). They have buttons that appears on mouse hover.
+
+#### Content node
+
+Content nodes are responsible for the content of the node (like text, icons etc.) and visualizing state (like _loading_ or _selection_)
+
+#### Pairing Content and Connection nodes
+
+In order to render our graph we have to pair container and content node. For this we uses **NodeContent** type.
+
+```ts
+const nodes: NodeContent[] = [
+ // register "step" content node which will render "StepContentNode" inside "leaf" container
+ {
+ type: "step",
+ component: StepContentNode,
+ containerType: ContainerNode.leaf
+ },
+ // register "stage" content node which will render "SerialGroupContentNode" inside "serial" container
+ {
+ type: "stage",
+ component: SerialGroupContentNode
+ containerType: ContainerNode.serial,
+ }
+]
+```
+
+### Edges
+
+Connection lines between nodes are drawn using svg paths. Lines are calculated using ports (which are part of container nodes).
+
+### Canvas
+
+Library provides pan and pinch-to-zoom out of the box.
+For creating manual controls for zoom in/out and fit we can use useCanvasContext that exposes increment, decrement and fit functions.
+
+Implementing custom controls example
+
+```tsx
+const { increase, decrease, fit } = useCanvasContext()
+
+return <>
+
+
+
+
+```
diff --git a/packages/pipeline-graph/examples/index.html b/packages/pipeline-graph/examples/index.html
new file mode 100644
index 000000000..4d64ce469
--- /dev/null
+++ b/packages/pipeline-graph/examples/index.html
@@ -0,0 +1,18 @@
+
+
+
+
+
+
+
+
+
+
+
+ Harness Open Source
+
+
+
+
+
+
diff --git a/packages/pipeline-graph/examples/src/assets/harness-step.svg b/packages/pipeline-graph/examples/src/assets/harness-step.svg
new file mode 100644
index 000000000..630752f06
--- /dev/null
+++ b/packages/pipeline-graph/examples/src/assets/harness-step.svg
@@ -0,0 +1,3 @@
+
diff --git a/packages/pipeline-graph/examples/src/assets/run-step.svg b/packages/pipeline-graph/examples/src/assets/run-step.svg
new file mode 100644
index 000000000..2ea1c6f83
--- /dev/null
+++ b/packages/pipeline-graph/examples/src/assets/run-step.svg
@@ -0,0 +1,3 @@
+
diff --git a/packages/pipeline-graph/examples/src/canvas/CanvasButton.tsx b/packages/pipeline-graph/examples/src/canvas/CanvasButton.tsx
new file mode 100644
index 000000000..db634a7af
--- /dev/null
+++ b/packages/pipeline-graph/examples/src/canvas/CanvasButton.tsx
@@ -0,0 +1,22 @@
+export function CanvasButton(props: React.PropsWithChildren<{ onClick: () => void }>) {
+ const { children, onClick } = props
+
+ return (
+
+ {children}
+
+ )
+}
diff --git a/packages/pipeline-graph/examples/src/canvas/CanvasControls.tsx b/packages/pipeline-graph/examples/src/canvas/CanvasControls.tsx
new file mode 100644
index 000000000..ac23c89bb
--- /dev/null
+++ b/packages/pipeline-graph/examples/src/canvas/CanvasControls.tsx
@@ -0,0 +1,23 @@
+import { useCanvasContext } from '../../../src/context/canvas-provider'
+import { CanvasButton } from './CanvasButton'
+
+export function CanvasControls() {
+ const { increase, decrease, fit } = useCanvasContext()
+
+ return (
+
+ increase()}>+
+ decrease()}>-
+ fit()}>[]
+
+ )
+}
diff --git a/packages/pipeline-graph/examples/src/css/animations.css b/packages/pipeline-graph/examples/src/css/animations.css
new file mode 100644
index 000000000..a3963b1bc
--- /dev/null
+++ b/packages/pipeline-graph/examples/src/css/animations.css
@@ -0,0 +1,26 @@
+/* sample animation example */
+.loading {
+ --border-angle: 0turn;
+ --main-bg: conic-gradient(from var(--border-angle), #202020, #1d1d1d 5%, #1d1d1d 60%, #202020 95%);
+ --gradient-border: conic-gradient(from var(--border-angle), transparent 25%, #acc3f5, #444957 99%, transparent);
+
+ border: solid 1px transparent !important;
+ background:
+ var(--main-bg) padding-box,
+ var(--gradient-border) border-box,
+ var(--main-bg) border-box !important;
+ background-position: center center;
+ animation: bg-spin 3s linear infinite;
+}
+
+@keyframes bg-spin {
+ to {
+ --border-angle: 1turn;
+ }
+}
+
+@property --border-angle {
+ syntax: '';
+ inherits: true;
+ initial-value: 0turn;
+}
diff --git a/packages/pipeline-graph/examples/src/css/common.css b/packages/pipeline-graph/examples/src/css/common.css
new file mode 100644
index 000000000..331c6311a
--- /dev/null
+++ b/packages/pipeline-graph/examples/src/css/common.css
@@ -0,0 +1,10 @@
+html,
+body {
+ background: #121214;
+ color: white;
+ font-size: 13px;
+ cursor: default;
+ margin: 0px;
+ padding: 0px;
+ font-family: 'Verdana';
+}
diff --git a/packages/pipeline-graph/examples/src/css/modifiers.css b/packages/pipeline-graph/examples/src/css/modifiers.css
new file mode 100644
index 000000000..7c8ea4edc
--- /dev/null
+++ b/packages/pipeline-graph/examples/src/css/modifiers.css
@@ -0,0 +1,16 @@
+/* skeleton example */
+.skeleton .PipelineGraph-LeafContainerNode .node-text {
+ color: transparent;
+ background: #373737;
+}
+
+/* sharp-lines example */
+.sharp-line svg g {
+ stroke-width: max(0.8px, calc(1px / var(--scale)));
+}
+
+/* sharp-borders example */
+.sharp-border .parallel-node > * > .border,
+.sharp-border .serial-node > * > .border {
+ border-width: max(0.8px, calc(1px / var(--scale))) !important;
+}
diff --git a/packages/pipeline-graph/examples/src/css/selection.css b/packages/pipeline-graph/examples/src/css/selection.css
new file mode 100644
index 000000000..200679548
--- /dev/null
+++ b/packages/pipeline-graph/examples/src/css/selection.css
@@ -0,0 +1,11 @@
+.leaf-node .selected {
+ background-color: #333 !important;
+}
+
+.serial-node .selected {
+ background-color: #333 !important;
+}
+
+.parallel-node .selected {
+ background-color: #333 !important;
+}
diff --git a/packages/pipeline-graph/examples/src/example1.tsx b/packages/pipeline-graph/examples/src/example1.tsx
new file mode 100644
index 000000000..8bbcca712
--- /dev/null
+++ b/packages/pipeline-graph/examples/src/example1.tsx
@@ -0,0 +1,202 @@
+import { useEffect, useRef, useState } from 'react'
+
+import { cloneDeep, get, set } from 'lodash-es'
+import { parse } from 'yaml'
+
+import { PipelineGraph } from '../../src/pipeline-graph'
+import { NodeContent } from '../../src/types/node-content'
+import {
+ AnyContainerNodeType,
+ ContainerNode,
+ LeafContainerNodeType,
+ ParallelContainerNodeType,
+ SerialContainerNodeType
+} from '../../src/types/nodes'
+import { getPathPeaces } from '../../src/utils/path-utils'
+import { ApprovalNode } from './nodes/approval-node'
+import { EndNode } from './nodes/end-node'
+import { ParallelGroupNodeContent } from './nodes/parallel-group-node'
+import { SerialGroupContentNode } from './nodes/stage-node'
+import { StartNode } from './nodes/start-node'
+import { StepNode, StepNodeDataType } from './nodes/step-node'
+import { yaml2Nodes } from './parser/yaml2AnyNodes'
+import { pipeline } from './sample-data/pipeline'
+
+import './sample-data/pipeline-data'
+
+import React from 'react'
+
+import { CanvasProvider } from '../../src/context/canvas-provider'
+import { AnyNodeInternal } from '../../src/types/nodes-internal'
+import { CanvasControls } from './canvas/CanvasControls'
+import { getIcon } from './parser/utils'
+import { ContentNodeTypes } from './types/content-node-types'
+
+const nodes: NodeContent[] = [
+ {
+ type: ContentNodeTypes.start,
+ component: StartNode,
+ containerType: ContainerNode.leaf
+ },
+ {
+ type: ContentNodeTypes.end,
+ containerType: ContainerNode.leaf,
+ component: EndNode
+ },
+ {
+ containerType: ContainerNode.leaf,
+ type: ContentNodeTypes.step,
+ component: StepNode
+ },
+ {
+ containerType: ContainerNode.leaf,
+ type: ContentNodeTypes.approval,
+ component: ApprovalNode
+ },
+ {
+ type: ContentNodeTypes.parallel,
+ containerType: ContainerNode.parallel,
+ component: ParallelGroupNodeContent
+ } as NodeContent,
+ {
+ type: ContentNodeTypes.serial,
+ containerType: ContainerNode.serial,
+ component: SerialGroupContentNode
+ } as NodeContent
+]
+
+const yamlObject = parse(pipeline)
+const plData = yaml2Nodes(yamlObject)
+
+const startNode = {
+ type: ContentNodeTypes.start,
+ config: {
+ width: 80,
+ height: 80,
+ hideDeleteButton: true,
+ hideBeforeAdd: true,
+ hideLeftPort: true
+ },
+ data: {}
+} satisfies LeafContainerNodeType
+
+const endNode = {
+ type: ContentNodeTypes.end,
+ config: {
+ width: 80,
+ height: 80,
+ hideDeleteButton: true,
+ hideAfterAdd: true,
+ hideRightPort: true
+ },
+ data: {}
+} satisfies LeafContainerNodeType
+
+plData.unshift(startNode)
+plData.push(endNode)
+
+function Example1({ addStepType }: { addStepType: ContentNodeTypes }) {
+ const [data] = useState(plData)
+
+ if (!data) return null
+
+ return (
+
+
+ {
+ // const newData = cloneDeep(data)
+ // const itemPath = node.path.replace(/^pipeline.children./, '')
+ // const targetNode = get(newData, itemPath) as { data: { selected: boolean } }
+ // targetNode.data.selected = !targetNode.data.selected
+ // setData(newData)
+ // }}
+ // onAdd={(node: AnyNodeInternal, position: 'before' | 'after' | 'in') => {
+ // const newData = cloneDeep(data)
+ // const itemPath = node.path.replace(/^pipeline.children./, '')
+
+ // if (position === 'in') {
+ // // add to (empty) array
+ // const childrenPath = itemPath + '.children'
+ // const arr = get(newData, childrenPath, []) as unknown[]
+ // arr.push(getNode(addStepType))
+ // set(newData, childrenPath, arr)
+ // } else {
+ // // add before or after
+ // const { arrayPath, index } = getPathPeaces(itemPath)
+ // const arr = arrayPath ? (get(newData, arrayPath) as unknown[]) : newData
+
+ // arr.splice(position === 'before' ? index : index + 1, 0, getNode(addStepType))
+ // }
+
+ // setData(newData)
+ // }}
+ // onDelete={(node: AnyNodeInternal) => {
+ // const newData = cloneDeep(data)
+ // const { arrayPath, index } = getPathPeaces(node.path.replace(/^pipeline.children./, ''))
+ // const arr = arrayPath ? (get(newData, arrayPath) as unknown[]) : newData
+ // arr.splice(index, 1)
+ // setData(newData)
+ // }}
+ />
+
+
+
+
+ {}}
+ // onAdd={() => {}}
+ // onDelete={() => {}}
+ // onContext={(node, e) => {
+ // e.preventDefault()
+ // console.log(node, e)
+ // const el = document.getElementsByClassName('context-menu')[0] as HTMLDivElement
+ // el.style.display = 'block'
+ // el.style.position = 'absolute'
+ // el.style.zIndex = '1000'
+ // el.style.top = (e as MouseEvent).pageY - 40 + 'px'
+ // el.style.left = (e as MouseEvent).pageX - 40 + 'px'
+ // }}
+ />
+
+
+
+ Add step before
+ Add step after
+ Delete step
+ Preview
+ Open in Yaml
+
+
{children}
+}
diff --git a/packages/pipeline-graph/examples/src/examples.css b/packages/pipeline-graph/examples/src/examples.css
new file mode 100644
index 000000000..3047a8b95
--- /dev/null
+++ b/packages/pipeline-graph/examples/src/examples.css
@@ -0,0 +1,60 @@
+@import './css/common.css';
+@import './css/modifiers.css';
+@import './css/animations.css';
+@import './css/selection.css';
+
+/*
+iframe {
+ display: none;
+} */
+
+/* root container */
+.PipelineGraph-RootContainer {
+ transform-origin: left top;
+ transition: scale 0.2s;
+}
+
+/* nodes container */
+.PipelineGraph-NodesContainer {
+ /* z-index: 20; */
+ position: absolute;
+ width: max-content; /* IMPORTANT: do not delete this */
+}
+
+/* lines container */
+.PipelineGraph-SvgContainer {
+ top: 0px;
+ /* z-index: 30; */
+ position: absolute;
+ pointer-events: none;
+}
+
+/* nodes */
+.delete-node-button {
+ opacity: 0;
+ display: none;
+}
+
+/* delete button >>>*/
+.leaf-node-header:hover > .delete-node-button {
+ opacity: 1;
+ display: flex !important;
+}
+.parallel-node:hover > * > .delete-node-button {
+ opacity: 1;
+ display: flex !important;
+}
+.serial-node:hover > * > .delete-node-button {
+ opacity: 1;
+ display: flex !important;
+}
+
+/* add button */
+.add-node-container .add-node-button {
+ display: none;
+ opacity: 0;
+}
+.add-node-container:hover .add-node-button {
+ display: flex !important;
+ opacity: 1;
+}
diff --git a/packages/pipeline-graph/examples/src/examples.tsx b/packages/pipeline-graph/examples/src/examples.tsx
new file mode 100644
index 000000000..559493c53
--- /dev/null
+++ b/packages/pipeline-graph/examples/src/examples.tsx
@@ -0,0 +1,134 @@
+import { useEffect, useState } from 'react'
+
+import Example1 from './example1'
+import AnimationExample from './example2-animations'
+import PerformanceExample from './example3-performance'
+import SizeExample from './example4-size'
+import { ContentNodeTypes } from './types/content-node-types'
+
+import './examples.css'
+
+import React from 'react'
+
+import ContextExample from './example5-context'
+
+type ExperimentalType = 'sharpLine' | 'sharpBorder' | 'skeleton'
+
+const examplesArr = [
+ {
+ name: 'Demo',
+ component: Example1
+ },
+ {
+ name: 'Animations',
+ component: AnimationExample
+ },
+ {
+ name: 'Performance',
+ component: PerformanceExample
+ },
+ {
+ name: 'Size',
+ component: SizeExample
+ },
+ {
+ name: 'Context',
+ component: ContextExample
+ }
+]
+
+const stepTypesArr = [ContentNodeTypes.step, ContentNodeTypes.serial, ContentNodeTypes.parallel]
+
+const experimentalArr: ExperimentalType[] = ['sharpLine', 'sharpBorder', 'skeleton']
+
+function App() {
+ const [example, setExample] = useState(examplesArr[0].name)
+ const [addStepType, setAddStepType] = useState(ContentNodeTypes.step)
+ const [experimental, setExperimental] = useState({
+ sharpLine: false,
+ sharpBorder: false,
+ skeleton: false
+ })
+
+ const render = () => {
+ switch (example) {
+ case 'Demo':
+ return
+ case 'Animations':
+ return
+ case 'Performance':
+ return
+ case 'Size':
+ return
+ case 'Context':
+ return
+ }
+ }
+
+ useEffect(() => {
+ const { body } = document
+ experimental.sharpLine ? body.classList.add('sharp-line') : body.classList.remove('sharp-line')
+ experimental.sharpBorder ? body.classList.add('sharp-border') : body.classList.remove('sharp-border')
+ experimental.skeleton ? body.classList.add('skeleton') : body.classList.remove('skeleton')
+ }, [experimental])
+
+ return (
+ <>
+
+
+ {examplesArr.map(exampleItem => (
+
+ ))}
+
+
+ {stepTypesArr.map(stepTypeItem => (
+
+ {
+ setAddStepType(stepTypeItem)
+ }}
+ type="radio"
+ id={stepTypeItem}
+ name={stepTypeItem}
+ value={ContentNodeTypes.step}
+ checked={addStepType === stepTypeItem}
+ />
+
+
+ ))}
+
+
+ {experimentalArr.map(experimentalItem => (
+
+ {
+ setExperimental({ ...experimental, [experimentalItem]: !experimental[experimentalItem] })
+ }}
+ />
+
+
+ ))}
+
+
+
{data?.icon}
+
+ {name}
+
+ {props.node.path}
+
+
END
+}
diff --git a/packages/pipeline-graph/examples/src/nodes/form-node.tsx b/packages/pipeline-graph/examples/src/nodes/form-node.tsx
new file mode 100644
index 000000000..d2e0fd6e9
--- /dev/null
+++ b/packages/pipeline-graph/examples/src/nodes/form-node.tsx
@@ -0,0 +1,39 @@
+import React from 'react'
+
+import { LeafNodeInternalType } from '../../../src/types/nodes-internal'
+
+export interface FormNodeDataType {
+ yamlPath: string
+ name: string
+ icon?: React.ReactElement
+ state?: 'success' | 'loading'
+}
+
+export function FormNode(props: { node: LeafNodeInternalType }) {
+ const { node } = props
+ const { data } = node
+
+ const style: React.CSSProperties = {
+ height: '100%',
+ width: '100%',
+ boxSizing: 'border-box',
+ border: '1px solid #454545',
+ borderRadius: '6px',
+ wordBreak: 'break-all',
+ fontSize: '11px',
+ fontFamily: 'Verdana',
+ background: 'linear-gradient(-47deg, rgba(152, 150, 172, 0.05) 0%, rgba(177, 177, 177, 0.15) 100%)'
+ }
+
+ return (
+
+ )
+}
diff --git a/packages/pipeline-graph/examples/src/nodes/parallel-group-node.tsx b/packages/pipeline-graph/examples/src/nodes/parallel-group-node.tsx
new file mode 100644
index 000000000..1c2327856
--- /dev/null
+++ b/packages/pipeline-graph/examples/src/nodes/parallel-group-node.tsx
@@ -0,0 +1,65 @@
+import React from 'react'
+
+import cx from 'classnames'
+
+import { ParallelNodeInternalType } from '../../../src/types/nodes-internal'
+
+export interface ParallelGroupContentNodeDataType {
+ yamlPath: string
+ name: string
+ icon?: React.ReactElement
+ state?: 'success' | 'loading'
+ selected?: boolean
+}
+
+export function ParallelGroupNodeContent(props: {
+ node: ParallelNodeInternalType
+ children: React.ReactElement
+}) {
+ const { node, children } = props
+ const { data } = node
+
+ const name = `Parallel - ${node.path} (${node.children.length})`
+
+ return (
+
+
+
+
+ {name}
+
+
+ {children}
+
+
+
+
+ {name}
+
+
+ {children}
+
+
+
+
+ {name}
+
+
+ {children}
+
START
+}
diff --git a/packages/pipeline-graph/examples/src/nodes/step-node.tsx b/packages/pipeline-graph/examples/src/nodes/step-node.tsx
new file mode 100644
index 000000000..89ca847c9
--- /dev/null
+++ b/packages/pipeline-graph/examples/src/nodes/step-node.tsx
@@ -0,0 +1,47 @@
+import React from 'react'
+
+import cx from 'classnames'
+
+import { LeafNodeInternalType } from '../../../src/types/nodes-internal'
+
+export interface StepNodeDataType {
+ yamlPath: string
+ name: string
+ icon?: React.ReactElement
+ state?: 'success' | 'loading'
+ selected?: boolean
+}
+
+export function StepNode(props: { node: LeafNodeInternalType }) {
+ const { node } = props
+ const { data } = node
+
+ const style: React.CSSProperties = {
+ height: '100%',
+ width: '100%',
+ boxSizing: 'border-box',
+ border: '1px solid #454545',
+ borderRadius: '6px',
+ wordBreak: 'break-all',
+ fontSize: '11px',
+ fontFamily: 'Verdana',
+ background: 'linear-gradient(-47deg, rgba(152, 150, 172, 0.05) 0%, rgba(177, 177, 177, 0.15) 100%)'
+ }
+
+ const name = data.name ?? 'Step'
+
+ return (
+
+
{data?.icon}
+
+ {name}
+
+ {props.node.path}
+
+
+ {idx % 2 ? (
+
+ ) : (
+
+ )}
+
+ )
+}
diff --git a/packages/pipeline-graph/examples/src/parser/yaml2AnyNodes.tsx b/packages/pipeline-graph/examples/src/parser/yaml2AnyNodes.tsx
new file mode 100644
index 000000000..3af65baad
--- /dev/null
+++ b/packages/pipeline-graph/examples/src/parser/yaml2AnyNodes.tsx
@@ -0,0 +1,156 @@
+import {
+ AnyContainerNodeType,
+ LeafContainerNodeType,
+ ParallelContainerNodeType,
+ SerialContainerNodeType
+} from '../../../src/types/nodes'
+import { ParallelGroupContentNodeDataType } from '../nodes/parallel-group-node'
+import { StageNodeContentType } from '../nodes/stage-node'
+import { StepNodeDataType } from '../nodes/step-node'
+import { ContentNodeTypes } from '../types/content-node-types'
+import { getIcon } from './utils'
+
+export const yaml2Nodes = (
+ yamlObject: Record,
+ options: { maxWidth?: number } = { maxWidth: 140 }
+): AnyContainerNodeType[] => {
+ const nodes: AnyContainerNodeType[] = []
+
+ const stages = yamlObject?.pipeline?.stages
+ if (stages) {
+ const stagesNodes = processStages(stages, '', options)
+ nodes.push(...stagesNodes)
+ }
+
+ return nodes
+}
+
+const getGroupKey = (stage: Record): 'group' | 'parallel' | undefined => {
+ if ('group' in stage) return 'group'
+ else if ('parallel' in stage) return 'parallel'
+ return undefined
+}
+
+const processStages = (stages: any[], currentPath: string, options: { maxWidth?: number }): AnyContainerNodeType[] => {
+ return stages.map((stage, idx) => {
+ // parallel stage
+ const groupKey = getGroupKey(stage)
+ if (groupKey === 'group') {
+ const name = stage.name ?? `Serial group ${idx}`
+ const path = `${currentPath}.${idx}.${groupKey}.stages`
+
+ return {
+ type: ContentNodeTypes.serial,
+ config: {
+ minWidth: 140,
+ hideDeleteButton: false,
+ hideCollapseButton: false
+ },
+ data: {
+ yamlPath: path,
+ name
+ } satisfies StageNodeContentType,
+
+ children: processStages(stage[groupKey].stages, path, options)
+ } satisfies SerialContainerNodeType
+ } else if (groupKey === 'parallel') {
+ const name = stage.name ?? `Parallel group ${idx}`
+ const path = `${currentPath}.${idx}.${groupKey}.stages`
+
+ return {
+ type: ContentNodeTypes.parallel,
+ config: {
+ minWidth: 140,
+ hideDeleteButton: false,
+ hideCollapseButton: false
+ },
+ data: {
+ yamlPath: path,
+ name
+ } satisfies ParallelGroupContentNodeDataType,
+ children: processStages(stage[groupKey].stages, path, options)
+ } satisfies ParallelContainerNodeType
+ }
+ // regular stage
+ else {
+ const name = stage.name ?? `Stage ${idx}`
+ const path = `${currentPath}.${idx}`
+
+ return {
+ type: ContentNodeTypes.stage,
+ config: {
+ minWidth: 140,
+ hideDeleteButton: false,
+ hideCollapseButton: false
+ },
+ data: {
+ yamlPath: path,
+ name
+ } satisfies StageNodeContentType,
+ children: processSteps(stage.steps, path, options)
+ } satisfies SerialContainerNodeType
+ }
+ })
+}
+
+const processSteps = (steps: any[], currentPath: string, options: { maxWidth?: number }): AnyContainerNodeType[] => {
+ return steps.map((step, idx) => {
+ // parallel stage
+ const groupKey = getGroupKey(step)
+ if (groupKey === 'group') {
+ const name = step.name ?? `Step group ${idx}`
+ const path = `${currentPath}.${idx}.${groupKey}.steps`
+
+ return {
+ type: ContentNodeTypes.serial,
+ config: {
+ minWidth: 140,
+ hideDeleteButton: false,
+ hideCollapseButton: false
+ },
+ data: {
+ yamlPath: path,
+ name
+ } satisfies StageNodeContentType,
+
+ children: processSteps(step[groupKey].steps, path, options)
+ } satisfies SerialContainerNodeType
+ } else if (groupKey === 'parallel') {
+ const name = step.name ?? `Parallel group ${idx}`
+ const path = `${currentPath}.${idx}.${groupKey}.steps`
+
+ return {
+ type: ContentNodeTypes.parallel,
+ config: {
+ minWidth: 140, // TMP
+ hideDeleteButton: false,
+ hideCollapseButton: false
+ },
+ data: {
+ yamlPath: path,
+ name
+ } satisfies ParallelGroupContentNodeDataType,
+ children: processSteps(step[groupKey].steps, path, options)
+ } satisfies ParallelContainerNodeType
+ }
+ // regular step
+ else {
+ const name = step.name ?? `Step ${idx}`
+
+ const path = `${currentPath}.${idx}`
+ return {
+ type: ContentNodeTypes.step,
+ config: {
+ ...options,
+ hideDeleteButton: false,
+ selectable: true
+ },
+ data: {
+ yamlPath: path,
+ name,
+ icon: getIcon(idx)
+ } satisfies StepNodeDataType
+ } satisfies LeafContainerNodeType
+ }
+ })
+}
diff --git a/packages/pipeline-graph/examples/src/sample-data/pipeline-data.tsx b/packages/pipeline-graph/examples/src/sample-data/pipeline-data.tsx
new file mode 100644
index 000000000..357e8a325
--- /dev/null
+++ b/packages/pipeline-graph/examples/src/sample-data/pipeline-data.tsx
@@ -0,0 +1,193 @@
+import { AnyContainerNodeType } from '../../../src/types/nodes'
+import { getIcon } from '../parser/utils'
+
+const config = { width: 140 }
+
+const getChildren = (count: number, state = 'success'): AnyContainerNodeType[] =>
+ Array(count)
+ .fill(1)
+ .map((_, idx) => ({
+ type: 'step',
+ config: { width: 140, maxWidth: 140 },
+ data: { icon: getIcon(idx), state }
+ }))
+
+const getPipelineInternal = ({
+ parallelChildren,
+ serialChildren,
+ state
+}: {
+ parallelChildren: number
+ serialChildren: number
+ state: 'loading' | 'success'
+}): AnyContainerNodeType[] => [
+ {
+ type: 'start',
+ config: {
+ width: 60,
+ height: 60,
+ hideLeftPort: true,
+ hideDeleteButton: true
+ },
+ data: {}
+ },
+ {
+ type: 'step',
+ config: { width: 250, height: 250 },
+ data: { name: 'VERY LARGE STEP NODE', icon: getIcon(1) }
+ },
+ { type: 'approval', config: { width: 100, height: 100 }, data: {} },
+ { type: 'approval', config: { width: 200, height: 200 }, data: {} },
+ { type: 'step', config, data: { icon: getIcon(3), state } },
+ {
+ type: 'serial',
+ children: getChildren(serialChildren, state),
+ config: { minWidth: 140, minHeight: 0 },
+ data: {}
+ },
+ {
+ type: 'parallel',
+ children: [
+ {
+ type: 'serial',
+ children: getChildren(serialChildren),
+ config: { minWidth: 140, minHeight: 0 },
+ data: {}
+ },
+ {
+ type: 'serial',
+ children: getChildren(serialChildren),
+ config: { minWidth: 140, minHeight: 0 },
+ data: {}
+ }
+ ],
+ config: { minWidth: 140, minHeight: 0 },
+ data: {}
+ },
+ {
+ type: 'serial',
+ children: [
+ {
+ type: 'parallel',
+ children: getChildren(parallelChildren),
+ config: { minWidth: 140, minHeight: 0 },
+ data: {}
+ },
+ {
+ type: 'parallel',
+ children: [
+ {
+ type: 'parallel',
+ children: getChildren(parallelChildren, state),
+ config: { minWidth: 140, minHeight: 0 },
+ data: {}
+ },
+ {
+ type: 'step',
+ config,
+ data: { icon: getIcon(4) }
+ }
+ ],
+ config: { minWidth: 140, minHeight: 0 },
+ data: {}
+ }
+ ],
+ config: { minWidth: 140, minHeight: 0 },
+ data: {}
+ },
+ {
+ type: 'serial',
+ children: [
+ {
+ type: 'parallel',
+ children: [
+ {
+ type: 'parallel',
+ children: getChildren(parallelChildren),
+ config: { minWidth: 140, minHeight: 0 },
+ data: {}
+ },
+ {
+ type: 'parallel',
+ children: getChildren(parallelChildren),
+ config: { minWidth: 140, minHeight: 0 },
+ data: {}
+ }
+ ],
+ config: { minWidth: 140, minHeight: 0 },
+ data: {}
+ },
+ {
+ type: 'parallel',
+ children: [
+ {
+ type: 'parallel',
+ children: [
+ {
+ type: 'parallel',
+ children: getChildren(parallelChildren),
+ config: { minWidth: 140, minHeight: 0 },
+ data: {}
+ },
+ {
+ type: 'parallel',
+ children: getChildren(parallelChildren),
+ config: { minWidth: 140, minHeight: 0 },
+ data: {}
+ }
+ ],
+ config: { minWidth: 140, minHeight: 0 },
+ data: {}
+ }
+ ],
+ config: { minWidth: 140, minHeight: 0 },
+ data: {}
+ }
+ ],
+ config: { minWidth: 140, minHeight: 0 },
+ data: {}
+ },
+ {
+ type: 'parallel',
+ children: [
+ { type: 'step', config, data: { icon: getIcon(5) } },
+ {
+ type: 'parallel',
+ children: getChildren(parallelChildren),
+ config: { minWidth: 140, minHeight: 0 },
+ data: {}
+ }
+ ],
+ config: { minWidth: 140, minHeight: 0 },
+ data: {}
+ },
+ { type: 'step', config, data: { icon: getIcon(6) } },
+ {
+ type: 'end',
+ config: {
+ width: 160,
+ height: 160,
+ hideRightPort: true,
+ hideDeleteButton: true
+ },
+ data: {}
+ }
+]
+
+/** utility for creating pipelines for testing */
+export const getPipeline = (repeat = 1, parallel = 5, serial = 3, state: 'loading' | 'success' = 'success') => {
+ let largePipelineInternal: AnyContainerNodeType[] = []
+
+ for (let i = 0; i < repeat; i++) {
+ largePipelineInternal = [
+ ...largePipelineInternal,
+ ...getPipelineInternal({
+ parallelChildren: parallel,
+ serialChildren: serial,
+ state
+ })
+ ]
+ }
+
+ return largePipelineInternal
+}
diff --git a/packages/pipeline-graph/examples/src/sample-data/pipeline.ts b/packages/pipeline-graph/examples/src/sample-data/pipeline.ts
new file mode 100644
index 000000000..5dc4ca710
--- /dev/null
+++ b/packages/pipeline-graph/examples/src/sample-data/pipeline.ts
@@ -0,0 +1,42 @@
+export const pipeline = `
+pipeline:
+ stages:
+ - group:
+ stages:
+ - steps:
+ - run: go build
+ - run: go test
+ - steps:
+ - run: npm run
+ - run: npm test
+ - group:
+ stages:
+ - parallel:
+ stages:
+ - steps:
+ - run: go build
+ - run: go test
+ - group:
+ steps:
+ - run: go build
+ - run: go test
+ - steps:
+ - parallel:
+ steps:
+ - run: go build
+ - run: go build
+ - group:
+ steps:
+ - run: go build
+ - run: go build
+ - parallel:
+ steps:
+ - run: go build
+ - run: go build
+ - group:
+ steps:
+ - run: go build
+ - run: go build
+ - run: npm run
+ - run: npm test
+`;
diff --git a/packages/pipeline-graph/examples/src/sample-data/simple-pipeline.ts b/packages/pipeline-graph/examples/src/sample-data/simple-pipeline.ts
new file mode 100644
index 000000000..049904ac0
--- /dev/null
+++ b/packages/pipeline-graph/examples/src/sample-data/simple-pipeline.ts
@@ -0,0 +1,13 @@
+export const pipeline = `
+pipeline:
+ stages:
+ - group:
+ stages:
+ - steps:
+ - run: go build
+ - run: go test
+ - steps:
+ - run: npm run
+ - run: npm test
+
+`
diff --git a/packages/pipeline-graph/examples/src/types/content-node-types.ts b/packages/pipeline-graph/examples/src/types/content-node-types.ts
new file mode 100644
index 000000000..9fb905dad
--- /dev/null
+++ b/packages/pipeline-graph/examples/src/types/content-node-types.ts
@@ -0,0 +1,10 @@
+export enum ContentNodeTypes {
+ start = "start",
+ end = "end",
+ step = "step",
+ approval = "approval",
+ parallel = "parallel",
+ serial = "serial",
+ stage = "serial",
+ form = "form",
+}
diff --git a/packages/pipeline-graph/package.json b/packages/pipeline-graph/package.json
new file mode 100644
index 000000000..d048fc7ae
--- /dev/null
+++ b/packages/pipeline-graph/package.json
@@ -0,0 +1,46 @@
+{
+ "name": "@harnessio/pipeline-graph",
+ "version": "1.0.0",
+ "private": false,
+ "author": "Harness Inc.",
+ "license": "Apache-2.0",
+ "type": "module",
+ "module": "./dist/index.js",
+ "main": "./dist/index.js",
+ "files": [
+ "dist"
+ ],
+ "types": "./dist/index.d.ts",
+ "scripts": {
+ "examples": "vite dev --config vite.config.dev.ts",
+ "dev": "vite build --watch",
+ "build": "vite build"
+ },
+ "peerDependencies": {
+ "@types/react": "^18.3.1",
+ "@types/react-dom": "^18.3.1",
+ "react": "^18.3.1",
+ "react-dom": "^18.3.1"
+ },
+ "devDependencies": {
+ "@types/lodash-es": "^4.17.12",
+ "@types/node": "^22.10.1",
+ "@types/react": "^18.3.1",
+ "@types/react-dom": "^18.3.1",
+ "@vitejs/plugin-react-swc": "^3.7.2",
+ "vite": "^6.0.2",
+ "vite-plugin-dts": "^4.3.0",
+ "vite-plugin-svgr": "^4.3.0",
+ "yaml": "^2.6.1"
+ },
+ "lint-staged": {
+ "*.{js,jsx,ts,tsx}": [
+ "eslint ./src --fix",
+ "prettier ./src --write"
+ ]
+ },
+ "dependencies": {
+ "classnames": "^2.5.1",
+ "lodash-es": "^4.17.21"
+ }
+}
diff --git a/packages/pipeline-graph/public/pipeline-graph.png b/packages/pipeline-graph/public/pipeline-graph.png
new file mode 100644
index 000000000..bee41419c
Binary files /dev/null and b/packages/pipeline-graph/public/pipeline-graph.png differ
diff --git a/packages/pipeline-graph/src/components/canvas/canvas-utils.ts b/packages/pipeline-graph/src/components/canvas/canvas-utils.ts
new file mode 100644
index 000000000..f8605ad1c
--- /dev/null
+++ b/packages/pipeline-graph/src/components/canvas/canvas-utils.ts
@@ -0,0 +1,42 @@
+export interface MousePoint {
+ clientX: number
+ clientY: number
+}
+
+interface CalculateTransformArgs {
+ originX?: number
+ originY?: number
+ panX?: number
+ panY?: number
+ scaleDiff?: number
+ currentTranslateX?: number
+ currentTranslateY?: number
+ currentScale?: number
+}
+
+export function calculateTransform(args: CalculateTransformArgs = {}) {
+ const {
+ originX = 0,
+ originY = 0,
+ panX = 0,
+ panY = 0,
+ scaleDiff = 1,
+ currentTranslateX = 0,
+ currentTranslateY = 0,
+ currentScale = 1
+ } = args
+
+ const matrix = new DOMMatrix()
+ .translate(panX, panY)
+ .translate(originX, originY)
+ .translate(currentTranslateX, currentTranslateY)
+ .scale(scaleDiff)
+ .translate(-originX, -originY)
+ .scale(currentScale)
+
+ return {
+ translateX: matrix.e,
+ translateY: matrix.f,
+ scale: matrix.a
+ }
+}
diff --git a/packages/pipeline-graph/src/components/canvas/canvas.css b/packages/pipeline-graph/src/components/canvas/canvas.css
new file mode 100644
index 000000000..815228286
--- /dev/null
+++ b/packages/pipeline-graph/src/components/canvas/canvas.css
@@ -0,0 +1,12 @@
+.PipelineGraph-Canvas {
+ display: block;
+ overflow: hidden;
+ touch-action: none;
+ height: 100%;
+}
+
+.PipelineGraph-Canvas > div {
+ transform: translate(var(--x), var(--y)) scale(var(--scale));
+ transform-origin: top left;
+ will-change: transform;
+}
diff --git a/packages/pipeline-graph/src/components/canvas/canvas.tsx b/packages/pipeline-graph/src/components/canvas/canvas.tsx
new file mode 100644
index 000000000..dbc819846
--- /dev/null
+++ b/packages/pipeline-graph/src/components/canvas/canvas.tsx
@@ -0,0 +1,140 @@
+import React, { useEffect, useRef } from 'react'
+
+import { useCanvasContext } from '../../context/canvas-provider'
+import { calculateTransform, MousePoint } from './canvas-utils'
+
+import './canvas.css'
+
+export function Canvas({ children }: React.PropsWithChildren) {
+ const { setCanvasTransform, canvasTransformRef, config } = useCanvasContext()
+
+ const mainRef = useRef(null)
+
+ // handle zoom-to-pinch (wheel)
+ useEffect(() => {
+ if (mainRef.current) {
+ const handler = (event: WheelEvent) => {
+ const targetEl = mainRef.current?.children[0] as HTMLDivElement | undefined
+
+ if (!targetEl || !mainRef.current) return
+
+ event.preventDefault()
+
+ if (!event.ctrlKey) {
+ const newTransform = calculateTransform({
+ scaleDiff: 1,
+ originX: event.deltaX,
+ originY: event.deltaY,
+ panX: -event.deltaX,
+ panY: -event.deltaY,
+ currentScale: canvasTransformRef.current.scale,
+ currentTranslateX: canvasTransformRef.current.translateX,
+ currentTranslateY: canvasTransformRef.current.translateY
+ })
+
+ setCanvasTransform(newTransform)
+
+ canvasTransformRef.current = newTransform
+
+ return
+ }
+
+ const currentRect = targetEl.getBoundingClientRect()
+
+ let { deltaY } = event
+ const { ctrlKey, deltaMode } = event
+
+ if (deltaMode === 1) {
+ // 1 = "lines", 0 = "pixels"
+ deltaY *= 15
+ }
+
+ const divisor = ctrlKey ? 100 : 250
+ const scaleDiff = 1 - deltaY / divisor
+
+ const newTransform = calculateTransform({
+ scaleDiff,
+ originX: event.clientX - currentRect.left,
+ originY: event.clientY - currentRect.top,
+ currentScale: canvasTransformRef.current.scale,
+ currentTranslateX: canvasTransformRef.current.translateX,
+ currentTranslateY: canvasTransformRef.current.translateY
+ })
+
+ if (newTransform.scale < config.minScale) return
+
+ setCanvasTransform(newTransform)
+ canvasTransformRef.current = newTransform
+ }
+
+ mainRef.current.addEventListener('wheel', handler)
+
+ return () => {
+ mainRef.current?.removeEventListener('wheel', handler)
+ }
+ }
+ }, [mainRef])
+
+ // handle pan (mousedown/move/up)
+ const latestPointRef = useRef(null)
+
+ const mouseMoveHandler = (event: MouseEvent) => {
+ const targetEl = mainRef.current?.children[0] as HTMLDivElement | undefined
+
+ const prevPoint = latestPointRef.current
+ const currPoint = event
+
+ if (!targetEl || !mainRef.current || !prevPoint || !currPoint) return
+
+ event.preventDefault()
+
+ const currentRect = targetEl.getBoundingClientRect()
+
+ const originX = prevPoint.clientX - currentRect.left
+ const originY = prevPoint.clientY - currentRect.top
+
+ const newTransform = calculateTransform({
+ originX,
+ originY,
+ scaleDiff: 1,
+ panX: currPoint.clientX - prevPoint.clientX,
+ panY: currPoint.clientY - prevPoint.clientY,
+ currentScale: canvasTransformRef.current.scale,
+ currentTranslateX: canvasTransformRef.current.translateX,
+ currentTranslateY: canvasTransformRef.current.translateY
+ })
+
+ setCanvasTransform(newTransform)
+ canvasTransformRef.current = newTransform
+ latestPointRef.current = event
+ }
+
+ const mouseUpHandler = (event: MouseEvent) => {
+ mainRef.current?.removeEventListener('mousemove', mouseMoveHandler)
+ document.removeEventListener('mouseup', mouseUpHandler)
+ latestPointRef.current = null
+ }
+
+ const mouseDownHandler = (event: MouseEvent | any) => {
+ if (mainRef.current) {
+ latestPointRef.current = event
+ mainRef.current.addEventListener('mousemove', mouseMoveHandler)
+ document.addEventListener('mouseup', mouseUpHandler)
+ }
+ }
+
+ useEffect(() => {
+ if (mainRef.current) {
+ return () => {
+ mainRef.current?.removeEventListener('mousemove', mouseMoveHandler)
+ document.removeEventListener('mouseup', mouseUpHandler)
+ }
+ }
+ }, [mainRef])
+
+ return (
+
+ {children}
+
+ )
+}
diff --git a/packages/pipeline-graph/src/components/components/collapse.tsx b/packages/pipeline-graph/src/components/components/collapse.tsx
new file mode 100644
index 000000000..f325bd7e2
--- /dev/null
+++ b/packages/pipeline-graph/src/components/components/collapse.tsx
@@ -0,0 +1,23 @@
+// TODO: move this component outside of library
+export default function CollapseButton(props: { collapsed: boolean; onToggle?: () => void }) {
+ const { collapsed, onToggle } = props
+
+ return (
+
+ {collapsed ? '+' : '-'}
+
+ )
+}
diff --git a/packages/pipeline-graph/src/components/nodes/leaf-container.tsx b/packages/pipeline-graph/src/components/nodes/leaf-container.tsx
new file mode 100644
index 000000000..7ce1ed740
--- /dev/null
+++ b/packages/pipeline-graph/src/components/nodes/leaf-container.tsx
@@ -0,0 +1,39 @@
+import { useRef } from 'react'
+
+import { RenderNodeContent } from '../../render/render-node-content'
+import { ContainerNodeProps } from '../../types/container-node'
+import { LeafNodeInternalType } from '../../types/nodes-internal'
+import Port from './port'
+
+export default function LeafNodeContainer(props: ContainerNodeProps) {
+ const { node } = props
+
+ const h = node.config?.height ? node.config?.height + 'px' : 'auto'
+ const w = node.config?.width ? node.config?.width + 'px' : 'auto'
+ const maxW = node.config?.maxWidth ? node.config?.maxWidth + 'px' : 'auto'
+ const maxH = node.config?.maxHeight ? node.config?.maxHeight + 'px' : 'auto'
+ const minW = node.config?.minWidth ? node.config?.minWidth + 'px' : 'auto'
+ const minH = node.config?.minHeight ? node.config?.minHeight + 'px' : 'auto'
+
+ return (
+
+ {!node.config?.hideLeftPort &&
}
+ {!node.config?.hideRightPort &&
}
+
+
+
1 ? 0 : -ADJUSTMENT + 'px',
+ alignItems: 'center',
+ flexShrink: 0 // IMPORTANT: do not remove this
+ }}
+ >
+
+
+
+
+ {
+ collapse(node.path!, !collapsed)
+ }}
+ />
+
+
+
+ {!collapsed && node.children.length > 0 ? (
+
+ {node.children.map((item: AnyNodeInternal, index: number) =>
+ renderNode({
+ node: item,
+ parentNode: node,
+ level: myLevel,
+ parentNodeType: 'parallel',
+ relativeIndex: index,
+ isFirst: index === 0,
+ isLast: index === node.children.length - 1
+ })
+ )}
+
+ ) : undefined}
+
+
1 ? 0 : -ADJUSTMENT + 'px',
+ flexShrink: 0
+ }}
+ >
+
+
+
+
+ {
+ collapse(node.path!, !collapsed)
+ }}
+ />
+
+
+
+ {!collapsed && node.children.length > 0 ? (
+
+ {node.children.map((item: AnyNodeInternal, index: number) =>
+ renderNode({
+ node: item,
+ parentNode: node,
+ level: myLevel,
+ parentNodeType: 'serial',
+ relativeIndex: index,
+ isFirst: index === 0,
+ isLast: index === node.children.length - 1
+ })
+ )}
+
+ ) : undefined}
+
+
+
+
+
+
+ {dataInternalRef.current?.map((node, index) =>
+ renderNode({
+ node,
+ level: 0,
+ parentNodeType: 'serial',
+ relativeIndex: index,
+ isFirst: index === 0,
+ isLast: index === dataInternalRef.current?.length - 1
+ })
+ )}
+
+
diff --git a/packages/views/src/components/pipeline-studio/pipeline-studio-footer-bar/pipeline-studio-footer-bar.tsx b/packages/views/src/components/pipeline-studio/pipeline-studio-footer-bar/pipeline-studio-footer-bar.tsx
index d9b6a4790..c29cab694 100644
--- a/packages/views/src/components/pipeline-studio/pipeline-studio-footer-bar/pipeline-studio-footer-bar.tsx
+++ b/packages/views/src/components/pipeline-studio/pipeline-studio-footer-bar/pipeline-studio-footer-bar.tsx
@@ -79,7 +79,7 @@ const PipelineStudioFooterBar: React.FC
= (props: