@checkstack/dependency-frontend 0.2.17 → 0.3.0

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # @checkstack/dependency-frontend
 
+## 0.3.0
+
+### Minor Changes
+
+- 35463ef: Improve dependency map directional clarity
+
+  - Redesigned system nodes with a split footer bar showing directional dependency counts (`← N used by | depends N →`), making each node self-documenting
+  - Color-coded connection handles: teal for incoming ("used by") and violet for outgoing ("depends on")
+  - Fixed invisible edge arrows by implementing custom SVG marker definitions with impact-type-matched colors (sky for informational, amber for degraded, red for critical)
+  - Updated the legend panel to explain handle colors alongside the existing impact type guide
+
+## 0.2.18
+
+### Patch Changes
+
+- Updated dependencies [298bf42]
+  - @checkstack/catalog-common@1.5.0
+  - @checkstack/dashboard-frontend@0.4.5
+
 ## 0.2.17
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@checkstack/dependency-frontend",
-  "version": "0.2.17",
+  "version": "0.3.0",
   "type": "module",
   "main": "src/index.tsx",
   "checkstack": {
@@ -12,9 +12,9 @@
     "lint:code": "eslint . --max-warnings 0"
   },
   "dependencies": {
-    "@checkstack/catalog-common": "1.4.0",
+    "@checkstack/catalog-common": "1.4.1",
     "@checkstack/common": "0.6.5",
-    "@checkstack/dashboard-frontend": "0.4.2",
+    "@checkstack/dashboard-frontend": "0.4.4",
     "@checkstack/dependency-common": "0.2.1",
     "@checkstack/frontend-api": "0.3.9",
     "@checkstack/healthcheck-common": "0.11.0",

package/src/components/DependencyMapPage.tsx

@@ -10,7 +10,6 @@ import {
   ReactFlowProvider,
   type NodeChange,
   type Connection,
-  MarkerType,
   Panel,
 } from "@xyflow/react";
 import "@xyflow/react/dist/style.css";
@@ -247,6 +246,21 @@ function DependencyMapContent() {
     const savedPositions = posData?.positions ?? [];
     const warnings = warningsData?.warnings ?? {};
     const healthStatuses = healthData?.statuses ?? {};
+    const deps = depsData?.dependencies ?? [];
+
+    // Compute per-system dependency counts
+    const upstreamCountMap = new Map<string, number>();
+    const downstreamCountMap = new Map<string, number>();
+    for (const dep of deps) {
+      upstreamCountMap.set(
+        dep.sourceSystemId,
+        (upstreamCountMap.get(dep.sourceSystemId) ?? 0) + 1,
+      );
+      downstreamCountMap.set(
+        dep.targetSystemId,
+        (downstreamCountMap.get(dep.targetSystemId) ?? 0) + 1,
+      );
+    }
 
     // Lookup maps for position resolution
     const savedPositionMap = new Map(
@@ -287,6 +301,8 @@ function DependencyMapContent() {
         systemId: system.id,
         status: selfStatus,
         derivedState: warning?.derivedState,
+        upstreamCount: upstreamCountMap.get(system.id) ?? 0,
+        downstreamCount: downstreamCountMap.get(system.id) ?? 0,
       };
 
       return {
@@ -298,7 +314,7 @@ function DependencyMapContent() {
     });
 
     setNodes(newNodes);
-  }, [systemsData, posData, warningsData, healthData, setNodes]);
+  }, [systemsData, posData, warningsData, healthData, depsData, setNodes]);
 
   // Build edges separately — only depends on dependency data
   useEffect(() => {
@@ -318,11 +334,6 @@ function DependencyMapContent() {
           target: dep.targetSystemId,
           type: "dependency" as const,
           animated: dep.transitive,
-          markerEnd: {
-            type: MarkerType.ArrowClosed,
-            width: 16,
-            height: 16,
-          },
           data: edgeData,
         };
       },
@@ -502,7 +513,28 @@ function DependencyMapContent() {
         <Panel position="bottom-left">
           <div className="bg-card/90 backdrop-blur-sm border border-border rounded-lg p-3 shadow-lg max-w-64">
             <p className="text-xs font-semibold text-muted-foreground mb-2 uppercase tracking-wider">
-              Impact Legend
+              Legend
+            </p>
+
+            {/* Direction legend */}
+            <div className="space-y-1.5 mb-3">
+              <div className="flex items-center gap-2">
+                <div className="w-3 h-3 rounded-full bg-teal-400/60 border-2 border-background shrink-0" />
+                <span className="text-xs text-muted-foreground">
+                  Used by (incoming)
+                </span>
+              </div>
+              <div className="flex items-center gap-2">
+                <div className="w-3 h-3 rounded-full bg-violet-400/60 border-2 border-background shrink-0" />
+                <span className="text-xs text-muted-foreground">
+                  Depends on (outgoing)
+                </span>
+              </div>
+            </div>
+
+            {/* Impact legend */}
+            <p className="text-xs font-semibold text-muted-foreground mb-2 uppercase tracking-wider">
+              Impact
             </p>
             <div className="space-y-1.5">
               <div className="flex items-center gap-2">

package/src/components/canvas/DependencyEdge.tsx

@@ -27,9 +27,17 @@ const impactStrokeWidths: Record<ImpactType, number> = {
   critical: 2.5,
 };
 
+/** Hex colors for SVG marker fills — must match the Tailwind stroke classes. */
+const impactHexColors: Record<ImpactType, string> = {
+  informational: "#38bdf8", // sky-400
+  degraded: "#fbbf24", // amber-400
+  critical: "#f87171", // red-400
+};
+
 /**
  * Custom React Flow edge displaying dependency impact type via color + thickness.
- * Transitive edges use dashed stroke.
+ * Transitive edges use dashed stroke. Renders a visible arrowhead marker
+ * colored to match the impact type.
  */
 export function DependencyEdgeComponent({
   id,
@@ -55,9 +63,32 @@ export function DependencyEdgeComponent({
   const isTransitive = data?.transitive ?? false;
   const colorClass = impactColors[impactType];
   const strokeWidth = impactStrokeWidths[impactType];
+  const hexColor = selected ? "hsl(var(--primary))" : impactHexColors[impactType];
+
+  // Unique marker ID per edge to avoid color clashes between different impact types
+  const markerId = `arrow-${id}`;
 
   return (
     <>
+      {/* SVG marker definition for the arrowhead */}
+      <defs>
+        <marker
+          id={markerId}
+          markerWidth="12"
+          markerHeight="12"
+          refX="10"
+          refY="6"
+          orient="auto"
+          markerUnits="userSpaceOnUse"
+        >
+          <path
+            d="M2,2 L10,6 L2,10 L4,6 Z"
+            fill={hexColor}
+            opacity={selected ? 1 : 0.8}
+          />
+        </marker>
+      </defs>
+
       <BaseEdge
         id={id}
         path={edgePath}
@@ -65,6 +96,7 @@ export function DependencyEdgeComponent({
         style={{
           strokeWidth: selected ? strokeWidth + 1 : strokeWidth,
           strokeDasharray: isTransitive ? "6 4" : undefined,
+          markerEnd: `url(#${markerId})`,
         }}
       />
 

package/src/components/canvas/SystemNode.tsx

@@ -6,6 +6,10 @@ export interface SystemNodeData extends Record<string, unknown> {
   status?: "operational" | "degraded" | "down";
   derivedState?: "info" | "degraded" | "down";
   systemId: string;
+  /** Number of systems this node depends on (outgoing edges via right handle) */
+  upstreamCount: number;
+  /** Number of systems that depend on this node (incoming edges via left handle) */
+  downstreamCount: number;
 }
 
 export type SystemNode = Node<SystemNodeData, "system">;
@@ -48,6 +52,8 @@ function combineStatus(
 /**
  * Custom React Flow node representing a system in the dependency graph.
  * Color-coded by worst of own status and derived warning state.
+ * Features a split footer bar showing directional dependency counts
+ * and color-coded handles for clear directionality.
  */
 export const SystemNodeComponent = memo(function SystemNodeComponent({
   data,
@@ -55,87 +61,122 @@ export const SystemNodeComponent = memo(function SystemNodeComponent({
 }: NodeProps<SystemNode>) {
   const effectiveStatus = combineStatus(data.status, data.derivedState);
   const styles = statusStyles[effectiveStatus];
+  const hasConnections = data.upstreamCount > 0 || data.downstreamCount > 0;
 
   return (
     <>
-      {/* Target handle (left) — "I am depended upon" */}
+      {/* Target handle (left) — "I am depended upon" — teal */}
       <Handle
         type="target"
         position={Position.Left}
-        className="!w-2.5 !h-2.5 !bg-muted-foreground/40 !border-2 !border-background"
+        className="!w-3 !h-3 !bg-teal-400/60 !border-2 !border-background !z-10"
       />
 
       <div
         className={`
-          px-4 py-3 rounded-xl border-2 shadow-lg backdrop-blur-sm
+          rounded-xl border-2 shadow-lg backdrop-blur-sm
           transition-all duration-200
           ${styles.border} ${styles.bg} ${styles.glow}
           ${selected ? "ring-2 ring-primary ring-offset-2 ring-offset-background" : ""}
           hover:scale-[1.02] cursor-grab active:cursor-grabbing
-          min-w-[140px] max-w-[200px]
+          min-w-[140px] max-w-[220px] overflow-hidden
         `}
       >
-        <div className="flex items-center gap-2">
-          {/* Status dot */}
-          <div className="relative flex-shrink-0">
-            <div
-              className={`w-2.5 h-2.5 rounded-full ${styles.dot}`}
-            />
-            {effectiveStatus !== "operational" && (
+        {/* Main body */}
+        <div className="px-4 py-3">
+          <div className="flex items-center gap-2">
+            {/* Status dot */}
+            <div className="relative flex-shrink-0">
               <div
-                className={`absolute inset-0 w-2.5 h-2.5 rounded-full ${styles.dot} animate-ping opacity-75`}
+                className={`w-2.5 h-2.5 rounded-full ${styles.dot}`}
               />
-            )}
-          </div>
+              {effectiveStatus !== "operational" && (
+                <div
+                  className={`absolute inset-0 w-2.5 h-2.5 rounded-full ${styles.dot} animate-ping opacity-75`}
+                />
+              )}
+            </div>
 
-          {/* System name */}
-          <span className="text-sm font-medium text-foreground truncate">
-            {data.label}
-          </span>
-        </div>
+            {/* System name */}
+            <span className="text-sm font-medium text-foreground truncate">
+              {data.label}
+            </span>
+          </div>
 
-        {/* Status labels */}
-        <div className="mt-1.5 flex flex-col gap-0.5">
-          <span
-            className={`text-[10px] uppercase tracking-wider font-semibold ${
-              (data.status ?? "operational") === "operational"
-                ? "text-emerald-500/70"
-                : (data.status ?? "operational") === "degraded"
-                  ? "text-amber-500/70"
-                  : "text-red-500/70"
-            }`}
-          >
-            {(data.status ?? "operational") === "operational"
-              ? "Healthy"
-              : (data.status ?? "operational") === "degraded"
-                ? "Degraded"
-                : "Unhealthy"}
-          </span>
-          {data.derivedState && (
+          {/* Status labels */}
+          <div className="mt-1.5 flex flex-col gap-0.5">
             <span
               className={`text-[10px] uppercase tracking-wider font-semibold ${
-                data.derivedState === "info"
-                  ? "text-blue-400/70"
-                  : data.derivedState === "degraded"
+                (data.status ?? "operational") === "operational"
+                  ? "text-emerald-500/70"
+                  : (data.status ?? "operational") === "degraded"
                     ? "text-amber-500/70"
                     : "text-red-500/70"
               }`}
             >
-              {data.derivedState === "info"
-                ? "↑ Upstream issue"
-                : data.derivedState === "degraded"
-                  ? "↑ Upstream degraded"
-                  : "↑ Upstream down"}
+              {(data.status ?? "operational") === "operational"
+                ? "Healthy"
+                : (data.status ?? "operational") === "degraded"
+                  ? "Degraded"
+                  : "Unhealthy"}
             </span>
-          )}
+            {data.derivedState && (
+              <span
+                className={`text-[10px] uppercase tracking-wider font-semibold ${
+                  data.derivedState === "info"
+                    ? "text-blue-400/70"
+                    : data.derivedState === "degraded"
+                      ? "text-amber-500/70"
+                      : "text-red-500/70"
+                }`}
+              >
+                {data.derivedState === "info"
+                  ? "↑ Upstream issue"
+                  : data.derivedState === "degraded"
+                    ? "↑ Upstream degraded"
+                    : "↑ Upstream down"}
+              </span>
+            )}
+          </div>
         </div>
+
+        {/* Directional footer — only shown when the node has connections */}
+        {hasConnections && (
+          <div className="flex border-t border-border/40">
+            {/* Left zone: incoming — systems that depend on this node */}
+            <div className="flex-1 flex items-center gap-1 px-2.5 py-1.5 bg-teal-500/5 border-r border-border/30">
+              <span className="text-[10px] text-teal-400/80 font-medium">
+                ←
+              </span>
+              <span className="text-[10px] text-teal-400/80 font-medium tabular-nums">
+                {data.downstreamCount}
+              </span>
+              <span className="text-[10px] text-muted-foreground/60 truncate">
+                used by
+              </span>
+            </div>
+
+            {/* Right zone: outgoing — systems this node depends on */}
+            <div className="flex-1 flex items-center justify-end gap-1 px-2.5 py-1.5 bg-violet-500/5">
+              <span className="text-[10px] text-muted-foreground/60 truncate">
+                depends
+              </span>
+              <span className="text-[10px] text-violet-400/80 font-medium tabular-nums">
+                {data.upstreamCount}
+              </span>
+              <span className="text-[10px] text-violet-400/80 font-medium">
+                →
+              </span>
+            </div>
+          </div>
+        )}
       </div>
 
-      {/* Source handle (right) — "I depend on..." */}
+      {/* Source handle (right) — "I depend on..." — violet */}
       <Handle
         type="source"
         position={Position.Right}
-        className="!w-2.5 !h-2.5 !bg-muted-foreground/40 !border-2 !border-background"
+        className="!w-3 !h-3 !bg-violet-400/60 !border-2 !border-background !z-10"
       />
     </>
   );