fixed broken mounting hook

web/src/components/ui/charts/BusterChartJS/BusterChartJS.tsx

@@ -2,7 +2,7 @@
 
 import './ChartJSTheme';
 
-import React, { useRef, useState } from 'react';
+import React, { useCallback, useRef, useState } from 'react';
 import { DEFAULT_CHART_CONFIG, DEFAULT_COLUMN_METADATA } from '@/api/asset_interfaces/metric';
 import { BusterChartJSLegendWrapper } from './BusterChartJSLegendWrapper';
 import { ChartJSOrUndefined } from './core/types';
@@ -37,9 +37,9 @@ export const BusterChartJS: React.FC<BusterChartComponentProps> = ({
     onChartMounted?.();
   });
 
-  const onInitialAnimationEndPreflight = useMemoizedFn(() => {
+  const onInitialAnimationEndPreflight = useCallback(() => {
-    onInitialAnimationEnd?.();
+    if (chartRef.current?.attached) onInitialAnimationEnd?.();
-  });
+  }, [onInitialAnimationEnd]);
 
   return (
     <BusterChartJSLegendWrapper

web/src/components/ui/charts/BusterChartJS/BusterChartJSComponent.tsx

@@ -1,4 +1,6 @@
-import React, { useMemo } from 'react';
+'use client';
+
+import React, { useMemo, useState } from 'react';
 import {
   Chart,
   ChartHoverBarPlugin,
@@ -184,10 +186,6 @@ export const BusterChartJSComponent = React.memo(
         return [];
       }, [selectedChartType]);
 
-      useMount(() => {
-        console.log('chartOptions', options);
-      });
-
       return (
         <Chart
           className={className}

web/src/components/ui/charts/BusterChartJS/ChartJSTheme.ts

@@ -20,8 +20,7 @@ import {
   BubbleController,
   PieController,
   ScatterController,
-  DoughnutController,
+  DoughnutController
-  registry
 } from 'chart.js';
 import { ChartMountedPlugin } from './core/plugins';
 import ChartDeferred from 'chartjs-plugin-deferred';
@@ -34,8 +33,6 @@ import { truncateText } from '@/lib/text';
 
 import './core/plugins/chartjs-scale-tick-duplicate';
 
-// Register the scale properly
-
 const fontFamily = isServer
   ? 'Roobert_Pro'
   : getComputedStyle(document.documentElement).getPropertyValue('--font-sans');

web/src/components/ui/charts/BusterChartJS/core/plugins/chartjs-plugin-mounted.tsx

@@ -9,20 +9,27 @@ declare module 'chart.js' {
   interface PluginOptionsByType<TType extends ChartType> {
     chartMounted?: ChartMountedPluginOptions;
   }
+
+  interface Chart {
+    $mountedPlugin: boolean;
+  }
 }
 
 export const ChartMountedPlugin: Plugin<ChartType, ChartMountedPluginOptions> = {
   id: 'chartMounted',
   afterInit: (chart, args, options) => {
+    if (!chart || !options) return;
     options?.onMounted?.(chart);
+    chart.$mountedPlugin = true;
   },
   afterRender: (chart, args, options) => {
+    if (chart.$mountedPlugin || !chart || !options) return;
     const hasLabels = !!chart.data?.labels?.length;
-    if (hasLabels) {
+    if (hasLabels && options?.onInitialAnimationEnd) {
       options?.onInitialAnimationEnd?.(chart);
+      chart.$mountedPlugin = true;
     }
   },
-
   defaults: {
     onMounted: () => {},
     onInitialAnimationEnd: () => {}

web/src/components/ui/charts/BusterChartJS/core/plugins/chartjs-scale-tick-duplicate.ts

@@ -21,43 +21,43 @@ declare module 'chart.js' {
   }
 }
 
-// const originalBuildTicks = TimeScale.prototype.buildTicks;
+const originalBuildTicks = TimeScale.prototype.buildTicks;
 
 // // // Override buildTicks
-// TimeScale.prototype.buildTicks = function () {
+TimeScale.prototype.buildTicks = function () {
-//   // Generate default ticks
+  // Generate default ticks
-//   const defaultTicks = originalBuildTicks.call(this);
+  const defaultTicks = originalBuildTicks.call(this);
 
-//   // Access tick callback and display format
+  // Access tick callback and display format
-//   const tickCallback = this.options.ticks?.callback;
+  const tickCallback = this.options.ticks?.callback;
-//   const displayFormat =
+  const displayFormat =
-//     this.options.time?.displayFormats?.[this._unit] ||
+    this.options.time?.displayFormats?.[this._unit] ||
-//     this.options.time?.displayFormats?.month ||
+    this.options.time?.displayFormats?.month ||
-//     'MMM';
+    'MMM';
-//   const format = this._adapter.format.bind(this._adapter);
+  const format = this._adapter.format.bind(this._adapter);
 
-//   // Deduplicate ticks
+  // Deduplicate ticks
-//   const seen = new Set();
+  const seen = new Set();
-//   const uniqueTicks = [];
+  const uniqueTicks = [];
 
-//   for (let i = 0; i < defaultTicks.length; i++) {
+  for (let i = 0; i < defaultTicks.length; i++) {
-//     const tick = defaultTicks[i];
+    const tick = defaultTicks[i];
-//     let label = tickCallback
+    let label = tickCallback
-//       ? tickCallback.call(this, tick.value, i, defaultTicks)
+      ? tickCallback.call(this, tick.value, i, defaultTicks)
-//       : format(tick.value, displayFormat);
+      : format(tick.value, displayFormat);
-//     const stringLabel = String(label ?? '');
+    const stringLabel = String(label ?? '');
 
-//     if (!seen.has(stringLabel)) {
+    if (!seen.has(stringLabel)) {
-//       seen.add(stringLabel);
+      seen.add(stringLabel);
-//       uniqueTicks.push({
+      uniqueTicks.push({
-//         ...tick,
+        ...tick,
-//         label: stringLabel
+        label: stringLabel
-//       });
+      });
-//     }
+    }
-//   }
+  }
 
-//   // Set the filtered ticks on the axis instance
+  // Set the filtered ticks on the axis instance
-//   this.ticks = uniqueTicks;
+  this.ticks = uniqueTicks;
 
-//   return uniqueTicks;
+  return uniqueTicks;
-// };
+};

web/src/components/ui/charts/BusterChartJS/hooks/useOptions/useOptions.tsx

@@ -160,7 +160,7 @@ export const useOptions = ({
   const chartMounted = useMemo(() => {
     return {
       onMounted: onChartReady,
-      onInitialAnimationEnd: onInitialAnimationEnd
+      onInitialAnimationEnd
     };
   }, [onChartReady, onInitialAnimationEnd]);
 

web/src/components/ui/charts/BusterChartJS/hooks/useOptions/useXAxis/useXAxis.ts

@@ -165,18 +165,6 @@ export const useXAxis = ({
     return DEFAULT_X_AXIS_TICK_CALLBACK.call(this, value, index, this.getLabels() as any);
   });
 
-  const tickCallback = useMemo(() => {
-    if (type === 'time') {
-      const isSingleXAxis = selectedAxis.x.length === 1;
-      const columnLabelFormat = xAxisColumnFormats[selectedAxis.x[0]];
-      const isDate = columnLabelFormat?.columnType === 'date';
-      const isAutoDate = columnLabelFormat?.dateFormat === 'auto' || !columnLabelFormat?.dateFormat;
-      const useAutoDate = isSingleXAxis && isDate && isAutoDate;
-      if (useAutoDate) return customTickCallback;
-    }
-    return customTickCallback;
-  }, [customTickCallback, type, selectedAxis.x, xAxisColumnFormats]);
-
   const rotation = useMemo(() => {
     if (xAxisLabelRotation === 'auto' || xAxisLabelRotation === undefined) return undefined;
     return {
@@ -230,7 +218,7 @@ export const useXAxis = ({
           maxTicksLimit: type === 'time' ? (timeUnit === 'month' ? 12 : 18) : undefined,
           sampleSize: type === 'time' ? 24 : undefined,
           display: xAxisShowAxisLabel,
-          callback: tickCallback as any, //I need to use null for auto date
+          callback: customTickCallback as any, //I need to use null for auto date
           //@ts-ignore
           time: {
             unit: timeUnit
@@ -244,14 +232,13 @@ export const useXAxis = ({
       title,
       isScatterChart,
       isPieChart,
-      tickCallback,
+      customTickCallback,
       xAxisShowAxisLabel,
       stacked,
       type,
       grid,
       timeUnit,
-      rotation,
+      rotation
-      tickCallback
     ]);
 
   return memoizedXAxisOptions;

web/src/components/ui/grid/BusterResizeableGrid.tsx

@@ -388,7 +388,7 @@ const newRowPreflight = (newRows: BusterResizeableGridRow[]) => {
   newRowsCopy = newRowsCopy.map((row, index) => {
     const numberOfColumns = row.columnSizes?.length || 0;
     const numberOfItems = row.items.length;
-    // row.id = `${index + 1}`; //we use this instead of uuid because the api likes it better this way
+    row.id = `${index + 1}`; //we use this instead of uuid because the api likes it better this way
     if (
       numberOfItems !== numberOfColumns ||
       row.columnSizes?.reduce((a, b) => a + b, 0) !== NUMBER_OF_COLUMNS

web/src/components/ui/list/BusterInfiniteList/BusterInfiniteList.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import React, { useRef } from 'react';
-import { useMemoizedFn, useWhyDidYouUpdate } from '@/hooks';
+import { useMemoizedFn } from '@/hooks';
 import { BusterListProps } from '../BusterList';
 import { getAllIdsInSection } from '../BusterList/helpers';
 import { useEffect, useMemo } from 'react';

web/src/components/ui/segmented/AppSegmented.tsx

@@ -6,14 +6,7 @@ import { motion } from 'framer-motion';
 import { cn } from '@/lib/classMerge';
 import { useEffect, useState, useLayoutEffect, useTransition } from 'react';
 import { cva } from 'class-variance-authority';
-import {
+import { useMemoizedFn, useMount, useSize } from '@/hooks';
-  useMemoizedFn,
-  useMergedRefs,
-  useMount,
-  useSize,
-  useThrottleFn,
-  useWhyDidYouUpdate
-} from '@/hooks';
 import { Tooltip } from '../tooltip/Tooltip';
 import Link from 'next/link';
 import { useRouter } from 'next/navigation';

web/src/controllers/DashboardController/DashboardViewDashboardController/DashboardContentController/DashboardContentController.tsx

@@ -3,7 +3,7 @@
 import React, { useEffect, useMemo, useState } from 'react';
 import isEmpty from 'lodash/isEmpty';
 import { BusterResizeableGrid, BusterResizeableGridRow } from '@/components/ui/grid';
-import { useDebounceFn, useMemoizedFn, useWhyDidYouUpdate } from '@/hooks';
+import { useDebounceFn, useMemoizedFn } from '@/hooks';
 import {
   hasRemovedMetrics,
   hasUnmappedMetrics,
@@ -73,7 +73,6 @@ export const DashboardContentController: React.FC<{
     }, [draggingId, dashboard?.id, numberOfMetrics, metrics]);
 
     const dashboardRows = useMemo(() => {
-      console.log('dashboardRows! rerender', rows);
       return rows
         .filter((row) => row.items.length > 0)
         .map((row) => {
@@ -130,18 +129,6 @@ export const DashboardContentController: React.FC<{
       }
     }, [dashboard?.id, remapMetrics]);
 
-    useWhyDidYouUpdate('DashboardContentController', {
-      remapMetrics,
-      dashboard,
-      metrics,
-      readOnly,
-      numberOfMetrics,
-      rows,
-      chatId,
-      dashboardConfig,
-      configRows
-    });
-
     return (
       <div className="dashboard-content-controller">
         {hasMetrics && !!dashboardRows.length && !!dashboard ? (