diff --git a/railiance_fabric/graph_explorer.py b/railiance_fabric/graph_explorer.py
index 6200cfb..f3025b2 100644
--- a/railiance_fabric/graph_explorer.py
+++ b/railiance_fabric/graph_explorer.py
@@ -124,7 +124,7 @@ def fabric_graph_explorer_manifest(base_url: str = "") -> dict[str, Any]:
"actions": list(DISPLAY_STATES),
"fields": [
{"id": "kind", "label": "Kind", "type": "string"},
- {"id": "layer", "label": "Layer", "type": "string"},
+ {"id": "layer", "label": "Node Type", "type": "string"},
{"id": "repo", "label": "Repo", "type": "string"},
{"id": "domain", "label": "Domain", "type": "string"},
{"id": "environment", "label": "Environment", "type": "string"},
diff --git a/railiance_fabric/graph_explorer_ui.py b/railiance_fabric/graph_explorer_ui.py
index 90afede..2278120 100644
--- a/railiance_fabric/graph_explorer_ui.py
+++ b/railiance_fabric/graph_explorer_ui.py
@@ -27,7 +27,7 @@ def graph_explorer_page() -> str:
.shell { display: grid; grid-template-rows: auto 1fr; height: 100vh; min-height: 620px; }
.toolbar {
display: grid;
- grid-template-columns: minmax(180px, 1.2fr) repeat(6, minmax(110px, .55fr)) auto auto auto;
+ grid-template-columns: minmax(180px, 1.2fr) repeat(7, minmax(108px, .55fr)) auto;
gap: 8px;
align-items: center;
padding: 10px 12px;
@@ -47,7 +47,7 @@ def graph_explorer_page() -> str:
.side h1 { font-size: 17px; line-height: 1.2; margin: 0 0 10px; }
.section { border-top: 1px solid var(--line); padding-top: 12px; margin-top: 12px; }
.section:first-child { border-top: 0; padding-top: 0; margin-top: 0; }
- label { color: var(--muted); display: grid; gap: 4px; font-size: 12px; }
+ label, .field { color: var(--muted); display: grid; gap: 4px; font-size: 12px; }
input, select, button {
border: 1px solid var(--line);
border-radius: 6px;
@@ -67,6 +67,68 @@ def graph_explorer_page() -> str:
}
button.primary { background: var(--accent); border-color: var(--accent); color: #ffffff; }
button:disabled { color: #98a2b3; cursor: default; }
+ .filter-menu {
+ position: relative;
+ min-width: 0;
+ }
+ .filter-menu summary {
+ border: 1px solid var(--line);
+ border-radius: 6px;
+ color: var(--text);
+ cursor: pointer;
+ list-style: none;
+ min-height: 34px;
+ overflow: hidden;
+ padding: 6px 8px;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ background: #ffffff;
+ }
+ .filter-menu summary::-webkit-details-marker { display: none; }
+ .filter-menu[open] summary { border-color: var(--accent); }
+ .check-list {
+ position: absolute;
+ z-index: 8;
+ display: grid;
+ gap: 4px;
+ width: max-content;
+ min-width: 210px;
+ max-width: 280px;
+ max-height: 300px;
+ overflow: auto;
+ margin-top: 4px;
+ padding: 8px;
+ border: 1px solid var(--line);
+ border-radius: 8px;
+ background: #ffffff;
+ box-shadow: 0 16px 40px rgba(23, 32, 51, .14);
+ }
+ .check-list label {
+ grid-template-columns: auto 1fr;
+ align-items: center;
+ color: var(--text);
+ font-size: 13px;
+ gap: 8px;
+ min-height: 26px;
+ }
+ .check-list input {
+ min-height: 0;
+ padding: 0;
+ }
+ .map-controls {
+ position: absolute;
+ top: 12px;
+ right: 12px;
+ z-index: 3;
+ display: flex;
+ gap: 6px;
+ padding: 6px;
+ border: 1px solid var(--line);
+ border-radius: 8px;
+ background: rgba(255, 255, 255, .94);
+ box-shadow: 0 12px 30px rgba(23, 32, 51, .12);
+ }
+ .map-controls button { min-width: 54px; }
.button-row { display: flex; flex-wrap: wrap; gap: 8px; }
.meta { color: var(--muted); font-size: 12px; margin: 0; }
.pill {
@@ -116,18 +178,31 @@ def graph_explorer_page() -> str:
-
+
Node Types
+
+
+ Edge Types
+
+
-
-
-
+
+
+
+
+