hover label attrs

Author: dmt0

src/components/fields/ColorPicker.js

@@ -4,8 +4,34 @@ import PropTypes from 'prop-types';
 import React, {Component} from 'react';
 import {connectToContainer} from 'lib';
 
-class UnconnectedColorPicker extends Component {
+export class UnconnectedColorPicker extends Component {
+  constructor(props, context) {
+    super(props, context);
+    this.state = {
+      empty: !this.props.fullValue && this.props.handleEmpty,
+    };
+  }
+
   render() {
+    if (this.state.empty) {
+      return (
+        <Field {...this.props}>
+          <div className="js-test-info">
+            This color is computed from other parts of the figure but you can{' '}
+            <a
+              onClick={() => {
+                this.setState({empty: false});
+                this.props.updatePlot(this.props.defaultColor);
+              }}
+            >
+              override it
+            </a>
+            .
+          </div>
+        </Field>
+      );
+    }
+
     return (
       <Field {...this.props}>
         <ColorPickerWidget
@@ -20,6 +46,8 @@ class UnconnectedColorPicker extends Component {
 UnconnectedColorPicker.propTypes = {
   fullValue: PropTypes.any,
   updatePlot: PropTypes.func,
+  handleEmpty: PropTypes.bool,
+  defaultColor: PropTypes.string,
   ...Field.propTypes,
 };
 

src/components/fields/MultiColorPicker.js

@@ -32,6 +32,7 @@ class UnconnectedMultiColorPicker extends Component {
     this.state = {
       selectedConstantColorOption:
         context.traceIndexes.length > 1 &&
+        props.fullValue &&
         props.fullValue.every(v => v[1] === props.fullValue[0][1])
           ? 'single'
           : 'multiple',
@@ -41,7 +42,11 @@ class UnconnectedMultiColorPicker extends Component {
   }
 
   setColor(color) {
-    this.props.updatePlot(color);
+    if (this.props.setColor) {
+      this.props.setColor(color);
+    } else {
+      this.props.updatePlot(color);
+    }
   }
 
   setColors(colorscale, colorscaleType) {
@@ -88,11 +93,7 @@ class UnconnectedMultiColorPicker extends Component {
         <Field {...this.props} suppressMultiValuedMessage>
           <RadioBlocks
             options={constantOptions}
-            activeOption={
-              this.props.parentSelectedConstantColorOption
-                ? this.props.parentSelectedConstantColorOption
-                : this.state.selectedConstantColorOption
-            }
+            activeOption={selectedConstantColorOption}
             onOptionChange={
               this.props.onConstantColorOptionChange
                 ? this.props.onConstantColorOptionChange
@@ -101,10 +102,7 @@ class UnconnectedMultiColorPicker extends Component {
           />
           <Info>{selectedConstantColorOption === 'single' ? singleMessage : multiMessage}</Info>
           {selectedConstantColorOption === 'single' ? (
-            <ColorPicker
-              attr={this.props.attr}
-              updatePlot={this.props.setColor ? this.props.setColor : this.setColor}
-            />
+            <ColorPicker attr={this.props.attr} updatePlot={this.setColor} />
           ) : (
             <CustomColorscalePicker
               suppressMultiValuedMessage
@@ -119,11 +117,7 @@ class UnconnectedMultiColorPicker extends Component {
     }
 
     return (
-      <ColorPicker
-        attr={this.props.attr}
-        updatePlot={this.props.setColor ? this.props.setColor : this.setColor}
-        label={this.props.label}
-      />
+      <ColorPicker attr={this.props.attr} updatePlot={this.setColor} label={this.props.label} />
     );
   }
 }

src/components/fields/derived.js

@@ -5,6 +5,7 @@ import {UnconnectedNumeric} from './Numeric';
 import {UnconnectedAxisRangeValue} from './AxisRangeValue';
 import {UnconnectedRadio} from './Radio';
 import Info from './Info';
+import {UnconnectedColorPicker} from './ColorPicker';
 import {connectToContainer, getAllAxes, getAxisTitle, axisIdToAxisName} from 'lib';
 
 export const AxisAnchorDropdown = connectToContainer(UnconnectedDropdown, {
@@ -654,3 +655,10 @@ export const HovermodeDropdown = connectToContainer(UnconnectedDropdown, {
     plotProps.clearable = false;
   },
 });
+
+export const HoverColor = connectToContainer(UnconnectedColorPicker, {
+  modifyPlotProps: (props, context, plotProps) => {
+    plotProps.isVisible = Boolean(context.fullLayout.hovermode);
+    return plotProps;
+  },
+});

src/default_panels/StyleLayoutPanel.js

@@ -13,6 +13,7 @@ import {
   VisibilitySelect,
   HovermodeDropdown,
 } from '../components';
+import {HoverColor, HoverInfo} from '../components/fields/derived';
 
 const StyleLayoutPanel = (props, {localize: _}) => (
   <TraceRequiredPanel>
@@ -88,6 +89,29 @@ const StyleLayoutPanel = (props, {localize: _}) => (
         clearable={false}
       />
     </PlotlyFold>
+    <PlotlyFold name={_('Hover Labels')}>
+      <HoverInfo attr="hoverinfo" label={_('Values Shown On Hover')} />
+      <HoverColor
+        label={_('Background Color')}
+        attr="hoverlabel.bgcolor"
+        defaultColor="#FFF"
+        handleEmpty
+      />
+      <HoverColor
+        label={_('Border Color')}
+        attr="hoverlabel.bordercolor"
+        defaultColor="#000"
+        handleEmpty
+      />
+      <FontSelector label={_('Typeface')} attr="hoverlabel.font.family" />
+      <Numeric label={_('Font Size')} attr="hoverlabel.font.size" />
+      <HoverColor
+        label={_('Font Color')}
+        attr="hoverlabel.font.color"
+        defaultColor="#000"
+        handleEmpty
+      />
+    </PlotlyFold>
   </TraceRequiredPanel>
 );