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,