@memlab/cli 1.0.6 → 1.0.10

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

@@ -0,0 +1,28 @@
+/**
+ * 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 { CLIOptions } from '@memlab/core';
+import BaseCommand, { CommandCategory } from '../../../BaseCommand';
+import { BaseOption } from '@memlab/core';
+export default class InteractiveHeapCommand extends BaseCommand {
+    getCommandName(): string;
+    getDescription(): string;
+    getCategory(): CommandCategory;
+    getExamples(): string[];
+    getOptions(): BaseOption[];
+    private exitAttempt;
+    private printPromptInfo;
+    private quit;
+    private initPrompt;
+    private setupInterruptHandle;
+    private setupCommandHandle;
+    private startInteractiveCLI;
+    run(options: CLIOptions): Promise<void>;
+}
+//# sourceMappingURL=InteractiveHeapCommand.d.ts.map

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

@@ -0,0 +1,166 @@
+"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 core_1 = require("@memlab/core");
+const chalk_1 = __importDefault(require("chalk"));
+const readline_1 = __importDefault(require("readline"));
+const fs_extra_1 = __importDefault(require("fs-extra"));
+const minimist_1 = __importDefault(require("minimist"));
+const BaseCommand_1 = __importStar(require("../../../BaseCommand"));
+const core_2 = require("@memlab/core");
+const SnapshotFileOption_1 = __importDefault(require("../../../options/heap/SnapshotFileOption"));
+const JSEngineOption_1 = __importDefault(require("../../../options/heap/JSEngineOption"));
+const core_3 = require("@memlab/core");
+const heap_analysis_1 = require("@memlab/heap-analysis");
+const Dispatcher_1 = require("../../../Dispatcher");
+const InteractiveCommandLoader_1 = __importDefault(require("./InteractiveCommandLoader"));
+class InteractiveHeapCommand extends BaseCommand_1.default {
+    constructor() {
+        super(...arguments);
+        this.exitAttempt = 0;
+    }
+    getCommandName() {
+        return 'heap';
+    }
+    getDescription() {
+        return 'interactive command to explore 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()];
+    }
+    printPromptInfo() {
+        core_2.info.topLevel(`Heap Snapshot Loaded: ${chalk_1.default.grey(heap_analysis_1.heapConfig.currentHeapFile)}`);
+    }
+    quit(exitCode = 1) {
+        this.exitAttempt = 0;
+        core_2.info.topLevel('');
+        process.exit(exitCode);
+    }
+    initPrompt() {
+        return readline_1.default.createInterface({
+            input: process.stdin,
+            output: process.stdout,
+            prompt: chalk_1.default.gray('[') + chalk_1.default.green('memlab') + chalk_1.default.gray(']') + '$ ',
+        });
+    }
+    setupInterruptHandle(rl) {
+        // exit when user type Ctrl + C
+        rl.on('SIGINT', () => {
+            if (this.exitAttempt > 0) {
+                this.quit();
+            }
+            this.exitAttempt++;
+            setTimeout(() => {
+                this.exitAttempt--;
+            }, 5000);
+            core_2.info.topLevel('Type Ctrl + C again to exit');
+            rl.prompt();
+        });
+    }
+    setupCommandHandle(rl) {
+        // the interactive cli only supports a subset of memlab commands
+        const dispatcher = new Dispatcher_1.CommandDispatcher({
+            commandLoader: new InteractiveCommandLoader_1.default(),
+        });
+        // do not halt execution when running the interactive command
+        core_2.config.errorHandling = core_1.ErrorHandling.Throw;
+        // start interpreting interactive commands
+        rl.on('line', (line) => __awaiter(this, void 0, void 0, function* () {
+            let command = '';
+            try {
+                // "memlab <command>" -> "<command>"
+                command = line.trim().startsWith('memlab ')
+                    ? line.substring('memlab '.length).trim()
+                    : line.trim();
+                if (command === 'exit' || command === 'quit') {
+                    this.quit(0);
+                }
+                if (command.length > 0) {
+                    const args = command.match(/("[^"]+")|('[^']+')|(\S+)/g);
+                    const parsedArgs = (0, minimist_1.default)(args);
+                    yield dispatcher.dispatch(parsedArgs);
+                }
+            }
+            catch (ex) {
+                const error = core_2.utils.getError(ex);
+                core_2.info.topLevel(error.message);
+            }
+            if (command.length > 0) {
+                core_2.info.topLevel('');
+                this.printPromptInfo();
+            }
+            rl.prompt();
+        }));
+    }
+    startInteractiveCLI() {
+        // set up the interactive prompt
+        const rl = this.initPrompt();
+        this.setupInterruptHandle(rl);
+        this.setupCommandHandle(rl);
+        // start prompt
+        this.printPromptInfo();
+        rl.prompt();
+    }
+    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_3.fileManager.getReportOutDir({ workDir });
+            fs_extra_1.default.emptyDirSync(reportOutDir);
+            // load single heap snapshot
+            heap_analysis_1.heapConfig.isCliInteractiveMode = true;
+            yield (0, heap_analysis_1.loadHeapSnapshot)({ args: options.cliArgs });
+            this.startInteractiveCLI();
+        });
+    }
+}
+exports.default = InteractiveHeapCommand;

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

@@ -0,0 +1,26 @@
+/**
+ * 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 { CLIOptions } from '@memlab/core';
+import BaseCommand, { CommandCategory } from '../../../BaseCommand';
+import { BaseOption } from '@memlab/core';
+export default class InteractiveHeapViewCommand extends BaseCommand {
+    getCommandName(): string;
+    getDescription(): string;
+    getCategory(): CommandCategory;
+    getExamples(): string[];
+    getOptions(): BaseOption[];
+    private getHeap;
+    private getNodesToFocus;
+    private getDetachedNodes;
+    private getNodesWithLargestRetainedSize;
+    private getHeapNodes;
+    run(options: CLIOptions): Promise<void>;
+}
+//# sourceMappingURL=InteractiveHeapExploreCommand.d.ts.map

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;