fixing bottom panel

Author: dentonwong

Dockerrun.aws.json

@@ -12,7 +12,7 @@
   "Environment": [
     {
       "Name": "API_BASE_URL",
-      "Value": "Reactypev17-env.eba-mbvivk7k.us-east-1.elasticbeanstalk.com"
+      "Value": "Reactype-v17env.eba-sw2fhsbj.us-east-1.elasticbeanstalk.com"
     }
   ]
 }

app/src/components/bottom/BottomPanel.tsx

@@ -22,7 +22,13 @@ const BottomPanel = (props): JSX.Element => {
     const dy = y - e.clientY;
 
     // Adjust the dimension of element
-    node.current.style.height = `${h + dy}px`;
+    const newVal = h + dy;
+    const styles = window.getComputedStyle(node.current);
+    const min = parseInt(styles.minHeight, 10);
+    console.log('is newVal > min newVal', newVal)
+    console.log('is newVal > min min', min)
+    node.current.style.height = newVal > min ? `${h + dy}px` : `${min}px`;
+    console.log('mousemove', node.current.style.height)
   };
 
   const mouseUpHandler = function () {
@@ -33,6 +39,7 @@ const BottomPanel = (props): JSX.Element => {
 
   useEffect(() => {
     node.current.style.height = '50vh';
+    node.current.style.minHeight = '50vh';
   }, []);
 
   return (
@@ -41,7 +48,7 @@ const BottomPanel = (props): JSX.Element => {
       <div id="resize-drag" onMouseDown={mouseDownHandler} tabIndex={0}>
         ......
       </div>
-      <BottomTabs isThemeLight={props.isThemeLight} />
+      <BottomTabs setBottomShow = {props.setBottomShow} isThemeLight={props.isThemeLight} />
     </div></>
   );
 };

app/src/components/bottom/BottomTabs.tsx

@@ -50,6 +50,7 @@ const BottomTabs = (props): JSX.Element => {
     <div
       className={`${classes.root} ${classes.rootLight}`}
       style={{ backgroundColor: '#191919' , zIndex: 1, borderTop: '2px solid grey'}}
+      onMouseOver={()=>{console.log('mouse over'); props.setBottomShow(true)}}
     >
       <Box
         display="flex"

app/src/containers/MainContainer.tsx

@@ -72,9 +72,11 @@ const MainContainer = (props): JSX.Element => {
 
     useEffect(() => {
       const handleClick = (event) => {
+        console.log(event.target)
+        
         if (event.type === "click" &&
           (bottomPanelRef.current &&
-          !bottomPanelRef.current.contains(event.target)) || (event.type === "message" && event.data === 'iframeClicked')) {
+          !bottomPanelRef.current.contains(event.target) && event.target.getAttribute("role") != "menu" && !event.target.classList.contains('MuiInput-input')) || (event.type === "message" && event.data === 'iframeClicked')) {
           //menuButtonRef is to ensure that handleClose does not get invoked when the user clicks on the menu dropdown button
           handleClose();
         }
@@ -105,8 +107,8 @@ const MainContainer = (props): JSX.Element => {
         <CanvasContainer isThemeLight={props.isThemeLight} />
         <DemoRender />
       </div>
-      <div onMouseOver={()=>setBottomShow(true)} className={showPanel} ref={ref}>
-        <BottomPanel isThemeLight={props.isThemeLight} />
+      <div className={showPanel} ref = {ref}>
+        <BottomPanel setBottomShow = {setBottomShow} isThemeLight={props.isThemeLight} />
       </div>
     </div>
   );

app/src/public/styles/style.css

@@ -513,10 +513,10 @@ BOTTOM PANEL
 .bottom-hide:focus-within {
   max-height: 100%;
 }
-
+/* 
 .bottom-hide:hover {
   max-height: 100%;
-}
+} */
 
 .tab-content {
   height: calc(100% - 76px);
@@ -528,10 +528,17 @@ BOTTOM PANEL
   background-color: #191919;
 }
 
-.MuiDataGrid-menuList {
+.MuiDataGrid-menuList, .MuiDataGrid-columnsPanel, .MuiDataGrid-filterForm {
 
   background-color: #333333
 }
+.MuiDataGrid-panelHeader, .MuiDataGrid-panelFooter {
+
+  background-color: #252525
+
+}
+
+
 
 #resize-drag {