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

merken der Einstellungen

Browse Source
This commit is contained in:
Lars 2025-12-14 16:40:13 +01:00
parent cee8fc05c2
commit 9e25e5b26b
1 changed files with 32 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

51
app/frontend/ui_graph_cytoscape.py
View File

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