How do I practice coding and algorithm questions?

Use PracHub's coding console to write, test, and debug your solutions in Python or JavaScript. View hints, test against sample inputs, and compare with official solutions.

What difficulty level is this coding question?

This is a medium difficulty Coding & Algorithms question, commonly asked during Technical Screen rounds at Warp.

What role is this question designed for?

This question is commonly asked for Software Engineer candidates at Warp during technical interviews.

Implement Terminal Tabs and Split Panels

Company: Warp

Role: Software Engineer

Category: Coding & Algorithms

Difficulty: medium

Interview Round: Technical Screen

Implement a data structure that models a terminal application with multiple tabs and split panels. Requirements: - A `Terminal` can create and store multiple tabs. - Each `Tab` contains a panel layout. - A `Panel` can be split into child panels, similar to how terminal panes can be split horizontally or vertically. - Model the panel layout as a tree, where each split creates child panel nodes. - Implement methods to: - Create a new tab. - Split an existing panel inside a tab. - Serialize the full terminal state, including all tabs and nested panel layouts. - Deserialize the serialized state back into an equivalent `Terminal` object. - The serialization format should preserve all nesting levels and split information exactly. - Write at least one test case that creates tabs, performs nested panel splits, serializes the terminal, deserializes it, and verifies that the reconstructed structure matches the original.

Quick Answer: This question evaluates the ability to design and implement hierarchical data structures, model tree-based panel layouts, and perform precise serialization/deserialization of nested UI state.

Implement a terminal layout manager. A terminal stores tabs in creation order, and each new tab starts with exactly one leaf panel. Panels form a binary tree: a leaf panel is an unsplit pane, and splitting a leaf turns that same node into a split node with direction 'H' or 'V' and exactly two new leaf children. The original panel keeps its panel_id, while the two new children receive fresh globally unique panel IDs. You are given a list of operations to build the terminal. After applying all operations, serialize the full terminal state, deserialize it back into an equivalent terminal object, and return the reconstructed serialized state together with whether the round-trip preserved the structure exactly. Two terminal states are considered equivalent if their serialized representations are identical.

Constraints

0 <= len(operations) <= 10000
Each operation is either ('new_tab',) or ('split', tab_id, panel_id, direction)
Every split operation targets an existing leaf panel in the specified tab, and direction is either 'H' or 'V'
Panel IDs are assigned globally starting from 1

Examples

Input: [('new_tab',), ('split', 0, 1, 'H'), ('split', 0, 2, 'V'), ('new_tab',), ('split', 1, 6, 'V')]

Expected Output: {'serialized': [{'tab_id': 0, 'layout': {'type': 'split', 'panel_id': 1, 'direction': 'H', 'children': [{'type': 'split', 'panel_id': 2, 'direction': 'V', 'children': [{'type': 'leaf', 'panel_id': 4}, {'type': 'leaf', 'panel_id': 5}]}, {'type': 'leaf', 'panel_id': 3}]}}, {'tab_id': 1, 'layout': {'type': 'split', 'panel_id': 6, 'direction': 'V', 'children': [{'type': 'leaf', 'panel_id': 7}, {'type': 'leaf', 'panel_id': 8}]}}], 'round_trip_equal': True}

Explanation: Tab 0 starts with panel 1, which is split horizontally into panels 2 and 3. Panel 2 is then split vertically into panels 4 and 5. A second tab starts with panel 6, which is split vertically into panels 7 and 8. After serialization and deserialization, the structure must remain identical.

Input: [('new_tab',)]

Expected Output: {'serialized': [{'tab_id': 0, 'layout': {'type': 'leaf', 'panel_id': 1}}], 'round_trip_equal': True}

Explanation: This edge case creates a terminal with a single tab and no splits, so the layout is just one leaf panel.

Input: []

Expected Output: {'serialized': [], 'round_trip_equal': True}

Explanation: This edge case has no operations at all, so the terminal remains empty and the round-trip still succeeds.

Input: [('new_tab',), ('split', 0, 1, 'V'), ('split', 0, 3, 'H'), ('split', 0, 4, 'V')]

Expected Output: {'serialized': [{'tab_id': 0, 'layout': {'type': 'split', 'panel_id': 1, 'direction': 'V', 'children': [{'type': 'leaf', 'panel_id': 2}, {'type': 'split', 'panel_id': 3, 'direction': 'H', 'children': [{'type': 'split', 'panel_id': 4, 'direction': 'V', 'children': [{'type': 'leaf', 'panel_id': 6}, {'type': 'leaf', 'panel_id': 7}]}, {'type': 'leaf', 'panel_id': 5}]}]}}], 'round_trip_equal': True}

Explanation: This test checks deeper nesting in a single tab. Panel 1 splits into 2 and 3, then panel 3 splits into 4 and 5, and finally panel 4 splits into 6 and 7.

Hints

A panel layout is naturally a tree: leaves are unsplit panels, and internal nodes are split panels with two children.
Keep a map from panel_id to the panel node so splitting a panel does not require traversing the whole tree every time.

Quick Overview

This question evaluates the ability to design and implement hierarchical data structures, model tree-based panel layouts, and perform precise serialization/deserialization of nested UI state.