Improving styles

x-pack/legacy/plugins/maps/public/connected_components/layer_panel/_index.scss

@@ -1,3 +1,4 @@
 @import './layer_panel';
 @import './filter_editor/filter_editor';
-@import './join_editor/resources/join';
+@import './join_editor/resources/join';
+@import './style_settings/style_settings';

x-pack/legacy/plugins/maps/public/connected_components/layer_panel/style_settings/_style_settings.scss

@@ -0,0 +1,3 @@
+.mapStyleSettings__fixedBox {
+    width: 120px;
+}

x-pack/legacy/plugins/maps/public/connected_components/layer_panel/style_settings/style_settings.js

@@ -21,7 +21,7 @@ export function StyleSettings({ layer, updateStyleDescriptor }) {
 
   return (
     <Fragment>
-      <EuiPanel>
+      <EuiPanel className="mapStyleSettings">
         <EuiFlexGroup>
           <EuiFlexItem>
             <EuiTitle size="xs">

x-pack/legacy/plugins/maps/public/layers/styles/vector/components/color/_color_stops.scss

@@ -1,6 +1,5 @@
 .mapColorStop {
   position: relative;
-  padding-right: $euiSizeXL + $euiSizeS;
 
   & + & {
     margin-top: $euiSizeS;
@@ -17,23 +16,3 @@
   }
 }
 
-.mapColorStop__icons {
-  flex-shrink: 0;
-  display: none;
-  position: absolute;
-  right: 0;
-  top: 50%;
-  margin-right: -$euiSizeS;
-  margin-top: -$euiSizeM;
-}
-
-@keyframes mapColorStopBecomeVisible {
-
-  0% {
-    opacity: 0;
-  }
-
-  100% {
-    opacity: 1;
-  }
-}

x-pack/legacy/plugins/maps/public/layers/styles/vector/components/color/color_map_select.js

@@ -6,10 +6,11 @@
 
 import React, { Component, Fragment } from 'react';
 
-import { EuiSuperSelect, EuiSpacer } from '@elastic/eui';
+import { EuiSpacer, EuiSelect, EuiSuperSelect, EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
 import { ColorStopsOrdinal } from './color_stops_ordinal';
 import { COLOR_MAP_TYPE } from '../../../../../../common/constants';
 import { ColorStopsCategorical } from './color_stops_categorical';
+import { i18n } from '@kbn/i18n';
 
 const CUSTOM_COLOR_MAP = 'CUSTOM_COLOR_MAP';
 
@@ -27,6 +28,42 @@ export class ColorMapSelect extends Component {
     };
   }
 
+  _renderColorMapToggle() {
+    const options = [
+      {
+        value: COLOR_MAP_TYPE.ORDINAL,
+        text: i18n.translate('xpack.maps.styles.dynamicColorSelect.quantitativeLabel', {
+          defaultMessage: 'Quantitative',
+        }),
+      },
+      {
+        value: COLOR_MAP_TYPE.CATEGORICAL,
+        text: i18n.translate('xpack.maps.styles.dynamicColorSelect.qualitativeLavel', {
+          defaultMessage: 'Qualitative',
+        }),
+      },
+    ];
+
+    const selectedValue = this.props.styleProperty.isOrdinal()
+      ? COLOR_MAP_TYPE.ORDINAL
+      : COLOR_MAP_TYPE.CATEGORICAL;
+
+    return (
+      <EuiSelect
+        options={options}
+        value={selectedValue}
+        onChange={this.props.onColorMapTypeChange}
+        aria-label={i18n.translate(
+          'xpack.maps.styles.dynamicColorSelect.qualitativeOrQuantitativeAriaLabel',
+          {
+            defaultMessage: 'Select to style by gradient or color palette',
+          }
+        )}
+        compressed
+      />
+    );
+  }
+
   _onColorMapSelect = selectedValue => {
     const useCustomColorMap = selectedValue === CUSTOM_COLOR_MAP;
     this.props.onChange({
@@ -57,30 +94,24 @@ export class ColorMapSelect extends Component {
 
     if (this.props.colorMapType === COLOR_MAP_TYPE.ORDINAL) {
       return (
-        <Fragment>
-          <EuiSpacer size="s" />
-          <ColorStopsOrdinal
-            colorStops={this.state.customColorMap}
-            onChange={this._onCustomColorMapChange}
-          />
-        </Fragment>
+        <ColorStopsOrdinal
+          colorStops={this.state.customColorMap}
+          onChange={this._onCustomColorMapChange}
+        />
       );
     }
 
     return (
-      <Fragment>
-        <EuiSpacer size="s" />
-        <ColorStopsCategorical
-          colorStops={this.state.customColorMap}
-          field={this.props.styleProperty.getField()}
-          getValueSuggestions={this.props.styleProperty.getValueSuggestions}
-          onChange={this._onCustomColorMapChange}
-        />
-      </Fragment>
+      <ColorStopsCategorical
+        colorStops={this.state.customColorMap}
+        field={this.props.styleProperty.getField()}
+        getValueSuggestions={this.props.styleProperty.getValueSuggestions}
+        onChange={this._onCustomColorMapChange}
+      />
     );
   }
 
-  render() {
+  _renderColorMapSelections() {
     const colorMapOptionsWithCustom = [
       {
         value: CUSTOM_COLOR_MAP,
@@ -98,15 +129,43 @@ export class ColorMapSelect extends Component {
         : '';
     }
 
+    let toggle;
+    if (this.props.showColorMapTypeToggle) {
+      toggle = (
+        <EuiFlexItem grow={false} className="mapStyleSettings__fixedBox">
+          {this._renderColorMapToggle()}
+        </EuiFlexItem>
+      );
+    } else {
+      toggle = <Fragment />;
+    }
+
+    return (
+      <EuiFlexGroup gutterSize="xs">
+        {toggle}
+        <EuiFlexItem>
+          <EuiSuperSelect
+            compressed
+            options={colorMapOptionsWithCustom}
+            onChange={this._onColorMapSelect}
+            valueOfSelected={valueOfSelected}
+            hasDividers={true}
+          />
+        </EuiFlexItem>
+      </EuiFlexGroup>
+    );
+  }
+
+  render() {
     return (
       <Fragment>
-        <EuiSuperSelect
-          options={colorMapOptionsWithCustom}
-          onChange={this._onColorMapSelect}
-          valueOfSelected={valueOfSelected}
-          hasDividers={true}
-        />
-        {this._renderColorStopsInput()}
+        {this._renderColorMapSelections()}
+
+        <EuiSpacer size="s" />
+
+        <EuiFlexGroup>
+          <EuiFlexItem>{this._renderColorStopsInput()}</EuiFlexItem>
+        </EuiFlexGroup>
       </Fragment>
     );
   }

x-pack/legacy/plugins/maps/public/layers/styles/vector/components/color/color_stops.js

@@ -11,6 +11,18 @@ import { i18n } from '@kbn/i18n';
 import { EuiButtonIcon, EuiColorPicker, EuiFlexGroup, EuiFlexItem, EuiFormRow } from '@elastic/eui';
 
 function getColorStopRow({ index, errors, stopInput, colorInput, deleteButton, onAdd }) {
+  const colorPickerButtons = (
+    <div className="mapColorStop__icons">
+      {deleteButton}
+      <EuiButtonIcon
+        iconType="plusInCircle"
+        color="primary"
+        aria-label="Add"
+        title="Add"
+        onClick={onAdd}
+      />
+    </div>
+  );
   return (
     <EuiFormRow
       key={index}
@@ -19,22 +31,19 @@ function getColorStopRow({ index, errors, stopInput, colorInput, deleteButton, o
       error={errors}
       display="rowCompressed"
     >
-      <div>
-        <EuiFlexGroup responsive={false} alignItems="center" gutterSize="xs">
-          <EuiFlexItem>{stopInput}</EuiFlexItem>
-          <EuiFlexItem>{colorInput}</EuiFlexItem>
-        </EuiFlexGroup>
-        <div className="mapColorStop__icons">
-          {deleteButton}
-          <EuiButtonIcon
-            iconType="plusInCircle"
-            color="primary"
-            aria-label="Add"
-            title="Add"
-            onClick={onAdd}
+      <EuiFlexGroup alignItems="center" gutterSize="xs">
+        <EuiFlexItem grow={false} className="mapStyleSettings__fixedBox">
+          {stopInput}
+        </EuiFlexItem>
+        <EuiFlexItem>
+          <EuiColorPicker
+            onChange={colorInput.onColorChange}
+            color={colorInput.color}
+            compressed
+            append={colorPickerButtons}
           />
-        </div>
-      </div>
+        </EuiFlexItem>
+      </EuiFlexGroup>
     </EuiFormRow>
   );
 }
@@ -87,7 +96,10 @@ export const ColorStops = ({
             defaultMessage: 'Color must provide a valid hex value',
           })
         : undefined,
-      colorInput: <EuiColorPicker onChange={onColorChange} color={color} compressed />,
+      colorInput: {
+        onColorChange: onColorChange,
+        color: color,
+      },
     };
   }
 

x-pack/legacy/plugins/maps/public/layers/styles/vector/components/color/dynamic_color_form.js

@@ -13,6 +13,12 @@ import { CATEGORICAL_DATA_TYPES, COLOR_MAP_TYPE } from '../../../../../../common
 import { COLOR_GRADIENTS, COLOR_PALETTES } from '../../../color_utils';
 import { i18n } from '@kbn/i18n';
 
+function getDefaultColorMapType(fieldType) {
+  return CATEGORICAL_DATA_TYPES.includes(fieldType)
+    ? COLOR_MAP_TYPE.CATEGORICAL
+    : COLOR_MAP_TYPE.ORDINAL;
+}
+
 export function DynamicColorForm({
   fields,
   onDynamicStyleChange,
@@ -40,21 +46,42 @@ export function DynamicColorForm({
   };
 
   const onFieldChange = async ({ field }) => {
-    const { name, origin, type } = field;
+    const { name, origin, type: fieldType } = field;
+    const defaultColorMapType = getDefaultColorMapType(fieldType);
     onDynamicStyleChange(styleProperty.getStyleName(), {
       ...styleOptions,
       field: { name, origin },
-      type: CATEGORICAL_DATA_TYPES.includes(type)
-        ? COLOR_MAP_TYPE.CATEGORICAL
-        : COLOR_MAP_TYPE.ORDINAL,
+      type: defaultColorMapType,
+    });
+  };
+
+  const onColorMapTypeChange = async e => {
+    const colorMapType = e.target.value;
+    onDynamicStyleChange(styleProperty.getStyleName(), {
+      ...styleOptions,
+      type: colorMapType,
+    });
+  };
+
+  const getField = () => {
+    const fieldName = styleProperty.getFieldName();
+    if (!fieldName) {
+      return null;
+    }
+
+    return fields.find(field => {
+      return field.name === fieldName;
     });
   };
 
   const renderColorMapSelect = () => {
-    if (!styleOptions.field || !styleOptions.field.name) {
+    const field = getField();
+    if (!field) {
       return null;
     }
 
+    const showColorMapTypeToggle = !CATEGORICAL_DATA_TYPES.includes(field.type);
+
     if (styleProperty.isOrdinal()) {
       return (
         <ColorMapSelect
@@ -63,35 +90,41 @@ export function DynamicColorForm({
             defaultMessage: 'Custom color ramp',
           })}
           onChange={onColorMapSelect}
+          onColorMapTypeChange={onColorMapTypeChange}
           colorMapType={COLOR_MAP_TYPE.ORDINAL}
           color={styleOptions.color}
           customColorMap={styleOptions.customColorRamp}
           useCustomColorMap={_.get(styleOptions, 'useCustomColorRamp', false)}
           styleProperty={styleProperty}
+          showColorMapTypeToggle={showColorMapTypeToggle}
+        />
+      );
+    } else if (styleProperty.isCategorical()) {
+      return (
+        <ColorMapSelect
+          colorMapOptions={COLOR_PALETTES}
+          customOptionLabel={i18n.translate('xpack.maps.style.customColorPaletteLabel', {
+            defaultMessage: 'Custom color palette',
+          })}
+          onColorMapTypeChange={onColorMapTypeChange}
+          onChange={onColorMapSelect}
+          colorMapType={COLOR_MAP_TYPE.CATEGORICAL}
+          color={styleOptions.colorCategory}
+          customColorMap={styleOptions.customColorPalette}
+          useCustomColorMap={_.get(styleOptions, 'useCustomColorPalette', false)}
+          styleProperty={styleProperty}
+          showColorMapTypeToggle={showColorMapTypeToggle}
         />
       );
     }
-
-    return (
-      <ColorMapSelect
-        colorMapOptions={COLOR_PALETTES}
-        customOptionLabel={i18n.translate('xpack.maps.style.customColorPaletteLabel', {
-          defaultMessage: 'Custom color palette',
-        })}
-        onChange={onColorMapSelect}
-        colorMapType={COLOR_MAP_TYPE.CATEGORICAL}
-        color={styleOptions.colorCategory}
-        customColorMap={styleOptions.customColorPalette}
-        useCustomColorMap={_.get(styleOptions, 'useCustomColorPalette', false)}
-        styleProperty={styleProperty}
-      />
-    );
   };
 
   return (
     <Fragment>
-      <EuiFlexGroup gutterSize="none" justifyContent="flexEnd">
-        <EuiFlexItem grow={false}>{staticDynamicSelect}</EuiFlexItem>
+      <EuiFlexGroup gutterSize="xs" justifyContent="flexEnd">
+        <EuiFlexItem grow={false} className="mapStyleSettings__fixedBox">
+          {staticDynamicSelect}
+        </EuiFlexItem>
         <EuiFlexItem>
           <FieldSelect
             fields={fields}