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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@journeyapps-labs/reactor-mod-data-browser",
-  "version": "3.2.0",
+  "version": "3.3.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.1.0",
-    "@journeyapps-labs/reactor-mod-editor": "2.1.0",
+    "@journeyapps-labs/reactor-mod": "5.3.1",
+    "@journeyapps-labs/reactor-mod-editor": "2.2.1",
     "@journeyapps/db": "^8.1.1",
     "@journeyapps/parser-schema": "^8.2.5",
     "@projectstorm/react-workspaces-core": "4.2.3",
@@ -34,7 +34,7 @@
     "uuid": "^13.0.0"
   },
   "devDependencies": {
-    "@journeyapps-labs/lib-reactor-builder": "2.0.5",
+    "@journeyapps-labs/lib-reactor-builder": "3.0.1",
     "@types/async": "^3.2.25",
     "@types/lodash": "^4.17.24",
     "@types/react": "^19.2.14",

package/src/core/AbstractConnection.ts

@@ -7,7 +7,7 @@ import { v4 } from 'uuid';
 import { BaseObserver } from '@journeyapps-labs/common-utils';
 import { Collection, LifecycleCollection } from '@journeyapps-labs/lib-reactor-data-layer';
 import { when } from 'mobx';
-import { observable } from 'mobx';
+import { computed, observable } from 'mobx';
 import { EntityDescription } from '@journeyapps-labs/reactor-mod';
 import { V4BackendClient, V4Index, V4Indexes } from '@journeyapps-labs/client-backend-v4';
 import { SchemaModelObject } from './SchemaModelObject';
@@ -24,18 +24,27 @@ export interface AbstractConnectionListener {
   removed: () => any;
 }
 
+export enum ConnectionOnlineState {
+  OFFLINE = 'offline',
+  LOADING = 'loading',
+  ONLINE = 'online'
+}
+
 export abstract class AbstractConnection extends BaseObserver<AbstractConnectionListener> {
   id: string;
   @observable accessor color: string;
+  @observable accessor onlineState: ConnectionOnlineState;
 
   schema_models_collection: Collection<ObjectType>;
   schema_models: LifecycleCollection<ObjectType, SchemaModelDefinition>;
   private fetch_indexes_promise: Promise<V4Indexes['models']>;
+  private initialize_online_promise: Promise<void>;
 
   constructor(public factory: AbstractConnectionFactory) {
     super();
     this.id = v4();
     this.color = getDefaultConnectionColor(this.id);
+    this.onlineState = ConnectionOnlineState.OFFLINE;
     this.schema_models_collection = new Collection();
     this.schema_models = new LifecycleCollection({
       collection: this.schema_models_collection,
@@ -88,7 +97,16 @@ export abstract class AbstractConnection extends BaseObserver<AbstractConnection
     return this.schema_models.items.find((i) => i.definition.name === name);
   }
 
+  @computed get isOnline() {
+    return this.onlineState === ConnectionOnlineState.ONLINE;
+  }
+
+  @computed get isLoadingOnline() {
+    return this.onlineState === ConnectionOnlineState.LOADING;
+  }
+
   async waitForSchemaModelDefinitionByName(name: string) {
+    await this.ensureOnline();
     await when(() => !!this.getSchemaModelDefinitionByName(name));
     return this.getSchemaModelDefinitionByName(name);
   }
@@ -107,10 +125,35 @@ export abstract class AbstractConnection extends BaseObserver<AbstractConnection
     });
   }
 
-  async init() {
+  async init() {}
+
+  protected async connectOnline() {
     await this.reload();
   }
 
+  async ensureOnline() {
+    if (this.isOnline) {
+      return;
+    }
+    if (!this.initialize_online_promise) {
+      this.initialize_online_promise = this.initializeOnline();
+    }
+    await this.initialize_online_promise;
+  }
+
+  private async initializeOnline() {
+    this.onlineState = ConnectionOnlineState.LOADING;
+    try {
+      await this.connectOnline();
+      this.onlineState = ConnectionOnlineState.ONLINE;
+    } finally {
+      if (this.onlineState === ConnectionOnlineState.LOADING) {
+        this.onlineState = ConnectionOnlineState.OFFLINE;
+      }
+      this.initialize_online_promise = null;
+    }
+  }
+
   protected async getSchemaModelDefinitions() {
     const schema = await this.getSchema();
     return _.map(schema.objects, (o) => {

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

@@ -27,7 +27,7 @@ export const buildSimpleQueryColumns = (options: BuildSimpleQueryColumnsOptions)
     if (!direction) {
       return label;
     }
-    return `${label} ${direction === SortDirection.ASC ? '↑' : '↓'}`;
+    return `${label} ${direction === SortDirection.ASC ? '↓' : '↑'}`;
   };
 
   return [

package/src/core/query/widgets/SmartColumnWidget.tsx

@@ -1,11 +1,10 @@
 import * as React from 'react';
 import styled from '@emotion/styled';
-import { ObjectType, Type, Variable } from '@journeyapps/db';
+import { ObjectType, Variable } from '@journeyapps/db';
 import { ColumnDisplayWidget } from './ColumnDisplayWidget';
-import { SmartFilterMetadataWidget, SmartFilterWidget } from './SmartFilterWidget';
+import { SmartFilterWidget } from './SmartFilterWidget';
 import { SimpleFilter } from '../filters';
-import { PanelTitleToolbarButtonWidget } from '@journeyapps-labs/reactor-mod';
-import type { SortDirection } from '../query-simple/SimpleQuery';
+import { SortDirection } from '../query-simple/SimpleQuery';
 
 export interface SmartColumnWidgetProps {
   variable: Variable;
@@ -18,7 +17,9 @@ export interface SmartColumnWidgetProps {
 
 export const SmartColumnWidget: React.FC<SmartColumnWidgetProps> = (props) => {
   const baseLabel = props.variable.label || props.variable.name;
-  const displayLabel = props.sortDirection ? `${baseLabel} ${props.sortDirection === 'asc' ? '↑' : '↓'}` : baseLabel;
+  const displayLabel = props.sortDirection
+    ? `${baseLabel} ${props.sortDirection === SortDirection.ASC ? '↓' : '↑'}`
+    : baseLabel;
   let display = <ColumnDisplayWidget label={displayLabel} onClick={props.onToggleSort} />;
   if (props.type) {
     display = (

package/src/core/types/ManualConnection.ts

@@ -22,6 +22,10 @@ export class ManualConnection extends AbstractConnection {
     return Database.instance(this.options);
   }
 
+  async init() {
+    await this.ensureOnline();
+  }
+
   _serialize(): ManualConnectionDetails {
     return this.options;
   }

package/src/entities/ConnectionEntityDefinition.tsx

@@ -1,5 +1,6 @@
 import {
   DescendantEntityProviderComponent,
+  DescendantLoadingEntityProviderComponent,
   EntityCardsPresenterComponent,
   EntityDefinition,
   EntityDescriberComponent,
@@ -7,13 +8,17 @@ import {
   inject,
   InlineTreePresenterComponent,
   SearchableTreeSearchScope,
-  SimpleEntitySearchEngineComponent
+  SimpleEntitySearchEngineComponent,
+  TreeBadgeWidget,
+  ThemeStore
 } from '@journeyapps-labs/reactor-mod';
+import * as React from 'react';
 import { DataBrowserEntities } from '../entities';
 import { ConnectionStore } from '../stores/ConnectionStore';
 import { AbstractConnection } from '../core/AbstractConnection';
 import { AddConnectionAction } from '../actions/connections/AddConnectionAction';
 import { SavedQueryEntity, SavedQueryStore } from '../stores/SavedQueryStore';
+import { SchemaModelDefinition } from '../core/SchemaModelDefinition';
 
 export class ConnectionEntityDefinition extends EntityDefinition<AbstractConnection> {
   @inject(ConnectionStore)
@@ -22,6 +27,9 @@ export class ConnectionEntityDefinition extends EntityDefinition<AbstractConnect
   @inject(SavedQueryStore)
   accessor savedQueryStore: SavedQueryStore;
 
+  @inject(ThemeStore)
+  accessor themeStore: ThemeStore;
+
   constructor() {
     super({
       type: DataBrowserEntities.CONNECTION,
@@ -56,14 +64,30 @@ export class ConnectionEntityDefinition extends EntityDefinition<AbstractConnect
       new InlineTreePresenterComponent<AbstractConnection>({
         loadChildrenAsNodesAreOpened: true,
         cacheTreeEntities: true,
-        searchScope: SearchableTreeSearchScope.VISIBLE_ONLY
+        searchScope: SearchableTreeSearchScope.VISIBLE_ONLY,
+        augmentTreeNodeProps: (entity) => {
+          if (!entity.isOnline) {
+            return {};
+          }
+          const theme = this.themeStore.getCurrentTheme();
+          return {
+            rightChildren: (
+              <TreeBadgeWidget
+                icon="bolt"
+                background={'transparent'}
+                iconColor={theme.status.success}
+                tooltip="Connection online"
+              />
+            )
+          };
+        }
       })
     );
 
     this.registerComponent(new EntityCardsPresenterComponent<AbstractConnection>());
 
     this.registerComponent(
-      new DescendantEntityProviderComponent<AbstractConnection>({
+      new DescendantLoadingEntityProviderComponent<AbstractConnection, SchemaModelDefinition>({
         descendantType: DataBrowserEntities.SCHEMA_MODEL_DEFINITION,
         generateOptions: (parent) => {
           return {
@@ -71,7 +95,11 @@ export class ConnectionEntityDefinition extends EntityDefinition<AbstractConnect
               label: 'Models',
               icon: 'cube'
             },
-            descendants: parent.schema_models.items
+            descendants: parent.schema_models.items,
+            loading: () => parent.isLoadingOnline,
+            refreshDescendants: async () => {
+              await parent.ensureOnline();
+            }
           };
         }
       })

package/src/panels/model-json/ModelJsonPanelWidget.tsx

@@ -1,9 +1,9 @@
 import * as React from 'react';
-import { useEffect, useState } from 'react';
+import { JSX, useEffect, useState } from 'react';
 import { observer } from 'mobx-react';
 import styled from '@emotion/styled';
 import { BorderLayoutWidget, LoadingPanelWidget, PanelToolbarWidget } from '@journeyapps-labs/reactor-mod';
-import { saveFile, copyTextToClipboard } from '@journeyapps-labs/lib-reactor-utils';
+import { copyTextToClipboard, saveFile } from '@journeyapps-labs/lib-reactor-utils';
 import { ModelJsonPanelModel } from './ModelJsonPanelFactory';
 import { SimpleEditorWidget } from '@journeyapps-labs/reactor-mod-editor';
 
@@ -25,7 +25,7 @@ namespace S {
 }
 
 export const ModelJsonPanelWidget: React.FC<QueryPanelWidgetProps> = observer((props) => {
-  const [json, setJson] = useState(null);
+  const [json, setJson] = useState<string | null>(null);
 
   useEffect(() => {
     if (!props.model?.model?.data) {
@@ -39,8 +39,8 @@ export const ModelJsonPanelWidget: React.FC<QueryPanelWidgetProps> = observer((p
     }
   }, [props.model.model?.data]);
 
-  let top = null;
-  if (props.model.model) {
+  let top: JSX.Element;
+  if (props.model.model && json) {
     top = (
       <PanelToolbarWidget
         btns={[
@@ -67,6 +67,8 @@ export const ModelJsonPanelWidget: React.FC<QueryPanelWidgetProps> = observer((p
             label: 'ID',
             value: props.model?.id
           },
+
+          // @ts-ignore FIXME, this can take null
           props.model?.field
             ? {
                 label: 'Field',
@@ -83,7 +85,7 @@ export const ModelJsonPanelWidget: React.FC<QueryPanelWidgetProps> = observer((p
       {() => {
         return (
           <BorderLayoutWidget top={top}>
-            <S.SimpleEditor lang="application/json" path={`${props.model.model.id}`} text={json} />
+            <S.SimpleEditor lang="application/json" path={`${props.model.model.id}`} text={json!} />
           </BorderLayoutWidget>
         );
       }}

package/src/panels/query/QueryPanelFactory.tsx

@@ -4,7 +4,7 @@ import { QueryPanelWidget } from './QueryPanelWidget';
 import { AbstractQuery } from '../../core/query/AbstractQuery';
 import { ConnectionStore } from '../../stores/ConnectionStore';
 import { observable } from 'mobx';
-import { WorkspaceModelFactoryEvent } from '@projectstorm/react-workspaces-core';
+import { WorkspaceEngine, WorkspaceModelFactoryEvent } from '@projectstorm/react-workspaces-core';
 import { AbstractSerializableQuery } from '../../core/query/AbstractSerializableQuery';
 import { SavedQueryStore } from '../../stores/SavedQueryStore';
 import { AbstractConnection } from '../../core/AbstractConnection';
@@ -48,7 +48,7 @@ export class QueryPanelModel extends ReactorPanelModel {
     };
   }
 
-  fromArray(data: ReturnType<this['toArray']>, engine) {
+  fromArray(data: ReturnType<this['toArray']>, engine: WorkspaceEngine) {
     super.fromArray(data, engine);
     this.current_page = data.current_page || 0;
   }

package/src/stores/ConnectionStore.ts

@@ -1,6 +1,6 @@
 import { AbstractStore, LocalStorageSerializer } from '@journeyapps-labs/reactor-mod';
 import { AbstractConnection, AbstractConnectionSerialized } from '../core/AbstractConnection';
-import { action, computed, observable, runInAction, when } from 'mobx';
+import { computed, observable, runInAction, when } from 'mobx';
 import { AbstractConnectionFactory } from '../core/AbstractConnectionFactory';
 import { getDefaultConnectionColor } from '../core/connection-colors';
 
@@ -51,9 +51,18 @@ export class ConnectionStore extends AbstractStore<ConnectionStoreSerialized> {
   }
 
   async deserializeConnection(data: AbstractConnectionSerialized) {
-    let conn = this._connectionFactories.get(data.factory).generateConnection();
+    let conn = this._connectionFactories.get(data.factory)?.generateConnection();
+    if (!conn) {
+      return null;
+    }
+
     conn.id = data.id;
-    await conn._deSerialize(data.payload);
+    try {
+      await conn._deSerialize(data.payload);
+    } catch (ex) {
+      this.logger.error(`Failed to deserialize connection: [${conn.id}]`, ex);
+      return null;
+    }
     conn.color = data.color || getDefaultConnectionColor(conn.id);
     return conn;
   }
@@ -66,9 +75,11 @@ export class ConnectionStore extends AbstractStore<ConnectionStoreSerialized> {
           return this.deserializeConnection(connSer);
         })
       );
-      connections.forEach((c) => {
-        this.addConnection(c);
-      });
+      connections
+        .filter((c) => !!c)
+        .forEach((c) => {
+          this.addConnection(c);
+        });
     });
   }