@journeyapps-labs/reactor-mod-data-browser 3.0.1 → 3.1.0

package/src/forms/types/shared/ui.tsx

@@ -0,0 +1,40 @@
+import * as React from 'react';
+import { styled } from '@journeyapps-labs/reactor-mod';
+import * as _ from 'lodash';
+import { EmptyValueWidget } from '../../../widgets/EmptyValueWidget';
+
+export const MAX_NUMBER_OF_ARR_ITEMS_TO_DISPLAY = 3;
+
+namespace S {
+  export const Empty = styled(EmptyValueWidget)``;
+
+  export const Pills = styled.div`
+    display: flex;
+    column-gap: 2px;
+    row-gap: 2px;
+  `;
+
+  export const Pill = styled.div`
+    padding: 2px 4px;
+    background: ${(p) => p.theme.table.pills};
+    border-radius: 3px;
+    font-size: 12px;
+  `;
+}
+
+export const TypeUI = S;
+
+export function displayArray(value: any[]) {
+  if (value.length === 0) {
+    return <S.Empty>empty array</S.Empty>;
+  }
+  const items = _.slice(value, 0, MAX_NUMBER_OF_ARR_ITEMS_TO_DISPLAY);
+  return (
+    <S.Pills>
+      {items.map((c) => {
+        return <S.Pill key={c}>{c}</S.Pill>;
+      })}
+      {items.length !== value.length ? '...' : null}
+    </S.Pills>
+  );
+}

package/src/forms/types/single-choice-handler.tsx

@@ -0,0 +1,47 @@
+import { SingleChoiceType } from '@journeyapps/db';
+import { ComboBoxStore, ioc, SelectInput } from '@journeyapps-labs/reactor-mod';
+import * as _ from 'lodash';
+import { TypeHandler } from './shared/type-handler';
+import { Condition, SimpleFilter, Statement } from '../../core/query/filters';
+
+export const singleChoiceHandler: TypeHandler = {
+  matches: (type) => type instanceof SingleChoiceType,
+  encode: async (value: string) => value,
+  decode: async (value: string) => value,
+  encodeToScalar: async (value: string) => value,
+  decodeFromScalar: async (value) => (value == null ? '' : `${value}`),
+  generateField: ({ label, name, type }) => {
+    return new SelectInput({
+      name,
+      label,
+      options: _.mapValues(type.options, (o) => `${o.value}`)
+    });
+  },
+  generateDisplay: ({ value }) => {
+    return value;
+  },
+  setupFilter: async ({ variable, filter, position }) => {
+    if (!(variable.type instanceof SingleChoiceType)) {
+      return null;
+    }
+    const results = await ioc.get(ComboBoxStore).showMultiSelectComboBox(
+      _.map(variable.type.options, (option) => {
+        return {
+          title: `${option.value}`,
+          key: `${option.value}`,
+          checked: !!filter?.statements?.find((s) => s.arg === `${option.value}`)
+        };
+      }),
+      position as any
+    );
+    if (results.length === 0) {
+      return null;
+    }
+    return new SimpleFilter(
+      variable,
+      results.map((r) => {
+        return new Statement(Condition.EQUALS, r.key);
+      })
+    );
+  }
+};

package/src/forms/types/single-choice-integer-handler.tsx

@@ -0,0 +1,47 @@
+import { SingleChoiceIntegerType } from '@journeyapps/db';
+import { ComboBoxStore, ioc, SelectInput } from '@journeyapps-labs/reactor-mod';
+import * as _ from 'lodash';
+import { TypeHandler } from './shared/type-handler';
+import { Condition, SimpleFilter, Statement } from '../../core/query/filters';
+
+export const singleChoiceIntegerHandler: TypeHandler = {
+  matches: (type) => type instanceof SingleChoiceIntegerType,
+  encode: async (value: string) => parseInt(value),
+  decode: async (value: number) => `${value}`,
+  encodeToScalar: async (value: string) => value,
+  decodeFromScalar: async (value) => (value == null ? '' : `${value}`),
+  generateField: ({ label, name, type }) => {
+    return new SelectInput({
+      name,
+      label,
+      options: _.mapValues(type.options, (o) => `${o.value}`)
+    });
+  },
+  generateDisplay: ({ value }) => {
+    return `${value}`;
+  },
+  setupFilter: async ({ variable, filter, position }) => {
+    if (!(variable.type instanceof SingleChoiceIntegerType)) {
+      return null;
+    }
+    const results = await ioc.get(ComboBoxStore).showMultiSelectComboBox(
+      _.map(variable.type.options, (option) => {
+        return {
+          title: `${option.value}`,
+          key: `${option.value}`,
+          checked: !!filter?.statements?.find((s) => s.arg === `${option.value}`)
+        };
+      }),
+      position as any
+    );
+    if (results.length === 0) {
+      return null;
+    }
+    return new SimpleFilter(
+      variable,
+      results.map((r) => {
+        return new Statement(Condition.EQUALS, r.key);
+      })
+    );
+  }
+};

package/src/forms/types/text-handler.tsx

