React Mind Map Component

This challenge asks you to build a dynamic and interactive mind map component using React and TypeScript. A mind map is a visual tool that helps organize information, ideas, and concepts in a hierarchical structure. Creating such a component is a common requirement for productivity tools, educational platforms, and brainstorming applications.

Problem Description

Your task is to create a React component that renders a mind map. The mind map should display a central node and allow for the creation of child nodes branching out from existing nodes. The component should be flexible enough to handle different data structures representing the mind map and provide basic interactivity.

Key Requirements:

1. Data Structure: The mind map data should be represented by a hierarchical structure (e.g., a nested object or array of objects). Each node should have at least an id, text (the content of the node), and optionally a children array for its sub-nodes.
2. Rendering:
   • Render a central "root" node.
   • Recursively render child nodes for each parent node.
   • Each node should display its text.
   • Visualize the connections between parent and child nodes (e.g., using lines or simple adjacency).
3. Interactivity:
   • Allow users to add a new child node to an existing node. A simple button or click action on a node could trigger this.
   • Upon adding a new child, prompt the user for the text content of the new node.
   • Basic styling to make the mind map visually appealing.

Expected Behavior:

• Upon initial render, the mind map displays the provided data starting from the root.
• Clicking an "add" action on a node creates a new, empty child node associated with it.
• The user is prompted to enter text for the newly created node.
• The mind map updates to reflect the new node.

Edge Cases to Consider:

• Empty mind map data.
• Nodes with no children.
• Deeply nested mind maps.

Examples

Example 1:

Input Data:
{
  id: '1',
  text: 'Root Topic',
  children: [
    {
      id: '1.1',
      text: 'Sub-topic A',
      children: []
    },
    {
      id: '1.2',
      text: 'Sub-topic B',
      children: [
        {
          id: '1.2.1',
          text: 'Detail 1',
          children: []
        }
      ]
    }
  ]
}

Output: A visual representation of the mind map with "Root Topic" at the center, "Sub-topic A" and "Sub-topic B" branching out, and "Detail 1" branching from "Sub-topic B".

Explanation: The component takes the hierarchical data and renders each node with its text, connecting them visually.

Example 2:

Input Data:

{
  "id": "root",
  "text": "My Project",
  "children": []
}

Action: User clicks an "add child" button associated with the "My Project" node. A prompt appears asking for node text. User enters "Task 1".

Output: The mind map now shows "My Project" with a child node labeled "Task 1".

Explanation: Demonstrates the functionality of adding a new child node to a node that initially had no children.

Constraints

• The mind map data will be provided as a prop to the main MindMap component.
• Node IDs will be unique strings.
• The component should aim for a responsive layout, adapting to different screen sizes where possible.
• For simplicity, assume basic HTML/CSS is sufficient for node and connection rendering; complex SVG path drawing is not required for the initial implementation.

Notes

• Consider using a recursive component pattern to render the nested structure of the mind map.
• State management will be crucial for handling the addition of new nodes. You'll need to update the data structure when a new node is added.
• Think about how you will visually represent the connections between nodes. Simple lines or parent-child alignment can be effective.
• For adding nodes, a common pattern is to have a small "+" icon or a button within or near each node.
• The prompt() function can be used for simplicity to get user input for new node text, but consider more advanced UI elements for a polished application.