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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@journeyapps-labs/reactor-mod-data-browser",
-  "version": "3.0.1",
+  "version": "3.1.0",
   "main": "./dist/index.js",
   "typings": "./dist/@types/index",
   "publishConfig": {
@@ -15,29 +15,29 @@
   "license": "Apache-2.0",
   "dependencies": {
     "@emotion/styled": "^11.14.1",
-    "@fortawesome/react-fontawesome": "^3.1.0",
+    "@fortawesome/react-fontawesome": "^3.2.0",
     "@journeyapps-labs/client-backend-v4": "1.0.0",
-    "@journeyapps-labs/common-ioc": "^1.0.0",
-    "@journeyapps-labs/common-sdk": "^1.0.2",
+    "@journeyapps-labs/common-ioc": "^1.0.1",
+    "@journeyapps-labs/common-sdk": "^1.0.3",
     "@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-labs/lib-reactor-data-layer": "1.0.10",
+    "@journeyapps-labs/reactor-mod": "5.0.0",
+    "@journeyapps-labs/reactor-mod-editor": "2.0.0",
     "@journeyapps/db": "^8.1.1",
     "@journeyapps/parser-schema": "^8.2.5",
-    "@projectstorm/react-workspaces-core": "4.2.2",
+    "@projectstorm/react-workspaces-core": "4.2.3",
     "async": "^3.2.6",
-    "lodash": "^4.17.21",
+    "lodash": "^4.17.23",
     "mobx": "^6.15.0",
     "mobx-react": "^9.2.1",
-    "react": "19.2.0",
+    "react": "19.2.4",
     "uuid": "^13.0.0"
   },
   "devDependencies": {
+    "@journeyapps-labs/lib-reactor-builder": "2.0.5",
     "@types/async": "^3.2.25",
-    "@types/react": "^19.2.2",
-    "@journeyapps-labs/lib-reactor-builder": "^2.0.1",
-    "@types/lodash": "^4.17.20",
+    "@types/lodash": "^4.17.24",
+    "@types/react": "^19.2.14",
     "@types/uuid": "^11.0.0"
   },
   "scripts": {

package/src/DataBrowserModule.ts

@@ -1,4 +1,4 @@
-import { AbstractReactorModule, System, WorkspaceStore } from '@journeyapps-labs/reactor-mod';
+import { AbstractReactorModule, ActionStore, PrefsStore, System, WorkspaceStore } from '@journeyapps-labs/reactor-mod';
 import { Container } from '@journeyapps-labs/common-ioc';
 import { ConnectionStore } from './stores/ConnectionStore';
 import { ConnectionEntityDefinition } from './entities/ConnectionEntityDefinition';
@@ -6,6 +6,7 @@ import { ManualConnectionFactory } from './core/types/ManualConnectionFactory';
 import { ConnectionFactoryEntityDefinition } from './entities/ConnectionFactoryEntityDefinition';
 import { AddConnectionAction } from './actions/connections/AddConnectionAction';
 import { RemoveConnectionAction } from './actions/connections/RemoveConnectionAction';
+import { SetConnectionColorAction } from './actions/connections/SetConnectionColorAction';
 import { SchemaModelDefinitionEntityDefinition } from './entities/SchemaModelDefinitionEntityDefinition';
 import { QueryPanelFactory } from './panels/query/QueryPanelFactory';
 import { QuerySchemaModelAction } from './actions/schema-definitions/QuerySchemaModelAction';
@@ -18,6 +19,11 @@ import { TypeEngine } from './forms/TypeEngine';
 import { ViewSchemaModelAsJsonAction } from './actions/schema-model/ViewSchemaModelAsJsonAction';
 import { ModelJsonPanelFactory } from './panels/model-json/ModelJsonPanelFactory';
 import { SchemaModelIndexDefinition } from './entities/SchemaModelIndexDefinition';
+import { SavedQueryStore } from './stores/SavedQueryStore';
+import { SavedQueryEntityDefinition } from './entities/SavedQueryEntityDefinition';
+import { OpenSavedQueryAction } from './actions/saved-queries/OpenSavedQueryAction';
+import { RemoveSavedQueryAction } from './actions/saved-queries/RemoveSavedQueryAction';
+import { registerQueryControlPreferences } from './preferences/QueryControlPreferences';
 
 export class DataBrowserModule extends AbstractReactorModule {
   constructor() {
@@ -28,6 +34,7 @@ export class DataBrowserModule extends AbstractReactorModule {
 
   register(ioc: Container) {
     const system = ioc.get(System);
+    const actionStore = ioc.get(ActionStore);
     const workspaceStore = ioc.get(WorkspaceStore);
 
     let connectionStore = new ConnectionStore();
@@ -35,14 +42,19 @@ export class DataBrowserModule extends AbstractReactorModule {
 
     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.registerAction(new ViewSchemaModelAsJsonAction());
+    actionStore.registerAction(new AddConnectionAction());
+    actionStore.registerAction(new RemoveConnectionAction());
+    actionStore.registerAction(new SetConnectionColorAction());
+    actionStore.registerAction(new QuerySchemaModelAction());
+    actionStore.registerAction(new CreateModelAction());
+    actionStore.registerAction(new EditSchemaModelAction());
+    actionStore.registerAction(new ViewSchemaModelAsJsonAction());
+    actionStore.registerAction(new OpenSavedQueryAction());
+    actionStore.registerAction(new RemoveSavedQueryAction());
 
     system.addStore(ConnectionStore, connectionStore);
+    system.addStore(SavedQueryStore, new SavedQueryStore());
+    registerQueryControlPreferences(ioc.get(PrefsStore));
 
     system.registerDefinition(new ConnectionEntityDefinition());
     system.registerDefinition(new ConnectionFactoryEntityDefinition());
@@ -50,6 +62,7 @@ export class DataBrowserModule extends AbstractReactorModule {
     system.registerDefinition(new SchemaModelObjectEntityDefinition());
     system.registerDefinition(new SchemaModelIndexDefinition());
     system.registerDefinition(new QueryEntityDefinition());
+    system.registerDefinition(new SavedQueryEntityDefinition());
 
     workspaceStore.registerFactory(new QueryPanelFactory());
     workspaceStore.registerFactory(new ModelPanelFactory());
@@ -58,5 +71,6 @@ export class DataBrowserModule extends AbstractReactorModule {
 
   async init(ioc: Container): Promise<any> {
     ioc.get(ConnectionStore).init();
+    ioc.get(SavedQueryStore).init();
   }
 }

package/src/actions/connections/AddConnectionAction.tsx

@@ -1,4 +1,4 @@
-import { EntityAction, EntityActionEvent, inject, ioc, System } from '@journeyapps-labs/reactor-mod';
+import { ActionStore, EntityAction, EntityActionEvent, inject, ioc } from '@journeyapps-labs/reactor-mod';
 import { AbstractConnectionFactory } from '../../core/AbstractConnectionFactory';
 import { DataBrowserEntities } from '../../entities';
 import { ConnectionStore } from '../../stores/ConnectionStore';
@@ -28,6 +28,6 @@ export class AddConnectionAction extends EntityAction<AbstractConnectionFactory>
   }
 
   static get() {
-    return ioc.get(System).getActionByID<AddConnectionAction>(AddConnectionAction.ID);
+    return ioc.get(ActionStore).getActionByID<AddConnectionAction>(AddConnectionAction.ID);
   }
 }

package/src/actions/connections/RemoveConnectionAction.tsx

@@ -1,4 +1,4 @@
-import { EntityAction, EntityActionEvent, inject, ioc, System } from '@journeyapps-labs/reactor-mod';
+import { ActionStore, EntityAction, EntityActionEvent, inject, ioc } from '@journeyapps-labs/reactor-mod';
 import { DataBrowserEntities } from '../../entities';
 import { ConnectionStore } from '../../stores/ConnectionStore';
 import { AbstractConnection } from '../../core/AbstractConnection';
@@ -23,6 +23,6 @@ export class RemoveConnectionAction extends EntityAction<AbstractConnection> {
   }
 
   static get() {
-    return ioc.get(System).getActionByID<RemoveConnectionAction>(RemoveConnectionAction.ID);
+    return ioc.get(ActionStore).getActionByID<RemoveConnectionAction>(RemoveConnectionAction.ID);
   }
 }

package/src/actions/connections/SetConnectionColorAction.ts

@@ -0,0 +1,52 @@
+import {
+  ActionStore,
+  ComboBoxStore2,
+  EntityAction,
+  EntityActionEvent,
+  SimpleComboBoxDirective,
+  inject,
+  ioc
+} from '@journeyapps-labs/reactor-mod';
+import { AbstractConnection } from '../../core/AbstractConnection';
+import { DataBrowserEntities } from '../../entities';
+import { getConnectionColorComboBoxItems } from '../../core/connection-colors';
+import { ConnectionStore } from '../../stores/ConnectionStore';
+
+export class SetConnectionColorAction extends EntityAction<AbstractConnection> {
+  static ID = 'SET_CONNECTION_COLOR';
+
+  @inject(ComboBoxStore2)
+  accessor comboStore: ComboBoxStore2;
+
+  @inject(ConnectionStore)
+  accessor connectionStore: ConnectionStore;
+
+  constructor() {
+    super({
+      id: SetConnectionColorAction.ID,
+      name: 'Set connection color',
+      icon: 'palette',
+      target: DataBrowserEntities.CONNECTION
+    });
+  }
+
+  async fireEvent(event: EntityActionEvent<AbstractConnection>): Promise<any> {
+    const directive = await this.comboStore.show(
+      new SimpleComboBoxDirective({
+        title: 'Connection color',
+        event: event.position,
+        items: getConnectionColorComboBoxItems()
+      })
+    );
+    const selected = directive.getSelectedItem();
+    if (!selected?.key) {
+      return;
+    }
+    event.targetEntity.color = selected.key;
+    this.connectionStore.save();
+  }
+
+  static get() {
+    return ioc.get(ActionStore).getActionByID<SetConnectionColorAction>(SetConnectionColorAction.ID);
+  }
+}

package/src/actions/saved-queries/OpenSavedQueryAction.ts

@@ -0,0 +1,43 @@
+import {
+  ActionStore,
+  EntityAction,
+  EntityActionEvent,
+  inject,
+  ioc,
+  WorkspaceStore
+} from '@journeyapps-labs/reactor-mod';
+import { DataBrowserEntities } from '../../entities';
+import { SavedQueryEntity, SavedQueryStore } from '../../stores/SavedQueryStore';
+import { QueryPanelModel } from '../../panels/query/QueryPanelFactory';
+
+export class OpenSavedQueryAction extends EntityAction<SavedQueryEntity> {
+  static ID = 'OPEN_SAVED_QUERY';
+
+  @inject(WorkspaceStore)
+  accessor workspaceStore: WorkspaceStore;
+
+  @inject(SavedQueryStore)
+  accessor savedQueryStore: SavedQueryStore;
+
+  constructor() {
+    super({
+      id: OpenSavedQueryAction.ID,
+      name: 'Open saved query',
+      icon: 'play',
+      target: DataBrowserEntities.SAVED_QUERY
+    });
+  }
+
+  async fireEvent(event: EntityActionEvent<SavedQueryEntity>): Promise<any> {
+    const query = await this.savedQueryStore.loadSavedQuery(event.targetEntity.id);
+    if (!query) {
+      return;
+    }
+    await query.load();
+    this.workspaceStore.addModel(new QueryPanelModel(query));
+  }
+
+  static get() {
+    return ioc.get(ActionStore).getActionByID<OpenSavedQueryAction>(OpenSavedQueryAction.ID);
+  }
+}

package/src/actions/saved-queries/RemoveSavedQueryAction.ts

@@ -0,0 +1,27 @@
+import { ActionStore, EntityAction, EntityActionEvent, inject, ioc } from '@journeyapps-labs/reactor-mod';
+import { DataBrowserEntities } from '../../entities';
+import { SavedQueryEntity, SavedQueryStore } from '../../stores/SavedQueryStore';
+
+export class RemoveSavedQueryAction extends EntityAction<SavedQueryEntity> {
+  static ID = 'REMOVE_SAVED_QUERY';
+
+  @inject(SavedQueryStore)
+  accessor savedQueryStore: SavedQueryStore;
+
+  constructor() {
+    super({
+      id: RemoveSavedQueryAction.ID,
+      name: 'Delete saved query',
+      icon: 'trash',
+      target: DataBrowserEntities.SAVED_QUERY
+    });
+  }
+
+  async fireEvent(event: EntityActionEvent<SavedQueryEntity>): Promise<any> {
+    await this.savedQueryStore.removeSavedQuery(event.targetEntity.id);
+  }
+
+  static get() {
+    return ioc.get(ActionStore).getActionByID<RemoveSavedQueryAction>(RemoveSavedQueryAction.ID);
+  }
+}

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

@@ -1,4 +1,11 @@
-import { EntityAction, EntityActionEvent, inject, ioc, System, WorkspaceStore } from '@journeyapps-labs/reactor-mod';
+import {
+  ActionStore,
+  EntityAction,
+  EntityActionEvent,
+  inject,
+  ioc,
+  WorkspaceStore
+} from '@journeyapps-labs/reactor-mod';
 import { DataBrowserEntities } from '../../entities';
 import { SchemaModelDefinition } from '../../core/SchemaModelDefinition';
 import { ModelPanelModel } from '../../panels/model/ModelPanelFactory';
@@ -28,6 +35,6 @@ export class CreateModelAction extends EntityAction<SchemaModelDefinition> {
   }
 
   static get() {
-    return ioc.get(System).getActionByID<CreateModelAction>(CreateModelAction.ID);
+    return ioc.get(ActionStore).getActionByID<CreateModelAction>(CreateModelAction.ID);
   }
 }

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

@@ -1,4 +1,11 @@
-import { EntityAction, EntityActionEvent, inject, ioc, System, WorkspaceStore } from '@journeyapps-labs/reactor-mod';
+import {
+  ActionStore,
+  EntityAction,
+  EntityActionEvent,
+  inject,
+  ioc,
+  WorkspaceStore
+} from '@journeyapps-labs/reactor-mod';
 import { DataBrowserEntities } from '../../entities';
 import { SchemaModelDefinition } from '../../core/SchemaModelDefinition';
 import { QueryPanelModel } from '../../panels/query/QueryPanelFactory';
@@ -31,6 +38,6 @@ export class QuerySchemaModelAction extends EntityAction<SchemaModelDefinition>
   }
 
   static get() {
-    return ioc.get(System).getActionByID<QuerySchemaModelAction>(QuerySchemaModelAction.ID);
+    return ioc.get(ActionStore).getActionByID<QuerySchemaModelAction>(QuerySchemaModelAction.ID);
   }
 }

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

@@ -1,4 +1,11 @@
-import { EntityAction, EntityActionEvent, inject, ioc, System, WorkspaceStore } from '@journeyapps-labs/reactor-mod';
+import {
+  ActionStore,
+  EntityAction,
+  EntityActionEvent,
+  inject,
+  ioc,
+  WorkspaceStore
+} from '@journeyapps-labs/reactor-mod';
 import { DataBrowserEntities } from '../../entities';
 import { SchemaModelObject } from '../../core/SchemaModelObject';
 import { ModelPanelModel } from '../../panels/model/ModelPanelFactory';
@@ -28,6 +35,6 @@ export class EditSchemaModelAction extends EntityAction<SchemaModelObject> {
   }
 
   static get() {
-    return ioc.get(System).getActionByID<EditSchemaModelAction>(EditSchemaModelAction.ID);
+    return ioc.get(ActionStore).getActionByID<EditSchemaModelAction>(EditSchemaModelAction.ID);
   }
 }

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

@@ -1,4 +1,11 @@
-import { EntityAction, EntityActionEvent, inject, ioc, System, WorkspaceStore } from '@journeyapps-labs/reactor-mod';
+import {
+  ActionStore,
+  EntityAction,
+  EntityActionEvent,
+  inject,
+  ioc,
+  WorkspaceStore
+} from '@journeyapps-labs/reactor-mod';
 import { DataBrowserEntities } from '../../entities';
 import { SchemaModelObject } from '../../core/SchemaModelObject';
 import { ModelJsonPanelModel } from '../../panels/model-json/ModelJsonPanelFactory';
@@ -28,6 +35,6 @@ export class ViewSchemaModelAsJsonAction extends EntityAction<SchemaModelObject>
   }
 
   static get() {
-    return ioc.get(System).getActionByID<ViewSchemaModelAsJsonAction>(ViewSchemaModelAsJsonAction.ID);
+    return ioc.get(ActionStore).getActionByID<ViewSchemaModelAsJsonAction>(ViewSchemaModelAsJsonAction.ID);
   }
 }

