@atlaskit/editor-plugin-table 2.7.2 → 2.8.1

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/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/nodeviews/table.tsx

@@ -36,41 +36,45 @@ import { Props, TableOptions } from './types';
 
 type ForwardRef = (node: HTMLElement | null) => void;
 
-const tableAttributes = (
+const tableAttributes = (node: PmNode) => {
+  return {
+    'data-number-column': node.attrs.isNumberColumnEnabled,
+    'data-layout': node.attrs.layout,
+    'data-autosize': node.attrs.__autoSize,
+    'data-table-local-id': node.attrs.localId || '',
+    'data-table-width': node.attrs.width,
+  };
+};
+
+const getInlineWidth = (
   node: PmNode,
   options: Props['options'],
   state: EditorState,
   pos: number | undefined,
-) => {
+): number | undefined => {
   // provide a width for tables when custom table width is supported
   // this is to ensure 'responsive' tables (colgroup widths are undefined) become fixed to
   // support screen size adjustments
   const shouldHaveInlineWidth =
     options?.isTableResizingEnabled && !isTableNested(state, pos);
 
-  let style = `width: ${
-    node.attrs.isNumberColumnEnabled
-      ? getTableContainerWidth(node) - akEditorTableNumberColumnWidth
-      : getTableContainerWidth(node)
-  }px`;
+  let widthValue = getTableContainerWidth(node);
 
-  const dataAttrsInTable = {
-    'data-number-column': node.attrs.isNumberColumnEnabled,
-    'data-layout': node.attrs.layout,
-    'data-autosize': node.attrs.__autoSize,
-    'data-table-local-id': node.attrs.localId || '',
-    'data-table-width': node.attrs.width,
-  };
-
-  if (shouldHaveInlineWidth) {
-    // this should be fixed because style will overwrite any existing styles, current found conflict with sticky headers
-    return {
-      ...dataAttrsInTable,
-      style,
-    };
+  if (node.attrs.isNumberColumnEnabled) {
+    widthValue -= akEditorTableNumberColumnWidth;
   }
 
-  return dataAttrsInTable;
+  return shouldHaveInlineWidth ? widthValue : undefined;
+};
+
+const handleInlineTableWidth = (
+  table: HTMLElement,
+  width: number | undefined,
+) => {
+  if (!table || !width) {
+    return;
+  }
+  table.style.setProperty('width', `${width}px`);
 };
 
 const toDOM = (node: PmNode, props: Props) => {
@@ -82,7 +86,7 @@ const toDOM = (node: PmNode, props: Props) => {
 
   return [
     'table',
-    tableAttributes(node, props.options, props.view.state, props.getPos()),
+    tableAttributes(node),
     colgroup,
     ['tbody', 0],
   ] as DOMOutputSpec;
@@ -123,8 +127,18 @@ export default class TableView extends ReactNodeView<Props> {
       contentDOM?: HTMLElement;
     };
 
+    const tableInlineWidth = getInlineWidth(
+      this.node,
+      this.reactComponentProps.options,
+      this.reactComponentProps.view.state,
+      this.reactComponentProps.getPos(),
+    );
+
     if (rendered.dom) {
       this.table = rendered.dom;
+      if (tableInlineWidth) {
+        handleInlineTableWidth(this.table, tableInlineWidth);
+      }
     }
 
     return rendered;
@@ -135,15 +149,22 @@ export default class TableView extends ReactNodeView<Props> {
       return;
     }
 
-    const attrs = tableAttributes(
+    const attrs = tableAttributes(node);
+    (Object.keys(attrs) as Array<keyof typeof attrs>).forEach((attr) => {
+      this.table!.setAttribute(attr, attrs[attr]);
+    });
+
+    // handle inline style when table been resized
+    const tableInlineWidth = getInlineWidth(
       node,
       (this.reactComponentProps as Props).options,
       this.view.state,
       this.getPos(),
     );
-    (Object.keys(attrs) as Array<keyof typeof attrs>).forEach((attr) => {
-      this.table!.setAttribute(attr, attrs[attr]);
-    });
+
+    if (tableInlineWidth) {
+      handleInlineTableWidth(this.table, tableInlineWidth);
+    }
   }
 
   getNode = () => {

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 };
+};