@@ -0,0 +1,247 @@
+import { TextType, Variable } from '@journeyapps/db';
+import {
+  DialogStore2,
+  FormInput,
+  FormInputRenderOptions,
+  TableButtonWidget,
+  TextArea,
+  TextAreaInput,
+  TextInput,
+  TextInputType,
+  ioc,
+  styled
+} from '@journeyapps-labs/reactor-mod';
+import * as React from 'react';
+import { ModelJsonPanelModel } from '../../panels/model-json/ModelJsonPanelFactory';
+import { TypeHandler, TypeHandlerContext } from './shared/type-handler';
+import { TypeUI } from './shared/ui';
+import { Condition, SimpleFilter, Statement, StatementMatch } from '../../core/query/filters';
+import {
+  ConditionalFilterForm,
+  ConditionalFilterFormOptions,
+  ConditionalFilterFormValue,
+  ConditionalStatementValue
+} from './filters/ConditionalFilterForm';
+import { ClearableFilterFormDialogDirective } from './filters/ClearableFilterFormDialogDirective';
+
+interface TextFilterFormValue extends ConditionalFilterFormValue<string> {
+  statements: ConditionalStatementValue<string>[];
+}
+
+interface TextFilterFormOptions extends ConditionalFilterFormOptions<string> {
+  type: TextType;
+  statements?: ConditionalStatementValue<string>[];
+}
+
+const getRowsFromValue = (value?: string | null): number => {
+  const lines = `${value || ''}`.split(/\r?\n/).length || 1;
+  return Math.max(2, Math.min(12, lines));
+};
+
+class AutoRowsTextAreaInput extends TextAreaInput {
+  renderControl(options: FormInputRenderOptions): React.JSX.Element {
+    return (
+      <TextArea
+        data-1p-ignore="true"
+        autoComplete="off"
+        name={this.name}
+        rows={getRowsFromValue(this.value)}
+        value={this.value || ''}
+        onChange={(event) => {
+          this.setValue(event.target.value);
+        }}
+      />
+    );
+  }
+}
+
+const generateTextField = ({
+  label,
+  name,
+  type,
+  value
+}: {
+  label: string;
+  name: string;
+  type: TextType;
+  value?: string;
+}): FormInput => {
+  if (type.subType == 'paragraph') {
+    return new AutoRowsTextAreaInput({
+      name,
+      label,
+      value
+    });
+  }
+
+  if (type.subType == 'password') {
+    return new TextInput({
+      name,
+      label,
+      inputType: TextInputType.PASSWORD
+    });
+  }
+
+  return new TextInput({
+    name,
+    label
+  });
+};
+
+class TextFilterForm extends ConditionalFilterForm<string> {
+  constructor(protected options2: TextFilterFormOptions) {
+    super(options2);
+  }
+
+  static fromFilter(filter: SimpleFilter | undefined, type: TextType): TextFilterFormOptions {
+    return {
+      type,
+      match: filter?.match || StatementMatch.ALL,
+      statements: (filter?.statements || [])
+        .map((statement) => ({
+          condition: statement.condition || Condition.EQUALS,
+          value: statement.arg == null ? '' : `${statement.arg}`
+        }))
+        .filter((statement) => statement.value.trim() !== '')
+    };
+  }
+
+  toFilter(variable: Variable): SimpleFilter | null {
+    const formValue = this.value() as TextFilterFormValue;
+    const statements = (formValue.statements || [])
+      .map((statement) => ({
+        condition: statement?.condition || Condition.EQUALS,
+        arg: statement?.value == null ? '' : `${statement.value}`.trim()
+      }))
+      .filter((statement) => statement.arg !== '')
+      .map((statement) => new Statement(statement.condition, statement.arg));
+    if (statements.length === 0) {
+      return null;
+    }
+    return new SimpleFilter(variable, statements, formValue.match || StatementMatch.ALL);
+  }
+
+  protected generateValueInput(): FormInput {
+    return generateTextField({
+      name: 'value',
+      label: 'Value',
+      type: this.options2.type,
+      value: this.getDefaultValue()
+    });
+  }
+
+  protected getConditionOptions(): Record<string, string> {
+    return {
+      [Condition.EQUALS]: '=',
+      [Condition.STARTS_WITH]: 'Starts with',
+      [Condition.CONTAINS]: 'Contains'
+    };
+  }
+
+  protected getDefaultCondition(): Condition {
+    return Condition.CONTAINS;
+  }
+
+  protected getDefaultValue(): string {
+    return '';
+  }
+}
+
+export const textHandler = (context: TypeHandlerContext): TypeHandler<TextType, string, string> => {
+  return {
+    matches: (type) => type instanceof TextType,
+    encode: async (value: string) => value,
+    decode: async (value: string) => value,
+    encodeToScalar: async (value: string) => value,
+    decodeFromScalar: async (value) => (value == null ? '' : `${value}`),
+    generateField: ({ label, name, type }) => {
+      return generateTextField({ label, name, type });
+    },
+    generateDisplay: ({ value, type, name, model }) => {
+      if (value.trim() === '') {
+        return <TypeUI.Empty>empty</TypeUI.Empty>;
+      }
+
+      if (type.subType == 'password') {
+        return '****';
+      }
+
+      if (type.subType == 'paragraph') {
+        if ((value.startsWith('[') && value.endsWith(']')) || (value.startsWith('{') && value.endsWith('}'))) {
+          try {
+            JSON.parse(value);
+            return (
+              <TableButtonWidget
+                icon="code"
+                label="JSON"
+                action={() => {
+                  context.workspaceStore.addModel(
+                    new ModelJsonPanelModel({
+                      definition: model.definition,
+                      model: model,
+                      field: name
+                    })
+                  );
+                }}
+              />
+            );
+          } catch (ex) {}
+        }
+      }
+
+      if (type.subType == 'url') {
+        return (
+          <S.Container>
+            {value}
+            <TableButtonWidget
+              icon="arrow-right"
+              action={() => {
+                window.open(value, '_blank');
+              }}
+            />
+          </S.Container>
+        );
+      }
+
+      return <S.Max>{value}</S.Max>;
+    },
+    setupFilter: async ({ variable, filter }) => {
+      if (!(variable.type instanceof TextType)) {
+        return null;
+      }
+
+      const form = new TextFilterForm(TextFilterForm.fromFilter(filter, variable.type));
+      const result = await ioc.get(DialogStore2).showDialog(
+        new ClearableFilterFormDialogDirective({
+          title: `Filter ${variable.label || variable.name}`,
+          form,
+          filter,
+          handler: async () => {}
+        })
+      );
+      if (!result) {
+        return null;
+      }
+      return form.toFilter(variable);
+    }
+  };
+};
+
+namespace S {
+  export const Max = styled.div`
+    max-width: 500px;
+    white-space: pre;
+    display: inline-block;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  `;
+
+  export const Container = styled.div`
+    display: flex;
+    flex-direction: row;
+    column-gap: 5px;
+    align-items: center;
+    justify-content: space-between;
+    flex-grow: 1;
+  `;
+}

package/src/index.ts

