feat: log scale and step size control for range filters [WIP]

superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigForm/getControlItemsMap.tsx

@@ -26,6 +26,7 @@ import { FormInstance } from 'antd/lib/form';
 import { getChartControlPanelRegistry, styled, t } from '@superset-ui/core';
 import { Tooltip } from 'src/components/Tooltip';
 import { FormItem } from 'src/components/Form';
+import SelectControl from 'src/explore/components/controls/SelectControl';
 import {
   doesColumnMatchFilterType,
   getControlItems,
@@ -146,6 +147,7 @@ export default function getControlItemsMap({
       (controlItem: CustomControlItem) =>
         controlItem?.config?.renderTrigger &&
         controlItem.name !== 'sortAscending' &&
+        controlItem?.config?.type !== 'SelectControl' &&
         controlItem.name !== 'enableSingleValue',
     )
     .forEach(controlItem => {
@@ -211,6 +213,69 @@ export default function getControlItemsMap({
       );
       mapControlItems[controlItem.name] = { element, checked: initialValue };
     });
+  controlItems
+    .filter(
+      (controlItem: CustomControlItem) =>
+        controlItem?.config?.renderTrigger &&
+        controlItem.name !== 'sortAscending' &&
+        controlItem?.config?.type === 'SelectControl',
+    )
+    .forEach(controlItem => {
+      const initialValue =
+        filterToEdit?.controlValues?.[controlItem.name] ??
+        controlItem?.config?.default;
+      const element = (
+        <>
+          <CleanFormItem
+            name={['filters', filterId, 'requiredFirst', controlItem.name]}
+            hidden
+            initialValue={
+              controlItem?.config?.requiredFirst && filterToEdit?.requiredFirst
+            }
+          />
+          <Tooltip
+            key={controlItem.name}
+            placement="left"
+            title={
+              controlItem.config.affectsDataMask &&
+              disabled &&
+              t('Populate "Default value" to enable this control')
+            }
+          >
+            <StyledRowFormItem
+              key={controlItem.name}
+              name={['filters', filterId, 'controlValues', controlItem.name]}
+              initialValue={initialValue}
+              valuePropName="option"
+              colon={false}
+              label={
+                <StyledLabel>
+                  {t(`${controlItem.config?.label}`) || t('Select')}
+                </StyledLabel>
+              }
+            >
+              <SelectControl
+                name={controlItem.name}
+                clearable={false}
+                freeForm={controlItem.config.freeForm}
+                disabled={controlItem.config.affectsDataMask && disabled}
+                onChange={(value: any) => {
+                  setNativeFilterFieldValues(form, filterId, {
+                    [controlItem.name]: value,
+                    defaultDataMask: null,
+                  });
+                  // controlItem.config.value = value;
+                  forceUpdate();
+                }}
+                value={controlItem.config.value || initialValue}
+                choices={controlItem.config.choices}
+              />
+            </StyledRowFormItem>
+          </Tooltip>
+        </>
+      );
+      mapControlItems[controlItem.name] = { element, checked: false };
+    });
   return {
     controlItems: mapControlItems,
     mainControlItems: mapMainControlItems,

superset-frontend/src/filters/components/Range/RangeFilterPlugin.tsx

@@ -27,6 +27,8 @@ import {
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { Slider } from 'src/common/components';
 import { rgba } from 'emotion-rgba';
+// could add in scalePow and others
+import { scaleLog, scaleLinear } from 'd3-scale';
 import { PluginFilterRangeProps } from './types';
 import { StatusMessage, StyledFormItem, FilterPluginStyle } from '../common';
 import { getRangeExtraFormData } from '../../utils';
@@ -111,8 +113,7 @@ const Wrapper = styled.div<{ validateStatus?: 'error' | 'warning' | 'info' }>`
 
 const numberFormatter = getNumberFormatter(NumberFormats.SMART_NUMBER);
 
-const tipFormatter = (value: number) => numberFormatter(value);
-
+// lower and upper are NOT transformed!!!!
 const getLabel = (lower: number | null, upper: number | null): string => {
   if (lower !== null && upper !== null && lower === upper) {
     return `x = ${numberFormatter(lower)}`;
@@ -129,20 +130,6 @@ const getLabel = (lower: number | null, upper: number | null): string => {
   return '';
 };
 
-const getMarks = (
-  lower: number | null,
-  upper: number | null,
-): { [key: number]: string } => {
-  const newMarks: { [key: number]: string } = {};
-  if (lower !== null) {
-    newMarks[lower] = numberFormatter(lower);
-  }
-  if (upper !== null) {
-    newMarks[upper] = numberFormatter(upper);
-  }
-  return newMarks;
-};
-
 export default function RangeFilterPlugin(props: PluginFilterRangeProps) {
   const {
     data,
@@ -157,22 +144,68 @@ export default function RangeFilterPlugin(props: PluginFilterRangeProps) {
   const [row] = data;
   // @ts-ignore
   const { min, max }: { min: number; max: number } = row;
-  const { groupby, defaultValue, inputRef, enableSingleValue } = formData;
+  const {
+    groupby,
+    defaultValue,
+    inputRef,
+    stepSize,
+    logScale,
+    enableSingleValue,
+  } = formData;
+  const scaler = logScale
+    ? scaleLog().domain([min + 1, max + 1])
+    : scaleLinear().range([min, max]);
 
   const enableSingleMinValue = enableSingleValue === SingleValueType.Minimum;
   const enableSingleMaxValue = enableSingleValue === SingleValueType.Maximum;
   const enableSingleExactValue = enableSingleValue === SingleValueType.Exact;
   const rangeValue = enableSingleValue === undefined;
 
   const [col = ''] = ensureIsArray(groupby).map(getColumnLabel);
+  // these could be replaced with a property instead, to allow custom transforms
+  const transformScale = useCallback(
+    (val: number | null) => (val ? scaler(val + (logScale ? 1 : 0)) : val),
+    [logScale],
+  );
+
+  const inverseScale = useCallback(
+    (val: number | null) =>
+      val ? scaler.invert(val) - (logScale ? 1 : 0) : val,
+    [logScale],
+  );
+
   const [value, setValue] = useState<[number, number]>(
-    defaultValue ?? [min, enableSingleExactValue ? min : max],
+    (defaultValue ?? [min, enableSingleExactValue ? min : max]).map(
+      transformScale,
+    ),
   );
   const [marks, setMarks] = useState<{ [key: number]: string }>({});
   const minIndex = 0;
   const maxIndex = 1;
-  const minMax = value ?? [min, max];
+  const minMax = useMemo(
+    () => value ?? [min ?? 0, max].map(transformScale),
+    [max, min, value, transformScale],
+  );
+
+  const tipFormatter = (value: number) =>
+    numberFormatter(inverseScale(Number(value)));
+
+  // lower & upper are transformed
+  const getMarks = useCallback(
+    (lower: number | null, upper: number | null): { [key: number]: string } => {
+      const newMarks: { [key: number]: string } = {};
+      if (lower !== null) {
+        newMarks[lower] = numberFormatter(inverseScale(lower));
+      }
+      if (upper !== null) {
+        newMarks[upper] = numberFormatter(inverseScale(upper));
+      }
+      return newMarks;
+    },
+    [inverseScale, value],
+  );
 
+  // value is transformed
   const getBounds = useCallback(
     (
       value: [number, number],
@@ -184,41 +217,49 @@ export default function RangeFilterPlugin(props: PluginFilterRangeProps) {
       }
 
       return {
-        lower: lowerRaw > min ? lowerRaw : null,
-        upper: upperRaw < max ? upperRaw : null,
+        lower: lowerRaw > Number(transformScale(min)) ? lowerRaw : null,
+        upper: upperRaw < Number(transformScale(max)) ? upperRaw : null,
       };
     },
-    [max, min, enableSingleExactValue],
+    [max, min, transformScale, value, enableSingleExactValue],
   );
 
   const handleAfterChange = useCallback(
     (value: [number, number]): void => {
+      // value is transformed
       setValue(value);
+      // lower & upper are transformed
       const { lower, upper } = getBounds(value);
       setMarks(getMarks(lower, upper));
-
+      // removed Number
       setDataMask({
-        extraFormData: getRangeExtraFormData(col, lower, upper),
+        extraFormData: getRangeExtraFormData(
+          col,
+          inverseScale(lower),
+          inverseScale(upper),
+        ),
         filterState: {
           value: lower !== null || upper !== null ? value : null,
-          label: getLabel(lower, upper),
+          label: getLabel(inverseScale(lower), inverseScale(upper)),
         },
       });
     },
-    [col, getBounds, setDataMask],
+    [col, getBounds, setDataMask, getMarks, inverseScale],
   );
 
+  // value is transformed
   const handleChange = useCallback((value: [number, number]) => {
     setValue(value);
   }, []);
 
+  // value is transformed
   useEffect(() => {
     // when switch filter type and queriesData still not updated we need ignore this case (in FilterBar)
     if (row?.min === undefined && row?.max === undefined) {
       return;
     }
 
-    let filterStateValue = filterState.value ?? [min, max];
+    let filterStateValue = filterState.value ?? [min, max].map(transformScale);
     if (enableSingleMaxValue) {
       const filterStateMax =
         filterStateValue[maxIndex] <= minMax[maxIndex]
@@ -292,49 +333,53 @@ export default function RangeFilterPlugin(props: PluginFilterRangeProps) {
           >
             {enableSingleMaxValue && (
               <Slider
-                min={min}
-                max={max}
+                min={transformScale(min) ?? 0}
+                max={transformScale(max) ?? undefined}
                 value={minMax[maxIndex]}
                 tipFormatter={tipFormatter}
                 marks={marks}
                 onAfterChange={value => handleAfterChange([min, value])}
                 onChange={value => handleChange([min, value])}
+                step={stepSize}
               />
             )}
             {enableSingleMinValue && (
               <StyledMinSlider
                 validateStatus={filterState.validateStatus}
-                min={min}
-                max={max}
+                min={transformScale(min) ?? 0}
+                max={transformScale(max) ?? undefined}
                 value={minMax[minIndex]}
                 tipFormatter={tipFormatter}
                 marks={marks}
                 onAfterChange={value => handleAfterChange([value, max])}
                 onChange={value => handleChange([value, max])}
+                step={stepSize}
               />
             )}
             {enableSingleExactValue && (
               <Slider
-                min={min}
-                max={max}
+                min={transformScale(min) ?? 0}
+                max={transformScale(max) ?? undefined}
                 included={false}
                 value={minMax[minIndex]}
                 tipFormatter={tipFormatter}
                 marks={marks}
                 onAfterChange={value => handleAfterChange([value, value])}
                 onChange={value => handleChange([value, value])}
+                step={stepSize}
               />
             )}
             {rangeValue && (
               <Slider
                 range
-                min={min}
-                max={max}
+                min={transformScale(min) ?? 0}
+                max={transformScale(max) ?? undefined}
                 value={minMax}
                 onAfterChange={handleAfterChange}
                 onChange={handleChange}
                 tipFormatter={tipFormatter}
                 marks={marks}
+                step={stepSize}
               />
             )}
           </Wrapper>

superset-frontend/src/filters/components/Range/controlPanel.ts

@@ -69,6 +69,41 @@ const config: ControlPanelConfig = {
             },
           },
         ],
+        [
+          {
+            name: 'logScale',
+            config: {
+              type: 'CheckboxControl',
+              label: t('Logarithmic Scale'),
+              default: false,
+              renderTrigger: true,
+              description: t('Make the scale logarithmic.'),
+            },
+          },
+        ],
+        [
+          {
+            name: 'stepSize',
+            config: {
+              type: 'SelectControl',
+              label: t('Step Size'),
+              default: 1,
+              renderTrigger: true,
+              freeForm: true,
+              choices: [
+                [0.001, 0.001],
+                [0.01, 0.01],
+                [0.1, 0.1],
+                [1, 1],
+                [2, 2],
+                [10, 10],
+                [25, 25],
+                [100, 100],
+              ],
+              description: t('Set the slider step size.'),
+            },
+          },
+        ],
       ],
     },
   ],

superset-frontend/src/filters/components/Range/types.ts

@@ -25,14 +25,16 @@ import {
 import { RefObject } from 'react';
 import { PluginFilterHooks, PluginFilterStylesProps } from '../types';
 
-interface PluginFilterSelectCustomizeProps {
+interface PluginFilterRangeCustomizeProps {
   max?: number;
   min?: number;
+  stepSize: number;
+  logScale: boolean;
 }
 
 export type PluginFilterRangeQueryFormData = QueryFormData &
   PluginFilterStylesProps &
-  PluginFilterSelectCustomizeProps;
+  PluginFilterRangeCustomizeProps;
 
 export type PluginFilterRangeProps = PluginFilterStylesProps & {
   data: DataRecord[];