@journeyapps-labs/reactor-mod-data-browser 1.0.0

package/package.json

@@ -0,0 +1,40 @@
+{
+  "name": "@journeyapps-labs/reactor-mod-data-browser",
+  "version": "1.0.0",
+  "main": "./dist/index.js",
+  "typings": "./dist/@types/index",
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/",
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/journeyapps-labs/sector.git"
+  },
+  "author": "JOURNEYAPPS",
+  "license": "Apache-2.0",
+  "dependencies": {
+    "@emotion/styled": "^11.14.1",
+    "@journeyapps-labs/common-ioc": "^1.0.0",
+    "@journeyapps-labs/common-utils": "^1.0.0",
+    "@journeyapps-labs/lib-reactor-data-layer": "^1.0.2",
+    "@journeyapps-labs/reactor-mod": "^1.2.0",
+    "@journeyapps/db": "^8.1.1",
+    "@journeyapps/parser-schema": "^8.2.5",
+    "@projectstorm/react-workspaces-core": "4.2.2",
+    "lodash": "^4.17.21",
+    "mobx": "^6.13.7",
+    "mobx-react": "^9.2.0",
+    "react": "19.1.1",
+    "uuid": "^11.1.0"
+  },
+  "devDependencies": {
+    "@journeyapps-labs/lib-reactor-builder": "^1.0.3",
+    "@types/lodash": "^4.17.20",
+    "@types/uuid": "^10.0.0"
+  },
+  "scripts": {
+    "build:module": "reactor build .",
+    "watch:module": "pnpm build:module --watch"
+  }
+}

package/reactor.config.json

@@ -0,0 +1,4 @@
+{
+  "name": "Sector Databrowser",
+  "slug": "module-databrowser"
+}

package/src/DataBrowserModule.ts

@@ -0,0 +1,54 @@
+import { AbstractReactorModule, System, WorkspaceStore } from '@journeyapps-labs/reactor-mod';
+import { Container } from '@journeyapps-labs/common-ioc';
+import { ConnectionStore } from './stores/ConnectionStore';
+import { ConnectionEntityDefinition } from './entities/ConnectionEntityDefinition';
+import { ManualConnectionFactory } from './core/types/ManualConnectionFactory';
+import { ConnectionFactoryEntityDefinition } from './entities/ConnectionFactoryEntityDefinition';
+import { AddConnectionAction } from './actions/connections/AddConnectionAction';
+import { RemoveConnectionAction } from './actions/connections/RemoveConnectionAction';
+import { SchemaModelDefinitionEntityDefinition } from './entities/SchemaModelDefinitionEntityDefinition';
+import { QueryPanelFactory } from './panels/query/QueryPanelFactory';
+import { QuerySchemaModelAction } from './actions/schema-definitions/QuerySchemaModelAction';
+import { QueryEntityDefinition } from './entities/QueryEntityDefinition';
+import { ModelPanelFactory } from './panels/model/ModelPanelFactory';
+import { CreateModelAction } from './actions/schema-definitions/CreateModelAction';
+import { SchemaModelObjectEntityDefinition } from './entities/SchemaModelObjectEntityDefinition';
+import { EditSchemaModelAction } from './actions/schema-model/EditSchemaModelAction';
+
+export class DataBrowserModule extends AbstractReactorModule {
+  constructor() {
+    super({
+      name: 'Data Browser'
+    });
+  }
+
+  register(ioc: Container) {
+    const system = ioc.get(System);
+    const workspaceStore = ioc.get(WorkspaceStore);
+
+    let connectionStore = new ConnectionStore();
+
+    connectionStore.registerConnectionFactory(new ManualConnectionFactory());
+
+    system.registerAction(new AddConnectionAction());
+    system.registerAction(new RemoveConnectionAction());
+    system.registerAction(new QuerySchemaModelAction());
+    system.registerAction(new CreateModelAction());
+    system.registerAction(new EditSchemaModelAction());
+
+    system.addStore(ConnectionStore, connectionStore);
+
+    system.registerDefinition(new ConnectionEntityDefinition());
+    system.registerDefinition(new ConnectionFactoryEntityDefinition());
+    system.registerDefinition(new SchemaModelDefinitionEntityDefinition());
+    system.registerDefinition(new SchemaModelObjectEntityDefinition());
+    system.registerDefinition(new QueryEntityDefinition());
+
+    workspaceStore.registerFactory(new QueryPanelFactory());
+    workspaceStore.registerFactory(new ModelPanelFactory());
+  }
+
+  async init(ioc: Container): Promise<any> {
+    await ioc.get(ConnectionStore).init();
+  }
+}

package/src/actions/connections/AddConnectionAction.tsx

