From f87e5b4a5104ed76e822e6d88f7ecee3d29e4dd6 Mon Sep 17 00:00:00 2001
From: Mondo Diaz <armando.m.diaz@boeing.com>
Date: Mon, 2 Feb 2026 20:34:32 -0600
Subject: [PATCH] Improve dependency UI: rename to DependGraph, hide empty Used
 By

- Rename "Dependency Graph" modal title to "DependGraph"
- Hide "Used By" section when no packages depend on this package
---
 frontend/src/components/DependencyGraph.tsx |  2 +-
 frontend/src/pages/PackagePage.tsx          | 21 +++++++--------------
 2 files changed, 8 insertions(+), 15 deletions(-)

diff --git a/frontend/src/components/DependencyGraph.tsx b/frontend/src/components/DependencyGraph.tsx
index cdfb866..c133eb8 100644
--- a/frontend/src/components/DependencyGraph.tsx
+++ b/frontend/src/components/DependencyGraph.tsx
@@ -247,7 +247,7 @@ function DependencyGraph({ projectName, packageName, tagName, onClose }: Depende
     <div className="dependency-graph-modal" onClick={onClose}>
       <div className="dependency-graph-content" onClick={e => e.stopPropagation()}>
         <div className="dependency-graph-header">
-          <h2>Dependency Graph</h2>
+          <h2>DependGraph</h2>
           <div className="dependency-graph-info">
             <span>{projectName}/{packageName} @ {tagName}</span>
             {resolution && (
diff --git a/frontend/src/pages/PackagePage.tsx b/frontend/src/pages/PackagePage.tsx
index 16e2f64..82b43a8 100644
--- a/frontend/src/pages/PackagePage.tsx
+++ b/frontend/src/pages/PackagePage.tsx
@@ -83,7 +83,7 @@ function PackagePage() {
   // Reverse dependencies state
   const [reverseDeps, setReverseDeps] = useState<DependentInfo[]>([]);
   const [reverseDepsLoading, setReverseDepsLoading] = useState(false);
-  const [reverseDepsError, setReverseDepsError] = useState<string | null>(null);
+  const [_reverseDepsError, setReverseDepsError] = useState<string | null>(null);
   const [reverseDepsPage, setReverseDepsPage] = useState(1);
   const [reverseDepsTotal, setReverseDepsTotal] = useState(0);
   const [reverseDepsHasMore, setReverseDepsHasMore] = useState(false);
@@ -690,17 +690,10 @@ function PackagePage() {
         />
       )}
 
-      {/* Used By (Reverse Dependencies) Section */}
-      <div className="used-by-section card">
-        <h3>Used By</h3>
-
-        {reverseDepsLoading ? (
-          <div className="deps-loading">Loading reverse dependencies...</div>
-        ) : reverseDepsError ? (
-          <div className="deps-error">{reverseDepsError}</div>
-        ) : reverseDeps.length === 0 ? (
-          <div className="deps-empty">No packages depend on this package</div>
-        ) : (
+      {/* Used By (Reverse Dependencies) Section - only show if there are reverse deps */}
+      {reverseDeps.length > 0 && (
+        <div className="used-by-section card">
+          <h3>Used By</h3>
           <div className="reverse-deps-list">
             <div className="deps-summary">
               {reverseDepsTotal} {reverseDepsTotal === 1 ? 'package depends' : 'packages depend'} on this:
@@ -743,8 +736,8 @@ function PackagePage() {
               </div>
             )}
           </div>
-        )}
-      </div>
+        </div>
+      )}
 
       <div className="usage-section card">
         <h3>Usage</h3>