Interfejs dynamicznej struktury typu Network Graph, Tangled Tree Graph

Cel:

Stworzenie wizualnego interaktywnego projektu zarządzania węzłami w grafie (kontekst – strona/aplikacja). Interakcja użytkownika z grafem powinna być maksymalnie naturalna i intuicyjna.

Użytkownik powinien mieć możliwość:

1. Dodawania, usuwania i edytowania węzłów.

2. Zarządzania relacjami między węzłami.

3. Widzenia wyraźnej hierarchii i powiązań między węzłami.

Zadania:

1. Stworzenie wizualnego makietu grafu z węzłami i relacjami.

   1. Węzły powinny być przedstawione w postaci okręgów.

   2. Relacje między węzłami są wyświetlane strzałkami, które pokazują kierunek zależności.

2. Rozwiązanie kwestii zarządzania węzłami z perspektywy UI/UX.

3. Rozwiązanie kwestii zarządzania relacjami z perspektywy UI/UX.

4. Przemyślenie skalowania i panoramowania grafu.

5. Przemyślenie funkcjonalności undo/redo.

6. Wzmocnienie UX wizualnymi efektami przy wszelkich interakcjach (efekty stanu, animacje).

Dodatkowe zadania:

1. Wyświetlanie zawartości węzła.

   1. Nazwa węzła.

   2. Ikona lub wskaźnik stanu węzła (zrealizowane/niezrealizowane).

   3. Opis węzła (Użytkownik może dodać opcjonalnie).

   4. Wskaźnik postępu (okrągły wskaźnik).

2. Logika realizacji węzłów.

   1. Węzły podrzędne nie mogą być zakończone, dopóki nie zostaną zrealizowane węzły nadrzędne (tzn. są zablokowane).

   2. Zablokowane węzły wyróżniać innym kolorem lub teksturą.

   3. Użytkownik może cofnąć status "zrealizowane" węzła (zmienić na status “niezrealizowane”).

Scenariusze:

1. Dodanie 1-wszego węzła.

2. Dodanie n-tego węzła.

3. Edycja węzła.

4. Edycja opisu węzła.

5. Usunięcie węzła.

6. Zakończenie węzła.

7. Wznawianie węzła. 

8. Dodanie relacji.

9. Zmiana relacji.

10. Usunięcie relacji.

11. Walidacja cyklicznej zależności relacji (nie można dopuścić do zależności tego typu: A → B, B → C, C → A).

Wyniki:

1. Pełny projekt grafu (wersja desktopowa) ze wszystkimi animacjami i stanami w Figma (plik Figma).

P.S. Niektóre rzeczy wymagają dyskusji i nie są ostatecznym wymaganiem. Ogólnie rzecz biorąc, zadanie polega na przygotowaniu wizualnego konceptu, na podstawie którego będzie formowane aplikacja.

Referencje i inspiracje:

https://draw.io/

https://excalidraw.com/