revert: chart select

src/components/NetworkChart.tsx

@@ -111,27 +111,14 @@ export const NetworkChartClient = React.memo(function NetworkChart({
 
   const defaultChart = "All";
 
-  const [activeCharts, setActiveCharts] = React.useState<string[]>([
+  const [activeChart, setActiveChart] = React.useState(defaultChart);
-    defaultChart,
-  ]);
 
-  const handleButtonClick = useCallback((chart: string) => {
+  const handleButtonClick = useCallback(
-    setActiveCharts((prev) => {
+    (chart: string) => {
-      if (chart === defaultChart) {
+      setActiveChart((prev) => (prev === chart ? defaultChart : chart));
-        return [defaultChart];
+    },
-      }
+    [defaultChart],
-
+  );
-      const newCharts = prev.filter((c) => c !== defaultChart);
-      const chartIndex = newCharts.indexOf(chart);
-
-      if (chartIndex === -1) {
-        return newCharts.length === 0 ? [chart] : [...newCharts, chart];
-      } else {
-        const result = newCharts.filter((c) => c !== chart);
-        return result.length === 0 ? [defaultChart] : result;
-      }
-    });
-  }, []);
 
   const getColorByIndex = useCallback(
     (chart: string) => {
@@ -146,7 +133,7 @@ export const NetworkChartClient = React.memo(function NetworkChart({
       chartDataKey.map((key) => (
         <button
           key={key}
-          data-active={activeCharts.includes(key)}
+          data-active={activeChart === key}
           className={`relative z-30 flex cursor-pointer flex-1 flex-col justify-center gap-1 border-b border-neutral-200 dark:border-neutral-800 px-6 py-4 text-left data-[active=true]:bg-muted/50 sm:border-l sm:border-t-0 sm:px-6`}
           onClick={() => handleButtonClick(key)}
         >
@@ -158,11 +145,22 @@ export const NetworkChartClient = React.memo(function NetworkChart({
           </span>
         </button>
       )),
-    [chartDataKey, activeCharts, chartData, handleButtonClick],
+    [chartDataKey, activeChart, chartData, handleButtonClick],
   );
 
   const chartLines = useMemo(() => {
-    if (activeCharts.includes(defaultChart)) {
+    if (activeChart !== defaultChart) {
+      return (
+        <Line
+          isAnimationActive={false}
+          strokeWidth={1}
+          type="linear"
+          dot={false}
+          dataKey="avg_delay"
+          stroke={getColorByIndex(activeChart)}
+        />
+      );
+    }
     return chartDataKey.map((key) => (
       <Line
         key={key}
@@ -175,21 +173,7 @@ export const NetworkChartClient = React.memo(function NetworkChart({
         connectNulls={true}
       />
     ));
-    }
+  }, [activeChart, defaultChart, chartDataKey, getColorByIndex]);
-
-    return activeCharts.map((chart) => (
-      <Line
-        key={chart}
-        isAnimationActive={false}
-        strokeWidth={1}
-        type="linear"
-        dot={false}
-        dataKey={chart}
-        stroke={getColorByIndex(chart)}
-        connectNulls={true}
-      />
-    ));
-  }, [activeCharts, chartDataKey, getColorByIndex]);
 
   return (
     <Card>
@@ -212,9 +196,9 @@ export const NetworkChartClient = React.memo(function NetworkChart({
           <LineChart
             accessibilityLayer
             data={
-              activeCharts.includes(defaultChart)
+              activeChart === defaultChart
                 ? formattedData
-                : chartData[activeCharts[0]]
+                : chartData[activeChart]
             }
             margin={{ left: 12, right: 12 }}
           >
@@ -247,7 +231,7 @@ export const NetworkChartClient = React.memo(function NetworkChart({
                 />
               }
             />
-            {activeCharts.includes(defaultChart) && (
+            {activeChart === defaultChart && (
               <ChartLegend content={<ChartLegendContent />} />
             )}
             {chartLines}