@@ -20,6 +20,7 @@ export * from './entities/SchemaModelObjectEntityDefinition';
 export * from './panels/query/QueryPanelFactory';
 export * from './panels/model/ModelPanelFactory';
 export * from './panels/_shared/SharedModelPanelFactory';
+export * from './panels/_shared/SharedConnectionPanelFactory';
 
 export * from './stores/ConnectionStore';
 

package/src/panels/_shared/SharedConnectionPanelFactory.tsx

@@ -0,0 +1,55 @@
+import { AbstractConnection } from '../../core/AbstractConnection';
+import { observable } from 'mobx';
+import { ReactorPanelFactory, ReactorPanelModel, TabWidget } from '@journeyapps-labs/reactor-mod';
+import { TabRendererEvent } from '@projectstorm/react-workspaces-model-tabs';
+import React from 'react';
+
+export interface SharedConnectionPanelModelOptions {
+  connection?: AbstractConnection;
+}
+
+export class SharedConnectionPanelModel extends ReactorPanelModel {
+  @observable
+  accessor connection: AbstractConnection;
+
+  constructor(type: string, options?: SharedConnectionPanelModelOptions) {
+    super(type);
+    this.connection = options?.connection || null;
+  }
+
+  encodeEntities() {
+    return {
+      ...super.encodeEntities(),
+      connection: this.connection
+    };
+  }
+
+  decodeEntities(entities: ReturnType<this['encodeEntities']>) {
+    this.connection = entities.connection;
+  }
+}
+
+export abstract class SharedConnectionPanelFactory<T extends ReactorPanelModel> extends ReactorPanelFactory<T> {
+  protected abstract getConnection(model: T): AbstractConnection | null;
+
+  protected generatePanelTabInternal(event: TabRendererEvent<T>) {
+    const connection = this.getConnection(event.model);
+    return (
+      <TabWidget
+        icon={this.getTabIcon(event)}
+        factory={this}
+        engine={event.engine}
+        model={event.model}
+        selected={event.selected}
+        title={this.getSimpleName(event.model)}
+        indicator={
+          connection?.color
+            ? {
+                color: connection.color
+              }
+            : undefined
+        }
+      />
+    );
+  }
+}

package/src/panels/_shared/SharedModelPanelFactory.tsx

@@ -1,8 +1,10 @@
-import { inject, ReactorPanelFactory, ReactorPanelModel } from '@journeyapps-labs/reactor-mod';
+import { inject, ReactorPanelModel } from '@journeyapps-labs/reactor-mod';
 import { ConnectionStore } from '../../stores/ConnectionStore';
 import { observable } from 'mobx';
 import { SchemaModelDefinition } from '../../core/SchemaModelDefinition';
 import { SchemaModelObject } from '../../core/SchemaModelObject';
+import { SharedConnectionPanelFactory } from './SharedConnectionPanelFactory';
+import { AbstractConnection } from '../../core/AbstractConnection';
 
 export interface SharedModelPanelModelOptions {
   definition: SchemaModelDefinition;
@@ -39,7 +41,11 @@ export class SharedModelPanelModel extends ReactorPanelModel {
   }
 }
 
