coulomb/repo-scoping
2
0
Fork 0
generated from coulomb/repo-seed
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refinements to the dependency exploration ui

Browse Source
This commit is contained in:
Bernd Worsch
2026-05-04 12:17:48 +02:00
parent 07c9a95efc
commit 356c0026ef
8 changed files with 408 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

87
src/repo_registry/core/service.py
View File

@@ -1101,6 +1101,7 @@ class RegistryService:
profile_id: int | None = None,
rules: list[dict[str, Any]] | None = None,
manual_overrides: dict[str, str] | None = None,
use_latest_profile: bool = True,
) -> dict[str, object]:
impact = None
if base_analysis_run_id is not None or target_analysis_run_id is not None:
@@ -1122,9 +1123,7 @@ class RegistryService:
)
changed_fact_keys = set(impact.changed_fact_keys) if impact is not None else set()
ability_map = self.store.get_ability_map(repository_id)
facts_by_id = {
fact.id: fact for fact in self.store.list_observed_facts(repository_id)
}
facts_by_id = {fact.id: fact for fact in self.store.list_observed_facts(repository_id)}
characteristic_index = self._dependency_characteristic_index(ability_map)
nodes: dict[str, dict[str, object]] = {}
edge_sources: dict[str, DependencyEdge] = {}
@@ -1132,6 +1131,8 @@ class RegistryService:
profile = (
self.store.get_dependency_graph_profile(repository_id, profile_id)
if profile_id is not None
else self.store.latest_dependency_graph_profile(repository_id)
if use_latest_profile and not rules and not manual_overrides
else None
)
merged_rules = [*(profile.filter_rules if profile is not None else []), *(rules or [])]
@@ -1139,6 +1140,12 @@ class RegistryService:
**(profile.manual_overrides if profile is not None else {}),
**(manual_overrides or {}),
}
graph_edges = [
display_edge
for edge in graph.edges
if (display_edge := self._dependency_display_edge(edge, facts_by_id))
is not None
]
def ensure_node(kind: str, key: str, item_id: int | None) -> None:
if key in nodes:
@@ -1150,6 +1157,11 @@ class RegistryService:
if fact is not None:
detail = {
"name": fact.name,
"label": (
f"{fact.path} ({fact.kind})"
if key.startswith("fact:document:")
else f"{fact.name} ({fact.kind}, {fact.path})"
),
"description": fact.value,
"primaryClass": fact.metadata.get("source_role", fact.kind),
"attributes": self._dependency_fact_attributes(fact),
@@ -1174,13 +1186,16 @@ class RegistryService:
"stableKey": key,
"kind": kind,
"layer": self._dependency_layer(kind),
"label": self._dependency_node_label(repository_id, kind, key, item_id),
"label": detail.get("label")
or self._dependency_node_label(repository_id, kind, key, item_id),
"reviewState": "accepted",
"name": detail.get("name")
or self._dependency_node_label(repository_id, kind, key, item_id),
"description": detail.get("description", ""),
"primaryClass": detail.get("primaryClass", kind),
"attributes": detail.get("attributes", []),
"confidence": detail.get("confidence"),
"visualSize": self._dependency_node_size(detail.get("confidence")),
"ownership": self._ownership_for_kind(kind),
"freshnessState": (
impact_item.freshness_state
@@ -1212,12 +1227,12 @@ class RegistryService:
),
}
for edge in graph.edges:
for edge in graph_edges:
ensure_node(edge.source_kind, edge.source_key, edge.source_id)
ensure_node(edge.target_kind, edge.target_key, edge.target_id)
edges = []
for index, edge in enumerate(graph.edges):
for index, edge in enumerate(graph_edges):
edge_id = f"{edge.source_key}->{edge.target_key}:{index}"
source_data = nodes[edge.source_key]["data"]
target_data = nodes[edge.target_key]["data"]
@@ -1230,6 +1245,7 @@ class RegistryService:
"stableKey": edge_id,
"kind": "edge",
"layer": "dependency",
"reviewState": "accepted",
"source": edge.source_key,
"target": edge.target_key,
"sourceKind": edge.source_kind,
@@ -1238,6 +1254,7 @@ class RegistryService:
"targetLayer": self._dependency_layer(edge.target_kind),
"dependencyType": edge.dependency_type,
"strength": edge.strength,
"edgeWidth": self._dependency_edge_width(edge.strength),
"edgeSource": edge.source,
"sameLayer": edge.same_layer,
"freshnessState": (
@@ -1284,6 +1301,11 @@ class RegistryService:
for element in nodes.values()
if visibility[element["data"]["id"]]["displayState"] == "hide"
}
blurred_node_ids = {
element["data"]["id"]
for element in nodes.values()
if visibility[element["data"]["id"]]["displayState"] == "blur"
}
visible_elements: list[dict[str, object]] = []
hidden_elements: list[dict[str, object]] = []
orphaned_overrides = sorted(
@@ -1302,12 +1324,21 @@ class RegistryService:
"displayState": "hide",
"visibilityReason": "connected-node-hidden",
}
connected_to_blurred = (
"source" in element["data"]
and (
element["data"]["source"] in blurred_node_ids
or element["data"]["target"] in blurred_node_ids
)
)
element["data"].update(state)
element["data"]["connectedToBlurred"] = connected_to_blurred
element["classes"] = " ".join(
part
for part in (
element.get("classes", ""),
f"display-{state['displayState']}",
"connects-blurred" if connected_to_blurred else "",
"manual-override" if state["visibilitySource"] == "manual" else "",
"rule-derived" if state["visibilitySource"] == "rule" else "",
)
@@ -2578,6 +2609,48 @@ class RegistryService:
attributes.append(value)
return sorted(set(attributes))
def _dependency_display_edge(
self,
edge: DependencyEdge,
facts_by_id: dict[int, ObservedFact],
) -> DependencyEdge | None:
if edge.source_kind != "fact" or edge.source_id is None:
return edge
fact = facts_by_id.get(edge.source_id)
if fact is None:
return edge
if self._suppress_dependency_fact(fact):
return None
display_key = self._dependency_fact_display_key(fact)
if display_key == edge.source_key:
return edge
return replace(edge, source_key=display_key)
def _suppress_dependency_fact(self, fact: ObservedFact) -> bool:
return (
fact.path.lower().endswith("scope.md")
and fact.metadata.get("source_role") == "derived_scope"
)
def _dependency_fact_display_key(self, fact: ObservedFact) -> str:
document_paths = {"readme.md", "scope.md"}
if fact.path.lower() in document_paths and fact.kind in {
"documentation",
"intent",
"scope",
}:
return f"fact:document:{fact.path}"
return f"fact:{fact.kind}:{fact.path}:{fact.name}"
def _dependency_node_size(self, confidence: object) -> int:
if not isinstance(confidence, int | float):
return 36
bounded = max(0.0, min(float(confidence), 1.0))
return int(28 + (bounded * 28))
def _dependency_edge_width(self, strength: str) -> int:
return {"weak": 1, "medium": 3, "strong": 5}.get(strength, 2)
def _dependency_layer(self, kind: str) -> str:
if kind in {"fact", "evidence", "feature", "capability", "ability", "scope"}:
return kind
@@ -2642,6 +2715,8 @@ class RegistryService:
actual = data.get(key)
if key == "dependencyType":
actual = data.get("dependencyType")
elif key == "reviewState":
actual = data.get("reviewState")
elif key == "sameLayer":
actual = bool(data.get("sameLayer"))
elif key == "attributes":

21
src/repo_registry/storage/sqlite.py
View File

@@ -2410,6 +2410,27 @@ class RegistryStore:
raise NotFoundError(f"dependency graph profile {profile_id} was not found")
return self._dependency_graph_profile_from_row(row)
def latest_dependency_graph_profile(
self,
repository_id: int,
) -> DependencyGraphViewProfile | None:
self.get_repository(repository_id)
with self.connect() as connection:
row = connection.execute(
"""
SELECT id, repository_id, name, description, default_mode,
filter_rules, manual_overrides, created_at, updated_at
FROM dependency_graph_view_profiles
WHERE repository_id = ?
ORDER BY updated_at DESC, id DESC
LIMIT 1
""",
(repository_id,),
).fetchone()
if row is None:
return None
return self._dependency_graph_profile_from_row(row)
def create_dependency_graph_profile(
self,
repository_id: int,

3
src/repo_registry/web_api/app.py
View File

@@ -1154,6 +1154,7 @@ def get_dependency_graph(
base_analysis_run_id: int | None = Query(default=None),
target_analysis_run_id: int | None = Query(default=None),
profile_id: int | None = Query(default=None),
use_latest_profile: bool = Query(default=True),
service: RegistryService = Depends(get_service),
) -> dict[str, object]:
try:
@@ -1162,6 +1163,7 @@ def get_dependency_graph(
base_analysis_run_id=base_analysis_run_id,
target_analysis_run_id=target_analysis_run_id,
profile_id=profile_id,
use_latest_profile=use_latest_profile,
)
except NotFoundError as exc:
raise HTTPException(status_code=404, detail=str(exc)) from exc
@@ -1189,6 +1191,7 @@ def filter_dependency_graph(
profile_id=profile_id,
rules=payload.rules,
manual_overrides=payload.manual_overrides,
use_latest_profile=profile_id is not None,
)
except NotFoundError as exc:
raise HTTPException(status_code=404, detail=str(exc)) from exc

110
src/repo_registry/web_ui/views.py
View File

@@ -208,11 +208,26 @@ def page(
min-height: 680px;
}}
.graph-canvas {{
position: relative;
min-height: 680px;
border: 1px solid var(--line);
border-radius: 8px;
background: #f8fafc;
}}
.graph-popup {{
position: absolute;
z-index: 20;
display: none;
width: 240px;
max-width: calc(100% - 24px);
padding: 10px 12px;
border: 1px solid var(--line);
border-radius: 8px;
background: rgba(255, 255, 255, .96);
box-shadow: 0 10px 24px rgba(15, 23, 42, .16);
pointer-events: none;
}}
.graph-popup p {{ margin-bottom: 6px; }}
.graph-sidebar {{
display: grid;
gap: 12px;
@@ -1778,6 +1793,11 @@ def dependency_graph_view(
</select></label>
<label>Action <select id="filter-action"><option>blur</option><option>hide</option><option>show</option></select></label>
</div>
<label>Review state <select id="filter-review-state">
<option value="">Any state</option>
<option value="accepted">Accepted</option>
<option value="candidate">Candidate</option>
</select></label>
<label>Text <input id="filter-text" placeholder="Search labels, paths, descriptions"></label>
<div class="graph-controls">
<button class="secondary" type="button" data-filter-apply>Apply Rule</button>
@@ -1836,9 +1856,11 @@ def dependency_graph_view(
const profileMode = document.getElementById("profile-mode");
const profileSummary = document.getElementById("profile-summary");
const filterLayer = document.getElementById("filter-layer");
const filterReviewState = document.getElementById("filter-review-state");
const filterText = document.getElementById("filter-text");
const filterAction = document.getElementById("filter-action");
const focusDepth = document.getElementById("focus-depth");
let hoverPopup = null;
let cy = null;
let mode = "full";
let selected = null;
@@ -1877,10 +1899,10 @@ def dependency_graph_view(
profileSummary.textContent = profile ? profileSummaryText(basePayload) : "No profile selected.";
}};
const loadProfiles = () => fetch(profileEndpoint)
const loadProfiles = (selectedProfileId = "") => fetch(profileEndpoint)
.then((response) => response.json())
.then((profiles) => {{
const current = profileSelect.value;
const current = selectedProfileId || profileSelect.value;
profileSelect.innerHTML = '<option value="">Unsaved exploration</option>' + profiles
.map((profile) => `<option value="${{profile.id}}">${{escapeHtml(profile.name)}}</option>`)
.join("");
@@ -1892,6 +1914,10 @@ def dependency_graph_view(
cy.elements().remove();
cy.add(payload.elements);
profileSummary.textContent = payload.profile ? profileSummaryText(payload) : profileSummaryText(payload);
if (payload.profile) {{
updateProfileForm(payload.profile);
loadProfiles(String(payload.profile.id));
}}
applyMode(payload.mode === "impact" ? "impact" : payload.mode || "full");
}};
@@ -1921,7 +1947,8 @@ def dependency_graph_view(
if (element.isNode()) {{
detail.innerHTML = `
<p><strong>${{escapeHtml(data.label)}}</strong></p>
<p><span class="pill">${{escapeHtml(data.kind)}}</span> <span class="pill">${{escapeHtml(data.layer)}}</span> <span class="pill">${{escapeHtml(data.displayState)}}</span> <span class="pill">${{escapeHtml(data.freshnessState)}}</span></p>
<p><span class="pill">${{escapeHtml(data.kind)}}</span> <span class="pill">${{escapeHtml(data.layer)}}</span> <span class="pill">${{escapeHtml(data.reviewState)}}</span> <span class="pill">${{escapeHtml(data.displayState)}}</span> <span class="pill">${{escapeHtml(data.freshnessState)}}</span></p>
${{data.confidence !== null && data.confidence !== undefined ? `<p class="muted">Confidence: ${{escapeHtml(data.confidence)}}</p>` : ""}}
<p class="muted">Ownership: ${{escapeHtml(data.ownership || "unknown")}}</p>
<p class="muted">Visibility: ${{escapeHtml(data.visibilitySource)}} · ${{escapeHtml(data.visibilityReason)}}</p>
${{data.description ? `<p>${{escapeHtml(data.description)}}</p>` : ""}}
@@ -1931,7 +1958,7 @@ def dependency_graph_view(
}} else {{
detail.innerHTML = `
<p><strong>${{escapeHtml(data.dependencyType)}}</strong></p>
<p><span class="pill">${{escapeHtml(data.strength)}}</span> <span class="pill">${{escapeHtml(data.displayState)}}</span> ${{data.sameLayer ? '<span class="pill">same layer</span>' : ""}}</p>
<p><span class="pill">${{escapeHtml(data.strength)}}</span> <span class="pill">${{escapeHtml(data.reviewState)}}</span> <span class="pill">${{escapeHtml(data.displayState)}}</span> ${{data.sameLayer ? '<span class="pill">same layer</span>' : ""}}</p>
<p class="muted">${{escapeHtml(data.source)}} -> ${{escapeHtml(data.target)}}</p>
<p class="muted">Source: ${{escapeHtml(data.edgeSource)}}</p>
<p class="muted">Visibility: ${{escapeHtml(data.visibilitySource)}} · ${{escapeHtml(data.visibilityReason)}}</p>
@@ -1939,6 +1966,45 @@ def dependency_graph_view(
}}
}};
const popupHtml = (element) => {{
const data = element.data();
if (element.isNode()) {{
const path = data.path ? `<p class="muted">${{escapeHtml(data.path)}}</p>` : "";
const confidence = data.confidence !== null && data.confidence !== undefined
? `<span class="pill">confidence ${{escapeHtml(data.confidence)}}</span>`
: "";
return `
<p><strong>${{escapeHtml(data.name || data.label)}}</strong></p>
<p><span class="pill">${{escapeHtml(data.kind)}}</span> <span class="pill">${{escapeHtml(data.layer)}}</span> <span class="pill">${{escapeHtml(data.reviewState)}}</span></p>
<p><span class="pill">${{escapeHtml(data.displayState)}}</span> <span class="pill">${{escapeHtml(data.freshnessState)}}</span> ${{confidence}}</p>
<p class="muted">${{escapeHtml(data.ownership || "unknown")}}</p>
${{path}}
`;
}}
return `
<p><strong>${{escapeHtml(data.dependencyType)}}</strong></p>
<p><span class="pill">${{escapeHtml(data.strength)}}</span> ${{data.sameLayer ? '<span class="pill">same layer</span>' : ""}}</p>
<p class="muted">${{escapeHtml(data.sourceMetadata?.name || data.source)}} -> ${{escapeHtml(data.targetMetadata?.name || data.target)}}</p>
<p class="muted">${{escapeHtml(data.edgeSource)}}</p>
`;
}};
const showPopup = (element, renderedPosition) => {{
if (!hoverPopup) {{
hoverPopup = document.createElement("div");
hoverPopup.className = "graph-popup";
container.appendChild(hoverPopup);
}}
hoverPopup.innerHTML = popupHtml(element);
hoverPopup.style.left = `${{Math.min(renderedPosition.x + 14, container.clientWidth - 250)}}px`;
hoverPopup.style.top = `${{Math.max(10, renderedPosition.y + 14)}}px`;
hoverPopup.style.display = "block";
}};
const hidePopup = () => {{
if (hoverPopup) hoverPopup.style.display = "none";
}};
const visibleForMode = () => {{
if (!cy) return cy.collection();
if (focusCollection) return focusCollection;
@@ -1989,7 +2055,7 @@ def dependency_graph_view(
"border-width": 1,
"color": "#1f2933",
"font-size": 11,
"height": 36,
"height": "data(visualSize)",
"label": "data(label)",
"text-background-color": "#ffffff",
"text-background-opacity": .85,
@@ -1998,14 +2064,14 @@ def dependency_graph_view(
"text-max-width": 130,
"text-valign": "top",
"text-wrap": "wrap",
"width": 36
"width": "data(visualSize)"
}}
}},
{{ selector: "node[kind = 'evidence']", style: {{ "background-color": "#0891b2" }} }},
{{ selector: "node[kind = 'feature']", style: {{ "background-color": "#7c3aed" }} }},
{{ selector: "node[kind = 'capability']", style: {{ "background-color": "#0f766e", "shape": "round-rectangle", "width": 56 }} }},
{{ selector: "node[kind = 'ability']", style: {{ "background-color": "#b45309", "shape": "hexagon", "height": 46, "width": 46 }} }},
{{ selector: "node[kind = 'scope']", style: {{ "background-color": "#be123c", "shape": "star", "height": 58, "width": 58 }} }},
{{ selector: "node[kind = 'capability']", style: {{ "background-color": "#0f766e", "shape": "round-rectangle" }} }},
{{ selector: "node[kind = 'ability']", style: {{ "background-color": "#b45309", "shape": "hexagon" }} }},
{{ selector: "node[kind = 'scope']", style: {{ "background-color": "#be123c", "shape": "star" }} }},
{{ selector: "node.stale", style: {{ "border-color": "#dc2626", "border-width": 4 }} }},
{{ selector: "node.changed", style: {{ "border-color": "#2563eb", "border-width": 4 }} }},
{{
@@ -2015,12 +2081,14 @@ def dependency_graph_view(
"line-color": "#94a3b8",
"target-arrow-color": "#94a3b8",
"target-arrow-shape": "triangle",
"width": 2
"width": "data(edgeWidth)"
}}
}},
{{ selector: "edge[strength = 'strong']", style: {{ "width": 4, "line-color": "#475569", "target-arrow-color": "#475569" }} }},
{{ selector: "edge[strength = 'weak']", style: {{ "width": 1, "line-style": "dotted" }} }},
{{ selector: "edge[strength = 'strong']", style: {{ "line-color": "#475569", "target-arrow-color": "#475569" }} }},
{{ selector: "edge[strength = 'weak']", style: {{ "line-style": "dotted" }} }},
{{ selector: "edge.same-layer", style: {{ "curve-style": "unbundled-bezier", "control-point-distances": 45, "control-point-weights": .5, "line-color": "#f97316", "line-style": "dashed", "target-arrow-color": "#f97316" }} }},
{{ selector: "edge.connects-blurred", style: {{ "line-color": "#d8dee8", "target-arrow-color": "#d8dee8", "opacity": .28 }} }},
{{ selector: "edge.connects-blurred.hover, edge.connects-blurred:selected", style: {{ "opacity": .75, "line-color": "#94a3b8", "target-arrow-color": "#94a3b8" }} }},
{{ selector: ".display-blur", style: {{ "opacity": .25, "label": "" }} }},
{{ selector: ".display-blur.hover, .display-blur:selected", style: {{ "opacity": .75, "label": "data(label)" }} }},
{{ selector: ":selected", style: {{ "border-color": "#111827", "border-width": 5, "line-color": "#111827", "target-arrow-color": "#111827" }} }},
@@ -2046,8 +2114,10 @@ def dependency_graph_view(
}});
basePayload = payload;
if (payload.profile) {{
profileSelect.value = String(payload.profile.id);
updateProfileForm(payload.profile);
loadProfiles(String(payload.profile.id));
}} else {{
loadProfiles();
}}
cy.on("tap", "node, edge", (event) => {{
selected = event.target;
@@ -2061,8 +2131,14 @@ def dependency_graph_view(
if (mode === "path") applyMode("path");
}}
}});
cy.on("mouseover", ".display-blur", (event) => event.target.addClass("hover"));
cy.on("mouseout", ".display-blur", (event) => event.target.removeClass("hover"));
cy.on("mouseover", "node, edge", (event) => {{
event.target.addClass("hover");
showPopup(event.target, event.renderedPosition);
}});
cy.on("mouseout", "node, edge", (event) => {{
event.target.removeClass("hover");
hidePopup();
}});
fitButton.addEventListener("click", () => cy.fit(cy.elements(":visible"), 48));
modeButtons.forEach((button) => {{
button.addEventListener("click", () => applyMode(button.dataset.graphMode));
@@ -2070,6 +2146,7 @@ def dependency_graph_view(
document.querySelector("[data-filter-apply]").addEventListener("click", () => {{
const match = {{}};
if (filterLayer.value) match.layer = filterLayer.value;
if (filterReviewState.value) match.reviewState = filterReviewState.value;
if (filterText.value.trim()) match.text = filterText.value.trim();
rules.push({{name: "UI filter", action: filterAction.value, match}});
refilter();
@@ -2162,8 +2239,7 @@ def dependency_graph_view(
return loadProfiles();
}});
}});
loadProfiles();
applyMode(payload.mode === "impact" ? "impact" : "full");
applyMode(payload.mode === "impact" ? "impact" : payload.mode || "full");
}})
.catch((error) => {{
container.innerHTML = `<p class="notice error">${{escapeHtml(error.message)}}</p>`;