From 6476d68d4f29ca173eab5cc4182945652dd381e5 Mon Sep 17 00:00:00 2001
From: Michael Quigley <michael@quigley.com>
Date: Wed, 18 Dec 2024 14:19:46 -0500
Subject: [PATCH] auto-hide account sparkline when no activity (#799)

---
 ui100/src/AccountNode.tsx | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/ui100/src/AccountNode.tsx b/ui100/src/AccountNode.tsx
index d5c133bc..796acc09 100644
--- a/ui100/src/AccountNode.tsx
+++ b/ui100/src/AccountNode.tsx
@@ -9,6 +9,12 @@ import {useEffect, useState} from "react";
 const AccountNode = ({ data }) => {
     const environmentMetrics = useMetricsStore((state) => state.environments);
     const [sparkData, setSparkData] = useState<number[]>(Array<number>(31).fill(0));
+    const hiddenSparkline = <></>;
+    const visibleSparkline = (
+        <Grid2 container sx={{ flexGrow: 1, p: 0.5 }}>
+            <SparkLineChart data={sparkData} height={30} width={100} colors={['#04adef']}  />
+        </Grid2>
+    );
 
     useEffect(() => {
         let s = new Array<number>(31);
@@ -32,9 +38,7 @@ const AccountNode = ({ data }) => {
                 <Grid2 display="flex"><AccountIcon sx={{ fontSize: 15, mr: 0.5 }}/></Grid2>
                 <Grid2 display="flex">{data.label}</Grid2>
             </Grid2>
-            <Grid2 container sx={{ flexGrow: 1, p: 0.5 }}>
-                <SparkLineChart data={sparkData} height={30} width={100} colors={['#04adef']}  />
-            </Grid2>
+            {sparkData.find(x => x > 0) ? visibleSparkline : hiddenSparkline}
         </>
     );
 }