diff --git a/client/app/components/visualizations/editor/Switch.jsx b/client/app/components/visualizations/editor/Switch.jsx
index 0949d66721..579f173f01 100644
--- a/client/app/components/visualizations/editor/Switch.jsx
+++ b/client/app/components/visualizations/editor/Switch.jsx
@@ -6,13 +6,7 @@ import Typography from "antd/lib/typography";
 import "./Switch.less";
 
 export default function Switch({ id, children, disabled, ...props }) {
-  const fallbackId = useMemo(
-    () =>
-      `visualization-editor-control-${Math.random()
-        .toString(36)
-        .substr(2, 10)}`,
-    []
-  );
+  const fallbackId = useMemo(() => `visualization-editor-control-${Math.random().toString(36).substr(2, 10)}`, []);
   id = id || fallbackId;
 
   if (children) {
diff --git a/client/app/components/visualizations/editor/withControlLabel.jsx b/client/app/components/visualizations/editor/withControlLabel.jsx
index a28f2bc255..b11dce9142 100644
--- a/client/app/components/visualizations/editor/withControlLabel.jsx
+++ b/client/app/components/visualizations/editor/withControlLabel.jsx
@@ -57,13 +57,7 @@ ControlLabel.defaultProps = {
 export default function withControlLabel(WrappedControl) {
   // eslint-disable-next-line react/prop-types
   function ControlWrapper({ className, id, layout, label, labelProps, disabled, ...props }) {
-    const fallbackId = useMemo(
-      () =>
-        `visualization-editor-control-${Math.random()
-          .toString(36)
-          .substr(2, 10)}`,
-      []
-    );
+    const fallbackId = useMemo(() => `visualization-editor-control-${Math.random().toString(36).substr(2, 10)}`, []);
     labelProps = {
       ...labelProps,
       htmlFor: id || fallbackId,
diff --git a/client/app/visualizations/chart/Editor/AxisSettings.jsx b/client/app/visualizations/chart/Editor/AxisSettings.jsx
index 6f018a8e59..f738065db8 100644
--- a/client/app/visualizations/chart/Editor/AxisSettings.jsx
+++ b/client/app/visualizations/chart/Editor/AxisSettings.jsx
@@ -15,12 +15,12 @@ export default function AxisSettings({ id, options, features, onChange }) {
     onChange(merge({}, options, newOptions));
   }
 
-  const [handleNameChange] = useDebouncedCallback(text => {
+  const [handleNameChange] = useDebouncedCallback((text) => {
     const title = isString(text) && text !== "" ? { text } : null;
     optionsChanged({ title });
   }, 200);
 
-  const [handleMinMaxChange] = useDebouncedCallback(opts => optionsChanged(opts), 200);
+  const [handleMinMaxChange] = useDebouncedCallback((opts) => optionsChanged(opts), 200);
 
   return (
     <React.Fragment>
@@ -29,7 +29,7 @@ export default function AxisSettings({ id, options, features, onChange }) {
           label="Scale"
           data-test={`Chart.${id}.Type`}
           defaultValue={options.type}
-          onChange={type => optionsChanged({ type })}>
+          onChange={(type) => optionsChanged({ type })}>
           {features.autoDetectType && (
             <Select.Option value="-" data-test={`Chart.${id}.Type.Auto`}>
               Auto Detect
@@ -55,7 +55,7 @@ export default function AxisSettings({ id, options, features, onChange }) {
           label="Name"
           data-test={`Chart.${id}.Name`}
           defaultValue={isObject(options.title) ? options.title.text : null}
-          onChange={event => handleNameChange(event.target.value)}
+          onChange={(event) => handleNameChange(event.target.value)}
         />
       </Section>
 
@@ -68,7 +68,7 @@ export default function AxisSettings({ id, options, features, onChange }) {
                 placeholder="Auto"
                 data-test={`Chart.${id}.RangeMin`}
                 defaultValue={toNumber(options.rangeMin)}
-                onChange={value => handleMinMaxChange({ rangeMin: toNumber(value) })}
+                onChange={(value) => handleMinMaxChange({ rangeMin: toNumber(value) })}
               />
             </Grid.Col>
             <Grid.Col span={12}>
@@ -77,7 +77,7 @@ export default function AxisSettings({ id, options, features, onChange }) {
                 placeholder="Auto"
                 data-test={`Chart.${id}.RangeMax`}
                 defaultValue={toNumber(options.rangeMax)}
-                onChange={value => handleMinMaxChange({ rangeMax: toNumber(value) })}
+                onChange={(value) => handleMinMaxChange({ rangeMax: toNumber(value) })}
               />
             </Grid.Col>
           </Grid.Row>
diff --git a/client/app/visualizations/chart/Editor/ColumnMappingSelect.jsx b/client/app/visualizations/chart/Editor/ColumnMappingSelect.jsx
index e470a0e3a5..87d480446e 100644
--- a/client/app/visualizations/chart/Editor/ColumnMappingSelect.jsx
+++ b/client/app/visualizations/chart/Editor/ColumnMappingSelect.jsx
@@ -13,7 +13,7 @@ const MappingTypes = {
 };
 
 export default function ColumnMappingSelect({ value, availableColumns, type, onChange }) {
-  const options = sortBy(filter(uniq(flatten([availableColumns, value])), v => isString(v) && v !== ""));
+  const options = sortBy(filter(uniq(flatten([availableColumns, value])), (v) => isString(v) && v !== ""));
   const { label, multiple } = MappingTypes[type];
 
   return (
@@ -26,8 +26,8 @@ export default function ColumnMappingSelect({ value, availableColumns, type, onC
         showSearch
         placeholder={multiple ? "Choose columns..." : "Choose column..."}
         value={value || undefined}
-        onChange={column => onChange(column || null, type)}>
-        {map(options, c => (
+        onChange={(column) => onChange(column || null, type)}>
+        {map(options, (c) => (
           <Select.Option key={c} value={c} data-test={`Chart.ColumnMapping.${type}.${c}`}>
             {c}
           </Select.Option>
diff --git a/client/app/visualizations/chart/Editor/CustomChartSettings.jsx b/client/app/visualizations/chart/Editor/CustomChartSettings.jsx
index 522c6f103e..d1cc65e4d6 100644
--- a/client/app/visualizations/chart/Editor/CustomChartSettings.jsx
+++ b/client/app/visualizations/chart/Editor/CustomChartSettings.jsx
@@ -19,7 +19,7 @@ export default function CustomChartSettings({ options, onOptionsChange }) {
           data-test="Chart.Custom.Code"
           rows="10"
           defaultValue={isNil(options.customCode) ? defaultCustomCode : options.customCode}
-          onChange={event => onOptionsChange({ customCode: event.target.value })}
+          onChange={(event) => onOptionsChange({ customCode: event.target.value })}
         />
       </Section>
 
@@ -27,7 +27,7 @@ export default function CustomChartSettings({ options, onOptionsChange }) {
         <Switch
           data-test="Chart.Custom.EnableConsoleLogs"
           defaultChecked={options.enableConsoleLogs}
-          onChange={enableConsoleLogs => onOptionsChange({ enableConsoleLogs })}>
+          onChange={(enableConsoleLogs) => onOptionsChange({ enableConsoleLogs })}>
           Show errors in the console
         </Switch>
       </Section>
@@ -37,7 +37,7 @@ export default function CustomChartSettings({ options, onOptionsChange }) {
           id="chart-editor-auto-update-custom-chart"
           data-test="Chart.Custom.AutoUpdate"
           defaultChecked={options.autoRedraw}
-          onChange={autoRedraw => onOptionsChange({ autoRedraw })}>
+          onChange={(autoRedraw) => onOptionsChange({ autoRedraw })}>
           Auto update graph
         </Switch>
       </Section>
diff --git a/client/app/visualizations/chart/Editor/DataLabelsSettings.jsx b/client/app/visualizations/chart/Editor/DataLabelsSettings.jsx
index 86c996457f..9d9dbb8091 100644
--- a/client/app/visualizations/chart/Editor/DataLabelsSettings.jsx
+++ b/client/app/visualizations/chart/Editor/DataLabelsSettings.jsx
@@ -19,7 +19,7 @@ export default function DataLabelsSettings({ options, onOptionsChange }) {
           <Checkbox
             data-test="Chart.DataLabels.ShowDataLabels"
             defaultChecked={options.showDataLabels}
-            onChange={event => onOptionsChange({ showDataLabels: event.target.checked })}>
+            onChange={(event) => onOptionsChange({ showDataLabels: event.target.checked })}>
             Show Data Labels
           </Checkbox>
         </Section>
@@ -35,7 +35,7 @@ export default function DataLabelsSettings({ options, onOptionsChange }) {
           }
           data-test="Chart.DataLabels.NumberFormat"
           defaultValue={options.numberFormat}
-          onChange={e => debouncedOnOptionsChange({ numberFormat: e.target.value })}
+          onChange={(e) => debouncedOnOptionsChange({ numberFormat: e.target.value })}
         />
       </Section>
 
@@ -49,7 +49,7 @@ export default function DataLabelsSettings({ options, onOptionsChange }) {
           }
           data-test="Chart.DataLabels.PercentFormat"
           defaultValue={options.percentFormat}
-          onChange={e => debouncedOnOptionsChange({ percentFormat: e.target.value })}
+          onChange={(e) => debouncedOnOptionsChange({ percentFormat: e.target.value })}
         />
       </Section>
 
@@ -63,7 +63,7 @@ export default function DataLabelsSettings({ options, onOptionsChange }) {
           }
           data-test="Chart.DataLabels.DateTimeFormat"
           defaultValue={options.dateTimeFormat}
-          onChange={e => debouncedOnOptionsChange({ dateTimeFormat: e.target.value })}
+          onChange={(e) => debouncedOnOptionsChange({ dateTimeFormat: e.target.value })}
         />
       </Section>
 
@@ -104,7 +104,7 @@ export default function DataLabelsSettings({ options, onOptionsChange }) {
           data-test="Chart.DataLabels.TextFormat"
           placeholder="(auto)"
           defaultValue={options.textFormat}
-          onChange={e => debouncedOnOptionsChange({ textFormat: e.target.value })}
+          onChange={(e) => debouncedOnOptionsChange({ textFormat: e.target.value })}
         />
       </Section>
     </React.Fragment>
diff --git a/client/app/visualizations/chart/Editor/DefaultColorsSettings.jsx b/client/app/visualizations/chart/Editor/DefaultColorsSettings.jsx
index dde5b6005a..13bcce8807 100644
--- a/client/app/visualizations/chart/Editor/DefaultColorsSettings.jsx
+++ b/client/app/visualizations/chart/Editor/DefaultColorsSettings.jsx
@@ -53,7 +53,7 @@ export default function DefaultColorsSettings({ options, data, onOptionsChange }
           presetColors={colors}
           placement="topRight"
           color={item.color}
-          onChange={value => updateSeriesOption(item.key, "color", value)}
+          onChange={(value) => updateSeriesOption(item.key, "color", value)}
           addonAfter={<ColorPicker.Label color={item.color} presetColors={colors} />}
         />
       ),
diff --git a/client/app/visualizations/chart/Editor/GeneralSettings.jsx b/client/app/visualizations/chart/Editor/GeneralSettings.jsx
index 1fef28572c..0ffacf83f9 100644
--- a/client/app/visualizations/chart/Editor/GeneralSettings.jsx
+++ b/client/app/visualizations/chart/Editor/GeneralSettings.jsx
@@ -32,11 +32,11 @@ function getAvailableColumnMappingTypes(options) {
 function getMappedColumns(options, availableColumns) {
   const mappedColumns = {};
   const availableTypes = getAvailableColumnMappingTypes(options);
-  each(availableTypes, type => {
+  each(availableTypes, (type) => {
     mappedColumns[type] = ColumnMappingSelect.MappingTypes[type].multiple ? [] : null;
   });
 
-  availableColumns = map(availableColumns, c => c.name);
+  availableColumns = map(availableColumns, (c) => c.name);
   const usedColumns = [];
 
   each(options.columnMapping, (type, column) => {
@@ -61,7 +61,7 @@ function mappedColumnsToColumnMappings(mappedColumns) {
   const result = {};
   each(mappedColumns, (value, type) => {
     if (isArray(value)) {
-      each(value, v => {
+      each(value, (v) => {
         result[v] = type;
       });
     } else {
@@ -83,7 +83,7 @@ export default function GeneralSettings({ options, data, onOptionsChange }) {
     onOptionsChange({
       globalSeriesType,
       showDataLabels: globalSeriesType === "pie",
-      seriesOptions: mapValues(options.seriesOptions, series => ({
+      seriesOptions: mapValues(options.seriesOptions, (series) => ({
         ...series,
         type: globalSeriesType,
       })),
@@ -126,7 +126,7 @@ export default function GeneralSettings({ options, data, onOptionsChange }) {
               label="Bubble Size Coefficient"
               data-test="Chart.BubbleCoefficient"
               defaultValue={options.coefficient}
-              onChange={value => onOptionsChange({ coefficient: toNumber(value) })}
+              onChange={(value) => onOptionsChange({ coefficient: toNumber(value) })}
             />
           </Section>
 
@@ -135,7 +135,7 @@ export default function GeneralSettings({ options, data, onOptionsChange }) {
               label="Bubble Size Proportional To"
               data-test="Chart.SizeMode"
               defaultValue={options.sizemode}
-              onChange={mode => onOptionsChange({ sizemode: mode })}>
+              onChange={(mode) => onOptionsChange({ sizemode: mode })}>
               <Select.Option value="area" data-test="Chart.SizeMode.Area">
                 Area
               </Select.Option>
@@ -153,7 +153,7 @@ export default function GeneralSettings({ options, data, onOptionsChange }) {
             label="Direction"
             data-test="Chart.PieDirection"
             defaultValue={options.direction.type}
-            onChange={type => onOptionsChange({ direction: { type } })}>
+            onChange={(type) => onOptionsChange({ direction: { type } })}>
             <Select.Option value="counterclockwise" data-test="Chart.PieDirection.Counterclockwise">
               Counterclockwise
             </Select.Option>
@@ -169,7 +169,7 @@ export default function GeneralSettings({ options, data, onOptionsChange }) {
           <Checkbox
             data-test="Chart.ShowLegend"
             defaultChecked={options.legend.enabled}
-            onChange={event => onOptionsChange({ legend: { enabled: event.target.checked } })}>
+            onChange={(event) => onOptionsChange({ legend: { enabled: event.target.checked } })}>
             Show Legend
           </Checkbox>
         </Section>
@@ -180,7 +180,7 @@ export default function GeneralSettings({ options, data, onOptionsChange }) {
           <Checkbox
             data-test="Chart.ShowPoints"
             defaultChecked={options.showpoints}
-            onChange={event => onOptionsChange({ showpoints: event.target.checked })}>
+            onChange={(event) => onOptionsChange({ showpoints: event.target.checked })}>
             Show All Points
           </Checkbox>
         </Section>
@@ -193,7 +193,7 @@ export default function GeneralSettings({ options, data, onOptionsChange }) {
             data-test="Chart.Stacking"
             defaultValue={options.series.stacking}
             disabled={!includes(["line", "area", "column"], options.globalSeriesType)}
-            onChange={stacking => onOptionsChange({ series: { stacking } })}>
+            onChange={(stacking) => onOptionsChange({ series: { stacking } })}>
             <Select.Option value={null} data-test="Chart.Stacking.Disabled">
               Disabled
             </Select.Option>
@@ -209,7 +209,7 @@ export default function GeneralSettings({ options, data, onOptionsChange }) {
           <Checkbox
             data-test="Chart.NormalizeValues"
             defaultChecked={options.series.percentValues}
-            onChange={event => onOptionsChange({ series: { percentValues: event.target.checked } })}>
+            onChange={(event) => onOptionsChange({ series: { percentValues: event.target.checked } })}>
             Normalize values to percentage
           </Checkbox>
         </Section>
@@ -221,7 +221,7 @@ export default function GeneralSettings({ options, data, onOptionsChange }) {
             label="Missing and NULL values"
             data-test="Chart.MissingValues"
             defaultValue={options.missingValuesAsZero ? 1 : 0}
-            onChange={value => onOptionsChange({ missingValuesAsZero: !!value })}>
+            onChange={(value) => onOptionsChange({ missingValuesAsZero: !!value })}>
             <Select.Option value={0} data-test="Chart.MissingValues.Keep">
               Do not display in chart
             </Select.Option>
diff --git a/client/app/visualizations/chart/Editor/HeatmapColorsSettings.jsx b/client/app/visualizations/chart/Editor/HeatmapColorsSettings.jsx
index 1e60ba10bc..5a25e0f7c1 100644
--- a/client/app/visualizations/chart/Editor/HeatmapColorsSettings.jsx
+++ b/client/app/visualizations/chart/Editor/HeatmapColorsSettings.jsx
@@ -35,8 +35,8 @@ export default function HeatmapColorsSettings({ options, onOptionsChange }) {
           placeholder="Choose Color Scheme..."
           allowClear
           value={options.colorScheme || undefined}
-          onChange={value => onOptionsChange({ colorScheme: value || null })}>
-          {map(ColorSchemes, scheme => (
+          onChange={(value) => onOptionsChange({ colorScheme: value || null })}>
+          {map(ColorSchemes, (scheme) => (
             <Select.Option key={scheme} value={scheme} data-test={`Chart.Colors.Heatmap.ColorScheme.${scheme}`}>
               {scheme}
             </Select.Option>
@@ -55,7 +55,7 @@ export default function HeatmapColorsSettings({ options, onOptionsChange }) {
               placement="topLeft"
               presetColors={ColorPalette}
               color={options.heatMinColor}
-              onChange={heatMinColor => onOptionsChange({ heatMinColor })}
+              onChange={(heatMinColor) => onOptionsChange({ heatMinColor })}
               addonAfter={<ColorPicker.Label color={options.heatMinColor} presetColors={ColorPalette} />}
             />
           </Section>
@@ -68,7 +68,7 @@ export default function HeatmapColorsSettings({ options, onOptionsChange }) {
               placement="topRight"
               presetColors={ColorPalette}
               color={options.heatMaxColor}
-              onChange={heatMaxColor => onOptionsChange({ heatMaxColor })}
+              onChange={(heatMaxColor) => onOptionsChange({ heatMaxColor })}
               addonAfter={<ColorPicker.Label color={options.heatMaxColor} presetColors={ColorPalette} />}
             />
           </Section>
diff --git a/client/app/visualizations/chart/Editor/PieColorsSettings.jsx b/client/app/visualizations/chart/Editor/PieColorsSettings.jsx
index 7a1594ee46..e060c8c61a 100644
--- a/client/app/visualizations/chart/Editor/PieColorsSettings.jsx
+++ b/client/app/visualizations/chart/Editor/PieColorsSettings.jsx
@@ -8,8 +8,8 @@ import getChartData from "../getChartData";
 
 function getUniqueValues(chartData) {
   const uniqueValuesNames = new Set();
-  each(chartData, series => {
-    each(series.data, row => {
+  each(chartData, (series) => {
+    each(series.data, (row) => {
       uniqueValuesNames.add(row.x);
     });
   });
@@ -27,7 +27,7 @@ export default function PieColorsSettings({ options, data, onOptionsChange }) {
 
   const series = useMemo(
     () =>
-      map(getUniqueValues(getChartData(data.rows, options)), value => ({
+      map(getUniqueValues(getChartData(data.rows, options)), (value) => ({
         key: value,
         color: (options.valuesOptions[value] || {}).color || null,
       })),
@@ -63,7 +63,7 @@ export default function PieColorsSettings({ options, data, onOptionsChange }) {
           presetColors={colors}
           placement="topRight"
           color={item.color}
-          onChange={value => updateValuesOption(item.key, "color", value)}
+          onChange={(value) => updateValuesOption(item.key, "color", value)}
           addonAfter={<ColorPicker.Label color={item.color} presetColors={colors} />}
         />
       ),
diff --git a/client/app/visualizations/chart/Editor/SeriesSettings.jsx b/client/app/visualizations/chart/Editor/SeriesSettings.jsx
index 50e0e1d4fe..ba81ade892 100644
--- a/client/app/visualizations/chart/Editor/SeriesSettings.jsx
+++ b/client/app/visualizations/chart/Editor/SeriesSettings.jsx
@@ -10,7 +10,7 @@ import { EditorPropTypes } from "@/visualizations/prop-types";
 import ChartTypeSelect from "./ChartTypeSelect";
 import getChartData from "../getChartData";
 
-const SortableBodyRow = sortableElement(props => <tr {...props} />);
+const SortableBodyRow = sortableElement((props) => <tr {...props} />);
 
 function getTableColumns(options, updateSeriesOption, debouncedUpdateSeriesOption) {
   const result = [
@@ -32,7 +32,7 @@ function getTableColumns(options, updateSeriesOption, debouncedUpdateSeriesOptio
           data-test={`Chart.Series.${item.key}.Label`}
           placeholder={item.key}
           defaultValue={item.name}
-          onChange={event => debouncedUpdateSeriesOption(item.key, "name", event.target.value)}
+          onChange={(event) => debouncedUpdateSeriesOption(item.key, "name", event.target.value)}
         />
       ),
     },
@@ -46,7 +46,7 @@ function getTableColumns(options, updateSeriesOption, debouncedUpdateSeriesOptio
         <Radio.Group
           className="series-settings-y-axis"
           value={item.yAxis === 1 ? 1 : 0}
-          onChange={event => updateSeriesOption(item.key, "yAxis", event.target.value)}>
+          onChange={(event) => updateSeriesOption(item.key, "yAxis", event.target.value)}>
           <Radio value={0} data-test={`Chart.Series.${item.key}.UseLeftAxis`}>
             left
           </Radio>
@@ -64,7 +64,7 @@ function getTableColumns(options, updateSeriesOption, debouncedUpdateSeriesOptio
           data-test={`Chart.Series.${item.key}.Type`}
           dropdownMatchSelectWidth={false}
           value={item.type}
-          onChange={value => updateSeriesOption(item.key, "type", value)}
+          onChange={(value) => updateSeriesOption(item.key, "type", value)}
         />
       ),
     });
@@ -120,7 +120,7 @@ export default function SeriesSettings({ options, data, onOptionsChange }) {
       lockToContainerEdges
       useDragHandle
       helperClass="chart-editor-series-dragged-item"
-      helperContainer={container => container.querySelector("tbody")}
+      helperContainer={(container) => container.querySelector("tbody")}
       onSortEnd={handleSortEnd}
       containerProps={{
         className: "chart-editor-series",
@@ -133,7 +133,7 @@ export default function SeriesSettings({ options, data, onOptionsChange }) {
             row: SortableBodyRow,
           },
         }}
-        onRow={item => ({ index: item.zIndex })}
+        onRow={(item) => ({ index: item.zIndex })}
         pagination={false}
       />
     </SortableContainer>
diff --git a/client/app/visualizations/choropleth/Editor/BoundsSettings.jsx b/client/app/visualizations/choropleth/Editor/BoundsSettings.jsx
index 760103dc3b..433c41b1ef 100644
--- a/client/app/visualizations/choropleth/Editor/BoundsSettings.jsx
+++ b/client/app/visualizations/choropleth/Editor/BoundsSettings.jsx
@@ -39,10 +39,10 @@ export default function BoundsSettings({ options, onOptionsChange }) {
         <ControlLabel label="North-East latitude and longitude">
           <Grid.Row gutter={15}>
             <Grid.Col span={12}>
-              <InputNumber value={bounds[1][0]} onChange={value => updateBounds(1, 0, value)} />
+              <InputNumber value={bounds[1][0]} onChange={(value) => updateBounds(1, 0, value)} />
             </Grid.Col>
             <Grid.Col span={12}>
-              <InputNumber value={bounds[1][1]} onChange={value => updateBounds(1, 1, value)} />
+              <InputNumber value={bounds[1][1]} onChange={(value) => updateBounds(1, 1, value)} />
             </Grid.Col>
           </Grid.Row>
         </ControlLabel>
@@ -52,10 +52,10 @@ export default function BoundsSettings({ options, onOptionsChange }) {
         <ControlLabel label="South-West latitude and longitude">
           <Grid.Row gutter={15}>
             <Grid.Col span={12}>
-              <InputNumber value={bounds[0][0]} onChange={value => updateBounds(0, 0, value)} />
+              <InputNumber value={bounds[0][0]} onChange={(value) => updateBounds(0, 0, value)} />
             </Grid.Col>
             <Grid.Col span={12}>
-              <InputNumber value={bounds[0][1]} onChange={value => updateBounds(0, 1, value)} />
+              <InputNumber value={bounds[0][1]} onChange={(value) => updateBounds(0, 1, value)} />
             </Grid.Col>
           </Grid.Row>
         </ControlLabel>
diff --git a/client/app/visualizations/choropleth/Editor/ColorsSettings.jsx b/client/app/visualizations/choropleth/Editor/ColorsSettings.jsx
index 62310e8d1d..62d21be0e6 100644
--- a/client/app/visualizations/choropleth/Editor/ColorsSettings.jsx
+++ b/client/app/visualizations/choropleth/Editor/ColorsSettings.jsx
@@ -15,7 +15,7 @@ export default function ColorsSettings({ options, onOptionsChange }) {
           label="Clustering mode"
           data-test="Choropleth.Editor.ClusteringMode"
           defaultValue={options.clusteringMode}
-          onChange={clusteringMode => onOptionsChange({ clusteringMode })}>
+          onChange={(clusteringMode) => onOptionsChange({ clusteringMode })}>
           <Select.Option value="q" data-test="Choropleth.Editor.ClusteringMode.q">
             quantile
           </Select.Option>
@@ -36,7 +36,7 @@ export default function ColorsSettings({ options, onOptionsChange }) {
           min={3}
           max={11}
           defaultValue={options.steps}
-          onChange={steps => onOptionsChangeDebounced({ steps })}
+          onChange={(steps) => onOptionsChangeDebounced({ steps })}
         />
       </Section>
 
@@ -49,7 +49,7 @@ export default function ColorsSettings({ options, onOptionsChange }) {
           placement="topRight"
           color={options.colors.min}
           triggerProps={{ "data-test": "Choropleth.Editor.Colors.Min" }}
-          onChange={min => onOptionsChange({ colors: { min } })}
+          onChange={(min) => onOptionsChange({ colors: { min } })}
           addonAfter={<ColorPicker.Label color={options.colors.min} presetColors={ColorPalette} />}
         />
       </Section>
@@ -63,7 +63,7 @@ export default function ColorsSettings({ options, onOptionsChange }) {
           placement="topRight"
           color={options.colors.max}
           triggerProps={{ "data-test": "Choropleth.Editor.Colors.Max" }}
-          onChange={max => onOptionsChange({ colors: { max } })}
+          onChange={(max) => onOptionsChange({ colors: { max } })}
           addonAfter={<ColorPicker.Label color={options.colors.max} presetColors={ColorPalette} />}
         />
       </Section>
@@ -77,7 +77,7 @@ export default function ColorsSettings({ options, onOptionsChange }) {
           placement="topRight"
           color={options.colors.noValue}
           triggerProps={{ "data-test": "Choropleth.Editor.Colors.NoValue" }}
-          onChange={noValue => onOptionsChange({ colors: { noValue } })}
+          onChange={(noValue) => onOptionsChange({ colors: { noValue } })}
           addonAfter={<ColorPicker.Label color={options.colors.noValue} presetColors={ColorPalette} />}
         />
       </Section>
@@ -91,7 +91,7 @@ export default function ColorsSettings({ options, onOptionsChange }) {
           placement="topRight"
           color={options.colors.background}
           triggerProps={{ "data-test": "Choropleth.Editor.Colors.Background" }}
-          onChange={background => onOptionsChange({ colors: { background } })}
+          onChange={(background) => onOptionsChange({ colors: { background } })}
           addonAfter={<ColorPicker.Label color={options.colors.background} presetColors={ColorPalette} />}
         />
       </Section>
@@ -105,7 +105,7 @@ export default function ColorsSettings({ options, onOptionsChange }) {
           placement="topRight"
           color={options.colors.borders}
           triggerProps={{ "data-test": "Choropleth.Editor.Colors.Borders" }}
-          onChange={borders => onOptionsChange({ colors: { borders } })}
+          onChange={(borders) => onOptionsChange({ colors: { borders } })}
           addonAfter={<ColorPicker.Label color={options.colors.borders} presetColors={ColorPalette} />}
         />
       </Section>
diff --git a/client/app/visualizations/choropleth/Editor/FormatSettings.jsx b/client/app/visualizations/choropleth/Editor/FormatSettings.jsx
index be28a7e4ee..561815943d 100644
--- a/client/app/visualizations/choropleth/Editor/FormatSettings.jsx
+++ b/client/app/visualizations/choropleth/Editor/FormatSettings.jsx
@@ -81,7 +81,7 @@ export default function GeneralSettings({ options, onOptionsChange }) {
               }
               data-test="Choropleth.Editor.ValueFormat"
               defaultValue={options.valueFormat}
-              onChange={event => onOptionsChangeDebounced({ valueFormat: event.target.value })}
+              onChange={(event) => onOptionsChangeDebounced({ valueFormat: event.target.value })}
             />
           </Grid.Col>
           <Grid.Col span={12}>
@@ -89,7 +89,7 @@ export default function GeneralSettings({ options, onOptionsChange }) {
               label="Value placeholder"
               data-test="Choropleth.Editor.ValuePlaceholder"
               defaultValue={options.noValuePlaceholder}
-              onChange={event => onOptionsChangeDebounced({ noValuePlaceholder: event.target.value })}
+              onChange={(event) => onOptionsChangeDebounced({ noValuePlaceholder: event.target.value })}
             />
           </Grid.Col>
         </Grid.Row>
@@ -99,7 +99,7 @@ export default function GeneralSettings({ options, onOptionsChange }) {
         <Checkbox
           data-test="Choropleth.Editor.LegendVisibility"
           checked={options.legend.visible}
-          onChange={event => onOptionsChange({ legend: { visible: event.target.checked } })}>
+          onChange={(event) => onOptionsChange({ legend: { visible: event.target.checked } })}>
           Show legend
         </Checkbox>
       </Section>
@@ -112,7 +112,7 @@ export default function GeneralSettings({ options, onOptionsChange }) {
               data-test="Choropleth.Editor.LegendPosition"
               disabled={!options.legend.visible}
               defaultValue={options.legend.position}
-              onChange={position => onOptionsChange({ legend: { position } })}>
+              onChange={(position) => onOptionsChange({ legend: { position } })}>
               <Select.Option value="top-left" data-test="Choropleth.Editor.LegendPosition.TopLeft">
                 top / left
               </Select.Option>
@@ -133,7 +133,7 @@ export default function GeneralSettings({ options, onOptionsChange }) {
               label="Legend text alignment"
               disabled={!options.legend.visible}
               defaultValue={options.legend.alignText}
-              onChange={event => onOptionsChange({ legend: { alignText: event.target.value } })}
+              onChange={(event) => onOptionsChange({ legend: { alignText: event.target.value } })}
             />
           </Grid.Col>
         </Grid.Row>
@@ -143,7 +143,7 @@ export default function GeneralSettings({ options, onOptionsChange }) {
         <Checkbox
           data-test="Choropleth.Editor.TooltipEnabled"
           checked={options.tooltip.enabled}
-          onChange={event => onOptionsChange({ tooltip: { enabled: event.target.checked } })}>
+          onChange={(event) => onOptionsChange({ tooltip: { enabled: event.target.checked } })}>
           Show tooltip
         </Checkbox>
       </Section>
@@ -154,7 +154,7 @@ export default function GeneralSettings({ options, onOptionsChange }) {
           data-test="Choropleth.Editor.TooltipTemplate"
           disabled={!options.tooltip.enabled}
           defaultValue={options.tooltip.template}
-          onChange={event => onOptionsChangeDebounced({ tooltip: { template: event.target.value } })}
+          onChange={(event) => onOptionsChangeDebounced({ tooltip: { template: event.target.value } })}
         />
       </Section>
 
@@ -162,7 +162,7 @@ export default function GeneralSettings({ options, onOptionsChange }) {
         <Checkbox
           data-test="Choropleth.Editor.PopupEnabled"
           checked={options.popup.enabled}
-          onChange={event => onOptionsChange({ popup: { enabled: event.target.checked } })}>
+          onChange={(event) => onOptionsChange({ popup: { enabled: event.target.checked } })}>
           Show popup
         </Checkbox>
       </Section>
@@ -174,7 +174,7 @@ export default function GeneralSettings({ options, onOptionsChange }) {
           disabled={!options.popup.enabled}
           rows={4}
           defaultValue={options.popup.template}
-          onChange={event => onOptionsChangeDebounced({ popup: { template: event.target.value } })}
+          onChange={(event) => onOptionsChangeDebounced({ popup: { template: event.target.value } })}
         />
       </Section>
     </div>
diff --git a/client/app/visualizations/choropleth/Editor/GeneralSettings.jsx b/client/app/visualizations/choropleth/Editor/GeneralSettings.jsx
index aeaeb619fa..4e6e21ab5c 100644
--- a/client/app/visualizations/choropleth/Editor/GeneralSettings.jsx
+++ b/client/app/visualizations/choropleth/Editor/GeneralSettings.jsx
@@ -27,7 +27,7 @@ export default function GeneralSettings({ options, data, onOptionsChange }) {
     }
   }, [options.mapType]);
 
-  const handleChangeAndInferType = newOptions => {
+  const handleChangeAndInferType = (newOptions) => {
     newOptions.countryCodeType =
       inferCountryCodeType(
         newOptions.mapType || options.mapType,
@@ -44,7 +44,7 @@ export default function GeneralSettings({ options, data, onOptionsChange }) {
           label="Map type"
           data-test="Choropleth.Editor.MapType"
           defaultValue={options.mapType}
-          onChange={mapType => handleChangeAndInferType({ mapType })}>
+          onChange={(mapType) => handleChangeAndInferType({ mapType })}>
           <Select.Option key="countries" data-test="Choropleth.Editor.MapType.Countries">
             Countries
           </Select.Option>
@@ -59,7 +59,7 @@ export default function GeneralSettings({ options, data, onOptionsChange }) {
           label="Key column"
           data-test="Choropleth.Editor.KeyColumn"
           defaultValue={options.countryCodeColumn}
-          onChange={countryCodeColumn => handleChangeAndInferType({ countryCodeColumn })}>
+          onChange={(countryCodeColumn) => handleChangeAndInferType({ countryCodeColumn })}>
           {map(data.columns, ({ name }) => (
             <Select.Option key={name} data-test={`Choropleth.Editor.KeyColumn.${name}`}>
               {name}
@@ -73,7 +73,7 @@ export default function GeneralSettings({ options, data, onOptionsChange }) {
           label="Key type"
           data-test="Choropleth.Editor.KeyType"
           value={options.countryCodeType}
-          onChange={countryCodeType => onOptionsChange({ countryCodeType })}>
+          onChange={(countryCodeType) => onOptionsChange({ countryCodeType })}>
           {map(countryCodeTypes, (name, type) => (
             <Select.Option key={type} data-test={`Choropleth.Editor.KeyType.${type}`}>
               {name}
@@ -87,7 +87,7 @@ export default function GeneralSettings({ options, data, onOptionsChange }) {
           label="Value column"
           data-test="Choropleth.Editor.ValueColumn"
           defaultValue={options.valueColumn}
-          onChange={valueColumn => onOptionsChange({ valueColumn })}>
+          onChange={(valueColumn) => onOptionsChange({ valueColumn })}>
           {map(data.columns, ({ name }) => (
             <Select.Option key={name} data-test={`Choropleth.Editor.ValueColumn.${name}`}>
               {name}
diff --git a/client/app/visualizations/cohort/Editor/ColorsSettings.jsx b/client/app/visualizations/cohort/Editor/ColorsSettings.jsx
index 1c48a144ef..542d5f462f 100644
--- a/client/app/visualizations/cohort/Editor/ColorsSettings.jsx
+++ b/client/app/visualizations/cohort/Editor/ColorsSettings.jsx
@@ -28,7 +28,7 @@ export default function ColorsSettings({ options, onOptionsChange }) {
           presetColors={ColorPalette}
           interactive
           color={options.colors.min}
-          onChange={min => onOptionsChange({ colors: { min } })}
+          onChange={(min) => onOptionsChange({ colors: { min } })}
           addonAfter={<ColorPicker.Label color={options.colors.min} presetColors={ColorPalette} />}
         />
       </Section>
@@ -39,7 +39,7 @@ export default function ColorsSettings({ options, onOptionsChange }) {
           presetColors={ColorPalette}
           interactive
           color={options.colors.max}
-          onChange={max => onOptionsChange({ colors: { max } })}
+          onChange={(max) => onOptionsChange({ colors: { max } })}
           addonAfter={<ColorPicker.Label color={options.colors.max} presetColors={ColorPalette} />}
         />
       </Section>
@@ -50,7 +50,7 @@ export default function ColorsSettings({ options, onOptionsChange }) {
           min={minSteps}
           max={maxSteps}
           value={options.colors.steps}
-          onChange={value => onOptionsChange({ colors: { steps: validateSteps(value) } })}
+          onChange={(value) => onOptionsChange({ colors: { steps: validateSteps(value) } })}
         />
       </Section>
     </React.Fragment>
diff --git a/client/app/visualizations/cohort/Editor/ColumnsSettings.jsx b/client/app/visualizations/cohort/Editor/ColumnsSettings.jsx
index 74766bb58c..b5c71b18e5 100644
--- a/client/app/visualizations/cohort/Editor/ColumnsSettings.jsx
+++ b/client/app/visualizations/cohort/Editor/ColumnsSettings.jsx
@@ -12,7 +12,7 @@ export default function ColumnsSettings({ options, data, onOptionsChange }) {
           label="Date (Bucket)"
           data-test="Cohort.DateColumn"
           value={options.dateColumn}
-          onChange={dateColumn => onOptionsChange({ dateColumn })}>
+          onChange={(dateColumn) => onOptionsChange({ dateColumn })}>
           {map(data.columns, ({ name }) => (
             <Select.Option key={name} data-test={"Cohort.DateColumn." + name}>
               {name}
@@ -27,7 +27,7 @@ export default function ColumnsSettings({ options, data, onOptionsChange }) {
           label="Stage"
           data-test="Cohort.StageColumn"
           value={options.stageColumn}
-          onChange={stageColumn => onOptionsChange({ stageColumn })}>
+          onChange={(stageColumn) => onOptionsChange({ stageColumn })}>
           {map(data.columns, ({ name }) => (
             <Select.Option key={name} data-test={"Cohort.StageColumn." + name}>
               {name}
@@ -42,7 +42,7 @@ export default function ColumnsSettings({ options, data, onOptionsChange }) {
           label="Bucket Population Size"
           data-test="Cohort.TotalColumn"
           value={options.totalColumn}
-          onChange={totalColumn => onOptionsChange({ totalColumn })}>
+          onChange={(totalColumn) => onOptionsChange({ totalColumn })}>
           {map(data.columns, ({ name }) => (
             <Select.Option key={name} data-test={"Cohort.TotalColumn." + name}>
               {name}
@@ -57,7 +57,7 @@ export default function ColumnsSettings({ options, data, onOptionsChange }) {
           label="Stage Value"
           data-test="Cohort.ValueColumn"
           value={options.valueColumn}
-          onChange={valueColumn => onOptionsChange({ valueColumn })}>
+          onChange={(valueColumn) => onOptionsChange({ valueColumn })}>
           {map(data.columns, ({ name }) => (
             <Select.Option key={name} data-test={"Cohort.ValueColumn." + name}>
               {name}
diff --git a/client/app/visualizations/cohort/Editor/OptionsSettings.jsx b/client/app/visualizations/cohort/Editor/OptionsSettings.jsx
index 7d5b0adf40..67106daf4c 100644
--- a/client/app/visualizations/cohort/Editor/OptionsSettings.jsx
+++ b/client/app/visualizations/cohort/Editor/OptionsSettings.jsx
@@ -23,7 +23,7 @@ export default function OptionsSettings({ options, onOptionsChange }) {
           label="Time Interval"
           data-test="Cohort.TimeInterval"
           value={options.timeInterval}
-          onChange={timeInterval => onOptionsChange({ timeInterval })}>
+          onChange={(timeInterval) => onOptionsChange({ timeInterval })}>
           {map(CohortTimeIntervals, (name, value) => (
             <Select.Option key={value} data-test={"Cohort.TimeInterval." + value}>
               {name}
@@ -38,7 +38,7 @@ export default function OptionsSettings({ options, onOptionsChange }) {
           label="Mode"
           data-test="Cohort.Mode"
           value={options.mode}
-          onChange={mode => onOptionsChange({ mode })}>
+          onChange={(mode) => onOptionsChange({ mode })}>
           {map(CohortModes, (name, value) => (
             <Select.Option key={value} data-test={"Cohort.Mode." + value}>
               {name}
diff --git a/client/app/visualizations/counter/Editor/FormatSettings.jsx b/client/app/visualizations/counter/Editor/FormatSettings.jsx
index 74c84b357a..6c9039c488 100644
--- a/client/app/visualizations/counter/Editor/FormatSettings.jsx
+++ b/client/app/visualizations/counter/Editor/FormatSettings.jsx
@@ -15,7 +15,7 @@ export default function FormatSettings({ options, data, onOptionsChange }) {
           data-test="Counter.Formatting.DecimalPlace"
           defaultValue={options.stringDecimal}
           disabled={!inputsEnabled}
-          onChange={stringDecimal => onOptionsChange({ stringDecimal })}
+          onChange={(stringDecimal) => onOptionsChange({ stringDecimal })}
         />
       </Section>
 
@@ -26,7 +26,7 @@ export default function FormatSettings({ options, data, onOptionsChange }) {
           data-test="Counter.Formatting.DecimalCharacter"
           defaultValue={options.stringDecChar}
           disabled={!inputsEnabled}
-          onChange={e => onOptionsChange({ stringDecChar: e.target.value })}
+          onChange={(e) => onOptionsChange({ stringDecChar: e.target.value })}
         />
       </Section>
 
@@ -37,7 +37,7 @@ export default function FormatSettings({ options, data, onOptionsChange }) {
           data-test="Counter.Formatting.ThousandsSeparator"
           defaultValue={options.stringThouSep}
           disabled={!inputsEnabled}
-          onChange={e => onOptionsChange({ stringThouSep: e.target.value })}
+          onChange={(e) => onOptionsChange({ stringThouSep: e.target.value })}
         />
       </Section>
 
@@ -48,7 +48,7 @@ export default function FormatSettings({ options, data, onOptionsChange }) {
           data-test="Counter.Formatting.StringPrefix"
           defaultValue={options.stringPrefix}
           disabled={!inputsEnabled}
-          onChange={e => onOptionsChange({ stringPrefix: e.target.value })}
+          onChange={(e) => onOptionsChange({ stringPrefix: e.target.value })}
         />
       </Section>
 
@@ -59,7 +59,7 @@ export default function FormatSettings({ options, data, onOptionsChange }) {
           data-test="Counter.Formatting.StringSuffix"
           defaultValue={options.stringSuffix}
           disabled={!inputsEnabled}
-          onChange={e => onOptionsChange({ stringSuffix: e.target.value })}
+          onChange={(e) => onOptionsChange({ stringSuffix: e.target.value })}
         />
       </Section>
 
@@ -67,7 +67,7 @@ export default function FormatSettings({ options, data, onOptionsChange }) {
         <Switch
           data-test="Counter.Formatting.FormatTargetValue"
           defaultChecked={options.formatTargetValue}
-          onChange={formatTargetValue => onOptionsChange({ formatTargetValue })}>
+          onChange={(formatTargetValue) => onOptionsChange({ formatTargetValue })}>
           Format Target Value
         </Switch>
       </Section>
diff --git a/client/app/visualizations/counter/Editor/GeneralSettings.jsx b/client/app/visualizations/counter/Editor/GeneralSettings.jsx
index 86b70da8e3..6c6efdee2c 100644
--- a/client/app/visualizations/counter/Editor/GeneralSettings.jsx
+++ b/client/app/visualizations/counter/Editor/GeneralSettings.jsx
@@ -13,7 +13,7 @@ export default function GeneralSettings({ options, data, visualizationName, onOp
           data-test="Counter.General.Label"
           defaultValue={options.counterLabel}
           placeholder={visualizationName}
-          onChange={e => onOptionsChange({ counterLabel: e.target.value })}
+          onChange={(e) => onOptionsChange({ counterLabel: e.target.value })}
         />
       </Section>
 
@@ -24,8 +24,8 @@ export default function GeneralSettings({ options, data, visualizationName, onOp
           data-test="Counter.General.ValueColumn"
           defaultValue={options.counterColName}
           disabled={options.countRow}
-          onChange={counterColName => onOptionsChange({ counterColName })}>
-          {map(data.columns, col => (
+          onChange={(counterColName) => onOptionsChange({ counterColName })}>
+          {map(data.columns, (col) => (
             <Select.Option key={col.name} data-test={"Counter.General.ValueColumn." + col.name}>
               {col.name}
             </Select.Option>
@@ -40,7 +40,7 @@ export default function GeneralSettings({ options, data, visualizationName, onOp
           data-test="Counter.General.ValueRowNumber"
           defaultValue={options.rowNumber}
           disabled={options.countRow}
-          onChange={rowNumber => onOptionsChange({ rowNumber })}
+          onChange={(rowNumber) => onOptionsChange({ rowNumber })}
         />
       </Section>
 
@@ -50,9 +50,9 @@ export default function GeneralSettings({ options, data, visualizationName, onOp
           label="Target Value Column Name"
           data-test="Counter.General.TargetValueColumn"
           defaultValue={options.targetColName}
-          onChange={targetColName => onOptionsChange({ targetColName })}>
+          onChange={(targetColName) => onOptionsChange({ targetColName })}>
           <Select.Option value="">No target value</Select.Option>
-          {map(data.columns, col => (
+          {map(data.columns, (col) => (
             <Select.Option key={col.name} data-test={"Counter.General.TargetValueColumn." + col.name}>
               {col.name}
             </Select.Option>
@@ -66,7 +66,7 @@ export default function GeneralSettings({ options, data, visualizationName, onOp
           label="Target Value Row Number"
           data-test="Counter.General.TargetValueRowNumber"
           defaultValue={options.targetRowNumber}
-          onChange={targetRowNumber => onOptionsChange({ targetRowNumber })}
+          onChange={(targetRowNumber) => onOptionsChange({ targetRowNumber })}
         />
       </Section>
 
@@ -74,7 +74,7 @@ export default function GeneralSettings({ options, data, visualizationName, onOp
         <Switch
           data-test="Counter.General.CountRows"
           defaultChecked={options.countRow}
-          onChange={countRow => onOptionsChange({ countRow })}>
+          onChange={(countRow) => onOptionsChange({ countRow })}>
           Count Rows
         </Switch>
       </Section>
diff --git a/client/app/visualizations/funnel/Editor/AppearanceSettings.jsx b/client/app/visualizations/funnel/Editor/AppearanceSettings.jsx
index 239f54c306..fa9b73c37d 100644
--- a/client/app/visualizations/funnel/Editor/AppearanceSettings.jsx
+++ b/client/app/visualizations/funnel/Editor/AppearanceSettings.jsx
@@ -19,7 +19,7 @@ export default function AppearanceSettings({ options, onOptionsChange }) {
           }
           data-test="Funnel.NumberFormat"
           defaultValue={options.numberFormat}
-          onChange={event => onOptionsChangeDebounced({ numberFormat: event.target.value })}
+          onChange={(event) => onOptionsChangeDebounced({ numberFormat: event.target.value })}
         />
       </Section>
 
@@ -34,7 +34,7 @@ export default function AppearanceSettings({ options, onOptionsChange }) {
           }
           data-test="Funnel.PercentFormat"
           defaultValue={options.percentFormat}
-          onChange={event => onOptionsChangeDebounced({ percentFormat: event.target.value })}
+          onChange={(event) => onOptionsChangeDebounced({ percentFormat: event.target.value })}
         />
       </Section>
 
@@ -45,7 +45,7 @@ export default function AppearanceSettings({ options, onOptionsChange }) {
           data-test="Funnel.ItemsLimit"
           min={2}
           defaultValue={options.itemsLimit}
-          onChange={itemsLimit => onOptionsChangeDebounced({ itemsLimit })}
+          onChange={(itemsLimit) => onOptionsChangeDebounced({ itemsLimit })}
         />
       </Section>
 
@@ -56,7 +56,7 @@ export default function AppearanceSettings({ options, onOptionsChange }) {
           data-test="Funnel.PercentRangeMin"
           min={0}
           defaultValue={options.percentValuesRange.min}
-          onChange={min => onOptionsChangeDebounced({ percentValuesRange: { min } })}
+          onChange={(min) => onOptionsChangeDebounced({ percentValuesRange: { min } })}
         />
       </Section>
 
@@ -67,7 +67,7 @@ export default function AppearanceSettings({ options, onOptionsChange }) {
           data-test="Funnel.PercentRangeMax"
           min={0}
           defaultValue={options.percentValuesRange.max}
-          onChange={max => onOptionsChangeDebounced({ percentValuesRange: { max } })}
+          onChange={(max) => onOptionsChangeDebounced({ percentValuesRange: { max } })}
         />
       </Section>
     </React.Fragment>
diff --git a/client/app/visualizations/funnel/Editor/GeneralSettings.jsx b/client/app/visualizations/funnel/Editor/GeneralSettings.jsx
index dad4cd1ff8..8b74fea666 100644
--- a/client/app/visualizations/funnel/Editor/GeneralSettings.jsx
+++ b/client/app/visualizations/funnel/Editor/GeneralSettings.jsx
@@ -5,7 +5,7 @@ import { Section, Select, Input, Checkbox } from "@/components/visualizations/ed
 import { EditorPropTypes } from "@/visualizations/prop-types";
 
 export default function GeneralSettings({ options, data, onOptionsChange }) {
-  const columnNames = useMemo(() => map(data.columns, c => c.name), [data]);
+  const columnNames = useMemo(() => map(data.columns, (c) => c.name), [data]);
 
   const [onOptionsChangeDebounced] = useDebouncedCallback(onOptionsChange, 200);
 
@@ -18,8 +18,8 @@ export default function GeneralSettings({ options, data, onOptionsChange }) {
           data-test="Funnel.StepColumn"
           placeholder="Choose column..."
           defaultValue={options.stepCol.colName || undefined}
-          onChange={colName => onOptionsChange({ stepCol: { colName: colName || null } })}>
-          {map(columnNames, col => (
+          onChange={(colName) => onOptionsChange({ stepCol: { colName: colName || null } })}>
+          {map(columnNames, (col) => (
             <Select.Option key={col} data-test={`Funnel.StepColumn.${col}`}>
               {col}
             </Select.Option>
@@ -33,7 +33,7 @@ export default function GeneralSettings({ options, data, onOptionsChange }) {
           label="Step Column Title"
           data-test="Funnel.StepColumnTitle"
           defaultValue={options.stepCol.displayAs}
-          onChange={event => onOptionsChangeDebounced({ stepCol: { displayAs: event.target.value } })}
+          onChange={(event) => onOptionsChangeDebounced({ stepCol: { displayAs: event.target.value } })}
         />
       </Section>
 
@@ -44,8 +44,8 @@ export default function GeneralSettings({ options, data, onOptionsChange }) {
           data-test="Funnel.ValueColumn"
           placeholder="Choose column..."
           defaultValue={options.valueCol.colName || undefined}
-          onChange={colName => onOptionsChange({ valueCol: { colName: colName || null } })}>
-          {map(columnNames, col => (
+          onChange={(colName) => onOptionsChange({ valueCol: { colName: colName || null } })}>
+          {map(columnNames, (col) => (
             <Select.Option key={col} data-test={`Funnel.ValueColumn.${col}`}>
               {col}
             </Select.Option>
@@ -59,7 +59,7 @@ export default function GeneralSettings({ options, data, onOptionsChange }) {
           label="Value Column Title"
           data-test="Funnel.ValueColumnTitle"
           defaultValue={options.valueCol.displayAs}
-          onChange={event => onOptionsChangeDebounced({ valueCol: { displayAs: event.target.value } })}
+          onChange={(event) => onOptionsChangeDebounced({ valueCol: { displayAs: event.target.value } })}
         />
       </Section>
 
@@ -67,7 +67,7 @@ export default function GeneralSettings({ options, data, onOptionsChange }) {
         <Checkbox
           data-test="Funnel.CustomSort"
           checked={!options.autoSort}
-          onChange={event => onOptionsChange({ autoSort: !event.target.checked })}>
+          onChange={(event) => onOptionsChange({ autoSort: !event.target.checked })}>
           Custom Sorting
         </Checkbox>
       </Section>
@@ -82,8 +82,8 @@ export default function GeneralSettings({ options, data, onOptionsChange }) {
               allowClear
               placeholder="Choose column..."
               defaultValue={options.sortKeyCol.colName || undefined}
-              onChange={colName => onOptionsChange({ sortKeyCol: { colName: colName || null } })}>
-              {map(columnNames, col => (
+              onChange={(colName) => onOptionsChange({ sortKeyCol: { colName: colName || null } })}>
+              {map(columnNames, (col) => (
                 <Select.Option key={col} data-test={`Funnel.SortColumn.${col}`}>
                   {col}
                 </Select.Option>
@@ -98,7 +98,7 @@ export default function GeneralSettings({ options, data, onOptionsChange }) {
               data-test="Funnel.SortDirection"
               disabled={!options.sortKeyCol.colName}
               defaultValue={options.sortKeyCol.reverse ? "desc" : "asc"}
-              onChange={order => onOptionsChange({ sortKeyCol: { reverse: order === "desc" } })}>
+              onChange={(order) => onOptionsChange({ sortKeyCol: { reverse: order === "desc" } })}>
               <Select.Option value="asc" data-test="Funnel.SortDirection.Ascending">
                 ascending
               </Select.Option>
diff --git a/client/app/visualizations/map/Editor/FormatSettings.jsx b/client/app/visualizations/map/Editor/FormatSettings.jsx
index 393566f6af..fdfb613959 100644
--- a/client/app/visualizations/map/Editor/FormatSettings.jsx
+++ b/client/app/visualizations/map/Editor/FormatSettings.jsx
@@ -26,7 +26,7 @@ export default function FormatSettings({ options, onOptionsChange }) {
         <Checkbox
           data-test="Map.Editor.TooltipEnabled"
           checked={options.tooltip.enabled}
-          onChange={event => onOptionsChange({ tooltip: { enabled: event.target.checked } })}>
+          onChange={(event) => onOptionsChange({ tooltip: { enabled: event.target.checked } })}>
           Show tooltip
         </Checkbox>
       </Section>
@@ -38,7 +38,7 @@ export default function FormatSettings({ options, onOptionsChange }) {
           disabled={!options.tooltip.enabled}
           placeholder="Default template"
           defaultValue={options.tooltip.template}
-          onChange={event => onOptionsChangeDebounced({ tooltip: { template: event.target.value } })}
+          onChange={(event) => onOptionsChangeDebounced({ tooltip: { template: event.target.value } })}
         />
       </Section>
 
@@ -46,7 +46,7 @@ export default function FormatSettings({ options, onOptionsChange }) {
         <Checkbox
           data-test="Map.Editor.PopupEnabled"
           checked={options.popup.enabled}
-          onChange={event => onOptionsChange({ popup: { enabled: event.target.checked } })}>
+          onChange={(event) => onOptionsChange({ popup: { enabled: event.target.checked } })}>
           Show popup
         </Checkbox>
       </Section>
@@ -59,7 +59,7 @@ export default function FormatSettings({ options, onOptionsChange }) {
           rows={4}
           placeholder="Default template"
           defaultValue={options.popup.template}
-          onChange={event => onOptionsChangeDebounced({ popup: { template: event.target.value } })}
+          onChange={(event) => onOptionsChangeDebounced({ popup: { template: event.target.value } })}
         />
       </Section>
     </div>
diff --git a/client/app/visualizations/map/Editor/GeneralSettings.jsx b/client/app/visualizations/map/Editor/GeneralSettings.jsx
index f63cb3e629..b3d7d6014d 100644
--- a/client/app/visualizations/map/Editor/GeneralSettings.jsx
+++ b/client/app/visualizations/map/Editor/GeneralSettings.jsx
@@ -4,14 +4,14 @@ import { Section, Select } from "@/components/visualizations/editor";
 import { EditorPropTypes } from "@/visualizations/prop-types";
 
 function getColumns(column, unusedColumns) {
-  return filter([column, ...unusedColumns], v => !isNil(v));
+  return filter([column, ...unusedColumns], (v) => !isNil(v));
 }
 
 export default function GeneralSettings({ options, data, onOptionsChange }) {
   const unusedColumns = useMemo(
     () =>
       difference(
-        map(data.columns, c => c.name),
+        map(data.columns, (c) => c.name),
         [options.latColName, options.lonColName, options.classify]
       ),
     [data, options.latColName, options.lonColName, options.classify]
@@ -24,8 +24,8 @@ export default function GeneralSettings({ options, data, onOptionsChange }) {
           label="Latitude Column Name"
           data-test="Map.Editor.LatitudeColumnName"
           value={options.latColName}
-          onChange={latColName => onOptionsChange({ latColName })}>
-          {map(getColumns(options.latColName, unusedColumns), col => (
+          onChange={(latColName) => onOptionsChange({ latColName })}>
+          {map(getColumns(options.latColName, unusedColumns), (col) => (
             <Select.Option key={col} data-test={"Map.Editor.LatitudeColumnName." + col}>
               {col}
             </Select.Option>
@@ -38,8 +38,8 @@ export default function GeneralSettings({ options, data, onOptionsChange }) {
           label="Longitude Column Name"
           data-test="Map.Editor.LongitudeColumnName"
           value={options.lonColName}
-          onChange={lonColName => onOptionsChange({ lonColName })}>
-          {map(getColumns(options.lonColName, unusedColumns), col => (
+          onChange={(lonColName) => onOptionsChange({ lonColName })}>
+          {map(getColumns(options.lonColName, unusedColumns), (col) => (
             <Select.Option key={col} data-test={"Map.Editor.LongitudeColumnName." + col}>
               {col}
             </Select.Option>
@@ -54,8 +54,8 @@ export default function GeneralSettings({ options, data, onOptionsChange }) {
           allowClear
           placeholder="none"
           value={options.classify || undefined}
-          onChange={column => onOptionsChange({ classify: column || null })}>
-          {map(getColumns(options.classify, unusedColumns), col => (
+          onChange={(column) => onOptionsChange({ classify: column || null })}>
+          {map(getColumns(options.classify, unusedColumns), (col) => (
             <Select.Option key={col} data-test={"Map.Editor.GroupBy." + col}>
               {col}
             </Select.Option>
diff --git a/client/app/visualizations/map/Editor/GroupsSettings.jsx b/client/app/visualizations/map/Editor/GroupsSettings.jsx
index ecaa505b42..9e446921d3 100644
--- a/client/app/visualizations/map/Editor/GroupsSettings.jsx
+++ b/client/app/visualizations/map/Editor/GroupsSettings.jsx
@@ -50,7 +50,7 @@ export default function GroupsSettings({ options, data, onOptionsChange }) {
           placement="topRight"
           color={item.color}
           triggerProps={{ "data-test": `Map.Editor.Groups.${item.name}.Color` }}
-          onChange={value => updateGroupOption(item.name, "color", value)}
+          onChange={(value) => updateGroupOption(item.name, "color", value)}
           addonAfter={<ColorPicker.Label color={item.color} presetColors={colors} />}
         />
       ),
diff --git a/client/app/visualizations/map/Editor/StyleSettings.jsx b/client/app/visualizations/map/Editor/StyleSettings.jsx
index 208f3edb8f..d85aaa96a2 100644
--- a/client/app/visualizations/map/Editor/StyleSettings.jsx
+++ b/client/app/visualizations/map/Editor/StyleSettings.jsx
@@ -90,7 +90,7 @@ export default function StyleSettings({ options, onOptionsChange }) {
           label="Map Tiles"
           data-test="Map.Editor.Tiles"
           value={options.mapTileUrl}
-          onChange={mapTileUrl => onOptionsChange({ mapTileUrl })}>
+          onChange={(mapTileUrl) => onOptionsChange({ mapTileUrl })}>
           {map(mapTiles, ({ name, url }) => (
             <Select.Option key={url} data-test={"Map.Editor.Tiles." + name}>
               {name}
@@ -105,7 +105,7 @@ export default function StyleSettings({ options, onOptionsChange }) {
         <Checkbox
           data-test="Map.Editor.ClusterMarkers"
           defaultChecked={options.clusterMarkers}
-          onChange={event => onOptionsChange({ clusterMarkers: event.target.checked })}>
+          onChange={(event) => onOptionsChange({ clusterMarkers: event.target.checked })}>
           Cluster Markers
         </Checkbox>
       </Section>
@@ -115,7 +115,7 @@ export default function StyleSettings({ options, onOptionsChange }) {
           data-test="Map.Editor.CustomizeMarkers"
           disabled={!isCustomMarkersStyleAllowed}
           defaultChecked={options.customizeMarkers}
-          onChange={event => onOptionsChange({ customizeMarkers: event.target.checked })}>
+          onChange={(event) => onOptionsChange({ customizeMarkers: event.target.checked })}>
           Override default style
         </Checkbox>
         {!isCustomMarkersStyleAllowed && (
@@ -135,7 +135,7 @@ export default function StyleSettings({ options, onOptionsChange }) {
               label="Shape"
               data-test="Map.Editor.MarkerShape"
               value={options.iconShape}
-              onChange={iconShape => onOptionsChange({ iconShape })}>
+              onChange={(iconShape) => onOptionsChange({ iconShape })}>
               <Select.Option key="marker" data-test="Map.Editor.MarkerShape.marker">
                 Marker + Icon
               </Select.Option>
@@ -180,7 +180,7 @@ export default function StyleSettings({ options, onOptionsChange }) {
                 }
                 data-test="Map.Editor.MarkerIcon"
                 defaultValue={options.iconFont}
-                onChange={event => debouncedOnOptionsChange({ iconFont: event.target.value })}
+                onChange={(event) => debouncedOnOptionsChange({ iconFont: event.target.value })}
               />
             </Section>
           )}
@@ -195,7 +195,7 @@ export default function StyleSettings({ options, onOptionsChange }) {
                 placement="topRight"
                 color={options.foregroundColor}
                 triggerProps={{ "data-test": "Map.Editor.MarkerIconColor" }}
-                onChange={foregroundColor => onOptionsChange({ foregroundColor })}
+                onChange={(foregroundColor) => onOptionsChange({ foregroundColor })}
                 addonAfter={<ColorPicker.Label color={options.foregroundColor} presetColors={CustomColorPalette} />}
               />
             </Section>
@@ -211,7 +211,7 @@ export default function StyleSettings({ options, onOptionsChange }) {
                 placement="topRight"
                 color={options.backgroundColor}
                 triggerProps={{ "data-test": "Map.Editor.MarkerBackgroundColor" }}
-                onChange={backgroundColor => onOptionsChange({ backgroundColor })}
+                onChange={(backgroundColor) => onOptionsChange({ backgroundColor })}
                 addonAfter={<ColorPicker.Label color={options.backgroundColor} presetColors={CustomColorPalette} />}
               />
             </Section>
@@ -227,7 +227,7 @@ export default function StyleSettings({ options, onOptionsChange }) {
                 placement="topRight"
                 color={options.borderColor}
                 triggerProps={{ "data-test": "Map.Editor.MarkerBorderColor" }}
-                onChange={borderColor => onOptionsChange({ borderColor })}
+                onChange={(borderColor) => onOptionsChange({ borderColor })}
                 addonAfter={<ColorPicker.Label color={options.borderColor} presetColors={CustomColorPalette} />}
               />
             </Section>
diff --git a/client/app/visualizations/table/Editor/ColumnEditor.jsx b/client/app/visualizations/table/Editor/ColumnEditor.jsx
index 8d736d431a..b8eef9960a 100644
--- a/client/app/visualizations/table/Editor/ColumnEditor.jsx
+++ b/client/app/visualizations/table/Editor/ColumnEditor.jsx
@@ -24,14 +24,14 @@ export default function ColumnEditor({ column, onChange }) {
             <Input
               data-test={`Table.Column.${column.name}.Title`}
               defaultValue={column.title}
-              onChange={event => handleChangeDebounced({ title: event.target.value })}
+              onChange={(event) => handleChangeDebounced({ title: event.target.value })}
             />
           </Grid.Col>
           <Grid.Col span={8}>
             <TextAlignmentSelect
               data-test={`Table.Column.${column.name}.TextAlignment`}
               defaultValue={column.alignContent}
-              onChange={event => handleChange({ alignContent: event.target.value })}
+              onChange={(event) => handleChange({ alignContent: event.target.value })}
             />
           </Grid.Col>
         </Grid.Row>
@@ -41,7 +41,7 @@ export default function ColumnEditor({ column, onChange }) {
         <Checkbox
           data-test={`Table.Column.${column.name}.UseForSearch`}
           defaultChecked={column.allowSearch}
-          onChange={event => handleChange({ allowSearch: event.target.checked })}>
+          onChange={(event) => handleChange({ allowSearch: event.target.checked })}>
           Use for search
         </Checkbox>
       </Section>
@@ -50,7 +50,7 @@ export default function ColumnEditor({ column, onChange }) {
         <Input
           label="Description"
           defaultValue={column.description}
-          onChange={event => handleChangeDebounced({ description: event.target.value })}
+          onChange={(event) => handleChangeDebounced({ description: event.target.value })}
         />
       </Section>
 
@@ -59,7 +59,7 @@ export default function ColumnEditor({ column, onChange }) {
           label="Display as:"
           data-test={`Table.Column.${column.name}.DisplayAs`}
           defaultValue={column.displayAs}
-          onChange={displayAs => handleChange({ displayAs })}>
+          onChange={(displayAs) => handleChange({ displayAs })}>
           {map(ColumnTypes, ({ friendlyName }, key) => (
             <Select.Option key={key} data-test={`Table.Column.${column.name}.DisplayAs.${key}`}>
               {friendlyName}
diff --git a/client/app/visualizations/table/Editor/ColumnsSettings.jsx b/client/app/visualizations/table/Editor/ColumnsSettings.jsx
index 1c25259068..2fda35df15 100644
--- a/client/app/visualizations/table/Editor/ColumnsSettings.jsx
+++ b/client/app/visualizations/table/Editor/ColumnsSettings.jsx
@@ -19,7 +19,7 @@ export default function ColumnsSettings({ options, onOptionsChange }) {
     if (event) {
       event.stopPropagation();
     }
-    const columns = map(options.columns, c => (c.name === newColumn.name ? newColumn : c));
+    const columns = map(options.columns, (c) => (c.name === newColumn.name ? newColumn : c));
     onOptionsChange({ columns });
   }
 
@@ -35,7 +35,7 @@ export default function ColumnsSettings({ options, onOptionsChange }) {
       lockAxis="y"
       useDragHandle
       helperClass="table-editor-columns-dragged-item"
-      helperContainer={container => container.firstChild}
+      helperContainer={(container) => container.firstChild}
       onSortEnd={handleColumnsReorder}
       containerProps={{
         className: "table-visualization-editor-columns",
@@ -63,7 +63,7 @@ export default function ColumnsSettings({ options, onOptionsChange }) {
                 <Icon
                   data-test={`Table.Column.${column.name}.Visibility`}
                   type={column.visible ? "eye" : "eye-invisible"}
-                  onClick={event => handleColumnChange({ ...column, visible: !column.visible }, event)}
+                  onClick={(event) => handleColumnChange({ ...column, visible: !column.visible }, event)}
                 />
               </Tooltip>
             }>
diff --git a/client/app/visualizations/table/Editor/GridSettings.jsx b/client/app/visualizations/table/Editor/GridSettings.jsx
index 4b26c24d1f..a13b7a9a61 100644
--- a/client/app/visualizations/table/Editor/GridSettings.jsx
+++ b/client/app/visualizations/table/Editor/GridSettings.jsx
@@ -12,8 +12,8 @@ export default function GridSettings({ options, onOptionsChange }) {
         label="Items per page"
         data-test="Table.ItemsPerPage"
         defaultValue={options.itemsPerPage}
-        onChange={itemsPerPage => onOptionsChange({ itemsPerPage })}>
-        {map(ALLOWED_ITEM_PER_PAGE, value => (
+        onChange={(itemsPerPage) => onOptionsChange({ itemsPerPage })}>
+        {map(ALLOWED_ITEM_PER_PAGE, (value) => (
           <Select.Option key={`ipp${value}`} value={value} data-test={`Table.ItemsPerPage.${value}`}>
             {value}
           </Select.Option>
diff --git a/client/app/visualizations/table/columns/image.jsx b/client/app/visualizations/table/columns/image.jsx
index db5e34aab9..4aa5d41637 100644
--- a/client/app/visualizations/table/columns/image.jsx
+++ b/client/app/visualizations/table/columns/image.jsx
@@ -15,7 +15,7 @@ function Editor({ column, onChange }) {
           label="URL template"
           data-test="Table.ColumnEditor.Image.UrlTemplate"
           defaultValue={column.imageUrlTemplate}
-          onChange={event => onChangeDebounced({ imageUrlTemplate: event.target.value })}
+          onChange={(event) => onChangeDebounced({ imageUrlTemplate: event.target.value })}
         />
       </Section>
 
@@ -35,14 +35,14 @@ function Editor({ column, onChange }) {
               data-test="Table.ColumnEditor.Image.Width"
               placeholder="Width"
               defaultValue={column.imageWidth}
-              onChange={event => onChangeDebounced({ imageWidth: event.target.value })}
+              onChange={(event) => onChangeDebounced({ imageWidth: event.target.value })}
             />
             <span className="image-dimension-selector-spacer">&times;</span>
             <Input
               data-test="Table.ColumnEditor.Image.Height"
               placeholder="Height"
               defaultValue={column.imageHeight}
-              onChange={event => onChangeDebounced({ imageHeight: event.target.value })}
+              onChange={(event) => onChangeDebounced({ imageHeight: event.target.value })}
             />
           </div>
         </ControlLabel>
@@ -53,7 +53,7 @@ function Editor({ column, onChange }) {
           label="Title template"
           data-test="Table.ColumnEditor.Image.TitleTemplate"
           defaultValue={column.imageTitleTemplate}
-          onChange={event => onChangeDebounced({ imageTitleTemplate: event.target.value })}
+          onChange={(event) => onChangeDebounced({ imageTitleTemplate: event.target.value })}
         />
       </Section>
 
diff --git a/client/app/visualizations/word-cloud/Editor.jsx b/client/app/visualizations/word-cloud/Editor.jsx
index d199b05c9a..37442c5106 100644
--- a/client/app/visualizations/word-cloud/Editor.jsx
+++ b/client/app/visualizations/word-cloud/Editor.jsx
@@ -5,7 +5,7 @@ import { Section, Select, InputNumber, ControlLabel } from "@/components/visuali
 import { EditorPropTypes } from "@/visualizations/prop-types";
 
 export default function Editor({ options, data, onOptionsChange }) {
-  const optionsChanged = newOptions => {
+  const optionsChanged = (newOptions) => {
     onOptionsChange(merge({}, options, newOptions));
   };
 
@@ -16,7 +16,7 @@ export default function Editor({ options, data, onOptionsChange }) {
           label="Words Column"
           data-test="WordCloud.WordsColumn"
           value={options.column}
-          onChange={column => optionsChanged({ column })}>
+          onChange={(column) => optionsChanged({ column })}>
           {map(data.columns, ({ name }) => (
             <Select.Option key={name} data-test={"WordCloud.WordsColumn." + name}>
               {name}
@@ -29,7 +29,7 @@ export default function Editor({ options, data, onOptionsChange }) {
           label="Frequencies Column"
           data-test="WordCloud.FrequenciesColumn"
           value={options.frequenciesColumn}
-          onChange={frequenciesColumn => optionsChanged({ frequenciesColumn })}>
+          onChange={(frequenciesColumn) => optionsChanged({ frequenciesColumn })}>
           <Select.Option key="none" value="">
             <i>(count word frequencies automatically)</i>
           </Select.Option>
@@ -49,7 +49,7 @@ export default function Editor({ options, data, onOptionsChange }) {
                 placeholder="Min"
                 min={0}
                 value={options.wordLengthLimit.min}
-                onChange={value => optionsChanged({ wordLengthLimit: { min: value > 0 ? value : null } })}
+                onChange={(value) => optionsChanged({ wordLengthLimit: { min: value > 0 ? value : null } })}
               />
             </Grid.Col>
             <Grid.Col span={12}>
@@ -58,7 +58,7 @@ export default function Editor({ options, data, onOptionsChange }) {
                 placeholder="Max"
                 min={0}
                 value={options.wordLengthLimit.max}
-                onChange={value => optionsChanged({ wordLengthLimit: { max: value > 0 ? value : null } })}
+                onChange={(value) => optionsChanged({ wordLengthLimit: { max: value > 0 ? value : null } })}
               />
             </Grid.Col>
           </Grid.Row>
@@ -73,7 +73,7 @@ export default function Editor({ options, data, onOptionsChange }) {
                 placeholder="Min"
                 min={0}
                 value={options.wordCountLimit.min}
-                onChange={value => optionsChanged({ wordCountLimit: { min: value > 0 ? value : null } })}
+                onChange={(value) => optionsChanged({ wordCountLimit: { min: value > 0 ? value : null } })}
               />
             </Grid.Col>
             <Grid.Col span={12}>
@@ -82,7 +82,7 @@ export default function Editor({ options, data, onOptionsChange }) {
                 placeholder="Max"
                 min={0}
                 value={options.wordCountLimit.max}
-                onChange={value => optionsChanged({ wordCountLimit: { max: value > 0 ? value : null } })}
+                onChange={(value) => optionsChanged({ wordCountLimit: { max: value > 0 ? value : null } })}
               />
             </Grid.Col>
           </Grid.Row>