Dynamic structure interface of type Network Graph, Tangled Tree Graph

Goal:

Create a visual interactive design for node management in a graph (context – website/application). User interaction with the graph should be as natural and intuitive as possible.

The user should be able to:

1. Add, delete, and edit nodes.

2. Manage relationships between nodes.

3. See a clear hierarchy and relationships between nodes.

Tasks:

1. Create a visual layout of the graph with nodes and relationships.

   1. Nodes should be represented as circles.

   2. Relationships between nodes are displayed with arrows indicating the direction of dependency.

2. Address node management from a UI/UX perspective.

3. Address relationship management from a UI/UX perspective.

4. Consider scaling and panning of the graph.

5. Consider undo/redo functionality.

6. Enhance UX with visual effects during any interactions (state effects, animations).

Additional tasks:

1. Display node content.

   1. Node name.

   2. Icon or status indicator of the node (completed/not completed).

   3. Node description (User can add optionally).

   4. Progress indicator (circular indicator).

2. Logic for node execution.

   1. Child nodes cannot be completed until parent nodes are completed (i.e., they are blocked).

   2. Blocked nodes should be highlighted in a different color or texture.

   3. User can undo the "completed" status of a node (change to "not completed" status).

Scenarios:

1. Adding 1 node.

2. Adding n nodes.

3. Editing a node.

4. Editing the description of a node.

5. Deleting a node.

6. Completing a node.

7. Resuming a node. 

8. Adding a relationship.

9. Changing a relationship.

10. Deleting a relationship.

11. Validating cyclic dependencies of relationships (dependencies such as: A → B, B → C, C → A should not be allowed).

Results:

1. Complete design of the graph (desktop version) with all animations and states in Figma (Figma file).

P.S. Some things require discussion and are not final requirements. Overall, the task is to prepare a visual concept on which the application will be based.

References and inspiration:

https://draw.io/

https://excalidraw.com/