@@ -0,0 +1,33 @@
+import { EntityAction, EntityActionEvent, inject, ioc, System } from '@journeyapps-labs/reactor-mod';
+import { AbstractConnectionFactory } from '../../core/AbstractConnectionFactory';
+import { DataBrowserEntities } from '../../entities';
+import { ConnectionStore } from '../../stores/ConnectionStore';
+
+export class AddConnectionAction extends EntityAction<AbstractConnectionFactory> {
+  static ID = 'ADD_CONNECTION';
+
+  @inject(ConnectionStore)
+  accessor connectionStore: ConnectionStore;
+
+  constructor() {
+    super({
+      id: AddConnectionAction.ID,
+      name: 'Add connection',
+      icon: 'plus',
+      target: DataBrowserEntities.CONNECTION_FACTORY,
+      autoSelectIsolatedTarget: true
+    });
+  }
+
+  async fireEvent(event: EntityActionEvent<AbstractConnectionFactory>): Promise<any> {
+    let connection = await event.targetEntity.generateConnectionFromUI();
+    if (!connection) {
+      return;
+    }
+    this.connectionStore.addConnection(connection);
+  }
+
+  static get() {
+    return ioc.get(System).getActionByID<AddConnectionAction>(AddConnectionAction.ID);
+  }
+}

package/src/actions/connections/RemoveConnectionAction.tsx

@@ -0,0 +1,28 @@
+import { EntityAction, EntityActionEvent, inject, ioc, System } from '@journeyapps-labs/reactor-mod';
+import { DataBrowserEntities } from '../../entities';
+import { ConnectionStore } from '../../stores/ConnectionStore';
+import { AbstractConnection } from '../../core/AbstractConnection';
+
+export class RemoveConnectionAction extends EntityAction<AbstractConnection> {
+  static ID = 'REMOVE_CONNECTION';
+
+  @inject(ConnectionStore)
+  accessor connectionStore: ConnectionStore;
+
+  constructor() {
+    super({
+      id: RemoveConnectionAction.ID,
+      name: 'Remove connection',
+      icon: 'trash',
+      target: DataBrowserEntities.CONNECTION
+    });
+  }
+
+  async fireEvent(event: EntityActionEvent<AbstractConnection>): Promise<any> {
+    event.targetEntity.remove();
+  }
+
+  static get() {
+    return ioc.get(System).getActionByID<RemoveConnectionAction>(RemoveConnectionAction.ID);
+  }
+}

package/src/actions/schema-definitions/CreateModelAction.ts

@@ -0,0 +1,32 @@
+import { EntityAction, EntityActionEvent, inject, ioc, System, WorkspaceStore } from '@journeyapps-labs/reactor-mod';
+import { DataBrowserEntities } from '../../entities';
+import { SchemaModelDefinition } from '../../core/SchemaModelDefinition';
+import { ModelPanelModel } from '../../panels/model/ModelPanelFactory';
+
+export class CreateModelAction extends EntityAction<SchemaModelDefinition> {
+  static ID = 'CREATE_SCHEMA_MODEL';
+
+  @inject(WorkspaceStore)
+  accessor workspaceStore: WorkspaceStore;
+
+  constructor() {
+    super({
+      id: CreateModelAction.ID,
+      name: 'Create schema model',
+      icon: 'search',
+      target: DataBrowserEntities.SCHEMA_MODEL_DEFINITION
+    });
+  }
+
+  async fireEvent(event: EntityActionEvent<SchemaModelDefinition>): Promise<any> {
+    this.workspaceStore.addModel(
+      new ModelPanelModel({
+        definition: event.targetEntity
+      })
+    );
+  }
+
+  static get() {
+    return ioc.get(System).getActionByID<CreateModelAction>(CreateModelAction.ID);
+  }
+}

package/src/actions/schema-definitions/QuerySchemaModelAction.ts

@@ -0,0 +1,36 @@
+import { EntityAction, EntityActionEvent, inject, ioc, System, WorkspaceStore } from '@journeyapps-labs/reactor-mod';
+import { DataBrowserEntities } from '../../entities';
+import { SchemaModelDefinition } from '../../core/SchemaModelDefinition';
+import { QueryPanelModel } from '../../panels/query/QueryPanelFactory';
+import { SimpleQuery } from '../../core/query/SimpleQuery';
+
+export class QuerySchemaModelAction extends EntityAction<SchemaModelDefinition> {
+  static ID = 'QUERY_SCHEMA_MODEL';
+
+  @inject(WorkspaceStore)
+  accessor workspaceStore: WorkspaceStore;
+
+  constructor() {
+    super({
+      id: QuerySchemaModelAction.ID,
+      name: 'Query schema model',
+      icon: 'search',
+      target: DataBrowserEntities.SCHEMA_MODEL_DEFINITION
+    });
+  }
+
+  async fireEvent(event: EntityActionEvent<SchemaModelDefinition>): Promise<any> {
+    this.workspaceStore.addModel(
+      new QueryPanelModel(
+        new SimpleQuery({
+          definition: event.targetEntity,
+          limit: 30
+        })
+      )
+    );
+  }
+
+  static get() {
+    return ioc.get(System).getActionByID<QuerySchemaModelAction>(QuerySchemaModelAction.ID);
+  }
+}

