@journeyapps-labs/reactor-mod-data-browser 0.0.0-dev-20250825225306

package/src/core/query/SimpleQuery.tsx

@@ -0,0 +1,218 @@
+import { AbstractQuery, AbstractQueryEncoded } from './AbstractQuery';
+import {
+  CheckboxWidget,
+  ImageMedia,
+  inject,
+  MetadataWidget,
+  SmartDateDisplayWidget,
+  styled,
+  TableColumn
+} from '@journeyapps-labs/reactor-mod';
+import { ConnectionStore } from '../../stores/ConnectionStore';
+import * as db from '@journeyapps/db';
+import { Attachment, Day, Location, Promise, Variable } from '@journeyapps/db';
+import { Page, PageRow } from './Page';
+import { SchemaModelDefinition } from '../SchemaModelDefinition';
+import * as _ from 'lodash';
+import * as React from 'react';
+import { observable } from 'mobx';
+
+export interface SimpleQueryOptions {
+  definition?: SchemaModelDefinition;
+  limit?: number;
+}
+
+export interface SimpleQueryEncoded extends AbstractQueryEncoded {
+  limit: number;
+  definition: string;
+}
+
+export class SimpleQuery extends AbstractQuery<SimpleQueryEncoded> {
+  @inject(ConnectionStore)
+  accessor connStore: ConnectionStore;
+
+  @observable
+  accessor _totalPages: number;
+
+  @observable
+  accessor _pages: Page[];
+
+  constructor(public options: SimpleQueryOptions = {}) {
+    super('simple', options.definition?.connection);
+    this._totalPages = 0;
+    this._pages = [];
+  }
+
+  async getCollection() {
+    let connection = await this.connection.getConnection();
+    return connection[this.options.definition.definition.name] as db.Collection;
+  }
+
+  async load() {
+    let collection = await this.getCollection();
+    let results = await (collection.adapter as any).doApiQuery(collection.all());
+    this._totalPages = Math.ceil(results.total / this.options.limit);
+  }
+
+  getPage(number: number): Page {
+    if (!this._pages[number]) {
+      let page = new Page({
+        offset: number * this.options.limit,
+        limit: this.options.limit,
+        collection: () => this.getCollection(),
+        definition: this.options.definition,
+        index: number
+      });
+      page.load();
+      this._pages[number] = page;
+    }
+    return this._pages[number];
+  }
+
+  get totalPages(): number {
+    return this._totalPages;
+  }
+
+  serialize(): SimpleQueryEncoded {
+    return {
+      ...super.serialize(),
+      definition: this.options.definition.definition.name,
+      limit: this.options.limit
+    };
+  }
+
+  async deserialize(connectionStore: ConnectionStore, data: SimpleQueryEncoded): Promise<void> {
+    await super.deserialize(connectionStore, data);
+    this.options.limit = data.limit;
+    this.options.definition = await this.connection.waitForSchemaModelDefinitionByName(data.definition);
+  }
+
+  getColumns(): TableColumn[] {
+    return [
+      {
+        key: 'id',
+        display: 'ID',
+        noWrap: true,
+        shrink: true
+      },
+      ..._.map(this.options.definition.definition.attributes, (a) => {
+        return {
+          key: a.name,
+          display: a.label,
+          noWrap: true,
+          shrink: true,
+          accessor: (cell, row: PageRow) => {
+            return <CellDisplayWidget variable={a} cell={cell} row={row} />;
+          }
+        } as TableColumn;
+      })
+    ];
+  }
+
+  getSimpleName(): string {
+    return `Query: ${this.options.definition.definition.label}`;
+  }
+}
+
+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 interface CellDisplayWidgetProps {
+  row: PageRow;
+  cell: any;
+  variable: Variable;
+}
+
+const MAX_NUMBER_OF_ARR_ITEMS_TO_DISPLAY = 3;
+
+export const CellDisplayWidget: React.FC<CellDisplayWidgetProps> = (props) => {
+  const { row, cell, variable } = props;
+  if (cell == null) {
+    return <S.Empty>null</S.Empty>;
+  }
+  if (_.isString(cell)) {
+    if (cell.trim() === '') {
+      return <S.Empty>empty</S.Empty>;
+    }
+    return cell;
+  }
+  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) {
+    return <SmartDateDisplayWidget date={cell} />;
+  }
+  if (cell instanceof Day) {
+    return <SmartDateDisplayWidget date={cell.toDate()} />;
+  }
+  if (_.isBoolean(cell)) {
+    return <CheckboxWidget checked={cell} onChange={() => {}} />;
+  }
+  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={() => {
+            row.model.getMedia(variable.name).then((media) => {
+              if (media instanceof ImageMedia) {
+                media.open();
+              } else {
+                window.open(cell.url(), '_blank');
+              }
+            });
+          }}
+          src={cell.urls['thumbnail']}
+        />
+      );
+    }
+    return <S.Empty>Not uploaded</S.Empty>;
+  }
+  console.log('unknown type', cell);
+  return null;
+};

