update logic to handle buttons colors and plot colors

Author: Ritika Mishra

src/components/Colors.ts

@@ -1,41 +1,37 @@
-export class ColorRGBA {
-  constructor(
-    public r: number,
-    public g: number,
-    public b: number,
-    public a: number
-  ) { }
-}
+// colors.ts
+
+// Base custom colors as an object for configuration
+export const customColors = {
+  'custom-1': '#EC6FAA',
+  'custom-2': '#CE6FAC',
+  'custom-3': '#B47EB7',
+  'custom-4': '#9D8DC4',
+  'custom-5': '#689AD2',
+  'custom-6': '#35A5CC',
+  'custom-7': '#30A8B4',
+  'custom-8': '#32ABA2',
+  'custom-9': '#2EAD8D',
+  'custom-10': '#31B068',
+  'custom-11': '#6CAB43',
+  'custom-12': '#94A135',
+  'custom-13': '#B19B31',
+  'custom-14': '#CC9136',
+  'custom-15': '#F2793B',
+  'custom-16': '#F2728B',
+};
 
-// Define custom colors as an array to guarantee order.
-export const customColors = [
-  '#EC6FAA', // Channel 1
-  '#CE6FAC', // Channel 2
-  '#B47EB7', // Channel 3
-  '#9D8DC4', // Channel 4
-  '#689AD2', // Channel 5
-  '#35A5CC', // Channel 6
-  '#30A8B4', // Channel 7
-  '#32ABA2', // Channel 8
-  '#2EAD8D', // Channel 9
-  '#31B068', // Channel 10
-  '#6CAB43', // Channel 11
-  '#94A135', // Channel 12
-  '#B19B31', // Channel 13
-  '#CC9136', // Channel 14
-  '#F2793B', // Channel 15
-  '#F2728B', // Channel 16
-];
+// Derive an array from the object to preserve order for indexing
+export const customColorsArray: string[] = Object.values(customColors);
 
-// Color adjustment functions remain unchanged.
+// --- Color adjustment functions ---
 function darkenColor(hex: string, amount: number): string {
   validateInput(hex, amount);
-  return adjustColor(hex, -amount);
+  return adjustColor(hex, -amount); // Negative for darkening
 }
 
 function lightenColor(hex: string, amount: number): string {
   validateInput(hex, amount);
-  return adjustColor(hex, amount);
+  return adjustColor(hex, amount); // Positive for lightening
 }
 
 function adjustColor(hex: string, amount: number): string {
@@ -66,21 +62,34 @@ function validateInput(hex: string, amount: number): void {
   }
 }
 
-// Create theme-specific color arrays using the array ordering.
-export const lightThemeColors = customColors.map(hex => darkenColor(hex, 0.2));
-export const darkThemeColors = customColors.map(hex => lightenColor(hex, 0.1));
+// Create theme-specific color arrays using the array ordering
+export const lightThemeColors = customColorsArray.map(hex => darkenColor(hex, 0.2));
+export const darkThemeColors = customColorsArray.map(hex => lightenColor(hex, 0.1));
 
+// Helper function to retrieve a color based on channel index and theme
 export function getCustomColor(index: number, theme: 'light' | 'dark'): string {
   const colors = theme === 'dark' ? darkThemeColors : lightThemeColors;
   return colors[index % colors.length];
 }
 
+// ColorRGBA class definition for plotting
+export class ColorRGBA {
+  constructor(
+    public r: number,
+    public g: number,
+    public b: number,
+    public a: number
+  ) { }
+}
+
+// Plot line color function (ensure proper indexing)
 export const getLineColor = (channelNumber: number, theme: 'light' | 'dark'): ColorRGBA => {
-  const index = channelNumber - 1; // Convert 1-indexed to 0-indexed.
+  // Convert 1-indexed channel number to 0-indexed index
+  const index = channelNumber - 1;
   const hex = getCustomColor(index, theme);
   const r = parseInt(hex.slice(1, 3), 16) / 255;
   const g = parseInt(hex.slice(3, 5), 16) / 255;
   const b = parseInt(hex.slice(5, 7), 16) / 255;
-  const alpha = theme === "dark" ? 1 : 0.8;
+  const alpha = theme === 'dark' ? 1 : 0.8;
   return new ColorRGBA(r, g, b, alpha);
 };

src/components/Connection.tsx

@@ -5,7 +5,7 @@ import { Input } from "./ui/input";
 import { EXGFilter, Notch } from './filters';
 import { useTheme } from "next-themes";
 import { useRouter } from "next/navigation"; // Import useRouter
-import { getCustomColor } from './Colors';
+import { getCustomColor, lightThemeColors } from './Colors';
 
 import {
     Cable,