Migrate Map visualization to React

client/app/components/ColorPicker/Input.jsx

@@ -61,6 +61,7 @@ export default function Input({ color, presetColors, presetColumns, onChange, on
       ))}
       <div className="color-picker-input">
         <TextInput
+          data-test="ColorPicker.CustomColor"
           addonBefore={<Typography.Text type="secondary">#</Typography.Text>}
           value={inputValue}
           onChange={e => handleInputChange(e.target.value)}

client/app/components/ColorPicker/index.jsx

@@ -1,6 +1,7 @@
 import { toString } from 'lodash';
 import React, { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
+import cx from 'classnames';
 import tinycolor from 'tinycolor2';
 import Popover from 'antd/lib/popover';
 import Card from 'antd/lib/card';
@@ -19,6 +20,7 @@ function validateColor(value, fallback = null) {
 
 export default function ColorPicker({
   color, placement, presetColors, presetColumns, triggerSize, interactive, children, onChange,
+  className, ...props
 }) {
   const [visible, setVisible] = useState(false);
   const [currentColor, setCurrentColor] = useState('');
@@ -67,6 +69,7 @@ export default function ColorPicker({
       overlayStyle={{ '--color-picker-selected-color': currentColor }}
       content={(
         <Card
+          data-test="ColorPicker"
           className="color-picker-panel"
           bordered={false}
           title={toString(currentColor).toUpperCase()}
@@ -90,7 +93,14 @@ export default function ColorPicker({
       visible={visible}
       onVisibleChange={setVisible}
     >
-      {children || (<Swatch className="color-picker-trigger" color={validateColor(color)} size={triggerSize} />)}
+      {children || (
+        <Swatch
+          className={cx('color-picker-trigger', className)}
+          color={validateColor(color)}
+          size={triggerSize}
+          {...props}
+        />
+      )}
     </Popover>
   );
 }
@@ -111,6 +121,7 @@ ColorPicker.propTypes = {
   interactive: PropTypes.bool,
   children: PropTypes.node,
   onChange: PropTypes.func,
+  className: PropTypes.string,
 };
 
 ColorPicker.defaultProps = {
@@ -122,6 +133,7 @@ ColorPicker.defaultProps = {
   interactive: false,
   children: null,
   onChange: () => {},
+  className: null,
 };
 
 ColorPicker.Input = ColorInput;

client/app/visualizations/map/Editor/GeneralSettings.jsx

@@ -0,0 +1,71 @@
+import { isNil, map, filter, difference } from 'lodash';
+import React, { useMemo } from 'react';
+import Select from 'antd/lib/select';
+import { EditorPropTypes } from '@/visualizations';
+
+function getColumns(column, unusedColumns) {
+  return filter(
+    [column, ...unusedColumns],
+    v => !isNil(v),
+  );
+}
+
+export default function GeneralSettings({ options, data, onOptionsChange }) {
+  const unusedColumns = useMemo(
+    () => difference(map(data.columns, c => c.name), [options.latColName, options.lonColName, options.classify]),
+    [data, options.latColName, options.lonColName, options.classify],
+  );
+
+  return (
+    <React.Fragment>
+      <div className="m-b-15">
+        <label htmlFor="map-editor-latitude-column-name">Latitude Column Name</label>
+        <Select
+          data-test="Map.Editor.LatitudeColumnName"
+          id="map-editor-latitude-column-name"
+          className="w-100"
+          value={options.latColName}
+          onChange={latColName => onOptionsChange({ latColName })}
+        >
+          {map(getColumns(options.latColName, unusedColumns), col => (
+            <Select.Option key={col} data-test={'Map.Editor.LatitudeColumnName.' + col}>{col}</Select.Option>
+          ))}
+        </Select>
+      </div>
+
+      <div className="m-b-15">
+        <label htmlFor="map-editor-longitude-column-name">Longitude Column Name</label>
+        <Select
+          data-test="Map.Editor.LongitudeColumnName"
+          id="map-editor-longitude-column-name"
+          className="w-100"
+          value={options.lonColName}
+          onChange={lonColName => onOptionsChange({ lonColName })}
+        >
+          {map(getColumns(options.lonColName, unusedColumns), col => (
+            <Select.Option key={col} data-test={'Map.Editor.LongitudeColumnName.' + col}>{col}</Select.Option>
+          ))}
+        </Select>
+      </div>
+
+      <div className="m-b-15">
+        <label className="control-label" htmlFor="map-editor-group-by">Group By</label>
+        <Select
+          data-test="Map.Editor.GroupBy"
+          id="map-editor-group-by"
+          className="w-100"
+          allowClear
+          placeholder="none"
+          value={options.classify || undefined}
+          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>
+          ))}
+        </Select>
+      </div>
+    </React.Fragment>
+  );
+}
+
+GeneralSettings.propTypes = EditorPropTypes;

client/app/visualizations/map/Editor/GroupsSettings.jsx

@@ -0,0 +1,64 @@
+import { map } from 'lodash';
+import React, { useMemo, useCallback } from 'react';
+import Table from 'antd/lib/table';
+import ColorPicker from '@/components/ColorPicker';
+import { EditorPropTypes } from '@/visualizations';
+import ColorPalette from '@/visualizations/ColorPalette';
+
+import prepareData from '../prepareData';
+
+export default function GroupsSettings({ options, data, onOptionsChange }) {
+  const groups = useMemo(() => map(
+    prepareData(data, options),
+    ({ name }) => ({ name, color: (options.groups[name] || {}).color || null }),
+  ), [data, options]);
+
+  const colors = useMemo(() => ({
+    Automatic: null,
+    ...ColorPalette,
+  }), []);
+
+  const updateGroupOption = useCallback((name, prop, value) => {
+    onOptionsChange({
+      groups: {
+        [name]: {
+          [prop]: value,
+        },
+      },
+    });
+  }, [onOptionsChange]);
+
+  const columns = [
+    {
+      title: 'Group',
+      dataIndex: 'name',
+    },
+    {
+      title: 'Color',
+      dataIndex: 'color',
+      width: '1%',
+      render: (unused, item) => (
+        <ColorPicker
+          data-test={`Map.Editor.Groups.${item.name}.Color`}
+          interactive
+          presetColors={colors}
+          placement="topRight"
+          color={item.color}
+          onChange={value => updateGroupOption(item.name, 'color', value)}
+        />
+      ),
+    },
+  ];
+
+  return (
+    <Table
+      columns={columns}
+      dataSource={groups}
+      rowKey="name"
+      showHeader={false}
+      pagination={false}
+    />
+  );
+}
+
+GroupsSettings.propTypes = EditorPropTypes;