Merge remote-tracking branch 'origin/server_database_merge' into authentication

32 files changed, 844 insertions, 369 deletions

diff --git a/src/Utils.ts b/src/Utils.ts
index f07c644b7..c9c006aa8 100644
--- a/src/Utils.ts
+++ b/src/Utils.ts
@@ -16,12 +16,10 @@ export class Utils {
 
     public static GenerateGuid(): string {
         return v4()
-        // return new Buffer(v4()).toString("hex").substr(0, 24);
     }
 
     public static GenerateDeterministicGuid(seed: string): string {
         return v5(seed, v5.URL)
-        // return new Buffer(v5(seed, v5.URL)).toString("hex").substr(0, 24);
     }
 
     public static GetScreenTransform(ele: HTMLElement): { scale: number, translateX: number, translateY: number } {
@@ -33,6 +31,18 @@ export class Utils {
         return { scale, translateX, translateY };
     }
 
+    public static CopyText(text: string) {
+        var textArea = document.createElement("textarea");
+        textArea.value = text;
+        document.body.appendChild(textArea);
+        textArea.focus();
+        textArea.select();
+
+        try { document.execCommand('copy'); } catch (err) { }
+
+        document.body.removeChild(textArea);
+    }
+
     public static Emit<T>(socket: Socket | SocketIOClient.Socket, message: Message<T>, args: T) {
         socket.emit(message.Message, args);
     }
diff --git a/src/client/Server.ts b/src/client/Server.ts
index a08fc2e87..2077c0c57 100644
--- a/src/client/Server.ts
+++ b/src/client/Server.ts
@@ -1,54 +1,104 @@
-import { Field, FieldWaiting, FIELD_ID, FIELD_WAITING, FieldValue } from "../fields/Field"
-import { Key, KeyStore } from "../fields/Key"
-import { ObservableMap, action } from "mobx";
+import { Field, FieldWaiting, FIELD_ID, FIELD_WAITING, FieldValue, Opt } from "../fields/Field"
+import { Key } from "../fields/Key"
+import { KeyStore } from "../fields/KeyStore"
+import { ObservableMap, action, reaction, when } from "mobx";
 import { Document } from "../fields/Document"
 import { SocketStub } from "./SocketStub";
 import * as OpenSocket from 'socket.io-client';
 import { Utils } from "./../Utils";
-import { MessageStore } from "./../server/Message";
+import { MessageStore, Types } from "./../server/Message";
 
 export class Server {
-    private static ClientFieldsCached: ObservableMap<FIELD_ID, Field | FIELD_WAITING> = new ObservableMap();
-    static Socket: SocketIOClient.Socket = OpenSocket("http://localhost:1234")
+    public static ClientFieldsCached: ObservableMap<FIELD_ID, Field | FIELD_WAITING> = new ObservableMap();
+    static Socket: SocketIOClient.Socket = OpenSocket("http://localhost:1234");
     static GUID: string = Utils.GenerateGuid()
 
+
     // Retrieves the cached value of the field and sends a request to the server for the real value (if it's not cached).
     // Call this is from within a reaction and test whether the return value is FieldWaiting.
     // 'hackTimeout' is here temporarily for simplicity when debugging things.
-    public static GetField(fieldid: FIELD_ID, callback: (field: Field) => void = (f) => { }, hackTimeout: number = -1) {
-        if (!this.ClientFieldsCached.get(fieldid)) {
+    public static GetField(fieldid: FIELD_ID, callback: (field: Opt<Field>) => void = (f) => { }, doc?: Document, key?: Key, hackTimeout: number = -1) {
+        let cached = this.ClientFieldsCached.get(fieldid);
+        if (!cached) {
             this.ClientFieldsCached.set(fieldid, FieldWaiting);
-            //simulating a server call with a registered callback action
-            SocketStub.SEND_FIELD_REQUEST(fieldid,
-                action((field: Field) => callback(Server.cacheField(field))));
-        } else if (this.ClientFieldsCached.get(fieldid) != FieldWaiting) {
-            callback(this.ClientFieldsCached.get(fieldid) as Field);
+            SocketStub.SEND_FIELD_REQUEST(fieldid, action((field: Field | undefined) => {
+                let cached = this.ClientFieldsCached.get(fieldid);
+                if (cached != FieldWaiting)
+                    callback(cached);
+                else {
+                    if (field) {
+                        this.ClientFieldsCached.set(fieldid, field);
+                    } else {
+                        this.ClientFieldsCached.delete(fieldid)
+                    }
+                    callback(field)
+                }
+            }));
+        } else if (cached != FieldWaiting) {
+            callback(cached);
+        } else {
+            reaction(() => {
+                return this.ClientFieldsCached.get(fieldid);
+            }, (field, reaction) => {
+                if (field !== "<Waiting>") {
+                    callback(field)
+                    reaction.dispose()
+                }
+            })
         }
-        return this.ClientFieldsCached.get(fieldid);
+        return cached;
+    }
+
+    public static GetFields(fieldIds: FIELD_ID[], callback: (fields: { [id: string]: Field }) => any) {
+        SocketStub.SEND_FIELDS_REQUEST(fieldIds, (fields) => {
+            for (let key in fields) {
+                let field = fields[key];
+                if (!this.ClientFieldsCached.has(field.Id)) {
+                    this.ClientFieldsCached.set(field.Id, field)
+                }
+            }
+            callback(fields)
+        });
     }
 
     static times = 0; // hack for testing
     public static GetDocumentField(doc: Document, key: Key) {
-        var hackTimeout: number = key == KeyStore.Data ? (this.times++ == 0 ? 5000 : 1000) : key == KeyStore.X ? 2500 : 500;
-
+        // let keyId: string = element[0]
+        // let valueId: string = element[1]
+        // Server.GetField(keyId, (key: Field) => {
+        //     if (key instanceof Key) {
+        //         Server.GetField(valueId, (field: Field) => {
+        //             console.log(field)
+        //             doc.Set(key as Key, field)
+        //         })
+        //     }
+        //     else {
+        //         console.log("how did you get a key that isnt a key wtf")
+        //     }
+        // })
         return this.GetField(doc._proxies.get(key.Id),
-            action((fieldfromserver: Field) => {
-                doc._proxies.delete(key.Id);
-                doc.fields.set(key, fieldfromserver);
-            })
-            , hackTimeout);
+            action((fieldfromserver: Opt<Field>) => {
+                if (fieldfromserver) {
+                    doc.fields.set(key.Id, { key, field: fieldfromserver });
+                }
+            }), doc, key);
     }
 
     public static AddDocument(document: Document) {
         SocketStub.SEND_ADD_DOCUMENT(document);
     }
     public static AddDocumentField(doc: Document, key: Key, value: Field) {
+        console.log("Add doc field " + doc.Title + " " + key.Name + " fid " + value.Id + " " + value);
         SocketStub.SEND_ADD_DOCUMENT_FIELD(doc, key, value);
     }
     public static DeleteDocumentField(doc: Document, key: Key) {
         SocketStub.SEND_DELETE_DOCUMENT_FIELD(doc, key);
     }
+
     public static UpdateField(field: Field) {
+        if (!this.ClientFieldsCached.has(field.Id)) {
+            this.ClientFieldsCached.set(field.Id, field)
+        }
         SocketStub.SEND_SET_FIELD(field);
     }
 
@@ -66,6 +116,18 @@ export class Server {
         }
         return this.ClientFieldsCached.get(clientField.Id) as Field;
     }
+
+    @action
+    static updateField(field: { _id: string, data: any, type: Types }) {
+        if (Server.ClientFieldsCached.has(field._id)) {
+            var f = Server.ClientFieldsCached.get(field._id);
+            if (f && f != FieldWaiting) {
+                f.UpdateFromServer(field.data);
+                f.init(() => { });
+            }
+        }
+    }
 }
 
-Server.Socket.on(MessageStore.Foo.Message, Server.connected);
\ No newline at end of file
+Server.Socket.on(MessageStore.Foo.Message, Server.connected);
+Server.Socket.on(MessageStore.SetField.Message, Server.updateField);
\ No newline at end of file
diff --git a/src/client/SocketStub.ts b/src/client/SocketStub.ts
index 03c0131ba..2bddf4e97 100644
--- a/src/client/SocketStub.ts
+++ b/src/client/SocketStub.ts
@@ -1,10 +1,12 @@
-import { Field, FIELD_ID } from "../fields/Field"
-import { Key, KeyStore } from "../fields/Key"
+import { Field, FIELD_ID, Opt } from "../fields/Field"
+import { Key } from "../fields/Key"
+import { KeyStore } from "../fields/KeyStore"
 import { ObservableMap, action } from "mobx";
 import { Document } from "../fields/Document"
 import { MessageStore, SetFieldArgs, GetFieldArgs, DocumentTransfer, Types } from "../server/Message";
 import { Utils } from "../Utils";
 import { Server } from "./Server";
+import { ServerUtils } from "../server/ServerUtil";
 
 export class SocketStub {
 
@@ -29,16 +31,32 @@ export class SocketStub {
         // this.FieldStore.set(document.Id, new Document(document.Id));
         // document.fields.forEach((f, key) => (this.FieldStore.get(document.Id) as Document)._proxies.set(key.Id, (f as Field).Id));
 
+        console.log("sending " + document.Title);
         Utils.Emit(Server.Socket, MessageStore.AddDocument, new DocumentTransfer(document.ToJson()))
     }
 
-    public static SEND_FIELD_REQUEST(fieldid: FIELD_ID, callback: (field: Field) => void) {
+    public static SEND_FIELD_REQUEST(fieldid: FIELD_ID, callback: (field: Opt<Field>) => void) {
         if (fieldid) {
-            let args: GetFieldArgs = new GetFieldArgs(fieldid)
-            Utils.EmitCallback(Server.Socket, MessageStore.GetField, args, (field: Field) => callback(field))
+            Utils.EmitCallback(Server.Socket, MessageStore.GetField, fieldid, (field: any) => {
+                if (field) {
+                    ServerUtils.FromJson(field).init(callback);
+                } else {
+                    callback(undefined);
+                }
+            })
         }
     }
 
+    public static SEND_FIELDS_REQUEST(fieldIds: FIELD_ID[], callback: (fields: { [key: string]: Field }) => any) {
+        Utils.EmitCallback(Server.Socket, MessageStore.GetFields, fieldIds, (fields: any[]) => {
+            let fieldMap: any = {};
+            for (let field of fields) {
+                fieldMap[field._id] = ServerUtils.FromJson(field);
+            }
+            callback(fieldMap)
+        });
+    }
+
     public static SEND_ADD_DOCUMENT_FIELD(doc: Document, key: Key, value: Field) {
 
         // Send a serialized version of the field to the server along with the
diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts
index 460bf9b23..f779dcd03 100644
--- a/src/client/documents/Documents.ts
+++ b/src/client/documents/Documents.ts
@@ -1,6 +1,6 @@
 import { Document } from "../../fields/Document";
 import { Server } from "../Server";
-import { KeyStore } from "../../fields/Key";
+import { KeyStore } from "../../fields/KeyStore";
 import { TextField } from "../../fields/TextField";
 import { NumberField } from "../../fields/NumberField";
 import { ListField } from "../../fields/ListField";
@@ -21,20 +21,31 @@ interface DocumentOptions {
 }
 
 export namespace Documents {
+    export function initProtos(callback: () => void) {
+        Server.GetFields([collectionProtoId, textProtoId, imageProtoId, schemaProtoId, dockProtoId], (fields) => {
+            collectionProto = fields[collectionProtoId] as Document;
+            imageProto = fields[imageProtoId] as Document;
+            textProto = fields[textProtoId] as Document;
+            dockProto = fields[dockProtoId] as Document;
+            schemaProto = fields[schemaProtoId] as Document;
+            callback()
+        });
+    }
+
     function setupOptions(doc: Document, options: DocumentOptions): void {
-        if (options.x) {
+        if (options.x != undefined) {
             doc.SetData(KeyStore.X, options.x, NumberField);
         }
-        if (options.y) {
+        if (options.y != undefined) {
             doc.SetData(KeyStore.Y, options.y, NumberField);
         }
-        if (options.width) {
+        if (options.width != undefined) {
             doc.SetData(KeyStore.Width, options.width, NumberField);
         }
-        if (options.height) {
+        if (options.height != undefined) {
             doc.SetData(KeyStore.Height, options.height, NumberField);
         }
-        if (options.title) {
+        if (options.title != undefined) {
             doc.SetData(KeyStore.Title, options.title, TextField);
         }
         doc.SetData(KeyStore.Scale, 1, NumberField);
@@ -43,9 +54,10 @@ export namespace Documents {
     }
 
     let textProto: Document;
+    const textProtoId = "textProto";
     function GetTextPrototype(): Document {
         if (!textProto) {
-            textProto = new Document();
+            textProto = new Document(textProtoId);
             textProto.Set(KeyStore.X, new NumberField(0));
             textProto.Set(KeyStore.Y, new NumberField(0));
             textProto.Set(KeyStore.Width, new NumberField(300));
@@ -64,9 +76,10 @@ export namespace Documents {
     }
 
     let schemaProto: Document;
+    const schemaProtoId = "schemaProto";
     function GetSchemaPrototype(): Document {
         if (!schemaProto) {
-            schemaProto = new Document();
+            schemaProto = new Document(schemaProtoId);
             schemaProto.Set(KeyStore.X, new NumberField(0));
             schemaProto.Set(KeyStore.Y, new NumberField(0));
             schemaProto.Set(KeyStore.Width, new NumberField(300));
@@ -86,6 +99,7 @@ export namespace Documents {
 
 
     let dockProto: Document;
+    const dockProtoId = "dockProto";
     function GetDockPrototype(): Document {
         if (!dockProto) {
             dockProto = new Document();
@@ -107,11 +121,11 @@ export namespace Documents {
     }
 
 
-    let imageProtoId: FIELD_ID;
+    let imageProto: Document;
+    const imageProtoId = "imageProto";
     function GetImagePrototype(): Document {
-        if (imageProtoId === undefined) {
-            let imageProto = new Document();
-            imageProtoId = imageProto.Id;
+        if (!imageProto) {
+            imageProto = new Document(imageProtoId);
             imageProto.Set(KeyStore.Title, new TextField("IMAGE PROTO"));
             imageProto.Set(KeyStore.X, new NumberField(0));
             imageProto.Set(KeyStore.Y, new NumberField(0));
@@ -120,26 +134,23 @@ export namespace Documents {
             imageProto.Set(KeyStore.Layout, new TextField(ImageBox.LayoutString()));
             // imageProto.SetField(KeyStore.Layout, new TextField('<div style={"background-image: " + {Data}} />'));
             imageProto.Set(KeyStore.LayoutKeys, new ListField([KeyStore.Data]));
-            // Server.AddDocument(imageProto);
             return imageProto;
         }
-        return new Document();
-        // return Server.GetField(imageProtoId) as Document;
+        return imageProto;
     }
 
     export function ImageDocument(url: string, options: DocumentOptions = {}): Document {
         let doc = GetImagePrototype().MakeDelegate();
         setupOptions(doc, options);
         doc.Set(KeyStore.Data, new ImageField(new URL(url)));
-        // Server.AddDocument(doc);
-        // var sdoc = Server.GetField(doc.Id) as Document;
         return doc;
     }
 
     let collectionProto: Document;
+    const collectionProtoId = "collectionProto";
     function GetCollectionPrototype(): Document {
         if (!collectionProto) {
-            collectionProto = new Document();
+            collectionProto = new Document(collectionProtoId);
             collectionProto.Set(KeyStore.X, new NumberField(0));
             collectionProto.Set(KeyStore.Y, new NumberField(0));
             collectionProto.Set(KeyStore.Scale, new NumberField(1));
@@ -153,8 +164,8 @@ export namespace Documents {
         return collectionProto;
     }
 
-    export function CollectionDocument(documents: Array<Document>, options: DocumentOptions = {}): Document {
-        let doc = GetCollectionPrototype().MakeDelegate();
+    export function CollectionDocument(documents: Array<Document>, options: DocumentOptions = {}, id?: string): Document {
+        let doc = GetCollectionPrototype().MakeDelegate(id);
         setupOptions(doc, options);
         doc.Set(KeyStore.Data, new ListField(documents));
         return doc;
diff --git a/src/client/util/Scripting.ts b/src/client/util/Scripting.ts
index 6bc5fa412..befb9df4c 100644
--- a/src/client/util/Scripting.ts
+++ b/src/client/util/Scripting.ts
@@ -6,7 +6,7 @@ import { NumberField as NumberFieldImport, NumberField } from "../../fields/Numb
 import { ImageField as ImageFieldImport } from "../../fields/ImageField";
 import { TextField as TextFieldImport, TextField } from "../../fields/TextField";
 import { RichTextField as RichTextFieldImport } from "../../fields/RichTextField";
-import { KeyStore as KeyStoreImport } from "../../fields/Key";
+import { KeyStore as KeyStoreImport } from "../../fields/KeyStore";
 
 export interface ExecutableScript {
     (): any;
diff --git a/src/client/views/Main.tsx b/src/client/views/Main.tsx
index 197529c91..858c02eb4 100644
--- a/src/client/views/Main.tsx
+++ b/src/client/views/Main.tsx
@@ -5,7 +5,7 @@ import * as ReactDOM from 'react-dom';
 import { DocumentDecorations } from './DocumentDecorations';
 import { Documents } from '../documents/Documents';
 import { Document } from '../../fields/Document';
-import { KeyStore, KeyStore as KS } from '../../fields/Key';
+import { KeyStore } from '../../fields/KeyStore';
 import { ListField } from '../../fields/ListField';
 import { NumberField } from '../../fields/NumberField';
 import { TextField } from '../../fields/TextField';
@@ -14,16 +14,21 @@ import { ContextMenu } from './ContextMenu';
 import { DocumentView } from './nodes/DocumentView';
 import { ImageField } from '../../fields/ImageField';
 import { CompileScript } from './../util/Scripting';
+import { Server } from '../Server';
+import { Utils } from '../../Utils';
+import { ServerUtils } from '../../server/ServerUtil';
+import { MessageStore, DocumentTransfer } from '../../server/Message';
+import { Database } from '../../server/database';
 
 
 configure({
     enforceActions: "observed"
 });
 
-const mainNodeCollection = new Array<Document>();
-let mainContainer = Documents.DockDocument(mainNodeCollection, {
-    x: 0, y: 0, title: "main container"
-})
+// const mainNodeCollection = new Array<Document>();
+// let mainContainer = Documents.DockDocument(mainNodeCollection, {
+//     x: 0, y: 0, title: "main container"
+// })
 
 window.addEventListener("drop", function (e) {
     e.preventDefault();
@@ -54,11 +59,78 @@ document.addEventListener("pointerdown", action(function (e: PointerEvent) {
 // schemaDocs[4].SetData(KS.Author, "Bob", TextField);
 // schemaDocs.push(doc2);
 // const doc7 = Documents.SchemaDocument(schemaDocs)
-const docset: Document[] = [];
-let doc4 = Documents.CollectionDocument(docset, {
-    x: 0, y: 400, title: "mini collection"
+
+const mainDocId = "mainDoc";
+Documents.initProtos(() => {
+    Utils.EmitCallback(Server.Socket, MessageStore.GetField, mainDocId, (res: any) => {
+        console.log("HELLO WORLD")
+        console.log("RESPONSE: " + res)
+        let mainContainer: Document;
+        if (res) {
+            var lid = KeyStore.Layout.Id;
+            let obj = ServerUtils.FromJson(res) as Document
+            mainContainer = obj
+        }
+        else {
+            const docset: Document[] = [];
+            mainContainer = Documents.CollectionDocument(docset, { x: 0, y: 400, title: "mini collection" }, mainDocId);
+            let args = new DocumentTransfer(mainContainer.ToJson())
+            Utils.Emit(Server.Socket, MessageStore.AddDocument, args)
+        }
+
+        let addImageNode = action(() => {
+            mainContainer.GetList<Document>(KeyStore.Data, []).push(Documents.ImageDocument("https://upload.wikimedia.org/wikipedia/commons/thumb/3/3a/Cat03.jpg/1200px-Cat03.jpg", {
+                x: 0, y: 300, width: 200, height: 200, title: "added note"
+            }));
+        })
+        let addTextNode = action(() => {
+            mainContainer.GetList<Document>(KeyStore.Data, []).push(Documents.TextDocument({
+                x: 0, y: 300, width: 200, height: 200, title: "added note"
+            }));
+        })
+        let addColNode = action(() => {
+            mainContainer.GetList<Document>(KeyStore.Data, []).push(Documents.CollectionDocument([], {
+                x: 0, y: 300, width: 200, height: 200, title: "added note"
+            }));
+        })
+
+        let clearDatabase = action(() => {
+            Utils.Emit(Server.Socket, MessageStore.DeleteAll, {});
+        })
+
+        ReactDOM.render((
+            <div style={{ position: "absolute", width: "100%", height: "100%" }}>
+                <DocumentView Document={mainContainer} ContainingCollectionView={undefined} DocumentView={undefined} />
+                <DocumentDecorations />
+                <ContextMenu />
+                <button style={{
+                    position: 'absolute',
+                    bottom: '0px',
+                    left: '0px',
+                    width: '150px'
+                }} onClick={addImageNode}>Add Image</button>
+                <button style={{
+                    position: 'absolute',
+                    bottom: '25px',
+                    left: '0px',
+                    width: '150px'
+                }} onClick={addTextNode}>Add Text</button>
+                <button style={{
+                    position: 'absolute',
+                    bottom: '50px',
+                    left: '0px',
+                    width: '150px'
+                }} onClick={addColNode}>Add Collection</button>
+                <button style={{
+                    position: 'absolute',
+                    bottom: '75px',
+                    left: '0px',
+                    width: '150px'
+                }} onClick={clearDatabase}>Clear Database</button>
+            </div>),
+            document.getElementById('root'));
+    })
 });
-mainContainer = doc4;
 // let doc5 = Documents.ImageDocument("https://upload.wikimedia.org/wikipedia/commons/thumb/3/3a/Cat03.jpg/1200px-Cat03.jpg", {
 //     x: 650, y: 500, width: 600, height: 600, title: "cat 2"
 // });
@@ -78,45 +150,3 @@ mainContainer = doc4;
 // mainContainer.Set(KeyStore.Data, mainNodes);
 //}
 //);
-
-let addImageNode = action(() => {
-    doc4.GetList<Document>(KeyStore.Data, []).push(Documents.ImageDocument("https://upload.wikimedia.org/wikipedia/commons/thumb/3/3a/Cat03.jpg/1200px-Cat03.jpg", {
-        x: 0, y: 300, width: 200, height: 200, title: "added note"
-    }));
-})
-let addTextNode = action(() => {
-    doc4.GetList<Document>(KeyStore.Data, []).push(Documents.TextDocument({
-        x: 0, y: 300, width: 200, height: 200, title: "added note"
-    }));
-})
-let addColNode = action(() => {
-    doc4.GetList<Document>(KeyStore.Data, []).push(Documents.CollectionDocument([], {
-        x: 0, y: 300, width: 200, height: 200, title: "added note"
-    }));
-})
-
-ReactDOM.render((
-    <div style={{ position: "absolute", width: "100%", height: "100%" }}>
-        <DocumentView Document={mainContainer} ContainingCollectionView={undefined} DocumentView={undefined} />
-        <DocumentDecorations />
-        <ContextMenu />
-        <button style={{
-            position: 'absolute',
-            bottom: '0px',
-            left: '0px',
-            width: '150px'
-        }} onClick={addImageNode}>Add Image</button>
-        <button style={{
-            position: 'absolute',
-            bottom: '25px',
-            left: '0px',
-            width: '150px'
-        }} onClick={addTextNode}>Add Text</button>
-        <button style={{
-            position: 'absolute',
-            bottom: '50px',
-            left: '0px',
-            width: '150px'
-        }} onClick={addColNode}>Add Collection</button>
-    </div>),
-    document.getElementById('root'));
\ No newline at end of file
diff --git a/src/client/views/collections/CollectionDockingView.tsx b/src/client/views/collections/CollectionDockingView.tsx
index 9aee9c10f..d9e261f55 100644
--- a/src/client/views/collections/CollectionDockingView.tsx
+++ b/src/client/views/collections/CollectionDockingView.tsx
@@ -1,8 +1,8 @@
 import { observer } from "mobx-react";
-import { KeyStore } from "../../../fields/Key";
+import { KeyStore } from "../../../fields/KeyStore";
 import React = require("react");
 import FlexLayout from "flexlayout-react";
-import { action, observable, computed } from "mobx";
+import { action, computed } from "mobx";
 import { Document } from "../../../fields/Document";
 import { DocumentView } from "../nodes/DocumentView";
 import { ListField } from "../../../fields/ListField";
@@ -13,17 +13,18 @@ import 'golden-layout/src/css/goldenlayout-dark-theme.css';
 import * as GoldenLayout from "golden-layout";
 import * as ReactDOM from 'react-dom';
 import { DragManager } from "../../util/DragManager";
-import { CollectionViewBase, CollectionViewProps, COLLECTION_BORDER_WIDTH } from "./CollectionViewBase";
+import { CollectionViewBase, COLLECTION_BORDER_WIDTH } from "./CollectionViewBase";
+import { FieldView } from "../nodes/FieldView";
 
 @observer
 export class CollectionDockingView extends CollectionViewBase {
 
     private static UseGoldenLayout = true;
-    public static LayoutString() { return CollectionViewBase.LayoutString("CollectionDockingView"); }
+    public static LayoutString() { return FieldView.LayoutString(CollectionDockingView) }
     private _containerRef = React.createRef<HTMLDivElement>();
     @computed
     private get modelForFlexLayout() {
-        const { CollectionFieldKey: fieldKey, DocumentForCollection: Document } = this.props;
+        const { fieldKey: fieldKey, doc: Document } = this.props;
         const value: Document[] = Document.GetData(fieldKey, ListField, []);
         var docs = value.map(doc => {
             return { type: 'tabset', weight: 50, selected: 0, children: [{ type: "tab", name: doc.Title, component: doc.Id }] };
@@ -39,7 +40,7 @@ export class CollectionDockingView extends CollectionViewBase {
     }
     @computed
     private get modelForGoldenLayout(): any {
-        const { CollectionFieldKey: fieldKey, DocumentForCollection: Document } = this.props;
+        const { fieldKey: fieldKey, doc: Document } = this.props;
         const value: Document[] = Document.GetData(fieldKey, ListField, []);
         var docs = value.map(doc => {
             return { type: 'component', componentName: 'documentViewComponent', componentState: { doc: doc } };
@@ -50,9 +51,6 @@ export class CollectionDockingView extends CollectionViewBase {
             }, content: [{ type: 'row', content: docs }]
         });
     }
-    constructor(props: CollectionViewProps) {
-        super(props);
-    }
 
     componentDidMount: () => void = () => {
         if (this._containerRef.current && CollectionDockingView.UseGoldenLayout) {
@@ -67,8 +65,8 @@ export class CollectionDockingView extends CollectionViewBase {
 
 
     @action
-    onResize = (event: any) => {
-        var cur = this.props.ContainingDocumentView!.MainContent.current;
+    onResize = () => {
+        var cur = this.props.DocumentViewForField!.MainContent.current;
 
         // bcz: since GoldenLayout isn't a React component itself, we need to notify it to resize when its document container's size has changed
         CollectionDockingView.myLayout.updateSize(cur!.getBoundingClientRect().width, cur!.getBoundingClientRect().height);
@@ -91,7 +89,7 @@ export class CollectionDockingView extends CollectionViewBase {
         if (component === "button") {
             return <button>{node.getName()}</button>;
         }
-        const { CollectionFieldKey: fieldKey, DocumentForCollection: Document } = this.props;
+        const { fieldKey: fieldKey, doc: Document } = this.props;
         const value: Document[] = Document.GetData(fieldKey, ListField, []);
         for (var i: number = 0; i < value.length; i++) {
             if (value[i].Id === component) {
@@ -195,7 +193,6 @@ export class CollectionDockingView extends CollectionViewBase {
     goldenLayoutFactory() {
         CollectionDockingView.myLayout = this.modelForGoldenLayout;
 
-        var layout = CollectionDockingView.myLayout;
         CollectionDockingView.myLayout.on('tabCreated', function (tab: any) {
             if (CollectionDockingView._dragDiv) {
                 CollectionDockingView._dragDiv.removeChild(CollectionDockingView._dragElement);
@@ -251,10 +248,9 @@ export class CollectionDockingView extends CollectionViewBase {
 
 
     render() {
-        const { CollectionFieldKey: fieldKey, DocumentForCollection: Document } = this.props;
-        const value: Document[] = Document.GetData(fieldKey, ListField, []);
+        const { fieldKey: fieldKey, doc: Document } = this.props;
         // bcz: not sure why, but I need these to force the flexlayout to update when the collection size changes.
-        var s = this.props.ContainingDocumentView != undefined ? this.props.ContainingDocumentView!.ScalingToScreenSpace : 1;
+        var s = this.props.DocumentViewForField != undefined ? this.props.DocumentViewForField!.ScalingToScreenSpace : 1;
         var w = Document.GetData(KeyStore.Width, NumberField, Number(0)) / s;
         var h = Document.GetData(KeyStore.Height, NumberField, Number(0)) / s;
 
diff --git a/src/client/views/collections/CollectionFreeFormView.tsx b/src/client/views/collections/CollectionFreeFormView.tsx
index 9cf29d000..e6b1d103d 100644
--- a/src/client/views/collections/CollectionFreeFormView.tsx
+++ b/src/client/views/collections/CollectionFreeFormView.tsx
@@ -5,28 +5,25 @@ import { CollectionFreeFormDocumentView } from "../nodes/CollectionFreeFormDocum
 import { DragManager } from "../../util/DragManager";
 import "./CollectionFreeFormView.scss";
 import { Utils } from "../../../Utils";
-import { CollectionViewBase, CollectionViewProps, COLLECTION_BORDER_WIDTH } from "./CollectionViewBase";
+import { CollectionViewBase, COLLECTION_BORDER_WIDTH } from "./CollectionViewBase";
 import { SelectionManager } from "../../util/SelectionManager";
-import { Key, KeyStore } from "../../../fields/Key";
+import { KeyStore } from "../../../fields/KeyStore";
 import { Document } from "../../../fields/Document";
 import { ListField } from "../../../fields/ListField";
 import { NumberField } from "../../../fields/NumberField";
 import { Documents } from "../../documents/Documents";
 import { FieldWaiting } from "../../../fields/Field";
+import { FakeJsxArgs } from "../nodes/DocumentView";
+import { FieldView } from "../nodes/FieldView";
 
 @observer
 export class CollectionFreeFormView extends CollectionViewBase {
-    public static LayoutString() { return CollectionViewBase.LayoutString("CollectionFreeFormView"); }
-    private _containerRef = React.createRef<HTMLDivElement>();
+    public static LayoutString() { return FieldView.LayoutString(CollectionFreeFormView); }
     private _canvasRef = React.createRef<HTMLDivElement>();
     private _nodeContainerRef = React.createRef<HTMLDivElement>();
     private _lastX: number = 0;
     private _lastY: number = 0;
 
-    constructor(props: CollectionViewProps) {
-        super(props);
-    }
-
     @action
     drop = (e: Event, de: DragManager.DropEvent) => {
         const doc = de.data["document"];
@@ -39,7 +36,7 @@ export class CollectionFreeFormView extends CollectionViewBase {
             const xOffset = de.data["xOffset"] as number || 0;
             const yOffset = de.data["yOffset"] as number || 0;
             const { scale, translateX, translateY } = Utils.GetScreenTransform(this._canvasRef.current!);
-            let sscale = this.props.ContainingDocumentView!.props.Document.GetData(KeyStore.Scale, NumberField, Number(1))
+            let sscale = this.props.DocumentViewForField!.props.Document.GetData(KeyStore.Scale, NumberField, Number(1))
             const screenX = de.x - xOffset;
             const screenY = de.y - yOffset;
             const docX = (screenX - translateX) / sscale / scale;
@@ -51,9 +48,13 @@ export class CollectionFreeFormView extends CollectionViewBase {
         e.stopPropagation();
     }
 
-    componentDidMount() {
-        if (this._containerRef.current) {
-            DragManager.MakeDropTarget(this._containerRef.current, {
+    private dropDisposer?: DragManager.DragDropDisposer;
+    createDropTarget = (ele: HTMLDivElement) => {
+        if (this.dropDisposer) {
+            this.dropDisposer();
+        }
+        if (ele) {
+            this.dropDisposer = DragManager.MakeDropTarget(ele, {
                 handlers: {
                     drop: this.drop
                 }
@@ -88,11 +89,11 @@ export class CollectionFreeFormView extends CollectionViewBase {
         if (!e.cancelBubble && this.active) {
             e.preventDefault();
             e.stopPropagation();
-            let currScale: number = this.props.ContainingDocumentView!.ScalingToScreenSpace;
-            let x = this.props.DocumentForCollection.GetData(KeyStore.PanX, NumberField, Number(0));
-            let y = this.props.DocumentForCollection.GetData(KeyStore.PanY, NumberField, Number(0));
-            this.props.DocumentForCollection.SetData(KeyStore.PanX, x + (e.pageX - this._lastX) / currScale, NumberField);
-            this.props.DocumentForCollection.SetData(KeyStore.PanY, y + (e.pageY - this._lastY) / currScale, NumberField);
+            let currScale: number = this.props.DocumentViewForField!.ScalingToScreenSpace;
+            let x = this.props.doc.GetData(KeyStore.PanX, NumberField, Number(0));
+            let y = this.props.doc.GetData(KeyStore.PanY, NumberField, Number(0));
+            this.props.doc.SetData(KeyStore.PanX, x + (e.pageX - this._lastX) / currScale, NumberField);
+            this.props.doc.SetData(KeyStore.PanY, y + (e.pageY - this._lastY) / currScale, NumberField);
         }
         this._lastX = e.pageX;
         this._lastY = e.pageY;
@@ -102,7 +103,7 @@ export class CollectionFreeFormView extends CollectionViewBase {
     onPointerWheel = (e: React.WheelEvent): void => {
         e.stopPropagation();
 
-        let { LocalX, Ss, Panxx, Xx, LocalY, Panyy, Yy, ContainerX, ContainerY } = this.props.ContainingDocumentView!.TransformToLocalPoint(e.pageX, e.pageY);
+        let { LocalX, Ss, Panxx, Xx, LocalY, Panyy, Yy, ContainerX, ContainerY } = this.props.DocumentViewForField!.TransformToLocalPoint(e.pageX, e.pageY);
 
         var deltaScale = (1 - (e.deltaY / 1000)) * Ss;
 
@@ -112,9 +113,9 @@ export class CollectionFreeFormView extends CollectionViewBase {
         let dx = ContainerX - newContainerX;
         let dy = ContainerY - newContainerY;
 
-        this.props.DocumentForCollection.Set(KeyStore.Scale, new NumberField(deltaScale));
-        this.props.DocumentForCollection.SetData(KeyStore.PanX, Panxx + dx, NumberField);
-        this.props.DocumentForCollection.SetData(KeyStore.PanY, Panyy + dy, NumberField);
+        this.props.doc.Set(KeyStore.Scale, new NumberField(deltaScale));
+        this.props.doc.SetData(KeyStore.PanX, Panxx + dx, NumberField);
+        this.props.doc.SetData(KeyStore.PanY, Panyy + dy, NumberField);
     }
 
     @action
@@ -124,8 +125,8 @@ export class CollectionFreeFormView extends CollectionViewBase {
         let fReader = new FileReader()
         let file = e.dataTransfer.items[0].getAsFile();
         let that = this;
-        const panx: number = this.props.DocumentForCollection.GetData(KeyStore.PanX, NumberField, Number(0));
-        const pany: number = this.props.DocumentForCollection.GetData(KeyStore.PanY, NumberField, Number(0));
+        const panx: number = this.props.doc.GetData(KeyStore.PanX, NumberField, Number(0));
+        const pany: number = this.props.doc.GetData(KeyStore.PanY, NumberField, Number(0));
         let x = e.pageX - panx
         let y = e.pageY - pany
 
@@ -135,11 +136,11 @@ export class CollectionFreeFormView extends CollectionViewBase {
                 let doc = Documents.ImageDocument(url, {
                     x: x, y: y
                 })
-                let docs = that.props.DocumentForCollection.GetT(KeyStore.Data, ListField);
+                let docs = that.props.doc.GetT(KeyStore.Data, ListField);
                 if (docs != FieldWaiting) {
                     if (!docs) {
                         docs = new ListField<Document>();
-                        that.props.DocumentForCollection.Set(KeyStore.Data, docs)
+                        that.props.doc.Set(KeyStore.Data, docs)
                     }
                     docs.Data.push(doc);
                 }
@@ -156,7 +157,7 @@ export class CollectionFreeFormView extends CollectionViewBase {
 
     @action
     bringToFront(doc: CollectionFreeFormDocumentView) {
-        const { CollectionFieldKey: fieldKey, DocumentForCollection: Document } = this.props;
+        const { fieldKey: fieldKey, doc: Document } = this.props;
 
         const value: Document[] = Document.GetList<Document>(fieldKey, []);
         var topmost = value.reduce((topmost, d) => Math.max(d.GetNumber(KeyStore.ZIndex, 0), topmost), -1000);
@@ -173,8 +174,12 @@ export class CollectionFreeFormView extends CollectionViewBase {
     }
 
     render() {
-        const { CollectionFieldKey: fieldKey, DocumentForCollection: Document } = this.props;
-        const value: Document[] = Document.GetList<Document>(fieldKey, []);
+        const { fieldKey: fieldKey, doc: Document } = this.props;
+        // const value: Document[] = Document.GetList<Document>(fieldKey, []);
+        const lvalue = Document.GetT<ListField<Document>>(fieldKey, ListField);
+        if (!lvalue || lvalue === "<Waiting>") {
+            return <p>Error loading collection data</p>
+        }
         const panx: number = Document.GetNumber(KeyStore.PanX, 0);
         const pany: number = Document.GetNumber(KeyStore.PanY, 0);
         const currScale: number = Document.GetNumber(KeyStore.Scale, 1);
@@ -189,11 +194,11 @@ export class CollectionFreeFormView extends CollectionViewBase {
                     onContextMenu={(e) => e.preventDefault()}
                     onDrop={this.onDrop}
                     onDragOver={this.onDragOver}
-                    ref={this._containerRef}>
+                    ref={this.createDropTarget}>
                     <div className="collectionfreeformview" style={{ transform: `translate(${panx}px, ${pany}px) scale(${currScale}, ${currScale})`, transformOrigin: `left, top` }} ref={this._canvasRef}>
 
                         <div className="node-container" ref={this._nodeContainerRef}>
-                            {value.map(doc => {
+                            {lvalue.Data.map(doc => {
                                 return (<CollectionFreeFormDocumentView key={doc.Id} ContainingCollectionView={this} Document={doc} DocumentView={undefined} />);
                             })}
                         </div>
diff --git a/src/client/views/collections/CollectionSchemaView.tsx b/src/client/views/collections/CollectionSchemaView.tsx
index 2d5bd6c99..9f32ccb72 100644
--- a/src/client/views/collections/CollectionSchemaView.tsx
+++ b/src/client/views/collections/CollectionSchemaView.tsx
@@ -11,13 +11,13 @@ import { CollectionViewBase } from "./CollectionViewBase";
 import { DocumentView } from "../nodes/DocumentView";
 import { EditableView } from "../EditableView";
 import { CompileScript, ToField } from "../../util/Scripting";
-import { KeyStore as KS, Key } from "../../../fields/Key";
+import { KeyStore as KS } from "../../../fields/KeyStore";
 import { Document } from "../../../fields/Document";
 import { Field } from "../../../fields/Field";
 
 @observer
 export class CollectionSchemaView extends CollectionViewBase {
-    public static LayoutString() { return CollectionViewBase.LayoutString("CollectionSchemaView"); }
+    public static LayoutString() { return FieldView.LayoutString(CollectionSchemaView); }
 
     @observable
     selectedIndex = 0;
@@ -97,7 +97,7 @@ export class CollectionSchemaView extends CollectionViewBase {
     }
 
     render() {
-        const { DocumentForCollection: Document, CollectionFieldKey: fieldKey } = this.props;
+        const { doc: Document, fieldKey: fieldKey } = this.props;
         const children = Document.GetList<Document>(fieldKey, []);
         const columns = Document.GetList(KS.ColumnsKey,
             [KS.Title, KS.Data, KS.Author])
diff --git a/src/client/views/collections/CollectionViewBase.tsx b/src/client/views/collections/CollectionViewBase.tsx
index 09e8ec729..4fcbb1699 100644
--- a/src/client/views/collections/CollectionViewBase.tsx
+++ b/src/client/views/collections/CollectionViewBase.tsx
@@ -2,7 +2,7 @@ import { action, computed } from "mobx";
 import { observer } from "mobx-react";
 import { Document } from "../../../fields/Document";
 import { Opt } from "../../../fields/Field";
-import { Key, KeyStore } from "../../../fields/Key";
+import { Key } from "../../../fields/Key";
 import { ListField } from "../../../fields/ListField";
 import { SelectionManager } from "../../util/SelectionManager";
 import { ContextMenu } from "../ContextMenu";
@@ -10,42 +10,33 @@ import React = require("react");
 import { DocumentView } from "../nodes/DocumentView";
 import { CollectionDockingView } from "./CollectionDockingView";
 import { CollectionFreeFormDocumentView } from "../nodes/CollectionFreeFormDocumentView";
-
-
-export interface CollectionViewProps {
-    CollectionFieldKey: Key;
-    DocumentForCollection: Document;
-    ContainingDocumentView: Opt<DocumentView>;
-}
+import { FieldViewProps } from "../nodes/FieldView";
 
 export const COLLECTION_BORDER_WIDTH = 2;
 
 @observer
-export class CollectionViewBase extends React.Component<CollectionViewProps> {
+export class CollectionViewBase extends React.Component<FieldViewProps> {
 
-    public static LayoutString(collectionType: string) {
-        return `<${collectionType} DocumentForCollection={Document} CollectionFieldKey={DataKey} ContainingDocumentView={DocumentView}/>`;
-    }
     @computed
     public get active(): boolean {
-        var isSelected = (this.props.ContainingDocumentView instanceof CollectionFreeFormDocumentView && SelectionManager.IsSelected(this.props.ContainingDocumentView));
+        var isSelected = (this.props.DocumentViewForField instanceof CollectionFreeFormDocumentView && SelectionManager.IsSelected(this.props.DocumentViewForField));
         var childSelected = SelectionManager.SelectedDocuments().some(view => view.props.ContainingCollectionView == this);
-        var topMost = this.props.ContainingDocumentView != undefined && (
-            this.props.ContainingDocumentView.props.ContainingCollectionView == undefined ||
-            this.props.ContainingDocumentView.props.ContainingCollectionView instanceof CollectionDockingView);
+        var topMost = this.props.DocumentViewForField != undefined && (
+            this.props.DocumentViewForField.props.ContainingCollectionView == undefined ||
+            this.props.DocumentViewForField.props.ContainingCollectionView instanceof CollectionDockingView);
         return isSelected || childSelected || topMost;
     }
     @action
     addDocument = (doc: Document): void => {
         //TODO This won't create the field if it doesn't already exist
-        const value = this.props.DocumentForCollection.GetData(this.props.CollectionFieldKey, ListField, new Array<Document>())
+        const value = this.props.doc.GetData(this.props.fieldKey, ListField, new Array<Document>())
         value.push(doc);
     }
 
     @action
     removeDocument = (doc: Document): void => {
         //TODO This won't create the field if it doesn't already exist
-        const value = this.props.DocumentForCollection.GetData(this.props.CollectionFieldKey, ListField, new Array<Document>())
+        const value = this.props.doc.GetData(this.props.fieldKey, ListField, new Array<Document>())
         if (value.indexOf(doc) !== -1) {
             value.splice(value.indexOf(doc), 1)
 
diff --git a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
index 1d53cedc4..bfd50da81 100644
--- a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
+++ b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
@@ -1,6 +1,6 @@
 import { action, computed } from "mobx";
 import { observer } from "mobx-react";
-import { Key, KeyStore } from "../../../fields/Key";
+import { KeyStore } from "../../../fields/KeyStore";
 import { NumberField } from "../../../fields/NumberField";
 import { DragManager } from "../../util/DragManager";
 import { SelectionManager } from "../../util/SelectionManager";
@@ -10,6 +10,7 @@ import { ContextMenu } from "../ContextMenu";
 import "./NodeView.scss";
 import React = require("react");
 import { DocumentView, DocumentViewProps } from "./DocumentView";
+import { Utils } from "../../../Utils";
 
 
 @observer
@@ -188,7 +189,6 @@ export class CollectionFreeFormDocumentView extends DocumentView {
         if (this.topMost) {
             ContextMenu.Instance.clearItems()
             ContextMenu.Instance.addItem({ description: "Full Screen", event: this.fullScreenClicked })
-            ContextMenu.Instance.displayMenu(e.pageX - 15, e.pageY - 15)
         }
         else {
             // DocumentViews should stop propogation of this event
@@ -198,20 +198,25 @@ export class CollectionFreeFormDocumentView extends DocumentView {
             ContextMenu.Instance.addItem({ description: "Full Screen", event: this.fullScreenClicked })
             ContextMenu.Instance.addItem({ description: "Open Right", event: this.openRight })
             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: "Copy ID", event: () => {
+                Utils.CopyText(this.props.Document.Id)
+            }
+        })
+        ContextMenu.Instance.displayMenu(e.pageX - 15, e.pageY - 15)
     }
 
     render() {
-        var freestyling = this.props.ContainingCollectionView instanceof CollectionFreeFormView;
         return (
             <div className="node" ref={this._mainCont} style={{
-                transform: freestyling ? this.transform : "",
-                width: freestyling ? this.width : "100%",
-                height: freestyling ? this.height : "100%",
-                position: freestyling ? "absolute" : "relative",
-                zIndex: freestyling ? this.zIndex : 0,
+                transform: this.transform,
+                width: this.width,
+                height: this.height,
+                position: "absolute",
+                zIndex: this.zIndex,
             }}
                 onContextMenu={this.onContextMenu}
                 onPointerDown={this.onPointerDown}>
diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index 730ce62f2..3767d28c6 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -1,8 +1,9 @@
 import { action, computed } from "mobx";
 import { observer } from "mobx-react";
 import { Document } from "../../../fields/Document";
-import { Opt, FieldWaiting } from "../../../fields/Field";
-import { Key, KeyStore } from "../../../fields/Key";
+import { Opt, FieldWaiting, Field } from "../../../fields/Field";
+import { Key } from "../../../fields/Key";
+import { KeyStore } from "../../../fields/KeyStore";
 import { ListField } from "../../../fields/ListField";
 import { NumberField } from "../../../fields/NumberField";
 import { TextField } from "../../../fields/TextField";
@@ -22,6 +23,48 @@ export interface DocumentViewProps {
     DocumentView: Opt<DocumentView>  // needed only to set ContainingDocumentView on CollectionViewProps when invoked from JsxParser -- is there a better way?
     ContainingCollectionView: Opt<CollectionViewBase>;
 }
+export interface JsxArgs extends DocumentViewProps {
+    Keys: { [name: string]: Key }
+    Fields: { [name: string]: Field }
+}
+
+/*
+This function is pretty much a hack that lets us fill out the fields in JsxArgs with something that
+jsx-to-string can recover the jsx from
+Example usage of this function:
+    public static LayoutString() {
+        let args = FakeJsxArgs(["Data"]);
+        return jsxToString(
+            <CollectionFreeFormView
+                doc={args.Document}
+                fieldKey={args.Keys.Data}
+                DocumentViewForField={args.DocumentView} />,
+            { useFunctionCode: true, functionNameOnly: true }
+        )
+    }
+*/
+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;
+}
+
 @observer
 export class DocumentView extends React.Component<DocumentViewProps> {
 
@@ -50,9 +93,9 @@ export class DocumentView extends React.Component<DocumentViewProps> {
     @computed
     public get ScalingToScreenSpace(): number {
         if (this.props.ContainingCollectionView != undefined &&
-            this.props.ContainingCollectionView.props.ContainingDocumentView != undefined) {
-            let ss = this.props.ContainingCollectionView.props.DocumentForCollection.GetData(KeyStore.Scale, NumberField, Number(1));
-            return this.props.ContainingCollectionView.props.ContainingDocumentView.ScalingToScreenSpace * ss;
+            this.props.ContainingCollectionView.props.DocumentViewForField != undefined) {
+            let ss = this.props.ContainingCollectionView.props.doc.GetData(KeyStore.Scale, NumberField, Number(1));
+            return this.props.ContainingCollectionView.props.DocumentViewForField.ScalingToScreenSpace * ss;
         }
         return 1;
     }
@@ -64,8 +107,8 @@ export class DocumentView extends React.Component<DocumentViewProps> {
         // if this collection view is nested within another collection view, then 
         // first transform the screen point into the parent collection's coordinate space.
         let { LocalX: parentX, LocalY: parentY } = this.props.ContainingCollectionView != undefined &&
-            this.props.ContainingCollectionView.props.ContainingDocumentView != undefined ?
-            this.props.ContainingCollectionView.props.ContainingDocumentView.TransformToLocalPoint(screenX, screenY) :
+            this.props.ContainingCollectionView.props.DocumentViewForField != undefined ?
+            this.props.ContainingCollectionView.props.DocumentViewForField.TransformToLocalPoint(screenX, screenY) :
             { LocalX: screenX, LocalY: screenY };
         let ContainerX: number = parentX - COLLECTION_BORDER_WIDTH;
         let ContainerY: number = parentY - COLLECTION_BORDER_WIDTH;
@@ -113,7 +156,7 @@ export class DocumentView extends React.Component<DocumentViewProps> {
 
         // if this collection view is nested within another collection view, then 
         // first transform the local point into the parent collection's coordinate space.
-        let containingDocView = this.props.ContainingCollectionView != undefined ? this.props.ContainingCollectionView.props.ContainingDocumentView : undefined;
+        let containingDocView = this.props.ContainingCollectionView != undefined ? this.props.ContainingCollectionView.props.DocumentViewForField : undefined;
         if (containingDocView != undefined) {
             let ss = containingDocView.props.Document.GetData(KeyStore.Scale, NumberField, Number(1));
             let panxx = containingDocView.props.Document.GetData(KeyStore.PanX, NumberField, Number(0)) + COLLECTION_BORDER_WIDTH * ss;
@@ -128,6 +171,10 @@ export class DocumentView extends React.Component<DocumentViewProps> {
 
     render() {
         let bindings = { ...this.props } as any;
+        let lkeys = this.props.Document.GetT(KeyStore.LayoutKeys, ListField);
+        if (!lkeys || lkeys === "<Waiting>") {
+            return <p>Error loading layout keys</p>;
+        }
         for (const key of this.layoutKeys) {
             bindings[key.Name + "Key"] = key;  // this maps string values of the form <keyname>Key to an actual key Kestore.keyname  e.g,   "DataKey" => KeyStore.Data
         }
diff --git a/src/client/views/nodes/FieldView.tsx b/src/client/views/nodes/FieldView.tsx
index 12371eb2e..fae124528 100644
--- a/src/client/views/nodes/FieldView.tsx
+++ b/src/client/views/nodes/FieldView.tsx
@@ -25,7 +25,7 @@ export interface FieldViewProps {
 
 @observer
 export class FieldView extends React.Component<FieldViewProps> {
-    public static LayoutString(fieldType: string) { return `<${fieldType} doc={Document} DocumentViewForField={DocumentView} fieldKey={DataKey} />`; }
+    public static LayoutString(fieldType: { name: string }) { return `<${fieldType.name} doc={Document} DocumentViewForField={DocumentView} fieldKey={DataKey} />`; }
     @computed
     get field(): FieldValue<Field> {
         const { doc, fieldKey } = this.props;
diff --git a/src/client/views/nodes/FormattedTextBox.tsx b/src/client/views/nodes/FormattedTextBox.tsx
index 8bc4c902c..39d7bf4f0 100644
--- a/src/client/views/nodes/FormattedTextBox.tsx
+++ b/src/client/views/nodes/FormattedTextBox.tsx
@@ -34,7 +34,7 @@ import { CollectionFreeFormDocumentView } from "./CollectionFreeFormDocumentView
 @observer
 export class FormattedTextBox extends React.Component<FieldViewProps> {
 
-    public static LayoutString() { return FieldView.LayoutString("FormattedTextBox"); }
+    public static LayoutString() { return FieldView.LayoutString(FormattedTextBox) }
     private _ref: React.RefObject<HTMLDivElement>;
     private _editorView: Opt<EditorView>;
     private _reactionDisposer: Opt<IReactionDisposer>;
diff --git a/src/client/views/nodes/ImageBox.tsx b/src/client/views/nodes/ImageBox.tsx
index ab20f140c..013b8b7d3 100644
--- a/src/client/views/nodes/ImageBox.tsx
+++ b/src/client/views/nodes/ImageBox.tsx
@@ -14,7 +14,7 @@ import { observable, action } from 'mobx';
 @observer
 export class ImageBox extends React.Component<FieldViewProps> {
 
-    public static LayoutString() { return FieldView.LayoutString("ImageBox"); }
+    public static LayoutString() { return FieldView.LayoutString(ImageBox) }
     private _ref: React.RefObject<HTMLDivElement>;
     private _downX: number = 0;
     private _downY: number = 0;
diff --git a/src/debug/Viewer.tsx b/src/debug/Viewer.tsx
new file mode 100644
index 000000000..ddfe884ed
--- /dev/null
+++ b/src/debug/Viewer.tsx
@@ -0,0 +1,192 @@
+import { action, configure, observable, ObservableMap, Lambda } from 'mobx';
+import "normalize.css";
+import * as React from 'react';
+import * as ReactDOM from 'react-dom';
+import { observer } from 'mobx-react';
+import { Document } from '../fields/Document';
+import { BasicField } from '../fields/BasicField';
+import { ListField } from '../fields/ListField';
+import { Key } from '../fields/Key';
+import { Field } from '../fields/Field';
+import { Server } from '../client/Server';
+
+configure({
+    enforceActions: "observed"
+});
+
+@observer
+class FieldViewer extends React.Component<{ field: BasicField<any> }> {
+    render() {
+        return <span>{this.props.field.Data} ({this.props.field.Id})</span>;
+    }
+}
+
+@observer
+class KeyViewer extends React.Component<{ field: Key }> {
+    render() {
+        return this.props.field.Name;
+    }
+}
+
+@observer
+class ListViewer extends React.Component<{ field: ListField<Field> }>{
+    @observable
+    expanded = false;
+
+    render() {
+        let content;
+        if (this.expanded) {
+            content = (
+                <div>
+                    {this.props.field.Data.map(field => <DebugViewer fieldId={field.Id} key={field.Id} />)}
+                </div>
+            )
+        } else {
+            content = <>[...] ({this.props.field.Id})</>
+        }
+        return (
+            <div>
+                <button onClick={action(() => this.expanded = !this.expanded)}>Toggle</button>
+                {content}
+            </div >
+        )
+    }
+}
+
+@observer
+class DocumentViewer extends React.Component<{ field: Document }> {
+    private keyMap: ObservableMap<string, Key> = new ObservableMap
+
+    private disposer?: Lambda;
+
+    componentDidMount() {
+        let f = () => {
+            Array.from(this.props.field._proxies.keys()).forEach(id => {
+                if (!this.keyMap.has(id)) {
+                    Server.GetField(id, (field) => {
+                        if (field && field instanceof Key) {
+                            this.keyMap.set(id, field);
+                        }
+                    })
+                }
+            });
+        }
+        this.disposer = this.props.field._proxies.observe(f)
+        f()
+    }
+
+    componentWillUnmount() {
+        if (this.disposer) {
+            this.disposer();
+        }
+    }
+
+    render() {
+        let fields = Array.from(this.props.field._proxies.entries()).map(kv => {
+            let key = this.keyMap.get(kv[0]);
+            return (
+                <div key={kv[0]}>
+                    <b>({key ? key.Name : kv[0]}): </b>
+                    <DebugViewer fieldId={kv[1]!}></DebugViewer>
+                </div>
+            )
+        })
+        return (
+            <div>
+                Document ({this.props.field.Id})
+                <div style={{ paddingLeft: "25px" }}>
+                    {fields}
+                </div>
+            </div>
+        )
+    }
+}
+
+@observer
+class DebugViewer extends React.Component<{ fieldId: string }> {
+    @observable
+    private field?: Field;
+
+    @observable
+    private error?: string;
+
+    constructor(props: { fieldId: string }) {
+        super(props)
+        this.update()
+    }
+
+    update() {
+        Server.GetField(this.props.fieldId, (field => {
+            this.field = field;
+            if (!field) {
+                this.error = `Field with id ${this.props.fieldId} not found`
+            }
+        }));
+
+    }
+
+    render() {
+        let content;
+        if (this.field) {
+            // content = this.field.ToJson();
+            if (this.field instanceof ListField) {
+                content = (<ListViewer field={this.field} />)
+            } else if (this.field instanceof Document) {
+                content = (<DocumentViewer field={this.field} />)
+            } else if (this.field instanceof BasicField) {
+                content = (<FieldViewer field={this.field} />)
+            } else if (this.field instanceof Key) {
+                content = (<KeyViewer field={this.field} />)
+            }
+        } else if (this.error) {
+            content = <span>Field <b>{this.props.fieldId}</b> not found <button onClick={() => this.update()}>Refresh</button></span>
+        } else {
+            content = <>Field loading</>
+        }
+        return content;
+    }
+}
+
+@observer
+class Viewer extends React.Component {
+    @observable
+    private idToAdd: string = '';
+
+    @observable
+    private ids: string[] = [];
+
+    @action
+    inputOnChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        this.idToAdd = e.target.value;
+    }
+
+    @action
+    onKeyPress = (e: React.KeyboardEvent<HTMLDivElement>) => {
+        if (e.key === "Enter") {
+            this.ids.push(this.idToAdd)
+            this.idToAdd = ""
+        }
+    }
+
+    render() {
+        return (
+            <>
+                <input value={this.idToAdd}
+                    onChange={this.inputOnChange}
+                    onKeyDown={this.onKeyPress} />
+                <div>
+                    {this.ids.map(id => {
+                        return <DebugViewer fieldId={id} key={id}></DebugViewer>
+                    })}
+                </div>
+            </>
+        )
+    }
+}
+
+ReactDOM.render((
+    <div style={{ position: "absolute", width: "100%", height: "100%" }}>
+        <Viewer />
+    </div>),
+    document.getElementById('root')
+);
\ No newline at end of file
diff --git a/src/fields/BasicField.ts b/src/fields/BasicField.ts
index 9476f5d21..15eb067a0 100644
--- a/src/fields/BasicField.ts
+++ b/src/fields/BasicField.ts
@@ -3,14 +3,23 @@ import { observable, computed, action } from "mobx";
 import { Server } from "../client/Server";
 
 export abstract class BasicField<T> extends Field {
-    constructor(data: T, id: FIELD_ID = undefined) {
+    constructor(data: T, save: boolean, id: FIELD_ID = undefined) {
         super(id);
 
         this.data = data;
+        if (save) {
+            Server.UpdateField(this)
+        }
+    }
+
+    UpdateFromServer(data: any) {
+        if (this.data !== data) {
+            this.data = data;
+        }
     }
 
     @observable
-    private data: T;
+    protected data: T;
 
     @computed
     get Data(): T {
@@ -18,10 +27,9 @@ export abstract class BasicField<T> extends Field {
     }
 
     set Data(value: T) {
-        if (this.data === value) {
-            return;
+        if (this.data != value) {
+            this.data = value;
         }
-        this.data = value;
         Server.UpdateField(this);
     }
 
diff --git a/src/fields/Document.ts b/src/fields/Document.ts
index f7239145f..3067621be 100644
--- a/src/fields/Document.ts
+++ b/src/fields/Document.ts
@@ -1,19 +1,34 @@
 import { Field, Cast, Opt, FieldWaiting, FIELD_ID, FieldValue } from "./Field"
-import { Key, KeyStore } from "./Key"
+import { Key } from "./Key"
+import { KeyStore } from "./KeyStore";
 import { NumberField } from "./NumberField";
 import { ObservableMap, computed, action, observable } from "mobx";
 import { TextField } from "./TextField";
 import { ListField } from "./ListField";
-import { findDOMNode } from "react-dom";
 import { Server } from "../client/Server";
 import { Types } from "../server/Message";
-import { ObjectID } from "bson";
-import { Utils } from "../Utils";
 
 export class Document extends Field {
-    public fields: ObservableMap<Key, Opt<Field>> = new ObservableMap();
+    public fields: ObservableMap<string, { key: Key, field: Field }> = new ObservableMap();
     public _proxies: ObservableMap<string, FIELD_ID> = new ObservableMap();
 
+    constructor(id?: string, save: boolean = true) {
+        super(id)
+
+        if (save) {
+            var title = (this._proxies.has(KeyStore.Title.Id) ? "???" : this.Title) + "(" + this.Id + ")";
+            console.log("Save " + title);
+            Server.UpdateField(this)
+        }
+    }
+
+    UpdateFromServer(data: [string, string][]) {
+        for (const key in data) {
+            const element = data[key];
+            this._proxies.set(element[0], element[1]);
+        }
+    }
+
     @computed
     public get Title() {
         return this.GetText(KeyStore.Title, "<untitled>");
@@ -22,28 +37,33 @@ export class Document extends Field {
     Get(key: Key, ignoreProto: boolean = false): FieldValue<Field> {
         let field: FieldValue<Field>;
         if (ignoreProto) {
-            if (this.fields.has(key)) {
-                field = this.fields.get(key);
+            if (this.fields.has(key.Id)) {
+                field = this.fields.get(key.Id)!.field;
             } else if (this._proxies.has(key.Id)) {
                 field = Server.GetDocumentField(this, key);
             }
         } else {
             let doc: FieldValue<Document> = this;
             while (doc && doc != FieldWaiting && field != FieldWaiting) {
-                if (!doc.fields.has(key)) {
-                    if (doc._proxies.has(key.Id)) {
+                let curField = doc.fields.get(key.Id);
+                let curProxy = doc._proxies.get(key.Id);
+                if (!curField || (curProxy && curField.field.Id !== curProxy)) {
+                    if (curProxy) {
                         field = Server.GetDocumentField(doc, key);
                         break;
                     }
-                    if ((doc.fields.has(KeyStore.Prototype) || doc._proxies.has(KeyStore.Prototype.Id))) {
+                    if ((doc.fields.has(KeyStore.Prototype.Id) || doc._proxies.has(KeyStore.Prototype.Id))) {
                         doc = doc.GetPrototype();
-                    } else
+                    } else {
                         break;
+                    }
                 } else {
-                    field = doc.fields.get(key);
+                    field = curField.field;
                     break;
                 }
             }
+            if (doc == FieldWaiting)
+                field = FieldWaiting;
         }
 
         return field;
@@ -87,11 +107,14 @@ export class Document extends Field {
 
     @action
     Set(key: Key, field: Field | undefined): void {
+        console.log("Assign: " + key.Name + " = " + (field ? field.GetValue() : "<undefined>") + " (" + (field ? field.Id : "<undefined>") + ")");
         if (field) {
-            this.fields.set(key, 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);
+            this.fields.delete(key.Id);
+            this._proxies.delete(key.Id)
             // Server.DeleteDocumentField(this, key);
         }
         Server.UpdateField(this);
@@ -137,8 +160,8 @@ export class Document extends Field {
         return protos;
     }
 
-    MakeDelegate(): Document {
-        let delegate = new Document();
+    MakeDelegate(id?: string): Document {
+        let delegate = new Document(id);
 
         delegate.Set(KeyStore.Prototype, this);
 
@@ -153,19 +176,23 @@ export class Document extends Field {
         throw new Error("Method not implemented.");
     }
     GetValue() {
-        throw new Error("Method not implemented.");
+        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 } {
+    ToJson(): { type: Types, data: [string, string][], _id: string } {
+        // console.log(this.fields)
         let fields: [string, string][] = []
         this._proxies.forEach((field, key) => {
             if (field) {
                 fields.push([key, field as string])
             }
         });
+        // console.log(fields)
 
         return {
             type: Types.Document,
@@ -173,5 +200,4 @@ export class Document extends Field {
             _id: this.Id
         }
     }
-
 }
\ No newline at end of file
diff --git a/src/fields/DocumentReference.ts b/src/fields/DocumentReference.ts
index c9313a73e..4096cbb92 100644
--- a/src/fields/DocumentReference.ts
+++ b/src/fields/DocumentReference.ts
@@ -17,6 +17,10 @@ export class DocumentReference extends Field {
         super();
     }
 
+    UpdateFromServer() {
+
+    }
+
     Dereference(): FieldValue<Field> {
         return this.document.Get(this.key);
     }
@@ -43,7 +47,7 @@ export class DocumentReference extends Field {
         return "";
     }
 
-    ToJson(): { type: Types, data: FIELD_ID, _id: String } {
+    ToJson(): { type: Types, data: FIELD_ID, _id: string } {
         return {
             type: Types.DocumentReference,
             data: this.document.Id,
diff --git a/src/fields/Field.ts b/src/fields/Field.ts
index 16569e175..853fb9327 100644
--- a/src/fields/Field.ts
+++ b/src/fields/Field.ts
@@ -1,15 +1,6 @@
 
 import { Utils } from "../Utils";
 import { Types } from "../server/Message";
-import { NumberField } from "./NumberField";
-import { TextField } from "./TextField";
-import { RichTextField } from "./RichTextField";
-import { KeyStore, Key } from "./Key";
-import { ImageField } from "./ImageField";
-import { ListField } from "./ListField";
-import { Document } from "./Document";
-import { Server } from "../client/Server";
-import { ObjectID } from "bson";
 
 export function Cast<T extends Field>(field: FieldValue<Field>, ctor: { new(): T }): Opt<T> {
     if (field) {
@@ -29,6 +20,10 @@ export type FieldValue<T> = Opt<T> | FIELD_WAITING;
 export abstract class Field {
     //FieldUpdated: TypedEvent<Opt<FieldUpdatedArgs>> = new TypedEvent<Opt<FieldUpdatedArgs>>();
 
+    init(callback: (res: Field) => any) {
+        callback(this);
+    }
+
     private id: string;
     get Id(): string {
         return this.id;
@@ -57,6 +52,8 @@ export abstract class Field {
         return this.id === other.id;
     }
 
+    abstract UpdateFromServer(serverData: any): void;
+
     abstract ToScriptString(): string;
 
     abstract TrySetValue(value: any): boolean;
@@ -65,5 +62,5 @@ export abstract class Field {
 
     abstract Copy(): Field;
 
-    abstract ToJson(): { _id: String, type: Types, data: any }
+    abstract ToJson(): { _id: string, type: Types, data: any }
 }
\ No newline at end of file
diff --git a/src/fields/ImageField.ts b/src/fields/ImageField.ts
index 39eed9398..aba011199 100644
--- a/src/fields/ImageField.ts
+++ b/src/fields/ImageField.ts
@@ -4,8 +4,8 @@ import { Types } from "../server/Message";
 import { ObjectID } from "bson";
 
 export class ImageField extends BasicField<URL> {
-    constructor(data: URL | undefined = undefined, id: FIELD_ID = undefined) {
-        super(data == undefined ? new URL("http://cs.brown.edu/~bcz/bob_fettucine.jpg") : data, id);
+    constructor(data: URL | undefined = undefined, id: FIELD_ID = undefined, save: boolean = true) {
+        super(data == undefined ? new URL("http://cs.brown.edu/~bcz/bob_fettucine.jpg") : data, save, id);
     }
 
     toString(): string {
@@ -20,7 +20,7 @@ export class ImageField extends BasicField<URL> {
         return new ImageField(this.Data);
     }
 
-    ToJson(): { type: Types, data: URL, _id: String } {
+    ToJson(): { type: Types, data: URL, _id: string } {
         return {
             type: Types.Image,
             data: this.Data,
diff --git a/src/fields/Key.ts b/src/fields/Key.ts
index 7120c6e3e..d3958df2d 100644
--- a/src/fields/Key.ts
+++ b/src/fields/Key.ts
@@ -3,6 +3,7 @@ import { Utils } from "../Utils";
 import { observable } from "mobx";
 import { Types } from "../server/Message";
 import { ObjectID } from "bson";
+import { Server } from "../client/Server";
 
 export class Key extends Field {
     private name: string;
@@ -11,10 +12,17 @@ export class Key extends Field {
         return this.name;
     }
 
-    constructor(name: string, id?: string) {
+    constructor(name: string, id?: string, save: boolean = true) {
         super(id || Utils.GenerateDeterministicGuid(name));
 
         this.name = name;
+        if (save) {
+            Server.UpdateField(this)
+        }
+    }
+
+    UpdateFromServer(data: string) {
+        this.name = data;
     }
 
     TrySetValue(value: any): boolean {
@@ -33,34 +41,11 @@ export class Key extends Field {
         return name;
     }
 
-    ToJson(): { type: Types, data: string, _id: String } {
+    ToJson(): { type: Types, data: string, _id: string } {
         return {
             type: Types.Key,
             data: this.name,
             _id: this.Id
         }
     }
-}
-
-export namespace KeyStore {
-    export const Prototype = new Key("Prototype");
-    export const X = new Key("X");
-    export const Y = new Key("Y");
-    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 Width = new Key("Width");
-    export const Height = new Key("Height");
-    export const ZIndex = new Key("ZIndex");
-    export const Data = new Key("Data");
-    export const Layout = new Key("Layout");
-    export const LayoutKeys = new Key("LayoutKeys");
-    export const LayoutFields = new Key("LayoutFields");
-    export const ColumnsKey = new Key("SchemaColumns");
-
-    export function Get(name: string): Key {
-        return new Key(name)
-    }
 }
\ No newline at end of file
diff --git a/src/fields/KeyStore.ts b/src/fields/KeyStore.ts
new file mode 100644
index 000000000..1e0b12729
--- /dev/null
+++ b/src/fields/KeyStore.ts
@@ -0,0 +1,24 @@
+import { Key } from "./Key";
+
+export namespace KeyStore {
+    export const Prototype = new Key("Prototype");
+    export const X = new Key("X");
+    export const Y = new Key("Y");
+    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 Width = new Key("Width");
+    export const Height = new Key("Height");
+    export const ZIndex = new Key("ZIndex");
+    export const Data = new Key("Data");
+    export const Layout = new Key("Layout");
+    export const LayoutKeys = new Key("LayoutKeys");
+    export const LayoutFields = new Key("LayoutFields");
+    export const ColumnsKey = new Key("SchemaColumns");
+
+    export function Get(name: string): Key {
+        return new Key(name)
+    }
+}
diff --git a/src/fields/ListField.ts b/src/fields/ListField.ts
index 9a26cb142..1357dc445 100644
--- a/src/fields/ListField.ts
+++ b/src/fields/ListField.ts
@@ -1,11 +1,58 @@
-import { Field, FIELD_ID } from "./Field";
+import { Field, FIELD_ID, FieldValue, Opt } from "./Field";
 import { BasicField } from "./BasicField";
 import { Types } from "../server/Message";
-import { ObjectId } from "bson";
+import { observe, action } from "mobx";
+import { Server } from "../client/Server";
+import { ServerUtils } from "../server/ServerUtil";
 
 export class ListField<T extends Field> extends BasicField<T[]> {
-    constructor(data: T[] = [], id: FIELD_ID = undefined) {
-        super(data.slice(), id);
+    private _proxies: string[] = []
+    constructor(data: T[] = [], id: FIELD_ID = undefined, save: boolean = true) {
+        super(data, save, id);
+        this.updateProxies();
+        if (save) {
+            Server.UpdateField(this);
+        }
+        observe(this.Data, () => {
+            this.updateProxies()
+            Server.UpdateField(this);
+        })
+    }
+
+    private updateProxies() {
+        this._proxies = this.Data.map(field => field.Id);
+    }
+
+    UpdateFromServer(fields: string[]) {
+        this._proxies = fields;
+    }
+    private arraysEqual(a: any[], b: any[]) {
+        if (a === b) return true;
+        if (a == null || b == null) return false;
+        if (a.length != b.length) return false;
+
+        // If you don't care about the order of the elements inside
+        // the array, you should sort both arrays here.
+        // Please note that calling sort on an array will modify that array.
+        // you might want to clone your array first.
+
+        for (var i = 0; i < a.length; ++i) {
+            if (a[i] !== b[i]) return false;
+        }
+        return true;
+    }
+
+    init(callback: (field: Field) => any) {
+        Server.GetFields(this._proxies, action((fields: { [index: string]: Field }) => {
+            if (!this.arraysEqual(this._proxies, this.Data.map(field => field.Id))) {
+                this.data = this._proxies.map(id => fields[id] as T)
+                observe(this.Data, () => {
+                    this.updateProxies()
+                    Server.UpdateField(this);
+                })
+            }
+            callback(this);
+        }))
     }
 
     ToScriptString(): string {
@@ -16,11 +63,17 @@ export class ListField<T extends Field> extends BasicField<T[]> {
         return new ListField<T>(this.Data);
     }
 
-    ToJson(): { type: Types, data: T[], _id: String } {
+    ToJson(): { type: Types, data: string[], _id: string } {
         return {
             type: Types.List,
-            data: this.Data,
+            data: this._proxies,
             _id: this.Id
         }
     }
+
+    static FromJson(id: string, ids: string[]): ListField<Field> {
+        let list = new ListField([], id, false);
+        list._proxies = ids;
+        return list
+    }
 }
\ No newline at end of file
diff --git a/src/fields/NumberField.ts b/src/fields/NumberField.ts
index f31be0c25..29e285201 100644
--- a/src/fields/NumberField.ts
+++ b/src/fields/NumberField.ts
@@ -1,11 +1,10 @@
 import { BasicField } from "./BasicField"
 import { Types } from "../server/Message";
 import { FIELD_ID } from "./Field";
-import { ObjectID } from "bson";
 
 export class NumberField extends BasicField<number> {
-    constructor(data: number = 0, id: FIELD_ID = undefined) {
-        super(data, id);
+    constructor(data: number = 0, id: FIELD_ID = undefined, save: boolean = true) {
+        super(data, save, id);
     }
 
     ToScriptString(): string {
@@ -16,7 +15,7 @@ export class NumberField extends BasicField<number> {
         return new NumberField(this.Data);
     }
 
-    ToJson(): { _id: String, type: Types, data: number } {
+    ToJson(): { _id: string, type: Types, data: number } {
         return {
             _id: this.Id,
             type: Types.Number,
diff --git a/src/fields/RichTextField.ts b/src/fields/RichTextField.ts
index 2ed4d11f8..9783107e3 100644
--- a/src/fields/RichTextField.ts
+++ b/src/fields/RichTextField.ts
@@ -1,11 +1,10 @@
 import { BasicField } from "./BasicField";
 import { Types } from "../server/Message";
 import { FIELD_ID } from "./Field";
-import { ObjectID } from "bson";
 
 export class RichTextField extends BasicField<string> {
-    constructor(data: string = "", id: FIELD_ID = undefined) {
-        super(data, id);
+    constructor(data: string = "", id: FIELD_ID = undefined, save: boolean = true) {
+        super(data, save, id);
     }
 
     ToScriptString(): string {
@@ -16,7 +15,7 @@ export class RichTextField extends BasicField<string> {
         return new RichTextField(this.Data);
     }
 
-    ToJson(): { type: Types, data: string, _id: String } {
+    ToJson(): { type: Types, data: string, _id: string } {
         return {
             type: Types.RichText,
             data: this.Data,
diff --git a/src/fields/TextField.ts b/src/fields/TextField.ts
index 545aa8c35..efb3c035f 100644
--- a/src/fields/TextField.ts
+++ b/src/fields/TextField.ts
@@ -1,11 +1,10 @@
 import { BasicField } from "./BasicField"
 import { FIELD_ID } from "./Field";
 import { Types } from "../server/Message";
-import { ObjectID } from "bson";
 
 export class TextField extends BasicField<string> {
-    constructor(data: string = "", id: FIELD_ID = undefined) {
-        super(data, id);
+    constructor(data: string = "", id: FIELD_ID = undefined, save: boolean = true) {
+        super(data, save, id);
     }
 
     ToScriptString(): string {
@@ -16,7 +15,7 @@ export class TextField extends BasicField<string> {
         return new TextField(this.Data);
     }
 
-    ToJson(): { type: Types, data: string, _id: String } {
+    ToJson(): { type: Types, data: string, _id: string } {
         return {
             type: Types.Text,
             data: this.Data,
diff --git a/src/server/Message.ts b/src/server/Message.ts
index 658c5612b..e78c36ef1 100644
--- a/src/server/Message.ts
+++ b/src/server/Message.ts
@@ -51,9 +51,9 @@ export enum Types {
 
 export class DocumentTransfer implements Transferable {
     readonly type = Types.Document
-    _id: String;
+    _id: string
 
-    constructor(readonly obj: { type: Types, data: [string, string][], _id: String }) {
+    constructor(readonly obj: { type: Types, data: [string, string][], _id: string }) {
         this._id = obj._id
     }
 }
@@ -61,12 +61,12 @@ export class DocumentTransfer implements Transferable {
 export class ImageTransfer implements Transferable {
     readonly type = Types.Image
 
-    constructor(readonly _id: String) { }
+    constructor(readonly _id: string) { }
 }
 
 export class KeyTransfer implements Transferable {
     name: string
-    readonly _id: String
+    readonly _id: string
     readonly type = Types.Key
 
     constructor(i: string, n: string) {
@@ -78,18 +78,18 @@ export class KeyTransfer implements Transferable {
 export class ListTransfer implements Transferable {
     type = Types.List;
 
-    constructor(readonly _id: String) { }
+    constructor(readonly _id: string) { }
 }
 
 export class NumberTransfer implements Transferable {
     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 _id: string
     readonly type = Types.Text
 
     constructor(t: string, i: string) {
@@ -100,7 +100,7 @@ export class TextTransfer implements Transferable {
 
 export class RichTextTransfer implements Transferable {
     value: string
-    readonly _id: String
+    readonly _id: string
     readonly type = Types.Text
 
     constructor(t: string, i: string) {
@@ -110,7 +110,7 @@ export class RichTextTransfer implements Transferable {
 }
 
 export interface Transferable {
-    readonly _id: String
+    readonly _id: string
     readonly type: Types
 }
 
@@ -118,6 +118,9 @@ 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<GetFieldArgs>("Get Field")
+    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
diff --git a/src/server/ServerUtil.ts b/src/server/ServerUtil.ts
index 6757615fb..46c409ec4 100644
--- a/src/server/ServerUtil.ts
+++ b/src/server/ServerUtil.ts
@@ -11,47 +11,35 @@ import { Types } from './Message';
 import { Utils } from '../Utils';
 
 export class ServerUtils {
-    public static FromJson(json: string): Field {
-        let obj = JSON.parse(json)
+    public static FromJson(json: any): Field {
+        let obj = json
         let data: any = obj.data
-        let id: string = obj.id
+        let id: string = obj._id
         let type: Types = obj.type
 
-        if (!(data && id && type != undefined)) {
+        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)
+                return new NumberField(data, id, false)
             case Types.Text:
-                return new TextField(data, id)
+                return new TextField(data, id, false)
             case Types.RichText:
-                return new RichTextField(data, id)
+                return new RichTextField(data, id, false)
             case Types.Key:
-                return new Key(data, id)
+                return new Key(data, id, false)
             case Types.Image:
-                return new ImageField(data, id)
+                return new ImageField(new URL(data), id, false)
             case Types.List:
-                return new ListField(data, id)
+                return ListField.FromJson(id, data)
             case Types.Document:
-                let doc: Document = new Document(id)
+                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]);
-                    let keyId: string = element[0]
-                    let valueId: string = element[1]
-                    Server.GetField(keyId, (key: Field) => {
-                        if (key instanceof Key) {
-                            Server.GetField(valueId, (field: Field) => {
-                                doc.Set(key as Key, field)
-                            })
-                        }
-                        else {
-                            console.log("how did you get a key that isnt a key wtf")
-                        }
-                    })
                 });
                 return doc
         }
diff --git a/src/server/database.ts b/src/server/database.ts
index 16211a2f6..07c5819ab 100644
--- a/src/server/database.ts
+++ b/src/server/database.ts
@@ -8,50 +8,71 @@ export class Database {
     public static Instance = new Database()
     private MongoClient = mongodb.MongoClient;
     private url = 'mongodb://localhost:27017/Dash';
+    private db?: mongodb.Db;
 
-    public update(id: String, value: any) {
-        this.MongoClient.connect(this.url, (err, db) => {
-            let collection = db.db().collection('documents');
-            collection.update({ _id: id }, { $set: value });
-            db.close();
-        });
+    constructor() {
+        this.MongoClient.connect(this.url, (err, client) => {
+            this.db = client.db()
+        })
+    }
+
+    public update(id: string, value: any) {
+        if (this.db) {
+            let collection = this.db.collection('documents');
+            collection.update({ _id: id }, { $set: value }, {
+                upsert: true
+            });
+        }
     }
 
     public delete(id: string) {
-        this.MongoClient.connect(this.url, (err, db) => {
-            let collection = db.db().collection('documents');
+        if (this.db) {
+            let collection = this.db.collection('documents');
             collection.remove({ _id: id });
-            db.close();
-        });
+        }
+    }
+
+    public deleteAll() {
+        if (this.db) {
+            let collection = this.db.collection('documents');
+            collection.deleteMany({});
+        }
     }
 
     public insert(kvpairs: any) {
-        this.MongoClient.connect(this.url, (err, db) => {
-            let collection = db.db().collection('documents');
-            collection.insertOne(kvpairs, () => { });
-            db.close();
-        });
+        if (this.db) {
+            let collection = this.db.collection('documents');
+            collection.insertOne(kvpairs, (err: any, res: any) => {
+                if (err) {
+                    // console.log(err)
+                    return
+                }
+            });
+        }
     }
 
-    public getDocument(id: String): string | undefined {
+    public getDocument(id: string, fn: (res: any) => void) {
         var result: JSON;
-        this.MongoClient.connect(this.url, (err, db) => {
-            if (err) {
-                console.log(err)
-                return undefined
-            }
-            let collection = db.db().collection('documents');
-            collection.findOne({ _id: id }, (err: any, res: any) => result = res)
-            console.log(result)
-            db.close();
-            if (!result) {
-                console.log("not found")
-                return undefined
-            }
-            console.log("found")
-            return result;
-        });
-        return undefined
+        if (this.db) {
+            let collection = this.db.collection('documents');
+            collection.findOne({ _id: id }, (err: any, res: any) => {
+                result = res
+                if (!result) {
+                    fn(undefined)
+                }
+                fn(result)
+            })
+        };
+    }
+
+    public getDocuments(ids: string[], fn: (res: any) => void) {
+        if (this.db) {
+            let collection = this.db.collection('documents');
+            let cursor = collection.find({ _id: { "$in": ids } })
+            cursor.toArray((err, docs) => {
+                fn(docs);
+            })
+        };
     }
 
     public print() {
diff --git a/src/server/index.js b/src/server/index.js
deleted file mode 100644
index 1ee6fbeef..000000000
--- a/src/server/index.js
+++ /dev/null
@@ -1,15 +0,0 @@
-"use strict";
-exports.__esModule = true;
-var express = require("express");
-var app = express();
-var port = 8080; // default port to listen
-import { Database } from './database';
-
-// define a route handler for the default home page
-app.get("/", function (req, res) {
-    res.send("Hello world!");
-});
-// start the Express server
-app.listen(port, function () {
-    console.log("server started at http://localhost:" + port);
-});
diff --git a/src/server/index.ts b/src/server/index.ts
index b81cdbcca..d05e1fca6 100644
--- a/src/server/index.ts
+++ b/src/server/index.ts
@@ -11,8 +11,11 @@ import { Socket } from 'socket.io';
 import { Utils } from '../Utils';
 import { ObservableMap } from 'mobx';
 import { FIELD_ID, Field } from '../fields/Field';
-// import { Database } from './database';
+import { Database } from './database';
 import { ServerUtils } from './ServerUtil';
+import { ObjectID } from 'mongodb';
+import { Document } from '../fields/Document';
+import * as io from 'socket.io'
 import * as passportConfig from './authentication/config/passport';
 import { getLogin, postLogin, getSignup, postSignup } from './authentication/controllers/user';
 const config = require('../../webpack.config');
@@ -27,6 +30,7 @@ import c = require("crypto");
 const MongoStore = require('connect-mongo')(session);
 const mongoose = require('mongoose');
 const bluebird = require('bluebird');
+import { performance } from 'perf_hooks'
 
 const mongoUrl = 'mongodb://localhost:27017/Dash';
 // mongoose.Promise = bluebird;
@@ -75,6 +79,11 @@ app.get("/hello", (req, res) => {
     res.send("<p>Hello</p>");
 })
 
+app.get("/delete", (req, res) => {
+    deleteAll();
+    res.redirect("/");
+});
+
 app.use(wdm(compiler, {
     publicPath: config.output.publicPath
 }))
@@ -86,7 +95,7 @@ app.listen(port, () => {
     console.log(`server started at http://localhost:${port}`);
 })
 
-const server = require("socket.io")();
+const server = io();
 interface Map {
     [key: string]: Client;
 }
@@ -98,10 +107,16 @@ server.on("connection", function (socket: Socket) {
     Utils.Emit(socket, MessageStore.Foo, "handshooken")
 
     Utils.AddServerHandler(socket, MessageStore.Bar, barReceived)
-    // Utils.AddServerHandler(socket, MessageStore.SetField, setField)
-    // Utils.AddServerHandlerCallback(socket, MessageStore.GetField, getField)
+    Utils.AddServerHandler(socket, MessageStore.SetField, (args) => setField(socket, args))
+    Utils.AddServerHandlerCallback(socket, MessageStore.GetField, getField)
+    Utils.AddServerHandlerCallback(socket, MessageStore.GetFields, getFields)
+    Utils.AddServerHandler(socket, MessageStore.DeleteAll, deleteAll)
 })
 
+function deleteAll() {
+    Database.Instance.deleteAll();
+}
+
 function barReceived(guid: String) {
     clients[guid.toString()] = new Client(guid.toString());
     // Database.Instance.print()
@@ -111,22 +126,24 @@ function addDocument(document: Document) {
 
 }
 
-function setField(newValue: Transferable) {
-    console.log(newValue._id)
-    // if (Database.Instance.getDocument(newValue._id)) {
-    //     Database.Instance.update(newValue._id, newValue)
-    // }
-    // else {
-    //     Database.Instance.insert(newValue)
-    // }
+function getField([id, callback]: [string, (result: any) => void]) {
+    Database.Instance.getDocument(id, (result: any) => {
+        if (result) {
+            callback(result)
+        }
+        else {
+            callback(undefined)
+        }
+    })
+}
+
+function getFields([ids, callback]: [string[], (result: any) => void]) {
+    Database.Instance.getDocuments(ids, callback);
 }
 
-function getField([fieldRequest, callback]: [GetFieldArgs, (field: Field) => void]) {
-    let fieldId: string = fieldRequest.field
-    // let result: string | undefined = Database.Instance.getDocument(fieldId)
-    // if (result) {
-    //     let fromJson: Field = ServerUtils.FromJson(result)
-    // }
+function setField(socket: Socket, newValue: Transferable) {
+    Database.Instance.update(newValue._id, newValue)
+    socket.broadcast.emit(MessageStore.SetField.Message, newValue)
 }
 
 server.listen(serverPort);