Trying fix for theme switch at paused chart

akadeepesh · Sep 7, 2024 · 1c07f79 · 1c07f79
1 parent 00ef25d
commit 1c07f79
Showing 1 changed file with 12 additions and 12 deletions.
diff --git a/src/components/Canvas.tsx b/src/components/Canvas.tsx
@@ -1,5 +1,4 @@
 "use client";
-import { Pause, Play, Grid, List } from "lucide-react";
 import React, {
   useEffect,
   useRef,
@@ -15,7 +14,7 @@ interface CanvasProps {
   data: string;
   selectedBits: BitSelection;
   isGridView: boolean;
-  isDisplay: boolean; // New prop for play/pause functionality
+  isDisplay: boolean;
 }
 
 const Canvas: React.FC<CanvasProps> = ({
@@ -29,7 +28,6 @@ const Canvas: React.FC<CanvasProps> = ({
   const chartRef = useRef<SmoothieChart[]>([]);
   const seriesRef = useRef<(TimeSeries | null)[]>([]);
   const [isChartInitialized, setIsChartInitialized] = useState(false);
-  const [isPaused, setIsPaused] = useState(Array(channels.length).fill(false)); // Paused state for each channe
   const [isGlobalPaused, setIsGlobalPaused] = useState(!isDisplay);
   const batchSize = 10;
   const batchBuffer = useMemo<Array<{ time: number; values: number[] }>>(
@@ -119,6 +117,12 @@ const Canvas: React.FC<CanvasProps> = ({
           ) as HTMLCanvasElement,
           500
         );
+
+        if (isGlobalPaused) {
+          chart.stop();
+        } else {
+          chart.start();
+        }
       }
     });
   }, [
@@ -134,7 +138,7 @@ const Canvas: React.FC<CanvasProps> = ({
 
     batchBuffer.forEach((batch) => {
       channels.forEach((channel, index) => {
-        if (channel && !isPaused[index]) {
+        if (channel) {
           const series = seriesRef.current[index];
           if (series && !isNaN(batch.values[index])) {
             series.append(batch.time, batch.values[index]);
@@ -144,7 +148,7 @@ const Canvas: React.FC<CanvasProps> = ({
     });
 
     batchBuffer.length = 0;
-  }, [channels, batchBuffer, isGlobalPaused, isPaused]);
+  }, [channels, batchBuffer, isGlobalPaused]);
 
   const handleDataUpdate = useCallback(
     (line: string) => {
@@ -161,7 +165,7 @@ const Canvas: React.FC<CanvasProps> = ({
     },
     [processBatch, batchBuffer, isDisplay]
   );
-  // console.log(data);
+
   useEffect(() => {
     if (isChartInitialized) {
       const lines = String(data).split("\n");
@@ -285,19 +289,15 @@ const Canvas: React.FC<CanvasProps> = ({
     <div className="flex flex-col justify-center items-start px-4 m-4 h-[80vh]">
       <div
         className={`grid ${
-          isGridView
-            ? "md:grid-cols-2 grid-cols-1" // Apply the same spacing for both horizontal and vertical gaps
-            : "grid-cols-1"
+          isGridView ? "md:grid-cols-2 grid-cols-1" : "grid-cols-1"
         } w-full h-full`}
       >
         {channels.map((channel, index) => {
           if (channel) {
             return (
               <div
                 key={index}
-                className={`flex flex-col w-full relative h-full${
-                  isGridView ? "" : ""
-                }`}
+                className={`flex flex-col w-full relative h-full`}
               >
                 <div
                   className={`border border-secondary-foreground w-full ${