hovertemplate show/hide

Author: nicolaskruchten

src/components/fields/TextEditor.js

@@ -8,7 +8,7 @@ import RichText from '../widgets/text_editors/RichText';
 import MultiFormat from '../widgets/text_editors/MultiFormat';
 import HTML from '../widgets/text_editors/HTML';
 
-class UnconnectedTextEditor extends Component {
+export class UnconnectedTextEditor extends Component {
   render() {
     const {
       attr,

src/components/fields/derived.js

@@ -8,6 +8,7 @@ import {UnconnectedAxisRangeValue} from './AxisRangeValue';
 import {UnconnectedRadio} from './Radio';
 import Info from './Info';
 import {UnconnectedColorPicker} from './ColorPicker';
+import {UnconnectedTextEditor} from './TextEditor';
 import {UnconnectedVisibilitySelect} from './VisibilitySelect';
 import {connectToContainer, getAllAxes, getAxisTitle, axisIdToAxisName} from 'lib';
 
@@ -523,9 +524,19 @@ export const HoverTemplateSwitch = connectToContainer(UnconnectedRadio, {
     const {localize: _} = context;
 
     plotProps.options = [
-      {label: _('Basic'), value: ''},
-      {label: _('Advanced'), value: plotProps.fullValue || 'template'},
+      {label: _('Values'), value: ''},
+      {label: _('Template'), value: plotProps.fullValue || ' '},
     ];
+    return plotProps;
+  },
+});
+
+export const HoverTemplateText = connectToContainer(UnconnectedTextEditor, {
+  modifyPlotProps: (props, context, plotProps) => {
+    if (plotProps.isVisible && plotProps.fullValue === '') {
+      plotProps.isVisible = false;
+    }
+    return plotProps;
   },
 });
 

src/components/fields/index.js

@@ -43,6 +43,7 @@ import {
   ContourNumeric,
   FillDropdown,
   HoverInfo,
+  HoverTemplateText,
   HoverTemplateSwitch,
   NumericFraction,
   NumericFractionDomain,
@@ -86,6 +87,7 @@ export {
   Flaglist,
   FontSelector,
   HoverInfo,
+  HoverTemplateText,
   HoverTemplateSwitch,
   Info,
   NumericFraction,

src/components/index.js

@@ -24,6 +24,7 @@ import {
   Flaglist,
   FontSelector,
   HoverInfo,
+  HoverTemplateText,
   HoverTemplateSwitch,
   Info,
   NumericFraction,
@@ -133,6 +134,7 @@ export {
   Fold,
   FontSelector,
   HoverInfo,
+  HoverTemplateText,
   HoverTemplateSwitch,
   Info,
   NumericFraction,

src/default_panels/StyleTracesPanel.js

@@ -20,6 +20,7 @@ import {
   ColorscalePicker,
   ColorwayPicker,
   HoverInfo,
+  HoverTemplateText,
   HoverTemplateSwitch,
   Dropdown,
   FillDropdown,
@@ -611,10 +612,10 @@ const StyleTracesPanel = (props, {localize: _}) => (
       <NumericFraction label={_('Meanline Width')} attr="meanline.width" />
       <MultiColorPicker label={_('Meanline Color')} attr="meanline.color" />
     </PlotlySection>
-    <PlotlySection name={_('On Hover')}>
+    <PlotlySection name={_('Hover/Tooltip Text')}>
       <HoverTemplateSwitch attr="hovertemplate" label={_('Mode')} />
-      <HoverInfo attr="hoverinfo" label={_('Values Shown On Hover')} />
-      <TextEditor attr="hovertemplate" label={_('Text Template')} />
+      <HoverInfo attr="hoverinfo" label={_('Show')} />
+      <HoverTemplateText attr="hovertemplate" label={_('Template')} />
       <Radio
         label={_('Split labels')}
         attr="hoverlabel.split"