diff --git a/app/frontend/ui_graph_cytoscape.py b/app/frontend/ui_graph_cytoscape.py index 62f87f7..f987096 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 - # Neu: Getrennter State für Inspektion vs. Navigation + # Getrennter State für Inspektion vs. Navigation if "graph_inspected_id" not in st.session_state: st.session_state.graph_inspected_id = None @@ -35,12 +35,11 @@ def render_graph_explorer_cytoscape(graph_service): ) options = {h.payload['title']: h.payload['note_id'] for h in hits} if options: - # Bei Suche setzen wir beides neu: Zentrum und Inspektion selected_title = st.selectbox("Ergebnisse:", list(options.keys()), key="cy_select") if st.button("Laden", use_container_width=True, key="cy_load"): new_id = options[selected_title] st.session_state.graph_center_id = new_id - st.session_state.graph_inspected_id = new_id # Gleichzeitig inspizieren + st.session_state.graph_inspected_id = new_id st.rerun() st.divider() @@ -56,6 +55,7 @@ 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) @@ -76,27 +76,25 @@ def render_graph_explorer_cytoscape(graph_service): inspected_id = st.session_state.graph_inspected_id # --- DATEN LADEN --- - # 1. Graph für das ZENTRUM laden with st.spinner(f"Lade Graph (Tiefe {st.session_state.cy_depth})..."): nodes_data, edges_data = graph_service.get_ego_graph( center_id, depth=st.session_state.cy_depth ) - - # 2. Daten für den INSPIZIERTEN Knoten laden (für Editor/Inspector) + # Daten für den INSPIZIERTEN Knoten laden inspected_data = graph_service.get_note_with_full_content(inspected_id) # --- ACTION BAR (OBEN) --- action_container = st.container() with action_container: - # Info Zeile c1, c2, c3 = st.columns([2, 1, 1]) with c1: - st.info(f"**Ausgewählt:** {inspected_data.get('title', inspected_id) if inspected_data else inspected_id}") + title_show = inspected_data.get('title', inspected_id) if inspected_data else inspected_id + st.info(f"**Ausgewählt:** {title_show}") with c2: - # NAVIGATION: Nur anzeigen, wenn Inspiziert != Zentrum + # NAVIGATION: Nur wenn Inspiziert != Zentrum 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 @@ -105,7 +103,7 @@ def render_graph_explorer_cytoscape(graph_service): st.caption("_(Ist aktuelles Zentrum)_") with c3: - # EDITIEREN: Immer für den INSPIZIERTEN Knoten + # EDITIEREN if inspected_data: st.button("📝 Bearbeiten", use_container_width=True, @@ -114,7 +112,7 @@ def render_graph_explorer_cytoscape(graph_service): key="cy_edit_btn") # --- INSPECTOR --- - with st.expander("🕵️ Data Inspector (Details)", expanded=True): # Default offen für bessere UX + with st.expander("🕵️ Data Inspector (Details)", expanded=True): if inspected_data: col_i1, col_i2 = st.columns(2) with col_i1: @@ -136,7 +134,6 @@ def render_graph_explorer_cytoscape(graph_service): # Nodes konvertieren for n in nodes_data: - # Styles berechnen is_center = (n.id == center_id) is_inspected = (n.id == inspected_id) @@ -149,10 +146,10 @@ def render_graph_explorer_cytoscape(graph_service): "data": { "id": n.id, "label": display_label, - "bg_color": n.color, + # WICHTIG: Hier übergeben wir die Farbe an Cytoscape + "bg_color": n.color, "tooltip": tooltip_text }, - # Selektion markiert den INSPIZIERTEN Knoten, nicht zwingend das Zentrum "selected": is_inspected, "classes": "center" if is_center else "" } @@ -164,7 +161,10 @@ def render_graph_explorer_cytoscape(graph_service): if target_id: cy_edge = { "data": { - "source": e.source, "target": target_id, "label": e.label, "line_color": e.color + "source": e.source, + "target": target_id, + "label": e.label, + "line_color": e.color } } cy_elements.append(cy_edge) @@ -176,7 +176,8 @@ def render_graph_explorer_cytoscape(graph_service): "style": { "label": "data(label)", "width": "30px", "height": "30px", - "background-color": "data(bg_color)", + # HIER NUTZEN WIR DIE FARBE: + "background-color": "data(bg_color)", "color": "#333", "font-size": "12px", "text-valign": "center", "text-halign": "center", "text-wrap": "wrap", "text-max-width": "90px", @@ -184,23 +185,23 @@ def render_graph_explorer_cytoscape(graph_service): "title": "data(tooltip)" } }, - # Style für den inspizierten Knoten (Gelber Rahmen, Größer) + # Style für Selektion (Gelb) { "selector": "node:selected", "style": { "border-width": 6, - "border-color": "#FFC300", # Gelb/Gold für Auswahl + "border-color": "#FFC300", "width": "50px", "height": "50px", "font-weight": "bold", "z-index": 999 } }, - # Style für das Zentrum (Roter Rahmen, falls nicht selektiert) + # Style für Zentrum (Rot) { "selector": ".center", "style": { "border-width": 4, - "border-color": "#FF5733", # Rot + "border-color": "#FF5733", "width": "40px", "height": "40px" } }, @@ -238,13 +239,13 @@ def render_graph_explorer_cytoscape(graph_service): height="700px" ) - # --- EVENT HANDLING (Selektion) --- + # --- EVENT HANDLING (Nur Selektion ändern) --- if clicked_elements: clicked_nodes = clicked_elements.get("nodes", []) if clicked_nodes: clicked_id = clicked_nodes[0] - # LOGIK: Nur Inspektion ändern, nicht Zentrum + # Nur Inspektion ändern, NICHT das Zentrum neu laden if clicked_id != st.session_state.graph_inspected_id: st.session_state.graph_inspected_id = clicked_id st.rerun()