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 +32 -19
1 changed files with 32 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 9e25e5b26b - Show all commits

51
app/frontend/ui_graph_cytoscape.py
View File

@ -10,11 +10,11 @@ def render_graph_explorer_cytoscape(graph_service):
# ---------------------------------------------------------
# 1. STATE MANAGEMENT
# ---------------------------------------------------------
# Das aktive Zentrum des Graphen (bestimmt welche Knoten geladen werden)
# Graph Zentrum (Roter Rahmen, bestimmt die geladenen Daten)
if "graph_center_id" not in st.session_state:
st.session_state.graph_center_id = None
# Der aktuell inspizierte Knoten (bestimmt Inspector & Editor Inhalt)
# Inspizierter Knoten (Gelber Rahmen, bestimmt Inspector & Editor)
# Getrennt vom Zentrum, damit man klicken kann ohne neu zu laden.
if "graph_inspected_id" not in st.session_state:
st.session_state.graph_inspected_id = None
@ -129,7 +129,7 @@ def render_graph_explorer_cytoscape(graph_service):
args=(inspected_data,),
key="cy_edit_btn")
# --- DATA INSPECTOR ---
# --- DATA INSPECTOR (Raw Data restored!) ---
with st.expander("🕵️ Data Inspector (Details)", expanded=False):
if inspected_data:
# Spalte 1: IDs und Typen
@ -173,6 +173,8 @@ def render_graph_explorer_cytoscape(graph_service):
classes = []
if n.id == center_id:
classes.append("center")
# Wir markieren den inspizierten Knoten visuell
if n.id == inspected_id:
classes.append("inspected")
@ -190,8 +192,8 @@ def render_graph_explorer_cytoscape(graph_service):
"tooltip": tooltip_text
},
"classes": " ".join(classes),
# Wir nutzen KEINE interne Selektion (:selected),
# sondern steuern das Aussehen über die Klasse .inspected
# WICHTIG: Wir deaktivieren die interne Selektion (:selected) komplett
# und nutzen nur unsere CSS Klassen (.inspected), um Mehrfachauswahl zu verhindern.
"selected": False
}
cy_elements.append(cy_node)
@ -217,22 +219,28 @@ def render_graph_explorer_cytoscape(graph_service):
"selector": "node",
"style": {
"label": "data(label)",
"width": "30px", "height": "30px",
"width": "30px",
"height": "30px",
"background-color": "data(bg_color)",
"color": "#333", "font-size": "12px",
"text-valign": "center", "text-halign": "center",
"text-wrap": "wrap", "text-max-width": "90px",
"border-width": 2, "border-color": "#fff",
"color": "#333",
"font-size": "12px",
"text-valign": "center",
"text-halign": "center",
"text-wrap": "wrap",
"text-max-width": "90px",
"border-width": 2,
"border-color": "#fff",
"title": "data(tooltip)" # Hover Text
}
},
# INSPECTED (Gelber Rahmen)
# INSPECTED (Gelber Rahmen) - Ersetzt :selected
{
"selector": ".inspected",
"style": {
"border-width": 6,
"border-color": "#FFC300",
"width": "50px", "height": "50px",
"border-color": "#FFC300", # Gelb/Gold
"width": "50px",
"height": "50px",
"font-weight": "bold",
"z-index": 999
}
@ -242,8 +250,9 @@ def render_graph_explorer_cytoscape(graph_service):
"selector": ".center",
"style": {
"border-width": 4,
"border-color": "#FF5733",
"width": "40px", "height": "40px"
"border-color": "#FF5733", # Rot
"width": "40px",
"height": "40px"
}
},
# CENTER + INSPECTED (Kombination)
@ -251,16 +260,18 @@ def render_graph_explorer_cytoscape(graph_service):
"selector": ".center.inspected",
"style": {
"border-width": 6,
"border-color": "#FF5733", # Zentrum Farbe dominiert
"width": "55px", "height": "55px"
"border-color": "#FF5733", # Rot gewinnt (oder Mix)
"width": "55px",
"height": "55px"
}
},
# SELECT STATE OVERRIDE (Verstecken des Standard-Rahmens)
# NATIVE SELEKTION (Unterdrücken)
# Das verhindert das "blaue Leuchten" oder Rahmen von Cytoscape selbst
{
"selector": "node:selected",
"style": {
"overlay-opacity": 0,
"border-width": 0,
"overlay-opacity": 0
}
},
# EDGE STYLE
@ -282,6 +293,7 @@ def render_graph_explorer_cytoscape(graph_service):
# ---------------------------------------------------------
# 5. RENDERING
# ---------------------------------------------------------
# KEY STRATEGIE:
# Der Key bestimmt, wann der Graph komplett neu gebaut wird.
# Wir nutzen hier center_id und settings.
# NICHT inspected_id -> Das verhindert das Springen beim Klicken!
@ -320,6 +332,7 @@ def render_graph_explorer_cytoscape(graph_service):
clicked_nodes = clicked_elements.get("nodes", [])
if clicked_nodes:
# Wir nehmen die erste Node aus dem Event
clicked_id = clicked_nodes[0]
# Wenn auf einen neuen Knoten geklickt wurde: