@memlab/cli 1.0.8 → 1.0.10

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

@@ -0,0 +1,145 @@
+"use strict";
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @format
+ * @oncall ws_labs
+ */
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": 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 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"));
+class InteractiveHeapViewCommand extends BaseCommand_1.default {
+    getCommandName() {
+        return 'view-heap';
+    }
+    getDescription() {
+        return 'interactive command to view a single heap snapshot';
+    }
+    getCategory() {
+        return BaseCommand_1.CommandCategory.COMMON;
+    }
+    getExamples() {
+        return ['--snapshot <HEAP_SNAPSHOT_FILE>'];
+    }
+    getOptions() {
+        return [
+            new SnapshotFileOption_1.default(),
+            new JSEngineOption_1.default(),
+            new HeapNodeIdOption_1.default(),
+        ];
+    }
+    // get the heap snapshot to view
+    getHeap(options) {
+        return __awaiter(this, void 0, void 0, function* () {
+            // load single heap snapshot
+            heap_analysis_1.heapConfig.isCliInteractiveMode = true;
+            yield (0, heap_analysis_1.loadHeapSnapshot)({ args: options.cliArgs });
+            // get heap
+            const heap = heap_analysis_1.heapConfig.currentHeap;
+            if (!heap) {
+                throw core_1.utils.haltOrThrow('heap snapshot not found, please specify a heap snapshot ' +
+                    `via --${new SnapshotFileOption_1.default().getOptionName()}`);
+            }
+            return heap;
+        });
+    }
+    getNodesToFocus(heap) {
+        const nodes = this.getNodesWithLargestRetainedSize(heap);
+        nodes.push(...this.getDetachedNodes(heap));
+        return nodes;
+    }
+    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 ret;
+    }
+    getNodesWithLargestRetainedSize(heap) {
+        const sizeThreshold = 2 * 1024 * 1024; // 2MB
+        const ret = [];
+        heap.nodes.forEach(node => {
+            if (node.retainedSize >= sizeThreshold && !core_1.utils.isRootNode(node)) {
+                ret.push({
+                    tag: `${core_1.utils.getReadableBytes(node.retainedSize)}`,
+                    heapObject: node,
+                });
+            }
+        });
+        return ret;
+    }
+    // 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 }];
+            }
+        }
+        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;
+    }
+    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 });
+            fs_extra_1.default.emptyDirSync(reportOutDir);
+            const heap = yield this.getHeap(options);
+            const nodes = this.getHeapNodes(heap);
+            new CliScreen_1.default('memlab heap viewer', heap, nodes).start();
+        });
+    }
+}
+exports.default = InteractiveHeapViewCommand;

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

@@ -0,0 +1,38 @@
+import type { IHeapSnapshot } from '@memlab/core';
+import { ComponentDataItem } from './HeapViewUtils';
+export default class CliScreen {
+    private screen;
+    private objectBox;
+    private parentObjectBox;
+    private referrerBox;
+    private referenceBox;
+    private objectPropertyBox;
+    private retainerTraceBox;
+    private currentFocuseKey;
+    private keyToComponent;
+    private heapController;
+    constructor(title: string, heap: IHeapSnapshot, nodes: ComponentDataItem[]);
+    private initScreen;
+    private initCallbacks;
+    start(): void;
+    private registerEvents;
+    private registerScreenResize;
+    private updateComponentSize;
+    private registerKeys;
+    private addComponentToFocusKeyMap;
+    private getNextFocusKey;
+    private getLabel;
+    private initParentObjectBox;
+    private getParentObjectBoxSize;
+    private initReferrerBox;
+    private getReferrerBoxSize;
+    private initObjectBox;
+    private getObjectBoxSize;
+    private initObjectPropertyBox;
+    private getObjectPropertyBoxSize;
+    private initReferenceBox;
+    private getReferenceBoxSize;
+    private initRetainerTraceBox;
+    private getRetainerTraceBoxSize;
+}
+//# sourceMappingURL=CliScreen.d.ts.map

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

