diff --git a/app/frontend/ui_graph_cytoscape.py b/app/frontend/ui_graph_cytoscape.py index 38d0023..8d20eab 100644 --- a/app/frontend/ui_graph_cytoscape.py +++ b/app/frontend/ui_graph_cytoscape.py @@ -7,31 +7,34 @@ from ui_callbacks import switch_to_editor_callback def render_graph_explorer_cytoscape(graph_service): st.header("🕸️ Graph Explorer (Cytoscape)") - # --- 1. STATE INITIALISIERUNG --- - # Graph Zentrum (Roter Rahmen, bestimmt die geladenen Daten) + # --------------------------------------------------------- + # 1. STATE MANAGEMENT + # --------------------------------------------------------- + # Das aktive Zentrum des Graphen (bestimmt welche Knoten geladen werden) if "graph_center_id" not in st.session_state: st.session_state.graph_center_id = None - # Inspizierter Knoten (Gelber Rahmen, bestimmt Inspector & Editor) + # Der aktuell inspizierte Knoten (bestimmt Inspector & Editor Inhalt) + # 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 - # Defaults für Layout-Parameter (COSE) + # Layout Defaults für COSE Algorithmus st.session_state.setdefault("cy_node_repulsion", 1000000) st.session_state.setdefault("cy_ideal_edge_len", 150) st.session_state.setdefault("cy_depth", 2) - # Layout Spalten col_ctrl, col_graph = st.columns([1, 4]) - # --- 2. LINKES PANEL (CONTROLS) --- + # --------------------------------------------------------- + # 2. LINKES PANEL (Steuerung) + # --------------------------------------------------------- with col_ctrl: st.subheader("Fokus") # Suchfeld search_term = st.text_input("Suche Notiz", placeholder="Titel eingeben...", key="cy_search") - # Suchlogik if search_term: hits, _ = graph_service.client.scroll( collection_name=f"{COLLECTION_PREFIX}_notes", @@ -44,7 +47,7 @@ def render_graph_explorer_cytoscape(graph_service): 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] - # Bei Suche setzen wir beides neu + # Bei neuer Suche setzen wir beides auf das Ziel st.session_state.graph_center_id = new_id st.session_state.graph_inspected_id = new_id st.rerun() @@ -69,45 +72,47 @@ def render_graph_explorer_cytoscape(graph_service): for k, v in list(GRAPH_COLORS.items())[:8]: st.markdown(f"● {k}", unsafe_allow_html=True) - # --- 3. RECHTES PANEL (GRAPH & INSPECTOR) --- + # --------------------------------------------------------- + # 3. RECHTES PANEL (Graph & Tools) + # --------------------------------------------------------- with col_graph: center_id = st.session_state.graph_center_id - # Initialisierung Fallback + # Fallback Init 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 + # Sync: Falls Inspektion leer ist, mit Zentrum füllen if not st.session_state.graph_inspected_id: st.session_state.graph_inspected_id = center_id inspected_id = st.session_state.graph_inspected_id - # --- 3.1 DATEN LADEN --- + # --- DATEN LADEN --- with st.spinner(f"Lade Graph (Tiefe {st.session_state.cy_depth})..."): - # 1. Graph Daten für das ZENTRUM + # 1. Graph Daten (Abhängig vom Zentrum) nodes_data, edges_data = graph_service.get_ego_graph( center_id, depth=st.session_state.cy_depth ) - # 2. Detail Daten für die INSPEKTION (Editor/Text) + # 2. Detail Daten (Abhängig von der Inspektion) + # Holt Metadaten UND den gestitchten Volltext inspected_data = graph_service.get_note_with_full_content(inspected_id) - # --- 3.2 ACTION BAR & INSPECTOR --- + # --- ACTION BAR --- action_container = st.container() with action_container: - # Obere Zeile: Info & Buttons c1, c2, c3 = st.columns([2, 1, 1]) with c1: + # Titel anzeigen title_show = inspected_data.get('title', inspected_id) if inspected_data else inspected_id - st.info(f"**Aktuell gewählt:** {title_show}") + st.info(f"**Info:** {title_show}") with c2: - # NAVIGATION BUTTON - # Nur anzeigen, wenn wir nicht schon im Zentrum sind + # NAVIGATION: Nur aktiv, wenn wir nicht schon im Zentrum sind 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 @@ -116,7 +121,7 @@ def render_graph_explorer_cytoscape(graph_service): st.caption("_(Ist aktuelles Zentrum)_") with c3: - # EDIT BUTTON + # EDITIEREN: Startet den Editor mit den Daten des inspizierten Knotens if inspected_data: st.button("📝 Bearbeiten", use_container_width=True, @@ -124,37 +129,55 @@ def render_graph_explorer_cytoscape(graph_service): args=(inspected_data,), key="cy_edit_btn") - # DATA INSPECTOR (Standard: Eingeklappt) + # --- DATA INSPECTOR --- with st.expander("🕵️ Data Inspector (Details)", expanded=False): if inspected_data: + # Spalte 1: IDs und Typen col_i1, col_i2 = st.columns(2) with col_i1: st.markdown(f"**ID:** `{inspected_data.get('note_id')}`") st.markdown(f"**Typ:** `{inspected_data.get('type')}`") - with col_i2: - st.markdown(f"**Tags:** {', '.join(inspected_data.get('tags', []))}") - path_check = "✅" if inspected_data.get('path') else "❌" - st.markdown(f"**Pfad:** {path_check}") - st.text_area("Inhalt (Vorschau)", inspected_data.get('fulltext', '')[:1000], height=200, disabled=True) + # Spalte 2: Tags und Pfad-Status + with col_i2: + tags = inspected_data.get('tags', []) + st.markdown(f"**Tags:** {', '.join(tags) if tags else '-'}") + + has_path = bool(inspected_data.get('path')) + path_icon = "✅" if has_path else "❌" + st.markdown(f"**Pfad:** {path_icon}") + if has_path: + st.caption(f"_{inspected_data.get('path')}_") + + st.divider() + + # Content Preview + st.caption("Inhalt (Vorschau aus Stitching):") + fulltext = inspected_data.get('fulltext', '') + st.text_area("Body", fulltext[:1200] + "...", height=200, disabled=True, label_visibility="collapsed") + + # Raw Data Expander + with st.expander("📄 Raw JSON anzeigen"): + st.json(inspected_data) else: - st.warning("Keine Daten geladen.") + st.warning("Keine Daten für diesen Knoten gefunden.") - # --- 3.3 ELEMENT VORBEREITUNG --- + # --------------------------------------------------------- + # 4. GRAPH VORBEREITUNG (Elemente & Styles) + # --------------------------------------------------------- cy_elements = [] # Nodes erstellen for n in nodes_data: - # Klassenlogik für Styling (statt Selection State) + # Logik für visuelle Klassen classes = [] if n.id == center_id: classes.append("center") - - # Wir markieren den inspizierten Knoten visuell if n.id == inspected_id: classes.append("inspected") - # Label kürzen für Anzeige + # Label für Anzeige kürzen + tooltip_text = n.title if n.title else n.label display_label = n.label if len(display_label) > 15 and " " in display_label: display_label = display_label.replace(" ", "\n", 1) @@ -164,13 +187,11 @@ def render_graph_explorer_cytoscape(graph_service): "id": n.id, "label": display_label, "bg_color": n.color, - # Tooltip Inhalt - "tooltip": n.title if n.title else n.label + "tooltip": tooltip_text }, "classes": " ".join(classes), - # WICHTIG: Wir setzen selected immer auf False beim Init, - # damit wir nicht mit dem internen State des Browsers kämpfen. - # Die Visualisierung passiert über die Klasse .inspected + # Wir nutzen KEINE interne Selektion (:selected), + # sondern steuern das Aussehen über die Klasse .inspected "selected": False } cy_elements.append(cy_node) @@ -189,68 +210,57 @@ def render_graph_explorer_cytoscape(graph_service): } cy_elements.append(cy_edge) - # --- 3.4 STYLESHEET --- + # Stylesheet (Design Definitionen) stylesheet = [ - # BASIS NODE STYLE + # BASIS NODE { "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", - "title": "data(tooltip)" + "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 } }, - # KLASSE: INSPECTED (Gelber Rahmen) - Ersetzt :selected + # INSPECTED (Gelber Rahmen) { "selector": ".inspected", "style": { "border-width": 6, - "border-color": "#FFC300", # Gelb/Gold - "width": "50px", - "height": "50px", + "border-color": "#FFC300", + "width": "50px", "height": "50px", "font-weight": "bold", "z-index": 999 } }, - # KLASSE: CENTER (Roter Rahmen) + # CENTER (Roter Rahmen) { "selector": ".center", "style": { "border-width": 4, - "border-color": "#FF5733", # Rot - "width": "40px", - "height": "40px" + "border-color": "#FF5733", + "width": "40px", "height": "40px" } }, - # KOMBINATION: Center ist auch Inspected + # CENTER + INSPECTED (Kombination) { "selector": ".center.inspected", "style": { "border-width": 6, - "border-color": "#FF5733", # Rot gewinnt (oder Mix) - "width": "55px", - "height": "55px" + "border-color": "#FF5733", # Zentrum Farbe dominiert + "width": "55px", "height": "55px" } }, - # NATIVE SELEKTION (Unterdrücken/Anpassen) - # Wir machen den Standard-Selektionsrahmen unsichtbar(er), - # da wir .inspected nutzen. + # SELECT STATE OVERRIDE (Verstecken des Standard-Rahmens) { "selector": "node:selected", "style": { - "overlay-opacity": 0, - "border-width": 6, - "border-color": "#FFC300" + "border-width": 0, + "overlay-opacity": 0 } }, # EDGE STYLE @@ -263,20 +273,18 @@ def render_graph_explorer_cytoscape(graph_service): "target-arrow-shape": "triangle", "curve-style": "bezier", "label": "data(label)", - "font-size": "10px", - "color": "#666", - "text-background-opacity": 0.8, - "text-background-color": "#fff" + "font-size": "10px", "color": "#666", + "text-background-opacity": 0.8, "text-background-color": "#fff" } } ] - # --- 3.5 RENDERING --- - # KEY STRATEGIE: - # Der Key darf NICHT von 'graph_inspected_id' abhängen. - # Er hängt nur von 'center_id' und Layout-Settings ab. - # Wenn wir eine Node anklicken, ändert sich inspected_id -> Rerun. - # Da der Key gleich bleibt, wird der Graph NICHT neu initialisiert -> Kein Springen! + # --------------------------------------------------------- + # 5. RENDERING + # --------------------------------------------------------- + # 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! graph_key = f"cy_{center_id}_{st.session_state.cy_depth}_{st.session_state.cy_ideal_edge_len}" clicked_elements = cytoscape( @@ -289,7 +297,7 @@ def render_graph_explorer_cytoscape(graph_service): "refresh": 20, "fit": True, "padding": 50, - "randomize": False, # WICHTIG für Stabilität + "randomize": False, # Wichtig für Stabilität "componentSpacing": 100, "nodeRepulsion": st.session_state.cy_node_repulsion, "edgeElasticity": 100, @@ -301,22 +309,27 @@ def render_graph_explorer_cytoscape(graph_service): "minTemp": 1.0, "animate": False }, - key=graph_key, + key=graph_key, height="700px" ) - # --- 3.6 EVENT HANDLING --- + # --------------------------------------------------------- + # 6. EVENT HANDLING + # --------------------------------------------------------- if clicked_elements: clicked_nodes = clicked_elements.get("nodes", []) + if clicked_nodes: - # Die Liste enthält die IDs der selektierten Knoten clicked_id = clicked_nodes[0] - # Wenn wir auf einen neuen Knoten klicken, ändern wir NUR die Inspektion. - # Das triggert einen Rerun. - # Da der graph_key gleich bleibt, wird nur der Style (.inspected Klasse) geupdated. + # 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 + # Da graph_key sich NICHT ändert, bleibt der Graph stabil, + # nur die CSS-Klassen (.inspected) werden aktualisiert. st.rerun() else: