draggable vertical splitter

packages/web/src/tabs/QueryTab.js

@@ -199,15 +199,17 @@ export default function QueryTab({
           editorRef={editorRef}
           readOnly={queryText == loadingText}
         />
-        <ResultTabs sessionId={sessionId} executeNumber={executeNumber}>
+        {sessionId && (
-          <TabPage label="Messages" key="messages">
+          <ResultTabs sessionId={sessionId} executeNumber={executeNumber}>
-            <SessionMessagesView
+            <TabPage label="Messages" key="messages">
-              sessionId={sessionId}
+              <SessionMessagesView
-              onMessageClick={handleMesageClick}
+                sessionId={sessionId}
-              executeNumber={executeNumber}
+                onMessageClick={handleMesageClick}
-            />
+                executeNumber={executeNumber}
-          </TabPage>
+              />
-        </ResultTabs>
+            </TabPage>
+          </ResultTabs>
+        )}
       </VerticalSplitter>
       {toolbarPortalRef &&
         toolbarPortalRef.current &&

packages/web/src/widgets/Splitter.js

@@ -1,6 +1,7 @@
 import _ from 'lodash';
 import React from 'react';
 import styled from 'styled-components';
+import useDimensions from '../utility/useDimensions';
 
 const MainContainer = styled.div`
   flex: 1;
@@ -8,7 +9,22 @@ const MainContainer = styled.div`
   flex-direction: column;
 `;
 
-const ChildContainer = styled.div`
+const VerticalSplitHandle = styled.div`
+  background-color: #ccc;
+  height: 4px;
+  cursor: row-resize;
+  z-index: 1;
+`;
+
+const ChildContainer1 = styled.div`
+  // flex: 0 0 50%;
+  //   flex-basis: 100px;
+  //   flex-grow: 1;
+  display: flex;
+  position: relative;
+`;
+
+const ChildContainer2 = styled.div`
   flex: 1;
   // flex: 0 0 50%;
   //   flex-basis: 100px;
@@ -22,10 +38,49 @@ export function VerticalSplitter({ children }) {
   if (childrenArray.length !== 1 && childrenArray.length != 2) {
     throw new Error('Splitter must have 1 or 2 children');
   }
+  const [refNode, dimensions] = useDimensions();
+  const [height1, setHeight1] = React.useState(0);
+
+  React.useEffect(() => {
+    setHeight1(dimensions.height / 2);
+  }, [dimensions]);
+
+  const [resizeStart, setResizeStart] = React.useState(null);
+
+  React.useEffect(() => {
+    if (resizeStart != null) {
+      const handleResizeMove = (e) => {
+        e.preventDefault();
+        let diff = e.clientY - resizeStart;
+        setResizeStart(e.clientY);
+        setHeight1((v) => v + diff);
+      };
+      const handleResizeEnd = (e) => {
+        e.preventDefault();
+        setResizeStart(null);
+      };
+
+      document.addEventListener('mousemove', handleResizeMove, true);
+      document.addEventListener('mouseup', handleResizeEnd, true);
+
+      return () => {
+        document.removeEventListener('mousemove', handleResizeMove, true);
+        document.removeEventListener('mouseup', handleResizeEnd, true);
+      };
+    }
+  }, [resizeStart]);
+
+  const handleResizeDown = (e) => {
+    setResizeStart(e.clientY);
+  };
+
+  const isSplitter = !!childrenArray[1];
+
   return (
-    <MainContainer>
+    <MainContainer ref={refNode}>
-      <ChildContainer>{childrenArray[0]}</ChildContainer>
+      <ChildContainer1 style={isSplitter ? { height: height1 } : { flex: '1' }}>{childrenArray[0]}</ChildContainer1>
-      {childrenArray[1] && <ChildContainer>{childrenArray[1]}</ChildContainer>}
+      {isSplitter && <VerticalSplitHandle onMouseDown={handleResizeDown} />}
+      {isSplitter && <ChildContainer2>{childrenArray[1]}</ChildContainer2>}
     </MainContainer>
   );
 }