[explore] add collapsible Control sections

superset/assets/javascripts/explore/components/ControlPanelSection.jsx

@@ -6,25 +6,38 @@ import InfoTooltipWithTrigger from '../../components/InfoTooltipWithTrigger';
 const propTypes = {
   label: PropTypes.string,
   description: PropTypes.string,
-  tooltip: PropTypes.string,
   children: PropTypes.node.isRequired,
+  startExpanded: PropTypes.bool,
 };
 
 const defaultProps = {
   label: null,
   description: null,
-  tooltip: null,
+  startExpanded: false,
 };
 
 export default class ControlPanelSection extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = { expanded: this.props.startExpanded };
+  }
+  toggleExpand() {
+    this.setState({ expanded: !this.state.expanded });
+  }
   renderHeader() {
-    const { label, tooltip } = this.props;
+    const { label, description } = this.props;
     let header;
     if (label) {
       header = (
         <div>
-          {label} &nbsp;
-          {tooltip && <InfoTooltipWithTrigger label={label} tooltip={tooltip} />}
+          <i
+            className={`text-primary expander fa fa-caret-${this.state.expanded ? 'down' : 'right'}`}
+            onClick={this.toggleExpand.bind(this)}
+          />
+          {' '}
+          <span onClick={this.toggleExpand.bind(this)}>{label}</span>
+          {' '}
+          {description && <InfoTooltipWithTrigger label={label} tooltip={description} />}
         </div>
       );
     }
@@ -35,6 +48,8 @@ export default class ControlPanelSection extends React.Component {
     return (
       <Panel
         className="control-panel-section"
+        collapsible
+        expanded={this.state.expanded}
         header={this.renderHeader()}
       >
         {this.props.children}

superset/assets/javascripts/explore/components/ControlPanelsContainer.jsx

@@ -67,11 +67,13 @@ class ControlPanelsContainer extends React.Component {
             <ControlPanelSection
               key={section.label}
               label={section.label}
-              tooltip={section.description}
+              startExpanded={section.expanded}
+              description={section.description}
             >
               {section.controlSetRows.map((controlSets, i) => (
                 <ControlRow
                   key={`controlsetrow-${i}`}
+                  className="control-row"
                   controls={controlSets.map(controlName => (
                     controlName &&
                     this.props.controls[controlName] &&

superset/assets/javascripts/explore/main.css

@@ -73,3 +73,16 @@
   height: 10px;
   margin: 9px 1px;
 }
+.control-panel-section .panel-body {
+  margin-left: 15px;
+  padding-bottom: 0px;
+}
+.control-panel-section .control-label {
+  margin-bottom: 0px;
+}
+.fa.expander {
+  width: 15px;
+}
+.control-panel-section span.label {
+  display: inline-block;
+}