# HG changeset patch
# User cin
# Date 2022-09-18 21:15:56
# Node ID 1a190b3a757dc650c2c612073cbffaaa720b6090
# Parent  4a375b9c654a64efcec6c2ea0d0f1e3d8d92023b

corrected tear down logic handling in observables. Added support for observable query results

diff --git a/djx/package-lock.json b/djx/package-lock.json
--- a/djx/package-lock.json
+++ b/djx/package-lock.json
@@ -25,6 +25,7 @@
                 "eslint-plugin-promise": "^6.0.0",
                 "eslint-plugin-react": "^7.29.4",
                 "requirejs": "2.3.6",
+                "rxjs": "7.5.6",
                 "tap": "16.3.0",
                 "typescript": "4.8.3",
                 "yaml": "~1.7.2"
@@ -3994,6 +3995,21 @@
                 "queue-microtask": "^1.2.2"
             }
         },
+        "node_modules/rxjs": {
+            "version": "7.5.6",
+            "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-7.5.6.tgz",
+            "integrity": "sha512-dnyv2/YsXhnm461G+R/Pe5bWP41Nm6LBXEYWI6eiFP4fiwx6WRI/CD0zbdVAudd9xwLEF2IDcKXLHit0FYjUzw==",
+            "dev": true,
+            "dependencies": {
+                "tslib": "^2.1.0"
+            }
+        },
+        "node_modules/rxjs/node_modules/tslib": {
+            "version": "2.4.0",
+            "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.4.0.tgz",
+            "integrity": "sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ==",
+            "dev": true
+        },
         "node_modules/safe-buffer": {
             "version": "5.1.2",
             "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
@@ -9572,6 +9588,23 @@
                 "queue-microtask": "^1.2.2"
             }
         },
+        "rxjs": {
+            "version": "7.5.6",
+            "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-7.5.6.tgz",
+            "integrity": "sha512-dnyv2/YsXhnm461G+R/Pe5bWP41Nm6LBXEYWI6eiFP4fiwx6WRI/CD0zbdVAudd9xwLEF2IDcKXLHit0FYjUzw==",
+            "dev": true,
+            "requires": {
+                "tslib": "^2.1.0"
+            },
+            "dependencies": {
+                "tslib": {
+                    "version": "2.4.0",
+                    "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.4.0.tgz",
+                    "integrity": "sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ==",
+                    "dev": true
+                }
+            }
+        },
         "safe-buffer": {
             "version": "5.1.2",
             "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
diff --git a/djx/package.json b/djx/package.json
--- a/djx/package.json
+++ b/djx/package.json
@@ -24,6 +24,7 @@
         "@types/requirejs": "2.1.31",
         "@types/yaml": "1.2.0",
         "@types/tap": "15.0.7",
+        "rxjs": "7.5.6",
         "dojo": "1.16.0",
         "@implab/dojo-typings": "1.0.3",
         "@typescript-eslint/eslint-plugin": "^5.23.0",
diff --git a/djx/src/main/ts/observable.ts b/djx/src/main/ts/observable.ts
--- a/djx/src/main/ts/observable.ts
+++ b/djx/src/main/ts/observable.ts
@@ -1,3 +1,6 @@
+import { PromiseOrValue } from "@implab/core-amd/interfaces";
+import { isPromise } from "@implab/core-amd/safe";
+
 /**
  * The interface for the consumer of an observable sequence
  */
@@ -19,11 +22,30 @@ export interface Observer<T> {
 }
 
 /**
- * The group of functions to feed an observable. This methods are provided to
+ * The group of functions to feed an observable. These methods are provided to
  * the producer to generate a stream of events.
  */
 export type Sink<T> = {
-    [k in keyof Observer<T>]: (this: void, ...args: Parameters<Observer<T>[k]>) => void;
+    /**
+     * Call to send the next element in the sequence
+     */
+     next: (value: T) => void;
+
+     /**
+      * Call to notify about the error occurred in the sequence.
+      */
+     error: (e: unknown) => void;
+ 
+     /**
+      * Call to signal the end of the sequence.
+      */
+     complete: () => void;
+
+     /**
+      * Checks whether the sink is accepting new elements. It's safe to
+      * send elements to the closed sink.
+      */
+     isClosed: () => boolean;
 };
 
 export type Producer<T> = (sink: Sink<T>) => (void | (() => void));
@@ -64,6 +86,8 @@ export interface Observable<T> extends S
      * @param initial 
      */
     scan<A>(accumulator: (acc: A, value: T) => A, initial: A): Observable<A>;
+
+    cat(...seq: Subscribable<T>[]): Observable<T>;
 }
 
 const noop = () => { };
