From 0cb216c2bca7da6bfcb63e3fff2074a4dce97d84 Mon Sep 17 00:00:00 2001 From: Lars Date: Sun, 14 Dec 2025 16:12:19 +0100 Subject: [PATCH] update --- app/frontend/ui_graph_cytoscape.py | 96 ++++++++++++++++-------------- 1 file changed, 51 insertions(+), 45 deletions(-) diff --git a/app/frontend/ui_graph_cytoscape.py b/app/frontend/ui_graph_cytoscape.py index b78d214..df7645f 100644 --- a/app/frontend/ui_graph_cytoscape.py +++ b/app/frontend/ui_graph_cytoscape.py @@ -11,7 +11,6 @@ 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 (Gelber Rahmen) vs. Navigation (Roter Rahmen) if "graph_inspected_id" not in st.session_state: st.session_state.graph_inspected_id = None @@ -22,7 +21,7 @@ def render_graph_explorer_cytoscape(graph_service): col_ctrl, col_graph = st.columns([1, 4]) - # --- LINKES PANEL: SUCHE & SETTINGS --- + # --- LINKES PANEL --- with col_ctrl: st.subheader("Fokus") search_term = st.text_input("Suche Notiz", placeholder="Titel eingeben...", key="cy_search") @@ -58,17 +57,16 @@ def render_graph_explorer_cytoscape(graph_service): for k, v in list(GRAPH_COLORS.items())[:8]: st.markdown(f"● {k}", unsafe_allow_html=True) - # --- RECHTES PANEL: GRAPH & INSPECTOR --- + # --- RECHTES PANEL --- with col_graph: center_id = st.session_state.graph_center_id - # Initialisierung falls leer + # Init Fallback 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 if center_id: - # Sync: Wenn Inspection None ist, setze auf Center if not st.session_state.graph_inspected_id: st.session_state.graph_inspected_id = center_id @@ -76,33 +74,30 @@ 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 ) - # 2. Detail Daten (nur für die Inspektion) + # Daten nur für den INSPECTOR laden inspected_data = graph_service.get_note_with_full_content(inspected_id) # --- ACTION BAR --- action_container = st.container() with action_container: - # Info Zeile c1, c2, c3 = st.columns([2, 1, 1]) with c1: title_show = inspected_data.get('title', inspected_id) if inspected_data else inspected_id - st.info(f"**Ausgewählt:** {title_show}") + st.info(f"**Info:** {title_show}") with c2: - # NAVIGATION: Nur wenn Inspiziert != Zentrum + # NAVIGATION 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)_") + st.caption("_(Zentrum)_") with c3: # EDITIEREN @@ -113,8 +108,8 @@ def render_graph_explorer_cytoscape(graph_service): args=(inspected_data,), key="cy_edit_btn") - # --- INSPECTOR (Standard: Geschlossen) --- - with st.expander("🕵️ Data Inspector (Details)", expanded=False): + # --- DATA INSPECTOR (Eingeklappt für mehr Platz) --- + with st.expander("🕵️ Data Inspector", expanded=False): if inspected_data: col_i1, col_i2 = st.columns(2) with col_i1: @@ -122,23 +117,18 @@ def render_graph_explorer_cytoscape(graph_service): st.markdown(f"**Typ:** `{inspected_data.get('type')}`") with col_i2: st.markdown(f"**Tags:** {', '.join(inspected_data.get('tags', []))}") - path_str = inspected_data.get('path') or inspected_data.get('file_path') or "N/A" - st.markdown(f"**Pfad:** `{path_str}`") - - st.divider() - content_preview = inspected_data.get('fulltext', '')[:600] - st.text_area("Inhalt (Vorschau)", content_preview + "...", height=150, disabled=True) + path_check = "✅" if inspected_data.get('path') else "❌" + st.markdown(f"**Pfad:** {path_check}") + st.text_area("Inhalt", inspected_data.get('fulltext', '')[:1000], height=200, disabled=True) else: - st.warning("Keine Daten für Auswahl geladen.") + st.warning("Keine Daten geladen.") - # --- GRAPH PREPARATION --- + # --- GRAPH ELEMENTS --- cy_elements = [] - # 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. + # Selektion wird visuell übergeben is_inspected = (n.id == inspected_id) tooltip_text = n.title if n.title else n.label @@ -158,7 +148,6 @@ def render_graph_explorer_cytoscape(graph_service): } cy_elements.append(cy_node) - # Edges for e in edges_data: target_id = getattr(e, "to", getattr(e, "target", None)) if target_id: @@ -172,7 +161,7 @@ def render_graph_explorer_cytoscape(graph_service): } cy_elements.append(cy_edge) - # Stylesheet + # --- STYLESHEET --- stylesheet = [ { "selector": "node", @@ -187,21 +176,22 @@ def render_graph_explorer_cytoscape(graph_service): "title": "data(tooltip)" } }, + # Selektierter Knoten (Gelb) { "selector": "node:selected", "style": { "border-width": 6, - "border-color": "#FFC300", # Gelb = Inspektion + "border-color": "#FFC300", "width": "50px", "height": "50px", - "font-weight": "bold", - "z-index": 999 + "font-weight": "bold" } }, + # Zentrum (Rot) { "selector": ".center", "style": { "border-width": 4, - "border-color": "#FF5733", # Rot = Zentrum + "border-color": "#FF5733", "width": "40px", "height": "40px" } }, @@ -220,40 +210,56 @@ def render_graph_explorer_cytoscape(graph_service): } ] - # --- 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}" + # --- CONFIG: SINGLE SELECT --- + # Das erzwingt, dass beim Klicken einer Node die anderen deselektiert werden + cy_config = { + "selectionType": "single", + "boxSelectionEnabled": False, + "userZoomingEnabled": True, + "userPanningEnabled": True + } + + # --- RENDER --- + # Stable Key: Ändert sich NICHT bei Inspektion, nur bei Zentrum/Layout + graph_key = f"cy_{center_id}_{st.session_state.cy_depth}_{st.session_state.cy_ideal_edge_len}" clicked_elements = cytoscape( elements=cy_elements, stylesheet=stylesheet, + # Layout Config layout={ "name": "cose", "idealEdgeLength": st.session_state.cy_ideal_edge_len, - "nodeOverlap": 20, "refresh": 20, "fit": True, "padding": 50, - "randomize": False, "componentSpacing": 100, + "nodeOverlap": 20, + "refresh": 20, + "fit": True, + "padding": 50, + "randomize": False, # WICHTIG gegen das Springen! + "componentSpacing": 100, "nodeRepulsion": st.session_state.cy_node_repulsion, - "edgeElasticity": 100, "nestingFactor": 5, "gravity": 80, - "numIter": 1000, "initialTemp": 200, "coolingFactor": 0.95, "minTemp": 1.0 + "edgeElasticity": 100, + "nestingFactor": 5, + "gravity": 80, + "numIter": 1000, + "initialTemp": 200, + "coolingFactor": 0.95, + "minTemp": 1.0, + "animate": False # Animation aus, damit es sofort stabil ist }, + config=cy_config, # Config Objekt übergeben key=graph_key, height="700px" ) - # --- SELECTION HANDLING --- + # --- INTERACTION --- if clicked_elements: clicked_nodes = clicked_elements.get("nodes", []) if clicked_nodes: clicked_id = clicked_nodes[0] - # Wenn auf einen neuen Knoten geklickt wurde: + # Wenn neuer Knoten geklickt wurde -> Inspektion ändern 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: