feat: support heap snapshots

Supports heap snapshots using the new @vscode/v8-heap-parser module. The
parser runs in a Node.js worker_thread on the extension host, and is
queried by postmessage RPC from connected webviews.

This adds a table view and a cytoscape-powered graph view of retainers,
in the 'flame' package, as seen in pacific standup yesterday.

Most of the work in this PR is reworking the existing structures to
support asynchronously loading data. Heap snapshots are _big_, far
bigger than CPU profiles or heap profiles, so we don't want to load it
into memory all at once.

packages/vscode-js-profile-core/package.json

@@ -14,6 +14,7 @@
     "watch:css": "npm run compile:css && chokidar \"src/**/*.css\" -c \"cpy --parents --cwd=src '**/*.css' ../out/esm\""
   },
   "dependencies": {
-    "@vscode/codicons": "^0.0.35"
+    "@vscode/codicons": "^0.0.35",
+    "@vscode/v8-heap-parser": "^0.1.0"
   }
 }

packages/vscode-js-profile-core/src/client/filter.tsx

@@ -2,7 +2,7 @@
  * Copyright (C) Microsoft Corporation. All rights reserved.
  *--------------------------------------------------------*/
 
-import { h, FunctionComponent, ComponentChild } from 'preact';
+import { ComponentChild, FunctionComponent, h } from 'preact';
 import { useCallback } from 'preact/hooks';
 import styles from './filter.css';
 
@@ -11,10 +11,12 @@ import styles from './filter.css';
  */
 export const Filter: FunctionComponent<{
   value: string;
+  type?: string;
+  min?: number;
   onChange: (value: string) => void;
   placeholder?: string;
   foot?: ComponentChild;
-}> = ({ value, onChange, placeholder = 'Filter for function', foot }) => {
+}> = ({ value, min, type, onChange, placeholder = 'Filter for function', foot }) => {
   const onChangeRaw = useCallback(
     (evt: Event) => {
       onChange((evt.target as HTMLInputElement).value);
@@ -24,7 +26,14 @@ export const Filter: FunctionComponent<{
 
   return (
     <div className={styles.wrapper}>
-      <input value={value} placeholder={placeholder} onPaste={onChangeRaw} onKeyUp={onChangeRaw} />
+      <input
+        type={type}
+        min={min}
+        value={value}
+        placeholder={placeholder}
+        onPaste={onChangeRaw}
+        onKeyUp={onChangeRaw}
+      />
       {foot}
     </div>
   );

packages/vscode-js-profile-core/src/client/filterBar.tsx

@@ -0,0 +1,10 @@
+/*---------------------------------------------------------
+ * Copyright (C) Microsoft Corporation. All rights reserved.
+ *--------------------------------------------------------*/
+
+import { FunctionComponent, h } from 'preact';
+import styles from './filterBar.css';
+
+export const FilterBar: FunctionComponent = ({ children }) => (
+  <div className={styles.f}>{children}</div>
+);

packages/vscode-js-profile-core/src/client/pageLoader.css

@@ -0,0 +1,29 @@
+.progress {
+	position: absolute;
+	top: 0;
+	left: 0;
+	right: 0;
+	height: 2px;
+	pointer-events: none;
+	overflow: hidden;
+	z-index: 1;
+}
+
+.progress::before {
+	content: "";
+	position: absolute;
+	inset: 0;
+	width: 2%;
+	animation-name: progress;
+	animation-duration: 4s;
+	animation-iteration-count: infinite;
+	animation-timing-function: linear;
+	transform: translate3d(0px, 0px, 0px);
+	background: var(--vscode-progressBar-background);
+}
+
+@keyframes progress {
+	from { transform: translateX(0%) scaleX(1) }
+	50% { transform: translateX(2500%) scaleX(3) }
+	to { transform: translateX(4900%) scaleX(1) }
+}

packages/vscode-js-profile-core/src/client/pageLoader.tsx

@@ -0,0 +1,8 @@
+/*---------------------------------------------------------
+ * Copyright (C) Microsoft Corporation. All rights reserved.
+ *--------------------------------------------------------*/
+
+import { FunctionComponent, h } from 'preact';
+import style from './pageLoader.css';
+
+export const PageLoader: FunctionComponent = () => <div className={style.progress} />;

packages/vscode-js-profile-core/src/client/rich-filter.tsx

@@ -8,6 +8,7 @@ import { ComponentChild, Fragment, FunctionComponent, h } from 'preact';
 import { useEffect, useState } from 'preact/hooks';
 import { IDataSource, IQueryResults, evaluate } from '../ql';
 import { Filter } from './filter';
+import { FilterBar } from './filterBar';
 import styles from './rich-filter.css';
 import { ToggleButton } from './toggle-button';
 import { usePersistedState } from './usePersistedState';
@@ -70,7 +71,7 @@ export const richFilter =
     }, [regex, caseSensitive, text, data]);
 
     return (
-      <div className={styles.f}>
+      <FilterBar>
         <Filter
           value={text}
           placeholder={placeholder}
@@ -94,6 +95,6 @@ export const richFilter =
         />
         {error && <div className={styles.error}>{error}</div>}
         {foot}
-      </div>
+      </FilterBar>
     );
   };

packages/vscode-js-profile-core/src/client/vscodeApi.tsx

@@ -15,10 +15,12 @@ export interface IVscodeApi<T = unknown> {
 
 declare const acquireVsCodeApi: () => IVscodeApi;
 
+export const vscodeApi = acquireVsCodeApi();
+
 /**
  * Context key for the VS Code API object.
  */
-export const VsCodeApi = createContext(acquireVsCodeApi());
+export const VsCodeApi = createContext(vscodeApi);
 
 /**
  * Parses the vscode CSS variables from the document.