@kylincloud/flamegraph 0.35.28 → 0.35.29

package/src/shims/Table.module.scss

@@ -73,6 +73,11 @@
           background: var(--ps-ui-element-bg-highlight);
         }
       }
+
+      &.virtualSpacer {
+        pointer-events: none;
+        background: transparent !important;
+      }
     }
 
     td,

package/src/shims/Table.tsx

@@ -1,6 +1,14 @@
 // src/shims/Table.tsx
 /* eslint-disable react/jsx-props-no-spreading */
-import React, { useState, useRef, ReactNode, CSSProperties, RefObject } from 'react';
+import React, {
+  useState,
+  useRef,
+  ReactNode,
+  CSSProperties,
+  RefObject,
+  useEffect,
+  useLayoutEffect,
+} from 'react';
 import { faChevronLeft } from '@fortawesome/free-solid-svg-icons/faChevronLeft';
 import { faChevronRight } from '@fortawesome/free-solid-svg-icons/faChevronRight';
 import clsx from 'clsx';
@@ -46,6 +54,13 @@ export type TableBodyType =
   | {
     type: 'filled';
     bodyRows: BodyRow[];
+  }
+  | {
+    type: 'virtual';
+    rowCount: number;
+    rows: BodyRow[];
+    range: { start: number; end: number };
+    onRangeChange?: (start: number, end: number) => void;
   };
 
 type Table = TableBodyType & {
@@ -92,6 +107,13 @@ interface TableProps {
   isLoading?: boolean;
   /* enables pagination */
   itemsPerPage?: number;
+  /* enables virtualization */
+  virtualize?: boolean;
+  virtualizeRowHeight?: number;
+  virtualizeOverscan?: number;
+  scrollRef?: RefObject<HTMLElement>;
+  /* debug: disable sort interactions */
+  disableSort?: boolean;
 }
 
 /**
@@ -143,9 +165,145 @@ function Table({
   className,
   isLoading,
   itemsPerPage,
+  virtualize,
+  virtualizeRowHeight,
+  virtualizeOverscan = 6,
+  scrollRef,
+  disableSort,
 }: TableProps) {
-  const hasSort = sortByDirection && sortBy && updateSortParams;
+  const hasSort = !disableSort && sortByDirection && sortBy && updateSortParams;
   const [currPage, setCurrPage] = useState(0);
+  const [scrollTop, setScrollTop] = useState(0);
+  const [measuredRowHeight, setMeasuredRowHeight] = useState<number | null>(null);
+  const [scrollEl, setScrollEl] = useState<HTMLElement | null>(null);
+  const rafRef = useRef<number | null>(null);
+
+  useLayoutEffect(() => {
+    if (scrollRef?.current && scrollRef.current !== scrollEl) {
+      setScrollEl(scrollRef.current);
+    }
+  }, [scrollRef?.current, scrollEl]);
+
+  useEffect(() => {
+    if (!scrollEl || !virtualize) {
+      return () => {};
+    }
+    const onScroll = () => {
+      if (rafRef.current) {
+        cancelAnimationFrame(rafRef.current);
+      }
+      rafRef.current = requestAnimationFrame(() => {
+        setScrollTop(scrollEl.scrollTop || 0);
+      });
+    };
+    scrollEl.addEventListener('scroll', onScroll, { passive: true });
+    return () => {
+      scrollEl.removeEventListener('scroll', onScroll as EventListener);
+      if (rafRef.current) {
+        cancelAnimationFrame(rafRef.current);
+      }
+    };
+  }, [scrollEl, virtualize]);
+
+  useEffect(() => {
+    if (!virtualize || measuredRowHeight || !tableBodyRef?.current) {
+      return;
+    }
+    const rows = tableBodyRef.current.querySelectorAll('tr[data-row]');
+    if (!rows.length) {
+      return;
+    }
+    const rect = rows[0].getBoundingClientRect();
+    if (rect.height) {
+      setMeasuredRowHeight(rect.height);
+    }
+  }, [virtualize, measuredRowHeight, tableBodyRef?.current, table]);
+
+  const bodyRows =
+    table.type === 'filled'
+      ? paginate(table.bodyRows, currPage, itemsPerPage)
+      : null;
+
+  const totalRows =
+    table.type === 'virtual'
+      ? table.rowCount
+      : bodyRows
+        ? bodyRows.length
+        : 0;
+
+  const rowHeight = virtualizeRowHeight || measuredRowHeight || 0;
+  const canVirtualize =
+    !!virtualize &&
+    !!scrollEl &&
+    (table.type === 'filled' || table.type === 'virtual') &&
+    rowHeight > 0;
+
+  const virtualState = canVirtualize
+    ? (() => {
+        const viewportHeight = scrollEl!.clientHeight || 0;
+        const startIndex = Math.max(
+          0,
+          Math.floor(scrollTop / rowHeight) - virtualizeOverscan
+        );
+        const endIndex = Math.min(
+          totalRows,
+          Math.ceil((scrollTop + viewportHeight) / rowHeight) + virtualizeOverscan
+        );
+        const topSpacer = startIndex * rowHeight;
+        const bottomSpacer = Math.max(0, (totalRows - endIndex) * rowHeight);
+        const visibleRows =
+          table.type === 'filled' && bodyRows
+            ? bodyRows.slice(startIndex, endIndex)
+            : [];
+
+        return {
+          viewportHeight,
+          totalRows,
+          startIndex,
+          endIndex,
+          topSpacer,
+          bottomSpacer,
+          visibleRows,
+        };
+      })()
+    : null;
+  const shouldLimitRows = !!virtualize && !canVirtualize && table.type === 'filled';
+  const limitedRows = shouldLimitRows
+    ? (bodyRows || []).slice(0, Math.max(24, virtualizeOverscan * 4))
+    : null;
+
+  useEffect(() => {
+    if (table.type !== 'virtual' || !virtualState) {
+      return;
+    }
+    table.onRangeChange?.(virtualState.startIndex, virtualState.endIndex);
+  }, [
+    table,
+    virtualState?.startIndex,
+    virtualState?.endIndex,
+  ]);
+
+  const placeholderRowCount =
+    table.type === 'virtual' && virtualState
+      ? Math.max(0, virtualState.endIndex - virtualState.startIndex)
+      : 0;
+  const placeholderRows: BodyRow[] =
+    table.type === 'virtual' && placeholderRowCount > 0
+      ? Array.from({ length: placeholderRowCount }, () => ({
+        cells: Array.from({ length: table.headRow.length }, () => ({
+          value: '\u00A0',
+        })),
+      }))
+      : [];
+
+  const renderVirtualRows =
+    table.type === 'virtual' &&
+    virtualState &&
+    table.range &&
+    table.range.start === virtualState.startIndex &&
+    table.range.end === virtualState.endIndex
+      ? table.rows
+      : placeholderRows;
 
   return isLoading ? (
     <div className={styles.loadingSpinner}>
@@ -197,11 +355,43 @@ function Table({
             <tr className={table?.bodyClassName}>
               <td colSpan={table.headRow.length}>{table.value}</td>
             </tr>
+          ) : virtualState ? (
+            <>
+              {virtualState.topSpacer > 0 && (
+                <tr aria-hidden="true" className={styles.virtualSpacer}>
+                  <td
+                    colSpan={table.headRow.length}
+                    style={{ height: virtualState.topSpacer, padding: 0, border: 0 }}
+                  />
+                </tr>
+              )}
+              {(table.type === 'virtual'
+                ? renderVirtualRows
+                : virtualState.visibleRows
+              ).map((row, idx) => (
+                <TableRow
+                  key={row['data-row'] ?? `row-${virtualState.startIndex + idx}`}
+                  row={row}
+                />
+              ))}
+              {virtualState.bottomSpacer > 0 && (
+                <tr aria-hidden="true" className={styles.virtualSpacer}>
+                  <td
+                    colSpan={table.headRow.length}
+                    style={{ height: virtualState.bottomSpacer, padding: 0, border: 0 }}
+                  />
+                </tr>
+              )}
+            </>
           ) : (
-            paginate(table.bodyRows, currPage, itemsPerPage).map(
-              (row, idx) => (
+            shouldLimitRows ? (
+              (limitedRows || []).map((row, idx) => (
+                <TableRow key={row['data-row'] ?? `row-${idx}`} row={row} />
+              ))
+            ) : (
+              (bodyRows || []).map((row, idx) => (
                 <TableRow key={row['data-row'] ?? `row-${idx}`} row={row} />
-              )
+              ))
             )
           )}
         </tbody>

package/src/workers/createFlamegraphRenderWorker.ts

@@ -0,0 +1,7 @@
+export function createFlamegraphRenderWorker(): Worker {
+  const fromSrc = import.meta.url.includes('/src/');
+  const workerUrl = fromSrc
+    ? new URL('./flamegraphRenderWorker.ts', import.meta.url)
+    : new URL('./flamegraphRenderWorker.js', import.meta.url);
+  return new Worker(workerUrl, { type: 'module' });
+}

package/src/workers/flamegraphRenderWorker.ts

@@ -0,0 +1,198 @@
+import Color from 'color';
+import { Maybe } from 'true-myth';
+import type { Flamebearer } from '../models';
+import Flamegraph from '../FlameGraph/FlameGraphComponent/Flamegraph';
+import type { CanvasI18nMessages } from '../FlameGraph/FlameGraphComponent/Flamegraph_render';
+import type { FlamegraphPalette } from '../FlameGraph/FlameGraphComponent/colorPalette';
+
+type SerializablePalette = {
+  name: string;
+  goodColor: [number, number, number];
+  neutralColor: [number, number, number];
+  badColor: [number, number, number];
+  colors: [number, number, number][];
+};
+
+type FocusNode = { i: number; j: number } | null;
+
+type FlamegraphRenderInit = {
+  type: 'init';
+  payload: {
+    kind: 'rect' | 'text';
+    canvas: OffscreenCanvas;
+  };
+};
+
+type FlamegraphRenderRequest = {
+  type: 'render';
+  payload: {
+    kind: 'rect' | 'text';
+    flamebearer: Flamebearer;
+    focusedNode: FocusNode;
+    fitMode: 'HEAD' | 'TAIL';
+    highlightQuery: string;
+    zoom: FocusNode;
+    palette: SerializablePalette;
+    messages?: CanvasI18nMessages;
+    renderRects?: boolean;
+    renderText?: boolean;
+    width: number;
+    devicePixelRatio: number;
+  };
+};
+
+type FlamegraphWorkerMessage = FlamegraphRenderInit | FlamegraphRenderRequest;
+
+const state: {
+  rectCanvas: OffscreenCanvas | null;
+  textCanvas: OffscreenCanvas | null;
+  renderState: Record<
+    'rect' | 'text',
+    {
+      token: number;
+      running: boolean;
+      nextI: number;
+      nextJ: number;
+      firstChunk: boolean;
+      payload: FlamegraphRenderRequest['payload'] | null;
+      flamegraph: Flamegraph | null;
+    }
+  >;
+} = {
+  rectCanvas: null,
+  textCanvas: null,
+  renderState: {
+    rect: {
+      token: 0,
+      running: false,
+      nextI: 0,
+      nextJ: 0,
+      firstChunk: true,
+      payload: null,
+      flamegraph: null,
+    },
+    text: {
+      token: 0,
+      running: false,
+      nextI: 0,
+      nextJ: 0,
+      firstChunk: true,
+      payload: null,
+      flamegraph: null,
+    },
+  },
+};
+
+const buildPalette = (payload: SerializablePalette): FlamegraphPalette => ({
+  name: payload.name,
+  goodColor: Color.rgb(...payload.goodColor),
+  neutralColor: Color.rgb(...payload.neutralColor),
+  badColor: Color.rgb(...payload.badColor),
+  colors: payload.colors.map((c) => Color.rgb(...c)),
+});
+
+const toMaybe = (node: FocusNode) =>
+  node
+    ? Maybe.just(node)
+    : Maybe.nothing<{ i: number; j: number }>();
+
+const RECT_BUDGET_MS = 12;
+const TEXT_BUDGET_MS = 8;
+
+const runChunk = (kind: 'rect' | 'text', token: number) => {
+  const renderState = state.renderState[kind];
+  const payload = renderState.payload;
+  if (!payload || renderState.token !== token) {
+    return;
+  }
+  const canvas = kind === 'rect' ? state.rectCanvas : state.textCanvas;
+  if (!canvas) {
+    // eslint-disable-next-line no-console
+    console.debug('[flamegraph-worker] missing canvas for', kind);
+    renderState.running = false;
+    return;
+  }
+  if (!renderState.flamegraph) {
+    renderState.flamegraph = new Flamegraph(
+      payload.flamebearer,
+      canvas,
+      toMaybe(payload.focusedNode),
+      payload.fitMode,
+      payload.highlightQuery,
+      toMaybe(payload.zoom),
+      buildPalette(payload.palette),
+      payload.messages
+    );
+  }
+
+  const result = renderState.flamegraph.render({
+    renderRects: payload.renderRects,
+    renderText: payload.renderText,
+    timeBudgetMs: kind === 'rect' ? RECT_BUDGET_MS : TEXT_BUDGET_MS,
+    startI: renderState.nextI,
+    startJ: renderState.nextJ,
+    skipCanvasResize: !renderState.firstChunk,
+    skipDprScale: !renderState.firstChunk,
+    devicePixelRatio: payload.devicePixelRatio,
+  });
+
+  renderState.firstChunk = false;
+  if (!result.done) {
+    renderState.nextI = result.nextI;
+    renderState.nextJ = result.nextJ;
+    setTimeout(() => runChunk(kind, token), 0);
+    return;
+  }
+
+  renderState.running = false;
+  renderState.nextI = 0;
+  renderState.nextJ = 0;
+  renderState.firstChunk = true;
+  renderState.flamegraph = null;
+};
+
+const renderFlamegraph = (payload: FlamegraphRenderRequest['payload']) => {
+  const canvas =
+    payload.kind === 'rect' ? state.rectCanvas : state.textCanvas;
+  if (!canvas) {
+    // eslint-disable-next-line no-console
+    console.debug('[flamegraph-worker] missing canvas for', payload.kind);
+    return;
+  }
+
+  if (payload.width > 0) {
+    canvas.width = payload.width;
+  }
+
+  const renderState = state.renderState[payload.kind];
+  renderState.token += 1;
+  renderState.running = true;
+  renderState.nextI = 0;
+  renderState.nextJ = 0;
+  renderState.firstChunk = true;
+  renderState.payload = payload;
+  renderState.flamegraph = null;
+
+  const token = renderState.token;
+  setTimeout(() => runChunk(payload.kind, token), 0);
+};
+
+self.onmessage = (event: MessageEvent<FlamegraphWorkerMessage>) => {
+  const msg = event.data;
+  if (!msg || !msg.type) {
+    return;
+  }
+  if (msg.type === 'init') {
+    if (msg.payload.kind === 'rect') {
+      state.rectCanvas = msg.payload.canvas;
+    } else {
+      state.textCanvas = msg.payload.canvas;
+    }
+    // eslint-disable-next-line no-console
+    console.debug('[flamegraph-worker] init', msg.payload.kind);
+    return;
+  }
+  if (msg.type === 'render') {
+    renderFlamegraph(msg.payload);
+  }
+};