add interactive dependency graph view to dashboard

Canvas-based force-directed graph for exploring package dependencies.
Nodes show short names with full path on hover tooltip (with size/dep info).
Supports pan, zoom, node drag, click-to-expand, double-click to promote
nodes to root, right-click to demote. Includes side panel with browsable
entry tree and filter. Linked from project page and entry detail page.

1 files changed, 97 insertions, 0 deletions

diff --git a/src/zenserver/frontend/html/zen.css b/src/zenserver/frontend/html/zen.css
index cc53c0519..cc9cd30e8 100644
--- a/src/zenserver/frontend/html/zen.css
+++ b/src/zenserver/frontend/html/zen.css
@@ -503,3 +503,100 @@ html:has(#map) {
 		}
 	}
 }
+
+/* graph -------------------------------------------------------------------- */
+
+html:has(#graph) {
+	height: 100%;
+	body, #container, #graph {
+		height:						100%;
+	}
+}
+#graph {
+	#graph_view {
+		position:					relative;
+		display:					flex;
+		gap:						0;
+		canvas {
+			flex:					1;
+			min-width:				0;
+			border:					1px solid var(--theme_g2);
+			cursor:					grab;
+		}
+		canvas:active {
+			cursor:					grabbing;
+		}
+	}
+	#graph_entries {
+		width:						22em;
+		border:						1px solid var(--theme_g2);
+		border-left:				none;
+		display:					flex;
+		flex-direction:				column;
+		overflow:					hidden;
+		> input {
+			width:					100%;
+			border:					none;
+			border-bottom:			1px solid var(--theme_g2);
+			padding:				0.4em 0.6em;
+			font-size:				0.9em;
+		}
+		#graph_entries_list {
+			overflow-y:				auto;
+			flex:					1;
+			> div {
+				padding:			0.2em 0.6em;
+				cursor:				pointer;
+				font-size:			0.85em;
+				white-space:		nowrap;
+				overflow:			hidden;
+				text-overflow:		ellipsis;
+			}
+			> div:hover {
+				background-color:	var(--theme_p4);
+			}
+			.graph_entry_dir {
+				font-weight:		bold;
+			}
+			.graph_entry_leaf {
+				color:				var(--theme_ln);
+			}
+			.graph_entries_more {
+				color:				var(--theme_g1);
+				cursor:				default;
+			}
+		}
+	}
+	#graph_search_results {
+		position:					absolute;
+		z-index:					1;
+		background-color:			var(--theme_g4);
+		border:						1px solid var(--theme_g2);
+		max-height:					20em;
+		overflow-y:					auto;
+		width:						30em;
+		> div {
+			padding:				0.3em 0.75em;
+			cursor:					pointer;
+		}
+		> div:hover {
+			background-color:		var(--theme_p4);
+		}
+	}
+	#graph_legend {
+		display:					flex;
+		gap:						1.5em;
+		margin-top:					0.5em;
+		font-size:					0.85em;
+		> div {
+			display:				flex;
+			align-items:			center;
+			gap:					0.3em;
+		}
+		.legend_swatch {
+			width:					1.5em;
+			height:					0.3em;
+			display:				inline-block;
+		}
+	}
+}