[lens] Improve suggestions for split series

x-pack/legacy/plugins/lens/public/indexpattern_plugin/__mocks__/loader.ts

@@ -18,18 +18,36 @@ export function getIndexPatterns() {
             aggregatable: true,
             searchable: true,
           },
+          {
+            name: 'start_date',
+            type: 'date',
+            aggregatable: true,
+            searchable: true,
+          },
           {
             name: 'bytes',
             type: 'number',
             aggregatable: true,
             searchable: true,
           },
+          {
+            name: 'memory',
+            type: 'number',
+            aggregatable: true,
+            searchable: true,
+          },
           {
             name: 'source',
             type: 'string',
             aggregatable: true,
             searchable: true,
           },
+          {
+            name: 'dest',
+            type: 'string',
+            aggregatable: true,
+            searchable: true,
+          },
         ],
       },
       {

x-pack/legacy/plugins/lens/public/indexpattern_plugin/datapanel.tsx

@@ -319,6 +319,7 @@ export const InnerIndexPatternDataPanel = function InnerIndexPatternDataPanel({
                 .sort(sortFields)
                 .map(field => (
                   <FieldItem
+                    indexPatternId={currentIndexPatternId}
                     key={field.name}
                     field={field}
                     highlight={state.nameFilter.toLowerCase()}

x-pack/legacy/plugins/lens/public/indexpattern_plugin/dimension_panel/dimension_panel.test.tsx

@@ -840,7 +840,7 @@ describe('IndexPatternDimensionPanel', () => {
       ).toBeFalsy();
     });
 
-    it('is not droppable if the dragged item has no type', () => {
+    it('is not droppable if the dragged item has no field', () => {
       wrapper = shallow(
         <IndexPatternDimensionPanel
           {...defaultProps}
@@ -867,7 +867,7 @@ describe('IndexPatternDimensionPanel', () => {
           {...defaultProps}
           dragDropContext={{
             ...dragDropContext,
-            dragging: { type: 'number', name: 'bar' },
+            dragging: { indexPatternId: 'foo', field: { type: 'number', name: 'bar' } },
           }}
           state={dragDropState()}
           filterOperations={() => false}
@@ -889,7 +889,7 @@ describe('IndexPatternDimensionPanel', () => {
           {...defaultProps}
           dragDropContext={{
             ...dragDropContext,
-            dragging: { type: 'number', name: 'bar' },
+            dragging: { field: { type: 'number', name: 'bar' }, indexPatternId: 'foo' },
           }}
           state={dragDropState()}
           filterOperations={op => op.dataType === 'number'}
@@ -905,8 +905,30 @@ describe('IndexPatternDimensionPanel', () => {
       ).toBeTruthy();
     });
 
+    it('is notdroppable if the field belongs to another index pattern', () => {
+      wrapper = shallow(
+        <IndexPatternDimensionPanel
+          {...defaultProps}
+          dragDropContext={{
+            ...dragDropContext,
+            dragging: { field: { type: 'number', name: 'bar' }, indexPatternId: 'foo2' },
+          }}
+          state={dragDropState()}
+          filterOperations={op => op.dataType === 'number'}
+          layerId="myLayer"
+        />
+      );
+
+      expect(
+        wrapper
+          .find('[data-test-subj="indexPattern-dropTarget"]')
+          .first()
+          .prop('droppable')
+      ).toBeFalsy();
+    });
+
     it('appends the dropped column when a field is dropped', () => {
-      const dragging = { type: 'number', name: 'bar' };
+      const dragging = { field: { type: 'number', name: 'bar' }, indexPatternId: 'foo' };
       const testState = dragDropState();
       wrapper = shallow(
         <IndexPatternDimensionPanel
@@ -951,7 +973,7 @@ describe('IndexPatternDimensionPanel', () => {
     });
 
     it('updates a column when a field is dropped', () => {
-      const dragging = { type: 'number', name: 'bar' };
+      const dragging = { field: { type: 'number', name: 'bar' }, indexPatternId: 'foo' };
       const testState = dragDropState();
       wrapper = shallow(
         <IndexPatternDimensionPanel
@@ -990,33 +1012,5 @@ describe('IndexPatternDimensionPanel', () => {
         },
       });
     });
-
-    it('ignores drops of incompatible fields', () => {
-      const dragging = { type: 'number', name: 'baz' };
-      const testState = dragDropState();
-      wrapper = shallow(
-        <IndexPatternDimensionPanel
-          {...defaultProps}
-          dragDropContext={{
-            ...dragDropContext,
-            dragging,
-          }}
-          state={testState}
-          filterOperations={op => op.dataType === 'number'}
-          layerId="myLayer"
-        />
-      );
-
-      act(() => {
-        const onDrop = wrapper
-          .find('[data-test-subj="indexPattern-dropTarget"]')
-          .first()
-          .prop('onDrop') as DropHandler;
-
-        onDrop(dragging);
-      });
-
-      expect(setState).not.toBeCalled();
-    });
   });
 });

x-pack/legacy/plugins/lens/public/indexpattern_plugin/dimension_panel/dimension_panel.tsx

@@ -22,6 +22,7 @@ import { getAvailableOperationsByMetadata, buildColumn } from '../operations';
 import { PopoverEditor } from './popover_editor';
 import { DragContextState, ChildDragDropProvider, DragDrop } from '../../drag_drop';
 import { changeColumn, deleteColumn } from '../state_helpers';
+import { isDraggedField } from '../utils';
 
 export type IndexPatternDimensionPanelProps = DatasourceDimensionPanelProps & {
   state: IndexPatternPrivateState;
@@ -87,9 +88,13 @@ export const IndexPatternDimensionPanel = memo(function IndexPatternDimensionPan
 
   function canHandleDrop() {
     const { dragging } = props.dragDropContext;
-    const field = dragging as IndexPatternField;
+    const layerIndexPatternId = props.state.layers[props.layerId].indexPatternId;
 
-    return !!field && !!field.type && !!hasOperationForField(field as IndexPatternField);
+    return (
+      isDraggedField(dragging) &&
+      layerIndexPatternId === dragging.indexPatternId &&
+      Boolean(hasOperationForField(dragging.field))
+    );
   }
 
   return (
@@ -98,8 +103,8 @@ export const IndexPatternDimensionPanel = memo(function IndexPatternDimensionPan
         className="lnsConfigPanel__summary"
         data-test-subj="indexPattern-dropTarget"
         droppable={canHandleDrop()}
-        onDrop={field => {
-          if (!hasOperationForField(field as IndexPatternField)) {
+        onDrop={droppedItem => {
+          if (!isDraggedField(droppedItem) || !hasOperationForField(droppedItem.field)) {
             // TODO: What do we do if we couldn't find a column?
             return;
           }
@@ -114,7 +119,7 @@ export const IndexPatternDimensionPanel = memo(function IndexPatternDimensionPan
                 indexPattern: currentIndexPattern,
                 layerId,
                 suggestedPriority: props.suggestedPriority,
-                field: field as IndexPatternField,
+                field: droppedItem.field,
               }),
             })
           );

x-pack/legacy/plugins/lens/public/indexpattern_plugin/field_item.tsx

@@ -5,13 +5,14 @@
  */
 
 import React from 'react';
-import { IndexPatternField } from './indexpattern';
+import { IndexPatternField, DraggedField } from './indexpattern';
 import { DragDrop } from '../drag_drop';
 import { FieldIcon } from './field_icon';
 import { DataType } from '..';
 
 export interface FieldItemProps {
   field: IndexPatternField;
+  indexPatternId: string;
   highlight?: string;
 }
 
@@ -22,7 +23,7 @@ function wrapOnDot(str?: string) {
   return str ? str.replace(/\./g, '.\u200B') : undefined;
 }
 
-export function FieldItem({ field, highlight }: FieldItemProps) {
+export function FieldItem({ field, indexPatternId, highlight }: FieldItemProps) {
   const wrappableName = wrapOnDot(field.name)!;
   const wrappableHighlight = wrapOnDot(highlight);
   const highlightIndex = wrappableHighlight
@@ -41,7 +42,7 @@ export function FieldItem({ field, highlight }: FieldItemProps) {
 
   return (
     <DragDrop
-      value={field}
+      value={{ field, indexPatternId } as DraggedField}
       draggable
       className={`lnsFieldListPanel__field lnsFieldListPanel__field-btn-${field.type}`}
     >