query result

packages/api/src/controllers/jsldata.js

@@ -8,12 +8,13 @@ module.exports = {
   openedReaders: {},
 
   closeReader(jslid) {
+    // console.log('CLOSING READER');
     if (!this.openedReaders[jslid]) return Promise.resolve();
     return new Promise((resolve, reject) => {
       this.openedReaders[jslid].reader.close((err) => {
         if (err) reject(err);
-        resolve();
         delete this.openedReaders[jslid];
+        resolve();
       });
     });
   },
@@ -32,6 +33,7 @@ module.exports = {
   },
 
   openReader(jslid) {
+    // console.log('OPENING READER');
     const file = path.join(jsldir(), `${jslid}.jsonl`);
     return new Promise((resolve, reject) =>
       lineReader.open(file, (err, reader) => {
@@ -47,7 +49,7 @@ module.exports = {
 
   async ensureReader(jslid, offset) {
     if (this.openedReaders[jslid] && this.openedReaders[jslid].readedCount > offset) {
-      await this.closeReader();
+      await this.closeReader(jslid);
     }
     if (!this.openedReaders[jslid]) {
       await this.openReader(jslid);
@@ -65,6 +67,7 @@ module.exports = {
 
   getRows_meta: 'get',
   async getRows({ jslid, offset, limit }) {
+    // console.log('GET ROWS', offset, limit);
     await this.ensureReader(jslid, offset);
     const res = [];
     for (let i = 0; i < limit; i += 1) {

packages/web/src/tabs/QueryTab.js

@@ -84,7 +84,7 @@ export default function QueryTab({ tabid, conid, database, tabVisible, toolbarPo
           onKeyDown={handleKeyDown}
         />
         <ResultTabs sessionId={sessionId}>
-          <TabPage label="Messages">
+          <TabPage label="Messages" key="messages">
             <SessionMessagesView sessionId={sessionId} />
           </TabPage>
         </ResultTabs>

packages/web/src/widgets/TabControl.js

@@ -22,10 +22,21 @@ const TabNameWrapper = styled.span`
   margin-left: 5px;
 `;
 
+// visibility: ${(props) =>
+//   // @ts-ignore
+//   props.tabVisible ? 'visible' : 'none'};
+
 const TabContainer = styled.div`
-  position: relative;
+  position: absolute;
   display: flex;
-  flex-grow: 1;
+  left: 0;
+  right: 0
+  top: 0;
+   bottom: 0;
+
+  ${(props) =>
+    // @ts-ignore
+    !props.tabVisible && `visibility: hidden;`}
 `;
 
 const TabsContainer = styled.div`
@@ -35,19 +46,33 @@ const TabsContainer = styled.div`
   background-color: ${theme.tabsPanel.background};
 `;
 
+const TabContentContainer = styled.div`
+  flex: 1;
+  position: relative;
+`;
+
 const MainContainer = styled.div`
   display: flex;
   flex: 1;
   flex-direction: column;
 `;
 
-export function TabPage({ label = undefined, children }) {
+export function TabPage({ key, label, children }) {
   return children;
 }
 
 export function TabControl({ children }) {
   const [value, setValue] = React.useState(0);
+
+  // const [mountedTabs, setMountedTabs] = React.useState({});
+
   const childrenArray = (_.isArray(children) ? _.flatten(children) : [children]).filter((x) => x);
+
+  // // cleanup closed tabs
+  // if (_.difference(_.keys(mountedTabs), _.map(childrenArray, 'props.key')).length > 0) {
+  //   setMountedTabs(_.pickBy(mountedTabs, (v, k) => childrenArray.find((x) => x.props.key == k)));
+  // }
+
   return (
     <MainContainer>
       <TabsContainer>
@@ -60,7 +85,20 @@ export function TabControl({ children }) {
             </TabItem>
           ))}
       </TabsContainer>
-      {<TabContainer key={value}>{childrenArray[value] && childrenArray[value].props.children}</TabContainer>}
+      <TabContentContainer>
+        {childrenArray.map((tab, index) => {
+          const tabVisible = index == value;
+          return (
+            <TabContainer
+              // @ts-ignore
+              tabVisible={tabVisible}
+              key={tab.props.key}
+            >
+              {childrenArray[index] && childrenArray[index].props.children}
+            </TabContainer>
+          );
+        })}
+      </TabContentContainer>
     </MainContainer>
   );
 }