[Lens] drag and drop functionality for annotations

x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/buttons/drop_targets_utils.tsx

@@ -9,6 +9,7 @@ import React from 'react';
 import classNames from 'classnames';
 import { EuiIcon, EuiFlexItem, EuiFlexGroup, EuiText } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
+import { DraggingIdentifier } from '../../../../drag_drop';
 import { Datasource, DropType, GetDropProps } from '../../../../types';
 
 function getPropsForDropType(type: 'swap' | 'duplicate' | 'combine') {
@@ -130,12 +131,35 @@ export const getAdditionalClassesOnDroppable = (dropType?: string) => {
   }
 };
 
+const isOperationFromTheSameGroup = (
+  op1?: DraggingIdentifier,
+  op2?: { layerId: string; groupId: string; columnId: string }
+) => {
+  return (
+    op1 &&
+    op2 &&
+    'columnId' in op1 &&
+    op1.columnId !== op2.columnId &&
+    'groupId' in op1 &&
+    op1.groupId === op2.groupId &&
+    'layerId' in op1 &&
+    op1.layerId === op2.layerId
+  );
+};
+
 export const getDropProps = (
   layerDatasource: Datasource<unknown, unknown>,
-  layerDatasourceDropProps: GetDropProps
-) => {
+  dropProps: GetDropProps,
+  isNew?: boolean
+): { dropTypes: DropType[]; nextLabel?: string } | undefined => {
   if (layerDatasource) {
-    return layerDatasource.getDropProps(layerDatasourceDropProps);
+    return layerDatasource.getDropProps(dropProps);
+  } else {
+    // TODO: refactor & test this - it's too annotations specific
+    // TODO: allow moving operations between layers for annotations
+    if (isOperationFromTheSameGroup(dropProps.dragging, dropProps)) {
+      return { dropTypes: [isNew ? 'duplicate_compatible' : 'reorder'], nextLabel: '' };
+    }
   }
   return;
 };

x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/buttons/empty_dimension_button.tsx

@@ -131,14 +131,18 @@ export function EmptyDimensionButton({
     setNewColumnId(generateId());
   }, [itemIndex]);
 
-  const dropProps = getDropProps(layerDatasource, {
-    ...(layerDatasourceDropProps || {}),
-    dragging,
-    columnId: newColumnId,
-    filterOperations: group.filterOperations,
-    groupId: group.groupId,
-    dimensionGroups: groups,
-  });
+  const dropProps = getDropProps(
+    layerDatasource,
+    {
+      ...(layerDatasourceDropProps || {}),
+      dragging,
+      columnId: newColumnId,
+      filterOperations: group.filterOperations,
+      groupId: group.groupId,
+      dimensionGroups: groups,
+    },
+    true
+  );
 
   const dropTypes = dropProps?.dropTypes;
   const nextLabel = dropProps?.nextLabel;

x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/layer_panel.tsx

@@ -179,59 +179,69 @@ export function LayerPanel(
         setNextFocusedButtonId(columnId);
       }
 
