Improve runtime graph starting and running experience

frontend/src/Css.tsx

@@ -38,7 +38,7 @@ export const color = {
   theme: '#1a73e8',
   themeDarker: '#0b59dc',
   warningBg: '#f9f9e1',
-  weak: '#999',
+  weak: '#9AA0A6',
 };
 
 export const dimension = {
@@ -223,6 +223,11 @@ export const commonCss = stylesheet({
     paddingBottom: 16,
     paddingTop: 20,
   },
+  infoIcon: {
+    color: color.lowContrast,
+    height: 16,
+    width: 16
+  },
   link: {
     $nest: {
       '&:hover': {

frontend/src/atoms/IconWithTooltip.test.tsx

@@ -0,0 +1,37 @@
+/*
+ * Copyright 2019 Google LLC
+ *
+ * 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
+ *
+ * https://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 * as React from 'react';
+import IconWithTooltip from './IconWithTooltip';
+import TestIcon from '@material-ui/icons/Help';
+import { create } from 'react-test-renderer';
+
+describe('IconWithTooltip', () => {
+  it('renders without height or weight', () => {
+    const tree = create(
+      <IconWithTooltip Icon={TestIcon} iconColor='green' tooltip='test icon tooltip' />
+    );
+    expect(tree).toMatchSnapshot();
+  });
+
+  it('renders with height and weight', () => {
+    const tree = create(
+      <IconWithTooltip Icon={TestIcon} height={20} width={20} iconColor='green'
+        tooltip='test icon tooltip' />
+    );
+    expect(tree).toMatchSnapshot();
+  });
+});

frontend/src/atoms/IconWithTooltip.tsx

@@ -0,0 +1,41 @@
+/*
+ * Copyright 2019 Google LLC
+ *
+ * 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
+ *
+ * https://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 * as React from 'react';
+import Tooltip from '@material-ui/core/Tooltip';
+import { SvgIconProps } from '@material-ui/core/SvgIcon';
+
+interface IconWithTooltipProps {
+  Icon: React.ComponentType<SvgIconProps>;
+  height?: number;
+  iconColor: string;
+  tooltip: string;
+  width?: number;
+}
+
+export default (props: IconWithTooltipProps) => {
+  const { height, Icon, iconColor, tooltip, width } = props;
+
+  return (
+    <Tooltip title={tooltip}>
+      <Icon style={{
+        color: iconColor,
+        height: height || 16,
+        width: width || 16
+      }}/>
+    </Tooltip>
+  );
+};

frontend/src/atoms/__snapshots__/IconWithTooltip.test.tsx.snap

@@ -0,0 +1,69 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`IconWithTooltip renders with height and weight 1`] = `
+<svg
+  aria-describedby={null}
+  aria-hidden="true"
+  className="MuiSvgIcon-root-9"
+  color={undefined}
+  focusable="false"
+  onBlur={[Function]}
+  onFocus={[Function]}
+  onMouseLeave={[Function]}
+  onMouseOver={[Function]}
+  onTouchEnd={[Function]}
+  onTouchStart={[Function]}
+  role="presentation"
+  style={
+    Object {
+      "color": "green",
+      "height": 20,
+      "width": 20,
+    }
+  }
+  title="test icon tooltip"
+  viewBox="0 0 24 24"
+>
+  <path
+    d="M0 0h24v24H0z"
+    fill="none"
+  />
+  <path
+    d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 17h-2v-2h2v2zm2.07-7.75l-.9.92C13.45 12.9 13 13.5 13 15h-2v-.5c0-1.1.45-2.1 1.17-2.83l1.24-1.26c.37-.36.59-.86.59-1.41 0-1.1-.9-2-2-2s-2 .9-2 2H8c0-2.21 1.79-4 4-4s4 1.79 4 4c0 .88-.36 1.68-.93 2.25z"
+  />
+</svg>
+`;
+
+exports[`IconWithTooltip renders without height or weight 1`] = `
+<svg
+  aria-describedby={null}
+  aria-hidden="true"
+  className="MuiSvgIcon-root-9"
+  color={undefined}
+  focusable="false"
+  onBlur={[Function]}
+  onFocus={[Function]}
+  onMouseLeave={[Function]}
+  onMouseOver={[Function]}
+  onTouchEnd={[Function]}
+  onTouchStart={[Function]}
+  role="presentation"
+  style={
+    Object {
+      "color": "green",
+      "height": 16,
+      "width": 16,
+    }
+  }
+  title="test icon tooltip"
+  viewBox="0 0 24 24"
+>
+  <path
+    d="M0 0h24v24H0z"
+    fill="none"
+  />
+  <path
+    d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 17h-2v-2h2v2zm2.07-7.75l-.9.92C13.45 12.9 13 13.5 13 15h-2v-.5c0-1.1.45-2.1 1.17-2.83l1.24-1.26c.37-.36.59-.86.59-1.41 0-1.1-.9-2-2-2s-2 .9-2 2H8c0-2.21 1.79-4 4-4s4 1.79 4 4c0 .88-.36 1.68-.93 2.25z"
+  />
+</svg>
+`;

frontend/src/components/Graph.test.tsx

@@ -18,6 +18,8 @@ import * as dagre from 'dagre';
 import * as React from 'react';
 import { shallow } from 'enzyme';
 import Graph from './Graph';
+import SuccessIcon from '@material-ui/icons/CheckCircle';
+import Tooltip from '@material-ui/core/Tooltip';
 
 function newGraph(): dagre.graphlib.Graph {
   const graph = new dagre.graphlib.Graph();
@@ -26,8 +28,17 @@ function newGraph(): dagre.graphlib.Graph {
   return graph;
 }
 
-const newNode = (label: string) => ({
+const testIcon = (
+  <Tooltip title='Test icon tooltip'>
+    <SuccessIcon />
+  </Tooltip>
+);
+
+const newNode = (label: string, isPlaceHolder?: boolean, color?: string, icon?: JSX.Element) => ({
+  bgColor: color,
   height: 10,
+  icon: icon || testIcon,
+  isPlaceholder: isPlaceHolder || false,
   label,
   width: 10,
 });
@@ -86,6 +97,29 @@ describe('Graph', () => {
     expect(shallow(<Graph graph={graph} />)).toMatchSnapshot();
   });
 
+  it('renders a graph with colored nodes', () => {
+    const graph = newGraph();
+    graph.setNode('node1', newNode('node1', false, 'red'));
+    graph.setNode('node2', newNode('node2', false, 'green'));
+    expect(shallow(<Graph graph={graph} />)).toMatchSnapshot();
+  });
+
+  it('renders a graph with colored edges', () => {
+    const graph = newGraph();
+    graph.setNode('node1', newNode('node1'));
+    graph.setNode('node2', newNode('node2'));
+    graph.setEdge('node1', 'node2', { color: 'red' });
+    expect(shallow(<Graph graph={graph} />)).toMatchSnapshot();
+  });
+
+  it('renders a graph with a placeholder node and edge', () => {
+    const graph = newGraph();
+    graph.setNode('node1', newNode('node1', false));
+    graph.setNode('node2', newNode('node2', true));
+    graph.setEdge('node1', 'node2', { isPlaceholder: true });
+    expect(shallow(<Graph graph={graph} />)).toMatchSnapshot();
+  });
+
   it('calls onClick callback when node is clicked', () => {
     const graph = newGraph();
     graph.setNode('node1', newNode('node1'));

frontend/src/components/Graph.tsx

@@ -32,9 +32,11 @@ interface Line {
 }
 
 interface Edge {
+  color?: string;
   from: string;
   to: string;
   lines: Line[];
+  isPlaceholder?: boolean;
 }
 
 const css = stylesheet({
@@ -93,6 +95,12 @@ const css = stylesheet({
     backgroundColor: '#e4ebff !important',
     borderColor: color.theme,
   },
+  placeholderNode: {
+    margin: 10,
+    position: 'absolute',
+    // TODO: can this be calculated?
+    transform: 'translate(73px, 16px)'
+  },
   root: {
     backgroundColor: color.graphBg,
     borderLeft: 'solid 1px ' + color.divider,
@@ -153,17 +161,28 @@ export default class Graph extends React.Component<GraphProps> {
           }
         }
       }
-      displayEdges.push({ from: edgeInfo.v, to: edgeInfo.w, lines });
+      displayEdges.push({
+        color: edge.color,
+        from: edgeInfo.v,
+        isPlaceholder: edge.isPlaceholder,
+        lines,
+        to: edgeInfo.w
+      });
     });
 
     return (
       <div className={css.root}>
         {graph.nodes().map(id => Object.assign(graph.node(id), { id })).map((node, i) => (
-          <div className={classes(css.node, 'graphNode',
+          <div className={classes(node.isPlaceholder ? css.placeholderNode : css.node, 'graphNode',
             node.id === this.props.selectedNodeId ? css.nodeSelected : '')} key={i}
-            onClick={() => this.props.onClick && this.props.onClick(node.id)} style={{
+            onClick={() => (!node.isPlaceholder && this.props.onClick) && this.props.onClick(node.id)}
+            style={{
               backgroundColor: node.bgColor, left: node.x,
-              maxHeight: node.height, minHeight: node.height, top: node.y, width: node.width,
+              maxHeight: node.height,
+              minHeight: node.height,
+              top: node.y,
+              transition: 'left 0.5s, top 0.5s',
+              width: node.width,
             }}>
             <div className={css.label}>{node.label}</div>
             <div className={css.icon}>{node.icon}</div>
@@ -173,11 +192,17 @@ export default class Graph extends React.Component<GraphProps> {
         {displayEdges.map((edge, i) => (
           <div key={i}>
             {edge.lines.map((line, l) => (
-              <div className={classes(css.line, l === edge.lines.length - 1 ? css.lastEdgeLine : '')}
+              <div className={classes(
+                  css.line,
+                  (l === edge.lines.length - 1 && !edge.isPlaceholder) ? css.lastEdgeLine : ''
+                )}
                 key={l} style={{
+                  borderTopColor: edge.color,
+                  borderTopStyle: edge.isPlaceholder ? 'dotted' : 'solid',
                   left: line.left,
                   top: line.yMid,
                   transform: `translate(100px, 44px) rotate(${line.angle}deg)`,
+                  transition: 'left 0.5s, top 0.5s',
                   width: line.distance,
                 }} />
             ))}