Problem Description

1. Adding a dropdown textbox
   https://public-photos-123.s3.amazonaws.com/dropdown_text.png
   You should implement a new custom nodeType (https://reactflow.dev/docs/guides/custom-nodes/) that contains the drop down feature. The relevant place in the repo is here: https://github.com/JohnPeng47/KongUI/blob/cc10416d12737b3ca76f429ad2b6cf97296861ce/src/components/node/DataNode.tsx#L13

What the dropdown box should do is just display the static text within node.data.description. Currently, all of the node data is read from a JSON file included in the repo and then converted into ReactFlow nodes. The code for ingesting the JSON is here:
https://github.com/JohnPeng47/KongUI/blob/cc10416d12737b3ca76f429ad2b6cf97296861ce/src/data/processJson.ts#L23

2. Adding on hover connection
   https://public-photos-123.s3.amazonaws.com/branching_nodes.png
   Okay so what you should do here is:

• add an on hover effect over a node, that displays all of the hidden children
• by clicking on a hidden children, an edge is created between this node and the children
• the edge should be a custom edge according to the picture in the figma
• update the node,edges in the main reactFlow state accordingly
• actually, if its easier, we can forget about the on hover effect, we can make the trigger (to display the unconnected nodes) instead on clicking a button on the node

3. Adding a new node after clicking the hover connection

• no photo, but basically, after clicking on photo from 2., a new node connection should be formed akin to source node from 1.

Acceptance Criteria

All three objectives above are met

Technical Details

We are using Typescript/React. The nodes of the mindmap itself is implemented with the ReactFlow library
Make modifications on the following repository:
https://github.com/JohnPeng47/KongUI

Timelines / Milestones

Timeline is one week from today