save slider tests

web/playwright-tests/invite-user.test.ts

@@ -0,0 +1,54 @@
+import { test, expect } from '@playwright/test';
+
+test('Invite User', async ({ page }) => {
+  await page.goto('http://localhost:3000/app/home');
+  await page
+    .locator('div')
+    .filter({ hasText: /^Invite people$/ })
+    .first()
+    .click();
+  await page.getByRole('textbox', { name: 'buster@bluthbananas.com,' }).click();
+  await page
+    .getByRole('textbox', { name: 'buster@bluthbananas.com,' })
+    .fill('nate+integration-test@buser.so');
+  await page.getByRole('button', { name: 'Send invites' }).click();
+  await page.waitForLoadState('networkidle');
+  await expect(page.getByText('Invites sent').first()).toBeVisible({ timeout: 3000 });
+
+  await page.getByRole('button').filter({ hasText: /^$/ }).first().click();
+  await page.getByRole('link', { name: 'Users' }).click();
+  await expect(page.getByRole('link', { name: 'nate+integration-test@buser.' })).toBeVisible();
+  await expect(page.getByRole('main')).toMatchAriaSnapshot(`
+    - img
+    - text: nate+integration-test@buser.so Restricted Querier
+    `);
+
+  await page.getByRole('link', { name: 'nate+integration-test@buser.' }).click();
+
+  await expect(page.getByText('nate+integration-test@buser.so')).toBeVisible();
+});
+
+test('Can change user role', async ({ page }) => {
+  await page.goto('http://localhost:3000/app/settings/users');
+  await page.getByRole('link', { name: 'B blake blake@buster.so' }).click();
+  await expect(page.getByText('blake@buster.so')).toBeVisible();
+  await expect(page.getByRole('combobox')).toHaveText(/Querier/);
+  await page.getByRole('combobox').click();
+  await page.getByRole('option', { name: 'Workspace Admin' }).click();
+  await expect(
+    page.locator('.text-text-secondary > div:nth-child(2) > .text-text-secondary').first()
+  ).toBeVisible();
+  await page.waitForTimeout(25);
+  await page.waitForLoadState('networkidle');
+  await page.reload();
+  await expect(
+    page.locator('.text-text-secondary > div:nth-child(2) > .text-text-secondary').first()
+  ).toBeVisible();
+  await page.getByRole('combobox').click();
+  await page.getByRole('option', { name: 'Querier', exact: true }).click();
+  await expect(
+    page.locator('.text-text-secondary > div:nth-child(2) > .text-text-secondary').first()
+  ).toBeVisible();
+  await page.waitForTimeout(15);
+  await page.waitForLoadState('networkidle');
+});

web/playwright-tests/scatter-chart-updates.test.ts

@@ -0,0 +1,49 @@
+import { test, expect } from '@playwright/test';
+
+test.describe.serial('Create a scatter plot with a question', () => {
+  const question = `I want to understand if there's a relationship between how much an employee sells and the number of orders they process. Can you generate a scatter plot showing each employee's total sales amount on one axis and their total number of orders on the other axis for the last 12 months?`;
+  let scatterURL = '';
+  test(`I can create a scatter plot with a question: ${question}`, async ({ page }) => {
+    await page.goto('http://localhost:3000/app/home');
+    await page.getByRole('textbox', { name: 'Ask Buster a question...' }).click();
+    await page.getByRole('textbox', { name: 'Ask Buster a question...' }).fill(question);
+    await page.getByRole('main').getByRole('button').click();
+    await page.waitForTimeout(5000);
+    await expect(page.getByRole('link', { name: 'Reasoning link' })).toBeVisible();
+    await expect(page.getByTestId('metric-view-chart-content').getByRole('img')).toBeVisible({
+      timeout: 240000
+    });
+    await expect(page.getByTestId('share-button')).toBeVisible();
+    await expect(page.getByTestId('save-to-dashboard-button')).toBeVisible();
+    await expect(page.getByTestId('edit-sql-button').getByRole('button')).toBeVisible();
+    await expect(page.getByTestId('edit-chart-button').getByRole('button')).toBeVisible();
+
+    await page.getByTestId('edit-chart-button').getByRole('button').click();
+    await expect(page.getByTestId('select-chart-type-scatter')).toBeVisible();
+    await expect(page.getByTestId('select-chart-type-scatter')).toHaveAttribute(
+      'data-state',
+      'selected'
+    );
+
+    const url = page.url();
+    await page.goto(
+      'http://localhost:3000/app/chats/21cd1170-7ecf-4796-9d5e-9828285c62ec/metrics/0023f1a3-58fe-53f7-9f23-07f20868e1b4/chart?secondary_view=chart-edit'
+    );
+    scatterURL = url;
+  });
+
+  scatterURL =
+    'http://localhost:3000/app/chats/21cd1170-7ecf-4796-9d5e-9828285c62ec/metrics/0023f1a3-58fe-53f7-9f23-07f20868e1b4/chart';
+  test(`I can update the scatter plot`, async ({ page }) => {
+    await page.goto(scatterURL);
+
+    await page.getByTestId('edit-chart-button').getByRole('button').click();
+    await expect(page.getByTestId('select-chart-type-scatter')).toBeVisible();
+    await expect(page.getByTestId('select-chart-type-scatter')).toHaveAttribute(
+      'data-state',
+      'selected'
+    );
+    await page.getByTestId('segmented-trigger-Styling').click();
+    //
+  });
+});

