add customConfig visibility_rules

Author: VeraZab

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/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/lib/connectToContainer.js

@@ -1,6 +1,6 @@
 import React, {Component} from 'react';
 import PropTypes from 'prop-types';
-import unpackPlotProps from './unpackPlotProps';
+import unpackPlotProps, {isVisibleGivenCustomConfig} from './unpackPlotProps';
 import {getDisplayName} from '../lib';
 
 export const containerConnectedContextTypes = {
@@ -18,6 +18,8 @@ export const containerConnectedContextTypes = {
   plotly: PropTypes.object,
   updateContainer: PropTypes.func,
   traceIndexes: PropTypes.array,
+  customConfig: PropTypes.object,
+  hasValidCustomConfigVisibilityRules: PropTypes.bool,
 };
 
 export default function connectToContainer(WrappedComponent, config = {}) {
@@ -44,7 +46,7 @@ export default function connectToContainer(WrappedComponent, config = {}) {
     }
 
     setLocals(props, context) {
-      this.plotProps = unpackPlotProps(props, context);
+      this.plotProps = unpackPlotProps(props, context, WrappedComponent);
       this.attr = props.attr;
       ContainerConnectedComponent.modifyPlotProps(props, context, this.plotProps);
     }
@@ -62,7 +64,17 @@ export default function connectToContainer(WrappedComponent, config = {}) {
       // is also wrapped by a component that `unpackPlotProps`. That way inner
       // component can skip computation as it can see plotProps is already defined.
       const {plotProps = this.plotProps, ...props} = Object.assign({}, this.plotProps, this.props);
-      if (props.isVisible) {
+      const wrappedComponentDisplayName =
+        WrappedComponent && WrappedComponent.displayName ? WrappedComponent.displayName : null;
+
+      if (
+        isVisibleGivenCustomConfig(
+          props.isVisible,
+          props,
+          this.context,
+          wrappedComponentDisplayName
+        )
+      ) {
         return <WrappedComponent {...props} plotProps={plotProps} />;
       }
 

src/lib/index.js

@@ -23,7 +23,11 @@ import getAllAxes, {
 } from './getAllAxes';
 import localize, {localizeString} from './localize';
 import tinyColor from 'tinycolor2';
-import unpackPlotProps from './unpackPlotProps';
+import unpackPlotProps, {
+  computeCustomConfigVisibility,
+  hasValidCustomConfigVisibilityRules,
+  isVisibleGivenCustomConfig,
+} from './unpackPlotProps';
 import walkObject, {isPlainObject} from './walkObject';
 import {traceTypeToPlotlyInitFigure, plotlyTraceToCustomTrace} from './customTraceType';
 import * as PlotlyIcons from 'plotly-icons';
@@ -216,6 +220,7 @@ function getParsedTemplateString(originalString, context) {
 
 export {
   adjustColorscale,
+  computeCustomConfigVisibility,
   axisIdToAxisName,
   bem,
   camelCase,
@@ -244,6 +249,7 @@ export {
   getFullTrace,
   getSubplotTitle,
   isPlainObject,
+  hasValidCustomConfigVisibilityRules,
   localize,
   localizeString,
   lowerCase,
@@ -261,5 +267,6 @@ export {
   transpose,
   unpackPlotProps,
   upperCase,
+  isVisibleGivenCustomConfig,
   walkObject,
 };

src/lib/unpackPlotProps.js

@@ -1,7 +1,104 @@
+/* eslint-disable no-console */
+
 import nestedProperty from 'plotly.js/src/lib/nested_property';
 import isNumeric from 'fast-isnumeric';
 import {MULTI_VALUED, MULTI_VALUED_PLACEHOLDER} from './constants';
 
+const hasFullValue = fullValue => fullValue !== void 0 && fullValue !== null;
+
+export function hasValidCustomConfigVisibilityRules(customConfig) {
+  if (
+    customConfig &&
+    customConfig === Object(customConfig) &&
+    Object.keys(customConfig).length &&
+    customConfig.visibility_rules
+  ) {
+    if (customConfig.visibility_rules.blacklist && customConfig.visibility_rules.whitelist) {
+      console.error(
+        'customConfig.visibility_rules can have a blacklist OR whitelist key, both are present in your config.'
+      );
+      return false;
+    }
+
+    if (
+      !Object.keys(customConfig.visibility_rules).some(key =>
+        ['blacklist', 'whitelist'].includes(key)
+      )
+    ) {
+      console.error(
+        'customConfig.visibility_rules must have at least a blacklist or whitelist key.'
+      );
+      return false;
+    }
+
+    const isValidRule = rule => {
+      if (rule.exceptions) {
+        return rule.exceptions.every(isValidRule);
+      }
+      return rule.type && ['attrName', 'controlType'].includes(rule.type) && rule.regex_match;
+    };
+
+    const errorMessage =
+      "All rules and exceptions must have a type (one of: 'attrName' or 'controlType') and regex_match key.";
+
+    if (
+      customConfig.visibility_rules.blacklist &&
+      !customConfig.visibility_rules.blacklist.every(isValidRule)
+    ) {
+      console.error(errorMessage);
+      return false;
+    }
+
+    if (
+      customConfig.visibility_rules.whitelist &&
+      !customConfig.visibility_rules.whitelist.every(isValidRule)
+    ) {
+      console.error(errorMessage);
+      return false;
+    }
+
+    return true;
+  }
+  return false;
+}
+
+export function computeCustomConfigVisibility(props, customConfig, wrappedComponentDisplayName) {
+  let isVisible;
+
+  const isRegexMatch = rule => {
+    const stringToTest = rule.type === 'attrName' ? props.attr : wrappedComponentDisplayName;
+    return RegExp(rule.regex_match).test(stringToTest);
+  };
+
+  const passesTest = rule => {
+    const hasException = rule => {
+      if (rule.exceptions) {
+        return rule.exceptions.some(exception => passesTest(exception));
+      }
+      return false;
+    };
+    return isRegexMatch(rule) && !hasException(rule);
+  };
+
+  if (customConfig.visibility_rules.blacklist) {
+    isVisible = !customConfig.visibility_rules.blacklist.some(passesTest);
+  }
+
+  if (customConfig.visibility_rules.whitelist) {
+    isVisible = customConfig.visibility_rules.whitelist.some(passesTest);
+  }
+
+  return isVisible;
+}
+
+export function isVisibleGivenCustomConfig(initial, nextProps, nextContext, componentDisplayName) {
+  let show = initial;
+  if (show && nextContext.hasValidCustomConfigVisibilityRules) {
+    show = computeCustomConfigVisibility(nextProps, nextContext.customConfig, componentDisplayName);
+  }
+  return show;
+}
+
 export default function unpackPlotProps(props, context) {
   const {container, getValObject, defaultContainer, updateContainer} = context;
 
@@ -28,10 +125,7 @@ export default function unpackPlotProps(props, context) {
     multiValued = true;
   }
 
-  let isVisible = false;
-  if (props.show || (fullValue !== void 0 && fullValue !== null)) {
-    isVisible = true;
-  }
+  const isVisible = Boolean(hasFullValue(fullValue) || props.show);
 
   let defaultValue = props.defaultValue;
   if (defaultValue === void 0 && defaultContainer) {