package/src/actions/schema-model/EditSchemaModelAction.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 { ModelPanelModel } from '../../panels/model/ModelPanelFactory';
+
+export class EditSchemaModelAction extends EntityAction<SchemaModelObject> {
+  static ID = 'EDIT_SCHEMA_MODEL';
+
+  @inject(WorkspaceStore)
+  accessor workspaceStore: WorkspaceStore;
+
+  constructor() {
+    super({
+      id: EditSchemaModelAction.ID,
+      name: 'Edit schema model',
+      icon: 'edit',
+      target: DataBrowserEntities.SCHEMA_MODEL_OBJECT
+    });
+  }
+
+  async fireEvent(event: EntityActionEvent<SchemaModelObject>): Promise<any> {
+    this.workspaceStore.addModel(
+      new ModelPanelModel({
+        definition: event.targetEntity.definition,
+        model: event.targetEntity
+      })
+    );
+  }
+
+  static get() {
+    return ioc.get(System).getActionByID<EditSchemaModelAction>(EditSchemaModelAction.ID);
+  }
+}

package/src/core/AbstractConnection.ts

@@ -0,0 +1,101 @@
+import { Database, ObjectType } from '@journeyapps/db';
+import { Schema } from '@journeyapps/parser-schema';
+import { AbstractConnectionFactory } from './AbstractConnectionFactory';
+import * as _ from 'lodash';
+import { SchemaModelDefinition } from './SchemaModelDefinition';
+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';
+
+export interface AbstractConnectionSerialized {
+  factory: string;
+  id: string;
+  payload: any;
+}
+
+export interface AbstractConnectionListener {
+  removed: () => any;
+}
+
+export abstract class AbstractConnection extends BaseObserver<AbstractConnectionListener> {
+  id: string;
+
+  schema_models_collection: Collection<ObjectType>;
+  schema_models: LifecycleCollection<ObjectType, SchemaModelDefinition>;
+
+  constructor(public factory: AbstractConnectionFactory) {
+    super();
+    this.id = v4();
+    this.schema_models_collection = new Collection();
+    this.schema_models = new LifecycleCollection({
+      collection: this.schema_models_collection,
+      generateModel: (o) => {
+        return new SchemaModelDefinition({
+          definition: o,
+          connection: this
+        });
+      },
+      getKeyForSerialized: (o) => {
+        return o.name;
+      }
+    });
+  }
+
+  getSchemaModelDefinitionByName(name: string) {
+    return this.schema_models.items.find((i) => i.definition.name === name);
+  }
+
+  async waitForSchemaModelDefinitionByName(name: string) {
+    await when(() => !!this.getSchemaModelDefinitionByName(name));
+    return this.getSchemaModelDefinitionByName(name);
+  }
+
+  abstract getConnection(): Promise<Database>;
+
+  protected async getSchema(): Promise<Schema> {
+    const connection = await this.getConnection();
+    return connection.schema;
+  }
+
+  async reload() {
+    await this.schema_models_collection.load(async () => {
+      const schema = await this.getSchema();
+      return _.values(schema.objects);
+    });
+  }
+
+  async init() {
+    await this.reload();
+  }
+
+  protected async getSchemaModelDefinitions() {
+    const schema = await this.getSchema();
+    return _.map(schema.objects, (o) => {
+      return new SchemaModelDefinition({
+        definition: o,
+        connection: this
+      });
+    });
+  }
+
+  remove() {
+    this.iterateListeners((cb) => cb.removed?.());
+  }
+
+  serialize(): AbstractConnectionSerialized {
+    return {
+      id: this.id,
+      factory: this.factory.options.key,
+      payload: this._serialize()
+    };
+  }
+
+  get name() {
+    return this.id;
+  }
+
+  abstract _serialize(): any;
+
+  abstract _deSerialize(data: ReturnType<this['_serialize']>): Promise<any>;
+}

package/src/core/AbstractConnectionFactory.ts

@@ -0,0 +1,14 @@
+import { AbstractConnection } from './AbstractConnection';
+
+export interface ConnectionFactoryOptions {
+  label: string;
+  key: string;
+}
+
+export abstract class AbstractConnectionFactory<T extends AbstractConnection = AbstractConnection> {
+  constructor(public options: ConnectionFactoryOptions) {}
+
+  abstract generateConnection(): T;
+
+  abstract generateConnectionFromUI(): Promise<T | null>;
+}

package/src/core/SchemaModelDefinition.ts

