Added edge arrows

client/app/scripts/charts/edge.js

@@ -14,19 +14,36 @@ class Edge extends React.Component {
   }
 
   render() {
-    const { id, path, highlighted, blurred, focused, scale, contrastMode } = this.props;
+    const {
+      id,
+      path,
+      highlighted,
+      blurred,
+      focused,
+      scale,
+      contrastMode,
+      source,
+      target
+    } = this.props;
     const className = classNames('edge', { highlighted, blurred, focused });
     const thickness = scale * (contrastMode ? 0.02 : 0.01) * NODE_BASE_SIZE;
-
+    const strokeWidth = focused ? thickness * 3 : thickness;
+    const shouldRenderMarker = (focused || highlighted) && (source !== target);
     // Draws the edge so that its thickness reflects the zoom scale.
     // Edge shadow is always made 10x thicker than the edge itself.
     return (
       <g
         id={id} className={className}
         onMouseEnter={this.handleMouseEnter}
-        onMouseLeave={this.handleMouseLeave}>
-        <path className="shadow" d={path} style={{ strokeWidth: 10 * thickness }} />
-        <path className="link" d={path} style={{ strokeWidth: thickness }} />
+        onMouseLeave={this.handleMouseLeave}
+      >
+        <path className="shadow" d={path} style={{ strokeWidth: 10 * strokeWidth }} />
+        <path
+          className="link"
+          d={path}
+          markerEnd={shouldRenderMarker ? 'url(#end-arrow)' : null}
+          style={{ strokeWidth }}
+        />
       </g>
     );
   }

client/app/scripts/charts/marker.js

@@ -0,0 +1,18 @@
+import React from 'react';
+
+export default function Marker({id, offset, size, children}) {
+  return (
+    <marker
+      className="edge-marker"
+      id={id}
+      viewBox="1 0 10 10"
+      refX={offset}
+      refY="3.5"
+      markerWidth={size}
+      markerHeight={size}
+      orient="auto"
+    >
+      {children}
+    </marker>
+  );
+}

client/app/scripts/charts/nodes-chart-edges.js

@@ -70,6 +70,7 @@ class NodesChartEdges extends React.Component {
             blurred={edge.get('blurred')}
             scale={edge.get('scale')}
             isAnimated={isAnimated}
+            bidirectional={edge.get('bidirectional')}
           />
         ))}
       </g>

client/app/scripts/charts/nodes-chart.js

@@ -12,6 +12,7 @@ import { clickBackground, cacheZoomState } from '../actions/app-actions';
 import { activeLayoutZoomSelector } from '../selectors/nodes-chart-zoom';
 import { activeTopologyZoomCacheKeyPathSelector } from '../selectors/topology';
 import { ZOOM_CACHE_DEBOUNCE_INTERVAL } from '../constants/timer';
+import Marker from './marker';
 
 
 const ZOOM_CACHE_FIELDS = [
@@ -84,12 +85,31 @@ class NodesChart extends React.Component {
     const { panTranslateX, panTranslateY, zoomScale } = this.state;
     const transform = `translate(${panTranslateX}, ${panTranslateY}) scale(${zoomScale})`;
     const svgClassNames = this.props.isEmpty ? 'hide' : '';
+    const markerOffset = this.props.selectedNodeId ? '45' : '60';
+    const markerSize = this.props.selectedNodeId ? '10' : '20';
 
     return (
       <div className="nodes-chart">
         <svg
           width="100%" height="100%" id="nodes-chart-canvas"
-          className={svgClassNames} onClick={this.handleMouseClick}>
+          className={svgClassNames} onClick={this.handleMouseClick}
+        >
+          <defs>
+            <Marker
+              id="end-arrow"
+              offset={markerOffset}
+              size={markerSize}
+            >
+              <polygon className="link" points="0 0, 10 3.5, 0 7" />
+            </Marker>
+            <Marker
+              id="start-arrow"
+              offset={markerOffset}
+              size={markerSize}
+            >
+              <polygon className="link" points="0 0, 10 3.5, 0 7" />
+            </Marker>
+          </defs>
           <g transform="translate(24,24) scale(0.25)">
             <Logo />
           </g>

client/app/scripts/selectors/nodes-chart-graph.js

@@ -3,7 +3,7 @@ import { createSelector, createStructuredSelector } from 'reselect';
 import { Map as makeMap } from 'immutable';
 import timely from 'timely';
 
-import { initEdgesFromNodes, collapseMultiEdges } from '../utils/layouter-utils';
+import { initEdgesFromNodes } from '../utils/layouter-utils';
 import { viewportWidthSelector, viewportHeightSelector } from './canvas-viewport';
 import { activeTopologyOptionsSelector } from './topology';
 import { shownNodesSelector } from './node-filters';
@@ -72,5 +72,5 @@ export const graphEdgesSelector = createSelector(
   [
     graphLayoutSelector,
   ],
-  graph => collapseMultiEdges(graph.edges)
+  graph => graph.edges
 );

client/app/styles/_base.scss

@@ -494,6 +494,10 @@
     stroke-width: $node-border-stroke-width * 0.8;
   }
 
+  .edge-marker {
+    color: $text-secondary-color;
+    fill: $text-secondary-color;
+  }
 }
 
 .matched-results {

client/webpack.local.config.js

@@ -85,13 +85,13 @@ module.exports = {
       path.resolve(__dirname, 'app/scripts', 'app/styles')
     ],
 
-    preLoaders: [
-      {
-        test: /\.js$/,
-        exclude: /node_modules|vendor/,
-        loader: 'eslint-loader'
-      }
-    ],
+    // preLoaders: [
+    //   {
+    //     test: /\.js$/,
+    //     exclude: /node_modules|vendor/,
+    //     loader: 'eslint-loader'
+    //   }
+    // ],
     loaders: [
       {
         test: /\.json$/,