From 6ae39fc167499865cf8c21386075ef9d45bd29c4 Mon Sep 17 00:00:00 2001
From: Joe Reuter <johannes.reuter@elastic.co>
Date: Fri, 27 Sep 2019 15:50:00 +0200
Subject: [PATCH 1/7] wip

---
 .../graph/public/angular/templates/index.html |  34 +---
 x-pack/legacy/plugins/graph/public/app.js     |   6 +
 .../graph_visualization.test.tsx              |  83 ++++++++
 .../graph_visualization.tsx                   | 191 ++++++++++++++++++
 .../components/graph_visualization/index.ts   |   7 +
 .../graph/public/types/workspace_state.ts     |   2 +
 6 files changed, 298 insertions(+), 25 deletions(-)
 create mode 100644 x-pack/legacy/plugins/graph/public/components/graph_visualization/graph_visualization.test.tsx
 create mode 100644 x-pack/legacy/plugins/graph/public/components/graph_visualization/graph_visualization.tsx
 create mode 100644 x-pack/legacy/plugins/graph/public/components/graph_visualization/index.ts

diff --git a/x-pack/legacy/plugins/graph/public/angular/templates/index.html b/x-pack/legacy/plugins/graph/public/angular/templates/index.html
index 52f901f7d169e..ef84bc80e1a23 100644
--- a/x-pack/legacy/plugins/graph/public/angular/templates/index.html
+++ b/x-pack/legacy/plugins/graph/public/angular/templates/index.html
@@ -21,8 +21,14 @@
     dispatch="reduxDispatch"
   ></graph-app>
 
-  <div class="gphGraph__container" id="GraphSvgContainer">
-    <svg class="gphGraph" width="100%" height="100%" pointer-events="all" id="graphSvg" ng-click="hideAllConfigPanels()">
+  <div class="gphGraph__container" id="GraphSvgContainer" ng-click="hideAllConfigPanels()">
+    <graph-visualization
+      nodes="workspace.nodes"
+      edges="workspace.edges"
+      edge-click="clickEdge"
+      node-click="nodeClick"
+    ></graph-visualization>
+    <!-- <svg class="gphGraph" width="100%" height="100%" pointer-events="all" id="graphSvg" >
       <g id="svgRootGroup">
         <g>
           <line ng-repeat="edge in workspace.edges" class="edge" ng-attr-x1="{{edge.topSrc.kx}}" ng-attr-y1="{{edge.topSrc.ky}}"
@@ -35,10 +41,6 @@
           <text class="fa gphNode__text gphNode__text--lowOpacity" transform="translate(0,5)" text-anchor="middle" ng-attr-x="{{n.kx}}"
             ng-attr-y="{{n.ky}}" ng-if="n.icon" ng-click="nodeClick(n, $event)">{{n.icon.code}}</text>
 
-          <!-- Using 2 strategies for rendering labels - small text uses SVG for performance,
-            larger text uses HTML for word-wrapping capabilities but can be jittery.
-          -->
-
           <text ng-if="n.label.length<30" class="gphNode__label" text-anchor="middle" transform="translate(0,22)"
             ng-attr-x="{{n.kx}}" ng-attr-y="{{n.ky}}" ng-click="nodeClick(n, $event)">
             {{n.label}}
@@ -61,25 +63,7 @@
           </g>
         </g>
       </g>
-    </svg>
-
-    <!--
-            Experiment with group/ungroup buttons that reveal-on-zoom on nodes.
-
-     <g ng-if="workspace.selectedNodes.length>1||(workspace.selectedNodes.length>0&&workspace.selectedNodes[0] !== n)">
-      <g ng-if="zoomLevel>10" transform="translate(-1,-7)">
-        <rect class="SvgZoomedIconButton" ng-attr-x="{{n.kx}}" ng-attr-y="{{n.ky}}" transform="translate(-1.5,-1.2)" ng-click="workspace.groupSelections(n)" width="6.5" height="2.2" rx="0.2" ry="0.2" />
-        <text class="SvgZoomedButtonText" transform="translate(3,0.3)" text-anchor="middle" ng-attr-x="{{n.kx}}" ng-attr-y="{{n.ky}}" ng-click="workspace.groupSelections(n)">group</text>
-        <text class="SvgZoomedIconButtonText" transform="translate(-0.2,0.6)" text-anchor="middle" ng-attr-x="{{n.kx}}" ng-attr-y="{{n.ky}}" ng-click="workspace.groupSelections(n)">&#xf247</text>
-      </g>
-    </g>
-    <g ng-if="zoomLevel>10" transform="translate(8,12.5)">
-      <rect class="SvgZoomedIconButton" ng-attr-x="{{n.kx}}" ng-attr-y="{{n.ky}}" transform="translate(-1.5,-1.2)" ng-click="workspace.ungroup(n)" width="7" height="2" rx="0.2" ry="0.2" />
-      <text class="SvgZoomedButtonText" transform="translate(3,0.3)" text-anchor="middle" ng-attr-x="{{n.kx}}" ng-attr-y="{{n.ky}}" ng-click="workspace.ungroup(n)">ungroup</text>
-      <text class="SvgZoomedIconButtonText" transform="translate(-0.4,0.6)" text-anchor="middle" ng-attr-x="{{n.kx}}" ng-attr-y="{{n.ky}}" ng-click="workspace.ungroup(n)">&#xf09c</text>
-    </g>
-
-  -->
+    </svg> -->
 
     <div id="sidebar" class="gphSidebar" ng-if="workspace !== null">
 
diff --git a/x-pack/legacy/plugins/graph/public/app.js b/x-pack/legacy/plugins/graph/public/app.js
index a9b74bb4f6e67..d6a73ae9de393 100644
--- a/x-pack/legacy/plugins/graph/public/app.js
+++ b/x-pack/legacy/plugins/graph/public/app.js
@@ -45,6 +45,7 @@ import { GraphApp } from './components/app';
 import { VennDiagram } from './components/venn_diagram';
 import { Listing } from './components/listing';
 import { Settings } from './components/settings';
+import { GraphVisualization } from './components/graph_visualization';
 
 import gws from './angular/graph_client_workspace.js';
 import { SavedWorkspacesProvider } from './angular/services/saved_workspaces';
@@ -122,6 +123,11 @@ app.directive('graphApp', function (reactDirective) {
   ]);
 });
 
+app.directive('graphVisualization', function (reactDirective) {
+  return reactDirective(GraphVisualization);
+});
+
+
 if (uiRoutes.enable) {
   uiRoutes.enable();
 }