@@ -0,0 +1,44 @@
+import { AbstractConnection } from './AbstractConnection';
+import { ObjectType } from '@journeyapps/parser-schema';
+import { Collection } from '@journeyapps/db';
+import { SchemaModelObject } from './SchemaModelObject';
+import { LifecycleModel } from '@journeyapps-labs/lib-reactor-data-layer';
+
+export interface SchemaModelDefinitionOptions {
+  connection: AbstractConnection;
+  definition: ObjectType;
+}
+export class SchemaModelDefinition implements LifecycleModel<ObjectType> {
+  constructor(protected options: SchemaModelDefinitionOptions) {}
+
+  get key() {
+    return this.definition.name;
+  }
+
+  dispose() {}
+
+  patch(data: ObjectType) {
+    this.options.definition = data;
+  }
+
+  get connection() {
+    return this.options.connection;
+  }
+
+  get definition() {
+    return this.options.definition;
+  }
+
+  async getCollection() {
+    const conn = await this.connection.getConnection();
+    return conn[this.definition.name] as Collection;
+  }
+
+  async generateNewModelObject(): Promise<SchemaModelObject> {
+    const collection = await this.getCollection();
+    return new SchemaModelObject({
+      definition: this,
+      model: collection.create()
+    });
+  }
+}

package/src/core/SchemaModelObject.ts

@@ -0,0 +1,19 @@
+import { DatabaseObject } from '@journeyapps/db';
+import { SchemaModelDefinition } from './SchemaModelDefinition';
+
+export interface SchemaModelObjectOptions {
+  definition: SchemaModelDefinition;
+  model?: DatabaseObject;
+}
+
+export class SchemaModelObject {
+  constructor(public options: SchemaModelObjectOptions) {}
+
+  get definition(): SchemaModelDefinition {
+    return this.options.definition;
+  }
+
+  get model() {
+    return this.options.model;
+  }
+}

package/src/core/query/AbstractQuery.ts

@@ -0,0 +1,43 @@
+import { Page } from './Page';
+import { AbstractConnection } from '../AbstractConnection';
+import { ConnectionStore } from '../../stores/ConnectionStore';
+import { v4 } from 'uuid';
+import { TableColumn } from '@journeyapps-labs/reactor-mod';
+
+export interface AbstractQueryEncoded {
+  type: string;
+  connection_id: string;
+  definition: string;
+}
+
+export abstract class AbstractQuery<T extends AbstractQueryEncoded = AbstractQueryEncoded> {
+  id: string;
+
+  constructor(
+    protected type: string,
+    protected connection: AbstractConnection
+  ) {
+    this.id = v4();
+  }
+
+  abstract getSimpleName(): string;
+
+  abstract load(): Promise<any>;
+
+  abstract getColumns(): TableColumn[];
+
+  abstract get totalPages(): number;
+
+  abstract getPage(number: number): Page;
+
+  serialize(): T {
+    return {
+      type: this.type,
+      connection_id: this.connection.id
+    } as T;
+  }
+
+  async deserialize(connectionStore: ConnectionStore, data: T) {
+    this.connection = await connectionStore.waitForReadyForConnection(data.connection_id);
+  }
+}

package/src/core/query/Page.ts

@@ -0,0 +1,59 @@
+import { SchemaModelObject } from '../SchemaModelObject';
+import { TableRow } from '@journeyapps-labs/reactor-mod';
+import { Collection, DatabaseObject } from '@journeyapps/db';
+import { observable } from 'mobx';
+import { SchemaModelDefinition } from '../SchemaModelDefinition';
+
+export interface PageRow extends TableRow {
+  model: SchemaModelObject;
+  definition: SchemaModelDefinition;
+}
+
+export interface PageOptions {
+  collection: () => Promise<Collection<DatabaseObject>>;
+  offset: number;
+  limit: number;
+  definition: SchemaModelDefinition;
+  index: number;
+}
+
+export class Page {
+  @observable
+  accessor models: SchemaModelObject[];
+
+  @observable
+  accessor loading: boolean;
+
+  constructor(protected options: PageOptions) {
+    this.loading = true;
+    this.models = [];
+  }
+
+  get index() {
+    return this.options.index;
+  }
+
+  async load() {
+    this.loading = true;
+    let collection = await this.options.collection();
+    let models = await collection.all().limit(this.options.limit).skip(this.options.offset).toArray();
+    this.models = models.map((m) => {
+      return new SchemaModelObject({
+        definition: this.options.definition,
+        model: m
+      });
+    });
+    this.loading = false;
+  }
+
+  asRows(): PageRow[] {
+    return this.models.map((m) => {
+      return {
+        key: m.model.id,
+        cells: m.model,
+        definition: this.options.definition,
+        model: m
+      };
+    });
+  }
+}