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 +
+ All node types +
+
+
+
Edge Types +
+ All edge types +
+
+
- - -
+
+ + + +