Merge pull request #832 from plotly/colorscalepicker-adj

allow disabling colorscale dropdown

Author: VeraZab

package.json

@@ -19,7 +19,7 @@
     "prop-types": "^15.5.10",
     "raf": "^3.4.0",
     "react-color": "^2.13.8",
-    "react-colorscales": "0.7.2",
+    "react-colorscales": "0.7.3",
     "react-day-picker": "^7.2.4",
     "react-dropzone": "^5.0.1",
     "react-plotly.js": "^2.2.0",

src/components/fields/ColorscalePicker.js

@@ -6,8 +6,8 @@ import {connectToContainer} from 'lib';
 import {EDITOR_ACTIONS} from 'lib/constants';
 
 export class UnconnectedColorscalePicker extends Component {
-  constructor(props) {
-    super(props);
+  constructor() {
+    super();
     this.onUpdate = this.onUpdate.bind(this);
   }
 
@@ -43,13 +43,15 @@ export class UnconnectedColorscalePicker extends Component {
           selected={colorscale}
           onColorscaleChange={this.onUpdate}
           initialCategory={this.props.initialCategory}
+          disableCategorySwitch={this.props.disableCategorySwitch}
         />
       </Field>
     );
   }
 }
 
 UnconnectedColorscalePicker.propTypes = {
+  labelWidth: PropTypes.number,
   fullValue: PropTypes.any,
   fullContainer: PropTypes.object,
   updatePlot: PropTypes.func,

src/components/fields/ColorwayPicker.js

@@ -5,17 +5,14 @@ import React, {Component} from 'react';
 import {connectToContainer} from 'lib';
 
 class UnconnectedColorwayPicker extends Component {
-  constructor(props) {
-    super(props);
-  }
-
   render() {
     return (
       <Field {...this.props}>
         <ColorscalePickerWidget
           selected={this.props.fullValue}
           onColorscaleChange={this.props.updatePlot}
           initialCategory="categorical"
+          disableCategorySwitch={this.props.disableCategorySwitch}
         />
       </Field>
     );

src/components/fields/Field.js

@@ -28,6 +28,7 @@ class Field extends Component {
       units,
       extraComponent,
       fieldContainerClassName,
+      labelWidth,
     } = this.props;
 
     const {localize: _} = this.context;
@@ -55,7 +56,10 @@ class Field extends Component {
     return (
       <div className={containerClassName}>
         {label ? (
-          <div className={bem('field', 'title')}>
+          <div
+            className={bem('field', 'title')}
+            style={labelWidth ? {minWidth: labelWidth + 'px'} : {}}
+          >
             {this.context.showFieldTooltips ? (
               <div
                 className={bem('field', 'title-text')}
@@ -93,6 +97,7 @@ class Field extends Component {
 }
 
 Field.propTypes = {
+  labelWidth: PropTypes.number,
   center: PropTypes.bool,
   label: PropTypes.any,
   units: PropTypes.string,

src/components/fields/Info.js

@@ -5,7 +5,9 @@ export default class Info extends Component {
   render() {
     return (
       <Field {...this.props}>
-        <div className="js-test-info">{this.props.children}</div>
+        <div className={`js-test-info ${this.props.className ? this.props.className : ''}`}>
+          {this.props.children}
+        </div>
       </Field>
     );
   }

src/components/widgets/ColorscalePicker.js

@@ -2,7 +2,9 @@ import ColorscalePicker, {Colorscale, COLOR_PICKER_CONSTANTS} from 'react-colors
 import Dropdown from './Dropdown';
 import Info from '../fields/Info';
 import PropTypes from 'prop-types';
-import React, {Component, Fragment} from 'react';
+import React, {Component} from 'react';
+// CAREFUL: needs to be the same value as $colorscalepicker-width in _colorscalepicker.scss
+const colorscalepickerContainerWidth = 240;
 
 class Scale extends Component {
   constructor(props) {
@@ -28,7 +30,7 @@ class Scale extends Component {
   }
 
   render() {
-    const {onColorscaleChange, selected} = this.props;
+    const {onColorscaleChange, selected, disableCategorySwitch} = this.props;
     const {selectedColorscaleType, showColorscalePicker} = this.state;
     const description = COLOR_PICKER_CONSTANTS.COLORSCALE_DESCRIPTIONS[selectedColorscaleType];
     const colorscaleOptions = COLOR_PICKER_CONSTANTS.COLORSCALE_TYPES.filter(
@@ -40,33 +42,36 @@ class Scale extends Component {
     const _ = this.context.localize;
 
     return (
-      <div className="customPickerContainer__outer">
-        <div className="customPickerContainer__inner">
+      <div className="customPickerContainer">
+        <div className="customPickerContainer__clickable">
           <Colorscale colorscale={selected} onClick={this.onClick} />
         </div>
         {showColorscalePicker ? (
-          <div className="customPickerContainer">
-            <Dropdown
-              options={colorscaleOptions}
-              value={selectedColorscaleType}
-              onChange={this.onChange}
-              clearable={false}
-              searchable={false}
-              placeholder={_('Select a Colorscale Type')}
-            />
+          <div className="customPickerContainer__expanded-content">
+            {disableCategorySwitch ? null : (
+              <Dropdown
+                options={colorscaleOptions}
+                value={selectedColorscaleType}
+                onChange={this.onChange}
+                clearable={false}
+                searchable={false}
+                placeholder={_('Select a Colorscale Type')}
+                className="customPickerContainer__category-dropdown"
+              />
+            )}
             {description ? (
-              <Fragment>
+              <div className="customPickerContainer__palettes">
                 <ColorscalePicker
                   onChange={onColorscaleChange}
                   colorscale={selected}
-                  width={215}
+                  width={colorscalepickerContainerWidth}
                   colorscaleType={this.state.selectedColorscaleType}
                   onColorscaleTypeChange={this.onColorscaleTypeChange}
                   disableSwatchControls
                   scaleLength={7}
                 />
-                <Info>{description}</Info>
-              </Fragment>
+                <Info className="customPickerContainer__info">{description}</Info>
+              </div>
             ) : null}
           </div>
         ) : null}
@@ -80,6 +85,7 @@ Scale.propTypes = {
   selected: PropTypes.array,
   label: PropTypes.string,
   initialCategory: PropTypes.string,
+  disableCategorySwitch: PropTypes.bool,
 };
 
 Scale.contextTypes = {

src/default_panels/StyleLayoutPanel.js

@@ -23,15 +23,32 @@ const StyleLayoutPanel = (props, {localize: _}) => (
     <PlotlyFold name={_('Defaults')}>
       <ColorPicker label={_('Plot Background')} attr="plot_bgcolor" />
       <ColorPicker label={_('Margin Color')} attr="paper_bgcolor" />
-      <PlotlySection name={_('Color Scales')} attr="colorway">
-        <ColorwayPicker label={_('Categorical')} attr="colorway" />
-        <ColorscalePicker label={_('Sequential')} attr="colorscale.sequential" />
+      <PlotlySection name={_('Colorscales')} attr="colorway">
+        <ColorwayPicker
+          label={_('Categorical')}
+          attr="colorway"
+          disableCategorySwitch
+          labelWidth={80}
+        />
+        <ColorscalePicker
+          label={_('Sequential')}
+          attr="colorscale.sequential"
+          disableCategorySwitch
+          labelWidth={80}
+        />
         <ColorscalePicker
           label={_('Diverging')}
           attr="colorscale.diverging"
           initialCategory="divergent"
+          disableCategorySwitch
+          labelWidth={80}
+        />
+        <ColorscalePicker
+          label={_('Negative Sequential')}
+          attr="colorscale.sequentialminus"
+          disableCategorySwitch
+          labelWidth={80}
         />
-        <ColorscalePicker label={_('Negative Sequential')} attr="colorscale.sequentialminus" />
       </PlotlySection>
       <PlotlySection name={_('Text')} attr="font.family">
         <FontSelector label={_('Typeface')} attr="font.family" clearable={false} />

src/default_panels/StyleTracesPanel.js

@@ -304,7 +304,12 @@ const StyleTracesPanel = (props, {localize: _}) => (
       />
       <NumericFraction label={_('Jitter')} attr="jitter" />
       <Numeric label={_('Position')} attr="pointpos" step={0.1} showSlider />
-      <MarkerColor suppressMultiValuedMessage label={_('Color')} attr="marker.color" />
+      <MarkerColor
+        suppressMultiValuedMessage
+        label={_('Color')}
+        attr="marker.color"
+        labelWidth={80}
+      />
       <NumericFraction label={_('Point Opacity')} attr="marker.opacity" />
       <MarkerSize label={_('Size')} attr="marker.size" />
       <NumericReciprocal

src/lib/customTraceType.js

@@ -93,6 +93,26 @@ export function traceTypeToPlotlyInitFigure(traceType, gl = '') {
         sizeref: 1,
         type: 'cone',
       };
+    case 'histogram2dcontour':
+      return {
+        type: 'histogram2dcontour',
+        autocolorscale: true,
+      };
+    case 'histogram2d':
+      return {
+        type: 'histogram2d',
+        autocolorscale: true,
+      };
+    case 'heatmap':
+      return {
+        type: 'heatmap',
+        autocolorscale: true,
+      };
+    case 'contour':
+      return {
+        type: 'contour',
+        autocolorscale: true,
+      };
     default:
       return {type: traceType};
   }

src/styles/components/widgets/_colorscalepicker.scss

@@ -1,27 +1,31 @@
-$colorscalepicker-width: 215px;
-$colorscalepicker-height: 20px;
+// this width is also passed in as a prop in widgets/ColorscalePicker.js
+$colorscalepicker-width: 240px;
+$colorscale-clickable-part-width: 180px;
+$text-padding: 5px;
 
+// We're making our own custom colorscale picker to better adapt to RCE layout
+// so we're not displaying some parts of the original colorscalepicker (categody dropdown, description)
+.colorscalePickerTopContainer {
+  display: none;
+}
+
+.colorscaleDescription {
+  display: none;
+}
+
+// We're overriding some of the styles of the original css container class of react-colorscales
+// because we don't need this functionality
 .colorscalePickerContainer {
   min-width: $colorscalepicker-width;
   position: relative;
   padding: 0;
   resize: none;
   border: none;
   background: none;
+  max-height: none;
 }
 
-.colorscalePickerContainer::-webkit-scrollbar {
-  width: 5px;
-}
-
-.colorscalePickerTopContainer {
-  display: none;
-}
-
-.colorscaleDescription {
-  display: none;
-}
-
+// Some more styling adjustments to original react-
 .colorscalePickerContainer input:focus {
   outline: none;
 }
@@ -30,21 +34,49 @@ $colorscalepicker-height: 20px;
     display: inline;
   }
 }
-
+.colorscalePickerContainer::-webkit-scrollbar {
+  width: 5px;
+}
 .colorscalePickerBottomContainer {
-  padding-right: 3px;
+  padding: $text-padding 0 0 0;
+}
+// Adjustments for cubehelix controls
+.colorscaleControlPanel {
+  padding: 0;
+  margin: 0;
+  margin-left: 27%;
+  width: 70%;
 }
 
+// Our custom component, containing all the colorpicker
 .customPickerContainer {
-  margin-top: var(--spacing-quarter-unit);
   text-align: left;
+  width: $colorscale-clickable-part-width;
+}
 
-  &__outer {
-    width: $colorscalepicker-width;
-    text-align: center;
-  }
+.customPickerContainer__clickable {
+  margin-top: 5px;
+  min-height: 27px;
+  width: $colorscale-clickable-part-width;
+}
 
-  &__inner {
-    height: $colorscalepicker-height;
-  }
+// The expandable part of the component
+.customPickerContainer__expanded-content {
+  margin-top: 10px;
+}
+
+.customPickerContainer__category-dropdown {
+  max-width: 100%;
+}
+
+.customPickerContainer__palettes {
+  margin-left: -60px;
+}
+
+.customPickerContainer__info {
+  width: $colorscalepicker-width;
+}
+
+.customPickerContainer__category-dropdown {
+  width: $colorscale-clickable-part-width !important;
 }