-      const group = groups.find(({ groupId: gId }) => gId === groupId);
-
-      const filterOperations = group?.filterOperations || (() => false);
+      if (layerDatasource) {
+        const group = groups.find(({ groupId: gId }) => gId === groupId);
+        const filterOperations = group?.filterOperations || (() => false);
+        const dropResult = layerDatasourceOnDrop({
+          ...layerDatasourceDropProps,
+          droppedItem,
+          columnId,
+          layerId: targetLayerId,
+          filterOperations,
+          dimensionGroups: groups,
+          groupId,
+          dropType,
+        });
+        if (dropResult) {
+          let previousColumn =
+            typeof droppedItem.column === 'string' ? droppedItem.column : undefined;
 
-      const dropResult = layerDatasource
-        ? layerDatasourceOnDrop({
-            ...layerDatasourceDropProps,
-            droppedItem,
+          // make it inherit only for moving and duplicate
+          if (!previousColumn) {
+            // when duplicating check if the previous column is required
+            if (
+              dropType === 'duplicate_compatible' &&
+              typeof droppedItem.columnId === 'string' &&
+              group?.requiresPreviousColumnOnDuplicate
+            ) {
+              previousColumn = droppedItem.columnId;
+            } else {
+              previousColumn = typeof dropResult === 'object' ? dropResult.deleted : undefined;
+            }
+          }
+          const newVisState = setDimension({
             columnId,
-            layerId: targetLayerId,
-            filterOperations,
-            dimensionGroups: groups,
             groupId,
-            dropType,
-          })
-        : false;
-      if (dropResult) {
-        let previousColumn =
-          typeof droppedItem.column === 'string' ? droppedItem.column : undefined;
-
-        // make it inherit only for moving and duplicate
-        if (!previousColumn) {
-          // when duplicating check if the previous column is required
-          if (
-            dropType === 'duplicate_compatible' &&
-            typeof droppedItem.columnId === 'string' &&
-            group?.requiresPreviousColumnOnDuplicate
-          ) {
-            previousColumn = droppedItem.columnId;
+            layerId: targetLayerId,
+            prevState: props.visualizationState,
+            previousColumn,
+            frame: framePublicAPI,
+          });
+
+          if (typeof dropResult === 'object') {
+            // When a column is moved, we delete the reference to the old
+            updateVisualization(
+              removeDimension({
+                columnId: dropResult.deleted,
+                layerId: targetLayerId,
+                prevState: newVisState,
+                frame: framePublicAPI,
+              })
+            );
           } else {
-            previousColumn = typeof dropResult === 'object' ? dropResult.deleted : undefined;
+            updateVisualization(newVisState);
           }
         }
-        const newVisState = setDimension({
-          columnId,
-          groupId,
-          layerId: targetLayerId,
-          prevState: props.visualizationState,
-          previousColumn,
-          frame: framePublicAPI,
-        });
-
-        if (typeof dropResult === 'object') {
-          // When a column is moved, we delete the reference to the old
-          updateVisualization(
-            removeDimension({
-              columnId: dropResult.deleted,
-              layerId: targetLayerId,
-              prevState: newVisState,
-              frame: framePublicAPI,
-            })
-          );
-        } else {
+      } else {
+        if (dropType === 'duplicate_compatible' || dropType === 'reorder') {
+          const newVisState = setDimension({
+            columnId,
+            groupId,
+            layerId: targetLayerId,
+            prevState: props.visualizationState,
+            previousColumn: droppedItem.id,
+            frame: framePublicAPI,
+          });
           updateVisualization(newVisState);
         }
       }

x-pack/plugins/lens/public/xy_visualization/annotations/expression.tsx

@@ -59,6 +59,7 @@ const groupVisibleConfigsByInterval = (
 ) => {
   return layers
     .flatMap(({ annotations }) => annotations.filter((a) => !a.isHidden))
+    .sort((a, b) => moment(a.time).valueOf() - moment(b.time).valueOf())
     .reduce<Record<string, EventAnnotationArgs[]>>((acc, current) => {
       const roundedTimestamp = getRoundedTimestamp(
         moment(current.time).valueOf(),

x-pack/plugins/lens/public/xy_visualization/annotations/helpers.tsx

@@ -114,32 +114,42 @@ export const setAnnotationsDimension: Visualization<XYState>['setDimension'] = (
   if (!foundLayer || !isAnnotationsLayer(foundLayer)) {
     return prevState;
   }
-  const dataLayers = getDataLayers(prevState.layers);
-  const newLayer = { ...foundLayer } as XYAnnotationLayerConfig;
-
-  const hasConfig = newLayer.annotations?.some(({ id }) => id === columnId);
+  const inputAnnotations = foundLayer.annotations as XYAnnotationLayerConfig['annotations'];
+  const currentConfig = inputAnnotations?.find(({ id }) => id === columnId);
   const previousConfig = previousColumn
-    ? newLayer.annotations?.find(({ id }) => id === previousColumn)
-    : false;
-  if (!hasConfig) {
-    const newTimestamp = getStaticDate(dataLayers, frame?.activeData);
-    newLayer.annotations = [
-      ...(newLayer.annotations || []),
-      {
-        label: defaultAnnotationLabel,
-        key: {
-          type: 'point_in_time',
-          timestamp: newTimestamp,
-        },
-        icon: 'triangle',
-        ...previousConfig,
-        id: columnId,
+    ? inputAnnotations?.find(({ id }) => id === previousColumn)
+    : undefined;
+
+  let resultAnnotations = [...inputAnnotations] as XYAnnotationLayerConfig['annotations'];
+  if (!currentConfig) {
+    resultAnnotations.push({
+      label: defaultAnnotationLabel,
+      key: {
+        type: 'point_in_time',
+        timestamp: getStaticDate(getDataLayers(prevState.layers), frame?.activeData),
       },
-    ];
+      icon: 'triangle',
+      ...previousConfig,
+      id: columnId,
+    });
+  } else if (currentConfig && previousConfig) {
+    // TODO: reordering should not live in setDimension, to be refactored
+    resultAnnotations = inputAnnotations.filter((c) => c.id !== previousConfig.id);
+    const targetPosition = resultAnnotations.findIndex((c) => c.id === currentConfig.id);
+    const targetIndex = inputAnnotations.indexOf(previousConfig);
+    const sourceIndex = inputAnnotations.indexOf(currentConfig);
+    resultAnnotations.splice(
+      targetIndex < sourceIndex ? targetPosition + 1 : targetPosition,
+      0,
+      previousConfig
+    );
   }
+
   return {
     ...prevState,
-    layers: prevState.layers.map((l) => (l.layerId === layerId ? newLayer : l)),
+    layers: prevState.layers.map((l) =>
+      l.layerId === layerId ? { ...foundLayer, annotations: resultAnnotations } : l
+    ),
   };
 };
 

x-pack/plugins/lens/public/xy_visualization/expression.test.tsx

@@ -3038,7 +3038,7 @@ describe('xy_expression', () => {
         // checking tooltip
         const renderLinks = mount(<div>{groupedAnnotation.prop('customTooltipDetails')!()}</div>);
         expect(renderLinks.text()).toEqual(
-          ' Event 1 2022-03-18T08:25:00.000Z Event 2 2022-03-18T08:25:00.020Z Event 3 2022-03-18T08:25:00.001Z'
+          ' Event 1 2022-03-18T08:25:00.000Z Event 3 2022-03-18T08:25:00.001Z Event 2 2022-03-18T08:25:00.020Z'
         );
       });
       test('should render grouped annotations with default styles', () => {

x-pack/plugins/lens/public/xy_visualization/visualization.test.ts

@@ -35,6 +35,15 @@ const exampleAnnotation: EventAnnotationConfig = {
   },
   icon: 'circle',
 };
+const exampleAnnotation2: EventAnnotationConfig = {
+  icon: 'circle',
+  id: 'an2',
+  key: {
+    timestamp: '2022-04-18T11:01:59.135Z',
+    type: 'point_in_time',
+  },
+  label: 'Annotation2',
+};
 
 function exampleState(): State {
   return {
@@ -460,6 +469,56 @@ describe('xy_visualization', () => {
           ],
         });
       });
+      it('should copy previous column if passed and assign a new id', () => {
+        expect(
+          xyVisualization.setDimension({
+            frame,
+            prevState: {
+              ...exampleState(),
+              layers: [
+                {
+                  layerId: 'annotation',
+                  layerType: layerTypes.ANNOTATIONS,
+                  annotations: [exampleAnnotation2],
+                },
+              ],
+            },
+            layerId: 'annotation',
+            groupId: 'xAnnotation',
+            previousColumn: 'an2',
+            columnId: 'newColId',
+          }).layers[0]
+        ).toEqual({
+          layerId: 'annotation',
+          layerType: layerTypes.ANNOTATIONS,
+          annotations: [exampleAnnotation2, { ...exampleAnnotation2, id: 'newColId' }],
+        });
+      });
+      it('should reorder a dimension to a annotation layer', () => {
+        expect(
+          xyVisualization.setDimension({
+            frame,
+            prevState: {
+              ...exampleState(),
+              layers: [
+                {
+                  layerId: 'annotation',
+                  layerType: layerTypes.ANNOTATIONS,
+                  annotations: [exampleAnnotation, exampleAnnotation2],
+                },
+              ],
+            },
+            layerId: 'annotation',
+            groupId: 'xAnnotation',
+            previousColumn: 'an2',
+            columnId: 'an1',
+          }).layers[0]
+        ).toEqual({
+          layerId: 'annotation',
+          layerType: layerTypes.ANNOTATIONS,
+          annotations: [exampleAnnotation2, exampleAnnotation],
+        });
+      });
     });
   });