Frontend (Team of 2) - CRUD functionalities Implemented with Tree (Urgent)

[ChTiSh]

Objective: Be able to offer CRUD functionalities of the Tree on Page - Find out if the hooks/functionalities might potential block each other or cause other functionalities to be not usable Exploration/Learning needed if not already familiar with React-Flow - 8 hours Reference: https://reactflow.dev/learn/getting-started/building-a-flow https://reactflow.dev/learn/tutorials/mind-map-app-with-react-flow

Ticket Scope:

1. Add a node functionality enable on any node of the tree - 3 hours
2. Delete a node functionality enable on any node of the tree - 3 hours
3. Edit node functionality enable on any node of the tree - 3 hours
4. List out the limitations for each function and combined

Acceptance Criteria:

AC1: Add Node Given a user has selected a node within the tree, they should be able to add the new node, The new node should appear as a child of the selected node in the tree.

AC2: Delete Node Given a user selects a node within the tree, When they press [BACKSPACE] on keyboard or a Delete button to delete the node(pick one way to implement) Then the node should be removed from the tree

AC3: Edit Node Given a user selects a node within the tree, When they choose the option to edit or double click the node, Then they should be able to modify the node's details

AC4: JSON Schema for Nodes and Edges: Define the structure of nodes and edges in JSON format.

Note: Use localstorage/whatever is easier to manage state if other Zustand takes longer

When you implement a custom node it is wrapped in a component that enables basic functionality like selection and dragging. Your custom node receives the following props: export type NodeProps<T = any> = { id: string; data: T; dragHandle?: boolean; type?: string; selected?: boolean; isConnectable?: boolean; zIndex?: number; xPos: number; yPos: number; dragging: boolean; targetPosition?: Position; sourcePosition?: Position; };

[ChTiSh]

Direct Tree manipulation vs Control Panel?