@journeyapps-labs/reactor-mod-data-browser 3.1.2 → 3.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@journeyapps-labs/reactor-mod-data-browser",
-  "version": "3.1.2",
+  "version": "3.2.0",
   "main": "./dist/index.js",
   "typings": "./dist/@types/index",
   "publishConfig": {
@@ -21,8 +21,8 @@
     "@journeyapps-labs/common-sdk": "^1.0.3",
     "@journeyapps-labs/common-utils": "^1.0.1",
     "@journeyapps-labs/lib-reactor-data-layer": "1.0.10",
-    "@journeyapps-labs/reactor-mod": "5.0.2",
-    "@journeyapps-labs/reactor-mod-editor": "2.0.2",
+    "@journeyapps-labs/reactor-mod": "5.1.0",
+    "@journeyapps-labs/reactor-mod-editor": "2.1.0",
     "@journeyapps/db": "^8.1.1",
     "@journeyapps/parser-schema": "^8.2.5",
     "@projectstorm/react-workspaces-core": "4.2.3",

package/src/core/query/query-simple/SimpleQuery.tsx

@@ -15,6 +15,7 @@ import { buildSimpleQueryColumns } from './SimpleQueryColumns';
 import { SimpleQuerySortState } from './SimpleQuerySortState';
 import { SimpleQueryFilterState } from './SimpleQueryFilterState';
 import { AbstractQuery } from '../AbstractQuery';
+import { StandardModelFields } from '../StandardModelFields';
 import * as _ from 'lodash';
 
 export interface SimpleQueryOptions {
@@ -81,6 +82,12 @@ export class SimpleQuery extends AbstractSerializableQuery<SimpleQueryEncoded> {
         onStateChange();
       }
     });
