From 6473fdcbc01fecfa5bc8dc46cdcd7841c1ef35ae Mon Sep 17 00:00:00 2001
From: Tyler Schicke <tyler_schicke@brown.edu>
Date: Wed, 20 Mar 2019 05:04:01 -0400
Subject: Started adding support for promises

---
 src/fields/Document.ts | 46 +++++++++++++++++++++++++++-------------------
 1 file changed, 27 insertions(+), 19 deletions(-)

(limited to 'src/fields')

diff --git a/src/fields/Document.ts b/src/fields/Document.ts
index b6439364a..66d3d3aef 100644
--- a/src/fields/Document.ts
+++ b/src/fields/Document.ts
@@ -124,22 +124,31 @@ export class Document extends Field {
      * Note: The callback will not be called if there is no associated field.
      * @returns `true` if the field exists on the document and `callback` will be called, and `false` otherwise
      */
-    GetAsync(key: Key, callback: (field: Field) => void): boolean {
+    GetAsync(key: Key, callback: (field: Opt<Field>) => void): void {
         //TODO: This currently doesn't deal with prototypes
         let field = this.fields.get(key.Id);
         if (field && field.field) {
             callback(field.field);
         } else if (this._proxies.has(key.Id)) {
             Server.GetDocumentField(this, key, callback);
-            return true;
+        } else {
+            callback(undefined);
         }
-        return false;
     }
 
-    GetTAsync<T extends Field>(key: Key, ctor: { new(): T }, callback: (field: Opt<T>) => void): boolean {
-        return this.GetAsync(key, (field) => {
-            callback(Cast(field, ctor));
-        })
+    GetTAsync<T extends Field>(key: Key, ctor: { new(): T }): Promise<Opt<T>>;
+    GetTAsync<T extends Field>(key: Key, ctor: { new(): T }, callback: (field: Opt<T>) => void): void;
+    GetTAsync<T extends Field>(key: Key, ctor: { new(): T }, callback?: (field: Opt<T>) => void): Promise<Opt<T>> | void {
+        let fn = (cb: (field: Opt<T>) => void) => {
+            return this.GetAsync(key, (field) => {
+                cb(Cast(field, ctor));
+            });
+        }
+        if (callback) {
+            fn(callback);
+        } else {
+            return new Promise(res => fn(res));
+        }
     }
 
     /**
@@ -214,13 +223,6 @@ export class Document extends Field {
         return this.GetData<T[], ListField<T>>(key, ListField, defaultVal)
     }
 
-    @action
-    SetOnPrototype(key: Key, field: Field | undefined): void {
-        this.GetAsync(KeyStore.Prototype, (f: Field) => {
-            (f as Document).Set(key, field)
-        })
-    }
-
     @action
     Set(key: Key, field: Field | undefined, setOnPrototype = false): void {
         let old = this.fields.get(key.Id);
@@ -248,16 +250,22 @@ export class Document extends Field {
         }
     }
 
+    @action
+    SetOnPrototype(key: Key, field: Field | undefined): void {
+        this.GetTAsync(KeyStore.Prototype, Document, (f: Opt<Document>) => {
+            f && f.Set(key, field)
+        })
+    }
+
     @action
     SetDataOnPrototype<T, U extends Field & { Data: T }>(key: Key, value: T, ctor: { new(): U }, replaceWrongType = true) {
-        this.GetAsync(KeyStore.Prototype, (f: Field) => {
-            (f as Document).SetData(key, value, ctor)
+        this.GetTAsync(KeyStore.Prototype, Document, (f: Opt<Document>) => {
+            f && f.SetData(key, value, ctor)
         })
     }
 
     @action
     SetData<T, U extends Field & { Data: T }>(key: Key, value: T, ctor: { new(): U }, replaceWrongType = true) {
-
         let field = this.Get(key, true);
         if (field instanceof ctor) {
             field.Data = value;
@@ -294,8 +302,8 @@ export class Document extends Field {
 
     CreateAlias(id?: string): Document {
         let alias = new Document(id)
-        this.GetAsync(KeyStore.Prototype, (f: Field) => {
-            alias.Set(KeyStore.Prototype, f)
+        this.GetTAsync(KeyStore.Prototype, Document, (f: Opt<Document>) => {
+            f && alias.Set(KeyStore.Prototype, f)
         })
 
         return alias
-- 
cgit v1.2.3-70-g09d2


From bece3110a3d6fa18dd89415a5e636c6792aea4e1 Mon Sep 17 00:00:00 2001
From: Tyler Schicke <tyler_schicke@brown.edu>
Date: Wed, 20 Mar 2019 05:07:52 -0400
Subject: Refactored users to have a single user document instead of a list of
 workspaces

---
 src/client/views/Main.tsx                          | 132 ++++++++++++---------
 src/fields/KeyStore.ts                             |   2 +
 src/mobile/ImageUpload.tsx                         |  38 +++---
 src/server/RouteStore.ts                           |   5 +-
 .../authentication/controllers/WorkspacesMenu.tsx  |  19 +--
 .../authentication/controllers/user_controller.ts  |   3 +-
 .../authentication/models/current_user_utils.ts    |  46 +++++--
 src/server/authentication/models/user_model.ts     |  11 +-
 src/server/index.ts                                |  33 +-----
 9 files changed, 144 insertions(+), 145 deletions(-)

(limited to 'src/fields')

diff --git a/src/client/views/Main.tsx b/src/client/views/Main.tsx
index ac51a7d87..a1a6cc475 100644
--- a/src/client/views/Main.tsx
+++ b/src/client/views/Main.tsx
@@ -8,6 +8,7 @@ import "./Main.scss";
 import { MessageStore } from '../../server/Message';
 import { Utils } from '../../Utils';
 import * as request from 'request'
+import * as rp from 'request-promise'
 import { Documents } from '../documents/Documents';
 import { Server } from '../Server';
 import { setupDrag } from '../util/DragManager';
@@ -40,7 +41,7 @@ import Measure from 'react-measure';
 import { DashUserModel } from '../../server/authentication/models/user_model';
 import { ServerUtils } from '../../server/ServerUtil';
 import { CurrentUserUtils } from '../../server/authentication/models/current_user_utils';
-import { Field, Opt } from '../../fields/Field';
+import { Field, Opt, FieldWaiting } from '../../fields/Field';
 import { ListField } from '../../fields/ListField';
 import { map } from 'bluebird';
 import { Gateway, Settings } from '../northstar/manager/Gateway';
@@ -49,13 +50,26 @@ import { Catalog } from '../northstar/model/idea/idea';
 @observer
 export class Main extends React.Component {
     // dummy initializations keep the compiler happy
-    @observable private mainContainer?: Document;
     @observable private mainfreeform?: Document;
-    @observable private userWorkspaces: Document[] = [];
     @observable public pwidth: number = 0;
     @observable public pheight: number = 0;
     @observable private _northstarCatalog: Catalog | undefined = undefined;
 
+    @computed private get mainContainer(): Document | undefined {
+        let doc = this.userDocument.GetT(KeyStore.ActiveWorkspace, Document);
+        return doc == FieldWaiting ? undefined : doc;
+    }
+
+    private set mainContainer(doc: Document | undefined) {
+        if (doc) {
+            this.userDocument.Set(KeyStore.ActiveWorkspace, doc);
+        }
+    }
+
+    private get userDocument(): Document {
+        return CurrentUserUtils.UserDocument;
+    }
+
     public mainDocId: string | undefined;
     private currentUser?: DashUserModel;
     public static Instance: Main;
@@ -67,12 +81,12 @@ export class Main extends React.Component {
         configure({ enforceActions: "observed" });
         if (window.location.pathname !== RouteStore.home) {
             let pathname = window.location.pathname.split("/");
-            this.mainDocId = pathname[pathname.length - 1];
+            if (pathname.length > 1 && pathname[pathname.length - 2] == 'doc') {
+                this.mainDocId = pathname[pathname.length - 1];
+            }
         };
 
-        this.initializeNorthstar();
-
-        CurrentUserUtils.loadCurrentUser();
+        // this.initializeNorthstar();
 
         library.add(faFont);
         library.add(faImage);
@@ -143,63 +157,50 @@ export class Main extends React.Component {
 
     initAuthenticationRouters = () => {
         // Load the user's active workspace, or create a new one if initial session after signup
-        request.get(ServerUtils.prepend(RouteStore.getActiveWorkspace), (error, response, body) => {
-            if (this.mainDocId || body) {
-                Server.GetField(this.mainDocId || body, field => {
-                    if (field instanceof Document) {
-                        this.openWorkspace(field);
-                        this.populateWorkspaces();
-                    } else {
-                        this.createNewWorkspace(true, this.mainDocId);
-                    }
-                });
-            } else {
-                this.createNewWorkspace(true, this.mainDocId);
-            }
-        });
-    }
-
-    @action
-    createNewWorkspace = (init: boolean, id?: string): void => {
-        let mainDoc = Documents.DockDocument(JSON.stringify({ content: [{ type: 'row', content: [] }] }), { title: `Main Container ${this.userWorkspaces.length + 1}` }, id);
-        let newId = mainDoc.Id;
-        request.post(ServerUtils.prepend(RouteStore.addWorkspace), {
-            body: { target: newId },
-            json: true
-        }, () => { if (init) this.populateWorkspaces(); });
-
-        // bcz: strangely, we need a timeout to prevent exceptions/issues initializing GoldenLayout (the rendering engine for Main Container)
-        setTimeout(() => {
-            let freeformDoc = Documents.FreeformDocument([], { x: 0, y: 400, title: "mini collection" });
-            var dockingLayout = { content: [{ type: 'row', content: [CollectionDockingView.makeDocumentConfig(freeformDoc)] }] };
-            mainDoc.SetText(KeyStore.Data, JSON.stringify(dockingLayout));
-            mainDoc.Set(KeyStore.ActiveFrame, freeformDoc);
-            this.openWorkspace(mainDoc);
-            let pendingDocument = Documents.SchemaDocument([], { title: "New Mobile Uploads" })
-            mainDoc.Set(KeyStore.OptionalRightCollection, pendingDocument);
-        }, 0);
-        this.userWorkspaces.push(mainDoc);
+        if (!this.mainDocId) {
+            this.userDocument.GetTAsync(KeyStore.ActiveWorkspace, Document).then(doc => {
+                if (doc) {
+                    this.openWorkspace(doc);
+                } else {
+                    this.createNewWorkspace();
+                }
+            })
+        } else {
+            Server.GetField(this.mainDocId).then(field => {
+                if (field instanceof Document) {
+                    this.openWorkspace(field)
+                } else {
+                    this.createNewWorkspace(this.mainDocId);
+                }
+            })
+        }
     }
 
     @action
-    populateWorkspaces = () => {
-        // retrieve all workspace documents from the server
-        request.get(ServerUtils.prepend(RouteStore.getAllWorkspaces), (error, res, body) => {
-            let ids = JSON.parse(body) as string[];
-            Server.GetFields(ids, action((fields: { [id: string]: Field }) => this.userWorkspaces = ids.map(id => fields[id] as Document)));
-        });
+    createNewWorkspace = (id?: string): void => {
+        this.userDocument.GetTAsync<ListField<Document>>(KeyStore.Workspaces, ListField).then(action((list: Opt<ListField<Document>>) => {
+            if (list) {
+                let freeformDoc = Documents.FreeformDocument([], { x: 0, y: 400, title: "mini collection" });
+                var dockingLayout = { content: [{ type: 'row', content: [CollectionDockingView.makeDocumentConfig(freeformDoc)] }] };
+                let mainDoc = Documents.DockDocument(JSON.stringify(dockingLayout), { title: `Main Container ${list.Data.length + 1}` }, id);
+                list.Data.push(mainDoc);
+                // bcz: strangely, we need a timeout to prevent exceptions/issues initializing GoldenLayout (the rendering engine for Main Container)
+                setTimeout(() => {
+                    mainDoc.Set(KeyStore.ActiveFrame, freeformDoc);
+                    this.openWorkspace(mainDoc);
+                    let pendingDocument = Documents.SchemaDocument([], { title: "New Mobile Uploads" })
+                    mainDoc.Set(KeyStore.OptionalRightCollection, pendingDocument);
+                }, 0);
+            }
+        }));
     }
 
     @action
     openWorkspace = (doc: Document, fromHistory = false): void => {
-        request.post(ServerUtils.prepend(RouteStore.setActiveWorkspace), {
-            body: { target: doc.Id },
-            json: true
-        });
         this.mainContainer = doc;
         fromHistory || window.history.pushState(null, doc.Title, "/doc/" + doc.Id);
         this.mainContainer.GetTAsync(KeyStore.ActiveFrame, Document, field => this.mainfreeform = field);
-        this.mainContainer.GetTAsync(KeyStore.OptionalRightCollection, Document, col => {
+        this.userDocument.GetTAsync(KeyStore.OptionalRightCollection, Document).then(col => {
             // if there is a pending doc, and it has new data, show it (syip: we use a timeout to prevent collection docking view from being uninitialized)
             setTimeout(() => {
                 if (col) {
@@ -213,10 +214,15 @@ export class Main extends React.Component {
         });
     }
 
+    @observable
+    workspacesShown: boolean = false;
+
+    areWorkspacesShown = () => {
+        return this.workspacesShown;
+    }
+    @action
     toggleWorkspaces = () => {
-        if (WorkspacesMenu.Instance) {
-            WorkspacesMenu.Instance.toggle()
-        }
+        this.workspacesShown = !this.workspacesShown;
     }
 
     screenToLocalTransform = () => Transform.Identity
@@ -310,6 +316,12 @@ export class Main extends React.Component {
     }
 
     render() {
+        let workspaceMenu: any = null;
+        let workspaces = this.userDocument.GetT<ListField<Document>>(KeyStore.Workspaces, ListField);
+        if (workspaces && workspaces !== FieldWaiting) {
+            workspaceMenu = <WorkspacesMenu active={this.mainContainer} open={this.openWorkspace} new={this.createNewWorkspace} allWorkspaces={workspaces.Data}
+                isShown={this.areWorkspacesShown} toggle={this.toggleWorkspaces} />
+        }
         return (
             <div id="main-div">
                 <Measure onResize={(r: any) => runInAction(() => {
@@ -326,11 +338,13 @@ export class Main extends React.Component {
                 <ContextMenu />
                 {this.nodesMenu}
                 {this.miscButtons}
-                <WorkspacesMenu active={this.mainContainer} open={this.openWorkspace} new={this.createNewWorkspace} allWorkspaces={this.userWorkspaces} />
+                {workspaceMenu}
                 <InkingControl />
             </div>
         );
     }
 }
 
-ReactDOM.render(<Main />, document.getElementById('root'));
+CurrentUserUtils.loadCurrentUser().then(() => {
+    ReactDOM.render(<Main />, document.getElementById('root'));
+});
diff --git a/src/fields/KeyStore.ts b/src/fields/KeyStore.ts
index 68883d6f1..891caaa81 100644
--- a/src/fields/KeyStore.ts
+++ b/src/fields/KeyStore.ts
@@ -28,6 +28,7 @@ export namespace KeyStore {
     export const SchemaSplitPercentage = new Key("SchemaSplitPercentage");
     export const Caption = new Key("Caption");
     export const ActiveFrame = new Key("ActiveFrame");
+    export const ActiveWorkspace = new Key("ActiveWorkspace");
     export const DocumentText = new Key("DocumentText");
     export const LinkedToDocs = new Key("LinkedToDocs");
     export const LinkedFromDocs = new Key("LinkedFromDocs");
@@ -41,4 +42,5 @@ export namespace KeyStore {
     export const OptionalRightCollection = new Key("OptionalRightCollection");
     export const Archives = new Key("Archives");
     export const Updated = new Key("Updated");
+    export const Workspaces = new Key("Workspaces");
 }
diff --git a/src/mobile/ImageUpload.tsx b/src/mobile/ImageUpload.tsx
index 16808a598..47b9d8f0b 100644
--- a/src/mobile/ImageUpload.tsx
+++ b/src/mobile/ImageUpload.tsx
@@ -7,7 +7,7 @@ import { Server } from '../client/Server';
 import { Documents } from '../client/documents/Documents';
 import { ListField } from '../fields/ListField';
 import { ImageField } from '../fields/ImageField';
-import request = require('request');
+import * as rp from 'request-promise'
 import { ServerUtils } from '../server/ServerUtil';
 import { RouteStore } from '../server/RouteStore';
 
@@ -40,28 +40,24 @@ const onFileLoad = (file: any) => {
                 json.map((file: any) => {
                     let path = window.location.origin + file
                     var doc: Document = Documents.ImageDocument(path, { nativeWidth: 200, width: 200 })
-                    doc.GetTAsync(KeyStore.Data, ImageField, (i) => {
-                        if (i) {
-                            document.getElementById("message")!.innerText = i.Data.href;
+
+                    rp.get(ServerUtils.prepend(RouteStore.getUserDocumentId)).then(res => {
+                        if (res) {
+                            return Server.GetField(res);
+                        }
+                        throw new Error("No user id returned");
+                    }).then(field => {
+                        if (field instanceof Document) {
+                            return field.GetTAsync(KeyStore.OptionalRightCollection, Document)
                         }
-                    })
-                    request.get(ServerUtils.prepend(RouteStore.getActiveWorkspace), (error, response, body) => {
-                        if (body) {
-                            Server.GetField(body, field => {
-                                if (field instanceof Document) {
-                                    field.GetTAsync(KeyStore.OptionalRightCollection, Document,
-                                        pending => {
-                                            if (pending) {
-                                                pending.GetOrCreateAsync(KeyStore.Data, ListField, list => {
-                                                    list.Data.push(doc);
-                                                })
-                                            }
-                                        })
-                                }
-                            }
-                            );
+                    }).then(pending => {
+                        if (pending) {
+                            pending.GetOrCreateAsync(KeyStore.Data, ListField, list => {
+                                list.Data.push(doc);
+                            })
                         }
-                    })
+                    });
+
                     // console.log(window.location.origin + file[0])
 
                     //imgPrev.setAttribute("src", window.location.origin + files[0].name)
diff --git a/src/server/RouteStore.ts b/src/server/RouteStore.ts
index fb06b878b..fdf5b6a5c 100644
--- a/src/server/RouteStore.ts
+++ b/src/server/RouteStore.ts
@@ -15,10 +15,7 @@ export enum RouteStore {
 
     // USER AND WORKSPACES
     getCurrUser = "/getCurrentUser",
-    addWorkspace = "/addWorkspaceId",
-    getAllWorkspaces = "/getAllWorkspaceIds",
-    getActiveWorkspace = "/getActiveWorkspaceId",
-    setActiveWorkspace = "/setActiveWorkspaceId",
+    getUserDocumentId = "/getUserDocumentId",
     updateCursor = "/updateCursor",
 
     openDocumentWithId = "/doc/:docId",
diff --git a/src/server/authentication/controllers/WorkspacesMenu.tsx b/src/server/authentication/controllers/WorkspacesMenu.tsx
index 1533b1e62..8e14cf98e 100644
--- a/src/server/authentication/controllers/WorkspacesMenu.tsx
+++ b/src/server/authentication/controllers/WorkspacesMenu.tsx
@@ -9,30 +9,23 @@ import { KeyStore } from '../../../fields/KeyStore';
 export interface WorkspaceMenuProps {
     active: Document | undefined;
     open: (workspace: Document) => void;
-    new: (init: boolean) => void;
+    new: () => void;
     allWorkspaces: Document[];
+    isShown: () => boolean;
+    toggle: () => void;
 }
 
 @observer
 export class WorkspacesMenu extends React.Component<WorkspaceMenuProps> {
-    static Instance: WorkspacesMenu;
-    @observable private workspacesExposed: boolean = false;
-
     constructor(props: WorkspaceMenuProps) {
         super(props);
-        WorkspacesMenu.Instance = this;
         this.addNewWorkspace = this.addNewWorkspace.bind(this);
     }
 
     @action
     addNewWorkspace() {
-        this.props.new(false);
-        this.toggle();
-    }
-
-    @action
-    toggle() {
-        this.workspacesExposed = !this.workspacesExposed;
+        this.props.new();
+        this.props.toggle();
     }
 
     render() {
@@ -45,7 +38,7 @@ export class WorkspacesMenu extends React.Component<WorkspaceMenuProps> {
                     borderRadius: 5,
                     position: "absolute",
                     top: 78,
-                    left: this.workspacesExposed ? 11 : -500,
+                    left: this.props.isShown() ? 11 : -500,
                     background: "white",
                     border: "black solid 2px",
                     transition: "all 1s ease",
diff --git a/src/server/authentication/controllers/user_controller.ts b/src/server/authentication/controllers/user_controller.ts
index 2cef958e8..e365b8dce 100644
--- a/src/server/authentication/controllers/user_controller.ts
+++ b/src/server/authentication/controllers/user_controller.ts
@@ -11,6 +11,7 @@ import * as async from 'async';
 import * as nodemailer from 'nodemailer';
 import c = require("crypto");
 import { RouteStore } from "../../RouteStore";
+import { Utils } from "../../../Utils";
 
 /**
  * GET /signup
@@ -54,7 +55,7 @@ export let postSignup = (req: Request, res: Response, next: NextFunction) => {
     const user = new User({
         email,
         password,
-        userDoc: "document here"
+        userDocumentId: Utils.GenerateGuid()
     });
 
     User.findOne({ email }, (err, existingUser) => {
diff --git a/src/server/authentication/models/current_user_utils.ts b/src/server/authentication/models/current_user_utils.ts
index cc433eb73..17a6d493b 100644
--- a/src/server/authentication/models/current_user_utils.ts
+++ b/src/server/authentication/models/current_user_utils.ts
@@ -1,29 +1,61 @@
 import { DashUserModel } from "./user_model";
-import * as request from 'request'
+import * as rp from 'request-promise';
 import { RouteStore } from "../../RouteStore";
 import { ServerUtils } from "../../ServerUtil";
+import { Server } from "../../../client/Server";
+import { Document } from "../../../fields/Document";
+import { KeyStore } from "../../../fields/KeyStore";
+import { ListField } from "../../../fields/ListField";
+import { Documents } from "../../../client/documents/Documents";
 
 export class CurrentUserUtils {
     private static curr_email: string;
     private static curr_id: string;
+    private static user_document: Document;
 
-    public static get email() {
+    public static get email(): string {
         return CurrentUserUtils.curr_email;
     }
 
-    public static get id() {
+    public static get id(): string {
         return CurrentUserUtils.curr_id;
     }
 
-    public static loadCurrentUser() {
-        request.get(ServerUtils.prepend(RouteStore.getCurrUser), (error, response, body) => {
-            if (body) {
-                let obj = JSON.parse(body);
+    public static get UserDocument(): Document {
+        return CurrentUserUtils.user_document;
+    }
+
+    private static createUserDocument(id: string): Document {
+        let doc = new Document(id);
+
+        doc.Set(KeyStore.Workspaces, new ListField<Document>());
+        doc.Set(KeyStore.OptionalRightCollection, Documents.SchemaDocument([], { title: "Pending documents" }))
+        return doc;
+    }
+
+    public static loadCurrentUser(): Promise<any> {
+        let userPromise = rp.get(ServerUtils.prepend(RouteStore.getCurrUser)).then((response) => {
+            if (response) {
+                let obj = JSON.parse(response);
                 CurrentUserUtils.curr_id = obj.id as string;
                 CurrentUserUtils.curr_email = obj.email as string;
             } else {
                 throw new Error("There should be a user! Why does Dash think there isn't one?")
             }
         });
+        let userDocPromise = rp.get(ServerUtils.prepend(RouteStore.getUserDocumentId)).then(id => {
+            if (id) {
+                return Server.GetField(id).then(field => {
+                    if (field instanceof Document) {
+                        this.user_document = field;
+                    } else {
+                        this.user_document = this.createUserDocument(id);
+                    }
+                })
+            } else {
+                throw new Error("There should be a user id! Why does Dash think there isn't one?")
+            }
+        });
+        return Promise.all([userPromise, userDocPromise]);
     }
 }
\ No newline at end of file
diff --git a/src/server/authentication/models/user_model.ts b/src/server/authentication/models/user_model.ts
index 3d4ed6896..81580aad5 100644
--- a/src/server/authentication/models/user_model.ts
+++ b/src/server/authentication/models/user_model.ts
@@ -21,9 +21,7 @@ export type DashUserModel = mongoose.Document & {
     passwordResetToken: string | undefined,
     passwordResetExpires: Date | undefined,
 
-    allWorkspaceIds: Array<String>,
-    activeWorkspaceId: String,
-    activeUsersId: String,
+    userDocumentId: string;
 
     profile: {
         name: string,
@@ -49,12 +47,7 @@ const userSchema = new mongoose.Schema({
     passwordResetToken: String,
     passwordResetExpires: Date,
 
-    allWorkspaceIds: {
-        type: Array,
-        default: []
-    },
-    activeWorkspaceId: String,
-    activeUsersId: String,
+    userDocumentId: String,
 
     facebook: String,
     twitter: String,
diff --git a/src/server/index.ts b/src/server/index.ts
index d1eb6847d..16304f1c5 100644
--- a/src/server/index.ts
+++ b/src/server/index.ts
@@ -156,16 +156,9 @@ addSecureRoute(
 
 addSecureRoute(
     Method.GET,
-    (user, res) => res.send(user.activeWorkspaceId || ""),
+    (user, res) => res.send(user.userDocumentId || ""),
     undefined,
-    RouteStore.getActiveWorkspace,
-);
-
-addSecureRoute(
-    Method.GET,
-    (user, res) => res.send(JSON.stringify(user.allWorkspaceIds)),
-    undefined,
-    RouteStore.getAllWorkspaces
+    RouteStore.getUserDocumentId,
 );
 
 addSecureRoute(
@@ -182,28 +175,6 @@ addSecureRoute(
 
 // SETTERS
 
-addSecureRoute(
-    Method.POST,
-    (user, res, req) => {
-        user.update({ $set: { activeWorkspaceId: req.body.target } }, (err, raw) => {
-            res.sendStatus(err ? 500 : 200);
-        });
-    },
-    undefined,
-    RouteStore.setActiveWorkspace
-);
-
-addSecureRoute(
-    Method.POST,
-    (user, res, req) => {
-        user.update({ $push: { allWorkspaceIds: req.body.target } }, (err, raw) => {
-            res.sendStatus(err ? 500 : 200);
-        });
-    },
-    undefined,
-    RouteStore.addWorkspace
-);
-
 addSecureRoute(
     Method.POST,
     (user, res, req) => {
-- 
cgit v1.2.3-70-g09d2


From 1cf618563838f4ce7d8a98c8a0c8d94670bc4e18 Mon Sep 17 00:00:00 2001
From: Bob Zeleznik <zzzman@gmail.com>
Date: Thu, 21 Mar 2019 21:03:00 -0400
Subject: changes to allow tabs to be dragged into other documents

---
 src/client/views/collections/CollectionDockingView.tsx | 17 +++++++++++++++++
 src/fields/Document.ts                                 |  2 +-
 2 files changed, 18 insertions(+), 1 deletion(-)

(limited to 'src/fields')

diff --git a/src/client/views/collections/CollectionDockingView.tsx b/src/client/views/collections/CollectionDockingView.tsx
index fd0810242..950df7261 100644
--- a/src/client/views/collections/CollectionDockingView.tsx
+++ b/src/client/views/collections/CollectionDockingView.tsx
@@ -17,6 +17,7 @@ import { COLLECTION_BORDER_WIDTH } from "./CollectionView";
 import React = require("react");
 import { SubCollectionViewProps } from "./CollectionViewBase";
 import { ServerUtils } from "../../../server/ServerUtil";
+import { DragManager } from "../../util/DragManager";
 
 @observer
 export class CollectionDockingView extends React.Component<SubCollectionViewProps> {
@@ -190,6 +191,21 @@ export class CollectionDockingView extends React.Component<SubCollectionViewProp
     @action
     onPointerDown = (e: React.PointerEvent): void => {
         var className = (e.target as any).className;
+        if ((className == "lm_title" || className == "lm_tab lm_active") && e.ctrlKey) {
+            e.stopPropagation();
+            e.preventDefault();
+            let docid = (e.target as any).DashDocId;
+            let tab = (e.target as any).parentElement as HTMLElement;
+            Server.GetField(docid, action((f: Opt<Field>) =>
+                DragManager.StartDocumentDrag(tab, new DragManager.DocumentDragData(f as Document),
+                    {
+                        handlers: {
+                            dragComplete: action(() => { }),
+                        },
+                        hideSource: true
+                    }))
+            );
+        }
         if (className == "lm_drag_handle" || className == "lm_close" || className == "lm_maximise" || className == "lm_minimise" || className == "lm_close_tab") {
             this._flush = true;
         }
@@ -208,6 +224,7 @@ export class CollectionDockingView extends React.Component<SubCollectionViewProp
         this.stateChanged();
     }
     tabCreated = (tab: any) => {
+        tab.titleElement[0].DashDocId = tab.contentItem.config.props.documentId;
         tab.closeElement.off('click') //unbind the current click handler
             .click(function () {
                 tab.contentItem.remove();
diff --git a/src/fields/Document.ts b/src/fields/Document.ts
index b6439364a..2403c670c 100644
--- a/src/fields/Document.ts
+++ b/src/fields/Document.ts
@@ -36,7 +36,7 @@ export class Document extends Field {
 
     @computed
     public get Title() {
-        return this.GetText(KeyStore.Title, "<untitled>");
+        return this.GetText(KeyStore.Title, "-untitled-");
     }
 
     @computed
-- 
cgit v1.2.3-70-g09d2


From 81f81950b771d0cb1974200d25bd2da4bcc52a36 Mon Sep 17 00:00:00 2001
From: Tyler Schicke <tyler_schicke@brown.edu>
Date: Fri, 22 Mar 2019 02:58:35 -0400
Subject: FieldMap change

---
 src/fields/ListField.ts | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

(limited to 'src/fields')

diff --git a/src/fields/ListField.ts b/src/fields/ListField.ts
index 4527ee548..c4008bd12 100644
--- a/src/fields/ListField.ts
+++ b/src/fields/ListField.ts
@@ -4,6 +4,7 @@ import { UndoManager } from "../client/util/UndoManager";
 import { Types } from "../server/Message";
 import { BasicField } from "./BasicField";
 import { Field, FieldId } from "./Field";
+import { FieldMap } from "../client/SocketStub";
 
 export class ListField<T extends Field> extends BasicField<T[]> {
     private _proxies: string[] = []
@@ -71,7 +72,7 @@ export class ListField<T extends Field> extends BasicField<T[]> {
     }
 
     init(callback: (field: Field) => any) {
-        Server.GetFields(this._proxies, action((fields: { [index: string]: Field }) => {
+        Server.GetFields(this._proxies, action((fields: FieldMap) => {
             if (!this.arraysEqual(this._proxies, this.data.map(field => field.Id))) {
                 var dataids = this.data.map(d => d.Id);
                 var proxies = this._proxies.map(p => p);
@@ -111,7 +112,7 @@ export class ListField<T extends Field> extends BasicField<T[]> {
     ToJson(): { type: Types, data: string[], _id: string } {
         return {
             type: Types.List,
-            data: this._proxies,
+            data: this._proxies || [],
             _id: this.Id
         }
     }
-- 
cgit v1.2.3-70-g09d2


From 619c01891713b0ceb889ab45659b35f4b9fbc7e3 Mon Sep 17 00:00:00 2001
From: Tyler Schicke <tyler_schicke@brown.edu>
Date: Fri, 22 Mar 2019 07:15:22 -0400
Subject: Added basic fill down to schema view

---
 src/client/util/Scripting.ts                       |  2 +-
 src/client/util/type_decls.d                       |  7 ++++
 src/client/views/EditableView.tsx                  | 11 +++++-
 .../views/collections/CollectionSchemaView.tsx     | 43 ++++++++++++++--------
 src/fields/Document.ts                             |  8 +++-
 5 files changed, 51 insertions(+), 20 deletions(-)

(limited to 'src/fields')

diff --git a/src/client/util/Scripting.ts b/src/client/util/Scripting.ts
index 46bd1a206..4cf98472f 100644
--- a/src/client/util/Scripting.ts
+++ b/src/client/util/Scripting.ts
@@ -110,7 +110,7 @@ export function CompileScript(script: string, scope?: { [name: string]: any }, a
     let host = new ScriptingCompilerHost;
     let funcScript = `(function() {
         ${addReturn ? `return ${script};` : script}
-    })()`
+    }).apply(this)`
     host.writeFile("file.ts", funcScript);
     host.writeFile('node_modules/typescript/lib/lib.d.ts', typescriptlib);
     let program = ts.createProgram(["file.ts"], {}, host);
diff --git a/src/client/util/type_decls.d b/src/client/util/type_decls.d
index 679f73f42..dcf79285d 100644
--- a/src/client/util/type_decls.d
+++ b/src/client/util/type_decls.d
@@ -213,3 +213,10 @@ declare class Document extends Field {
     GetAllPrototypes(): Document[];
     MakeDelegate(): Document;
 }
+
+declare const KeyStore: {
+    [name: string]: Key;
+}
+
+// @ts-ignore
+declare const console: any;
diff --git a/src/client/views/EditableView.tsx b/src/client/views/EditableView.tsx
index 579d6e6ad..29bf6add7 100644
--- a/src/client/views/EditableView.tsx
+++ b/src/client/views/EditableView.tsx
@@ -16,6 +16,8 @@ export interface EditableProps {
      *  */
     SetValue(value: string): boolean;
 
+    OnFillDown?(value: string): void;
+
     /**
      * The contents to render when not editing
      */
@@ -36,8 +38,13 @@ export class EditableView extends React.Component<EditableProps> {
 
     @action
     onKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
-        if (e.key == "Enter" && !e.ctrlKey) {
-            if (this.props.SetValue(e.currentTarget.value)) {
+        if (e.key == "Enter") {
+            if (!e.ctrlKey) {
+                if (this.props.SetValue(e.currentTarget.value)) {
+                    this.editing = false;
+                }
+            } else if (this.props.OnFillDown) {
+                this.props.OnFillDown(e.currentTarget.value);
                 this.editing = false;
             }
         } else if (e.key == "Escape") {
diff --git a/src/client/views/collections/CollectionSchemaView.tsx b/src/client/views/collections/CollectionSchemaView.tsx
index 34b019244..8e0a38f05 100644
--- a/src/client/views/collections/CollectionSchemaView.tsx
+++ b/src/client/views/collections/CollectionSchemaView.tsx
@@ -85,12 +85,31 @@ export class CollectionSchemaView extends CollectionViewBase {
         )
         let reference = React.createRef<HTMLDivElement>();
         let onItemDown = setupDrag(reference, () => props.doc, (containingCollection: CollectionView) => this.props.removeDocument(props.doc));
+        let applyToDoc = (doc: Document, value: string) => {
+            let script = CompileScript(value, { this: doc }, true);
+            if (!script.compiled) {
+                return false;
+            }
+            let field = script();
+            if (field instanceof Field) {
+                doc.Set(props.fieldKey, field);
+                return true;
+            } else {
+                let dataField = ToField(field);
+                if (dataField) {
+                    doc.Set(props.fieldKey, dataField);
+                    return true;
+                }
+            }
+            return false;
+        }
         return (
             <div className="collectionSchemaView-cellContents" onPointerDown={onItemDown} style={{ height: "36px" }} key={props.doc.Id} ref={reference}>
                 <EditableView
                     display={"inline"}
                     contents={contents}
-                    height={36} GetValue={() => {
+                    height={36}
+                    GetValue={() => {
                         let field = props.doc.Get(props.fieldKey);
                         if (field && field instanceof Field) {
                             return field.ToScriptString();
@@ -98,22 +117,14 @@ export class CollectionSchemaView extends CollectionViewBase {
                         return field || "";
                     }}
                     SetValue={(value: string) => {
-                        let script = CompileScript(value);
-                        if (!script.compiled) {
-                            return false;
-                        }
-                        let field = script();
-                        if (field instanceof Field) {
-                            props.doc.Set(props.fieldKey, field);
-                            return true;
-                        } else {
-                            let dataField = ToField(field);
-                            if (dataField) {
-                                props.doc.Set(props.fieldKey, dataField);
-                                return true;
+                        return applyToDoc(props.doc, value);
+                    }}
+                    OnFillDown={(value: string) => {
+                        this.props.Document.GetTAsync<ListField<Document>>(this.props.fieldKey, ListField).then((val) => {
+                            if (val) {
+                                val.Data.forEach(doc => applyToDoc(doc, value));
                             }
-                        }
-                        return false;
+                        })
                     }}>
                 </EditableView>
             </div>
diff --git a/src/fields/Document.ts b/src/fields/Document.ts
index fc4906d17..d098cc96d 100644
--- a/src/fields/Document.ts
+++ b/src/fields/Document.ts
@@ -132,7 +132,13 @@ export class Document extends Field {
         } else if (this._proxies.has(key.Id)) {
             Server.GetDocumentField(this, key, callback);
         } else {
-            callback(undefined);
+            this.GetTAsync(KeyStore.Prototype, Document, proto => {
+                if (proto) {
+                    proto.GetAsync(key, callback);
+                } else {
+                    callback(undefined);
+                }
+            })
         }
     }
 
-- 
cgit v1.2.3-70-g09d2


From 2086d916c7b4a6fd1795f1613c08fd4c45325c07 Mon Sep 17 00:00:00 2001
From: Tyler Schicke <tyler_schicke@brown.edu>
Date: Fri, 22 Mar 2019 07:29:24 -0400
Subject: Fixed infinite recursion

---
 src/fields/Document.ts | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

(limited to 'src/fields')

diff --git a/src/fields/Document.ts b/src/fields/Document.ts
index d098cc96d..c30e8f4db 100644
--- a/src/fields/Document.ts
+++ b/src/fields/Document.ts
@@ -131,7 +131,7 @@ export class Document extends Field {
             callback(field.field);
         } else if (this._proxies.has(key.Id)) {
             Server.GetDocumentField(this, key, callback);
-        } else {
+        } else if (this._proxies.has(KeyStore.Prototype.Id)) {
             this.GetTAsync(KeyStore.Prototype, Document, proto => {
                 if (proto) {
                     proto.GetAsync(key, callback);
@@ -139,6 +139,8 @@ export class Document extends Field {
                     callback(undefined);
                 }
             })
+        } else {
+            callback(undefined);
         }
     }
 
-- 
cgit v1.2.3-70-g09d2


From 6d68c6e5e5f8f8ea8b1bbad10148a691a8c2e23f Mon Sep 17 00:00:00 2001
From: Tyler Schicke <tyler_schicke@brown.edu>
Date: Fri, 22 Mar 2019 09:43:13 -0400
Subject: switched setdata to maybe fix mongo issue

---
 src/fields/Document.ts | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

(limited to 'src/fields')

diff --git a/src/fields/Document.ts b/src/fields/Document.ts
index c30e8f4db..cd393d676 100644
--- a/src/fields/Document.ts
+++ b/src/fields/Document.ts
@@ -273,13 +273,13 @@ export class Document extends Field {
     }
 
     @action
-    SetData<T, U extends Field & { Data: T }>(key: Key, value: T, ctor: { new(): U }, replaceWrongType = true) {
+    SetData<T, U extends Field & { Data: T }>(key: Key, value: T, ctor: { new(data: T): U }, replaceWrongType = true) {
         let field = this.Get(key, true);
         if (field instanceof ctor) {
             field.Data = value;
         } else if (!field || replaceWrongType) {
-            let newField = new ctor();
-            newField.Data = value;
+            let newField = new ctor(value);
+            // newField.Data = value;
             this.Set(key, newField);
         }
     }
-- 
cgit v1.2.3-70-g09d2


From 2264fb874a09ee01540141986325c76650f32c21 Mon Sep 17 00:00:00 2001
From: Bob Zeleznik <zzzman@gmail.com>
Date: Mon, 25 Mar 2019 23:20:22 -0400
Subject: added 1-level navigation to region annotations

---
 .../views/collections/CollectionDockingView.tsx    |   2 +-
 .../views/collections/CollectionVideoView.tsx      | 108 ++++++++++++---------
 src/client/views/collections/CollectionView.tsx    |   6 +-
 src/client/views/nodes/LinkBox.tsx                 |  21 +++-
 src/client/views/nodes/PDFBox.tsx                  |  21 ++--
 src/client/views/nodes/VideoBox.tsx                |  29 ++++--
 src/fields/KeyStore.ts                             |   2 +
 7 files changed, 120 insertions(+), 69 deletions(-)

(limited to 'src/fields')

diff --git a/src/client/views/collections/CollectionDockingView.tsx b/src/client/views/collections/CollectionDockingView.tsx
index 39b284d8e..d4f510f5d 100644
--- a/src/client/views/collections/CollectionDockingView.tsx
+++ b/src/client/views/collections/CollectionDockingView.tsx
@@ -191,7 +191,7 @@ export class CollectionDockingView extends React.Component<SubCollectionViewProp
     @action
     onPointerDown = (e: React.PointerEvent): void => {
         var className = (e.target as any).className;
-        if ((className == "lm_title" || className == "lm_tab lm_active") && e.ctrlKey) {
+        if ((className == "lm_title" || className == "lm_tab lm_active") && (e.ctrlKey || e.altKey)) {
             e.stopPropagation();
             e.preventDefault();
             let docid = (e.target as any).DashDocId;
diff --git a/src/client/views/collections/CollectionVideoView.tsx b/src/client/views/collections/CollectionVideoView.tsx
index a3921696f..470a853e3 100644
--- a/src/client/views/collections/CollectionVideoView.tsx
+++ b/src/client/views/collections/CollectionVideoView.tsx
@@ -1,4 +1,4 @@
-import { action, computed, observable } from "mobx";
+import { action, computed, observable, trace } from "mobx";
 import { observer } from "mobx-react";
 import { Document } from "../../../fields/Document";
 import { KeyStore } from "../../../fields/KeyStore";
@@ -12,24 +12,26 @@ import "./CollectionVideoView.scss"
 
 @observer
 export class CollectionVideoView extends React.Component<CollectionViewProps> {
+    private _intervalTimer: any = undefined;
+    private _player: HTMLVideoElement | undefined = undefined;
+
+    @observable _currentTimecode: number = 0;
+    @observable _isPlaying: boolean = false;
 
     public static LayoutString(fieldKey: string = "DataKey") {
         return `<${CollectionVideoView.name} Document={Document}
                     ScreenToLocalTransform={ScreenToLocalTransform} fieldKey={${fieldKey}} panelWidth={PanelWidth} panelHeight={PanelHeight} isSelected={isSelected} select={select} bindings={bindings}
                     isTopMost={isTopMost} SelectOnLoad={selectOnLoad} BackgroundView={BackgroundView} focus={focus}/>`;
     }
-
-    private _mainCont = React.createRef<HTMLDivElement>();
-
     private get uIButtons() {
         let scaling = Math.min(1.8, this.props.ScreenToLocalTransform().transformDirection(1, 1)[0]);
         return ([
             <div className="collectionVideoView-time" key="time" onPointerDown={this.onResetDown} style={{ transform: `scale(${scaling}, ${scaling})` }}>
-                <span>{"" + Math.round(this.ctime)}</span>
-                <span style={{ fontSize: 8 }}>{" " + Math.round((this.ctime - Math.trunc(this.ctime)) * 100)}</span>
+                <span>{"" + Math.round(this._currentTimecode)}</span>
+                <span style={{ fontSize: 8 }}>{" " + Math.round((this._currentTimecode - Math.trunc(this._currentTimecode)) * 100)}</span>
             </div>,
             <div className="collectionVideoView-play" key="play" onPointerDown={this.onPlayDown} style={{ transform: `scale(${scaling}, ${scaling})` }}>
-                {this.playing ? "\"" : ">"}
+                {this._isPlaying ? "\"" : ">"}
             </div>,
             <div className="collectionVideoView-full" key="full" onPointerDown={this.onFullDown} style={{ transform: `scale(${scaling}, ${scaling})` }}>
                 F
@@ -37,64 +39,54 @@ export class CollectionVideoView extends React.Component<CollectionViewProps> {
         ]);
     }
 
-
-    // "inherited" CollectionView API starts here...
-
-    @observable
-    public SelectedDocs: FieldId[] = []
-    public active: () => boolean = () => CollectionView.Active(this);
-
-    addDocument = (doc: Document, allowDuplicates: boolean): boolean => { return CollectionView.AddDocument(this.props, doc, allowDuplicates); }
-    removeDocument = (doc: Document): boolean => { return CollectionView.RemoveDocument(this.props, doc); }
-
-    specificContextMenu = (e: React.MouseEvent): void => {
-        if (!e.isPropagationStopped() && this.props.Document.Id != "mainDoc") { // need to test this because GoldenLayout causes a parallel hierarchy in the React DOM for its children and the main document view7
-            ContextMenu.Instance.addItem({ description: "VideoOptions", event: () => { } });
+    @action
+    mainCont = (ele: HTMLDivElement | null) => {
+        if (ele) {
+            this._player = ele!.getElementsByTagName("video")[0];
+            if (this.props.Document.GetNumber(KeyStore.CurPage, -1) >= 0) {
+                this._currentTimecode = this.props.Document.GetNumber(KeyStore.CurPage, -1);
+            }
         }
     }
 
-    get collectionViewType(): CollectionViewType { return CollectionViewType.Freeform; }
-    get subView(): any { return CollectionView.SubView(this); }
-
     componentDidMount() {
-        this.updateTimecode();
+        this._intervalTimer = setInterval(this.updateTimecode, 1000);
     }
 
-    get player(): HTMLVideoElement | undefined {
-        return this._mainCont.current ? this._mainCont.current.getElementsByTagName("video")[0] : undefined;
+    componentWillUnmount() {
+        clearInterval(this._intervalTimer);
     }
 
     @action
     updateTimecode = () => {
-        if (this.player) {
-            this.ctime = this.player.currentTime;
-            this.props.Document.SetNumber(KeyStore.CurPage, Math.round(this.ctime));
+        if (this._player) {
+            if ((this._player as any).AHackBecauseSomethingResetsTheVideoToZero != -1) {
+                this._player.currentTime = (this._player as any).AHackBecauseSomethingResetsTheVideoToZero;
+                (this._player as any).AHackBecauseSomethingResetsTheVideoToZero = -1;
+            } else {
+                this._currentTimecode = this._player.currentTime;
+                this.props.Document.SetNumber(KeyStore.CurPage, Math.round(this._currentTimecode));
+            }
         }
-        setTimeout(() => this.updateTimecode(), 100)
     }
 
-
-    @observable
-    ctime: number = 0
-    @observable
-    playing: boolean = false;
-
     @action
     onPlayDown = () => {
-        if (this.player) {
-            if (this.player.paused) {
-                this.player.play();
-                this.playing = true;
+        if (this._player) {
+            if (this._player.paused) {
+                this._player.play();
+                this._isPlaying = true;
             } else {
-                this.player.pause();
-                this.playing = false;
+                this._player.pause();
+                this._isPlaying = false;
             }
         }
     }
+
     @action
     onFullDown = (e: React.PointerEvent) => {
-        if (this.player) {
-            this.player.requestFullscreen();
+        if (this._player) {
+            this._player.requestFullscreen();
             e.stopPropagation();
             e.preventDefault();
         }
@@ -102,15 +94,35 @@ export class CollectionVideoView extends React.Component<CollectionViewProps> {
 
     @action
     onResetDown = () => {
-        if (this.player) {
-            this.player.pause();
-            this.player.currentTime = 0;
+        if (this._player) {
+            this._player.pause();
+            this._player.currentTime = 0;
         }
 
     }
 
+    // "inherited" CollectionView API starts here...
+
+    @observable
+    public SelectedDocs: FieldId[] = []
+    public active: () => boolean = () => CollectionView.Active(this);
+
+    addDocument = (doc: Document, allowDuplicates: boolean): boolean => { return CollectionView.AddDocument(this.props, doc, allowDuplicates); }
+    removeDocument = (doc: Document): boolean => { return CollectionView.RemoveDocument(this.props, doc); }
+
+    specificContextMenu = (e: React.MouseEvent): void => {
+        if (!e.isPropagationStopped() && this.props.Document.Id != "mainDoc") { // need to test this because GoldenLayout causes a parallel hierarchy in the React DOM for its children and the main document view7
+            ContextMenu.Instance.addItem({ description: "VideoOptions", event: () => { } });
+        }
+    }
+
+    get collectionViewType(): CollectionViewType { return CollectionViewType.Freeform; }
+    get subView(): any { return CollectionView.SubView(this); }
+
+
     render() {
-        return (<div className="collectionVideoView-cont" ref={this._mainCont} onContextMenu={this.specificContextMenu}>
+        trace();
+        return (<div className="collectionVideoView-cont" ref={this.mainCont} onContextMenu={this.specificContextMenu}>
             {this.subView}
             {this.props.isSelected() ? this.uIButtons : (null)}
         </div>)
diff --git a/src/client/views/collections/CollectionView.tsx b/src/client/views/collections/CollectionView.tsx
index a740865ad..2fa2c9086 100644
--- a/src/client/views/collections/CollectionView.tsx
+++ b/src/client/views/collections/CollectionView.tsx
@@ -68,7 +68,11 @@ export class CollectionView extends React.Component<CollectionViewProps> {
 
     @action
     public static AddDocument(props: CollectionViewProps, doc: Document, allowDuplicates: boolean): boolean {
-        doc.SetNumber(KeyStore.Page, props.Document.GetNumber(KeyStore.CurPage, -1));
+        var curPage = props.Document.GetNumber(KeyStore.CurPage, -1);
+        doc.SetNumber(KeyStore.Page, curPage);
+        if (curPage > 0) {
+            doc.Set(KeyStore.AnnotationOn, props.Document);
+        }
         if (props.Document.Get(props.fieldKey) instanceof Field) {
             //TODO This won't create the field if it doesn't already exist
             const value = props.Document.GetData(props.fieldKey, ListField, new Array<Document>())
diff --git a/src/client/views/nodes/LinkBox.tsx b/src/client/views/nodes/LinkBox.tsx
index dd2f71b59..638d3b5a7 100644
--- a/src/client/views/nodes/LinkBox.tsx
+++ b/src/client/views/nodes/LinkBox.tsx
@@ -17,6 +17,8 @@ import { faEye } from '@fortawesome/free-solid-svg-icons';
 import { faEdit } from '@fortawesome/free-solid-svg-icons';
 import { faTimes } from '@fortawesome/free-solid-svg-icons';
 import { undoBatch } from "../../util/UndoManager";
+import { FieldWaiting } from "../../../fields/Field";
+import { NumberField } from "../../../fields/NumberField";
 
 
 library.add(faEye);
@@ -41,7 +43,24 @@ export class LinkBox extends React.Component<Props> {
         if (docView) {
             docView.props.focus(this.props.pairedDoc);
         } else {
-            CollectionDockingView.Instance.AddRightSplit(this.props.pairedDoc)
+            this.props.pairedDoc.GetAsync(KeyStore.AnnotationOn, (contextDoc: any) => {
+                if (!contextDoc) {
+                    CollectionDockingView.Instance.AddRightSplit(this.props.pairedDoc);
+                } else if (contextDoc instanceof Document) {
+                    this.props.pairedDoc.GetTAsync(KeyStore.Page, NumberField).then((pfield: any) => {
+                        contextDoc.GetTAsync(KeyStore.CurPage, NumberField).then((cfield: any) => {
+                            if (pfield != cfield)
+                                contextDoc.SetNumber(KeyStore.CurPage, pfield.Data);
+                            let contextView = DocumentManager.Instance.getDocumentView(contextDoc);
+                            if (contextView) {
+                                contextView.props.focus(contextDoc);
+                            } else {
+                                CollectionDockingView.Instance.AddRightSplit(contextDoc);
+                            }
+                        })
+                    });
+                }
+            });
         }
     }
 
diff --git a/src/client/views/nodes/PDFBox.tsx b/src/client/views/nodes/PDFBox.tsx
index 3a0ef2d32..e273b0b4f 100644
--- a/src/client/views/nodes/PDFBox.tsx
+++ b/src/client/views/nodes/PDFBox.tsx
@@ -1,5 +1,5 @@
 import * as htmlToImage from "html-to-image";
-import { action, computed, observable, reaction, IReactionDisposer, trace } from 'mobx';
+import { action, computed, observable, reaction, IReactionDisposer, trace, keys } from 'mobx';
 import { observer } from "mobx-react";
 import 'react-image-lightbox/style.css';
 import Measure from "react-measure";
@@ -18,6 +18,7 @@ import "./PDFBox.scss";
 import { Sticky } from './Sticky'; //you should look at sticky and annotation, because they are used here
 import React = require("react")
 import { RouteStore } from "../../../server/RouteStore";
+import { NumberField } from "../../../fields/NumberField";
 
 /** ALSO LOOK AT: Annotation.tsx, Sticky.tsx
  * This method renders PDF and puts all kinds of functionalities such as annotation, highlighting, 
@@ -60,7 +61,6 @@ export class PDFBox extends React.Component<FieldViewProps> {
     //very useful for keeping track of X and y position throughout the PDF Canvas
     private initX: number = 0;
     private initY: number = 0;
-    private initPage: boolean = false;
 
     //checks if tool is on
     private _toolOn: boolean = false; //checks if tool is on
@@ -88,17 +88,15 @@ export class PDFBox extends React.Component<FieldViewProps> {
     @observable private _loaded: boolean = false;
 
     @computed private get curPage() { return this.props.doc.GetNumber(KeyStore.CurPage, -1); }
+    @computed private get thumbnailPage() { return this.props.doc.GetNumber(KeyStore.ThumbnailPage, -1); }
 
     componentDidMount() {
         this._reactionDisposer = reaction(
-            () => this.curPage,
+            () => [this.curPage, this.thumbnailPage],
             () => {
-                if (this.curPage && this.initPage) {
+                if (this.curPage > 0 && this.thumbnailPage > 0 && this.curPage != this.thumbnailPage) {
                     this.saveThumbnail();
                     this._interactive = true;
-                } else {
-                    if (this.curPage > 0)
-                        this.initPage = true;
                 }
             },
             { fireImmediately: true });
@@ -384,6 +382,7 @@ export class PDFBox extends React.Component<FieldViewProps> {
                 { width: me.props.doc.GetNumber(KeyStore.NativeWidth, 0), height: me.props.doc.GetNumber(KeyStore.NativeHeight, 0), quality: 0.5 })
                 .then(function (dataUrl: string) {
                     me.props.doc.SetData(KeyStore.Thumbnail, new URL(dataUrl), ImageField);
+                    me.props.doc.SetNumber(KeyStore.ThumbnailPage, me.props.doc.GetNumber(KeyStore.CurPage, -1));
                 })
                 .catch(function (error: any) {
                     console.error('oops, something went wrong!', error);
@@ -473,10 +472,10 @@ export class PDFBox extends React.Component<FieldViewProps> {
 
     @computed
     get imageProxyRenderer() {
-        let field = this.props.doc.Get(KeyStore.Thumbnail);
-        if (field) {
-            let path = field == FieldWaiting ? "https://image.flaticon.com/icons/svg/66/66163.svg" :
-                field instanceof ImageField ? field.Data.href : "http://cs.brown.edu/people/bcz/prairie.jpg";
+        let thumbField = this.props.doc.Get(KeyStore.Thumbnail);
+        if (thumbField) {
+            let path = thumbField == FieldWaiting || this.thumbnailPage != this.curPage ? "https://image.flaticon.com/icons/svg/66/66163.svg" :
+                thumbField instanceof ImageField ? thumbField.Data.href : "http://cs.brown.edu/people/bcz/prairie.jpg";
             return <img src={path} width="100%" />;
         }
         return (null);
diff --git a/src/client/views/nodes/VideoBox.tsx b/src/client/views/nodes/VideoBox.tsx
index 09ae95183..7c0db83a8 100644
--- a/src/client/views/nodes/VideoBox.tsx
+++ b/src/client/views/nodes/VideoBox.tsx
@@ -1,23 +1,27 @@
 import React = require("react")
 import { observer } from "mobx-react";
-import { FieldWaiting } from '../../../fields/Field';
+import { FieldWaiting, Opt } from '../../../fields/Field';
 import { VideoField } from '../../../fields/VideoField';
 import { FieldView, FieldViewProps } from './FieldView';
 import "./VideoBox.scss";
 import Measure from "react-measure";
-import { action, trace, observable } from "mobx";
+import { action, trace, observable, IReactionDisposer, computed, reaction } from "mobx";
 import { KeyStore } from "../../../fields/KeyStore";
 import { number } from "prop-types";
 
 @observer
 export class VideoBox extends React.Component<FieldViewProps> {
 
+    private _reactionDisposer: Opt<IReactionDisposer>;
+    private _videoRef = React.createRef<HTMLVideoElement>()
     public static LayoutString() { return FieldView.LayoutString(VideoBox) }
 
     constructor(props: FieldViewProps) {
         super(props);
     }
 
+    @computed private get curPage() { return this.props.doc.GetNumber(KeyStore.CurPage, -1); }
+
 
     _loaded: boolean = false;
 
@@ -39,7 +43,17 @@ export class VideoBox extends React.Component<FieldViewProps> {
         }
     }
 
+    get player(): HTMLVideoElement | undefined {
+        return this._videoRef.current ? this._videoRef.current.getElementsByTagName("video")[0] : undefined;
+    }
 
+    @action
+    setVideoRef = (vref: HTMLVideoElement | null) => {
+        if (this.curPage >= 0 && vref) {
+            vref!.currentTime = this.curPage;
+            (vref! as any).AHackBecauseSomethingResetsTheVideoToZero = this.curPage;
+        }
+    }
 
     render() {
         let field = this.props.doc.GetT(this.props.fieldKey, VideoField);
@@ -47,15 +61,16 @@ export class VideoBox extends React.Component<FieldViewProps> {
             return <div>Loading</div>
         }
         let path = field.Data.href;
-
-        //setTimeout(action(() => this._loaded = true), 500);
+        trace();
         return (
             <Measure onResize={this.setScaling}>
                 {({ measureRef }) =>
-                    <video className="videobox-cont" onClick={() => { }} ref={measureRef}>
-                        <source src={path} type="video/mp4" />
-                        Not supported.
+                    <div style={{ width: "100%", height: "auto" }} ref={measureRef}>
+                        <video className="videobox-cont" onClick={() => { }} ref={this.setVideoRef}>
+                            <source src={path} type="video/mp4" />
+                            Not supported.
                         </video>
+                    </div>
                 }
             </Measure>
         )
diff --git a/src/fields/KeyStore.ts b/src/fields/KeyStore.ts
index 611e2951b..f9684b212 100644
--- a/src/fields/KeyStore.ts
+++ b/src/fields/KeyStore.ts
@@ -36,7 +36,9 @@ export namespace KeyStore {
     export const LinkDescription = new Key("LinkDescription");
     export const LinkTags = new Key("LinkTag");
     export const Thumbnail = new Key("Thumbnail");
+    export const ThumbnailPage = new Key("ThumbnailPage");
     export const CurPage = new Key("CurPage");
+    export const AnnotationOn = new Key("AnnotationOn");
     export const NumPages = new Key("NumPages");
     export const Ink = new Key("Ink");
     export const Cursors = new Key("Cursors");
-- 
cgit v1.2.3-70-g09d2


From 8335f0ba0b780a0ed0619e52076f051f122e4865 Mon Sep 17 00:00:00 2001
From: bob <bcz@cs.brown.edu>
Date: Tue, 26 Mar 2019 12:37:26 -0400
Subject: added HistogramField

---
 package.json                                       |  1 +
 src/client/documents/Documents.ts                  |  9 ++--
 src/client/northstar/core/filter/FilterModel.ts    | 21 ++++----
 .../northstar/core/filter/IBaseFilterConsumer.ts   |  2 +
 .../northstar/operations/HistogramOperation.ts     | 42 ++++++++-------
 src/client/views/Main.tsx                          | 22 +++++++-
 src/client/views/nodes/HistogramBox.tsx            | 60 ++++++++++++++--------
 src/fields/HistogramField.ts                       | 59 +++++++++++++++++++++
 src/fields/KeyStore.ts                             |  2 +-
 src/server/Message.ts                              |  2 +-
 src/server/ServerUtil.ts                           |  3 ++
 .../authentication/models/current_user_utils.ts    |  3 ++
 12 files changed, 166 insertions(+), 60 deletions(-)
 create mode 100644 src/fields/HistogramField.ts

(limited to 'src/fields')

diff --git a/package.json b/package.json
index 4f75d139d..27b3eead1 100644
--- a/package.json
+++ b/package.json
@@ -92,6 +92,7 @@
     "bluebird": "^3.5.3",
     "body-parser": "^1.18.3",
     "bootstrap": "^4.3.1",
+    "class-transformer": "^0.2.0",
     "connect-flash": "^0.1.1",
     "connect-mongo": "^2.0.3",
     "cookie-parser": "^1.4.4",
diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts
index bc0a18d50..1d23b8c2c 100644
--- a/src/client/documents/Documents.ts
+++ b/src/client/documents/Documents.ts
@@ -24,6 +24,8 @@ import { VideoBox } from "../views/nodes/VideoBox";
 import { WebBox } from "../views/nodes/WebBox";
 import { HistogramBox } from "../views/nodes/HistogramBox";
 import { FieldView } from "../views/nodes/FieldView";
+import { HistogramField } from "../../fields/HistogramField";
+import { HistogramOperation } from "../northstar/operations/HistogramOperation";
 
 export interface DocumentOptions {
     x?: number;
@@ -42,6 +44,7 @@ export interface DocumentOptions {
     layoutKeys?: Key[];
     viewType?: number;
     backgroundColor?: string;
+    northstarSchema?: string;
 }
 
 export namespace Documents {
@@ -85,6 +88,7 @@ export namespace Documents {
         if (options.ink !== undefined) { doc.Set(KeyStore.Ink, new InkField(options.ink)); }
         if (options.layout !== undefined) { doc.SetText(KeyStore.Layout, options.layout); }
         if (options.layoutKeys !== undefined) { doc.Set(KeyStore.LayoutKeys, new ListField(options.layoutKeys)); }
+        if (options.northstarSchema !== undefined) { doc.SetText(KeyStore.NorthstarSchema, options.northstarSchema); }
         return doc;
     }
 
@@ -120,7 +124,6 @@ export namespace Documents {
     }
     function GetHistogramPrototype(): Document {
         if (!histoProto) {
-
             histoProto = setupPrototypeOptions(histoProtoId, "HISTO PROTO", CollectionView.LayoutString("AnnotationsKey"),
                 { x: 0, y: 0, width: 300, height: 300, layoutKeys: [KeyStore.Data, KeyStore.Annotations, KeyStore.Caption] });
             histoProto.SetText(KeyStore.BackgroundLayout, HistogramBox.LayoutString());
@@ -189,8 +192,8 @@ export namespace Documents {
         return assignToDelegate(SetInstanceOptions(GetAudioPrototype(), options, [new URL(url), AudioField]), options);
     }
 
-    export function HistogramDocument(options: DocumentOptions = {}) {
-        return assignToDelegate(SetInstanceOptions(GetHistogramPrototype(), options, ["", TextField]).MakeDelegate(), options);
+    export function HistogramDocument(histoOp: HistogramOperation, options: DocumentOptions = {}, id?: string) {
+        return assignToDelegate(SetInstanceOptions(GetHistogramPrototype(), options, [histoOp, HistogramField], id).MakeDelegate(), options);
     }
     export function TextDocument(options: DocumentOptions = {}) {
         return assignToDelegate(SetInstanceOptions(GetTextPrototype(), options, ["", TextField]).MakeDelegate(), options);
diff --git a/src/client/northstar/core/filter/FilterModel.ts b/src/client/northstar/core/filter/FilterModel.ts
index 3c4cfc4a7..01bf2a809 100644
--- a/src/client/northstar/core/filter/FilterModel.ts
+++ b/src/client/northstar/core/filter/FilterModel.ts
@@ -1,5 +1,8 @@
 import { ValueComparison } from "./ValueComparision";
 import { Utils } from "../../utils/Utils";
+import { IBaseFilterProvider } from "./IBaseFilterProvider";
+import { BaseOperation } from "../../operations/BaseOperation";
+import { FilterOperand } from "./FilterOperand";
 
 export class FilterModel {
     public ValueComparisons: ValueComparison[];
@@ -36,20 +39,20 @@ export class FilterModel {
         return ret;
     }
 
-    // public static GetFilterModelsRecursive(filterGraphNode: GraphNode<BaseOperationViewModel, FilterLinkViewModel>,
-    //     visitedFilterProviders: Set<GraphNode<BaseOperationViewModel, FilterLinkViewModel>>, filterModels: FilterModel[], isFirst: boolean): string {
+    // public static GetFilterModelsRecursive(baseOperation: BaseOperation,
+    //     visitedFilterProviders: Set<IBaseFilterProvider>, filterModels: FilterModel[], isFirst: boolean): string {
     //     let ret = "";
-    //     if (Utils.isBaseFilterProvider(filterGraphNode.Data)) {
-    //         visitedFilterProviders.add(filterGraphNode);
-    //         let filtered = filterGraphNode.Data.FilterModels.filter(fm => fm && fm.ValueComparisons.length > 0);
+    //     if (Utils.isBaseFilterProvider(baseOperation)) {
+    //         visitedFilterProviders.add(baseOperation);
+    //         let filtered = baseOperation.FilterModels.filter(fm => fm && fm.ValueComparisons.length > 0);
     //         if (!isFirst && filtered.length > 0) {
     //             filterModels.push(...filtered);
-    //             ret = "(" + filterGraphNode.Data.FilterModels.filter(fm => fm != null).map(fm => fm.ToPythonString()).join(" || ") + ")";
+    //             ret = "(" + baseOperation.FilterModels.filter(fm => fm != null).map(fm => fm.ToPythonString()).join(" || ") + ")";
     //         }
     //     }
-    //     if (Utils.isBaseFilterConsumer(filterGraphNode.Data) && filterGraphNode.Links != null) {
+    //     if (Utils.isBaseFilterConsumer(baseOperation) && baseOperation.Links) {
     //         let children = new Array<string>();
-    //         let linkedGraphNodes = filterGraphNode.Links.get(LinkType.Filter);
+    //         let linkedGraphNodes = baseOperation.Links.get(LinkType.Filter);
     //         if (linkedGraphNodes != null) {
     //             for (let i = 0; i < linkedGraphNodes.length; i++) {
     //                 let linkVm = linkedGraphNodes[i].Data;
@@ -66,7 +69,7 @@ export class FilterModel {
     //             }
     //         }
 
-    //         let childrenJoined = children.join(filterGraphNode.Data.FilterOperand === FilterOperand.AND ? " && " : " || ");
+    //         let childrenJoined = children.join(baseOperation.FilterOperand === FilterOperand.AND ? " && " : " || ");
     //         if (children.length > 0) {
     //             if (ret !== "") {
     //                 ret = "(" + ret + " &&  (" + childrenJoined + "))";
diff --git a/src/client/northstar/core/filter/IBaseFilterConsumer.ts b/src/client/northstar/core/filter/IBaseFilterConsumer.ts
index e687acb8a..3eb32b6db 100644
--- a/src/client/northstar/core/filter/IBaseFilterConsumer.ts
+++ b/src/client/northstar/core/filter/IBaseFilterConsumer.ts
@@ -1,8 +1,10 @@
 import { FilterOperand } from '../filter/FilterOperand'
 import { IEquatable } from '../../utils/IEquatable'
+import { IBaseFilterProvider } from './IBaseFilterProvider';
 
 export interface IBaseFilterConsumer extends IEquatable {
     FilterOperand: FilterOperand;
+    Links: IBaseFilterProvider[];
 }
 
 export function instanceOfIBaseFilterConsumer(object: any): object is IBaseFilterConsumer {
diff --git a/src/client/northstar/operations/HistogramOperation.ts b/src/client/northstar/operations/HistogramOperation.ts
index cf2571285..0c38679e5 100644
--- a/src/client/northstar/operations/HistogramOperation.ts
+++ b/src/client/northstar/operations/HistogramOperation.ts
@@ -9,9 +9,15 @@ import { BaseOperation } from "./BaseOperation";
 import { CurrentUserUtils } from "../../../server/authentication/models/current_user_utils";
 import { FilterModel } from "../core/filter/FilterModel";
 import { BrushLinkModel } from "../core/brusher/BrushLinkModel";
+import { IBaseFilterConsumer } from "../core/filter/IBaseFilterConsumer";
+import { FilterOperand } from "../core/filter/FilterOperand";
+import { IBaseFilterProvider } from "../core/filter/IBaseFilterProvider";
+import { AttributeModel, ColumnAttributeModel } from "../core/attribute/AttributeModel";
 
 
-export class HistogramOperation extends BaseOperation {
+export class HistogramOperation extends BaseOperation implements IBaseFilterConsumer, IBaseFilterProvider {
+    @observable public FilterOperand: FilterOperand = FilterOperand.AND;
+    @observable public Links: IBaseFilterProvider[] = [];
     @observable public BrushColors: number[] = [];
     @observable public Normalization: number = -1;
     @observable public FilterModels: FilterModel[] = [];
@@ -21,12 +27,18 @@ export class HistogramOperation extends BaseOperation {
     @observable public BrusherModels: BrushLinkModel<HistogramOperation>[] = [];
     @observable public BrushableModels: BrushLinkModel<HistogramOperation>[] = [];
 
-    constructor(x: AttributeTransformationModel, y: AttributeTransformationModel, v: AttributeTransformationModel) {
+    public static Empty = new HistogramOperation(new AttributeTransformationModel(new ColumnAttributeModel(new Attribute())), new AttributeTransformationModel(new ColumnAttributeModel(new Attribute())), new AttributeTransformationModel(new ColumnAttributeModel(new Attribute())));
+
+    Equals(other: Object): boolean {
+        throw new Error("Method not implemented.");
+    }
+
+    constructor(x: AttributeTransformationModel, y: AttributeTransformationModel, v: AttributeTransformationModel, normalized?: number) {
         super();
         this.X = x;
         this.Y = y;
         this.V = v;
-        reaction(() => this.createOperationParamsCache, () => this.Update());
+        this.Normalization = normalized ? normalized : -1;
     }
 
     @computed.struct
@@ -47,20 +59,11 @@ export class HistogramOperation extends BaseOperation {
     }
 
 
-    @computed.struct
-    public get SelectionString() {
-        return "";
-        // let filterModels = new Array<FilterModel>();
-        // let rdg = MainManager.Instance.MainViewModel.FilterReverseDependencyGraph;
-        // let graphNode: GraphNode<BaseOperationViewModel, FilterLinkViewModel>;
-        // if (rdg.has(this.TypedViewModel)) {
-        //     graphNode = MainManager.Instance.MainViewModel.FilterReverseDependencyGraph.get(this.TypedViewModel);
-        // }
-        // else {
-        //     graphNode = new GraphNode<BaseOperationViewModel, FilterLinkViewModel>(this.TypedViewModel);
-        // }
-        // return FilterModel.GetFilterModelsRecursive(graphNode, new Set<GraphNode<BaseOperationViewModel, FilterLinkViewModel>>(), filterModels, false);
-    }
+    // @computed.struct
+    // public get SelectionString() {
+    //     let filterModels = new Array<FilterModel>();
+    //     return FilterModel.GetFilterModelsRecursive(this, new Set<GraphNode<BaseOperationViewModel, FilterLinkViewModel>>(), filterModels, false);
+    // }
 
     GetAggregateParameters(histoX: AttributeTransformationModel, histoY: AttributeTransformationModel, histoValue: AttributeTransformationModel) {
         let allAttributes = new Array<AttributeTransformationModel>(histoX, histoY, histoValue);
@@ -79,11 +82,6 @@ export class HistogramOperation extends BaseOperation {
         return [perBinAggregateParameters, globalAggregateParameters];
     }
 
-    @computed
-    get createOperationParamsCache() {
-        return this.CreateOperationParameters();
-    }
-
     public QRange: QuantitativeBinRange | undefined;
 
     public CreateOperationParameters(): HistogramOperationParameters | undefined {
diff --git a/src/client/views/Main.tsx b/src/client/views/Main.tsx
index 6534cb4f7..3e0e02f42 100644
--- a/src/client/views/Main.tsx
+++ b/src/client/views/Main.tsx
@@ -44,10 +44,13 @@ import { CurrentUserUtils } from '../../server/authentication/models/current_use
 import { Field, Opt, FieldWaiting } from '../../fields/Field';
 import { ListField } from '../../fields/ListField';
 import { Gateway, Settings } from '../northstar/manager/Gateway';
-import { Catalog, Schema, Attribute, AttributeGroup } from '../northstar/model/idea/idea';
+import { Catalog, Schema, Attribute, AttributeGroup, AggregateFunction } from '../northstar/model/idea/idea';
 import { ArrayUtil } from '../northstar/utils/ArrayUtil';
 import '../northstar/model/ModelExtensions'
 import '../northstar/utils/Extensions'
+import { HistogramOperation } from '../northstar/operations/HistogramOperation';
+import { AttributeTransformationModel } from '../northstar/core/attribute/AttributeTransformationModel';
+import { ColumnAttributeModel } from '../northstar/core/attribute/AttributeModel';
 
 @observer
 export class Main extends React.Component {
@@ -339,7 +342,22 @@ export class Main extends React.Component {
     @action SetNorthstarCatalog(ctlog: Catalog) {
         if (ctlog && ctlog.schemas) {
             CurrentUserUtils.ActiveSchema = ArrayUtil.FirstOrDefault<Schema>(ctlog.schemas!, (s: Schema) => s.displayName === "mimic");
-            this._northstarColumns = CurrentUserUtils.GetAllNorthstarColumnAttributes().map(a => Documents.HistogramDocument({ width: 200, height: 200, title: a.displayName! }));
+            CurrentUserUtils.GetAllNorthstarColumnAttributes().map(attr => {
+                Server.GetField(attr.displayName!, action((field: Opt<Field>) => {
+                    if (field instanceof Document) {
+                        this._northstarColumns.push(field);
+                    } else {
+                        var atmod = new ColumnAttributeModel(attr);
+                        let histoOp = new HistogramOperation(
+                            new AttributeTransformationModel(atmod, AggregateFunction.None),
+                            new AttributeTransformationModel(atmod, AggregateFunction.Count),
+                            new AttributeTransformationModel(atmod, AggregateFunction.Count));
+                        this._northstarColumns.push(Documents.HistogramDocument(histoOp, { width: 200, height: 200, title: attr.displayName!, northstarSchema: CurrentUserUtils.ActiveSchema!.displayName! }, attr.displayName!));
+                    }
+                }));
+            })
+            console.log("Activating schema " + CurrentUserUtils.ActiveSchema!.displayName!)
+            CurrentUserUtils.ActiveSchemaName = CurrentUserUtils.ActiveSchema!.displayName!;
         }
     }
     async initializeNorthstar(): Promise<void> {
diff --git a/src/client/views/nodes/HistogramBox.tsx b/src/client/views/nodes/HistogramBox.tsx
index 675bf30b2..73d3f3bc3 100644
--- a/src/client/views/nodes/HistogramBox.tsx
+++ b/src/client/views/nodes/HistogramBox.tsx
@@ -1,17 +1,17 @@
 import React = require("react")
-import { computed, observable, reaction, runInAction } from "mobx";
+import { computed, observable, reaction, runInAction, action, observe } from "mobx";
 import { observer } from "mobx-react";
 import Measure from "react-measure";
 import { Dictionary } from "typescript-collections";
 import { CurrentUserUtils } from "../../../server/authentication/models/current_user_utils";
 import { Utils as DashUtils } from '../../../Utils';
-import { ColumnAttributeModel } from "../../northstar/core/attribute/AttributeModel";
+import { ColumnAttributeModel, AttributeModel } from "../../northstar/core/attribute/AttributeModel";
 import { AttributeTransformationModel } from "../../northstar/core/attribute/AttributeTransformationModel";
 import { FilterModel } from '../../northstar/core/filter/FilterModel';
 import { NominalVisualBinRange } from "../../northstar/model/binRanges/NominalVisualBinRange";
 import { ChartType, VisualBinRange } from '../../northstar/model/binRanges/VisualBinRange';
 import { VisualBinRangeHelper } from "../../northstar/model/binRanges/VisualBinRangeHelper";
-import { AggregateBinRange, AggregateFunction, Bin, Brush, DoubleValueAggregateResult, HistogramResult, MarginAggregateParameters, MarginAggregateResult } from "../../northstar/model/idea/idea";
+import { AggregateBinRange, AggregateFunction, Bin, Brush, DoubleValueAggregateResult, HistogramResult, MarginAggregateParameters, MarginAggregateResult, Attribute, BinRange } from "../../northstar/model/idea/idea";
 import { ModelHelpers } from "../../northstar/model/ModelHelpers";
 import { HistogramOperation } from "../../northstar/operations/HistogramOperation";
 import { ArrayUtil } from "../../northstar/utils/ArrayUtil";
@@ -22,6 +22,10 @@ import { StyleConstants } from "../../northstar/utils/StyleContants";
 import { FieldView, FieldViewProps } from './FieldView';
 import "./HistogramBox.scss";
 import { KeyStore } from "../../../fields/KeyStore";
+import { ListField } from "../../../fields/ListField";
+import { Document } from "../../../fields/Document"
+import { HistogramField } from "../../../fields/HistogramField";
+import { FieldWaiting, Opt } from "../../../fields/Field";
 
 @observer
 export class HistogramBox extends React.Component<FieldViewProps> {
@@ -38,37 +42,26 @@ export class HistogramBox extends React.Component<FieldViewProps> {
     @observable public ChartType: ChartType = ChartType.VerticalBar;
     public HitTargets: Dictionary<PIXIRectangle, FilterModel> = new Dictionary<PIXIRectangle, FilterModel>();
 
-    constructor(props: FieldViewProps) {
-        super(props);
-    }
-
     @computed get xaxislines() { return this.renderGridLinesAndLabels(0); }
     @computed get yaxislines() { return this.renderGridLinesAndLabels(1); }
 
     componentDidMount() {
-        reaction(() => CurrentUserUtils.GetAllNorthstarColumnAttributes().filter(a => a.displayName == this.props.doc.Title),
-            (columnAttrs) => columnAttrs.map(a => {
-                var atmod = new ColumnAttributeModel(a);
-                this.HistoOp = new HistogramOperation(new AttributeTransformationModel(atmod, AggregateFunction.None),
-                    new AttributeTransformationModel(atmod, AggregateFunction.Count),
-                    new AttributeTransformationModel(atmod, AggregateFunction.Count));
-                this.HistoOp.Update();
-            })
-            , { fireImmediately: true });
+        reaction(() => [CurrentUserUtils.ActiveSchemaName, this.props.doc.GetText(KeyStore.NorthstarSchema, "?")],
+            () => CurrentUserUtils.ActiveSchemaName == this.props.doc.GetText(KeyStore.NorthstarSchema, "?") && this.activateHistogramOperation(),
+            { fireImmediately: true });
         reaction(() => [this.VisualBinRanges && this.VisualBinRanges.slice(), this._panelHeight, this._panelWidth],
             () => this.SizeConverter = new SizeConverter({ x: this._panelWidth, y: this._panelHeight }, this.VisualBinRanges, Math.PI / 4));
-        reaction(() => [this.HistoOp && this.HistoOp.Result],
-            () => {
-                if (!this.HistoOp || !(this.HistoOp.Result instanceof HistogramResult) || !this.HistoOp.Result.binRanges)
+        reaction(() => this.HistoOp && this.HistoOp.Result instanceof HistogramResult ? this.HistoOp.Result.binRanges : undefined,
+            (binRanges: BinRange[] | undefined) => {
+                if (!binRanges || !this.HistoOp || !(this.HistoOp!.Result instanceof HistogramResult))
                     return;
 
-                let binRanges = this.HistoOp.Result.binRanges;
                 this.ChartType = binRanges[0] instanceof AggregateBinRange ? (binRanges[1] instanceof AggregateBinRange ? ChartType.SinglePoint : ChartType.HorizontalBar) :
                     binRanges[1] instanceof AggregateBinRange ? ChartType.VerticalBar : ChartType.HeatMap;
 
                 this.VisualBinRanges.length = 0;
-                this.VisualBinRanges.push(VisualBinRangeHelper.GetVisualBinRange(this.HistoOp.Result.binRanges[0], this.HistoOp.Result, this.HistoOp.X, this.ChartType));
-                this.VisualBinRanges.push(VisualBinRangeHelper.GetVisualBinRange(this.HistoOp.Result.binRanges[1], this.HistoOp.Result, this.HistoOp.Y, this.ChartType));
+                this.VisualBinRanges.push(VisualBinRangeHelper.GetVisualBinRange(binRanges[0], this.HistoOp.Result, this.HistoOp.X, this.ChartType));
+                this.VisualBinRanges.push(VisualBinRangeHelper.GetVisualBinRange(binRanges[1], this.HistoOp.Result, this.HistoOp.Y, this.ChartType));
 
                 if (!this.HistoOp.Result.isEmpty) {
                     this.MaxValue = Number.MIN_VALUE;
@@ -89,6 +82,29 @@ export class HistogramBox extends React.Component<FieldViewProps> {
         );
     }
 
+    @computed
+    get createOperationParamsCache() {
+        return this.HistoOp!.CreateOperationParameters();
+    }
+
+    activateHistogramOperation() {
+        this.props.doc.GetTAsync(this.props.fieldKey, HistogramField).then((histoOp: Opt<HistogramField>) => {
+            if (histoOp) {
+                runInAction(() => this.HistoOp = histoOp.Data);
+                this.HistoOp!.Update();
+                reaction(() => this.createOperationParamsCache, () => this.HistoOp!.Update());
+                reaction(() => this.props.doc.GetList(KeyStore.LinkedFromDocs, []),
+                    () => {
+                        let linkFrom: Document[] = this.props.doc.GetData(KeyStore.LinkedFromDocs, ListField, []);
+                        this.HistoOp!.Links.length = 0;
+                        linkFrom.map(l => this.HistoOp!.Links.push(l.GetData(KeyStore.Data, HistogramField, HistogramOperation.Empty)));
+                    },
+                    { fireImmediately: true }
+                );
+            }
+        })
+    }
+
     drawLine(xFrom: number, yFrom: number, width: number, height: number) {
         return <div key={DashUtils.GenerateGuid()} style={{ position: "absolute", width: `${width}px`, height: `${height}px`, background: "lightgray", transform: `translate(${xFrom}px, ${yFrom}px)` }} />;
     }
diff --git a/src/fields/HistogramField.ts b/src/fields/HistogramField.ts
new file mode 100644
index 000000000..bb0014ab3
--- /dev/null
+++ b/src/fields/HistogramField.ts
@@ -0,0 +1,59 @@
+import { BasicField } from "./BasicField";
+import { Field, FieldId } from "./Field";
+import { Types } from "../server/Message";
+import { HistogramOperation } from "../client/northstar/operations/HistogramOperation";
+import { action } from "mobx";
+import { AttributeTransformationModel } from "../client/northstar/core/attribute/AttributeTransformationModel";
+import { ColumnAttributeModel } from "../client/northstar/core/attribute/AttributeModel";
+import { CurrentUserUtils } from "../server/authentication/models/current_user_utils";
+
+
+export class HistogramField extends BasicField<HistogramOperation> {
+    constructor(data?: HistogramOperation, id?: FieldId, save: boolean = true) {
+        super(data ? data : HistogramOperation.Empty, save, id);
+    }
+
+    toString(): string {
+        return JSON.stringify(this.Data);
+    }
+
+    Copy(): Field {
+        return new HistogramField(this.Data);
+    }
+
+    ToScriptString(): string {
+        return `new HistogramField("${this.Data}")`;
+    }
+
+    ToJson(): { type: Types, data: string, _id: string } {
+        return {
+            type: Types.HistogramOp,
+            data: JSON.stringify(this.Data),
+            _id: this.Id
+        }
+    }
+
+    @action
+    static FromJson(id: string, data: any): HistogramField {
+        let jp = JSON.parse(data);
+        let X: AttributeTransformationModel | undefined;
+        let Y: AttributeTransformationModel | undefined;
+        let V: AttributeTransformationModel | undefined;
+
+        CurrentUserUtils.GetAllNorthstarColumnAttributes().map(attr => {
+            if (attr.displayName == jp.X.AttributeModel.Attribute.DisplayName) {
+                X = new AttributeTransformationModel(new ColumnAttributeModel(attr), jp.X.AggregateFunction);
+            }
+            if (attr.displayName == jp.Y.AttributeModel.Attribute.DisplayName) {
+                Y = new AttributeTransformationModel(new ColumnAttributeModel(attr), jp.Y.AggregateFunction);
+            }
+            if (attr.displayName == jp.V.AttributeModel.Attribute.DisplayName) {
+                V = new AttributeTransformationModel(new ColumnAttributeModel(attr), jp.V.AggregateFunction);
+            }
+        });
+        if (X && Y && V) {
+            return new HistogramField(new HistogramOperation(X, Y, V, jp.Normalization), id, false);
+        }
+        return new HistogramField(HistogramOperation.Empty, id, false);
+    }
+}
\ No newline at end of file
diff --git a/src/fields/KeyStore.ts b/src/fields/KeyStore.ts
index f9684b212..20e8cd930 100644
--- a/src/fields/KeyStore.ts
+++ b/src/fields/KeyStore.ts
@@ -29,7 +29,6 @@ export namespace KeyStore {
     export const Caption = new Key("Caption");
     export const ActiveFrame = new Key("ActiveFrame");
     export const ActiveWorkspace = new Key("ActiveWorkspace");
-    export const ActiveDB = new Key("ActiveDB");
     export const DocumentText = new Key("DocumentText");
     export const LinkedToDocs = new Key("LinkedToDocs");
     export const LinkedFromDocs = new Key("LinkedFromDocs");
@@ -46,4 +45,5 @@ export namespace KeyStore {
     export const Archives = new Key("Archives");
     export const Updated = new Key("Updated");
     export const Workspaces = new Key("Workspaces");
+    export const NorthstarSchema = new Key("NorthstarSchema");
 }
diff --git a/src/server/Message.ts b/src/server/Message.ts
index a2d1ab829..05ae0f19a 100644
--- a/src/server/Message.ts
+++ b/src/server/Message.ts
@@ -45,7 +45,7 @@ export class GetFieldArgs {
 }
 
 export enum Types {
-    Number, List, Key, Image, Web, Document, Text, RichText, DocumentReference, Html, Video, Audio, Ink, PDF, Tuple
+    Number, List, Key, Image, Web, Document, Text, RichText, DocumentReference, Html, Video, Audio, Ink, PDF, Tuple, HistogramOp
 }
 
 export class DocumentTransfer implements Transferable {
diff --git a/src/server/ServerUtil.ts b/src/server/ServerUtil.ts
index f10f82deb..f958df04b 100644
--- a/src/server/ServerUtil.ts
+++ b/src/server/ServerUtil.ts
@@ -17,6 +17,7 @@ import { VideoField } from '../fields/VideoField';
 import { InkField } from '../fields/InkField';
 import { PDFField } from '../fields/PDFField';
 import { TupleField } from '../fields/TupleField';
+import { HistogramField } from '../fields/HistogramField';
 
 
 
@@ -50,6 +51,8 @@ export class ServerUtils {
                 return new Key(data, id, false)
             case Types.Image:
                 return new ImageField(new URL(data), id, false)
+            case Types.HistogramOp:
+                return HistogramField.FromJson(id, data);
             case Types.PDF:
                 return new PDFField(new URL(data), id, false)
             case Types.List:
diff --git a/src/server/authentication/models/current_user_utils.ts b/src/server/authentication/models/current_user_utils.ts
index 055e4cc97..4b42e40b6 100644
--- a/src/server/authentication/models/current_user_utils.ts
+++ b/src/server/authentication/models/current_user_utils.ts
@@ -8,6 +8,7 @@ import { KeyStore } from "../../../fields/KeyStore";
 import { ListField } from "../../../fields/ListField";
 import { Documents } from "../../../client/documents/Documents";
 import { Schema, Attribute, AttributeGroup } from "../../../client/northstar/model/idea/idea";
+import { observable, computed, action } from "mobx";
 
 export class CurrentUserUtils {
     private static curr_email: string;
@@ -16,6 +17,7 @@ export class CurrentUserUtils {
     //TODO tfs: these should be temporary...
     private static mainDocId: string | undefined;
     private static activeSchema: Schema | undefined;
+    @observable public static ActiveSchemaName: string = "";
 
     public static get email(): string {
         return this.curr_email;
@@ -37,6 +39,7 @@ export class CurrentUserUtils {
         this.mainDocId = id;
     }
 
+
     public static get ActiveSchema(): Schema | undefined {
         return this.activeSchema;
     }
-- 
cgit v1.2.3-70-g09d2


From 4704f088af92a8c04a148861c547afa54a276761 Mon Sep 17 00:00:00 2001
From: Bob Zeleznik <zzzman@gmail.com>
Date: Wed, 27 Mar 2019 19:33:56 -0400
Subject: fixed linking to work with delegates.   fixed full screen option and
 tab dragging bugs.

---
 src/client/util/DocumentManager.ts                 |  8 +++++++-
 .../views/collections/CollectionDockingView.tsx    | 22 ++++++++++++----------
 .../views/collections/CollectionViewBase.tsx       |  2 +-
 src/client/views/collections/PreviewCursor.tsx     |  2 +-
 src/client/views/nodes/DocumentView.tsx            | 21 +++++++++++++--------
 src/client/views/nodes/LinkBox.tsx                 |  2 +-
 src/fields/Document.ts                             | 14 ++++++++++++--
 7 files changed, 47 insertions(+), 24 deletions(-)

(limited to 'src/fields')

diff --git a/src/client/util/DocumentManager.ts b/src/client/util/DocumentManager.ts
index 5b99b4ef8..03df11ad7 100644
--- a/src/client/util/DocumentManager.ts
+++ b/src/client/util/DocumentManager.ts
@@ -3,6 +3,8 @@ import { observer } from 'mobx-react';
 import { observable, action } from 'mobx';
 import { Document } from "../../fields/Document"
 import { DocumentView } from '../views/nodes/DocumentView';
+import { KeyStore } from '../../fields/KeyStore';
+import { FieldWaiting } from '../../fields/Field';
 
 
 export class DocumentManager {
@@ -39,11 +41,15 @@ export class DocumentManager {
             //     }
             // }
 
+
             if (Object.is(doc, toFind)) {
                 toReturn = view;
                 return;
             }
-
+            let docSrc = doc.GetT(KeyStore.Prototype, Document);
+            if (docSrc && docSrc != FieldWaiting && Object.is(docSrc, toFind)) {
+                toReturn = view;
+            }
         })
 
         return (toReturn);
diff --git a/src/client/views/collections/CollectionDockingView.tsx b/src/client/views/collections/CollectionDockingView.tsx
index d4f510f5d..b77af8cd6 100644
--- a/src/client/views/collections/CollectionDockingView.tsx
+++ b/src/client/views/collections/CollectionDockingView.tsx
@@ -196,15 +196,16 @@ export class CollectionDockingView extends React.Component<SubCollectionViewProp
             e.preventDefault();
             let docid = (e.target as any).DashDocId;
             let tab = (e.target as any).parentElement as HTMLElement;
-            Server.GetField(docid, action((f: Opt<Field>) =>
-                DragManager.StartDocumentDrag(tab, new DragManager.DocumentDragData(f as Document),
-                    {
-                        handlers: {
-                            dragComplete: action(() => { }),
-                        },
-                        hideSource: false
-                    }))
-            );
+            Server.GetField(docid, action((f: Opt<Field>) => {
+                if (f instanceof Document)
+                    DragManager.StartDocumentDrag(tab, new DragManager.DocumentDragData(f as Document),
+                        {
+                            handlers: {
+                                dragComplete: action(() => { }),
+                            },
+                            hideSource: false
+                        })
+            }));
         }
         if (className == "lm_drag_handle" || className == "lm_close" || className == "lm_maximise" || className == "lm_minimise" || className == "lm_close_tab") {
             this._flush = true;
@@ -224,7 +225,8 @@ export class CollectionDockingView extends React.Component<SubCollectionViewProp
         this.stateChanged();
     }
     tabCreated = (tab: any) => {
-        tab.titleElement[0].DashDocId = tab.contentItem.config.props.documentId;
+        if (tab.hasOwnProperty("contentItem") && tab.contentItem.config.type != "stack")
+            tab.titleElement[0].DashDocId = tab.contentItem.config.props.documentId;
         tab.closeElement.off('click') //unbind the current click handler
             .click(function () {
                 tab.contentItem.remove();
diff --git a/src/client/views/collections/CollectionViewBase.tsx b/src/client/views/collections/CollectionViewBase.tsx
index adaf810ea..48adce4d8 100644
--- a/src/client/views/collections/CollectionViewBase.tsx
+++ b/src/client/views/collections/CollectionViewBase.tsx
@@ -133,7 +133,7 @@ export class CollectionViewBase extends React.Component<SubCollectionViewProps>
                 return undefined;
             }
             ctor = Documents.WebDocument;
-            options = { height: options.width, ...options, };
+            options = { height: options.width, ...options, title: path };
         }
         return ctor ? ctor(path, options) : undefined;
     }
diff --git a/src/client/views/collections/PreviewCursor.tsx b/src/client/views/collections/PreviewCursor.tsx
index 5d621f321..8ae59a83a 100644
--- a/src/client/views/collections/PreviewCursor.tsx
+++ b/src/client/views/collections/PreviewCursor.tsx
@@ -59,7 +59,7 @@ export class PreviewCursor extends React.Component<PreviewCursorProps>  {
         if (!e.ctrlKey && !e.altKey && !e.defaultPrevented && !(e as any).DASHFormattedTextBoxHandled) {
             //make textbox and add it to this collection
             let [x, y] = this.props.getTransform().transformPoint(this._lastX, this._lastY);
-            let newBox = Documents.TextDocument({ width: 200, height: 100, x: x, y: y, title: "new" });
+            let newBox = Documents.TextDocument({ width: 200, height: 100, x: x, y: y, title: "typed text" });
             this.props.addLiveTextDocument(newBox);
             e.stopPropagation();
         }
diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index 3873a6f89..c31e8b8c4 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -243,15 +243,20 @@ export class DocumentView extends React.Component<DocumentViewProps> {
             }
             let linkDoc: Document = new Document();
 
-            linkDoc.Set(KeyStore.Title, new TextField("New Link"));
-            linkDoc.Set(KeyStore.LinkDescription, new TextField(""));
-            linkDoc.Set(KeyStore.LinkTags, new TextField("Default"));
-
-            sourceDoc.GetOrCreateAsync(KeyStore.LinkedToDocs, ListField, field => { (field as ListField<Document>).Data.push(linkDoc) });
-            linkDoc.Set(KeyStore.LinkedToDocs, destDoc);
-            destDoc.GetOrCreateAsync(KeyStore.LinkedFromDocs, ListField, field => { (field as ListField<Document>).Data.push(linkDoc) });
-            linkDoc.Set(KeyStore.LinkedFromDocs, sourceDoc);
+            destDoc.GetTAsync(KeyStore.Prototype, Document).then((protoDest) =>
+                sourceDoc.GetTAsync(KeyStore.Prototype, Document).then((protoSrc) => runInAction(() => {
+                    let dstTarg = (protoDest ? protoDest : destDoc);
+                    let srcTarg = (protoSrc ? protoSrc : sourceDoc);
+                    linkDoc.Set(KeyStore.Title, new TextField("New Link"));
+                    linkDoc.Set(KeyStore.LinkDescription, new TextField(""));
+                    linkDoc.Set(KeyStore.LinkTags, new TextField("Default"));
 
+                    linkDoc.Set(KeyStore.LinkedToDocs, dstTarg);
+                    linkDoc.Set(KeyStore.LinkedFromDocs, srcTarg);
+                    dstTarg.GetOrCreateAsync(KeyStore.LinkedFromDocs, ListField, field => { (field as ListField<Document>).Data.push(linkDoc) })
+                    srcTarg.GetOrCreateAsync(KeyStore.LinkedToDocs, ListField, field => { (field as ListField<Document>).Data.push(linkDoc) })
+                }))
+            )
             e.stopPropagation();
         }
     }
diff --git a/src/client/views/nodes/LinkBox.tsx b/src/client/views/nodes/LinkBox.tsx
index 638d3b5a7..457fecee3 100644
--- a/src/client/views/nodes/LinkBox.tsx
+++ b/src/client/views/nodes/LinkBox.tsx
@@ -41,7 +41,7 @@ export class LinkBox extends React.Component<Props> {
         e.stopPropagation();
         let docView = DocumentManager.Instance.getDocumentView(this.props.pairedDoc);
         if (docView) {
-            docView.props.focus(this.props.pairedDoc);
+            docView.props.focus(docView.props.Document);
         } else {
             this.props.pairedDoc.GetAsync(KeyStore.AnnotationOn, (contextDoc: any) => {
                 if (!contextDoc) {
diff --git a/src/fields/Document.ts b/src/fields/Document.ts
index cd393d676..e9192f267 100644
--- a/src/fields/Document.ts
+++ b/src/fields/Document.ts
@@ -35,8 +35,18 @@ export class Document extends Field {
     public Scale = () => { return this.GetNumber(KeyStore.Scale, 1) }
 
     @computed
-    public get Title() {
-        return this.GetText(KeyStore.Title, "-untitled-");
+    public get Title(): string {
+        let title = this.Get(KeyStore.Title, true);
+        if (title)
+            if (title != FieldWaiting && title instanceof TextField)
+                return title.Data;
+            else return "<waiting>";
+        let parTitle = this.GetT(KeyStore.Title, TextField);
+        if (parTitle)
+            if (parTitle != FieldWaiting)
+                return parTitle.Data + ".alias";
+            else return "<waiting>.alias";
+        return "-untitled-";
     }
 
     @computed
-- 
cgit v1.2.3-70-g09d2


From 5e53c5953d8550dcf4aa6ad87cd0f68fd835bd14 Mon Sep 17 00:00:00 2001
From: Bob Zeleznik <zzzman@gmail.com>
Date: Wed, 27 Mar 2019 19:52:49 -0400
Subject: fixed tab titles of docking view

---
 src/client/views/collections/CollectionDockingView.tsx | 16 +++++++++++++++-
 src/fields/Document.ts                                 |  4 ++--
 2 files changed, 17 insertions(+), 3 deletions(-)

(limited to 'src/fields')

diff --git a/src/client/views/collections/CollectionDockingView.tsx b/src/client/views/collections/CollectionDockingView.tsx
index b77af8cd6..f123149dd 100644
--- a/src/client/views/collections/CollectionDockingView.tsx
+++ b/src/client/views/collections/CollectionDockingView.tsx
@@ -18,6 +18,7 @@ import React = require("react");
 import { SubCollectionViewProps } from "./CollectionViewBase";
 import { ServerUtils } from "../../../server/ServerUtil";
 import { DragManager } from "../../util/DragManager";
+import { TextField } from "../../../fields/TextField";
 
 @observer
 export class CollectionDockingView extends React.Component<SubCollectionViewProps> {
@@ -225,8 +226,21 @@ export class CollectionDockingView extends React.Component<SubCollectionViewProp
         this.stateChanged();
     }
     tabCreated = (tab: any) => {
-        if (tab.hasOwnProperty("contentItem") && tab.contentItem.config.type != "stack")
+        if (tab.hasOwnProperty("contentItem") && tab.contentItem.config.type != "stack") {
+            if (tab.titleElement[0].textContent.indexOf("-waiting") != -1) {
+                Server.GetField(tab.contentItem.config.props.documentId, action((f: Opt<Field>) => {
+                    if (f != undefined && f instanceof Document) {
+                        f.GetTAsync(KeyStore.Title, TextField, (tfield) => {
+                            if (tfield != undefined) {
+                                tab.titleElement[0].textContent = f.Title;
+                            }
+                        })
+                    }
+                }));
+                tab.titleElement[0].DashDocId = tab.contentItem.config.props.documentId;
+            }
             tab.titleElement[0].DashDocId = tab.contentItem.config.props.documentId;
+        }
         tab.closeElement.off('click') //unbind the current click handler
             .click(function () {
                 tab.contentItem.remove();
diff --git a/src/fields/Document.ts b/src/fields/Document.ts
index e9192f267..85ff6ddcb 100644
--- a/src/fields/Document.ts
+++ b/src/fields/Document.ts
@@ -40,12 +40,12 @@ export class Document extends Field {
         if (title)
             if (title != FieldWaiting && title instanceof TextField)
                 return title.Data;
-            else return "<waiting>";
+            else return "-waiting-";
         let parTitle = this.GetT(KeyStore.Title, TextField);
         if (parTitle)
             if (parTitle != FieldWaiting)
                 return parTitle.Data + ".alias";
-            else return "<waiting>.alias";
+            else return "-waiting-.alias";
         return "-untitled-";
     }
 
-- 
cgit v1.2.3-70-g09d2


From 510c26bb46cb8b70cc3fad756396f39a8b7fd687 Mon Sep 17 00:00:00 2001
From: Bob Zeleznik <zzzman@gmail.com>
Date: Wed, 27 Mar 2019 20:14:37 -0400
Subject: addressed contextmenu issues (partially off screen and duplicate
 entries) and got rid of KeyStore.ActiveFrame

---
 src/client/views/ContextMenu.tsx | 9 +++------
 src/client/views/Main.tsx        | 8 +++-----
 src/fields/KeyStore.ts           | 1 -
 3 files changed, 6 insertions(+), 12 deletions(-)

(limited to 'src/fields')

diff --git a/src/client/views/ContextMenu.tsx b/src/client/views/ContextMenu.tsx
index 9109b56bb..cfa8ea7b7 100644
--- a/src/client/views/ContextMenu.tsx
+++ b/src/client/views/ContextMenu.tsx
@@ -49,7 +49,7 @@ export class ContextMenu extends React.Component {
         //maxX and maxY will change if the UI/font size changes, but will work for any amount
         //of items added to the menu
         let maxX = window.innerWidth - 150;
-        let maxY = window.innerHeight - (this._items.length * 34 + 30);
+        let maxY = window.innerHeight - ((this._items.length + 1/*for search box*/) * 34 + 30);
 
         this._pageX = x > maxX ? maxX : x;
         this._pageY = y > maxY ? maxY : y;
@@ -83,11 +83,8 @@ export class ContextMenu extends React.Component {
         return (
             <div className="contextMenu-cont" style={style} ref={this.ref}>
                 <input className="contextMenu-item" type="text" placeholder="Search . . ." value={this._searchString} onChange={this.onChange}></input>
-                {this._items.filter(prop => {
-                    return prop.description.toLowerCase().indexOf(this._searchString.toLowerCase()) !== -1;
-                }).map(prop => {
-                    return <ContextMenuItem {...prop} key={prop.description} />
-                })}
+                {this._items.filter(prop => prop.description.toLowerCase().indexOf(this._searchString.toLowerCase()) !== -1).
+                    map(prop => <ContextMenuItem {...prop} key={prop.description} />)}
             </div>
         )
     }
diff --git a/src/client/views/Main.tsx b/src/client/views/Main.tsx
index 87d8eb648..09778ac77 100644
--- a/src/client/views/Main.tsx
+++ b/src/client/views/Main.tsx
@@ -147,6 +147,7 @@ export class Main extends React.Component {
         if (!CurrentUserUtils.MainDocId) {
             this.userDocument.GetTAsync(KeyStore.ActiveWorkspace, Document).then(doc => {
                 if (doc) {
+                    CurrentUserUtils.MainDocId = doc.Id;
                     this.openWorkspace(doc);
                 } else {
                     this.createNewWorkspace();
@@ -171,9 +172,9 @@ export class Main extends React.Component {
                 var dockingLayout = { content: [{ type: 'row', content: [CollectionDockingView.makeDocumentConfig(freeformDoc)] }] };
                 let mainDoc = Documents.DockDocument(JSON.stringify(dockingLayout), { title: `Main Container ${list.Data.length + 1}` }, id);
                 list.Data.push(mainDoc);
+                CurrentUserUtils.MainDocId = mainDoc.Id;
                 // bcz: strangely, we need a timeout to prevent exceptions/issues initializing GoldenLayout (the rendering engine for Main Container)
                 setTimeout(() => {
-                    mainDoc.Set(KeyStore.ActiveFrame, freeformDoc);
                     this.openWorkspace(mainDoc);
                     let pendingDocument = Documents.SchemaDocument([], { title: "New Mobile Uploads" })
                     mainDoc.Set(KeyStore.OptionalRightCollection, pendingDocument);
@@ -186,7 +187,6 @@ export class Main extends React.Component {
     openWorkspace = (doc: Document, fromHistory = false): void => {
         this.mainContainer = doc;
         fromHistory || window.history.pushState(null, doc.Title, "/doc/" + doc.Id);
-        this.mainContainer.GetTAsync(KeyStore.ActiveFrame, Document, field => this.mainfreeform = field);
         this.userDocument.GetTAsync(KeyStore.OptionalRightCollection, Document).then(col => {
             // if there is a pending doc, and it has new data, show it (syip: we use a timeout to prevent collection docking view from being uninitialized)
             setTimeout(() => {
@@ -264,8 +264,6 @@ export class Main extends React.Component {
             [React.createRef<HTMLDivElement>(), "table", "Add Schema", addSchemaNode],
         ]
 
-        let addClick = (creator: () => Document) => action(() => this.mainfreeform!.GetList<Document>(KeyStore.Data, []).push(creator()));
-
         return < div id="add-nodes-menu" >
             <input type="checkbox" id="add-menu-toggle" />
             <label htmlFor="add-menu-toggle" title="Add Node"><p>+</p></label>
@@ -274,7 +272,7 @@ export class Main extends React.Component {
                 <ul id="add-options-list">
                     {btns.map(btn =>
                         <li key={btn[1]} ><div ref={btn[0]}>
-                            <button className="round-button add-button" title={btn[2]} onPointerDown={setupDrag(btn[0], btn[3])} onClick={addClick(btn[3])}>
+                            <button className="round-button add-button" title={btn[2]} onPointerDown={setupDrag(btn[0], btn[3])}>
                                 <FontAwesomeIcon icon={btn[1]} size="sm" />
                             </button>
                         </div></li>)}
diff --git a/src/fields/KeyStore.ts b/src/fields/KeyStore.ts
index 20e8cd930..09dddf962 100644
--- a/src/fields/KeyStore.ts
+++ b/src/fields/KeyStore.ts
@@ -27,7 +27,6 @@ export namespace KeyStore {
     export const ColumnsKey = new Key("SchemaColumns");
     export const SchemaSplitPercentage = new Key("SchemaSplitPercentage");
     export const Caption = new Key("Caption");
-    export const ActiveFrame = new Key("ActiveFrame");
     export const ActiveWorkspace = new Key("ActiveWorkspace");
     export const DocumentText = new Key("DocumentText");
     export const LinkedToDocs = new Key("LinkedToDocs");
-- 
cgit v1.2.3-70-g09d2


From 1bd678851632bbbb302363574eb5e3e19dc343e9 Mon Sep 17 00:00:00 2001
From: bob <bcz@cs.brown.edu>
Date: Fri, 29 Mar 2019 13:18:35 -0400
Subject: reorganized and mostly working northstar histograms.

---
 src/client/documents/Documents.ts                  |  13 +-
 src/client/northstar/core/filter/FilterModel.ts    |   2 +-
 src/client/northstar/dash-fields/HistogramField.ts |  64 ++++
 src/client/northstar/dash-nodes/HistogramBox.scss  |  34 ++
 src/client/northstar/dash-nodes/HistogramBox.tsx   | 161 ++++++++++
 .../dash-nodes/HistogramBoxPrimitives.scss         |  26 ++
 .../dash-nodes/HistogramBoxPrimitives.tsx          | 341 +++++++++++++++++++++
 .../dash-nodes/HistogramLabelPrimitives.scss       |  13 +
 .../dash-nodes/HistogramLabelPrimitives.tsx        |  78 +++++
 src/client/northstar/model/ModelHelpers.ts         |  18 +-
 .../model/binRanges/VisualBinRangeHelper.ts        |   6 +-
 src/client/northstar/operations/BaseOperation.ts   |   4 +-
 .../northstar/operations/HistogramOperation.ts     |  13 +-
 src/client/northstar/utils/SizeConverter.ts        |   6 +-
 src/client/views/Main.tsx                          |  39 +--
 src/client/views/nodes/DocumentContentsView.tsx    |   5 +-
 src/client/views/nodes/DocumentView.tsx            |   3 -
 src/client/views/nodes/HistogramBox.scss           |  22 --
 src/client/views/nodes/HistogramBox.tsx            | 105 -------
 src/client/views/nodes/HistogramBoxPrimitives.scss |  25 --
 src/client/views/nodes/HistogramBoxPrimitives.tsx  | 336 --------------------
 .../views/nodes/HistogramLabelPrimitives.scss      |  12 -
 .../views/nodes/HistogramLabelPrimitives.tsx       |  78 -----
 src/fields/HistogramField.ts                       |  59 ----
 src/fields/KeyStore.ts                             |   1 -
 src/server/ServerUtil.ts                           |   3 +-
 .../authentication/models/current_user_utils.ts    |  27 +-
 27 files changed, 789 insertions(+), 705 deletions(-)
 create mode 100644 src/client/northstar/dash-fields/HistogramField.ts
 create mode 100644 src/client/northstar/dash-nodes/HistogramBox.scss
 create mode 100644 src/client/northstar/dash-nodes/HistogramBox.tsx
 create mode 100644 src/client/northstar/dash-nodes/HistogramBoxPrimitives.scss
 create mode 100644 src/client/northstar/dash-nodes/HistogramBoxPrimitives.tsx
 create mode 100644 src/client/northstar/dash-nodes/HistogramLabelPrimitives.scss
 create mode 100644 src/client/northstar/dash-nodes/HistogramLabelPrimitives.tsx
 delete mode 100644 src/client/views/nodes/HistogramBox.scss
 delete mode 100644 src/client/views/nodes/HistogramBox.tsx
 delete mode 100644 src/client/views/nodes/HistogramBoxPrimitives.scss
 delete mode 100644 src/client/views/nodes/HistogramBoxPrimitives.tsx
 delete mode 100644 src/client/views/nodes/HistogramLabelPrimitives.scss
 delete mode 100644 src/client/views/nodes/HistogramLabelPrimitives.tsx
 delete mode 100644 src/fields/HistogramField.ts

(limited to 'src/fields')

diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts
index 837dfe815..663ccae61 100644
--- a/src/client/documents/Documents.ts
+++ b/src/client/documents/Documents.ts
@@ -1,6 +1,6 @@
 import { AudioField } from "../../fields/AudioField";
 import { Document } from "../../fields/Document";
-import { Field, FieldWaiting } from "../../fields/Field";
+import { Field } from "../../fields/Field";
 import { HtmlField } from "../../fields/HtmlField";
 import { ImageField } from "../../fields/ImageField";
 import { InkField, StrokeData } from "../../fields/InkField";
@@ -11,6 +11,9 @@ import { PDFField } from "../../fields/PDFField";
 import { TextField } from "../../fields/TextField";
 import { VideoField } from "../../fields/VideoField";
 import { WebField } from "../../fields/WebField";
+import { HistogramField } from "../northstar/dash-fields/HistogramField";
+import { HistogramBox } from "../northstar/dash-nodes/HistogramBox";
+import { HistogramOperation } from "../northstar/operations/HistogramOperation";
 import { Server } from "../Server";
 import { CollectionPDFView } from "../views/collections/CollectionPDFView";
 import { CollectionVideoView } from "../views/collections/CollectionVideoView";
@@ -22,10 +25,6 @@ import { KeyValueBox } from "../views/nodes/KeyValueBox";
 import { PDFBox } from "../views/nodes/PDFBox";
 import { VideoBox } from "../views/nodes/VideoBox";
 import { WebBox } from "../views/nodes/WebBox";
-import { HistogramBox } from "../views/nodes/HistogramBox";
-import { FieldView } from "../views/nodes/FieldView";
-import { HistogramField } from "../../fields/HistogramField";
-import { HistogramOperation } from "../northstar/operations/HistogramOperation";
 
 export interface DocumentOptions {
     x?: number;
@@ -44,7 +43,6 @@ export interface DocumentOptions {
     layoutKeys?: Key[];
     viewType?: number;
     backgroundColor?: string;
-    northstarSchema?: string;
 }
 
 export namespace Documents {
@@ -88,7 +86,6 @@ export namespace Documents {
         if (options.ink !== undefined) { doc.Set(KeyStore.Ink, new InkField(options.ink)); }
         if (options.layout !== undefined) { doc.SetText(KeyStore.Layout, options.layout); }
         if (options.layoutKeys !== undefined) { doc.Set(KeyStore.LayoutKeys, new ListField(options.layoutKeys)); }
-        if (options.northstarSchema !== undefined) { doc.SetText(KeyStore.NorthstarSchema, options.northstarSchema); }
         return doc;
     }
 
@@ -126,7 +123,7 @@ export namespace Documents {
     function GetHistogramPrototype(): Document {
         if (!histoProto) {
             histoProto = setupPrototypeOptions(histoProtoId, "HISTO PROTO", CollectionView.LayoutString("AnnotationsKey"),
-                { x: 0, y: 0, width: 300, height: 300, layoutKeys: [KeyStore.Data, KeyStore.Annotations, KeyStore.Caption] });
+                { x: 0, y: 0, width: 300, height: 300, backgroundColor: "black", layoutKeys: [KeyStore.Data, KeyStore.Annotations, KeyStore.Caption] });
             histoProto.SetText(KeyStore.BackgroundLayout, HistogramBox.LayoutString());
         }
         return histoProto;
diff --git a/src/client/northstar/core/filter/FilterModel.ts b/src/client/northstar/core/filter/FilterModel.ts
index bc7938947..aee99d2b6 100644
--- a/src/client/northstar/core/filter/FilterModel.ts
+++ b/src/client/northstar/core/filter/FilterModel.ts
@@ -2,10 +2,10 @@ import { ValueComparison } from "./ValueComparision";
 import { Utils } from "../../utils/Utils";
 import { IBaseFilterProvider } from "./IBaseFilterProvider";
 import { FilterOperand } from "./FilterOperand";
-import { HistogramField } from "../../../../fields/HistogramField";
 import { KeyStore } from "../../../../fields/KeyStore";
 import { FieldWaiting } from "../../../../fields/Field";
 import { Document } from "../../../../fields/Document";
+import { HistogramField } from "../../dash-fields/HistogramField";
 
 export class FilterModel {
     public ValueComparisons: ValueComparison[];
diff --git a/src/client/northstar/dash-fields/HistogramField.ts b/src/client/northstar/dash-fields/HistogramField.ts
new file mode 100644
index 000000000..00912c595
--- /dev/null
+++ b/src/client/northstar/dash-fields/HistogramField.ts
@@ -0,0 +1,64 @@
+import { BasicField } from "../../../fields/BasicField";
+import { Field, FieldId } from "../../../fields/Field";
+import { Types } from "../../../server/Message";
+import { HistogramOperation } from "../../../client/northstar/operations/HistogramOperation";
+import { action } from "mobx";
+import { AttributeTransformationModel } from "../../../client/northstar/core/attribute/AttributeTransformationModel";
+import { ColumnAttributeModel } from "../../../client/northstar/core/attribute/AttributeModel";
+import { CurrentUserUtils } from "../../../server/authentication/models/current_user_utils";
+import { ArrayUtil } from "../utils/ArrayUtil";
+import { Schema } from "../model/idea/idea";
+
+
+export class HistogramField extends BasicField<HistogramOperation> {
+    constructor(data?: HistogramOperation, id?: FieldId, save: boolean = true) {
+        super(data ? data : HistogramOperation.Empty, save, id);
+    }
+
+    toString(): string {
+        return JSON.stringify(this.Data);
+    }
+
+    Copy(): Field {
+        return new HistogramField(this.Data);
+    }
+
+    ToScriptString(): string {
+        return `new HistogramField("${this.Data}")`;
+    }
+
+    ToJson(): { type: Types, data: string, _id: string } {
+        return {
+            type: Types.HistogramOp,
+            data: JSON.stringify(this.Data),
+            _id: this.Id
+        }
+    }
+
+    @action
+    static FromJson(id: string, data: any): HistogramField {
+        let jp = JSON.parse(data);
+        let X: AttributeTransformationModel | undefined;
+        let Y: AttributeTransformationModel | undefined;
+        let V: AttributeTransformationModel | undefined;
+
+        let schema = CurrentUserUtils.GetNorthstarSchema(jp.SchemaName);
+        if (schema) {
+            CurrentUserUtils.GetAllNorthstarColumnAttributes(schema).map(attr => {
+                if (attr.displayName == jp.X.AttributeModel.Attribute.DisplayName) {
+                    X = new AttributeTransformationModel(new ColumnAttributeModel(attr), jp.X.AggregateFunction);
+                }
+                if (attr.displayName == jp.Y.AttributeModel.Attribute.DisplayName) {
+                    Y = new AttributeTransformationModel(new ColumnAttributeModel(attr), jp.Y.AggregateFunction);
+                }
+                if (attr.displayName == jp.V.AttributeModel.Attribute.DisplayName) {
+                    V = new AttributeTransformationModel(new ColumnAttributeModel(attr), jp.V.AggregateFunction);
+                }
+            });
+            if (X && Y && V) {
+                return new HistogramField(new HistogramOperation(jp.SchemaName, X, Y, V, jp.Normalization), id, false);
+            }
+        }
+        return new HistogramField(HistogramOperation.Empty, id, false);
+    }
+}
\ No newline at end of file
diff --git a/src/client/northstar/dash-nodes/HistogramBox.scss b/src/client/northstar/dash-nodes/HistogramBox.scss
new file mode 100644
index 000000000..b11840a65
--- /dev/null
+++ b/src/client/northstar/dash-nodes/HistogramBox.scss
@@ -0,0 +1,34 @@
+.histogrambox-container {
+    padding: 0vw;
+    position: absolute;
+    text-align: center;
+    width: 100%;
+    height: 100%;
+    background: black;
+  }
+  .histogrambox-xaxislabel {
+    position:absolute;
+    width:100%;
+    text-align: center;
+    bottom:0;
+    background: lightgray;
+    font-size: 14;
+    font-weight: bold;
+  }
+  .histogrambox-yaxislabel {
+    position:absolute;
+    height:100%;
+    width: 25px;
+    bottom:0;
+    background: lightgray;
+  }
+  .histogrambox-yaxislabel-text {
+    position:absolute;
+    transform-origin: left;
+    transform: rotate(-90deg);
+    text-align: center;
+    font-size: 14;
+    font-weight: bold;
+    bottom: calc(50% - 25px);
+  }
+  
\ No newline at end of file
diff --git a/src/client/northstar/dash-nodes/HistogramBox.tsx b/src/client/northstar/dash-nodes/HistogramBox.tsx
new file mode 100644
index 000000000..9f8c2cfd0
--- /dev/null
+++ b/src/client/northstar/dash-nodes/HistogramBox.tsx
@@ -0,0 +1,161 @@
+import React = require("react")
+import { action, computed, observable, reaction, runInAction } from "mobx";
+import { observer } from "mobx-react";
+import Measure from "react-measure";
+import { Dictionary } from "typescript-collections";
+import { FieldWaiting, Opt } from "../../../fields/Field";
+import { KeyStore } from "../../../fields/KeyStore";
+import { CurrentUserUtils } from "../../../server/authentication/models/current_user_utils";
+import { FilterModel } from '../../northstar/core/filter/FilterModel';
+import { ChartType, VisualBinRange } from '../../northstar/model/binRanges/VisualBinRange';
+import { VisualBinRangeHelper } from "../../northstar/model/binRanges/VisualBinRangeHelper";
+import { AggregateBinRange, BinRange, DoubleValueAggregateResult, HistogramResult, Catalog } from "../../northstar/model/idea/idea";
+import { ModelHelpers } from "../../northstar/model/ModelHelpers";
+import { HistogramOperation } from "../../northstar/operations/HistogramOperation";
+import { PIXIRectangle } from "../../northstar/utils/MathUtil";
+import { SizeConverter } from "../../northstar/utils/SizeConverter";
+import { DragManager } from "../../util/DragManager";
+import { FieldView, FieldViewProps } from "../../views/nodes/FieldView";
+import { HistogramField } from "../dash-fields/HistogramField";
+import "../utils/Extensions"
+import "./HistogramBox.scss";
+import { HistogramBoxPrimitives } from './HistogramBoxPrimitives';
+import { HistogramLabelPrimitives } from "./HistogramLabelPrimitives";
+
+export interface HistogramPrimitivesProps {
+    HistoBox: HistogramBox;
+}
+
+@observer
+export class HistogramBox extends React.Component<FieldViewProps> {
+    public static LayoutString(fieldStr: string = "DataKey") { return FieldView.LayoutString(HistogramBox, fieldStr) }
+    private _dropXRef = React.createRef<HTMLDivElement>();
+    private _dropYRef = React.createRef<HTMLDivElement>();
+    private _dropXDisposer?: DragManager.DragDropDisposer;
+    private _dropYDisposer?: DragManager.DragDropDisposer;
+
+    @observable public PanelWidth: number = 100;
+    @observable public PanelHeight: number = 100;
+    @observable public HistoOp: HistogramOperation = HistogramOperation.Empty;
+    @observable public VisualBinRanges: VisualBinRange[] = [];
+    @observable public ValueRange: number[] = [];
+    @observable public SizeConverter: SizeConverter = new SizeConverter();
+
+    @computed get createOperationParamsCache() { return this.HistoOp.CreateOperationParameters(); }
+    @computed get HistogramResult() { return this.HistoOp ? this.HistoOp.Result as HistogramResult : undefined; }
+    @computed get BinRanges() { return this.HistogramResult ? this.HistogramResult.binRanges : undefined; }
+    @computed get ChartType() {
+        return !this.BinRanges ? ChartType.SinglePoint : this.BinRanges[0] instanceof AggregateBinRange ?
+            (this.BinRanges[1] instanceof AggregateBinRange ? ChartType.SinglePoint : ChartType.HorizontalBar) :
+            this.BinRanges[1] instanceof AggregateBinRange ? ChartType.VerticalBar : ChartType.HeatMap;
+    }
+
+    constructor(props: FieldViewProps) {
+        super(props);
+    }
+
+    @action
+    dropX = (e: Event, de: DragManager.DropEvent) => {
+        if (de.data instanceof DragManager.DocumentDragData) {
+            let h = de.data.draggedDocument.GetT(KeyStore.Data, HistogramField);
+            if (h && h != FieldWaiting) {
+                this.HistoOp.X = h.Data.X;
+            }
+            e.stopPropagation();
+            e.preventDefault();
+        }
+    }
+    @action
+    dropY = (e: Event, de: DragManager.DropEvent) => {
+        if (de.data instanceof DragManager.DocumentDragData) {
+            let h = de.data.draggedDocument.GetT(KeyStore.Data, HistogramField);
+            if (h && h != FieldWaiting) {
+                this.HistoOp.Y = h.Data.X;
+            }
+            e.stopPropagation();
+            e.preventDefault();
+        }
+    }
+
+    componentDidMount() {
+        if (this._dropXRef.current) {
+            this._dropXDisposer = DragManager.MakeDropTarget(this._dropXRef.current, { handlers: { drop: this.dropX.bind(this) } });
+        }
+        if (this._dropYRef.current) {
+            this._dropYDisposer = DragManager.MakeDropTarget(this._dropYRef.current, { handlers: { drop: this.dropY.bind(this) } });
+        }
+        reaction(() => CurrentUserUtils.NorthstarDBCatalog, (catalog?: Catalog) => this.activateHistogramOperation(catalog), { fireImmediately: true });
+        reaction(() => [this.VisualBinRanges && this.VisualBinRanges.slice()], () => this.SizeConverter.SetVisualBinRanges(this.VisualBinRanges));
+        reaction(() => [this.PanelHeight, this.PanelWidth], () => this.SizeConverter.SetIsSmall(this.PanelWidth < 40 && this.PanelHeight < 40))
+        reaction(() => this.HistogramResult ? this.HistogramResult.binRanges : undefined,
+            (binRanges: BinRange[] | undefined) => {
+                if (binRanges) {
+                    this.VisualBinRanges.splice(0, this.VisualBinRanges.length, ...binRanges.map((br, ind) =>
+                        VisualBinRangeHelper.GetVisualBinRange(this.HistoOp.Schema!.distinctAttributeParameters, br, this.HistogramResult!, ind ? this.HistoOp.Y : this.HistoOp.X, this.ChartType)));
+
+                    let valueAggregateKey = ModelHelpers.CreateAggregateKey(this.HistoOp.Schema!.distinctAttributeParameters, this.HistoOp.V, this.HistogramResult!, ModelHelpers.AllBrushIndex(this.HistogramResult!));
+                    this.ValueRange = Object.values(this.HistogramResult!.bins!).reduce((prev, cur) => {
+                        let value = ModelHelpers.GetAggregateResult(cur, valueAggregateKey) as DoubleValueAggregateResult;
+                        return value && value.hasResult ? [Math.min(prev[0], value.result!), Math.max(prev[1], value.result!)] : prev;
+                    }, [Number.MAX_VALUE, Number.MIN_VALUE]);
+                }
+            });
+    }
+
+    @action
+    xLabelPointerDown = (e: React.PointerEvent) => {
+
+    }
+
+    componentWillUnmount() {
+        if (this._dropXDisposer)
+            this._dropXDisposer();
+        if (this._dropYDisposer)
+            this._dropYDisposer();
+    }
+
+    activateHistogramOperation(catalog?: Catalog) {
+        if (catalog) {
+            this.props.doc.GetTAsync(this.props.fieldKey, HistogramField).then((histoOp: Opt<HistogramField>) => runInAction(() => {
+                this.HistoOp = histoOp ? histoOp.Data : HistogramOperation.Empty;
+                if (this.HistoOp != HistogramOperation.Empty) {
+                    reaction(() => this.props.doc.GetList(KeyStore.LinkedFromDocs, []), docs => this.HistoOp.Links.splice(0, this.HistoOp.Links.length, ...docs), { fireImmediately: true });
+                    reaction(() => this.createOperationParamsCache, () => this.HistoOp.Update(), { fireImmediately: true });
+                }
+            }));
+        }
+    }
+    render() {
+        let labelY = this.HistoOp && this.HistoOp.Y ? this.HistoOp.Y.PresentedName : "<...>";
+        let labelX = this.HistoOp && this.HistoOp.X ? this.HistoOp.X.PresentedName : "<...>";
+        var h = this.props.isTopMost ? this.PanelHeight : this.props.doc.GetNumber(KeyStore.Height, 0);
+        var w = this.props.isTopMost ? this.PanelWidth : this.props.doc.GetNumber(KeyStore.Width, 0);
+        let loff = this.SizeConverter.LeftOffset;
+        let toff = this.SizeConverter.TopOffset;
+        let roff = this.SizeConverter.RightOffset;
+        let boff = this.SizeConverter.BottomOffset;
+        return (
+            <Measure onResize={(r: any) => runInAction(() => { this.PanelWidth = r.entry.width; this.PanelHeight = r.entry.height })}>
+                {({ measureRef }) =>
+                    <div className="histogrambox-container" ref={measureRef} style={{ transform: `translate(${-w / 2}px, ${-h / 2}px)` }}>
+                        <div className="histogrambox-yaxislabel" ref={this._dropYRef} >
+                            <span className="histogrambox-yaxislabel-text">
+                                {labelY}
+                            </span>
+                        </div>
+                        <div style={{
+                            transform: `translate(${loff + 25}px, ${toff}px)`,
+                            width: `calc(100% - ${loff + roff + 25}px)`,
+                            height: `calc(100% - ${toff + boff}px)`,
+                        }}>
+                            <HistogramLabelPrimitives HistoBox={this} />
+                            <HistogramBoxPrimitives HistoBox={this} />
+                        </div>
+                        <div className="histogrambox-xaxislabel" onPointerDown={this.xLabelPointerDown} ref={this._dropXRef} >{labelX}</div>
+                    </div>
+                }
+            </Measure>
+        )
+    }
+}
+
diff --git a/src/client/northstar/dash-nodes/HistogramBoxPrimitives.scss b/src/client/northstar/dash-nodes/HistogramBoxPrimitives.scss
new file mode 100644
index 000000000..9d42219cc
--- /dev/null
+++ b/src/client/northstar/dash-nodes/HistogramBoxPrimitives.scss
@@ -0,0 +1,26 @@
+.histogramboxprimitives-border {
+    border: 3px;
+    border-style: solid;
+    border-color: white;
+    pointer-events: none;
+    position: absolute;
+}
+.histogramboxprimitives-bar {
+    position: absolute;
+    border: 1px;
+    border-style: solid;
+    border-color: #282828;
+    pointer-events: all;
+}
+
+.histogramboxprimitives-placer {
+    position: absolute;
+    pointer-events: none;
+    width: 100%;
+    height: 100%;
+}
+.histogramboxprimitives-line {
+    position: absolute;
+    background: darkGray;
+    opacity: 0.4;
+}
\ No newline at end of file
diff --git a/src/client/northstar/dash-nodes/HistogramBoxPrimitives.tsx b/src/client/northstar/dash-nodes/HistogramBoxPrimitives.tsx
new file mode 100644
index 000000000..d2f1be4fd
--- /dev/null
+++ b/src/client/northstar/dash-nodes/HistogramBoxPrimitives.tsx
@@ -0,0 +1,341 @@
+import React = require("react")
+import { computed, observable, runInAction } from "mobx";
+import { observer } from "mobx-react";
+import { Utils as DashUtils } from '../../../Utils';
+import { AttributeTransformationModel } from "../../northstar/core/attribute/AttributeTransformationModel";
+import { FilterModel } from "../../northstar/core/filter/FilterModel";
+import { ChartType } from '../../northstar/model/binRanges/VisualBinRange';
+import { AggregateFunction, Bin, Brush, HistogramResult, MarginAggregateParameters, MarginAggregateResult } from "../../northstar/model/idea/idea";
+import { ModelHelpers } from "../../northstar/model/ModelHelpers";
+import { ArrayUtil } from "../../northstar/utils/ArrayUtil";
+import { LABColor } from '../../northstar/utils/LABcolor';
+import { PIXIRectangle } from "../../northstar/utils/MathUtil";
+import { StyleConstants } from "../../northstar/utils/StyleContants";
+import { HistogramBox, HistogramPrimitivesProps } from "./HistogramBox";
+import "./HistogramBoxPrimitives.scss";
+
+
+@observer
+export class HistogramBoxPrimitives extends React.Component<HistogramPrimitivesProps> {
+    private get histoOp() { return this.props.HistoBox.HistoOp; }
+    private get renderDimension() { return this.props.HistoBox.SizeConverter.RenderDimension; }
+    @observable _selectedPrims: HistogramBinPrimitive[] = [];
+    @computed get xaxislines() { return this.renderGridLinesAndLabels(0); }
+    @computed get yaxislines() { return this.renderGridLinesAndLabels(1); }
+    @computed get selectedPrimitives() { return this._selectedPrims.map(bp => this.drawRect(bp.Rect, bp.BarAxis, undefined, "border")); }
+    @computed get binPrimitives() {
+        let histoResult = this.props.HistoBox.HistogramResult;
+        if (!histoResult || !histoResult.bins || !this.props.HistoBox.VisualBinRanges.length)
+            return (null);
+        let allBrushIndex = ModelHelpers.AllBrushIndex(histoResult);
+        return Object.keys(histoResult.bins).reduce((prims, key) => {
+            let drawPrims = new HistogramBinPrimitiveCollection(histoResult!.bins![key], this.props.HistoBox);
+
+            let toggle = this.getSelectionToggle(drawPrims.BinPrimitives, allBrushIndex,
+                ModelHelpers.GetBinFilterModel(histoResult!.bins![key], allBrushIndex, histoResult!, this.histoOp.X, this.histoOp.Y));
+            drawPrims.BinPrimitives.filter(bp => bp.DataValue && bp.BrushIndex !== allBrushIndex).map(bp =>
+                prims.push(...[{ r: bp.Rect, c: bp.Color }, { r: bp.MarginRect, c: StyleConstants.MARGIN_BARS_COLOR }].map(pair => this.drawRect(pair.r, bp.BarAxis, pair.c, "bar", toggle))));
+            return prims;
+        }, [] as JSX.Element[]);
+    }
+
+    private getSelectionToggle(binPrimitives: HistogramBinPrimitive[], allBrushIndex: number, filterModel: FilterModel) {
+        let allBrushPrim = ArrayUtil.FirstOrDefault(binPrimitives, bp => bp.BrushIndex == allBrushIndex);
+        return !allBrushPrim ? () => { } : () => runInAction(() => {
+            if (ArrayUtil.Contains(this.histoOp.FilterModels, filterModel)) {
+                this._selectedPrims.splice(this._selectedPrims.indexOf(allBrushPrim!), 1);
+                this.histoOp.RemoveFilterModels([filterModel]);
+            }
+            else {
+                this._selectedPrims.push(allBrushPrim!);
+                this.histoOp.AddFilterModels([filterModel]);
+            }
+        })
+    }
+
+    private renderGridLinesAndLabels(axis: number) {
+        if (!this.props.HistoBox.SizeConverter.Initialized)
+            return (null);
+        let labels = this.props.HistoBox.VisualBinRanges[axis].GetLabels();
+        return labels.reduce((prims, binLabel, i) => {
+            let r = this.props.HistoBox.SizeConverter.DataToScreenRange(binLabel.minValue!, binLabel.maxValue!, axis);
+            prims.push(this.drawLine(r.xFrom, r.yFrom, axis == 0 ? 0 : r.xTo - r.xFrom, axis == 0 ? r.yTo - r.yFrom : 0));
+            if (i == labels.length - 1)
+                prims.push(this.drawLine(axis == 0 ? r.xTo : r.xFrom, axis == 0 ? r.yFrom : r.yTo, axis == 0 ? 0 : r.xTo - r.xFrom, axis == 0 ? r.yTo - r.yFrom : 0));
+            return prims;
+        }, [] as JSX.Element[]);
+    }
+
+    drawEntity(xFrom: number, yFrom: number, entity: JSX.Element) {
+        let transXpercent = xFrom / this.renderDimension * 100;
+        let transYpercent = yFrom / this.renderDimension * 100;
+        return (<div key={DashUtils.GenerateGuid()} className={`histogramboxprimitives-placer`} style={{ transform: `translate(${transXpercent}%, ${transYpercent}%)` }}>
+            {entity}
+        </div>);
+    }
+    drawLine(xFrom: number, yFrom: number, width: number, height: number) {
+        if (height < 0) {
+            yFrom += height;
+            height = -height;
+        }
+        if (width < 0) {
+            xFrom += width;
+            width = -width;
+        }
+        let trans2Xpercent = width == 0 ? `1px` : `${(xFrom + width) / this.renderDimension * 100}%`;
+        let trans2Ypercent = height == 0 ? `1px` : `${(yFrom + height) / this.renderDimension * 100}%`;
+        let line = (<div className="histogramboxprimitives-line" style={{ width: trans2Xpercent, height: trans2Ypercent, }} />);
+        return this.drawEntity(xFrom, yFrom, line);
+    }
+
+    drawRect(r: PIXIRectangle, barAxis: number, color: number | undefined, classExt: string, tapHandler: () => void = () => { }) {
+        if (r.height < 0) {
+            r.y += r.height;
+            r.height = -r.height;
+        }
+        if (r.width < 0) {
+            r.x += r.width;
+            r.width = -r.width;
+        }
+        let widthPercent = r.width / this.renderDimension * 100;
+        let heightPercent = r.height / this.renderDimension * 100;
+        let rect = (<div className={`histogramboxprimitives-${classExt}`} onPointerDown={(e: React.PointerEvent) => { if (e.button == 0) tapHandler() }}
+            style={{
+                borderBottomStyle: barAxis == 1 ? "none" : "solid",
+                borderLeftStyle: barAxis == 0 ? "none" : "solid",
+                width: `${widthPercent}%`,
+                height: `${heightPercent}%`,
+                background: color ? `${LABColor.RGBtoHexString(color)}` : ""
+            }}
+        />);
+        return this.drawEntity(r.x, r.y, rect);
+    }
+    render() {
+        return <div className="histogramboxprimitives-container" style={{
+            width: "100%",
+            height: "100%",
+        }}>
+            {this.xaxislines}
+            {this.yaxislines}
+            {this.binPrimitives}
+            {this.selectedPrimitives}
+        </div>
+    }
+}
+
+class HistogramBinPrimitive {
+    constructor(init?: Partial<HistogramBinPrimitive>) {
+        Object.assign(this, init);
+    }
+    public DataValue: number = 0;
+    public Rect: PIXIRectangle = PIXIRectangle.EMPTY;
+    public MarginRect: PIXIRectangle = PIXIRectangle.EMPTY;
+    public MarginPercentage: number = 0;
+    public Color: number = StyleConstants.WARNING_COLOR;
+    public Opacity: number = 1;
+    public BrushIndex: number = 0;
+    public BarAxis: number = -1;
+}
+
+export class HistogramBinPrimitiveCollection {
+    private static TOLERANCE: number = 0.0001;
+
+    private _histoBox: HistogramBox;
+    private get histoOp() { return this._histoBox.HistoOp; }
+    private get histoResult() { return this.histoOp.Result as HistogramResult; }
+    private get sizeConverter() { return this._histoBox.SizeConverter!; }
+    public BinPrimitives: Array<HistogramBinPrimitive> = new Array<HistogramBinPrimitive>();
+    public HitGeom: PIXIRectangle = PIXIRectangle.EMPTY;
+
+    constructor(bin: Bin, histoBox: HistogramBox) {
+        this._histoBox = histoBox;
+        let brushing = this.setupBrushing(bin, this.histoOp.Normalization); // X= 0, Y = 1, V = 2
+
+        brushing.orderedBrushes.reduce((brushFactorSum, brush) => {
+            switch (histoBox.ChartType) {
+                case ChartType.VerticalBar: return this.createVerticalBarChartBinPrimitives(bin, brush, brushing.maxAxis, this.histoOp.Normalization);
+                case ChartType.HorizontalBar: return this.createHorizontalBarChartBinPrimitives(bin, brush, brushing.maxAxis, this.histoOp.Normalization);
+                case ChartType.SinglePoint: return this.createSinglePointChartBinPrimitives(bin, brush);
+                case ChartType.HeatMap: return this.createHeatmapBinPrimitives(bin, brush, brushFactorSum);
+            }
+        }, 0);
+
+        // adjust brush rects (stacking or not)
+        var allBrushIndex = ModelHelpers.AllBrushIndex(this.histoResult);
+        var filteredBinPrims = this.BinPrimitives.filter(b => b.BrushIndex != allBrushIndex && b.DataValue != 0.0);
+        filteredBinPrims.reduce((sum, fbp) => {
+            if (histoBox.ChartType == ChartType.VerticalBar) {
+                if (this.histoOp.X.AggregateFunction == AggregateFunction.Count) {
+                    fbp.Rect = new PIXIRectangle(fbp.Rect.x, fbp.Rect.y - sum, fbp.Rect.width, fbp.Rect.height);
+                    fbp.MarginRect = new PIXIRectangle(fbp.MarginRect.x, fbp.MarginRect.y - sum, fbp.MarginRect.width, fbp.MarginRect.height);
+                    return sum + fbp.Rect.height;
+                }
+                if (this.histoOp.Y.AggregateFunction == AggregateFunction.Avg) {
+                    var w = fbp.Rect.width / 2.0;
+                    fbp.Rect = new PIXIRectangle(fbp.Rect.x + sum, fbp.Rect.y, fbp.Rect.width / filteredBinPrims.length, fbp.Rect.height);
+                    fbp.MarginRect = new PIXIRectangle(fbp.MarginRect.x - w + sum + (fbp.Rect.width / 2.0), fbp.MarginRect.y, fbp.MarginRect.width, fbp.MarginRect.height);
+                    return sum + fbp.Rect.width;
+                }
+            }
+            else if (histoBox.ChartType == ChartType.HorizontalBar) {
+                if (this.histoOp.X.AggregateFunction == AggregateFunction.Count) {
+                    fbp.Rect = new PIXIRectangle(fbp.Rect.x + sum, fbp.Rect.y, fbp.Rect.width, fbp.Rect.height);
+                    fbp.MarginRect = new PIXIRectangle(fbp.MarginRect.x + sum, fbp.MarginRect.y, fbp.MarginRect.width, fbp.MarginRect.height);
+                    return sum + fbp.Rect.width;
+                }
+                if (this.histoOp.X.AggregateFunction == AggregateFunction.Avg) {
+                    var h = fbp.Rect.height / 2.0;
+                    fbp.Rect = new PIXIRectangle(fbp.Rect.x, fbp.Rect.y + sum, fbp.Rect.width, fbp.Rect.height / filteredBinPrims.length);
+                    fbp.MarginRect = new PIXIRectangle(fbp.MarginRect.x, fbp.MarginRect.y - h + sum + (fbp.Rect.height / 2.0), fbp.MarginRect.width, fbp.MarginRect.height);
+                    return sum + fbp.Rect.height;
+                }
+            }
+            return 0;
+        }, 0);
+        this.BinPrimitives = this.BinPrimitives.reverse();
+        var f = this.BinPrimitives.filter(b => b.BrushIndex == allBrushIndex);
+        this.HitGeom = f.length > 0 ? f[0].Rect : PIXIRectangle.EMPTY;
+    }
+    private setupBrushing(bin: Bin, normalization: number) {
+        var overlapBrushIndex = ModelHelpers.OverlapBrushIndex(this.histoResult);
+        var orderedBrushes = [this.histoResult.brushes![0], this.histoResult.brushes![overlapBrushIndex]];
+        this.histoResult.brushes!.map(brush => brush.brushIndex != 0 && brush.brushIndex != overlapBrushIndex && orderedBrushes.push(brush));
+        return {
+            orderedBrushes,
+            maxAxis: orderedBrushes.reduce((prev, Brush) => {
+                let aggResult = this.histoOp.getValue(normalization, bin, this.histoResult, Brush.brushIndex!);
+                return aggResult != undefined && aggResult > prev ? aggResult : prev;
+            }, Number.MIN_VALUE)
+        };
+    }
+    private createHeatmapBinPrimitives(bin: Bin, brush: Brush, brushFactorSum: number): number {
+
+        let unNormalizedValue = this.histoOp.getValue(2, bin, this.histoResult, brush.brushIndex!);
+        if (unNormalizedValue == undefined)
+            return brushFactorSum;
+
+        var normalizedValue = (unNormalizedValue - this._histoBox.ValueRange[0]) / (Math.abs((this._histoBox.ValueRange[1] - this._histoBox.ValueRange[0])) < HistogramBinPrimitiveCollection.TOLERANCE ?
+            unNormalizedValue : this._histoBox.ValueRange[1] - this._histoBox.ValueRange[0]);
+
+        let allUnNormalizedValue = this.histoOp.getValue(2, bin, this.histoResult, ModelHelpers.AllBrushIndex(this.histoResult))
+
+        // bcz: are these calls needed?  
+        let [xFrom, xTo] = this.sizeConverter.DataToScreenXAxisRange(this._histoBox.VisualBinRanges, 0, bin);
+        let [yFrom, yTo] = this.sizeConverter.DataToScreenYAxisRange(this._histoBox.VisualBinRanges, 1, bin);
+
+        var returnBrushFactorSum = brushFactorSum;
+        if (allUnNormalizedValue != undefined) {
+            var brushFactor = (unNormalizedValue / allUnNormalizedValue);
+            returnBrushFactorSum += brushFactor;
+            returnBrushFactorSum = Math.min(returnBrushFactorSum, 1.0);
+
+            var tempRect = new PIXIRectangle(xFrom, yTo, xTo - xFrom, yFrom - yTo);
+            var ratio = (tempRect.width / tempRect.height);
+            var newHeight = Math.sqrt((1.0 / ratio) * ((tempRect.width * tempRect.height) * returnBrushFactorSum));
+            var newWidth = newHeight * ratio;
+
+            xFrom = (tempRect.x + (tempRect.width - newWidth) / 2.0);
+            yTo = (tempRect.y + (tempRect.height - newHeight) / 2.0);
+            xTo = (xFrom + newWidth);
+            yFrom = (yTo + newHeight);
+        }
+        var alpha = 0.0;
+        var color = this.baseColorFromBrush(brush);
+        var lerpColor = LABColor.Lerp(
+            LABColor.FromColor(StyleConstants.MIN_VALUE_COLOR),
+            LABColor.FromColor(color),
+            (alpha + Math.pow(normalizedValue, 1.0 / 3.0) * (1.0 - alpha)));
+        var dataColor = LABColor.ToColor(lerpColor);
+
+        this.createBinPrimitive(-1, brush, PIXIRectangle.EMPTY, 0, xFrom, xTo, yFrom, yTo, dataColor, 1, unNormalizedValue);
+        return returnBrushFactorSum;
+    }
+
+    private createSinglePointChartBinPrimitives(bin: Bin, brush: Brush): number {
+        let unNormalizedValue = this._histoBox.HistoOp.getValue(2, bin, this.histoResult, brush.brushIndex!);
+        if (unNormalizedValue != undefined) {
+            let [xFrom, xTo] = this.sizeConverter.DataToScreenPointRange(0, bin, ModelHelpers.CreateAggregateKey(this.histoOp.Schema!.distinctAttributeParameters, this.histoOp.X, this.histoResult, brush.brushIndex!));
+            let [yFrom, yTo] = this.sizeConverter.DataToScreenPointRange(1, bin, ModelHelpers.CreateAggregateKey(this.histoOp.Schema!.distinctAttributeParameters, this.histoOp.Y, this.histoResult, brush.brushIndex!));
+
+            if (xFrom != undefined && yFrom != undefined && xTo != undefined && yTo != undefined)
+                this.createBinPrimitive(-1, brush, PIXIRectangle.EMPTY, 0, xFrom, xTo, yFrom, yTo, this.baseColorFromBrush(brush), 1, unNormalizedValue);
+        }
+        return 0;
+    }
+
+    private createVerticalBarChartBinPrimitives(bin: Bin, brush: Brush, binBrushMaxAxis: number, normalization: number): number {
+        let dataValue = this.histoOp.getValue(1, bin, this.histoResult, brush.brushIndex!);
+        if (dataValue != undefined) {
+            let [yFrom, yValue, yTo] = this.sizeConverter.DataToScreenNormalizedRange(dataValue, normalization, 1, binBrushMaxAxis);
+            let [xFrom, xTo] = this.sizeConverter.DataToScreenXAxisRange(this._histoBox.VisualBinRanges, 0, bin);
+
+            var yMarginAbsolute = this.getMargin(bin, brush, this.histoOp.Y);
+            var marginRect = new PIXIRectangle(xFrom + (xTo - xFrom) / 2.0 - 1,
+                this.sizeConverter.DataToScreenY(yValue + yMarginAbsolute), 2,
+                this.sizeConverter.DataToScreenY(yValue - yMarginAbsolute) - this.sizeConverter.DataToScreenY(yValue + yMarginAbsolute));
+
+            this.createBinPrimitive(1, brush, marginRect, 0, xFrom, xTo, yFrom, yTo,
+                this.baseColorFromBrush(brush), normalization != 0 ? 1 : 0.6 * binBrushMaxAxis / this.sizeConverter.DataRanges[1] + 0.4, dataValue);
+        }
+        return 0;
+    }
+
+    private createHorizontalBarChartBinPrimitives(bin: Bin, brush: Brush, binBrushMaxAxis: number, normalization: number): number {
+        let dataValue = this.histoOp.getValue(0, bin, this.histoResult, brush.brushIndex!);
+        if (dataValue != undefined) {
+            let [xFrom, xValue, xTo] = this.sizeConverter.DataToScreenNormalizedRange(dataValue, normalization, 0, binBrushMaxAxis);
+            let [yFrom, yTo] = this.sizeConverter.DataToScreenYAxisRange(this._histoBox.VisualBinRanges, 1, bin);
+
+            var xMarginAbsolute = this.sizeConverter.IsSmall ? 0 : this.getMargin(bin, brush, this.histoOp.X);
+            var marginRect = new PIXIRectangle(this.sizeConverter.DataToScreenX(xValue - xMarginAbsolute),
+                yTo + (yFrom - yTo) / 2.0 - 1,
+                this.sizeConverter.DataToScreenX(xValue + xMarginAbsolute) - this.sizeConverter.DataToScreenX(xValue - xMarginAbsolute),
+                2.0);
+
+            this.createBinPrimitive(0, brush, marginRect, 0, xFrom, xTo, yFrom, yTo,
+                this.baseColorFromBrush(brush), normalization != 1 ? 1 : 0.6 * binBrushMaxAxis / this.sizeConverter.DataRanges[0] + 0.4, dataValue);
+        }
+        return 0;
+    }
+
+
+    private getMargin(bin: Bin, brush: Brush, axis: AttributeTransformationModel) {
+        var marginParams = new MarginAggregateParameters();
+        marginParams.aggregateFunction = axis.AggregateFunction;
+        var marginAggregateKey = ModelHelpers.CreateAggregateKey(this.histoOp.Schema!.distinctAttributeParameters, axis, this.histoResult, brush.brushIndex!, marginParams);
+        var marginResult = ModelHelpers.GetAggregateResult(bin, marginAggregateKey) as MarginAggregateResult;
+        return !marginResult ? 0 : marginResult.absolutMargin!;
+    }
+
+    private createBinPrimitive(barAxis: number, brush: Brush, marginRect: PIXIRectangle,
+        marginPercentage: number, xFrom: number, xTo: number, yFrom: number, yTo: number, color: number, opacity: number, dataValue: number) {
+        var binPrimitive = new HistogramBinPrimitive(
+            {
+                Rect: new PIXIRectangle(xFrom, yTo, xTo - xFrom, yFrom - yTo),
+                MarginRect: marginRect,
+                MarginPercentage: marginPercentage,
+                BrushIndex: brush.brushIndex,
+                Color: color,
+                Opacity: opacity,
+                DataValue: dataValue,
+                BarAxis: barAxis
+            });
+        this.BinPrimitives.push(binPrimitive);
+    }
+
+    private baseColorFromBrush(brush: Brush): number {
+        if (brush.brushIndex == ModelHelpers.RestBrushIndex(this.histoResult)) {
+            return StyleConstants.HIGHLIGHT_COLOR;
+        }
+        else if (brush.brushIndex == ModelHelpers.OverlapBrushIndex(this.histoResult)) {
+            return StyleConstants.OVERLAP_COLOR;
+        }
+        else if (brush.brushIndex == ModelHelpers.AllBrushIndex(this.histoResult)) {
+            return 0x00ff00;
+        }
+        else if (this.histoOp.BrushColors.length > 0) {
+            return this.histoOp.BrushColors[brush.brushIndex! % this.histoOp.BrushColors.length];
+        }
+        return StyleConstants.HIGHLIGHT_COLOR;
+    }
+}
\ No newline at end of file
diff --git a/src/client/northstar/dash-nodes/HistogramLabelPrimitives.scss b/src/client/northstar/dash-nodes/HistogramLabelPrimitives.scss
new file mode 100644
index 000000000..304d33771
--- /dev/null
+++ b/src/client/northstar/dash-nodes/HistogramLabelPrimitives.scss
@@ -0,0 +1,13 @@
+
+  .histogramLabelPrimitives-gridlabel {
+    position:absolute;
+    transform-origin: left top;
+    font-size: 11;
+    color:white;
+  }
+  .histogramLabelPrimitives-placer {
+    position:absolute;
+    width:100%;
+    height:100%;
+    pointer-events: none;
+  }
\ No newline at end of file
diff --git a/src/client/northstar/dash-nodes/HistogramLabelPrimitives.tsx b/src/client/northstar/dash-nodes/HistogramLabelPrimitives.tsx
new file mode 100644
index 000000000..45b23874d
--- /dev/null
+++ b/src/client/northstar/dash-nodes/HistogramLabelPrimitives.tsx
@@ -0,0 +1,78 @@
+import React = require("react")
+import { action, computed, reaction } from "mobx";
+import { observer } from "mobx-react";
+import { Utils as DashUtils } from '../../../Utils';
+import { NominalVisualBinRange } from "../model/binRanges/NominalVisualBinRange";
+import "../utils/Extensions";
+import { StyleConstants } from "../utils/StyleContants";
+import { HistogramBox, HistogramPrimitivesProps } from "./HistogramBox";
+import "./HistogramLabelPrimitives.scss";
+
+@observer
+export class HistogramLabelPrimitives extends React.Component<HistogramPrimitivesProps> {
+    componentDidMount() {
+        reaction(() => [this.props.HistoBox.PanelWidth, this.props.HistoBox.SizeConverter.LeftOffset, this.props.HistoBox.VisualBinRanges.length],
+            (fields) => HistogramLabelPrimitives.computeLabelAngle(fields[0] as number, fields[1] as number, this.props.HistoBox), { fireImmediately: true });
+    }
+
+    @action
+    static computeLabelAngle(panelWidth: number, leftOffset: number, histoBox: HistogramBox) {
+        const textWidth = 30;
+        if (panelWidth > 0 && histoBox.VisualBinRanges.length && histoBox.VisualBinRanges[0] instanceof NominalVisualBinRange) {
+            let space = (panelWidth - leftOffset * 2) / histoBox.VisualBinRanges[0].GetBins().length;
+            histoBox.SizeConverter.SetLabelAngle(Math.min(Math.PI / 2, Math.max(Math.PI / 6, textWidth / space * Math.PI / 2)));
+        } else if (histoBox.SizeConverter.LabelAngle) {
+            histoBox.SizeConverter.SetLabelAngle(0);
+        }
+    }
+    @computed get xaxislines() { return this.renderGridLinesAndLabels(0); }
+    @computed get yaxislines() { return this.renderGridLinesAndLabels(1); }
+
+    private renderGridLinesAndLabels(axis: number) {
+        let sc = this.props.HistoBox.SizeConverter;
+        let vb = this.props.HistoBox.VisualBinRanges;
+        if (!vb.length || !sc.Initialized)
+            return (null);
+        let dim = (axis == 0 ? this.props.HistoBox.PanelWidth : this.props.HistoBox.PanelHeight) / ((axis == 0 && vb[axis] instanceof NominalVisualBinRange) ?
+            (12 + 5) : //  (<number>FontStyles.AxisLabel.fontSize + 5)));
+            sc.MaxLabelSizes[axis].coords[axis] + 5);
+
+        let labels = vb[axis].GetLabels();
+        return labels.reduce((prims, binLabel, i) => {
+            let r = sc.DataToScreenRange(binLabel.minValue!, binLabel.maxValue!, axis);
+            if (i % Math.ceil(labels.length / dim) === 0 && binLabel.label) {
+                const label = binLabel.label.Truncate(StyleConstants.MAX_CHAR_FOR_HISTOGRAM_LABELS, "...");
+                const textHeight = 14; const textWidth = 30;
+                let xStart = (axis === 0 ? r.xFrom + (r.xTo - r.xFrom) / 2.0 : r.xFrom - 10 - textWidth);
+                let yStart = (axis === 1 ? r.yFrom - textHeight / 2 : r.yFrom);
+
+                if (axis == 0 && vb[axis] instanceof NominalVisualBinRange) {
+                    let space = (r.xTo - r.xFrom) / sc.RenderDimension * this.props.HistoBox.PanelWidth;
+                    xStart += Math.max(textWidth / 2, (1 - textWidth / space) * textWidth / 2) - textHeight / 2;
+                }
+
+                let xPercent = axis == 1 ? `${xStart}px` : `${xStart / sc.RenderDimension * 100}%`
+                let yPercent = axis == 0 ? `${this.props.HistoBox.PanelHeight - sc.BottomOffset - textHeight}px` : `${yStart / sc.RenderDimension * 100}%`
+
+                prims.push(
+                    <div className="histogramLabelPrimitives-placer" key={DashUtils.GenerateGuid()} style={{ transform: `translate(${xPercent}, ${yPercent})` }}>
+                        <div className="histogramLabelPrimitives-gridlabel" style={{ transform: `rotate(${axis == 0 ? sc.LabelAngle : 0}rad)` }}>
+                            {label}
+                        </div>
+                    </div>
+                )
+            }
+            return prims;
+        }, [] as JSX.Element[]);
+    }
+
+    render() {
+        let xaxislines = this.xaxislines;
+        let yaxislines = this.yaxislines;
+        return <div className="histogramLabelPrimitives-container">
+            {xaxislines}
+            {yaxislines}
+        </div>
+    }
+
+}
\ No newline at end of file
diff --git a/src/client/northstar/model/ModelHelpers.ts b/src/client/northstar/model/ModelHelpers.ts
index 8de0bd260..d0711fb69 100644
--- a/src/client/northstar/model/ModelHelpers.ts
+++ b/src/client/northstar/model/ModelHelpers.ts
@@ -13,11 +13,11 @@ import { CurrentUserUtils } from "../../../server/authentication/models/current_
 
 export class ModelHelpers {
 
-    public static CreateAggregateKey(atm: AttributeTransformationModel, histogramResult: HistogramResult,
+    public static CreateAggregateKey(distinctAttributeParameters: AttributeParameters | undefined, atm: AttributeTransformationModel, histogramResult: HistogramResult,
         brushIndex: number, aggParameters?: SingleDimensionAggregateParameters): AggregateKey {
         {
             if (aggParameters == undefined) {
-                aggParameters = ModelHelpers.GetAggregateParameter(atm);
+                aggParameters = ModelHelpers.GetAggregateParameter(distinctAttributeParameters, atm);
             }
             else {
                 aggParameters.attributeParameters = ModelHelpers.GetAttributeParameters(atm.AttributeModel);
@@ -34,40 +34,40 @@ export class ModelHelpers {
         return ArrayUtil.IndexOfWithEqual(histogramResult.aggregateParameters!, aggParameters);
     }
 
-    public static GetAggregateParameter(atm: AttributeTransformationModel): AggregateParameters | undefined {
+    public static GetAggregateParameter(distinctAttributeParameters: AttributeParameters | undefined, atm: AttributeTransformationModel): AggregateParameters | undefined {
         var aggParam: AggregateParameters | undefined;
         if (atm.AggregateFunction === AggregateFunction.Avg) {
             var avg = new AverageAggregateParameters();
             avg.attributeParameters = ModelHelpers.GetAttributeParameters(atm.AttributeModel);
-            avg.distinctAttributeParameters = CurrentUserUtils.ActiveSchema!.distinctAttributeParameters;
+            avg.distinctAttributeParameters = distinctAttributeParameters;
             aggParam = avg;
         }
         else if (atm.AggregateFunction === AggregateFunction.Count) {
             var cnt = new CountAggregateParameters();
             cnt.attributeParameters = ModelHelpers.GetAttributeParameters(atm.AttributeModel);
-            cnt.distinctAttributeParameters = CurrentUserUtils.ActiveSchema!.distinctAttributeParameters;
+            cnt.distinctAttributeParameters = distinctAttributeParameters;
             aggParam = cnt;
         }
         else if (atm.AggregateFunction === AggregateFunction.Sum) {
             var sum = new SumAggregateParameters();
             sum.attributeParameters = ModelHelpers.GetAttributeParameters(atm.AttributeModel);
-            sum.distinctAttributeParameters = CurrentUserUtils.ActiveSchema!.distinctAttributeParameters;
+            sum.distinctAttributeParameters = distinctAttributeParameters;
             aggParam = sum;
         }
         return aggParam;
     }
 
-    public static GetAggregateParametersWithMargins(atms: Array<AttributeTransformationModel>): Array<AggregateParameters> {
+    public static GetAggregateParametersWithMargins(distinctAttributeParameters: AttributeParameters | undefined, atms: Array<AttributeTransformationModel>): Array<AggregateParameters> {
         var aggregateParameters = new Array<AggregateParameters>();
         atms.forEach(agg => {
-            var aggParams = ModelHelpers.GetAggregateParameter(agg);
+            var aggParams = ModelHelpers.GetAggregateParameter(distinctAttributeParameters, agg);
             if (aggParams) {
                 aggregateParameters.push(aggParams);
 
                 var margin = new MarginAggregateParameters()
                 margin.aggregateFunction = agg.AggregateFunction;
                 margin.attributeParameters = ModelHelpers.GetAttributeParameters(agg.AttributeModel);
-                margin.distinctAttributeParameters = CurrentUserUtils.ActiveSchema!.distinctAttributeParameters;
+                margin.distinctAttributeParameters = distinctAttributeParameters;
                 aggregateParameters.push(margin);
             }
         });
diff --git a/src/client/northstar/model/binRanges/VisualBinRangeHelper.ts b/src/client/northstar/model/binRanges/VisualBinRangeHelper.ts
index 9eae39800..53d585bb4 100644
--- a/src/client/northstar/model/binRanges/VisualBinRangeHelper.ts
+++ b/src/client/northstar/model/binRanges/VisualBinRangeHelper.ts
@@ -1,4 +1,4 @@
-import { BinRange, NominalBinRange, QuantitativeBinRange, Exception, AlphabeticBinRange, DateTimeBinRange, AggregateBinRange, DoubleValueAggregateResult, HistogramResult } from "../idea/idea";
+import { BinRange, NominalBinRange, QuantitativeBinRange, Exception, AlphabeticBinRange, DateTimeBinRange, AggregateBinRange, DoubleValueAggregateResult, HistogramResult, AttributeParameters } from "../idea/idea";
 import { VisualBinRange, ChartType } from "./VisualBinRange";
 import { NominalVisualBinRange } from "./NominalVisualBinRange";
 import { QuantitativeVisualBinRange } from "./QuantitativeVisualBinRange";
@@ -30,13 +30,13 @@ export class VisualBinRangeHelper {
         throw new Exception()
     }
 
-    public static GetVisualBinRange(dataBinRange: BinRange, histoResult: HistogramResult, attr: AttributeTransformationModel, chartType: ChartType): VisualBinRange {
+    public static GetVisualBinRange(distinctAttributeParameters: AttributeParameters | undefined, dataBinRange: BinRange, histoResult: HistogramResult, attr: AttributeTransformationModel, chartType: ChartType): VisualBinRange {
 
         if (!(dataBinRange instanceof AggregateBinRange)) {
             return VisualBinRangeHelper.GetNonAggregateVisualBinRange(dataBinRange);
         }
         else {
-            var aggregateKey = ModelHelpers.CreateAggregateKey(attr, histoResult, ModelHelpers.AllBrushIndex(histoResult));
+            var aggregateKey = ModelHelpers.CreateAggregateKey(distinctAttributeParameters, attr, histoResult, ModelHelpers.AllBrushIndex(histoResult));
             var minValue = Number.MAX_VALUE;
             var maxValue = Number.MIN_VALUE;
             for (var b = 0; b < histoResult.brushes!.length; b++) {
diff --git a/src/client/northstar/operations/BaseOperation.ts b/src/client/northstar/operations/BaseOperation.ts
index 7db6fcb91..94e0849af 100644
--- a/src/client/northstar/operations/BaseOperation.ts
+++ b/src/client/northstar/operations/BaseOperation.ts
@@ -10,9 +10,9 @@ export abstract class BaseOperation {
 
     @observable public Error: string = "";
     @observable public OverridingFilters: FilterModel[] = [];
-    @observable public Result: Result | undefined;
+    @observable public Result?: Result = undefined;
     @observable public ComputationStarted: boolean = false;
-    public OperationReference: OperationReference | undefined = undefined;
+    public OperationReference?: OperationReference = undefined;
 
     private static _nextId = 0;
     public RequestSalt: string = "";
diff --git a/src/client/northstar/operations/HistogramOperation.ts b/src/client/northstar/operations/HistogramOperation.ts
index 6c7288d42..8a0f648f6 100644
--- a/src/client/northstar/operations/HistogramOperation.ts
+++ b/src/client/northstar/operations/HistogramOperation.ts
@@ -27,6 +27,8 @@ export class HistogramOperation extends BaseOperation implements IBaseFilterCons
     @observable public V: AttributeTransformationModel;
     @observable public BrusherModels: BrushLinkModel<HistogramOperation>[] = [];
     @observable public BrushableModels: BrushLinkModel<HistogramOperation>[] = [];
+    @observable public SchemaName: string;
+    @computed public get Schema() { return CurrentUserUtils.GetNorthstarSchema(this.SchemaName); }
 
     @action
     public AddFilterModels(filterModels: FilterModel[]): void {
@@ -38,23 +40,24 @@ export class HistogramOperation extends BaseOperation implements IBaseFilterCons
     }
 
     public getValue(axis: number, bin: Bin, result: HistogramResult, brushIndex: number) {
-        var aggregateKey = ModelHelpers.CreateAggregateKey(axis == 0 ? this.X : axis == 1 ? this.Y : this.V, result, brushIndex);
+        var aggregateKey = ModelHelpers.CreateAggregateKey(this.Schema!.distinctAttributeParameters, axis == 0 ? this.X : axis == 1 ? this.Y : this.V, result, brushIndex);
         let dataValue = ModelHelpers.GetAggregateResult(bin, aggregateKey) as DoubleValueAggregateResult;
         return dataValue != null && dataValue.hasResult ? dataValue.result : undefined;
     }
 
-    public static Empty = new HistogramOperation(new AttributeTransformationModel(new ColumnAttributeModel(new Attribute())), new AttributeTransformationModel(new ColumnAttributeModel(new Attribute())), new AttributeTransformationModel(new ColumnAttributeModel(new Attribute())));
+    public static Empty = new HistogramOperation("-empty schema-", new AttributeTransformationModel(new ColumnAttributeModel(new Attribute())), new AttributeTransformationModel(new ColumnAttributeModel(new Attribute())), new AttributeTransformationModel(new ColumnAttributeModel(new Attribute())));
 
     Equals(other: Object): boolean {
         throw new Error("Method not implemented.");
     }
 
-    constructor(x: AttributeTransformationModel, y: AttributeTransformationModel, v: AttributeTransformationModel, normalized?: number) {
+    constructor(schemaName: string, x: AttributeTransformationModel, y: AttributeTransformationModel, v: AttributeTransformationModel, normalized?: number) {
         super();
         this.X = x;
         this.Y = y;
         this.V = v;
         this.Normalization = normalized ? normalized : -1;
+        this.SchemaName = schemaName;
     }
 
     @computed
@@ -93,7 +96,7 @@ export class HistogramOperation extends BaseOperation implements IBaseFilterCons
         allAttributes = ArrayUtil.Distinct(allAttributes.filter(a => a.AggregateFunction !== AggregateFunction.None));
 
         let numericDataTypes = [DataType.Int, DataType.Double, DataType.Float];
-        let perBinAggregateParameters: AggregateParameters[] = ModelHelpers.GetAggregateParametersWithMargins(allAttributes);
+        let perBinAggregateParameters: AggregateParameters[] = ModelHelpers.GetAggregateParametersWithMargins(this.Schema!.distinctAttributeParameters, allAttributes);
         let globalAggregateParameters: AggregateParameters[] = [];
         [histoX, histoY]
             .filter(a => a.AggregateFunction === AggregateFunction.None && ArrayUtil.Contains(numericDataTypes, a.AttributeModel.DataType))
@@ -112,7 +115,7 @@ export class HistogramOperation extends BaseOperation implements IBaseFilterCons
             let [perBinAggregateParameters, globalAggregateParameters] = this.GetAggregateParameters(this.X, this.Y, this.V);
             return new HistogramOperationParameters({
                 enableBrushComputation: true,
-                adapterName: CurrentUserUtils.ActiveSchema!.displayName,
+                adapterName: this.SchemaName,
                 filter: this.FilterString,
                 brushes: this.BrushString,
                 binningParameters: [ModelHelpers.GetBinningParameters(this.X, SETTINGS_X_BINS, this.QRange ? this.QRange.minValue : undefined, this.QRange ? this.QRange.maxValue : undefined),
diff --git a/src/client/northstar/utils/SizeConverter.ts b/src/client/northstar/utils/SizeConverter.ts
index ffd162a83..30627dfd5 100644
--- a/src/client/northstar/utils/SizeConverter.ts
+++ b/src/client/northstar/utils/SizeConverter.ts
@@ -68,10 +68,14 @@ export class SizeConverter {
         return [undefined, undefined];
     }
 
-    public DataToScreenAxisRange(visualBinRanges: VisualBinRange[], index: number, bin: Bin) {
+    public DataToScreenXAxisRange(visualBinRanges: VisualBinRange[], index: number, bin: Bin) {
         var value = visualBinRanges[0].GetValueFromIndex(bin.binIndex!.indices![index]);
         return [this.DataToScreenX(value), this.DataToScreenX(visualBinRanges[index].AddStep(value))]
     }
+    public DataToScreenYAxisRange(visualBinRanges: VisualBinRange[], index: number, bin: Bin) {
+        var value = visualBinRanges[1].GetValueFromIndex(bin.binIndex!.indices![index]);
+        return [this.DataToScreenY(value), this.DataToScreenY(visualBinRanges[index].AddStep(value))]
+    }
 
     public DataToScreenX(x: number): number {
         return ((x - this.DataMins[0]) / this.DataRanges[0]) * this.RenderDimension;
diff --git a/src/client/views/Main.tsx b/src/client/views/Main.tsx
index 09778ac77..2f20b102c 100644
--- a/src/client/views/Main.tsx
+++ b/src/client/views/Main.tsx
@@ -58,7 +58,7 @@ export class Main extends React.Component {
     @observable private mainfreeform?: Document;
     @observable public pwidth: number = 0;
     @observable public pheight: number = 0;
-    private _northstarColumns: Document[] = [];
+    private _northstarSchemas: Document[] = [];
 
     @computed private get mainContainer(): Document | undefined {
         let doc = this.userDocument.GetT(KeyStore.ActiveWorkspace, Document);
@@ -245,7 +245,7 @@ export class Main extends React.Component {
         let addTextNode = action(() => Documents.TextDocument({ width: 200, height: 200, title: "a text note" }))
         let addColNode = action(() => Documents.FreeformDocument([], { width: 200, height: 200, title: "a freeform collection" }));
         let addSchemaNode = action(() => Documents.SchemaDocument([], { width: 200, height: 200, title: "a schema collection" }));
-        let addTreeNode = action(() => Documents.TreeDocument(this._northstarColumns, { width: 200, height: 200, title: "a tree collection" }));
+        let addTreeNode = action(() => Documents.TreeDocument(this._northstarSchemas, { width: 100, height: 400, title: "northstar schemas" }));
         let addVideoNode = action(() => Documents.VideoDocument(videourl, { width: 200, height: 200, title: "video node" }));
         let addPDFNode = action(() => Documents.PdfDocument(pdfurl, { width: 200, height: 200, title: "a schema collection" }));
         let addImageNode = action(() => Documents.ImageDocument(imgurl, { width: 200, height: 200, title: "an image of a cat" }));
@@ -334,24 +334,27 @@ export class Main extends React.Component {
     // --------------- Northstar hooks ------------- /
 
     @action SetNorthstarCatalog(ctlog: Catalog) {
+        CurrentUserUtils.NorthstarDBCatalog = ctlog;
         if (ctlog && ctlog.schemas) {
-            CurrentUserUtils.ActiveSchema = ArrayUtil.FirstOrDefault<Schema>(ctlog.schemas!, (s: Schema) => s.displayName === "mimic");
-            CurrentUserUtils.GetAllNorthstarColumnAttributes().map(attr => {
-                Server.GetField(attr.displayName!, action((field: Opt<Field>) => {
-                    if (field instanceof Document) {
-                        this._northstarColumns.push(field);
-                    } else {
-                        var atmod = new ColumnAttributeModel(attr);
-                        let histoOp = new HistogramOperation(
-                            new AttributeTransformationModel(atmod, AggregateFunction.None),
-                            new AttributeTransformationModel(atmod, AggregateFunction.Count),
-                            new AttributeTransformationModel(atmod, AggregateFunction.Count));
-                        this._northstarColumns.push(Documents.HistogramDocument(histoOp, { width: 200, height: 200, title: attr.displayName!, northstarSchema: CurrentUserUtils.ActiveSchema!.displayName! }, attr.displayName!));
-                    }
-                }));
+            this._northstarSchemas = ctlog.schemas.map(schema => {
+                let schemaDoc = Documents.TreeDocument([], { width: 50, height: 100, title: schema.displayName! });
+                let schemaDocuments = schemaDoc.GetList(KeyStore.Data, [] as Document[]);
+                CurrentUserUtils.GetAllNorthstarColumnAttributes(schema).map(attr => {
+                    Server.GetField(attr.displayName!, action((field: Opt<Field>) => {
+                        if (field instanceof Document) {
+                            schemaDocuments.push(field);
+                        } else {
+                            var atmod = new ColumnAttributeModel(attr);
+                            let histoOp = new HistogramOperation(schema!.displayName!,
+                                new AttributeTransformationModel(atmod, AggregateFunction.None),
+                                new AttributeTransformationModel(atmod, AggregateFunction.Count),
+                                new AttributeTransformationModel(atmod, AggregateFunction.Count));
+                            schemaDocuments.push(Documents.HistogramDocument(histoOp, { width: 200, height: 200, title: attr.displayName! }, attr.displayName!));
+                        }
+                    }));
+                });
+                return schemaDoc;
             })
-            console.log("Activating schema " + CurrentUserUtils.ActiveSchema!.displayName!)
-            CurrentUserUtils.ActiveSchemaName = CurrentUserUtils.ActiveSchema!.displayName!;
         }
     }
     async initializeNorthstar(): Promise<void> {
diff --git a/src/client/views/nodes/DocumentContentsView.tsx b/src/client/views/nodes/DocumentContentsView.tsx
index b54744337..77551649c 100644
--- a/src/client/views/nodes/DocumentContentsView.tsx
+++ b/src/client/views/nodes/DocumentContentsView.tsx
@@ -19,8 +19,7 @@ import { KeyValueBox } from "./KeyValueBox";
 import { PDFBox } from "./PDFBox";
 import { VideoBox } from "./VideoBox";
 import { WebBox } from "./WebBox";
-import { HistogramBox } from "./HistogramBox";
-import { HistogramBoxPrimitives } from "./HistogramBoxPrimitives";
+import { HistogramBox } from "../../northstar/dash-nodes/HistogramBox";
 import React = require("react");
 const JsxParser = require('react-jsx-parser').default; //TODO Why does this need to be imported like this?
 
@@ -54,7 +53,7 @@ export class DocumentContentsView extends React.Component<DocumentViewProps & {
             return <p>Error loading layout keys</p>;
         }
         return <JsxParser
-            components={{ FormattedTextBox, ImageBox, CollectionFreeFormView, CollectionDockingView, CollectionSchemaView, CollectionView, CollectionPDFView, CollectionVideoView, WebBox, KeyValueBox, PDFBox, VideoBox, AudioBox, HistogramBox, HistogramBoxPrimitives }}
+            components={{ FormattedTextBox, ImageBox, CollectionFreeFormView, CollectionDockingView, CollectionSchemaView, CollectionView, CollectionPDFView, CollectionVideoView, WebBox, KeyValueBox, PDFBox, VideoBox, AudioBox, HistogramBox }}
             bindings={this.CreateBindings()}
             jsx={this.layout}
             showWarnings={true}
diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index 769d893f3..71613ca4f 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -120,9 +120,6 @@ export class DocumentView extends React.Component<DocumentViewProps> {
     }
 
     private dropDisposer?: DragManager.DragDropDisposer;
-    protected createDropTarget = (ele: HTMLDivElement) => {
-
-    }
 
     componentDidMount() {
         if (this._mainCont.current) {
diff --git a/src/client/views/nodes/HistogramBox.scss b/src/client/views/nodes/HistogramBox.scss
deleted file mode 100644
index 2660b1b75..000000000
--- a/src/client/views/nodes/HistogramBox.scss
+++ /dev/null
@@ -1,22 +0,0 @@
-.histogrambox-container {
-    padding: 0vw;
-    position: absolute;
-    text-align: center;
-    width: 100%;
-    height: 100%;
-  }
-  .histogrambox-xaxislabel {
-    position:absolute;
-    width:100%;
-    text-align: center;
-    bottom:0;
-    font-size: 14;
-    font-weight: bold;
-  }
-  
-  .histogrambox-container {
-    position:absolute;
-    width:100%;
-    height: 100%;
-  }
-  
\ No newline at end of file
diff --git a/src/client/views/nodes/HistogramBox.tsx b/src/client/views/nodes/HistogramBox.tsx
deleted file mode 100644
index 3307925a2..000000000
--- a/src/client/views/nodes/HistogramBox.tsx
+++ /dev/null
@@ -1,105 +0,0 @@
-import React = require("react")
-import { computed, observable, reaction, runInAction } from "mobx";
-import { observer } from "mobx-react";
-import Measure from "react-measure";
-import { Dictionary } from "typescript-collections";
-import { Opt } from "../../../fields/Field";
-import { HistogramField } from "../../../fields/HistogramField";
-import { KeyStore } from "../../../fields/KeyStore";
-import { CurrentUserUtils } from "../../../server/authentication/models/current_user_utils";
-import { FilterModel } from '../../northstar/core/filter/FilterModel';
-import { ChartType, VisualBinRange } from '../../northstar/model/binRanges/VisualBinRange';
-import { VisualBinRangeHelper } from "../../northstar/model/binRanges/VisualBinRangeHelper";
-import { AggregateBinRange, BinRange, DoubleValueAggregateResult, HistogramResult } from "../../northstar/model/idea/idea";
-import { ModelHelpers } from "../../northstar/model/ModelHelpers";
-import { HistogramOperation } from "../../northstar/operations/HistogramOperation";
-import { PIXIRectangle } from "../../northstar/utils/MathUtil";
-import { SizeConverter } from "../../northstar/utils/SizeConverter";
-import "./../../northstar/utils/Extensions";
-import { FieldView, FieldViewProps } from './FieldView';
-import "./HistogramBox.scss";
-import { HistogramBoxPrimitives } from './HistogramBoxPrimitives';
-import { HistogramLabelPrimitives } from "./HistogramLabelPrimitives";
-
-export interface HistogramPrimitivesProps {
-    HistoBox: HistogramBox;
-}
-
-@observer
-export class HistogramBox extends React.Component<FieldViewProps> {
-    public static LayoutString(fieldStr: string = "DataKey") { return FieldView.LayoutString(HistogramBox, fieldStr) }
-    public HitTargets: Dictionary<PIXIRectangle, FilterModel> = new Dictionary<PIXIRectangle, FilterModel>();
-
-    @observable public PanelWidth: number = 100;
-    @observable public PanelHeight: number = 100;
-    @observable public HistoOp?: HistogramOperation;
-    @observable public VisualBinRanges: VisualBinRange[] = [];
-    @observable public ValueRange: number[] = [];
-    @observable public SizeConverter: SizeConverter = new SizeConverter();
-
-    @computed get createOperationParamsCache() { return this.HistoOp!.CreateOperationParameters(); }
-    @computed get HistogramResult() { return this.HistoOp ? this.HistoOp.Result as HistogramResult : undefined; }
-    @computed get BinRanges() { return this.HistogramResult ? this.HistogramResult.binRanges : undefined; }
-    @computed get ChartType() {
-        return !this.BinRanges ? ChartType.SinglePoint : this.BinRanges[0] instanceof AggregateBinRange ?
-            (this.BinRanges[1] instanceof AggregateBinRange ? ChartType.SinglePoint : ChartType.HorizontalBar) :
-            this.BinRanges[1] instanceof AggregateBinRange ? ChartType.VerticalBar : ChartType.HeatMap;
-    }
-
-    componentDidMount() {
-        reaction(() => [CurrentUserUtils.ActiveSchemaName, this.props.doc.GetText(KeyStore.NorthstarSchema, "?")],
-            (params: string[]) => params[0] === params[1] && this.activateHistogramOperation(), { fireImmediately: true });
-        reaction(() => [this.VisualBinRanges && this.VisualBinRanges.slice()], () => this.SizeConverter.SetVisualBinRanges(this.VisualBinRanges));
-        reaction(() => [this.PanelHeight, this.PanelWidth], () => this.SizeConverter.SetIsSmall(this.PanelWidth < 40 && this.PanelHeight < 40))
-        reaction(() => this.HistogramResult ? this.HistogramResult.binRanges : undefined,
-            (binRanges: BinRange[] | undefined) => {
-                if (binRanges) {
-                    this.VisualBinRanges.splice(0, this.VisualBinRanges.length, ...binRanges.map((br, ind) =>
-                        VisualBinRangeHelper.GetVisualBinRange(br, this.HistogramResult!, ind ? this.HistoOp!.Y : this.HistoOp!.X, this.ChartType)));
-
-                    let valueAggregateKey = ModelHelpers.CreateAggregateKey(this.HistoOp!.V, this.HistogramResult!, ModelHelpers.AllBrushIndex(this.HistogramResult!));
-                    this.ValueRange = Object.values(this.HistogramResult!.bins!).reduce((prev, cur) => {
-                        let value = ModelHelpers.GetAggregateResult(cur, valueAggregateKey) as DoubleValueAggregateResult;
-                        return value && value.hasResult ? [Math.min(prev[0], value.result!), Math.max(prev[1], value.result!)] : prev;
-                    }, [Number.MIN_VALUE, Number.MAX_VALUE]);
-                }
-            });
-    }
-
-    activateHistogramOperation() {
-        this.props.doc.GetTAsync(this.props.fieldKey, HistogramField).then((histoOp: Opt<HistogramField>) => {
-            if (histoOp) {
-                runInAction(() => this.HistoOp = histoOp.Data);
-                reaction(() => this.props.doc.GetList(KeyStore.LinkedFromDocs, []), docs => this.HistoOp!.Links.splice(0, this.HistoOp!.Links.length, ...docs), { fireImmediately: true });
-                reaction(() => this.createOperationParamsCache, () => this.HistoOp!.Update(), { fireImmediately: true });
-            }
-        })
-    }
-    render() {
-        let label = this.HistoOp && this.HistoOp.X ? this.HistoOp.X.AttributeModel.DisplayName : "<...>";
-        var h = this.props.isTopMost ? this.PanelHeight : this.props.doc.GetNumber(KeyStore.Height, 0);
-        var w = this.props.isTopMost ? this.PanelWidth : this.props.doc.GetNumber(KeyStore.Width, 0);
-        let loff = this.SizeConverter.LeftOffset;
-        let toff = this.SizeConverter.TopOffset;
-        let roff = this.SizeConverter.RightOffset;
-        let boff = this.SizeConverter.BottomOffset;
-        return (
-            <Measure onResize={(r: any) => runInAction(() => { this.PanelWidth = r.entry.width; this.PanelHeight = r.entry.height })}>
-                {({ measureRef }) =>
-                    <div className="histogrambox-container" ref={measureRef} style={{ transform: `translate(${-w / 2}px, ${-h / 2}px)` }}>
-                        <div style={{
-                            transform: `translate(${loff}px, ${toff}px)`,
-                            width: `calc(100% - ${loff + roff}px)`,
-                            height: `calc(100% - ${toff + boff}px)`,
-                        }}>
-                            <HistogramLabelPrimitives HistoBox={this} />
-                            <HistogramBoxPrimitives HistoBox={this} />
-                        </div>
-                        <div className="histogrambox-xaxislabel">{label}</div>
-                    </div>
-                }
-            </Measure>
-        )
-    }
-}
-
diff --git a/src/client/views/nodes/HistogramBoxPrimitives.scss b/src/client/views/nodes/HistogramBoxPrimitives.scss
deleted file mode 100644
index 85f2c092d..000000000
--- a/src/client/views/nodes/HistogramBoxPrimitives.scss
+++ /dev/null
@@ -1,25 +0,0 @@
-.histogramboxprimitives-border {
-    border: 3px;
-    border-style: solid;
-    border-color: #282828;
-    pointer-events: none;
-    position: absolute;
-}
-.histogramboxprimitives-bar {
-    position: absolute;
-    border: 1px;
-    border-style: solid;
-    border-color: #282828;
-    pointer-events: all;
-}
-
-.histogramboxprimitives-placer {
-    position: absolute;
-    pointer-events: none;
-    width: 100%;
-    height: 100%;
-}
-.histogramboxprimitives-line {
-    position: absolute;
-    background: lightgray;
-}
\ No newline at end of file
diff --git a/src/client/views/nodes/HistogramBoxPrimitives.tsx b/src/client/views/nodes/HistogramBoxPrimitives.tsx
deleted file mode 100644
index f15cb5689..000000000
--- a/src/client/views/nodes/HistogramBoxPrimitives.tsx
+++ /dev/null
@@ -1,336 +0,0 @@
-import React = require("react")
-import { computed, observable, runInAction, trace } from "mobx";
-import { observer } from "mobx-react";
-import { Utils as DashUtils } from '../../../Utils';
-import { AttributeTransformationModel } from "../../northstar/core/attribute/AttributeTransformationModel";
-import { ChartType } from '../../northstar/model/binRanges/VisualBinRange';
-import { AggregateFunction, Bin, Brush, HistogramResult, MarginAggregateParameters, MarginAggregateResult, BinLabel } from "../../northstar/model/idea/idea";
-import { ModelHelpers } from "../../northstar/model/ModelHelpers";
-import { ArrayUtil } from "../../northstar/utils/ArrayUtil";
-import { LABColor } from '../../northstar/utils/LABcolor';
-import { PIXIRectangle } from "../../northstar/utils/MathUtil";
-import { StyleConstants } from "../../northstar/utils/StyleContants";
-import { HistogramBox, HistogramPrimitivesProps } from "./HistogramBox";
-import "./HistogramBoxPrimitives.scss";
-import { HistogramOperation } from "../../northstar/operations/HistogramOperation";
-import { FilterModel } from "../../northstar/core/filter/FilterModel";
-
-
-@observer
-export class HistogramBoxPrimitives extends React.Component<HistogramPrimitivesProps> {
-    private get histoOp() { return this.props.HistoBox.HistoOp; }
-    private get renderDimension() { return this.props.HistoBox.SizeConverter.RenderDimension; }
-    @observable _selectedPrims: HistogramBinPrimitive[] = [];
-    @computed get xaxislines() { return this.renderGridLinesAndLabels(0); }
-    @computed get yaxislines() { return this.renderGridLinesAndLabels(1); }
-    @computed get selectedPrimitives() { return this._selectedPrims.map(bp => this.drawRect(bp.Rect, bp.BarAxis, undefined, "border")); }
-    @computed get binPrimitives() {
-        let histoResult = this.props.HistoBox.HistogramResult;
-        if (!histoResult || !histoResult.bins || !this.props.HistoBox.VisualBinRanges.length)
-            return (null);
-        let allBrushIndex = ModelHelpers.AllBrushIndex(histoResult);
-        return Object.keys(histoResult.bins).reduce((prims, key) => {
-            let drawPrims = new HistogramBinPrimitiveCollection(histoResult!.bins![key], this.props.HistoBox);
-            let filterModel = ModelHelpers.GetBinFilterModel(histoResult!.bins![key], allBrushIndex, histoResult!, this.histoOp!.X, this.histoOp!.Y);
-
-            this.props.HistoBox.HitTargets.setValue(drawPrims.HitGeom, filterModel);
-
-            let toggle = this.getSelectionToggle(drawPrims.BinPrimitives, allBrushIndex, filterModel);
-            drawPrims.BinPrimitives.filter(bp => bp.DataValue && bp.BrushIndex !== allBrushIndex).map(bp =>
-                prims.push(...[{ r: bp.Rect, c: bp.Color }, { r: bp.MarginRect, c: StyleConstants.MARGIN_BARS_COLOR }].map(pair => this.drawRect(pair.r, bp.BarAxis, pair.c, "bar", toggle))));
-            return prims;
-        }, [] as JSX.Element[]);
-    }
-
-    private getSelectionToggle(binPrimitives: HistogramBinPrimitive[], allBrushIndex: number, filterModel: FilterModel) {
-        let allBrushPrim = ArrayUtil.FirstOrDefault(binPrimitives, bp => bp.BrushIndex == allBrushIndex);
-        return !allBrushPrim ? () => { } : () => runInAction(() => {
-            if (ArrayUtil.Contains(this.histoOp!.FilterModels, filterModel)) {
-                this._selectedPrims.splice(this._selectedPrims.indexOf(allBrushPrim!), 1);
-                this.histoOp!.RemoveFilterModels([filterModel]);
-            }
-            else {
-                this._selectedPrims.push(allBrushPrim!);
-                this.histoOp!.AddFilterModels([filterModel]);
-            }
-        })
-    }
-
-    private renderGridLinesAndLabels(axis: number) {
-        if (!this.props.HistoBox.SizeConverter.Initialized)
-            return (null);
-        let labels = this.props.HistoBox.VisualBinRanges[axis].GetLabels();
-        return labels.reduce((prims, binLabel, i) => {
-            let r = this.props.HistoBox.SizeConverter.DataToScreenRange(binLabel.minValue!, binLabel.maxValue!, axis);
-            prims.push(this.drawLine(r.xFrom, r.yFrom, axis == 0 ? 0 : r.xTo - r.xFrom, axis == 0 ? r.yTo - r.yFrom : 0));
-            if (i == labels.length - 1)
-                prims.push(this.drawLine(axis == 0 ? r.xTo : r.xFrom, axis == 0 ? r.yFrom : r.yTo, axis == 0 ? 0 : r.xTo - r.xFrom, axis == 0 ? r.yTo - r.yFrom : 0));
-            return prims;
-        }, [] as JSX.Element[]);
-    }
-
-    drawEntity(xFrom: number, yFrom: number, entity: JSX.Element) {
-        let transXpercent = xFrom / this.renderDimension * 100;
-        let transYpercent = yFrom / this.renderDimension * 100;
-        return (<div key={DashUtils.GenerateGuid()} className={`histogramboxprimitives-placer`} style={{ transform: `translate(${transXpercent}%, ${transYpercent}%)` }}>
-            {entity}
-        </div>);
-    }
-    drawLine(xFrom: number, yFrom: number, width: number, height: number) {
-        if (height < 0) {
-            yFrom += height;
-            height = -height;
-        }
-        if (width < 0) {
-            xFrom += width;
-            width = -width;
-        }
-        let trans2Xpercent = width == 0 ? `1px` : `${(xFrom + width) / this.renderDimension * 100}%`;
-        let trans2Ypercent = height == 0 ? `1px` : `${(yFrom + height) / this.renderDimension * 100}%`;
-        let line = (<div className="histogramboxprimitives-line" style={{ width: trans2Xpercent, height: trans2Ypercent, }} />);
-        return this.drawEntity(xFrom, yFrom, line);
-    }
-
-    drawRect(r: PIXIRectangle, barAxis: number, color: number | undefined, classExt: string, tapHandler: () => void = () => { }) {
-        let widthPercent = r.width / this.renderDimension * 100;
-        let heightPercent = r.height / this.renderDimension * 100;
-        let rect = (<div className={`histogramboxprimitives-${classExt}`} onPointerDown={(e: React.PointerEvent) => { if (e.button == 0) tapHandler() }}
-            style={{
-                borderBottomStyle: barAxis == 1 ? "none" : "solid",
-                borderLeftStyle: barAxis == 0 ? "none" : "solid",
-                width: `${widthPercent}%`,
-                height: `${heightPercent}%`,
-                background: color ? `${LABColor.RGBtoHexString(color)}` : ""
-            }}
-        />);
-        return this.drawEntity(r.x, r.y, rect);
-    }
-    render() {
-        return <div className="histogramboxprimitives-container" style={{
-            width: "100%",
-            height: "100%",
-        }}>
-            {this.xaxislines}
-            {this.yaxislines}
-            {this.binPrimitives}
-            {this.selectedPrimitives}
-        </div>
-    }
-}
-
-class HistogramBinPrimitive {
-    constructor(init?: Partial<HistogramBinPrimitive>) {
-        Object.assign(this, init);
-    }
-    public DataValue: number = 0;
-    public Rect: PIXIRectangle = PIXIRectangle.EMPTY;
-    public MarginRect: PIXIRectangle = PIXIRectangle.EMPTY;
-    public MarginPercentage: number = 0;
-    public Color: number = StyleConstants.WARNING_COLOR;
-    public Opacity: number = 1;
-    public BrushIndex: number = 0;
-    public BarAxis: number = -1;
-}
-
-export class HistogramBinPrimitiveCollection {
-    private static TOLERANCE: number = 0.0001;
-
-    private _histoBox: HistogramBox;
-    private get histoOp() { return this._histoBox.HistoOp!; }
-    private get histoResult() { return this.histoOp.Result as HistogramResult; }
-    private get sizeConverter() { return this._histoBox.SizeConverter!; }
-    public BinPrimitives: Array<HistogramBinPrimitive> = new Array<HistogramBinPrimitive>();
-    public HitGeom: PIXIRectangle = PIXIRectangle.EMPTY;
-
-    constructor(bin: Bin, histoBox: HistogramBox) {
-        this._histoBox = histoBox;
-        let brushing = this.setupBrushing(bin, this.histoOp.Normalization); // X= 0, Y = 1, V = 2
-
-        brushing.orderedBrushes.reduce((brushFactorSum, brush) => {
-            switch (histoBox.ChartType) {
-                case ChartType.VerticalBar: return this.createVerticalBarChartBinPrimitives(bin, brush, brushing.maxAxis, this.histoOp.Normalization);
-                case ChartType.HorizontalBar: return this.createHorizontalBarChartBinPrimitives(bin, brush, brushing.maxAxis, this.histoOp.Normalization);
-                case ChartType.SinglePoint: return this.createSinglePointChartBinPrimitives(bin, brush);
-                case ChartType.HeatMap: return this.createHeatmapBinPrimitives(bin, brush, brushFactorSum);
-            }
-        }, 0);
-
-        // adjust brush rects (stacking or not)
-        var allBrushIndex = ModelHelpers.AllBrushIndex(this.histoResult);
-        var filteredBinPrims = this.BinPrimitives.filter(b => b.BrushIndex != allBrushIndex && b.DataValue != 0.0);
-        filteredBinPrims.reduce((sum, fbp) => {
-            if (histoBox.ChartType == ChartType.VerticalBar) {
-                if (this.histoOp.X.AggregateFunction == AggregateFunction.Count) {
-                    fbp.Rect = new PIXIRectangle(fbp.Rect.x, fbp.Rect.y - sum, fbp.Rect.width, fbp.Rect.height);
-                    fbp.MarginRect = new PIXIRectangle(fbp.MarginRect.x, fbp.MarginRect.y - sum, fbp.MarginRect.width, fbp.MarginRect.height);
-                    return sum + fbp.Rect.height;
-                }
-                if (this.histoOp.Y.AggregateFunction == AggregateFunction.Avg) {
-                    var w = fbp.Rect.width / 2.0;
-                    fbp.Rect = new PIXIRectangle(fbp.Rect.x + sum, fbp.Rect.y, fbp.Rect.width / filteredBinPrims.length, fbp.Rect.height);
-                    fbp.MarginRect = new PIXIRectangle(fbp.MarginRect.x - w + sum + (fbp.Rect.width / 2.0), fbp.MarginRect.y, fbp.MarginRect.width, fbp.MarginRect.height);
-                    return sum + fbp.Rect.width;
-                }
-            }
-            else if (histoBox.ChartType == ChartType.HorizontalBar) {
-                if (this.histoOp.X.AggregateFunction == AggregateFunction.Count) {
-                    fbp.Rect = new PIXIRectangle(fbp.Rect.x + sum, fbp.Rect.y, fbp.Rect.width, fbp.Rect.height);
-                    fbp.MarginRect = new PIXIRectangle(fbp.MarginRect.x + sum, fbp.MarginRect.y, fbp.MarginRect.width, fbp.MarginRect.height);
-                    return sum + fbp.Rect.width;
-                }
-                if (this.histoOp.X.AggregateFunction == AggregateFunction.Avg) {
-                    var h = fbp.Rect.height / 2.0;
-                    fbp.Rect = new PIXIRectangle(fbp.Rect.x, fbp.Rect.y + sum, fbp.Rect.width, fbp.Rect.height / filteredBinPrims.length);
-                    fbp.MarginRect = new PIXIRectangle(fbp.MarginRect.x, fbp.MarginRect.y - h + sum + (fbp.Rect.height / 2.0), fbp.MarginRect.width, fbp.MarginRect.height);
-                    return sum + fbp.Rect.height;
-                }
-            }
-            return 0;
-        }, 0);
-        this.BinPrimitives = this.BinPrimitives.reverse();
-        var f = this.BinPrimitives.filter(b => b.BrushIndex == allBrushIndex);
-        this.HitGeom = f.length > 0 ? f[0].Rect : PIXIRectangle.EMPTY;
-    }
-    private setupBrushing(bin: Bin, normalization: number) {
-        var overlapBrushIndex = ModelHelpers.OverlapBrushIndex(this.histoResult);
-        var orderedBrushes = [this.histoResult.brushes![0], this.histoResult.brushes![overlapBrushIndex]];
-        this.histoResult.brushes!.map(brush => brush.brushIndex != 0 && brush.brushIndex != overlapBrushIndex && orderedBrushes.push(brush));
-        return {
-            orderedBrushes,
-            maxAxis: orderedBrushes.reduce((prev, Brush) => {
-                let aggResult = this.histoOp.getValue(normalization, bin, this.histoResult, Brush.brushIndex!);
-                return aggResult != undefined && aggResult > prev ? aggResult : prev;
-            }, Number.MIN_VALUE)
-        };
-    }
-    private createHeatmapBinPrimitives(bin: Bin, brush: Brush, brushFactorSum: number): number {
-
-        let unNormalizedValue = this.histoOp!.getValue(2, bin, this.histoResult, brush.brushIndex!);
-        if (unNormalizedValue == undefined)
-            return brushFactorSum;
-
-        var normalizedValue = (unNormalizedValue - this._histoBox.ValueRange[0]) / (Math.abs((this._histoBox.ValueRange[1] - this._histoBox.ValueRange[0])) < HistogramBinPrimitiveCollection.TOLERANCE ?
-            unNormalizedValue : this._histoBox.ValueRange[1] - this._histoBox.ValueRange[0]);
-
-        let allUnNormalizedValue = this.histoOp.getValue(2, bin, this.histoResult, ModelHelpers.AllBrushIndex(this.histoResult))
-
-        // bcz: are these calls needed?  
-        let [xFrom, xTo] = this.sizeConverter.DataToScreenAxisRange(this._histoBox.VisualBinRanges, 0, bin);
-        let [yFrom, yTo] = this.sizeConverter.DataToScreenAxisRange(this._histoBox.VisualBinRanges, 1, bin);
-
-        var returnBrushFactorSum = brushFactorSum;
-        if (allUnNormalizedValue != undefined) {
-            var brushFactor = (unNormalizedValue / allUnNormalizedValue);
-            returnBrushFactorSum += brushFactor;
-            returnBrushFactorSum = Math.min(returnBrushFactorSum, 1.0);
-
-            var tempRect = new PIXIRectangle(xFrom, yTo, xTo - xFrom, yFrom - yTo);
-            var ratio = (tempRect.width / tempRect.height);
-            var newHeight = Math.sqrt((1.0 / ratio) * ((tempRect.width * tempRect.height) * returnBrushFactorSum));
-            var newWidth = newHeight * ratio;
-
-            xFrom = (tempRect.x + (tempRect.width - newWidth) / 2.0);
-            yTo = (tempRect.y + (tempRect.height - newHeight) / 2.0);
-            xTo = (xFrom + newWidth);
-            yFrom = (yTo + newHeight);
-        }
-        var alpha = 0.0;
-        var color = this.baseColorFromBrush(brush);
-        var lerpColor = LABColor.Lerp(
-            LABColor.FromColor(StyleConstants.MIN_VALUE_COLOR),
-            LABColor.FromColor(color),
-            (alpha + Math.pow(normalizedValue, 1.0 / 3.0) * (1.0 - alpha)));
-        var dataColor = LABColor.ToColor(lerpColor);
-
-        this.createBinPrimitive(-1, brush, PIXIRectangle.EMPTY, 0, xFrom, xTo, yFrom, yTo, dataColor, 1, unNormalizedValue);
-        return returnBrushFactorSum;
-    }
-
-    private createSinglePointChartBinPrimitives(bin: Bin, brush: Brush): number {
-        let unNormalizedValue = this._histoBox.HistoOp!.getValue(2, bin, this.histoResult, brush.brushIndex!);
-        if (unNormalizedValue != undefined) {
-            let [xFrom, xTo] = this.sizeConverter.DataToScreenPointRange(0, bin, ModelHelpers.CreateAggregateKey(this.histoOp.X, this.histoResult, brush.brushIndex!));
-            let [yFrom, yTo] = this.sizeConverter.DataToScreenPointRange(1, bin, ModelHelpers.CreateAggregateKey(this.histoOp.Y, this.histoResult, brush.brushIndex!));
-
-            if (xFrom != undefined && yFrom != undefined && xTo != undefined && yTo != undefined)
-                this.createBinPrimitive(-1, brush, PIXIRectangle.EMPTY, 0, xFrom, xTo, yFrom, yTo, this.baseColorFromBrush(brush), 1, unNormalizedValue);
-        }
-        return 0;
-    }
-
-    private createVerticalBarChartBinPrimitives(bin: Bin, brush: Brush, binBrushMaxAxis: number, normalization: number): number {
-        let dataValue = this.histoOp.getValue(1, bin, this.histoResult, brush.brushIndex!);
-        if (dataValue != undefined) {
-            let [yFrom, yValue, yTo] = this.sizeConverter.DataToScreenNormalizedRange(dataValue, normalization, 1, binBrushMaxAxis);
-            let [xFrom, xTo] = this.sizeConverter.DataToScreenAxisRange(this._histoBox.VisualBinRanges, 0, bin);
-
-            var yMarginAbsolute = this.getMargin(bin, brush, this.histoOp.Y);
-            var marginRect = new PIXIRectangle(xFrom + (xTo - xFrom) / 2.0 - 1,
-                this.sizeConverter.DataToScreenY(yValue + yMarginAbsolute), 2,
-                this.sizeConverter.DataToScreenY(yValue - yMarginAbsolute) - this.sizeConverter.DataToScreenY(yValue + yMarginAbsolute));
-
-            this.createBinPrimitive(1, brush, marginRect, 0, xFrom, xTo, yFrom, yTo,
-                this.baseColorFromBrush(brush), normalization != 0 ? 1 : 0.6 * binBrushMaxAxis / this.sizeConverter.DataRanges[1] + 0.4, dataValue);
-        }
-        return 0;
-    }
-
-    private createHorizontalBarChartBinPrimitives(bin: Bin, brush: Brush, binBrushMaxAxis: number, normalization: number): number {
-        let dataValue = this.histoOp.getValue(0, bin, this.histoResult, brush.brushIndex!);
-        if (dataValue != undefined) {
-            let [xFrom, xValue, xTo] = this.sizeConverter.DataToScreenNormalizedRange(dataValue, normalization, 0, binBrushMaxAxis);
-            let [yFrom, yTo] = this.sizeConverter.DataToScreenAxisRange(this._histoBox.VisualBinRanges, 1, bin);
-
-            var xMarginAbsolute = this.sizeConverter.IsSmall ? 0 : this.getMargin(bin, brush, this.histoOp.X);
-            var marginRect = new PIXIRectangle(this.sizeConverter.DataToScreenX(xValue - xMarginAbsolute),
-                yTo + (yFrom - yTo) / 2.0 - 1,
-                this.sizeConverter.DataToScreenX(xValue + xMarginAbsolute) - this.sizeConverter.DataToScreenX(xValue - xMarginAbsolute),
-                2.0);
-
-            this.createBinPrimitive(0, brush, marginRect, 0, xFrom, xTo, yFrom, yTo,
-                this.baseColorFromBrush(brush), normalization != 1 ? 1 : 0.6 * binBrushMaxAxis / this.sizeConverter.DataRanges[0] + 0.4, dataValue);
-        }
-        return 0;
-    }
-
-
-    private getMargin(bin: Bin, brush: Brush, axis: AttributeTransformationModel) {
-        var marginParams = new MarginAggregateParameters();
-        marginParams.aggregateFunction = axis.AggregateFunction;
-        var marginAggregateKey = ModelHelpers.CreateAggregateKey(axis, this.histoResult, brush.brushIndex!, marginParams);
-        var marginResult = ModelHelpers.GetAggregateResult(bin, marginAggregateKey) as MarginAggregateResult;
-        return !marginResult ? 0 : marginResult.absolutMargin!;
-    }
-
-    private createBinPrimitive(barAxis: number, brush: Brush, marginRect: PIXIRectangle,
-        marginPercentage: number, xFrom: number, xTo: number, yFrom: number, yTo: number, color: number, opacity: number, dataValue: number) {
-        var binPrimitive = new HistogramBinPrimitive(
-            {
-                Rect: new PIXIRectangle(xFrom, yTo, xTo - xFrom, yFrom - yTo),
-                MarginRect: marginRect,
-                MarginPercentage: marginPercentage,
-                BrushIndex: brush.brushIndex,
-                Color: color,
-                Opacity: opacity,
-                DataValue: dataValue,
-                BarAxis: barAxis
-            });
-        this.BinPrimitives.push(binPrimitive);
-    }
-
-    private baseColorFromBrush(brush: Brush): number {
-        if (brush.brushIndex == ModelHelpers.RestBrushIndex(this.histoResult)) {
-            return StyleConstants.HIGHLIGHT_COLOR;
-        }
-        else if (brush.brushIndex == ModelHelpers.OverlapBrushIndex(this.histoResult)) {
-            return StyleConstants.OVERLAP_COLOR;
-        }
-        else if (brush.brushIndex == ModelHelpers.AllBrushIndex(this.histoResult)) {
-            return 0x00ff00;
-        }
-        else if (this.histoOp.BrushColors.length > 0) {
-            return this.histoOp.BrushColors[brush.brushIndex! % this.histoOp.BrushColors.length];
-        }
-        return StyleConstants.HIGHLIGHT_COLOR;
-    }
-}
\ No newline at end of file
diff --git a/src/client/views/nodes/HistogramLabelPrimitives.scss b/src/client/views/nodes/HistogramLabelPrimitives.scss
deleted file mode 100644
index d8ee88d72..000000000
--- a/src/client/views/nodes/HistogramLabelPrimitives.scss
+++ /dev/null
@@ -1,12 +0,0 @@
-
-  .histogramLabelPrimitives-gridlabel {
-    position:absolute;
-    transform-origin: left top;
-    font-size: 11;
-  }
-  .histogramLabelPrimitives-placer {
-    position:absolute;
-    width:100%;
-    height:100%;
-    pointer-events: none;
-  }
\ No newline at end of file
diff --git a/src/client/views/nodes/HistogramLabelPrimitives.tsx b/src/client/views/nodes/HistogramLabelPrimitives.tsx
deleted file mode 100644
index 7f365e45b..000000000
--- a/src/client/views/nodes/HistogramLabelPrimitives.tsx
+++ /dev/null
@@ -1,78 +0,0 @@
-import React = require("react")
-import { action, computed, reaction } from "mobx";
-import { observer } from "mobx-react";
-import { Utils as DashUtils } from '../../../Utils';
-import { NominalVisualBinRange } from "../../northstar/model/binRanges/NominalVisualBinRange";
-import { StyleConstants } from "../../northstar/utils/StyleContants";
-import "./../../northstar/utils/Extensions";
-import "./HistogramLabelPrimitives.scss";
-import { HistogramBox, HistogramPrimitivesProps } from "./HistogramBox";
-
-@observer
-export class HistogramLabelPrimitives extends React.Component<HistogramPrimitivesProps> {
-    componentDidMount() {
-        reaction(() => [this.props.HistoBox.PanelWidth, this.props.HistoBox.SizeConverter.LeftOffset, this.props.HistoBox.VisualBinRanges.length],
-            (fields) => HistogramLabelPrimitives.computeLabelAngle(fields[0] as number, fields[1] as number, this.props.HistoBox), { fireImmediately: true });
-    }
-
-    @action
-    static computeLabelAngle(panelWidth: number, leftOffset: number, histoBox: HistogramBox) {
-        const textWidth = 30;
-        if (panelWidth > 0 && histoBox.VisualBinRanges.length && histoBox.VisualBinRanges[0] instanceof NominalVisualBinRange) {
-            let space = (panelWidth - leftOffset * 2) / histoBox.VisualBinRanges[0].GetBins().length;
-            histoBox.SizeConverter.SetLabelAngle(Math.min(Math.PI / 2, Math.max(Math.PI / 6, textWidth / space * Math.PI / 2)));
-        } else if (histoBox.SizeConverter.LabelAngle) {
-            histoBox.SizeConverter.SetLabelAngle(0);
-        }
-    }
-    @computed get xaxislines() { return this.renderGridLinesAndLabels(0); }
-    @computed get yaxislines() { return this.renderGridLinesAndLabels(1); }
-
-    private renderGridLinesAndLabels(axis: number) {
-        let sc = this.props.HistoBox.SizeConverter;
-        let vb = this.props.HistoBox.VisualBinRanges;
-        if (!vb.length || !sc.Initialized)
-            return (null);
-        let dim = (axis == 0 ? this.props.HistoBox.PanelWidth : this.props.HistoBox.PanelHeight) / ((axis == 0 && vb[axis] instanceof NominalVisualBinRange) ?
-            (12 + 5) : //  (<number>FontStyles.AxisLabel.fontSize + 5)));
-            sc.MaxLabelSizes[axis].coords[axis] + 5);
-
-        let labels = vb[axis].GetLabels();
-        return labels.reduce((prims, binLabel, i) => {
-            let r = sc.DataToScreenRange(binLabel.minValue!, binLabel.maxValue!, axis);
-            if (i % Math.ceil(labels.length / dim) === 0 && binLabel.label) {
-                const label = binLabel.label.Truncate(StyleConstants.MAX_CHAR_FOR_HISTOGRAM_LABELS, "...");
-                const textHeight = 14; const textWidth = 30;
-                let xStart = (axis === 0 ? r.xFrom + (r.xTo - r.xFrom) / 2.0 : r.xFrom - 10 - textWidth);
-                let yStart = (axis === 1 ? r.yFrom - textHeight / 2 : r.yFrom);
-
-                if (axis == 0 && vb[axis] instanceof NominalVisualBinRange) {
-                    let space = (r.xTo - r.xFrom) / sc.RenderDimension * this.props.HistoBox.PanelWidth;
-                    xStart += Math.max(textWidth / 2, (1 - textWidth / space) * textWidth / 2) - textHeight / 2;
-                }
-
-                let xPercent = axis == 1 ? `${xStart}px` : `${xStart / sc.RenderDimension * 100}%`
-                let yPercent = axis == 0 ? `${this.props.HistoBox.PanelHeight - sc.BottomOffset - textHeight}px` : `${yStart / sc.RenderDimension * 100}%`
-
-                prims.push(
-                    <div className="histogramLabelPrimitives-placer" key={DashUtils.GenerateGuid()} style={{ transform: `translate(${xPercent}, ${yPercent})` }}>
-                        <div className="histogramLabelPrimitives-gridlabel" style={{ transform: `rotate(${axis == 0 ? sc.LabelAngle : 0}rad)` }}>
-                            {label}
-                        </div>
-                    </div>
-                )
-            }
-            return prims;
-        }, [] as JSX.Element[]);
-    }
-
-    render() {
-        let xaxislines = this.xaxislines;
-        let yaxislines = this.yaxislines;
-        return <div className="histogramLabelPrimitives-container">
-            {xaxislines}
-            {yaxislines}
-        </div>
-    }
-
-}
\ No newline at end of file
diff --git a/src/fields/HistogramField.ts b/src/fields/HistogramField.ts
deleted file mode 100644
index bb0014ab3..000000000
--- a/src/fields/HistogramField.ts
+++ /dev/null
@@ -1,59 +0,0 @@
-import { BasicField } from "./BasicField";
-import { Field, FieldId } from "./Field";
-import { Types } from "../server/Message";
-import { HistogramOperation } from "../client/northstar/operations/HistogramOperation";
-import { action } from "mobx";
-import { AttributeTransformationModel } from "../client/northstar/core/attribute/AttributeTransformationModel";
-import { ColumnAttributeModel } from "../client/northstar/core/attribute/AttributeModel";
-import { CurrentUserUtils } from "../server/authentication/models/current_user_utils";
-
-
-export class HistogramField extends BasicField<HistogramOperation> {
-    constructor(data?: HistogramOperation, id?: FieldId, save: boolean = true) {
-        super(data ? data : HistogramOperation.Empty, save, id);
-    }
-
-    toString(): string {
-        return JSON.stringify(this.Data);
-    }
-
-    Copy(): Field {
-        return new HistogramField(this.Data);
-    }
-
-    ToScriptString(): string {
-        return `new HistogramField("${this.Data}")`;
-    }
-
-    ToJson(): { type: Types, data: string, _id: string } {
-        return {
-            type: Types.HistogramOp,
-            data: JSON.stringify(this.Data),
-            _id: this.Id
-        }
-    }
-
-    @action
-    static FromJson(id: string, data: any): HistogramField {
-        let jp = JSON.parse(data);
-        let X: AttributeTransformationModel | undefined;
-        let Y: AttributeTransformationModel | undefined;
-        let V: AttributeTransformationModel | undefined;
-
-        CurrentUserUtils.GetAllNorthstarColumnAttributes().map(attr => {
-            if (attr.displayName == jp.X.AttributeModel.Attribute.DisplayName) {
-                X = new AttributeTransformationModel(new ColumnAttributeModel(attr), jp.X.AggregateFunction);
-            }
-            if (attr.displayName == jp.Y.AttributeModel.Attribute.DisplayName) {
-                Y = new AttributeTransformationModel(new ColumnAttributeModel(attr), jp.Y.AggregateFunction);
-            }
-            if (attr.displayName == jp.V.AttributeModel.Attribute.DisplayName) {
-                V = new AttributeTransformationModel(new ColumnAttributeModel(attr), jp.V.AggregateFunction);
-            }
-        });
-        if (X && Y && V) {
-            return new HistogramField(new HistogramOperation(X, Y, V, jp.Normalization), id, false);
-        }
-        return new HistogramField(HistogramOperation.Empty, id, false);
-    }
-}
\ No newline at end of file
diff --git a/src/fields/KeyStore.ts b/src/fields/KeyStore.ts
index 09dddf962..aa0b9ce92 100644
--- a/src/fields/KeyStore.ts
+++ b/src/fields/KeyStore.ts
@@ -44,5 +44,4 @@ export namespace KeyStore {
     export const Archives = new Key("Archives");
     export const Updated = new Key("Updated");
     export const Workspaces = new Key("Workspaces");
-    export const NorthstarSchema = new Key("NorthstarSchema");
 }
diff --git a/src/server/ServerUtil.ts b/src/server/ServerUtil.ts
index f958df04b..98a7a1451 100644
--- a/src/server/ServerUtil.ts
+++ b/src/server/ServerUtil.ts
@@ -17,8 +17,7 @@ import { VideoField } from '../fields/VideoField';
 import { InkField } from '../fields/InkField';
 import { PDFField } from '../fields/PDFField';
 import { TupleField } from '../fields/TupleField';
-import { HistogramField } from '../fields/HistogramField';
-
+import { HistogramField } from '../client/northstar/dash-fields/HistogramField';
 
 
 
diff --git a/src/server/authentication/models/current_user_utils.ts b/src/server/authentication/models/current_user_utils.ts
index 4b42e40b6..0ac85b446 100644
--- a/src/server/authentication/models/current_user_utils.ts
+++ b/src/server/authentication/models/current_user_utils.ts
@@ -7,8 +7,9 @@ import { Document } from "../../../fields/Document";
 import { KeyStore } from "../../../fields/KeyStore";
 import { ListField } from "../../../fields/ListField";
 import { Documents } from "../../../client/documents/Documents";
-import { Schema, Attribute, AttributeGroup } from "../../../client/northstar/model/idea/idea";
+import { Schema, Attribute, AttributeGroup, Catalog } from "../../../client/northstar/model/idea/idea";
 import { observable, computed, action } from "mobx";
+import { ArrayUtil } from "../../../client/northstar/utils/ArrayUtil";
 
 export class CurrentUserUtils {
     private static curr_email: string;
@@ -16,8 +17,7 @@ export class CurrentUserUtils {
     private static user_document: Document;
     //TODO tfs: these should be temporary...
     private static mainDocId: string | undefined;
-    private static activeSchema: Schema | undefined;
-    @observable public static ActiveSchemaName: string = "";
+    @observable private static catalog?: Catalog;
 
     public static get email(): string {
         return this.curr_email;
@@ -39,12 +39,18 @@ export class CurrentUserUtils {
         this.mainDocId = id;
     }
 
-
-    public static get ActiveSchema(): Schema | undefined {
-        return this.activeSchema;
+    @computed public static get NorthstarDBCatalog(): Catalog | undefined {
+        return this.catalog;
+    }
+    public static set NorthstarDBCatalog(ctlog: Catalog | undefined) {
+        this.catalog = ctlog;
     }
-    public static GetAllNorthstarColumnAttributes() {
-        if (!this.ActiveSchema || !this.ActiveSchema.rootAttributeGroup) {
+    public static GetNorthstarSchema(name: string): Schema | undefined {
+        return !this.catalog || !this.catalog.schemas ? undefined :
+            ArrayUtil.FirstOrDefault<Schema>(this.catalog.schemas, (s: Schema) => s.displayName === name);
+    }
+    public static GetAllNorthstarColumnAttributes(schema: Schema) {
+        if (!schema || !schema.rootAttributeGroup) {
             return [];
         }
         const recurs = (attrs: Attribute[], g: AttributeGroup) => {
@@ -56,13 +62,10 @@ export class CurrentUserUtils {
             }
         };
         const allAttributes: Attribute[] = new Array<Attribute>();
-        recurs(allAttributes, this.ActiveSchema.rootAttributeGroup);
+        recurs(allAttributes, schema.rootAttributeGroup);
         return allAttributes;
     }
 
-    public static set ActiveSchema(id: Schema | undefined) {
-        this.activeSchema = id;
-    }
     private static createUserDocument(id: string): Document {
         let doc = new Document(id);
 
-- 
cgit v1.2.3-70-g09d2


From 6e993fb5817e8ddce756396e53883a42530f52bb Mon Sep 17 00:00:00 2001
From: bob <bcz@cs.brown.edu>
Date: Fri, 29 Mar 2019 18:49:22 -0400
Subject: brushes mostly working - some problems with cycles.

---
 src/client/northstar/dash-fields/HistogramField.ts | 17 +++++++-
 src/client/northstar/dash-nodes/HistogramBox.tsx   | 27 ++++++++----
 .../dash-nodes/HistogramBoxPrimitives.tsx          | 14 ++++---
 src/client/northstar/operations/BaseOperation.ts   |  6 ++-
 .../northstar/operations/HistogramOperation.ts     | 22 +++++-----
 .../CollectionFreeFormLinksView.tsx                | 49 +++++++++++++++++++++-
 src/fields/KeyStore.ts                             |  1 +
 7 files changed, 107 insertions(+), 29 deletions(-)

(limited to 'src/fields')

diff --git a/src/client/northstar/dash-fields/HistogramField.ts b/src/client/northstar/dash-fields/HistogramField.ts
index 00912c595..1929f8dcd 100644
--- a/src/client/northstar/dash-fields/HistogramField.ts
+++ b/src/client/northstar/dash-fields/HistogramField.ts
@@ -16,7 +16,8 @@ export class HistogramField extends BasicField<HistogramOperation> {
     }
 
     toString(): string {
-        return JSON.stringify(this.Data);
+        let omitted = this.omitKeys(this.Data, ['Links', 'BrushLinks']);
+        return JSON.stringify(omitted);
     }
 
     Copy(): Field {
@@ -27,10 +28,22 @@ export class HistogramField extends BasicField<HistogramOperation> {
         return `new HistogramField("${this.Data}")`;
     }
 
+    omitKeys(obj: any, keys: any) {
+        var dup: any = {};
+        for (var key in obj) {
+            if (keys.indexOf(key) == -1) {
+                dup[key] = obj[key];
+            }
+        }
+        return dup;
+    }
+
     ToJson(): { type: Types, data: string, _id: string } {
+        let omitted = this.omitKeys(this.Data, ['Links', 'BrushLinks']);
         return {
             type: Types.HistogramOp,
-            data: JSON.stringify(this.Data),
+
+            data: JSON.stringify(omitted),
             _id: this.Id
         }
     }
diff --git a/src/client/northstar/dash-nodes/HistogramBox.tsx b/src/client/northstar/dash-nodes/HistogramBox.tsx
index b464e125c..9976ff6ad 100644
--- a/src/client/northstar/dash-nodes/HistogramBox.tsx
+++ b/src/client/northstar/dash-nodes/HistogramBox.tsx
@@ -1,5 +1,5 @@
 import React = require("react")
-import { action, computed, observable, reaction, runInAction } from "mobx";
+import { action, computed, observable, reaction, runInAction, trace } from "mobx";
 import { observer } from "mobx-react";
 import Measure from "react-measure";
 import { FieldWaiting, Opt } from "../../../fields/Field";
@@ -8,7 +8,7 @@ import { KeyStore } from "../../../fields/KeyStore";
 import { CurrentUserUtils } from "../../../server/authentication/models/current_user_utils";
 import { ChartType, VisualBinRange } from '../../northstar/model/binRanges/VisualBinRange';
 import { VisualBinRangeHelper } from "../../northstar/model/binRanges/VisualBinRangeHelper";
-import { AggregateBinRange, AggregateFunction, BinRange, Catalog, DoubleValueAggregateResult, HistogramResult } from "../../northstar/model/idea/idea";
+import { AggregateBinRange, AggregateFunction, BinRange, Catalog, DoubleValueAggregateResult, HistogramResult, Result } from "../../northstar/model/idea/idea";
 import { ModelHelpers } from "../../northstar/model/ModelHelpers";
 import { HistogramOperation } from "../../northstar/operations/HistogramOperation";
 import { SizeConverter } from "../../northstar/utils/SizeConverter";
@@ -39,10 +39,10 @@ export class HistogramBox extends React.Component<FieldViewProps> {
     @observable public HistoOp: HistogramOperation = HistogramOperation.Empty;
     @observable public VisualBinRanges: VisualBinRange[] = [];
     @observable public ValueRange: number[] = [];
+    @observable public HistogramResult: HistogramResult = new HistogramResult();
     @observable public SizeConverter: SizeConverter = new SizeConverter();
 
-    @computed get createOperationParamsCache() { return this.HistoOp.CreateOperationParameters(); }
-    @computed get HistogramResult() { return this.HistoOp ? this.HistoOp.Result as HistogramResult : undefined; }
+    @computed get createOperationParamsCache() { trace(); return this.HistoOp.CreateOperationParameters(); }
     @computed get BinRanges() { return this.HistogramResult ? this.HistogramResult.binRanges : undefined; }
     @computed get ChartType() {
         return !this.BinRanges ? ChartType.SinglePoint : this.BinRanges[0] instanceof AggregateBinRange ?
@@ -123,12 +123,21 @@ export class HistogramBox extends React.Component<FieldViewProps> {
             this.props.doc.GetTAsync(this.props.fieldKey, HistogramField).then((histoOp: Opt<HistogramField>) => runInAction(() => {
                 this.HistoOp = histoOp ? histoOp.Data : HistogramOperation.Empty;
                 if (this.HistoOp != HistogramOperation.Empty) {
-                    reaction(() => this.props.doc.GetList(KeyStore.LinkedFromDocs, []),
-                        (docs: Document[]) => {
+                    this.HistoOp.YieldResult = (r: Result) => action(() => this.HistogramResult = r as HistogramResult)();
+                    reaction(() => this.props.doc.GetList(KeyStore.LinkedFromDocs, []), (docs: Document[]) => this.HistoOp.Links.splice(0, this.HistoOp.Links.length, ...docs), { fireImmediately: true });
+                    reaction(() => this.props.doc.GetList(KeyStore.BrushingDocs, []).length,
+                        () => {
+                            let brushingDocs = this.props.doc.GetList(KeyStore.BrushingDocs, [] as Document[]);
                             var availableColors = StyleConstants.BRUSH_COLORS.map(c => c);
-                            docs.map((brush, i) => brush.SetNumber(KeyStore.BackgroundColor, availableColors[i % availableColors.length]));
-                            this.HistoOp.BrushLinks.splice(0, this.HistoOp.BrushLinks.length, ...docs);
-                            //this.HistoOp.Links.splice(0, this.HistoOp.Links.length, ...docs)
+                            let proto = this.props.doc.GetPrototype() as Document;
+                            let brushingLinks = brushingDocs.map((brush, i) => {
+                                // brush.SetNumber(KeyStore.BackgroundColor, availableColors[i % availableColors.length]);
+                                let brushed = brush.GetList(KeyStore.BrushingDocs, [] as Document[]);
+                                if (!brushed || brushed.length < 2)
+                                    return undefined;
+                                return { l: brush, b: brushed[0].Id == proto.Id ? brushed[1] : brushed[0] }
+                            }).filter(x => x != undefined) as { l: Document, b: Document }[];
+                            this.HistoOp.BrushLinks.splice(0, this.HistoOp.BrushLinks.length, ...brushingLinks);
                         }, { fireImmediately: true });
                     reaction(() => this.createOperationParamsCache, () => this.HistoOp.Update(), { fireImmediately: true });
                 }
diff --git a/src/client/northstar/dash-nodes/HistogramBoxPrimitives.tsx b/src/client/northstar/dash-nodes/HistogramBoxPrimitives.tsx
index 648070241..c97acb064 100644
--- a/src/client/northstar/dash-nodes/HistogramBoxPrimitives.tsx
+++ b/src/client/northstar/dash-nodes/HistogramBoxPrimitives.tsx
@@ -1,5 +1,5 @@
 import React = require("react")
-import { computed, observable, runInAction, reaction } from "mobx";
+import { computed, observable, runInAction, reaction, untracked, trace } from "mobx";
 import { observer } from "mobx-react";
 import { Utils as DashUtils } from '../../../Utils';
 import { AttributeTransformationModel } from "../../northstar/core/attribute/AttributeTransformationModel";
@@ -20,7 +20,7 @@ export class HistogramBoxPrimitives extends React.Component<HistogramPrimitivesP
     private get histoOp() { return this.props.HistoBox.HistoOp; }
     private get renderDimension() { return this.props.HistoBox.SizeConverter.RenderDimension; }
     componentDidMount() {
-        reaction(() => this.props.HistoBox.HistogramResult, () => this._selectedPrims.length = 0);
+        reaction(() => this.props.HistoBox.HistoOp.FilterString, () => this._selectedPrims.length = this.histoOp.FilterModels.length = 0);
     }
     @observable _selectedPrims: HistogramBinPrimitive[] = [];
     @computed get xaxislines() { return this.renderGridLinesAndLabels(0); }
@@ -30,10 +30,10 @@ export class HistogramBoxPrimitives extends React.Component<HistogramPrimitivesP
         let histoResult = this.props.HistoBox.HistogramResult;
         if (!histoResult || !histoResult.bins || !this.props.HistoBox.VisualBinRanges.length)
             return (null);
+        trace();
         let allBrushIndex = ModelHelpers.AllBrushIndex(histoResult);
         return Object.keys(histoResult.bins).reduce((prims, key) => {
             let drawPrims = new HistogramBinPrimitiveCollection(histoResult!.bins![key], this.props.HistoBox);
-
             let toggle = this.getSelectionToggle(drawPrims.BinPrimitives, allBrushIndex,
                 ModelHelpers.GetBinFilterModel(histoResult!.bins![key], allBrushIndex, histoResult!, this.histoOp.X, this.histoOp.Y));
             drawPrims.BinPrimitives.filter(bp => bp.DataValue && bp.BrushIndex !== allBrushIndex).map(bp =>
@@ -327,6 +327,7 @@ export class HistogramBinPrimitiveCollection {
     }
 
     private baseColorFromBrush(brush: Brush): number {
+        let bc = StyleConstants.BRUSH_COLORS;
         if (brush.brushIndex == ModelHelpers.RestBrushIndex(this.histoResult)) {
             return StyleConstants.HIGHLIGHT_COLOR;
         }
@@ -336,9 +337,12 @@ export class HistogramBinPrimitiveCollection {
         else if (brush.brushIndex == ModelHelpers.AllBrushIndex(this.histoResult)) {
             return 0x00ff00;
         }
-        else if (this.histoOp.BrushColors.length > 0) {
-            return this.histoOp.BrushColors[brush.brushIndex! % this.histoOp.BrushColors.length];
+        else if (bc.length > 0) {
+            return bc[brush.brushIndex! % bc.length];
         }
+        // else if (this.histoOp.BrushColors.length > 0) {
+        //     return this.histoOp.BrushColors[brush.brushIndex! % this.histoOp.BrushColors.length];
+        // }
         return StyleConstants.HIGHLIGHT_COLOR;
     }
 }
\ No newline at end of file
diff --git a/src/client/northstar/operations/BaseOperation.ts b/src/client/northstar/operations/BaseOperation.ts
index 94e0849af..21d1db749 100644
--- a/src/client/northstar/operations/BaseOperation.ts
+++ b/src/client/northstar/operations/BaseOperation.ts
@@ -10,7 +10,8 @@ export abstract class BaseOperation {
 
     @observable public Error: string = "";
     @observable public OverridingFilters: FilterModel[] = [];
-    @observable public Result?: Result = undefined;
+    //@observable 
+    public Result?: Result = undefined;
     @observable public ComputationStarted: boolean = false;
     public OperationReference?: OperationReference = undefined;
 
@@ -45,8 +46,11 @@ export abstract class BaseOperation {
     }
 
 
+    public YieldResult: ((result: Result) => void) | undefined;
     @action
     public SetResult(result: Result): void {
+        if (this.YieldResult)
+            this.YieldResult(result);
         this.Result = result;
     }
 
diff --git a/src/client/northstar/operations/HistogramOperation.ts b/src/client/northstar/operations/HistogramOperation.ts
index fa51e2a8c..48bad73df 100644
--- a/src/client/northstar/operations/HistogramOperation.ts
+++ b/src/client/northstar/operations/HistogramOperation.ts
@@ -1,4 +1,4 @@
-import { action, computed, observable } from "mobx";
+import { action, computed, observable, trace } from "mobx";
 import { Document } from "../../../fields/Document";
 import { CurrentUserUtils } from "../../../server/authentication/models/current_user_utils";
 import { ColumnAttributeModel } from "../core/attribute/AttributeModel";
@@ -16,12 +16,13 @@ import { BaseOperation } from "./BaseOperation";
 import { KeyStore } from "../../../fields/KeyStore";
 import { HistogramField } from "../dash-fields/HistogramField";
 import { FieldWaiting } from "../../../fields/Field";
+import { StyleConstants } from "../utils/StyleContants";
 
 
 export class HistogramOperation extends BaseOperation implements IBaseFilterConsumer, IBaseFilterProvider {
     @observable public FilterOperand: FilterOperand = FilterOperand.AND;
     @observable public Links: Document[] = [];
-    @observable public BrushLinks: Document[] = [];
+    @observable public BrushLinks: { l: Document, b: Document }[] = [];
     @observable public BrushColors: number[] = [];
     @observable public Normalization: number = -1;
     @observable public FilterModels: FilterModel[] = [];
@@ -69,16 +70,15 @@ export class HistogramOperation extends BaseOperation implements IBaseFilterCons
 
     @computed
     public get BrushString(): string[] {
+        trace();
         let brushes: string[] = [];
         this.BrushLinks.map(brushLink => {
-            let brusherDoc = brushLink.Get(KeyStore.LinkedFromDocs);
-            if (brusherDoc && brusherDoc != FieldWaiting && brusherDoc instanceof Document) {
-                let brushHistogram = brusherDoc.GetT(KeyStore.Data, HistogramField);
-                if (brushHistogram && brushHistogram != FieldWaiting) {
-                    let filterModels: FilterModel[] = [];
-                    let brush = FilterModel.GetFilterModelsRecursive(brushHistogram!.Data, new Set<IBaseFilterProvider>(), filterModels, false)
-                    brushes.push(brush);
-                }
+            let brusherDoc = brushLink.b;
+            let brushHistogram = brusherDoc.GetT(KeyStore.Data, HistogramField);
+            if (brushHistogram && brushHistogram != FieldWaiting) {
+                let filterModels: FilterModel[] = [];
+                let brush = FilterModel.GetFilterModelsRecursive(brushHistogram!.Data, new Set<IBaseFilterProvider>(), filterModels, false)
+                brushes.push(brush);
             }
         });
         return brushes;
@@ -137,7 +137,7 @@ export class HistogramOperation extends BaseOperation implements IBaseFilterCons
 
     @action
     public async Update(): Promise<void> {
-        this.BrushColors = this.BrushLinks.map(e => e.GetNumber(KeyStore.BackgroundColor, 0));
+        //this.BrushColors = this.BrushLinks.map(e => e.l.GetNumber(KeyStore.BackgroundColor, 0));
         return super.Update();
     }
 }
diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinksView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinksView.tsx
index 4f28f43eb..8dbf80533 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinksView.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinksView.tsx
@@ -1,4 +1,4 @@
-import { computed } from "mobx";
+import { computed, reaction, runInAction } from "mobx";
 import { observer } from "mobx-react";
 import { Document } from "../../../../fields/Document";
 import { FieldWaiting } from "../../../../fields/Field";
@@ -11,10 +11,57 @@ import "./CollectionFreeFormLinksView.scss";
 import React = require("react");
 import v5 = require("uuid/v5");
 import { CollectionFreeFormLinkView } from "./CollectionFreeFormLinkView";
+import { ListField } from "../../../../fields/ListField";
+import { TextField } from "../../../../fields/TextField";
+import { StyleConstants } from "../../../northstar/utils/StyleContants";
 
 @observer
 export class CollectionFreeFormLinksView extends React.Component<CollectionViewProps> {
 
+    componentDidMount() {
+        reaction(() => {
+            return DocumentManager.Instance.getAllDocumentViews(this.props.Document).map(dv => dv.props.Document.GetNumber(KeyStore.X, 0))
+        }, () => {
+            let views = DocumentManager.Instance.getAllDocumentViews(this.props.Document);
+            for (let i = 0; i < views.length; i++) {
+                for (let j = i + 1; j < views.length; j++) {
+                    let srcDoc = views[j].props.Document;
+                    let dstDoc = views[i].props.Document;
+                    let x1 = srcDoc.GetNumber(KeyStore.X, 0);
+                    let x1w = srcDoc.GetNumber(KeyStore.Width, 0);
+                    let x2 = dstDoc.GetNumber(KeyStore.X, 0);
+                    let x2w = dstDoc.GetNumber(KeyStore.Width, 0);
+                    if (Math.abs(x1 + x1w - x2) < 20 || Math.abs(x2 + x2w - x1) < 20) {
+                        let linkDoc: Document = new Document();
+                        dstDoc.GetTAsync(KeyStore.Prototype, Document).then((protoDest) =>
+                            srcDoc.GetTAsync(KeyStore.Prototype, Document).then((protoSrc) => runInAction(() => {
+                                linkDoc.Set(KeyStore.Title, new TextField("New Brush"));
+                                linkDoc.Set(KeyStore.LinkDescription, new TextField(""));
+                                linkDoc.Set(KeyStore.LinkTags, new TextField("Default"));
+                                linkDoc.SetNumber(KeyStore.BackgroundColor, StyleConstants.BRUSH_COLORS[0]);
+
+                                let dstTarg = (protoDest ? protoDest : dstDoc);
+                                let srcTarg = (protoSrc ? protoSrc : srcDoc);
+                                linkDoc.SetData(KeyStore.BrushingDocs, [dstTarg, srcTarg], ListField);
+                                dstTarg.GetOrCreateAsync(KeyStore.BrushingDocs, ListField, field => { (field as ListField<Document>).Data.push(linkDoc) })
+                                srcTarg.GetOrCreateAsync(KeyStore.BrushingDocs, ListField, field => { (field as ListField<Document>).Data.push(linkDoc) })
+                            }))
+                        )
+                    } else {
+                        dstDoc.GetTAsync(KeyStore.Prototype, Document).then((protoDest) =>
+                            srcDoc.GetTAsync(KeyStore.Prototype, Document).then((protoSrc) => runInAction(() => {
+
+                                let dstTarg = (protoDest ? protoDest : dstDoc);
+                                let srcTarg = (protoSrc ? protoSrc : srcDoc);
+                                dstTarg.GetOrCreateAsync(KeyStore.BrushingDocs, ListField, field => { (field as ListField<Document>).Data.length = 0 })
+                                srcTarg.GetOrCreateAsync(KeyStore.BrushingDocs, ListField, field => { (field as ListField<Document>).Data.length = 0 })
+                            }))
+                        )
+                    }
+                }
+            }
+        });
+    }
     documentAnchors(view: DocumentView) {
         let equalViews = [view];
         let containerDoc = view.props.Document.GetT(KeyStore.AnnotationOn, Document);
diff --git a/src/fields/KeyStore.ts b/src/fields/KeyStore.ts
index aa0b9ce92..1f039e592 100644
--- a/src/fields/KeyStore.ts
+++ b/src/fields/KeyStore.ts
@@ -29,6 +29,7 @@ export namespace KeyStore {
     export const Caption = new Key("Caption");
     export const ActiveWorkspace = new Key("ActiveWorkspace");
     export const DocumentText = new Key("DocumentText");
+    export const BrushingDocs = new Key("BrushingDocs");
     export const LinkedToDocs = new Key("LinkedToDocs");
     export const LinkedFromDocs = new Key("LinkedFromDocs");
     export const LinkDescription = new Key("LinkDescription");
-- 
cgit v1.2.3-70-g09d2


From 36019dc66ae66bac01118ed05bdb5c6466f9bdc8 Mon Sep 17 00:00:00 2001
From: Monika Hedman <monika_hedman@brown.edu>
Date: Tue, 2 Apr 2019 18:05:56 -0400
Subject: done with minimize to box

---
 src/client/util/DragManager.ts          |   1 -
 src/client/views/nodes/DocumentView.tsx |  35 +++++--
 src/fields/Document.ts                  |   5 +
 src/fields/KeyStore.ts                  |  90 ++++++++---------
 src/fields/MinimizedField.tsx           |  29 ++++++
 src/server/Message.ts                   | 168 ++++++++++++++++++--------------
 src/server/ServerUtil.ts                | 151 ++++++++++++++--------------
 7 files changed, 282 insertions(+), 197 deletions(-)
 create mode 100644 src/fields/MinimizedField.tsx

(limited to 'src/fields')

diff --git a/src/client/util/DragManager.ts b/src/client/util/DragManager.ts
index ee0b5333c..c0f482e18 100644
--- a/src/client/util/DragManager.ts
+++ b/src/client/util/DragManager.ts
@@ -192,7 +192,6 @@ export namespace DragManager {
       scaleYs.push(scaleY);
       let dragElement = ele.cloneNode(true) as HTMLElement;
       dragElement.style.opacity = "0.7";
-      console.log(dragElement);
       dragElement.style.position = "absolute";
       dragElement.style.bottom = "";
       dragElement.style.left = "";
diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index c4f329357..05058e63d 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -31,6 +31,7 @@ import "./DocumentView.scss";
 import React = require("react");
 import { ServerUtils } from "../../../server/ServerUtil";
 import { DocumentDecorations } from "../DocumentDecorations";
+import { MinimizedField } from "../../../fields/MinimizedField";
 
 export interface DocumentViewProps {
   ContainingCollectionView: Opt<CollectionView>;
@@ -102,8 +103,15 @@ export class DocumentView extends React.Component<DocumentViewProps> {
   private _downX: number = 0;
   private _downY: number = 0;
 
+  // @observable
+  // private minimized: boolean = false;
+
   @observable
-  private minimized: boolean = false;
+  private _minimized: boolean = this.props.Document.GetData(
+    KeyStore.Minimized,
+    MinimizedField,
+    false as boolean
+  );
 
   private _reactionDisposer: Opt<IReactionDisposer>;
   @computed get active(): boolean {
@@ -310,7 +318,13 @@ export class DocumentView extends React.Component<DocumentViewProps> {
 
   @action
   minimize = (e: React.MouseEvent): void => {
-    this.minimized = true;
+    //hopefully sets field?
+    this._minimized = true as boolean;
+    this.props.Document.SetData(
+      KeyStore.Minimized,
+      true as boolean,
+      MinimizedField
+    );
     SelectionManager.DeselectAll();
   };
 
@@ -383,7 +397,7 @@ export class DocumentView extends React.Component<DocumentViewProps> {
     e.preventDefault();
 
     //for testing purposes
-    if (!this.minimized) {
+    if (!this.isMinimized()) {
       ContextMenu.Instance.addItem({
         description: "Minimize",
         event: this.minimize
@@ -434,12 +448,21 @@ export class DocumentView extends React.Component<DocumentViewProps> {
   };
 
   isMinimized = () => {
-    return this.minimized;
+    let field = this.props.Document.GetT(KeyStore.Minimized, MinimizedField);
+    if (field && field !== FieldWaiting) {
+      return field.Data;
+    }
+    //return this.minimized;
   };
 
   @action
   expand = () => {
-    this.minimized = false;
+    //this._minimized = false;
+    this.props.Document.SetData(
+      KeyStore.Minimized,
+      false as boolean,
+      MinimizedField
+    );
   };
 
   isSelected = () => {
@@ -459,7 +482,7 @@ export class DocumentView extends React.Component<DocumentViewProps> {
     var nativeWidth = this.props.Document.GetNumber(KeyStore.NativeWidth, 0);
     var nativeHeight = this.props.Document.GetNumber(KeyStore.NativeHeight, 0);
 
-    if (this.minimized) {
+    if (this.isMinimized()) {
       return (
         <div
           className="minimized-box"
diff --git a/src/fields/Document.ts b/src/fields/Document.ts
index 85ff6ddcb..5131d89ca 100644
--- a/src/fields/Document.ts
+++ b/src/fields/Document.ts
@@ -9,6 +9,7 @@ import { Server } from "../client/Server";
 import { Types } from "../server/Message";
 import { UndoManager } from "../client/util/UndoManager";
 import { HtmlField } from "./HtmlField";
+import { MinimizedField } from "./MinimizedField";
 
 export class Document extends Field {
     //TODO tfs: We should probably store FieldWaiting in fields when we request it from the server so that we don't set up multiple server gets for the same document and field
@@ -225,6 +226,10 @@ export class Document extends Field {
         return vval;
     }
 
+    // GetMinimized(key: Key, defaultVal: boolean): boolean {
+    //     return this.GetData(key, MinimizedField, defaultVal);
+    // }
+
     GetHtml(key: Key, defaultVal: string): string {
         return this.GetData(key, HtmlField, defaultVal);
     }
diff --git a/src/fields/KeyStore.ts b/src/fields/KeyStore.ts
index 1f039e592..6ed3b1604 100644
--- a/src/fields/KeyStore.ts
+++ b/src/fields/KeyStore.ts
@@ -1,48 +1,50 @@
 import { Key } from "./Key";
+import { KeyTransfer } from "../server/Message";
 
 export namespace KeyStore {
-    export const Prototype = new Key("Prototype");
-    export const X = new Key("X");
-    export const Y = new Key("Y");
-    export const Page = new Key("Page");
-    export const Title = new Key("Title");
-    export const Author = new Key("Author");
-    export const PanX = new Key("PanX");
-    export const PanY = new Key("PanY");
-    export const Scale = new Key("Scale");
-    export const NativeWidth = new Key("NativeWidth");
-    export const NativeHeight = new Key("NativeHeight");
-    export const Width = new Key("Width");
-    export const Height = new Key("Height");
-    export const ZIndex = new Key("ZIndex");
-    export const Data = new Key("Data");
-    export const Annotations = new Key("Annotations");
-    export const ViewType = new Key("ViewType");
-    export const Layout = new Key("Layout");
-    export const BackgroundColor = new Key("BackgroundColor");
-    export const BackgroundLayout = new Key("BackgroundLayout");
-    export const OverlayLayout = new Key("OverlayLayout");
-    export const LayoutKeys = new Key("LayoutKeys");
-    export const LayoutFields = new Key("LayoutFields");
-    export const ColumnsKey = new Key("SchemaColumns");
-    export const SchemaSplitPercentage = new Key("SchemaSplitPercentage");
-    export const Caption = new Key("Caption");
-    export const ActiveWorkspace = new Key("ActiveWorkspace");
-    export const DocumentText = new Key("DocumentText");
-    export const BrushingDocs = new Key("BrushingDocs");
-    export const LinkedToDocs = new Key("LinkedToDocs");
-    export const LinkedFromDocs = new Key("LinkedFromDocs");
-    export const LinkDescription = new Key("LinkDescription");
-    export const LinkTags = new Key("LinkTag");
-    export const Thumbnail = new Key("Thumbnail");
-    export const ThumbnailPage = new Key("ThumbnailPage");
-    export const CurPage = new Key("CurPage");
-    export const AnnotationOn = new Key("AnnotationOn");
-    export const NumPages = new Key("NumPages");
-    export const Ink = new Key("Ink");
-    export const Cursors = new Key("Cursors");
-    export const OptionalRightCollection = new Key("OptionalRightCollection");
-    export const Archives = new Key("Archives");
-    export const Updated = new Key("Updated");
-    export const Workspaces = new Key("Workspaces");
+  export const Prototype = new Key("Prototype");
+  export const X = new Key("X");
+  export const Y = new Key("Y");
+  export const Page = new Key("Page");
+  export const Title = new Key("Title");
+  export const Author = new Key("Author");
+  export const PanX = new Key("PanX");
+  export const PanY = new Key("PanY");
+  export const Scale = new Key("Scale");
+  export const NativeWidth = new Key("NativeWidth");
+  export const NativeHeight = new Key("NativeHeight");
+  export const Width = new Key("Width");
+  export const Height = new Key("Height");
+  export const ZIndex = new Key("ZIndex");
+  export const Data = new Key("Data");
+  export const Annotations = new Key("Annotations");
+  export const ViewType = new Key("ViewType");
+  export const Layout = new Key("Layout");
+  export const BackgroundColor = new Key("BackgroundColor");
+  export const BackgroundLayout = new Key("BackgroundLayout");
+  export const OverlayLayout = new Key("OverlayLayout");
+  export const LayoutKeys = new Key("LayoutKeys");
+  export const LayoutFields = new Key("LayoutFields");
+  export const ColumnsKey = new Key("SchemaColumns");
+  export const SchemaSplitPercentage = new Key("SchemaSplitPercentage");
+  export const Caption = new Key("Caption");
+  export const ActiveWorkspace = new Key("ActiveWorkspace");
+  export const DocumentText = new Key("DocumentText");
+  export const BrushingDocs = new Key("BrushingDocs");
+  export const LinkedToDocs = new Key("LinkedToDocs");
+  export const LinkedFromDocs = new Key("LinkedFromDocs");
+  export const LinkDescription = new Key("LinkDescription");
+  export const LinkTags = new Key("LinkTag");
+  export const Thumbnail = new Key("Thumbnail");
+  export const ThumbnailPage = new Key("ThumbnailPage");
+  export const CurPage = new Key("CurPage");
+  export const AnnotationOn = new Key("AnnotationOn");
+  export const NumPages = new Key("NumPages");
+  export const Ink = new Key("Ink");
+  export const Cursors = new Key("Cursors");
+  export const OptionalRightCollection = new Key("OptionalRightCollection");
+  export const Archives = new Key("Archives");
+  export const Updated = new Key("Updated");
+  export const Workspaces = new Key("Workspaces");
+  export const Minimized = new Key("Minimized");
 }
diff --git a/src/fields/MinimizedField.tsx b/src/fields/MinimizedField.tsx
new file mode 100644
index 000000000..5dfb22e6e
--- /dev/null
+++ b/src/fields/MinimizedField.tsx
@@ -0,0 +1,29 @@
+import { BasicField } from "./BasicField";
+import { FieldId } from "./Field";
+import { Types } from "../server/Message";
+
+export class MinimizedField extends BasicField<boolean> {
+  constructor(
+    data: boolean = false as boolean,
+    id?: FieldId,
+    save: boolean = true as boolean
+  ) {
+    super(data, save, id);
+  }
+
+  ToScriptString(): string {
+    return `new MinimizedField("${this.Data}")`;
+  }
+
+  Copy() {
+    return new MinimizedField(this.Data);
+  }
+
+  ToJson(): { type: Types; data: boolean; _id: string } {
+    return {
+      type: Types.Minimized,
+      data: this.Data,
+      _id: this.Id
+    };
+  }
+}
diff --git a/src/server/Message.ts b/src/server/Message.ts
index 05ae0f19a..29df57419 100644
--- a/src/server/Message.ts
+++ b/src/server/Message.ts
@@ -1,125 +1,145 @@
 import { Utils } from "../Utils";
 
 export class Message<T> {
-    private name: string;
-    private guid: string;
+  private name: string;
+  private guid: string;
 
-    get Name(): string {
-        return this.name;
-    }
+  get Name(): string {
+    return this.name;
+  }
 
-    get Message(): string {
-        return this.guid
-    }
+  get Message(): string {
+    return this.guid;
+  }
 
-    constructor(name: string) {
-        this.name = name;
-        this.guid = Utils.GenerateDeterministicGuid(name)
-    }
+  constructor(name: string) {
+    this.name = name;
+    this.guid = Utils.GenerateDeterministicGuid(name);
+  }
 
-    GetValue() {
-        return this.Name;
-    }
+  GetValue() {
+    return this.Name;
+  }
 }
 
 class TestMessageArgs {
-    hello: string = "";
+  hello: string = "";
 }
 
 export class SetFieldArgs {
-    field: string;
-    value: any;
+  field: string;
+  value: any;
 
-    constructor(f: string, v: any) {
-        this.field = f
-        this.value = v
-    }
+  constructor(f: string, v: any) {
+    this.field = f;
+    this.value = v;
+  }
 }
 
 export class GetFieldArgs {
-    field: string;
+  field: string;
 
-    constructor(f: string) {
-        this.field = f
-    }
+  constructor(f: string) {
+    this.field = f;
+  }
 }
 
 export enum Types {
-    Number, List, Key, Image, Web, Document, Text, RichText, DocumentReference, Html, Video, Audio, Ink, PDF, Tuple, HistogramOp
+  Number,
+  List,
+  Key,
+  Image,
+  Web,
+  Document,
+  Text,
+  RichText,
+  DocumentReference,
+  Html,
+  Video,
+  Audio,
+  Ink,
+  PDF,
+  Tuple,
+  HistogramOp,
+  Minimized
 }
 
 export class DocumentTransfer implements Transferable {
-    readonly type = Types.Document
-    _id: string
-
-    constructor(readonly obj: { type: Types, data: [string, string][], _id: string }) {
-        this._id = obj._id
-    }
+  readonly type = Types.Document;
+  _id: string;
+
+  constructor(
+    readonly obj: { type: Types; data: [string, string][]; _id: string }
+  ) {
+    this._id = obj._id;
+  }
 }
 
 export class ImageTransfer implements Transferable {
-    readonly type = Types.Image
+  readonly type = Types.Image;
 
-    constructor(readonly _id: string) { }
+  constructor(readonly _id: string) {}
 }
 
 export class KeyTransfer implements Transferable {
-    name: string
-    readonly _id: string
-    readonly type = Types.Key
-
-    constructor(i: string, n: string) {
-        this.name = n
-        this._id = i
-    }
+  name: string;
+  readonly _id: string;
+  readonly type = Types.Key;
+
+  constructor(i: string, n: string) {
+    this.name = n;
+    this._id = i;
+  }
 }
 
 export class ListTransfer implements Transferable {
-    type = Types.List;
+  type = Types.List;
 
-    constructor(readonly _id: string) { }
+  constructor(readonly _id: string) {}
 }
 
 export class NumberTransfer implements Transferable {
-    readonly type = Types.Number
+  readonly type = Types.Number;
 
-    constructor(readonly value: number, readonly _id: string) { }
+  constructor(readonly value: number, readonly _id: string) {}
 }
 
 export class TextTransfer implements Transferable {
-    value: string
-    readonly _id: string
-    readonly type = Types.Text
-
-    constructor(t: string, i: string) {
-        this.value = t
-        this._id = i
-    }
+  value: string;
+  readonly _id: string;
+  readonly type = Types.Text;
+
+  constructor(t: string, i: string) {
+    this.value = t;
+    this._id = i;
+  }
 }
 
 export class RichTextTransfer implements Transferable {
-    value: string
-    readonly _id: string
-    readonly type = Types.Text
-
-    constructor(t: string, i: string) {
-        this.value = t
-        this._id = i
-    }
+  value: string;
+  readonly _id: string;
+  readonly type = Types.Text;
+
+  constructor(t: string, i: string) {
+    this.value = t;
+    this._id = i;
+  }
 }
 
 export interface Transferable {
-    readonly _id: string
-    readonly type: Types
+  readonly _id: string;
+  readonly type: Types;
 }
 
 export namespace MessageStore {
-    export const Foo = new Message<string>("Foo");
-    export const Bar = new Message<string>("Bar");
-    export const AddDocument = new Message<DocumentTransfer>("Add Document");
-    export const SetField = new Message<{ _id: string, data: any, type: Types }>("Set Field")
-    export const GetField = new Message<string>("Get Field")
-    export const GetFields = new Message<string[]>("Get Fields")
-    export const GetDocument = new Message<string>("Get Document");
-    export const DeleteAll = new Message<any>("Delete All");
-}
\ No newline at end of file
+  export const Foo = new Message<string>("Foo");
+  export const Bar = new Message<string>("Bar");
+  export const AddDocument = new Message<DocumentTransfer>("Add Document");
+  export const SetField = new Message<{ _id: string; data: any; type: Types }>(
+    "Set Field"
+  );
+  export const GetField = new Message<string>("Get Field");
+  export const GetFields = new Message<string[]>("Get Fields");
+  export const GetDocument = new Message<string>("Get Document");
+  export const DeleteAll = new Message<any>("Delete All");
+}
diff --git a/src/server/ServerUtil.ts b/src/server/ServerUtil.ts
index 98a7a1451..3e24fed3a 100644
--- a/src/server/ServerUtil.ts
+++ b/src/server/ServerUtil.ts
@@ -1,78 +1,85 @@
-
-import { Field } from './../fields/Field';
-import { TextField } from './../fields/TextField';
-import { NumberField } from './../fields/NumberField';
-import { RichTextField } from './../fields/RichTextField';
-import { Key } from './../fields/Key';
-import { ImageField } from './../fields/ImageField';
-import { ListField } from './../fields/ListField';
-import { Document } from './../fields/Document';
-import { Server } from './../client/Server';
-import { Types } from './Message';
-import { Utils } from '../Utils';
-import { HtmlField } from '../fields/HtmlField';
-import { WebField } from '../fields/WebField';
-import { AudioField } from '../fields/AudioField';
-import { VideoField } from '../fields/VideoField';
-import { InkField } from '../fields/InkField';
-import { PDFField } from '../fields/PDFField';
-import { TupleField } from '../fields/TupleField';
-import { HistogramField } from '../client/northstar/dash-fields/HistogramField';
-
-
+import { Field } from "./../fields/Field";
+import { TextField } from "./../fields/TextField";
+import { NumberField } from "./../fields/NumberField";
+import { RichTextField } from "./../fields/RichTextField";
+import { Key } from "./../fields/Key";
+import { ImageField } from "./../fields/ImageField";
+import { ListField } from "./../fields/ListField";
+import { Document } from "./../fields/Document";
+import { Server } from "./../client/Server";
+import { Types } from "./Message";
+import { Utils } from "../Utils";
+import { HtmlField } from "../fields/HtmlField";
+import { WebField } from "../fields/WebField";
+import { AudioField } from "../fields/AudioField";
+import { VideoField } from "../fields/VideoField";
+import { InkField } from "../fields/InkField";
+import { PDFField } from "../fields/PDFField";
+import { TupleField } from "../fields/TupleField";
+import { MinimizedField } from "../fields/MinimizedField";
+import { HistogramField } from "../client/northstar/dash-fields/HistogramField";
 
 export class ServerUtils {
-    public static prepend(extension: string): string { return window.location.origin + extension; }
+  public static prepend(extension: string): string {
+    return window.location.origin + extension;
+  }
 
-    public static FromJson(json: any): Field {
-        let obj = json
-        let data: any = obj.data
-        let id: string = obj._id
-        let type: Types = obj.type
+  public static FromJson(json: any): Field {
+    let obj = json;
+    let data: any = obj.data;
+    let id: string = obj._id;
+    let type: Types = obj.type;
 
-        if (!(data !== undefined && id && type !== undefined)) {
-            console.log("how did you manage to get an object that doesn't have a data or an id?")
-            return new TextField("Something to fill the space", Utils.GenerateGuid());
-        }
+    if (!(data !== undefined && id && type !== undefined)) {
+      console.log(
+        "how did you manage to get an object that doesn't have a data or an id?"
+      );
+      return new TextField("Something to fill the space", Utils.GenerateGuid());
+    }
 
-        switch (type) {
-            case Types.Number:
-                return new NumberField(data, id, false)
-            case Types.Text:
-                return new TextField(data, id, false)
-            case Types.Html:
-                return new HtmlField(data, id, false)
-            case Types.Web:
-                return new WebField(new URL(data), id, false)
-            case Types.RichText:
-                return new RichTextField(data, id, false)
-            case Types.Key:
-                return new Key(data, id, false)
-            case Types.Image:
-                return new ImageField(new URL(data), id, false)
-            case Types.HistogramOp:
-                return HistogramField.FromJson(id, data);
-            case Types.PDF:
-                return new PDFField(new URL(data), id, false)
-            case Types.List:
-                return ListField.FromJson(id, data)
-            case Types.Audio:
-                return new AudioField(new URL(data), id, false)
-            case Types.Video:
-                return new VideoField(new URL(data), id, false)
-            case Types.Tuple:
-                return new TupleField(data, id, false);
-            case Types.Ink:
-                return InkField.FromJson(id, data);
-            case Types.Document:
-                let doc: Document = new Document(id, false)
-                let fields: [string, string][] = data as [string, string][]
-                fields.forEach(element => {
-                    doc._proxies.set(element[0], element[1]);
-                });
-                return doc
-            default:
-                throw Error("Error, unrecognized field type received from server. If you just created a new field type, be sure to add it here");
-        }
+    switch (type) {
+      case Types.Minimized:
+        return new MinimizedField(data, id, false);
+      case Types.Number:
+        return new NumberField(data, id, false);
+      case Types.Text:
+        return new TextField(data, id, false);
+      case Types.Html:
+        return new HtmlField(data, id, false);
+      case Types.Web:
+        console.log("LOOK HERE! " + data);
+        return new WebField(new URL(data), id, false);
+      case Types.RichText:
+        return new RichTextField(data, id, false);
+      case Types.Key:
+        return new Key(data, id, false);
+      case Types.Image:
+        return new ImageField(new URL(data), id, false);
+      case Types.HistogramOp:
+        return HistogramField.FromJson(id, data);
+      case Types.PDF:
+        return new PDFField(new URL(data), id, false);
+      case Types.List:
+        return ListField.FromJson(id, data);
+      case Types.Audio:
+        return new AudioField(new URL(data), id, false);
+      case Types.Video:
+        return new VideoField(new URL(data), id, false);
+      case Types.Tuple:
+        return new TupleField(data, id, false);
+      case Types.Ink:
+        return InkField.FromJson(id, data);
+      case Types.Document:
+        let doc: Document = new Document(id, false);
+        let fields: [string, string][] = data as [string, string][];
+        fields.forEach(element => {
+          doc._proxies.set(element[0], element[1]);
+        });
+        return doc;
+      default:
+        throw Error(
+          "Error, unrecognized field type received from server. If you just created a new field type, be sure to add it here"
+        );
     }
-}
\ No newline at end of file
+  }
+}
-- 
cgit v1.2.3-70-g09d2


From bc572b4459455e6b046972b0f984868acc6701b5 Mon Sep 17 00:00:00 2001
From: Monika Hedman <monika_hedman@brown.edu>
Date: Tue, 2 Apr 2019 18:17:53 -0400
Subject: clean up AGAIN

---
 build/index.html       |  24 +-
 src/fields/Document.ts | 717 ++++++++++++++++++++++++++-----------------------
 2 files changed, 393 insertions(+), 348 deletions(-)

(limited to 'src/fields')

diff --git a/build/index.html b/build/index.html
index 2818d7c8b..fda212af4 100644
--- a/build/index.html
+++ b/build/index.html
@@ -1,16 +1,12 @@
 <html>
-  <head>
-    <title>Dash Web</title>
-    <link
-      rel="stylesheet"
-      href="https://use.fontawesome.com/releases/v5.8.1/css/all.css"
-      integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf"
-      crossorigin="anonymous"
-    />
-  </head>
 
-  <body>
-    <div id="root"></div>
-    <script src="./bundle.js"></script>
-  </body>
-</html>
+<head>
+  <title>Dash Web</title>
+</head>
+
+<body>
+  <div id="root"></div>
+  <script src="./bundle.js"></script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/src/fields/Document.ts b/src/fields/Document.ts
index 5131d89ca..8e71019a4 100644
--- a/src/fields/Document.ts
+++ b/src/fields/Document.ts
@@ -1,6 +1,6 @@
-import { Key } from "./Key"
+import { Key } from "./Key";
 import { KeyStore } from "./KeyStore";
-import { Field, Cast, FieldWaiting, FieldValue, FieldId, Opt } from "./Field"
+import { Field, Cast, FieldWaiting, FieldValue, FieldId, Opt } from "./Field";
 import { NumberField } from "./NumberField";
 import { ObservableMap, computed, action, runInAction } from "mobx";
 import { TextField } from "./TextField";
@@ -9,366 +9,415 @@ import { Server } from "../client/Server";
 import { Types } from "../server/Message";
 import { UndoManager } from "../client/util/UndoManager";
 import { HtmlField } from "./HtmlField";
-import { MinimizedField } from "./MinimizedField";
 
 export class Document extends Field {
-    //TODO tfs: We should probably store FieldWaiting in fields when we request it from the server so that we don't set up multiple server gets for the same document and field
-    public fields: ObservableMap<string, { key: Key, field: Field }> = new ObservableMap();
-    public _proxies: ObservableMap<string, FieldId> = new ObservableMap();
-
-    constructor(id?: string, save: boolean = true) {
-        super(id)
-
-        if (save) {
-            Server.UpdateField(this)
-        }
-    }
-
-    UpdateFromServer(data: [string, string][]) {
-        for (const key in data) {
-            const element = data[key];
-            this._proxies.set(element[0], element[1]);
-        }
-    }
-
-    public Width = () => { return this.GetNumber(KeyStore.Width, 0) }
-    public Height = () => { return this.GetNumber(KeyStore.Height, this.GetNumber(KeyStore.NativeWidth, 0) ? this.GetNumber(KeyStore.NativeHeight, 0) / this.GetNumber(KeyStore.NativeWidth, 0) * this.GetNumber(KeyStore.Width, 0) : 0) }
-    public Scale = () => { return this.GetNumber(KeyStore.Scale, 1) }
-
-    @computed
-    public get Title(): string {
-        let title = this.Get(KeyStore.Title, true);
-        if (title)
-            if (title != FieldWaiting && title instanceof TextField)
-                return title.Data;
-            else return "-waiting-";
-        let parTitle = this.GetT(KeyStore.Title, TextField);
-        if (parTitle)
-            if (parTitle != FieldWaiting)
-                return parTitle.Data + ".alias";
-            else return "-waiting-.alias";
-        return "-untitled-";
+  //TODO tfs: We should probably store FieldWaiting in fields when we request it from the server so that we don't set up multiple server gets for the same document and field
+  public fields: ObservableMap<
+    string,
+    { key: Key; field: Field }
+  > = new ObservableMap();
+  public _proxies: ObservableMap<string, FieldId> = new ObservableMap();
+
+  constructor(id?: string, save: boolean = true) {
+    super(id);
+
+    if (save) {
+      Server.UpdateField(this);
     }
+  }
 
-    @computed
-    public get Fields() {
-        return this.fields;
+  UpdateFromServer(data: [string, string][]) {
+    for (const key in data) {
+      const element = data[key];
+      this._proxies.set(element[0], element[1]);
     }
-
-    /**
-     * Get the field in the document associated with the given key. If the
-     * associated field has not yet been filled in from the server, a request
-     * to the server will automatically be sent, the value will be filled in 
-     * when the request is completed, and {@link Field.ts#FieldWaiting} will be returned.
-     * @param key - The key of the value to get
-     * @param ignoreProto - If true, ignore any prototype this document
-     * might have and only search for the value on this immediate document.
-     * If false (default), search up the prototype chain, starting at this document,
-     * for a document that has a field associated with the given key, and return the first
-     * one found.
-     * 
-     * @returns If the document does not have a field associated with the given key, returns `undefined`.
-     * If the document does have an associated field, but the field has not been fetched from the server, returns {@link Field.ts#FieldWaiting}.
-     * If the document does have an associated field, and the field has not been fetched from the server, returns the associated field.
-     */
-    Get(key: Key, ignoreProto: boolean = false): FieldValue<Field> {
-        let field: FieldValue<Field>;
-        if (ignoreProto) {
-            if (this.fields.has(key.Id)) {
-                field = this.fields.get(key.Id)!.field;
-            } else if (this._proxies.has(key.Id)) {
-                Server.GetDocumentField(this, key);
-                /*
+  }
+
+  public Width = () => {
+    return this.GetNumber(KeyStore.Width, 0);
+  };
+  public Height = () => {
+    return this.GetNumber(
+      KeyStore.Height,
+      this.GetNumber(KeyStore.NativeWidth, 0)
+        ? (this.GetNumber(KeyStore.NativeHeight, 0) /
+            this.GetNumber(KeyStore.NativeWidth, 0)) *
+            this.GetNumber(KeyStore.Width, 0)
+        : 0
+    );
+  };
+  public Scale = () => {
+    return this.GetNumber(KeyStore.Scale, 1);
+  };
+
+  @computed
+  public get Title(): string {
+    let title = this.Get(KeyStore.Title, true);
+    if (title)
+      if (title != FieldWaiting && title instanceof TextField)
+        return title.Data;
+      else return "-waiting-";
+    let parTitle = this.GetT(KeyStore.Title, TextField);
+    if (parTitle)
+      if (parTitle != FieldWaiting) return parTitle.Data + ".alias";
+      else return "-waiting-.alias";
+    return "-untitled-";
+  }
+
+  @computed
+  public get Fields() {
+    return this.fields;
+  }
+
+  /**
+   * Get the field in the document associated with the given key. If the
+   * associated field has not yet been filled in from the server, a request
+   * to the server will automatically be sent, the value will be filled in
+   * when the request is completed, and {@link Field.ts#FieldWaiting} will be returned.
+   * @param key - The key of the value to get
+   * @param ignoreProto - If true, ignore any prototype this document
+   * might have and only search for the value on this immediate document.
+   * If false (default), search up the prototype chain, starting at this document,
+   * for a document that has a field associated with the given key, and return the first
+   * one found.
+   *
+   * @returns If the document does not have a field associated with the given key, returns `undefined`.
+   * If the document does have an associated field, but the field has not been fetched from the server, returns {@link Field.ts#FieldWaiting}.
+   * If the document does have an associated field, and the field has not been fetched from the server, returns the associated field.
+   */
+  Get(key: Key, ignoreProto: boolean = false): FieldValue<Field> {
+    let field: FieldValue<Field>;
+    if (ignoreProto) {
+      if (this.fields.has(key.Id)) {
+        field = this.fields.get(key.Id)!.field;
+      } else if (this._proxies.has(key.Id)) {
+        Server.GetDocumentField(this, key);
+        /*
                 The field might have been instantly filled from the cache
                 Maybe we want to just switch back to returning the value
                 from Server.GetDocumentField if it's in the cache
                 */
-                if (this.fields.has(key.Id)) {
-                    field = this.fields.get(key.Id)!.field;
-                } else {
-                    field = FieldWaiting;
-                }
-            }
+        if (this.fields.has(key.Id)) {
+          field = this.fields.get(key.Id)!.field;
         } else {
-            let doc: FieldValue<Document> = this;
-            while (doc && doc != FieldWaiting && field != FieldWaiting) {
-                let curField = doc.fields.get(key.Id);
-                let curProxy = doc._proxies.get(key.Id);
-                if (!curField || (curProxy && curField.field.Id !== curProxy)) {
-                    if (curProxy) {
-                        Server.GetDocumentField(doc, key);
-                        /*
+          field = FieldWaiting;
+        }
+      }
+    } else {
+      let doc: FieldValue<Document> = this;
+      while (doc && doc != FieldWaiting && field != FieldWaiting) {
+        let curField = doc.fields.get(key.Id);
+        let curProxy = doc._proxies.get(key.Id);
+        if (!curField || (curProxy && curField.field.Id !== curProxy)) {
+          if (curProxy) {
+            Server.GetDocumentField(doc, key);
+            /*
                         The field might have been instantly filled from the cache
                         Maybe we want to just switch back to returning the value
                         from Server.GetDocumentField if it's in the cache
                         */
-                        if (this.fields.has(key.Id)) {
-                            field = this.fields.get(key.Id)!.field;
-                        } else {
-                            field = FieldWaiting;
-                        }
-                        break;
-                    }
-                    if ((doc.fields.has(KeyStore.Prototype.Id) || doc._proxies.has(KeyStore.Prototype.Id))) {
-                        doc = doc.GetPrototype();
-                    } else {
-                        break;
-                    }
-                } else {
-                    field = curField.field;
-                    break;
-                }
+            if (this.fields.has(key.Id)) {
+              field = this.fields.get(key.Id)!.field;
+            } else {
+              field = FieldWaiting;
             }
-            if (doc == FieldWaiting)
-                field = FieldWaiting;
-        }
-
-        return field;
-    }
-
-    /**
-     * Tries to get the field associated with the given key, and if there is an
-     * associated field, calls the given callback with that field.
-     * @param key - The key of the value to get
-     * @param callback - A function that will be called with the associated field, if it exists,
-     * once it is fetched from the server (this may be immediately if the field has already been fetched).
-     * Note: The callback will not be called if there is no associated field.
-     * @returns `true` if the field exists on the document and `callback` will be called, and `false` otherwise
-     */
-    GetAsync(key: Key, callback: (field: Opt<Field>) => void): void {
-        //TODO: This currently doesn't deal with prototypes
-        let field = this.fields.get(key.Id);
-        if (field && field.field) {
-            callback(field.field);
-        } else if (this._proxies.has(key.Id)) {
-            Server.GetDocumentField(this, key, callback);
-        } else if (this._proxies.has(KeyStore.Prototype.Id)) {
-            this.GetTAsync(KeyStore.Prototype, Document, proto => {
-                if (proto) {
-                    proto.GetAsync(key, callback);
-                } else {
-                    callback(undefined);
-                }
-            })
-        } else {
-            callback(undefined);
-        }
-    }
-
-    GetTAsync<T extends Field>(key: Key, ctor: { new(): T }): Promise<Opt<T>>;
-    GetTAsync<T extends Field>(key: Key, ctor: { new(): T }, callback: (field: Opt<T>) => void): void;
-    GetTAsync<T extends Field>(key: Key, ctor: { new(): T }, callback?: (field: Opt<T>) => void): Promise<Opt<T>> | void {
-        let fn = (cb: (field: Opt<T>) => void) => {
-            return this.GetAsync(key, (field) => {
-                cb(Cast(field, ctor));
-            });
-        }
-        if (callback) {
-            fn(callback);
+            break;
+          }
+          if (
+            doc.fields.has(KeyStore.Prototype.Id) ||
+            doc._proxies.has(KeyStore.Prototype.Id)
+          ) {
+            doc = doc.GetPrototype();
+          } else {
+            break;
+          }
         } else {
-            return new Promise(res => fn(res));
+          field = curField.field;
+          break;
         }
+      }
+      if (doc == FieldWaiting) field = FieldWaiting;
     }
 
-    /**
-     * Same as {@link Document#GetAsync}, except a field of the given type
-     * will be created if there is no field associated with the given key,
-     * or the field associated with the given key is not of the given type.
-     * @param ctor - Constructor of the field type to get. E.g., TextField, ImageField, etc.
-     */
-    GetOrCreateAsync<T extends Field>(key: Key, ctor: { new(): T }, callback: (field: T) => void): void {
-        //This currently doesn't deal with prototypes
-        if (this._proxies.has(key.Id)) {
-            Server.GetDocumentField(this, key, (field) => {
-                if (field && field instanceof ctor) {
-                    callback(field);
-                } else {
-                    let newField = new ctor();
-                    this.Set(key, newField);
-                    callback(newField);
-                }
-            });
+    return field;
+  }
+
+  /**
+   * Tries to get the field associated with the given key, and if there is an
+   * associated field, calls the given callback with that field.
+   * @param key - The key of the value to get
+   * @param callback - A function that will be called with the associated field, if it exists,
+   * once it is fetched from the server (this may be immediately if the field has already been fetched).
+   * Note: The callback will not be called if there is no associated field.
+   * @returns `true` if the field exists on the document and `callback` will be called, and `false` otherwise
+   */
+  GetAsync(key: Key, callback: (field: Opt<Field>) => void): void {
+    //TODO: This currently doesn't deal with prototypes
+    let field = this.fields.get(key.Id);
+    if (field && field.field) {
+      callback(field.field);
+    } else if (this._proxies.has(key.Id)) {
+      Server.GetDocumentField(this, key, callback);
+    } else if (this._proxies.has(KeyStore.Prototype.Id)) {
+      this.GetTAsync(KeyStore.Prototype, Document, proto => {
+        if (proto) {
+          proto.GetAsync(key, callback);
         } else {
-            let newField = new ctor();
-            this.Set(key, newField);
-            callback(newField);
+          callback(undefined);
         }
+      });
+    } else {
+      callback(undefined);
     }
-
-    /**
-     * Same as {@link Document#Get}, except that it will additionally
-     * check if the field is of the given type.
-     * @param ctor - Constructor of the field type to get. E.g., `TextField`, `ImageField`, etc.
-     * @returns Same as {@link Document#Get}, except will return `undefined`
-     * if there is an associated field but it is of the wrong type.
-     */
-    GetT<T extends Field = Field>(key: Key, ctor: { new(...args: any[]): T }, ignoreProto: boolean = false): FieldValue<T> {
-        var getfield = this.Get(key, ignoreProto);
-        if (getfield != FieldWaiting) {
-            return Cast(getfield, ctor);
-        }
-        return FieldWaiting;
-    }
-
-    GetOrCreate<T extends Field>(key: Key, ctor: { new(): T }, ignoreProto: boolean = false): T {
-        const field = this.GetT(key, ctor, ignoreProto);
-        if (field && field != FieldWaiting) {
-            return field;
-        }
-        const newField = new ctor();
-        this.Set(key, newField);
-        return newField;
-    }
-
-    GetData<T, U extends Field & { Data: T }>(key: Key, ctor: { new(): U }, defaultVal: T): T {
-        let val = this.Get(key);
-        let vval = (val && val instanceof ctor) ? val.Data : defaultVal;
-        return vval;
-    }
-
-    // GetMinimized(key: Key, defaultVal: boolean): boolean {
-    //     return this.GetData(key, MinimizedField, defaultVal);
-    // }
-
-    GetHtml(key: Key, defaultVal: string): string {
-        return this.GetData(key, HtmlField, defaultVal);
-    }
-
-    GetNumber(key: Key, defaultVal: number): number {
-        return this.GetData(key, NumberField, defaultVal);
-    }
-
-    GetText(key: Key, defaultVal: string): string {
-        return this.GetData(key, TextField, defaultVal);
+  }
+
+  GetTAsync<T extends Field>(key: Key, ctor: { new (): T }): Promise<Opt<T>>;
+  GetTAsync<T extends Field>(
+    key: Key,
+    ctor: { new (): T },
+    callback: (field: Opt<T>) => void
+  ): void;
+  GetTAsync<T extends Field>(
+    key: Key,
+    ctor: { new (): T },
+    callback?: (field: Opt<T>) => void
+  ): Promise<Opt<T>> | void {
+    let fn = (cb: (field: Opt<T>) => void) => {
+      return this.GetAsync(key, field => {
+        cb(Cast(field, ctor));
+      });
+    };
+    if (callback) {
+      fn(callback);
+    } else {
+      return new Promise(res => fn(res));
     }
-
-    GetList<T extends Field>(key: Key, defaultVal: T[]): T[] {
-        return this.GetData<T[], ListField<T>>(key, ListField, defaultVal)
-    }
-
-    @action
-    Set(key: Key, field: Field | undefined, setOnPrototype = false): void {
-        let old = this.fields.get(key.Id);
-        let oldField = old ? old.field : undefined;
-        if (setOnPrototype) {
-            this.SetOnPrototype(key, field)
-        }
-        else {
-            if (field) {
-                this.fields.set(key.Id, { key, field });
-                this._proxies.set(key.Id, field.Id)
-                // Server.AddDocumentField(this, key, field);
-            } else {
-                this.fields.delete(key.Id);
-                this._proxies.delete(key.Id)
-                // Server.DeleteDocumentField(this, key);
-            }
-            Server.UpdateField(this);
-        }
-        if (oldField || field) {
-            UndoManager.AddEvent({
-                undo: () => this.Set(key, oldField, setOnPrototype),
-                redo: () => this.Set(key, field, setOnPrototype)
-            })
-        }
-    }
-
-    @action
-    SetOnPrototype(key: Key, field: Field | undefined): void {
-        this.GetTAsync(KeyStore.Prototype, Document, (f: Opt<Document>) => {
-            f && f.Set(key, field)
-        })
-    }
-
-    @action
-    SetDataOnPrototype<T, U extends Field & { Data: T }>(key: Key, value: T, ctor: { new(): U }, replaceWrongType = true) {
-        this.GetTAsync(KeyStore.Prototype, Document, (f: Opt<Document>) => {
-            f && f.SetData(key, value, ctor)
-        })
-    }
-
-    @action
-    SetData<T, U extends Field & { Data: T }>(key: Key, value: T, ctor: { new(data: T): U }, replaceWrongType = true) {
-        let field = this.Get(key, true);
-        if (field instanceof ctor) {
-            field.Data = value;
-        } else if (!field || replaceWrongType) {
-            let newField = new ctor(value);
-            // newField.Data = value;
-            this.Set(key, newField);
-        }
-    }
-
-    @action
-    SetText(key: Key, value: string, replaceWrongType = true) {
-        this.SetData(key, value, TextField, replaceWrongType);
-    }
-
-    @action
-    SetNumber(key: Key, value: number, replaceWrongType = true) {
-        this.SetData(key, value, NumberField, replaceWrongType);
-    }
-
-    GetPrototype(): FieldValue<Document> {
-        return this.GetT(KeyStore.Prototype, Document, true);
-    }
-
-    GetAllPrototypes(): Document[] {
-        let protos: Document[] = [];
-        let doc: FieldValue<Document> = this;
-        while (doc && doc != FieldWaiting) {
-            protos.push(doc);
-            doc = doc.GetPrototype();
+  }
+
+  /**
+   * Same as {@link Document#GetAsync}, except a field of the given type
+   * will be created if there is no field associated with the given key,
+   * or the field associated with the given key is not of the given type.
+   * @param ctor - Constructor of the field type to get. E.g., TextField, ImageField, etc.
+   */
+  GetOrCreateAsync<T extends Field>(
+    key: Key,
+    ctor: { new (): T },
+    callback: (field: T) => void
+  ): void {
+    //This currently doesn't deal with prototypes
+    if (this._proxies.has(key.Id)) {
+      Server.GetDocumentField(this, key, field => {
+        if (field && field instanceof ctor) {
+          callback(field);
+        } else {
+          let newField = new ctor();
+          this.Set(key, newField);
+          callback(newField);
         }
-        return protos;
-    }
-
-    CreateAlias(id?: string): Document {
-        let alias = new Document(id)
-        this.GetTAsync(KeyStore.Prototype, Document, (f: Opt<Document>) => {
-            f && alias.Set(KeyStore.Prototype, f)
-        })
-
-        return alias
+      });
+    } else {
+      let newField = new ctor();
+      this.Set(key, newField);
+      callback(newField);
     }
-
-    MakeDelegate(id?: string): Document {
-        let delegate = new Document(id);
-
-        delegate.Set(KeyStore.Prototype, this);
-
-        return delegate;
+  }
+
+  /**
+   * Same as {@link Document#Get}, except that it will additionally
+   * check if the field is of the given type.
+   * @param ctor - Constructor of the field type to get. E.g., `TextField`, `ImageField`, etc.
+   * @returns Same as {@link Document#Get}, except will return `undefined`
+   * if there is an associated field but it is of the wrong type.
+   */
+  GetT<T extends Field = Field>(
+    key: Key,
+    ctor: { new (...args: any[]): T },
+    ignoreProto: boolean = false
+  ): FieldValue<T> {
+    var getfield = this.Get(key, ignoreProto);
+    if (getfield != FieldWaiting) {
+      return Cast(getfield, ctor);
     }
-
-    ToScriptString(): string {
-        return "";
+    return FieldWaiting;
+  }
+
+  GetOrCreate<T extends Field>(
+    key: Key,
+    ctor: { new (): T },
+    ignoreProto: boolean = false
+  ): T {
+    const field = this.GetT(key, ctor, ignoreProto);
+    if (field && field != FieldWaiting) {
+      return field;
     }
-
-    TrySetValue(value: any): boolean {
-        throw new Error("Method not implemented.");
+    const newField = new ctor();
+    this.Set(key, newField);
+    return newField;
+  }
+
+  GetData<T, U extends Field & { Data: T }>(
+    key: Key,
+    ctor: { new (): U },
+    defaultVal: T
+  ): T {
+    let val = this.Get(key);
+    let vval = val && val instanceof ctor ? val.Data : defaultVal;
+    return vval;
+  }
+
+  GetHtml(key: Key, defaultVal: string): string {
+    return this.GetData(key, HtmlField, defaultVal);
+  }
+
+  GetNumber(key: Key, defaultVal: number): number {
+    return this.GetData(key, NumberField, defaultVal);
+  }
+
+  GetText(key: Key, defaultVal: string): string {
+    return this.GetData(key, TextField, defaultVal);
+  }
+
+  GetList<T extends Field>(key: Key, defaultVal: T[]): T[] {
+    return this.GetData<T[], ListField<T>>(key, ListField, defaultVal);
+  }
+
+  @action
+  Set(key: Key, field: Field | undefined, setOnPrototype = false): void {
+    let old = this.fields.get(key.Id);
+    let oldField = old ? old.field : undefined;
+    if (setOnPrototype) {
+      this.SetOnPrototype(key, field);
+    } else {
+      if (field) {
+        this.fields.set(key.Id, { key, field });
+        this._proxies.set(key.Id, field.Id);
+        // Server.AddDocumentField(this, key, field);
+      } else {
+        this.fields.delete(key.Id);
+        this._proxies.delete(key.Id);
+        // Server.DeleteDocumentField(this, key);
+      }
+      Server.UpdateField(this);
     }
-    GetValue() {
-        return this.Title;
-        var title = (this._proxies.has(KeyStore.Title.Id) ? "???" : this.Title) + "(" + this.Id + ")";
-        return title;
-        //throw new Error("Method not implemented.");
+    if (oldField || field) {
+      UndoManager.AddEvent({
+        undo: () => this.Set(key, oldField, setOnPrototype),
+        redo: () => this.Set(key, field, setOnPrototype)
+      });
     }
-    Copy(): Field {
-        throw new Error("Method not implemented.");
+  }
+
+  @action
+  SetOnPrototype(key: Key, field: Field | undefined): void {
+    this.GetTAsync(KeyStore.Prototype, Document, (f: Opt<Document>) => {
+      f && f.Set(key, field);
+    });
+  }
+
+  @action
+  SetDataOnPrototype<T, U extends Field & { Data: T }>(
+    key: Key,
+    value: T,
+    ctor: { new (): U },
+    replaceWrongType = true
+  ) {
+    this.GetTAsync(KeyStore.Prototype, Document, (f: Opt<Document>) => {
+      f && f.SetData(key, value, ctor);
+    });
+  }
+
+  @action
+  SetData<T, U extends Field & { Data: T }>(
+    key: Key,
+    value: T,
+    ctor: { new (data: T): U },
+    replaceWrongType = true
+  ) {
+    let field = this.Get(key, true);
+    if (field instanceof ctor) {
+      field.Data = value;
+    } else if (!field || replaceWrongType) {
+      let newField = new ctor(value);
+      // newField.Data = value;
+      this.Set(key, newField);
     }
-
-    ToJson(): { type: Types, data: [string, string][], _id: string } {
-        let fields: [string, string][] = []
-        this._proxies.forEach((field, key) => {
-            if (field) {
-                fields.push([key, field as string])
-            }
-        });
-
-        return {
-            type: Types.Document,
-            data: fields,
-            _id: this.Id
-        }
+  }
+
+  @action
+  SetText(key: Key, value: string, replaceWrongType = true) {
+    this.SetData(key, value, TextField, replaceWrongType);
+  }
+
+  @action
+  SetNumber(key: Key, value: number, replaceWrongType = true) {
+    this.SetData(key, value, NumberField, replaceWrongType);
+  }
+
+  GetPrototype(): FieldValue<Document> {
+    return this.GetT(KeyStore.Prototype, Document, true);
+  }
+
+  GetAllPrototypes(): Document[] {
+    let protos: Document[] = [];
+    let doc: FieldValue<Document> = this;
+    while (doc && doc != FieldWaiting) {
+      protos.push(doc);
+      doc = doc.GetPrototype();
     }
-}
\ No newline at end of file
+    return protos;
+  }
+
+  CreateAlias(id?: string): Document {
+    let alias = new Document(id);
+    this.GetTAsync(KeyStore.Prototype, Document, (f: Opt<Document>) => {
+      f && alias.Set(KeyStore.Prototype, f);
+    });
+
+    return alias;
+  }
+
+  MakeDelegate(id?: string): Document {
+    let delegate = new Document(id);
+
+    delegate.Set(KeyStore.Prototype, this);
+
+    return delegate;
+  }
+
+  ToScriptString(): string {
+    return "";
+  }
+
+  TrySetValue(value: any): boolean {
+    throw new Error("Method not implemented.");
+  }
+  GetValue() {
+    return this.Title;
+    var title =
+      (this._proxies.has(KeyStore.Title.Id) ? "???" : this.Title) +
+      "(" +
+      this.Id +
+      ")";
+    return title;
+    //throw new Error("Method not implemented.");
+  }
+  Copy(): Field {
+    throw new Error("Method not implemented.");
+  }
+
+  ToJson(): { type: Types; data: [string, string][]; _id: string } {
+    let fields: [string, string][] = [];
+    this._proxies.forEach((field, key) => {
+      if (field) {
+        fields.push([key, field as string]);
+      }
+    });
+
+    return {
+      type: Types.Document,
+      data: fields,
+      _id: this.Id
+    };
+  }
+}
-- 
cgit v1.2.3-70-g09d2


From 52dade42e61a1d147bf43ece7f2b1d7b3d7b6b6a Mon Sep 17 00:00:00 2001
From: bob <bcz@cs.brown.edu>
Date: Wed, 3 Apr 2019 16:12:31 -0400
Subject: changed boolean.  and editor indentation.

---
 .vscode/settings.json                              |   3 +-
 src/client/views/nodes/DocumentView.tsx            | 854 ++++++++++-----------
 src/fields/BooleanField.ts                         |  25 +
 src/fields/MinimizedField.tsx                      |  29 -
 src/server/ServerUtil.ts                           | 116 +--
 src/server/database.ts                             |  10 +-
 .../upload_a6a70d84ebb65febf7900e29f52cc86d.pdf    | Bin 0 -> 1043556 bytes
 7 files changed, 509 insertions(+), 528 deletions(-)
 create mode 100644 src/fields/BooleanField.ts
 delete mode 100644 src/fields/MinimizedField.tsx
 create mode 100644 src/server/public/files/upload_a6a70d84ebb65febf7900e29f52cc86d.pdf

(limited to 'src/fields')

diff --git a/.vscode/settings.json b/.vscode/settings.json
index 081b05b38..fc315ffaf 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -7,6 +7,7 @@
         "**/.DS_Store": true,
     },
     "editor.formatOnSave": true,
+    "editor.detectIndentation": false,
     "typescript.format.insertSpaceAfterOpeningAndBeforeClosingNonemptyBrackets": false,
     "typescript.format.insertSpaceAfterOpeningAndBeforeClosingNonemptyBraces": true
-}
+}
\ No newline at end of file
diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index bc627015c..714ab9447 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -1,19 +1,13 @@
-import {
-  action,
-  computed,
-  IReactionDisposer,
-  reaction,
-  runInAction,
-  observable
-} from "mobx";
-import { library } from "@fortawesome/fontawesome-svg-core";
+import { action, computed, IReactionDisposer, reaction, runInAction } from "mobx";
 import { observer } from "mobx-react";
 import { Document } from "../../../fields/Document";
-import { Field, Opt, FieldWaiting } from "../../../fields/Field";
+import { Field, FieldWaiting, Opt } from "../../../fields/Field";
 import { Key } from "../../../fields/Key";
 import { KeyStore } from "../../../fields/KeyStore";
 import { ListField } from "../../../fields/ListField";
+import { BooleanField } from "../../../fields/BooleanField";
 import { TextField } from "../../../fields/TextField";
+import { ServerUtils } from "../../../server/ServerUtil";
 import { Utils } from "../../../Utils";
 import { Documents } from "../../documents/Documents";
 import { DocumentManager } from "../../util/DocumentManager";
@@ -21,34 +15,28 @@ import { DragManager } from "../../util/DragManager";
 import { SelectionManager } from "../../util/SelectionManager";
 import { Transform } from "../../util/Transform";
 import { CollectionDockingView } from "../collections/CollectionDockingView";
-import {
-  CollectionView,
-  CollectionViewType
-} from "../collections/CollectionView";
+import { CollectionView, CollectionViewType } from "../collections/CollectionView";
 import { ContextMenu } from "../ContextMenu";
 import { DocumentContentsView } from "./DocumentContentsView";
 import "./DocumentView.scss";
 import React = require("react");
-import { ServerUtils } from "../../../server/ServerUtil";
-import { DocumentDecorations } from "../DocumentDecorations";
-import { MinimizedField } from "../../../fields/MinimizedField";
 
 export interface DocumentViewProps {
-  ContainingCollectionView: Opt<CollectionView>;
-  Document: Document;
-  AddDocument?: (doc: Document, allowDuplicates: boolean) => boolean;
-  RemoveDocument?: (doc: Document) => boolean;
-  ScreenToLocalTransform: () => Transform;
-  isTopMost: boolean;
-  ContentScaling: () => number;
-  PanelWidth: () => number;
-  PanelHeight: () => number;
-  focus: (doc: Document) => void;
-  SelectOnLoad: boolean;
+    ContainingCollectionView: Opt<CollectionView>;
+    Document: Document;
+    AddDocument?: (doc: Document, allowDuplicates: boolean) => boolean;
+    RemoveDocument?: (doc: Document) => boolean;
+    ScreenToLocalTransform: () => Transform;
+    isTopMost: boolean;
+    ContentScaling: () => number;
+    PanelWidth: () => number;
+    PanelHeight: () => number;
+    focus: (doc: Document) => void;
+    SelectOnLoad: boolean;
 }
 export interface JsxArgs extends DocumentViewProps {
-  Keys: { [name: string]: Key };
-  Fields: { [name: string]: Field };
+    Keys: { [name: string]: Key };
+    Fields: { [name: string]: Field };
 }
 
 /*
@@ -67,448 +55,448 @@ Example usage of this function:
     }
 */
 export function FakeJsxArgs(keys: string[], fields: string[] = []): JsxArgs {
-  let Keys: { [name: string]: any } = {};
-  let Fields: { [name: string]: any } = {};
-  for (const key of keys) {
-    let fn = () => { };
-    Object.defineProperty(fn, "name", { value: key + "Key" });
-    Keys[key] = fn;
-  }
-  for (const field of fields) {
-    let fn = () => { };
-    Object.defineProperty(fn, "name", { value: field });
-    Fields[field] = fn;
-  }
-  let args: JsxArgs = {
-    Document: function Document() { },
-    DocumentView: function DocumentView() { },
-    Keys,
-    Fields
-  } as any;
-  return args;
+    let Keys: { [name: string]: any } = {};
+    let Fields: { [name: string]: any } = {};
+    for (const key of keys) {
+        let fn = () => { };
+        Object.defineProperty(fn, "name", { value: key + "Key" });
+        Keys[key] = fn;
+    }
+    for (const field of fields) {
+        let fn = () => { };
+        Object.defineProperty(fn, "name", { value: field });
+        Fields[field] = fn;
+    }
+    let args: JsxArgs = {
+        Document: function Document() { },
+        DocumentView: function DocumentView() { },
+        Keys,
+        Fields
+    } as any;
+    return args;
 }
 
 export interface JsxBindings {
-  Document: Document;
-  isSelected: () => boolean;
-  select: (isCtrlPressed: boolean) => void;
-  isTopMost: boolean;
-  SelectOnLoad: boolean;
-  [prop: string]: any;
+    Document: Document;
+    isSelected: () => boolean;
+    select: (isCtrlPressed: boolean) => void;
+    isTopMost: boolean;
+    SelectOnLoad: boolean;
+    [prop: string]: any;
 }
 
 @observer
 export class DocumentView extends React.Component<DocumentViewProps> {
-  private _mainCont = React.createRef<HTMLDivElement>();
-  private _downX: number = 0;
-  private _downY: number = 0;
+    private _mainCont = React.createRef<HTMLDivElement>();
+    private _downX: number = 0;
+    private _downY: number = 0;
 
-  private _reactionDisposer: Opt<IReactionDisposer>;
-  @computed get active(): boolean {
-    return (
-      SelectionManager.IsSelected(this) ||
-      !this.props.ContainingCollectionView ||
-      this.props.ContainingCollectionView.active()
-    );
-  }
-  @computed get topMost(): boolean {
-    return (
-      !this.props.ContainingCollectionView ||
-      this.props.ContainingCollectionView.collectionViewType ==
-      CollectionViewType.Docking
-    );
-  }
-  @computed get layout(): string {
-    return this.props.Document.GetText(
-      KeyStore.Layout,
-      "<p>Error loading layout data</p>"
-    );
-  }
-  @computed get layoutKeys(): Key[] {
-    return this.props.Document.GetData(
-      KeyStore.LayoutKeys,
-      ListField,
-      new Array<Key>()
-    );
-  }
-  @computed get layoutFields(): Key[] {
-    return this.props.Document.GetData(
-      KeyStore.LayoutFields,
-      ListField,
-      new Array<Key>()
-    );
-  }
-  screenRect = (): ClientRect | DOMRect =>
-    this._mainCont.current
-      ? this._mainCont.current.getBoundingClientRect()
-      : new DOMRect();
-  onPointerDown = (e: React.PointerEvent): void => {
-    this._downX = e.clientX;
-    this._downY = e.clientY;
-    if (e.shiftKey && e.buttons === 2) {
-      if (this.props.isTopMost) {
-        this.startDragging(e.pageX, e.pageY, e.altKey || e.ctrlKey);
-      } else
-        CollectionDockingView.Instance.StartOtherDrag([this.props.Document], e);
-      e.stopPropagation();
-    } else {
-      if (this.active && !e.isDefaultPrevented()) {
-        e.stopPropagation();
-        document.removeEventListener("pointermove", this.onPointerMove);
-        document.addEventListener("pointermove", this.onPointerMove);
-        document.removeEventListener("pointerup", this.onPointerUp);
-        document.addEventListener("pointerup", this.onPointerUp);
-      }
+    private _reactionDisposer: Opt<IReactionDisposer>;
+    @computed get active(): boolean {
+        return (
+            SelectionManager.IsSelected(this) ||
+            !this.props.ContainingCollectionView ||
+            this.props.ContainingCollectionView.active()
+        );
+    }
+    @computed get topMost(): boolean {
+        return (
+            !this.props.ContainingCollectionView ||
+            this.props.ContainingCollectionView.collectionViewType ==
+            CollectionViewType.Docking
+        );
     }
-  };
+    @computed get layout(): string {
+        return this.props.Document.GetText(
+            KeyStore.Layout,
+            "<p>Error loading layout data</p>"
+        );
+    }
+    @computed get layoutKeys(): Key[] {
+        return this.props.Document.GetData(
+            KeyStore.LayoutKeys,
+            ListField,
+            new Array<Key>()
+        );
+    }
+    @computed get layoutFields(): Key[] {
+        return this.props.Document.GetData(
+            KeyStore.LayoutFields,
+            ListField,
+            new Array<Key>()
+        );
+    }
+    screenRect = (): ClientRect | DOMRect =>
+        this._mainCont.current
+            ? this._mainCont.current.getBoundingClientRect()
+            : new DOMRect();
+    onPointerDown = (e: React.PointerEvent): void => {
+        this._downX = e.clientX;
+        this._downY = e.clientY;
+        if (e.shiftKey && e.buttons === 2) {
+            if (this.props.isTopMost) {
+                this.startDragging(e.pageX, e.pageY, e.altKey || e.ctrlKey);
+            } else
+                CollectionDockingView.Instance.StartOtherDrag([this.props.Document], e);
+            e.stopPropagation();
+        } else {
+            if (this.active && !e.isDefaultPrevented()) {
+                e.stopPropagation();
+                document.removeEventListener("pointermove", this.onPointerMove);
+                document.addEventListener("pointermove", this.onPointerMove);
+                document.removeEventListener("pointerup", this.onPointerUp);
+                document.addEventListener("pointerup", this.onPointerUp);
+            }
+        }
+    };
 
-  private dropDisposer?: DragManager.DragDropDisposer;
+    private dropDisposer?: DragManager.DragDropDisposer;
 
-  componentDidMount() {
-    if (this._mainCont.current) {
-      this.dropDisposer = DragManager.MakeDropTarget(this._mainCont.current, {
-        handlers: { drop: this.drop.bind(this) }
-      });
+    componentDidMount() {
+        if (this._mainCont.current) {
+            this.dropDisposer = DragManager.MakeDropTarget(this._mainCont.current, {
+                handlers: { drop: this.drop.bind(this) }
+            });
+        }
+        runInAction(() => DocumentManager.Instance.DocumentViews.push(this));
+        this._reactionDisposer = reaction(
+            () =>
+                this.props.ContainingCollectionView &&
+                this.props.ContainingCollectionView.SelectedDocs.slice(),
+            () => {
+                if (
+                    this.props.ContainingCollectionView &&
+                    this.props.ContainingCollectionView.SelectedDocs.indexOf(
+                        this.props.Document.Id
+                    ) != -1
+                )
+                    SelectionManager.SelectDoc(this, true);
+            }
+        );
     }
-    runInAction(() => DocumentManager.Instance.DocumentViews.push(this));
-    this._reactionDisposer = reaction(
-      () =>
-        this.props.ContainingCollectionView &&
-        this.props.ContainingCollectionView.SelectedDocs.slice(),
-      () => {
-        if (
-          this.props.ContainingCollectionView &&
-          this.props.ContainingCollectionView.SelectedDocs.indexOf(
-            this.props.Document.Id
-          ) != -1
-        )
-          SelectionManager.SelectDoc(this, true);
-      }
-    );
-  }
 
-  componentDidUpdate() {
-    if (this.dropDisposer) {
-      this.dropDisposer();
-    }
-    if (this._mainCont.current) {
-      this.dropDisposer = DragManager.MakeDropTarget(this._mainCont.current, {
-        handlers: { drop: this.drop.bind(this) }
-      });
+    componentDidUpdate() {
+        if (this.dropDisposer) {
+            this.dropDisposer();
+        }
+        if (this._mainCont.current) {
+            this.dropDisposer = DragManager.MakeDropTarget(this._mainCont.current, {
+                handlers: { drop: this.drop.bind(this) }
+            });
+        }
     }
-  }
 
-  componentWillUnmount() {
-    if (this.dropDisposer) {
-      this.dropDisposer();
+    componentWillUnmount() {
+        if (this.dropDisposer) {
+            this.dropDisposer();
+        }
+        runInAction(() =>
+            DocumentManager.Instance.DocumentViews.splice(
+                DocumentManager.Instance.DocumentViews.indexOf(this),
+                1
+            )
+        );
+        if (this._reactionDisposer) {
+            this._reactionDisposer();
+        }
     }
-    runInAction(() =>
-      DocumentManager.Instance.DocumentViews.splice(
-        DocumentManager.Instance.DocumentViews.indexOf(this),
-        1
-      )
-    );
-    if (this._reactionDisposer) {
-      this._reactionDisposer();
+
+    startDragging(x: number, y: number, dropAliasOfDraggedDoc: boolean) {
+        if (this._mainCont.current) {
+            const [left, top] = this.props
+                .ScreenToLocalTransform()
+                .inverse()
+                .transformPoint(0, 0);
+            let dragData = new DragManager.DocumentDragData([this.props.Document]);
+            dragData.aliasOnDrop = dropAliasOfDraggedDoc;
+            dragData.xOffset = x - left;
+            dragData.yOffset = y - top;
+            dragData.removeDocument = (dropCollectionView: CollectionView) => {
+                if (
+                    this.props.RemoveDocument &&
+                    this.props.ContainingCollectionView !== dropCollectionView
+                ) {
+                    this.props.RemoveDocument(this.props.Document);
+                }
+            };
+            DragManager.StartDocumentDrag([this._mainCont.current], dragData, {
+                handlers: {
+                    dragComplete: action(() => { })
+                },
+                hideSource: !dropAliasOfDraggedDoc
+            });
+        }
     }
-  }
 
-  startDragging(x: number, y: number, dropAliasOfDraggedDoc: boolean) {
-    if (this._mainCont.current) {
-      const [left, top] = this.props
-        .ScreenToLocalTransform()
-        .inverse()
-        .transformPoint(0, 0);
-      let dragData = new DragManager.DocumentDragData([this.props.Document]);
-      dragData.aliasOnDrop = dropAliasOfDraggedDoc;
-      dragData.xOffset = x - left;
-      dragData.yOffset = y - top;
-      dragData.removeDocument = (dropCollectionView: CollectionView) => {
+    onPointerMove = (e: PointerEvent): void => {
+        if (e.cancelBubble) {
+            return;
+        }
         if (
-          this.props.RemoveDocument &&
-          this.props.ContainingCollectionView !== dropCollectionView
+            Math.abs(this._downX - e.clientX) > 3 ||
+            Math.abs(this._downY - e.clientY) > 3
         ) {
-          this.props.RemoveDocument(this.props.Document);
+            document.removeEventListener("pointermove", this.onPointerMove);
+            document.removeEventListener("pointerup", this.onPointerUp);
+            if (!this.topMost || e.buttons == 2 || e.altKey) {
+                this.startDragging(e.x, e.y, e.ctrlKey || e.altKey);
+            }
         }
-      };
-      DragManager.StartDocumentDrag([this._mainCont.current], dragData, {
-        handlers: {
-          dragComplete: action(() => { })
-        },
-        hideSource: !dropAliasOfDraggedDoc
-      });
-    }
-  }
-
-  onPointerMove = (e: PointerEvent): void => {
-    if (e.cancelBubble) {
-      return;
-    }
-    if (
-      Math.abs(this._downX - e.clientX) > 3 ||
-      Math.abs(this._downY - e.clientY) > 3
-    ) {
-      document.removeEventListener("pointermove", this.onPointerMove);
-      document.removeEventListener("pointerup", this.onPointerUp);
-      if (!this.topMost || e.buttons == 2 || e.altKey) {
-        this.startDragging(e.x, e.y, e.ctrlKey || e.altKey);
-      }
-    }
-    e.stopPropagation();
-    e.preventDefault();
-  };
-  onPointerUp = (e: PointerEvent): void => {
-    document.removeEventListener("pointermove", this.onPointerMove);
-    document.removeEventListener("pointerup", this.onPointerUp);
-    e.stopPropagation();
-    if (
-      Math.abs(e.clientX - this._downX) < 4 &&
-      Math.abs(e.clientY - this._downY) < 4
-    ) {
-      SelectionManager.SelectDoc(this, e.ctrlKey);
-    }
-  };
-  stopPropogation = (e: React.SyntheticEvent) => {
-    e.stopPropagation();
-  };
+        e.stopPropagation();
+        e.preventDefault();
+    };
+    onPointerUp = (e: PointerEvent): void => {
+        document.removeEventListener("pointermove", this.onPointerMove);
+        document.removeEventListener("pointerup", this.onPointerUp);
+        e.stopPropagation();
+        if (
+            Math.abs(e.clientX - this._downX) < 4 &&
+            Math.abs(e.clientY - this._downY) < 4
+        ) {
+            SelectionManager.SelectDoc(this, e.ctrlKey);
+        }
+    };
+    stopPropogation = (e: React.SyntheticEvent) => {
+        e.stopPropagation();
+    };
 
-  deleteClicked = (): void => {
-    if (this.props.RemoveDocument) {
-      this.props.RemoveDocument(this.props.Document);
-    }
-  };
+    deleteClicked = (): void => {
+        if (this.props.RemoveDocument) {
+            this.props.RemoveDocument(this.props.Document);
+        }
+    };
 
-  fieldsClicked = (e: React.MouseEvent): void => {
-    if (this.props.AddDocument) {
-      this.props.AddDocument(
-        Documents.KVPDocument(this.props.Document, { width: 300, height: 300 }),
-        false
-      );
-    }
-  };
-  fullScreenClicked = (e: React.MouseEvent): void => {
-    CollectionDockingView.Instance.OpenFullScreen(this.props.Document);
-    ContextMenu.Instance.clearItems();
-    ContextMenu.Instance.addItem({
-      description: "Close Full Screen",
-      event: this.closeFullScreenClicked
-    });
-    ContextMenu.Instance.displayMenu(e.pageX - 15, e.pageY - 15);
-  };
+    fieldsClicked = (e: React.MouseEvent): void => {
+        if (this.props.AddDocument) {
+            this.props.AddDocument(
+                Documents.KVPDocument(this.props.Document, { width: 300, height: 300 }),
+                false
+            );
+        }
+    };
+    fullScreenClicked = (e: React.MouseEvent): void => {
+        CollectionDockingView.Instance.OpenFullScreen(this.props.Document);
+        ContextMenu.Instance.clearItems();
+        ContextMenu.Instance.addItem({
+            description: "Close Full Screen",
+            event: this.closeFullScreenClicked
+        });
+        ContextMenu.Instance.displayMenu(e.pageX - 15, e.pageY - 15);
+    };
 
-  closeFullScreenClicked = (e: React.MouseEvent): void => {
-    CollectionDockingView.Instance.CloseFullScreen();
-    ContextMenu.Instance.clearItems();
-    ContextMenu.Instance.addItem({
-      description: "Full Screen",
-      event: this.fullScreenClicked
-    });
-    ContextMenu.Instance.displayMenu(e.pageX - 15, e.pageY - 15);
-  };
+    closeFullScreenClicked = (e: React.MouseEvent): void => {
+        CollectionDockingView.Instance.CloseFullScreen();
+        ContextMenu.Instance.clearItems();
+        ContextMenu.Instance.addItem({
+            description: "Full Screen",
+            event: this.fullScreenClicked
+        });
+        ContextMenu.Instance.displayMenu(e.pageX - 15, e.pageY - 15);
+    };
 
-  @action
-  public minimize = (): void => {
-    this.props.Document.SetData(
-      KeyStore.Minimized,
-      true as boolean,
-      MinimizedField
-    );
-    SelectionManager.DeselectAll();
-  };
+    @action
+    public minimize = (): void => {
+        this.props.Document.SetData(
+            KeyStore.Minimized,
+            true as boolean,
+            BooleanField
+        );
+        SelectionManager.DeselectAll();
+    };
 
-  @action
-  drop = (e: Event, de: DragManager.DropEvent) => {
-    if (de.data instanceof DragManager.LinkDragData) {
-      let sourceDoc: Document = de.data.linkSourceDocumentView.props.Document;
-      let destDoc: Document = this.props.Document;
-      if (this.props.isTopMost) {
-        return;
-      }
-      let linkDoc: Document = new Document();
+    @action
+    drop = (e: Event, de: DragManager.DropEvent) => {
+        if (de.data instanceof DragManager.LinkDragData) {
+            let sourceDoc: Document = de.data.linkSourceDocumentView.props.Document;
+            let destDoc: Document = this.props.Document;
+            if (this.props.isTopMost) {
+                return;
+            }
+            let linkDoc: Document = new Document();
 
-      destDoc.GetTAsync(KeyStore.Prototype, Document).then(protoDest =>
-        sourceDoc.GetTAsync(KeyStore.Prototype, Document).then(protoSrc =>
-          runInAction(() => {
-            linkDoc.Set(KeyStore.Title, new TextField("New Link"));
-            linkDoc.Set(KeyStore.LinkDescription, new TextField(""));
-            linkDoc.Set(KeyStore.LinkTags, new TextField("Default"));
+            destDoc.GetTAsync(KeyStore.Prototype, Document).then(protoDest =>
+                sourceDoc.GetTAsync(KeyStore.Prototype, Document).then(protoSrc =>
+                    runInAction(() => {
+                        linkDoc.Set(KeyStore.Title, new TextField("New Link"));
+                        linkDoc.Set(KeyStore.LinkDescription, new TextField(""));
+                        linkDoc.Set(KeyStore.LinkTags, new TextField("Default"));
 
-            let dstTarg = protoDest ? protoDest : destDoc;
-            let srcTarg = protoSrc ? protoSrc : sourceDoc;
-            linkDoc.Set(KeyStore.LinkedToDocs, dstTarg);
-            linkDoc.Set(KeyStore.LinkedFromDocs, srcTarg);
-            dstTarg.GetOrCreateAsync(
-              KeyStore.LinkedFromDocs,
-              ListField,
-              field => {
-                (field as ListField<Document>).Data.push(linkDoc);
-              }
-            );
-            srcTarg.GetOrCreateAsync(
-              KeyStore.LinkedToDocs,
-              ListField,
-              field => {
-                (field as ListField<Document>).Data.push(linkDoc);
-              }
+                        let dstTarg = protoDest ? protoDest : destDoc;
+                        let srcTarg = protoSrc ? protoSrc : sourceDoc;
+                        linkDoc.Set(KeyStore.LinkedToDocs, dstTarg);
+                        linkDoc.Set(KeyStore.LinkedFromDocs, srcTarg);
+                        dstTarg.GetOrCreateAsync(
+                            KeyStore.LinkedFromDocs,
+                            ListField,
+                            field => {
+                                (field as ListField<Document>).Data.push(linkDoc);
+                            }
+                        );
+                        srcTarg.GetOrCreateAsync(
+                            KeyStore.LinkedToDocs,
+                            ListField,
+                            field => {
+                                (field as ListField<Document>).Data.push(linkDoc);
+                            }
+                        );
+                    })
+                )
             );
-          })
-        )
-      );
-      e.stopPropagation();
-    }
-  };
+            e.stopPropagation();
+        }
+    };
 
-  onDrop = (e: React.DragEvent) => {
-    if (e.isDefaultPrevented()) {
-      return;
-    }
-    let text = e.dataTransfer.getData("text/plain");
-    if (text && text.startsWith("<div")) {
-      let oldLayout = this.props.Document.GetText(KeyStore.Layout, "");
-      let layout = text.replace("{layout}", oldLayout);
-      this.props.Document.SetText(KeyStore.Layout, layout);
-      e.stopPropagation();
-      e.preventDefault();
-    }
-  };
+    onDrop = (e: React.DragEvent) => {
+        if (e.isDefaultPrevented()) {
+            return;
+        }
+        let text = e.dataTransfer.getData("text/plain");
+        if (text && text.startsWith("<div")) {
+            let oldLayout = this.props.Document.GetText(KeyStore.Layout, "");
+            let layout = text.replace("{layout}", oldLayout);
+            this.props.Document.SetText(KeyStore.Layout, layout);
+            e.stopPropagation();
+            e.preventDefault();
+        }
+    };
 
-  @action
-  onContextMenu = (e: React.MouseEvent): void => {
-    e.stopPropagation();
-    let moved =
-      Math.abs(this._downX - e.clientX) > 3 ||
-      Math.abs(this._downY - e.clientY) > 3;
-    if (moved || e.isDefaultPrevented()) {
-      e.preventDefault();
-      return;
-    }
-    e.preventDefault();
+    @action
+    onContextMenu = (e: React.MouseEvent): void => {
+        e.stopPropagation();
+        let moved =
+            Math.abs(this._downX - e.clientX) > 3 ||
+            Math.abs(this._downY - e.clientY) > 3;
+        if (moved || e.isDefaultPrevented()) {
+            e.preventDefault();
+            return;
+        }
+        e.preventDefault();
 
-    if (!this.isMinimized()) {
-      ContextMenu.Instance.addItem({
-        description: "Minimize",
-        event: this.minimize
-      });
-    }
-    ContextMenu.Instance.addItem({
-      description: "Full Screen",
-      event: this.fullScreenClicked
-    });
-    ContextMenu.Instance.addItem({
-      description: "Fields",
-      event: this.fieldsClicked
-    });
-    ContextMenu.Instance.addItem({
-      description: "Center",
-      event: () => this.props.focus(this.props.Document)
-    });
-    ContextMenu.Instance.addItem({
-      description: "Open Right",
-      event: () =>
-        CollectionDockingView.Instance.AddRightSplit(this.props.Document)
-    });
-    ContextMenu.Instance.addItem({
-      description: "Copy URL",
-      event: () => {
-        Utils.CopyText(ServerUtils.prepend("/doc/" + this.props.Document.Id));
-      }
-    });
-    ContextMenu.Instance.addItem({
-      description: "Copy ID",
-      event: () => {
-        Utils.CopyText(this.props.Document.Id);
-      }
-    });
-    //ContextMenu.Instance.addItem({ description: "Docking", event: () => this.props.Document.SetNumber(KeyStore.ViewType, CollectionViewType.Docking) })
-    ContextMenu.Instance.displayMenu(e.pageX - 15, e.pageY - 15);
-    if (!this.topMost) {
-      // DocumentViews should stop propagation of this event
-      e.stopPropagation();
-    }
+        if (!this.isMinimized()) {
+            ContextMenu.Instance.addItem({
+                description: "Minimize",
+                event: this.minimize
+            });
+        }
+        ContextMenu.Instance.addItem({
+            description: "Full Screen",
+            event: this.fullScreenClicked
+        });
+        ContextMenu.Instance.addItem({
+            description: "Fields",
+            event: this.fieldsClicked
+        });
+        ContextMenu.Instance.addItem({
+            description: "Center",
+            event: () => this.props.focus(this.props.Document)
+        });
+        ContextMenu.Instance.addItem({
+            description: "Open Right",
+            event: () =>
+                CollectionDockingView.Instance.AddRightSplit(this.props.Document)
+        });
+        ContextMenu.Instance.addItem({
+            description: "Copy URL",
+            event: () => {
+                Utils.CopyText(ServerUtils.prepend("/doc/" + this.props.Document.Id));
+            }
+        });
+        ContextMenu.Instance.addItem({
+            description: "Copy ID",
+            event: () => {
+                Utils.CopyText(this.props.Document.Id);
+            }
+        });
+        //ContextMenu.Instance.addItem({ description: "Docking", event: () => this.props.Document.SetNumber(KeyStore.ViewType, CollectionViewType.Docking) })
+        ContextMenu.Instance.displayMenu(e.pageX - 15, e.pageY - 15);
+        if (!this.topMost) {
+            // DocumentViews should stop propagation of this event
+            e.stopPropagation();
+        }
 
-    ContextMenu.Instance.addItem({
-      description: "Delete",
-      event: this.deleteClicked
-    });
-    ContextMenu.Instance.displayMenu(e.pageX - 15, e.pageY - 15);
-    SelectionManager.SelectDoc(this, e.ctrlKey);
-  };
+        ContextMenu.Instance.addItem({
+            description: "Delete",
+            event: this.deleteClicked
+        });
+        ContextMenu.Instance.displayMenu(e.pageX - 15, e.pageY - 15);
+        SelectionManager.SelectDoc(this, e.ctrlKey);
+    };
 
-  isMinimized = () => {
-    let field = this.props.Document.GetT(KeyStore.Minimized, MinimizedField);
-    if (field && field !== FieldWaiting) {
-      return field.Data;
-    }
-  };
+    isMinimized = () => {
+        let field = this.props.Document.GetT(KeyStore.Minimized, BooleanField);
+        if (field && field !== FieldWaiting) {
+            return field.Data;
+        }
+    };
 
-  @action
-  expand = () => {
-    this.props.Document.SetData(
-      KeyStore.Minimized,
-      false as boolean,
-      MinimizedField
-    );
-  };
+    @action
+    expand = () => {
+        this.props.Document.SetData(
+            KeyStore.Minimized,
+            false as boolean,
+            BooleanField
+        );
+    };
 
-  isSelected = () => {
-    return SelectionManager.IsSelected(this);
-  };
+    isSelected = () => {
+        return SelectionManager.IsSelected(this);
+    };
 
-  select = (ctrlPressed: boolean) => {
-    SelectionManager.SelectDoc(this, ctrlPressed);
-  };
+    select = (ctrlPressed: boolean) => {
+        SelectionManager.SelectDoc(this, ctrlPressed);
+    };
 
-  render() {
-    if (!this.props.Document) {
-      return null;
-    }
+    render() {
+        if (!this.props.Document) {
+            return null;
+        }
 
-    var scaling = this.props.ContentScaling();
-    var nativeWidth = this.props.Document.GetNumber(KeyStore.NativeWidth, 0);
-    var nativeHeight = this.props.Document.GetNumber(KeyStore.NativeHeight, 0);
+        var scaling = this.props.ContentScaling();
+        var nativeWidth = this.props.Document.GetNumber(KeyStore.NativeWidth, 0);
+        var nativeHeight = this.props.Document.GetNumber(KeyStore.NativeHeight, 0);
 
-    if (this.isMinimized()) {
-      return (
-        <div
-          className="minimized-box"
-          ref={this._mainCont}
-          style={{
-            transformOrigin: "left top",
-            transform: `scale(${scaling} , ${scaling})`
-          }}
-          onClick={this.expand}
-          onDrop={this.onDrop}
-          onPointerDown={this.onPointerDown}
-        />
-      );
-    } else {
-      var backgroundcolor = this.props.Document.GetText(
-        KeyStore.BackgroundColor,
-        ""
-      );
-      return (
-        <div
-          className="documentView-node"
-          ref={this._mainCont}
-          style={{
-            background: backgroundcolor,
-            width: nativeWidth > 0 ? nativeWidth.toString() + "px" : "100%",
-            height: nativeHeight > 0 ? nativeHeight.toString() + "px" : "100%",
-            transformOrigin: "left top",
-            transform: `scale(${scaling} , ${scaling})`
-          }}
-          onDrop={this.onDrop}
-          onContextMenu={this.onContextMenu}
-          onPointerDown={this.onPointerDown}
-        >
-          <DocumentContentsView
-            {...this.props}
-            isSelected={this.isSelected}
-            select={this.select}
-            layoutKey={KeyStore.Layout}
-          />
-        </div>
-      );
+        if (this.isMinimized()) {
+            return (
+                <div
+                    className="minimized-box"
+                    ref={this._mainCont}
+                    style={{
+                        transformOrigin: "left top",
+                        transform: `scale(${scaling} , ${scaling})`
+                    }}
+                    onClick={this.expand}
+                    onDrop={this.onDrop}
+                    onPointerDown={this.onPointerDown}
+                />
+            );
+        } else {
+            var backgroundcolor = this.props.Document.GetText(
+                KeyStore.BackgroundColor,
+                ""
+            );
+            return (
+                <div
+                    className="documentView-node"
+                    ref={this._mainCont}
+                    style={{
+                        background: backgroundcolor,
+                        width: nativeWidth > 0 ? nativeWidth.toString() + "px" : "100%",
+                        height: nativeHeight > 0 ? nativeHeight.toString() + "px" : "100%",
+                        transformOrigin: "left top",
+                        transform: `scale(${scaling} , ${scaling})`
+                    }}
+                    onDrop={this.onDrop}
+                    onContextMenu={this.onContextMenu}
+                    onPointerDown={this.onPointerDown}
+                >
+                    <DocumentContentsView
+                        {...this.props}
+                        isSelected={this.isSelected}
+                        select={this.select}
+                        layoutKey={KeyStore.Layout}
+                    />
+                </div>
+            );
+        }
     }
-  }
 }
diff --git a/src/fields/BooleanField.ts b/src/fields/BooleanField.ts
new file mode 100644
index 000000000..7378b30a1
--- /dev/null
+++ b/src/fields/BooleanField.ts
@@ -0,0 +1,25 @@
+import { BasicField } from "./BasicField";
+import { FieldId } from "./Field";
+import { Types } from "../server/Message";
+
+export class BooleanField extends BasicField<boolean> {
+    constructor(data: boolean = false as boolean, id?: FieldId, save: boolean = true as boolean) {
+        super(data, save, id);
+    }
+
+    ToScriptString(): string {
+        return `new BooleanField("${this.Data}")`;
+    }
+
+    Copy() {
+        return new BooleanField(this.Data);
+    }
+
+    ToJson(): { type: Types; data: boolean; _id: string } {
+        return {
+            type: Types.Minimized,
+            data: this.Data,
+            _id: this.Id
+        };
+    }
+}
diff --git a/src/fields/MinimizedField.tsx b/src/fields/MinimizedField.tsx
deleted file mode 100644
index 5dfb22e6e..000000000
--- a/src/fields/MinimizedField.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-import { BasicField } from "./BasicField";
-import { FieldId } from "./Field";
-import { Types } from "../server/Message";
-
-export class MinimizedField extends BasicField<boolean> {
-  constructor(
-    data: boolean = false as boolean,
-    id?: FieldId,
-    save: boolean = true as boolean
-  ) {
-    super(data, save, id);
-  }
-
-  ToScriptString(): string {
-    return `new MinimizedField("${this.Data}")`;
-  }
-
-  Copy() {
-    return new MinimizedField(this.Data);
-  }
-
-  ToJson(): { type: Types; data: boolean; _id: string } {
-    return {
-      type: Types.Minimized,
-      data: this.Data,
-      _id: this.Id
-    };
-  }
-}
diff --git a/src/server/ServerUtil.ts b/src/server/ServerUtil.ts
index f3c5e1d1f..d3409abf4 100644
--- a/src/server/ServerUtil.ts
+++ b/src/server/ServerUtil.ts
@@ -16,69 +16,69 @@ import { VideoField } from "../fields/VideoField";
 import { InkField } from "../fields/InkField";
 import { PDFField } from "../fields/PDFField";
 import { TupleField } from "../fields/TupleField";
-import { MinimizedField } from "../fields/MinimizedField";
+import { BooleanField } from "../fields/BooleanField";
 import { HistogramField } from "../client/northstar/dash-fields/HistogramField";
 
 export class ServerUtils {
-  public static prepend(extension: string): string {
-    return window.location.origin + extension;
-  }
+    public static prepend(extension: string): string {
+        return window.location.origin + extension;
+    }
 
-  public static FromJson(json: any): Field {
-    let obj = json;
-    let data: any = obj.data;
-    let id: string = obj._id;
-    let type: Types = obj.type;
+    public static FromJson(json: any): Field {
+        let obj = json;
+        let data: any = obj.data;
+        let id: string = obj._id;
+        let type: Types = obj.type;
 
-    if (!(data !== undefined && id && type !== undefined)) {
-      console.log(
-        "how did you manage to get an object that doesn't have a data or an id?"
-      );
-      return new TextField("Something to fill the space", Utils.GenerateGuid());
-    }
+        if (!(data !== undefined && id && type !== undefined)) {
+            console.log(
+                "how did you manage to get an object that doesn't have a data or an id?"
+            );
+            return new TextField("Something to fill the space", Utils.GenerateGuid());
+        }
 
-    switch (type) {
-      case Types.Minimized:
-        return new MinimizedField(data, id, false);
-      case Types.Number:
-        return new NumberField(data, id, false);
-      case Types.Text:
-        return new TextField(data, id, false);
-      case Types.Html:
-        return new HtmlField(data, id, false);
-      case Types.Web:
-        return new WebField(new URL(data), id, false);
-      case Types.RichText:
-        return new RichTextField(data, id, false);
-      case Types.Key:
-        return new Key(data, id, false);
-      case Types.Image:
-        return new ImageField(new URL(data), id, false);
-      case Types.HistogramOp:
-        return HistogramField.FromJson(id, data);
-      case Types.PDF:
-        return new PDFField(new URL(data), id, false);
-      case Types.List:
-        return ListField.FromJson(id, data);
-      case Types.Audio:
-        return new AudioField(new URL(data), id, false);
-      case Types.Video:
-        return new VideoField(new URL(data), id, false);
-      case Types.Tuple:
-        return new TupleField(data, id, false);
-      case Types.Ink:
-        return InkField.FromJson(id, data);
-      case Types.Document:
-        let doc: Document = new Document(id, false);
-        let fields: [string, string][] = data as [string, string][];
-        fields.forEach(element => {
-          doc._proxies.set(element[0], element[1]);
-        });
-        return doc;
-      default:
-        throw Error(
-          "Error, unrecognized field type received from server. If you just created a new field type, be sure to add it here"
-        );
+        switch (type) {
+            case Types.Minimized:
+                return new BooleanField(data, id, false);
+            case Types.Number:
+                return new NumberField(data, id, false);
+            case Types.Text:
+                return new TextField(data, id, false);
+            case Types.Html:
+                return new HtmlField(data, id, false);
+            case Types.Web:
+                return new WebField(new URL(data), id, false);
+            case Types.RichText:
+                return new RichTextField(data, id, false);
+            case Types.Key:
+                return new Key(data, id, false);
+            case Types.Image:
+                return new ImageField(new URL(data), id, false);
+            case Types.HistogramOp:
+                return HistogramField.FromJson(id, data);
+            case Types.PDF:
+                return new PDFField(new URL(data), id, false);
+            case Types.List:
+                return ListField.FromJson(id, data);
+            case Types.Audio:
+                return new AudioField(new URL(data), id, false);
+            case Types.Video:
+                return new VideoField(new URL(data), id, false);
+            case Types.Tuple:
+                return new TupleField(data, id, false);
+            case Types.Ink:
+                return InkField.FromJson(id, data);
+            case Types.Document:
+                let doc: Document = new Document(id, false);
+                let fields: [string, string][] = data as [string, string][];
+                fields.forEach(element => {
+                    doc._proxies.set(element[0], element[1]);
+                });
+                return doc;
+            default:
+                throw Error(
+                    "Error, unrecognized field type received from server. If you just created a new field type, be sure to add it here"
+                );
+        }
     }
-  }
 }
diff --git a/src/server/database.ts b/src/server/database.ts
index a42d29aac..616251c72 100644
--- a/src/server/database.ts
+++ b/src/server/database.ts
@@ -1,8 +1,4 @@
-import { action, configure } from 'mobx';
 import * as mongodb from 'mongodb';
-import { ObjectID } from 'mongodb';
-import { Transferable } from './Message';
-import { Utils } from '../Utils';
 
 export class Database {
     public static Instance = new Database()
@@ -26,9 +22,9 @@ export class Database {
                     console.log(err.message);
                     console.log(err.errmsg);
                 }
-                if (res) {
-                    console.log(JSON.stringify(res.result));
-                }
+                // if (res) {
+                //     console.log(JSON.stringify(res.result));
+                // }
                 callback()
             });
         }
diff --git a/src/server/public/files/upload_a6a70d84ebb65febf7900e29f52cc86d.pdf b/src/server/public/files/upload_a6a70d84ebb65febf7900e29f52cc86d.pdf
new file mode 100644
index 000000000..dfd6ab339
Binary files /dev/null and b/src/server/public/files/upload_a6a70d84ebb65febf7900e29f52cc86d.pdf differ
-- 
cgit v1.2.3-70-g09d2


From b78aff5115862cbfa5e704422cb738aa7fd73c64 Mon Sep 17 00:00:00 2001
From: bob <bcz@cs.brown.edu>
Date: Thu, 4 Apr 2019 14:13:29 -0400
Subject: fixed a number of smaller issues related to linking

---
 src/client/northstar/dash-nodes/HistogramBox.scss  |   5 +
 src/client/util/DragManager.ts                     | 533 +++++++-------
 src/client/util/SelectionManager.ts                |  74 +-
 src/client/views/DocumentDecorations.scss          |  61 +-
 src/client/views/DocumentDecorations.tsx           |  81 ++-
 src/client/views/InkingCanvas.scss                 |   2 +
 src/client/views/Main.scss                         |   7 +
 .../views/collections/CollectionDockingView.scss   |   2 +-
 .../views/collections/CollectionPDFView.scss       |   2 +
 .../views/collections/CollectionVideoView.scss     |   2 +
 .../views/collections/CollectionViewBase.tsx       |  20 +
 .../CollectionFreeFormLinkView.tsx                 |   8 +-
 .../CollectionFreeFormLinksView.scss               |   2 +
 .../collectionFreeForm/CollectionFreeFormView.scss |   6 +-
 .../collectionFreeForm/CollectionFreeFormView.tsx  |  13 +-
 .../collectionFreeForm/MarqueeView.scss            |   2 +
 .../collectionFreeForm/PreviewCursor.scss          |   4 +
 .../views/nodes/CollectionFreeFormDocumentView.tsx |   4 +
 src/client/views/nodes/DocumentView.scss           |   2 +
 src/client/views/nodes/PDFBox.scss                 |   4 +
 src/client/views/nodes/WebBox.scss                 |   2 +
 src/fields/Document.ts                             | 773 +++++++++++----------
 22 files changed, 882 insertions(+), 727 deletions(-)

(limited to 'src/fields')

diff --git a/src/client/northstar/dash-nodes/HistogramBox.scss b/src/client/northstar/dash-nodes/HistogramBox.scss
index b11840a65..94da36e29 100644
--- a/src/client/northstar/dash-nodes/HistogramBox.scss
+++ b/src/client/northstar/dash-nodes/HistogramBox.scss
@@ -1,6 +1,8 @@
 .histogrambox-container {
     padding: 0vw;
     position: absolute;
+    top: 0;
+    left:0;
     text-align: center;
     width: 100%;
     height: 100%;
@@ -8,6 +10,7 @@
   }
   .histogrambox-xaxislabel {
     position:absolute;
+    left:0;
     width:100%;
     text-align: center;
     bottom:0;
@@ -19,11 +22,13 @@
     position:absolute;
     height:100%;
     width: 25px;
+    left:0;
     bottom:0;
     background: lightgray;
   }
   .histogrambox-yaxislabel-text {
     position:absolute;
+    left:0;
     transform-origin: left;
     transform: rotate(-90deg);
     text-align: center;
diff --git a/src/client/util/DragManager.ts b/src/client/util/DragManager.ts
index c0f482e18..e8f8cce7c 100644
--- a/src/client/util/DragManager.ts
+++ b/src/client/util/DragManager.ts
@@ -8,304 +8,307 @@ import { CollectionView } from "../views/collections/CollectionView";
 import { DocumentView } from "../views/nodes/DocumentView";
 
 export function setupDrag(
-  _reference: React.RefObject<HTMLDivElement>,
-  docFunc: () => Document,
-  removeFunc: (containingCollection: CollectionView) => void = () => {}
+    _reference: React.RefObject<HTMLDivElement>,
+    docFunc: () => Document,
+    removeFunc: (containingCollection: CollectionView) => void = () => { }
 ) {
-  let onRowMove = action(
-    (e: PointerEvent): void => {
-      e.stopPropagation();
-      e.preventDefault();
+    let onRowMove = action(
+        (e: PointerEvent): void => {
+            e.stopPropagation();
+            e.preventDefault();
 
-      document.removeEventListener("pointermove", onRowMove);
-      document.removeEventListener("pointerup", onRowUp);
-      var dragData = new DragManager.DocumentDragData([docFunc()]);
-      dragData.removeDocument = removeFunc;
-      DragManager.StartDocumentDrag([_reference.current!], dragData);
-    }
-  );
-  let onRowUp = action(
-    (e: PointerEvent): void => {
-      document.removeEventListener("pointermove", onRowMove);
-      document.removeEventListener("pointerup", onRowUp);
-    }
-  );
-  let onItemDown = (e: React.PointerEvent) => {
-    // if (this.props.isSelected() || this.props.isTopMost) {
-    if (e.button == 0) {
-      e.stopPropagation();
-      if (e.shiftKey) {
-        CollectionDockingView.Instance.StartOtherDrag([docFunc()], e);
-      } else {
-        document.addEventListener("pointermove", onRowMove);
-        document.addEventListener("pointerup", onRowUp);
-      }
-    }
-    //}
-  };
-  return onItemDown;
+            document.removeEventListener("pointermove", onRowMove);
+            document.removeEventListener("pointerup", onRowUp);
+            var dragData = new DragManager.DocumentDragData([docFunc()]);
+            dragData.removeDocument = removeFunc;
+            DragManager.StartDocumentDrag([_reference.current!], dragData);
+        }
+    );
+    let onRowUp = action(
+        (e: PointerEvent): void => {
+            document.removeEventListener("pointermove", onRowMove);
+            document.removeEventListener("pointerup", onRowUp);
+        }
+    );
+    let onItemDown = (e: React.PointerEvent) => {
+        // if (this.props.isSelected() || this.props.isTopMost) {
+        if (e.button == 0) {
+            e.stopPropagation();
+            if (e.shiftKey) {
+                CollectionDockingView.Instance.StartOtherDrag([docFunc()], e);
+            } else {
+                document.addEventListener("pointermove", onRowMove);
+                document.addEventListener("pointerup", onRowUp);
+            }
+        }
+        //}
+    };
+    return onItemDown;
 }
 
 export namespace DragManager {
-  export function Root() {
-    const root = document.getElementById("root");
-    if (!root) {
-      throw new Error("No root element found");
+    export function Root() {
+        const root = document.getElementById("root");
+        if (!root) {
+            throw new Error("No root element found");
+        }
+        return root;
     }
-    return root;
-  }
 
-  let dragDiv: HTMLDivElement;
+    let dragDiv: HTMLDivElement;
 
-  export enum DragButtons {
-    Left = 1,
-    Right = 2,
-    Both = Left | Right
-  }
+    export enum DragButtons {
+        Left = 1,
+        Right = 2,
+        Both = Left | Right
+    }
 
-  interface DragOptions {
-    handlers: DragHandlers;
+    interface DragOptions {
+        handlers: DragHandlers;
 
-    hideSource: boolean | (() => boolean);
-  }
+        hideSource: boolean | (() => boolean);
+    }
 
-  export interface DragDropDisposer {
-    (): void;
-  }
+    export interface DragDropDisposer {
+        (): void;
+    }
 
-  export class DragCompleteEvent {}
+    export class DragCompleteEvent { }
 
-  export interface DragHandlers {
-    dragComplete: (e: DragCompleteEvent) => void;
-  }
+    export interface DragHandlers {
+        dragComplete: (e: DragCompleteEvent) => void;
+    }
 
-  export interface DropOptions {
-    handlers: DropHandlers;
-  }
-  export class DropEvent {
-    constructor(
-      readonly x: number,
-      readonly y: number,
-      readonly data: { [id: string]: any }
-    ) {}
-  }
+    export interface DropOptions {
+        handlers: DropHandlers;
+    }
+    export class DropEvent {
+        constructor(
+            readonly x: number,
+            readonly y: number,
+            readonly data: { [id: string]: any }
+        ) { }
+    }
 
-  export interface DropHandlers {
-    drop: (e: Event, de: DropEvent) => void;
-  }
+    export interface DropHandlers {
+        drop: (e: Event, de: DropEvent) => void;
+    }
 
-  export function MakeDropTarget(
-    element: HTMLElement,
-    options: DropOptions
-  ): DragDropDisposer {
-    if ("canDrop" in element.dataset) {
-      throw new Error(
-        "Element is already droppable, can't make it droppable again"
-      );
+    export function MakeDropTarget(
+        element: HTMLElement,
+        options: DropOptions
+    ): DragDropDisposer {
+        if ("canDrop" in element.dataset) {
+            throw new Error(
+                "Element is already droppable, can't make it droppable again"
+            );
+        }
+        element.dataset["canDrop"] = "true";
+        const handler = (e: Event) => {
+            const ce = e as CustomEvent<DropEvent>;
+            options.handlers.drop(e, ce.detail);
+        };
+        element.addEventListener("dashOnDrop", handler);
+        return () => {
+            element.removeEventListener("dashOnDrop", handler);
+            delete element.dataset["canDrop"];
+        };
     }
-    element.dataset["canDrop"] = "true";
-    const handler = (e: Event) => {
-      const ce = e as CustomEvent<DropEvent>;
-      options.handlers.drop(e, ce.detail);
-    };
-    element.addEventListener("dashOnDrop", handler);
-    return () => {
-      element.removeEventListener("dashOnDrop", handler);
-      delete element.dataset["canDrop"];
-    };
-  }
 
-  export class DocumentDragData {
-    constructor(dragDoc: Document[]) {
-      this.draggedDocuments = dragDoc;
-      this.droppedDocuments = dragDoc;
+    export class DocumentDragData {
+        constructor(dragDoc: Document[]) {
+            this.draggedDocuments = dragDoc;
+            this.droppedDocuments = dragDoc;
+        }
+        draggedDocuments: Document[];
+        droppedDocuments: Document[];
+        xOffset?: number;
+        yOffset?: number;
+        aliasOnDrop?: boolean;
+        removeDocument?: (collectionDrop: CollectionView) => void;
+        [id: string]: any;
     }
-    draggedDocuments: Document[];
-    droppedDocuments: Document[];
-    xOffset?: number;
-    yOffset?: number;
-    aliasOnDrop?: boolean;
-    removeDocument?: (collectionDrop: CollectionView) => void;
-    [id: string]: any;
-  }
 
-  export function StartDocumentDrag(
-    eles: HTMLElement[],
-    dragData: DocumentDragData,
-    options?: DragOptions
-  ) {
-    StartDrag(
-      eles,
-      dragData,
-      options,
-      (dropData: { [id: string]: any }) =>
-        (dropData.droppedDocuments = dragData.aliasOnDrop
-          ? dragData.draggedDocuments.map(d => d.CreateAlias())
-          : dragData.draggedDocuments)
-    );
-  }
+    export function StartDocumentDrag(
+        eles: HTMLElement[],
+        dragData: DocumentDragData,
+        options?: DragOptions
+    ) {
+        StartDrag(
+            eles,
+            dragData,
+            options,
+            (dropData: { [id: string]: any }) =>
+                (dropData.droppedDocuments = dragData.aliasOnDrop
+                    ? dragData.draggedDocuments.map(d => d.CreateAlias())
+                    : dragData.draggedDocuments)
+        );
+    }
 
-  export class LinkDragData {
-    constructor(linkSourceDoc: DocumentView) {
-      this.linkSourceDocumentView = linkSourceDoc;
+    export class LinkDragData {
+        constructor(linkSourceDoc: DocumentView) {
+            this.linkSourceDocumentView = linkSourceDoc;
+        }
+        droppedDocuments: Document[] = [];
+        linkSourceDocumentView: DocumentView;
+        [id: string]: any;
     }
-    linkSourceDocumentView: DocumentView;
-    [id: string]: any;
-  }
-  export function StartLinkDrag(
-    ele: HTMLElement,
-    dragData: LinkDragData,
-    options?: DragOptions
-  ) {
-    StartDrag([ele], dragData, options);
-  }
-  function StartDrag(
-    eles: HTMLElement[],
-    dragData: { [id: string]: any },
-    options?: DragOptions,
-    finishDrag?: (dropData: { [id: string]: any }) => void
-  ) {
-    if (!dragDiv) {
-      dragDiv = document.createElement("div");
-      dragDiv.className = "dragManager-dragDiv";
-      DragManager.Root().appendChild(dragDiv);
+    export function StartLinkDrag(
+        ele: HTMLElement,
+        dragData: LinkDragData,
+        options?: DragOptions
+    ) {
+        StartDrag([ele], dragData, options);
     }
+    function StartDrag(
+        eles: HTMLElement[],
+        dragData: { [id: string]: any },
+        options?: DragOptions,
+        finishDrag?: (dropData: { [id: string]: any }) => void
+    ) {
+        if (!dragDiv) {
+            dragDiv = document.createElement("div");
+            dragDiv.className = "dragManager-dragDiv";
+            DragManager.Root().appendChild(dragDiv);
+        }
 
-    let scaleXs: number[] = [];
-    let scaleYs: number[] = [];
-    let xs: number[] = [];
-    let ys: number[] = [];
+        let scaleXs: number[] = [];
+        let scaleYs: number[] = [];
+        let xs: number[] = [];
+        let ys: number[] = [];
 
-    const docs: Document[] =
-      dragData instanceof DocumentDragData ? dragData.draggedDocuments : [];
-    let dragElements = eles.map(ele => {
-      const w = ele.offsetWidth,
-        h = ele.offsetHeight;
-      const rect = ele.getBoundingClientRect();
-      const scaleX = rect.width / w,
-        scaleY = rect.height / h;
-      let x = rect.left,
-        y = rect.top;
-      xs.push(x);
-      ys.push(y);
-      scaleXs.push(scaleX);
-      scaleYs.push(scaleY);
-      let dragElement = ele.cloneNode(true) as HTMLElement;
-      dragElement.style.opacity = "0.7";
-      dragElement.style.position = "absolute";
-      dragElement.style.bottom = "";
-      dragElement.style.left = "";
-      dragElement.style.transformOrigin = "0 0";
-      dragElement.style.zIndex = "1000";
-      dragElement.style.transform = `translate(${x}px, ${y}px) scale(${scaleX}, ${scaleY})`;
-      dragElement.style.width = `${rect.width / scaleX}px`;
-      dragElement.style.height = `${rect.height / scaleY}px`;
+        const docs: Document[] =
+            dragData instanceof DocumentDragData ? dragData.draggedDocuments : [];
+        let dragElements = eles.map(ele => {
+            const w = ele.offsetWidth,
+                h = ele.offsetHeight;
+            const rect = ele.getBoundingClientRect();
+            const scaleX = rect.width / w,
+                scaleY = rect.height / h;
+            let x = rect.left,
+                y = rect.top;
+            xs.push(x);
+            ys.push(y);
+            scaleXs.push(scaleX);
+            scaleYs.push(scaleY);
+            let dragElement = ele.cloneNode(true) as HTMLElement;
+            dragElement.style.opacity = "0.7";
+            dragElement.style.position = "absolute";
+            dragElement.style.margin = "0";
+            dragElement.style.top = "0";
+            dragElement.style.bottom = "";
+            dragElement.style.left = "0";
+            dragElement.style.transformOrigin = "0 0";
+            dragElement.style.zIndex = "1000";
+            dragElement.style.transform = `translate(${x}px, ${y}px) scale(${scaleX}, ${scaleY})`;
+            dragElement.style.width = `${rect.width / scaleX}px`;
+            dragElement.style.height = `${rect.height / scaleY}px`;
 
-      // bcz: PDFs don't show up if you clone them because they contain a canvas.
-      //      however, PDF's have a thumbnail field that contains an image of their canvas.
-      //      So we replace the pdf's canvas with the image thumbnail
-      if (docs.length) {
-        var pdfBox = dragElement.getElementsByClassName(
-          "pdfBox-cont"
-        )[0] as HTMLElement;
-        let thumbnail = docs[0].GetT(KeyStore.Thumbnail, ImageField);
-        if (pdfBox && pdfBox.childElementCount && thumbnail) {
-          let img = new Image();
-          img!.src = thumbnail.toString();
-          img!.style.position = "absolute";
-          img!.style.width = `${rect.width / scaleX}px`;
-          img!.style.height = `${rect.height / scaleY}px`;
-          pdfBox.replaceChild(img!, pdfBox.children[0]);
+            // bcz: PDFs don't show up if you clone them because they contain a canvas.
+            //      however, PDF's have a thumbnail field that contains an image of their canvas.
+            //      So we replace the pdf's canvas with the image thumbnail
+            if (docs.length) {
+                var pdfBox = dragElement.getElementsByClassName(
+                    "pdfBox-cont"
+                )[0] as HTMLElement;
+                let thumbnail = docs[0].GetT(KeyStore.Thumbnail, ImageField);
+                if (pdfBox && pdfBox.childElementCount && thumbnail) {
+                    let img = new Image();
+                    img!.src = thumbnail.toString();
+                    img!.style.position = "absolute";
+                    img!.style.width = `${rect.width / scaleX}px`;
+                    img!.style.height = `${rect.height / scaleY}px`;
+                    pdfBox.replaceChild(img!, pdfBox.children[0]);
+                }
+            }
+
+            dragDiv.appendChild(dragElement);
+            return dragElement;
+        });
+
+        let hideSource = false;
+        if (options) {
+            if (typeof options.hideSource === "boolean") {
+                hideSource = options.hideSource;
+            } else {
+                hideSource = options.hideSource();
+            }
         }
-      }
+        eles.map(ele => (ele.hidden = hideSource));
 
-      dragDiv.appendChild(dragElement);
-      return dragElement;
-    });
+        const moveHandler = (e: PointerEvent) => {
+            e.stopPropagation();
+            e.preventDefault();
+            if (dragData instanceof DocumentDragData)
+                dragData.aliasOnDrop = e.ctrlKey || e.altKey;
+            if (e.shiftKey) {
+                abortDrag();
+                CollectionDockingView.Instance.StartOtherDrag(docs, {
+                    pageX: e.pageX,
+                    pageY: e.pageY,
+                    preventDefault: () => { },
+                    button: 0
+                });
+            }
+            dragElements.map(
+                (dragElement, i) =>
+                    (dragElement.style.transform = `translate(${(xs[i] +=
+                        e.movementX)}px, ${(ys[i] += e.movementY)}px) scale(${
+                        scaleXs[i]
+                        }, ${scaleYs[i]})`)
+            );
+        };
 
-    let hideSource = false;
-    if (options) {
-      if (typeof options.hideSource === "boolean") {
-        hideSource = options.hideSource;
-      } else {
-        hideSource = options.hideSource();
-      }
+        const abortDrag = () => {
+            document.removeEventListener("pointermove", moveHandler, true);
+            document.removeEventListener("pointerup", upHandler);
+            dragElements.map(dragElement => dragDiv.removeChild(dragElement));
+            eles.map(ele => (ele.hidden = false));
+        };
+        const upHandler = (e: PointerEvent) => {
+            abortDrag();
+            FinishDrag(eles, e, dragData, options, finishDrag);
+        };
+        document.addEventListener("pointermove", moveHandler, true);
+        document.addEventListener("pointerup", upHandler);
     }
-    eles.map(ele => (ele.hidden = hideSource));
 
-    const moveHandler = (e: PointerEvent) => {
-      e.stopPropagation();
-      e.preventDefault();
-      if (dragData instanceof DocumentDragData)
-        dragData.aliasOnDrop = e.ctrlKey || e.altKey;
-      if (e.shiftKey) {
-        abortDrag();
-        CollectionDockingView.Instance.StartOtherDrag(docs, {
-          pageX: e.pageX,
-          pageY: e.pageY,
-          preventDefault: () => {},
-          button: 0
+    function FinishDrag(
+        dragEles: HTMLElement[],
+        e: PointerEvent,
+        dragData: { [index: string]: any },
+        options?: DragOptions,
+        finishDrag?: (dragData: { [index: string]: any }) => void
+    ) {
+        let removed = dragEles.map(dragEle => {
+            let parent = dragEle.parentElement;
+            if (parent) parent.removeChild(dragEle);
+            return [dragEle, parent];
         });
-      }
-      dragElements.map(
-        (dragElement, i) =>
-          (dragElement.style.transform = `translate(${(xs[i] +=
-            e.movementX)}px, ${(ys[i] += e.movementY)}px) scale(${
-            scaleXs[i]
-          }, ${scaleYs[i]})`)
-      );
-    };
-
-    const abortDrag = () => {
-      document.removeEventListener("pointermove", moveHandler, true);
-      document.removeEventListener("pointerup", upHandler);
-      dragElements.map(dragElement => dragDiv.removeChild(dragElement));
-      eles.map(ele => (ele.hidden = false));
-    };
-    const upHandler = (e: PointerEvent) => {
-      abortDrag();
-      FinishDrag(eles, e, dragData, options, finishDrag);
-    };
-    document.addEventListener("pointermove", moveHandler, true);
-    document.addEventListener("pointerup", upHandler);
-  }
-
-  function FinishDrag(
-    dragEles: HTMLElement[],
-    e: PointerEvent,
-    dragData: { [index: string]: any },
-    options?: DragOptions,
-    finishDrag?: (dragData: { [index: string]: any }) => void
-  ) {
-    let removed = dragEles.map(dragEle => {
-      let parent = dragEle.parentElement;
-      if (parent) parent.removeChild(dragEle);
-      return [dragEle, parent];
-    });
-    const target = document.elementFromPoint(e.x, e.y);
-    removed.map(r => {
-      let dragEle: HTMLElement = r[0]!;
-      let parent: HTMLElement | null = r[1];
-      if (parent) parent.appendChild(dragEle);
-    });
-    if (target) {
-      if (finishDrag) finishDrag(dragData);
+        const target = document.elementFromPoint(e.x, e.y);
+        removed.map(r => {
+            let dragEle: HTMLElement = r[0]!;
+            let parent: HTMLElement | null = r[1];
+            if (parent) parent.appendChild(dragEle);
+        });
+        if (target) {
+            if (finishDrag) finishDrag(dragData);
 
-      target.dispatchEvent(
-        new CustomEvent<DropEvent>("dashOnDrop", {
-          bubbles: true,
-          detail: {
-            x: e.x,
-            y: e.y,
-            data: dragData
-          }
-        })
-      );
+            target.dispatchEvent(
+                new CustomEvent<DropEvent>("dashOnDrop", {
+                    bubbles: true,
+                    detail: {
+                        x: e.x,
+                        y: e.y,
+                        data: dragData
+                    }
+                })
+            );
 
-      if (options) {
-        options.handlers.dragComplete({});
-      }
+            if (options) {
+                options.handlers.dragComplete({});
+            }
+        }
+        DocumentDecorations.Instance.Hidden = false;
     }
-    DocumentDecorations.Instance.Hidden = false;
-  }
 }
diff --git a/src/client/util/SelectionManager.ts b/src/client/util/SelectionManager.ts
index 438659108..958c14491 100644
--- a/src/client/util/SelectionManager.ts
+++ b/src/client/util/SelectionManager.ts
@@ -3,48 +3,46 @@ import { DocumentView } from "../views/nodes/DocumentView";
 import { Document } from "../../fields/Document";
 
 export namespace SelectionManager {
-  class Manager {
-    @observable
-    SelectedDocuments: Array<DocumentView> = [];
-
-    @action
-    SelectDoc(doc: DocumentView, ctrlPressed: boolean): void {
-      // if doc is not in SelectedDocuments, add it
-      if (!ctrlPressed) {
-        manager.SelectedDocuments = [];
-      }
-
-      if (manager.SelectedDocuments.indexOf(doc) === -1) {
-        manager.SelectedDocuments.push(doc);
-      }
+    class Manager {
+        @observable
+        SelectedDocuments: Array<DocumentView> = [];
+
+        @action
+        SelectDoc(doc: DocumentView, ctrlPressed: boolean): void {
+            // if doc is not in SelectedDocuments, add it
+            if (!ctrlPressed) {
+                manager.SelectedDocuments = [];
+            }
+
+            if (manager.SelectedDocuments.indexOf(doc) === -1) {
+                manager.SelectedDocuments.push(doc);
+            }
+        }
     }
-  }
 
-  const manager = new Manager();
+    const manager = new Manager();
 
-  export function SelectDoc(doc: DocumentView, ctrlPressed: boolean): void {
-    if (!doc.isMinimized()) {
-      manager.SelectDoc(doc, ctrlPressed);
+    export function SelectDoc(doc: DocumentView, ctrlPressed: boolean): void {
+        manager.SelectDoc(doc, ctrlPressed);
     }
-  }
-
-  export function IsSelected(doc: DocumentView): boolean {
-    return manager.SelectedDocuments.indexOf(doc) !== -1;
-  }
-
-  export function DeselectAll(except?: Document): void {
-    let found: DocumentView | undefined = undefined;
-    if (except) {
-      for (let i = 0; i < manager.SelectedDocuments.length; i++) {
-        let view = manager.SelectedDocuments[i];
-        if (view.props.Document == except) found = view;
-      }
+
+    export function IsSelected(doc: DocumentView): boolean {
+        return manager.SelectedDocuments.indexOf(doc) !== -1;
+    }
+
+    export function DeselectAll(except?: Document): void {
+        let found: DocumentView | undefined = undefined;
+        if (except) {
+            for (let i = 0; i < manager.SelectedDocuments.length; i++) {
+                let view = manager.SelectedDocuments[i];
+                if (view.props.Document == except) found = view;
+            }
+        }
+        manager.SelectedDocuments.length = 0;
+        if (found) manager.SelectedDocuments.push(found);
     }
-    manager.SelectedDocuments.length = 0;
-    if (found) manager.SelectedDocuments.push(found);
-  }
 
-  export function SelectedDocuments(): Array<DocumentView> {
-    return manager.SelectedDocuments;
-  }
+    export function SelectedDocuments(): Array<DocumentView> {
+        return manager.SelectedDocuments;
+    }
 }
diff --git a/src/client/views/DocumentDecorations.scss b/src/client/views/DocumentDecorations.scss
index befe175b5..080c9fa1e 100644
--- a/src/client/views/DocumentDecorations.scss
+++ b/src/client/views/DocumentDecorations.scss
@@ -2,13 +2,16 @@
 
 #documentDecorations-container {
     position: absolute;
+    top: 0;
+    left:0;
     display: grid;
     z-index: 1000;
     grid-template-rows: 20px 8px 1fr 8px;
-    grid-template-columns: 8px 1fr 8px;
+    grid-template-columns: 8px 8px 1fr 8px;
     pointer-events: none;
 
     #documentDecorations-centerCont {
+        grid-column:3;
         background: none;
     }
 
@@ -18,6 +21,24 @@
         opacity: 0.8;
     }
 
+    #documentDecorations-topLeftResizer,
+    #documentDecorations-leftResizer,
+    #documentDecorations-bottomLeftResizer {
+        grid-column: 1
+    }
+
+    #documentDecorations-topResizer,
+    #documentDecorations-bottomResizer {
+        grid-column-start: 2;
+        grid-column-end: 4;
+    }
+
+    #documentDecorations-bottomRightResizer,
+    #documentDecorations-topRightResizer,
+    #documentDecorations-rightResizer {
+        grid-column:4
+    }
+
     #documentDecorations-topLeftResizer,
     #documentDecorations-bottomRightResizer {
         cursor: nwse-resize;
@@ -39,15 +60,19 @@
     }
     .title{
         background: lightblue;
-        grid-column-start:2;
-        grid-column-end: 4;
+        grid-column-start:3;
+        grid-column-end: 5;
         pointer-events: auto;
     }
 }
 
 .documentDecorations-minimizeButton {
-    background: rgb(250, 57, 9);
+    background:$alt-accent;
+    opacity: 0.8;
+    grid-column-start: 1;
+    grid-column-end: 3;
     pointer-events: all;
+    text-align: center;
 }
 .documentDecorations-background {
     background: lightblue;
@@ -87,7 +112,8 @@
 //     }
 // }
 .linkFlyout {
-    grid-column: 1/4
+    grid-column: 1/4;
+    margin-left: 25px;
 }
 
 .linkButton-empty:hover {
@@ -102,6 +128,31 @@
     cursor: pointer;
 }
 
+.linkButton-linker {
+    position:absolute;
+    bottom:0px;
+    left: 0px;
+    height: 20px;
+    width: 20px;
+    margin-top: 10px;
+    margin-right: 5px;
+    border-radius: 50%;
+    opacity: 0.9;
+    pointer-events: auto;
+    color: $dark-color;
+    border: $dark-color 1px solid;
+    text-transform: uppercase;
+    letter-spacing: 2px;
+    font-size: 75%;
+    transition: transform 0.2s;
+    text-align: center;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+.linkButton-tray {
+    grid-column: 1/4;
+}
 .linkButton-empty {
     height: 20px;
     width: 20px;
diff --git a/src/client/views/DocumentDecorations.tsx b/src/client/views/DocumentDecorations.tsx
index b74737ec9..a46087c9a 100644
--- a/src/client/views/DocumentDecorations.tsx
+++ b/src/client/views/DocumentDecorations.tsx
@@ -1,10 +1,11 @@
-import { action, computed, observable } from "mobx";
+import { action, computed, observable, trace, runInAction } from "mobx";
 import { observer } from "mobx-react";
 import { Key } from "../../fields/Key";
 //import ContentEditable from 'react-contenteditable'
 import { KeyStore } from "../../fields/KeyStore";
 import { ListField } from "../../fields/ListField";
 import { NumberField } from "../../fields/NumberField";
+import { Document } from "../../fields/Document";
 import { TextField } from "../../fields/TextField";
 import { DragManager } from "../util/DragManager";
 import { SelectionManager } from "../util/SelectionManager";
@@ -13,6 +14,7 @@ import './DocumentDecorations.scss';
 import { DocumentView } from "./nodes/DocumentView";
 import { LinkMenu } from "./nodes/LinkMenu";
 import React = require("react");
+import { FieldWaiting } from "../../fields/Field";
 const higflyout = require("@hig/flyout");
 export const { anchorPoints } = higflyout;
 export const Flyout = higflyout.default;
@@ -28,6 +30,7 @@ export class DocumentDecorations extends React.Component<{}, { value: string }>
     private _linkBoxHeight = 30;
     private _titleHeight = 20;
     private _linkButton = React.createRef<HTMLDivElement>();
+    private _linkerButton = React.createRef<HTMLDivElement>();
     //@observable private _title: string = this._documents[0].props.Document.Title;
     @observable private _title: string = this._documents.length > 0 ? this._documents[0].props.Document.Title : "";
     @observable private _fieldKey: Key = KeyStore.Title;
@@ -174,18 +177,40 @@ export class DocumentDecorations extends React.Component<{}, { value: string }>
         }
     }
 
-    onLinkButtonDown = (e: React.PointerEvent): void => {
-        // if ()
-        // let linkMenu = new LinkMenu(SelectionManager.SelectedDocuments()[0]);
-        // linkMenu.Hidden = false;
-        console.log("down");
+    onLinkerButtonDown = (e: React.PointerEvent): void => {
+        e.stopPropagation();
+        document.removeEventListener("pointermove", this.onLinkerButtonMoved)
+        document.addEventListener("pointermove", this.onLinkerButtonMoved);
+        document.removeEventListener("pointerup", this.onLinkerButtonUp)
+        document.addEventListener("pointerup", this.onLinkerButtonUp);
+    }
+    onLinkerButtonUp = (e: PointerEvent): void => {
+        document.removeEventListener("pointermove", this.onLinkerButtonMoved)
+        document.removeEventListener("pointerup", this.onLinkerButtonUp)
+        e.stopPropagation();
+    }
 
+    onLinkerButtonMoved = (e: PointerEvent): void => {
+        if (this._linkerButton.current != null) {
+            document.removeEventListener("pointermove", this.onLinkerButtonMoved)
+            document.removeEventListener("pointerup", this.onLinkerButtonUp)
+            let dragData = new DragManager.LinkDragData(SelectionManager.SelectedDocuments()[0]);
+            DragManager.StartLinkDrag(this._linkerButton.current, dragData, {
+                handlers: {
+                    dragComplete: action(() => { }),
+                },
+                hideSource: false
+            })
+        }
+        e.stopPropagation();
+    }
+
+    onLinkButtonDown = (e: React.PointerEvent): void => {
         e.stopPropagation();
         document.removeEventListener("pointermove", this.onLinkButtonMoved)
         document.addEventListener("pointermove", this.onLinkButtonMoved);
         document.removeEventListener("pointerup", this.onLinkButtonUp)
         document.addEventListener("pointerup", this.onLinkButtonUp);
-
     }
 
     onLinkButtonUp = (e: PointerEvent): void => {
@@ -194,18 +219,32 @@ export class DocumentDecorations extends React.Component<{}, { value: string }>
         e.stopPropagation();
     }
 
-
     onLinkButtonMoved = (e: PointerEvent): void => {
         if (this._linkButton.current != null) {
             document.removeEventListener("pointermove", this.onLinkButtonMoved)
-            document.removeEventListener("pointerup", this.onLinkButtonUp)
-            let dragData = new DragManager.LinkDragData(SelectionManager.SelectedDocuments()[0]);
-            DragManager.StartLinkDrag(this._linkButton.current, dragData, {
-                handlers: {
-                    dragComplete: action(() => { }),
-                },
-                hideSource: false
-            })
+            document.removeEventListener("pointerup", this.onLinkButtonUp);
+
+            let sourceDoc = SelectionManager.SelectedDocuments()[0].props.Document;
+            let srcTarg = sourceDoc.GetT(KeyStore.Prototype, Document)
+            let draggedDocs = (srcTarg && srcTarg != FieldWaiting) ?
+                srcTarg.GetList(KeyStore.LinkedToDocs, [] as Document[]).map(linkDoc =>
+                    (linkDoc.GetT(KeyStore.LinkedToDocs, Document)) as Document) : [];
+            let draggedFromDocs = (srcTarg && srcTarg != FieldWaiting) ?
+                srcTarg.GetList(KeyStore.LinkedFromDocs, [] as Document[]).map(linkDoc =>
+                    (linkDoc.GetT(KeyStore.LinkedFromDocs, Document)) as Document) : [];
+            draggedDocs.push(...draggedFromDocs);
+            if (draggedDocs.length) {
+                let dragData = new DragManager.DocumentDragData(draggedDocs.map(d => {
+                    let annot = d.GetT(KeyStore.AnnotationOn, Document); // bcz: ... needs to change ... the annotationOn document may not have been retrieved yet...
+                    return annot && annot != FieldWaiting ? annot : d;
+                }));
+                DragManager.StartDocumentDrag([this._linkButton.current], dragData, {
+                    handlers: {
+                        dragComplete: action(() => { }),
+                    },
+                    hideSource: false
+                })
+            }
         }
         e.stopPropagation();
     }
@@ -298,7 +337,6 @@ export class DocumentDecorations extends React.Component<{}, { value: string }>
     }
 
     getValue = (): string => {
-        console.log("value watched");
         if (this._title === "changed" && this._documents.length > 0) {
             let field = this._documents[0].props.Document.Get(this._fieldKey);
             if (field instanceof TextField) {
@@ -338,8 +376,7 @@ export class DocumentDecorations extends React.Component<{}, { value: string }>
             linkButton = (<Flyout
                 anchorPoint={anchorPoints.RIGHT_TOP}
                 content={
-                    <LinkMenu docView={selFirst} changeFlyout={this.changeFlyoutContent}>
-                    </LinkMenu>
+                    <LinkMenu docView={selFirst} changeFlyout={this.changeFlyoutContent} />
                 }>
                 <div className={"linkButton-" + (selFirst.props.Document.GetData(KeyStore.LinkedToDocs, ListField, []).length ? "nonempty" : "empty")} onPointerDown={this.onLinkButtonDown} >{linkCount}</div>
             </Flyout>);
@@ -361,7 +398,7 @@ export class DocumentDecorations extends React.Component<{}, { value: string }>
                 top: bounds.y - this._resizeBorderWidth / 2 - this._titleHeight,
                 opacity: this._opacity
             }}>
-                <div className="documentDecorations-minimizeButton" onPointerDown={this.onMinimizeDown}>v</div>
+                <div className="documentDecorations-minimizeButton" onPointerDown={this.onMinimizeDown}>...</div>
                 <input ref={this.keyinput} className="title" type="text" name="dynbox" value={this.getValue()} onChange={this.handleChange} onPointerDown={this.onPointerDown} onKeyPress={this.enterPressed} />
                 <div id="documentDecorations-topLeftResizer" className="documentDecorations-resizer" onPointerDown={this.onPointerDown} onContextMenu={(e) => e.preventDefault()}></div>
                 <div id="documentDecorations-topResizer" className="documentDecorations-resizer" onPointerDown={this.onPointerDown} onContextMenu={(e) => e.preventDefault()}></div>
@@ -373,8 +410,8 @@ export class DocumentDecorations extends React.Component<{}, { value: string }>
                 <div id="documentDecorations-bottomResizer" className="documentDecorations-resizer" onPointerDown={this.onPointerDown} onContextMenu={(e) => e.preventDefault()}></div>
                 <div id="documentDecorations-bottomRightResizer" className="documentDecorations-resizer" onPointerDown={this.onPointerDown} onContextMenu={(e) => e.preventDefault()}></div>
 
-                <div title="View Links" className="linkFlyout" ref={this._linkButton}>{linkButton}</div>
-
+                <div title="View Links" className="linkFlyout" ref={this._linkButton}> {linkButton}  </div>
+                <div className="linkButton-linker" ref={this._linkerButton} onPointerDown={this.onLinkerButtonDown}>∞</div>
             </div >
         </div>
         )
diff --git a/src/client/views/InkingCanvas.scss b/src/client/views/InkingCanvas.scss
index 35c8ee942..c5a2a50cb 100644
--- a/src/client/views/InkingCanvas.scss
+++ b/src/client/views/InkingCanvas.scss
@@ -2,6 +2,8 @@
 
 .inkingCanvas-paths-ink, .inkingCanvas-paths-markers, .inkingCanvas-noSelect, .inkingCanvas-canSelect {
     position: absolute;
+    top: 0;
+    left:0;
     width: 8192px;
     height: 8192px;
     cursor:"crosshair";
diff --git a/src/client/views/Main.scss b/src/client/views/Main.scss
index 698a9c617..594803aab 100644
--- a/src/client/views/Main.scss
+++ b/src/client/views/Main.scss
@@ -7,6 +7,9 @@ body {
     overflow: hidden;
     font-family: $sans-serif;
     margin: 0;
+    position:absolute;
+    top: 0;
+    left:0;
 }
 
 #dash-title {
@@ -158,11 +161,15 @@ button:hover {
     width:100%;
     height:100%;
     position:absolute;
+    top: 0;
+    left:0;
 }
 #mainContent-div {
     width:100%;
     height:100%;
     position:absolute;
+    top: 0;
+    left:0;
 }
 #add-options-content {
     display: table;
diff --git a/src/client/views/collections/CollectionDockingView.scss b/src/client/views/collections/CollectionDockingView.scss
index 2706c3272..583d50c5b 100644
--- a/src/client/views/collections/CollectionDockingView.scss
+++ b/src/client/views/collections/CollectionDockingView.scss
@@ -3,7 +3,7 @@
 }
 
 .collectiondockingview-container {
-    position: relative;
+    position: absolute;
     top: 0;
     left: 0;
     overflow: hidden;
diff --git a/src/client/views/collections/CollectionPDFView.scss b/src/client/views/collections/CollectionPDFView.scss
index 0144625c1..0eca3f1cd 100644
--- a/src/client/views/collections/CollectionPDFView.scss
+++ b/src/client/views/collections/CollectionPDFView.scss
@@ -9,6 +9,8 @@
     width: 100%;
     height: 100%;
     position: absolute; 
+    top: 0;
+    left:0;
     
 }
 .collectionPdfView-backward {
diff --git a/src/client/views/collections/CollectionVideoView.scss b/src/client/views/collections/CollectionVideoView.scss
index cbb981b13..ed56ad268 100644
--- a/src/client/views/collections/CollectionVideoView.scss
+++ b/src/client/views/collections/CollectionVideoView.scss
@@ -3,6 +3,8 @@
     width: 100%;
     height: 100%;
     position: absolute;
+    top: 0;
+    left:0;
  
 }
 .collectionVideoView-time{
diff --git a/src/client/views/collections/CollectionViewBase.tsx b/src/client/views/collections/CollectionViewBase.tsx
index 2b0689800..daeca69e2 100644
--- a/src/client/views/collections/CollectionViewBase.tsx
+++ b/src/client/views/collections/CollectionViewBase.tsx
@@ -17,6 +17,8 @@ import { NumberField } from "../../../fields/NumberField";
 import request = require("request");
 import { ServerUtils } from "../../../server/ServerUtil";
 import { Server } from "../../Server";
+import { CollectionDockingView } from "./CollectionDockingView";
+import { runReactions } from "mobx/lib/internal";
 
 export interface CollectionViewProps {
     fieldKey: Key;
@@ -92,6 +94,24 @@ export class CollectionViewBase extends React.Component<SubCollectionViewProps>
             e.stopPropagation();
             return added;
         }
+        if (de.data instanceof DragManager.LinkDragData) {
+            let sourceDoc: Document = de.data.linkSourceDocumentView.props.Document;
+            if (sourceDoc) runInAction(() => {
+                let srcTarg = sourceDoc.GetT(KeyStore.Prototype, Document)
+                if (srcTarg && srcTarg != FieldWaiting) {
+                    let linkDocs = srcTarg.GetList(KeyStore.LinkedToDocs, [] as Document[]);
+                    linkDocs.map(linkDoc => {
+                        let targDoc = linkDoc.GetT(KeyStore.LinkedToDocs, Document);
+                        if (targDoc && targDoc != FieldWaiting) {
+                            let dropdoc = targDoc.MakeDelegate();
+                            de.data.droppedDocuments.push(dropdoc);
+                            this.props.addDocument(dropdoc, false);
+                        }
+                    })
+                }
+            })
+            return true;
+        }
         return false;
     }
 
diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinkView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinkView.tsx
index e84f0c5ad..3dfd74ec8 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinkView.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinkView.tsx
@@ -23,10 +23,10 @@ export class CollectionFreeFormLinkView extends React.Component<CollectionFreeFo
         let l = this.props.LinkDocs;
         let a = this.props.A;
         let b = this.props.B;
-        let x1 = a.GetNumber(KeyStore.X, 0) + a.GetNumber(KeyStore.Width, 0) / 2;
-        let y1 = a.GetNumber(KeyStore.Y, 0) + a.GetNumber(KeyStore.Height, 0) / 2;
-        let x2 = b.GetNumber(KeyStore.X, 0) + b.GetNumber(KeyStore.Width, 0) / 2;
-        let y2 = b.GetNumber(KeyStore.Y, 0) + b.GetNumber(KeyStore.Height, 0) / 2;
+        let x1 = a.GetNumber(KeyStore.X, 0) + (a.GetBoolean(KeyStore.Minimized, false) ? 5 : a.GetNumber(KeyStore.Width, 0) / 2);
+        let y1 = a.GetNumber(KeyStore.Y, 0) + (a.GetBoolean(KeyStore.Minimized, false) ? 5 : a.GetNumber(KeyStore.Height, 0) / 2);
+        let x2 = b.GetNumber(KeyStore.X, 0) + (b.GetBoolean(KeyStore.Minimized, false) ? 5 : b.GetNumber(KeyStore.Width, 0) / 2);
+        let y2 = b.GetNumber(KeyStore.Y, 0) + (b.GetBoolean(KeyStore.Minimized, false) ? 5 : b.GetNumber(KeyStore.Height, 0) / 2);
         return (
             <line key={Utils.GenerateGuid()} className="collectionfreeformlinkview-linkLine" onPointerDown={this.onPointerDown}
                 style={{ strokeWidth: `${l.length * 5}` }}
diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinksView.scss b/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinksView.scss
index 4341c82f7..30e158603 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinksView.scss
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinksView.scss
@@ -1,6 +1,8 @@
 .collectionfreeformlinksview-svgCanvas{
     transform: translate(-10000px,-10000px);
     position: absolute;
+    top: 0;
+    left: 0;
     width: 20000px; 
     height: 20000px;
     pointer-events: none;
diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.scss b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.scss
index 81d21d89a..79d520069 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.scss
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.scss
@@ -26,7 +26,7 @@
   border: 0px solid $light-color-secondary;
   border-radius: $border-radius;
   box-sizing: border-box;
-  position: relative;
+  position: absolute;
   overflow: hidden;
   top: 0;
   left: 0;
@@ -41,12 +41,12 @@
   .formattedTextBox-cont {
     background: $light-color-secondary;
   }
-
+ 
   opacity: 0.99;
   border: 0px solid transparent;
   border-radius: $border-radius;
   box-sizing: border-box;
-  position:relative;
+  position:absolute;
   overflow: hidden;
   top: 0;
   left: 0;
diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
index c5178f69d..3484e963e 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
@@ -73,14 +73,17 @@ export class CollectionFreeFormView extends CollectionViewBase {
     @action
     drop = (e: Event, de: DragManager.DropEvent) => {
         if (super.drop(e, de)) {
-            if (de.data instanceof DragManager.DocumentDragData) {
-                let screenX = de.x - (de.data.xOffset as number || 0);
-                let screenY = de.y - (de.data.yOffset as number || 0);
+            let droppedDocs = de.data.droppedDocuments as Document[];
+            let xoff = de.data.xOffset as number || 0;
+            let yoff = de.data.yOffset as number || 0;
+            if (droppedDocs && droppedDocs.length) {
+                let screenX = de.x - xoff;
+                let screenY = de.y - yoff;
                 const [x, y] = this.getTransform().transformPoint(screenX, screenY);
-                let dragDoc = de.data.draggedDocuments[0];
+                let dragDoc = de.data.droppedDocuments[0];
                 let dragX = dragDoc.GetNumber(KeyStore.X, 0);
                 let dragY = dragDoc.GetNumber(KeyStore.Y, 0);
-                de.data.draggedDocuments.map(d => {
+                droppedDocs.map(d => {
                     let docX = d.GetNumber(KeyStore.X, 0);
                     let docY = d.GetNumber(KeyStore.Y, 0);
                     d.SetNumber(KeyStore.X, x + (docX - dragX));
diff --git a/src/client/views/collections/collectionFreeForm/MarqueeView.scss b/src/client/views/collections/collectionFreeForm/MarqueeView.scss
index 1ee3b244b..0b406e722 100644
--- a/src/client/views/collections/collectionFreeForm/MarqueeView.scss
+++ b/src/client/views/collections/collectionFreeForm/MarqueeView.scss
@@ -1,6 +1,8 @@
 
 .marqueeView {
     position: absolute;
+    top:0;
+    left:0;
     width:100%;
     height:100%;
 }
diff --git a/src/client/views/collections/collectionFreeForm/PreviewCursor.scss b/src/client/views/collections/collectionFreeForm/PreviewCursor.scss
index 21210be2b..7a67c29bf 100644
--- a/src/client/views/collections/collectionFreeForm/PreviewCursor.scss
+++ b/src/client/views/collections/collectionFreeForm/PreviewCursor.scss
@@ -3,9 +3,13 @@
     color: black;
     position: absolute;
     transform-origin: left top;
+    top: 0;
+    left:0;
     pointer-events: none;
 }
 .previewCursorView {
+    top: 0;
+    left:0;
     position: absolute;
     width:100%;
     height:100%;
diff --git a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
index d52b662bd..1a0f0cbbd 100644
--- a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
+++ b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
@@ -66,8 +66,12 @@ export class CollectionFreeFormDocumentView extends React.Component<DocumentView
         return <DocumentView {...this.props}
             ContentScaling={this.contentScaling}
             ScreenToLocalTransform={this.getTransform}
+            PanelWidth={this.panelWidth}
+            PanelHeight={this.panelHeight}
         />
     }
+    panelWidth = () => this.props.Document.GetBoolean(KeyStore.Minimized, false) ? 10 : this.props.PanelWidth();
+    panelHeight = () => this.props.Document.GetBoolean(KeyStore.Minimized, false) ? 10 : this.props.PanelHeight();
 
     render() {
         return (
diff --git a/src/client/views/nodes/DocumentView.scss b/src/client/views/nodes/DocumentView.scss
index 127a6b535..5126e69f9 100644
--- a/src/client/views/nodes/DocumentView.scss
+++ b/src/client/views/nodes/DocumentView.scss
@@ -2,6 +2,8 @@
 
 .documentView-node {
   position: absolute;
+  top: 0;
+  left:0;
   background: $light-color; //overflow: hidden;
 
   &.minimized {
diff --git a/src/client/views/nodes/PDFBox.scss b/src/client/views/nodes/PDFBox.scss
index ad947afd5..830dfe6c6 100644
--- a/src/client/views/nodes/PDFBox.scss
+++ b/src/client/views/nodes/PDFBox.scss
@@ -1,12 +1,16 @@
 .react-pdf__Page {
     transform-origin: left top;
     position: absolute;
+    top: 0;
+    left:0;
 }
 .react-pdf__Document {
     position: absolute;
 }
 .pdfBox-buttonTray {
     position:absolute;
+    top: 0;
+    left:0;
     z-index: 25;
 }
 .pdfBox-contentContainer {
diff --git a/src/client/views/nodes/WebBox.scss b/src/client/views/nodes/WebBox.scss
index a535b2638..c73bc0c47 100644
--- a/src/client/views/nodes/WebBox.scss
+++ b/src/client/views/nodes/WebBox.scss
@@ -2,6 +2,8 @@
 .webBox-cont {
     padding: 0vw;
     position: absolute;
+    top: 0;
+    left:0;
     width: 100%;
     height: 100%;
     overflow: scroll;
diff --git a/src/fields/Document.ts b/src/fields/Document.ts
index 8e71019a4..92d03d765 100644
--- a/src/fields/Document.ts
+++ b/src/fields/Document.ts
@@ -9,415 +9,420 @@ import { Server } from "../client/Server";
 import { Types } from "../server/Message";
 import { UndoManager } from "../client/util/UndoManager";
 import { HtmlField } from "./HtmlField";
+import { BooleanField } from "./BooleanField";
 
 export class Document extends Field {
-  //TODO tfs: We should probably store FieldWaiting in fields when we request it from the server so that we don't set up multiple server gets for the same document and field
-  public fields: ObservableMap<
-    string,
-    { key: Key; field: Field }
-  > = new ObservableMap();
-  public _proxies: ObservableMap<string, FieldId> = new ObservableMap();
-
-  constructor(id?: string, save: boolean = true) {
-    super(id);
-
-    if (save) {
-      Server.UpdateField(this);
+    //TODO tfs: We should probably store FieldWaiting in fields when we request it from the server so that we don't set up multiple server gets for the same document and field
+    public fields: ObservableMap<
+        string,
+        { key: Key; field: Field }
+    > = new ObservableMap();
+    public _proxies: ObservableMap<string, FieldId> = new ObservableMap();
+
+    constructor(id?: string, save: boolean = true) {
+        super(id);
+
+        if (save) {
+            Server.UpdateField(this);
+        }
     }
-  }
 
-  UpdateFromServer(data: [string, string][]) {
-    for (const key in data) {
-      const element = data[key];
-      this._proxies.set(element[0], element[1]);
-    }
-  }
-
-  public Width = () => {
-    return this.GetNumber(KeyStore.Width, 0);
-  };
-  public Height = () => {
-    return this.GetNumber(
-      KeyStore.Height,
-      this.GetNumber(KeyStore.NativeWidth, 0)
-        ? (this.GetNumber(KeyStore.NativeHeight, 0) /
-            this.GetNumber(KeyStore.NativeWidth, 0)) *
-            this.GetNumber(KeyStore.Width, 0)
-        : 0
-    );
-  };
-  public Scale = () => {
-    return this.GetNumber(KeyStore.Scale, 1);
-  };
-
-  @computed
-  public get Title(): string {
-    let title = this.Get(KeyStore.Title, true);
-    if (title)
-      if (title != FieldWaiting && title instanceof TextField)
-        return title.Data;
-      else return "-waiting-";
-    let parTitle = this.GetT(KeyStore.Title, TextField);
-    if (parTitle)
-      if (parTitle != FieldWaiting) return parTitle.Data + ".alias";
-      else return "-waiting-.alias";
-    return "-untitled-";
-  }
-
-  @computed
-  public get Fields() {
-    return this.fields;
-  }
-
-  /**
-   * Get the field in the document associated with the given key. If the
-   * associated field has not yet been filled in from the server, a request
-   * to the server will automatically be sent, the value will be filled in
-   * when the request is completed, and {@link Field.ts#FieldWaiting} will be returned.
-   * @param key - The key of the value to get
-   * @param ignoreProto - If true, ignore any prototype this document
-   * might have and only search for the value on this immediate document.
-   * If false (default), search up the prototype chain, starting at this document,
-   * for a document that has a field associated with the given key, and return the first
-   * one found.
-   *
-   * @returns If the document does not have a field associated with the given key, returns `undefined`.
-   * If the document does have an associated field, but the field has not been fetched from the server, returns {@link Field.ts#FieldWaiting}.
-   * If the document does have an associated field, and the field has not been fetched from the server, returns the associated field.
-   */
-  Get(key: Key, ignoreProto: boolean = false): FieldValue<Field> {
-    let field: FieldValue<Field>;
-    if (ignoreProto) {
-      if (this.fields.has(key.Id)) {
-        field = this.fields.get(key.Id)!.field;
-      } else if (this._proxies.has(key.Id)) {
-        Server.GetDocumentField(this, key);
-        /*
-                The field might have been instantly filled from the cache
-                Maybe we want to just switch back to returning the value
-                from Server.GetDocumentField if it's in the cache
-                */
-        if (this.fields.has(key.Id)) {
-          field = this.fields.get(key.Id)!.field;
-        } else {
-          field = FieldWaiting;
+    UpdateFromServer(data: [string, string][]) {
+        for (const key in data) {
+            const element = data[key];
+            this._proxies.set(element[0], element[1]);
         }
-      }
-    } else {
-      let doc: FieldValue<Document> = this;
-      while (doc && doc != FieldWaiting && field != FieldWaiting) {
-        let curField = doc.fields.get(key.Id);
-        let curProxy = doc._proxies.get(key.Id);
-        if (!curField || (curProxy && curField.field.Id !== curProxy)) {
-          if (curProxy) {
-            Server.GetDocumentField(doc, key);
-            /*
+    }
+
+    public Width = () => {
+        return this.GetNumber(KeyStore.Width, 0);
+    };
+    public Height = () => {
+        return this.GetNumber(
+            KeyStore.Height,
+            this.GetNumber(KeyStore.NativeWidth, 0)
+                ? (this.GetNumber(KeyStore.NativeHeight, 0) /
+                    this.GetNumber(KeyStore.NativeWidth, 0)) *
+                this.GetNumber(KeyStore.Width, 0)
+                : 0
+        );
+    };
+    public Scale = () => {
+        return this.GetNumber(KeyStore.Scale, 1);
+    };
+
+    @computed
+    public get Title(): string {
+        let title = this.Get(KeyStore.Title, true);
+        if (title)
+            if (title != FieldWaiting && title instanceof TextField)
+                return title.Data;
+            else return "-waiting-";
+        let parTitle = this.GetT(KeyStore.Title, TextField);
+        if (parTitle)
+            if (parTitle != FieldWaiting) return parTitle.Data + ".alias";
+            else return "-waiting-.alias";
+        return "-untitled-";
+    }
+
+    @computed
+    public get Fields() {
+        return this.fields;
+    }
+
+    /**
+     * Get the field in the document associated with the given key. If the
+     * associated field has not yet been filled in from the server, a request
+     * to the server will automatically be sent, the value will be filled in
+     * when the request is completed, and {@link Field.ts#FieldWaiting} will be returned.
+     * @param key - The key of the value to get
+     * @param ignoreProto - If true, ignore any prototype this document
+     * might have and only search for the value on this immediate document.
+     * If false (default), search up the prototype chain, starting at this document,
+     * for a document that has a field associated with the given key, and return the first
+     * one found.
+     *
+     * @returns If the document does not have a field associated with the given key, returns `undefined`.
+     * If the document does have an associated field, but the field has not been fetched from the server, returns {@link Field.ts#FieldWaiting}.
+     * If the document does have an associated field, and the field has not been fetched from the server, returns the associated field.
+     */
+    Get(key: Key, ignoreProto: boolean = false): FieldValue<Field> {
+        let field: FieldValue<Field>;
+        if (ignoreProto) {
+            if (this.fields.has(key.Id)) {
+                field = this.fields.get(key.Id)!.field;
+            } else if (this._proxies.has(key.Id)) {
+                Server.GetDocumentField(this, key);
+                /*
                         The field might have been instantly filled from the cache
                         Maybe we want to just switch back to returning the value
                         from Server.GetDocumentField if it's in the cache
                         */
-            if (this.fields.has(key.Id)) {
-              field = this.fields.get(key.Id)!.field;
-            } else {
-              field = FieldWaiting;
+                if (this.fields.has(key.Id)) {
+                    field = this.fields.get(key.Id)!.field;
+                } else {
+                    field = FieldWaiting;
+                }
             }
-            break;
-          }
-          if (
-            doc.fields.has(KeyStore.Prototype.Id) ||
-            doc._proxies.has(KeyStore.Prototype.Id)
-          ) {
-            doc = doc.GetPrototype();
-          } else {
-            break;
-          }
         } else {
-          field = curField.field;
-          break;
+            let doc: FieldValue<Document> = this;
+            while (doc && doc != FieldWaiting && field != FieldWaiting) {
+                let curField = doc.fields.get(key.Id);
+                let curProxy = doc._proxies.get(key.Id);
+                if (!curField || (curProxy && curField.field.Id !== curProxy)) {
+                    if (curProxy) {
+                        Server.GetDocumentField(doc, key);
+                        /*
+                                    The field might have been instantly filled from the cache
+                                    Maybe we want to just switch back to returning the value
+                                    from Server.GetDocumentField if it's in the cache
+                                    */
+                        if (this.fields.has(key.Id)) {
+                            field = this.fields.get(key.Id)!.field;
+                        } else {
+                            field = FieldWaiting;
+                        }
+                        break;
+                    }
+                    if (
+                        doc.fields.has(KeyStore.Prototype.Id) ||
+                        doc._proxies.has(KeyStore.Prototype.Id)
+                    ) {
+                        doc = doc.GetPrototype();
+                    } else {
+                        break;
+                    }
+                } else {
+                    field = curField.field;
+                    break;
+                }
+            }
+            if (doc == FieldWaiting) field = FieldWaiting;
         }
-      }
-      if (doc == FieldWaiting) field = FieldWaiting;
+
+        return field;
     }
 
-    return field;
-  }
-
-  /**
-   * Tries to get the field associated with the given key, and if there is an
-   * associated field, calls the given callback with that field.
-   * @param key - The key of the value to get
-   * @param callback - A function that will be called with the associated field, if it exists,
-   * once it is fetched from the server (this may be immediately if the field has already been fetched).
-   * Note: The callback will not be called if there is no associated field.
-   * @returns `true` if the field exists on the document and `callback` will be called, and `false` otherwise
-   */
-  GetAsync(key: Key, callback: (field: Opt<Field>) => void): void {
-    //TODO: This currently doesn't deal with prototypes
-    let field = this.fields.get(key.Id);
-    if (field && field.field) {
-      callback(field.field);
-    } else if (this._proxies.has(key.Id)) {
-      Server.GetDocumentField(this, key, callback);
-    } else if (this._proxies.has(KeyStore.Prototype.Id)) {
-      this.GetTAsync(KeyStore.Prototype, Document, proto => {
-        if (proto) {
-          proto.GetAsync(key, callback);
+    /**
+     * Tries to get the field associated with the given key, and if there is an
+     * associated field, calls the given callback with that field.
+     * @param key - The key of the value to get
+     * @param callback - A function that will be called with the associated field, if it exists,
+     * once it is fetched from the server (this may be immediately if the field has already been fetched).
+     * Note: The callback will not be called if there is no associated field.
+     * @returns `true` if the field exists on the document and `callback` will be called, and `false` otherwise
+     */
+    GetAsync(key: Key, callback: (field: Opt<Field>) => void): void {
+        //TODO: This currently doesn't deal with prototypes
+        let field = this.fields.get(key.Id);
+        if (field && field.field) {
+            callback(field.field);
+        } else if (this._proxies.has(key.Id)) {
+            Server.GetDocumentField(this, key, callback);
+        } else if (this._proxies.has(KeyStore.Prototype.Id)) {
+            this.GetTAsync(KeyStore.Prototype, Document, proto => {
+                if (proto) {
+                    proto.GetAsync(key, callback);
+                } else {
+                    callback(undefined);
+                }
+            });
         } else {
-          callback(undefined);
+            callback(undefined);
         }
-      });
-    } else {
-      callback(undefined);
     }
-  }
-
-  GetTAsync<T extends Field>(key: Key, ctor: { new (): T }): Promise<Opt<T>>;
-  GetTAsync<T extends Field>(
-    key: Key,
-    ctor: { new (): T },
-    callback: (field: Opt<T>) => void
-  ): void;
-  GetTAsync<T extends Field>(
-    key: Key,
-    ctor: { new (): T },
-    callback?: (field: Opt<T>) => void
-  ): Promise<Opt<T>> | void {
-    let fn = (cb: (field: Opt<T>) => void) => {
-      return this.GetAsync(key, field => {
-        cb(Cast(field, ctor));
-      });
-    };
-    if (callback) {
-      fn(callback);
-    } else {
-      return new Promise(res => fn(res));
+
+    GetTAsync<T extends Field>(key: Key, ctor: { new(): T }): Promise<Opt<T>>;
+    GetTAsync<T extends Field>(
+        key: Key,
+        ctor: { new(): T },
+        callback: (field: Opt<T>) => void
+    ): void;
+    GetTAsync<T extends Field>(
+        key: Key,
+        ctor: { new(): T },
+        callback?: (field: Opt<T>) => void
+    ): Promise<Opt<T>> | void {
+        let fn = (cb: (field: Opt<T>) => void) => {
+            return this.GetAsync(key, field => {
+                cb(Cast(field, ctor));
+            });
+        };
+        if (callback) {
+            fn(callback);
+        } else {
+            return new Promise(res => fn(res));
+        }
     }
-  }
-
-  /**
-   * Same as {@link Document#GetAsync}, except a field of the given type
-   * will be created if there is no field associated with the given key,
-   * or the field associated with the given key is not of the given type.
-   * @param ctor - Constructor of the field type to get. E.g., TextField, ImageField, etc.
-   */
-  GetOrCreateAsync<T extends Field>(
-    key: Key,
-    ctor: { new (): T },
-    callback: (field: T) => void
-  ): void {
-    //This currently doesn't deal with prototypes
-    if (this._proxies.has(key.Id)) {
-      Server.GetDocumentField(this, key, field => {
-        if (field && field instanceof ctor) {
-          callback(field);
+
+    /**
+     * Same as {@link Document#GetAsync}, except a field of the given type
+     * will be created if there is no field associated with the given key,
+     * or the field associated with the given key is not of the given type.
+     * @param ctor - Constructor of the field type to get. E.g., TextField, ImageField, etc.
+     */
+    GetOrCreateAsync<T extends Field>(
+        key: Key,
+        ctor: { new(): T },
+        callback: (field: T) => void
+    ): void {
+        //This currently doesn't deal with prototypes
+        if (this._proxies.has(key.Id)) {
+            Server.GetDocumentField(this, key, field => {
+                if (field && field instanceof ctor) {
+                    callback(field);
+                } else {
+                    let newField = new ctor();
+                    this.Set(key, newField);
+                    callback(newField);
+                }
+            });
         } else {
-          let newField = new ctor();
-          this.Set(key, newField);
-          callback(newField);
+            let newField = new ctor();
+            this.Set(key, newField);
+            callback(newField);
         }
-      });
-    } else {
-      let newField = new ctor();
-      this.Set(key, newField);
-      callback(newField);
     }
-  }
-
-  /**
-   * Same as {@link Document#Get}, except that it will additionally
-   * check if the field is of the given type.
-   * @param ctor - Constructor of the field type to get. E.g., `TextField`, `ImageField`, etc.
-   * @returns Same as {@link Document#Get}, except will return `undefined`
-   * if there is an associated field but it is of the wrong type.
-   */
-  GetT<T extends Field = Field>(
-    key: Key,
-    ctor: { new (...args: any[]): T },
-    ignoreProto: boolean = false
-  ): FieldValue<T> {
-    var getfield = this.Get(key, ignoreProto);
-    if (getfield != FieldWaiting) {
-      return Cast(getfield, ctor);
+
+    /**
+     * Same as {@link Document#Get}, except that it will additionally
+     * check if the field is of the given type.
+     * @param ctor - Constructor of the field type to get. E.g., `TextField`, `ImageField`, etc.
+     * @returns Same as {@link Document#Get}, except will return `undefined`
+     * if there is an associated field but it is of the wrong type.
+     */
+    GetT<T extends Field = Field>(
+        key: Key,
+        ctor: { new(...args: any[]): T },
+        ignoreProto: boolean = false
+    ): FieldValue<T> {
+        var getfield = this.Get(key, ignoreProto);
+        if (getfield != FieldWaiting) {
+            return Cast(getfield, ctor);
+        }
+        return FieldWaiting;
     }
-    return FieldWaiting;
-  }
-
-  GetOrCreate<T extends Field>(
-    key: Key,
-    ctor: { new (): T },
-    ignoreProto: boolean = false
-  ): T {
-    const field = this.GetT(key, ctor, ignoreProto);
-    if (field && field != FieldWaiting) {
-      return field;
+
+    GetOrCreate<T extends Field>(
+        key: Key,
+        ctor: { new(): T },
+        ignoreProto: boolean = false
+    ): T {
+        const field = this.GetT(key, ctor, ignoreProto);
+        if (field && field != FieldWaiting) {
+            return field;
+        }
+        const newField = new ctor();
+        this.Set(key, newField);
+        return newField;
     }
-    const newField = new ctor();
-    this.Set(key, newField);
-    return newField;
-  }
-
-  GetData<T, U extends Field & { Data: T }>(
-    key: Key,
-    ctor: { new (): U },
-    defaultVal: T
-  ): T {
-    let val = this.Get(key);
-    let vval = val && val instanceof ctor ? val.Data : defaultVal;
-    return vval;
-  }
-
-  GetHtml(key: Key, defaultVal: string): string {
-    return this.GetData(key, HtmlField, defaultVal);
-  }
-
-  GetNumber(key: Key, defaultVal: number): number {
-    return this.GetData(key, NumberField, defaultVal);
-  }
-
-  GetText(key: Key, defaultVal: string): string {
-    return this.GetData(key, TextField, defaultVal);
-  }
-
-  GetList<T extends Field>(key: Key, defaultVal: T[]): T[] {
-    return this.GetData<T[], ListField<T>>(key, ListField, defaultVal);
-  }
-
-  @action
-  Set(key: Key, field: Field | undefined, setOnPrototype = false): void {
-    let old = this.fields.get(key.Id);
-    let oldField = old ? old.field : undefined;
-    if (setOnPrototype) {
-      this.SetOnPrototype(key, field);
-    } else {
-      if (field) {
-        this.fields.set(key.Id, { key, field });
-        this._proxies.set(key.Id, field.Id);
-        // Server.AddDocumentField(this, key, field);
-      } else {
-        this.fields.delete(key.Id);
-        this._proxies.delete(key.Id);
-        // Server.DeleteDocumentField(this, key);
-      }
-      Server.UpdateField(this);
+
+    GetData<T, U extends Field & { Data: T }>(
+        key: Key,
+        ctor: { new(): U },
+        defaultVal: T
+    ): T {
+        let val = this.Get(key);
+        let vval = val && val instanceof ctor ? val.Data : defaultVal;
+        return vval;
     }
-    if (oldField || field) {
-      UndoManager.AddEvent({
-        undo: () => this.Set(key, oldField, setOnPrototype),
-        redo: () => this.Set(key, field, setOnPrototype)
-      });
+
+    GetHtml(key: Key, defaultVal: string): string {
+        return this.GetData(key, HtmlField, defaultVal);
     }
-  }
-
-  @action
-  SetOnPrototype(key: Key, field: Field | undefined): void {
-    this.GetTAsync(KeyStore.Prototype, Document, (f: Opt<Document>) => {
-      f && f.Set(key, field);
-    });
-  }
-
-  @action
-  SetDataOnPrototype<T, U extends Field & { Data: T }>(
-    key: Key,
-    value: T,
-    ctor: { new (): U },
-    replaceWrongType = true
-  ) {
-    this.GetTAsync(KeyStore.Prototype, Document, (f: Opt<Document>) => {
-      f && f.SetData(key, value, ctor);
-    });
-  }
-
-  @action
-  SetData<T, U extends Field & { Data: T }>(
-    key: Key,
-    value: T,
-    ctor: { new (data: T): U },
-    replaceWrongType = true
-  ) {
-    let field = this.Get(key, true);
-    if (field instanceof ctor) {
-      field.Data = value;
-    } else if (!field || replaceWrongType) {
-      let newField = new ctor(value);
-      // newField.Data = value;
-      this.Set(key, newField);
+
+    GetBoolean(key: Key, defaultVal: boolean): boolean {
+        return this.GetData(key, BooleanField, defaultVal);
     }
-  }
-
-  @action
-  SetText(key: Key, value: string, replaceWrongType = true) {
-    this.SetData(key, value, TextField, replaceWrongType);
-  }
-
-  @action
-  SetNumber(key: Key, value: number, replaceWrongType = true) {
-    this.SetData(key, value, NumberField, replaceWrongType);
-  }
-
-  GetPrototype(): FieldValue<Document> {
-    return this.GetT(KeyStore.Prototype, Document, true);
-  }
-
-  GetAllPrototypes(): Document[] {
-    let protos: Document[] = [];
-    let doc: FieldValue<Document> = this;
-    while (doc && doc != FieldWaiting) {
-      protos.push(doc);
-      doc = doc.GetPrototype();
+
+    GetNumber(key: Key, defaultVal: number): number {
+        return this.GetData(key, NumberField, defaultVal);
+    }
+
+    GetText(key: Key, defaultVal: string): string {
+        return this.GetData(key, TextField, defaultVal);
+    }
+
+    GetList<T extends Field>(key: Key, defaultVal: T[]): T[] {
+        return this.GetData<T[], ListField<T>>(key, ListField, defaultVal);
+    }
+
+    @action
+    Set(key: Key, field: Field | undefined, setOnPrototype = false): void {
+        let old = this.fields.get(key.Id);
+        let oldField = old ? old.field : undefined;
+        if (setOnPrototype) {
+            this.SetOnPrototype(key, field);
+        } else {
+            if (field) {
+                this.fields.set(key.Id, { key, field });
+                this._proxies.set(key.Id, field.Id);
+                // Server.AddDocumentField(this, key, field);
+            } else {
+                this.fields.delete(key.Id);
+                this._proxies.delete(key.Id);
+                // Server.DeleteDocumentField(this, key);
+            }
+            Server.UpdateField(this);
+        }
+        if (oldField || field) {
+            UndoManager.AddEvent({
+                undo: () => this.Set(key, oldField, setOnPrototype),
+                redo: () => this.Set(key, field, setOnPrototype)
+            });
+        }
+    }
+
+    @action
+    SetOnPrototype(key: Key, field: Field | undefined): void {
+        this.GetTAsync(KeyStore.Prototype, Document, (f: Opt<Document>) => {
+            f && f.Set(key, field);
+        });
+    }
+
+    @action
+    SetDataOnPrototype<T, U extends Field & { Data: T }>(
+        key: Key,
+        value: T,
+        ctor: { new(): U },
+        replaceWrongType = true
+    ) {
+        this.GetTAsync(KeyStore.Prototype, Document, (f: Opt<Document>) => {
+            f && f.SetData(key, value, ctor);
+        });
+    }
+
+    @action
+    SetData<T, U extends Field & { Data: T }>(
+        key: Key,
+        value: T,
+        ctor: { new(data: T): U },
+        replaceWrongType = true
+    ) {
+        let field = this.Get(key, true);
+        if (field instanceof ctor) {
+            field.Data = value;
+        } else if (!field || replaceWrongType) {
+            let newField = new ctor(value);
+            // newField.Data = value;
+            this.Set(key, newField);
+        }
+    }
+
+    @action
+    SetText(key: Key, value: string, replaceWrongType = true) {
+        this.SetData(key, value, TextField, replaceWrongType);
+    }
+
+    @action
+    SetNumber(key: Key, value: number, replaceWrongType = true) {
+        this.SetData(key, value, NumberField, replaceWrongType);
+    }
+
+    GetPrototype(): FieldValue<Document> {
+        return this.GetT(KeyStore.Prototype, Document, true);
+    }
+
+    GetAllPrototypes(): Document[] {
+        let protos: Document[] = [];
+        let doc: FieldValue<Document> = this;
+        while (doc && doc != FieldWaiting) {
+            protos.push(doc);
+            doc = doc.GetPrototype();
+        }
+        return protos;
+    }
+
+    CreateAlias(id?: string): Document {
+        let alias = new Document(id);
+        this.GetTAsync(KeyStore.Prototype, Document, (f: Opt<Document>) => {
+            f && alias.Set(KeyStore.Prototype, f);
+        });
+
+        return alias;
+    }
+
+    MakeDelegate(id?: string): Document {
+        let delegate = new Document(id);
+
+        delegate.Set(KeyStore.Prototype, this);
+
+        return delegate;
+    }
+
+    ToScriptString(): string {
+        return "";
+    }
+
+    TrySetValue(value: any): boolean {
+        throw new Error("Method not implemented.");
+    }
+    GetValue() {
+        return this.Title;
+        var title =
+            (this._proxies.has(KeyStore.Title.Id) ? "???" : this.Title) +
+            "(" +
+            this.Id +
+            ")";
+        return title;
+        //throw new Error("Method not implemented.");
+    }
+    Copy(): Field {
+        throw new Error("Method not implemented.");
+    }
+
+    ToJson(): { type: Types; data: [string, string][]; _id: string } {
+        let fields: [string, string][] = [];
+        this._proxies.forEach((field, key) => {
+            if (field) {
+                fields.push([key, field as string]);
+            }
+        });
+
+        return {
+            type: Types.Document,
+            data: fields,
+            _id: this.Id
+        };
     }
-    return protos;
-  }
-
-  CreateAlias(id?: string): Document {
-    let alias = new Document(id);
-    this.GetTAsync(KeyStore.Prototype, Document, (f: Opt<Document>) => {
-      f && alias.Set(KeyStore.Prototype, f);
-    });
-
-    return alias;
-  }
-
-  MakeDelegate(id?: string): Document {
-    let delegate = new Document(id);
-
-    delegate.Set(KeyStore.Prototype, this);
-
-    return delegate;
-  }
-
-  ToScriptString(): string {
-    return "";
-  }
-
-  TrySetValue(value: any): boolean {
-    throw new Error("Method not implemented.");
-  }
-  GetValue() {
-    return this.Title;
-    var title =
-      (this._proxies.has(KeyStore.Title.Id) ? "???" : this.Title) +
-      "(" +
-      this.Id +
-      ")";
-    return title;
-    //throw new Error("Method not implemented.");
-  }
-  Copy(): Field {
-    throw new Error("Method not implemented.");
-  }
-
-  ToJson(): { type: Types; data: [string, string][]; _id: string } {
-    let fields: [string, string][] = [];
-    this._proxies.forEach((field, key) => {
-      if (field) {
-        fields.push([key, field as string]);
-      }
-    });
-
-    return {
-      type: Types.Document,
-      data: fields,
-      _id: this.Id
-    };
-  }
 }
-- 
cgit v1.2.3-70-g09d2