clean up axis type and tick placement UX

Author: nicolaskruchten

src/components/fields/derived.js

@@ -235,6 +235,34 @@ export const AxesRange = connectToContainer(UnconnectedAxisRangeValue, {
   },
 });
 
+export const NTicks = connectToContainer(UnconnectedNumeric, {
+  modifyPlotProps: (props, context, plotProps) => {
+    const {fullContainer} = plotProps;
+    if (
+      plotProps.isVisible &&
+      fullContainer &&
+      fullContainer.tickmode !== 'auto'
+    ) {
+      plotProps.isVisible = false;
+    }
+    return plotProps;
+  },
+});
+
+export const DTicks = connectToContainer(UnconnectedAxisRangeValue, {
+  modifyPlotProps: (props, context, plotProps) => {
+    const {fullContainer} = plotProps;
+    if (
+      plotProps.isVisible &&
+      fullContainer &&
+      fullContainer.tickmode !== 'linear'
+    ) {
+      plotProps.isVisible = false;
+    }
+    return plotProps;
+  },
+});
+
 class UnconnectedNumericFraction extends UnconnectedNumeric {}
 UnconnectedNumericFraction.propTypes = UnconnectedNumeric.propTypes;
 UnconnectedNumericFraction.defaultProps = {

src/components/fields/index.js

@@ -23,6 +23,8 @@ import {
   AnnotationRef,
   PositioningRef,
   AxesRange,
+  NTicks,
+  DTicks,
   AxisAnchorDropdown,
   CanvasSize,
   ContourNumeric,
@@ -51,6 +53,8 @@ export {
   PositioningRef,
   ArrowSelector,
   AxesRange,
+  NTicks,
+  DTicks,
   AxesSelector,
   CanvasSize,
   ColorPicker,

src/components/index.js

@@ -7,6 +7,8 @@ import {
   PositioningRef,
   ArrowSelector,
   AxesRange,
+  NTicks,
+  DTicks,
   AxesSelector,
   CanvasSize,
   ColorPicker,
@@ -75,6 +77,8 @@ export {
   AxisAnchorDropdown,
   AxisOverlayDropdown,
   AxisSide,
+  NTicks,
+  DTicks,
   ShapeAccordion,
   RangeSelectorAccordion,
   SliderAccordion,

src/components/widgets/TextInput.js

@@ -30,7 +30,7 @@ export default class TextInput extends Component {
 }
 
 TextInput.propTypes = {
-  defaultValue: PropTypes.number,
+  defaultValue: PropTypes.string,
   editableClassName: PropTypes.string,
   onUpdate: PropTypes.func.isRequired,
   placeholder: PropTypes.string,

src/default_panels/StyleAxesPanel.js

@@ -5,7 +5,8 @@ import {
   AxisOverlayDropdown,
   AxisSide,
   AxesRange,
-  AxisRangeValue,
+  DTicks,
+  NTicks,
   ColorPicker,
   Dropdown,
   FontSelector,
@@ -88,9 +89,10 @@ class StyleAxesPanel extends Component {
 
         <AxesFold name={_('Range')}>
           <Section name={_('Range')} attr="autorange">
-            <Radio
+            <Dropdown
               attr="type"
               label={_('Type')}
+              clearable={false}
               options={[
                 {label: _('Linear'), value: 'linear'},
                 {label: _('Log'), value: 'log'},
@@ -274,18 +276,18 @@ class StyleAxesPanel extends Component {
             />
           </Section>
 
-          <Section name={_('Number of Labels')} attr="dtick">
+          <Section name={_('Placement')} attr="dtick">
             <Radio
               attr="tickmode"
               options={[
-                {label: _('Linear'), value: 'linear'},
-                {label: _('Custom'), value: 'auto'},
+                {label: _('Auto'), value: 'auto'},
+                {label: _('Custom'), value: 'linear'},
               ]}
             />
 
-            <AxisRangeValue label={_('Step Offset')} attr="tick0" />
-            <AxisRangeValue label={_('Step Size')} attr="dtick" />
-            <Numeric label={_('Max Number of Labels')} attr="nticks" />
+            <DTicks label={_('Step Offset')} attr="tick0" />
+            <DTicks label={_('Step Size')} attr="dtick" />
+            <NTicks label={_('Max Number of Labels')} attr="nticks" />
           </Section>
         </AxesFold>
         <AxesFold name={_('Tick Markers')}>
@@ -302,18 +304,18 @@ class StyleAxesPanel extends Component {
             <Numeric label={_('Width')} attr="tickwidth" units="px" />
             <ColorPicker label={_('Tick Color')} attr="tickcolor" />
           </Section>
-          <Section name={_('Number of Markers')}>
+          <Section name={_('Placement')}>
             <Radio
               attr="tickmode"
               options={[
-                {label: _('Linear'), value: 'linear'},
-                {label: _('Custom'), value: 'auto'},
+                {label: _('Auto'), value: 'auto'},
+                {label: _('Custom'), value: 'linear'},
               ]}
             />
 
-            <AxisRangeValue label={_('Step Offset')} attr="tick0" />
-            <AxisRangeValue label={_('Step Size')} attr="dtick" />
-            <Numeric label={_('Max Number of Markers')} attr="nticks" />
+            <DTicks label={_('Step Offset')} attr="tick0" />
+            <DTicks label={_('Step Size')} attr="dtick" />
+            <NTicks label={_('Max Number of Markers')} attr="nticks" />
           </Section>
         </AxesFold>
 

src/index.js

@@ -28,6 +28,8 @@ import {
   ArrowSelector,
   AxesFold,
   AxesRange,
+  NTicks,
+  DTicks,
   AxesSelector,
   Button,
   CanvasSize,
@@ -94,6 +96,8 @@ export {
   ArrowSelector,
   AxesFold,
   AxesRange,
+  NTicks,
+  DTicks,
   AxesSelector,
   Button,
   CanvasSize,