Merge branch 'master' of https://github.com/browngraphicslab/Dash-Web into PDFNode

1 files changed, 192 insertions, 0 deletions

diff --git a/src/debug/Viewer.tsx b/src/debug/Viewer.tsx
new file mode 100644
index 000000000..780e9f8f2
--- /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 { Opt, Field } from '../fields/Field';
+import { Server } from '../client/Server';
+
+configure({
+    enforceActions: "observed"
+});
+
+@observer
+class FieldViewer extends React.Component<{ field: BasicField<any> }> {
+    render() {
+        return <span>{JSON.stringify(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, action((field: Opt<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