@memlab/cli 1.0.10 → 1.0.12

package/bin/memlab.js

@@ -1,4 +1,4 @@
-#!/usr/bin/env -S node --expose-gc --max-old-space-size=4096
+#!/usr/bin/env node
 
 /**
  * Copyright (c) Meta Platforms, Inc. and affiliates.
@@ -6,8 +6,8 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @emails oncall+ws_labs
  * @format
+ * @oncall ws_labs
  */
 
 // eslint-disable-next-line no-var

package/dist/commands/heap/interactive/InteractiveHeapExploreCommand.d.ts

@@ -7,9 +7,8 @@
  * @format
  * @oncall ws_labs
  */
-import type { CLIOptions } from '@memlab/core';
+import type { BaseOption, CLIOptions } from '@memlab/core';
 import BaseCommand, { CommandCategory } from '../../../BaseCommand';
-import { BaseOption } from '@memlab/core';
 export default class InteractiveHeapViewCommand extends BaseCommand {
     getCommandName(): string;
     getDescription(): string;

package/dist/commands/heap/interactive/InteractiveHeapExploreCommand.js

@@ -45,14 +45,14 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const fs_extra_1 = __importDefault(require("fs-extra"));
-const BaseCommand_1 = __importStar(require("../../../BaseCommand"));
 const core_1 = require("@memlab/core");
+const heap_analysis_1 = require("@memlab/heap-analysis");
+const BaseCommand_1 = __importStar(require("../../../BaseCommand"));
 const SnapshotFileOption_1 = __importDefault(require("../../../options/heap/SnapshotFileOption"));
 const JSEngineOption_1 = __importDefault(require("../../../options/heap/JSEngineOption"));
-const core_2 = require("@memlab/core");
-const heap_analysis_1 = require("@memlab/heap-analysis");
 const CliScreen_1 = __importDefault(require("./ui-components/CliScreen"));
 const HeapNodeIdOption_1 = __importDefault(require("../../../options/HeapNodeIdOption"));
+const MLClusteringOption_1 = __importDefault(require("../../../options/MLClusteringOption"));
 class InteractiveHeapViewCommand extends BaseCommand_1.default {
     getCommandName() {
         return 'view-heap';
@@ -71,6 +71,7 @@ class InteractiveHeapViewCommand extends BaseCommand_1.default {
             new SnapshotFileOption_1.default(),
             new JSEngineOption_1.default(),
             new HeapNodeIdOption_1.default(),
+            new MLClusteringOption_1.default(),
         ];
     }
     // get the heap snapshot to view
@@ -89,18 +90,34 @@ class InteractiveHeapViewCommand extends BaseCommand_1.default {
         });
     }
     getNodesToFocus(heap) {
-        const nodes = this.getNodesWithLargestRetainedSize(heap);
-        nodes.push(...this.getDetachedNodes(heap));
-        return nodes;
+        return __awaiter(this, void 0, void 0, function* () {
+            const ret = new Map();
+            const nodes = this.getNodesWithLargestRetainedSize(heap);
+            ret.set('large-object', nodes);
+            const detachedNodes = yield this.getDetachedNodes(heap);
+            ret.set('detached', detachedNodes);
+            return ret;
+        });
     }
     getDetachedNodes(heap) {
-        const ret = [];
-        heap.nodes.forEach(node => {
-            if (core_1.utils.isDetachedDOMNode(node) || core_1.utils.isDetachedFiberNode(node)) {
-                ret.push({ tag: 'Detached', heapObject: node });
-            }
+        return __awaiter(this, void 0, void 0, function* () {
+            const ret = [];
+            const idSet = new Set();
+            heap.nodes.forEach(node => {
+                if (core_1.utils.isDetachedDOMNode(node) || core_1.utils.isDetachedFiberNode(node)) {
+                    idSet.add(node.id);
+                }
+            });
+            // get a minimal set of objects to represent all the detached DOM elements
+            const dominatorIds = core_1.utils.getConditionalDominatorIds(idSet, heap, () => true);
+            dominatorIds.forEach(id => {
+                const node = heap.getNodeById(id);
+                if (node) {
+                    ret.push({ tag: 'Detached', heapObject: node });
+                }
+            });
+            return ret;
         });
-        return ret;
     }
     getNodesWithLargestRetainedSize(heap) {
         const sizeThreshold = 2 * 1024 * 1024; // 2MB
@@ -117,27 +134,36 @@ class InteractiveHeapViewCommand extends BaseCommand_1.default {
     }
     // get heap node to focus on
     getHeapNodes(heap) {
-        if (core_1.config.focusFiberNodeId >= 0) {
-            const node = heap.getNodeById(core_1.config.focusFiberNodeId);
-            if (node) {
-                return [{ heapObject: node }];
+        return __awaiter(this, void 0, void 0, function* () {
+            if (core_1.config.focusFiberNodeId >= 0) {
+                const node = heap.getNodeById(core_1.config.focusFiberNodeId);
+                if (node) {
+                    const map = new Map();
+                    map.set('Chosen', [
+                        {
+                            tag: 'Chosen',
+                            heapObject: node,
+                        },
+                    ]);
+                    return map;
+                }
+            }
+            const category = yield this.getNodesToFocus(heap);
+            if (category.size === 0) {
+                throw core_1.utils.haltOrThrow('please specify a heap node ' +
+                    `via --${new HeapNodeIdOption_1.default().getOptionName()}`);
             }
-        }
-        const nodes = this.getNodesToFocus(heap);
-        if (nodes.length === 0) {
-            throw core_1.utils.haltOrThrow('please specify a heap node ' +
-                `via --${new HeapNodeIdOption_1.default().getOptionName()}`);
-        }
-        return nodes;
+            return category;
+        });
     }
     run(options) {
         var _a;
         return __awaiter(this, void 0, void 0, function* () {
             const workDir = (_a = options.configFromOptions) === null || _a === void 0 ? void 0 : _a.workDir;
-            const reportOutDir = core_2.fileManager.getReportOutDir({ workDir });
+            const reportOutDir = core_1.fileManager.getReportOutDir({ workDir });
             fs_extra_1.default.emptyDirSync(reportOutDir);
             const heap = yield this.getHeap(options);
-            const nodes = this.getHeapNodes(heap);
+            const nodes = yield this.getHeapNodes(heap);
             new CliScreen_1.default('memlab heap viewer', heap, nodes).start();
         });
     }

package/dist/commands/heap/interactive/ui-components/CliScreen.d.ts

@@ -3,7 +3,7 @@ import { ComponentDataItem } from './HeapViewUtils';
 export default class CliScreen {
     private screen;
     private objectBox;
-    private parentObjectBox;
+    private clusteredObjectBox;
     private referrerBox;
     private referenceBox;
     private objectPropertyBox;
@@ -11,7 +11,8 @@ export default class CliScreen {
     private currentFocuseKey;
     private keyToComponent;
     private heapController;
-    constructor(title: string, heap: IHeapSnapshot, nodes: ComponentDataItem[]);
+    constructor(title: string, heap: IHeapSnapshot, objectCategory: Map<string, ComponentDataItem[]>);
+    private setFirstObjectAsCurrrent;
     private initScreen;
     private initCallbacks;
     start(): void;
@@ -21,9 +22,8 @@ export default class CliScreen {
     private registerKeys;
     private addComponentToFocusKeyMap;
     private getNextFocusKey;
-    private getLabel;
-    private initParentObjectBox;
-    private getParentObjectBoxSize;
+    private initClusteredObjectBox;
+    private getClusteredObjectBoxSize;
     private initReferrerBox;
     private getReferrerBoxSize;
     private initObjectBox;

package/dist/commands/heap/interactive/ui-components/CliScreen.js

@@ -4,7 +4,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const HeapViewUtils_1 = require("./HeapViewUtils");
-const chalk_1 = __importDefault(require("chalk"));
 const blessed_1 = __importDefault(require("blessed"));
 const ListComponent_1 = __importDefault(require("./ListComponent"));
 const HeapViewController_1 = __importDefault(require("./HeapViewController"));
@@ -16,7 +15,7 @@ function positionToNumber(info) {
  * all the UI components in CLI.
  *
  * Screen Layout:
- * ┌─Referrers of [*] ─┐┌─Objects ──────────┐┌─References ───────┐
+ * ┌─Referrers ────────┐┌─Clustered Objects ┐┌─References ───────┐
  * │                   ││                   ││                   │
  * │                   ││                   ││                   │
  * │                   ││                   ││                   │
@@ -26,7 +25,7 @@ function positionToNumber(info) {
  * │                   ││                   ││                   │
  * │                   ││                   ││                   │
  * └───────────────────┘│                   ││                   │
- * ┌─Referrers ────────┐│                   ││                   │
+ * ┌─Objects ──────────┐│                   ││                   │
  * │                   ││                   ││                   │
  * │                   │└───────────────────┘│                   │
  * │                   │┌─Object Detail ────┐│                   │
@@ -38,18 +37,18 @@ function positionToNumber(info) {
  * └───────────────────┘└───────────────────┘└───────────────────┘
  */
 class CliScreen {
-    constructor(title, heap, nodes) {
+    constructor(title, heap, objectCategory) {
         this.currentFocuseKey = 1;
-        this.heapController = new HeapViewController_1.default(heap, nodes);
+        this.heapController = new HeapViewController_1.default(heap, objectCategory);
         this.screen = this.initScreen(title);
         const callbacks = this.initCallbacks(this.heapController, this.screen);
         this.keyToComponent = new Map();
         this.referrerBox = this.initReferrerBox(callbacks);
         this.heapController.setReferrerBox(this.referrerBox);
-        this.parentObjectBox = this.initParentObjectBox(callbacks);
-        this.heapController.setParentBox(this.parentObjectBox);
         this.objectBox = this.initObjectBox(callbacks);
         this.heapController.setObjectBox(this.objectBox);
+        this.clusteredObjectBox = this.initClusteredObjectBox(callbacks);
+        this.heapController.setClusteredBox(this.clusteredObjectBox);
         this.referenceBox = this.initReferenceBox(callbacks);
         this.heapController.setReferenceBox(this.referenceBox);
         this.objectPropertyBox = this.initObjectPropertyBox(callbacks);
@@ -57,6 +56,17 @@ class CliScreen {
         this.retainerTraceBox = this.initRetainerTraceBox(callbacks);
         this.heapController.setRetainerTraceBox(this.retainerTraceBox);
         this.registerEvents();
+        this.setFirstObjectAsCurrrent(objectCategory);
+    }
+    setFirstObjectAsCurrrent(objectCategory) {
+        const keys = Array.from(objectCategory.keys());
+        if (keys.length === 0) {
+            return;
+        }
+        const nodes = objectCategory.get(keys[0]);
+        if (!nodes || nodes.length === 0) {
+            return;
+        }
         this.heapController.setCurrentHeapObject((0, HeapViewUtils_1.getHeapObjectAt)(nodes, 0));
     }
     initScreen(title) {
@@ -97,7 +107,7 @@ class CliScreen {
         const screen = this.screen;
         screen.on('resize', () => {
             // all boxes/lists needs to resize
-            this.updateComponentSize(this.parentObjectBox, this.getParentObjectBoxSize());
+            this.updateComponentSize(this.clusteredObjectBox, this.getClusteredObjectBoxSize());
             this.updateComponentSize(this.referrerBox, this.getReferrerBoxSize());
             this.updateComponentSize(this.objectBox, this.getObjectBoxSize());
             this.updateComponentSize(this.objectPropertyBox, this.getObjectPropertyBoxSize());
@@ -138,26 +148,26 @@ class CliScreen {
     getNextFocusKey() {
         return `${this.currentFocuseKey}`;
     }
-    getLabel(text, key) {
-        return `${text}` + chalk_1.default.grey(` (press ${chalk_1.default.inverse(key)} to focus)`);
-    }
-    initParentObjectBox(callbacks) {
-        const box = new ListComponent_1.default([], callbacks, Object.assign(Object.assign({}, this.getParentObjectBoxSize()), { label: this.getLabel('Referrers of Current', this.getNextFocusKey()) }));
+    initClusteredObjectBox(callbacks) {
+        const box = new ListComponent_1.default([], callbacks, Object.assign({}, this.getClusteredObjectBoxSize()));
+        box.setFocusKey(this.getNextFocusKey());
+        box.setLabel('Clustered Objects');
         this.screen.append(box.element);
         this.addComponentToFocusKeyMap(box);
         return box;
     }
-    getParentObjectBoxSize() {
+    getClusteredObjectBoxSize() {
         return {
             width: Math.floor(positionToNumber(this.screen.width) / 3),
-            height: positionToNumber(this.screen.height) -
-                Math.floor(positionToNumber(this.screen.height) / 2),
-            top: Math.floor(positionToNumber(this.screen.height) / 2),
-            left: 0,
+            height: Math.floor((2 * positionToNumber(this.screen.height)) / 3),
+            top: 0,
+            left: Math.floor(positionToNumber(this.screen.width) / 3),
         };
     }
     initReferrerBox(callbacks) {
-        const box = new ListComponent_1.default([], callbacks, Object.assign(Object.assign({}, this.getReferrerBoxSize()), { label: this.getLabel('Referrers', this.getNextFocusKey()) }));
+        const box = new ListComponent_1.default([], callbacks, Object.assign({}, this.getReferrerBoxSize()));
+        box.setFocusKey(this.getNextFocusKey());
+        box.setLabel('Referrers');
         this.screen.append(box.element);
         this.addComponentToFocusKeyMap(box);
         return box;
@@ -171,7 +181,9 @@ class CliScreen {
         };
     }
     initObjectBox(callbacks) {
-        const box = new ListComponent_1.default([], callbacks, Object.assign(Object.assign({}, this.getObjectBoxSize()), { label: this.getLabel('Objects', this.getNextFocusKey()) }));
+        const box = new ListComponent_1.default([], callbacks, Object.assign({}, this.getObjectBoxSize()));
+        box.setFocusKey(this.getNextFocusKey());
+        box.setLabel('Objects');
         this.screen.append(box.element);
         this.addComponentToFocusKeyMap(box);
         return box;
@@ -179,13 +191,16 @@ class CliScreen {
     getObjectBoxSize() {
         return {
             width: Math.floor(positionToNumber(this.screen.width) / 3),
-            height: Math.floor((2 * positionToNumber(this.screen.height)) / 3),
-            top: 0,
-            left: Math.floor(positionToNumber(this.screen.width) / 3),
+            height: positionToNumber(this.screen.height) -
+                Math.floor(positionToNumber(this.screen.height) / 2),
+            top: Math.floor(positionToNumber(this.screen.height) / 2),
+            left: 0,
         };
     }
     initObjectPropertyBox(callbacks) {
-        const box = new ListComponent_1.default([], callbacks, Object.assign(Object.assign({}, this.getObjectPropertyBoxSize()), { label: this.getLabel('Object Detail', this.getNextFocusKey()) }));
+        const box = new ListComponent_1.default([], callbacks, Object.assign({}, this.getObjectPropertyBoxSize()));
+        box.setFocusKey(this.getNextFocusKey());
+        box.setLabel('Objects Detail');
         this.screen.append(box.element);
         this.addComponentToFocusKeyMap(box);
         return box;
@@ -200,7 +215,9 @@ class CliScreen {
         };
     }
     initReferenceBox(callbacks) {
-        const box = new ListComponent_1.default([], callbacks, Object.assign(Object.assign({}, this.getReferenceBoxSize()), { label: this.getLabel('References', this.getNextFocusKey()) }));
+        const box = new ListComponent_1.default([], callbacks, Object.assign({}, this.getReferenceBoxSize()));
+        box.setFocusKey(this.getNextFocusKey());
+        box.setLabel('References');
         this.screen.append(box.element);
         this.addComponentToFocusKeyMap(box);
         return box;
@@ -215,7 +232,9 @@ class CliScreen {
         };
     }
     initRetainerTraceBox(callbacks) {
-        const box = new ListComponent_1.default([], callbacks, Object.assign(Object.assign({}, this.getRetainerTraceBoxSize()), { label: this.getLabel('Retainer Trace', this.getNextFocusKey()) }));
+        const box = new ListComponent_1.default([], callbacks, Object.assign({}, this.getRetainerTraceBoxSize()));
+        box.setFocusKey(this.getNextFocusKey());
+        box.setLabel('Retainer Trace');
         this.screen.append(box.element);
         this.addComponentToFocusKeyMap(box);
         return box;

package/dist/commands/heap/interactive/ui-components/HeapViewController.d.ts

@@ -15,7 +15,9 @@ declare type SelectHeapObjectOption = {
     noChangeInReferrerBox?: boolean;
     noChangeInRetainerTraceBox?: boolean;
     noChangeInObjectPropertyBox?: boolean;
+    componentDataItem?: ComponentDataItem;
 };
+export declare type ObjectCategory = Map<string, ComponentDataItem[]>;
 /**
  * HeapViewController managers all the data associated with each
  * UI components in CLI and coordinates the events/interaction
@@ -25,18 +27,24 @@ export default class HeapViewController {
     private currentHeapObject;
     private selectedHeapObject;
     private currentHeapObjectsInfo;
+    private currentClusteredObjectsInfo;
     private componentIdToDataMap;
     private componentIdToComponentMap;
     private heap;
-    private parentBox;
+    private clusteredBox;
     private referrerBox;
     private objectBox;
     private referenceBox;
     private objectPropertyBox;
     private retainerTracePropertyBox;
-    constructor(heap: IHeapSnapshot, nodes: ComponentDataItem[]);
+    constructor(heap: IHeapSnapshot, objectCategory: ObjectCategory);
+    private getFlattenHeapObjectsInfo;
+    private getFlattenClusteredObjectsInfo;
+    private shouldClusterCategory;
+    private clusterComponentDataItems;
     getContent(componentId: number): string[];
-    setParentBox(component: ListComponent): void;
+    setClusteredBox(component: ListComponent): void;
+    getClusteredBoxData(): ComponentData;
     setReferrerBox(component: ListComponent): void;
     getReferrerBoxData(node?: IHeapNode): ComponentData;
     setObjectBox(component: ListComponent): void;
@@ -44,12 +52,19 @@ export default class HeapViewController {
     setReferenceBox(component: ListComponent): void;
     getReferenceBoxData(): ComponentData;
     setObjectPropertyBox(component: ListComponent): void;
-    getObjectPropertyData(): ComponentData;
+    getObjectPropertyData(options?: {
+        details?: Map<string, string>;
+    }): ComponentData;
+    private getReadableString;
     private getKeyValuePairString;
     setRetainerTraceBox(component: ListComponent): void;
     getRetainerTraceData(): ComponentData;
-    setCurrentHeapObjectFromComponent(componentId: number, itemIndex: number): void;
-    setCurrentHeapObject(node: IHeapNode): void;
+    setCurrentHeapObjectFromComponent(componentId: number, itemIndex: number, options?: {
+        skipFocus?: boolean;
+    }): void;
+    setCurrentHeapObject(node: IHeapNode, options?: {
+        skipFocus?: boolean;
+    }): void;
     focusOnComponent(componentId: number): void;
     setSelectedHeapObjectFromComponent(componentId: number, itemIndex: number): void;
     setSelectedHeapObject(node: IHeapNode, options?: SelectHeapObjectOption): void;

package/dist/commands/heap/interactive/ui-components/HeapViewController.js

@@ -12,13 +12,60 @@ const HeapViewUtils_1 = require("./HeapViewUtils");
  * among all UI components.
  */
 class HeapViewController {
-    constructor(heap, nodes) {
+    constructor(heap, objectCategory) {
         this.heap = heap;
-        this.currentHeapObject = (0, HeapViewUtils_1.getHeapObjectAt)(nodes, 0);
-        this.currentHeapObjectsInfo = nodes;
+        this.currentHeapObjectsInfo =
+            this.getFlattenHeapObjectsInfo(objectCategory);
+        this.currentClusteredObjectsInfo =
+            this.getFlattenClusteredObjectsInfo(objectCategory);
+        this.currentHeapObject = (0, HeapViewUtils_1.getHeapObjectAt)(this.currentHeapObjectsInfo, 0);
         this.componentIdToDataMap = new Map();
         this.componentIdToComponentMap = new Map();
     }
+    getFlattenHeapObjectsInfo(objectCategory) {
+        let ret = [];
+        for (const category of objectCategory.keys()) {
+            const nodes = objectCategory.get(category);
+            ret = [...ret, ...nodes];
+        }
+        return ret;
+    }
+    getFlattenClusteredObjectsInfo(objectCategory) {
+        let ret = [];
+        for (const category of objectCategory.keys()) {
+            let nodes = objectCategory.get(category);
+            if (this.shouldClusterCategory(category)) {
+                nodes = this.clusterComponentDataItems(nodes);
+            }
+            ret = [...ret, ...nodes];
+        }
+        return ret;
+    }
+    shouldClusterCategory(category) {
+        return category === 'detached';
+    }
+    clusterComponentDataItems(nodes) {
+        const ret = [];
+        const nodeIds = new Set(nodes
+            .filter(node => node.heapObject)
+            .map(node => { var _a, _b; return (_b = (_a = node.heapObject) === null || _a === void 0 ? void 0 : _a.id) !== null && _b !== void 0 ? _b : -1; }));
+        const clusters = core_1.analysis.clusterHeapObjects(nodeIds, this.heap);
+        clusters.forEach(cluster => {
+            var _a;
+            const id = (_a = cluster.id) !== null && _a !== void 0 ? _a : -1;
+            let node = null;
+            node = this.heap.getNodeById(id);
+            const details = new Map();
+            if (cluster.count) {
+                details.set('# of clusters', `${cluster.count}`);
+            }
+            if (cluster.retainedSize) {
+                details.set('aggregated retained size', `${core_1.utils.getReadableBytes(cluster.retainedSize)}`);
+            }
+            ret.push({ tag: 'Cluster', heapObject: node, details });
+        });
+        return ret;
+    }
     getContent(componentId) {
         const ret = [];
         const data = this.componentIdToDataMap.get(componentId);
@@ -29,11 +76,17 @@ class HeapViewController {
         }
         return ret;
     }
-    setParentBox(component) {
+    setClusteredBox(component) {
         this.componentIdToComponentMap.set(component.id, component);
-        this.parentBox = component;
+        this.clusteredBox = component;
         this.componentIdToDataMap.set(component.id, new HeapViewUtils_1.ComponentData());
     }
+    getClusteredBoxData() {
+        const data = new HeapViewUtils_1.ComponentData();
+        data.selectedIdx = 0;
+        data.items = this.currentClusteredObjectsInfo;
+        return data;
+    }
     setReferrerBox(component) {
         this.componentIdToComponentMap.set(component.id, component);
         this.referrerBox = component;
@@ -82,6 +135,7 @@ class HeapViewController {
             data.items.push({ referrerEdge: ref, heapObject: ref.toNode });
             return { stop: false };
         });
+        data.items.sort((i1, i2) => { var _a, _b, _c, _d; return ((_b = (_a = i2.heapObject) === null || _a === void 0 ? void 0 : _a.retainedSize) !== null && _b !== void 0 ? _b : 0) - ((_d = (_c = i1.heapObject) === null || _c === void 0 ? void 0 : _c.retainedSize) !== null && _d !== void 0 ? _d : 0); });
         data.selectedIdx = data.items.length > 0 ? 0 : -1;
         return data;
     }
@@ -90,7 +144,8 @@ class HeapViewController {
         this.objectPropertyBox = component;
         this.componentIdToDataMap.set(component.id, new HeapViewUtils_1.ComponentData());
     }
-    getObjectPropertyData() {
+    getObjectPropertyData(options = {}) {
+        var _a, _b;
         const data = new HeapViewUtils_1.ComponentData();
         const node = this.selectedHeapObject;
         data.items.push({
@@ -109,10 +164,10 @@ class HeapViewController {
             stringContent: this.getKeyValuePairString('retained size', core_1.utils.getReadableBytes(node.retainedSize)),
         });
         data.items.push({
-            stringContent: this.getKeyValuePairString('# of references', core_1.utils.getReadableBytes(node.edge_count)),
+            stringContent: this.getKeyValuePairString('# of references', node.edge_count),
         });
         data.items.push({
-            stringContent: this.getKeyValuePairString('# of referrers', core_1.utils.getReadableBytes(node.referrers.length)),
+            stringContent: this.getKeyValuePairString('# of referrers', node.referrers.length),
         });
         if (node.dominatorNode) {
             data.items.push({
@@ -120,9 +175,46 @@ class HeapViewController {
                 heapObject: node.dominatorNode,
             });
         }
+        // eslint-disable-next-line @typescript-eslint/no-this-alias
+        const self = this;
+        (_a = options.details) === null || _a === void 0 ? void 0 : _a.forEach((value, key) => data.items.push({
+            stringContent: self.getKeyValuePairString(key, value),
+        }));
+        // inject additional node information
+        if (node.isString) {
+            const stringNode = node.toStringNode();
+            if (stringNode) {
+                const value = this.getReadableString(stringNode.stringValue);
+                data.items.push({
+                    stringContent: this.getKeyValuePairString('string value', value),
+                });
+            }
+        }
+        if (node.type === 'number') {
+            data.items.push({
+                stringContent: this.getKeyValuePairString('numeric value', (_b = core_1.utils.getNumberNodeValue(node)) !== null && _b !== void 0 ? _b : '<error>'),
+            });
+        }
+        if (node.type === 'closure') {
+            const contextNode = node.getReferenceNode('context', 'internal');
+            if (contextNode) {
+                contextNode.forEachReference(edge => {
+                    data.items.push({
+                        tag: chalk_1.default.grey('Scope Variable'),
+                        referrerEdge: edge,
+                        heapObject: edge.toNode,
+                    });
+                });
+            }
+        }
         data.selectedIdx = data.items.length > 0 ? 0 : -1;
         return data;
     }
+    getReadableString(value) {
+        return value.length > 300
+            ? value.substring(0, 300) + chalk_1.default.grey('...')
+            : value;
+    }
     getKeyValuePairString(key, value) {
         return key + chalk_1.default.grey(': ') + chalk_1.default.green(value);
     }
@@ -150,7 +242,7 @@ class HeapViewController {
         data.selectedIdx = data.items.length > 0 ? 0 : -1;
         return data;
     }
-    setCurrentHeapObjectFromComponent(componentId, itemIndex) {
+    setCurrentHeapObjectFromComponent(componentId, itemIndex, options = {}) {
         const data = this.componentIdToDataMap.get(componentId);
         if (!data) {
             return;
@@ -163,27 +255,33 @@ class HeapViewController {
         if (!heapObject) {
             return;
         }
-        this.setCurrentHeapObject(heapObject);
+        this.setCurrentHeapObject(heapObject, options);
     }
-    setCurrentHeapObject(node) {
+    setCurrentHeapObject(node, options = {}) {
         this.currentHeapObject = node;
         // set parent box's data and content
-        const parentBoxData = this.getReferrerBoxData(this.currentHeapObject);
-        this.componentIdToDataMap.set(this.parentBox.id, parentBoxData);
-        this.parentBox.setContent(this.getContent(this.parentBox.id));
-        this.parentBox.selectIndex(parentBoxData.selectedIdx);
+        const clusteredBoxData = this.getClusteredBoxData();
+        this.componentIdToDataMap.set(this.clusteredBox.id, clusteredBoxData);
+        this.clusteredBox.setContent(this.getContent(this.clusteredBox.id));
+        this.clusteredBox.selectIndex(clusteredBoxData.selectedIdx);
         // set object box's data and content
         const objectBoxData = this.getObjectBoxData();
         this.componentIdToDataMap.set(this.objectBox.id, objectBoxData);
         this.objectBox.setContent(this.getContent(this.objectBox.id));
         this.objectBox.selectIndex(objectBoxData.selectedIdx);
         this.setSelectedHeapObject(node);
-        this.focusOnComponent(this.objectBox.id);
+        if (!options.skipFocus) {
+            this.focusOnComponent(this.objectBox.id);
+        }
     }
     focusOnComponent(componentId) {
+        var _a;
         for (const component of this.componentIdToComponentMap.values()) {
             if (component.id === componentId) {
                 component.focus();
+                const data = this.componentIdToDataMap.get(componentId);
+                const selectIndex = (_a = (data && data.selectedIdx)) !== null && _a !== void 0 ? _a : -1;
+                this.setSelectedHeapObjectFromComponent(componentId, selectIndex);
             }
             else {
                 component.loseFocus();
@@ -214,9 +312,11 @@ class HeapViewController {
             noChangeInReferrerBox,
             noChangeInRetainerTraceBox,
             noChangeInObjectPropertyBox,
+            componentDataItem: item,
         });
     }
     setSelectedHeapObject(node, options = {}) {
+        var _a;
         this.selectedHeapObject = node;
         // set referrer box's data and content
         if (!options.noChangeInReferrerBox) {
@@ -224,6 +324,7 @@ class HeapViewController {
             this.componentIdToDataMap.set(this.referrerBox.id, data);
             this.referrerBox.setContent(this.getContent(this.referrerBox.id));
             this.referrerBox.selectIndex(data.selectedIdx);
+            this.referrerBox.setLabel(`Referrers of @${node.id}`);
         }
         // set reference box's data and content
         if (!options.noChangeInReferenceBox) {
@@ -231,13 +332,18 @@ class HeapViewController {
             this.componentIdToDataMap.set(this.referenceBox.id, data);
             this.referenceBox.setContent(this.getContent(this.referenceBox.id));
             this.referenceBox.selectIndex(data.selectedIdx);
+            this.referenceBox.setLabel(`References of @${node.id}`);
         }
         // set object property box's data and content
         if (!options.noChangeInObjectPropertyBox) {
-            const data = this.getObjectPropertyData();
+            const propertyOption = ((_a = options === null || options === void 0 ? void 0 : options.componentDataItem) === null || _a === void 0 ? void 0 : _a.details)
+                ? { details: options.componentDataItem.details }
+                : {};
+            const data = this.getObjectPropertyData(propertyOption);
             this.componentIdToDataMap.set(this.objectPropertyBox.id, data);
             this.objectPropertyBox.setContent(this.getContent(this.objectPropertyBox.id));
             this.objectPropertyBox.selectIndex(data.selectedIdx);
+            this.objectPropertyBox.setLabel(`Object: @${node.id}`);
         }
         // set retainer trace box's data and content
         if (!options.noChangeInRetainerTraceBox) {
@@ -245,6 +351,7 @@ class HeapViewController {
             this.componentIdToDataMap.set(this.retainerTracePropertyBox.id, data);
             this.retainerTracePropertyBox.setContent(this.getContent(this.retainerTracePropertyBox.id));
             this.retainerTracePropertyBox.selectIndex(data.selectedIdx);
+            this.retainerTracePropertyBox.setLabel(`Retainer Trace of @${node.id}`);
         }
     }
 }

package/dist/commands/heap/interactive/ui-components/HeapViewUtils.d.ts

@@ -4,8 +4,8 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @emails oncall+ws_labs
  * @format
+ * @oncall ws_labs
  */
 import type { IHeapEdge, IHeapNode } from '@memlab/core';
 export declare class ComponentDataItem {
@@ -15,7 +15,9 @@ export declare class ComponentDataItem {
     heapObject?: IHeapNode;
     referenceEdge?: IHeapEdge;
     type?: string;
+    details?: Map<string, string>;
     static getTextForDisplay(data: ComponentDataItem): string;
+    private static getTextContent;
 }
 export declare class ComponentData {
     selectedIdx: number;
@@ -23,6 +25,7 @@ export declare class ComponentData {
 }
 export declare function throwIfNodesEmpty(nodes: ComponentDataItem[]): boolean;
 export declare function getHeapObjectAt(nodes: ComponentDataItem[], index: number): IHeapNode;
+export declare function substringWithColor(input: string, begin: number): string;
 export declare type DebounceCallback = () => void;
 export declare type DebounceFunction = (callback: DebounceCallback) => void;
 export declare function debounce(timeInMs: number): DebounceFunction;

package/dist/commands/heap/interactive/ui-components/HeapViewUtils.js

@@ -3,11 +3,70 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.debounce = exports.getHeapObjectAt = exports.throwIfNodesEmpty = exports.ComponentData = exports.ComponentDataItem = void 0;
+exports.debounce = exports.substringWithColor = exports.getHeapObjectAt = exports.throwIfNodesEmpty = exports.ComponentData = exports.ComponentDataItem = void 0;
 const chalk_1 = __importDefault(require("chalk"));
 const core_1 = require("@memlab/core");
+const lessUsefulEdgeTypeForDebugging = new Set([
+    'internal',
+    'hidden',
+    'shortcut',
+    'weak',
+]);
+const reactEdgeNames = new Set([
+    'alternate',
+    'firstEffect',
+    'lastEffect',
+    'concurrentQueues',
+    'child',
+    'return',
+    'sibling',
+]);
+function isUsefulEdgeForDebugging(edge) {
+    if (lessUsefulEdgeTypeForDebugging.has(edge.type)) {
+        return false;
+    }
+    const edgeStr = `${edge.name_or_index}`;
+    if (reactEdgeNames.has(edgeStr)) {
+        if (core_1.utils.isFiberNode(edge.fromNode) || core_1.utils.isFiberNode(edge.toNode)) {
+            return false;
+        }
+    }
+    if (edgeStr.startsWith('__reactProps$')) {
+        return false;
+    }
+    return true;
+}
+const lessUsefulObjectTypeForDebugging = new Set([
+    'native',
+    'hidden',
+    'array',
+    'code',
+    'synthetic',
+]);
+function isUsefulObjectForDebugging(object) {
+    if (lessUsefulObjectTypeForDebugging.has(object.type)) {
+        return false;
+    }
+    return !core_1.utils.isFiberNode(object);
+}
 class ComponentDataItem {
     static getTextForDisplay(data) {
+        const content = ComponentDataItem.getTextContent(data);
+        if (data.referrerEdge && isUsefulEdgeForDebugging(data.referrerEdge)) {
+            return content;
+        }
+        if (data.referenceEdge && isUsefulEdgeForDebugging(data.referenceEdge)) {
+            return content;
+        }
+        if (data.heapObject && isUsefulObjectForDebugging(data.heapObject)) {
+            return content;
+        }
+        if (!data.referenceEdge && !data.heapObject && !data.referrerEdge) {
+            return content;
+        }
+        return chalk_1.default.grey(content);
+    }
+    static getTextContent(data) {
         let ret = '';
         if (data.tag) {
             ret += `[${data.tag}] `;
@@ -28,7 +87,11 @@ class ComponentDataItem {
             const size = core_1.utils.getReadableBytes(data.heapObject.retainedSize);
             const sizeInfo = chalk_1.default.grey(' [') + chalk_1.default.bold(chalk_1.default.blue(size)) + chalk_1.default.grey(']');
             ret +=
-                chalk_1.default.green(`[${data.heapObject.name}]`) +
+                chalk_1.default.green('[') +
+                    (isUsefulObjectForDebugging(data.heapObject)
+                        ? chalk_1.default.green(data.heapObject.name)
+                        : chalk_1.default.bold(chalk_1.default.grey(data.heapObject.name))) +
+                    chalk_1.default.green(']') +
                     objectType +
                     objectId +
                     sizeInfo;
@@ -69,6 +132,64 @@ function getHeapObjectAt(nodes, index) {
     return nodes[index].heapObject;
 }
 exports.getHeapObjectAt = getHeapObjectAt;
+// eslint-disable-next-line no-control-regex
+const colorBegin = /^\u001b\[(\d+)m/;
+// eslint-disable-next-line no-control-regex
+const colorEnd = /^\u001b\](\d+)m/;
+function stripColorCodeIfAny(input) {
+    const matchBegin = input.match(colorBegin);
+    const matchEnd = input.match(colorEnd);
+    const match = matchBegin || matchEnd;
+    if (!match) {
+        return { str: input, code: -1, isBegin: false };
+    }
+    const isBegin = !!matchBegin;
+    const code = parseInt(match[1], 10);
+    const str = input.substring(match[0].length);
+    return { str, code, isBegin };
+}
+function toColorControlChar(code, isBegin) {
+    const colorSpecialChar = '\u001b';
+    return colorSpecialChar + (isBegin ? '[' : ']') + code + 'm';
+}
+function substringWithColor(input, begin) {
+    const codeQueue = [];
+    let curIndex = 0;
+    let curStr = input;
+    while (curIndex < begin) {
+        // enqueue all control characters
+        let strip;
+        do {
+            strip = stripColorCodeIfAny(curStr);
+            curStr = strip.str;
+            if (strip.code >= 0) {
+                // pop if control begin meets control ends
+                const last = codeQueue[codeQueue.length - 1];
+                if (!last ||
+                    last.code !== strip.code ||
+                    strip.isBegin === true ||
+                    last.isBegin === false) {
+                    codeQueue.push({ code: strip.code, isBegin: strip.isBegin });
+                }
+                else {
+                    codeQueue.pop();
+                }
+            }
+        } while (strip.code >= 0);
+        // strip one actual content character
+        curStr = curStr.substring(1);
+        ++curIndex;
+    }
+    // prepend control characters
+    while (codeQueue.length > 0) {
+        const last = codeQueue.pop();
+        if (last) {
+            curStr = toColorControlChar(last === null || last === void 0 ? void 0 : last.code, last === null || last === void 0 ? void 0 : last.isBegin) + curStr;
+        }
+    }
+    return curStr;
+}
+exports.substringWithColor = substringWithColor;
 function debounce(timeInMs) {
     let id = null;
     return (callback) => {

package/dist/commands/heap/interactive/ui-components/ListComponent.d.ts

@@ -13,7 +13,7 @@ export declare type ListComponentOption = {
     height: number;
     left: number;
     top: number;
-    label: string;
+    label?: string;
 };
 export declare type ListItemSelectInfo = {
     keyName: string;
@@ -38,6 +38,7 @@ export default class ListComponent {
     private horizonScrollPositionMap;
     private displayedItems;
     private moreEntryIndex;
+    private focusKey;
     private static readonly ListContentLimit;
     private static readonly loadMore;
     private static nextComponentId;
@@ -51,6 +52,8 @@ export default class ListComponent {
     focus(): void;
     loseFocus(): void;
     selectIndex(index: number): void;
+    setFocusKey(key: string): void;
+    setLabel(label: string): void;
     setContent(content: string[]): void;
     loadMoreContent(): void;
     private removeDisplayMoreEntry;

package/dist/commands/heap/interactive/ui-components/ListComponent.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const blessed_1 = __importDefault(require("blessed"));
 const chalk_1 = __importDefault(require("chalk"));
 const string_width_1 = __importDefault(require("string-width"));
+const HeapViewUtils_1 = require("./HeapViewUtils");
 /**
  * A ListComponent is an UI list component in CLI.
  * It managers all the UI events related to the
@@ -16,11 +17,12 @@ class ListComponent {
         this.listIndex = 0;
         this.content = [];
         this.moreEntryIndex = -1;
+        this.focusKey = '';
         this.id = ListComponent.nextId();
         this.horizonScrollPositionMap = new Map();
         this.callbacks = callbacks;
         // init list element
-        this.element = blessed_1.default.list(Object.assign(Object.assign({}, options), { tags: true, scrollable: true, keys: true, border: {
+        this.element = blessed_1.default.list(Object.assign(Object.assign({}, options), { tags: false, scrollable: true, keys: true, border: {
                 fg: 'grey',
                 type: 'line',
             }, style: {
@@ -106,7 +108,7 @@ class ListComponent {
             return;
         }
         this.horizonScrollPositionMap.set(this.listIndex, --offset);
-        let newContent = selectedContent.substring(offset);
+        let newContent = (0, HeapViewUtils_1.substringWithColor)(selectedContent, offset);
         if (offset > 0) {
             newContent = chalk_1.default.grey('...') + newContent;
         }
@@ -124,7 +126,7 @@ class ListComponent {
             offset = (_a = this.horizonScrollPositionMap.get(this.listIndex)) !== null && _a !== void 0 ? _a : 0;
         }
         this.horizonScrollPositionMap.set(this.listIndex, ++offset);
-        let newContent = selectedContent.substring(offset);
+        let newContent = (0, HeapViewUtils_1.substringWithColor)(selectedContent, offset);
         if (offset > 0) {
             newContent = chalk_1.default.grey('...') + newContent;
         }
@@ -134,10 +136,18 @@ class ListComponent {
     focus() {
         this.element.focus();
         this.element.style.border.fg = 'white';
+        this.element.style.selected = {
+            bg: 'grey',
+            bold: true,
+        };
         this.getFocus();
     }
     loseFocus() {
         this.element.style.border.fg = 'grey';
+        this.element.style.selected = {
+            bg: 'black',
+            bold: false,
+        };
     }
     selectIndex(index) {
         while (this.displayedItems <= index &&
@@ -147,6 +157,13 @@ class ListComponent {
         this.listIndex = index;
         this.element.select(index);
     }
+    setFocusKey(key) {
+        this.focusKey = key;
+    }
+    setLabel(label) {
+        const componentLabel = label + chalk_1.default.grey(` (press ${chalk_1.default.inverse(this.focusKey)} to focus)`);
+        this.element.setLabel(componentLabel);
+    }
     setContent(content) {
         const oldContent = this.content;
         this.element.clearItems();
@@ -216,5 +233,5 @@ class ListComponent {
 }
 exports.default = ListComponent;
 ListComponent.ListContentLimit = 100;
-ListComponent.loadMore = 20;
+ListComponent.loadMore = 100;
 ListComponent.nextComponentId = 0;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@memlab/cli",
-  "version": "1.0.10",
+  "version": "1.0.12",
   "license": "MIT",
   "description": "command line interface for memlab",
   "author": "Liang Gong <lgong@fb.com>",
@@ -24,10 +24,10 @@
     "access": "public"
   },
   "dependencies": {
-    "@memlab/api": "^1.0.6",
-    "@memlab/core": "^1.1.6",
-    "@memlab/e2e": "^1.0.7",
-    "@memlab/heap-analysis": "^1.0.5",
+    "@memlab/api": "^1.0.11",
+    "@memlab/core": "^1.1.10",
+    "@memlab/e2e": "^1.0.11",
+    "@memlab/heap-analysis": "^1.0.7",
     "ansi": "^0.3.1",
     "babar": "^0.2.0",
     "blessed": "^0.1.81",