Collapsible Control sections (#3354)

The left panel of the explore view has become crowded and overwhelming
overtime. This PR adds functionality to collapse the control sections,
and sets most sections to be collapse by default as the explore view
opens up.

* breakdown `Query` section for most viz
* bring filters to the top, under Query section
* collapse most sections by default
* removed confusing outdated description for Filter section

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}