[Graph] Reactify visualization

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
  */
@@ -35,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
  */

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;
 }

x-pack/legacy/plugins/graph/public/angular/templates/index.html

@@ -21,65 +21,13 @@
     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()">
-      <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>
-
-          <!-- 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}}
-          </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>
-
-    <!--
-            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>
-
-  -->
+  <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>
 
     <div id="sidebar" class="gphSidebar" ng-if="workspace !== null">
 

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';
@@ -45,6 +44,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 +122,11 @@ app.directive('graphApp', function (reactDirective) {
   ]);
 });
 
+app.directive('graphVisualization', function (reactDirective) {
+  return reactDirective(GraphVisualization);
+});
+
+
 if (uiRoutes.enable) {
   uiRoutes.enable();
 }
@@ -590,6 +595,10 @@ app.controller('graphuiPlugin', function (
     }
   }
 
+  $scope.aceLoaded = (editor) => {
+    editor.$blockScrolling = Infinity;
+  };
+
   $scope.setDetail = function (data) {
     $scope.detail = data;
   };
@@ -630,33 +639,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`;
 

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';