etkr4k/bedolaga-cabinet
1
0
Fork 0
mirror of https://github.com/chillpadclub/bedolaga-cabinet.git synced 2026-07-30 02:23:47 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: graph layout, node visibility and FA2 settings

Browse Source 
- Switch to CSS Grid layout for reliable content area height
- Use inferSettings() for ForceAtlas2 auto-tuning based on graph structure
- Enable linLogMode and adjustSizes for better node clustering
- Fit camera after layout settles with animatedReset
- Increase node sizes for better visibility (MIN 8, MAX 40)
- Center controls at bottom, fix overlay positions
This commit is contained in:
Fringg
2026-03-19 09:18:11 +03:00
parent fd9a47ecda
commit 7c0b8e571a
3 changed files with 29 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
src/pages/ReferralNetwork/ReferralNetwork.tsx
View File

@@ -31,10 +31,10 @@ export function ReferralNetwork() {
return (
<div
id="referral-network-container"
className="fixed inset-x-0 bottom-0 top-16 z-40 flex flex-col bg-[#0a0a0f] sm:top-14"
className="fixed inset-x-0 bottom-0 top-16 z-40 grid grid-rows-[auto_1fr] bg-[#0a0a0f] sm:top-14"
>
{/* Top bar */}
<div className="relative z-20 shrink-0 border-b border-dark-700/50 bg-dark-900/90 backdrop-blur-md">
<div className="z-20 border-b border-dark-700/50 bg-dark-900/90 backdrop-blur-md">
<div className="flex items-center gap-2 px-3 py-2 sm:gap-3 sm:px-4 sm:py-3">
<AdminBackButton />
<h1 className="shrink-0 text-sm font-bold text-dark-100 sm:text-base">
@@ -45,11 +45,11 @@ export function ReferralNetwork() {
</div>
</div>
{/* Main content area */}
<div className="relative min-h-0 flex-1">
{/* Main content area — grid row takes all remaining space */}
<div className="relative overflow-hidden">
{/* Loading state */}
{isLoading && (
<div className="absolute inset-0 flex items-center justify-center">
<div className="absolute inset-0 z-10 flex items-center justify-center">
<div className="text-center">
<div className="mx-auto mb-3 h-8 w-8 animate-spin rounded-full border-2 border-dark-600 border-t-accent-400" />
<p className="text-sm text-dark-400">{t('admin.referralNetwork.loading')}</p>
@@ -59,35 +59,35 @@ export function ReferralNetwork() {
{/* Error state */}
{isError && (
<div className="absolute inset-0 flex items-center justify-center">
<div className="absolute inset-0 z-10 flex items-center justify-center">
<p className="text-sm text-error-400">{t('admin.referralNetwork.error')}</p>
</div>
)}
{/* Empty state */}
{networkData && networkData.users.length === 0 && networkData.campaigns.length === 0 && (
<div className="absolute inset-0 flex items-center justify-center">
<div className="absolute inset-0 z-10 flex items-center justify-center">
<p className="text-sm text-dark-500">{t('admin.referralNetwork.empty')}</p>
</div>
)}
{/* Graph */}
{/* Graph — fills entire content area */}
{networkData && (networkData.users.length > 0 || networkData.campaigns.length > 0) && (
<>
<NetworkGraph data={networkData} className="absolute inset-0" />
<NetworkGraph data={networkData} className="absolute inset-0 h-full w-full" />
{/* Bottom-left: stats overlay */}
<div className="absolute bottom-4 left-4 z-10">
<div className="absolute bottom-3 left-3 z-10 sm:bottom-4 sm:left-4">
<NetworkStats data={networkData} />
</div>
{/* Bottom-right: legend (hidden on mobile to avoid overlap) */}
<div className="absolute bottom-4 right-4 z-10 hidden sm:block">
<div className="absolute bottom-3 right-3 z-10 hidden sm:bottom-4 sm:right-4 sm:block">
<NetworkLegend />
</div>
{/* Bottom-right on mobile, bottom-center on desktop: controls */}
<div className="absolute bottom-4 right-4 z-10 sm:left-1/2 sm:right-auto sm:-translate-x-1/2">
{/* Bottom-center: controls */}
<div className="absolute bottom-3 left-1/2 z-10 -translate-x-1/2 sm:bottom-4">
<NetworkControls />
</div>
</>