Merge pull request #427 from plotly/axes-selector-fixes

Smarter Axes Selector

Author: VeraZab

src/components/containers/AxesFold.js

@@ -5,10 +5,17 @@ import React, {Component} from 'react';
 import {connectAxesToLayout} from 'lib';
 
 class AxesFold extends Component {
+  renderAxesSelector() {
+    if (this.props.options.length > 1) {
+      return <AxesSelector axesOptions={this.props.options} />;
+    }
+    return null;
+  }
+
   render() {
     return this.props.children ? (
       <Fold {...this.props}>
-        <AxesSelector />
+        {this.renderAxesSelector()}
         {this.props.children}
       </Fold>
     ) : null;
@@ -17,6 +24,7 @@ class AxesFold extends Component {
 
 AxesFold.propTypes = {
   children: PropTypes.any,
+  options: PropTypes.array,
 };
 
 AxesFold.plotly_editor_traits = {foldable: true};

src/components/containers/RangeSelectorAccordion.js

@@ -9,6 +9,7 @@ const RangeSelectorFold = connectRangeSelectorToAxis(Fold);
 class RangeSelectorAccordion extends Component {
   render() {
     if (
+      !this.context.fullContainer ||
       !this.context.fullContainer.rangeselector ||
       !this.context.fullContainer.rangeselector.visible ||
       // next line checks for "all" case
@@ -61,4 +62,8 @@ RangeSelectorAccordion.propTypes = {
   localize: PropTypes.func,
 };
 
+RangeSelectorAccordion.plotly_editor_traits = {
+  no_visibility_forcing: true,
+};
+
 export default localize(RangeSelectorAccordion);

src/components/fields/AxesSelector.js

@@ -17,8 +17,8 @@ class AxesSelector extends Component {
   }
 
   render() {
-    const {axesTargetHandler, axesOptions, axesTarget} = this.context;
-    const {localize: _} = this.props;
+    const {axesTargetHandler, axesTarget} = this.context;
+    const {localize: _, axesOptions} = this.props;
     const maxOptions = axesOptions.length > 4; // eslint-disable-line
 
     if (maxOptions) {
@@ -57,13 +57,13 @@ class AxesSelector extends Component {
 
 AxesSelector.contextTypes = {
   axesTargetHandler: PropTypes.func,
-  axesOptions: PropTypes.array,
   axesTarget: PropTypes.string,
   fullLayout: PropTypes.object,
 };
 
 AxesSelector.propTypes = {
   localize: PropTypes.func,
+  axesOptions: PropTypes.array,
 };
 
 export default localize(AxesSelector);

src/components/fields/derived.js

@@ -19,6 +19,7 @@ export const AxisAnchorDropdown = connectToContainer(UnconnectedDropdown, {
     let options = [];
 
     if (
+      plotProps.fullContainer &&
       plotProps.fullContainer._subplot &&
       plotProps.fullContainer._subplot.includes('xaxis')
     ) {
@@ -29,6 +30,7 @@ export const AxisAnchorDropdown = connectToContainer(UnconnectedDropdown, {
         };
       });
     } else if (
+      plotProps.fullContainer &&
       plotProps.fullContainer._subplot &&
       plotProps.fullContainer._subplot.includes('yaxis')
     ) {
@@ -48,6 +50,7 @@ export const AxisOverlayDropdown = connectToContainer(UnconnectedDropdown, {
   modifyPlotProps: (props, context, plotProps) => {
     let options = [];
     if (
+      plotProps.fullContainer &&
       plotProps.fullContainer._subplot &&
       plotProps.fullContainer._subplot.includes('xaxis')
     ) {
@@ -58,6 +61,7 @@ export const AxisOverlayDropdown = connectToContainer(UnconnectedDropdown, {
         };
       });
     } else if (
+      plotProps.fullContainer &&
       plotProps.fullContainer._subplot &&
       plotProps.fullContainer._subplot.includes('yaxis')
     ) {
@@ -71,7 +75,8 @@ export const AxisOverlayDropdown = connectToContainer(UnconnectedDropdown, {
 
     // filter out the current axisID, can't overlay over itself
     plotProps.options = options.filter(
-      option => context.fullContainer._id !== option.value
+      option =>
+        context.fullContainer && context.fullContainer._id !== option.value
     );
 
     plotProps.clearable = true;
@@ -80,25 +85,9 @@ export const AxisOverlayDropdown = connectToContainer(UnconnectedDropdown, {
 
 export const RangesliderVisible = connectToContainer(UnconnectedRadio, {
   modifyPlotProps: (props, context, plotProps) => {
-    if (
-      !plotProps.isVisible &&
-      context.fullContainer._id &&
-      context.fullContainer._id.startsWith('x')
-    ) {
-      plotProps.isVisible = true;
-      return;
-    }
-  },
-});
-
-export const RangeselectorVisible = connectToContainer(UnconnectedRadio, {
-  modifyPlotProps: (props, context, plotProps) => {
-    if (
-      !plotProps.isVisible &&
-      context.fullContainer._id &&
-      context.fullContainer._id.startsWith('x') &&
-      context.fullContainer.type === 'date'
-    ) {
+    if (!plotProps.fullValue) {
+      plotProps.fullValue = false;
+      plotProps.visible = false;
       plotProps.isVisible = true;
       return;
     }
@@ -109,6 +98,7 @@ export const AxisSide = connectToContainer(UnconnectedRadio, {
   modifyPlotProps: (props, context, plotProps) => {
     const _ = props.localize;
     if (
+      context.fullContainer &&
       context.fullContainer._id &&
       context.fullContainer._id.startsWith('y')
     ) {
@@ -120,6 +110,7 @@ export const AxisSide = connectToContainer(UnconnectedRadio, {
     }
 
     if (
+      context.fullContainer &&
       context.fullContainer._id &&
       context.fullContainer._id.startsWith('x')
     ) {

src/components/fields/index.js

@@ -40,7 +40,6 @@ import {
   LayoutNumeric,
   LayoutNumericFractionInverse,
   RangesliderVisible,
-  RangeselectorVisible,
   TraceOrientation,
   AxisOverlayDropdown,
   AxisSide,
@@ -86,7 +85,6 @@ export {
   Radio,
   SymbolSelector,
   RangesliderVisible,
-  RangeselectorVisible,
   TextEditor,
   TraceOrientation,
   TraceSelector,

src/components/index.js

@@ -38,7 +38,6 @@ import {
   Text,
   Radio,
   RangesliderVisible,
-  RangeselectorVisible,
   AxisCreator,
   SymbolSelector,
   TextEditor,
@@ -86,7 +85,6 @@ export {
   UpdateMenuAccordion,
   AnnotationArrowRef,
   RangesliderVisible,
-  RangeselectorVisible,
   AnnotationRef,
   PositioningRef,
   ArrowSelector,

src/default_panels/StyleAxesPanel.js

@@ -20,7 +20,6 @@ import {
   AxesFold,
   TraceTypeSection,
   RangesliderVisible,
-  RangeselectorVisible,
   RangeSelectorAccordion,
 } from '../components';
 
@@ -55,14 +54,20 @@ class StyleAxesPanel extends Component {
           },
         ]}
       >
-        <AxesFold name={_('Titles')}>
+        <AxesFold
+          name={_('Titles')}
+          axisFilter={axis => !axis._name.includes('angular')}
+        >
           <TextEditor attr="title" />
           <FontSelector label={_('Typeface')} attr="titlefont.family" />
           <Numeric label={_('Font Size')} attr="titlefont.size" units="px" />
           <ColorPicker label={_('Font Color')} attr="titlefont.color" />
         </AxesFold>
 
-        <AxesFold name={_('Layout')}>
+        <AxesFold
+          name={_('Layout')}
+          axisFilter={axis => !axis._name.includes('radial')}
+        >
           <Dropdown
             label={_('Direction')}
             attr="direction"
@@ -347,7 +352,10 @@ class StyleAxesPanel extends Component {
           </Section>
         </AxesFold>
 
-        <AxesFold name={_('Range Slider')}>
+        <AxesFold
+          name={_('Range Slider')}
+          axisFilter={axis => axis._subplot.includes('xaxis')}
+        >
           <RangesliderVisible
             attr="rangeslider.visible"
             options={[
@@ -371,8 +379,13 @@ class StyleAxesPanel extends Component {
           />
         </AxesFold>
 
-        <AxesFold name={_('Timescale Buttons')}>
-          <RangeselectorVisible
+        <AxesFold
+          name={_('Timescale Buttons')}
+          axisFilter={axis =>
+            axis._subplot.includes('xaxis') && axis.type === 'date'
+          }
+        >
+          <Radio
             attr="rangeselector.visible"
             options={[
               {label: _('Show'), value: true},
@@ -471,7 +484,12 @@ class StyleAxesPanel extends Component {
           </Section>
         </AxesFold>
 
-        <AxesFold name={_('Zoom Interactivity')}>
+        <AxesFold
+          name={_('Zoom Interactivity')}
+          axisFilter={axis =>
+            !axis._name.includes('angular') && !axis._name.includes('radial')
+          }
+        >
           <Radio
             attr="fixedrange"
             options={[
@@ -481,7 +499,12 @@ class StyleAxesPanel extends Component {
           />
         </AxesFold>
 
-        <AxesFold name={_('Hover Projections')}>
+        <AxesFold
+          name={_('Hover Projections')}
+          axisFilter={axis =>
+            !axis._name.includes('angular') && !axis._name.includes('radial')
+          }
+        >
           <Radio
             attr="showspikes"
             options={[

src/index.js

@@ -64,7 +64,6 @@ import {
   SymbolSelector,
   TextEditor,
   RangesliderVisible,
-  RangeselectorVisible,
   TraceAccordion,
   TraceMarkerSection,
   TraceRequiredPanel,
@@ -110,7 +109,6 @@ export {
   Dropzone,
   EDITOR_ACTIONS,
   RangesliderVisible,
-  RangeselectorVisible,
   Flaglist,
   Fold,
   FontSelector,

src/lib/__tests__/multiValued-test.js

@@ -1,40 +1,10 @@
-import NumericInput from '../../components/widgets/NumericInput';
 import React from 'react';
-import {MULTI_VALUED_PLACEHOLDER} from '../constants';
 import {Numeric} from '../../components';
 import {TestEditor, fixtures, plotly} from '../test-utils';
 import {connectLayoutToPlot, connectAxesToLayout} from '..';
 import {mount} from 'enzyme';
 
 describe('multiValued Numeric', () => {
-  it('uses placeholder and empty string value', () => {
-    const fixtureProps = fixtures.scatter({
-      layout: {xaxis: {range: [0, 1]}, yaxis: {range: [-1, 1]}},
-    });
-    const AxesNumeric = connectLayoutToPlot(connectAxesToLayout(Numeric));
-
-    const rangeInputs = mount(
-      <TestEditor {...{...fixtureProps, onUpdate: jest.fn(), plotly}}>
-        <AxesNumeric attr="range[0]" defaultAxesTarget="xaxis" />
-        <AxesNumeric attr="range[0]" defaultAxesTarget="yaxis" />
-        <AxesNumeric attr="range[0]" defaultAxesTarget="allaxes" />
-      </TestEditor>
-    ).find(NumericInput);
-
-    expect(rangeInputs.length).toBe(3);
-
-    const xaxisRangeInput = rangeInputs.at(0);
-    const yaxisRangeInput = rangeInputs.at(1);
-    const allaxisRangeInput = rangeInputs.at(2);
-
-    expect(xaxisRangeInput.prop('value')).toBe(0);
-    expect(yaxisRangeInput.prop('value')).toBe(-1);
-    expect(allaxisRangeInput.prop('value')).toBe('');
-    expect(allaxisRangeInput.prop('placeholder')).toBe(
-      MULTI_VALUED_PLACEHOLDER
-    );
-  });
-
   it('uses multiValued defaultContainer as default increment value', () => {
     const beforeUpdateLayout = jest.fn();
     const xaxisLowerRange = -30;
@@ -45,7 +15,7 @@ describe('multiValued Numeric', () => {
 
     mount(
       <TestEditor {...{...fixtureProps, beforeUpdateLayout, plotly}}>
-        <AxesNumeric attr="range[0]" defaultAxesTarget="allaxes" />
+        <AxesNumeric attr="range[0]" />
       </TestEditor>
     )
       .find('.js-numeric-increase')
@@ -54,9 +24,7 @@ describe('multiValued Numeric', () => {
     expect(beforeUpdateLayout).toBeCalled();
     const payload = beforeUpdateLayout.mock.calls[0][0];
     expect(payload.update).toEqual({
-      'xaxis.range[0]': xaxisLowerRange,
-      'yaxis.range[0]': xaxisLowerRange,
-      'yaxis2.range[0]': xaxisLowerRange,
+      'xaxis.range[0]': xaxisLowerRange + 1,
     });
   });
 });

src/lib/__tests__/nestedContainerConnections-test.js

@@ -20,11 +20,7 @@ describe('Plot Connection', () => {
     );
     mount(
       <TestEditor {...{...fixtureProps, beforeUpdateLayout}}>
-        <LayoutAxesNumeric
-          label="Min"
-          attr="range[0]"
-          defaultAxesTarget="xaxis"
-        />
+        <LayoutAxesNumeric label="Min" attr="range[0]" />
       </TestEditor>
     )
       .find('[attr="range[0]"]')
@@ -34,7 +30,9 @@ describe('Plot Connection', () => {
 
     expect(beforeUpdateLayout).toBeCalled();
     const payload = beforeUpdateLayout.mock.calls[0][0];
-    expect(payload).toEqual({update: {'xaxis.range[0]': 1}});
+    expect(payload).toEqual({
+      update: {'xaxis.range[0]': 1},
+    });
   });
 
   it('can connect to layout when connected within trace context', () => {