323 lines
14 KiB
Python
323 lines
14 KiB
Python
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)")
|
|
|
|
# --- 1. STATE INITIALISIERUNG ---
|
|
# 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)
|
|
if "graph_inspected_id" not in st.session_state:
|
|
st.session_state.graph_inspected_id = None
|
|
|
|
# Defaults für Layout-Parameter (COSE)
|
|
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) ---
|
|
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",
|
|
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]
|
|
# Bei Suche setzen wir beides neu
|
|
st.session_state.graph_center_id = new_id
|
|
st.session_state.graph_inspected_id = new_id
|
|
st.rerun()
|
|
|
|
st.divider()
|
|
|
|
# Layout Einstellungen
|
|
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()
|
|
|
|
# Legende
|
|
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)
|
|
|
|
# --- 3. RECHTES PANEL (GRAPH & INSPECTOR) ---
|
|
with col_graph:
|
|
center_id = st.session_state.graph_center_id
|
|
|
|
# Initialisierung 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
|
|
|
|
inspected_id = st.session_state.graph_inspected_id
|
|
|
|
# --- 3.1 DATEN LADEN ---
|
|
with st.spinner(f"Lade Graph (Tiefe {st.session_state.cy_depth})..."):
|
|
# 1. Graph Daten für das 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)
|
|
inspected_data = graph_service.get_note_with_full_content(inspected_id)
|
|
|
|
# --- 3.2 ACTION BAR & INSPECTOR ---
|
|
action_container = st.container()
|
|
with action_container:
|
|
# Obere Zeile: Info & Buttons
|
|
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"**Aktuell gewählt:** {title_show}")
|
|
|
|
with c2:
|
|
# NAVIGATION BUTTON
|
|
# Nur anzeigen, 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
|
|
st.rerun()
|
|
else:
|
|
st.caption("_(Ist aktuelles Zentrum)_")
|
|
|
|
with c3:
|
|
# EDIT BUTTON
|
|
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 (Standard: Eingeklappt)
|
|
with st.expander("🕵️ Data Inspector (Details)", 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 (Vorschau)", inspected_data.get('fulltext', '')[:1000], height=200, disabled=True)
|
|
else:
|
|
st.warning("Keine Daten geladen.")
|
|
|
|
# --- 3.3 ELEMENT VORBEREITUNG ---
|
|
cy_elements = []
|
|
|
|
# Nodes erstellen
|
|
for n in nodes_data:
|
|
# Klassenlogik für Styling (statt Selection State)
|
|
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
|
|
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 Inhalt
|
|
"tooltip": n.title if n.title else n.label
|
|
},
|
|
"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
|
|
"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:
|
|
cy_edge = {
|
|
"data": {
|
|
"source": e.source,
|
|
"target": target_id,
|
|
"label": e.label,
|
|
"line_color": e.color
|
|
}
|
|
}
|
|
cy_elements.append(cy_edge)
|
|
|
|
# --- 3.4 STYLESHEET ---
|
|
stylesheet = [
|
|
# BASIS NODE STYLE
|
|
{
|
|
"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)"
|
|
}
|
|
},
|
|
# KLASSE: INSPECTED (Gelber Rahmen) - Ersetzt :selected
|
|
{
|
|
"selector": ".inspected",
|
|
"style": {
|
|
"border-width": 6,
|
|
"border-color": "#FFC300", # Gelb/Gold
|
|
"width": "50px",
|
|
"height": "50px",
|
|
"font-weight": "bold",
|
|
"z-index": 999
|
|
}
|
|
},
|
|
# KLASSE: CENTER (Roter Rahmen)
|
|
{
|
|
"selector": ".center",
|
|
"style": {
|
|
"border-width": 4,
|
|
"border-color": "#FF5733", # Rot
|
|
"width": "40px",
|
|
"height": "40px"
|
|
}
|
|
},
|
|
# KOMBINATION: Center ist auch Inspected
|
|
{
|
|
"selector": ".center.inspected",
|
|
"style": {
|
|
"border-width": 6,
|
|
"border-color": "#FF5733", # Rot gewinnt (oder Mix)
|
|
"width": "55px",
|
|
"height": "55px"
|
|
}
|
|
},
|
|
# NATIVE SELEKTION (Unterdrücken/Anpassen)
|
|
# Wir machen den Standard-Selektionsrahmen unsichtbar(er),
|
|
# da wir .inspected nutzen.
|
|
{
|
|
"selector": "node:selected",
|
|
"style": {
|
|
"overlay-opacity": 0,
|
|
"border-width": 6,
|
|
"border-color": "#FFC300"
|
|
}
|
|
},
|
|
# EDGE STYLE
|
|
{
|
|
"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"
|
|
}
|
|
}
|
|
]
|
|
|
|
# --- 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!
|
|
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={
|
|
"name": "cose",
|
|
"idealEdgeLength": st.session_state.cy_ideal_edge_len,
|
|
"nodeOverlap": 20,
|
|
"refresh": 20,
|
|
"fit": True,
|
|
"padding": 50,
|
|
"randomize": False, # WICHTIG für Stabilität
|
|
"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"
|
|
)
|
|
|
|
# --- 3.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.
|
|
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.") |