WP19 #10
|
|
@ -11,7 +11,6 @@ def render_graph_explorer_cytoscape(graph_service):
|
|||
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
|
||||
|
||||
|
|
@ -22,7 +21,7 @@ def render_graph_explorer_cytoscape(graph_service):
|
|||
|
||||
col_ctrl, col_graph = st.columns([1, 4])
|
||||
|
||||
# --- LINKES PANEL: SUCHE & SETTINGS ---
|
||||
# --- LINKES PANEL ---
|
||||
with col_ctrl:
|
||||
st.subheader("Fokus")
|
||||
search_term = st.text_input("Suche Notiz", placeholder="Titel eingeben...", key="cy_search")
|
||||
|
|
@ -58,17 +57,16 @@ def render_graph_explorer_cytoscape(graph_service):
|
|||
for k, v in list(GRAPH_COLORS.items())[:8]:
|
||||
st.markdown(f"<span style='color:{v}'>●</span> {k}", unsafe_allow_html=True)
|
||||
|
||||
# --- RECHTES PANEL: GRAPH & INSPECTOR ---
|
||||
# --- RECHTES PANEL ---
|
||||
with col_graph:
|
||||
center_id = st.session_state.graph_center_id
|
||||
|
||||
# Initialisierung falls leer
|
||||
# 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:
|
||||
# Sync: Wenn Inspection None ist, setze auf Center
|
||||
if not st.session_state.graph_inspected_id:
|
||||
st.session_state.graph_inspected_id = center_id
|
||||
|
||||
|
|
@ -76,33 +74,30 @@ def render_graph_explorer_cytoscape(graph_service):
|
|||
|
||||
# --- DATEN LADEN ---
|
||||
with st.spinner(f"Lade Graph (Tiefe {st.session_state.cy_depth})..."):
|
||||
# 1. Graph Daten
|
||||
nodes_data, edges_data = graph_service.get_ego_graph(
|
||||
center_id,
|
||||
depth=st.session_state.cy_depth
|
||||
)
|
||||
# 2. Detail Daten (nur für die Inspektion)
|
||||
# Daten nur 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:
|
||||
# Info Zeile
|
||||
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"**Ausgewählt:** {title_show}")
|
||||
st.info(f"**Info:** {title_show}")
|
||||
|
||||
with c2:
|
||||
# NAVIGATION: Nur wenn Inspiziert != Zentrum
|
||||
# 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
|
||||
# WICHTIG: Beim Navigieren (Zentrumswechsel) wird neu gerendert
|
||||
st.rerun()
|
||||
else:
|
||||
st.caption("_(Ist aktuelles Zentrum)_")
|
||||
st.caption("_(Zentrum)_")
|
||||
|
||||
with c3:
|
||||
# EDITIEREN
|
||||
|
|
@ -113,8 +108,8 @@ def render_graph_explorer_cytoscape(graph_service):
|
|||
args=(inspected_data,),
|
||||
key="cy_edit_btn")
|
||||
|
||||
# --- INSPECTOR (Standard: Geschlossen) ---
|
||||
with st.expander("🕵️ Data Inspector (Details)", expanded=False):
|
||||
# --- DATA INSPECTOR (Eingeklappt für mehr Platz) ---
|
||||
with st.expander("🕵️ Data Inspector", expanded=False):
|
||||
if inspected_data:
|
||||
col_i1, col_i2 = st.columns(2)
|
||||
with col_i1:
|
||||
|
|
@ -122,23 +117,18 @@ def render_graph_explorer_cytoscape(graph_service):
|
|||
st.markdown(f"**Typ:** `{inspected_data.get('type')}`")
|
||||
with col_i2:
|
||||
st.markdown(f"**Tags:** {', '.join(inspected_data.get('tags', []))}")
|
||||
path_str = inspected_data.get('path') or inspected_data.get('file_path') or "N/A"
|
||||
st.markdown(f"**Pfad:** `{path_str}`")
|
||||
|
||||
st.divider()
|
||||
content_preview = inspected_data.get('fulltext', '')[:600]
|
||||
st.text_area("Inhalt (Vorschau)", content_preview + "...", height=150, disabled=True)
|
||||
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 für Auswahl geladen.")
|
||||
st.warning("Keine Daten geladen.")
|
||||
|
||||
# --- GRAPH PREPARATION ---
|
||||
# --- GRAPH ELEMENTS ---
|
||||
cy_elements = []
|
||||
|
||||
# Nodes
|
||||
for n in nodes_data:
|
||||
is_center = (n.id == center_id)
|
||||
# Nur der aktuell inspizierte Knoten bekommt 'selected: True'.
|
||||
# Alle anderen bekommen automatisch False. Das löst das "Abwahl"-Problem.
|
||||
# Selektion wird visuell übergeben
|
||||
is_inspected = (n.id == inspected_id)
|
||||
|
||||
tooltip_text = n.title if n.title else n.label
|
||||
|
|
@ -158,7 +148,6 @@ def render_graph_explorer_cytoscape(graph_service):
|
|||
}
|
||||
cy_elements.append(cy_node)
|
||||
|
||||
# Edges
|
||||
for e in edges_data:
|
||||
target_id = getattr(e, "to", getattr(e, "target", None))
|
||||
if target_id:
|
||||
|
|
@ -172,7 +161,7 @@ def render_graph_explorer_cytoscape(graph_service):
|
|||
}
|
||||
cy_elements.append(cy_edge)
|
||||
|
||||
# Stylesheet
|
||||
# --- STYLESHEET ---
|
||||
stylesheet = [
|
||||
{
|
||||
"selector": "node",
|
||||
|
|
@ -187,21 +176,22 @@ def render_graph_explorer_cytoscape(graph_service):
|
|||
"title": "data(tooltip)"
|
||||
}
|
||||
},
|
||||
# Selektierter Knoten (Gelb)
|
||||
{
|
||||
"selector": "node:selected",
|
||||
"style": {
|
||||
"border-width": 6,
|
||||
"border-color": "#FFC300", # Gelb = Inspektion
|
||||
"border-color": "#FFC300",
|
||||
"width": "50px", "height": "50px",
|
||||
"font-weight": "bold",
|
||||
"z-index": 999
|
||||
"font-weight": "bold"
|
||||
}
|
||||
},
|
||||
# Zentrum (Rot)
|
||||
{
|
||||
"selector": ".center",
|
||||
"style": {
|
||||
"border-width": 4,
|
||||
"border-color": "#FF5733", # Rot = Zentrum
|
||||
"border-color": "#FF5733",
|
||||
"width": "40px", "height": "40px"
|
||||
}
|
||||
},
|
||||
|
|
@ -220,40 +210,56 @@ def render_graph_explorer_cytoscape(graph_service):
|
|||
}
|
||||
]
|
||||
|
||||
# --- RENDERING (STABLE KEY) ---
|
||||
# WICHTIG: Der Key darf NICHT 'inspected_id' enthalten!
|
||||
# Nur wenn sich das ZENTRUM oder das LAYOUT ändert, darf die Komponente
|
||||
# neu initialisiert werden. Bei reiner Selektion bleibt der Key gleich.
|
||||
graph_key = f"cy_{center_id}_{st.session_state.cy_depth}_{st.session_state.cy_ideal_edge_len}_{st.session_state.cy_node_repulsion}"
|
||||
# --- CONFIG: SINGLE SELECT ---
|
||||
# Das erzwingt, dass beim Klicken einer Node die anderen deselektiert werden
|
||||
cy_config = {
|
||||
"selectionType": "single",
|
||||
"boxSelectionEnabled": False,
|
||||
"userZoomingEnabled": True,
|
||||
"userPanningEnabled": True
|
||||
}
|
||||
|
||||
# --- RENDER ---
|
||||
# Stable Key: Ändert sich NICHT bei Inspektion, nur bei Zentrum/Layout
|
||||
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
|
||||
layout={
|
||||
"name": "cose",
|
||||
"idealEdgeLength": st.session_state.cy_ideal_edge_len,
|
||||
"nodeOverlap": 20, "refresh": 20, "fit": True, "padding": 50,
|
||||
"randomize": False, "componentSpacing": 100,
|
||||
"nodeOverlap": 20,
|
||||
"refresh": 20,
|
||||
"fit": True,
|
||||
"padding": 50,
|
||||
"randomize": False, # WICHTIG gegen das Springen!
|
||||
"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
|
||||
"edgeElasticity": 100,
|
||||
"nestingFactor": 5,
|
||||
"gravity": 80,
|
||||
"numIter": 1000,
|
||||
"initialTemp": 200,
|
||||
"coolingFactor": 0.95,
|
||||
"minTemp": 1.0,
|
||||
"animate": False # Animation aus, damit es sofort stabil ist
|
||||
},
|
||||
config=cy_config, # Config Objekt übergeben
|
||||
key=graph_key,
|
||||
height="700px"
|
||||
)
|
||||
|
||||
# --- SELECTION HANDLING ---
|
||||
# --- INTERACTION ---
|
||||
if clicked_elements:
|
||||
clicked_nodes = clicked_elements.get("nodes", [])
|
||||
if clicked_nodes:
|
||||
clicked_id = clicked_nodes[0]
|
||||
|
||||
# Wenn auf einen neuen Knoten geklickt wurde:
|
||||
# Wenn neuer Knoten geklickt wurde -> Inspektion ändern
|
||||
if clicked_id != st.session_state.graph_inspected_id:
|
||||
# 1. State aktualisieren (Inspektion verschieben)
|
||||
st.session_state.graph_inspected_id = clicked_id
|
||||
# 2. Rerun triggern, um UI (Inspector/Buttons) zu aktualisieren
|
||||
# Da der graph_key sich NICHT ändert, bleibt der Graph stabil!
|
||||
st.rerun()
|
||||
|
||||
else:
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user