From 387508ee33e83d486dba85f87eb71c6227a48fdd Mon Sep 17 00:00:00 2001
From: Nate Kelley <nate@buster.so>
Date: Thu, 29 May 2025 16:10:19 -0600
Subject: [PATCH] update chart animation

---
 .../ui/charts/BusterChartJS/BusterChartJSComponent.tsx        | 2 +-
 .../BusterChartJS/core/plugins/chartjs-plugin-mounted.tsx     | 1 -
 .../StylingAppColors/Common/ThemeColorDots.tsx                | 3 ++-
 .../DashboardContainerHeaderButtons/DashboardThreeDotMenu.tsx | 4 ++--
 4 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/web/src/components/ui/charts/BusterChartJS/BusterChartJSComponent.tsx b/web/src/components/ui/charts/BusterChartJS/BusterChartJSComponent.tsx
index 9e006f8ca..e84e7c536 100644
--- a/web/src/components/ui/charts/BusterChartJS/BusterChartJSComponent.tsx
+++ b/web/src/components/ui/charts/BusterChartJS/BusterChartJSComponent.tsx
@@ -190,7 +190,7 @@ export const BusterChartJSComponent = React.memo(
       const updateMode = useMemoizedFn((params: { datasetIndex: number }): UpdateMode => {
         if (!ref) return 'default';
         const areLabelsChanged = previousData?.labels !== data.labels;
-        if (areLabelsChanged) return 'none'; //this will disable animation
+        if (areLabelsChanged) return 'default'; //this will disable animation - this was 'none', I am not sure why...
         return 'default';
       });
 
diff --git a/web/src/components/ui/charts/BusterChartJS/core/plugins/chartjs-plugin-mounted.tsx b/web/src/components/ui/charts/BusterChartJS/core/plugins/chartjs-plugin-mounted.tsx
index 49ca13b4d..50007dafd 100644
--- a/web/src/components/ui/charts/BusterChartJS/core/plugins/chartjs-plugin-mounted.tsx
+++ b/web/src/components/ui/charts/BusterChartJS/core/plugins/chartjs-plugin-mounted.tsx
@@ -26,7 +26,6 @@ export const ChartMountedPlugin: Plugin<ChartType, ChartMountedPluginOptions> =
   afterRender: (chart, args, options) => {
     if (chart.$initialAnimationCompleted === undefined) {
       chart.$initialAnimationCompleted = true;
-      // chart.update();
     }
 
     if (chart.$mountedPlugin || !chart || !options) return;
diff --git a/web/src/controllers/MetricController/MetricViewChart/MetricEditController/MetricStylingApp/StylingAppColors/Common/ThemeColorDots.tsx b/web/src/controllers/MetricController/MetricViewChart/MetricEditController/MetricStylingApp/StylingAppColors/Common/ThemeColorDots.tsx
index dfb07d767..8789e14b8 100644
--- a/web/src/controllers/MetricController/MetricViewChart/MetricEditController/MetricStylingApp/StylingAppColors/Common/ThemeColorDots.tsx
+++ b/web/src/controllers/MetricController/MetricViewChart/MetricEditController/MetricStylingApp/StylingAppColors/Common/ThemeColorDots.tsx
@@ -12,7 +12,8 @@ export const ThemeColorDots: React.FC<{
     <div className="flex shrink-0 items-center gap-0">
       {colors.slice(0, numberOfColorsToShow).map((color, colorIdx) => (
         <div
-          key={color}
+          // biome-ignore lint/suspicious/noArrayIndexKey: we need to use the index to force a re-render
+          key={color + colorIdx}
           className={cn(
             'ball rounded-full',
             colorIdx > 0 && '-ml-0.5 h-2 w-2 shadow-[0_0_0_0.75px]',
diff --git a/web/src/layouts/ChatLayout/FileContainer/FileContainerHeader/DashboardContainerHeaderButtons/DashboardThreeDotMenu.tsx b/web/src/layouts/ChatLayout/FileContainer/FileContainerHeader/DashboardContainerHeaderButtons/DashboardThreeDotMenu.tsx
index f3e6ddba5..6fba56cb9 100644
--- a/web/src/layouts/ChatLayout/FileContainer/FileContainerHeader/DashboardContainerHeaderButtons/DashboardThreeDotMenu.tsx
+++ b/web/src/layouts/ChatLayout/FileContainer/FileContainerHeader/DashboardContainerHeaderButtons/DashboardThreeDotMenu.tsx
@@ -165,7 +165,7 @@ const useCollectionSelectMenu = ({ dashboardId }: { dashboardId: string }) => {
     openInfoMessage('Dashboard removed from collections');
   });
 
-  const { modal, ...dropdownProps } = useSaveToCollectionsDropdownContent({
+  const { ModalComponent, ...dropdownProps } = useSaveToCollectionsDropdownContent({
     onSaveToCollection,
     onRemoveFromCollection,
     selectedCollections
@@ -182,7 +182,7 @@ const useCollectionSelectMenu = ({ dashboardId }: { dashboardId: string }) => {
       icon: <ASSET_ICONS.collectionAdd />,
       items: [
         <React.Fragment key="collection-sub-menu">
-          {collectionSubMenu} {modal}
+          {collectionSubMenu} {ModalComponent}
         </React.Fragment>
       ]
     }),