@atlaskit/editor-plugin-table 2.7.2 → 2.8.0

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