Move chart panel below tree

app/index.html

@@ -114,15 +114,16 @@
       .Resizer.vertical {
         width: 2px;
         margin: 0px -8px 0px 0px;
-        border-left: 4px solid rgba(128, 128, 128, 0);
+        border-left: 0px solid rgba(128, 128, 128, 0);
-        border-right: 4px solid rgba(128, 128, 128, 0);
+        border-right: 8px solid rgba(128, 128, 128, 0);
         cursor: col-resize;
       }
 
       .Resizer.vertical::before {
         content: '•••';
-        margin-left: -6px;
+        margin-left: -11px;
-        height: 100%;
+        height: 3em;
+        margin-top: calc(50vh - 32px);
         display: inline-block;
         vertical-align: middle;
         text-align: center;
@@ -133,8 +134,8 @@
       }
 
       .Resizer.vertical:hover {
-        border-left: 4px solid rgba(130, 130, 130, 0.3);
+        border-left: 0px solid rgba(130, 130, 130, 0.3);
-        border-right: 4px solid rgba(140, 140, 140, 0.3);
+        border-right: 8px solid rgba(140, 140, 140, 0.3);
       }
 
       .Resizer.disabled {

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
+      <span>
-        step={10}
+        <ReactSplitPane
-        split="horizontal"
+          step={20}
-        minSize={0}
+          primary="second"
-        size={height}
+          className={props.heightProperty}
-        defaultSize={'100%'}
+          split="vertical"
-        allowResize={true}
+          minSize={0}
-        style={{ height: 'calc(100vh - 64px)' }}
+          size={sidebarWidth}
-        pane1Style={{ maxHeight: '100%' }}
+          onChange={setSidebarWidth}
-        pane2Style={{ borderTop: '1px solid #999', display: 'flex' }}
+          onDragFinished={closeSidebarCompletelyIfItSitsOnTheEdge}
-        onChange={setHeight}
+          defaultSize={500}
-        onDragFinished={closeDrawerCompletelyIfItSitsOnTheEdge}
+          allowResize={true}
-      >
+          style={{ height: '100%' }}
-        <span>
+          pane1Style={{ overflowX: 'hidden' }}
-          <ReactSplitPane
+          resizerStyle={{ height: '100%' }}
-            step={20}
+        >
-            primary="second"
+          <span>
-            className={props.heightProperty}
+            <ReactSplitPane
-            split="vertical"
+              step={10}
-            minSize={250}
+              split="horizontal"
-            defaultSize={500}
+              minSize={0}
-            allowResize={true}
+              size={height}
-            style={{ height: '100%' }}
+              defaultSize={'100%'}
-            pane1Style={{ overflowX: 'hidden' }}
+              allowResize={true}
-            resizerStyle={{ height: '100%' }}
+              style={{ height: 'calc(100vh - 64px)' }}
-          >
+              pane1Style={{ maxHeight: '100%' }}
-            <Tree />
+              pane2Style={{ borderTop: '1px solid #999', display: 'flex' }}
-            <div className={props.paneDefaults} style={{ height: '100%', overflowY: 'auto', overflowX: 'hidden' }}>
+              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>
+          </div>
-        </span>
+        </ReactSplitPane>
-        {/** Passing height constraints via flex options down */}
+      </span>
-        <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>
   )
 }

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
     }