package/src/core/types/ManualConnection.ts

@@ -0,0 +1,35 @@
+import { ApiCredentialOptions, Database } from '@journeyapps/db';
+import { AbstractConnection } from '../AbstractConnection';
+import { ManualConnectionFactory } from './ManualConnectionFactory';
+import { EntityDescription } from '@journeyapps-labs/reactor-mod';
+
+export interface ManualConnectionDetails extends ApiCredentialOptions {
+  name: string;
+}
+
+export class ManualConnection extends AbstractConnection {
+  constructor(
+    factory: ManualConnectionFactory,
+    protected options?: ManualConnectionDetails
+  ) {
+    super(factory);
+  }
+
+  getConnection(): Promise<Database> {
+    return Database.instance(this.options);
+  }
+
+  _serialize(): ManualConnectionDetails {
+    return this.options;
+  }
+
+  async _deSerialize(data: ManualConnectionDetails): Promise<any> {
+    this.options = data;
+  }
+
+  get name(): EntityDescription {
+    return {
+      simpleName: this.options.name
+    };
+  }
+}

package/src/core/types/ManualConnectionFactory.tsx

@@ -0,0 +1,36 @@
+import { AbstractConnectionFactory } from '../AbstractConnectionFactory';
+import { ManualConnection } from './ManualConnection';
+import { DialogStore2, FormDialogDirective, inject } from '@journeyapps-labs/reactor-mod';
+import { APIConnectionForm } from '../../forms/APIConnectionForm';
+
+export class ManualConnectionFactory extends AbstractConnectionFactory<ManualConnection> {
+  @inject(DialogStore2)
+  accessor dialogStore: DialogStore2;
+
+  constructor() {
+    super({
+      key: 'MANUAL_CONNECTION',
+      label: 'API Token Connection'
+    });
+  }
+
+  async generateConnectionFromUI(): Promise<ManualConnection | null> {
+    let result = await this.dialogStore.showDialog(
+      new FormDialogDirective({
+        form: new APIConnectionForm(),
+        title: 'Create connection',
+
+        // FIXME remove when the fix in Reactor is merged: https://github.com/journeyapps-labs/reactor/pull/32
+        handler: async () => {}
+      })
+    );
+    if (result) {
+      return result.form.generateConnection(this);
+    }
+    return null;
+  }
+
+  generateConnection(): ManualConnection {
+    return new ManualConnection(this);
+  }
+}

package/src/entities/ConnectionEntityDefinition.tsx