diff --git a/x-pack/legacy/plugins/graph/public/components/graph_visualization/graph_visualization.test.tsx b/x-pack/legacy/plugins/graph/public/components/graph_visualization/graph_visualization.test.tsx
new file mode 100644
index 0000000000000..43196a47e181e
--- /dev/null
+++ b/x-pack/legacy/plugins/graph/public/components/graph_visualization/graph_visualization.test.tsx
@@ -0,0 +1,83 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import React, { useRef } from 'react';
+import classNames from 'classnames';
+import d3, { ZoomEvent } from 'd3';
+import { WorkspaceNode, WorkspaceEdge } from '../../types';
+import { makeNodeId } from '../../services/persistence';
+import { shallow } from 'enzyme';
+import { GraphVisualization } from './graph_visualization';
+import { getSuitableIcon } from '../../helpers/style_choices';
+
+describe('graph_visualization', () => {
+  it('should render empty workspace without data', () => {
+    expect(shallow(<GraphVisualization edgeClick={() => {}} nodeClick={() => {}} />)).toMatchInlineSnapshot();
+  });
+
+  it('should render to svg elements', () => {
+    expect(shallow(<GraphVisualization edgeClick={() => {}} nodeClick={() => {}} nodes={[
+      {
+        color: 'black',
+        data: {
+          field: 'A',
+          term: '1'
+        },
+        icon: getSuitableIcon(''),
+        isSelected: true,
+         kx: 5,
+         ky: 5,
+         label: '1',
+         numChildren: 1,
+         parent: null,
+         scaledSize: 10,
+         x: 5,
+         y: 5
+      },
+      {
+        color: 'red',
+        data: {
+          field: 'B',
+          term: '2'
+        },
+        icon: getSuitableIcon(''),
+        isSelected: false,
+         kx: 7,
+         ky: 9,
+         label: '2',
+         numChildren: 0,
+         parent: null,
+         scaledSize: 10,
+         x: 7,
+         y: 9
+      },
+      {
+        color: 'blue',
+        data: {
+          field: 'C',
+          term: '3'
+        },
+        icon: getSuitableIcon(''),
+        isSelected: false,
+         kx: 12,
+         ky: 2,
+         label: '3',
+         numChildren: 0,
+         parent: null,
+         scaledSize: 10,
+         x: 7,
+         y: 9
+      }
+    ]} edges={[
+      {
+        inferred: false,
+        isSelected: true,
+        label: '',
+        top
+      }
+    ]} />)).toMatchInlineSnapshot();
+  });
+});
\ No newline at end of file
diff --git a/x-pack/legacy/plugins/graph/public/components/graph_visualization/graph_visualization.tsx b/x-pack/legacy/plugins/graph/public/components/graph_visualization/graph_visualization.tsx
new file mode 100644
index 0000000000000..70064ea500db2
--- /dev/null
+++ b/x-pack/legacy/plugins/graph/public/components/graph_visualization/graph_visualization.tsx
@@ -0,0 +1,191 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import React, { useRef } from 'react';
+import classNames from 'classnames';
+import d3, { ZoomEvent } from 'd3';
+import { WorkspaceNode, WorkspaceEdge } from '../../types';
+import { makeNodeId } from '../../services/persistence';
+
+/*
+ * The layouting algorithm sets a few extra properties on
+ * node objects to handle grouping. This will be moved to
+ * a separate data structure when the layouting is migrated
+ */
+
+interface GroupAwareWorkspaceNode extends WorkspaceNode {
+  kx: number;
+  ky: number;
+  numChildren: number;
+}
+
+interface GroupAwareWorkspaceEdge extends WorkspaceEdge {
+  topTarget: GroupAwareWorkspaceNode;
+  topSrc: GroupAwareWorkspaceNode;
+}
+
+export interface GraphVisualizationProps {
+  nodes?: GroupAwareWorkspaceNode[];
+  edges?: GroupAwareWorkspaceEdge[];
+  edgeClick: (edge: GroupAwareWorkspaceEdge) => void;
+  nodeClick: (node: GroupAwareWorkspaceNode, e: React.MouseEvent<Element, MouseEvent>) => void;
+}
+
+function registerZooming(element: SVGSVGElement) {
+  const blockScroll = function() {
+    (d3.event as Event).preventDefault();
+  };
+  d3.select(element)
+    .on('mousewheel', blockScroll)
+    .on('DOMMouseScroll', blockScroll)
+    .call(
+      d3.behavior.zoom().on('zoom', () => {
+        const event = d3.event as ZoomEvent;
+        d3.select(element)
+          .select('g')
+          .attr('transform', 'translate(' + event.translate + ')' + 'scale(' + event.scale + ')')
+          .attr('style', 'stroke-width: ' + 1 / event.scale);
+      })
+    );
+}
+
+export function GraphVisualization({
+  nodes,
+  edges,
+  edgeClick,
+  nodeClick,
+}: GraphVisualizationProps) {
+  const svgRoot = useRef<SVGSVGElement | null>(null);
+
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      className="gphGraph"
+      width="100%"
+      height="100%"
+      pointerEvents="all"
+      id="graphSvg"
+      ref={element => {
+        if (element && svgRoot.current !== element) {
+          svgRoot.current = element;
+          registerZooming(element);
+        }
+      }}
+    >
+      <g>
+        <g>
+          {edges &&
+            edges.map(edge => (
+              <line
+                key={`${makeNodeId(edge.source.data.field, edge.source.data.term)}-${makeNodeId(
+                  edge.target.data.field,
+                  edge.target.data.term
+                )}`}
+                x1={edge.topSrc.kx}
+                y1={edge.topSrc.ky}
+                x2={edge.topTarget.kx}
+                y2={edge.topTarget.ky}
+                onClick={() => {
+                  edgeClick(edge);
+                }}
+                className={classNames('edge', {
+                  selectedEdge: edge.isSelected,
+                  inferredEdge: edge.inferred,
+                })}
+                style={{ strokeWidth: edge.width }}
+                strokeLinecap="round"
+              />
+            ))}
+        </g>
+        {nodes &&
+          nodes
+            .filter(node => !node.parent)
+            .map(node => (
+              <g
+                key={makeNodeId(node.data.field, node.data.term)}
+                onClick={e => {
+                  e.preventDefault();
+                  console.log('clicky');
+                  nodeClick(node, e);
+                }}
+                onMouseDown={e => {
+                  // avoid selecting text when selecting nodes
+                  if (e.ctrlKey || e.shiftKey) {
+                    e.preventDefault();
+                  }
+                }}
+                className="gphNode"
+              >
+                <circle
+                  cx={node.kx}
+                  cy={node.ky}
+                  r={node.scaledSize}
+                  className={classNames('gphNode__circle', { selectedNode: node.isSelected })}
+                  style={{ fill: node.color }}
+                />
+                {node.icon && (
+                  <text
+                    className="fa gphNode__text gphNode__text--lowOpacity"
+                    transform="translate(0,5)"
+                    textAnchor="middle"
+                    x={node.kx}
+                    y={node.ky}
+                  >
+                    {node.icon.code}
+                  </text>
+                )}
+
+                {node.label.length < 30 && (
+                  <text
+                    className="gphNode__label"
+                    textAnchor="middle"
+                    transform="translate(0,22)"
+                    x={node.kx}
+                    y={node.ky}
+                  >
+                    {node.label}
+                  </text>
+                )}
+                {node.label.length >= 30 && (
+                  <foreignObject
+                    width="100"
+                    height="20"
+                    transform="translate(-50,15)"
+                    x={node.kx}
+                    y={node.ky}
+                  >
+                    <p className="gphNode__label gphNode__label--html gphNoUserSelect">
+                      {node.label}
+                    </p>
+                  </foreignObject>
+                )}
+
+                {node.numChildren > 0 && (
+                  <g>
+                    <circle
+                      r="5"
+                      className="gphNode__markerCircle"
+                      transform="translate(10,10)"
+                      cx={node.kx}
+                      cy={node.ky}
+                    />
+                    <text
+                      className="gphNode__markerText"
+                      textAnchor="middle"
+                      transform="translate(10,12)"
+                      x={node.kx}
+                      y={node.ky}
+                    >
+                      {node.numChildren}
+                    </text>
+                  </g>
+                )}
+              </g>
+            ))}
+      </g>
+    </svg>
+  );
+}
diff --git a/x-pack/legacy/plugins/graph/public/components/graph_visualization/index.ts b/x-pack/legacy/plugins/graph/public/components/graph_visualization/index.ts
new file mode 100644
index 0000000000000..7f8fd972efb77
--- /dev/null
+++ b/x-pack/legacy/plugins/graph/public/components/graph_visualization/index.ts
@@ -0,0 +1,7 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+export * from './graph_visualization';
diff --git a/x-pack/legacy/plugins/graph/public/types/workspace_state.ts b/x-pack/legacy/plugins/graph/public/types/workspace_state.ts
index 42e1e759835a7..54666c48161e6 100644
--- a/x-pack/legacy/plugins/graph/public/types/workspace_state.ts
+++ b/x-pack/legacy/plugins/graph/public/types/workspace_state.ts
@@ -28,6 +28,7 @@ export interface WorkspaceNode {
   scaledSize: number;
   parent: WorkspaceNode | null;
   color: string;
+  isSelected?: boolean;
 }
 
 export interface WorkspaceEdge {
@@ -37,6 +38,7 @@ export interface WorkspaceEdge {
   label: string;
   source: WorkspaceNode;
   target: WorkspaceNode;
+  isSelected?: boolean;
 }
 
 export interface GraphData {

From 7674cc950df243709e8ca53c4f4f5a62fbbae3ab Mon Sep 17 00:00:00 2001
From: Joe Reuter <johannes.reuter@elastic.co>
Date: Fri, 27 Sep 2019 16:14:15 +0200
Subject: [PATCH 2/7] move graph visualization to react

---
 .../graph_visualization.test.tsx.snap         | 173 ++++++++++++++
 .../graph_visualization.test.tsx              | 219 ++++++++++++------
 .../graph_visualization.tsx                   |   6 +-
 3 files changed, 325 insertions(+), 73 deletions(-)
 create mode 100644 x-pack/legacy/plugins/graph/public/components/graph_visualization/__snapshots__/graph_visualization.test.tsx.snap

diff --git a/x-pack/legacy/plugins/graph/public/components/graph_visualization/__snapshots__/graph_visualization.test.tsx.snap b/x-pack/legacy/plugins/graph/public/components/graph_visualization/__snapshots__/graph_visualization.test.tsx.snap
new file mode 100644
index 0000000000000..6b4221450cbaf
--- /dev/null
+++ b/x-pack/legacy/plugins/graph/public/components/graph_visualization/__snapshots__/graph_visualization.test.tsx.snap
@@ -0,0 +1,173 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`graph_visualization should render to svg elements 1`] = `
+<svg
+  className="gphGraph"
+  height="100%"
+  id="graphSvg"
+  pointerEvents="all"
+  width="100%"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <g>
+    <g>
+      <line
+        className="edge selectedEdge"
+        key="A..1-B..2"
+        onClick={[Function]}
+        strokeLinecap="round"
+        style={
+          Object {
+            "strokeWidth": 2,
+          }
+        }
+        x1={5}
+        x2={7}
+        y1={5}
+        y2={9}
+      />
+      <line
+        className="edge selectedEdge"
+        key="B..2-C..3"
+        onClick={[Function]}
+        strokeLinecap="round"
+        style={
+          Object {
+            "strokeWidth": 2.2,
+          }
+        }
+        x1={7}
+        x2={12}
+        y1={9}
+        y2={2}
+      />
+    </g>
+    <g
+      className="gphNode"
+      key="A..1"
+      onClick={[Function]}
+      onMouseDown={[Function]}
+    >
+      <circle
+        className="gphNode__circle selectedNode"
+        cx={5}
+        cy={5}
+        r={10}
+        style={
+          Object {
+            "fill": "black",
+          }
+        }
+      />
+      <text
+        className="fa gphNode__text gphNode__text--lowOpacity"
+        textAnchor="middle"
+        transform="translate(0,5)"
+        x={5}
+        y={5}
+      >
+        a
+      </text>
+      <text
+        className="gphNode__label"
+        textAnchor="middle"
+        transform="translate(0,22)"
+        x={5}
+        y={5}
+      >
+        1
+      </text>
+      <g>
+        <circle
+          className="gphNode__markerCircle"
+          cx={5}
+          cy={5}
+          r="5"
+          transform="translate(10,10)"
+        />
+        <text
+          className="gphNode__markerText"
+          textAnchor="middle"
+          transform="translate(10,12)"
+          x={5}
+          y={5}
+        >
+          1
+        </text>
+      </g>
+    </g>
+    <g
+      className="gphNode"
+      key="B..2"
+      onClick={[Function]}
+      onMouseDown={[Function]}
+    >
+      <circle
+        className="gphNode__circle"
+        cx={7}
+        cy={9}
+        r={10}
+        style={
+          Object {
+            "fill": "red",
+          }
+        }
+      />
+      <text
+        className="fa gphNode__text gphNode__text--lowOpacity"
+        textAnchor="middle"
+        transform="translate(0,5)"
+        x={7}
+        y={9}
+      >
+        b
+      </text>
+      <text
+        className="gphNode__label"
+        textAnchor="middle"
+        transform="translate(0,22)"
+        x={7}
+        y={9}
+      >
+        2
+      </text>
+    </g>
+    <g
+      className="gphNode"
+      key="C..3"
+      onClick={[Function]}
+      onMouseDown={[Function]}
+    >
+      <circle
+        className="gphNode__circle"
+        cx={12}
+        cy={2}
+        r={10}
+        style={
+          Object {
+            "fill": "blue",
+          }
+        }
+      />
+      <text
+        className="fa gphNode__text gphNode__text--lowOpacity"
+        textAnchor="middle"
+        transform="translate(0,5)"
+        x={12}
+        y={2}
+      >
+        c
+      </text>
+      <text
+        className="gphNode__label"
+        textAnchor="middle"
+        transform="translate(0,22)"
+        x={12}
+        y={2}
+      >
+        3
+      </text>
+    </g>
+  </g>
+</svg>
+`;
diff --git a/x-pack/legacy/plugins/graph/public/components/graph_visualization/graph_visualization.test.tsx b/x-pack/legacy/plugins/graph/public/components/graph_visualization/graph_visualization.test.tsx
index 43196a47e181e..fe131c6713d7b 100644
--- a/x-pack/legacy/plugins/graph/public/components/graph_visualization/graph_visualization.test.tsx
+++ b/x-pack/legacy/plugins/graph/public/components/graph_visualization/graph_visualization.test.tsx
@@ -4,80 +4,161 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import React, { useRef } from 'react';
-import classNames from 'classnames';
-import d3, { ZoomEvent } from 'd3';
-import { WorkspaceNode, WorkspaceEdge } from '../../types';
-import { makeNodeId } from '../../services/persistence';
+import React from 'react';
 import { shallow } from 'enzyme';
-import { GraphVisualization } from './graph_visualization';
-import { getSuitableIcon } from '../../helpers/style_choices';
+import {
+  GraphVisualization,
+  GroupAwareWorkspaceNode,
+  GroupAwareWorkspaceEdge,
+} from './graph_visualization';
 
 describe('graph_visualization', () => {
+  const nodes: GroupAwareWorkspaceNode[] = [
+    {
+      color: 'black',
+      data: {
+        field: 'A',
+        term: '1',
+      },
+      icon: {
+        class: 'a',
+        code: 'a',
+        label: '',
+      },
+      isSelected: true,
+      kx: 5,
+      ky: 5,
+      label: '1',
+      numChildren: 1,
+      parent: null,
+      scaledSize: 10,
+      x: 5,
+      y: 5,
+    },
+    {
+      color: 'red',
+      data: {
+        field: 'B',
+        term: '2',
+      },
+      icon: {
+        class: 'b',
+        code: 'b',
+        label: '',
+      },
+      isSelected: false,
+      kx: 7,
+      ky: 9,
+      label: '2',
+      numChildren: 0,
+      parent: null,
+      scaledSize: 10,
+      x: 7,
+      y: 9,
+    },
+    {
+      color: 'blue',
+      data: {
+        field: 'C',
+        term: '3',
+      },
+      icon: {
+        class: 'c',
+        code: 'c',
+        label: '',
+      },
+      isSelected: false,
+      kx: 12,
+      ky: 2,
+      label: '3',
+      numChildren: 0,
+      parent: null,
+      scaledSize: 10,
+      x: 7,
+      y: 9,
+    },
+  ];
+  const edges: GroupAwareWorkspaceEdge[] = [
+    {
+      inferred: false,
+      isSelected: true,
+      label: '',
+      topSrc: nodes[0],
+      topTarget: nodes[1],
+      source: nodes[0],
+      target: nodes[1],
+      weight: 10,
+      width: 2,
+    },
+    {
+      inferred: false,
+      isSelected: true,
+      label: '',
+      topSrc: nodes[1],
+      topTarget: nodes[2],
+      source: nodes[1],
+      target: nodes[2],
+      weight: 10,
+      width: 2.2,
+    },
+  ];
   it('should render empty workspace without data', () => {
-    expect(shallow(<GraphVisualization edgeClick={() => {}} nodeClick={() => {}} />)).toMatchInlineSnapshot();
+    expect(shallow(<GraphVisualization edgeClick={() => {}} nodeClick={() => {}} />))
+      .toMatchInlineSnapshot(`
+      <svg
+        className="gphGraph"
+        height="100%"
+        id="graphSvg"
+        pointerEvents="all"
+        width="100%"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <g>
+          <g />
+        </g>
+      </svg>
+    `);
   });
 
   it('should render to svg elements', () => {
-    expect(shallow(<GraphVisualization edgeClick={() => {}} nodeClick={() => {}} nodes={[
-      {
-        color: 'black',
-        data: {
-          field: 'A',
-          term: '1'
-        },
-        icon: getSuitableIcon(''),
-        isSelected: true,
-         kx: 5,
-         ky: 5,
-         label: '1',
-         numChildren: 1,
-         parent: null,
-         scaledSize: 10,
-         x: 5,
-         y: 5
-      },
-      {
-        color: 'red',
-        data: {
-          field: 'B',
-          term: '2'
-        },
-        icon: getSuitableIcon(''),
-        isSelected: false,
-         kx: 7,
-         ky: 9,
-         label: '2',
-         numChildren: 0,
-         parent: null,
-         scaledSize: 10,
-         x: 7,
-         y: 9
-      },
-      {
-        color: 'blue',
-        data: {
-          field: 'C',
-          term: '3'
-        },
-        icon: getSuitableIcon(''),
-        isSelected: false,
-         kx: 12,
-         ky: 2,
-         label: '3',
-         numChildren: 0,
-         parent: null,
-         scaledSize: 10,
-         x: 7,
-         y: 9
-      }
-    ]} edges={[
-      {
-        inferred: false,
-        isSelected: true,
-        label: '',
-        top
-      }
-    ]} />)).toMatchInlineSnapshot();
+    expect(
+      shallow(
+        <GraphVisualization edgeClick={() => {}} nodeClick={() => {}} nodes={nodes} edges={edges} />
+      )
+    ).toMatchSnapshot();
+  });
+
+  it('should react to node click', () => {
+    const nodeClickSpy = jest.fn();
+    const instance = shallow(
+      <GraphVisualization
+        edgeClick={() => {}}
+        nodeClick={nodeClickSpy}
+        nodes={nodes}
+        edges={edges}
+      />
+    );
+    instance
+      .find('.gphNode')
+      .first()
+      .simulate('click', {});
+    expect(nodeClickSpy).toHaveBeenCalledWith(nodes[0], {});
+  });
+
+  it('should react to edge click', () => {
+    const edgeClickSpy = jest.fn();
+    const instance = shallow(
+      <GraphVisualization
+        edgeClick={edgeClickSpy}
+        nodeClick={() => {}}
+        nodes={nodes}
+        edges={edges}
+      />
+    );
+    instance
+      .find('.edge')
+      .first()
+      .simulate('click');
+    expect(edgeClickSpy).toHaveBeenCalledWith(edges[0]);
   });
-});
\ No newline at end of file
+});
diff --git a/x-pack/legacy/plugins/graph/public/components/graph_visualization/graph_visualization.tsx b/x-pack/legacy/plugins/graph/public/components/graph_visualization/graph_visualization.tsx
index 70064ea500db2..b3709947fef03 100644
--- a/x-pack/legacy/plugins/graph/public/components/graph_visualization/graph_visualization.tsx
+++ b/x-pack/legacy/plugins/graph/public/components/graph_visualization/graph_visualization.tsx
@@ -16,13 +16,13 @@ import { makeNodeId } from '../../services/persistence';
  * a separate data structure when the layouting is migrated
  */
 
