From 7909095ff3463653fdd4801a1492b00573d55d16 Mon Sep 17 00:00:00 2001
From: endimonan <65144790+endimonan@users.noreply.github.com>
Date: Tue, 17 Mar 2026 01:11:53 +0100
Subject: [PATCH 1/3] feat(native-filters): add configurable LIKE/ILIKE
 operators to Select filter (#38470)

Co-authored-by: Evan Rusackas <evan@preset.io>
Co-authored-by: Richard Fogaca Nienkotter <63572350+richardfogaca@users.noreply.github.com>
---
 .../src/query/types/Operator.ts               |   1 +
 .../FiltersConfigForm/FiltersConfigForm.tsx   | 111 ++++-
 .../FiltersConfigForm/getControlItemsMap.tsx  |   3 +-
 .../Select/SelectFilterPlugin.test.tsx        | 413 +++++++++++++++++-
 .../components/Select/SelectFilterPlugin.tsx  | 152 +++++--
 .../components/Select/buildQuery.test.ts      |  94 +++-
 .../components/Select/controlPanel.test.ts    |  43 ++
 .../filters/components/Select/controlPanel.ts |  75 +++-
 .../components/Select/transformProps.ts       |  11 +-
 .../src/filters/components/Select/types.ts    |   9 +
 superset-frontend/src/filters/utils.ts        |  45 +-
 11 files changed, 907 insertions(+), 50 deletions(-)
 create mode 100644 superset-frontend/src/filters/components/Select/controlPanel.test.ts

diff --git a/superset-frontend/packages/superset-ui-core/src/query/types/Operator.ts b/superset-frontend/packages/superset-ui-core/src/query/types/Operator.ts
index 0d2cb5b59ba7..98695555068e 100644
--- a/superset-frontend/packages/superset-ui-core/src/query/types/Operator.ts
+++ b/superset-frontend/packages/superset-ui-core/src/query/types/Operator.ts
@@ -30,6 +30,7 @@ const BINARY_OPERATORS = [
   '<=',
   'ILIKE',
   'LIKE',
+  'NOT ILIKE',
   'NOT LIKE',
   'REGEX',
   'TEMPORAL_RANGE',
diff --git a/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigForm/FiltersConfigForm.tsx b/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigForm/FiltersConfigForm.tsx
index ab6a9f22e695..cc53dcbcb616 100644
--- a/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigForm/FiltersConfigForm.tsx
+++ b/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigForm/FiltersConfigForm.tsx
@@ -45,12 +45,16 @@ import {
   useEffect,
   useImperativeHandle,
   useMemo,
+  useRef,
   useState,
   RefObject,
   memo,
 } from 'react';
 import rison from 'rison';
-import { PluginFilterSelectCustomizeProps } from 'src/filters/components/Select/types';
+import {
+  PluginFilterSelectCustomizeProps,
+  SelectFilterOperatorType,
+} from 'src/filters/components/Select/types';
 import { useSelector } from 'react-redux';
 import { getChartDataRequest } from 'src/components/Chart/chartAction';
 import {
@@ -624,6 +628,49 @@ const FiltersConfigForm = (
     forceUpdate();
   };
 
+  const currentOperatorType: SelectFilterOperatorType =
+    formFilter?.controlValues?.operatorType ??
+    filterToEdit?.controlValues?.operatorType ??
+    SelectFilterOperatorType.Exact;
+
+  const selectedColumnIsString = useMemo(() => {
+    const columnName = formFilter?.column;
+    if (!columnName || !datasetDetails?.columns) return true;
+    const colMeta = datasetDetails.columns.find(
+      (c: { column_name: string }) => c.column_name === columnName,
+    );
+    if (!colMeta) return true;
+    return colMeta.type_generic === GenericDataType.String;
+  }, [formFilter?.column, datasetDetails?.columns]);
+
+  const onOperatorTypeChanged = (value: SelectFilterOperatorType) => {
+    const previous = form.getFieldValue('filters')?.[filterId].controlValues;
+    setNativeFilterFieldValues(form, filterId, {
+      controlValues: {
+        ...previous,
+        operatorType: value,
+      },
+      defaultDataMask: null,
+    });
+    formChanged();
+    forceUpdate();
+  };
+
+  const prevColumnRef = useRef(formFilter?.column);
+  const datasetLoaded = !!datasetDetails?.columns;
+  useEffect(() => {
+    const columnChanged = prevColumnRef.current !== formFilter?.column;
+    if (
+      (columnChanged || datasetLoaded) &&
+      !selectedColumnIsString &&
+      currentOperatorType !== SelectFilterOperatorType.Exact
+    ) {
+      onOperatorTypeChanged(SelectFilterOperatorType.Exact);
+    }
+    prevColumnRef.current = formFilter?.column;
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [formFilter?.column, selectedColumnIsString, datasetLoaded]);
+
   const validatePreFilter = () =>
     setTimeout(
       () =>
@@ -685,6 +732,7 @@ const FiltersConfigForm = (
             'columns.filterable',
             'columns.is_dttm',
             'columns.type',
+            'columns.type_generic',
             'columns.verbose_name',
             'database.id',
             'database.database_name',
@@ -1501,6 +1549,67 @@ const FiltersConfigForm = (
                             hidden
                             initialValue={null}
                           />
+                          {!isChartCustomization &&
+                            itemTypeField === 'filter_select' && (
+                              <StyledRowFormItem
+                                expanded={expanded}
+                                name={[
+                                  'filters',
+                                  filterId,
+                                  'controlValues',
+                                  'operatorType',
+                                ]}
+                                initialValue={currentOperatorType}
+                                label={
+                                  <>
+                                    <StyledLabel>{t('Match type')}</StyledLabel>
+                                    &nbsp;
+                                    <InfoTooltip
+                                      placement="top"
+                                      tooltip={t(
+                                        'Warning: ILIKE queries may be slow on large datasets as they cannot use indexes effectively.',
+                                      )}
+                                    />
+                                  </>
+                                }
+                              >
+                                <Select
+                                  ariaLabel={t('Match type')}
+                                  options={[
+                                    {
+                                      value: SelectFilterOperatorType.Exact,
+                                      label: t('Exact match (IN)'),
+                                    },
+                                    ...(selectedColumnIsString
+                                      ? [
+                                          {
+                                            value:
+                                              SelectFilterOperatorType.Contains,
+                                            label: t(
+                                              'Contains text (ILIKE %x%)',
+                                            ),
+                                          },
+                                          {
+                                            value:
+                                              SelectFilterOperatorType.StartsWith,
+                                            label: t('Starts with (ILIKE x%)'),
+                                          },
+                                          {
+                                            value:
+                                              SelectFilterOperatorType.EndsWith,
+                                            label: t('Ends with (ILIKE %x)'),
+                                          },
+                                        ]
+                                      : []),
+                                  ]}
+                                  onChange={value => {
+                                    onOperatorTypeChanged(
+                                      value as SelectFilterOperatorType,
+                                    );
+                                  }}
+                                />
+                              </StyledRowFormItem>
+                            )}
                           <FormItem
                             name={['filters', filterId, 'defaultValue']}
                           >
diff --git a/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigForm/getControlItemsMap.tsx b/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigForm/getControlItemsMap.tsx
index 23348694fdf0..75882ed03801 100644
--- a/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigForm/getControlItemsMap.tsx
+++ b/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigForm/getControlItemsMap.tsx
@@ -165,7 +165,8 @@ export default function getControlItemsMap({
       (controlItem: CustomControlItem) =>
         controlItem?.config?.renderTrigger &&
         controlItem.name !== 'sortAscending' &&
-        controlItem.name !== 'enableSingleValue',
+        controlItem.name !== 'enableSingleValue' &&
+        controlItem.name !== 'operatorType',
     )
     .forEach(controlItem => {
       const initialValue =
diff --git a/superset-frontend/src/filters/components/Select/SelectFilterPlugin.test.tsx b/superset-frontend/src/filters/components/Select/SelectFilterPlugin.test.tsx
index 310d6fa5b9f4..e0f7824b2be9 100644
--- a/superset-frontend/src/filters/components/Select/SelectFilterPlugin.test.tsx
+++ b/superset-frontend/src/filters/components/Select/SelectFilterPlugin.test.tsx
@@ -16,8 +16,11 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { AppSection } from '@superset-ui/core';
+import { AppSection, Behavior, ChartProps } from '@superset-ui/core';
+import { supersetTheme } from '@apache-superset/core/theme';
 import {
+  act,
+  fireEvent,
   render,
   screen,
   userEvent,
@@ -26,6 +29,13 @@ import {
 import { NULL_STRING } from 'src/utils/common';
 import SelectFilterPlugin from './SelectFilterPlugin';
 import transformProps from './transformProps';
+import { FilterState } from '@superset-ui/core';
+import {
+  SelectFilterOperatorType,
+  PluginFilterSelectChartProps,
+  PluginFilterSelectProps,
+  PluginFilterSelectQueryFormData,
+} from './types';
 
 jest.useFakeTimers();
 
@@ -69,11 +79,36 @@ const selectMultipleProps = {
       rejected_filters: [],
     },
   ],
-  behaviors: ['NATIVE_FILTER'],
+  behaviors: [Behavior.NativeFilter],
   isRefreshing: false,
   appSection: AppSection.Dashboard,
 };
 
+type SelectTestOverrides = {
+  formData?: Partial<PluginFilterSelectQueryFormData>;
+  filterState?: Partial<FilterState>;
+  setDataMask?: jest.Mock;
+};
+
+const buildSelectFilterProps = (overrides: SelectTestOverrides = {}) => {
+  const chartProps = new ChartProps({
+    ...selectMultipleProps,
+    formData: { ...selectMultipleProps.formData, ...overrides.formData },
+    ...(overrides.filterState !== undefined && {
+      filterState: overrides.filterState,
+    }),
+    theme: supersetTheme,
+  }) as PluginFilterSelectChartProps;
+
+  return {
+    ...transformProps(chartProps),
+    appSection: AppSection.Dashboard,
+    isRefreshing: false,
+    setDataMask: overrides.setDataMask ?? jest.fn(),
+    showOverflow: false,
+  } as PluginFilterSelectProps;
+};
+
 // eslint-disable-next-line no-restricted-globals -- TODO: Migrate from describe blocks
 describe('SelectFilterPlugin', () => {
   const setDataMask = jest.fn();
@@ -1249,3 +1284,377 @@ test('resets dependent filter to first item when value does not exist in data',
     );
   });
 });
+
+test('renders text input instead of dropdown when operatorType is ILIKE contains', () => {
+  jest.useFakeTimers();
+  const setDataMaskMock = jest.fn();
+  const props = buildSelectFilterProps({
+    formData: { operatorType: SelectFilterOperatorType.Contains },
+    filterState: { value: undefined },
+    setDataMask: setDataMaskMock,
+  });
+
+  render(<SelectFilterPlugin {...props} />, {
+    useRedux: true,
+    initialState: {
+      nativeFilters: {
+        filters: { 'test-filter': { name: 'Test Filter' } },
+      },
+      dataMask: {
+        'test-filter': {
+          extraFormData: {},
+          filterState: { value: undefined },
+        },
+      },
+    },
+  });
+
+  expect(screen.queryByRole('combobox')).not.toBeInTheDocument();
+  expect(
+    screen.getByPlaceholderText('Type to search (contains)...'),
+  ).toBeInTheDocument();
+});
+
+test('renders text input with starts-with placeholder', () => {
+  jest.useFakeTimers();
+  const setDataMaskMock = jest.fn();
+  const props = buildSelectFilterProps({
+    formData: { operatorType: SelectFilterOperatorType.StartsWith },
+    filterState: { value: undefined },
+    setDataMask: setDataMaskMock,
+  });
+
+  render(<SelectFilterPlugin {...props} />, {
+    useRedux: true,
+    initialState: {
+      nativeFilters: {
+        filters: { 'test-filter': { name: 'Test Filter' } },
+      },
+      dataMask: {
+        'test-filter': {
+          extraFormData: {},
+          filterState: { value: undefined },
+        },
+      },
+    },
+  });
+
+  expect(
+    screen.getByPlaceholderText('Type to search (starts with)...'),
+  ).toBeInTheDocument();
+});
+
+test('typing in LIKE input calls setDataMask with ILIKE Contains payload', async () => {
+  jest.useFakeTimers();
+  const setDataMaskMock = jest.fn();
+  const props = buildSelectFilterProps({
+    formData: { operatorType: SelectFilterOperatorType.Contains },
+    filterState: { value: undefined },
+    setDataMask: setDataMaskMock,
+  });
+
+  render(<SelectFilterPlugin {...props} />, {
+    useRedux: true,
+    initialState: {
+      nativeFilters: {
+        filters: { 'test-filter': { name: 'Test Filter' } },
+      },
+      dataMask: {
+        'test-filter': {
+          extraFormData: {},
+          filterState: { value: undefined },
+        },
+      },
+    },
+  });
+
+  setDataMaskMock.mockClear();
+  const input = screen.getByPlaceholderText('Type to search (contains)...');
+  fireEvent.change(input, { target: { value: 'Jen' } });
+  act(() => {
+    jest.advanceTimersByTime(500);
+  });
+
+  expect(setDataMaskMock).toHaveBeenCalledWith(
+    expect.objectContaining({
+      extraFormData: {
+        filters: [
+          {
+            col: 'gender',
+            op: 'ILIKE',
+            val: '%Jen%',
+          },
+        ],
+      },
+    }),
+  );
+});
+
+test('typing in LIKE input with inverse selection calls setDataMask with NOT ILIKE payload', async () => {
+  jest.useFakeTimers();
+  const setDataMaskMock = jest.fn();
+  const props = buildSelectFilterProps({
+    formData: {
+      operatorType: SelectFilterOperatorType.Contains,
+      inverseSelection: true,
+    },
+    filterState: { value: undefined },
+    setDataMask: setDataMaskMock,
+  });
+
+  render(<SelectFilterPlugin {...props} />, {
+    useRedux: true,
+    initialState: {
+      nativeFilters: {
+        filters: { 'test-filter': { name: 'Test Filter' } },
+      },
+      dataMask: {
+        'test-filter': {
+          extraFormData: {},
+          filterState: { value: undefined },
+        },
+      },
+    },
+  });
+
+  setDataMaskMock.mockClear();
+  const input = screen.getByPlaceholderText('Type to search (contains)...');
+  fireEvent.change(input, { target: { value: 'Jen' } });
+  act(() => {
+    jest.advanceTimersByTime(500);
+  });
+
+  expect(setDataMaskMock).toHaveBeenCalledWith(
+    expect.objectContaining({
+      extraFormData: {
+        filters: [
+          {
+            col: 'gender',
+            op: 'NOT ILIKE',
+            val: '%Jen%',
+          },
+        ],
+      },
+    }),
+  );
+});
+
+test('clear-all resets LIKE input value and calls setDataMask with empty state', async () => {
+  jest.useFakeTimers();
+  const setDataMaskMock = jest.fn();
+  const likeProps = buildSelectFilterProps({
+    formData: { operatorType: SelectFilterOperatorType.Contains },
+    filterState: { value: ['Jen'] },
+    setDataMask: setDataMaskMock,
+  });
+
+  const reduxState = {
+    useRedux: true,
+    initialState: {
+      nativeFilters: {
+        filters: { 'test-filter': { name: 'Test Filter' } },
+      },
+      dataMask: {
+        'test-filter': {
+          extraFormData: {
+            filters: [{ col: 'gender', op: 'ILIKE', val: '%Jen%' }],
+          },
+          filterState: { value: ['Jen'] },
+        },
+      },
+    },
+  };
+
+  const { rerender } = render(
+    <SelectFilterPlugin {...likeProps} />,
+    reduxState,
+  );
+
+  const input = screen.getByPlaceholderText('Type to search (contains)...');
+  expect(input).toHaveValue('Jen');
+
+  setDataMaskMock.mockClear();
+
+  rerender(
+    <SelectFilterPlugin
+      {...likeProps}
+      clearAllTrigger={{ 'test-filter': true }}
+    />,
+  );
+
+  await waitFor(() => {
+    expect(input).toHaveValue('');
+  });
+
+  await waitFor(() => {
+    expect(setDataMaskMock).toHaveBeenCalledWith(
+      expect.objectContaining({
+        filterState: expect.objectContaining({
+          value: null,
+        }),
+      }),
+    );
+  });
+
+  const callsBeforeDebounceFlush = setDataMaskMock.mock.calls.length;
+
+  act(() => {
+    jest.advanceTimersByTime(500);
+  });
+
+  expect(setDataMaskMock).toHaveBeenCalledTimes(callsBeforeDebounceFlush);
+});
+
+test('pending LIKE debounce still applies after rerender recreates updateDataMask', async () => {
+  jest.useFakeTimers();
+  const setDataMaskMock = jest.fn();
+  const likeProps = buildSelectFilterProps({
+    formData: { operatorType: SelectFilterOperatorType.Contains },
+    filterState: { value: undefined },
+    setDataMask: setDataMaskMock,
+  });
+
+  const reduxState = {
+    useRedux: true,
+    initialState: {
+      nativeFilters: {
+        filters: { 'test-filter': { name: 'Test Filter' } },
+      },
+      dataMask: {
+        'test-filter': {
+          extraFormData: {},
+          filterState: { value: undefined },
+        },
+      },
+    },
+  };
+
+  const { rerender } = render(
+    <SelectFilterPlugin {...likeProps} />,
+    reduxState,
+  );
+
+  fireEvent.change(
+    screen.getByPlaceholderText('Type to search (contains)...'),
+    {
+      target: { value: 'Jen' },
+    },
+  );
+
+  setDataMaskMock.mockClear();
+
+  rerender(
+    <SelectFilterPlugin
+      {...buildSelectFilterProps({
+        formData: { operatorType: SelectFilterOperatorType.Contains },
+        filterState: { value: undefined, label: 'external change' },
+        setDataMask: setDataMaskMock,
+      })}
+    />,
+  );
+
+  act(() => {
+    jest.advanceTimersByTime(500);
+  });
+
+  expect(setDataMaskMock).toHaveBeenCalledWith(
+    expect.objectContaining({
+      extraFormData: {
+        filters: [
+          {
+            col: 'gender',
+            op: 'ILIKE',
+            val: '%Jen%',
+          },
+        ],
+      },
+    }),
+  );
+});
+
+test('pending LIKE debounce is canceled when operatorType switches back to Exact', async () => {
+  jest.useFakeTimers();
+  const setDataMaskMock = jest.fn();
+  const likeProps = buildSelectFilterProps({
+    formData: { operatorType: SelectFilterOperatorType.Contains },
+    filterState: { value: undefined },
+    setDataMask: setDataMaskMock,
+  });
+
+  const reduxState = {
+    useRedux: true,
+    initialState: {
+      nativeFilters: {
+        filters: { 'test-filter': { name: 'Test Filter' } },
+      },
+      dataMask: {
+        'test-filter': {
+          extraFormData: {},
+          filterState: { value: undefined },
+        },
+      },
+    },
+  };
+
+  const { rerender } = render(
+    <SelectFilterPlugin {...likeProps} />,
+    reduxState,
+  );
+
+  fireEvent.change(
+    screen.getByPlaceholderText('Type to search (contains)...'),
+    {
+      target: { value: 'Jen' },
+    },
+  );
+
+  setDataMaskMock.mockClear();
+
+  rerender(
+    <SelectFilterPlugin
+      {...buildSelectFilterProps({
+        formData: { operatorType: SelectFilterOperatorType.Exact },
+        filterState: { value: undefined },
+        setDataMask: setDataMaskMock,
+      })}
+    />,
+  );
+
+  act(() => {
+    jest.advanceTimersByTime(500);
+  });
+
+  expect(setDataMaskMock).not.toHaveBeenCalled();
+});
+
+test('renders standard Select dropdown when operatorType is Exact', () => {
+  jest.useFakeTimers();
+  const setDataMaskMock = jest.fn();
+  const props = buildSelectFilterProps({
+    formData: { operatorType: SelectFilterOperatorType.Exact },
+    setDataMask: setDataMaskMock,
+  });
+
+  render(<SelectFilterPlugin {...props} />, {
+    useRedux: true,
+    initialState: {
+      nativeFilters: {
+        filters: { 'test-filter': { name: 'Test Filter' } },
+      },
+      dataMask: {
+        'test-filter': {
+          extraFormData: {
+            filters: [{ col: 'gender', op: 'IN', val: ['boy'] }],
+          },
+          filterState: {
+            value: ['boy'],
+            label: 'boy',
+            excludeFilterValues: true,
+          },
+        },
+      },
+    },
+  });
+
+  expect(screen.getAllByRole('combobox').length).toBeGreaterThan(0);
+});
diff --git a/superset-frontend/src/filters/components/Select/SelectFilterPlugin.tsx b/superset-frontend/src/filters/components/Select/SelectFilterPlugin.tsx
index 3127b26bbc06..c282b893c35d 100644
--- a/superset-frontend/src/filters/components/Select/SelectFilterPlugin.tsx
+++ b/superset-frontend/src/filters/components/Select/SelectFilterPlugin.tsx
@@ -39,6 +39,7 @@ import {
   Select,
   Space,
   Constants,
+  Input,
 } from '@superset-ui/core/components';
 import {
   hasOption,
@@ -47,7 +48,11 @@ import {
 import { FilterBarOrientation } from 'src/dashboard/types';
 import { getDataRecordFormatter, getSelectExtraFormData } from '../../utils';
 import { FilterPluginStyle, StatusMessage } from '../common';
-import { PluginFilterSelectProps, SelectValue } from './types';
+import {
+  PluginFilterSelectProps,
+  SelectFilterOperatorType,
+  SelectValue,
+} from './types';
 
 type DataMaskAction =
   | { type: 'ownState'; ownState: JsonObject }
@@ -142,6 +147,7 @@ export default function PluginFilterSelect(props: PluginFilterSelectProps) {
     inverseSelection,
     defaultToFirstItem,
     searchAllOptions,
+    operatorType = SelectFilterOperatorType.Exact,
   } = formData;
 
   const groupby = useMemo(
@@ -157,6 +163,9 @@ export default function PluginFilterSelect(props: PluginFilterSelectProps) {
     filterState,
   });
   const datatype: GenericDataType = coltypeMap[col];
+  const isLikeOperator =
+    operatorType !== SelectFilterOperatorType.Exact &&
+    datatype === GenericDataType.String;
   const labelFormatter = useMemo(
     () =>
       getDataRecordFormatter({
@@ -170,6 +179,16 @@ export default function PluginFilterSelect(props: PluginFilterSelectProps) {
       : filterState?.excludeFilterValues,
   );
 
+  const [likeInputValue, setLikeInputValue] = useState<string>(
+    filterState.value?.[0] != null ? String(filterState.value[0]) : '',
+  );
+
+  useEffect(() => {
+    const externalValue =
+      filterState.value?.[0] != null ? String(filterState.value[0]) : '';
+    setLikeInputValue(externalValue);
+  }, [filterState.value]);
+
   const prevExcludeFilterValues = useRef(excludeFilterValues);
 
   const hasOnlyOrientationChanged = useRef(false);
@@ -207,6 +226,7 @@ export default function PluginFilterSelect(props: PluginFilterSelectProps) {
           values,
           emptyFilter,
           excludeFilterValues && inverseSelection,
+          operatorType,
         ),
         filterState: {
           ...filterState,
@@ -233,6 +253,7 @@ export default function PluginFilterSelect(props: PluginFilterSelectProps) {
       enableEmptyFilter,
       inverseSelection,
       excludeFilterValues,
+      operatorType,
       JSON.stringify(filterState),
       labelFormatter,
     ],
@@ -452,6 +473,7 @@ export default function PluginFilterSelect(props: PluginFilterSelectProps) {
 
       updateDataMask(null);
       setSearch('');
+      setLikeInputValue('');
       onClearAllComplete?.(formData.nativeFilterId);
     }
   }, [clearAllTrigger, onClearAllComplete, updateDataMask]);
@@ -465,6 +487,7 @@ export default function PluginFilterSelect(props: PluginFilterSelectProps) {
           filterState.value,
           !filterState.value?.length,
           excludeFilterValues && inverseSelection,
+          operatorType,
         ),
         filterState: {
           ...(filterState as {
@@ -483,6 +506,52 @@ export default function PluginFilterSelect(props: PluginFilterSelectProps) {
     setExcludeFilterValues(value === 'true');
   };
 
+  const updateDataMaskRef = useRef(updateDataMask);
+  useEffect(() => {
+    updateDataMaskRef.current = updateDataMask;
+  }, [updateDataMask]);
+
+  const debouncedLikeChange = useMemo(
+    () =>
+      debounce((text: string) => {
+        if (text) {
+          updateDataMaskRef.current([text]);
+        } else {
+          updateDataMaskRef.current(null);
+        }
+      }, Constants.SLOW_DEBOUNCE),
+    [],
+  );
+
+  useEffect(() => {
+    if (!isLikeOperator || clearAllTrigger) {
+      debouncedLikeChange.cancel();
+    }
+  }, [clearAllTrigger, debouncedLikeChange, isLikeOperator]);
+
+  useEffect(() => () => debouncedLikeChange.cancel(), [debouncedLikeChange]);
+
+  const handleLikeInputChange = useCallback(
+    (e: React.ChangeEvent<HTMLInputElement>) => {
+      setLikeInputValue(e.target.value);
+      debouncedLikeChange(e.target.value);
+    },
+    [debouncedLikeChange],
+  );
+
+  const likeInputPlaceholder = useMemo(() => {
+    switch (operatorType) {
+      case SelectFilterOperatorType.Contains:
+        return t('Type to search (contains)...');
+      case SelectFilterOperatorType.StartsWith:
+        return t('Type to search (starts with)...');
+      case SelectFilterOperatorType.EndsWith:
+        return t('Type to search (ends with)...');
+      default:
+        return t('Type a value...');
+    }
+  }, [operatorType]);
+
   return (
     <FilterPluginStyle height={height} width={width}>
       <FormItem
@@ -504,39 +573,54 @@ export default function PluginFilterSelect(props: PluginFilterSelectProps) {
               onChange={handleExclusionToggle}
             />
           )}
-          <Select
-            name={formData.nativeFilterId}
-            allowClear
-            allowNewOptions={!searchAllOptions && creatable !== false}
-            allowSelectAll={!searchAllOptions}
-            value={multiSelect ? filterState.value || [] : filterState.value}
-            disabled={isDisabled}
-            getPopupContainer={
-              showOverflow
-                ? () => (parentRef?.current as HTMLElement) || document.body
-                : (trigger: HTMLElement) =>
-                    (trigger?.parentNode as HTMLElement) || document.body
-            }
-            showSearch={showSearch}
-            mode={multiSelect ? 'multiple' : 'single'}
-            placeholder={placeholderText}
-            onClear={() => onSearch('')}
-            onSearch={onSearch}
-            onBlur={handleBlur}
-            onFocus={setFocusedFilter}
-            onMouseEnter={setHoveredFilter}
-            onMouseLeave={unsetHoveredFilter}
-            // @ts-expect-error
-            onChange={handleChange}
-            ref={inputRef}
-            loading={isRefreshing}
-            oneLine={filterBarOrientation === FilterBarOrientation.Horizontal}
-            invertSelection={inverseSelection && excludeFilterValues}
-            options={options}
-            sortComparator={sortComparator}
-            onOpenChange={setFilterActive}
-            className="select-container"
-          />
+          {isLikeOperator ? (
+            <Input
+              allowClear
+              placeholder={likeInputPlaceholder}
+              value={likeInputValue}
+              onChange={handleLikeInputChange}
+              onFocus={setFocusedFilter}
+              onBlur={unsetFocusedFilter}
+              onMouseEnter={setHoveredFilter}
+              onMouseLeave={unsetHoveredFilter}
+              disabled={isDisabled}
+              ref={inputRef}
+            />
+          ) : (
+            <Select
+              name={formData.nativeFilterId}
+              allowClear
+              allowNewOptions={!searchAllOptions && creatable !== false}
+              allowSelectAll={!searchAllOptions}
+              value={multiSelect ? filterState.value || [] : filterState.value}
+              disabled={isDisabled}
+              getPopupContainer={
+                showOverflow
+                  ? () => (parentRef?.current as HTMLElement) || document.body
+                  : (trigger: HTMLElement) =>
+                      (trigger?.parentNode as HTMLElement) || document.body
+              }
+              showSearch={showSearch}
+              mode={multiSelect ? 'multiple' : 'single'}
+              placeholder={placeholderText}
+              onClear={() => onSearch('')}
+              onSearch={onSearch}
+              onBlur={handleBlur}
+              onFocus={setFocusedFilter}
+              onMouseEnter={setHoveredFilter}
+              onMouseLeave={unsetHoveredFilter}
+              // @ts-expect-error
+              onChange={handleChange}
+              ref={inputRef}
+              loading={isRefreshing}
+              oneLine={filterBarOrientation === FilterBarOrientation.Horizontal}
+              invertSelection={inverseSelection && excludeFilterValues}
+              options={options}
+              sortComparator={sortComparator}
+              onOpenChange={setFilterActive}
+              className="select-container"
+            />
+          )}
         </StyledSpace>
       </FormItem>
     </FilterPluginStyle>
diff --git a/superset-frontend/src/filters/components/Select/buildQuery.test.ts b/superset-frontend/src/filters/components/Select/buildQuery.test.ts
index 5839b063fc55..2870543ee6ca 100644
--- a/superset-frontend/src/filters/components/Select/buildQuery.test.ts
+++ b/superset-frontend/src/filters/components/Select/buildQuery.test.ts
@@ -18,7 +18,11 @@
  */
 import { GenericDataType } from '@apache-superset/core/common';
 import buildQuery from './buildQuery';
-import { PluginFilterSelectQueryFormData } from './types';
+import {
+  PluginFilterSelectQueryFormData,
+  SelectFilterOperatorType,
+} from './types';
+import { getSelectExtraFormData } from '../../utils';
 
 // eslint-disable-next-line no-restricted-globals -- TODO: Migrate from describe blocks
 describe('Select buildQuery', () => {
@@ -127,3 +131,91 @@ describe('Select buildQuery', () => {
     ]);
   });
 });
+
+test('getSelectExtraFormData generates IN filter by default', () => {
+  const result = getSelectExtraFormData('name', ['Jennifer']);
+  expect(result.filters).toEqual([
+    { col: 'name', op: 'IN', val: ['Jennifer'] },
+  ]);
+});
+
+test('getSelectExtraFormData generates NOT IN filter with excludeFilter', () => {
+  const result = getSelectExtraFormData('name', ['Jennifer'], false, true);
+  expect(result.filters).toEqual([
+    { col: 'name', op: 'NOT IN', val: ['Jennifer'] },
+  ]);
+});
+
+test('getSelectExtraFormData generates ILIKE contains filter', () => {
+  const result = getSelectExtraFormData(
+    'name',
+    ['Jen'],
+    false,
+    false,
+    SelectFilterOperatorType.Contains,
+  );
+  expect(result.filters).toEqual([{ col: 'name', op: 'ILIKE', val: '%Jen%' }]);
+});
+
+test('getSelectExtraFormData generates ILIKE starts-with filter', () => {
+  const result = getSelectExtraFormData(
+    'name',
+    ['Jen'],
+    false,
+    false,
+    SelectFilterOperatorType.StartsWith,
+  );
+  expect(result.filters).toEqual([{ col: 'name', op: 'ILIKE', val: 'Jen%' }]);
+});
+
+test('getSelectExtraFormData generates ILIKE ends-with filter', () => {
+  const result = getSelectExtraFormData(
+    'name',
+    ['son'],
+    false,
+    false,
+    SelectFilterOperatorType.EndsWith,
+  );
+  expect(result.filters).toEqual([{ col: 'name', op: 'ILIKE', val: '%son' }]);
+});
+
+test('getSelectExtraFormData generates NOT ILIKE with excludeFilter and LIKE operator', () => {
+  const result = getSelectExtraFormData(
+    'name',
+    ['Jen'],
+    false,
+    true,
+    SelectFilterOperatorType.Contains,
+  );
+  expect(result.filters).toEqual([
+    { col: 'name', op: 'NOT ILIKE', val: '%Jen%' },
+  ]);
+});
+
+test('getSelectExtraFormData returns empty object for null value with LIKE operator', () => {
+  const result = getSelectExtraFormData(
+    'name',
+    null,
+    false,
+    false,
+    SelectFilterOperatorType.Contains,
+  );
+  expect(result).toEqual({});
+});
+
+test('getSelectExtraFormData returns adhoc_filters for emptyFilter with LIKE operator', () => {
+  const result = getSelectExtraFormData(
+    'name',
+    [],
+    true,
+    false,
+    SelectFilterOperatorType.Contains,
+  );
+  expect(result.adhoc_filters).toEqual([
+    {
+      expressionType: 'SQL',
+      clause: 'WHERE',
+      sqlExpression: '1 = 0',
+    },
+  ]);
+});
diff --git a/superset-frontend/src/filters/components/Select/controlPanel.test.ts b/superset-frontend/src/filters/components/Select/controlPanel.test.ts
new file mode 100644
index 000000000000..cf0da93adba7
--- /dev/null
+++ b/superset-frontend/src/filters/components/Select/controlPanel.test.ts
@@ -0,0 +1,43 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import { GenericDataType } from '@apache-superset/core/common';
+import { getOperatorTypeChoices, isStringOperatorColumn } from './controlPanel';
+import { SelectFilterOperatorType } from './types';
+
+test('getOperatorTypeChoices only returns exact match for non-string columns', () => {
+  expect(getOperatorTypeChoices(false)).toEqual([
+    [SelectFilterOperatorType.Exact, 'Exact match (IN)'],
+  ]);
+});
+
+test('isStringOperatorColumn returns false for numeric selected columns', () => {
+  expect(
+    isStringOperatorColumn('num_col', [
+      { column_name: 'num_col', type_generic: GenericDataType.Numeric },
+    ]),
+  ).toBe(false);
+});
+
+test('isStringOperatorColumn returns true for string selected columns', () => {
+  expect(
+    isStringOperatorColumn('name', [
+      { column_name: 'name', type_generic: GenericDataType.String },
+    ]),
+  ).toBe(true);
+});
diff --git a/superset-frontend/src/filters/components/Select/controlPanel.ts b/superset-frontend/src/filters/components/Select/controlPanel.ts
index b170d0b2ec85..0827e23370ec 100644
--- a/superset-frontend/src/filters/components/Select/controlPanel.ts
+++ b/superset-frontend/src/filters/components/Select/controlPanel.ts
@@ -17,12 +17,13 @@
  * under the License.
  */
 import { t } from '@apache-superset/core/translation';
-import { validateNonEmpty } from '@superset-ui/core';
+import { GenericDataType } from '@apache-superset/core/common';
+import { ensureIsArray, validateNonEmpty } from '@superset-ui/core';
 import {
   ControlPanelConfig,
   sharedControls,
 } from '@superset-ui/chart-controls';
-import { DEFAULT_FORM_DATA } from './types';
+import { DEFAULT_FORM_DATA, SelectFilterOperatorType } from './types';
 
 const {
   enableEmptyFilter,
@@ -32,8 +33,40 @@ const {
   defaultToFirstItem,
   searchAllOptions,
   sortAscending,
+  operatorType,
 } = DEFAULT_FORM_DATA;
 
+type FilterSelectColumn = {
+  column_name: string;
+  type_generic?: GenericDataType | null;
+};
+
+export const getOperatorTypeChoices = (isStringColumn: boolean) => [
+  [SelectFilterOperatorType.Exact, t('Exact match (IN)')],
+  ...(isStringColumn
+    ? [
+        [SelectFilterOperatorType.Contains, t('Contains text (ILIKE %x%)')],
+        [SelectFilterOperatorType.StartsWith, t('Starts with (ILIKE x%)')],
+        [SelectFilterOperatorType.EndsWith, t('Ends with (ILIKE %x)')],
+      ]
+    : []),
+];
+
+export const isStringOperatorColumn = (
+  selectedColumn: unknown,
+  columns?: FilterSelectColumn[],
+) => {
+  const columnName = ensureIsArray(selectedColumn)[0];
+  if (!columnName || !columns) {
+    return true;
+  }
+  const column = columns.find(col => col.column_name === columnName);
+  if (!column || column.type_generic == null) {
+    return true;
+  }
+  return column.type_generic === GenericDataType.String;
+};
+
 const config: ControlPanelConfig = {
   controlPanelSections: [
     {
@@ -56,6 +89,44 @@ const config: ControlPanelConfig = {
       label: t('UI Configuration'),
       expanded: true,
       controlSetRows: [
+        [
+          {
+            name: 'operatorType',
+            config: {
+              type: 'SelectControl',
+              renderTrigger: true,
+              affectsDataMask: true,
+              label: t('Match type'),
+              default: operatorType,
+              choices: getOperatorTypeChoices(true),
+              description: t(
+                'Determines how the filter matches values. ' +
+                  '"Exact match" uses the IN operator (default). ' +
+                  'ILIKE options enable partial text matching with a free-text input. ' +
+                  'Warning: ILIKE queries may be slow on large datasets as they cannot use indexes effectively.',
+              ),
+              mapStateToProps: state => {
+                const isStringColumn = isStringOperatorColumn(
+                  state.controls?.groupby?.value,
+                  state.datasource?.columns as FilterSelectColumn[] | undefined,
+                );
+                return {
+                  choices: getOperatorTypeChoices(isStringColumn),
+                  description: isStringColumn
+                    ? t(
+                        'Determines how the filter matches values. ' +
+                          '"Exact match" uses the IN operator (default). ' +
+                          'ILIKE options enable partial text matching with a free-text input. ' +
+                          'Warning: ILIKE queries may be slow on large datasets as they cannot use indexes effectively.',
+                      )
+                    : t(
+                        'Only exact match is available for non-string columns.',
+                      ),
+                };
+              },
+            },
+          },
+        ],
         [
           {
             name: 'sortAscending',
diff --git a/superset-frontend/src/filters/components/Select/transformProps.ts b/superset-frontend/src/filters/components/Select/transformProps.ts
index 2e0bdfd69c7e..900ef336d436 100644
--- a/superset-frontend/src/filters/components/Select/transformProps.ts
+++ b/superset-frontend/src/filters/components/Select/transformProps.ts
@@ -18,7 +18,11 @@
  */
 import { GenericDataType } from '@apache-superset/core/common';
 import { noOp } from 'src/utils/common';
-import { DEFAULT_FORM_DATA, PluginFilterSelectChartProps } from './types';
+import {
+  DEFAULT_FORM_DATA,
+  PluginFilterSelectChartProps,
+  PluginFilterSelectQueryFormData,
+} from './types';
 
 export default function transformProps(
   chartProps: PluginFilterSelectChartProps,
@@ -36,7 +40,10 @@ export default function transformProps(
     isRefreshing,
     inputRef,
   } = chartProps;
-  const newFormData = { ...DEFAULT_FORM_DATA, ...formData };
+  const newFormData = {
+    ...DEFAULT_FORM_DATA,
+    ...(formData as PluginFilterSelectQueryFormData),
+  };
   const {
     setDataMask = noOp,
     setHoveredFilter = noOp,
diff --git a/superset-frontend/src/filters/components/Select/types.ts b/superset-frontend/src/filters/components/Select/types.ts
index 001facd11e32..2e2a81d37ddb 100644
--- a/superset-frontend/src/filters/components/Select/types.ts
+++ b/superset-frontend/src/filters/components/Select/types.ts
@@ -32,6 +32,13 @@ import { PluginFilterHooks, PluginFilterStylesProps } from '../types';
 
 export type SelectValue = (number | string | null)[] | null | undefined;
 
+export enum SelectFilterOperatorType {
+  Exact = 'exact',
+  Contains = 'ilike_contains',
+  StartsWith = 'ilike_starts_with',
+  EndsWith = 'ilike_ends_with',
+}
+
 export interface PluginFilterSelectCustomizeProps {
   defaultValue?: SelectValue;
   enableEmptyFilter: boolean;
@@ -42,6 +49,7 @@ export interface PluginFilterSelectCustomizeProps {
   searchAllOptions: boolean;
   sortAscending?: boolean;
   sortMetric?: string;
+  operatorType?: SelectFilterOperatorType;
 }
 
 export type PluginFilterSelectQueryFormData = QueryFormData &
@@ -78,4 +86,5 @@ export const DEFAULT_FORM_DATA: PluginFilterSelectCustomizeProps = {
   multiSelect: true,
   searchAllOptions: false,
   sortAscending: true,
+  operatorType: SelectFilterOperatorType.Exact,
 };
diff --git a/superset-frontend/src/filters/utils.ts b/superset-frontend/src/filters/utils.ts
index 451cdec22568..e57117a29278 100644
--- a/superset-frontend/src/filters/utils.ts
+++ b/superset-frontend/src/filters/utils.ts
@@ -29,12 +29,30 @@ import {
   Clauses,
   ExpressionTypes,
 } from '../explore/components/controls/FilterControl/types';
+import { SelectFilterOperatorType } from './components/Select/types';
+
+function applyWildcard(
+  value: string,
+  operatorType: SelectFilterOperatorType,
+): string {
+  switch (operatorType) {
+    case SelectFilterOperatorType.Contains:
+      return `%${value}%`;
+    case SelectFilterOperatorType.StartsWith:
+      return `${value}%`;
+    case SelectFilterOperatorType.EndsWith:
+      return `%${value}`;
+    default:
+      return value;
+  }
+}
 
 export const getSelectExtraFormData = (
   col: string,
   value?: null | (string | number | boolean | null)[],
   emptyFilter = false,
   shouldExcludeFilter = false,
+  operatorType: SelectFilterOperatorType = SelectFilterOperatorType.Exact,
 ): ExtraFormData => {
   const extra: ExtraFormData = {};
   if (emptyFilter) {
@@ -46,13 +64,26 @@ export const getSelectExtraFormData = (
       },
     ];
   } else if (value !== undefined && value !== null && value.length !== 0) {
-    extra.filters = [
-      {
-        col,
-        op: shouldExcludeFilter ? ('NOT IN' as const) : ('IN' as const),
-        val: value,
-      },
-    ];
+    const isLikeOperator = operatorType !== SelectFilterOperatorType.Exact;
+
+    if (isLikeOperator && typeof value[0] === 'string') {
+      const wildcardVal = applyWildcard(value[0] as string, operatorType);
+      extra.filters = [
+        {
+          col,
+          op: shouldExcludeFilter ? ('NOT ILIKE' as const) : ('ILIKE' as const),
+          val: wildcardVal,
+        },
+      ];
+    } else {
+      extra.filters = [
+        {
+          col,
+          op: shouldExcludeFilter ? ('NOT IN' as const) : ('IN' as const),
+          val: value,
+        },
+      ];
+    }
   }
   return extra;
 };

From 96705c156a965f6a4fe77f483d7692d2838e83f1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jo=C3=A3o=20Pedro=20Alves=20Barbosa?=
 <93401463+joaopedroab@users.noreply.github.com>
Date: Mon, 16 Mar 2026 21:55:49 -0300
Subject: [PATCH 2/3] fix(map-box): make opacity, lon, lat, and zoom controls
 functional (#38374)

Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>
Co-authored-by: codeant-ai-for-open-source[bot] <244253245+codeant-ai-for-open-source[bot]@users.noreply.github.com>
---
 UPDATING.md                                   |   8 +
 .../src/MapBox.tsx                            |  96 ++++-
 .../src/controlPanel.ts                       |   7 +-
 .../src/transformProps.ts                     |  44 +-
 .../test/MapBox.test.tsx                      | 381 ++++++++++++++++++
 .../test/controlPanel.test.ts                 |  81 ++++
 .../test/transformProps.test.ts               | 230 +++++++++++
 7 files changed, 821 insertions(+), 26 deletions(-)
 create mode 100644 superset-frontend/plugins/legacy-plugin-chart-map-box/test/MapBox.test.tsx
 create mode 100644 superset-frontend/plugins/legacy-plugin-chart-map-box/test/controlPanel.test.ts
 create mode 100644 superset-frontend/plugins/legacy-plugin-chart-map-box/test/transformProps.test.ts

diff --git a/UPDATING.md b/UPDATING.md
index 455e9a10ba48..bbfd509ea440 100644
--- a/UPDATING.md
+++ b/UPDATING.md
@@ -24,6 +24,14 @@ assists people when migrating to a new version.
 
 ## Next
 
+### Deck.gl MapBox viewport and opacity controls are functional
+
+The Deck.gl MapBox chart's **Opacity**, **Default longitude**, **Default latitude**, and **Zoom** controls were previously non-functional — changing them had no effect on the rendered map. These controls are now wired up correctly.
+
+**Behavior change for existing charts:** Previously, the viewport controls had hard-coded default values (`-122.405293`, `37.772123`, zoom `11` — San Francisco) that were stored in each chart's `form_data` but never applied. The map always used `fitBounds` to center on the data. With this fix, those stored values are now respected, which means existing MapBox charts may open centered on the old default coordinates instead of fitting to data bounds.
+
+**To restore fit-to-data behavior:** Open the chart in Explore, clear the **Default longitude**, **Default latitude**, and **Zoom** fields in the Viewport section, and re-save the chart.
+
 ### ClickHouse minimum driver version bump
 
 The minimum required version of `clickhouse-connect` has been raised to `>=0.13.0`. If you are using the ClickHouse connector, please upgrade your `clickhouse-connect` package. The `_mutate_label` workaround that appended hash suffixes to column aliases has also been removed, as it is no longer needed with modern versions of the driver.
diff --git a/superset-frontend/plugins/legacy-plugin-chart-map-box/src/MapBox.tsx b/superset-frontend/plugins/legacy-plugin-chart-map-box/src/MapBox.tsx
index 361a27610c94..a69659de0b38 100644
--- a/superset-frontend/plugins/legacy-plugin-chart-map-box/src/MapBox.tsx
+++ b/superset-frontend/plugins/legacy-plugin-chart-map-box/src/MapBox.tsx
@@ -61,6 +61,9 @@ interface MapBoxProps {
   renderWhileDragging?: boolean;
   rgb?: (string | number)[];
   bounds?: [[number, number], [number, number]]; // May be undefined for empty datasets
+  viewportLongitude?: number;
+  viewportLatitude?: number;
+  viewportZoom?: number;
 }
 
 interface MapBoxState {
@@ -82,30 +85,10 @@ class MapBox extends Component<MapBoxProps, MapBoxState> {
   constructor(props: MapBoxProps) {
     super(props);
 
-    const { width = 400, height = 400, bounds } = this.props;
-    // Get a viewport that fits the given bounds, which all marks to be clustered.
-    // Derive lat, lon and zoom from this viewport. This is only done on initial
-    // render as the bounds don't update as we pan/zoom in the current design.
-
-    let latitude = 0;
-    let longitude = 0;
-    let zoom = 1;
-
-    // Guard against empty datasets where bounds may be undefined
-    if (bounds && bounds[0] && bounds[1]) {
-      const mercator = new WebMercatorViewport({
-        width,
-        height,
-      }).fitBounds(bounds);
-      ({ latitude, longitude, zoom } = mercator);
-    }
+    const fitBounds = this.computeFitBoundsViewport();
 
     this.state = {
-      viewport: {
-        longitude,
-        latitude,
-        zoom,
-      },
+      viewport: this.mergeViewportWithProps(fitBounds),
     };
     this.handleViewportChange = this.handleViewportChange.bind(this);
   }
@@ -116,6 +99,75 @@ class MapBox extends Component<MapBoxProps, MapBoxState> {
     onViewportChange!(viewport);
   }
 
+  mergeViewportWithProps(
+    fitBounds: Viewport,
+    viewport: Viewport = fitBounds,
+    props: MapBoxProps = this.props,
+    useFitBoundsForUnset = true,
+  ): Viewport {
+    const { viewportLongitude, viewportLatitude, viewportZoom } = props;
+
+    return {
+      ...viewport,
+      longitude:
+        viewportLongitude ??
+        (useFitBoundsForUnset ? fitBounds.longitude : viewport.longitude),
+      latitude:
+        viewportLatitude ??
+        (useFitBoundsForUnset ? fitBounds.latitude : viewport.latitude),
+      zoom:
+        viewportZoom ?? (useFitBoundsForUnset ? fitBounds.zoom : viewport.zoom),
+    };
+  }
+
+  computeFitBoundsViewport(): Viewport {
+    const { width = 400, height = 400, bounds } = this.props;
+    if (bounds && bounds[0] && bounds[1]) {
+      const mercator = new WebMercatorViewport({ width, height }).fitBounds(
+        bounds,
+      );
+      return {
+        latitude: mercator.latitude,
+        longitude: mercator.longitude,
+        zoom: mercator.zoom,
+      };
+    }
+    return { latitude: 0, longitude: 0, zoom: 1 };
+  }
+
+  componentDidUpdate(prevProps: MapBoxProps) {
+    const { viewport } = this.state;
+    const fitBoundsInputsChanged =
+      prevProps.width !== this.props.width ||
+      prevProps.height !== this.props.height ||
+      prevProps.bounds !== this.props.bounds;
+    const viewportPropsChanged =
+      prevProps.viewportLongitude !== this.props.viewportLongitude ||
+      prevProps.viewportLatitude !== this.props.viewportLatitude ||
+      prevProps.viewportZoom !== this.props.viewportZoom;
+
+    if (!fitBoundsInputsChanged && !viewportPropsChanged) {
+      return;
+    }
+
+    const fitBounds = this.computeFitBoundsViewport();
+    const nextViewport = this.mergeViewportWithProps(
+      fitBounds,
+      viewport,
+      this.props,
+      fitBoundsInputsChanged || viewportPropsChanged,
+    );
+
+    const viewportChanged =
+      nextViewport.longitude !== viewport.longitude ||
+      nextViewport.latitude !== viewport.latitude ||
+      nextViewport.zoom !== viewport.zoom;
+
+    if (viewportChanged) {
+      this.setState({ viewport: nextViewport });
+    }
+  }
+
   render() {
     const {
       width,
diff --git a/superset-frontend/plugins/legacy-plugin-chart-map-box/src/controlPanel.ts b/superset-frontend/plugins/legacy-plugin-chart-map-box/src/controlPanel.ts
index 80d6ab0c7f6b..8b1c846e048c 100644
--- a/superset-frontend/plugins/legacy-plugin-chart-map-box/src/controlPanel.ts
+++ b/superset-frontend/plugins/legacy-plugin-chart-map-box/src/controlPanel.ts
@@ -241,6 +241,7 @@ const config: ControlPanelConfig = {
               label: t('Opacity'),
               default: 1,
               isFloat: true,
+              renderTrigger: true,
               description: t(
                 'Opacity of all clusters, points, and labels. Between 0 and 1.',
               ),
@@ -273,7 +274,7 @@ const config: ControlPanelConfig = {
               type: 'TextControl',
               label: t('Default longitude'),
               renderTrigger: true,
-              default: -122.405293,
+              default: '',
               isFloat: true,
               description: t('Longitude of default viewport'),
               places: 8,
@@ -287,7 +288,7 @@ const config: ControlPanelConfig = {
               type: 'TextControl',
               label: t('Default latitude'),
               renderTrigger: true,
-              default: 37.772123,
+              default: '',
               isFloat: true,
               description: t('Latitude of default viewport'),
               places: 8,
@@ -304,7 +305,7 @@ const config: ControlPanelConfig = {
               label: t('Zoom'),
               renderTrigger: true,
               isFloat: true,
-              default: 11,
+              default: '',
               description: t('Zoom level of the map'),
               places: 8,
               // Viewport zoom shouldn't prompt user to re-run query
diff --git a/superset-frontend/plugins/legacy-plugin-chart-map-box/src/transformProps.ts b/superset-frontend/plugins/legacy-plugin-chart-map-box/src/transformProps.ts
index caaeb9b3f55b..45eca8d4448b 100644
--- a/superset-frontend/plugins/legacy-plugin-chart-map-box/src/transformProps.ts
+++ b/superset-frontend/plugins/legacy-plugin-chart-map-box/src/transformProps.ts
@@ -23,6 +23,30 @@ import { ChartProps } from '@superset-ui/core';
 import { DEFAULT_POINT_RADIUS, DEFAULT_MAX_ZOOM } from './MapBox';
 
 const NOOP = () => {};
+const MIN_LONGITUDE = -180;
+const MAX_LONGITUDE = 180;
+const MIN_LATITUDE = -90;
+const MAX_LATITUDE = 90;
+const MIN_ZOOM = 0;
+
+function toFiniteNumber(
+  value: string | number | null | undefined,
+): number | undefined {
+  if (value === null || value === undefined) return undefined;
+  const normalizedValue = typeof value === 'string' ? value.trim() : value;
+  if (normalizedValue === '') return undefined;
+  const num = Number(normalizedValue);
+  return Number.isFinite(num) ? num : undefined;
+}
+
+function clampNumber(
+  value: number | undefined,
+  min: number,
+  max: number,
+): number | undefined {
+  if (value === undefined) return undefined;
+  return Math.min(max, Math.max(min, value));
+}
 
 interface ClusterProperties {
   metric: number;
@@ -45,6 +69,9 @@ export default function transformProps(chartProps: ChartProps) {
     pandasAggfunc,
     pointRadiusUnit,
     renderWhileDragging,
+    viewportLongitude,
+    viewportLatitude,
+    viewportZoom,
   } = formData;
 
   // Validate mapbox color
@@ -93,7 +120,6 @@ export default function transformProps(chartProps: ChartProps) {
     aggregatorName: pandasAggfunc,
     bounds,
     clusterer,
-    globalOpacity,
     hasCustomMetric,
     mapboxApiKey,
     mapStyle: mapboxStyle,
@@ -116,5 +142,21 @@ export default function transformProps(chartProps: ChartProps) {
     pointRadiusUnit,
     renderWhileDragging,
     rgb,
+    viewportLongitude: clampNumber(
+      toFiniteNumber(viewportLongitude),
+      MIN_LONGITUDE,
+      MAX_LONGITUDE,
+    ),
+    viewportLatitude: clampNumber(
+      toFiniteNumber(viewportLatitude),
+      MIN_LATITUDE,
+      MAX_LATITUDE,
+    ),
+    viewportZoom: clampNumber(
+      toFiniteNumber(viewportZoom),
+      MIN_ZOOM,
+      DEFAULT_MAX_ZOOM,
+    ),
+    globalOpacity: Math.min(1, Math.max(0, toFiniteNumber(globalOpacity) ?? 1)),
   };
 }
diff --git a/superset-frontend/plugins/legacy-plugin-chart-map-box/test/MapBox.test.tsx b/superset-frontend/plugins/legacy-plugin-chart-map-box/test/MapBox.test.tsx
new file mode 100644
index 000000000000..f0782f5fc14d
--- /dev/null
+++ b/superset-frontend/plugins/legacy-plugin-chart-map-box/test/MapBox.test.tsx
@@ -0,0 +1,381 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import { type ReactNode } from 'react';
+import { render } from '@testing-library/react';
+import MapBox from '../src/MapBox';
+
+// Capture the most recent viewport props passed to MapGL
+let lastMapGLProps: Record<string, unknown> = {};
+const mockFitBounds = jest.fn();
+
+jest.mock('react-map-gl', () => {
+  const MockMapGL = (props: Record<string, unknown>) => {
+    lastMapGLProps = props;
+    return <div data-test="map-gl">{props.children as ReactNode}</div>;
+  };
+  return { __esModule: true, default: MockMapGL };
+});
+
+jest.mock('@math.gl/web-mercator', () => ({
+  WebMercatorViewport: jest
+    .fn()
+    .mockImplementation(
+      ({ width, height }: { width: number; height: number }) => ({
+        fitBounds: (bounds: [[number, number], [number, number]]) =>
+          mockFitBounds(bounds, width, height),
+      }),
+    ),
+}));
+
+jest.mock('../src/ScatterPlotGlowOverlay', () => {
+  const MockOverlay = (props: Record<string, unknown>) => (
+    <div data-test="scatter-overlay" data-opacity={props.globalOpacity} />
+  );
+  return { __esModule: true, default: MockOverlay };
+});
+
+const defaultProps = {
+  width: 800,
+  height: 600,
+  clusterer: {
+    getClusters: jest.fn().mockReturnValue([]),
+  },
+  globalOpacity: 1,
+  mapboxApiKey: 'test-key',
+  mapStyle: 'mapbox://styles/mapbox/light-v9',
+  pointRadius: 60,
+  pointRadiusUnit: 'Pixels',
+  renderWhileDragging: true,
+  rgb: ['', 255, 0, 0] as (string | number)[],
+  hasCustomMetric: false,
+  bounds: [
+    [-74.0, 40.7],
+    [-73.9, 40.8],
+  ] as [[number, number], [number, number]],
+  onViewportChange: jest.fn(),
+};
+
+beforeEach(() => {
+  lastMapGLProps = {};
+  jest.clearAllMocks();
+  mockFitBounds.mockImplementation(
+    (
+      bounds: [[number, number], [number, number]],
+      width: number,
+      height: number,
+    ) => ({
+      latitude: Number(((bounds[0][1] + bounds[1][1]) / 2).toFixed(2)),
+      longitude: Number(((bounds[0][0] + bounds[1][0]) / 2).toFixed(2)),
+      zoom: Number((10 + width / 1000 + height / 10000).toFixed(2)),
+    }),
+  );
+});
+
+test('initializes viewport from bounds', () => {
+  render(<MapBox {...defaultProps} />);
+  expect(lastMapGLProps.latitude).toBe(40.75);
+  expect(lastMapGLProps.longitude).toBe(-73.95);
+  expect(lastMapGLProps.zoom).toBe(10.86);
+});
+
+test('updates viewport when viewport props change', () => {
+  const { rerender } = render(
+    <MapBox
+      {...defaultProps}
+      viewportLongitude={-73.95}
+      viewportLatitude={40.75}
+      viewportZoom={10}
+    />,
+  );
+
+  rerender(
+    <MapBox
+      {...defaultProps}
+      viewportLongitude={-122.4}
+      viewportLatitude={37.8}
+      viewportZoom={5}
+    />,
+  );
+
+  expect(lastMapGLProps.longitude).toBe(-122.4);
+  expect(lastMapGLProps.latitude).toBe(37.8);
+  expect(lastMapGLProps.zoom).toBe(5);
+});
+
+test('does not loop when viewport state matches new props', () => {
+  const { rerender } = render(
+    <MapBox
+      {...defaultProps}
+      viewportLongitude={-73.95}
+      viewportLatitude={40.75}
+      viewportZoom={10}
+    />,
+  );
+
+  // Re-render with same props that match the initial viewport state
+  rerender(
+    <MapBox
+      {...defaultProps}
+      viewportLongitude={-73.95}
+      viewportLatitude={40.75}
+      viewportZoom={10}
+    />,
+  );
+
+  // Viewport should still be the fitBounds-computed values since props didn't change
+  expect(lastMapGLProps.longitude).toBe(-73.95);
+  expect(lastMapGLProps.latitude).toBe(40.75);
+  expect(lastMapGLProps.zoom).toBe(10);
+});
+
+test('passes globalOpacity to ScatterPlotGlowOverlay', () => {
+  const { getByTestId } = render(
+    <MapBox {...defaultProps} globalOpacity={0.5} />,
+  );
+  const overlay = getByTestId('scatter-overlay');
+  expect(overlay.dataset.opacity).toBe('0.5');
+});
+
+test('initializes viewport from props when provided', () => {
+  render(
+    <MapBox
+      {...defaultProps}
+      viewportLongitude={-122.4}
+      viewportLatitude={37.8}
+      viewportZoom={5}
+    />,
+  );
+  expect(lastMapGLProps.longitude).toBe(-122.4);
+  expect(lastMapGLProps.latitude).toBe(37.8);
+  expect(lastMapGLProps.zoom).toBe(5);
+});
+
+test('handles undefined bounds gracefully', () => {
+  render(<MapBox {...defaultProps} bounds={undefined} />);
+  expect(lastMapGLProps.longitude).toBe(0);
+  expect(lastMapGLProps.latitude).toBe(0);
+  expect(lastMapGLProps.zoom).toBe(1);
+});
+
+test('applies partial viewport props on update', () => {
+  const { rerender } = render(<MapBox {...defaultProps} />);
+
+  rerender(<MapBox {...defaultProps} viewportLongitude={-122.4} />);
+
+  expect(lastMapGLProps.longitude).toBe(-122.4);
+  expect(lastMapGLProps.latitude).toBe(40.75);
+  expect(lastMapGLProps.zoom).toBe(10.86);
+});
+
+test('restores fitBounds when viewport props are cleared', () => {
+  const { rerender } = render(
+    <MapBox
+      {...defaultProps}
+      viewportLongitude={-122.4}
+      viewportLatitude={37.8}
+      viewportZoom={5}
+    />,
+  );
+
+  // Clear all viewport props (simulates user clearing the controls)
+  rerender(<MapBox {...defaultProps} />);
+
+  // Should revert to fitBounds values
+  expect(lastMapGLProps.longitude).toBe(-73.95);
+  expect(lastMapGLProps.latitude).toBe(40.75);
+  expect(lastMapGLProps.zoom).toBe(10.86);
+});
+
+test('restores only cleared viewport props, keeps the rest', () => {
+  const { rerender } = render(
+    <MapBox
+      {...defaultProps}
+      viewportLongitude={-122.4}
+      viewportLatitude={37.8}
+      viewportZoom={5}
+    />,
+  );
+
+  // Clear only longitude, keep lat/zoom
+  rerender(
+    <MapBox {...defaultProps} viewportLatitude={37.8} viewportZoom={5} />,
+  );
+
+  // Longitude reverts to fitBounds, lat/zoom stay
+  expect(lastMapGLProps.longitude).toBe(-73.95);
+  expect(lastMapGLProps.latitude).toBe(37.8);
+  expect(lastMapGLProps.zoom).toBe(5);
+});
+
+test('applies changed viewport props even when another is cleared simultaneously', () => {
+  const { rerender } = render(
+    <MapBox
+      {...defaultProps}
+      viewportLongitude={-122.4}
+      viewportLatitude={37.8}
+      viewportZoom={5}
+    />,
+  );
+
+  // Clear longitude, change latitude simultaneously
+  rerender(
+    <MapBox {...defaultProps} viewportLatitude={40.0} viewportZoom={5} />,
+  );
+
+  // Longitude reverts to fitBounds, latitude should be the NEW value
+  expect(lastMapGLProps.longitude).toBe(-73.95);
+  expect(lastMapGLProps.latitude).toBe(40.0);
+  expect(lastMapGLProps.zoom).toBe(5);
+});
+
+test('falls back to default viewport when cleared with undefined bounds', () => {
+  const { rerender } = render(
+    <MapBox
+      {...defaultProps}
+      bounds={undefined}
+      viewportLongitude={-122.4}
+      viewportLatitude={37.8}
+      viewportZoom={5}
+    />,
+  );
+
+  // Clear viewport props — no bounds to fitBounds to
+  rerender(<MapBox {...defaultProps} bounds={undefined} />);
+
+  // Should fall back to {0, 0, 1}
+  expect(lastMapGLProps.longitude).toBe(0);
+  expect(lastMapGLProps.latitude).toBe(0);
+  expect(lastMapGLProps.zoom).toBe(1);
+});
+
+test('recomputes fitBounds when bounds change and no explicit viewport is set', () => {
+  const { rerender } = render(<MapBox {...defaultProps} />);
+
+  rerender(
+    <MapBox
+      {...defaultProps}
+      bounds={[
+        [-123.2, 36.5],
+        [-121.8, 38.1],
+      ]}
+    />,
+  );
+
+  expect(lastMapGLProps.longitude).toBe(-122.5);
+  expect(lastMapGLProps.latitude).toBe(37.3);
+  expect(lastMapGLProps.zoom).toBe(10.86);
+});
+
+test('recomputes fitBounds when chart size changes and no explicit viewport is set', () => {
+  const { rerender } = render(<MapBox {...defaultProps} />);
+
+  rerender(<MapBox {...defaultProps} width={1200} height={900} />);
+
+  expect(lastMapGLProps.longitude).toBe(-73.95);
+  expect(lastMapGLProps.latitude).toBe(40.75);
+  expect(lastMapGLProps.zoom).toBe(11.29);
+});
+
+test('recomputes only implicit viewport fields when bounds change', () => {
+  const { rerender } = render(
+    <MapBox {...defaultProps} viewportLongitude={-122.4} />,
+  );
+
+  rerender(
+    <MapBox
+      {...defaultProps}
+      viewportLongitude={-122.4}
+      bounds={[
+        [-123.2, 36.5],
+        [-121.8, 38.1],
+      ]}
+    />,
+  );
+
+  expect(lastMapGLProps.longitude).toBe(-122.4);
+  expect(lastMapGLProps.latitude).toBe(37.3);
+  expect(lastMapGLProps.zoom).toBe(10.86);
+});
+
+test('recomputes only implicit viewport fields when chart size changes', () => {
+  const { rerender } = render(
+    <MapBox {...defaultProps} viewportLatitude={37.8} />,
+  );
+
+  rerender(
+    <MapBox
+      {...defaultProps}
+      viewportLatitude={37.8}
+      width={1200}
+      height={900}
+    />,
+  );
+
+  expect(lastMapGLProps.longitude).toBe(-73.95);
+  expect(lastMapGLProps.latitude).toBe(37.8);
+  expect(lastMapGLProps.zoom).toBe(11.29);
+});
+
+test('recomputes implicit position when zoom stays explicit across bounds changes', () => {
+  const { rerender } = render(<MapBox {...defaultProps} viewportZoom={5} />);
+
+  rerender(
+    <MapBox
+      {...defaultProps}
+      viewportZoom={5}
+      bounds={[
+        [-123.2, 36.5],
+        [-121.8, 38.1],
+      ]}
+    />,
+  );
+
+  expect(lastMapGLProps.longitude).toBe(-122.5);
+  expect(lastMapGLProps.latitude).toBe(37.3);
+  expect(lastMapGLProps.zoom).toBe(5);
+});
+
+test('does not recompute fitBounds on bounds change when an explicit viewport is set', () => {
+  const { rerender } = render(
+    <MapBox
+      {...defaultProps}
+      viewportLongitude={-122.4}
+      viewportLatitude={37.8}
+      viewportZoom={5}
+    />,
+  );
+
+  rerender(
+    <MapBox
+      {...defaultProps}
+      viewportLongitude={-122.4}
+      viewportLatitude={37.8}
+      viewportZoom={5}
+      bounds={[
+        [-123.2, 36.5],
+        [-121.8, 38.1],
+      ]}
+    />,
+  );
+
+  expect(lastMapGLProps.longitude).toBe(-122.4);
+  expect(lastMapGLProps.latitude).toBe(37.8);
+  expect(lastMapGLProps.zoom).toBe(5);
+});
diff --git a/superset-frontend/plugins/legacy-plugin-chart-map-box/test/controlPanel.test.ts b/superset-frontend/plugins/legacy-plugin-chart-map-box/test/controlPanel.test.ts
new file mode 100644
index 000000000000..2a72db463669
--- /dev/null
+++ b/superset-frontend/plugins/legacy-plugin-chart-map-box/test/controlPanel.test.ts
@@ -0,0 +1,81 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import type {
+  ControlPanelConfig,
+  CustomControlItem,
+} from '@superset-ui/chart-controls';
+import controlPanel from '../src/controlPanel';
+
+type ControlConfig = Required<CustomControlItem['config']>;
+
+function isCustomControlItem(
+  controlItem: unknown,
+): controlItem is CustomControlItem & { config: ControlConfig } {
+  return (
+    typeof controlItem === 'object' &&
+    controlItem !== null &&
+    'name' in controlItem &&
+    'config' in controlItem
+  );
+}
+
+function getControl(
+  panel: ControlPanelConfig,
+  controlName: string,
+): CustomControlItem & { config: ControlConfig } {
+  const item = (panel.controlPanelSections || [])
+    .flatMap(section => section?.controlSetRows || [])
+    .flat()
+    .find(
+      controlItem =>
+        isCustomControlItem(controlItem) && controlItem.name === controlName,
+    );
+
+  if (!isCustomControlItem(item)) {
+    throw new Error(`Control "${controlName}" not found`);
+  }
+
+  return item;
+}
+
+test('viewport controls default to empty values and rerender without query refresh', () => {
+  const longitudeControl = getControl(controlPanel, 'viewport_longitude');
+  const latitudeControl = getControl(controlPanel, 'viewport_latitude');
+  const zoomControl = getControl(controlPanel, 'viewport_zoom');
+
+  expect(longitudeControl.config.default).toBe('');
+  expect(latitudeControl.config.default).toBe('');
+  expect(zoomControl.config.default).toBe('');
+
+  expect(longitudeControl.config.renderTrigger).toBe(true);
+  expect(latitudeControl.config.renderTrigger).toBe(true);
+  expect(zoomControl.config.renderTrigger).toBe(true);
+
+  expect(longitudeControl.config.dontRefreshOnChange).toBe(true);
+  expect(latitudeControl.config.dontRefreshOnChange).toBe(true);
+  expect(zoomControl.config.dontRefreshOnChange).toBe(true);
+});
+
+test('opacity control rerenders immediately when changed', () => {
+  const opacityControl = getControl(controlPanel, 'global_opacity');
+
+  expect(opacityControl.config.default).toBe(1);
+  expect(opacityControl.config.renderTrigger).toBe(true);
+  expect(opacityControl.config.isFloat).toBe(true);
+});
diff --git a/superset-frontend/plugins/legacy-plugin-chart-map-box/test/transformProps.test.ts b/superset-frontend/plugins/legacy-plugin-chart-map-box/test/transformProps.test.ts
new file mode 100644
index 000000000000..483f64963dc9
--- /dev/null
+++ b/superset-frontend/plugins/legacy-plugin-chart-map-box/test/transformProps.test.ts
@@ -0,0 +1,230 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import { ChartProps } from '@superset-ui/core';
+import { supersetTheme } from '@apache-superset/core/theme';
+
+jest.mock('supercluster', () => {
+  const MockSupercluster = jest.fn().mockImplementation(() => ({
+    load: jest.fn(),
+    getClusters: jest.fn().mockReturnValue([]),
+  }));
+  return { __esModule: true, default: MockSupercluster };
+});
+
+// Import after mocking supercluster to avoid ESM parse error
+// eslint-disable-next-line import/first
+import transformProps from '../src/transformProps';
+
+type TransformPropsResult = {
+  globalOpacity?: number;
+  onViewportChange?: (viewport: {
+    latitude: number;
+    longitude: number;
+    zoom: number;
+  }) => void;
+  viewportLongitude?: number;
+  viewportLatitude?: number;
+  viewportZoom?: number;
+};
+
+const baseFormData = {
+  clusteringRadius: 60,
+  globalOpacity: 0.8,
+  mapboxColor: 'rgb(0, 139, 139)',
+  mapboxStyle: 'mapbox://styles/mapbox/light-v9',
+  pandasAggfunc: 'sum',
+  pointRadiusUnit: 'Pixels',
+  renderWhileDragging: true,
+  viewportLongitude: -73.935242,
+  viewportLatitude: 40.73061,
+  viewportZoom: 9,
+};
+
+const baseQueriesData = [
+  {
+    data: {
+      bounds: [
+        [-74.0, 40.7],
+        [-73.9, 40.8],
+      ] as [[number, number], [number, number]],
+      geoJSON: { features: [] },
+      hasCustomMetric: false,
+      mapboxApiKey: 'test-api-key',
+    },
+  },
+];
+
+function createChartProps(overrides: Record<string, unknown> = {}) {
+  return new ChartProps({
+    formData: { ...baseFormData, ...overrides },
+    width: 800,
+    height: 600,
+    queriesData: baseQueriesData,
+    theme: supersetTheme,
+  });
+}
+
+function getTransformPropsResult(
+  overrides: Record<string, unknown> = {},
+): TransformPropsResult {
+  return transformProps(createChartProps(overrides)) as TransformPropsResult;
+}
+
+test('extracts globalOpacity from formData', () => {
+  const result = getTransformPropsResult({ globalOpacity: 0.5 });
+  expect(result.globalOpacity).toBe(0.5);
+});
+
+test('extracts viewport values from formData', () => {
+  const result = getTransformPropsResult({
+    viewportLongitude: -122.4,
+    viewportLatitude: 37.8,
+    viewportZoom: 12,
+  });
+  expect(result).toEqual(
+    expect.objectContaining({
+      viewportLongitude: -122.4,
+      viewportLatitude: 37.8,
+      viewportZoom: 12,
+    }),
+  );
+});
+
+test('clamps viewport values to safe map ranges', () => {
+  const result = getTransformPropsResult({
+    viewportLongitude: 190,
+    viewportLatitude: -100,
+    viewportZoom: 99,
+  });
+  expect(result).toEqual(
+    expect.objectContaining({
+      viewportLongitude: 180,
+      viewportLatitude: -90,
+      viewportZoom: 16,
+    }),
+  );
+});
+
+test('provides onViewportChange callback that updates control values', () => {
+  const setControlValue = jest.fn();
+  const chartProps = new ChartProps({
+    formData: baseFormData,
+    width: 800,
+    height: 600,
+    queriesData: baseQueriesData,
+    hooks: { setControlValue },
+    theme: supersetTheme,
+  });
+  const result = transformProps(chartProps) as TransformPropsResult;
+  expect(result.onViewportChange).toBeDefined();
+
+  result.onViewportChange!({
+    latitude: 51.5,
+    longitude: -0.12,
+    zoom: 10,
+  });
+
+  expect(setControlValue).toHaveBeenCalledWith('viewport_longitude', -0.12);
+  expect(setControlValue).toHaveBeenCalledWith('viewport_latitude', 51.5);
+  expect(setControlValue).toHaveBeenCalledWith('viewport_zoom', 10);
+});
+
+test('normalizes string viewport values to numbers', () => {
+  const result = getTransformPropsResult({
+    viewportLongitude: '-122.4',
+    viewportLatitude: '37.8',
+    viewportZoom: '12',
+  });
+  expect(result.viewportLongitude).toBe(-122.4);
+  expect(result.viewportLatitude).toBe(37.8);
+  expect(result.viewportZoom).toBe(12);
+});
+
+test('normalizes empty viewport values to undefined', () => {
+  const result = getTransformPropsResult({
+    viewportLongitude: '',
+    viewportLatitude: '',
+    viewportZoom: '',
+  });
+  expect(result.viewportLongitude).toBeUndefined();
+  expect(result.viewportLatitude).toBeUndefined();
+  expect(result.viewportZoom).toBeUndefined();
+});
+
+test('normalizes whitespace-only viewport values to undefined', () => {
+  const result = getTransformPropsResult({
+    viewportLongitude: '   ',
+    viewportLatitude: '\t',
+    viewportZoom: ' \n ',
+  });
+  expect(result.viewportLongitude).toBeUndefined();
+  expect(result.viewportLatitude).toBeUndefined();
+  expect(result.viewportZoom).toBeUndefined();
+});
+
+test('normalizes string opacity to number', () => {
+  const result = getTransformPropsResult({ globalOpacity: '0.5' });
+  expect(result.globalOpacity).toBe(0.5);
+});
+
+test('defaults empty opacity to 1', () => {
+  const result = getTransformPropsResult({ globalOpacity: '' });
+  expect(result.globalOpacity).toBe(1);
+});
+
+test('defaults whitespace-only opacity to 1', () => {
+  const result = getTransformPropsResult({ globalOpacity: '   ' });
+  expect(result.globalOpacity).toBe(1);
+});
+
+test('clamps opacity to [0, 1] range', () => {
+  expect(getTransformPropsResult({ globalOpacity: 5 }).globalOpacity).toBe(1);
+  expect(getTransformPropsResult({ globalOpacity: -1 }).globalOpacity).toBe(0);
+});
+
+test('passes through numeric values unchanged', () => {
+  const result = getTransformPropsResult({
+    viewportLongitude: -122.4,
+    viewportLatitude: 37.8,
+    viewportZoom: 12,
+    globalOpacity: 0.8,
+  });
+  expect(result.viewportLongitude).toBe(-122.4);
+  expect(result.viewportLatitude).toBe(37.8);
+  expect(result.viewportZoom).toBe(12);
+  expect(result.globalOpacity).toBe(0.8);
+});
+
+test('calls onError and returns empty object for invalid color', () => {
+  const onError = jest.fn();
+  const chartProps = new ChartProps({
+    formData: { ...baseFormData, mapboxColor: 'invalid-color' },
+    width: 800,
+    height: 600,
+    queriesData: baseQueriesData,
+    hooks: { onError },
+    theme: supersetTheme,
+  });
+  const result = transformProps(chartProps);
+  expect(onError).toHaveBeenCalledWith(
+    "Color field must be of form 'rgb(%d, %d, %d)'",
+  );
+  expect(result).toEqual({});
+});

From ca403dc45d058b47bdf53e8124e1a45d9829c6f6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C4=90=E1=BB=97=20Tr=E1=BB=8Dng=20H=E1=BA=A3i?=
 <41283691+hainenber@users.noreply.github.com>
Date: Tue, 17 Mar 2026 08:01:43 +0700
Subject: [PATCH 3/3] fix(ci): allow docs testing to run despite absence of db
 diagnostics data (#38655)

Signed-off-by: hainenber <dotronghai96@gmail.com>
---
 .github/workflows/superset-docs-verify.yml | 1 +
 1 file changed, 1 insertion(+)

diff --git a/.github/workflows/superset-docs-verify.yml b/.github/workflows/superset-docs-verify.yml
index 52271f0a4a6b..1306fec1bf1f 100644
--- a/.github/workflows/superset-docs-verify.yml
+++ b/.github/workflows/superset-docs-verify.yml
@@ -117,6 +117,7 @@ jobs:
           run_id: ${{ github.event.workflow_run.id }}
           name: database-diagnostics
           path: docs/src/data/
+          if_no_artifact_found: 'warning'
       - name: Use fresh diagnostics
         run: |
           if [ -f "src/data/databases-diagnostics.json" ]; then