Hone logo
Hone
Problems

Vue Tree Node Operations

This challenge focuses on implementing fundamental operations for managing a hierarchical data structure (a tree) within a Vue.js application using TypeScript. You will build a reusable component that allows users to add, edit, and delete nodes within a tree. This is a common requirement for many applications, such as file explorers, organizational charts, and content management systems.

Problem Description

You are tasked with creating a Vue.js component that renders a tree structure and allows for common node manipulation operations. The component should:

  1. Render a Tree: Display a given tree of nodes, where each node can have children, forming a nested structure.
  2. Add Node: Allow users to add a new child node to an existing parent node.
  3. Edit Node: Enable users to modify the text/label of an existing node.
  4. Delete Node: Provide functionality to remove a node and its entire subtree.

The tree data will be represented as an array of node objects. Each node object should have at least an id, a label (the text displayed for the node), and an optional children array to represent its nested nodes.

Key Requirements:

  • Component Structure: Create a reusable Vue component (e.g., TreeNodeManager.vue) that accepts the tree data as a prop and emits events when the tree data is modified.
  • Reactivity: All changes to the tree (add, edit, delete) must be reactive, meaning the UI updates automatically.
  • User Interface: Implement a simple UI for each node that includes:
    • The node's label.
    • Buttons/icons for "Add Child," "Edit," and "Delete."
  • Data Management: The component should manage the tree data internally or work with a prop that is mutated (consider immutability best practices if applicable).
  • TypeScript: All component logic and type definitions should be in TypeScript.

Expected Behavior:

  • When "Add Child" is clicked on a node, a new, empty node (or one with a default label like "New Node") should be added as a child to that node. An input field should appear for the user to immediately enter the label for the new node.
  • When "Edit" is clicked, the node's label should become editable (e.g., an input field). The user should be able to commit the changes (e.g., by pressing Enter or blurring the input).
  • When "Delete" is clicked, the node and all its descendants should be removed from the tree. A confirmation prompt might be a good addition for this operation.
  • The component should handle nested levels of the tree, recursively rendering children.

Edge Cases to Consider:

  • Deleting a node that has children.
  • Adding a child to a node that initially has no children.
  • Editing a node and then cancelling the edit (optional, but good to consider).
  • Handling an empty initial tree.
  • Ensuring unique IDs for new nodes.

Examples

Example 1: Initial Rendering and Adding a Child

// Input Tree Data (initial prop)
const initialTree = [
  { id: '1', label: 'Root Node 1', children: [] },
  { id: '2', label: 'Root Node 2', children: [
    { id: '2-1', label: 'Child Node 2.1', children: [] }
  ]}
];

// User clicks "Add Child" on 'Root Node 1'
// Then enters "New Child of Root 1" in the input.

// Expected Output Tree Data (after adding and editing)
const updatedTree = [
  { id: '1', label: 'Root Node 1', children: [
    { id: 'new-id-1', label: 'New Child of Root 1', children: [] } // Assuming new-id-1 is generated
  ]},
  { id: '2', label: 'Root Node 2', children: [
    { id: '2-1', label: 'Child Node 2.1', children: [] }
  ]}
];

Explanation: A new node with the label "New Child of Root 1" was added as a child to "Root Node 1." A unique ID (e.g., new-id-1) would be generated for this new node.

Example 2: Editing a Node and Deleting a Subtree

// Input Tree Data
const initialTree = [
  { id: 'a', label: 'Parent A', children: [
    { id: 'a-1', label: 'Child A.1', children: [] },
    { id: 'a-2', label: 'Child A.2', children: [
      { id: 'a-2-1', label: 'Grandchild A.2.1', children: [] }
    ]}
  ]}
];

// Scenario 1: User clicks "Edit" on 'Child A.1' and changes label to "Updated Child A.1"
// Scenario 2: User clicks "Delete" on 'Child A.2'

// Expected Output Tree Data (after both operations)
const updatedTree = [
  { id: 'a', label: 'Parent A', children: [
    { id: 'a-1', label: 'Updated Child A.1', children: [] }
    // 'a-2' and its children are removed
  ]}
];

Explanation: "Child A.1" was renamed. "Child A.2" and its entire subtree ("Grandchild A.2.1") were removed because "Child A.2" was deleted.

Example 3: Handling an Empty Tree and Adding a Root Node (Optional)

While the primary task is managing existing nodes, consider how your component would behave if it needs to support adding the very first root node if the initial tree is empty.

// Input Tree Data (empty)
const initialTree: TreeNode[] = []; // Assume TreeNode is defined

// User clicks an "Add Root Node" button (if implemented)
// And enters "First Root"

// Expected Output Tree Data
const updatedTree = [
  { id: 'root-1', label: 'First Root', children: [] }
];

Constraints

  • The tree depth can be arbitrarily large.
  • Node IDs (id) will be strings and are guaranteed to be unique within their parent's children array.
  • Node labels (label) are strings and can be empty initially for new nodes.
  • The solution should aim for efficient rendering, especially for larger trees (though extreme optimization isn't the primary focus).
  • Vue 3 with the Composition API is preferred for this challenge.

Notes

  • You'll need to define a TypeScript interface for your TreeNode structure.
  • Consider how you will handle unique ID generation for new nodes. A simple counter or a UUID generation library could be used.
  • For deletion, you'll need a way to traverse the tree and remove the target node. A recursive function is often a good approach for tree manipulation.
  • Think about how to manage the editing state for each node (e.g., which node is currently being edited).
  • When modifying the tree, it's good practice to either immutably update the data or ensure proper reactivity if mutating directly. For this challenge, you can choose the approach that best suits your understanding. However, understanding immutability is valuable.
  • The component should emit custom events (e.g., update:treeData or specific events like nodeAdded, nodeEdited, nodeDeleted) to allow parent components to react to changes.
Loading editor...
typescript