proper visibility rules for rangeslider UI

Author: nicolaskruchten

src/components/fields/derived.js

@@ -78,6 +78,19 @@ 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 AxisSide = connectToContainer(UnconnectedRadio, {
   modifyPlotProps: (props, context, plotProps) => {
     const _ = props.localize;

src/components/fields/index.js

@@ -34,6 +34,7 @@ import {
   NumericFractionInverse,
   LayoutNumericFraction,
   LayoutNumericFractionInverse,
+  RangesliderVisible,
   TraceOrientation,
   AxisOverlayDropdown,
   AxisSide,
@@ -73,6 +74,7 @@ export {
   Numeric,
   Radio,
   SymbolSelector,
+  RangesliderVisible,
   TextEditor,
   TraceOrientation,
   TraceSelector,

src/components/index.js

@@ -32,6 +32,7 @@ import {
   LineShapeSelector,
   Numeric,
   Radio,
+  RangesliderVisible,
   AxisCreator,
   SymbolSelector,
   TextEditor,
@@ -75,6 +76,7 @@ export {
   ImageAccordion,
   UpdateMenuAccordion,
   AnnotationArrowRef,
+  RangesliderVisible,
   AnnotationRef,
   PositioningRef,
   ArrowSelector,

src/default_panels/StyleAxesPanel.js

@@ -18,6 +18,7 @@ import {
   TraceRequiredPanel,
   AxesFold,
   TraceTypeSection,
+  RangesliderVisible,
 } from '../components';
 
 import {localize} from '../lib';
@@ -309,7 +310,7 @@ class StyleAxesPanel extends Component {
         </AxesFold>
 
         <AxesFold name={_('Range Slider')}>
-          <Radio
+          <RangesliderVisible
             attr="rangeslider.visible"
             options={[
               {label: _('Show'), value: true},

src/index.js

@@ -58,6 +58,7 @@ import {
   SingleSidebarItem,
   SymbolSelector,
   TextEditor,
+  RangesliderVisible,
   TraceAccordion,
   TraceMarkerSection,
   TraceRequiredPanel,
@@ -99,6 +100,7 @@ export {
   Dropdown,
   Dropzone,
   EDITOR_ACTIONS,
+  RangesliderVisible,
   Flaglist,
   Fold,
   FontSelector,