@@ -0,0 +1,234 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": 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"));
+function positionToNumber(info) {
+    return parseInt(`${info}`);
+}
+/*
+ * The CliScreen component managers the screen layout
+ * all the UI components in CLI.
+ *
+ * Screen Layout:
+ * ┌─Referrers of [*] ─┐┌─Objects ──────────┐┌─References ───────┐
+ * │                   ││                   ││                   │
+ * │                   ││                   ││                   │
+ * │                   ││                   ││                   │
+ * │                   ││                   ││                   │
+ * │                   ││                   │└───────────────────┘
+ * │                   ││                   │┌─Retainer Trace ───┐
+ * │                   ││                   ││                   │
+ * │                   ││                   ││                   │
+ * └───────────────────┘│                   ││                   │
+ * ┌─Referrers ────────┐│                   ││                   │
+ * │                   ││                   ││                   │
+ * │                   │└───────────────────┘│                   │
+ * │                   │┌─Object Detail ────┐│                   │
+ * │                   ││                   ││                   │
+ * │                   ││                   ││                   │
+ * │                   ││                   ││                   │
+ * │                   ││                   ││                   │
+ * │                   ││                   ││                   │
+ * └───────────────────┘└───────────────────┘└───────────────────┘
+ */
+class CliScreen {
+    constructor(title, heap, nodes) {
+        this.currentFocuseKey = 1;
+        this.heapController = new HeapViewController_1.default(heap, nodes);
+        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.referenceBox = this.initReferenceBox(callbacks);
+        this.heapController.setReferenceBox(this.referenceBox);
+        this.objectPropertyBox = this.initObjectPropertyBox(callbacks);
+        this.heapController.setObjectPropertyBox(this.objectPropertyBox);
+        this.retainerTraceBox = this.initRetainerTraceBox(callbacks);
+        this.heapController.setRetainerTraceBox(this.retainerTraceBox);
+        this.registerEvents();
+        this.heapController.setCurrentHeapObject((0, HeapViewUtils_1.getHeapObjectAt)(nodes, 0));
+    }
+    initScreen(title) {
+        return blessed_1.default.screen({
+            smartCSR: true,
+            title: title,
+        });
+    }
+    initCallbacks(controller, screen) {
+        const selectDebounce = (0, HeapViewUtils_1.debounce)(150);
+        const selectCallback = (componentId, index, content, selectInfo) => {
+            if (selectInfo.keyName === 'enter') {
+                selectDebounce(() => {
+                    controller.setCurrentHeapObjectFromComponent(componentId, index);
+                    screen.render();
+                });
+            }
+            else if (selectInfo.keyName === 'up' || selectInfo.keyName === 'down') {
+                selectDebounce(() => {
+                    controller.setSelectedHeapObjectFromComponent(componentId, index);
+                    screen.render();
+                });
+            }
+        };
+        return {
+            selectCallback,
+            render: () => screen.render(),
+        };
+    }
+    start() {
+        this.screen.render();
+    }
+    registerEvents() {
+        this.registerKeys();
+        this.registerScreenResize();
+    }
+    registerScreenResize() {
+        const screen = this.screen;
+        screen.on('resize', () => {
+            // all boxes/lists needs to resize
+            this.updateComponentSize(this.parentObjectBox, this.getParentObjectBoxSize());
+            this.updateComponentSize(this.referrerBox, this.getReferrerBoxSize());
+            this.updateComponentSize(this.objectBox, this.getObjectBoxSize());
+            this.updateComponentSize(this.objectPropertyBox, this.getObjectPropertyBoxSize());
+            this.updateComponentSize(this.referenceBox, this.getReferenceBoxSize());
+            this.updateComponentSize(this.retainerTraceBox, this.getRetainerTraceBoxSize());
+        });
+    }
+    updateComponentSize(component, size) {
+        component.element.width = size.width;
+        component.element.height = size.height;
+        component.element.top = size.top;
+        component.element.left = size.left;
+    }
+    registerKeys() {
+        const screen = this.screen;
+        // Quit on Escape, q, or Control-C.
+        screen.key(['escape', 'q', 'C-c'], () => process.exit(0));
+        const keyToComponent = this.keyToComponent;
+        const heapController = this.heapController;
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        const callback = (char, key) => {
+            if (keyToComponent.has(char)) {
+                // focus on the selected element
+                const component = keyToComponent.get(char);
+                if (component) {
+                    heapController.focusOnComponent(component.id);
+                    screen.render();
+                }
+            }
+        };
+        screen.on('keypress', callback);
+    }
+    addComponentToFocusKeyMap(component) {
+        const key = `${this.currentFocuseKey++}`;
+        this.keyToComponent.set(key, component);
+        return key;
+    }
+    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()) }));
+        this.screen.append(box.element);
+        this.addComponentToFocusKeyMap(box);
+        return box;
+    }
+    getParentObjectBoxSize() {
+        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,
+        };
+    }
+    initReferrerBox(callbacks) {
+        const box = new ListComponent_1.default([], callbacks, Object.assign(Object.assign({}, this.getReferrerBoxSize()), { label: this.getLabel('Referrers', this.getNextFocusKey()) }));
+        this.screen.append(box.element);
+        this.addComponentToFocusKeyMap(box);
+        return box;
+    }
+    getReferrerBoxSize() {
+        return {
+            width: Math.floor(positionToNumber(this.screen.width) / 3),
+            height: Math.floor(positionToNumber(this.screen.height) / 2),
+            top: 0,
+            left: 0,
+        };
+    }
+    initObjectBox(callbacks) {
+        const box = new ListComponent_1.default([], callbacks, Object.assign(Object.assign({}, this.getObjectBoxSize()), { label: this.getLabel('Objects', this.getNextFocusKey()) }));
+        this.screen.append(box.element);
+        this.addComponentToFocusKeyMap(box);
+        return box;
+    }
+    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),
+        };
+    }
+    initObjectPropertyBox(callbacks) {
+        const box = new ListComponent_1.default([], callbacks, Object.assign(Object.assign({}, this.getObjectPropertyBoxSize()), { label: this.getLabel('Object Detail', this.getNextFocusKey()) }));
+        this.screen.append(box.element);
+        this.addComponentToFocusKeyMap(box);
+        return box;
+    }
+    getObjectPropertyBoxSize() {
+        return {
+            width: Math.floor(positionToNumber(this.screen.width) / 3),
+            height: positionToNumber(this.screen.height) -
+                Math.floor((2 * positionToNumber(this.screen.height)) / 3),
+            top: Math.floor((2 * positionToNumber(this.screen.height)) / 3),
+            left: Math.floor(positionToNumber(this.screen.width) / 3),
+        };
+    }
+    initReferenceBox(callbacks) {
+        const box = new ListComponent_1.default([], callbacks, Object.assign(Object.assign({}, this.getReferenceBoxSize()), { label: this.getLabel('References', this.getNextFocusKey()) }));
+        this.screen.append(box.element);
+        this.addComponentToFocusKeyMap(box);
+        return box;
+    }
+    getReferenceBoxSize() {
+        return {
+            width: positionToNumber(this.screen.width) -
+                Math.floor((2 * positionToNumber(this.screen.width)) / 3),
+            height: Math.floor(positionToNumber(this.screen.height) / 3),
+            top: 0,
+            left: Math.floor((2 * positionToNumber(this.screen.width)) / 3),
+        };
+    }
+    initRetainerTraceBox(callbacks) {
+        const box = new ListComponent_1.default([], callbacks, Object.assign(Object.assign({}, this.getRetainerTraceBoxSize()), { label: this.getLabel('Retainer Trace', this.getNextFocusKey()) }));
+        this.screen.append(box.element);
+        this.addComponentToFocusKeyMap(box);
+        return box;
+    }
+    getRetainerTraceBoxSize() {
+        return {
+            width: positionToNumber(this.screen.width) -
+                Math.floor((2 * positionToNumber(this.screen.width)) / 3),
+            height: positionToNumber(this.screen.height) -
+                Math.floor(positionToNumber(this.screen.height) / 3),
+            top: Math.floor(positionToNumber(this.screen.height) / 3),
+            left: Math.floor((2 * positionToNumber(this.screen.width)) / 3),
+        };
+    }
+}
+exports.default = CliScreen;

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

