Add ZoomablePipelineGraph component

Add wrapper component for PipelineGraph that enables pan/zoom functionality.

This is the first pass to get the basic functionality delivered.
Subsequent PRs will build on this to refine the experience.

Known issues:
- clicks to expand/collapse nodes are not currently handled correctly
- some minor layout issues with 'thin' pipelines (very wide / very long)
- styling needs to be applied to container and controls
- missing full set of controls as per design

packages/components/package.json

@@ -14,6 +14,7 @@
     "@formatjs/intl-pluralrules": "^1.2.1",
     "@formatjs/intl-relativetimeformat": "^4.1.1",
     "@tektoncd/dashboard-utils": "file:../utils",
+    "@vx/event": "0.0.192",
     "@vx/network": "0.0.192",
     "ansi-to-react": "^5.0.0",
     "carbon-components": "^10.4.1",

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

@@ -60,15 +60,17 @@ export default class Graph extends Component {
       .then(g => {
         this.setState({
           links: g.edges,
-          nodes: g.children
+          nodes: g.children,
+          width: g.width,
+          height: g.height
         });
       })
       .catch(console.error); // eslint-disable-line no-console
   };
 
   render() {
-    const { height, isSubGraph, onClickStep, onClickTask, width } = this.props;
-    const { links, margin, nodes } = this.state;
+    const { isSubGraph, onClickStep, onClickTask } = this.props;
+    const { height, links, margin, nodes, width } = this.state;
 
     if (!nodes) {
       return null;

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

@@ -18,6 +18,7 @@ import { action } from '@storybook/addon-actions';
 import Node from './Node';
 import Graph from './Graph';
 import PipelineGraph from './PipelineGraph';
+import ZoomablePipelineGraph from './ZoomablePipelineGraph';
 
 import graph from './examples/graph.json';
 import pipeline from './examples/pipeline.json';
@@ -40,7 +41,7 @@ import tasks from './examples/tasks.json';
 const taskProps = {
   type: 'Task',
   label: 'build-and-push',
-  width: 160,
+  width: 200,
   height: 30
 };
 
@@ -50,19 +51,19 @@ const expandedProps = {
       type: 'Step',
       id: '__step_build-and-push__build-image',
       label: 'build-image',
-      width: 160,
+      width: 200,
       height: 30
     },
     {
       type: 'Step',
       id: '__step_build-and-push__push-image',
       label: 'push-image',
-      width: 160,
+      width: 200,
       height: 30
     }
   ],
   edges: [],
-  height: 79
+  height: 90
 };
 
 storiesOf('Graph/Node', module)
@@ -82,9 +83,7 @@ storiesOf('Graph/Node', module)
     <Node {...taskProps} status="success" {...expandedProps} isSelected />
   ));
 
-storiesOf('Graph/Graph', module).add('default', () => (
-  <Graph graph={graph} width={450} height={550} />
-));
+storiesOf('Graph/Graph', module).add('default', () => <Graph graph={graph} />);
 
 storiesOf('Graph/PipelineGraph', module).add('default', () => (
   <PipelineGraph
@@ -95,3 +94,13 @@ storiesOf('Graph/PipelineGraph', module).add('default', () => (
     tasks={tasks}
   />
 ));
+
+storiesOf('Graph/ZoomablePipelineGraph', module).add('default', () => (
+  <ZoomablePipelineGraph
+    onClickStep={action('onClickStep')}
+    onClickTask={action('onClickTask')}
+    pipeline={pipeline}
+    pipelineRun={pipelineRun}
+    tasks={tasks}
+  />
+));

packages/components/src/components/Graph/Node.js

@@ -133,8 +133,6 @@ export default class Node extends Component {
               graph={{ id: `${id}_subgraph`, children, edges }}
               isSubGraph
               onClickStep={this.handleClickStep}
-              width={width}
-              height={height}
             />
           )}
         </g>