[Graph] Style fixes (#47667) (#47824)

x-pack/legacy/plugins/graph/public/angular/templates/_graph.scss

@@ -22,6 +22,8 @@
  }
 
 .gphGraph__container {
+  display: flex;
+  flex-direction: column;
   background: $euiColorEmptyShade;
   position: relative;
   flex: 1;

x-pack/legacy/plugins/graph/public/angular/templates/_sidebar.scss

@@ -27,7 +27,7 @@
 
 .gphSidebar__panel{
   max-height: $euiSizeL * 10;
-  overflow-y: auto;
+  overflow-y: hidden auto;
 }
 
 /**
@@ -49,6 +49,10 @@
   margin-bottom: 0;
 }
 
+.gphSelectionList__icon {
+  font-size: $euiFontSizeXS;
+}
+
 .gphSelectionList__field {
   line-height: $euiLineHeight;
   margin: $euiSizeXS 0;

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

@@ -7,7 +7,8 @@
     <graph-inspect ng-show="menus.showInspect"></graph-inspect>
   </div>
 
-  <graph-app
+  <div
+    graph-app
     current-index-pattern="selectedIndex"
     on-query-submit="submit"
     index-pattern-provider="indexPatternProvider"
@@ -20,15 +21,17 @@
     plugin-data-start="pluginDataStart"
     core-start="coreStart"
     store="store"
-  ></graph-app>
+  ></div>
 
   <div class="gphGraph__container" id="GraphSvgContainer" ng-if="workspaceInitialized || savedWorkspace.id">
-    <graph-visualization
+    <div
+      class="gphVisualization"
+      graph-visualization
       nodes="workspace.nodes"
       edges="workspace.edges"
       edge-click="clickEdge"
       node-click="nodeClick"
-    ></graph-visualization>
+    ></div>
 
     <div id="sidebar" class="gphSidebar" ng-if="workspace !== null">
 
@@ -156,7 +159,15 @@
               <circle class="gphNode__circle " r="10" cx="12" cy="12" ng-attr-style="fill:{{n.color}}"
                 ng-click="workspace.deselectNode(n)" />
 
-              <text ng-if="n.icon" class="fa gphNode__text" text-anchor="middle" x="12" y="17" ng-click="workspace.deselectNode(n)">{{n.icon.code}}</text>
+              <text
+                ng-if="n.icon"
+                class="fa gphNode__text gphSelectionList__icon"
+                text-anchor="middle"
+                x="12"
+                y="16"
+                ng-click="workspace.deselectNode(n)"
+                ng-class="{'gphNode__text--inverse': isColorDark(n.color)}"
+              >{{n.icon.code}}</text>
             </svg>
             <span>{{n.label}}</span>
             <span ng-if="n.numChildren>0"> (+{{n.numChildren}})</span>

x-pack/legacy/plugins/graph/public/app.js

@@ -9,6 +9,7 @@ import { i18n } from '@kbn/i18n';
 import 'ace';
 import React from 'react';
 import { Provider } from 'react-redux';
+import { isColorDark, hexToRgb } from '@elastic/eui';
 
 // import the uiExports that we want to "use"
 import 'uiExports/fieldFormats';
@@ -98,14 +99,13 @@ app.directive('graphApp', function (reactDirective) {
     ['pluginDataStart', { watchDepth: 'reference' }],
     ['store', { watchDepth: 'reference' }],
     ['reduxStore', { watchDepth: 'reference' }],
-  ]);
+  ], { restrict: 'A' });
 });
 
 app.directive('graphVisualization', function (reactDirective) {
-  return reactDirective(GraphVisualization);
+  return reactDirective(GraphVisualization, undefined, { restrict: 'A' });
 });
 
-
 if (uiRoutes.enable) {
   uiRoutes.enable();
 }
@@ -324,6 +324,7 @@ app.controller('graphuiPlugin', function (
   const allSavingDisabled = chrome.getInjected('graphSavePolicy') === 'none';
   $scope.spymode = 'request';
   $scope.colors = colorChoices;
+  $scope.isColorDark = (color) => isColorDark(...hexToRgb(color));
   $scope.nodeClick = function (n, $event) {
 
     //Selection logic - shift key+click helps selects multiple nodes

x-pack/legacy/plugins/graph/public/components/app.tsx

@@ -4,7 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
+import { EuiSpacer } from '@elastic/eui';
 
 import { DataPublicPluginStart } from 'src/plugins/data/public';
 import { Provider } from 'react-redux';
@@ -45,14 +45,9 @@ export function GraphApp(props: GraphAppProps) {
         <Provider store={reduxStore}>
           <>
             <div className="gphGraph__bar">
-              <EuiFlexGroup direction="column" gutterSize="s">
-                <EuiFlexItem>
-                  <SearchBar {...searchBarProps} />
-                </EuiFlexItem>
-                <EuiFlexItem>
-                  <FieldManager pickerOpen={pickerOpen} setPickerOpen={setPickerOpen} />
-                </EuiFlexItem>
-              </EuiFlexGroup>
+              <SearchBar {...searchBarProps} />
+              <EuiSpacer size="s" />
+              <FieldManager pickerOpen={pickerOpen} setPickerOpen={setPickerOpen} />
             </div>
             {!props.isInitialized && (
               <GuidancePanel

x-pack/legacy/plugins/graph/public/components/graph_visualization/_graph_visualization.scss

@@ -1,3 +1,14 @@
+.gphVisualization {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+}
+
+.gphGraph {
+  flex: 1;
+  overflow: hidden;
+}
+
 .gphEdge {
   fill: $euiColorMediumShade;
   stroke: $euiColorMediumShade;