@journeyapps-labs/reactor-mod-data-browser 2.3.0 → 3.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@journeyapps-labs/reactor-mod-data-browser",
-  "version": "2.3.0",
+  "version": "3.0.0",
   "main": "./dist/index.js",
   "typings": "./dist/@types/index",
   "publishConfig": {
@@ -15,27 +15,30 @@
   "license": "Apache-2.0",
   "dependencies": {
     "@emotion/styled": "^11.14.1",
-    "@fortawesome/react-fontawesome": "^3.0.2",
+    "@fortawesome/react-fontawesome": "^3.1.0",
+    "@journeyapps-labs/client-backend-v4": "1.0.0",
     "@journeyapps-labs/common-ioc": "^1.0.0",
-    "@journeyapps-labs/common-utils": "^1.0.0",
-    "@journeyapps-labs/lib-reactor-data-layer": "^1.0.4",
-    "@journeyapps-labs/reactor-mod": "^2.0.0",
+    "@journeyapps-labs/common-sdk": "^1.0.2",
+    "@journeyapps-labs/common-utils": "^1.0.1",
+    "@journeyapps-labs/lib-reactor-data-layer": "^1.0.5",
+    "@journeyapps-labs/reactor-mod": "2.1.1",
+    "@journeyapps-labs/reactor-mod-editor": "^1.1.7",
     "@journeyapps/db": "^8.1.1",
     "@journeyapps/parser-schema": "^8.2.5",
     "@projectstorm/react-workspaces-core": "4.2.2",
     "async": "^3.2.6",
     "lodash": "^4.17.21",
-    "mobx": "^6.13.7",
-    "mobx-react": "^9.2.0",
-    "react": "19.1.1",
+    "mobx": "^6.15.0",
+    "mobx-react": "^9.2.1",
+    "react": "19.2.0",
     "uuid": "^13.0.0"
   },
   "devDependencies": {
     "@types/async": "^3.2.25",
-    "@types/react": "^19.1.12",
-    "@journeyapps-labs/lib-reactor-builder": "^2.0.0",
+    "@types/react": "^19.2.2",
+    "@journeyapps-labs/lib-reactor-builder": "^2.0.1",
     "@types/lodash": "^4.17.20",
-    "@types/uuid": "^10.0.0"
+    "@types/uuid": "^11.0.0"
   },
   "scripts": {
     "build:module": "reactor build .",

package/src/DataBrowserModule.ts

@@ -15,6 +15,9 @@ import { CreateModelAction } from './actions/schema-definitions/CreateModelActio
 import { SchemaModelObjectEntityDefinition } from './entities/SchemaModelObjectEntityDefinition';
 import { EditSchemaModelAction } from './actions/schema-model/EditSchemaModelAction';
 import { TypeEngine } from './forms/TypeEngine';
+import { ViewSchemaModelAsJsonAction } from './actions/schema-model/ViewSchemaModelAsJsonAction';
+import { ModelJsonPanelFactory } from './panels/model-json/ModelJsonPanelFactory';
+import { SchemaModelIndexDefinition } from './entities/SchemaModelIndexDefinition';
 
 export class DataBrowserModule extends AbstractReactorModule {
   constructor() {
@@ -37,6 +40,7 @@ export class DataBrowserModule extends AbstractReactorModule {
     system.registerAction(new QuerySchemaModelAction());
     system.registerAction(new CreateModelAction());
     system.registerAction(new EditSchemaModelAction());
+    system.registerAction(new ViewSchemaModelAsJsonAction());
 
     system.addStore(ConnectionStore, connectionStore);
 
@@ -44,10 +48,12 @@ export class DataBrowserModule extends AbstractReactorModule {
     system.registerDefinition(new ConnectionFactoryEntityDefinition());
     system.registerDefinition(new SchemaModelDefinitionEntityDefinition());
     system.registerDefinition(new SchemaModelObjectEntityDefinition());
+    system.registerDefinition(new SchemaModelIndexDefinition());
     system.registerDefinition(new QueryEntityDefinition());
 
     workspaceStore.registerFactory(new QueryPanelFactory());
     workspaceStore.registerFactory(new ModelPanelFactory());
+    workspaceStore.registerFactory(new ModelJsonPanelFactory());
   }
 
   async init(ioc: Container): Promise<any> {

package/src/actions/schema-model/ViewSchemaModelAsJsonAction.ts

@@ -0,0 +1,33 @@
+import { EntityAction, EntityActionEvent, inject, ioc, System, WorkspaceStore } from '@journeyapps-labs/reactor-mod';
+import { DataBrowserEntities } from '../../entities';
+import { SchemaModelObject } from '../../core/SchemaModelObject';
+import { ModelJsonPanelModel } from '../../panels/model-json/ModelJsonPanelFactory';
+
+export class ViewSchemaModelAsJsonAction extends EntityAction<SchemaModelObject> {
+  static ID = 'VIEW_SCHEMA_MODEL_AS_JSON';
+
+  @inject(WorkspaceStore)
+  accessor workspaceStore: WorkspaceStore;
+
+  constructor() {
+    super({
+      id: ViewSchemaModelAsJsonAction.ID,
+      name: 'View schema model as JSON',
+      icon: 'eye',
+      target: DataBrowserEntities.SCHEMA_MODEL_OBJECT
+    });
+  }
+
+  async fireEvent(event: EntityActionEvent<SchemaModelObject>): Promise<any> {
+    this.workspaceStore.addModel(
+      new ModelJsonPanelModel({
+        definition: event.targetEntity.definition,
+        model: event.targetEntity
+      })
+    );
+  }
+
+  static get() {
+    return ioc.get(System).getActionByID<ViewSchemaModelAsJsonAction>(ViewSchemaModelAsJsonAction.ID);
+  }
+}

package/src/core/AbstractConnection.ts

@@ -1,4 +1,4 @@
-import { Database, ObjectType, Query } from '@journeyapps/db';
+import { Database, ObjectType } from '@journeyapps/db';
 import { Schema } from '@journeyapps/parser-schema';
 import { AbstractConnectionFactory } from './AbstractConnectionFactory';
 import * as _ from 'lodash';
@@ -8,6 +8,7 @@ import { BaseObserver } from '@journeyapps-labs/common-utils';
 import { Collection, LifecycleCollection } from '@journeyapps-labs/lib-reactor-data-layer';
 import { when } from 'mobx';
 import { EntityDescription } from '@journeyapps-labs/reactor-mod';
+import { V4BackendClient, V4Index, V4Indexes } from '@journeyapps-labs/client-backend-v4';
 import { SchemaModelObject } from './SchemaModelObject';
 
 export interface AbstractConnectionSerialized {
@@ -25,6 +26,7 @@ export abstract class AbstractConnection extends BaseObserver<AbstractConnection
 
   schema_models_collection: Collection<ObjectType>;
   schema_models: LifecycleCollection<ObjectType, SchemaModelDefinition>;
+  private fetch_indexes_promise: Promise<V4Indexes['models']>;
 
   constructor(public factory: AbstractConnectionFactory) {
     super();
@@ -33,10 +35,13 @@ export abstract class AbstractConnection extends BaseObserver<AbstractConnection
     this.schema_models = new LifecycleCollection({
       collection: this.schema_models_collection,
       generateModel: (o) => {
-        return new SchemaModelDefinition({
+        let model = new SchemaModelDefinition({
           definition: o,
           connection: this
         });
+
+        model.init();
+        return model;
       },
       getKeyForSerialized: (o) => {
         return o.name;
@@ -44,6 +49,20 @@ export abstract class AbstractConnection extends BaseObserver<AbstractConnection
     });
   }
 
+  abstract getBackendClient(): V4BackendClient;
+
+  async getIndexes() {
+    if (!this.fetch_indexes_promise) {
+      this.fetch_indexes_promise = this.getBackendClient()
+        .getIndexes()
+        .then((res) => res.models)
+        .finally(() => {
+          this.fetch_indexes_promise = null;
+        });
+    }
+    return this.fetch_indexes_promise;
+  }
+
   async batchSave(models: SchemaModelObject[]) {
     if (models.length === 0) {
       return;

package/src/core/IndexModel.ts

@@ -0,0 +1,18 @@
+import { SchemaModelDefinition } from './SchemaModelDefinition';
+import { V4Index } from '@journeyapps-labs/client-backend-v4';
+
+export interface IndexModelOptions {
+  definition: SchemaModelDefinition;
+  index: V4Index;
+}
+export class IndexModel {
+  constructor(protected options: IndexModelOptions) {}
+
+  get index() {
+    return this.options.index;
+  }
+
+  get definition() {
+    return this.options.definition;
+  }
+}

package/src/core/SchemaModelDefinition.ts

@@ -6,6 +6,9 @@ import { LifecycleModel } from '@journeyapps-labs/lib-reactor-data-layer';
 import { BaseObserver } from '@journeyapps-labs/common-utils';
 import { queue, QueueObject } from 'async';
 import { v4 } from 'uuid';
+import { V4Index } from '@journeyapps-labs/client-backend-v4';
+import { action, observable } from 'mobx';
+import { IndexModel } from './IndexModel';
 
 export interface SchemaModelDefinitionListener {
   resolved: (event: { object: SchemaModelObject }) => any;
@@ -24,14 +27,18 @@ export class SchemaModelDefinition
   queue: QueueObject<string>;
   enqueued: Set<string>;
 
+  @observable
+  accessor indexes: IndexModel[];
+
   constructor(protected options: SchemaModelDefinitionOptions) {
     super();
     this.cache = new Map<string, SchemaModelObject>();
     this.enqueued = new Set<string>();
+    this.indexes = [];
     this.queue = queue(async (id) => {
       let collection = await this.getCollection();
       try {
-        let models = await this.executeQuery(collection.where(`id = ?`, id));
+        let models = await this.executeQuery(collection.where(`id = ?`, id).limit(1));
         if (models[0]) {
           this.cache.set(id, models[0]);
           this.enqueued.delete(id);
@@ -48,6 +55,17 @@ export class SchemaModelDefinition
     }, 6);
   }
 
+  async loadIndexes() {
+    let indexes = await this.connection.getIndexes();
+    this.indexes = (indexes[this.definition.name]?.indexes || []).map(
+      (i) => new IndexModel({ definition: this, index: i })
+    );
+  }
+
+  async init() {
+    await this.loadIndexes();
+  }
+
   async search(text: string): Promise<SchemaModelObject[]> {
     let collection = await this.getCollection();
     let adapter = collection.adapter as JourneyAPIAdapter;

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

@@ -1,12 +1,4 @@
-import {
-  CheckboxWidget,
-  ImageMedia,
-  ioc,
-  MetadataWidget,
-  SmartDateDisplayWidget,
-  styled
-} from '@journeyapps-labs/reactor-mod';
-import { Attachment, Day, Location } from '@journeyapps/db';
+import { ioc, SmartDateDisplayWidget, styled } from '@journeyapps-labs/reactor-mod';
 import * as _ from 'lodash';
 import * as React from 'react';
 import { PageRow } from '../Page';
@@ -16,33 +8,6 @@ namespace S {
   export const Empty = styled.div`
     opacity: 0.2;
   `;
-
-  export const Preview = styled.img`
-    max-height: 40px;
-    max-width: 40px;
-    cursor: pointer;
-  `;
-
-  export const pill = styled.div`
-    padding: 2px 4px;
-    background: ${(p) => p.theme.table.pills};
-    border-radius: 3px;
-    font-size: 12px;
-  `;
-
-  export const Pills = styled.div`
-    display: flex;
-    column-gap: 2px;
-    row-gap: 2px;
-  `;
-
-  export const Max = styled.div`
-    max-width: 500px;
-    white-space: pre;
-    display: inline;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  `;
 }
 
 export interface CellDisplayWidgetProps {
@@ -51,83 +16,27 @@ export interface CellDisplayWidgetProps {
   name: string;
 }
 
-const MAX_NUMBER_OF_ARR_ITEMS_TO_DISPLAY = 3;
-
 export const CellDisplayWidget: React.FC<CellDisplayWidgetProps> = (props) => {
   const { row, cell, name } = props;
   if (cell == null) {
     return <S.Empty>null</S.Empty>;
   }
-  if (_.isString(cell)) {
-    if (cell.trim() === '') {
-      return <S.Empty>empty</S.Empty>;
-    }
-    return <S.Max>{cell}</S.Max>;
-  }
-  if (_.isNumber(cell)) {
-    return cell;
-  }
-  if (_.isArray(cell)) {
-    if (cell.length === 0) {
-      return <S.Empty>empty array</S.Empty>;
-    }
-    let items = _.slice(cell, 0, MAX_NUMBER_OF_ARR_ITEMS_TO_DISPLAY);
-    return (
-      <S.Pills>
-        {items.map((c) => {
-          return <S.pill key={c}>{c}</S.pill>;
-        })}
-        {items.length !== cell.length ? '...' : null}
-      </S.Pills>
-    );
-  }
-  if (cell instanceof Date) {
+
+  if (name === 'updated_at') {
     return <SmartDateDisplayWidget date={cell} />;
   }
-  if (cell instanceof Day) {
-    return <SmartDateDisplayWidget date={cell.toDate()} />;
-  }
-  if (_.isBoolean(cell)) {
-    return (
-      <CheckboxWidget
-        checked={cell}
-        onChange={(checked) => {
-          row.model.set(name, checked);
-        }}
-      />
-    );
-  }
-  if (cell instanceof Location) {
-    return (
-      <>
-        <MetadataWidget label={'Lat'} value={`${cell.latitude}`} />
-        <MetadataWidget label={'Long'} value={`${cell.longitude}`} />
-      </>
-    );
-  }
-  if (cell instanceof Attachment) {
-    if (cell.uploaded()) {
-      return (
-        <S.Preview
-          onClick={() => {
-            ioc
-              .get(TypeEngine)
-              .getHandler(row.definition.definition.attributes[name].type)
-              .decode(cell)
-              .then((media: ImageMedia) => {
-                if (media instanceof ImageMedia) {
-                  media.open();
-                } else {
-                  window.open(cell.url(), '_blank');
-                }
-              });
-          }}
-          src={cell.urls['thumbnail']}
-        />
-      );
-    }
-    return <S.Empty>Not uploaded</S.Empty>;
+
+  let display = ioc.get(TypeEngine).getHandler(row.definition.definition.attributes[name].type)?.generateDisplay({
+    model: row.model,
+    value: cell,
+    label: row.definition.definition.attributes[name].label,
+    name,
+    type: row.definition.definition.attributes[name].type
+  });
+  if (display) {
+    return display;
   }
-  console.log('unknown type', cell);
+
+  console.log('unknown type', cell, row.definition.definition.attributes[name].type);
   return null;
 };

package/src/core/types/ManualConnection.ts

@@ -2,6 +2,9 @@ import { ApiCredentialOptions, Database } from '@journeyapps/db';
 import { AbstractConnection } from '../AbstractConnection';
 import { ManualConnectionFactory } from './ManualConnectionFactory';
 import { EntityDescription } from '@journeyapps-labs/reactor-mod';
+import { createWebNetworkClient } from '@journeyapps-labs/common-sdk';
+import { V4BackendClient } from '@journeyapps-labs/client-backend-v4';
+import * as path from 'path';
 
 export interface ManualConnectionDetails extends ApiCredentialOptions {
   name: string;
@@ -32,4 +35,17 @@ export class ManualConnection extends AbstractConnection {
       simpleName: this.options.name
     };
   }
+
+  getBackendClient(): V4BackendClient {
+    let url = new URL(this.options.baseUrl);
+    return new V4BackendClient({
+      account_id: path.basename(url.pathname),
+      endpoint: `${url.origin}`,
+      client: createWebNetworkClient({
+        headers: {
+          Authorization: `Bearer ${this.options.token}`
+        }
+      })
+    });
+  }
 }

package/src/entities/ConnectionEntityDefinition.tsx

@@ -50,6 +50,11 @@ export class ConnectionEntityDefinition extends EntityDefinition<AbstractConnect
         descendantType: DataBrowserEntities.SCHEMA_MODEL_DEFINITION,
         generateOptions: (parent) => {
           return {
+            category: {
+              label: 'Models',
+              icon: 'cube',
+              openDefault: true
+            },
             descendants: parent.schema_models.items
           };
         }

package/src/entities/SchemaModelDefinitionEntityDefinition.ts

@@ -1,4 +1,6 @@
 import {
+  DescendantEntityProviderComponent,
+  EntityActionHandlerComponent,
   EntityDefinition,
   EntityDescriberComponent,
   inject,
@@ -10,6 +12,9 @@ import { DataBrowserEntities } from '../entities';
 import { ConnectionStore } from '../stores/ConnectionStore';
 import { AbstractConnection } from '../core/AbstractConnection';
 import { SchemaModelDefinition } from '../core/SchemaModelDefinition';
+import { QuerySchemaModelAction } from '../actions/schema-definitions/QuerySchemaModelAction';
+import { V4Index } from '@journeyapps-labs/client-backend-v4';
+import { IndexModel } from '../core/IndexModel';
 
 export interface SchemaModelDefinitionEntityDefinitionEncoded {
   connection_id: string;
@@ -41,6 +46,22 @@ export class SchemaModelDefinitionEntityDefinition extends EntityDefinition<Sche
       })
     );
 
+    this.registerComponent(
+      new DescendantEntityProviderComponent<SchemaModelDefinition, IndexModel>({
+        descendantType: DataBrowserEntities.SCHEMA_MODEL_INDEX,
+        generateOptions: (parent) => {
+          return {
+            category: {
+              label: 'Indexes',
+              icon: 'search',
+              openDefault: false
+            },
+            descendants: parent.indexes
+          };
+        }
+      })
+    );
+
     this.registerComponent(
       new InlineEntityEncoderComponent<SchemaModelDefinition, SchemaModelDefinitionEntityDefinitionEncoded>({
         version: 1,
@@ -68,6 +89,8 @@ export class SchemaModelDefinitionEntityDefinition extends EntityDefinition<Sche
         }
       })
     );
+
+    this.registerComponent(new EntityActionHandlerComponent(QuerySchemaModelAction.ID));
   }
 
   matchEntity(t: any): boolean {

package/src/entities/SchemaModelIndexDefinition.ts

@@ -0,0 +1,43 @@
+import {
+  EntityDefinition,
+  EntityDescriberComponent,
+  InlineTreePresenterComponent
+} from '@journeyapps-labs/reactor-mod';
+import { DataBrowserEntities } from '../entities';
+import { IndexModel } from '../core/IndexModel';
+
+export class SchemaModelIndexDefinition extends EntityDefinition<IndexModel> {
+  constructor() {
+    super({
+      type: DataBrowserEntities.SCHEMA_MODEL_INDEX,
+      category: 'DataBrowser',
+      label: 'Schema model index',
+      icon: 'search',
+      iconColor: 'cyan'
+    });
+
+    this.registerComponent(
+      new EntityDescriberComponent<IndexModel>({
+        label: 'Simple',
+        describe: (entity: IndexModel) => {
+          return {
+            simpleName: entity.index.name,
+            complexName: entity.index.type
+          };
+        }
+      })
+    );
+
+    this.registerComponent(new InlineTreePresenterComponent());
+  }
+
+  matchEntity(t: any): boolean {
+    if (t instanceof IndexModel) {
+      return true;
+    }
+  }
+
+  getEntityUID(t: IndexModel) {
+    return `${t.definition.definition.media}-${t.index.name}`;
+  }
+}

package/src/entities.ts

@@ -2,6 +2,7 @@ export enum DataBrowserEntities {
   CONNECTION = 'databrowser/connection',
   CONNECTION_FACTORY = 'databrowser/connection_factory',
   SCHEMA_MODEL_DEFINITION = 'databrowser/schema_model_definition',
+  SCHEMA_MODEL_INDEX = 'databrowser/schema_model_index',
   SCHEMA_MODEL_OBJECT = 'databrowser/schema_model_object',
   QUERY = 'databrowser/query'
 }

package/src/forms/SchemaModelForm.tsx

@@ -42,7 +42,7 @@ export class Binding {
     });
     this.listener1 = autorun(async () => {
       let value = model.patch.get(name);
-      if (value == null) {
+      if (!model.patch.has(name)) {
         value = await options.resolve();
       }
       this.setting_value_via_autorun = true;