-export abstract class SharedModelPanelFactory<T extends SharedModelPanelModel> extends ReactorPanelFactory<T> {
+export abstract class SharedModelPanelFactory<T extends SharedModelPanelModel> extends SharedConnectionPanelFactory<T> {
+  protected getConnection(model: T): AbstractConnection | null {
+    return model.definition?.connection || null;
+  }
+
   getSimpleName(model: T) {
     let _model = model.model;
     let _definition = model.definition;

package/src/panels/query/PageResultsWidget.tsx

@@ -1,16 +1,8 @@
 import * as React from 'react';
 import { Page } from '../../core/query/Page';
-import {
-  ActionSource,
-  ioc,
-  LoadingPanelWidget,
-  ScrollableDivCss,
-  System,
-  TableWidget
-} from '@journeyapps-labs/reactor-mod';
+import { themed, ioc, ScrollableDivCss, System, TableWidget, LoadingPanelWidget } from '@journeyapps-labs/reactor-mod';
 import { AbstractQuery } from '../../core/query/AbstractQuery';
 import { observer } from 'mobx-react';
-import styled from '@emotion/styled';
 import { DataBrowserEntities } from '../../entities';
 import { SchemaModelObject } from '../../core/SchemaModelObject';
 
@@ -21,32 +13,52 @@ export interface PageResultsWidgetProps {
 
 export const PageResultsWidget: React.FC<PageResultsWidgetProps> = observer((props) => {
   const system = ioc.get(System);
+  const rows = props.page.loading ? [] : props.page.asRows();
 
   return (
-    <LoadingPanelWidget
-      loading={props.page.loading}
-      children={() => {
-        return (
-          <S.Container>
-            <TableWidget
-              onContextMenu={(event, row) => {
-                system
-                  .getDefinition<SchemaModelObject>(DataBrowserEntities.SCHEMA_MODEL_OBJECT)
-                  .showContextMenuForEntity(row.model, event);
-              }}
-              rows={props.page.asRows()}
-              columns={props.query.getColumns()}
-            />
-          </S.Container>
-        );
-      }}
-    />
+    <S.Container>
+      <TableWidget
+        onContextMenu={(event, row) => {
+          system
+            .getDefinition<SchemaModelObject>(DataBrowserEntities.SCHEMA_MODEL_OBJECT)
+            .showContextMenuForEntity(row.model, event);
+        }}
+        rows={rows}
+        columns={props.query.getColumns()}
+      />
+      {props.page.loading ? (
+        <S.RowsLoading>
+          <LoadingPanelWidget loading={true}>{() => null}</LoadingPanelWidget>
+        </S.RowsLoading>
+      ) : rows.length === 0 ? (
+        <S.EmptyState>No results for this query</S.EmptyState>
+      ) : null}
+    </S.Container>
   );
 });
 
 namespace S {
-  export const Container = styled.div`
+  export const Container = themed.div`
+    position: relative;
     overflow: auto;
+    height: 100%;
     ${ScrollableDivCss};
   `;
+
+  export const EmptyState = themed.div`
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    min-height: 180px;
+    color: ${(p) => p.theme.text.secondary};
+    font-size: 14px;
+    font-weight: 500;
+  `;
+
+  export const RowsLoading = themed.div`
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    min-height: 180px;
+  `;
 }

package/src/panels/query/QueryPanelFactory.tsx

@@ -1,11 +1,14 @@
 import * as React from 'react';
-import { inject, ReactorPanelFactory, ReactorPanelModel } from '@journeyapps-labs/reactor-mod';
+import { inject, ioc, ReactorPanelModel } from '@journeyapps-labs/reactor-mod';
 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 { AbstractSerializableQuery } from '../../core/query/AbstractSerializableQuery';
+import { SavedQueryStore } from '../../stores/SavedQueryStore';
+import { AbstractConnection } from '../../core/AbstractConnection';
+import { SharedConnectionPanelFactory } from '../_shared/SharedConnectionPanelFactory';
 
 export class QueryPanelModel extends ReactorPanelModel {
   @inject(ConnectionStore)
@@ -49,9 +52,19 @@ export class QueryPanelModel extends ReactorPanelModel {
   decodeEntities(data: ReturnType<this['encodeEntities']>) {
     this.query = data.query;
   }
+
+  async loadSavedQuery(id: string): Promise<void> {
+    const query = await ioc.get(SavedQueryStore).loadSavedQuery(id);
+    if (!query) {
+      return;
+    }
+    this.current_page = 0;
+    this.query = query;
+    await query.load();
+  }
 }
 
-export class QueryPanelFactory extends ReactorPanelFactory<QueryPanelModel> {
+export class QueryPanelFactory extends SharedConnectionPanelFactory<QueryPanelModel> {
   static TYPE = 'query';
 
   constructor() {
@@ -71,6 +84,10 @@ export class QueryPanelFactory extends ReactorPanelFactory<QueryPanelModel> {
     return model.query?.getSimpleName();
   }
 
+  protected getConnection(model: QueryPanelModel): AbstractConnection | null {
+    return model.query?.connection || null;
+  }
+
   _generateModel(): QueryPanelModel {
     return new QueryPanelModel(null);
   }