diff --git a/frontend/src/components/Graph.test.tsx b/frontend/src/components/Graph.test.tsx
index 96340be29cb..680e426e88e 100644
--- a/frontend/src/components/Graph.test.tsx
+++ b/frontend/src/components/Graph.test.tsx
@@ -16,8 +16,8 @@
 
 import * as dagre from 'dagre';
 import * as React from 'react';
-import { shallow } from 'enzyme';
-import Graph from './Graph';
+import { shallow, mount } from 'enzyme';
+import EnhancedGraph, { Graph } from './Graph';
 import SuccessIcon from '@material-ui/icons/CheckCircle';
 import Tooltip from '@material-ui/core/Tooltip';
 
@@ -43,6 +43,10 @@ const newNode = (label: string, isPlaceHolder?: boolean, color?: string, icon?:
   width: 10,
 });
 
+beforeEach(() => {
+  jest.restoreAllMocks();
+});
+
 describe('Graph', () => {
   it('handles an empty graph', () => {
     expect(shallow(<Graph graph={newGraph()} />)).toMatchSnapshot();
@@ -149,4 +153,19 @@ describe('Graph', () => {
     graph.setEdge('node1', 'node2');
     expect(shallow(<Graph graph={graph} selectedNodeId='node3' />)).toMatchSnapshot();
   });
+
+  it('shows an error message when the graph is invalid', () => {
+    const consoleErrorSpy = jest.spyOn(console, 'error');
+    consoleErrorSpy.mockImplementation(() => null);
+    const graph = newGraph();
+    graph.setEdge('node1', 'node2');
+    const onError = jest.fn();
+    expect(mount(<EnhancedGraph graph={graph} onError={onError} />).html()).toMatchSnapshot();
+    expect(onError).toHaveBeenCalledTimes(1);
+    const [message, additionalInfo] = onError.mock.calls[0];
+    expect(message).toEqual('There was an error rendering the graph.');
+    expect(additionalInfo).toEqual(
+      "There was an error rendering the graph. This is likely a bug in Kubeflow Pipelines. Error message: 'Graph definition is invalid. Cannot get node by 'node1'.'.",
+    );
+  });
 });
diff --git a/frontend/src/components/Graph.tsx b/frontend/src/components/Graph.tsx
index ed8ebe51aeb..f33b5a8b209 100644
--- a/frontend/src/components/Graph.tsx
+++ b/frontend/src/components/Graph.tsx
@@ -110,7 +110,31 @@ interface GraphState {
   hoveredNode?: string;
 }
 
-export default class Graph extends React.Component<GraphProps, GraphState> {
+interface GraphErrorBoundaryProps {
+  onError?: (message: string, additionalInfo: string) => void;
+}
+class GraphErrorBoundary extends React.Component<GraphErrorBoundaryProps> {
+  state = {
+    hasError: false,
+  };
+
+  componentDidCatch(error: Error): void {
+    const message = 'There was an error rendering the graph.';
+    const additionalInfo = `${message} This is likely a bug in Kubeflow Pipelines. Error message: '${error.message}'.`;
+    if (this.props.onError) {
+      this.props.onError(message, additionalInfo);
+    }
+    this.setState({
+      hasError: true,
+    });
+  }
+
+  render() {
+    return this.state.hasError ? <div className={css.root} /> : this.props.children;
+  }
+}
+
+export class Graph extends React.Component<GraphProps, GraphState> {
   private LEFT_OFFSET = 100;
   private TOP_OFFSET = 44;
   private EDGE_THICKNESS = 2;
@@ -154,6 +178,10 @@ export default class Graph extends React.Component<GraphProps, GraphState> {
           if (i === 1) {
             const sourceNode = graph.node(edgeInfo.v);
 
+            if (!sourceNode) {
+              throw new Error(`Graph definition is invalid. Cannot get node by '${edgeInfo.v}'.`);
+            }
+
             // Set the edge's first segment to start at the bottom or top of the source node.
             yStart = downwardPointingSegment
               ? sourceNode.y + sourceNode.height / 2 - 3
@@ -380,3 +408,12 @@ export default class Graph extends React.Component<GraphProps, GraphState> {
     return color.grey;
   }
 }
+
+const EnhancedGraph = (props: GraphProps & GraphErrorBoundaryProps) => (
+  <GraphErrorBoundary onError={props.onError}>
+    <Graph {...props} />
+  </GraphErrorBoundary>
+);
+EnhancedGraph.displayName = 'EnhancedGraph';
+
+export default EnhancedGraph;
diff --git a/frontend/src/components/__snapshots__/Graph.test.tsx.snap b/frontend/src/components/__snapshots__/Graph.test.tsx.snap
index f9dca594ca5..454858c968f 100644
--- a/frontend/src/components/__snapshots__/Graph.test.tsx.snap
+++ b/frontend/src/components/__snapshots__/Graph.test.tsx.snap
@@ -1864,3 +1864,5 @@ exports[`Graph renders a graph with two disparate nodes 1`] = `
   </div>
 </div>
 `;
+
+exports[`Graph shows an error message when the graph is invalid 1`] = `"<div class=\\"root\\"></div>"`;
diff --git a/frontend/src/pages/PipelineDetails.test.tsx b/frontend/src/pages/PipelineDetails.test.tsx
index 855ce625998..5a8ee6e10cc 100644
--- a/frontend/src/pages/PipelineDetails.test.tsx
+++ b/frontend/src/pages/PipelineDetails.test.tsx
@@ -606,7 +606,7 @@ describe('PipelineDetails', () => {
     tree = shallow(<PipelineDetails {...generateProps()} />);
     await getPipelineVersionTemplateSpy;
     await TestUtils.flushPromises();
-    tree.find('Graph').simulate('click', 'some-node-id');
+    clickGraphNode(tree, 'some-node-id');
     expect(tree.state('selectedNodeId')).toBe('some-node-id');
     expect(tree).toMatchSnapshot();
   });
@@ -627,7 +627,7 @@ describe('PipelineDetails', () => {
     tree = shallow(<PipelineDetails {...generateProps()} />);
     await getPipelineVersionTemplateSpy;
     await TestUtils.flushPromises();
-    tree.find('Graph').simulate('click', 'node1');
+    clickGraphNode(tree, 'node1');
     expect(tree).toMatchSnapshot();
   });
 
@@ -650,7 +650,7 @@ describe('PipelineDetails', () => {
     expect(tree).toMatchSnapshot();
   });
 
-  it('closes side panel when close button is clicked', async () => {
+  it('shows correct versions in version selector', async () => {
     tree = shallow(<PipelineDetails {...generateProps()} />);
     await getPipelineVersionTemplateSpy;
     await TestUtils.flushPromises();
@@ -658,3 +658,12 @@ describe('PipelineDetails', () => {
     expect(tree).toMatchSnapshot();
   });
 });
+
+function clickGraphNode(wrapper: ShallowWrapper, nodeId: string) {
+  // TODO: use dom events instead
+  wrapper
+    .find('EnhancedGraph')
+    .dive()
+    .dive()
+    .simulate('click', nodeId);
+}
diff --git a/frontend/src/pages/PipelineDetails.tsx b/frontend/src/pages/PipelineDetails.tsx
index 6e20888da68..98aa3814e65 100644
--- a/frontend/src/pages/PipelineDetails.tsx
+++ b/frontend/src/pages/PipelineDetails.tsx
@@ -270,6 +270,9 @@ class PipelineDetails extends Page<{}, PipelineDetailsState> {
                       graph={this.state.graph}
                       selectedNodeId={selectedNodeId}
                       onClick={id => this.setStateSafe({ selectedNodeId: id })}
+                      onError={(message, additionalInfo) =>
+                        this.props.updateBanner({ message, additionalInfo, mode: 'error' })
+                      }
                     />
 
                     <SidePanel
diff --git a/frontend/src/pages/RunDetails.test.tsx b/frontend/src/pages/RunDetails.test.tsx
index cb85a247d0b..827c76aea0d 100644
--- a/frontend/src/pages/RunDetails.test.tsx
+++ b/frontend/src/pages/RunDetails.test.tsx
@@ -569,7 +569,7 @@ describe('RunDetails', () => {
     tree = shallow(<RunDetails {...generateProps()} />);
     await getRunSpy;
     await TestUtils.flushPromises();
-    tree.find('Graph').simulate('click', 'node1');
+    clickGraphNode(tree, 'node1');
     expect(tree.state('selectedNodeDetails')).toHaveProperty('id', 'node1');
     expect(tree).toMatchSnapshot();
   });
@@ -589,7 +589,7 @@ describe('RunDetails', () => {
     tree = shallow(<RunDetails {...generateProps()} />);
     await getRunSpy;
     await TestUtils.flushPromises();
-    tree.find('Graph').simulate('click', 'node1');
+    clickGraphNode(tree, 'node1');
     expect(tree.state('selectedNodeDetails')).toHaveProperty(
       'phaseMessage',
       'This step is in ' + testRun.run!.status + ' state with this message: some test message',
@@ -611,7 +611,7 @@ describe('RunDetails', () => {
     tree = shallow(<RunDetails {...generateProps()} />);
     await getRunSpy;
     await TestUtils.flushPromises();
-    tree.find('Graph').simulate('click', 'node1');
+    clickGraphNode(tree, 'node1');
     await pathsParser;
     await pathsWithStepsParser;
     await loaderSpy;
@@ -652,7 +652,7 @@ describe('RunDetails', () => {
     tree = shallow(<RunDetails {...generateProps()} />);
     await getRunSpy;
     await TestUtils.flushPromises();
-    tree.find('Graph').simulate('click', 'node1');
+    clickGraphNode(tree, 'node1');
     tree
       .find('MD2Tabs')
       .at(1)
@@ -669,7 +669,7 @@ describe('RunDetails', () => {
     tree = shallow(<RunDetails {...generateProps()} />);
     await getRunSpy;
     await TestUtils.flushPromises();
-    tree.find('Graph').simulate('click', 'node1');
+    clickGraphNode(tree, 'node1');
     tree
       .find('MD2Tabs')
       .at(1)
@@ -685,7 +685,7 @@ describe('RunDetails', () => {
     tree = shallow(<RunDetails {...generateProps()} />);
     await getRunSpy;
     await TestUtils.flushPromises();
-    tree.find('Graph').simulate('click', 'node1');
+    clickGraphNode(tree, 'node1');
     tree
       .find('MD2Tabs')
       .at(1)
@@ -701,7 +701,7 @@ describe('RunDetails', () => {
     tree = shallow(<RunDetails {...generateProps()} />);
     await getRunSpy;
     await TestUtils.flushPromises();
-    tree.find('Graph').simulate('click', 'node1');
+    clickGraphNode(tree, 'node1');
     await TestUtils.flushPromises();
     expect(tree.state('selectedNodeDetails')).toHaveProperty('id', 'node1');
     tree.find('SidePanel').simulate('close');
@@ -717,7 +717,7 @@ describe('RunDetails', () => {
     tree = shallow(<RunDetails {...generateProps()} />);
     await getRunSpy;
     await TestUtils.flushPromises();
-    tree.find('Graph').simulate('click', 'node1');
+    clickGraphNode(tree, 'node1');
     tree
       .find('MD2Tabs')
       .at(1)
@@ -743,7 +743,7 @@ describe('RunDetails', () => {
     tree = shallow(<RunDetails {...generateProps()} />);
     await getRunSpy;
     await TestUtils.flushPromises();
-    tree.find('Graph').simulate('click', 'node1');
+    clickGraphNode(tree, 'node1');
     tree
       .find('MD2Tabs')
       .at(1)
@@ -764,7 +764,7 @@ describe('RunDetails', () => {
     tree = shallow(<RunDetails {...generateProps()} />);
     await getRunSpy;
     await TestUtils.flushPromises();
-    tree.find('Graph').simulate('click', 'node1');
+    clickGraphNode(tree, 'node1');
     tree
       .find('MD2Tabs')
       .at(1)
@@ -789,7 +789,7 @@ describe('RunDetails', () => {
     tree = shallow(<RunDetails {...generateProps()} />);
     await getRunSpy;
     await TestUtils.flushPromises();
-    tree.find('Graph').simulate('click', 'node1');
+    clickGraphNode(tree, 'node1');
     tree
       .find('MD2Tabs')
       .at(1)
@@ -817,7 +817,7 @@ describe('RunDetails', () => {
     tree = shallow(<RunDetails {...generateProps()} />);
     await getRunSpy;
     await TestUtils.flushPromises();
-    tree.find('Graph').simulate('click', 'node1');
+    clickGraphNode(tree, 'node1');
     tree
       .find('MD2Tabs')
       .at(1)
@@ -906,7 +906,7 @@ describe('RunDetails', () => {
       tree = shallow(<RunDetails {...generateProps()} />);
       await getRunSpy;
       await TestUtils.flushPromises();
-      tree.find('Graph').simulate('click', 'node1');
+      clickGraphNode(tree, 'node1');
       tree
         .find('MD2Tabs')
         .at(1)
@@ -922,7 +922,7 @@ describe('RunDetails', () => {
       tree = shallow(<RunDetails {...generateProps()} />);
       await getRunSpy;
       await TestUtils.flushPromises();
-      tree.find('Graph').simulate('click', 'node1');
+      clickGraphNode(tree, 'node1');
       tree
         .find('MD2Tabs')
         .at(1)
@@ -946,7 +946,7 @@ describe('RunDetails', () => {
       tree = shallow(<RunDetails {...generateProps()} />);
       await getRunSpy;
       await TestUtils.flushPromises();
-      tree.find('Graph').simulate('click', 'node1');
+      clickGraphNode(tree, 'node1');
       tree
         .find('MD2Tabs')
         .at(1)
@@ -967,7 +967,7 @@ describe('RunDetails', () => {
       tree = shallow(<RunDetails {...generateProps()} />);
       await getRunSpy;
       await TestUtils.flushPromises();
-      tree.find('Graph').simulate('click', 'node1');
+      clickGraphNode(tree, 'node1');
       tree
         .find('MD2Tabs')
         .at(1)
@@ -992,7 +992,7 @@ describe('RunDetails', () => {
       tree = shallow(<RunDetails {...generateProps()} />);
       await getRunSpy;
       await TestUtils.flushPromises();
-      tree.find('Graph').simulate('click', 'node1');
+      clickGraphNode(tree, 'node1');
       tree
         .find('MD2Tabs')
         .at(1)
@@ -1018,7 +1018,7 @@ describe('RunDetails', () => {
       tree = shallow(<RunDetails {...generateProps()} />);
       await getRunSpy;
       await TestUtils.flushPromises();
-      tree.find('Graph').simulate('click', 'node1');
+      clickGraphNode(tree, 'node1');
       tree
         .find('MD2Tabs')
         .at(1)
@@ -1048,7 +1048,7 @@ describe('RunDetails', () => {
       tree = shallow(<RunDetails {...generateProps()} />);
       await getRunSpy;
       await TestUtils.flushPromises();
-      tree.find('Graph').simulate('click', 'node1');
+      clickGraphNode(tree, 'node1');
       tree
         .find('MD2Tabs')
         .at(1)
@@ -1070,7 +1070,7 @@ describe('RunDetails', () => {
       tree = shallow(<RunDetails {...generateProps()} />);
       await getRunSpy;
       await TestUtils.flushPromises();
-      tree.find('Graph').simulate('click', 'node1');
+      clickGraphNode(tree, 'node1');
       tree
         .find('MD2Tabs')
         .at(1)
@@ -1093,7 +1093,7 @@ describe('RunDetails', () => {
       tree = shallow(<RunDetails {...generateProps()} />);
       await getRunSpy;
       await TestUtils.flushPromises();
-      tree.find('Graph').simulate('click', 'node1');
+      clickGraphNode(tree, 'node1');
       tree
         .find('MD2Tabs')
         .at(1)
@@ -1219,3 +1219,12 @@ describe('RunDetails', () => {
     });
   });
 });
+
+function clickGraphNode(wrapper: ShallowWrapper, nodeId: string) {
+  // TODO: use dom events instead
+  wrapper
+    .find('EnhancedGraph')
+    .dive()
+    .dive()
+    .simulate('click', nodeId);
+}
diff --git a/frontend/src/pages/RunDetails.tsx b/frontend/src/pages/RunDetails.tsx
index 28b85bb0638..7d287c0b1c1 100644
--- a/frontend/src/pages/RunDetails.tsx
+++ b/frontend/src/pages/RunDetails.tsx
@@ -261,6 +261,9 @@ class RunDetails extends Page<RunDetailsProps, RunDetailsState> {
                         graph={graph}
                         selectedNodeId={selectedNodeId}
                         onClick={id => this._selectNode(id)}
+                        onError={(message, additionalInfo) =>
+                          this.props.updateBanner({ message, additionalInfo, mode: 'error' })
+                        }
                       />
 
                       <SidePanel
diff --git a/frontend/src/pages/__snapshots__/PipelineDetails.test.tsx.snap b/frontend/src/pages/__snapshots__/PipelineDetails.test.tsx.snap
index 7bf4c5f29bf..e13548dffcd 100644
--- a/frontend/src/pages/__snapshots__/PipelineDetails.test.tsx.snap
+++ b/frontend/src/pages/__snapshots__/PipelineDetails.test.tsx.snap
@@ -116,182 +116,7 @@ exports[`PipelineDetails closes side panel when close button is clicked 1`] = `
               description="test pipeline description"
             />
           </WithStyles(Paper)>
-          <Graph
-            graph={
-              Graph {
-                "_defaultEdgeLabelFn": [Function],
-                "_defaultNodeLabelFn": [Function],
-                "_edgeLabels": Object {},
-                "_edgeObjs": Object {},
-                "_in": Object {},
-                "_isCompound": false,
-                "_isDirected": true,
-                "_isMultigraph": false,
-                "_label": undefined,
-                "_nodes": Object {},
-                "_out": Object {},
-                "_preds": Object {},
-                "_sucs": Object {},
-              }
-            }
-            onClick={[Function]}
-            selectedNodeId=""
-          />
-          <SidePanel
-            isOpen={false}
-            onClose={[Function]}
-            title=""
-          >
-            <div
-              className="page"
-            >
-              <div
-                className="absoluteCenter"
-              >
-                Unable to retrieve node info
-              </div>
-            </div>
-          </SidePanel>
-          <div
-            className="footer"
-          >
-            <div
-              className="flex footerInfoOffset"
-            >
-              <pure(InfoOutlinedIcon)
-                className="infoIcon"
-              />
-              <span
-                className="infoSpan"
-              >
-                Static pipeline graph
-              </span>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`PipelineDetails closes side panel when close button is clicked 2`] = `
-<div
-  className="page"
->
-  <div
-    className="page"
-  >
-    <MD2Tabs
-      onSwitch={[Function]}
-      selectedTab={0}
-      tabs={
-        Array [
-          "Graph",
-          "Source",
-        ]
-      }
-    />
-    <div
-      className="page"
-    >
-      <div
-        className="page"
-      >
-        <div
-          className="page"
-          style={
-            Object {
-              "overflow": "hidden",
-              "position": "relative",
-            }
-          }
-        >
-          <WithStyles(Paper)
-            className="summaryCard"
-          >
-            <div
-              style={
-                Object {
-                  "alignItems": "baseline",
-                  "display": "flex",
-                  "justifyContent": "space-between",
-                }
-              }
-            >
-              <div
-                className="header"
-              >
-                Summary
-              </div>
-              <WithStyles(Button)
-                color="secondary"
-                onClick={[Function]}
-              >
-                Hide
-              </WithStyles(Button)>
-            </div>
-            <div
-              className="summaryKey"
-            >
-              ID
-            </div>
-            <div>
-              test-pipeline-id
-            </div>
-            <form
-              autoComplete="off"
-            >
-              <WithStyles(FormControl)>
-                <WithStyles(WithFormControlContext(InputLabel))>
-                  Version
-                </WithStyles(WithFormControlContext(InputLabel))>
-                <WithStyles(WithFormControlContext(Select))
-                  inputProps={
-                    Object {
-                      "id": "version-selector",
-                      "name": "selectedVersion",
-                    }
-                  }
-                  onChange={[Function]}
-                  value="test-pipeline-version-id"
-                >
-                  <WithStyles(MenuItem)
-                    key="test-pipeline-version-id"
-                    value="test-pipeline-version-id"
-                  >
-                    test-pipeline-version
-                  </WithStyles(MenuItem)>
-                </WithStyles(WithFormControlContext(Select))>
-              </WithStyles(FormControl)>
-            </form>
-            <div
-              className="summaryKey"
-            >
-              <a
-                target="_blank"
-              >
-                Version source
-              </a>
-            </div>
-            <div
-              className="summaryKey"
-            >
-              Uploaded on
-            </div>
-            <div>
-              9/5/2018, 4:03:02 AM
-            </div>
-            <div
-              className="summaryKey"
-            >
-              Description
-            </div>
-            <Component
-              description="test pipeline description"
-            />
-          </WithStyles(Paper)>
-          <Graph
+          <EnhancedGraph
             graph={
               Graph {
                 "_defaultEdgeLabelFn": [Function],
@@ -310,6 +135,7 @@ exports[`PipelineDetails closes side panel when close button is clicked 2`] = `
               }
             }
             onClick={[Function]}
+            onError={[Function]}
             selectedNodeId=""
           />
           <SidePanel
@@ -382,7 +208,7 @@ exports[`PipelineDetails collapses summary card when summary shown state is fals
             }
           }
         >
-          <Graph
+          <EnhancedGraph
             graph={
               Graph {
                 "_defaultEdgeLabelFn": [Function],
@@ -401,6 +227,7 @@ exports[`PipelineDetails collapses summary card when summary shown state is fals
               }
             }
             onClick={[Function]}
+            onError={[Function]}
             selectedNodeId=""
           />
           <SidePanel
@@ -563,7 +390,7 @@ exports[`PipelineDetails opens side panel on clicked node, shows message when no
               description="test pipeline description"
             />
           </WithStyles(Paper)>
-          <Graph
+          <EnhancedGraph
             graph={
               Graph {
                 "_defaultEdgeLabelFn": [Function],
@@ -582,6 +409,7 @@ exports[`PipelineDetails opens side panel on clicked node, shows message when no
               }
             }
             onClick={[Function]}
+            onError={[Function]}
             selectedNodeId="some-node-id"
           />
           <SidePanel
@@ -738,7 +566,7 @@ exports[`PipelineDetails shows clicked node info in the side panel if it is in t
               description="test pipeline description"
             />
           </WithStyles(Paper)>
-          <Graph
+          <EnhancedGraph
             graph={
               Graph {
                 "_defaultEdgeLabelFn": [Function],
@@ -809,6 +637,7 @@ exports[`PipelineDetails shows clicked node info in the side panel if it is in t
               }
             }
             onClick={[Function]}
+            onError={[Function]}
             selectedNodeId="node1"
           />
           <SidePanel
@@ -891,6 +720,182 @@ exports[`PipelineDetails shows clicked node info in the side panel if it is in t
 </div>
 `;
 
+exports[`PipelineDetails shows correct versions in version selector 1`] = `
+<div
+  className="page"
+>
+  <div
+    className="page"
+  >
+    <MD2Tabs
+      onSwitch={[Function]}
+      selectedTab={0}
+      tabs={
+        Array [
+          "Graph",
+          "Source",
+        ]
+      }
+    />
+    <div
+      className="page"
+    >
+      <div
+        className="page"
+      >
+        <div
+          className="page"
+          style={
+            Object {
+              "overflow": "hidden",
+              "position": "relative",
+            }
+          }
+        >
+          <WithStyles(Paper)
+            className="summaryCard"
+          >
+            <div
+              style={
+                Object {
+                  "alignItems": "baseline",
+                  "display": "flex",
+                  "justifyContent": "space-between",
+                }
+              }
+            >
+              <div
+                className="header"
+              >
+                Summary
+              </div>
+              <WithStyles(Button)
+                color="secondary"
+                onClick={[Function]}
+              >
+                Hide
+              </WithStyles(Button)>
+            </div>
+            <div
+              className="summaryKey"
+            >
+              ID
+            </div>
+            <div>
+              test-pipeline-id
+            </div>
+            <form
+              autoComplete="off"
+            >
+              <WithStyles(FormControl)>
+                <WithStyles(WithFormControlContext(InputLabel))>
+                  Version
+                </WithStyles(WithFormControlContext(InputLabel))>
+                <WithStyles(WithFormControlContext(Select))
+                  inputProps={
+                    Object {
+                      "id": "version-selector",
+                      "name": "selectedVersion",
+                    }
+                  }
+                  onChange={[Function]}
+                  value="test-pipeline-version-id"
+                >
+                  <WithStyles(MenuItem)
+                    key="test-pipeline-version-id"
+                    value="test-pipeline-version-id"
+                  >
+                    test-pipeline-version
+                  </WithStyles(MenuItem)>
+                </WithStyles(WithFormControlContext(Select))>
+              </WithStyles(FormControl)>
+            </form>
+            <div
+              className="summaryKey"
+            >
+              <a
+                target="_blank"
+              >
+                Version source
+              </a>
+            </div>
+            <div
+              className="summaryKey"
+            >
+              Uploaded on
+            </div>
+            <div>
+              9/5/2018, 4:03:02 AM
+            </div>
+            <div
+              className="summaryKey"
+            >
+              Description
+            </div>
+            <Component
+              description="test pipeline description"
+            />
+          </WithStyles(Paper)>
+          <EnhancedGraph
+            graph={
+              Graph {
+                "_defaultEdgeLabelFn": [Function],
+                "_defaultNodeLabelFn": [Function],
+                "_edgeLabels": Object {},
+                "_edgeObjs": Object {},
+                "_in": Object {},
+                "_isCompound": false,
+                "_isDirected": true,
+                "_isMultigraph": false,
+                "_label": undefined,
+                "_nodes": Object {},
+                "_out": Object {},
+                "_preds": Object {},
+                "_sucs": Object {},
+              }
+            }
+            onClick={[Function]}
+            onError={[Function]}
+            selectedNodeId=""
+          />
+          <SidePanel
+            isOpen={false}
+            onClose={[Function]}
+            title=""
+          >
+            <div
+              className="page"
+            >
+              <div
+                className="absoluteCenter"
+              >
+                Unable to retrieve node info
+              </div>
+            </div>
+          </SidePanel>
+          <div
+            className="footer"
+          >
+            <div
+              className="flex footerInfoOffset"
+            >
+              <pure(InfoOutlinedIcon)
+                className="infoIcon"
+              />
+              <span
+                className="infoSpan"
+              >
+                Static pipeline graph
+              </span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
 exports[`PipelineDetails shows empty pipeline details with empty graph 1`] = `
 <div
   className="page"
@@ -1007,7 +1012,7 @@ exports[`PipelineDetails shows empty pipeline details with empty graph 1`] = `
               description="test pipeline description"
             />
           </WithStyles(Paper)>
-          <Graph
+          <EnhancedGraph
             graph={
               Graph {
                 "_defaultEdgeLabelFn": [Function],
@@ -1026,6 +1031,7 @@ exports[`PipelineDetails shows empty pipeline details with empty graph 1`] = `
               }
             }
             onClick={[Function]}
+            onError={[Function]}
             selectedNodeId=""
           />
           <SidePanel
diff --git a/frontend/src/pages/__snapshots__/RunDetails.test.tsx.snap b/frontend/src/pages/__snapshots__/RunDetails.test.tsx.snap
index 72909182ad4..4af1764d634 100644
--- a/frontend/src/pages/__snapshots__/RunDetails.test.tsx.snap
+++ b/frontend/src/pages/__snapshots__/RunDetails.test.tsx.snap
@@ -27,7 +27,7 @@ exports[`RunDetails closes side panel when close button is clicked 1`] = `
         <div
           className="page"
         >
-          <Graph
+          <EnhancedGraph
             graph={
               Graph {
                 "_defaultEdgeLabelFn": [Function],
@@ -46,6 +46,7 @@ exports[`RunDetails closes side panel when close button is clicked 1`] = `
               }
             }
             onClick={[Function]}
+            onError={[Function]}
             selectedNodeId=""
           />
           <SidePanel
@@ -528,7 +529,7 @@ exports[`RunDetails logs tab does not load logs if clicked node status is skippe
         <div
           className="page"
         >
-          <Graph
+          <EnhancedGraph
             graph={
               Graph {
                 "_defaultEdgeLabelFn": [Function],
@@ -547,6 +548,7 @@ exports[`RunDetails logs tab does not load logs if clicked node status is skippe
               }
             }
             onClick={[Function]}
+            onError={[Function]}
             selectedNodeId="node1"
           />
           <SidePanel
@@ -642,7 +644,7 @@ exports[`RunDetails logs tab keeps side pane open and on same tab when logs chan
         <div
           className="page"
         >
-          <Graph
+          <EnhancedGraph
             graph={
               Graph {
                 "_defaultEdgeLabelFn": [Function],
@@ -661,6 +663,7 @@ exports[`RunDetails logs tab keeps side pane open and on same tab when logs chan
               }
             }
             onClick={[Function]}
+            onError={[Function]}
             selectedNodeId="node1"
           />
           <SidePanel
@@ -756,7 +759,7 @@ exports[`RunDetails logs tab loads and shows logs in side pane 1`] = `
         <div
           className="page"
         >
-          <Graph
+          <EnhancedGraph
             graph={
               Graph {
                 "_defaultEdgeLabelFn": [Function],
@@ -775,6 +778,7 @@ exports[`RunDetails logs tab loads and shows logs in side pane 1`] = `
               }
             }
             onClick={[Function]}
+            onError={[Function]}
             selectedNodeId="node1"
           />
           <SidePanel
@@ -870,7 +874,7 @@ exports[`RunDetails logs tab shows error banner atop logs area if fetching logs
         <div
           className="page"
         >
-          <Graph
+          <EnhancedGraph
             graph={
               Graph {
                 "_defaultEdgeLabelFn": [Function],
@@ -889,6 +893,7 @@ exports[`RunDetails logs tab shows error banner atop logs area if fetching logs
               }
             }
             onClick={[Function]}
+            onError={[Function]}
             selectedNodeId="node1"
           />
           <SidePanel
@@ -979,7 +984,7 @@ exports[`RunDetails logs tab shows error banner atop logs area if fetching logs
         <div
           className="page"
         >
-          <Graph
+          <EnhancedGraph
             graph={
               Graph {
                 "_defaultEdgeLabelFn": [Function],
@@ -998,6 +1003,7 @@ exports[`RunDetails logs tab shows error banner atop logs area if fetching logs
               }
             }
             onClick={[Function]}
+            onError={[Function]}
             selectedNodeId="node1"
           />
           <SidePanel
@@ -1088,7 +1094,7 @@ exports[`RunDetails logs tab shows warning banner and link to Stackdriver in log
         <div
           className="page"
         >
-          <Graph
+          <EnhancedGraph
             graph={
               Graph {
                 "_defaultEdgeLabelFn": [Function],
@@ -1107,6 +1113,7 @@ exports[`RunDetails logs tab shows warning banner and link to Stackdriver in log
               }
             }
             onClick={[Function]}
+            onError={[Function]}
             selectedNodeId="node1"
           />
           <SidePanel
@@ -1220,7 +1227,7 @@ exports[`RunDetails logs tab switches to logs tab in side pane 1`] = `
         <div
           className="page"
         >
-          <Graph
+          <EnhancedGraph
             graph={
               Graph {
                 "_defaultEdgeLabelFn": [Function],
@@ -1239,6 +1246,7 @@ exports[`RunDetails logs tab switches to logs tab in side pane 1`] = `
               }
             }
             onClick={[Function]}
+            onError={[Function]}
             selectedNodeId="node1"
           />
           <SidePanel
@@ -1334,7 +1342,7 @@ exports[`RunDetails opens side panel when graph node is clicked 1`] = `
         <div
           className="page"
         >
-          <Graph
+          <EnhancedGraph
             graph={
               Graph {
                 "_defaultEdgeLabelFn": [Function],
@@ -1353,6 +1361,7 @@ exports[`RunDetails opens side panel when graph node is clicked 1`] = `
               }
             }
             onClick={[Function]}
+            onError={[Function]}
             selectedNodeId="node1"
           />
           <SidePanel
@@ -1497,7 +1506,7 @@ exports[`RunDetails shows a one-node graph 1`] = `
         <div
           className="page"
         >
-          <Graph
+          <EnhancedGraph
             graph={
               Graph {
                 "_defaultEdgeLabelFn": [Function],
@@ -1516,6 +1525,7 @@ exports[`RunDetails shows a one-node graph 1`] = `
               }
             }
             onClick={[Function]}
+            onError={[Function]}
             selectedNodeId=""
           />
           <SidePanel
@@ -1574,7 +1584,7 @@ exports[`RunDetails shows clicked node message in side panel 1`] = `
         <div
           className="page"
         >
-          <Graph
+          <EnhancedGraph
             graph={
               Graph {
                 "_defaultEdgeLabelFn": [Function],
@@ -1593,6 +1603,7 @@ exports[`RunDetails shows clicked node message in side panel 1`] = `
               }
             }
             onClick={[Function]}
+            onError={[Function]}
             selectedNodeId="node1"
           />
           <SidePanel
@@ -1700,7 +1711,7 @@ exports[`RunDetails shows clicked node output in side pane 1`] = `
         <div
           className="page"
         >
-          <Graph
+          <EnhancedGraph
             graph={
               Graph {
                 "_defaultEdgeLabelFn": [Function],
@@ -1719,6 +1730,7 @@ exports[`RunDetails shows clicked node output in side pane 1`] = `
               }
             }
             onClick={[Function]}
+            onError={[Function]}
             selectedNodeId="node1"
           />
           <SidePanel
@@ -2168,7 +2180,7 @@ exports[`RunDetails switches to inputs/outputs tab in side pane 1`] = `
         <div
           className="page"
         >
-          <Graph
+          <EnhancedGraph
             graph={
               Graph {
                 "_defaultEdgeLabelFn": [Function],
@@ -2187,6 +2199,7 @@ exports[`RunDetails switches to inputs/outputs tab in side pane 1`] = `
               }
             }
             onClick={[Function]}
+            onError={[Function]}
             selectedNodeId="node1"
           />
           <SidePanel
@@ -2307,7 +2320,7 @@ exports[`RunDetails switches to manifest tab in side pane 1`] = `
         <div
           className="page"
         >
-          <Graph
+          <EnhancedGraph
             graph={
               Graph {
                 "_defaultEdgeLabelFn": [Function],
@@ -2326,6 +2339,7 @@ exports[`RunDetails switches to manifest tab in side pane 1`] = `
               }
             }
             onClick={[Function]}
+            onError={[Function]}
             selectedNodeId="node1"
           />
           <SidePanel
@@ -2454,7 +2468,7 @@ exports[`RunDetails switches to volumes tab in side pane 1`] = `
         <div
           className="page"
         >
-          <Graph
+          <EnhancedGraph
             graph={
               Graph {
                 "_defaultEdgeLabelFn": [Function],
@@ -2473,6 +2487,7 @@ exports[`RunDetails switches to volumes tab in side pane 1`] = `
               }
             }
             onClick={[Function]}
+            onError={[Function]}
             selectedNodeId="node1"
           />
           <SidePanel