decouple basic visibility rules from customConfig rules

Author: VeraZab

src/lib/unpackPlotProps.js

@@ -4,44 +4,49 @@ import nestedProperty from 'plotly.js/src/lib/nested_property';
 import isNumeric from 'fast-isnumeric';
 import {MULTI_VALUED, MULTI_VALUED_PLACEHOLDER} from './constants';
 
-export function computeVisibility(props, fullValue, customConfig) {
-  let isVisible = false;
+const hasFullValue = fullValue => fullValue !== void 0 && fullValue !== null;
 
-  const hasFullValue = () => fullValue !== void 0 && fullValue !== null;
-
-  const isValidCustomConfigObject = customConfig => {
-    if (customConfig.visibility_rules) {
-      const logRuleError = () => {
-        console.error(
-          'invalid customConfig: all customConfig visibility rules must include type and regex_match keys.'
-        );
-      };
-
-      if (
-        (customConfig.visibility_rules.blacklist &&
-          customConfig.visibility_rules.blacklist.some(r => !r.type || !r.regex_match)) ||
-        (customConfig.visibility_rules.whitelist &&
-          customConfig.visibility_rules.whitelist.some(r => !r.type || !r.regex_match))
-      ) {
-        logRuleError();
-        return false;
-      }
+export function isValidCustomConfigObject(customConfig) {
+  if (
+    customConfig &&
+    customConfig === Object(customConfig) &&
+    Object.keys(customConfig).length &&
+    customConfig.visibility_rules
+  ) {
+    const logRuleError = () => {
+      console.error(
+        'invalid customConfig: all customConfig visibility rules must include type and regex_match keys.'
+      );
+    };
 
-      if (
-        customConfig.visibility_rules.order &&
-        Array.isArray(customConfig.visibility_rules.order) &&
-        customConfig.visibility_rules.order.some(o => !['blacklist', 'whitelist'].includes(o))
-      ) {
-        console.error(
-          "invalid customConfig: only 2 values are accepted in the visibility_rules.order array: 'blacklist' and 'whitelist'"
-        );
-        return false;
-      }
+    if (
+      (customConfig.visibility_rules.blacklist &&
+        customConfig.visibility_rules.blacklist.some(r => !r.type || !r.regex_match)) ||
+      (customConfig.visibility_rules.whitelist &&
+        customConfig.visibility_rules.whitelist.some(r => !r.type || !r.regex_match))
+    ) {
+      logRuleError();
+      return false;
+    }
 
-      return true;
+    if (
+      customConfig.visibility_rules.order &&
+      Array.isArray(customConfig.visibility_rules.order) &&
+      customConfig.visibility_rules.order.some(o => !['blacklist', 'whitelist'].includes(o))
+    ) {
+      console.error(
+        "invalid customConfig: only 2 values are accepted in the visibility_rules.order array: 'blacklist' and 'whitelist'"
+      );
+      return false;
     }
-    return false;
-  };
+
+    return true;
+  }
+  return false;
+}
+
+export function applyCustomConfigVisibility(props, fullValue, customConfig) {
+  let isVisible = false;
 
   if (
     customConfig &&
@@ -68,34 +73,30 @@ export function computeVisibility(props, fullValue, customConfig) {
 
       if (order[0] === 'blacklist') {
         const shouldBlacklist = matches('blacklist') && !matches('whitelist');
-        if (!shouldBlacklist && hasFullValue()) {
+        if (!shouldBlacklist && hasFullValue(fullValue)) {
           isVisible = true;
         }
       }
 
       if (order[0] === 'whitelist') {
         const shouldWhitelist = matches('whitelist') && !matches('blacklist');
-        if (shouldWhitelist && hasFullValue()) {
+        if (shouldWhitelist && hasFullValue(fullValue)) {
           isVisible = true;
         }
       }
     } else {
       if (customConfig.visibility_rules.blacklist) {
-        if (!matches('blacklist') && hasFullValue()) {
+        if (!matches('blacklist') && hasFullValue(fullValue)) {
           isVisible = true;
         }
       }
 
       if (customConfig.visibility_rules.whitelist) {
-        if (matches('whitelist') && hasFullValue()) {
+        if (matches('whitelist') && hasFullValue(fullValue)) {
           isVisible = true;
         }
       }
     }
-  } else {
-    if (props.show || hasFullValue()) {
-      isVisible = true;
-    }
   }
 
   return isVisible;
@@ -127,7 +128,9 @@ export default function unpackPlotProps(props, context) {
     multiValued = true;
   }
 
-  const isVisible = computeVisibility(props, fullValue, customConfig);
+  const isVisible = isValidCustomConfigObject(customConfig)
+    ? applyCustomConfigVisibility(props, fullValue, customConfig)
+    : Boolean(props.show || hasFullValue(fullValue));
 
   let defaultValue = props.defaultValue;
   if (defaultValue === void 0 && defaultContainer) {