web/src/api/buster_rest/users/queryRequests.ts

@@ -166,13 +166,11 @@ export const prefetchGetUserList = async (
 };
 
 export const useInviteUser = () => {
-  const { openSuccessMessage } = useBusterNotifications();
   const queryClient = useQueryClient();
 
   return useMutation({
     mutationFn: inviteUser,
     onSuccess: () => {
-      openSuccessMessage('Invites sent');
       const user = queryClient.getQueryData(queryKeys.userGetUserMyself.queryKey);
       const teamId = user?.organizations?.[0]?.id;
       if (teamId) {

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

@@ -73,6 +73,7 @@ ChartJS.register(
 );
 
 ChartJS.defaults.responsive = true;
+ChartJS.defaults.clip = false;
 ChartJS.defaults.resizeDelay = 7;
 ChartJS.defaults.maintainAspectRatio = false;
 ChartJS.defaults.color = color;
@@ -85,11 +86,11 @@ ChartJS.defaults.font = {
 };
 
 [
-  ChartJS.defaults.scales.category,
+  (ChartJS.defaults.scales.category,
   ChartJS.defaults.scales.linear,
   ChartJS.defaults.scales.logarithmic,
   ChartJS.defaults.scales.time,
-  ChartJS.defaults.scales.timeseries
+  ChartJS.defaults.scales.timeseries)
 ].forEach((scale) => {
   scale.title = {
     ...scale.title,

web/src/components/ui/slider/Slider.tsx

@@ -10,6 +10,7 @@ import {
 } from '@/components/ui/tooltip/TooltipBase';
 
 import { cn } from '@/lib/utils';
+import { ErrorBoundary } from '../error';
 
 export interface SliderProps extends React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root> {
   min?: number;
@@ -34,8 +35,10 @@ const Slider = React.forwardRef<React.ElementRef<typeof SliderPrimitive.Root>, S
     ref
   ) => {
     const [useTooltip, setUseTooltip] = React.useState(false);
-    const [internalValues, setInternalValues] = React.useState(value || defaultValue || [min]);
+    const [internalValues, setInternalValues] = React.useState<number[]>(
-    const currentValue = value || defaultValue || [min];
+      value || defaultValue || [min]
+    );
+    const currentValue: number[] = value || defaultValue || [min];
 
     const handleValueChange = React.useCallback(
       (newValue: number[]) => {
@@ -51,7 +54,10 @@ const Slider = React.forwardRef<React.ElementRef<typeof SliderPrimitive.Root>, S
       setInternalValues(currentValue);
     }, []);
 
+    console.log(internalValues, value, defaultValue, min);
+
     return (
+      <ErrorBoundary errorComponent={<div>Error</div>}>
         <SliderPrimitive.Root
           ref={ref}
           className={cn('relative flex w-full touch-none items-center select-none', className)}
@@ -59,7 +65,7 @@ const Slider = React.forwardRef<React.ElementRef<typeof SliderPrimitive.Root>, S
           max={max}
           step={step}
           value={value}
-        defaultValue={defaultValue}
+          defaultValue={internalValues}
           onValueChange={handleValueChange}
           onValueCommit={handleValueCommit}
           {...props}>
@@ -82,6 +88,7 @@ const Slider = React.forwardRef<React.ElementRef<typeof SliderPrimitive.Root>, S
             </Tooltip>
           </TooltipProvider>
         </SliderPrimitive.Root>
+      </ErrorBoundary>
     );
   }
 );

web/src/controllers/MetricController/MetricViewChart/MetricEditController/MetricStylingApp/StylingAppStyling/EditScatterDotSize.tsx

@@ -18,14 +18,17 @@ export const EditScatterDotSize: React.FC<{
     const newLower = v[0];
     const newUpper = hasSize ? v[1] : newLower + 18;
     const arrayFormat: [number, number] = [newLower, newUpper];
+    console.log({ arrayFormat });
     onUpdateChartConfig({
       scatterDotSize: arrayFormat
     });
   });
 
+  const arrayValue = Array.isArray(defaultValue) ? defaultValue : [defaultValue];
+
   return (
     <LabelAndInput label="Dot size">
-      <Slider min={1} max={50} step={1} value={defaultValue as number[]} onValueChange={onChange} />
+      <Slider min={1} max={50} step={1} value={arrayValue} onValueChange={onChange} />
     </LabelAndInput>
   );
 });

web/src/controllers/MetricController/MetricViewChart/MetricEditController/MetricStylingApp/StylingAppVisualize/SelectChartType/SelectChartType.tsx

@@ -146,6 +146,7 @@ const ChartButton: React.FC<{
           disabled={disabled}
           data-testid={`select-chart-type-${id}`}
           onClick={() => !disabled && onSelectChartType(id)}
+          data-state={isSelected ? 'selected' : 'not-selected'}
           className={cn(
             'flex aspect-square h-[35px] w-full items-center justify-center hover:transition-none',
             'hover:bg-item-hover cursor-pointer rounded',