Disable / Enable attrs based on custom config

dev/App.js

@@ -14,6 +14,8 @@ import 'brace/theme/textmate';
 // https://github.com/plotly/react-chart-editor#mapbox-access-tokens
 import ACCESS_TOKENS from '../accessTokens';
 
+import {customConfigTest} from '../src/__stories__';
+
 const dataSourceOptions = Object.keys(dataSources).map(name => ({
   value: name,
   label: name,
@@ -183,6 +185,7 @@ class App extends Component {
           // makeDefaultTrace={() => ({type: 'scattergl', mode: 'markers'})}
           // fontOptions={[{label:'Arial', value: 'arial'}]}
           // chartHelp={chartHelp}
+          // customConfig={customConfigTest}
         >
           <DefaultEditor
           // menuPanelOrder={[

package.json

@@ -1,7 +1,7 @@
 {
   "name": "react-chart-editor",
   "description": "plotly.js chart editor react component UI",
-  "version": "0.38.1",
+  "version": "0.39.0",
   "author": "Plotly, Inc.",
   "bugs": {
     "url": "https://github.com/plotly/react-chart-editor/issues"

src/EditorControls.js

@@ -1,7 +1,13 @@
 import DefaultEditor from './DefaultEditor';
 import PropTypes from 'prop-types';
 import React, {Component} from 'react';
-import {bem, localizeString, plotlyTraceToCustomTrace, traceTypeToPlotlyInitFigure} from './lib';
+import {
+  bem,
+  localizeString,
+  plotlyTraceToCustomTrace,
+  traceTypeToPlotlyInitFigure,
+  hasValidCustomConfigVisibilityRules,
+} from './lib';
 import {
   shamefullyClearAxisTypes,
   shamefullyAdjustAxisRef,
@@ -59,6 +65,10 @@ class EditorControls extends Component {
       mapBoxAccess: this.props.mapBoxAccess,
       fontOptions: this.props.fontOptions,
       chartHelp: this.props.chartHelp,
+      customConfig: this.props.customConfig,
+      hasValidCustomConfigVisibilityRules: hasValidCustomConfigVisibilityRules(
+        this.props.customConfig
+      ),
     };
   }
 
@@ -391,6 +401,7 @@ EditorControls.propTypes = {
   mapBoxAccess: PropTypes.bool,
   fontOptions: PropTypes.array,
   chartHelp: PropTypes.object,
+  customConfig: PropTypes.object,
 };
 
 EditorControls.defaultProps = {
@@ -432,6 +443,8 @@ EditorControls.childContextTypes = {
   mapBoxAccess: PropTypes.bool,
   fontOptions: PropTypes.array,
   chartHelp: PropTypes.object,
+  customConfig: PropTypes.object,
+  hasValidCustomConfigVisibilityRules: PropTypes.bool,
 };
 
 export default EditorControls;

src/PlotlyEditor.js

@@ -40,6 +40,7 @@ class PlotlyEditor extends Component {
             mapBoxAccess={Boolean(this.props.config && this.props.config.mapboxAccessToken)}
             fontOptions={this.props.fontOptions}
             chartHelp={this.props.chartHelp}
+            customConfig={this.props.customConfig}
           >
             {this.props.children}
           </EditorControls>
@@ -91,6 +92,7 @@ PlotlyEditor.propTypes = {
   glByDefault: PropTypes.bool,
   fontOptions: PropTypes.array,
   chartHelp: PropTypes.object,
+  customConfig: PropTypes.object,
 };
 
 PlotlyEditor.defaultProps = {

src/__stories__/index.js

@@ -12,6 +12,72 @@ import './stories.css';
 
 import React from 'react';
 import {storiesOf} from '@storybook/react';
+export const customConfigTest = {
+  visibility_rules: {
+    blacklist: [
+      {type: 'attrName', regex_match: 'font.family'},
+      {type: 'attrName', regex_match: 'font.size'},
+      {
+        type: 'attrName',
+        regex_match: 'color',
+        exceptions: [
+          {
+            type: 'attrName',
+            regex_match: 'colorbar',
+            exceptions: [
+              {type: 'attrName', regex_match: 'colorbar.bgcolor'},
+              {type: 'attrName', regex_match: 'colorbar.tickfont.color'},
+              {type: 'attrName', regex_match: 'colorbar.title.font.color'},
+              {type: 'attrName', regex_match: 'colorbar.outlinecolor'},
+              {type: 'attrName', regex_match: 'colorbar.bordercolor'},
+              {type: 'attrName', regex_match: 'colorbar.tickcolor'},
+            ],
+          },
+          {
+            type: 'attrName',
+            regex_match: 'coloraxis',
+            exceptions: [
+              {type: 'attrName', regex_match: 'coloraxis.colorscale'},
+              {type: 'attrName', regex_match: 'coloraxis.colorbar.outlinecolor'},
+              {type: 'attrName', regex_match: 'coloraxis.colorbar.bordercolor'},
+              {type: 'attrName', regex_match: 'coloraxis.colorbar.bgcolor'},
+              {type: 'attrName', regex_match: 'coloraxis.colorbar.tickcolor'},
+              {type: 'attrName', regex_match: 'coloraxis.colorbar.tickfont.color'},
+              {type: 'attrName', regex_match: 'coloraxis.colorbar.title.font.color'},
+            ],
+          },
+          {
+            type: 'attrName',
+            regex_match: 'colorscales',
+            exceptions: [
+              {
+                type: 'attrName',
+                regex_match: 'colorscales.items.concentrationscales.colorscale',
+              },
+            ],
+          },
+          {type: 'attrName', regex_match: 'autocolorscale'},
+          {type: 'attrName', regex_match: 'usecolormap'},
+          {type: 'attrName', regex_match: 'bundlecolors'},
+          {
+            type: 'attrName',
+            regex_match: 'marker.color',
+            exceptions: [
+              {type: 'controlType', regex_match: '^UnconnectedMultiColorPicker$'},
+              {type: 'controlType', regex_match: '^UnconnectedColorscalePicker$'},
+              {type: 'attrName', regex_match: 'marker.colorbar.outlinecolor'},
+              {type: 'attrName', regex_match: 'marker.colorbar.bordercolor'},
+              {type: 'attrName', regex_match: 'marker.colorbar.bgcolor'},
+              {type: 'attrName', regex_match: 'marker.colorbar.tickcolor'},
+              {type: 'attrName', regex_match: 'marker.colorbar.tickfont.color'},
+              {type: 'attrName', regex_match: 'marker.colorbar.title.font.color'},
+            ],
+          },
+        ],
+      },
+    ],
+  },
+};
 
 /**
  * To add more Percy tests - add a mock file to /dev/percy, add it to /dev/percy/index.js
@@ -34,7 +100,7 @@ window.URL.createObjectURL = function() {
   return null;
 };
 
-const panelFixture = (Panel, group, name, figure) => {
+const panelFixture = (Panel, group, name, figure, customConfig) => {
   const gd = setupGraphDiv(figure, plotly);
   gd._context = plotly.setPlotConfig();
   gd._context.setBackground = () => {
@@ -48,6 +114,7 @@ const panelFixture = (Panel, group, name, figure) => {
         graphDiv={gd}
         dataSources={fixtures.scatter().dataSources}
         dataSourceOptions={fixtures.scatter().dataSourceOptions}
+        customConfig={customConfig || {}}
       >
         <PanelMenuWrapper>
           <Panel group={group} name={name} />
@@ -67,8 +134,10 @@ Object.keys(mocks).forEach(m => {
     const panelGroup = words[0];
     const panelName = words.slice(1, -1).join(' ');
 
-    stories = stories.add(`${m}_${p}`, () =>
-      panelFixture(panels[p], panelGroup, panelName, mocks[m])
-    );
+    stories = stories
+      .add(`${m}_${p}`, () => panelFixture(panels[p], panelGroup, panelName, mocks[m]))
+      .add(`${m}_${p}_withCustomConfig`, () =>
+        panelFixture(panels[p], panelGroup, panelName, mocks[m], customConfigTest)
+      );
   });
 });

src/components/containers/PlotlySection.js

@@ -1,6 +1,10 @@
 import React, {Component} from 'react';
 import PropTypes from 'prop-types';
-import {containerConnectedContextTypes, unpackPlotProps} from '../../lib';
+import {
+  containerConnectedContextTypes,
+  unpackPlotProps,
+  isVisibleGivenCustomConfig,
+} from '../../lib';
 
 export class Section extends Component {
   constructor() {
@@ -45,7 +49,7 @@ export default class PlotlySection extends Section {
 
   determineVisibility(nextProps, nextContext) {
     const {isVisible} = unpackPlotProps(nextProps, nextContext);
-    this.sectionVisible = Boolean(isVisible);
+    this.sectionVisible = isVisibleGivenCustomConfig(isVisible, nextProps, nextContext);
 
     React.Children.forEach(nextProps.children, child => {
       if (!child || this.sectionVisible) {
@@ -57,7 +61,13 @@ export default class PlotlySection extends Section {
         if (child.type.modifyPlotProps) {
           child.type.modifyPlotProps(child.props, nextContext, plotProps);
         }
-        this.sectionVisible = this.sectionVisible || plotProps.isVisible;
+
+        this.sectionVisible = isVisibleGivenCustomConfig(
+          this.sectionVisible || plotProps.isVisible,
+          child.props,
+          nextContext,
+          child.type && child.type.displayName ? child.type.displayName : null
+        );
         return;
       }
 

src/components/containers/__tests__/ConnectedContainersVisibility-test.js

@@ -74,6 +74,57 @@ describe('Basic PlotlySection rules', () => {
       it('HIDES Field', () => expect(wrapper.find('input').length).toEqual(0));
     });
 
+    describe('PlotlyPanel > PlotlySection > Field-with-no-visible-attr-based-on-customConfig', () => {
+      const wrapper = mount(
+        <TestEditor
+          {...fixtures.scatter({
+            customConfig: {
+              visibility_rules: {
+                blacklist: [{type: 'attrName', regex_match: 'color'}],
+              },
+            },
+          })}
+        >
+          <LayoutPanel>
+            <PlotlySection>
+              <Numeric attr="title.font.color" />
+            </PlotlySection>
+          </LayoutPanel>
+        </TestEditor>
+      );
+
+      it('HIDES Field based on customConfig', () =>
+        expect(wrapper.find('input').length).toEqual(0));
+      it('HIDES PlotlySection because no visible children according to custom config', () =>
+        expect(wrapper.find('div.section').length).toEqual(0));
+    });
+
+    describe('PlotlyPanel > PlotlySection > Field-with-no-visible-attr-based-on-customConfig', () => {
+      const wrapper = mount(
+        <TestEditor
+          {...fixtures.scatter({
+            customConfig: {
+              visibility_rules: {
+                blacklist: [{type: 'attrName', regex_match: 'color'}],
+              },
+            },
+          })}
+        >
+          <LayoutPanel>
+            <PlotlySection attr="title">
+              <Numeric attr="title.font.color" />
+              <Numeric attr="title" />
+            </PlotlySection>
+          </LayoutPanel>
+        </TestEditor>
+      );
+
+      it('HIDES the title.font.color Field based on customConfig', () =>
+        expect(wrapper.find('input').length).toEqual(1));
+      it('SHOWS PlotlySection if it has an attr that is accepted by customConfig', () =>
+        expect(wrapper.find('div.section').length).toEqual(1));
+    });
+
     describe('div > PlotlySection > Field-with-visible-attr', () => {
       const wrapper = mount(
         <TestEditor {...fixtures.scatter()}>

src/components/fields/ColorArrayPicker.js

@@ -130,4 +130,6 @@ UnconnectedColorArrayPicker.contextTypes = {
   updateContainer: PropTypes.func,
 };
 
+UnconnectedColorArrayPicker.displayName = 'UnconnectedColorArrayPicker';
+
 export default connectToContainer(UnconnectedColorArrayPicker);

src/components/fields/ColorPicker.js

@@ -51,4 +51,6 @@ UnconnectedColorPicker.propTypes = {
   ...Field.propTypes,
 };
 
+UnconnectedColorPicker.displayName = 'UnconnectedColorPicker';
+
 export default connectToContainer(UnconnectedColorPicker);

src/components/fields/ColorscalePicker.js

@@ -65,4 +65,6 @@ UnconnectedColorscalePicker.contextTypes = {
   onUpdate: PropTypes.func,
 };
 
+UnconnectedColorscalePicker.displayName = 'UnconnectedColorscalePicker';
+
 export default connectToContainer(UnconnectedColorscalePicker);

src/components/fields/ColorwayPicker.js

@@ -25,4 +25,6 @@ UnconnectedColorwayPicker.propTypes = {
   ...Field.propTypes,
 };
 
+UnconnectedColorwayPicker.displayName = 'UnconnectedColorwayPicker';
+
 export default connectToContainer(UnconnectedColorwayPicker);

src/components/fields/DataSelector.js

@@ -156,6 +156,8 @@ UnconnectedDataSelector.contextTypes = {
   container: PropTypes.object,
 };
 
+UnconnectedDataSelector.displayName = 'UnconnectedDataSelector';
+
 function modifyPlotProps(props, context, plotProps) {
   if (
     attributeIsData(plotProps.attrMeta) &&

src/components/fields/DateTimePicker.js

@@ -25,4 +25,6 @@ UnconnectedDateTimePicker.propTypes = {
   ...Field.propTypes,
 };
 
+UnconnectedDateTimePicker.displayName = 'UnconnectedDateTimePicker';
+
 export default connectToContainer(UnconnectedDateTimePicker);

src/components/fields/Dropdown.js

@@ -39,4 +39,6 @@ UnconnectedDropdown.propTypes = {
   ...Field.propTypes,
 };
 
+UnconnectedDropdown.displayName = 'UnconnectedDropdown';
+
 export default connectToContainer(UnconnectedDropdown);

src/components/fields/DropdownCustom.js

@@ -97,4 +97,6 @@ UnconnectedDropdownCustom.contextTypes = {
   updateContainer: PropTypes.func,
 };
 
+UnconnectedDropdownCustom.displayName = 'UnconnectedDropdownCustom';
+
 export default connectToContainer(UnconnectedDropdownCustom);

src/components/fields/Dropzone.js

@@ -24,4 +24,6 @@ UnconnectedDropzone.propTypes = {
   ...Field.propTypes,
 };
 
+UnconnectedDropzone.displayName = 'UnconnectedDropzone';
+
 export default connectToContainer(UnconnectedDropzone);

src/components/fields/DualNumeric.js

@@ -90,4 +90,6 @@ UnconnectedDualNumericFraction.contextTypes = {
   fullContainer: PropTypes.object,
 };
 
+UnconnectedDualNumericFraction.displayName = 'UnconnectedDualNumericFraction';
+
 export default connectToContainer(UnconnectedDualNumericFraction);

src/components/fields/Flaglist.js

@@ -25,4 +25,6 @@ UnconnectedFlaglist.propTypes = {
   ...Field.propTypes,
 };
 
+UnconnectedFlaglist.displayName = 'UnconnectedFlaglist';
+
 export default connectToContainer(UnconnectedFlaglist);

src/components/fields/GroupCreator.js

@@ -81,4 +81,6 @@ UnconnectedGroupCreator.contextTypes = {
   fullData: PropTypes.array,
 };
 
+UnconnectedGroupCreator.displayName = 'UnconnectedGroupCreator';
+
 export default connectToContainer(UnconnectedGroupCreator);

src/components/fields/HoverLabelNameLength.js

@@ -81,6 +81,8 @@ UnconnectedHoverLabelNameLength.contextTypes = {
   localize: PropTypes.func,
 };
 
+UnconnectedHoverLabelNameLength.displayName = 'UnconnectedHoverLabelNameLength';
+
 export default connectToContainer(UnconnectedHoverLabelNameLength, {
   modifyPlotProps: (props, context, plotProps) => {
     const {container} = plotProps;

src/components/fields/MarkerColor.js

@@ -226,4 +226,6 @@ UnconnectedMarkerColor.contextTypes = {
   container: PropTypes.object,
 };
 
+UnconnectedMarkerColor.displayName = 'UnconnectedMarkerColor';
+
 export default connectToContainer(UnconnectedMarkerColor);

src/components/fields/MarkerSize.js

@@ -97,4 +97,6 @@ UnconnectedMarkerSize.contextTypes = {
   updateContainer: PropTypes.func,
 };
 
+UnconnectedMarkerSize.displayName = 'UnconnectedMarkerSize';
+
 export default connectToContainer(UnconnectedMarkerSize);