Move chart panel below tree

app/src/components/ChartPanel/ChartTitle.tsx

@@ -11,7 +11,7 @@ function ChartTitle(props: { parameters: ChartParameters; classes: any }) {
       </Typography>
       <br />
       <Typography variant="caption" className={classes.topic}>
-        {parameters.dotPath ? parameters.topic : ''}
+        {parameters.dotPath ? parameters.topic : <span dangerouslySetInnerHTML={{ __html: '&nbsp;' }}></span>}
       </Typography>
     </div>
   )

app/src/components/ChartPanel/index.tsx

@@ -18,6 +18,7 @@ interface Props {
   actions: {
     chart: typeof chartActions
   }
+  classes: any
 }
 
 function spacingForChartCount(count: number): 4 | 6 | 12 {
@@ -75,7 +76,7 @@ function ChartPanel(props: Props) {
   ))
 
   return (
-    <div style={{ width: '100%', height: '100%', padding: '8px', flex: 1, overflow: 'hidden scroll' }}>
+    <div className={props.classes.container}>
       <Grid container spacing={1}>
         <TransitionGroup component={null} className="example">
           {charts}
@@ -114,7 +115,16 @@ const mapDispatchToProps = (dispatch: any) => {
   }
 }
 
-const styles = (theme: Theme) => ({})
+const styles = (theme: Theme) => ({
+  container: {
+    backgroundColor: theme.palette.background.default,
+    width: '100%',
+    height: '100%',
+    padding: '8px',
+    flex: 1,
+    overflow: 'hidden scroll',
+  },
+})
 
 export default connect(
   mapStateToProps,

app/src/components/Layout/ContentView.tsx

@@ -18,17 +18,29 @@ interface Props {
 
 function ContentView(props: Props) {
   const [height, setHeight] = React.useState<string | number>('100%')
+  const [sidebarWidth, setSidebarWidth] = React.useState<string | number>(500)
   const [detectedHeight, setDetectedHeight] = React.useState(0)
+  const [detectedSidebarWidth, setDetectedSidebarWidth] = React.useState(0)
   const detectSize = React.useCallback((width, newHeight) => {
     setDetectedHeight(newHeight)
   }, [])
 
+  const detectSidebarSize = React.useCallback(width => {
+    setDetectedSidebarWidth(width)
+  }, [])
+
   const closeDrawerCompletelyIfItSitsOnTheEdge = React.useCallback(() => {
     if (detectedHeight < 30) {
       setHeight('100%')
     }
   }, [detectedHeight])
 
+  const closeSidebarCompletelyIfItSitsOnTheEdge = React.useCallback(() => {
+    if (detectedSidebarWidth < 30) {
+      setSidebarWidth('0%')
+    }
+  }, [detectedSidebarWidth])
+
   // Open chart panel on start and when a new chart is added but the panel is closed
   React.useEffect(() => {
     const almostClosed = !isNaN(height as any) && detectedHeight < 30
@@ -43,45 +55,56 @@ function ContentView(props: Props) {
 
   return (
     <div className={props.paneDefaults}>
-      <ReactSplitPane
-        step={10}
-        split="horizontal"
-        minSize={0}
-        size={height}
-        defaultSize={'100%'}
-        allowResize={true}
-        style={{ height: 'calc(100vh - 64px)' }}
-        pane1Style={{ maxHeight: '100%' }}
-        pane2Style={{ borderTop: '1px solid #999', display: 'flex' }}
-        onChange={setHeight}
-        onDragFinished={closeDrawerCompletelyIfItSitsOnTheEdge}
-      >
-        <span>
-          <ReactSplitPane
-            step={20}
-            primary="second"
-            className={props.heightProperty}
-            split="vertical"
-            minSize={250}
-            defaultSize={500}
-            allowResize={true}
-            style={{ height: '100%' }}
-            pane1Style={{ overflowX: 'hidden' }}
-            resizerStyle={{ height: '100%' }}
-          >
-            <Tree />
-            <div className={props.paneDefaults} style={{ height: '100%', overflowY: 'auto', overflowX: 'hidden' }}>
+      <span>
+        <ReactSplitPane
+          step={20}
+          primary="second"
+          className={props.heightProperty}
+          split="vertical"
+          minSize={0}
+          size={sidebarWidth}
+          onChange={setSidebarWidth}
+          onDragFinished={closeSidebarCompletelyIfItSitsOnTheEdge}
+          defaultSize={500}
+          allowResize={true}
+          style={{ height: '100%' }}
+          pane1Style={{ overflowX: 'hidden' }}
+          resizerStyle={{ height: '100%' }}
+        >
+          <span>
+            <ReactSplitPane
+              step={10}
+              split="horizontal"
+              minSize={0}
+              size={height}
+              defaultSize={'100%'}
+              allowResize={true}
+              style={{ height: 'calc(100vh - 64px)' }}
+              pane1Style={{ maxHeight: '100%' }}
+              pane2Style={{ borderTop: '1px solid #999', display: 'flex' }}
+              onChange={setHeight}
+              onDragFinished={closeDrawerCompletelyIfItSitsOnTheEdge}
+            >
+              <Tree />
+              {/** Passing height constraints via flex options down */}
+              <div style={{ flex: 1, display: 'flex', height: '100%', width: '100%' }}>
+                {/** Resize detector must not be in the scroll zone, it needs to detect actual available size */}
+                <ReactResizeDetector handleHeight={true} onResize={detectSize} />
+                <ChartPanel />
+              </div>
+            </ReactSplitPane>
+          </span>
+          <div>
+            <ReactResizeDetector handleWidth={true} onResize={detectSidebarSize} />
+            <div
+              className={props.paneDefaults}
+              style={{ minWidth: '250px', height: '100%', overflowY: 'auto', overflowX: 'hidden' }}
+            >
               <Sidebar connectionId={props.connectionId} />
             </div>
-          </ReactSplitPane>
-        </span>
-        {/** Passing height constraints via flex options down */}
-        <div style={{ flex: 1, display: 'flex', height: '100%' }}>
-          {/** Resize detector must not be in the scroll zone, it needs to detect actual available size */}
-          <ReactResizeDetector handleHeight={true} onResize={detectSize} />
-          <ChartPanel />
-        </div>
-      </ReactSplitPane>
+          </div>
+        </ReactSplitPane>
+      </span>
     </div>
   )
 }

app/src/components/Tree/Tree.tsx

@@ -110,6 +110,7 @@ class TreeComponent extends React.PureComponent<Props, State> {
       overflowY: 'scroll',
       overflowX: 'hidden',
       height: '100%',
+      width: '100%',
       paddingBottom: '16px', // avoid conflict with chart panel Resizer
     }