Lars/mindnet
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 21 Wiki Activity

upgrade cytoscape

Browse Source
This commit is contained in:
Lars 2025-12-14 15:16:01 +01:00
parent bb41b11cce
commit 245a96809a
1 changed files with 93 additions and 78 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

171
app/frontend/ui_graph_cytoscape.py
View File

@ -1,5 +1,5 @@
import streamlit as st import streamlit as st
# WICHTIG: Wir nutzen jetzt 'st-cytoscape' (pip install st-cytoscape) # Wir nutzen das mächtigere 'st-cytoscape' (pip install st-cytoscape)
from st_cytoscape import cytoscape from st_cytoscape import cytoscape
from qdrant_client import models from qdrant_client import models
from ui_config import COLLECTION_PREFIX, GRAPH_COLORS from ui_config import COLLECTION_PREFIX, GRAPH_COLORS
@ -8,16 +8,18 @@ from ui_callbacks import switch_to_editor_callback
def render_graph_explorer_cytoscape(graph_service): def render_graph_explorer_cytoscape(graph_service):
st.header("🕸️ Graph Explorer (Cytoscape)") st.header("🕸️ Graph Explorer (Cytoscape)")
# State Init
if "graph_center_id" not in st.session_state: if "graph_center_id" not in st.session_state:
st.session_state.graph_center_id = None st.session_state.graph_center_id = None
# Layout Defaults für COSE (Compound Spring Embedder) # Defaults für Cytoscape Session State
st.session_state.setdefault("cy_node_repulsion", 1000000) # Starke Abstoßung st.session_state.setdefault("cy_node_repulsion", 1000000)
st.session_state.setdefault("cy_ideal_edge_len", 200) # Ziel-Abstand st.session_state.setdefault("cy_ideal_edge_len", 150)
st.session_state.setdefault("cy_depth", 2) # Eigene Tiefe für diesen Tab
col_ctrl, col_graph = st.columns([1, 4]) col_ctrl, col_graph = st.columns([1, 4])
# --- CONTROLS --- # --- CONTROLS (Linke Spalte) ---
with col_ctrl: with col_ctrl:
st.subheader("Fokus") st.subheader("Fokus")
search_term = st.text_input("Suche Notiz", placeholder="Titel eingeben...", key="cy_search") search_term = st.text_input("Suche Notiz", placeholder="Titel eingeben...", key="cy_search")
@ -36,12 +38,18 @@ def render_graph_explorer_cytoscape(graph_service):
st.rerun() st.rerun()
st.divider() st.divider()
with st.expander("👁️ Layout Einstellungen", expanded=True):
st.caption("COSE Layout (Optimiert für Abstände)") # EINSTELLUNGEN
st.session_state.cy_ideal_edge_len = st.slider("Kantenlänge (Ideal)", 50, 600, st.session_state.cy_ideal_edge_len) with st.expander("👁️ Ansicht & Layout", expanded=True):
st.session_state.cy_node_repulsion = st.slider("Knoten-Abstoßung", 100000, 5000000, st.session_state.cy_node_repulsion, step=100000) # 1. Tiefe (Tier)
st.session_state.cy_depth = st.slider("Tiefe (Tier)", 1, 3, st.session_state.cy_depth, key="cy_depth_slider")
if st.button("Neu berechnen", key="cy_rerun"): st.markdown("**COSE Layout**")
# 2. Layout Parameter
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 / Reset", key="cy_rerun"):
st.rerun() st.rerun()
st.divider() st.divider()
@ -49,19 +57,23 @@ def render_graph_explorer_cytoscape(graph_service):
for k, v in list(GRAPH_COLORS.items())[:8]: for k, v in list(GRAPH_COLORS.items())[:8]:
st.markdown(f"<span style='color:{v}'>●</span> {k}", unsafe_allow_html=True) st.markdown(f"<span style='color:{v}'>●</span> {k}", unsafe_allow_html=True)
# --- GRAPH AREA --- # --- GRAPH AREA (Rechte Spalte) ---
with col_graph: with col_graph:
center_id = st.session_state.graph_center_id center_id = st.session_state.graph_center_id
if center_id: if center_id:
action_container = st.container() action_container = st.container()
# 1. Daten laden # 1. Daten laden (Mit Tiefe!)
with st.spinner("Lade Graph..."): with st.spinner(f"Lade Graph (Tiefe {st.session_state.cy_depth})..."):
# Wir holen die Agraph-Objekte vom Service # Hier nutzen wir die dynamische Tiefe aus dem Slider
nodes_data, edges_data = graph_service.get_ego_graph(center_id) # Wir holen die Agraph-Objekte vom Service, da die Logik dort zentralisiert ist
nodes_data, edges_data = graph_service.get_ego_graph(
center_id,
depth=st.session_state.cy_depth
)
# Note Data für Editor Button # Note Data für Editor Button (Volltext/Pfad via Service)
note_data = graph_service.get_note_with_full_content(center_id) note_data = graph_service.get_note_with_full_content(center_id)
# 2. Action Bar # 2. Action Bar
@ -70,36 +82,38 @@ def render_graph_explorer_cytoscape(graph_service):
with c1: st.caption(f"Zentrum: **{center_id}**") with c1: st.caption(f"Zentrum: **{center_id}**")
with c2: with c2:
if note_data: if note_data:
st.button("📝 Bearbeiten", use_container_width=True, on_click=switch_to_editor_callback, args=(note_data,), key="cy_edit") st.button("📝 Bearbeiten", use_container_width=True, on_click=switch_to_editor_callback, args=(note_data,), key="cy_edit_btn")
# 3. Konvertierung zu Cytoscape JSON Format # 3. Daten Konvertierung (Agraph -> Cytoscape JSON)
cy_elements = [] cy_elements = []
# Nodes konvertieren # Nodes
for n in nodes_data: for n in nodes_data:
# Wir bauen das 'label' so um, dass lange Titel umbrechen (optional) # Wir holen den Hover-Text aus 'n.title', den der Service vorbereitet hat (Fulltext/Snippet)
label_display = n.label tooltip_text = n.title if n.title else n.label
if len(label_display) > 20: label_display = label_display[:20] + "..."
# Label kürzen für Anzeige im Kreis, aber voll im Tooltip
display_label = n.label
if len(display_label) > 15 and " " in display_label:
display_label = display_label.replace(" ", "\n", 1) # Zeilenumbruch
cy_node = { cy_node = {
"data": { "data": {
"id": n.id, "id": n.id,
"label": label_display, "label": display_label,
"full_label": n.label, "full_label": n.label,
"color": n.color, "bg_color": n.color,
# Größe skalieren: Center größer "size": 50 if n.id == center_id else 30,
"size": 60 if n.id == center_id else 40, # Dieses Feld wird oft automatisch als natives 'title' Attribut gerendert (Browser Tooltip)
# Tooltip Inhalt "title": tooltip_text
"tooltip": n.title
}, },
# Zentrum markieren "selected": (n.id == center_id)
"selected": (n.id == center_id)
} }
cy_elements.append(cy_node) cy_elements.append(cy_node)
# Edges konvertieren # Edges
for e in edges_data: for e in edges_data:
# FIX: Agraph Edges nutzen .to, nicht .target # Kompatibilität: Agraph nutzt 'to', Cytoscape braucht 'target'
# Wir prüfen sicherheitshalber beide Attribute # Wir prüfen sicherheitshalber beide Attribute
target_id = getattr(e, "to", getattr(e, "target", None)) target_id = getattr(e, "to", getattr(e, "target", None))
@ -109,12 +123,12 @@ def render_graph_explorer_cytoscape(graph_service):
"source": e.source, "source": e.source,
"target": target_id, "target": target_id,
"label": e.label, "label": e.label,
"color": e.color "line_color": e.color
} }
} }
cy_elements.append(cy_edge) cy_elements.append(cy_edge)
# 4. Stylesheet (Design Definitionen) # 4. Styling (CSS-like)
stylesheet = [ stylesheet = [
{ {
"selector": "node", "selector": "node",
@ -122,21 +136,23 @@ def render_graph_explorer_cytoscape(graph_service):
"label": "data(label)", "label": "data(label)",
"width": "data(size)", "width": "data(size)",
"height": "data(size)", "height": "data(size)",
"background-color": "data(color)", "background-color": "data(bg_color)",
"color": "#333", "color": "#333",
"font-size": "14px", "font-size": "12px",
"text-valign": "center", "text-valign": "center",
"text-halign": "center", "text-halign": "center",
"text-wrap": "wrap",
"text-max-width": "80px",
"border-width": 2, "border-width": 2,
"border-color": "#fff", "border-color": "#fff",
"text-wrap": "wrap", # Tooltip Mapping (funktioniert je nach Browser/Wrapper)
"text-max-width": "100px" "content": "data(label)"
} }
}, },
{ {
"selector": "node:selected", "selector": "node:selected",
"style": { "style": {
"border-width": 5, "border-width": 4,
"border-color": "#FF5733", "border-color": "#FF5733",
"background-color": "#FF5733", "background-color": "#FF5733",
"color": "#fff" "color": "#fff"
@ -145,60 +161,59 @@ def render_graph_explorer_cytoscape(graph_service):
{ {
"selector": "edge", "selector": "edge",
"style": { "style": {
"width": 3, "width": 2,
"line-color": "data(color)", "line-color": "data(line_color)",
"target-arrow-color": "data(color)", "target-arrow-color": "data(line_color)",
"target-arrow-shape": "triangle", "target-arrow-shape": "triangle",
"curve-style": "bezier", "curve-style": "bezier",
"label": "data(label)", "label": "data(label)",
"font-size": "11px", "font-size": "10px",
"color": "#555", "color": "#666",
"text-background-opacity": 0.8, "text-background-opacity": 0.7,
"text-background-color": "#ffffff", "text-background-color": "#fff",
"text-rotation": "autorotate" "text-rotation": "autorotate"
} }
} }
] ]
# 5. Rendering mit COSE Layout # 5. Rendering & Layout
# COSE ist der Schlüssel für gute Abstände! # COSE Layout für optimale Abstände
with st.spinner("Berechne Layout..."): selected_element = cytoscape(
selected_element = cytoscape( elements=cy_elements,
elements=cy_elements, stylesheet=stylesheet,
stylesheet=stylesheet, layout={
layout={ "name": "cose",
"name": "cose", "idealEdgeLength": st.session_state.cy_ideal_edge_len,
"idealEdgeLength": st.session_state.cy_ideal_edge_len, "nodeOverlap": 20,
"nodeOverlap": 20, "refresh": 20,
"refresh": 20, "fit": True,
"fit": True, "padding": 50,
"padding": 50, "randomize": False,
"randomize": False, "componentSpacing": 100,
"componentSpacing": 200, "nodeRepulsion": st.session_state.cy_node_repulsion,
"nodeRepulsion": st.session_state.cy_node_repulsion, "edgeElasticity": 100,
"edgeElasticity": 100, "nestingFactor": 5,
"nestingFactor": 5, "gravity": 80,
"gravity": 50, "numIter": 1000,
"numIter": 1000, "initialTemp": 200,
"initialTemp": 200, "coolingFactor": 0.95,
"coolingFactor": 0.95, "minTemp": 1.0
"minTemp": 1.0 },
}, # Dynamischer Key für Re-Render bei Einstellungsänderung
key="cyto_graph_obj", # Ein fester Key ist hier okay, da das Layout-Dict sich ändert key=f"cy_{center_id}_{st.session_state.cy_depth}_{st.session_state.cy_ideal_edge_len}",
height="700px" height="800px"
) )
# Interaktion: Klick Event verarbeiten # 6. Interaktions-Logik (Navigation)
# st-cytoscape gibt ein Dictionary zurück
if selected_element: if selected_element:
# Prüfen, ob es ein Node-Klick war # st-cytoscape gibt ein Dictionary der selektierten Elemente zurück
# Die Struktur ist: {'nodes': ['id1', 'id2'], 'edges': [...]} # Struktur: {'nodes': ['id1'], 'edges': []}
clicked_nodes = selected_element.get("nodes", []) clicked_nodes = selected_element.get("nodes", [])
if clicked_nodes: if clicked_nodes:
# Wir nehmen den ersten (und meist einzigen) selektierten Node
clicked_id = clicked_nodes[0] clicked_id = clicked_nodes[0]
# Wenn auf einen anderen Knoten geklickt wurde -> Navigieren
if clicked_id and clicked_id != center_id: if clicked_id and clicked_id != center_id:
st.session_state.graph_center_id = clicked_id st.session_state.graph_center_id = clicked_id
st.rerun() st.rerun()