Make the visualization stick while scrolling the chart options along with making every chart details query unique

Author: bhavabhuthi

app/[locale]/dashboard/[entityType]/[entitySlug]/charts/[chartID]/components/ChartGenVizPreview.tsx

@@ -304,7 +304,7 @@ const ChartGenVizPreview = ({ params }: { params: any }) => {
     refetch: any;
     error: any;
     isError: boolean;
-  } = useQuery([`chartDetailsForViz`], () =>
+  } = useQuery([`chartDetailsForViz-${JSON.stringify(chartData)}`], () =>
     GraphQL(
       getResourceChartForViz,
       {
@@ -320,8 +320,6 @@ const ChartGenVizPreview = ({ params }: { params: any }) => {
     if (chartDetailsRes?.data?.resourceChart) {
       const chartRes = chartDetailsRes?.data?.resourceChart;
 
-      console.log('chartData updated :::::::::', chartRes);
-
       setChartData({
         chartId: params.chartID,
         name: chartRes?.name,
@@ -679,22 +677,25 @@ const ChartGenVizPreview = ({ params }: { params: any }) => {
 
           <div className="border-t-2 border-solid border-greyExtralight pt-8">
             <div className="flex flex-row justify-center gap-6">
-              <div className="flex flex-[7] justify-center">
-                <div className="w-full rounded-4 border-1 border-solid border-greyExtralight object-contain">
-                  {chartData.chart?.options &&
-                  Object.keys(chartData.chart?.options).length > 0 ? (
+              {/* Chart Preview */}
+              <div className="flex-[7]">
+                {chartData.chart?.options &&
+                Object.keys(chartData.chart?.options).length > 0 ? (
+                  <div className="sticky top-36 w-full items-center rounded-4 border-1 border-solid border-greyExtralight">
                     <ReactECharts
                       option={chartData.chart?.options}
                       ref={chartRef}
                     />
-                  ) : (
-                    <div className="h-full w-full">
-                      <Text variant="bodyLg">No Chart Data</Text>
-                    </div>
-                  )}
-                </div>
+                  </div>
+                ) : (
+                  <div className="sticky top-36 flex w-full items-center justify-center">
+                    <Text variant="bodyLg">No Chart Data</Text>
+                  </div>
+                )}
               </div>
-              <div className="flex flex-[3] flex-col rounded-4 border-2 border-solid border-greyExtralight p-3">
+
+              {/* Chart Customization */}
+              <div className="flex h-full flex-[3] flex-col rounded-4 border-2 border-solid border-greyExtralight p-3">
                 <Tabs value={selectedTab}>
                   <TabList fitted border>
                     <Tab