Update graph styling (kubeflow#829)

* Updates styling for the graphs

* Break all diagonal edges into vertical and horizontal components

* Checkpointing. A lot of minor adjustments being made

* Change graph rendering to only use horizontal and vertical lines for
edges. Previously diagonal edges are converted into two vertical edges
and one horiztonal

* Small cleanup

* Hovering over node now highlights all incoming and outgoing edges, as does selecting a node

More fixes, stop stacking starting edges

* Clean up

* Remove edge starting circle code

* Returns the DAG to using arbitrary angles rather than right angles

* Adds small vertical segment to end of all edges

* Significant clean up and updating tests

* A little more clean up and adding tests for the new Status util function

* One more test for Status

* Increase node font weight

* PR comments

* A little more cleanup in Graph

frontend/src/Css.tsx

@@ -22,23 +22,26 @@ export const color = {
   activeBg: '#eaf1fd',
   alert: '#f9ab00', // Google yellow 600
   background: '#fff',
+  blue: '#4285f4', // Google blue 500F
   disabledBg: '#ddd',
   divider: '#e0e0e0',
-  errorBg: '#FBE9E7',
-  errorText: '#D50000',
+  errorBg: '#fbe9e7',
+  errorText: '#d50000',
   foreground: '#000',
-  graphBg: '#f5f5f5',
-  hoverBg: '#eee',
-  inactive: '#5F6368',
+  graphBg: '#f2f2f2',
+  grey: '#5f6368', // Google grey 500
+  inactive: '#5f6368',
+  lightGrey: '#eee', // Google grey 200
   lowContrast: '#80868b', // Google grey 600
   secondaryText: 'rgba(0, 0, 0, .88)',
   separator: '#e8e8e8',
-  strong: '#212121',
+  strong: '#202124', // Google grey 900
   success: '#34a853',
+  successWeak: '#e6f4ea', // Google green 50
   theme: '#1a73e8',
   themeDarker: '#0b59dc',
   warningBg: '#f9f9e1',
-  weak: '#9AA0A6',
+  weak: '#9aa0a6',
 };
 
 export const dimension = {
@@ -52,6 +55,24 @@ export const dimension = {
   xsmall: 32,
 };
 
+// tslint:disable:object-literal-sort-keys
+export const zIndex = {
+  DROP_ZONE_OVERLAY: 1,
+  GRAPH_NODE: 1,
+  BUSY_OVERLAY: 2,
+  PIPELINE_SUMMARY_CARD: 2,
+  SIDE_PANEL: 2,
+};
+
+export const fontsize = {
+  small: 12,
+  base: 14,
+  medium: 16,
+  large: 18,
+  title: 18,
+};
+// tslint:enable:object-literal-sort-keys
+
 const baseSpacing = 24;
 export const spacing = {
   base: baseSpacing,
@@ -64,14 +85,6 @@ export const fonts = {
   secondary: '"Roboto", "Helvetica Neue", sans-serif',
 };
 
-export const fontsize = {
-  base: 14,
-  large: 18,
-  medium: 16,
-  small: 12,
-  title: 18,
-};
-
 const palette = {
   primary: {
     dark: color.themeDarker,
@@ -184,7 +197,7 @@ export const commonCss = stylesheet({
     position: 'absolute',
     right: 0,
     top: 0,
-    zIndex: 1,
+    zIndex: zIndex.BUSY_OVERLAY,
   },
   buttonAction: {
     $nest: {

frontend/src/components/CompareTable.tsx

@@ -28,7 +28,7 @@ const css = stylesheet({
     padding: 5,
   },
   labelCell: {
-    backgroundColor: '#eee',
+    backgroundColor: color.lightGrey,
     fontWeight: 'bold',
     maxWidth: 200,
     minWidth: 50,

frontend/src/components/CustomTable.tsx

@@ -32,7 +32,7 @@ import Tooltip from '@material-ui/core/Tooltip';
 import WarningIcon from '@material-ui/icons/WarningRounded';
 import { ListRequest } from '../lib/Apis';
 import { classes, stylesheet } from 'typestyle';
-import { fonts, fontsize, dimension, commonCss, color, padding } from '../Css';
+import { fonts, fontsize, dimension, commonCss, color, padding, zIndex } from '../Css';
 import { logger } from '../lib/Utils';
 import { ApiFilter, PredicateOp } from '../apis/filter/api';
 import { debounce } from 'lodash';
@@ -169,6 +169,7 @@ export const css = stylesheet({
   },
   selectionToggle: {
     marginRight: 12,
+    minWidth: 32,
   },
   verticalAlignInitial: {
     verticalAlign: 'initial',
@@ -348,7 +349,8 @@ export default class CustomTable extends React.Component<CustomTableProps, Custo
           {/* Busy experience */}
           {this.state.isBusy && (<React.Fragment>
             <div className={commonCss.busyOverlay} />
-            <CircularProgress size={25} className={commonCss.absoluteCenter} style={{ zIndex: 2 }} />
+            <CircularProgress size={25} className={commonCss.absoluteCenter}
+              style={{ zIndex: zIndex.BUSY_OVERLAY }} />
           </React.Fragment>)}
 
           {/* Empty experience */}