package/src/core/AbstractConnection.ts

@@ -7,14 +7,17 @@ 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 { EntityDescription } from '@journeyapps-labs/reactor-mod';
 import { V4BackendClient, V4Index, V4Indexes } from '@journeyapps-labs/client-backend-v4';
 import { SchemaModelObject } from './SchemaModelObject';
+import { getDefaultConnectionColor } from './connection-colors';
 
 export interface AbstractConnectionSerialized {
   factory: string;
   id: string;
   payload: any;
+  color?: string;
 }
 
 export interface AbstractConnectionListener {
@@ -23,6 +26,7 @@ export interface AbstractConnectionListener {
 
 export abstract class AbstractConnection extends BaseObserver<AbstractConnectionListener> {
   id: string;
+  @observable accessor color: string;
 
   schema_models_collection: Collection<ObjectType>;
   schema_models: LifecycleCollection<ObjectType, SchemaModelDefinition>;
@@ -31,6 +35,7 @@ export abstract class AbstractConnection extends BaseObserver<AbstractConnection
   constructor(public factory: AbstractConnectionFactory) {
     super();
     this.id = v4();
+    this.color = getDefaultConnectionColor(this.id);
     this.schema_models_collection = new Collection();
     this.schema_models = new LifecycleCollection({
       collection: this.schema_models_collection,
@@ -124,7 +129,8 @@ export abstract class AbstractConnection extends BaseObserver<AbstractConnection
     return {
       id: this.id,
       factory: this.factory.options.key,
-      payload: this._serialize()
+      payload: this._serialize(),
+      color: this.color
     };
   }
 

package/src/core/SchemaModelDefinition.ts

@@ -9,6 +9,7 @@ import { v4 } from 'uuid';
 import { V4Index } from '@journeyapps-labs/client-backend-v4';
 import { action, observable } from 'mobx';
 import { IndexModel } from './IndexModel';
+import { TypeEngine } from '../forms/TypeEngine';
 
 export interface SchemaModelDefinitionListener {
   resolved: (event: { object: SchemaModelObject }) => any;
@@ -169,4 +170,19 @@ export class SchemaModelDefinition
       adapter: collection.adapter
     });
   }
+
+  getFilterableFields(typeEngine: TypeEngine): { key: string; label: string }[] {
+    return Object.values(this.definition.attributes)
+      .map((attribute) => {
+        const handler = typeEngine.getHandler(attribute.type);
+        if (!handler?.setupFilter) {
+          return null;
+        }
+        return {
+          key: attribute.name,
+          label: attribute.label || attribute.name
+        };
+      })
+      .filter((value) => !!value);
+  }
 }

package/src/core/connection-colors.ts

@@ -0,0 +1,49 @@
+import { ComboBoxItem } from '@journeyapps-labs/reactor-mod';
+
+export interface ConnectionColorOption {
+  key: string;
+  label: string;
+}
+
+export const CONNECTION_COLOR_OPTIONS: ConnectionColorOption[] = [
+  { key: '#00bcd4', label: 'Cyan' },
+  { key: '#4caf50', label: 'Green' },
+  { key: '#ff9800', label: 'Orange' },
+  { key: '#e91e63', label: 'Pink' },
+  { key: '#9c27b0', label: 'Purple' },
+  { key: '#f44336', label: 'Red' },
+  { key: '#2196f3', label: 'Blue' },
+  { key: '#ffc107', label: 'Amber' }
+];
+
+export const DEFAULT_CONNECTION_COLOR = CONNECTION_COLOR_OPTIONS[0].key;
+
+export function getConnectionColorComboBoxItems(): ComboBoxItem[] {
+  return CONNECTION_COLOR_OPTIONS.map((option) => ({
+    key: option.key,
+    title: option.label,
+    icon: 'circle',
+    color: option.key
+  }));
+}
+
+export function getConnectionColorSetOptions(): Record<string, string> {
+  return CONNECTION_COLOR_OPTIONS.reduce(
+    (prev, option) => {
+      prev[option.key] = option.label;
+      return prev;
+    },
+    {} as Record<string, string>
+  );
+}
+
+export function getDefaultConnectionColor(seed: string): string {
+  if (!seed) {
+    return DEFAULT_CONNECTION_COLOR;
+  }
+  let hash = 0;
+  for (let i = 0; i < seed.length; i++) {
+    hash = (hash * 31 + seed.charCodeAt(i)) >>> 0;
+  }
+  return CONNECTION_COLOR_OPTIONS[hash % CONNECTION_COLOR_OPTIONS.length].key;
+}

package/src/core/query/StandardModelFields.ts

@@ -0,0 +1,9 @@
+export enum StandardModelFields {
+  ID = 'id',
+  UPDATED_AT = 'updated_at'
+}
+
+export const STANDARD_MODEL_FIELD_LABELS: Record<StandardModelFields, string> = {
+  [StandardModelFields.ID]: 'ID',
+  [StandardModelFields.UPDATED_AT]: 'Updated at'
+};

package/src/core/query/filters.ts

@@ -1,30 +1,145 @@
 import { Query, Variable } from '@journeyapps/db';
+import { EntityLabel } from '@journeyapps-labs/reactor-mod';
+import { BaseObserver } from '@journeyapps-labs/common-utils';
+
+export interface AbstractFilterListener {
+  removeRequested: () => any;
+}
+
+export abstract class AbstractFilter extends BaseObserver<AbstractFilterListener> {
+  constructor() {
+    super();
+  }
+
+  delete() {
+    this.iterateListeners((listener) => listener.removeRequested?.());
+  }
 
-export abstract class AbstractFilter {
   abstract augment(query: Query);
 }
 
 export enum Condition {
-  EQUALS = '='
+  EQUALS = '=',
+  NOT_EQUALS = '!=',
+  GREATER_THAN = '>',
+  GREATER_THAN_OR_EQUAL = '>=',
+  LESS_THAN = '<',
+  LESS_THAN_OR_EQUAL = '<=',
+  STARTS_WITH = 'starts with',
+  CONTAINS = 'contains'
+}
+
+export enum StatementMatch {
+  ANY = 'ANY',
+  ALL = 'ALL'
 }
 
-export interface Statement {
+export enum FilterType {
+  SIMPLE = 'simple'
+}
+
+export interface SerializedStatement {
   condition: Condition;
   arg: any;
 }
 
+export interface SerializedSimpleFilter {
+  type: FilterType;
+  variable: string;
+  match?: StatementMatch;
+  statements: SerializedStatement[];
+}
+
+export class Statement {
+  constructor(
+    public condition: Condition,
+    public arg: any
+  ) {}
+
+  serialize(): SerializedStatement {
+    return {
+      condition: this.condition,
+      arg: this.arg
+    };
+  }
+
+  static deserialize(data: SerializedStatement): Statement {
+    if (
+      data.condition === Condition.EQUALS ||
+      data.condition === Condition.NOT_EQUALS ||
+      data.condition === Condition.GREATER_THAN ||
+      data.condition === Condition.GREATER_THAN_OR_EQUAL ||
+      data.condition === Condition.LESS_THAN ||
+      data.condition === Condition.LESS_THAN_OR_EQUAL ||
+      data.condition === Condition.STARTS_WITH ||
+      data.condition === Condition.CONTAINS
+    ) {
+      return new Statement(data.condition, data.arg);
+    }
+    throw new Error(`Unsupported statement condition: ${data.condition}`);
+  }
+
+  getMetadataLabel(): EntityLabel {
+    return {
+      label: this.condition,
+      value: `${this.arg}`
+    };
+  }
+}
+
 export class SimpleFilter extends AbstractFilter {
+  readonly type = FilterType.SIMPLE;
+  public statements: Statement[];
+  public match: StatementMatch;
+
   constructor(
-    public variable: Variable,
-    public statements: Statement[]
+    variable: Variable,
+    statements: (Statement | SerializedStatement)[],
+    match: StatementMatch = StatementMatch.ANY
   ) {
     super();
+    this.variable = variable;
+    this.match = match;
+    this.statements = (statements || []).map((statement) => {
+      if (statement instanceof Statement) {
+        return statement;
+      }
+      return Statement.deserialize(statement);
+    });
   }
 
+  public variable: Variable;
+
   augment(query: Query) {
+    const separator = this.match === StatementMatch.ALL ? ' and ' : ' or ';
     return query.where(
-      this.statements.map((s) => `${this.variable.name} ${s.condition} ?`).join(' or '),
+      this.statements.map((s) => `${this.variable.name} ${s.condition} ?`).join(separator),
       ...this.statements.map((s) => s.arg)
     );
   }
+
+  serialize(): SerializedSimpleFilter {
+    return {
+      type: this.type,
+      variable: this.variable.name,
+      match: this.match,
+      statements: this.statements.map((statement) => statement.serialize())
+    };
+  }
+
+  static deserialize(variable: Variable, data: SerializedSimpleFilter): SimpleFilter {
+    return new SimpleFilter(variable, data?.statements || [], data?.match || StatementMatch.ANY);
+  }
+
+  static canDeserialize(data: any): data is SerializedSimpleFilter {
+    return !!data && (data.type == null || data.type === FilterType.SIMPLE);
+  }
+
+  getMetadata() {
+    if (!this.statements || this.statements.length === 0) {
+      return [];
+    }
+
+    return this.statements.map((statement) => statement.getMetadataLabel());
+  }
 }

package/src/core/query/query-simple/SimplePage.ts

@@ -1,10 +1,13 @@
 import { Page, PageOptions } from '../Page';
 import { AbstractFilter } from '../filters';
+import { SimpleQuerySort } from './SimpleQueryTypes';
+import { applyFiltersAndSorts } from './SimpleQueryPlanner';
 
 export interface SimplePageOptions extends PageOptions {
   offset: number;
   limit: number;
   filters: AbstractFilter[];
+  sorts?: SimpleQuerySort[];
 }
 
 export class SimplePage extends Page {
@@ -15,11 +18,7 @@ export class SimplePage extends Page {
   async load() {
     this.loading = true;
     let collection = await this.options.definition.getCollection();
-    let query = collection.all();
-
-    this.options2.filters.forEach((f) => {
-      query = f.augment(query);
-    });
+    let query = applyFiltersAndSorts(collection.all(), this.options2.filters, this.options2.sorts || []);
 
     this.models = await this.options.definition.executeQuery(
       query.limit(this.options2.limit).skip(this.options2.offset)