+
+    // Some code paths construct a shell query (no definition) before deserialize/hydration.
+    // Only seed the default sort once a definition exists to avoid premature load() calls.
+    if (options.definition && this.sortState.sorts.length === 0) {
+      this.sortState.addSort(SimpleQuerySort.create(StandardModelFields.UPDATED_AT, SortDirection.DESC));
+    }
   }
 
   matches(query: AbstractQuery): boolean {

package/src/panels/query/PageResultsWidget.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { useEffect, useRef } from 'react';
 import { Page } from '../../core/query/Page';
 import { themed, ioc, ScrollableDivCss, System, TableWidget, LoadingPanelWidget } from '@journeyapps-labs/reactor-mod';
 import { AbstractQuery } from '../../core/query/AbstractQuery';
@@ -9,14 +10,39 @@ import { SchemaModelObject } from '../../core/SchemaModelObject';
 export interface PageResultsWidgetProps {
   page: Page;
   query: AbstractQuery;
+  scrollTop: number;
+  scrollLeft: number;
+  onScroll: (offsets: { top: number; left: number }) => void;
 }
 
 export const PageResultsWidget: React.FC<PageResultsWidgetProps> = observer((props) => {
   const system = ioc.get(System);
   const rows = props.page.loading ? [] : props.page.asRows();
+  const ref = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (!ref.current) {
+      return;
+    }
+    if (ref.current.scrollTop !== props.scrollTop) {
+      ref.current.scrollTop = props.scrollTop;
+    }
+    if (ref.current.scrollLeft !== props.scrollLeft) {
+      ref.current.scrollLeft = props.scrollLeft;
+    }
+  }, [props.scrollLeft, props.scrollTop]);
 
   return (
-    <S.Container>
+    <S.Container
+      ref={ref}
+      onScroll={(event) => {
+        const target = event.currentTarget;
+        props.onScroll({
+          top: target.scrollTop,
+          left: target.scrollLeft
+        });
+      }}
+    >
       <TableWidget
         onContextMenu={(event, row) => {
           system

package/src/panels/query/QueryPanelFactory.tsx

@@ -9,6 +9,7 @@ import { AbstractSerializableQuery } from '../../core/query/AbstractSerializable
 import { SavedQueryStore } from '../../stores/SavedQueryStore';
 import { AbstractConnection } from '../../core/AbstractConnection';
 import { SharedConnectionPanelFactory } from '../_shared/SharedConnectionPanelFactory';
+import { Page } from '../../core/query/Page';
 
 export class QueryPanelModel extends ReactorPanelModel {
   @inject(ConnectionStore)
@@ -20,11 +21,20 @@ export class QueryPanelModel extends ReactorPanelModel {
   @observable
   accessor current_page: number;
 
+  @observable.ref
+  accessor current_page_data: Page | null;
+
+  accessor table_scroll_top: number;
+  accessor table_scroll_left: number;
+
   constructor(query: AbstractQuery) {
     super(QueryPanelFactory.TYPE);
     this.setExpand(true, true);
     this.query = query;
     this.current_page = 0;
+    this.current_page_data = null;
+    this.table_scroll_top = 0;
+    this.table_scroll_left = 0;
   }
 
   isSerializable() {
@@ -51,6 +61,7 @@ export class QueryPanelModel extends ReactorPanelModel {
 
   decodeEntities(data: ReturnType<this['encodeEntities']>) {
     this.query = data.query;
+    this.current_page_data = null;
   }
 
   async loadSavedQuery(id: string): Promise<void> {
@@ -59,6 +70,7 @@ export class QueryPanelModel extends ReactorPanelModel {
       return;
     }
     this.current_page = 0;
+    this.current_page_data = null;
     this.query = query;
     await query.load();
   }

package/src/panels/query/QueryPanelWidget.tsx

@@ -22,28 +22,34 @@ namespace S {
 }
 
 export const QueryPanelWidget: React.FC<QueryPanelWidgetProps> = observer((props) => {
-  const [displayPage, setDisplayPage] = useState<Page>(null);
   const [loading, setLoading] = useState(false);
-  const displayPageRef = useRef<Page>(null);
   const pendingDisposerRef = useRef<() => void>(null);
 
   const setVisiblePage = (page: Page) => {
-    displayPageRef.current = page;
-    setDisplayPage(page);
+    props.model.current_page_data = page;
   };
 
   useEffect(() => {
-    if (!props.model.query) {
-      return;
-    }
-    props.model.query.load();
-  }, [props.model.query]);
+    return autorun(() => {
+      const query = props.model.query;
+      if (!query) {
+        return;
+      }
+      if (props.model.current_page_data) {
+        return;
+      }
+      if (query.totalPages !== 0) {
+        return;
+      }
+      void query.load();
+    });
+  }, [props.model]);
 
   useEffect(() => {
     return autorun(() => {
       if (props.model.query) {
         const nextPage = props.model.query.getPage(props.model.current_page);
-        const currentPage = displayPageRef.current;
+        const currentPage = props.model.current_page_data;
 
         if (!currentPage) {
           setVisiblePage(nextPage);
@@ -76,7 +82,7 @@ export const QueryPanelWidget: React.FC<QueryPanelWidgetProps> = observer((props
         });
       }
     });
-  }, [props.model.query]);
+  }, [props.model]);
 
   useEffect(() => {
     return () => {
@@ -85,7 +91,8 @@ export const QueryPanelWidget: React.FC<QueryPanelWidgetProps> = observer((props
     };
   }, []);
 
-  const activePage = displayPage || (props.model.query ? props.model.query.getPage(props.model.current_page) : null);
+  const activePage =
+    props.model.current_page_data || (props.model.query ? props.model.query.getPage(props.model.current_page) : null);
 
   return (
     <LoadingPanelWidget loading={!props.model.query || !activePage}>
@@ -120,7 +127,16 @@ export const QueryPanelWidget: React.FC<QueryPanelWidgetProps> = observer((props
                 />
               }
             >
-              <PageResultsWidget query={props.model.query} page={activePage} />
+              <PageResultsWidget
+                query={props.model.query}
+                page={activePage}
+                scrollTop={props.model.table_scroll_top}
+                scrollLeft={props.model.table_scroll_left}
+                onScroll={({ top, left }) => {
+                  props.model.table_scroll_top = top;
+                  props.model.table_scroll_left = left;
+                }}
+              />
             </BorderLayoutWidget>
           </S.Container>
         );