WP19 #10
|
|
@ -17,14 +17,17 @@ try:
|
|||
from ui_config import QDRANT_URL, QDRANT_KEY, COLLECTION_PREFIX
|
||||
from ui_graph_service import GraphExplorerService
|
||||
|
||||
# Neue modulare Komponenten
|
||||
# Komponenten
|
||||
from ui_sidebar import render_sidebar
|
||||
from ui_chat import render_chat_interface
|
||||
from ui_editor import render_manual_editor
|
||||
from ui_graph import render_graph_explorer
|
||||
|
||||
# Die beiden Graph-Engines
|
||||
from ui_graph import render_graph_explorer as render_graph_agraph
|
||||
from ui_graph_cytoscape import render_graph_explorer_cytoscape # <-- Import
|
||||
|
||||
except ImportError as e:
|
||||
st.error(f"Import Error: {e}. Bitte stelle sicher, dass alle UI-Dateien im Ordner liegen.")
|
||||
st.error(f"Import Error: {e}. Bitte stelle sicher, dass alle UI-Dateien im Ordner liegen und 'streamlit-cytoscapejs' installiert ist.")
|
||||
st.stop()
|
||||
|
||||
# --- SESSION STATE ---
|
||||
|
|
@ -41,5 +44,7 @@ if mode == "💬 Chat":
|
|||
render_chat_interface(top_k, explain)
|
||||
elif mode == "📝 Manueller Editor":
|
||||
render_manual_editor()
|
||||
elif mode == "🕸️ Graph Explorer":
|
||||
render_graph_explorer(graph_service)
|
||||
elif mode == "🕸️ Graph (Agraph)":
|
||||
render_graph_agraph(graph_service)
|
||||
elif mode == "🕸️ Graph (Cytoscape)":
|
||||
render_graph_explorer_cytoscape(graph_service)
|
||||
187
app/frontend/ui_graph_cytoscape.py
Normal file
187
app/frontend/ui_graph_cytoscape.py
Normal file
|
|
@ -0,0 +1,187 @@
|
|||
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)")
|
||||
|
||||
if "graph_center_id" not in st.session_state:
|
||||
st.session_state.graph_center_id = None
|
||||
|
||||
# Layout Defaults für COSE (besser als Physik)
|
||||
st.session_state.setdefault("cy_node_repulsion", 1000000) # Starke Abstoßung
|
||||
st.session_state.setdefault("cy_ideal_edge_len", 150) # Ziel-Abstand
|
||||
|
||||
col_ctrl, col_graph = st.columns([1, 4])
|
||||
|
||||
# --- CONTROLS ---
|
||||
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"):
|
||||
st.session_state.graph_center_id = options[selected_title]
|
||||
st.rerun()
|
||||
|
||||
st.divider()
|
||||
with st.expander("👁️ Layout Einstellungen", expanded=True):
|
||||
st.caption("COSE Layout (Spezialisiert auf Abstand)")
|
||||
st.session_state.cy_ideal_edge_len = st.slider("Kantenlänge", 50, 500, 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)
|
||||
|
||||
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)
|
||||
|
||||
# --- GRAPH AREA ---
|
||||
with col_graph:
|
||||
center_id = st.session_state.graph_center_id
|
||||
|
||||
if center_id:
|
||||
action_container = st.container()
|
||||
|
||||
# 1. Daten laden
|
||||
with st.spinner("Lade Graph..."):
|
||||
# Wir nutzen die bestehende Logik aus dem Service
|
||||
# get_ego_graph liefert Agraph-Objekte, die wir gleich konvertieren
|
||||
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)
|
||||
|
||||
# 2. Action Bar
|
||||
with action_container:
|
||||
c1, c2 = st.columns([3, 1])
|
||||
with c1: st.caption(f"Zentrum: **{center_id}**")
|
||||
with c2:
|
||||
if note_data:
|
||||
st.button("📝 Bearbeiten", use_container_width=True, on_click=switch_to_editor_callback, args=(note_data,), key="cy_edit")
|
||||
|
||||
# 3. Konvertierung zu Cytoscape JSON Format
|
||||
cy_elements = []
|
||||
|
||||
# Nodes konvertieren
|
||||
for n in nodes_data:
|
||||
# Agraph Node -> Cytoscape Element
|
||||
# Wir nutzen n.id, n.label, n.color aus dem Agraph Objekt
|
||||
cy_node = {
|
||||
"data": {
|
||||
"id": n.id,
|
||||
"label": n.label,
|
||||
"color": n.color,
|
||||
"size": 40 if n.id == center_id else 25,
|
||||
# Tooltip Inhalt steht in n.title (aus graph_service)
|
||||
"tooltip": n.title
|
||||
},
|
||||
"selected": (n.id == center_id)
|
||||
}
|
||||
cy_elements.append(cy_node)
|
||||
|
||||
# Edges konvertieren
|
||||
for e in edges_data:
|
||||
cy_edge = {
|
||||
"data": {
|
||||
"source": e.source,
|
||||
"target": e.target,
|
||||
"label": e.label,
|
||||
"color": e.color
|
||||
}
|
||||
}
|
||||
cy_elements.append(cy_edge)
|
||||
|
||||
# 4. Stylesheet (Design)
|
||||
stylesheet = [
|
||||
{
|
||||
"selector": "node",
|
||||
"style": {
|
||||
"label": "data(label)",
|
||||
"width": "data(size)",
|
||||
"height": "data(size)",
|
||||
"background-color": "data(color)",
|
||||
"color": "#333",
|
||||
"font-size": "12px",
|
||||
"text-valign": "center",
|
||||
"text-halign": "center",
|
||||
"border-width": 2,
|
||||
"border-color": "#fff",
|
||||
"content": "data(label)"
|
||||
}
|
||||
},
|
||||
{
|
||||
"selector": "node:selected",
|
||||
"style": {
|
||||
"border-width": 4,
|
||||
"border-color": "#FF5733"
|
||||
}
|
||||
},
|
||||
{
|
||||
"selector": "edge",
|
||||
"style": {
|
||||
"width": 2,
|
||||
"line-color": "data(color)",
|
||||
"target-arrow-color": "data(color)",
|
||||
"target-arrow-shape": "triangle",
|
||||
"curve-style": "bezier",
|
||||
"label": "data(label)",
|
||||
"font-size": "10px",
|
||||
"color": "#777",
|
||||
"text-background-opacity": 1,
|
||||
"text-background-color": "#fff"
|
||||
}
|
||||
}
|
||||
]
|
||||
|
||||
# 5. Rendering mit COSE Layout
|
||||
# COSE ist der beste Algorithmus für "Non-Overlapping" Graphen
|
||||
selected_node = cytoscape(
|
||||
elements=cy_elements,
|
||||
stylesheet=stylesheet,
|
||||
layout={
|
||||
"name": "cose",
|
||||
"idealEdgeLength": st.session_state.cy_ideal_edge_len,
|
||||
"nodeOverlap": 20,
|
||||
"refresh": 20,
|
||||
"fit": True,
|
||||
"padding": 30,
|
||||
"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
|
||||
},
|
||||
key="cyto_graph_obj",
|
||||
height="800px"
|
||||
)
|
||||
|
||||
# Interaktion: Klick Event
|
||||
# Cytoscape gibt eine Liste zurück (z.B. {'nodes': ['id1'], 'edges': []})
|
||||
if selected_node:
|
||||
clicked_nodes = selected_node.get("nodes", [])
|
||||
if clicked_nodes:
|
||||
clicked_id = clicked_nodes[0]
|
||||
if clicked_id and clicked_id != center_id:
|
||||
st.session_state.graph_center_id = clicked_id
|
||||
st.rerun()
|
||||
|
||||
else:
|
||||
st.info("👈 Bitte wähle links eine Notiz aus.")
|
||||
|
|
@ -12,7 +12,12 @@ def render_sidebar():
|
|||
|
||||
mode = st.radio(
|
||||
"Modus",
|
||||
["💬 Chat", "📝 Manueller Editor", "🕸️ Graph Explorer"],
|
||||
[
|
||||
"💬 Chat",
|
||||
"📝 Manueller Editor",
|
||||
"🕸️ Graph (Agraph)",
|
||||
"🕸️ Graph (Cytoscape)" # <-- Neuer Punkt
|
||||
],
|
||||
key="sidebar_mode_selection"
|
||||
)
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user