@atlaskit/editor-plugin-table 2.7.1 → 2.8.0

package/src/__tests__/unit/nodeviews/TableContainer.tsx

@@ -29,6 +29,23 @@ import {
 import { pluginKey } from '../../../plugins/table/pm-plugins/plugin-key';
 import { TablePluginState } from '../../../plugins/table/types';
 
+const mockStartMeasure = jest.fn();
+const mockEndMeasure = jest.fn(() => {
+  return [51, 52, 53, 54];
+});
+const mockCountFrames = jest.fn();
+
+jest.mock('../../../plugins/table/utils/analytics', () => ({
+  ...jest.requireActual('../../../plugins/table/utils/analytics'),
+  useMeasureFramerate: () => {
+    return {
+      startMeasure: mockStartMeasure,
+      endMeasure: mockEndMeasure,
+      countFrames: mockCountFrames,
+    };
+  },
+}));
+
 describe('table -> nodeviews -> TableContainer.tsx', () => {
   const createEditor = createEditorFactory<TablePluginState>();
   const editor = (
@@ -202,7 +219,7 @@ describe('table -> nodeviews -> TableContainer.tsx', () => {
       fireEvent.mouseMove(container.querySelector('.resizer-handle-right')!);
       fireEvent.mouseUp(container.querySelector('.resizer-handle-right')!);
 
-      expect(analyticsMock).toHaveBeenLastCalledWith({
+      expect(analyticsMock).toHaveBeenCalledWith({
         action: TABLE_ACTION.RESIZED,
         actionSubject: ACTION_SUBJECT.TABLE,
         eventType: EVENT_TYPE.TRACK,
@@ -215,6 +232,45 @@ describe('table -> nodeviews -> TableContainer.tsx', () => {
           totalColumnCount: 3,
         },
       });
+
+      expect(analyticsMock).toHaveBeenCalledWith({
+        action: TABLE_ACTION.RESIZE_PERF_SAMPLING,
+        actionSubject: ACTION_SUBJECT.TABLE,
+        eventType: EVENT_TYPE.OPERATIONAL,
+        attributes: {
+          docSize: 22,
+          frameRate: 51,
+          isInitialSample: true,
+          nodeSize: 20,
+        },
+      });
+
+      expect(analyticsMock).toHaveBeenCalledWith({
+        action: TABLE_ACTION.RESIZE_PERF_SAMPLING,
+        actionSubject: ACTION_SUBJECT.TABLE,
+        eventType: EVENT_TYPE.OPERATIONAL,
+        attributes: {
+          docSize: 22,
+          frameRate: 53,
+          isInitialSample: false,
+          nodeSize: 20,
+        },
+      });
+
+      analyticsMock.mockReset();
+    });
+
+    test('calls useMeasureFramerate handlers', async () => {
+      const { container } = buildContainer({ layout: 'wide' });
+
+      fireEvent.mouseDown(container.querySelector('.resizer-handle-right')!);
+      fireEvent.mouseMove(container.querySelector('.resizer-handle-right')!, {
+        clientX: 100,
+      });
+      fireEvent.mouseUp(container.querySelector('.resizer-handle-right')!);
+
+      expect(mockStartMeasure).toHaveBeenCalled();
+      expect(mockEndMeasure).toHaveBeenCalled();
     });
   });
 });

package/src/__tests__/unit/utils/analytics.ts

@@ -0,0 +1,98 @@
+import { renderHook } from '@testing-library/react-hooks';
+
+import {
+  ACTION_SUBJECT,
+  EVENT_TYPE,
+  TABLE_ACTION,
+} from '@atlaskit/editor-common/analytics';
+
+import {
+  generateResizeFrameRatePayloads,
+  reduceResizeFrameRateSamples,
+  useMeasureFramerate,
+} from '../../../plugins/table/utils/analytics';
+
+describe('reduceResizeFrameRateSamples()', () => {
+  it('should return the same array if it has only one element', () => {
+    expect(reduceResizeFrameRateSamples([1])).toEqual([1]);
+  });
+
+  it('should return the first element and the average of the array if length > 1', () => {
+    expect(reduceResizeFrameRateSamples([3, 2, 4, 6])).toEqual([3, 4]);
+  });
+});
+
+describe('generateResizeFrameRatePayloads()', () => {
+  it('should return an empty array if the array is empty', () => {
+    expect(
+      generateResizeFrameRatePayloads({
+        docSize: 10,
+        frameRateSamples: [],
+        originalNode: { nodeSize: 5 } as any,
+      }),
+    ).toEqual([]);
+  });
+
+  it('should return an array of payloads with the correct attributes', () => {
+    expect(
+      generateResizeFrameRatePayloads({
+        docSize: 10,
+        frameRateSamples: [3, 2, 4, 6],
+        originalNode: { nodeSize: 5 } as any,
+      }),
+    ).toEqual([
+      {
+        action: TABLE_ACTION.RESIZE_PERF_SAMPLING,
+        actionSubject: ACTION_SUBJECT.TABLE,
+        eventType: EVENT_TYPE.OPERATIONAL,
+        attributes: {
+          frameRate: 3,
+          nodeSize: 5,
+          docSize: 10,
+          isInitialSample: true,
+        },
+      },
+      {
+        action: TABLE_ACTION.RESIZE_PERF_SAMPLING,
+        actionSubject: ACTION_SUBJECT.TABLE,
+        eventType: EVENT_TYPE.OPERATIONAL,
+        attributes: {
+          frameRate: 4,
+          nodeSize: 5,
+          docSize: 10,
+          isInitialSample: false,
+        },
+      },
+    ]);
+  });
+});
+
+describe('useMeasureFramerate()', () => {
+  jest.useFakeTimers('modern');
+
+  it('should return the correct handlers', () => {
+    const { result } = renderHook(() => useMeasureFramerate());
+    const { startMeasure, endMeasure, countFrames } = result.current;
+
+    expect(startMeasure).toBeInstanceOf(Function);
+    expect(endMeasure).toBeInstanceOf(Function);
+    expect(countFrames).toBeInstanceOf(Function);
+  });
+
+  it('should return the correct frame rate sample', async () => {
+    const { result } = renderHook(() =>
+      useMeasureFramerate({ minTimeMs: 0, minFrames: 0, sampleRateMs: 0 }),
+    );
+
+    const { startMeasure, endMeasure, countFrames } = result.current;
+    jest.advanceTimersByTime(100);
+    startMeasure();
+    jest.advanceTimersByTime(100);
+    countFrames();
+    const samples = endMeasure();
+
+    expect(samples).toEqual([10]);
+
+    jest.useRealTimers();
+  });
+});

package/src/__tests__/visual-regression/__image_snapshots__/cell-options-menu-ts-table-cell-options-menu-delete-column-menu-item-should-remove-the-table-column-on-click-1-snap.png

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:9c8221121bc35d8d4d1dd7b3d30212732802458bbae60bbae450b9b88bdd3ed3
-size 14078
+oid sha256:1b71f23d11823e24b9a7ce319b38e1c2625f9d88301ebd4ce03074214202caa2
+size 15206

package/src/__tests__/visual-regression/__image_snapshots__/cell-options-menu-ts-table-cell-options-menu-delete-column-menu-item-visual-hints-should-be-added-to-the-table-column-on-hover-1-snap.png

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:7e1eedc6e6df9262101a20fae98396c94f8ea7086cb5a6424bcc01f9b5616810
-size 29828
+oid sha256:eca71983bb60a79e2f607ec05ab3d99ff58bc8551b232219dcf24fd8e176fea3
+size 32711

package/src/__tests__/visual-regression/__image_snapshots__/cell-options-menu-ts-table-cell-options-menu-delete-row-menu-item-should-remove-the-table-row-on-click-1-snap.png

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:185a432916fe30487eec362617c510dd132f2a37a56bfceeca674da4c6512dc9
-size 13986
+oid sha256:6f2033158fd0e520d5dff43ca6308b8312b2321e246ffb0604aee1de57368e6b
+size 15136

package/src/__tests__/visual-regression/__image_snapshots__/cell-options-menu-ts-table-cell-options-menu-delete-row-menu-item-visual-hints-should-be-added-to-the-table-row-on-hover-1-snap.png

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:164b040aa0254b6bdc19497a86b9d9a226cde6545661f2f475f87fe9e200f3b5
-size 29856
+oid sha256:559ec334bb7930be94de71631ca380ff968ac8d58ce4de6a3dc20881a1e48ab9
+size 32765

package/src/plugins/table/nodeviews/TableResizer.tsx

@@ -8,12 +8,7 @@ import React, {
 
 import rafSchd from 'raf-schd';
 
-import {
-  ACTION_SUBJECT,
-  EVENT_TYPE,
-  TABLE_ACTION,
-  TableEventPayload,
-} from '@atlaskit/editor-common/analytics';
+import { TableEventPayload } from '@atlaskit/editor-common/analytics';
 import { getGuidelinesWithHighlights } from '@atlaskit/editor-common/guideline';
 import type { GuidelineConfig } from '@atlaskit/editor-common/guideline';
 import {
@@ -25,21 +20,24 @@ import { resizerHandleShadowClassName } from '@atlaskit/editor-common/styles';
 import { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
 import { Transaction } from '@atlaskit/editor-prosemirror/state';
 import { EditorView } from '@atlaskit/editor-prosemirror/view';
-import { TableMap } from '@atlaskit/editor-tables';
 import { findTable } from '@atlaskit/editor-tables/utils';
 
 import {
   COLUMN_MIN_WIDTH,
   getColgroupChildrenLength,
-  hasTableBeenResized,
   previewScaleTable,
   scaleTable,
 } from '../pm-plugins/table-resizing/utils';
 import { pluginKey as tableWidthPluginKey } from '../pm-plugins/table-width';
 import { TABLE_HIGHLIGHT_GAP, TABLE_SNAP_GAP } from '../ui/consts';
-import { getTableWidth } from '../utils';
+import {
+  generateResizedPayload,
+  generateResizeFrameRatePayloads,
+  useMeasureFramerate,
+} from '../utils/analytics';
 import { defaultGuidelines, defaultGuidelineWidths } from '../utils/guidelines';
 import { findClosestSnap } from '../utils/snapping';
+
 interface TableResizerProps {
   width: number;
   maxWidth: number;
@@ -57,29 +55,6 @@ interface TableResizerProps {
 const handles = { right: true };
 const tableHandleMarginTop = 12;
 
-const generateResizedPayload = (props: {
-  originalNode: PMNode;
-  resizedNode: PMNode;
-}): TableEventPayload => {
-  const tableMap = TableMap.get(props.resizedNode);
-
-  return {
-    action: TABLE_ACTION.RESIZED,
-    actionSubject: ACTION_SUBJECT.TABLE,
-    eventType: EVENT_TYPE.TRACK,
-    attributes: {
-      newWidth: props.resizedNode.attrs.width,
-      prevWidth: props.originalNode.attrs.width ?? null,
-      nodeSize: props.resizedNode.nodeSize,
-      totalTableWidth: hasTableBeenResized(props.resizedNode)
-        ? getTableWidth(props.resizedNode)
-        : null,
-      totalRowCount: tableMap.height,
-      totalColumnCount: tableMap.width,
-    },
-  };
-};
-
 const getResizerHandleHeight = (tableRef: HTMLTableElement) => {
   const tableHeight = tableRef?.clientHeight;
   let handleHeightSize: HandleHeightSizeType | undefined = 'small';
@@ -129,6 +104,8 @@ export const TableResizer = ({
   const resizerMinWidth = getResizerMinWidth(node);
   const handleHeightSize = getResizerHandleHeight(tableRef);
 
+  const { startMeasure, endMeasure, countFrames } = useMeasureFramerate();
+
   const updateActiveGuidelines = useCallback(
     ({ gap, keys }: { gap: number; keys: string[] }) => {
       if (gap !== currentGap.current) {
@@ -157,6 +134,8 @@ export const TableResizer = ({
   );
 
   const handleResizeStart = useCallback(() => {
+    startMeasure();
+
     const {
       dispatch,
       state: { tr },
@@ -165,7 +144,7 @@ export const TableResizer = ({
     dispatch(tr.setMeta(tableWidthPluginKey, { resizing: true }));
 
     setSnappingEnabled(displayGuideline(defaultGuidelines));
-  }, [displayGuideline, editorView]);
+  }, [displayGuideline, editorView, startMeasure]);
 
   const handleResizeStop = useCallback<HandleResize>(
     (originalState, delta) => {
@@ -174,6 +153,18 @@ export const TableResizer = ({
       const pos = getPos();
 
       let tr = state.tr.setMeta(tableWidthPluginKey, { resizing: false });
+      const frameRateSamples = endMeasure();
+
+      if (frameRateSamples.length > 0) {
+        const resizeFrameRatePayloads = generateResizeFrameRatePayloads({
+          docSize: state.doc.nodeSize,
+          frameRateSamples,
+          originalNode: node,
+        });
+        resizeFrameRatePayloads.forEach((payload) => {
+          attachAnalyticsEvent(payload)?.(tr);
+        });
+      }
 
       if (typeof pos === 'number') {
         tr = tr.setNodeMarkup(pos, undefined, {
@@ -219,11 +210,13 @@ export const TableResizer = ({
       tableRef,
       displayGuideline,
       attachAnalyticsEvent,
+      endMeasure,
     ],
   );
 
   const handleResize = useCallback(
     (originalState, delta) => {
+      countFrames();
       const newWidth = originalState.width + delta.width;
       const pos = getPos();
       if (typeof pos !== 'number') {
@@ -254,7 +247,15 @@ export const TableResizer = ({
 
       return newWidth;
     },
-    [editorView, getPos, node, tableRef, updateWidth, updateActiveGuidelines],
+    [
+      editorView,
+      getPos,
+      node,
+      tableRef,
+      updateWidth,
+      updateActiveGuidelines,
+      countFrames,
+    ],
   );
 
   const scheduleResize = useMemo(() => rafSchd(handleResize), [handleResize]);

package/src/plugins/table/toolbar.tsx

@@ -452,8 +452,6 @@ export const getToolbarConfig =
         editorAnalyticsAPI,
       );
 
-      const { tableCellOptionsInFloatingToolbar } =
-        getEditorFeatureFlags() || {};
       const cellItems = getCellItems(
         config,
         state,
@@ -461,15 +459,8 @@ export const getToolbarConfig =
         intl,
         getEditorContainerWidth,
         editorAnalyticsAPI,
-        tableCellOptionsInFloatingToolbar,
-      );
-      const colorPicker = getColorPicker(
-        state,
-        menu,
-        intl,
-        editorAnalyticsAPI,
-        tableCellOptionsInFloatingToolbar,
       );
+      const colorPicker = getColorPicker(state, menu, intl, editorAnalyticsAPI);
 
       // Check if we need to show confirm dialog for delete button
       let confirmDialog;
@@ -590,24 +581,18 @@ const getCellItems = (
   { formatMessage }: ToolbarMenuContext,
   getEditorContainerWidth: GetEditorContainerWidth,
   editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null,
-  tableCellOptionsInFloatingToolbar?: boolean,
 ): Array<FloatingToolbarItem<Command>> => {
-  if (
-    pluginConfig.allowCellOptionsInFloatingToolbar ||
-    tableCellOptionsInFloatingToolbar
-  ) {
-    const initialSelectionRect = getClosestSelectionRect(state);
-    if (initialSelectionRect) {
-      const cellOptions = getToolbarCellOptionsConfig(
-        state,
-        view,
-        initialSelectionRect,
-        { formatMessage },
-        getEditorContainerWidth,
-        editorAnalyticsAPI,
-      );
-      return [cellOptions, separator(cellOptions.hidden!)];
-    }
+  const initialSelectionRect = getClosestSelectionRect(state);
+  if (initialSelectionRect) {
+    const cellOptions = getToolbarCellOptionsConfig(
+      state,
+      view,
+      initialSelectionRect,
+      { formatMessage },
+      getEditorContainerWidth,
+      editorAnalyticsAPI,
+    );
+    return [cellOptions, separator(cellOptions.hidden!)];
   }
   return [];
 };
@@ -617,13 +602,9 @@ const getColorPicker = (
   menu: FloatingToolbarItem<Command>,
   { formatMessage }: ToolbarMenuContext,
   editorAnalyticsAPI: EditorAnalyticsAPI | null | undefined,
-  tableCellOptionsInFloatingToolbar?: boolean,
 ): Array<FloatingToolbarItem<Command>> => {
   const { targetCellPosition, pluginConfig } = getPluginState(state);
-  if (
-    !pluginConfig.allowBackgroundColor ||
-    !tableCellOptionsInFloatingToolbar
-  ) {
+  if (!pluginConfig.allowBackgroundColor) {
     return [];
   }
   const node = targetCellPosition

package/src/plugins/table/types.ts

@@ -53,7 +53,6 @@ export interface PluginConfig {
   permittedLayouts?: PermittedLayoutsDescriptor;
   allowControls?: boolean;
   stickyHeaders?: boolean;
-  allowCellOptionsInFloatingToolbar?: boolean;
   tableCellOptimization?: boolean;
   tableRenderOptimization?: boolean;
   stickyHeadersOptimization?: boolean;

package/src/plugins/table/utils/analytics.ts

@@ -1,13 +1,25 @@
+import { useEffect, useRef } from 'react';
+
 import type {
   AnalyticsEventPayload,
   AnalyticsEventPayloadCallback,
   EditorAnalyticsAPI,
+  TableEventPayload,
+} from '@atlaskit/editor-common/analytics';
+import {
+  ACTION_SUBJECT,
+  EVENT_TYPE,
+  TABLE_ACTION,
 } from '@atlaskit/editor-common/analytics';
 import { HigherOrderCommand } from '@atlaskit/editor-common/types';
+import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
 import { Selection } from '@atlaskit/editor-prosemirror/state';
 import { TableMap } from '@atlaskit/editor-tables/table-map';
 import { findTable, getSelectionRect } from '@atlaskit/editor-tables/utils';
 
+import { hasTableBeenResized } from '../pm-plugins/table-resizing/utils';
+import { getTableWidth } from '../utils';
+
 export function getSelectedTableInfo(selection: Selection) {
   let map;
   let totalRowCount = 0;
@@ -78,3 +90,159 @@ export const withEditorAnalyticsAPI =
         view,
       );
   };
+
+interface UseMeasureFramerateConfig {
+  maxSamples?: number;
+  minFrames?: number;
+  minTimeMs?: number;
+  sampleRateMs?: number;
+  timeoutMs?: number;
+}
+
+export const generateResizedPayload = (props: {
+  originalNode: PMNode;
+  resizedNode: PMNode;
+}): TableEventPayload => {
+  const tableMap = TableMap.get(props.resizedNode);
+
+  return {
+    action: TABLE_ACTION.RESIZED,
+    actionSubject: ACTION_SUBJECT.TABLE,
+    eventType: EVENT_TYPE.TRACK,
+    attributes: {
+      newWidth: props.resizedNode.attrs.width,
+      prevWidth: props.originalNode.attrs.width ?? null,
+      nodeSize: props.resizedNode.nodeSize,
+      totalTableWidth: hasTableBeenResized(props.resizedNode)
+        ? getTableWidth(props.resizedNode)
+        : null,
+      totalRowCount: tableMap.height,
+      totalColumnCount: tableMap.width,
+    },
+  };
+};
+
+export const reduceResizeFrameRateSamples = (frameRateSamples: number[]) => {
+  if (frameRateSamples.length > 1) {
+    const frameRateSum = frameRateSamples.reduce((sum, frameRate, index) => {
+      if (index === 0) {
+        return sum;
+      } else {
+        return sum + frameRate;
+      }
+    }, 0);
+    const averageFrameRate = Math.round(
+      frameRateSum / (frameRateSamples.length - 1),
+    );
+    return [frameRateSamples[0], averageFrameRate];
+  } else {
+    return frameRateSamples;
+  }
+};
+
+export const generateResizeFrameRatePayloads = (props: {
+  docSize: number;
+  frameRateSamples: number[];
+  originalNode: PMNode;
+}): TableEventPayload[] => {
+  const reducedResizeFrameRateSamples = reduceResizeFrameRateSamples(
+    props.frameRateSamples,
+  );
+  return reducedResizeFrameRateSamples.map((frameRateSample, index) => ({
+    action: TABLE_ACTION.RESIZE_PERF_SAMPLING,
+    actionSubject: ACTION_SUBJECT.TABLE,
+    eventType: EVENT_TYPE.OPERATIONAL,
+    attributes: {
+      frameRate: frameRateSample,
+      nodeSize: props.originalNode.nodeSize,
+      docSize: props.docSize,
+      isInitialSample: index === 0,
+    },
+  }));
+};
+
+/**
+ * Measures the framerate of a component over a given time period.
+ */
+export const useMeasureFramerate = (config: UseMeasureFramerateConfig = {}) => {
+  const {
+    maxSamples = 10,
+    minFrames = 5,
+    minTimeMs = 500,
+    sampleRateMs = 1000,
+    timeoutMs = 200,
+  } = config;
+
+  let frameCount = useRef(0);
+  let lastTime = useRef(0);
+  let timeoutId = useRef<NodeJS.Timeout | undefined>();
+  let frameRateSamples = useRef<number[]>([]);
+
+  useEffect(() => {
+    return () => {
+      if (timeoutId.current) {
+        clearTimeout(timeoutId.current);
+      }
+    };
+  }, []);
+
+  const startMeasure = () => {
+    frameCount.current = 0;
+    lastTime.current = performance.now();
+  };
+
+  /**
+   * Returns an array of frame rate samples as integers.
+   */
+  const endMeasure = () => {
+    const samples = frameRateSamples.current;
+    frameRateSamples.current = [];
+    return samples;
+  };
+
+  const sampleFrameRate = (delay = 0) => {
+    const currentTime = performance.now();
+    const deltaTime = currentTime - lastTime.current - delay;
+    const isValidSample =
+      deltaTime > minTimeMs && frameCount.current >= minFrames;
+    if (isValidSample) {
+      const frameRate = Math.round(frameCount.current / (deltaTime / 1000));
+      frameRateSamples.current.push(frameRate);
+    }
+    frameCount.current = 0;
+    lastTime.current = 0;
+  };
+
+  /**
+   * Counts the number of frames that occur within a given time period. Intended to be called
+   * inside a `requestAnimationFrame` callback.
+   */
+  const countFrames = () => {
+    if (frameRateSamples.current.length >= maxSamples && timeoutId.current) {
+      clearTimeout(timeoutId.current);
+      return;
+    }
+
+    /**
+     * Allows us to keep counting frames even if `startMeasure` is not called
+     */
+    if (lastTime.current === 0) {
+      lastTime.current = performance.now();
+    }
+    frameCount.current++;
+
+    if (timeoutId.current) {
+      clearTimeout(timeoutId.current);
+    }
+    if (performance.now() - lastTime.current > sampleRateMs) {
+      sampleFrameRate();
+    } else {
+      timeoutId.current = setTimeout(
+        () => sampleFrameRate(timeoutMs),
+        timeoutMs,
+      );
+    }
+  };
+
+  return { startMeasure, endMeasure, countFrames };
+};

package/tmp/api-report-tmp.d.ts

@@ -30,8 +30,6 @@ interface PluginConfig {
     // (undocumented)
     allowBackgroundColor?: boolean;
     // (undocumented)
-    allowCellOptionsInFloatingToolbar?: boolean;
-    // (undocumented)
     allowCollapse?: boolean;
     // (undocumented)
     allowColumnResizing?: boolean;