@@ -0,0 +1,58 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @format
+ * @oncall ws_labs
+ */
+import type { IHeapSnapshot, IHeapNode } from '@memlab/core';
+import type ListComponent from './ListComponent';
+import { ComponentDataItem, ComponentData } from './HeapViewUtils';
+declare type SelectHeapObjectOption = {
+    noChangeInReferenceBox?: boolean;
+    noChangeInReferrerBox?: boolean;
+    noChangeInRetainerTraceBox?: boolean;
+    noChangeInObjectPropertyBox?: boolean;
+};
+/**
+ * HeapViewController managers all the data associated with each
+ * UI components in CLI and coordinates the events/interaction
+ * among all UI components.
+ */
+export default class HeapViewController {
+    private currentHeapObject;
+    private selectedHeapObject;
+    private currentHeapObjectsInfo;
+    private componentIdToDataMap;
+    private componentIdToComponentMap;
+    private heap;
+    private parentBox;
+    private referrerBox;
+    private objectBox;
+    private referenceBox;
+    private objectPropertyBox;
+    private retainerTracePropertyBox;
+    constructor(heap: IHeapSnapshot, nodes: ComponentDataItem[]);
+    getContent(componentId: number): string[];
+    setParentBox(component: ListComponent): void;
+    setReferrerBox(component: ListComponent): void;
+    getReferrerBoxData(node?: IHeapNode): ComponentData;
+    setObjectBox(component: ListComponent): void;
+    getObjectBoxData(): ComponentData;
+    setReferenceBox(component: ListComponent): void;
+    getReferenceBoxData(): ComponentData;
+    setObjectPropertyBox(component: ListComponent): void;
+    getObjectPropertyData(): ComponentData;
+    private getKeyValuePairString;
+    setRetainerTraceBox(component: ListComponent): void;
+    getRetainerTraceData(): ComponentData;
+    setCurrentHeapObjectFromComponent(componentId: number, itemIndex: number): void;
+    setCurrentHeapObject(node: IHeapNode): void;
+    focusOnComponent(componentId: number): void;
+    setSelectedHeapObjectFromComponent(componentId: number, itemIndex: number): void;
+    setSelectedHeapObject(node: IHeapNode, options?: SelectHeapObjectOption): void;
+}
+export {};
+//# sourceMappingURL=HeapViewController.d.ts.map