From 9e25e5b26b27afbf8ba1990c999572b77050366b Mon Sep 17 00:00:00 2001
From: Lars <Lars@stommer.de>
Date: Sun, 14 Dec 2025 16:40:13 +0100
Subject: [PATCH] merken der Einstellungen

---
 app/frontend/ui_graph_cytoscape.py | 51 +++++++++++++++++++-----------
 1 file changed, 32 insertions(+), 19 deletions(-)

diff --git a/app/frontend/ui_graph_cytoscape.py b/app/frontend/ui_graph_cytoscape.py
index 8d20eab..c6d35be 100644
--- a/app/frontend/ui_graph_cytoscape.py
+++ b/app/frontend/ui_graph_cytoscape.py
@@ -10,11 +10,11 @@ def render_graph_explorer_cytoscape(graph_service):
     # ---------------------------------------------------------
     # 1. STATE MANAGEMENT
     # ---------------------------------------------------------
-    # Das aktive Zentrum des Graphen (bestimmt welche Knoten geladen werden)
+    # Graph Zentrum (Roter Rahmen, bestimmt die geladenen Daten)
     if "graph_center_id" not in st.session_state: 
         st.session_state.graph_center_id = None
         
-    # Der aktuell inspizierte Knoten (bestimmt Inspector & Editor Inhalt)
+    # Inspizierter Knoten (Gelber Rahmen, bestimmt Inspector & Editor)
     # Getrennt vom Zentrum, damit man klicken kann ohne neu zu laden.
     if "graph_inspected_id" not in st.session_state:
         st.session_state.graph_inspected_id = None
@@ -129,7 +129,7 @@ def render_graph_explorer_cytoscape(graph_service):
                                   args=(inspected_data,), 
                                   key="cy_edit_btn")
 
-                # --- DATA INSPECTOR ---
+                # --- DATA INSPECTOR (Raw Data restored!) ---
                 with st.expander("🕵️ Data Inspector (Details)", expanded=False):
                     if inspected_data:
                         # Spalte 1: IDs und Typen
@@ -173,6 +173,8 @@ def render_graph_explorer_cytoscape(graph_service):
                 classes = []
                 if n.id == center_id: 
                     classes.append("center")
+                
+                # Wir markieren den inspizierten Knoten visuell
                 if n.id == inspected_id: 
                     classes.append("inspected")
                 
@@ -190,8 +192,8 @@ def render_graph_explorer_cytoscape(graph_service):
                         "tooltip": tooltip_text 
                     },
                     "classes": " ".join(classes),
-                    # Wir nutzen KEINE interne Selektion (:selected), 
-                    # sondern steuern das Aussehen über die Klasse .inspected
+                    # WICHTIG: Wir deaktivieren die interne Selektion (:selected) komplett
+                    # und nutzen nur unsere CSS Klassen (.inspected), um Mehrfachauswahl zu verhindern.
                     "selected": False 
                 }
                 cy_elements.append(cy_node)
@@ -217,22 +219,28 @@ def render_graph_explorer_cytoscape(graph_service):
                     "selector": "node",
                     "style": {
                         "label": "data(label)",
-                        "width": "30px", "height": "30px",
+                        "width": "30px", 
+                        "height": "30px",
                         "background-color": "data(bg_color)", 
-                        "color": "#333", "font-size": "12px",
-                        "text-valign": "center", "text-halign": "center",
-                        "text-wrap": "wrap", "text-max-width": "90px",
-                        "border-width": 2, "border-color": "#fff",
+                        "color": "#333", 
+                        "font-size": "12px",
+                        "text-valign": "center", 
+                        "text-halign": "center",
+                        "text-wrap": "wrap", 
+                        "text-max-width": "90px",
+                        "border-width": 2, 
+                        "border-color": "#fff",
                         "title": "data(tooltip)" # Hover Text
                     }
                 },
-                # INSPECTED (Gelber Rahmen)
+                # INSPECTED (Gelber Rahmen) - Ersetzt :selected
                 {
                     "selector": ".inspected",
                     "style": {
                         "border-width": 6,
-                        "border-color": "#FFC300", 
-                        "width": "50px", "height": "50px",
+                        "border-color": "#FFC300", # Gelb/Gold
+                        "width": "50px", 
+                        "height": "50px",
                         "font-weight": "bold",
                         "z-index": 999
                     }
@@ -242,8 +250,9 @@ def render_graph_explorer_cytoscape(graph_service):
                     "selector": ".center",
                     "style": {
                         "border-width": 4,
-                        "border-color": "#FF5733", 
-                        "width": "40px", "height": "40px"
+                        "border-color": "#FF5733", # Rot
+                        "width": "40px", 
+                        "height": "40px"
                     }
                 },
                 # CENTER + INSPECTED (Kombination)
@@ -251,16 +260,18 @@ def render_graph_explorer_cytoscape(graph_service):
                     "selector": ".center.inspected",
                     "style": {
                         "border-width": 6,
-                        "border-color": "#FF5733", # Zentrum Farbe dominiert
-                        "width": "55px", "height": "55px"
+                        "border-color": "#FF5733", # Rot gewinnt (oder Mix)
+                        "width": "55px", 
+                        "height": "55px"
                     }
                 },
-                # SELECT STATE OVERRIDE (Verstecken des Standard-Rahmens)
+                # NATIVE SELEKTION (Unterdrücken)
+                # Das verhindert das "blaue Leuchten" oder Rahmen von Cytoscape selbst
                 {
                     "selector": "node:selected",
                     "style": {
+                        "overlay-opacity": 0,
                         "border-width": 0,
-                        "overlay-opacity": 0
                     }
                 },
                 # EDGE STYLE
@@ -282,6 +293,7 @@ def render_graph_explorer_cytoscape(graph_service):
             # ---------------------------------------------------------
             # 5. RENDERING
             # ---------------------------------------------------------
+            # KEY STRATEGIE: 
             # Der Key bestimmt, wann der Graph komplett neu gebaut wird.
             # Wir nutzen hier center_id und settings. 
             # NICHT inspected_id -> Das verhindert das Springen beim Klicken!
@@ -320,6 +332,7 @@ def render_graph_explorer_cytoscape(graph_service):
                 clicked_nodes = clicked_elements.get("nodes", [])
                 
                 if clicked_nodes:
+                    # Wir nehmen die erste Node aus dem Event
                     clicked_id = clicked_nodes[0]
                     
                     # Wenn auf einen neuen Knoten geklickt wurde: