table update

web/src/components/ui/charts/TableChart/BusterTableChart.tsx

@@ -11,14 +11,11 @@ import { useMemoizedFn } from '@/hooks';
 import { AppDataGrid } from '@/components/ui/table/AppDataGrid';
 import './TableChart.css';
 import { cn } from '@/lib/classMerge';
+import { useUpdateMetricChart } from '@/context/Metrics';
 
 export interface BusterTableChartProps extends BusterTableChartConfig, BusterChartPropsBase {}
 
-const BusterTableChartBase: React.FC<
+const BusterTableChartBase: React.FC<BusterTableChartProps> = ({
-  BusterTableChartProps & {
-    onChangeConfig?: (config: Partial<IBusterMetricChartConfig>) => void;
-  }
-> = ({
   className = '',
   onMounted,
   data,
@@ -27,13 +24,39 @@ const BusterTableChartBase: React.FC<
   tableColumnWidths = DEFAULT_CHART_CONFIG.tableColumnWidths,
   readOnly = false,
   onInitialAnimationEnd,
-  onChangeConfig,
   //TODO
   tableHeaderBackgroundColor,
   tableHeaderFontColor,
   animate,
   tableColumnFontColor
 }) => {
+  const { onUpdateMetricChartConfig } = useUpdateMetricChart();
+
+  const onChangeConfig = useMemoizedFn((config: Partial<IBusterMetricChartConfig>) => {
+    if (readOnly) return;
+    onUpdateMetricChartConfig({ chartConfig: config });
+  });
+
+  const onUpdateTableColumnOrder = useMemoizedFn((columns: string[]) => {
+    if (readOnly) return;
+    const config: Partial<IBusterMetricChartConfig> = {
+      tableColumnOrder: columns
+    };
+
+    onChangeConfig(config);
+  });
+
+  const onUpdateTableColumnSize = useMemoizedFn((columns: { key: string; size: number }[]) => {
+    if (readOnly) return;
+    const config: Partial<IBusterMetricChartConfig> = {
+      tableColumnWidths: columns.reduce<Record<string, number>>((acc, { key, size }) => {
+        acc[key] = Number(size.toFixed(1));
+        return acc;
+      }, {})
+    };
+    onChangeConfig(config);
+  });
+
   //THIS MUST BE A USE CALLBACK
   const onFormatHeader = useCallback(
     (value: any, columnName: string) => {
@@ -49,28 +72,8 @@ const BusterTableChartBase: React.FC<
     [columnLabelFormats]
   );
 
-  const onUpdateTableColumnOrder = useMemoizedFn((columns: string[]) => {
-    if (readOnly) return;
-    const config: Partial<IBusterMetricChartConfig> = {
-      tableColumnOrder: columns
-    };
-
-    onChangeConfig?.(config);
-  });
-
-  const onUpdateTableColumnSize = useMemoizedFn((columns: { key: string; size: number }[]) => {
-    if (readOnly) return;
-    const config: Partial<IBusterMetricChartConfig> = {
-      tableColumnWidths: columns.reduce<Record<string, number>>((acc, { key, size }) => {
-        acc[key] = size;
-        return acc;
-      }, {})
-    };
-    onChangeConfig?.(config);
-  });
-
   const onReady = useMemoizedFn(() => {
-    onMounted?.(); //I decided to remove this because it was causing a double render
+    onMounted?.();
     requestAnimationFrame(() => {
       onInitialAnimationEnd?.();
     });

web/src/components/ui/popup/PopupContainer.tsx

@@ -16,7 +16,9 @@ export const PopupContainer: React.FC<{
           animate={{ opacity: 1, y: 0 }}
           exit={{ opacity: 0, y: -3 }}
           transition={{ duration: 0.12 }}>
-          <div className="bg-background rounded px-2 py-1.5 shadow">{show && <>{children}</>}</div>
+          <div className="bg-background rounded px-2 py-1.5 shadow-md">
+            {show && <>{children}</>}
+          </div>
         </motion.div>
       )}
     </AnimatePresence>