microsoft · connor4312 · Nov 28, 2023 · Nov 28, 2023
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/vscode-js-profile-table/package-lock.json b/packages/vscode-js-profile-table/package-lock.json
diff --git a/packages/vscode-js-profile-table/package.json b/packages/vscode-js-profile-table/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vscode-js-profile-table",
-  "version": "1.0.7",
+  "version": "1.0.8",
   "displayName": "Table Visualizer for JavaScript Profiles",
   "description": "Text visualizer for profiles taken from the JavaScript debugger",
   "author": "Connor Peet <connor@peet.io>",

diff --git a/packages/vscode-js-profile-table/src/common/base-time-view-row.tsx b/packages/vscode-js-profile-table/src/common/base-time-view-row.tsx
@@ -59,6 +59,7 @@ export const makeBaseTimeViewRow =
     return (
       <div
         className={styles.row}
+        style={{ cursor: numChildren > 0 ? 'pointer' : 'default' }}
         data-row-id={getGlobalUniqueId(node)}
         >
         >
@@ -79,7 +80,7 @@ export const makeBaseTimeViewRow =
           </div>
         ) : (
           <div className={styles.location} style={{ marginLeft: depth * 15 }}>
-            {expand} <span className={styles.fn}>{rowText}</span>
+            {expand} <span className={styles.fn} style={{ maxWidth: '80%' }}>{rowText}</span>
             <span className={styles.file}>
               <a href="#" >
                 {locationText}

diff --git a/packages/vscode-js-profile-table/src/common/impact-bar.tsx b/packages/vscode-js-profile-table/src/common/impact-bar.tsx
@@ -5,7 +5,7 @@
 import { FunctionComponent, h } from 'preact';
 import styles from './time-view.css';
 
-const ImpactBar: FunctionComponent<{ impact: number }> = ({ impact }) => (
+export const ImpactBar: FunctionComponent<{ impact: number }> = ({ impact }) => (
   <div className={styles.impactBar} style={{ transform: `scaleX(${impact})` }} />
 );
 

diff --git a/packages/vscode-js-profile-table/src/common/time-view.css b/packages/vscode-js-profile-table/src/common/time-view.css
@@ -89,7 +89,7 @@
 }
 
 .fn {
-  max-width: 80%;
+  max-width: calc(100% - 20px);
   text-overflow: ellipsis;
   flex-shrink: 0;
 }

diff --git a/packages/vscode-js-profile-table/src/heapsnapshot-client/client.tsx b/packages/vscode-js-profile-table/src/heapsnapshot-client/client.tsx
@@ -9,7 +9,6 @@ import { GraphRPCInterface } from 'vscode-js-profile-core/out/esm/heapsnapshot/r
 import { useGraph } from 'vscode-js-profile-core/out/esm/heapsnapshot/useGraph';
 import { DataProvider, IQueryResults, PropertyType } from 'vscode-js-profile-core/out/esm/ql';
 import styles from '../common/client.css';
-import OpenFlameButton from '../common/open-flame-buttom';
 import { SortFn } from '../common/types';
 import { TableNode, TimeView, sortByName, sortBySelfSize } from './time-view';
 
@@ -99,7 +98,6 @@ const Root: FunctionComponent = () => {
         },
       }}
       body={TimeViewWrapper}
-      filterFooter={OpenFlameButton}
     />
   );
 };

diff --git a/packages/vscode-js-profile-table/src/heapsnapshot-client/time-view.tsx b/packages/vscode-js-profile-table/src/heapsnapshot-client/time-view.tsx
@@ -39,7 +39,7 @@ export const TimeView: FunctionComponent<{
   return (
     <BaseTimeView
       data={data}
-      sortFn={sortFn}
+      sortFn={sortFn || sortByRetainedSize}
       query={query}
       header={<TimeViewHeader sort={sortFn}  />}
       row={useMemo(() => timeViewRow(data), [data])}
@@ -85,16 +85,16 @@ const timeViewRow =
   (data: DataProvider<TableNode>): FunctionComponent<IRowProps<TableNode>> =>
   props => {
     const { node } = props;
-    const { selfSize, retainedSize } =
-      node.parent ||
-      data.loaded.reduce(
-        (acc, n) => {
-          acc.selfSize += n.selfSize;
-          acc.retainedSize += n.retainedSize;
-          return acc;
-        },
-        { selfSize: 0, retainedSize: 0 },
-      );
+    const ret = node.parent
+      ? undefined
+      : data.loaded.reduce(
+          (acc, n) => {
+            acc.selfSize += n.selfSize;
+            acc.retainedSize += n.retainedSize;
+            return acc;
+          },
+          { selfSize: 0, retainedSize: 0 },
+        );
 
     const vscode = useContext(VsCodeApi);
     const >
@@ -111,6 +111,11 @@ const timeViewRow =
       [vscode, node.index],
     );
 
+    const pct = ret && {
+      self: node.selfSize / ret.selfSize,
+      ret: node.retainedSize / ret.retainedSize,
+    };
+
     return (
       <BaseTimeViewRow
         {...props}
@@ -133,12 +138,20 @@ const timeViewRow =
           </Fragment>
         }
       >
-        <div className={styles.duration} aria-labelledby="self-size-header">
-          <ImpactBar impact={node.selfSize / selfSize} />
+        <div
+          className={styles.duration}
+          aria-labelledby="self-size-header"
+          title={pct && `${node.selfSize} bytes, ${(pct.self * 100).toFixed(1)}% of total`}
+        >
+          {pct && <ImpactBar impact={pct.self} />}
           {prettyBytes(node.selfSize)}
         </div>
-        <div className={styles.duration} aria-labelledby="retained-size-header">
-          <ImpactBar impact={node.retainedSize / retainedSize} />
+        <div
+          className={styles.duration}
+          aria-labelledby="retained-size-header"
+          title={pct && `${node.retainedSize} bytes, ${(pct.ret * 100).toFixed(1)}% of total`}
+        >
+          {pct && <ImpactBar impact={pct.ret} />}
           {prettyBytes(node.retainedSize)}
         </div>
       </BaseTimeViewRow>