[Graph] Empty workspace overlay

x-pack/legacy/plugins/graph/public/angular/graph_client_workspace.js

@@ -1200,11 +1200,14 @@ module.exports = (function () {
     }
 
 
-    //Add missing links between existing nodes
-    this.fillInGraph = function () {
+    /**
+     * Add missing links between existing nodes
+     * @param maxNewEdges Max number of new edges added. Avoid adding too many new edges
+     * at once into the graph otherwise disorientating
+     */
+    this.fillInGraph = function (maxNewEdges = 10) {
       let nodesForLinking = self.getSelectedOrAllTopNodes();
 
-      const maxNewEdges = 10; // Avoid adding too many new edges at once into the graph otherwise disorientating
       const maxNumVerticesSearchable = 100;
 
 

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

@@ -16,12 +16,16 @@
     http="pluginDependencies.http"
     overlays="pluginDependencies.overlays"
     is-loading="loading"
+    is-initialized="!!workspace || savedWorkspace.id"
     initial-query="initialQuery"
     state="reduxState"
     dispatch="reduxDispatch"
+    on-fill-workspace="fillWorkspace"
   ></graph-app>
 
-  <div class="gphGraph__container" id="GraphSvgContainer">
+  <!-- The graph svg container has to be there from the start because of some listeners being registered,
+       this is why it's using ng-show instead of ng-if -->
+  <div class="gphGraph__container" id="GraphSvgContainer" ng-show="workspace">
     <svg class="gphGraph" width="100%" height="100%" pointer-events="all" id="graphSvg" ng-click="hideAllConfigPanels()">
       <g id="svgRootGroup">
         <g>

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

@@ -65,6 +65,7 @@ import { urlTemplateRegex } from  './helpers/url_template';
 import {
   asAngularSyncedObservable,
 } from './helpers/as_observable';
+import { fetchTopNodes } from './services/fetch_top_nodes';
 import {
   createGraphStore,
   loadFields,
@@ -110,6 +111,8 @@ app.directive('graphApp', function (reactDirective) {
   return reactDirective(GraphApp, [
     ['state', { watchDepth: 'reference' }],
     ['dispatch', { watchDepth: 'reference' }],
+    ['onFillWorkspace', { watchDepth: 'reference' }],
+    ['isInitialized', { watchDepth: 'reference' }],
     ['currentIndexPattern', { watchDepth: 'reference' }],
     ['isLoading', { watchDepth: 'reference' }],
     ['onIndexPatternSelected', { watchDepth: 'reference' }],
@@ -435,6 +438,30 @@ app.controller('graphuiPlugin', function (
       });
   };
 
+  $scope.fillWorkspace = async () => {
+    try {
+      const fields = selectedFieldsSelector(store.getState());
+      const topTermNodes = await fetchTopNodes(
+        npStart.core.http.post,
+        $scope.selectedIndex.title,
+        fields
+      );
+      initWorkspaceIfRequired();
+      $scope.workspace.mergeGraph({
+        nodes: topTermNodes,
+        edges: []
+      });
+      $scope.workspace.fillInGraph(fields.length * 10);
+    } catch (e) {
+      toastNotifications.addDanger({
+        title: i18n.translate(
+          'xpack.graph.fillWorkspaceError',
+          { defaultMessage: 'Fetching top terms failed: {message}', values: { message: e.message } }
+        ),
+      });
+    }
+  };
+
   $scope.submit = function (searchTerm) {
     initWorkspaceIfRequired();
     const numHops = 2;
@@ -859,9 +886,6 @@ app.controller('graphuiPlugin', function (
   } else {
     $route.current.locals.SavedWorkspacesProvider.get().then(function (newWorkspace) {
       $scope.savedWorkspace = newWorkspace;
-      openSourceModal(npStart.core, indexPattern => {
-        $scope.indexSelected(indexPattern);
-      });
     });
   }
 

x-pack/legacy/plugins/graph/public/components/_index.scss

@@ -1,5 +1,7 @@
 @import './app';
 @import './search_bar';
+@import './source_modal';
+@import './guidance_panel/index';
 @import './venn_diagram/index';
 @import './settings/index';
 @import './legacy_icon/index';

x-pack/legacy/plugins/graph/public/components/_source_modal.scss

@@ -0,0 +1,4 @@
+.gphSourceModal {
+  width: 720px;
+  min-height: 530px;
+}

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

@@ -5,23 +5,49 @@
  */
 
 import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
-import React from 'react';
+import React, { useState } from 'react';
+import { I18nProvider } from '@kbn/i18n/react';
 import { FieldManagerProps, FieldManager } from './field_manager';
 import { SearchBarProps, SearchBar } from './search_bar';
+import { GuidancePanel } from './guidance_panel';
+import { selectedFieldsSelector } from '../state_management';
+import { openSourceModal } from '../services/source_modal';
 
-export interface GraphAppProps extends FieldManagerProps, SearchBarProps {}
+export interface GraphAppProps extends FieldManagerProps, SearchBarProps {
+  onFillWorkspace: () => void;
+  isInitialized: boolean;
+}
 
 export function GraphApp(props: GraphAppProps) {
+  const [pickerOpen, setPickerOpen] = useState(false);
+
   return (
-    <div className="gphGraph__bar">
-      <EuiFlexGroup direction="column" gutterSize="s">
-        <EuiFlexItem>
-          <SearchBar {...props} />
-        </EuiFlexItem>
-        <EuiFlexItem>
-          <FieldManager {...props} />
-        </EuiFlexItem>
-      </EuiFlexGroup>
-    </div>
+    <I18nProvider>
+      <>
+        <div className="gphGraph__bar">
+          <EuiFlexGroup direction="column" gutterSize="s">
+            <EuiFlexItem>
+              <SearchBar {...props} />
+            </EuiFlexItem>
+            <EuiFlexItem>
+              <FieldManager {...props} pickerOpen={pickerOpen} setPickerOpen={setPickerOpen} />
+            </EuiFlexItem>
+          </EuiFlexGroup>
+        </div>
+        {!props.isInitialized && (
+          <GuidancePanel
+            hasDatasource={Boolean(props.currentIndexPattern)}
+            hasFields={selectedFieldsSelector(props.state).length > 0}
+            onFillWorkspace={props.onFillWorkspace}
+            onOpenFieldPicker={() => {
+              setPickerOpen(true);
+            }}
+            onOpenDatasourcePicker={() => {
+              openSourceModal(props, props.onIndexPatternSelected);
+            }}
+          />
+        )}
+      </>
+    </I18nProvider>
   );
 }

x-pack/legacy/plugins/graph/public/components/field_manager/field_icon.tsx

@@ -16,7 +16,7 @@ function getIconForDataType(dataType: string) {
     boolean: 'invert',
     date: 'calendar',
     geo_point: 'globe',
-    ip: 'link',
+    ip: 'storage',
   };
   return icons[dataType] || ICON_TYPES.find(t => t === dataType) || 'document';
 }

x-pack/legacy/plugins/graph/public/components/field_manager/field_manager.test.tsx

@@ -18,6 +18,7 @@ describe('field_manager', () => {
   let store: GraphStore;
   let instance: ShallowWrapper;
   let dispatchSpy: jest.Mock;
+  let openSpy: jest.Mock;
 
   beforeEach(() => {
     store = createGraphStore();
@@ -52,8 +53,16 @@ describe('field_manager', () => {
     );
 
     dispatchSpy = jest.fn(store.dispatch);
-
-    instance = shallow(<FieldManager state={store.getState()} dispatch={dispatchSpy} />);
+    openSpy = jest.fn();
+
+    instance = shallow(
+      <FieldManager
+        state={store.getState()}
+        dispatch={dispatchSpy}
+        pickerOpen={false}
+        setPickerOpen={openSpy}
+      />
+    );
   });
 
   function update() {
@@ -80,13 +89,19 @@ describe('field_manager', () => {
   });
 
   it('should select fields from picker', () => {
-    const fieldPicker = instance.find(FieldPicker).dive();
-
     act(() => {
-      (fieldPicker.find(EuiPopover).prop('button')! as ReactElement).props.onClick();
+      (instance
+        .find(FieldPicker)
+        .dive()
+        .find(EuiPopover)
+        .prop('button')! as ReactElement).props.onClick();
     });
 
-    fieldPicker.update();
+    expect(openSpy).toHaveBeenCalled();
+
+    instance.setProps({ pickerOpen: true });
+
+    const fieldPicker = instance.find(FieldPicker).dive();
 
     expect(
       fieldPicker

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

@@ -4,7 +4,6 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { I18nProvider } from '@kbn/i18n/react';
 import React from 'react';
 import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
 import { bindActionCreators } from 'redux';
@@ -24,9 +23,11 @@ import {
 export interface FieldManagerProps {
   state: GraphState;
   dispatch: GraphDispatch;
+  pickerOpen: boolean;
+  setPickerOpen: (open: boolean) => void;
 }
 
-export function FieldManager({ state, dispatch }: FieldManagerProps) {
+export function FieldManager({ state, dispatch, pickerOpen, setPickerOpen }: FieldManagerProps) {
   const fieldMap = fieldMapSelector(state);
   const allFields = fieldsSelector(state);
   const selectedFields = selectedFieldsSelector(state);
@@ -41,17 +42,20 @@ export function FieldManager({ state, dispatch }: FieldManagerProps) {
   );
 
   return (
-    <I18nProvider>
-      <EuiFlexGroup gutterSize="s" className="gphFieldManager" alignItems="center" wrap>
-        {selectedFields.map(field => (
-          <EuiFlexItem key={field.name} grow={false}>
-            <FieldEditor allFields={allFields} {...actionCreators} field={field} />
-          </EuiFlexItem>
-        ))}
-        <EuiFlexItem grow={false}>
-          <FieldPicker fieldMap={fieldMap} {...actionCreators} />
+    <EuiFlexGroup gutterSize="s" className="gphFieldManager" alignItems="center" wrap>
+      {selectedFields.map(field => (
+        <EuiFlexItem key={field.name} grow={false}>
+          <FieldEditor allFields={allFields} {...actionCreators} field={field} />
         </EuiFlexItem>
-      </EuiFlexGroup>
-    </I18nProvider>
+      ))}
+      <EuiFlexItem grow={false}>
+        <FieldPicker
+          open={pickerOpen}
+          setOpen={setPickerOpen}
+          fieldMap={fieldMap}
+          {...actionCreators}
+        />
+      </EuiFlexItem>
+    </EuiFlexGroup>
   );
 }

x-pack/legacy/plugins/graph/public/components/field_manager/field_picker.tsx

@@ -16,11 +16,17 @@ export interface FieldPickerProps {
   fieldMap: Record<string, WorkspaceField>;
   selectField: (fieldName: string) => void;
   deselectField: (fieldName: string) => void;
+  open: boolean;
+  setOpen: (open: boolean) => void;
 }
 
-export function FieldPicker({ fieldMap, selectField, deselectField }: FieldPickerProps) {
-  const [open, setOpen] = useState(false);
-
+export function FieldPicker({
+  fieldMap,
+  selectField,
+  deselectField,
+  open,
+  setOpen,
+}: FieldPickerProps) {
   const allFields = Object.values(fieldMap);
   const unselectedFields = allFields.filter(field => !field.selected);
   const hasSelectedFields = unselectedFields.length < allFields.length;

x-pack/legacy/plugins/graph/public/components/guidance_panel/_guidance_panel.scss

@@ -0,0 +1,38 @@
+.gphGuidancePanel {
+  max-width: 580px;
+  margin: $euiSizeL 0;
+}
+
+.gphGuidancePanel__list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.gphGuidancePanel__item {
+  display: block;
+  max-width: 420px;
+  position: relative;
+  padding-left: $euiSizeXL;
+  margin-bottom: $euiSizeL;
+
+  button {
+    // make buttons wrap lines like regular text
+    display: contents;
+  }
+}
+
+.gphGuidancePanel__item--disabled {
+  color: $euiColorMediumShade;
+  pointer-events: none;
+
+  button {
+    color: $euiColorDarkShade !important;
+  }
+}
+
+.gphGuidancePanel__itemIcon {
+  position: absolute;
+  left: 0;
+  top: -$euiSizeXS;
+}

x-pack/legacy/plugins/graph/public/components/guidance_panel/_index.scss

@@ -0,0 +1 @@
+@import './_guidance_panel';