use custom config visibility calculation in modifyPlotProps throughout while keeping existing logic

Author: VeraZab

src/components/fields/HoverLabelNameLength.js

@@ -1,6 +1,6 @@
 import React, {Component} from 'react';
 import PropTypes from 'prop-types';
-import {connectToContainer} from 'lib';
+import {connectToContainer, isValidCustomConfigObject} from 'lib';
 import Field from './Field';
 import RadioBlocks from '../widgets/RadioBlocks';
 import NumericInput from '../widgets/NumericInput';
@@ -84,8 +84,11 @@ UnconnectedHoverLabelNameLength.contextTypes = {
 export default connectToContainer(UnconnectedHoverLabelNameLength, {
   modifyPlotProps: (props, context, plotProps) => {
     const {container} = plotProps;
-    plotProps.isVisible =
+    const baseRule =
       (container.hoverinfo && container.hoverinfo.includes('name')) ||
       (container.hovertemplate || container.hovertemplate === ' ');
+    plotProps.isVisible = isValidCustomConfigObject(context.customConfig)
+      ? plotProps.isVisible && baseRule
+      : baseRule;
   },
 });

src/components/fields/LocationSelector.js

@@ -1,6 +1,6 @@
 import React, {Component} from 'react';
 import PropTypes from 'prop-types';
-import {connectToContainer} from 'lib';
+import {connectToContainer, isValidCustomConfigObject, applyCustomConfigVisibility} from 'lib';
 import Field from './Field';
 import Radio from './Radio';
 import {UnconnectedDropdown} from './Dropdown';
@@ -9,8 +9,11 @@ import DataSelector from './DataSelector';
 const LocationmodeVisible = connectToContainer(UnconnectedDropdown, {
   modifyPlotProps: (props, context, plotProps) => {
     if (!plotProps.fullValue) {
-      plotProps.isVisible = true;
       plotProps.fullValue = plotProps.container.locationmode;
+      plotProps.isVisible = isValidCustomConfigObject(context.customConfig)
+        ? applyCustomConfigVisibility(props, plotProps.fullValue, context.customConfig)
+        : true;
+
       return;
     }
   },

src/components/fields/derived.js

@@ -11,7 +11,14 @@ import Info from './Info';
 import {UnconnectedColorPicker} from './ColorPicker';
 import {UnconnectedTextEditor} from './TextEditor';
 import {UnconnectedVisibilitySelect} from './VisibilitySelect';
-import {connectToContainer, getAllAxes, getAxisTitle, axisIdToAxisName} from 'lib';
+import {
+  applyCustomConfigVisibility,
+  connectToContainer,
+  getAllAxes,
+  getAxisTitle,
+  axisIdToAxisName,
+  isValidCustomConfigObject,
+} from 'lib';
 
 export const AxisAnchorDropdown = connectToContainer(UnconnectedDropdown, {
   modifyPlotProps: (props, context, plotProps) => {
@@ -80,7 +87,9 @@ export const RangesliderVisible = connectToContainer(UnconnectedRadio, {
     if (!plotProps.fullValue) {
       plotProps.fullValue = false;
       plotProps.visible = false;
-      plotProps.isVisible = true;
+      plotProps.isVisible = isValidCustomConfigObject(context.customConfig)
+        ? applyCustomConfigVisibility(props, plotProps.fullValue, context.customConfig)
+        : true;
       return;
     }
   },
@@ -162,7 +171,9 @@ export const TickFormat = connectToContainer(UnconnectedDropdownCustom, {
 export const ShowInLegend = connectToContainer(UnconnectedVisibilitySelect, {
   modifyPlotProps: (props, context, plotProps) => {
     if (context.container.type && context.container.type !== 'sunburst') {
-      plotProps.isVisible = context.fullLayout.showlegend;
+      plotProps.isVisible = isValidCustomConfigObject(context.customConfig)
+        ? plotProps.isVisible && context.fullLayout.showlegend
+        : context.fullLayout.showlegend;
     }
 
     return plotProps;
@@ -171,23 +182,31 @@ export const ShowInLegend = connectToContainer(UnconnectedVisibilitySelect, {
 
 export const HistogramInfoVertical = connectToContainer(Info, {
   modifyPlotProps: (props, context, plotProps) => {
-    plotProps.isVisible =
-      context.fullContainer.type === 'histogram' && context.fullContainer.orientation === 'v';
+    plotProps.isVisible = isValidCustomConfigObject(context.customConfig)
+      ? plotProps.isVisible &&
+        context.fullContainer.type === 'histogram' &&
+        context.fullContainer.orientation === 'v'
+      : context.fullContainer.type === 'histogram' && context.fullContainer.orientation === 'v';
     return plotProps;
   },
 });
 
 export const HistogramInfoHorizontal = connectToContainer(Info, {
   modifyPlotProps: (props, context, plotProps) => {
-    plotProps.isVisible =
-      context.fullContainer.type === 'histogram' && context.fullContainer.orientation === 'h';
+    plotProps.isVisible = isValidCustomConfigObject(context.customConfig)
+      ? plotProps.isVisible &&
+        context.fullContainer.type === 'histogram' &&
+        context.fullContainer.orientation === 'h'
+      : context.fullContainer.type === 'histogram' && context.fullContainer.orientation === 'h';
     return plotProps;
   },
 });
 
 export const Histogram2d = connectToContainer(Info, {
   modifyPlotProps: (props, context, plotProps) => {
-    plotProps.isVisible = context.fullContainer.type === 'histogram2d';
+    plotProps.isVisible = isValidCustomConfigObject(context.customConfig)
+      ? plotProps.isVisible && context.fullContainer.type === 'histogram2d'
+      : context.fullContainer.type === 'histogram2d';
     return plotProps;
   },
 });
@@ -707,7 +726,9 @@ export const HovermodeDropdown = connectToContainer(UnconnectedVisibilitySelect,
 
 export const HoverColor = connectToContainer(UnconnectedColorPicker, {
   modifyPlotProps: (props, context, plotProps) => {
-    plotProps.isVisible = Boolean(context.fullLayout.hovermode);
+    plotProps.isVisible = isValidCustomConfigObject(context.customConfig)
+      ? plotProps.isVisible && Boolean(context.fullLayout.hovermode)
+      : Boolean(context.fullLayout.hovermode);
     return plotProps;
   },
 });
@@ -717,7 +738,9 @@ export const LevelRendered = connectToContainer(UnconnectedDropdown, {
     const _ = context.localize;
 
     if (context.container.ids && context.container.ids.length) {
-      plotProps.isVisible = true;
+      plotProps.isVisible = isValidCustomConfigObject(context.customConfig)
+        ? plotProps.isVisible
+        : true;
       plotProps.options = [{label: _('Root'), value: ''}].concat(
         context.container.ids.map(i => ({label: i, value: i}))
       );