Info no longer triggers visibility.

Author: bpostlethwaite

src/components/containers/Section.js

@@ -1,11 +1,14 @@
+import Info from '../fields/Info';
 import MenuPanel from './MenuPanel';
 import React, {Component, cloneElement} from 'react';
 import PropTypes from 'prop-types';
 import unpackPlotProps from '../../lib/unpackPlotProps';
 import {containerConnectedContextTypes} from '../../lib/connectToContainer';
 
 function childIsVisible(child) {
-  return Boolean((child.props.plotProps || {}).isVisible);
+  const attrVisible = Boolean((child.props.plotProps || {}).isVisible);
+  const sectionVisible = Boolean(child.props['data-section-child-visible']);
+  return attrVisible || sectionVisible;
 }
 
 export default class Section extends Component {
@@ -47,6 +50,7 @@ export default class Section extends Component {
 
       const isAttr = Boolean(child.props.attr);
       let plotProps;
+      let newProps = {};
       if (child.plotProps) {
         plotProps = child.plotProps;
       } else if (isAttr) {
@@ -58,15 +62,19 @@ export default class Section extends Component {
         } else {
           plotProps = unpackPlotProps(child.props, context);
         }
+
+        // assign plotProps as a prop of children. If they are connectedToContainer
+        // it will see plotProps and skip recomputing them.
+        newProps = {plotProps, key: i};
+      } else if (child.type === Info) {
+        // Info panels do not change section visibility.
+        newProps = {key: i, 'data-section-child-visible': false};
       } else {
-        plotProps = {isVisible: true};
+        // custom UI currently forces section visibility.
+        newProps = {key: i, 'data-section-child-visible': true};
       }
 
-      // assign plotProps as a prop of children. If they are connectedToContainer
-      // it will see plotProps and skip recomputing them.
-      const childProps = Object.assign({plotProps}, child.props);
-
-      childProps.key = i;
+      const childProps = Object.assign(newProps, child.props);
       attrChildren.push(cloneElement(child, childProps));
     }
 

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

@@ -50,14 +50,13 @@ describe('Section', () => {
     const wrapper = mount(
       <TestEditor onUpdate={jest.fn()} {...fixtures.scatter()}>
         <Section name="test-section">
-          <Info>INFO</Info>
+          <div className="extra">special extra</div>
         </Section>
       </TestEditor>
     ).find('[name="test-section"]');
 
     expect(wrapper.children().length).toBe(1);
-    expect(wrapper.find(Info).exists()).toBe(true);
-    expect(wrapper.find(Info).text()).toBe('INFO');
+    expect(wrapper.find('.extra').text()).toBe('special extra');
   });
 
   it('is not visible if it contains no visible children', () => {
@@ -102,7 +101,7 @@ describe('Section', () => {
     expect(wrapper.find(Info).text()).toBe('INFO');
   });
 
-  it('will hides even with MenuPanel when attrs not defined', () => {
+  it('will hide with MenuPanel children when attrs not defined', () => {
     const TraceSection = connectTraceToPlot(Section);
     const wrapper = mount(
       <TestEditor onUpdate={jest.fn()} {...fixtures.scatter()}>
@@ -111,14 +110,25 @@ describe('Section', () => {
           <MenuPanel show>
             <Info>INFO</Info>
           </MenuPanel>
-          <MenuPanel show>
-            <Info>MISINFORMATION</Info>
-          </MenuPanel>
         </TraceSection>
       </TestEditor>
     ).find('[name="test-section"]');
 
     expect(wrapper.find(MenuPanel).length).toBe(0);
     expect(wrapper.find(Info).length).toBe(0);
   });
+
+  it('will hide with Info children when attrs not defined', () => {
+    const TraceSection = connectTraceToPlot(Section);
+    const wrapper = mount(
+      <TestEditor onUpdate={jest.fn()} {...fixtures.scatter()}>
+        <TraceSection name="test-section" traceIndex={0}>
+          <Numeric attr="badattr" traceIndex={0} />
+          <Info>INFO</Info>
+        </TraceSection>
+      </TestEditor>
+    ).find('[name="test-section"]');
+
+    expect(wrapper.find(Info).length).toBe(0);
+  });
 });