Интерфейс динамической структуры типа Network Graph, Tangled Tree Graph

Цель:

Создать визуальный интерактивный дизайн управления нодами в графе (контекст – сайт/приложение). Взаимодействие пользователя с графом должно быть максимально естественным и интуитивным.

Пользователь должен иметь возможность:

1. Добавлять, удалять и редактировать ноды.

2. Управлять связями между нодами.

3. Видеть четкую иерархию и взаимосвязи между нодами.

Задачи:

1. Создать визуальный макет графа с узлами и связями.

   1. Ноды должны быть представлены в виде кругов.

   2. Связи между нодами отображаются стрелками, показывающими направление зависимости.

2. Решить вопрос менеджмента нод с точки зрения UI/UX.

3. Решить вопрос менеджмента связей с точки зрения UI/UX.

4. Продумать масштабирование и панорамирование графа.

5. Продумать undo/redo функционал.

6. Подкрепить UX визуальными эффекты при любых взаимодействиях (эффекты состояния, анимации).

Дополнительные задачи:

1. Отображение содержимого ноды.

   1. Имя ноды.

   2. Иконка или индикатор состояния ноды (выполнено/не выполнено).

   3. Описание ноды (Пользователь может добавлять опционально).

   4. Индикатор прогресса (круговой индикатор).

2. Логика выполнения нод.

   1. Дочернии ноды не могу быть завершены, пока не будут выполнены родительские (т.е. они заблокированные).

   2. Заблокированные ноды выделять другим цветом или текстурой.

   3. Пользователь может отменить статус "выполнено" у ноды (сменить на статус “не выполнено”).

Сценарии:

1. Добавление 1-ой ноды.

2. Добавление n-ой ноды.

3. Редактирование ноды.

4. Редактирование описание ноды.

5. Удаление ноды.

6. Завершение ноды.

7. Возобновление ноды. 

8. Добавление связи.

9. Изменение связи.

10. Удаление связи.

11. Валидация циклической зависимости связей (нельзя допускать зависимость такого вида: A → B, B → C, C → A).

Результаты:

1. Полный дизайн графа (десктоп версия) со всеми анимациями и состояниями в Figma (Figma file).

P.S. Некоторые вещи требуют обсуждения и не являются окончательным требованием. В целом, задача состоит, чтобы подготовить визуальный концепт, на основе которого будет формироваться приложение.

Референсы и вдохновение:

https://draw.io/

https://excalidraw.com/