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

kleine visuelle verbesserung an ui_graph_cytoscape

Browse Source
This commit is contained in:
Lars 2025-12-14 15:42:36 +01:00
parent 582aed61ec
commit eb45d78c47
1 changed files with 28 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

50
app/frontend/ui_graph_cytoscape.py
View File

@ -11,7 +11,7 @@ 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
# Getrennter State für Inspektion vs. Navigation # Getrennter State für Inspektion (Gelber Rahmen) vs. Navigation (Roter Rahmen)
if "graph_inspected_id" not in st.session_state: if "graph_inspected_id" not in st.session_state:
st.session_state.graph_inspected_id = None st.session_state.graph_inspected_id = None
@ -55,7 +55,6 @@ def render_graph_explorer_cytoscape(graph_service):
st.divider() st.divider()
st.caption("Legende") st.caption("Legende")
# Hier zeigen wir die Farben an, die auch im Graphen genutzt werden
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)
@ -63,7 +62,7 @@ def render_graph_explorer_cytoscape(graph_service):
with col_graph: with col_graph:
center_id = st.session_state.graph_center_id center_id = st.session_state.graph_center_id
# Falls noch nichts ausgewählt, initialisiere mit Inspektion oder None # Initialisierung falls leer
if not center_id and st.session_state.graph_inspected_id: if not center_id and st.session_state.graph_inspected_id:
center_id = st.session_state.graph_inspected_id center_id = st.session_state.graph_inspected_id
st.session_state.graph_center_id = center_id st.session_state.graph_center_id = center_id
@ -77,16 +76,18 @@ def render_graph_explorer_cytoscape(graph_service):
# --- DATEN LADEN --- # --- DATEN LADEN ---
with st.spinner(f"Lade Graph (Tiefe {st.session_state.cy_depth})..."): with st.spinner(f"Lade Graph (Tiefe {st.session_state.cy_depth})..."):
# 1. Graph Daten
nodes_data, edges_data = graph_service.get_ego_graph( nodes_data, edges_data = graph_service.get_ego_graph(
center_id, center_id,
depth=st.session_state.cy_depth depth=st.session_state.cy_depth
) )
# Daten für den INSPIZIERTEN Knoten laden # 2. Detail Daten (nur für die Inspektion)
inspected_data = graph_service.get_note_with_full_content(inspected_id) inspected_data = graph_service.get_note_with_full_content(inspected_id)
# --- ACTION BAR (OBEN) --- # --- ACTION BAR ---
action_container = st.container() action_container = st.container()
with action_container: with action_container:
# Info Zeile
c1, c2, c3 = st.columns([2, 1, 1]) c1, c2, c3 = st.columns([2, 1, 1])
with c1: with c1:
@ -98,6 +99,7 @@ def render_graph_explorer_cytoscape(graph_service):
if inspected_id != center_id: if inspected_id != center_id:
if st.button("🎯 Als Zentrum setzen", use_container_width=True, key="cy_nav_btn"): if st.button("🎯 Als Zentrum setzen", use_container_width=True, key="cy_nav_btn"):
st.session_state.graph_center_id = inspected_id st.session_state.graph_center_id = inspected_id
# WICHTIG: Beim Navigieren (Zentrumswechsel) wird neu gerendert
st.rerun() st.rerun()
else: else:
st.caption("_(Ist aktuelles Zentrum)_") st.caption("_(Ist aktuelles Zentrum)_")
@ -111,8 +113,8 @@ def render_graph_explorer_cytoscape(graph_service):
args=(inspected_data,), args=(inspected_data,),
key="cy_edit_btn") key="cy_edit_btn")
# --- INSPECTOR --- # --- INSPECTOR (Standard: Geschlossen) ---
with st.expander("🕵️ Data Inspector (Details)", expanded=True): with st.expander("🕵️ Data Inspector (Details)", expanded=False):
if inspected_data: if inspected_data:
col_i1, col_i2 = st.columns(2) col_i1, col_i2 = st.columns(2)
with col_i1: with col_i1:
@ -129,12 +131,14 @@ def render_graph_explorer_cytoscape(graph_service):
else: else:
st.warning("Keine Daten für Auswahl geladen.") st.warning("Keine Daten für Auswahl geladen.")
# --- GRAPH RENDERING --- # --- GRAPH PREPARATION ---
cy_elements = [] cy_elements = []
# Nodes konvertieren # Nodes
for n in nodes_data: for n in nodes_data:
is_center = (n.id == center_id) 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.
is_inspected = (n.id == inspected_id) is_inspected = (n.id == inspected_id)
tooltip_text = n.title if n.title else n.label tooltip_text = n.title if n.title else n.label
@ -146,7 +150,6 @@ def render_graph_explorer_cytoscape(graph_service):
"data": { "data": {
"id": n.id, "id": n.id,
"label": display_label, "label": display_label,
# WICHTIG: Hier übergeben wir die Farbe an Cytoscape
"bg_color": n.color, "bg_color": n.color,
"tooltip": tooltip_text "tooltip": tooltip_text
}, },
@ -155,7 +158,7 @@ def render_graph_explorer_cytoscape(graph_service):
} }
cy_elements.append(cy_node) cy_elements.append(cy_node)
# Edges konvertieren # Edges
for e in edges_data: for e in edges_data:
target_id = getattr(e, "to", getattr(e, "target", None)) target_id = getattr(e, "to", getattr(e, "target", None))
if target_id: if target_id:
@ -169,14 +172,13 @@ def render_graph_explorer_cytoscape(graph_service):
} }
cy_elements.append(cy_edge) cy_elements.append(cy_edge)
# Stylesheet definieren # Stylesheet
stylesheet = [ stylesheet = [
{ {
"selector": "node", "selector": "node",
"style": { "style": {
"label": "data(label)", "label": "data(label)",
"width": "30px", "height": "30px", "width": "30px", "height": "30px",
# HIER NUTZEN WIR DIE FARBE:
"background-color": "data(bg_color)", "background-color": "data(bg_color)",
"color": "#333", "font-size": "12px", "color": "#333", "font-size": "12px",
"text-valign": "center", "text-halign": "center", "text-valign": "center", "text-halign": "center",
@ -185,23 +187,21 @@ def render_graph_explorer_cytoscape(graph_service):
"title": "data(tooltip)" "title": "data(tooltip)"
} }
}, },
# Style für Selektion (Gelb)
{ {
"selector": "node:selected", "selector": "node:selected",
"style": { "style": {
"border-width": 6, "border-width": 6,
"border-color": "#FFC300", "border-color": "#FFC300", # Gelb = Inspektion
"width": "50px", "height": "50px", "width": "50px", "height": "50px",
"font-weight": "bold", "font-weight": "bold",
"z-index": 999 "z-index": 999
} }
}, },
# Style für Zentrum (Rot)
{ {
"selector": ".center", "selector": ".center",
"style": { "style": {
"border-width": 4, "border-width": 4,
"border-color": "#FF5733", "border-color": "#FF5733", # Rot = Zentrum
"width": "40px", "height": "40px" "width": "40px", "height": "40px"
} }
}, },
@ -220,8 +220,11 @@ def render_graph_explorer_cytoscape(graph_service):
} }
] ]
# Render Graph # --- RENDERING (STABLE KEY) ---
graph_key = f"cy_{center_id}_{st.session_state.cy_depth}_{st.session_state.cy_ideal_edge_len}" # 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}"
clicked_elements = cytoscape( clicked_elements = cytoscape(
elements=cy_elements, elements=cy_elements,
@ -235,19 +238,22 @@ def render_graph_explorer_cytoscape(graph_service):
"edgeElasticity": 100, "nestingFactor": 5, "gravity": 80, "edgeElasticity": 100, "nestingFactor": 5, "gravity": 80,
"numIter": 1000, "initialTemp": 200, "coolingFactor": 0.95, "minTemp": 1.0 "numIter": 1000, "initialTemp": 200, "coolingFactor": 0.95, "minTemp": 1.0
}, },
key=graph_key, key=graph_key,
height="700px" height="700px"
) )
# --- EVENT HANDLING (Nur Selektion ändern) --- # --- SELECTION HANDLING ---
if clicked_elements: if clicked_elements:
clicked_nodes = clicked_elements.get("nodes", []) clicked_nodes = clicked_elements.get("nodes", [])
if clicked_nodes: if clicked_nodes:
clicked_id = clicked_nodes[0] clicked_id = clicked_nodes[0]
# Nur Inspektion ändern, NICHT das Zentrum neu laden # Wenn auf einen neuen Knoten geklickt wurde:
if clicked_id != st.session_state.graph_inspected_id: if clicked_id != st.session_state.graph_inspected_id:
# 1. State aktualisieren (Inspektion verschieben)
st.session_state.graph_inspected_id = clicked_id 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() st.rerun()
else: else: