Cleanup and refinement

Author: guerler

client/src/components/Graph/GraphEdges.vue

@@ -1,9 +1,7 @@
 <script setup lang="ts">
 import { curveBasisPath, orthogonalPath } from "@/utils/connectionPath";
 
-import type { GraphEdge } from "./types";
-
-export type EdgeStyle = "orthogonal" | "curved";
+import type { EdgeStyle, GraphEdge } from "./types";
 
 interface Props {
     edges: GraphEdge[];
@@ -52,10 +50,6 @@ function edgeClass(edge: GraphEdge): Record<string, boolean> {
         "edge-collection": !!edge.isCollection,
     };
 }
-
-function strokeWidth(edge: GraphEdge): number {
-    return edge.isCollection ? 2 : 2;
-}
 </script>
 
 <template>
@@ -66,7 +60,6 @@ function strokeWidth(edge: GraphEdge): number {
                 :key="`${edge.id}-${idx}`"
                 :d="path"
                 :class="edgeClass(edge)"
-                :stroke-width="strokeWidth(edge)"
                 fill="none" />
         </template>
     </svg>

client/src/components/Graph/GraphNode.vue

@@ -65,10 +65,6 @@ const iconSpin = computed(() => Boolean(props.node.data?.stateSpin));
         border-color 0.15s,
         box-shadow 0.15s,
         opacity 0.2s ease;
-
-    &:hover {
-        border-color: $brand-primary;
-    }
 }
 
 .node-highlight {
@@ -100,10 +96,6 @@ const iconSpin = computed(() => Boolean(props.node.data?.stateSpin));
     padding: 1px 0;
 }
 
-.input-data-row {
-    position: relative;
-}
-
 .output-data-row {
     text-align: right;
 }

client/src/components/Graph/GraphView.vue

@@ -1,13 +1,12 @@
 <script setup lang="ts">
-import { useElementBounding, useScroll } from "@vueuse/core";
+import { useElementBounding } from "@vueuse/core";
 import { computed, nextTick, type Ref, ref, watch } from "vue";
 
 import { useD3Zoom } from "@/composables/d3Zoom";
 import { useViewportBoundingBox } from "@/composables/viewportBoundingBox";
 import { maxZoom, minZoom } from "@/utils/zoomLevels";
 
-import type { EdgeStyle } from "./GraphEdges.vue";
-import type { GraphLayout, GraphNode } from "./types";
+import type { EdgeStyle, GraphLayout, GraphNode } from "./types";
 
 import GraphEdges from "./GraphEdges.vue";
 import GraphNodeComponent from "./GraphNode.vue";
@@ -19,8 +18,6 @@ interface Props {
     edgeStyle?: EdgeStyle;
     showZoomControls?: boolean;
     showMinimap?: boolean;
-    showScrollOverlays?: boolean;
-    showRightOverlay?: boolean;
     /** Minimap component — injected by consumer to avoid domain coupling */
     minimapComponent?: object | null;
 }
@@ -30,8 +27,6 @@ const props = withDefaults(defineProps<Props>(), {
     edgeStyle: "orthogonal",
     showZoomControls: true,
     showMinimap: true,
-    showScrollOverlays: true,
-    showRightOverlay: false,
     minimapComponent: null,
 });
 
@@ -46,8 +41,7 @@ const scale = ref(1);
 // d3 zoom is attached to the inner canvas-container, NOT the outer wrapper.
 // This keeps ZoomControl and minimap outside the d3 event target.
 const canvasContainer: Ref<HTMLElement | null> = ref(null);
-const scroll = useScroll(canvasContainer);
-const { transform, setZoom, panBy, moveTo } = useD3Zoom(1, minZoom, maxZoom, canvasContainer, scroll, { x: 50, y: 50 });
+const { transform, setZoom, panBy, moveTo } = useD3Zoom(1, minZoom, maxZoom, canvasContainer, { x: 50, y: 50 });
 
 // Element bounding for viewport computation (needed by minimap)
 const elementBounding = useElementBounding(canvasContainer, { windowResize: false, windowScroll: false });
@@ -65,7 +59,6 @@ watch(
 
 function onZoom(zoomLevel: number) {
     setZoom(zoomLevel);
-    scale.value = zoomLevel;
 }
 
 const canvasStyle = computed(() => ({
@@ -132,7 +125,6 @@ watch(
 <template>
     <div class="graph-canvas rounded">
         <ZoomControl v-if="showZoomControls" :zoom-level="scale" @onZoom="onZoom" />
-        <div v-if="showScrollOverlays && showRightOverlay" class="scroll-overlay overlay-right" />
         <div ref="canvasContainer" class="canvas-container" @pointerdown="onPointerDown" @pointerup="onPointerUp">
             <div v-if="layout" class="graph-node-area" :style="canvasStyle">
                 <GraphEdges
@@ -186,18 +178,4 @@ watch(
     left: 0;
     transform-origin: 0 0;
 }
-
-.scroll-overlay {
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    width: 1.5rem;
-    background: $gray-200;
-    opacity: 0.5;
-    z-index: 1;
-
-    &.overlay-right {
-        right: 0;
-    }
-}
 </style>

client/src/components/Graph/types.ts

@@ -36,6 +36,9 @@ export interface GraphEdge {
     points: { x: number; y: number }[];
 }
 
+/** Edge rendering style */
+export type EdgeStyle = "orthogonal" | "curved";
+
 /** Complete layout result ready for rendering */
 export interface GraphLayout {
     nodes: GraphNode[];

client/src/components/History/Graph/HistoryGraphDetails.vue

@@ -12,12 +12,9 @@ import LoadingSpan from "@/components/LoadingSpan.vue";
 
 interface Props {
     node: GraphNode;
-    details?: { label: string; value: string }[];
 }
 
-const props = withDefaults(defineProps<Props>(), {
-    details: () => [],
-});
+const props = defineProps<Props>();
 
 const nodeType = computed(() => (props.node?.data?.type as string) ?? null);
 const encodedId = computed(() => (props.node?.data?.encodedId as string) ?? null);
@@ -85,14 +82,6 @@ watch(
                 <BAlert v-else-if="jobError" variant="info" show class="mb-0">{{ jobError }}</BAlert>
                 <JobInformation v-else-if="jobId" :job-id="jobId" :include-times="true" />
             </div>
-
-            <!-- Fallback -->
-            <div v-else class="p-2">
-                <div v-for="detail in details" :key="detail.label" class="text-muted small">
-                    <span class="font-weight-bold">{{ detail.label }}:</span>
-                    <span class="ml-1">{{ detail.value }}</span>
-                </div>
-            </div>
         </div>
     </div>
 </template>
@@ -104,14 +93,4 @@ watch(
     height: 100%;
     overflow-y: auto;
 }
-
-.details-header {
-    position: sticky;
-    top: 0;
-    z-index: 1;
-}
-
-.details-body {
-    overflow-y: auto;
-}
 </style>

client/src/components/History/Graph/HistoryGraphMinimap.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { Ref } from "vue";
-import { computed, onMounted, ref, watch } from "vue";
+import { computed, onMounted, ref, toRef, watch } from "vue";
 
 import type { GraphLayout } from "@/components/Graph/types";
 import { useAnimationFrame } from "@/composables/sensors/animationFrame";
@@ -55,9 +55,9 @@ const contentBounds = computed(() => {
     return aabb;
 });
 
-const viewportBoundsRef = computed(() => props.viewportBoundingBox);
-const parentRightRef = computed(() => props.parentRight);
-const parentBottomRef = computed(() => props.parentBottom);
+const viewportBoundsRef = toRef(props, "viewportBoundingBox");
+const parentRightRef = toRef(props, "parentRight");
+const parentBottomRef = toRef(props, "parentBottom");
 
 // ── Shared interaction ──
 

client/src/components/History/Graph/HistoryGraphView.vue

@@ -4,12 +4,11 @@ import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { BAlert } from "bootstrap-vue";
 import { computed, ref, toRef } from "vue";
 
-import type { GraphNode } from "@/components/Graph/types";
+import type { EdgeStyle, GraphNode } from "@/components/Graph/types";
 import { useHistoryStore } from "@/stores/historyStore";
 
-import { buildDetails } from "./historyGraphMapper";
 import { useHistoryGraphData } from "./useHistoryGraphData";
-import { type EdgeStyle, useHistoryGraphLayout } from "./useHistoryGraphLayout";
+import { useHistoryGraphLayout } from "./useHistoryGraphLayout";
 
 import HistoryGraphDetails from "./HistoryGraphDetails.vue";
 import HistoryGraphMinimap from "./HistoryGraphMinimap.vue";
@@ -41,12 +40,6 @@ const { layout, layoutLoading } = useHistoryGraphLayout(graphData, edgeStyle);
 
 // Selection
 const selectedNode = ref<GraphNode | null>(null);
-const selectedDetails = computed(() => {
-    if (!selectedNode.value) {
-        return [];
-    }
-    return buildDetails(selectedNode.value);
-});
 
 function onNodeSelected(node: GraphNode | null) {
     selectedNode.value = node;
@@ -102,7 +95,7 @@ const isTruncated = computed(() => {
                     :edge-style="edgeStyle"
                     :minimap-component="HistoryGraphMinimap"
                     @nodeSelected="onNodeSelected" />
-                <HistoryGraphDetails v-if="selectedNode" :node="selectedNode" :details="selectedDetails" />
+                <HistoryGraphDetails v-if="selectedNode" :node="selectedNode" />
             </div>
             <div v-if="isTruncated" class="history-graph-truncation">
                 Showing a partial graph. Not all connections are visible.
@@ -148,12 +141,4 @@ const isTruncated = computed(() => {
 :deep(.node-collection) .graph-node-header {
     color: $text-color;
 }
-
-:deep(.edge-collection) {
-    stroke: $brand-primary;
-}
-
-:deep(.edge-dataset) {
-    stroke: $brand-primary;
-}
 </style>

client/src/components/History/Graph/historyGraphMapper.ts

@@ -169,7 +169,7 @@ export function mapNodes(apiNodes: ApiGraphNode[], apiEdges: ApiGraphEdge[]): Gr
 
         // Data nodes always have a body (badge + state text)
         const hasBody = !isToolRequest;
-        const label = resolveNodeLabel(node);
+        const label = nodeLabels.get(node.id)!;
         return {
             id: node.id,
             x: 0,
@@ -213,32 +213,3 @@ export function mapEdges(apiEdges: ApiGraphEdge[]): GraphEdge[] {
         points: [],
     }));
 }
-
-/**
- * Build detail lines for the details panel from a selected graph node.
- */
-export function buildDetails(node: GraphNode): { label: string; value: string }[] {
-    const details: { label: string; value: string }[] = [];
-    const d = node.data ?? {};
-
-    details.push({ label: "Type", value: (d.typeLabel as string) ?? "Unknown" });
-
-    if (d.toolId) {
-        details.push({ label: "Tool", value: d.toolId as string });
-    }
-
-    const inputs = (d.inputCount as number) ?? 0;
-    const outputs = (d.outputCount as number) ?? 0;
-    const parts: string[] = [];
-    if (inputs > 0) {
-        parts.push(`${inputs} input${inputs !== 1 ? "s" : ""}`);
-    }
-    if (outputs > 0) {
-        parts.push(`${outputs} output${outputs !== 1 ? "s" : ""}`);
-    }
-    if (parts.length > 0) {
-        details.push({ label: "Connections", value: parts.join(", ") });
-    }
-
-    return details;
-}

client/src/components/History/Graph/useHistoryGraphLayout.ts

@@ -1,13 +1,11 @@
 import ELK, { type ElkExtendedEdge, type ElkNode } from "elkjs/lib/elk.bundled";
 import { type Ref, ref, watch } from "vue";
 
-import type { GraphEdge, GraphLayout, GraphNode } from "@/components/Graph/types";
+import type { EdgeStyle, GraphEdge, GraphLayout, GraphNode } from "@/components/Graph/types";
 import { computeControlPoints } from "@/utils/connectionPath";
 
 import { type HistoryGraphResponse, mapEdges, mapNodes } from "./historyGraphMapper";
 
-export type EdgeStyle = "orthogonal" | "curved";
-
 const elk = new ELK();
 
 /**