-interface GroupAwareWorkspaceNode extends WorkspaceNode {
+export interface GroupAwareWorkspaceNode extends WorkspaceNode {
   kx: number;
   ky: number;
   numChildren: number;
 }
 
-interface GroupAwareWorkspaceEdge extends WorkspaceEdge {
+export interface GroupAwareWorkspaceEdge extends WorkspaceEdge {
   topTarget: GroupAwareWorkspaceNode;
   topSrc: GroupAwareWorkspaceNode;
 }
@@ -107,8 +107,6 @@ export function GraphVisualization({
               <g
                 key={makeNodeId(node.data.field, node.data.term)}
                 onClick={e => {
-                  e.preventDefault();
-                  console.log('clicky');
                   nodeClick(node, e);
                 }}
                 onMouseDown={e => {

From 763b766eb316417c3bef28b872dd734a2213b4f5 Mon Sep 17 00:00:00 2001
From: Joe Reuter <johannes.reuter@elastic.co>
Date: Fri, 27 Sep 2019 16:15:30 +0200
Subject: [PATCH 3/7] move graph visualization to react

---
 .../graph/public/angular/templates/index.html | 36 -------------------
 1 file changed, 36 deletions(-)

diff --git a/x-pack/legacy/plugins/graph/public/angular/templates/index.html b/x-pack/legacy/plugins/graph/public/angular/templates/index.html
index ef84bc80e1a23..267e7564fb830 100644
--- a/x-pack/legacy/plugins/graph/public/angular/templates/index.html
+++ b/x-pack/legacy/plugins/graph/public/angular/templates/index.html
@@ -28,42 +28,6 @@
       edge-click="clickEdge"
       node-click="nodeClick"
     ></graph-visualization>
-    <!-- <svg class="gphGraph" width="100%" height="100%" pointer-events="all" id="graphSvg" >
-      <g id="svgRootGroup">
-        <g>
-          <line ng-repeat="edge in workspace.edges" class="edge" ng-attr-x1="{{edge.topSrc.kx}}" ng-attr-y1="{{edge.topSrc.ky}}"
-            ng-attr-x2="{{edge.topTarget.kx}}" ng-attr-y2="{{edge.topTarget.ky}}" ng-click="clickEdge(edge)" ng-class="{'selectedEdge':edge.isSelected, 'inferredEdge':edge.inferred}"
-            ng-attr-style="stroke-width:{{edge.width}}px" stroke-linecap="round" />
-        </g>
-        <g ng-repeat="n in workspace.nodes" ng-if="!n.parent">
-          <circle class="gphNode__circle" ng-attr-r="{{n.scaledSize}}" ng-attr-cx="{{n.kx}}" ng-attr-cy="{{n.ky}}" ng-click="nodeClick(n, $event)"
-            ng-class="{selectedNode:n.isSelected}" ng-attr-style="fill:{{n.color}}" />
-          <text class="fa gphNode__text gphNode__text--lowOpacity" transform="translate(0,5)" text-anchor="middle" ng-attr-x="{{n.kx}}"
-            ng-attr-y="{{n.ky}}" ng-if="n.icon" ng-click="nodeClick(n, $event)">{{n.icon.code}}</text>
-
-          <text ng-if="n.label.length<30" class="gphNode__label" text-anchor="middle" transform="translate(0,22)"
-            ng-attr-x="{{n.kx}}" ng-attr-y="{{n.ky}}" ng-click="nodeClick(n, $event)">
-            {{n.label}}
-          </text>
-          <foreignObject ng-if="n.label.length>=30" width="100" height="20" transform="translate(-50,15)" ng-attr-x="{{n.kx}}"
-            ng-attr-y="{{n.ky}}" ng-click="nodeClick(n, $event)">
-
-            <body xmlns="http://www.w3.org/1999/xhtml">
-              <p class="gphNode__label gphNode__label--html gphNoUserSelect">{{n.label}}</p>
-            </body>
-          </foreignObject>
-
-          <g ng-if="n.numChildren>0">
-            <circle r="5" class="gphNode__markerCircle" transform="translate(10,10)" ng-attr-cx="{{n.kx}}" ng-attr-cy="{{n.ky}}"
-              ng-click="nodeClick(n, $event)" />
-            <text class="gphNode__markerText" text-anchor="middle" transform="translate(10,12)" ng-attr-x="{{n.kx}}"
-              ng-attr-y="{{n.ky}}" ng-click="nodeClick(n, $event)">{{n.numChildren}}
-            </text>
-
-          </g>
-        </g>
-      </g>
-    </svg> -->
 
     <div id="sidebar" class="gphSidebar" ng-if="workspace !== null">
 

From 0c223509fb479d9b876642b55bcdc8aef47ab3a9 Mon Sep 17 00:00:00 2001
From: Joe Reuter <johannes.reuter@elastic.co>
Date: Fri, 27 Sep 2019 16:43:20 +0200
Subject: [PATCH 4/7] fix tests and clean up scss

---
 x-pack/legacy/plugins/graph/public/_main.scss | 29 ---------
 .../public/angular/templates/_graph.scss      | 47 ---------------
 x-pack/legacy/plugins/graph/public/app.js     | 24 --------
 .../graph/public/components/_index.scss       |  1 +
 .../graph_visualization.test.tsx.snap         | 14 ++---
 .../_graph_visualization.scss                 | 60 +++++++++++++++++++
 .../graph_visualization/_index.scss           |  1 +
 .../graph_visualization.test.tsx              |  4 +-
 .../graph_visualization.tsx                   | 15 +++--
 9 files changed, 81 insertions(+), 114 deletions(-)
 create mode 100644 x-pack/legacy/plugins/graph/public/components/graph_visualization/_graph_visualization.scss
 create mode 100644 x-pack/legacy/plugins/graph/public/components/graph_visualization/_index.scss

diff --git a/x-pack/legacy/plugins/graph/public/_main.scss b/x-pack/legacy/plugins/graph/public/_main.scss
index 7e70ccd6f35d8..26ed9df63d465 100644
--- a/x-pack/legacy/plugins/graph/public/_main.scss
+++ b/x-pack/legacy/plugins/graph/public/_main.scss
@@ -1,32 +1,3 @@
-/**
- * Nodes
- */
-
-.gphNode-disabled{
-  opacity:0.3;
-}
-
-.gphNode__circle {
-  fill: $euiColorMediumShade;
-
-  // SASSTODO: Can't definitively change modifier class
-  // because it's not easy to tell what's a class and what's
-  // part of the data object since they are named the same
-  &.selectedNode {
-    stroke-width: $euiSizeXS;
-    stroke: transparentize($euiColorPrimary, .25);
-  }
-}
-
-.gphNode__text {
-  fill: $euiColorDarkestShade;
-
-  &--lowOpacity{
-    fill-opacity: 0.5;
-  }
-}
-
-
 /**
  * Forms
  */
diff --git a/x-pack/legacy/plugins/graph/public/angular/templates/_graph.scss b/x-pack/legacy/plugins/graph/public/angular/templates/_graph.scss
index 20ca704b9282b..0f2bf90a10d4f 100644
--- a/x-pack/legacy/plugins/graph/public/angular/templates/_graph.scss
+++ b/x-pack/legacy/plugins/graph/public/angular/templates/_graph.scss
@@ -27,53 +27,6 @@
   flex: 1;
 }
 
-.gphGraph {
-  // SASSTODO: Can't definitively change child class
-  // because it's not easy to tell what's a class and what's
-  // part of the data object since they are named the same
-  .edge {
-    fill: $euiColorMediumShade;
-    stroke: $euiColorMediumShade;
-    stroke-width: 2;
-    stroke-opacity: 0.5;
-
-    &:hover {
-      stroke-opacity: 0.95;
-      cursor: pointer;
-    }
-  }
-
-  .edge.selectedEdge {
-    stroke: $euiColorDarkShade;
-    stroke-opacity: 0.95;
-  }
-
-  .edge.inferredEdge {
-    stroke-dasharray: 5,5;
-  }
-}
-
-.gphNode__label {
-  @include gphSvgText;
-  cursor: pointer;
-}
-
-.gphNode__label--html {
-  @include euiTextTruncate;
-  text-align: center;
-}
-
-.gphNode__markerCircle {
-  fill: $euiColorDarkShade;
-  stroke: $euiColorEmptyShade;
-}
-
-.gphNode__markerText {
-  @include gphSvgText;
-  font-size: $euiSizeS - 2px;
-  fill: $euiColorEmptyShade;
-}
-
 .gphGraph__menus {
   margin: $euiSizeS;
 }
diff --git a/x-pack/legacy/plugins/graph/public/app.js b/x-pack/legacy/plugins/graph/public/app.js
index d6a73ae9de393..13e0db07d8550 100644
--- a/x-pack/legacy/plugins/graph/public/app.js
+++ b/x-pack/legacy/plugins/graph/public/app.js
@@ -636,33 +636,9 @@ app.controller('graphuiPlugin', function (
     $scope.detail = { mergeCandidates };
   };
 
-  // Zoom functions for the SVG-based graph
-  const redraw = function () {
-    d3.select('#svgRootGroup')
-      .attr('transform',
-        'translate(' + d3.event.translate + ')' + 'scale(' + d3.event.scale + ')')
-      .attr('style', 'stroke-width: ' + 1 / d3.event.scale);
-    //To make scale-dependent features possible....
-    if ($scope.zoomLevel !== d3.event.scale) {
-      $scope.zoomLevel = d3.event.scale;
-      $scope.$apply();
-    }
-  };
-
   //initialize all the state
   $scope.resetWorkspace();
 
-
-  const blockScroll = function () {
-    d3.event.preventDefault();
-  };
-  d3.select('#graphSvg')
-    .on('mousewheel', blockScroll)
-    .on('DOMMouseScroll', blockScroll)
-    .call(d3.behavior.zoom()
-      .on('zoom', redraw));
-
-
   const managementUrl = npStart.core.chrome.navLinks.get('kibana:management').url;
   const url = `${managementUrl}/kibana/index_patterns`;
 
diff --git a/x-pack/legacy/plugins/graph/public/components/_index.scss b/x-pack/legacy/plugins/graph/public/components/_index.scss
index bf0af682310e0..85bbf4fcc3ade 100644
--- a/x-pack/legacy/plugins/graph/public/components/_index.scss
+++ b/x-pack/legacy/plugins/graph/public/components/_index.scss
@@ -1,5 +1,6 @@
 @import './app';
 @import './search_bar';
+@import './graph_visualization/index';
 @import './venn_diagram/index';
 @import './settings/index';
 @import './legacy_icon/index';
diff --git a/x-pack/legacy/plugins/graph/public/components/graph_visualization/__snapshots__/graph_visualization.test.tsx.snap b/x-pack/legacy/plugins/graph/public/components/graph_visualization/__snapshots__/graph_visualization.test.tsx.snap
index 6b4221450cbaf..030deae8fdd3c 100644
--- a/x-pack/legacy/plugins/graph/public/components/graph_visualization/__snapshots__/graph_visualization.test.tsx.snap
+++ b/x-pack/legacy/plugins/graph/public/components/graph_visualization/__snapshots__/graph_visualization.test.tsx.snap
@@ -12,7 +12,7 @@ exports[`graph_visualization should render to svg elements 1`] = `
   <g>
     <g>
       <line
-        className="edge selectedEdge"
+        className="gphEdge gphEdge--selected"
         key="A..1-B..2"
         onClick={[Function]}
         strokeLinecap="round"
@@ -27,7 +27,7 @@ exports[`graph_visualization should render to svg elements 1`] = `
         y2={9}
       />
       <line
-        className="edge selectedEdge"
+        className="gphEdge gphEdge--selected"
         key="B..2-C..3"
         onClick={[Function]}
         strokeLinecap="round"
@@ -49,7 +49,7 @@ exports[`graph_visualization should render to svg elements 1`] = `
       onMouseDown={[Function]}
     >
       <circle
-        className="gphNode__circle selectedNode"
+        className="gphNode__circle gphNode__circle--selected"
         cx={5}
         cy={5}
         r={10}
@@ -60,7 +60,7 @@ exports[`graph_visualization should render to svg elements 1`] = `
         }
       />
       <text
-        className="fa gphNode__text gphNode__text--lowOpacity"
+        className="fa gphNode__text gphNode__text--lowOpacity gphNode__text--inverse"
         textAnchor="middle"
         transform="translate(0,5)"
         x={5}
@@ -114,7 +114,7 @@ exports[`graph_visualization should render to svg elements 1`] = `
         }
       />
       <text
-        className="fa gphNode__text gphNode__text--lowOpacity"
+        className="fa gphNode__text gphNode__text--lowOpacity gphNode__text--inverse"
         textAnchor="middle"
         transform="translate(0,5)"
         x={7}
@@ -145,12 +145,12 @@ exports[`graph_visualization should render to svg elements 1`] = `
         r={10}
         style={
           Object {
-            "fill": "blue",
+            "fill": "yellow",
           }
         }
       />
       <text
-        className="fa gphNode__text gphNode__text--lowOpacity"
+        className="fa gphNode__text gphNode__text--lowOpacity gphNode__text--inverse"
         textAnchor="middle"
         transform="translate(0,5)"
         x={12}
diff --git a/x-pack/legacy/plugins/graph/public/components/graph_visualization/_graph_visualization.scss b/x-pack/legacy/plugins/graph/public/components/graph_visualization/_graph_visualization.scss
new file mode 100644
index 0000000000000..b932626ca5902
--- /dev/null
+++ b/x-pack/legacy/plugins/graph/public/components/graph_visualization/_graph_visualization.scss
@@ -0,0 +1,60 @@
+.gphEdge {
+  fill: $euiColorMediumShade;
+  stroke: $euiColorMediumShade;
+  stroke-width: 2;
+  stroke-opacity: 0.5;
+
+  &:hover {
+    stroke-opacity: 0.95;
+    cursor: pointer;
+  }
+
+  &--selected {
+    stroke: $euiColorDarkShade;
+    stroke-opacity: 0.95;
+  }
+
+  &--inferred {
+    stroke-dasharray: 5, 5;
+  }
+}
+
+.gphNode__label {
+  @include gphSvgText;
+  cursor: pointer;
+  &--html {
+    @include euiTextTruncate;
+    text-align: center;
+  }
+}
+
+.gphNode__markerCircle {
+  fill: $euiColorDarkShade;
+  stroke: $euiColorEmptyShade;
+}
+
+.gphNode__markerText {
+  @include gphSvgText;
+  font-size: $euiSizeS - 2px;
+  fill: $euiColorEmptyShade;
+}
+
+.gphNode__circle {
+  fill: $euiColorMediumShade;
+  &--selected {
+    stroke-width: $euiSizeXS;
+    stroke: transparentize($euiColorPrimary, 0.25);
+  }
+}
+
+.gphNode__text {
+  fill: $euiColorDarkestShade;
+
+  &--lowOpacity {
+    fill-opacity: 0.5;
+  }
+
+  &--inverse {
+    fill: $euiColorLightestShade;
+  }
+}
diff --git a/x-pack/legacy/plugins/graph/public/components/graph_visualization/_index.scss b/x-pack/legacy/plugins/graph/public/components/graph_visualization/_index.scss
new file mode 100644
index 0000000000000..8df131c731c22
--- /dev/null
+++ b/x-pack/legacy/plugins/graph/public/components/graph_visualization/_index.scss
@@ -0,0 +1 @@
+@import './graph_visualization';
\ No newline at end of file
diff --git a/x-pack/legacy/plugins/graph/public/components/graph_visualization/graph_visualization.test.tsx b/x-pack/legacy/plugins/graph/public/components/graph_visualization/graph_visualization.test.tsx
index fe131c6713d7b..deeea8175da8e 100644
--- a/x-pack/legacy/plugins/graph/public/components/graph_visualization/graph_visualization.test.tsx
+++ b/x-pack/legacy/plugins/graph/public/components/graph_visualization/graph_visualization.test.tsx
@@ -57,7 +57,7 @@ describe('graph_visualization', () => {
       y: 9,
     },
     {
-      color: 'blue',
+      color: 'yellow',
       data: {
         field: 'C',
         term: '3',
@@ -156,7 +156,7 @@ describe('graph_visualization', () => {
       />
     );
     instance
-      .find('.edge')
+      .find('.gphEdge')
       .first()
       .simulate('click');
     expect(edgeClickSpy).toHaveBeenCalledWith(edges[0]);
diff --git a/x-pack/legacy/plugins/graph/public/components/graph_visualization/graph_visualization.tsx b/x-pack/legacy/plugins/graph/public/components/graph_visualization/graph_visualization.tsx
index b3709947fef03..7c73d8fb3c3fc 100644
--- a/x-pack/legacy/plugins/graph/public/components/graph_visualization/graph_visualization.tsx
+++ b/x-pack/legacy/plugins/graph/public/components/graph_visualization/graph_visualization.tsx
@@ -7,6 +7,7 @@
 import React, { useRef } from 'react';
 import classNames from 'classnames';
 import d3, { ZoomEvent } from 'd3';
+import { isColorDark, hexToRgb } from '@elastic/eui';
 import { WorkspaceNode, WorkspaceEdge } from '../../types';
 import { makeNodeId } from '../../services/persistence';
 
@@ -91,9 +92,9 @@ export function GraphVisualization({
                 onClick={() => {
                   edgeClick(edge);
                 }}
-                className={classNames('edge', {
-                  selectedEdge: edge.isSelected,
-                  inferredEdge: edge.inferred,
+                className={classNames('gphEdge', {
+                  'gphEdge--selected': edge.isSelected,
+                  'gphEdge--inferred': edge.inferred,
                 })}
                 style={{ strokeWidth: edge.width }}
                 strokeLinecap="round"
@@ -121,12 +122,16 @@ export function GraphVisualization({
                   cx={node.kx}
                   cy={node.ky}
                   r={node.scaledSize}
-                  className={classNames('gphNode__circle', { selectedNode: node.isSelected })}
+                  className={classNames('gphNode__circle', {
+                    'gphNode__circle--selected': node.isSelected,
+                  })}
                   style={{ fill: node.color }}
                 />
                 {node.icon && (
                   <text
-                    className="fa gphNode__text gphNode__text--lowOpacity"
+                    className={classNames('fa gphNode__text gphNode__text--lowOpacity', {
+                      'gphNode__text--inverse': isColorDark(...hexToRgb(node.color)),
+                    })}
                     transform="translate(0,5)"
                     textAnchor="middle"
                     x={node.kx}

From b7e64a61359e496fc457093d4aa52255f8a0c2a5 Mon Sep 17 00:00:00 2001
From: Joe Reuter <johannes.reuter@elastic.co>
Date: Mon, 30 Sep 2019 14:50:55 +0200
Subject: [PATCH 5/7] address feedback

---
 x-pack/legacy/plugins/graph/public/app.js | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/x-pack/legacy/plugins/graph/public/app.js b/x-pack/legacy/plugins/graph/public/app.js
index 13e0db07d8550..32fd24b8bed6d 100644
--- a/x-pack/legacy/plugins/graph/public/app.js
+++ b/x-pack/legacy/plugins/graph/public/app.js
@@ -5,7 +5,6 @@
  */
 
 import _ from 'lodash';
-import d3 from 'd3';
 import { i18n } from '@kbn/i18n';
 import 'ace';
 import rison from 'rison-node';
@@ -596,6 +595,10 @@ app.controller('graphuiPlugin', function (
     }
   }
 
+  $scope.aceLoaded = (editor) => {
+    editor.$blockScrolling = Infinity;
+  };
+
   $scope.setDetail = function (data) {
     $scope.detail = data;
   };

From 059ce4baa830f90eca72ef0be7a633f5c9f3ccb9 Mon Sep 17 00:00:00 2001
From: Joe Reuter <johannes.reuter@elastic.co>
Date: Tue, 1 Oct 2019 10:35:36 +0200
Subject: [PATCH 6/7] clean up css

---
 x-pack/legacy/plugins/graph/public/_main.scss | 50 +------------------
 .../graph_visualization.test.tsx.snap         |  6 +--
 .../_graph_visualization.scss                 |  8 +--
 .../graph_visualization.tsx                   |  2 +-
 .../components/legacy_icon/_legacy_icon.scss  | 19 +++++--
 .../components/legacy_icon/legacy_icon.tsx    |  7 +--
 .../graph/public/helpers/style_choices.ts     |  5 +-
 .../services/persistence/deserialize.test.ts  |  2 +-
 8 files changed, 26 insertions(+), 73 deletions(-)

diff --git a/x-pack/legacy/plugins/graph/public/_main.scss b/x-pack/legacy/plugins/graph/public/_main.scss
index 26ed9df63d465..2559b7d1aba5c 100644
--- a/x-pack/legacy/plugins/graph/public/_main.scss
+++ b/x-pack/legacy/plugins/graph/public/_main.scss
@@ -6,64 +6,16 @@
   margin-bottom: $euiSizeS;
 }
 
-.gphColorPicker__color,
-.gphIconPicker__icon {
+.gphColorPicker__color {
   margin: $euiSizeXS;
   cursor: pointer;
 
-  &.selectedNode,
   &:hover,
   &:focus {
     transform: scale(1.4);
   }
 }
 
-.gphIconPicker__icon {
-  opacity: .7;
-
-  &.selectedNode,
-  &:hover,
-  &:focus {
-    opacity: 1;
-  }
-}
-
-.gphIndexSelect{
-  max-width: $euiSizeL * 10;
-  margin-right: $euiSizeXS;
-
-  &-unselected {
-    @include euiFocusRing;
-  }
-}
-
-.gphAddButton {
-  background: $euiColorPrimary;
-  color: $euiColorEmptyShade;
-  border-radius: 50%;
-  font-size: $euiFontSizeXS;
-  margin: 2px $euiSizeS 0 $euiSizeXS;
-  @include size(26px); // same as svg
-
-  &:hover:not(:disabled) {
-    background: shadeOrTint($euiColorPrimary, 10%, 10%);
-    cursor: pointer;
-  }
-
-  &:disabled {
-    background: $euiColorMediumShade;
-    cursor: not-allowed;
-  }
-
-  &-focus {
-    @include euiFocusRing;
-  }
-}
-
-.gphFieldList {
-  min-width: $euiSizeXL * 10;
-}
-
 /**
  * Utilities
  */
diff --git a/x-pack/legacy/plugins/graph/public/components/graph_visualization/__snapshots__/graph_visualization.test.tsx.snap b/x-pack/legacy/plugins/graph/public/components/graph_visualization/__snapshots__/graph_visualization.test.tsx.snap
index 030deae8fdd3c..0339bfc8a9be5 100644
--- a/x-pack/legacy/plugins/graph/public/components/graph_visualization/__snapshots__/graph_visualization.test.tsx.snap
+++ b/x-pack/legacy/plugins/graph/public/components/graph_visualization/__snapshots__/graph_visualization.test.tsx.snap
@@ -60,7 +60,7 @@ exports[`graph_visualization should render to svg elements 1`] = `
         }
       />
       <text
-        className="fa gphNode__text gphNode__text--lowOpacity gphNode__text--inverse"
+        className="fa gphNode__text gphNode__text--inverse"
         textAnchor="middle"
         transform="translate(0,5)"
         x={5}
@@ -114,7 +114,7 @@ exports[`graph_visualization should render to svg elements 1`] = `
         }
       />
       <text
-        className="fa gphNode__text gphNode__text--lowOpacity gphNode__text--inverse"
+        className="fa gphNode__text gphNode__text--inverse"
         textAnchor="middle"
         transform="translate(0,5)"
         x={7}
@@ -150,7 +150,7 @@ exports[`graph_visualization should render to svg elements 1`] = `
         }
       />
       <text
-        className="fa gphNode__text gphNode__text--lowOpacity gphNode__text--inverse"
+        className="fa gphNode__text gphNode__text--inverse"
         textAnchor="middle"
         transform="translate(0,5)"
         x={12}
diff --git a/x-pack/legacy/plugins/graph/public/components/graph_visualization/_graph_visualization.scss b/x-pack/legacy/plugins/graph/public/components/graph_visualization/_graph_visualization.scss
index b932626ca5902..a09eb0bb7469a 100644
--- a/x-pack/legacy/plugins/graph/public/components/graph_visualization/_graph_visualization.scss
+++ b/x-pack/legacy/plugins/graph/public/components/graph_visualization/_graph_visualization.scss
@@ -48,13 +48,9 @@
 }
 
 .gphNode__text {
-  fill: $euiColorDarkestShade;
-
-  &--lowOpacity {
-    fill-opacity: 0.5;
-  }
+  fill: $euiColorInk;
 
   &--inverse {
-    fill: $euiColorLightestShade;
+    fill: $euiColorGhost;
   }
 }
diff --git a/x-pack/legacy/plugins/graph/public/components/graph_visualization/graph_visualization.tsx b/x-pack/legacy/plugins/graph/public/components/graph_visualization/graph_visualization.tsx
index 7c73d8fb3c3fc..696e94da68a68 100644
--- a/x-pack/legacy/plugins/graph/public/components/graph_visualization/graph_visualization.tsx
+++ b/x-pack/legacy/plugins/graph/public/components/graph_visualization/graph_visualization.tsx
@@ -129,7 +129,7 @@ export function GraphVisualization({
                 />
                 {node.icon && (
                   <text
-                    className={classNames('fa gphNode__text gphNode__text--lowOpacity', {
+                    className={classNames('fa gphNode__text', {
                       'gphNode__text--inverse': isColorDark(...hexToRgb(node.color)),
                     })}
                     transform="translate(0,5)"
diff --git a/x-pack/legacy/plugins/graph/public/components/legacy_icon/_legacy_icon.scss b/x-pack/legacy/plugins/graph/public/components/legacy_icon/_legacy_icon.scss
index 75a578fe6ed21..1beae10630f23 100644
--- a/x-pack/legacy/plugins/graph/public/components/legacy_icon/_legacy_icon.scss
+++ b/x-pack/legacy/plugins/graph/public/components/legacy_icon/_legacy_icon.scss
@@ -1,7 +1,18 @@
 .gphLegacyIcon {
   width: $euiSizeS * 2;
-}
 
-.gphLegacyIcon--list {
-  margin-right: $euiSizeM;
-}
+  &--list {
+    margin-right: $euiSizeM;
+  }
+
+  &--pickable {
+    margin: $euiSizeXS;
+    cursor: pointer;
+    opacity: .7;
+  }
+
+  &--pickable:hover, &--pickable:focus, &--selected {
+    transform: scale(1.4);
+    opacity: 1;
+  }
+}
\ No newline at end of file
diff --git a/x-pack/legacy/plugins/graph/public/components/legacy_icon/legacy_icon.tsx b/x-pack/legacy/plugins/graph/public/components/legacy_icon/legacy_icon.tsx
index 7b0f2fbee6938..2c7b625664b22 100644
--- a/x-pack/legacy/plugins/graph/public/components/legacy_icon/legacy_icon.tsx
+++ b/x-pack/legacy/plugins/graph/public/components/legacy_icon/legacy_icon.tsx
@@ -21,11 +21,8 @@ export function LegacyIcon(props: LegacyIconProps) {
   const icon = (
     <i
       className={classNames('fa', props.className, 'gphLegacyIcon', {
-        selectedNode: props.selected,
-        gphNode__text: !props.onClick,
-        'gphNode__text--lowOpacity': !props.onClick,
-        gphIconPicker__icon: !!props.onClick,
-        gphNoUserSelect: !!props.onClick,
+        'gphLegacyIcon--selected': props.selected,
+        'gphLegacyIcon--pickable': !!props.onClick,
         'gphLegacyIcon--list': props.asListIcon,
       })}
       aria-label={props.icon.label}
diff --git a/x-pack/legacy/plugins/graph/public/helpers/style_choices.ts b/x-pack/legacy/plugins/graph/public/helpers/style_choices.ts
index 33c94dbcdbfcb..855818886ab6f 100644
--- a/x-pack/legacy/plugins/graph/public/helpers/style_choices.ts
+++ b/x-pack/legacy/plugins/graph/public/helpers/style_choices.ts
@@ -7,7 +7,6 @@
 import { i18n } from '@kbn/i18n';
 // @ts-ignore
 import { palettes } from '@elastic/eui/lib/services';
-import { isColorDark, hexToRgb } from '@elastic/eui';
 
 export interface FontawesomeIcon {
   class: string;
@@ -256,6 +255,4 @@ urlTemplateIconChoices.forEach(icon => {
   urlTemplateIconChoicesByClass[icon.class] = icon;
 });
 
-export const colorChoices = palettes.euiPaletteColorBlind.colors.filter(
-  (hex: string) => !isColorDark(...hexToRgb(hex))
-);
+export const colorChoices = palettes.euiPaletteColorBlind.colors;
diff --git a/x-pack/legacy/plugins/graph/public/services/persistence/deserialize.test.ts b/x-pack/legacy/plugins/graph/public/services/persistence/deserialize.test.ts
index 589ed4f3f637e..4575b596d65d9 100644
--- a/x-pack/legacy/plugins/graph/public/services/persistence/deserialize.test.ts
+++ b/x-pack/legacy/plugins/graph/public/services/persistence/deserialize.test.ts
@@ -156,7 +156,7 @@ describe('deserialize', () => {
           "type": "string",
         },
         Object {
-          "color": "#FCA5D3",
+          "color": "#CE0060",
           "hopSize": 5,
           "icon": Object {
             "class": "fa-folder-open-o",

From 19da35387d307315c256157927b7147864ad6047 Mon Sep 17 00:00:00 2001
From: Joe Reuter <johannes.reuter@elastic.co>
Date: Wed, 2 Oct 2019 11:58:41 +0200
Subject: [PATCH 7/7] fix scss

---
 .../graph_visualization/_graph_visualization.scss         | 4 ++++
 .../graph/public/components/legacy_icon/_legacy_icon.scss | 8 +++++---
 2 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/x-pack/legacy/plugins/graph/public/components/graph_visualization/_graph_visualization.scss b/x-pack/legacy/plugins/graph/public/components/graph_visualization/_graph_visualization.scss
index a09eb0bb7469a..4613ac77b97bb 100644
--- a/x-pack/legacy/plugins/graph/public/components/graph_visualization/_graph_visualization.scss
+++ b/x-pack/legacy/plugins/graph/public/components/graph_visualization/_graph_visualization.scss
@@ -19,6 +19,10 @@
   }
 }
 
+.gphNode {
+  cursor: pointer;
+}
+
 .gphNode__label {
   @include gphSvgText;
   cursor: pointer;
diff --git a/x-pack/legacy/plugins/graph/public/components/legacy_icon/_legacy_icon.scss b/x-pack/legacy/plugins/graph/public/components/legacy_icon/_legacy_icon.scss
index 1beae10630f23..56fc1b31a9ffa 100644
--- a/x-pack/legacy/plugins/graph/public/components/legacy_icon/_legacy_icon.scss
+++ b/x-pack/legacy/plugins/graph/public/components/legacy_icon/_legacy_icon.scss
@@ -8,11 +8,13 @@
   &--pickable {
     margin: $euiSizeXS;
     cursor: pointer;
-    opacity: .7;
+    opacity: 0.7;
   }
 
-  &--pickable:hover, &--pickable:focus, &--selected {
+  &--pickable:hover,
+  &--pickable:focus,
+  &--selected {
     transform: scale(1.4);
     opacity: 1;
   }
-}
\ No newline at end of file
+}