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

neu Strategie zum Node Select

Browse Source
This commit is contained in:
Lars 2025-12-14 16:22:48 +01:00
parent 8772271648
commit 48de6aed8c
1 changed files with 60 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

83
app/frontend/ui_graph_cytoscape.py
View File

@ -11,7 +11,6 @@ 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 (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
@ -22,7 +21,7 @@ def render_graph_explorer_cytoscape(graph_service):
col_ctrl, col_graph = st.columns([1, 4]) col_ctrl, col_graph = st.columns([1, 4])
# --- LINKES PANEL --- # --- LINKES PANEL: SUCHE & SETTINGS ---
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")
@ -58,7 +57,7 @@ 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)
# --- RECHTES PANEL --- # --- RECHTES PANEL: GRAPH & INSPECTOR ---
with col_graph: with col_graph:
center_id = st.session_state.graph_center_id center_id = st.session_state.graph_center_id
@ -68,6 +67,7 @@ def render_graph_explorer_cytoscape(graph_service):
st.session_state.graph_center_id = center_id st.session_state.graph_center_id = center_id
if center_id: if center_id:
# Sync: Wenn Inspection None ist, setze auf Center
if not st.session_state.graph_inspected_id: if not st.session_state.graph_inspected_id:
st.session_state.graph_inspected_id = center_id st.session_state.graph_inspected_id = center_id
@ -75,11 +75,12 @@ 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 INSPECTOR laden # 2. Detail Daten (nur für den Inspector)
inspected_data = graph_service.get_note_with_full_content(inspected_id) inspected_data = graph_service.get_note_with_full_content(inspected_id)
# --- ACTION BAR --- # --- ACTION BAR ---
@ -89,7 +90,7 @@ def render_graph_explorer_cytoscape(graph_service):
with c1: with c1:
title_show = inspected_data.get('title', inspected_id) if inspected_data else inspected_id title_show = inspected_data.get('title', inspected_id) if inspected_data else inspected_id
st.info(f"**Info:** {title_show}") st.info(f"**Ausgewählt:** {title_show}")
with c2: with c2:
# NAVIGATION # NAVIGATION
@ -98,7 +99,7 @@ def render_graph_explorer_cytoscape(graph_service):
st.session_state.graph_center_id = inspected_id st.session_state.graph_center_id = inspected_id
st.rerun() st.rerun()
else: else:
st.caption("_(Zentrum)_") st.caption("_(Ist aktuelles Zentrum)_")
with c3: with c3:
# EDITIEREN # EDITIEREN
@ -128,9 +129,10 @@ def render_graph_explorer_cytoscape(graph_service):
cy_elements = [] cy_elements = []
for n in nodes_data: for n in nodes_data:
is_center = (n.id == center_id) # Logik: Wir vergeben Klassen statt Selection-State
# Selektion wird visuell über Stylesheet gesteuert classes = []
is_inspected = (n.id == inspected_id) if n.id == center_id: classes.append("center")
if n.id == inspected_id: classes.append("inspected")
tooltip_text = n.title if n.title else n.label tooltip_text = n.title if n.title else n.label
display_label = n.label display_label = n.label
@ -144,8 +146,8 @@ def render_graph_explorer_cytoscape(graph_service):
"bg_color": n.color, "bg_color": n.color,
"tooltip": tooltip_text "tooltip": tooltip_text
}, },
"selected": is_inspected, "classes": " ".join(classes),
"classes": "center" if is_center else "" "selected": False # Wir deaktivieren die interne Selektion beim Init
} }
cy_elements.append(cy_node) cy_elements.append(cy_node)
@ -162,7 +164,7 @@ def render_graph_explorer_cytoscape(graph_service):
} }
cy_elements.append(cy_edge) cy_elements.append(cy_edge)
# --- STYLESHEET --- # --- STYLESHEET (Klassen-basiert) ---
stylesheet = [ stylesheet = [
{ {
"selector": "node", "selector": "node",
@ -177,23 +179,44 @@ def render_graph_explorer_cytoscape(graph_service):
"title": "data(tooltip)" "title": "data(tooltip)"
} }
}, },
# Klasse .inspected = Gelber Rahmen (Ersetzt :selected)
{ {
"selector": "node:selected", "selector": ".inspected",
"style": { "style": {
"border-width": 6, "border-width": 6,
"border-color": "#FFC300", "border-color": "#FFC300", # Gelb/Gold
"width": "50px", "height": "50px", "width": "50px", "height": "50px",
"font-weight": "bold" "font-weight": "bold",
"z-index": 999
} }
}, },
# Klasse .center = Roter Rahmen
{ {
"selector": ".center", "selector": ".center",
"style": { "style": {
"border-width": 4, "border-width": 4,
"border-color": "#FF5733", "border-color": "#FF5733", # Rot
"width": "40px", "height": "40px" "width": "40px", "height": "40px"
} }
}, },
# Wenn beides zutrifft (Zentrum ist inspiziert)
{
"selector": ".center.inspected",
"style": {
"border-width": 6,
"border-color": "#FF5733", # Rot gewinnt oder Mix
"width": "55px", "height": "55px"
}
},
# Interne Selektion unsichtbar machen oder angleichen
{
"selector": "node:selected",
"style": {
"overlay-opacity": 0, # Kein blauer Schleier
"border-width": 6,
"border-color": "#FFC300" # Feedback beim Klick
}
},
{ {
"selector": "edge", "selector": "edge",
"style": { "style": {
@ -210,12 +233,14 @@ def render_graph_explorer_cytoscape(graph_service):
] ]
# --- RENDER --- # --- RENDER ---
# KEY-STRATEGIE:
# Der Key hängt NUR vom Zentrum und den Settings ab.
# Wenn sich inspected_id ändert, bleibt der Key GLEICH -> Kein Re-Layout, nur Style-Update.
graph_key = f"cy_{center_id}_{st.session_state.cy_depth}_{st.session_state.cy_ideal_edge_len}" graph_key = f"cy_{center_id}_{st.session_state.cy_depth}_{st.session_state.cy_ideal_edge_len}"
clicked_elements = cytoscape( clicked_elements = cytoscape(
elements=cy_elements, elements=cy_elements,
stylesheet=stylesheet, stylesheet=stylesheet,
# Layout Config (config Argument entfernt!)
layout={ layout={
"name": "cose", "name": "cose",
"idealEdgeLength": st.session_state.cy_ideal_edge_len, "idealEdgeLength": st.session_state.cy_ideal_edge_len,
@ -223,7 +248,7 @@ def render_graph_explorer_cytoscape(graph_service):
"refresh": 20, "refresh": 20,
"fit": True, "fit": True,
"padding": 50, "padding": 50,
"randomize": False, "randomize": False, # WICHTIG gegen Springen
"componentSpacing": 100, "componentSpacing": 100,
"nodeRepulsion": st.session_state.cy_node_repulsion, "nodeRepulsion": st.session_state.cy_node_repulsion,
"edgeElasticity": 100, "edgeElasticity": 100,
@ -239,15 +264,27 @@ def render_graph_explorer_cytoscape(graph_service):
height="700px" height="700px"
) )
# --- INTERACTION --- # --- EVENT HANDLING ---
if clicked_elements: if clicked_elements:
clicked_nodes = clicked_elements.get("nodes", []) clicked_nodes = clicked_elements.get("nodes", [])
# Wir suchen nach der Node, die neu angeklickt wurde
if clicked_nodes: if clicked_nodes:
clicked_id = clicked_nodes[0] # Wir nehmen die letzte Node in der Liste (meistens die neu geklickte)
# oder filtern nach der, die nicht schon inspected ist
candidate_id = None
# Wenn neuer Knoten geklickt wurde -> Inspektion ändern # Strategie: Wenn Liste > 1, nimm die ID die NICHT inspected_id ist
if clicked_id != st.session_state.graph_inspected_id: if len(clicked_nodes) > 1:
st.session_state.graph_inspected_id = clicked_id for nid in clicked_nodes:
if nid != st.session_state.graph_inspected_id:
candidate_id = nid
break
else:
candidate_id = clicked_nodes[0]
if candidate_id and candidate_id != st.session_state.graph_inspected_id:
st.session_state.graph_inspected_id = candidate_id
st.rerun() st.rerun()
else: else: