Dokumentacja struktury interfejsu użytkownika (UI)

Rozdział ten opisuje wykorzystane technologie i wzorce architektoniczne, oraz statyczną strukturę plików HTML oraz definicje stylów CSS, które stanowią szkielet aplikacji. Logika interaktywna dla tych widoków znajduje się w dedykowanych skryptach JavaScript.

Wykorzystane technologie i wzorce architektoniczne

Projekt został zrealizowany w oparciu o nowoczesny stos technologiczny, ściśle realizując założenia postawione w wymaganiach:

  • Grafowa Baza Danych: Zastosowano Neo4j jako natywną grafową bazę danych. Jej wybór podyktowany jest specyfiką modelowanej domeny, gdzie izotopy (węzły) i drogi rozpadu promieniotwórczego (relacje skierowane) tworzą naturalną strukturę grafową.

  • Technologia Serwisu (Backend): Logikę serwera opracowano w języku Python, wykorzystując asynchroniczny framework FastAPI.

  • Styl Architektoniczny (REST): System komunikacji oparto o styl REST (Representational State Transfer). Backend pełni wyłącznie rolę bezstanowego API, wystawiającego odpowiednie endpointy (np. /api/isotope/{nazwa}), które zwracają ustrukturyzowane dane w formacie JSON.

  • Model Aplikacji (SPA): Interfejs użytkownika zrealizowano w architekturze zbliżonej do SPA (Single Page Application). Frontend (HTML, CSS, JS) jest całkowicie odseparowany od logiki biznesowej i komunikuje się z serwerem wyłącznie asynchronicznie (metoda fetch). Dzięki temu renderowanie i aktualizacja skomplikowanych widoków (np. grafów Cytoscape czy wykresów D3.js) odbywa się po stronie klienta, co wyklucza konieczność stosowania klasycznego, serwerowego wzorca MVC (typu MPA).

  • Wdrożenie i Izolacja: Całość została skonteneryzowana przy użyciu środowiska Docker (i orkiestracji Docker Compose), co zapewnia pełną izolację zależności i ujednolicone środowisko uruchomieniowe.

1. index.html - Główny widok (Diagram Segrè)

Plik definiuje strukturę strony startowej, zawierającej interaktywną mapę izotopów.

  • #controls-panel: Kontener nawigacyjny umieszczony w lewym górnym rogu.

    • .slider-container: Suwak (input range) do wyboru poziomu stanu izomerycznego (0-2).

    • .legend-container: Legenda kolorów reprezentująca rzędy wielkości czasu półtrwania izotopów.

  • #chart-container: Główny obszar roboczy zajmujący większość ekranu.

    • #segre-chart: Element SVG, w którym D3.js renderuje siatkę izotopów.

  • #details-panel: Wysuwany z prawej strony panel boczny. Wyświetla podstawowe parametry (Z, N, czas półtrwania) klikniętego izotopu i zawiera przycisk przejścia do widoku szczegółowego.

  • #tooltip: Pływający element DOM, ukryty domyślnie, służący do wyświetlania etykiet po najechaniu kursorem na element siatki.

  • Zależności zewn.: D3.js (v7).

2. details.html - Widok szczegółów izotopu (Dashboard)

Plik definiuje strukturę panelu analitycznego dla pojedynczego izotopu. Opiera się na układzie kafelkowym (kart).

  • .dashboard-header: Nagłówek z przyciskiem powrotu do strony głównej oraz dynamicznym tytułem zawierającym nazwę izotopu.

  • .dashboard-grid: Główny kontener wykorzystujący CSS Grid do rozmieszczenia kart informacyjnych.

    • Karta 1 (Właściwości fizyczne): Lista <ul> wyświetlająca podstawowe dane pobrane z API.

    • Karta 2 (Prawdopodobieństwo): Kontener #decay-chart dla wykresu kołowego dróg rozpadu.

    • Karta 3 (Topologia): Kontener #cy-container przeznaczony do renderowania grafu węzłów przez Cytoscape.js.

    • Karta 4 (Filtry): Zestaw pól wyboru (checkbox) do włączania i wyłączania widoczności określonych typów rozpadu (α, β⁻, β⁺/ε) na grafie topologii.

    • Karta 5 (Widmo Emisyjne): Element SVG rozciągnięty na dwie kolumny siatki, przeznaczony na wykres prążkowy promieniowania.

    • Karta 6 (Ewolucja): Element SVG rozciągnięty na dwie kolumny siatki, przeznaczony na wykres liniowy równań Batemana.

  • Zależności zewn.: Cytoscape.js (v3.28.1), D3.js (v7).

3. style.css - Arkusz stylów

Wspólny plik stylów dla obu widoków HTML. Wykorzystuje Flexbox i CSS Grid do pozycjonowania.

  • Style globalne: Usunięcie domyślnych marginesów, ustawienie czcionki «Segoe UI» oraz zablokowanie pasków przewijania (overflow: hidden) dla głównego widoku.

  • Diagram Segrè:

    • Klasa .isotope: Definiuje obramowanie kwadratów na siatce i efekty najechania kursorem (zmiana grubości obramowania).

    • #details-panel: Kontroluje wysuwanie panelu bocznego za pomocą transformacji CSS (transform: translateX(100%)).

    • .color-bar: Generuje gradient tła dla legendy czasu półtrwania.

  • Dashboard szczegółów:

    • Klasa .dashboard-grid: Definiuje dwukolumnowy układ siatki (grid-template-columns: repeat(2, 1fr)).

    • Klasa .card: Standaryzuje wygląd kafelków (białe tło, zaokrąglenia, cienie, minimalna wysokość 250px).

  • Elementy pomocnicze: Ustawienia przycisków (.primary-btn, .back-btn) oraz zachowanie tooltipa (wyłączenie interakcji wskaźnika przez pointer-events: none).