mindnet/app/frontend/ui_graph_cytoscape.py

import streamlit as st
from st_cytoscape import cytoscape
from qdrant_client import models
from ui_config import COLLECTION_PREFIX, GRAPH_COLORS
from ui_callbacks import switch_to_editor_callback

def render_graph_explorer_cytoscape(graph_service):
    st.header("🕸️ Graph Explorer (Cytoscape)")
    
    # --- STATE INITIALISIERUNG ---
    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

    # Defaults für Layout
    st.session_state.setdefault("cy_node_repulsion", 1000000)
    st.session_state.setdefault("cy_ideal_edge_len", 150)
    st.session_state.setdefault("cy_depth", 2) 

    col_ctrl, col_graph = st.columns([1, 4]) 
    
    # --- LINKES PANEL ---
    with col_ctrl:
        st.subheader("Fokus")
        search_term = st.text_input("Suche Notiz", placeholder="Titel eingeben...", key="cy_search")
        
        if search_term:
            hits, _ = graph_service.client.scroll(
                collection_name=f"{COLLECTION_PREFIX}_notes",
                limit=10,
                scroll_filter=models.Filter(must=[models.FieldCondition(key="title", match=models.MatchText(text=search_term))])
            )
            options = {h.payload['title']: h.payload['note_id'] for h in hits}
            if options:
                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
                    st.rerun()
        
        st.divider()
        
        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.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")
            
            if st.button("Neu berechnen", key="cy_rerun"):
                st.rerun()

        st.divider()
        st.caption("Legende")
        for k, v in list(GRAPH_COLORS.items())[:8]:
            st.markdown(f"<span style='color:{v}'>●</span> {k}", unsafe_allow_html=True)

    # --- RECHTES PANEL ---
    with col_graph:
        center_id = st.session_state.graph_center_id
        
        # 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:
            if not st.session_state.graph_inspected_id:
                st.session_state.graph_inspected_id = center_id
            
            inspected_id = st.session_state.graph_inspected_id
            
            # --- DATEN 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
                ) 
                # Daten 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:
                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"**Info:** {title_show}")
                
                with c2:
                    # 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
                            st.rerun()
                    else:
                        st.caption("_(Zentrum)_")

                with c3:
                    # EDITIEREN
                    if inspected_data:
                        st.button("📝 Bearbeiten", 
                                  use_container_width=True, 
                                  on_click=switch_to_editor_callback, 
                                  args=(inspected_data,), 
                                  key="cy_edit_btn")

                # --- DATA INSPECTOR (Eingeklappt) ---
                with st.expander("🕵️ Data Inspector", expanded=False):
                    if inspected_data:
                        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", inspected_data.get('fulltext', '')[:1000], height=200, disabled=True)
                    else:
                        st.warning("Keine Daten geladen.")

            # --- GRAPH ELEMENTS ---
            cy_elements = []
            
            for n in nodes_data:
                is_center = (n.id == center_id)
                # Selektion wird visuell über Stylesheet gesteuert
                is_inspected = (n.id == inspected_id)
                
                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)

                cy_node = {
                    "data": {
                        "id": n.id,
                        "label": display_label,
                        "bg_color": n.color, 
                        "tooltip": tooltip_text 
                    },
                    "selected": is_inspected, 
                    "classes": "center" if is_center else ""
                }
                cy_elements.append(cy_node)
            
            for e in edges_data:
                target_id = getattr(e, "to", getattr(e, "target", None))
                if target_id:
                    cy_edge = {
                        "data": {
                            "source": e.source, 
                            "target": target_id, 
                            "label": e.label, 
                            "line_color": e.color
                        }
                    }
                    cy_elements.append(cy_edge)

            # --- STYLESHEET ---
            stylesheet = [
                {
                    "selector": "node",
                    "style": {
                        "label": "data(label)",
                        "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)" 
                    }
                },
                {
                    "selector": "node:selected",
                    "style": {
                        "border-width": 6,
                        "border-color": "#FFC300", 
                        "width": "50px", "height": "50px",
                        "font-weight": "bold"
                    }
                },
                {
                    "selector": ".center",
                    "style": {
                        "border-width": 4,
                        "border-color": "#FF5733",
                        "width": "40px", "height": "40px"
                    }
                },
                {
                    "selector": "edge",
                    "style": {
                        "width": 2,
                        "line-color": "data(line_color)",
                        "target-arrow-color": "data(line_color)",
                        "target-arrow-shape": "triangle",
                        "curve-style": "bezier",
                        "label": "data(label)",
                        "font-size": "10px", "color": "#666",
                        "text-background-opacity": 0.8, "text-background-color": "#fff"
                    }
                }
            ]

            # --- RENDER ---
            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 (config Argument entfernt!)
                layout={
                    "name": "cose", 
                    "idealEdgeLength": st.session_state.cy_ideal_edge_len,
                    "nodeOverlap": 20, 
                    "refresh": 20, 
                    "fit": True, 
                    "padding": 50,
                    "randomize": False, 
                    "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,
                    "animate": False
                },
                key=graph_key, 
                height="700px"
            )

            # --- INTERACTION ---
            if clicked_elements:
                clicked_nodes = clicked_elements.get("nodes", [])
                if clicked_nodes:
                    clicked_id = clicked_nodes[0]
                    
                    # Wenn neuer Knoten geklickt wurde -> Inspektion ändern
                    if clicked_id != st.session_state.graph_inspected_id:
                        st.session_state.graph_inspected_id = clicked_id
                        st.rerun()

        else:
            st.info("👈 Bitte wähle links eine Notiz aus.")