diff --git a/app/frontend/ui_graph_cytoscape.py b/app/frontend/ui_graph_cytoscape.py index c6d35be..62b267e 100644 --- a/app/frontend/ui_graph_cytoscape.py +++ b/app/frontend/ui_graph_cytoscape.py @@ -4,25 +4,50 @@ from qdrant_client import models from ui_config import COLLECTION_PREFIX, GRAPH_COLORS from ui_callbacks import switch_to_editor_callback +def update_url_params(): + """Callback: Schreibt Slider-Werte in die URL und synchronisiert den State.""" + # Werte aus den Slider-Keys in die Logik-Variablen übertragen + if "cy_depth_slider" in st.session_state: + st.session_state.cy_depth = st.session_state.cy_depth_slider + if "cy_len_slider" in st.session_state: + st.session_state.cy_ideal_edge_len = st.session_state.cy_len_slider + if "cy_rep_slider" in st.session_state: + st.session_state.cy_node_repulsion = st.session_state.cy_rep_slider + + # In URL schreiben + st.query_params["depth"] = st.session_state.cy_depth + st.query_params["len"] = st.session_state.cy_ideal_edge_len + st.query_params["rep"] = st.session_state.cy_node_repulsion + def render_graph_explorer_cytoscape(graph_service): st.header("🕸️ Graph Explorer (Cytoscape)") # --------------------------------------------------------- - # 1. STATE MANAGEMENT + # 1. STATE & PERSISTENZ # --------------------------------------------------------- - # Graph Zentrum (Roter Rahmen, bestimmt die geladenen Daten) if "graph_center_id" not in st.session_state: st.session_state.graph_center_id = None - # 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 - # 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) + # Lade Einstellungen aus der URL (falls vorhanden), sonst Defaults + params = st.query_params + + # Helper um sicher int zu parsen + def get_param(key, default): + try: return int(params.get(key, default)) + except: return default + + # Initialisiere Session State Variablen, falls noch nicht vorhanden + if "cy_depth" not in st.session_state: + st.session_state.cy_depth = get_param("depth", 2) + + if "cy_ideal_edge_len" not in st.session_state: + st.session_state.cy_ideal_edge_len = get_param("len", 150) + + if "cy_node_repulsion" not in st.session_state: + st.session_state.cy_node_repulsion = get_param("rep", 1000000) col_ctrl, col_graph = st.columns([1, 4]) @@ -32,7 +57,6 @@ def render_graph_explorer_cytoscape(graph_service): with col_ctrl: st.subheader("Fokus") - # Suchfeld search_term = st.text_input("Suche Notiz", placeholder="Titel eingeben...", key="cy_search") if search_term: @@ -47,33 +71,39 @@ 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 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() st.divider() - # Layout Einstellungen + # LAYOUT EINSTELLUNGEN (Mit URL Sync) with st.expander("👁️ Layout Einstellungen", expanded=True): - st.session_state.cy_depth = st.slider("Tiefe (Tier)", 1, 3, st.session_state.cy_depth, key="cy_depth_slider") + st.slider("Tiefe (Tier)", 1, 3, + value=st.session_state.cy_depth, + key="cy_depth_slider", + on_change=update_url_params) st.markdown("**COSE Layout**") - st.session_state.cy_ideal_edge_len = st.slider("Kantenlänge", 50, 600, st.session_state.cy_ideal_edge_len, key="cy_len_slider") - st.session_state.cy_node_repulsion = st.slider("Knoten-Abstoßung", 100000, 5000000, st.session_state.cy_node_repulsion, step=100000, key="cy_rep_slider") + st.slider("Kantenlänge", 50, 600, + value=st.session_state.cy_ideal_edge_len, + key="cy_len_slider", + on_change=update_url_params) + + st.slider("Knoten-Abstoßung", 100000, 5000000, step=100000, + value=st.session_state.cy_node_repulsion, + key="cy_rep_slider", + on_change=update_url_params) if st.button("Neu berechnen", key="cy_rerun"): st.rerun() st.divider() - - # Legende st.caption("Legende") for k, v in list(GRAPH_COLORS.items())[:8]: st.markdown(f"● {k}", unsafe_allow_html=True) - - # --------------------------------------------------------- - # 3. RECHTES PANEL (Graph & Tools) +# --------------------------------------------------------- + # 3. RECHTES PANEL (GRAPH & INSPECTOR) # --------------------------------------------------------- with col_graph: center_id = st.session_state.graph_center_id @@ -84,7 +114,7 @@ def render_graph_explorer_cytoscape(graph_service): st.session_state.graph_center_id = center_id if center_id: - # Sync: Falls Inspektion leer ist, mit Zentrum füllen + # Sync Inspection if not st.session_state.graph_inspected_id: st.session_state.graph_inspected_id = center_id @@ -92,13 +122,12 @@ def render_graph_explorer_cytoscape(graph_service): # --- DATEN LADEN --- with st.spinner(f"Lade Graph (Tiefe {st.session_state.cy_depth})..."): - # 1. Graph Daten (Abhängig vom Zentrum) + # 1. Graph Daten nodes_data, edges_data = graph_service.get_ego_graph( center_id, depth=st.session_state.cy_depth ) - # 2. Detail Daten (Abhängig von der Inspektion) - # Holt Metadaten UND den gestitchten Volltext + # 2. Detail Daten (Inspector) inspected_data = graph_service.get_note_with_full_content(inspected_id) # --- ACTION BAR --- @@ -107,12 +136,11 @@ def render_graph_explorer_cytoscape(graph_service): 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"**Info:** {title_show}") + st.info(f"**Ausgewählt:** {title_show}") with c2: - # NAVIGATION: Nur aktiv, wenn wir nicht schon im Zentrum sind + # 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 @@ -121,7 +149,7 @@ def render_graph_explorer_cytoscape(graph_service): st.caption("_(Ist aktuelles Zentrum)_") with c3: - # EDITIEREN: Startet den Editor mit den Daten des inspizierten Knotens + # EDITIEREN if inspected_data: st.button("📝 Bearbeiten", use_container_width=True, @@ -129,56 +157,33 @@ def render_graph_explorer_cytoscape(graph_service): args=(inspected_data,), key="cy_edit_btn") - # --- DATA INSPECTOR (Raw Data restored!) --- + # --- 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')}`") - - # 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.markdown(f"**Tags:** {', '.join(inspected_data.get('tags', []))}") + path_check = "✅" if inspected_data.get('path') else "❌" + st.markdown(f"**Pfad:** {path_check}") - st.divider() + st.caption("Inhalt (Vorschau):") + st.text_area("Content Preview", inspected_data.get('fulltext', '')[:1000], height=200, disabled=True, label_visibility="collapsed") - # 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 für diesen Knoten gefunden.") + st.warning("Keine Daten geladen.") - # --------------------------------------------------------- - # 4. GRAPH VORBEREITUNG (Elemente & Styles) - # --------------------------------------------------------- + # --- GRAPH ELEMENTS --- cy_elements = [] - # Nodes erstellen for n in nodes_data: - # Logik für visuelle Klassen - classes = [] - if n.id == center_id: - classes.append("center") + is_center = (n.id == center_id) + is_inspected = (n.id == inspected_id) - # Wir markieren den inspizierten Knoten visuell - if n.id == inspected_id: - classes.append("inspected") - - # 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: @@ -191,14 +196,12 @@ def render_graph_explorer_cytoscape(graph_service): "bg_color": n.color, "tooltip": tooltip_text }, - "classes": " ".join(classes), - # WICHTIG: Wir deaktivieren die interne Selektion (:selected) komplett - # und nutzen nur unsere CSS Klassen (.inspected), um Mehrfachauswahl zu verhindern. - "selected": False + # Wir steuern das Aussehen rein über Klassen (.inspected / .center) + "classes": " ".join([c for c in ["center" if is_center else "", "inspected" if is_inspected else ""] if c]), + "selected": False } cy_elements.append(cy_node) - # Edges erstellen for e in edges_data: target_id = getattr(e, "to", getattr(e, "target", None)) if target_id: @@ -212,69 +215,58 @@ def render_graph_explorer_cytoscape(graph_service): } cy_elements.append(cy_edge) - # Stylesheet (Design Definitionen) + # --- STYLESHEET --- stylesheet = [ - # 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)" # Hover Text + "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)" } }, - # INSPECTED (Gelber Rahmen) - Ersetzt :selected + # Inspiziert (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 } }, - # CENTER (Roter Rahmen) + # Zentrum (Roter Rahmen) { "selector": ".center", "style": { "border-width": 4, - "border-color": "#FF5733", # Rot - "width": "40px", - "height": "40px" + "border-color": "#FF5733", + "width": "40px", "height": "40px" } }, - # CENTER + INSPECTED (Kombination) + # Mix { "selector": ".center.inspected", "style": { "border-width": 6, - "border-color": "#FF5733", # Rot gewinnt (oder Mix) - "width": "55px", - "height": "55px" + "border-color": "#FF5733", + "width": "55px", "height": "55px" } }, - # NATIVE SELEKTION (Unterdrücken) - # Das verhindert das "blaue Leuchten" oder Rahmen von Cytoscape selbst + # Default Selection unterdrücken { "selector": "node:selected", "style": { - "overlay-opacity": 0, "border-width": 0, + "overlay-opacity": 0 } }, - # EDGE STYLE { "selector": "edge", "style": { @@ -290,13 +282,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! + # --- RENDER --- graph_key = f"cy_{center_id}_{st.session_state.cy_depth}_{st.session_state.cy_ideal_edge_len}" clicked_elements = cytoscape( @@ -309,7 +295,7 @@ def render_graph_explorer_cytoscape(graph_service): "refresh": 20, "fit": True, "padding": 50, - "randomize": False, # Wichtig für Stabilität + "randomize": False, "componentSpacing": 100, "nodeRepulsion": st.session_state.cy_node_repulsion, "edgeElasticity": 100, @@ -325,25 +311,15 @@ def render_graph_explorer_cytoscape(graph_service): height="700px" ) - # --------------------------------------------------------- - # 6. EVENT HANDLING - # --------------------------------------------------------- + # --- EVENT HANDLING --- if clicked_elements: 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: 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: - st.info("👈 Bitte wähle links eine Notiz aus.") \ No newline at end of file + st.info("👈 Bitte wähle links eine Notiz aus.") \ No newline at end of file