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
This commit is contained in:
@@ -247,7 +247,7 @@ function DependencyGraph({ projectName, packageName, tagName, onClose }: Depende
|
|||||||
<div className="dependency-graph-modal" onClick={onClose}>
|
<div className="dependency-graph-modal" onClick={onClose}>
|
||||||
<div className="dependency-graph-content" onClick={e => e.stopPropagation()}>
|
<div className="dependency-graph-content" onClick={e => e.stopPropagation()}>
|
||||||
<div className="dependency-graph-header">
|
<div className="dependency-graph-header">
|
||||||
<h2>Dependency Graph</h2>
|
<h2>DependGraph</h2>
|
||||||
<div className="dependency-graph-info">
|
<div className="dependency-graph-info">
|
||||||
<span>{projectName}/{packageName} @ {tagName}</span>
|
<span>{projectName}/{packageName} @ {tagName}</span>
|
||||||
{resolution && (
|
{resolution && (
|
||||||
|
|||||||
@@ -83,7 +83,7 @@ function PackagePage() {
|
|||||||
// Reverse dependencies state
|
// Reverse dependencies state
|
||||||
const [reverseDeps, setReverseDeps] = useState<DependentInfo[]>([]);
|
const [reverseDeps, setReverseDeps] = useState<DependentInfo[]>([]);
|
||||||
const [reverseDepsLoading, setReverseDepsLoading] = useState(false);
|
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 [reverseDepsPage, setReverseDepsPage] = useState(1);
|
||||||
const [reverseDepsTotal, setReverseDepsTotal] = useState(0);
|
const [reverseDepsTotal, setReverseDepsTotal] = useState(0);
|
||||||
const [reverseDepsHasMore, setReverseDepsHasMore] = useState(false);
|
const [reverseDepsHasMore, setReverseDepsHasMore] = useState(false);
|
||||||
@@ -690,17 +690,10 @@ function PackagePage() {
|
|||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
{/* Used By (Reverse Dependencies) Section */}
|
{/* Used By (Reverse Dependencies) Section - only show if there are reverse deps */}
|
||||||
|
{reverseDeps.length > 0 && (
|
||||||
<div className="used-by-section card">
|
<div className="used-by-section card">
|
||||||
<h3>Used By</h3>
|
<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>
|
|
||||||
) : (
|
|
||||||
<div className="reverse-deps-list">
|
<div className="reverse-deps-list">
|
||||||
<div className="deps-summary">
|
<div className="deps-summary">
|
||||||
{reverseDepsTotal} {reverseDepsTotal === 1 ? 'package depends' : 'packages depend'} on this:
|
{reverseDepsTotal} {reverseDepsTotal === 1 ? 'package depends' : 'packages depend'} on this:
|
||||||
@@ -743,8 +736,8 @@ function PackagePage() {
|
|||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
)}
|
|
||||||
</div>
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
<div className="usage-section card">
|
<div className="usage-section card">
|
||||||
<h3>Usage</h3>
|
<h3>Usage</h3>
|
||||||
|
|||||||
Reference in New Issue
Block a user