@@ -0,0 +1,79 @@
+import {
+  DescendantEntityProviderComponent,
+  EntityDefinition,
+  EntityDescriberComponent,
+  EntityPanelComponent,
+  inject,
+  InlineTreePresenterComponent,
+  SimpleEntitySearchEngineComponent
+} from '@journeyapps-labs/reactor-mod';
+import { DataBrowserEntities } from '../entities';
+import { ConnectionStore } from '../stores/ConnectionStore';
+import { AbstractConnection } from '../core/AbstractConnection';
+import { AddConnectionAction } from '../actions/connections/AddConnectionAction';
+
+export class ConnectionEntityDefinition extends EntityDefinition<AbstractConnection> {
+  @inject(ConnectionStore)
+  accessor connectionStore: ConnectionStore;
+
+  constructor() {
+    super({
+      type: DataBrowserEntities.CONNECTION,
+      category: 'DataBrowser',
+      label: 'Connection',
+      icon: 'database',
+      iconColor: 'cyan'
+    });
+
+    this.registerComponent(
+      new EntityDescriberComponent<AbstractConnection>({
+        label: 'Simple',
+        describe: (entity: AbstractConnection) => {
+          return entity.name;
+        }
+      })
+    );
+
+    this.registerComponent(
+      new SimpleEntitySearchEngineComponent<AbstractConnection>({
+        label: 'Simple',
+        getEntities: async () => {
+          return this.connectionStore.connections;
+        }
+      })
+    );
+
+    this.registerComponent(new InlineTreePresenterComponent<AbstractConnection>());
+
+    this.registerComponent(
+      new DescendantEntityProviderComponent<AbstractConnection>({
+        descendantType: DataBrowserEntities.SCHEMA_MODEL_DEFINITION,
+        generateOptions: (parent) => {
+          return {
+            descendants: parent.schema_models.items
+          };
+        }
+      })
+    );
+
+    this.registerComponent(
+      new EntityPanelComponent<AbstractConnection>({
+        label: 'Connections',
+        getEntities: () => {
+          return this.connectionStore.connections;
+        },
+        additionalActions: [AddConnectionAction.ID]
+      })
+    );
+  }
+
+  matchEntity(t: any): boolean {
+    if (t instanceof AbstractConnection) {
+      return true;
+    }
+  }
+
+  getEntityUID(t: AbstractConnection) {
+    return t.id;
+  }
+}

package/src/entities/ConnectionFactoryEntityDefinition.tsx

@@ -0,0 +1,54 @@
+import {
+  EntityDefinition,
+  EntityDescriberComponent,
+  inject,
+  SimpleEntitySearchEngineComponent
+} from '@journeyapps-labs/reactor-mod';
+import { DataBrowserEntities } from '../entities';
+import { ConnectionStore } from '../stores/ConnectionStore';
+import { AbstractConnectionFactory } from '../core/AbstractConnectionFactory';
+
+export class ConnectionFactoryEntityDefinition extends EntityDefinition<AbstractConnectionFactory> {
+  @inject(ConnectionStore)
+  accessor connectionStore: ConnectionStore;
+
+  constructor() {
+    super({
+      type: DataBrowserEntities.CONNECTION_FACTORY,
+      category: 'DataBrowser',
+      label: 'Connection type',
+      icon: 'database',
+      iconColor: 'blue'
+    });
+
+    this.registerComponent(
+      new EntityDescriberComponent<AbstractConnectionFactory>({
+        label: 'Simple',
+        describe: (entity: AbstractConnectionFactory) => {
+          return {
+            simpleName: entity.options.label
+          };
+        }
+      })
+    );
+
+    this.registerComponent(
+      new SimpleEntitySearchEngineComponent<AbstractConnectionFactory>({
+        label: 'Simple',
+        getEntities: async () => {
+          return this.connectionStore.connectionFactories;
+        }
+      })
+    );
+  }
+
+  matchEntity(t: any): boolean {
+    if (t instanceof AbstractConnectionFactory) {
+      return true;
+    }
+  }
+
+  getEntityUID(t: AbstractConnectionFactory) {
+    return t.options.key;
+  }
+}

package/src/entities/QueryEntityDefinition.ts

@@ -0,0 +1,46 @@
+import { EntityDefinition, inject, InlineEntityEncoderComponent } from '@journeyapps-labs/reactor-mod';
+import { DataBrowserEntities } from '../entities';
+import { ConnectionStore } from '../stores/ConnectionStore';
+import { AbstractQuery, AbstractQueryEncoded } from '../core/query/AbstractQuery';
+import { SimpleQuery } from '../core/query/SimpleQuery';
+
+export class QueryEntityDefinition extends EntityDefinition<AbstractQuery> {
+  @inject(ConnectionStore)
+  accessor connectionStore: ConnectionStore;
+
+  constructor() {
+    super({
+      type: DataBrowserEntities.QUERY,
+      category: 'DataBrowser',
+      label: 'Query',
+      icon: 'search',
+      iconColor: 'red'
+    });
+
+    this.registerComponent(
+      new InlineEntityEncoderComponent<AbstractQuery, AbstractQueryEncoded>({
+        version: 1,
+        encode: (e) => {
+          return e.serialize();
+        },
+        decode: async (entity) => {
+          if (entity.type === 'simple') {
+            let query = new SimpleQuery();
+            await query.deserialize(this.connectionStore, entity as any);
+            return query;
+          }
+        }
+      })
+    );
+  }
+
+  matchEntity(t: any): boolean {
+    if (t instanceof AbstractQuery) {
+      return true;
+    }
+  }
+
+  getEntityUID(t: AbstractQuery) {
+    return t.id;
+  }
+}

package/src/entities/SchemaModelDefinitionEntityDefinition.ts

@@ -0,0 +1,82 @@
+import {
+  EntityDefinition,
+  EntityDescriberComponent,
+  inject,
+  InlineEntityEncoderComponent,
+  InlineTreePresenterComponent,
+  SimpleParentEntitySearchEngine
+} from '@journeyapps-labs/reactor-mod';
+import { DataBrowserEntities } from '../entities';
+import { ConnectionStore } from '../stores/ConnectionStore';
+import { AbstractConnection } from '../core/AbstractConnection';
+import { SchemaModelDefinition } from '../core/SchemaModelDefinition';
+
+export interface SchemaModelDefinitionEntityDefinitionEncoded {
+  connection_id: string;
+  type: string;
+}
+
+export class SchemaModelDefinitionEntityDefinition extends EntityDefinition<SchemaModelDefinition> {
+  @inject(ConnectionStore)
+  accessor connectionStore: ConnectionStore;
+
+  constructor() {
+    super({
+      type: DataBrowserEntities.SCHEMA_MODEL_DEFINITION,
+      category: 'DataBrowser',
+      label: 'Schema model definition',
+      icon: 'cube',
+      iconColor: 'mediumpurple'
+    });
+
+    this.registerComponent(
+      new EntityDescriberComponent<SchemaModelDefinition>({
+        label: 'Simple',
+        describe: (entity: SchemaModelDefinition) => {
+          return {
+            simpleName: entity.definition.label,
+            complexName: entity.definition.name
+          };
+        }
+      })
+    );
+
+    this.registerComponent(
+      new InlineEntityEncoderComponent<SchemaModelDefinition, SchemaModelDefinitionEntityDefinitionEncoded>({
+        version: 1,
+        encode: (e) => {
+          return {
+            connection_id: e.connection.id,
+            type: e.definition.name
+          };
+        },
+        decode: async (entity) => {
+          let connection = await this.connectionStore.waitForReadyForConnection(entity.connection_id);
+          return connection.waitForSchemaModelDefinitionByName(entity.type);
+        }
+      })
+    );
+
+    this.registerComponent(new InlineTreePresenterComponent());
+
+    this.registerComponent(
+      new SimpleParentEntitySearchEngine<AbstractConnection, SchemaModelDefinition>({
+        label: 'Simple',
+        type: DataBrowserEntities.CONNECTION,
+        getEntities: async (event) => {
+          return event.parameters.parent.schema_models.items;
+        }
+      })
+    );
+  }
+
+  matchEntity(t: any): boolean {
+    if (t instanceof SchemaModelDefinition) {
+      return true;
+    }
+  }
+
+  getEntityUID(t: SchemaModelDefinition) {
+    return t.definition.name;
+  }
+}

