diff --git a/app/frontend/ui_graph_cytoscape.py b/app/frontend/ui_graph_cytoscape.py index f987096..b78d214 100644 --- a/app/frontend/ui_graph_cytoscape.py +++ b/app/frontend/ui_graph_cytoscape.py @@ -11,7 +11,7 @@ def render_graph_explorer_cytoscape(graph_service): if "graph_center_id" not in st.session_state: st.session_state.graph_center_id = None - # Getrennter State für Inspektion vs. Navigation + # Getrennter State für Inspektion (Gelber Rahmen) vs. Navigation (Roter Rahmen) if "graph_inspected_id" not in st.session_state: st.session_state.graph_inspected_id = None @@ -55,7 +55,6 @@ def render_graph_explorer_cytoscape(graph_service): st.divider() st.caption("Legende") - # Hier zeigen wir die Farben an, die auch im Graphen genutzt werden for k, v in list(GRAPH_COLORS.items())[:8]: st.markdown(f"● {k}", unsafe_allow_html=True) @@ -63,7 +62,7 @@ def render_graph_explorer_cytoscape(graph_service): with col_graph: center_id = st.session_state.graph_center_id - # Falls noch nichts ausgewählt, initialisiere mit Inspektion oder None + # Initialisierung falls leer if not center_id and st.session_state.graph_inspected_id: center_id = st.session_state.graph_inspected_id st.session_state.graph_center_id = center_id @@ -77,16 +76,18 @@ def render_graph_explorer_cytoscape(graph_service): # --- DATEN LADEN --- with st.spinner(f"Lade Graph (Tiefe {st.session_state.cy_depth})..."): + # 1. Graph Daten nodes_data, edges_data = graph_service.get_ego_graph( center_id, depth=st.session_state.cy_depth ) - # Daten für den INSPIZIERTEN Knoten laden + # 2. Detail Daten (nur für die Inspektion) inspected_data = graph_service.get_note_with_full_content(inspected_id) - # --- ACTION BAR (OBEN) --- + # --- ACTION BAR --- action_container = st.container() with action_container: + # Info Zeile c1, c2, c3 = st.columns([2, 1, 1]) with c1: @@ -98,6 +99,7 @@ def render_graph_explorer_cytoscape(graph_service): if inspected_id != center_id: if st.button("🎯 Als Zentrum setzen", use_container_width=True, key="cy_nav_btn"): st.session_state.graph_center_id = inspected_id + # WICHTIG: Beim Navigieren (Zentrumswechsel) wird neu gerendert st.rerun() else: st.caption("_(Ist aktuelles Zentrum)_") @@ -111,8 +113,8 @@ def render_graph_explorer_cytoscape(graph_service): args=(inspected_data,), key="cy_edit_btn") - # --- INSPECTOR --- - with st.expander("🕵️ Data Inspector (Details)", expanded=True): + # --- INSPECTOR (Standard: Geschlossen) --- + with st.expander("🕵️ Data Inspector (Details)", expanded=False): if inspected_data: col_i1, col_i2 = st.columns(2) with col_i1: @@ -129,12 +131,14 @@ def render_graph_explorer_cytoscape(graph_service): else: st.warning("Keine Daten für Auswahl geladen.") - # --- GRAPH RENDERING --- + # --- GRAPH PREPARATION --- cy_elements = [] - # Nodes konvertieren + # Nodes for n in nodes_data: is_center = (n.id == center_id) + # Nur der aktuell inspizierte Knoten bekommt 'selected: True'. + # Alle anderen bekommen automatisch False. Das löst das "Abwahl"-Problem. is_inspected = (n.id == inspected_id) tooltip_text = n.title if n.title else n.label @@ -146,7 +150,6 @@ def render_graph_explorer_cytoscape(graph_service): "data": { "id": n.id, "label": display_label, - # WICHTIG: Hier übergeben wir die Farbe an Cytoscape "bg_color": n.color, "tooltip": tooltip_text }, @@ -155,7 +158,7 @@ def render_graph_explorer_cytoscape(graph_service): } cy_elements.append(cy_node) - # Edges konvertieren + # Edges for e in edges_data: target_id = getattr(e, "to", getattr(e, "target", None)) if target_id: @@ -169,14 +172,13 @@ def render_graph_explorer_cytoscape(graph_service): } cy_elements.append(cy_edge) - # Stylesheet definieren + # Stylesheet stylesheet = [ { "selector": "node", "style": { "label": "data(label)", "width": "30px", "height": "30px", - # HIER NUTZEN WIR DIE FARBE: "background-color": "data(bg_color)", "color": "#333", "font-size": "12px", "text-valign": "center", "text-halign": "center", @@ -185,23 +187,21 @@ def render_graph_explorer_cytoscape(graph_service): "title": "data(tooltip)" } }, - # Style für Selektion (Gelb) { "selector": "node:selected", "style": { "border-width": 6, - "border-color": "#FFC300", + "border-color": "#FFC300", # Gelb = Inspektion "width": "50px", "height": "50px", "font-weight": "bold", "z-index": 999 } }, - # Style für Zentrum (Rot) { "selector": ".center", "style": { "border-width": 4, - "border-color": "#FF5733", + "border-color": "#FF5733", # Rot = Zentrum "width": "40px", "height": "40px" } }, @@ -220,8 +220,11 @@ def render_graph_explorer_cytoscape(graph_service): } ] - # Render Graph - graph_key = f"cy_{center_id}_{st.session_state.cy_depth}_{st.session_state.cy_ideal_edge_len}" + # --- RENDERING (STABLE KEY) --- + # WICHTIG: Der Key darf NICHT 'inspected_id' enthalten! + # Nur wenn sich das ZENTRUM oder das LAYOUT ändert, darf die Komponente + # neu initialisiert werden. Bei reiner Selektion bleibt der Key gleich. + graph_key = f"cy_{center_id}_{st.session_state.cy_depth}_{st.session_state.cy_ideal_edge_len}_{st.session_state.cy_node_repulsion}" clicked_elements = cytoscape( elements=cy_elements, @@ -235,19 +238,22 @@ def render_graph_explorer_cytoscape(graph_service): "edgeElasticity": 100, "nestingFactor": 5, "gravity": 80, "numIter": 1000, "initialTemp": 200, "coolingFactor": 0.95, "minTemp": 1.0 }, - key=graph_key, + key=graph_key, height="700px" ) - # --- EVENT HANDLING (Nur Selektion ändern) --- + # --- SELECTION HANDLING --- if clicked_elements: clicked_nodes = clicked_elements.get("nodes", []) if clicked_nodes: clicked_id = clicked_nodes[0] - # Nur Inspektion ändern, NICHT das Zentrum neu laden + # Wenn auf einen neuen Knoten geklickt wurde: if clicked_id != st.session_state.graph_inspected_id: + # 1. State aktualisieren (Inspektion verschieben) st.session_state.graph_inspected_id = clicked_id + # 2. Rerun triggern, um UI (Inspector/Buttons) zu aktualisieren + # Da der graph_key sich NICHT ändert, bleibt der Graph stabil! st.rerun() else: