Continue import of graph POC components

packages/graph/src/components/Graph/Graph.js

@@ -0,0 +1,126 @@
+/*
+Copyright 2022-2023 The Tekton Authors
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+    http://www.apache.org/licenses/LICENSE-2.0
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+/* istanbul ignore file */
+
+import React, { useEffect, useState } from 'react';
+import ELK from 'elkjs/lib/elk.bundled';
+
+import { ArrowRightMarker } from '@carbon/charts-react/diagrams/Marker';
+
+import Edge from '../Edge';
+import Node from '../Node/';
+
+function buildEdges({ direction, edges }) {
+  return edges.map((edge, i) => {
+    // eslint-disable-next-line react/no-array-index-key
+    return <Edge direction={direction} key={`edge_${i}`} edge={edge} />;
+  });
+}
+
+function buildNodes(nodes) {
+  return nodes.map((node, i) => {
+    return (
+      <Node
+        id={node.id}
+        key={`node_${i}`} // eslint-disable-line react/no-array-index-key
+        x={node.x}
+        y={node.y}
+        height={node.height}
+        width={node.width}
+        status={node.status}
+        title={node.title}
+        type={node.type}
+      />
+    );
+  });
+}
+
+export default function Graph({
+  direction = 'RIGHT',
+  id,
+  nodes,
+  edges,
+  type = 'detailed'
+}) {
+  const elk = new ELK({
+    defaultLayoutOptions: {
+      'elk.algorithm': 'layered',
+      'elk.direction': direction,
+      'elk.edgeRouting': 'ORTHOGONAL',
+      'elk.layered.mergeEdges': true, // avoid multiple input / output ports per node
+      // TODO: test
+      // 'elk.layered.nodePlacement.bk.fixedAlignment': 'BALANCED',
+      // 'elk.layered.nodePlacement.strategy': 'BRANDES_KOEPF',
+      // 'elk.layered.nodePlacement.strategy': 'NETWORK_SIMPLEX',
+      // 'crossingMinimization.semiInteractive': true,
+      // 'elk.layered.spacing.edgeNodeBetweenLayers': '50',
+      // 'elk.layered.unnecessaryBendpoints': true,
+      // 'org.eclipse.elk.layered.layering.strategy': 'INTERACTIVE',
+      // 'elk.padding': '[left=50, top=50, right=50, bottom=50]',
+      // portConstraints: 'FIXED_ORDER', // this gives correct node order but ignores mergeEdges and has other issues
+      // 'elk.layered.considerModelOrder.strategy': 'NODES_AND_EDGES',
+      // 'elk.layered.considerModelOrder.crossingCounterNodeInfluence': 0.001,
+      // 'elk.layered.considerModelOrder.crossingCounterPortInfluence': 0.001,
+      separateConnectedComponents: false,
+      'spacing.nodeNode': type === 'detailed' ? 20 : 5,
+      'spacing.nodeNodeBetweenLayers': type === 'detailed' ? 50 : 20
+    }
+  });
+
+  const [positions, setPositions] = useState(null);
+
+  const graph = {
+    id,
+    children: nodes,
+    edges
+  };
+
+  useEffect(() => {
+    elk
+      .layout(graph)
+      .then(g => setPositions(g))
+      .catch(console.error); // eslint-disable-line no-console
+  }, [direction]);
+
+  if (!positions) {
+    return null;
+  }
+
+  const {
+    children: graphNodes,
+    edges: graphEdges,
+    height: graphHeight,
+    width: graphWidth
+  } = positions;
+
+  const edgeElements = buildEdges({ direction, edges: graphEdges });
+  const nodeElements = buildNodes(graphNodes);
+
+  return (
+    <div
+      className="tkn--pipeline-graph"
+      // style={{
+      //   height: graphHeight,
+      //   width: graphWidth
+      // }}
+    >
+      <svg style={{ height: graphHeight, width: graphWidth }}>
+        <defs>
+          <ArrowRightMarker id="arrowRight" />
+        </defs>
+        {edgeElements}
+        {nodeElements}
+      </svg>
+    </div>
+  );
+}

packages/graph/src/components/Graph/Graph.stories.js

@@ -0,0 +1,187 @@
+/*
+Copyright 2022-2023 The Tekton Authors
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+    http://www.apache.org/licenses/LICENSE-2.0
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React from 'react';
+
+import Graph from './Graph';
+import { cardHeight, cardWidth, shapeSize } from '../../constants';
+import { getDAG } from '../../newGraph';
+
+import {
+  example1,
+  example2,
+  example3,
+  example7Pipeline,
+  example8,
+  finallyPipeline,
+  releasePipeline,
+  whenExpressionsPipelineRun
+} from '../examples';
+
+export default {
+  component: Graph,
+  args: {
+    direction: 'RIGHT',
+    id: 'id'
+  },
+  argTypes: {
+    direction: {
+      control: { type: 'inline-radio' },
+      options: ['DOWN', 'RIGHT']
+    }
+  },
+  parameters: {
+    backgrounds: {
+      default: 'gray10'
+    }
+  },
+  title: 'Graph'
+};
+
+const cardConfig = {
+  height: cardHeight,
+  type: 'card',
+  width: cardWidth
+};
+
+const iconConfig = {
+  height: shapeSize,
+  type: 'icon',
+  width: shapeSize
+};
+
+export const Detailed1 = {
+  args: {
+    ...example1(cardConfig)
+  }
+};
+
+export const Detailed2 = {
+  args: {
+    ...example2(cardConfig)
+  }
+};
+
+export const Detailed3 = {
+  args: {
+    ...example3(cardConfig)
+  }
+};
+
+export const Condensed1 = {
+  args: {
+    ...example1(iconConfig),
+    type: 'condensed'
+  }
+};
+
+export const Condensed2 = {
+  args: {
+    ...example2(iconConfig),
+    type: 'condensed'
+  }
+};
+
+export const Condensed3 = {
+  args: {
+    ...example3(iconConfig),
+    type: 'condensed'
+  }
+};
+
+export const DAG1 = {
+  args: {
+    ...getDAG({
+      pipeline: example7Pipeline,
+      pipelineRun: true,
+      trigger: { type: 'manual' }
+    })
+  }
+};
+
+export const DAG2Wide = {
+  args: {
+    ...getDAG({
+      pipeline: releasePipeline,
+      pipelineRun: true,
+      trigger: { type: 'timer' }
+    })
+  }
+};
+
+export const DAG3Finally = {
+  args: {
+    ...getDAG({
+      pipeline: finallyPipeline,
+      pipelineRun: true,
+      trigger: { type: 'git' }
+    })
+  }
+};
+
+export const DAG4WhenExpressions = {
+  args: {
+    ...getDAG({
+      pipeline: { spec: whenExpressionsPipelineRun.spec.pipelineSpec },
+      pipelineRun: true,
+      trigger: { type: 'webhook' }
+    })
+  }
+};
+
+export const DAG5Trigger = {
+  args: {
+    ...getDAG({
+      pipeline: example7Pipeline,
+      pipelineRun: true,
+      trigger: { type: 'trigger' }
+    })
+  }
+};
+
+export const DAG6NoTrigger = {
+  args: {
+    ...getDAG({
+      pipeline: example7Pipeline,
+      pipelineRun: true
+    })
+  }
+};
+
+export const Order = {
+  args: {
+    direction: 'DOWN',
+    ...example8({
+      ...cardConfig,
+      width: cardWidth / 2
+    })
+  },
+  decorators: [
+    Story => (
+      <>
+        <p>
+          Uses data from{' '}
+          <a href="https://reaflow.dev/?path=/story/demos-basic--many-nodes">
+            reaflow &apos;many nodes&apos; story
+          </a>
+          . See{' '}
+          <a href="https://github.com/reaviz/reaflow/blob/b7a4e815e15a2dff0c9481e5841b4a1dd4bf5896/src/layout/elkLayout.ts">
+            config
+          </a>{' '}
+          for comparison.
+        </p>
+        {Story()}
+      </>
+    )
+  ]
+};

packages/graph/src/components/Graph/index.js

@@ -0,0 +1,14 @@
+/*
+Copyright 2023 The Tekton Authors
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+    http://www.apache.org/licenses/LICENSE-2.0
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+export { default } from './Graph';

packages/graph/src/components/Node/Node.stories.js

@@ -12,15 +12,16 @@ limitations under the License.
 */
 
 import Node from './Node';
+import { cardHeight, cardWidth, shapeSize } from '../../constants';
 
 export default {
   component: Node,
   args: {
-    height: 50,
+    height: cardHeight,
     status: 'success',
     title: 'some-task',
     type: 'card',
-    width: 250,
+    width: cardWidth,
     x: 0,
     y: 0
   },
@@ -48,7 +49,7 @@ export default {
   },
   parameters: {
     backgrounds: {
-      default: 'white'
+      default: 'gray10'
     }
   },
   title: 'Node'
@@ -94,7 +95,7 @@ export const Trigger = {
   args: {
     status: 'trigger',
     type: 'icon',
-    width: 24
+    width: shapeSize
   }
 };
 

packages/graph/src/components/StatusIcon/StatusIcon.js

@@ -28,7 +28,7 @@ import {
 
 // TODO: need 'skipped' status (e.g. when expressions)
 const statusIcons = {
-  // dummy: () => <></>,
+  dummy: () => <></>, // eslint-disable-line react/jsx-no-useless-fragment
   failed: FailedIcon,
   git: GitIcon,
   manual: UserIcon,