refactor: clean up code lens generics and use components instead of hooks

Author: connor4312

packages/vscode-js-profile-core/src/cpu/cpuProfileAnnotations.ts

@@ -19,7 +19,9 @@ export interface IProfileInformation {
  * up-front for very large profiles turned out to be costly (mainly in path)
  * manipulation.
  */
-export class CpuProfileAnnotations extends ProfileAnnotations<IProfileInformation, ILocation> {
+export class CpuProfileAnnotations extends ProfileAnnotations<ILocation> {
+  private readonly data = new Map<string, { position: Position; data: IProfileInformation }[]>();
+
   /**
    * Adds a new code lens at the given location in the file.
    */

packages/vscode-js-profile-core/src/heap/heapProfileAnnotations.ts

@@ -18,7 +18,9 @@ export interface IProfileInformation {
  * up-front for very large profiles turned out to be costly (mainly in path)
  * manipulation.
  */
-export class HeapProfileAnnotations extends ProfileAnnotations<IProfileInformation, ITreeNode> {
+export class HeapProfileAnnotations extends ProfileAnnotations<ITreeNode> {
+  private readonly data = new Map<string, { position: Position; data: IProfileInformation }[]>();
+
   /**
    * Adds a new code lens at the given treeNode in the file.
    */

packages/vscode-js-profile-core/src/profileAnnotations.ts

@@ -15,11 +15,10 @@ export const getBasename = (pathOrUrl: string) => basenameRe.exec(pathOrUrl)?.[0
  * up-front for very large profiles turned out to be costly (mainly in path)
  * manipulation.
  */
-export abstract class ProfileAnnotations<DataType, NodeType extends INode> {
+export abstract class ProfileAnnotations<TNode extends INode> {
   protected readonly basenamesToExpand = new Map<string, (() => void)[]>();
-  protected readonly data = new Map<string, { position: Position; data: DataType }[]>();
 
-  public add(rootPath: string | undefined, node: NodeType) {
+  public add(rootPath: string | undefined, node: TNode) {
     const expand = once(() => {
       this.set(
         node.callFrame.url,
@@ -70,7 +69,7 @@ export abstract class ProfileAnnotations<DataType, NodeType extends INode> {
   /**
    * Adds a new code lens at the given location in the file.
    */
-  protected abstract set(file: string, position: Position, data: NodeType): void;
+  protected abstract set(file: string, position: Position, data: TNode): void;
 
   /**
    * Get all lenses for a file. Ordered by line number.

packages/vscode-js-profile-core/src/profileCodeLensProvider.ts

@@ -21,7 +21,7 @@ import { ProfileAnnotations } from './profileAnnotations';
  */
 export class ProfileCodeLensProvider implements CodeLensProvider {
   private readonly changeEmitter = new EventEmitter<void>();
-  private lenses?: ProfileAnnotations<{}, INode>;
+  private lenses?: ProfileAnnotations<INode>;
 
   /**
    * @inheritdoc
@@ -31,8 +31,7 @@ export class ProfileCodeLensProvider implements CodeLensProvider {
   /**
    * Updates the set of lenses currently being displayed.
    */
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  public registerLenses(lenses: ProfileAnnotations<{}, INode>): Disposable {
+  public registerLenses(lenses: ProfileAnnotations<INode>): Disposable {
     commands.executeCommand('setContext', 'jsProfileVisualizer.hasCodeLenses', true);
     this.lenses = lenses;
 

packages/vscode-js-profile-table/src/common/base-time-view-row.tsx

@@ -0,0 +1,104 @@
+/*---------------------------------------------------------
+ * Copyright (C) Microsoft Corporation. All rights reserved.
+ *--------------------------------------------------------*/
+
+import * as ChevronDown from '@vscode/codicons/src/icons/chevron-down.svg';
+import * as ChevronRight from '@vscode/codicons/src/icons/chevron-right.svg';
+import { FunctionComponent, h } from 'preact';
+import { useCallback, useContext } from 'preact/hooks';
+import { Icon } from 'vscode-js-profile-core/out/esm/client/icons';
+import { classes } from 'vscode-js-profile-core/out/esm/client/util';
+import { VsCodeApi } from 'vscode-js-profile-core/out/esm/client/vscodeApi';
+import { getNodeText } from 'vscode-js-profile-core/out/esm/common/display';
+import { IOpenDocumentMessage } from 'vscode-js-profile-core/out/esm/common/types';
+import { IGraphNode } from 'vscode-js-profile-core/out/esm/cpu/model';
+import { ITreeNode } from 'vscode-js-profile-core/out/esm/heap/model';
+import { IRowProps } from './base-time-view';
+import getGlobalUniqueId from './get-global-unique-id';
+import styles from './time-view.css';
+
+export const makeBaseTimeViewRow = <T extends IGraphNode | ITreeNode>(): FunctionComponent<
+  IRowProps<T>
+> => ({
+  node,
+  depth,
+  expanded,
+  position,
+  onKeyDown: onKeyDownRaw,
+  onFocus: onFocusRaw,
+  onExpanded,
+  children,
+}) => {
+  const vscode = useContext(VsCodeApi);
+  const onClick = useCallback(
+    (evt: MouseEvent) =>
+      vscode.postMessage<IOpenDocumentMessage>({
+        type: 'openDocument',
+        callFrame: node.callFrame,
+        location: (node as IGraphNode).src,
+        toSide: evt.altKey,
+      }),
+    [vscode, node],
+  );
+
+  const onToggleExpand = useCallback(() => onExpanded(!expanded, node), [expanded, node]);
+
+  const onKeyDown = useCallback(
+    (evt: KeyboardEvent) => {
+      onKeyDownRaw?.(evt, node);
+    },
+    [onKeyDownRaw, node],
+  );
+
+  const onFocus = useCallback(() => {
+    onFocusRaw?.(node);
+  }, [onFocusRaw, node]);
+
+  let root = node;
+  while (root.parent) {
+    root = root.parent as T;
+  }
+
+  const expand = (
+    <span className={styles.expander}>
+      {node.childrenSize > 0 ? <Icon i={expanded ? ChevronDown : ChevronRight} /> : null}
+    </span>
+  );
+
+  const location = getNodeText(node)
+
+  return (
+    <div
+      className={styles.row}
+      data-row-id={getGlobalUniqueId(node)}
+      onKeyDown={onKeyDown}
+      onFocus={onFocus}
+      onClick={onToggleExpand}
+      tabIndex={0}
+      role="treeitem"
+      aria-posinset={position}
+      aria-setsize={node.parent?.childrenSize ?? 1}
+      aria-level={depth + 1}
+      aria-expanded={expanded}
+    >
+      {children}
+      {!location ? (
+        <div
+          className={classes(styles.location, styles.virtual)}
+          style={{ marginLeft: depth * 15 }}
+        >
+          {expand} <span className={styles.fn}>{node.callFrame.functionName}</span>
+        </div>
+      ) : (
+        <div className={styles.location} style={{ marginLeft: depth * 15 }}>
+          {expand} <span className={styles.fn}>{node.callFrame.functionName}</span>
+          <span className={styles.file}>
+            <a href="#" onClick={onClick}>
+              {location}
+            </a>
+          </span>
+        </div>
+      )}
+    </div>
+  );
+};

packages/vscode-js-profile-table/src/common/use-time-view.ts renamed to packages/vscode-js-profile-table/src/common/base-time-view.tsx

@@ -2,12 +2,15 @@
  * Copyright (C) Microsoft Corporation. All rights reserved.
  *--------------------------------------------------------*/
 
+import { ComponentChild, ComponentType, Fragment, FunctionComponent, h } from 'preact';
+import VirtualList from 'preact-virtual-list';
 import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'preact/hooks';
 import { addToSet, removeFromSet, toggleInSet } from 'vscode-js-profile-core/out/esm/array';
 import { ICommonNode } from 'vscode-js-profile-core/out/esm/common/model';
 import { IGraphNode } from 'vscode-js-profile-core/out/esm/cpu/model';
 import { ITreeNode } from 'vscode-js-profile-core/out/esm/heap/model';
 import { IQueryResults } from 'vscode-js-profile-core/out/esm/ql';
+import styles from './time-view.css';
 import { SortFn } from './types';
 
 const getGlobalUniqueId = (node: ICommonNode) => {
@@ -19,19 +22,28 @@ const getGlobalUniqueId = (node: ICommonNode) => {
   return parts.join('-');
 };
 
-const useTimeView = <T extends IGraphNode | ITreeNode>({
-  data,
-  query,
-  initSortFn,
-}: {
+type NodeAtDepth<T> = { node: T; depth: number; position: number };
+
+export interface IRowProps<T> {
+  node: T;
+  depth: number;
+  position: number;
+  expanded: boolean;
+  onExpanded: (isExpanded: boolean, target: T) => void;
+  onKeyDown: (evt: KeyboardEvent, target: T) => void;
+  onFocus: (target: T) => void;
+}
+
+export const makeBaseTimeView = <T extends IGraphNode | ITreeNode>(): FunctionComponent<{
   query: IQueryResults<T>;
   data: T[];
-  initSortFn: SortFn;
-}) => {
+  sortFn: SortFn | undefined;
+  header: ComponentChild;
+  row: ComponentType<IRowProps<T>>;
+}> => ({ data, header, query, sortFn, row: Row }) => {
   type NodeAtDepth = { node: T; depth: number; position: number };
 
   const listRef = useRef<{ base: HTMLElement }>();
-  const [sortFn, setSortFn] = useState<SortFn | undefined>(() => initSortFn);
   const [focused, setFocused] = useState<T | undefined>(undefined);
   const [expanded, setExpanded] = useState<ReadonlySet<T>>(new Set());
 
@@ -148,16 +160,45 @@ const useTimeView = <T extends IGraphNode | ITreeNode>({
     });
   }, [focused]);
 
-  return {
-    listRef,
-    rendered,
-    onKeyDown,
-    expanded,
-    setExpanded,
-    setFocused,
-    sortFn,
-    setSortFn,
+  const onExpanded = (isExpanded: boolean, node: T) => {
+    setExpanded(prev => {
+      const next = new Set(prev);
+      if (isExpanded) {
+        next.add(node);
+      } else {
+        next.delete(node);
+      }
+
+      return next.size !== prev.size ? next : prev;
+    });
   };
-};
 
-export default useTimeView;
+  const renderRow = useCallback(
+    (row: NodeAtDepth) => (
+      <Row
+        onKeyDown={onKeyDown}
+        node={row.node}
+        depth={row.depth}
+        position={row.position}
+        expanded={expanded.has(row.node)}
+        onExpanded={onExpanded}
+        onFocus={setFocused}
+      />
+    ),
+    [expanded, setExpanded, onKeyDown],
+  );
+
+  return (
+    <Fragment>
+      {header}
+      <VirtualList
+        ref={listRef}
+        className={styles.rows}
+        data={rendered}
+        renderRow={renderRow}
+        rowHeight={25}
+        overscanCount={100}
+      />
+    </Fragment>
+  );
+};