@@ -73,75 +97,133 @@ const sink = <T>(consumer: Partial<Obser
     return {
         next: next ? next.bind(consumer) : noop,
         error: error ? error.bind(consumer) : noop,
-        complete: complete ? complete.bind(consumer) : noop
+        complete: complete ? complete.bind(consumer) : noop,
+        isClosed: () => false
     };
 };
 
-const fuse = <T>({ next, error, complete }: Sink<T>) => {
+/** Wraps the producer to handle tear down logic and subscription management
+ * 
+ * @param producer The producer to wrap
+ * @returns The wrapper producer
+ */
+const fuse = <T>(producer: Producer<T>) => ({ next, error, complete }: Sink<T>) => {
     let done = false;
-    return {
+    let cleanup = noop;
+
+    const _fin = <A extends unknown[]>(fn: (...args: A) => void) =>
+        (...args: A) => done ?
+            void (0) :
+            (done = true, cleanup(), fn(...args));
+
+    const safeSink = {
         next: (value: T) => { !done && next(value); },
-        error: (e: unknown) => { !done && (done = true, error(e)); },
-        complete: () => { !done && (done = true, complete()); }
+        error: _fin(error),
+        complete: _fin(complete),
+        isClosed: () => done
     };
+    cleanup = producer(safeSink) ?? noop;
+    return done ?
+        (cleanup(), noop) :
+        _fin(noop);
 };
 
 const _observe = <T>(producer: Producer<T>): Observable<T> => ({
     subscribe: (consumer: Partial<Observer<T>>) => ({
         unsubscribe: producer(sink(consumer)) ?? noop
     }),
-    map: (mapper) => _observe(({ next, error, complete }) =>
+    map: (mapper) => _observe(({ next, ...rest }) =>
         producer({
             next: next !== noop ? (v: T) => next(mapper(v)) : noop,
-            error,
-            complete
+            ...rest
+        })
+    ),
+    filter: (predicate) => _observe(({ next, ...rest }) =>
+        producer({
+            next: next !== noop ? (v: T) => predicate(v) ? next(v) : void (0) : noop,
+            ...rest
         })
     ),
-    filter: (predicate) => _observe(({ next, error, complete }) =>
-        producer({
-            next: next !== noop ?
-                (v: T) => predicate(v) ? next(v) : void (0) : noop,
-            error,
-            complete
-        })
-    ),
-    scan: (accumulator, initial) => _observe(({ next, error, complete }) => {
+    scan: (accumulator, initial) => _observe(({ next, ...rest }) => {
         let _acc = initial;
         return producer({
-            next: next !== noop ?
-                (v: T) => next(_acc = accumulator(_acc, v)) : noop,
-            error,
-            complete
+            next: next !== noop ? (v: T) => next(_acc = accumulator(_acc, v)) : noop,
+            ...rest
         });
+    }),
+
+    cat: (...seq) => _observe(({ next, complete: final, ...rest }) => {
+        let cleanup: () => void;
+        const complete = () => {
+            const continuation = seq.shift();
+            if (continuation) {
+                // if we have a next sequence, subscribe to it
+                const subscription = continuation.subscribe({ next, complete, ...rest });
+                cleanup = subscription.unsubscribe.bind(subscription);
+            } else {
+                // otherwise notify the consumer about completion
+                final();
+            }
+        };
+
+        cleanup = producer({ next, complete, ...rest }) ?? noop;
+
+        return () => cleanup();
     })
 });
 
-export const observe = <T>(producer: Producer<T>): Observable<T> => ({
-    subscribe: (consumer: Partial<Observer<T>>) => ({
-        unsubscribe: producer(fuse(sink(consumer))) ?? noop
-    }),
-    map: (mapper) => _observe(({ next, error, complete }) =>
-        producer(fuse({
-            next: next !== noop ?
-                (v: T) => next(mapper(v)) : noop,
-            error,
-            complete
-        }))
-    ),
-    filter: (predicate) => _observe(({ next, error, complete }) =>
-        producer(fuse({
-            next: next !== noop ?
-                (v: T) => predicate(v) ? next(v) : void (0) : noop,
-            error,
-            complete
-        }))
-    ),
-    scan: (accumulator, initial) => observe(({ next, error, complete }) => {
-        let _acc = initial;
-        return producer(fuse({
-            next: next !== noop ? (v: T) => next(_acc = accumulator(_acc, v)) : noop,
-            error,
-            complete
-        }));
-    })
-});
+export interface OrderUpdate<T> {
+    /** The item is being updated */
+    item: T;
+
+    /** The previous index of the item, -1 in case it is inserted */
+    prevIndex: number;
+
+    /** The new index of the item, -1 in case it is deleted */
+    newIndex: number;
+}
+
+interface ObservableResults<T> {
+    /**
+     * Allows observation of results
+     */
+    observe(listener: (object: T, previousIndex: number, newIndex: number) => void, includeUpdates?: boolean): {
+        remove(): void;
+    };
+}
+
+interface Queryable<T, A extends unknown[]> {
+    query(...args: A): PromiseOrValue<T[]>;
+}
+
+export const isObservableResults = <T>(v: object): v is ObservableResults<T> =>
+    v && (typeof (v as { observe?: unknown; }).observe === "function");
+
+export const observe = <T>(producer: Producer<T>) => _observe(fuse(producer));
+
+export const empty = observe<never>(({ complete }) => complete());
+
+export const query = <T, A extends unknown[]>(store: Queryable<T, A>) =>
+    (...args: A) => {
+        return observe<OrderUpdate<T>>(({ next, complete, error }) => {
+            try {
+                const results = store.query(...args);
+                if (isPromise(results)) {
+                    results.then(items => items.forEach((item, newIndex) => next({ item, newIndex, prevIndex: -1 })))
+                        .then(undefined, error);
+                } else {
+                    results.forEach((item, newIndex) => next({ item, newIndex, prevIndex: -1 }));
+                }
+
+                if (isObservableResults<T>(results)) {
+                    const h = results.observe((item, prevIndex, newIndex) => next({ item, prevIndex, newIndex }));
+                    return () => h.remove();
+                } else {
+                    complete();
+                }
+            } catch (err) {
+                error(err);
+            }
+        });
+
+    };
diff --git a/djx/src/main/ts/store/Observable.ts b/djx/src/main/ts/store/Observable.ts
deleted file mode 100644
--- a/djx/src/main/ts/store/Observable.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export default class Observable<S extends dojo.store.api.Store<object>> {
-
-}
\ No newline at end of file
diff --git a/djx/src/main/ts/tsx.ts b/djx/src/main/ts/tsx.ts
--- a/djx/src/main/ts/tsx.ts
+++ b/djx/src/main/ts/tsx.ts
@@ -7,7 +7,7 @@ import Stateful = require("dojo/Stateful
 import _WidgetBase = require("dijit/_WidgetBase");
 import { DjxWidgetBase } from "./tsx/DjxWidgetBase";
 import { WatchRendition } from "./tsx/WatchRendition";
-import { Observable, observe, Subscribable } from "./observable";
+import { Observable, observe, OrderUpdate, Subscribable } from "./observable";
 import djAttr = require("dojo/dom-attr");
 import djClass = require("dojo/dom-class");
 import { AnimationAttrs, WatchForRendition } from "./tsx/WatchForRendition";
@@ -45,17 +45,6 @@ export interface EventSelector {
     target: HTMLElement;
 }
 
-export interface QueryResultUpdate<T> {
-    /** The item is being updated */
-    item: T;
-
-    /** The previous index of the item, -1 in case it is inserted */
-    prevIndex: number;
-
-    /** The new index of the item, -1 in case it is deleted */
-    newIndex: number;
-}
-
 export type DojoMouseEvent<T = unknown> = MouseEvent & EventSelector & EventDetails<T>;
 
 type StatefulProps<T> = T extends Stateful<infer A> ? A :
@@ -112,7 +101,7 @@ export function watch(
     }
 }
 
-export const watchFor = <T>(source: T[] | Subscribable<QueryResultUpdate<T>>, render: (item: T, index: number) => unknown, opts:  AnimationAttrs = {}) => {
+export const watchFor = <T>(source: T[] | Subscribable<OrderUpdate<T>>, render: (item: T, index: number) => unknown, opts:  AnimationAttrs = {}) => {
     return new WatchForRendition({
         ...opts,
         subject: source,
diff --git a/djx/src/main/ts/tsx/WatchForRendition.ts b/djx/src/main/ts/tsx/WatchForRendition.ts
--- a/djx/src/main/ts/tsx/WatchForRendition.ts
+++ b/djx/src/main/ts/tsx/WatchForRendition.ts
@@ -9,8 +9,7 @@ import { collectNodes, destroy as safeDe
 import { IDestroyable } from "@implab/core-amd/interfaces";
 import { play } from "../play";
 import * as fx from "dojo/fx";
-import { isSubsribable, Subscribable } from "../observable";
-import { QueryResultUpdate } from "../tsx";
+import { isObservableResults, isSubsribable, OrderUpdate, Subscribable } from "../observable";
 
 const trace = TraceSource.get(mid);
 
@@ -22,16 +21,7 @@ interface ItemRendition {
     destroy(): void;
 }
 
-interface ObservableResults<T> {
-    /**
-     * Allows observation of results
-     */
-    observe(listener: (object: T, previousIndex: number, newIndex: number) => void, includeUpdates?: boolean): {
-        remove(): void;
-    };
-}
-
-interface RenderTask<T> extends QueryResultUpdate<T> {
+interface RenderTask<T> extends OrderUpdate<T> {
     animate: boolean;
 }
 
@@ -44,13 +34,11 @@ export interface AnimationAttrs {
 }
 
 export interface WatchForRenditionAttrs<T> extends AnimationAttrs {
-    subject: T[] | Subscribable<QueryResultUpdate<T>>;
+    subject: T[] | Subscribable<OrderUpdate<T>>;
 
     component: (arg: T, index: number) => unknown;
 }
 
-const isObservable = <T>(v: ArrayLike<T>): v is ArrayLike<T> & ObservableResults<T> =>
-    v && (typeof (v as { observe?: unknown; }).observe === "function");
 
 const noop = () => { };
 
@@ -72,7 +60,7 @@ export class WatchForRendition<T> extend
 
     private readonly _itemRenditions: ItemRendition[] = [];
 
-    private readonly _subject: T[] | Subscribable<QueryResultUpdate<T>>;
+    private readonly _subject: T[] | Subscribable<OrderUpdate<T>>;
 
     private readonly _renderTasks: RenderTask<T>[] = [];
 
@@ -109,7 +97,7 @@ export class WatchForRendition<T> extend
         const result = this._subject;
 
         if (result) {
-            if (isSubsribable<QueryResultUpdate<T>>(result)) {
+            if (isSubsribable<OrderUpdate<T>>(result)) {
                 let animate = false;
                 const subscription = result.subscribe({
                     next: ({ item, prevIndex, newIndex }) => this._onItemUpdated({ item, prevIndex, newIndex, animate })
@@ -117,7 +105,7 @@ export class WatchForRendition<T> extend
                 scope.own(subscription);
                 animate = this._animate;
             } else {
-                if (isObservable(result))
+                if (isObservableResults<T>(result))
                     scope.own(result.observe((item, prevIndex, newIndex) => this._onItemUpdated({ item, prevIndex, newIndex, animate: false }), true));
 
                 for (let i = 0, n = result.length; i < n; i++)
diff --git a/djx/src/test/ts/observable-tests.ts b/djx/src/test/ts/observable-tests.ts
--- a/djx/src/test/ts/observable-tests.ts
+++ b/djx/src/test/ts/observable-tests.ts
@@ -49,4 +49,4 @@ subj1
 
 t.equal(consumer2.value, 8, "Should map");
 t.equal(maps, 3, "The map chain should not be executed after completion");
-t.ok(consumer2.completed, "The completion signal should pass through");
\ No newline at end of file
+t.ok(consumer2.completed, "The completion signal should pass through");
diff --git a/playground/build.gradle b/playground/build.gradle
--- a/playground/build.gradle
+++ b/playground/build.gradle
@@ -94,6 +94,9 @@ task copyModules(type: Copy) {
 
     pack("@implab/djx")
     pack("@implab/core-amd")
+    into("@js-joda/core") {
+        from(npm.module("@js-joda/core/dist"))
+    }
     pack("dojo")
     pack("dijit")
     into("rxjs") {
diff --git a/playground/package-lock.json b/playground/package-lock.json
--- a/playground/package-lock.json
+++ b/playground/package-lock.json
@@ -6,6 +6,7 @@
         "": {
             "name": "@implab/djx-playground",
             "dependencies": {
+                "@js-joda/core": "5.3.1",
                 "dijit": "1.17.3",
                 "dojo": "1.17.3",
                 "requirejs": "2.3.6",
@@ -121,6 +122,11 @@
             "integrity": "sha512-/lbcMCHdRoHJLKFcT8xdk1KbGazSlb1pGSDJ406io7iMenPm/XbJYcUti+VzXnn71zOJ8aYpGT12T5L0rfOZNA==",
             "dev": true
         },
+        "node_modules/@js-joda/core": {
+            "version": "5.3.1",
+            "resolved": "https://registry.npmjs.org/@js-joda/core/-/core-5.3.1.tgz",
+            "integrity": "sha512-iHHyIRLEfXLqBN+BkyH8u8imMYr4ihRbFDEk8toqTwUECETVQFCTh2U59Sw2oMoRVaS3XRIb7pyCulltq2jFVA=="
+        },
         "node_modules/@nodelib/fs.scandir": {
             "version": "2.1.5",
             "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
@@ -2786,6 +2792,11 @@
             "integrity": "sha512-/lbcMCHdRoHJLKFcT8xdk1KbGazSlb1pGSDJ406io7iMenPm/XbJYcUti+VzXnn71zOJ8aYpGT12T5L0rfOZNA==",
             "dev": true
         },
+        "@js-joda/core": {
+            "version": "5.3.1",
+            "resolved": "https://registry.npmjs.org/@js-joda/core/-/core-5.3.1.tgz",
+            "integrity": "sha512-iHHyIRLEfXLqBN+BkyH8u8imMYr4ihRbFDEk8toqTwUECETVQFCTh2U59Sw2oMoRVaS3XRIb7pyCulltq2jFVA=="
+        },
         "@nodelib/fs.scandir": {
             "version": "2.1.5",
             "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
diff --git a/playground/package.json b/playground/package.json
--- a/playground/package.json
+++ b/playground/package.json
@@ -2,6 +2,7 @@
     "name": "@implab/djx-playground",
     "private": true,
     "dependencies": {
+        "@js-joda/core": "5.3.1",
         "dijit": "1.17.3",
         "dojo": "1.17.3",
         "requirejs": "2.3.6",
diff --git a/playground/src/bundle/config.js b/playground/src/bundle/config.js
--- a/playground/src/bundle/config.js
+++ b/playground/src/bundle/config.js
@@ -10,6 +10,11 @@ requirejs.config({
             name: "rxjs",
             location: "rxjs",
             main: "rxjs.umd.min"
+        },
+        {
+            name: "@js-joda/core",
+            location: "@js-joda/core",
+            main: "js-joda"
         }
     ],
     deps: ["app"]
diff --git a/playground/src/main/ts/logging.ts b/playground/src/main/ts/logging.ts
new file mode 100644
--- /dev/null
+++ b/playground/src/main/ts/logging.ts
@@ -0,0 +1,11 @@
+import { TraceSource } from "@implab/core-amd/log/TraceSource";
+
+const delegate = <T extends { [p in K]: (...args: unknown[]) => unknown }, K extends string>(target: T, key: K): OmitThisParameter<T[K]> => target[key].bind(target) as OmitThisParameter<T[K]>;
+
+export const log = (trace: TraceSource) => delegate(trace, "log");
+
+export const debug = (trace: TraceSource) => delegate(trace, "debug");
+
+export const warn = (trace: TraceSource) => delegate(trace, "warn");
+
+export const error = (trace: TraceSource) => delegate(trace, "error");
diff --git a/playground/src/main/ts/main.ts b/playground/src/main/ts/main.ts
--- a/playground/src/main/ts/main.ts
+++ b/playground/src/main/ts/main.ts
@@ -4,4 +4,5 @@ import "@implab/djx/css!dijit/themes/dij
 import "@implab/djx/css!dijit/themes/tundra/tundra.css";
 
 const w = new MainWidget();
-w.placeAt(document.body);
\ No newline at end of file
+w.placeAt(document.body);
+w.load();
diff --git a/playground/src/main/ts/model/Appointment.ts b/playground/src/main/ts/model/Appointment.ts
--- a/playground/src/main/ts/model/Appointment.ts
+++ b/playground/src/main/ts/model/Appointment.ts
@@ -1,12 +1,14 @@
 import { Contact } from "./Contact";
 
-type AppointmentRole = "organizer" | "speaker" | "participant";
+export type AppointmentRole = "organizer" | "speaker" | "participant";
 
 export interface Member extends Contact {
     role: AppointmentRole;
 }
 
 export interface Appointment {
+    id: string;
+    
     title: string;
 
     startAt: Date;
diff --git a/playground/src/main/ts/model/MainContext.ts b/playground/src/main/ts/model/MainContext.ts
--- a/playground/src/main/ts/model/MainContext.ts
+++ b/playground/src/main/ts/model/MainContext.ts
@@ -1,88 +1,33 @@
 import Memory = require("dojo/store/Memory");
 import Observable = require("dojo/store/Observable");
-import { Appointment, Member } from "./Appointment";
+import { Appointment, AppointmentRole, Member } from "./Appointment";
 import { Contact } from "./Contact";
 import { Uuid } from "@implab/core-amd/Uuid";
-import { Observable as RxjsObservable } from "rxjs";
-import { QueryResultUpdate } from "@implab/djx/tsx";
-import {isPromise} from "@implab/core-amd/safe";
+import { query } from "@implab/djx/observable";
+import { IDestroyable } from "@implab/core-amd/interfaces";
+import { delay } from "@implab/core-amd/safe";
 
-type AppointmentRecord = Omit<Appointment, "getMembers"> & {id: string};
+type AppointmentRecord = Omit<Appointment, "getMembers"> & { id: string };
 
 type ContactRecord = Contact;
 
 type MemberRecord = Member & { appointmentId: string; };
 
-export interface ObservableResults<T> {
-    /**
-     * Allows observation of results
-     */
-    observe(listener: (object: T, previousIndex: number, newIndex: number) => void, includeUpdates?: boolean): {
-        remove(): void;
-    };
-}
+const item = <T, T2>(map: (x: T) => T2) => <U extends { item: T }>({ item, ...props }: U) => ({ item: map(item), ...props });
 
 
-export function isObservable<T>(v: unknown): v is ObservableResults<T> {
-    return !!v && (typeof (v as {observe?: unknown}).observe === "function");
-}
-
-export function observe<T>(results: T[], includeObjectUpdates?: boolean): RxjsObservable<QueryResultUpdate<T>>;
-export function observe<T>(results: PromiseLike<T[]>, includeObjectUpdates?: boolean): PromiseLike<RxjsObservable<QueryResultUpdate<T>>>;
-export function observe(results: unknown[] | PromiseLike<unknown[]>, includeObjectUpdates = true) {
-    // results может быть асинхронным, т.е. до завершения
-    // получения результатов store может быть обновлен. В любом
-    // случае, если между подключением хотя бы одного наблюдателя
-    // была выполнена команда обновления, results считается устаревшим
-    // и не может быть использован для отслеживания обновлений.
-    // Конкретно с dojo/store/Observable тут вообще возникает проблема:
-    // 1. Синхронные store типа Memory будут давать ошибку на методах
-    //    обновления (add,put,remove)
-    // 2. Асинхронные store типа JsonRest будут выдавать предупреждения
-    //    о необработанной ошибке в Promise при обращении к методам
-    //    обновления (add,put,remove)
-
-    const _subscribe = (items: unknown[]) => new RxjsObservable<QueryResultUpdate<unknown>>(subscriber => {
-        items
-            .forEach((value, newIndex) => subscriber.next({ item: value, newIndex, prevIndex: -1}));
-
-        try {
-            if (isObservable(results)) {
-                const h = results.observe(
-                    (value, prevIndex, newIndex) => subscriber.next({
-                        item: value,
-                        prevIndex,
-                        newIndex
-                    }),
-                    includeObjectUpdates
-                );
-
-                return () => { h.remove(); };
-            }
-        } catch (err) {
-            subscriber.error(err);
-        }
-    });
-
-    return isPromise(results) ?
-        results.then(_subscribe) :
-        _subscribe(results || []);
-}
-
-
-
-
-export class MainContext {
+export class MainContext implements IDestroyable {
     private readonly _appointments = new Observable(new Memory<AppointmentRecord>());
 
     private readonly _contacts = new Observable(new Memory<ContactRecord>());
 
     private readonly _members = new Observable(new Memory<MemberRecord>());
 
-    createAppointment(title: string, startAt: Date, duration: number, members: Member[]) {
+    async createAppointment(title: string, startAt: Date, duration: number, members: Member[]) {
+        await delay(1000);
         const id = Uuid();
         this._appointments.add({
-            id: Uuid(),
+            id,
             startAt,
             duration,
             title
@@ -92,16 +37,35 @@ export class MainContext {
             this._members.add({
                 appointmentId: id,
                 ...member
-            }, {id: Uuid()}) as void
+            }, { id: Uuid() }) as void
         );
     }
 
-    queryAppointments(dateFrom: Date, dateTo: Date) {
-        //this._appointments.query().map()
+    queryAppointments({ dateFrom, dateTo }: { dateFrom?: Date; dateTo?: Date; } = {}) {
+        return query(this._appointments)(({ startAt }) =>
+            (!dateFrom || dateFrom <= startAt) &&
+            (!dateTo || startAt <= dateTo)
+        ).map(item(this._mapAppointment));
     }
 
-    private readonly _mapAppointment = ({startAt, title, duration, id}: AppointmentRecord) => ({
+    async addMember(appointmentId: string, member: Member) {
+        await delay(1000);
+        this._members.add({
+            appointmentId,
+            ...member
+        });
+    }
 
+    private readonly _mapAppointment = ({ startAt, title, duration, id }: AppointmentRecord) => ({
+        id,
+        title,
+        startAt,
+        duration,
+        getMembers: (role?: AppointmentRole) => this._members.query(role ? { appointmentId: id, role } : { appointmentId: id })
     });
 
+    destroy() {
+
+    }
+
 }
diff --git a/playground/src/main/ts/model/MainModel.ts b/playground/src/main/ts/model/MainModel.ts
--- a/playground/src/main/ts/model/MainModel.ts
+++ b/playground/src/main/ts/model/MainModel.ts
@@ -1,20 +1,37 @@
-import { BehaviorSubject, Observer, Unsubscribable, Subscribable } from "rxjs";
-import { IDestroyable} from "@implab/core-amd/interfaces"
-
-interface State {
-    color: string;
+import { id as mid } from "module";
+import { BehaviorSubject, Observer, Unsubscribable } from "rxjs";
+import { IDestroyable } from "@implab/core-amd/interfaces";
+import { OrderUpdate, Observable } from "@implab/djx/observable";
+import { Appointment, Member } from "./Appointment";
+import { MainContext } from "./MainContext";
+import { LocalDate } from "@js-joda/core";
+import { error } from "../logging";
+import { TraceSource } from "@implab/core-amd/log/TraceSource";
 
-    label: string;
+const trace = TraceSource.get(mid);
+
+export interface State {
+    appointments: Observable<OrderUpdate<Appointment>>;
 
-    current: number;
+    dateTo: LocalDate;
 
-    max: number;
+    dateFrom: LocalDate;
+
+    title: string;
 }
 
 export default class MainModel implements IDestroyable {
     private readonly _state: BehaviorSubject<State>;
-    constructor(initialState: State) {
-        this._state = new BehaviorSubject(initialState);
+
+    private readonly _context = new MainContext();
+
+    constructor() {
+        this._state = new BehaviorSubject<State>({
+            dateTo: LocalDate.now(),
+            dateFrom: LocalDate.now().minusMonths(1),
+            appointments: this._context.queryAppointments(),
+            title: "Appointments"
+        });
     }
     getState() {
         return this._state.getValue();
@@ -22,13 +39,25 @@ export default class MainModel implement
 
     subscribe(observer: Partial<Observer<State>>): Unsubscribable {
         return this._state.subscribe(observer);
-    }  
-    
+    }
+
     protected dispatch(command: Partial<State>) {
         const state = this.getState();
-        this._state.next({...state, ... command});
+        this._state.next({ ...state, ...command });
+    }
+
+    addMember(appointmentId: string, member: Member) {
+        this._context.addMember(appointmentId, member).catch(error(trace));
     }
 
-    load() { }
-    destroy() { }
+    addAppointment(title: string, startAt: Date, duration: number) {
+        this._context.createAppointment(title,startAt, duration, []).catch(error(trace));
+    }
+
+    load() {
+    }
+
+    destroy() {
+        this._context.destroy();
+    }
 }
\ No newline at end of file
diff --git a/playground/src/main/ts/view/MainWidget.tsx b/playground/src/main/ts/view/MainWidget.tsx
--- a/playground/src/main/ts/view/MainWidget.tsx
+++ b/playground/src/main/ts/view/MainWidget.tsx
@@ -1,81 +1,72 @@
 import { djbase, djclass } from "@implab/djx/declare";
 import { DjxWidgetBase } from "@implab/djx/tsx/DjxWidgetBase";
-import { createElement, watch, prop, attach, all, bind, toggleClass } from "@implab/djx/tsx";
-import ProgressBar from "./ProgressBar";
+import { bind, createElement, prop, watch, watchFor } from "@implab/djx/tsx";
+import MainModel from "../model/MainModel";
+import { OrderUpdate, Observable } from "@implab/djx/observable";
+import { Appointment } from "../model/Appointment";
+import { LocalDate } from "@js-joda/core";
 import Button = require("dijit/form/Button");
-import { interval } from "rxjs";
-
-const Counter = ({ children }: { children: unknown[] }) => <span>Counter: {children}</span>;
 
 @djclass
 export default class MainWidget extends djbase(DjxWidgetBase) {
 
-    titleNode?: HTMLHeadingElement;
+    appointments?: Observable<OrderUpdate<Appointment>>;
+
+    model: MainModel;
 
-    progressBar?: ProgressBar;
+    dateTo?: LocalDate;
 
-    count = 0;
+    dateFrom?: LocalDate;
 
-    showCounter = false;
+    constructor(opts?: Partial<MainWidget> & ThisType<MainWidget>, srcNode?: string | Node) {
+        super(opts, srcNode);
 
-    counterNode?: HTMLInputElement;
+        const model = this.model = new MainModel();
+        this.own(model);
+        model.subscribe({ next: x => this.set(x) });
+    }
 
-    paused = false;
 
     render() {
 
         return <div className="tundra">
-            <h2 ref={attach(this, "titleNode")}>Hi!</h2>
-            <section style={{ padding: "10px" }}>
-                {watch(prop(this, "showCounter"), flag => flag &&
-                    [
-                        <Counter><input ref={all(
-                            bind("value", prop(this, "count")
-                                .map(x => x/10)
-                            ),
-                            attach(this, "counterNode")
-                        )} /> <span>s</span></Counter>,
-                        " | ",
-                        <span ref={bind("innerHTML", interval(1000))}></span>,
-                        " | ",
-                        <Button
-                            ref={all(
-                                bind("label", prop(this, "paused")
-                                    .map(x => x ? "Unpause" : "Pause")
-                                ),
-                                toggleClass("paused", prop(this,"paused"))
-                            )}
-                            onClick={this._onPauseClick}
-                        />
-                    ]
-
-                )}
-            </section>
-            <Button onClick={this._onToggleCounterClick}>Toggle counter</Button>
+            <h2 ref={bind("innerHTML", prop(this, "title"))} />
+            {watch(prop(this, "appointments"), items => items &&
+                <ul>
+                    {watchFor(items, ({ id, title, getMembers }) =>
+                        <li>{title}
+                            <ul>
+                                {watchFor(getMembers(), ({ role, name, position }) =>
+                                    <li className={role}>{name}({position})</li>
+                                )}
+                            </ul>
+                            <div>
+                                <Button onClick={() => this._onAddMemberClick(id)}>Add member</Button>
+                            </div>
+                        </li>
+                    )}
+                </ul>
+            )}
+            <div>
+                <Button onClick={this._onAddAppointmentClick}>Add new appointment</Button>
+            </div>
         </div>;
     }
 
-    postCreate(): void {
-        super.postCreate();
-
-        const h = setInterval(
-            () => {
-                this.set("count", this.count + 1);
-            },
-            100
-        );
-        this.own({
-            destroy: () => {
-                clearInterval(h);
-            }
-        });
+    load() {
+        this.model.load();
     }
 
-    private readonly _onPauseClick = () => {
-        this.set("paused", !this.paused);
+    private readonly _onAddMemberClick = (appointmentId: string) => {
+        this.model.addMember(appointmentId, {
+            email: "some-mail",
+            name: "Member Name",
+            position: "Member position",
+            role: "participant"
+        });
     };
 
-    private readonly _onToggleCounterClick = () => {
-        this.set("showCounter", !this.showCounter);
+    private readonly _onAddAppointmentClick = () => {
+        this.model.addAppointment("Appointment", new Date, 30);
     };
 }
diff --git a/playground/src/tsconfig.json b/playground/src/tsconfig.json
--- a/playground/src/tsconfig.json
+++ b/playground/src/tsconfig.json
@@ -11,6 +11,8 @@
             "@implab/djx",
             "@implab/dojo-typings"
         ],
-        "skipLibCheck": true
+        "skipLibCheck": true,
+        "target": "ES5",
+        "lib": ["ES2015"]
     }
 }
\ No newline at end of file