update popover

web/src/controllers/MetricController/MetricViewChart/MetricEditController/MetricStylingApp/StylingAppVisualize/SelectAxis/SelectAxisColumnContent/SelectAxisDropdownContent.tsx

@@ -1,4 +1,4 @@
-import { IBusterMetricChartConfig } from '@/api/asset_interfaces';
+import type { IBusterMetricChartConfig } from '@/api/asset_interfaces';
 import type { IColumnLabelFormat } from '@/components/ui/charts/interfaces/columnLabelInterfaces';
 import { useMemoizedFn } from 'ahooks';
 import React, { useMemo } from 'react';
@@ -10,7 +10,6 @@ import { BarAndLineAxis, ChartEncodes, ChartType, ColumnSettings } from '@/compo
 import { EditBarRoundness } from './EditBarRoundness';
 import { EditShowDataLabel } from './EditShowDataLabel';
 import { EditShowBarLabelAsPercentage } from './EditShowLabelAsPercentage';
-import { Divider } from 'antd';
 import { EditLabelStyle } from './EditLabelStyle';
 import { EditSeparator } from './EditSeparator';
 import { EditDecimals } from './EditDecimals';
@@ -26,6 +25,7 @@ import { EditReplaceMissingData } from './EditReplaceMissingData';
 import { EditLineStyle } from './EditLineStyle';
 import isEmpty from 'lodash/isEmpty';
 import { useGetCurrencies } from '@/api/buster_rest/nextjs/currency';
+import { cn } from '@/lib/classMerge';
 
 export const SelectAxisDropdownContent: React.FC<{
   columnSetting: IBusterMetricChartConfig['columnSettings'][string];
@@ -85,7 +85,7 @@ export const SelectAxisDropdownContent: React.FC<{
   });
 
   return (
-    <div className={`${className}`}>
+    <div className={cn(className)}>
       {!hideTitle && <TitleComponent formattedTitle={formattedTitle} />}
 
       <ColumnSettingComponent
@@ -268,7 +268,7 @@ const ColumnSettingComponent: React.FC<{
         })}
       </div>
 
-      {<Divider />}
+      {<div className="bg-border h-[0.5px] w-full" />}
     </>
   );
 };
@@ -450,7 +450,7 @@ const TitleComponent: React.FC<{
       <div className="px-3 py-2.5">
         <Text className="break-words">{formattedTitle}</Text>
       </div>
-      <Divider />
+      <div className="bg-border h-[0.5px] w-full" />
     </div>
   );
 });

web/src/controllers/MetricController/MetricViewChart/MetricEditController/MetricStylingApp/StylingAppVisualize/SelectAxis/SelectAxisColumnPopover.stories.tsx

@@ -0,0 +1,120 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import {
+  SelectAxisColumnPopover,
+  type SelectAxisColumnPopoverProps
+} from './SelectAxisColumnPopover';
+import { Button } from '@/components/ui/buttons/Button';
+import { ChartType, IColumnLabelFormat } from '@/components/ui/charts';
+import { SelectAxisContainerId } from './config';
+import type { IBusterMetricChartConfig, SimplifiedColumnType } from '@/api/asset_interfaces';
+import { http, HttpResponse } from 'msw';
+
+const meta: Meta<typeof SelectAxisColumnPopover> = {
+  title: 'Controllers/EditMetricController/SelectAxisColumnPopover',
+  component: SelectAxisColumnPopover,
+  parameters: {
+    layout: 'centered',
+    msw: {
+      handlers: [
+        http.get(`api/currency`, () => {
+          return HttpResponse.json([
+            { code: 'USD', description: 'United States Dollar', flag: '🇺🇸' },
+            { code: 'EUR', description: 'Euro', flag: '🇪🇺' },
+            { code: 'GBP', description: 'British Pound', flag: '🇬🇧' },
+            { code: 'CNY', description: 'Chinese Yuan', flag: '🇨🇳' },
+            { code: 'JPY', description: 'Japanese Yen', flag: '🇯🇵' }
+          ]);
+        })
+      ]
+    }
+  },
+  decorators: [
+    (Story) => (
+      <div style={{ padding: '2rem' }}>
+        <Story />
+      </div>
+    )
+  ]
+};
+
+export default meta;
+
+type Story = StoryObj<typeof SelectAxisColumnPopover>;
+
+const mockProps: SelectAxisColumnPopoverProps = {
+  columnLabelFormat: {
+    columnType: 'string' as SimplifiedColumnType,
+    style: 'currency' as const,
+    displayName: 'Test Column',
+    numberSeparatorStyle: ',' as const,
+    minimumFractionDigits: 0,
+    maximumFractionDigits: 2,
+    currency: 'USD',
+    convertNumberTo: null,
+    dateFormat: 'auto',
+    useRelativeTime: false,
+    isUTC: false,
+    multiplier: 1,
+    prefix: '',
+    suffix: '',
+    replaceMissingDataWith: null,
+    makeLabelHumanReadable: true,
+    compactNumbers: false
+  } as IColumnLabelFormat,
+  columnSetting: {
+    showDataLabels: false,
+    showDataLabelsAsPercentage: false,
+    columnVisualization: 'bar' as const,
+    lineWidth: 2,
+    lineStyle: 'line' as const,
+    lineType: 'normal' as const,
+    lineSymbolSize: 0,
+    barRoundness: 8
+  } as IBusterMetricChartConfig['columnSettings'][string],
+  id: 'test-id',
+  selectedChartType: ChartType.Bar,
+  barGroupType: 'group',
+  lineGroupType: 'stack',
+  zoneId: SelectAxisContainerId.XAxis,
+  selectedAxis: {
+    x: ['test-id'],
+    y: [],
+    category: [],
+    size: [],
+    tooltip: [],
+    y2: []
+  },
+  rowCount: 10,
+  children: <Button>Open Axis Selector</Button>
+};
+
+export const Default: Story = {
+  args: {
+    ...mockProps,
+    children: <Button>Open Axis Selector</Button>
+  }
+};
+
+export const WithDifferentAxis: Story = {
+  args: {
+    ...mockProps,
+    zoneId: SelectAxisContainerId.YAxis,
+    selectedAxis: {
+      x: [],
+      y: ['test-id'],
+      category: [],
+      size: [],
+      tooltip: [],
+      y2: []
+    },
+    children: <Button>Select Y Axis</Button>
+  }
+};
+
+export const WithLargeDataset: Story = {
+  args: {
+    ...mockProps,
+    rowCount: 1000,
+    children: <Button>Large Dataset Selector</Button>
+  }
+};

web/src/controllers/MetricController/MetricViewChart/MetricEditController/MetricStylingApp/StylingAppVisualize/SelectAxis/SelectAxisColumnPopover.tsx

@@ -5,7 +5,7 @@ import { SelectAxisDropdownContent } from './SelectAxisColumnContent';
 import { type IBusterMetricChartConfig } from '@/api/asset_interfaces';
 import type { SelectAxisContainerId } from './config';
 
-interface SelectAxisColumnPopoverProps {
+export interface SelectAxisColumnPopoverProps {
   columnLabelFormat: IColumnLabelFormat;
   columnSetting: IBusterMetricChartConfig['columnSettings'][string];
   children: React.ReactNode;
@@ -24,6 +24,7 @@ export const SelectAxisColumnPopover = React.memo(
       <Popover
         side="left"
         align="end"
+        size={'none'}
         content={
           <SelectAxisDropdownContent {...props} className="w-full max-w-[315px] min-w-[315px]" />
         }>