FFT UI updated

Author: Amanmahe

src/components/BandPowerGraph.tsx

@@ -217,7 +217,7 @@ const Graph
   }, [animateGraph]);
 
   return (
-    <div ref={containerRef} className="w-full h-full max-w-[500px] min-h-0 min-w-0">
+    <div ref={containerRef} className="w-full h-full max-w-[700px] min-h-0 min-w-0">
   <canvas ref={canvasRef} className="w-full h-full" />
 </div>
   );

src/components/Connection.tsx

@@ -763,7 +763,7 @@ const Connection: React.FC<ConnectionProps> = ({
                     );
                 }) || null;
             }
-
+            handleFrequencySelectionEXG(0, 3);
             let baudRate;
             let serialTimeout;
 
@@ -1744,68 +1744,6 @@ const Connection: React.FC<ConnectionProps> = ({
                                 <div className="flex items-center">
                                     <div className="text-sm font-semibold w-12">{channelNames[0]}</div>
                                     <div className="flex space-x-2">
-                                        <div className="flex border border-input rounded-xl items-center mx-0 px-0">
-                                        <Button
-                                                        variant="outline"
-                                                        size="sm"
-                                                        onClick={() => removeEXGFilter(0)}
-                                                        className={`rounded-xl rounded-r-none border-l-none border-0
-                                                        ${appliedEXGFiltersRef.current[0] === undefined
-                                                                ? "bg-red-700 hover:bg-white-500 hover:text-white text-white" // Disabled background
-                                                                : "bg-white-500" // Active background
-                                                            }`}
-                                                    >
-                                                        <CircleOff size={17} />
-                                                    </Button>
-                                                    <Button
-                                                        variant="outline"
-                                                        size="sm"
-                                                        onClick={() => handleFrequencySelectionEXG(0, 4)}
-                                                        className={`flex items-center justify-center px-3 py-2 rounded-none select-none border-0
-                                                        ${appliedEXGFiltersRef.current[0] === 4
-                                                                ? "bg-green-700 hover:bg-white-500 text-white hover:text-white" // Disabled background
-                                                                : "bg-white-500" // Active background
-                                                            }`}
-                                                    >
-                                                        <BicepsFlexed size={17} />
-                                                    </Button>
-                                                    <Button
-                                                        variant="outline"
-                                                        size="sm"
-                                                        onClick={() => handleFrequencySelectionEXG(0, 3)}
-                                                        className={`flex items-center justify-center px-3 py-2 rounded-none select-none border-0
-                                                      ${appliedEXGFiltersRef.current[0] === 3
-                                                                ? "bg-green-700 hover:bg-white-500 text-white hover:text-white" // Disabled background
-                                                                : "bg-white-500" // Active background
-                                                            }`}
-                                                    >
-                                                        <Brain size={17} />
-                                                    </Button>
-                                                    <Button
-                                                        variant="outline"
-                                                        size="sm"
-                                                        onClick={() => handleFrequencySelectionEXG(0, 1)}
-                                                        className={`flex items-center justify-center px-3 py-2 rounded-none select-none border-0
-                                                        ${appliedEXGFiltersRef.current[0] === 1
-                                                                ? "bg-green-700 hover:bg-white-500 text-white hover:text-white" // Disabled background
-                                                                : "bg-white-500" // Active background
-                                                            }`}
-                                                    >
-                                                        <Heart size={17} />
-                                                    </Button>
-                                                    <Button
-                                                        variant="outline"
-                                                        size="sm"
-                                                        onClick={() => handleFrequencySelectionEXG(0, 2)}
-                                                        className={`rounded-xl rounded-l-none border-0
-                                                        ${appliedEXGFiltersRef.current[0] === 2
-                                                                ? "bg-green-700 hover:bg-white-500 text-white hover:text-white" // Disabled background
-                                                                : "bg-white-500" // Active background
-                                                            }`}
-                                                    >
-                                                        <Eye size={17} />
-                                                    </Button>
-                                        </div>
                                         <div className="flex border border-input rounded-xl items-center mx-0 px-0">
                                                     <Button
                                                         variant="outline"

src/components/FFT.tsx

@@ -335,14 +335,14 @@ const FFT = forwardRef(
       </main>
 
       {/* Responsive container for FFT (canvas) and BandPowerGraph */}
-      <div className="flex-1 m-2 flex flex-col md:flex-row overflow-hidden min-h-0 gap-2">
-        {/* FFT Canvas container */}
-        <div ref={containerRef} className="flex-1 overflow-hidden min-h-0 min-w-0">
+      <div className="flex-1 m-2 flex flex-col md:flex-row justify-center  overflow-hidden min-h-0 gap-12">
+
+      {/* FFT Canvas container */}
+        <div ref={containerRef} className="flex-1 overflow-hidden min-h-0 min-w-0 ml-12 ">
           <canvas ref={canvasRef} className="w-full h-full" />
         </div>
-              
         {/* BandPowerGraph container */}
-        <div className="flex-1 overflow-hidden min-h-0 min-w-0">
+        <div className="flex-1 overflow-hidden min-h-0 min-w-0 ml-4">
           <BandPowerGraph fftData={fftData} samplingRate={currentSamplingRate} />
         </div>
       </div>