package/src/entities/SchemaModelObjectEntityDefinition.ts

@@ -0,0 +1,78 @@
+import {
+  EntityDefinition,
+  EntityDescriberComponent,
+  inject,
+  InlineEntityEncoderComponent,
+  InlineTreePresenterComponent
+} from '@journeyapps-labs/reactor-mod';
+import { DataBrowserEntities } from '../entities';
+import { ConnectionStore } from '../stores/ConnectionStore';
+import { SchemaModelObject } from '../core/SchemaModelObject';
+
+export interface SchemaModelObjectEntityDefinitionEncoded {
+  connection_id: string;
+  type: string;
+  id: string;
+}
+
+export class SchemaModelObjectEntityDefinition extends EntityDefinition<SchemaModelObject> {
+  @inject(ConnectionStore)
+  accessor connectionStore: ConnectionStore;
+
+  constructor() {
+    super({
+      type: DataBrowserEntities.SCHEMA_MODEL_OBJECT,
+      category: 'DataBrowser',
+      label: 'Schema model',
+      icon: 'cube',
+      iconColor: 'mediumpurple'
+    });
+
+    this.registerComponent(
+      new EntityDescriberComponent<SchemaModelObject>({
+        label: 'Simple',
+        describe: (entity: SchemaModelObject) => {
+          return {
+            simpleName: entity.model.id,
+            complexName: entity.definition.definition.label
+          };
+        }
+      })
+    );
+
+    this.registerComponent(
+      new InlineEntityEncoderComponent<SchemaModelObject, SchemaModelObjectEntityDefinitionEncoded>({
+        version: 1,
+        encode: (e) => {
+          return {
+            connection_id: e.definition.connection.id,
+            type: e.definition.definition.name,
+            id: e.model.id
+          };
+        },
+        decode: async (entity) => {
+          let connection = await this.connectionStore.waitForReadyForConnection(entity.connection_id);
+          let definition = await connection.waitForSchemaModelDefinitionByName(entity.type);
+          let db = await definition.getCollection();
+          let model = await db.first(entity.id);
+          return new SchemaModelObject({
+            model,
+            definition
+          });
+        }
+      })
+    );
+
+    this.registerComponent(new InlineTreePresenterComponent<SchemaModelObject>());
+  }
+
+  matchEntity(t: any): boolean {
+    if (t instanceof SchemaModelObject) {
+      return true;
+    }
+  }
+
+  getEntityUID(t: SchemaModelObject) {
+    return t.model.id;
+  }
+}

package/src/entities.ts

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

package/src/forms/APIConnectionForm.tsx

@@ -0,0 +1,48 @@
+import { FormModel, TextInput, TextInputType } from '@journeyapps-labs/reactor-mod';
+import { ManualConnection } from '../core/types/ManualConnection';
+import { ManualConnectionFactory } from '../core/types/ManualConnectionFactory';
+
+export interface APIConnectionFormValue {
+  name: string;
+  base_url: string;
+  api_token: string;
+}
+
+export class APIConnectionForm extends FormModel<APIConnectionFormValue> {
+  constructor(value?: APIConnectionFormValue) {
+    super();
+
+    this.addInput(
+      new TextInput({
+        name: 'name',
+        label: 'Connection name',
+        value: value?.name || 'Default'
+      })
+    );
+
+    this.addInput(
+      new TextInput({
+        name: 'base_url',
+        label: 'Base URL',
+        value: value?.base_url
+      })
+    );
+
+    this.addInput(
+      new TextInput({
+        name: 'api_token',
+        label: 'API Token',
+        inputType: TextInputType.PASSWORD,
+        value: value?.api_token
+      })
+    );
+  }
+
+  generateConnection(factory: ManualConnectionFactory) {
+    return new ManualConnection(factory, {
+      baseUrl: this.value().base_url,
+      token: this.value().api_token,
+      name: this.value().name
+    });
+  }
+}