Added edge arrows

client/app/scripts/charts/edge.js

@@ -14,19 +14,35 @@ class Edge extends React.Component {
   }
 
   render() {
-    const { id, path, highlighted, blurred, focused, scale, contrastMode } = this.props;
+    const {
+      id,
+      path,
+      highlighted,
+      blurred,
+      focused,
+      scale,
+      source,
+      target
+    } = this.props;
     const className = classNames('edge', { highlighted, blurred, focused });
-    const thickness = scale * (contrastMode ? 0.02 : 0.01) * NODE_BASE_SIZE;
-
+    const thickness = (scale * 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, viewBox}) {
+  return (
+    <marker
+      className="edge-marker"
+      id={id}
+      viewBox={viewBox}
+      refX={offset}
+      refY="3.5"
+      markerWidth={size}
+      markerHeight={size}
+      orient="auto"
+    >
+      {children}
+    </marker>
+  );
+}

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

@@ -84,12 +84,29 @@ 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 ? '35' : '40';
+    const markerSize = this.props.selectedNodeId ? '10' : '30';
 
     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
+              className="edge-marker"
+              id="end-arrow"
+              viewBox="1 0 10 10"
+              refX={markerOffset}
+              refY="3.5"
+              markerWidth={markerSize}
+              markerHeight={markerSize}
+              orient="auto"
+            >
+              <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

@@ -411,8 +411,7 @@
 
     .link {
       fill: none;
-      stroke: $text-secondary-color;
-      stroke-opacity: $edge-opacity;
+      stroke: $edge-color;
     }
     .shadow {
       fill: none;
@@ -494,6 +493,10 @@
     stroke-width: $node-border-stroke-width * 0.8;
   }
 
+  .edge-marker {
+    color: $edge-color;
+    fill: $edge-color;
+  }
 }
 
 .matched-results {

client/app/styles/_contrast-overrides.scss

@@ -10,6 +10,7 @@ $text-tertiary-color: lighten($text-color, 20%);
 $border-light-color: lighten($text-color, 50%);
 $text-darker-color: darken($text-color, 20%);
 $white: white;
+$edge-color: black;
 
 $node-highlight-fill-opacity: 0.3;
 $node-highlight-stroke-opacity: 0.5;

client/app/styles/_variables.scss

@@ -39,6 +39,7 @@ $node-text-scale: 2;
 $edge-highlight-opacity: 0.1;
 $edge-opacity-blurred: 0.2;
 $edge-opacity: 0.5;
+$edge-color: rgb(110, 110, 156);
 
 $btn-opacity-default: 0.7;
 $btn-opacity-hover: 1;