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

WP19 #10

Merged
Lars merged 36 commits from WP19 into main 2025-12-14 20:50:04 +01:00
Conversation 0 Commits 36 Files Changed 19 +93 -76
1 changed files with 93 additions and 76 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit bb41b11cce - Show all commits

169
app/frontend/ui_graph_cytoscape.py
View File

@ -1,6 +1,6 @@
import streamlit as st import streamlit as st
# KORREKTER IMPORT für 'pip install streamlit-cytoscapejs' # WICHTIG: Wir nutzen jetzt 'st-cytoscape' (pip install st-cytoscape)
from streamlit_cytoscapejs import st_cytoscapejs 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
from ui_callbacks import switch_to_editor_callback from ui_callbacks import switch_to_editor_callback
@ -11,9 +11,9 @@ def render_graph_explorer_cytoscape(graph_service):
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 # Layout Defaults für COSE (Compound Spring Embedder)
st.session_state.setdefault("cy_node_repulsion", 1000000) st.session_state.setdefault("cy_node_repulsion", 1000000) # Starke Abstoßung
st.session_state.setdefault("cy_ideal_edge_len", 150) st.session_state.setdefault("cy_ideal_edge_len", 200) # Ziel-Abstand
col_ctrl, col_graph = st.columns([1, 4]) col_ctrl, col_graph = st.columns([1, 4])
@ -37,9 +37,9 @@ def render_graph_explorer_cytoscape(graph_service):
st.divider() st.divider()
with st.expander("👁️ Layout Einstellungen", expanded=True): with st.expander("👁️ Layout Einstellungen", expanded=True):
st.caption("COSE Layout") st.caption("COSE Layout (Optimiert für Abstände)")
st.session_state.cy_ideal_edge_len = st.slider("Kantenlänge", 50, 500, st.session_state.cy_ideal_edge_len) st.session_state.cy_ideal_edge_len = st.slider("Kantenlänge (Ideal)", 50, 600, st.session_state.cy_ideal_edge_len)
st.session_state.cy_node_repulsion = st.slider("Knoten-Abstoßung", 100000, 2000000, st.session_state.cy_node_repulsion, step=100000) st.session_state.cy_node_repulsion = st.slider("Knoten-Abstoßung", 100000, 5000000, st.session_state.cy_node_repulsion, step=100000)
if st.button("Neu berechnen", key="cy_rerun"): if st.button("Neu berechnen", key="cy_rerun"):
st.rerun() st.rerun()
@ -58,8 +58,10 @@ def render_graph_explorer_cytoscape(graph_service):
# 1. Daten laden # 1. Daten laden
with st.spinner("Lade Graph..."): with st.spinner("Lade Graph..."):
# Wir nutzen die bestehende Logik aus dem Service # Wir holen die Agraph-Objekte vom Service
nodes_data, edges_data = graph_service.get_ego_graph(center_id) nodes_data, edges_data = graph_service.get_ego_graph(center_id)
# Note Data für Editor Button
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,38 +72,49 @@ def render_graph_explorer_cytoscape(graph_service):
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")
# 3. Konvertierung zu Cytoscape JSON # 3. Konvertierung zu Cytoscape JSON Format
cy_elements = [] cy_elements = []
# Nodes konvertieren
for n in nodes_data: for n in nodes_data:
# Node # Wir bauen das 'label' so um, dass lange Titel umbrechen (optional)
label_display = n.label
if len(label_display) > 20: label_display = label_display[:20] + "..."
cy_node = { cy_node = {
"data": { "data": {
"id": n.id, "id": n.id,
"label": n.label, "label": label_display,
"bg_color": n.color, # Wichtig: Eigenes Attribut für Style mapping "full_label": n.label,
"size": 40 if n.id == center_id else 25, "color": n.color,
# Größe skalieren: Center größer
"size": 60 if n.id == center_id else 40,
# Tooltip Inhalt
"tooltip": n.title "tooltip": n.title
}, },
"selected": (n.id == center_id) # Zentrum markieren
"selected": (n.id == center_id)
} }
cy_elements.append(cy_node) cy_elements.append(cy_node)
# Edges konvertieren
for e in edges_data: for e in edges_data:
# Edge Fix: e.to statt e.target nutzen! # FIX: Agraph Edges nutzen .to, nicht .target
# Wir prüfen sicherheitshalber beide Attribute
target_id = getattr(e, "to", getattr(e, "target", None)) target_id = getattr(e, "to", getattr(e, "target", None))
cy_edge = { if target_id:
"data": { cy_edge = {
"source": e.source, "data": {
"target": target_id, # KORRIGIERT "source": e.source,
"label": e.label, "target": target_id,
"line_color": e.color "label": e.label,
"color": e.color
}
} }
} cy_elements.append(cy_edge)
cy_elements.append(cy_edge)
# 4. Stylesheet # 4. Stylesheet (Design Definitionen)
stylesheet = [ stylesheet = [
{ {
"selector": "node", "selector": "node",
@ -109,82 +122,86 @@ 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(bg_color)", # Mapping auf unser data feld "background-color": "data(color)",
"color": "#333", "color": "#333",
"font-size": "12px", "font-size": "14px",
"text-valign": "center", "text-valign": "center",
"text-halign": "center", "text-halign": "center",
"border-width": 2, "border-width": 2,
"border-color": "#fff" "border-color": "#fff",
"text-wrap": "wrap",
"text-max-width": "100px"
} }
}, },
{ {
"selector": "node:selected", "selector": "node:selected",
"style": { "style": {
"border-width": 4, "border-width": 5,
"border-color": "#FF5733" "border-color": "#FF5733",
"background-color": "#FF5733",
"color": "#fff"
} }
}, },
{ {
"selector": "edge", "selector": "edge",
"style": { "style": {
"width": 2, "width": 3,
"line-color": "data(line_color)", "line-color": "data(color)",
"target-arrow-color": "data(line_color)", "target-arrow-color": "data(color)",
"target-arrow-shape": "triangle", "target-arrow-shape": "triangle",
"curve-style": "bezier", "curve-style": "bezier",
"label": "data(label)", "label": "data(label)",
"font-size": "10px", "font-size": "11px",
"color": "#777", "color": "#555",
"text-background-opacity": 1, "text-background-opacity": 0.8,
"text-background-color": "#fff" "text-background-color": "#ffffff",
"text-rotation": "autorotate"
} }
} }
] ]
# 5. Rendering # 5. Rendering mit COSE Layout
# Die Bibliothek gibt eine Liste von geklickten Elementen zurück # COSE ist der Schlüssel für gute Abstände!
clicked_elements = st_cytoscapejs( with st.spinner("Berechne Layout..."):
elements=cy_elements, selected_element = cytoscape(
stylesheet=stylesheet, elements=cy_elements,
layout={ stylesheet=stylesheet,
"name": "cose", layout={
"idealEdgeLength": st.session_state.cy_ideal_edge_len, "name": "cose",
"nodeOverlap": 20, "idealEdgeLength": st.session_state.cy_ideal_edge_len,
"refresh": 20, "nodeOverlap": 20,
"fit": True, "refresh": 20,
"padding": 30, "fit": True,
"randomize": False, "padding": 50,
"componentSpacing": 100, "randomize": False,
"nodeRepulsion": st.session_state.cy_node_repulsion, "componentSpacing": 200,
"edgeElasticity": 100, "nodeRepulsion": st.session_state.cy_node_repulsion,
"nestingFactor": 5, "edgeElasticity": 100,
"gravity": 80, "nestingFactor": 5,
"numIter": 1000, "gravity": 50,
"initialTemp": 200, "numIter": 1000,
"coolingFactor": 0.95, "initialTemp": 200,
"minTemp": 1.0 "coolingFactor": 0.95,
}, "minTemp": 1.0
key="cyto_graph_obj", },
height="800px" key="cyto_graph_obj", # Ein fester Key ist hier okay, da das Layout-Dict sich ändert
) height="700px"
)
# Interaktion: Klick Event verarbeiten # Interaktion: Klick Event verarbeiten
if clicked_elements: # st-cytoscape gibt ein Dictionary zurück
# clicked_elements ist eine Liste von Dictionaries if selected_element:
# Wir suchen nach einem Node-Klick # Prüfen, ob es ein Node-Klick war
for el in clicked_elements: # Die Struktur ist: {'nodes': ['id1', 'id2'], 'edges': [...]}
# Prüfen ob es ein Node ist (hat 'id' aber keine 'source'/'target' im root, clicked_nodes = selected_element.get("nodes", [])
# allerdings liefert die Lib oft die rohen Daten)
# Wir schauen auf die ID. if clicked_nodes:
clicked_id = el.get("data", {}).get("id") if "data" in el else el.get("id") # Wir nehmen den ersten (und meist einzigen) selektierten Node
clicked_id = clicked_nodes[0]
if clicked_id and clicked_id != center_id: if clicked_id and clicked_id != center_id:
# Safety check: ist es eine edge? Edges haben source/target st.session_state.graph_center_id = clicked_id
is_edge = "source" in el.get("data", {}) st.rerun()
if not is_edge:
st.session_state.graph_center_id = clicked_id
st.rerun()
else: else:
st.info("👈 Bitte wähle links eine Notiz aus.") st.info("👈 Bitte wähle links eine Notiz aus.")