fixed link metadata rendering bug

11 files changed, 35 insertions, 316 deletions

diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts
index d2300e4d2..547687921 100644
--- a/src/client/documents/Documents.ts
+++ b/src/client/documents/Documents.ts
@@ -88,7 +88,7 @@ export namespace DocUtils {
     //     let protoTarg = target.proto ? target.proto : target;
     export function MakeLink(source: Doc, target: Doc, targetContext?: Doc, title: string = "", description: string = "", tags: string = "Default") {
         if (LinkManager.Instance.doesLinkExist(source, target)) {
-            console.log("LINK EXISTS"); return;
+            return;
         }
 
         UndoManager.RunInBatch(() => {
@@ -186,11 +186,6 @@ export namespace Docs {
             { x: 0, y: 0, width: Number(MINIMIZED_ICON_SIZE), height: Number(MINIMIZED_ICON_SIZE) });
         return iconProto;
     }
-    // function CreateLinkPrototype(): Doc {
-    //     let linkProto = setupPrototypeOptions(linkProtoId, "LINK_PROTO", LinkButtonBox.LayoutString(),
-    //         { x: 0, y: 0, width: 300 });
-    //     return linkProto;
-    // }
     function CreateTextPrototype(): Doc {
         let textProto = setupPrototypeOptions(textProtoId, "TEXT_PROTO", FormattedTextBox.LayoutString(),
             { x: 0, y: 0, width: 300, backgroundColor: "#f1efeb" });
@@ -277,9 +272,7 @@ export namespace Docs {
     export function IconDocument(icon: string, options: DocumentOptions = {}) {
         return CreateInstance(iconProto, new IconField(icon), options);
     }
-    // export function LinkButtonDocument(data: LinkButtonData, options: DocumentOptions = {}) {
-    //     return CreateInstance(linkProto, new LinkButtonField(data), options);
-    // }
+
     export function PdfDocument(url: string, options: DocumentOptions = {}) {
         return CreateInstance(pdfProto, new PdfField(new URL(url)), options);
     }
diff --git a/src/client/util/LinkManager.ts b/src/client/util/LinkManager.ts
index 60de7fc52..db814082f 100644
--- a/src/client/util/LinkManager.ts
+++ b/src/client/util/LinkManager.ts
@@ -156,7 +156,7 @@ export class LinkManager {
     // removes group doc of given group type only from given anchor on given link
     public removeGroupFromAnchor(linkDoc: Doc, anchor: Doc, groupType: string) {
         let groups = LinkManager.Instance.getAnchorGroups(linkDoc, anchor);
-        let newGroups = groups.filter(groupDoc => StrCast(groupDoc.type).toUpperCase() !== groupType.toUpperCase());
+        let newGroups = groups.filter(groupDoc => { StrCast(groupDoc.type).toUpperCase() !== groupType.toUpperCase() });
         LinkManager.Instance.setAnchorGroups(linkDoc, anchor, newGroups);
     }
 
diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinkView.scss b/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinkView.scss
index 239c2ce56..fc5212edd 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinkView.scss
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinkView.scss
@@ -17,34 +17,3 @@
     transform: translate(10000px,10000px);
     pointer-events: all;
 }
-
-.linkview-ele {
-    transform: translate(10000px,10000px);
-    pointer-events: all;
-
-    &.linkview-line {
-        stroke: black;
-        stroke-width: 2px;
-        opacity: 0.5;
-    }
-}
-
-.linkview-button {
-    width: 200px;
-    height: 100px;
-    border-radius: 5px;
-    padding: 10px;
-    position: relative;
-    background-color: black;
-    cursor: pointer;
-
-    p {
-        width: calc(100% - 20px);
-        color: white;
-        position: absolute;
-        top: 50%;
-        left: 50%;
-        transform: translate(-50%, -50%);
-    }
-
-}
diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinkView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinkView.tsx
index 5dc3b5c16..b546d1b78 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinkView.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinkView.tsx
@@ -9,7 +9,6 @@ import v5 = require("uuid/v5");
 export interface CollectionFreeFormLinkViewProps {
     A: Doc;
     B: Doc;
-    // LinkDoc: Doc;
     LinkDocs: Doc[];
     addDocument: (document: Doc, allowDuplicates?: boolean) => boolean;
     removeDocument: (document: Doc) => boolean;
diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinkWithProxyView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinkWithProxyView.tsx
deleted file mode 100644
index a4d122af2..000000000
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinkWithProxyView.tsx
+++ /dev/null
@@ -1,131 +0,0 @@
-import { observer } from "mobx-react";
-import { Doc, HeightSym, WidthSym } from "../../../../new_fields/Doc";
-import { BoolCast, NumCast, StrCast } from "../../../../new_fields/Types";
-import { InkingControl } from "../../InkingControl";
-import "./CollectionFreeFormLinkView.scss";
-import React = require("react");
-import v5 = require("uuid/v5");
-import { DocumentView } from "../../nodes/DocumentView";
-import { Docs } from "../../../documents/Documents";
-import { observable, action } from "mobx";
-import { CollectionDockingView } from "../CollectionDockingView";
-import { dropActionType, DragManager } from "../../../util/DragManager";
-import { emptyFunction } from "../../../../Utils";
-import { DocumentManager } from "../../../util/DocumentManager";
-
-export interface CollectionFreeFormLinkViewProps {
-    sourceView: DocumentView;
-    targetView: DocumentView;
-    proxyDoc: Doc;
-    // addDocTab: (document: Doc, where: string) => void;
-}
-
-@observer
-export class CollectionFreeFormLinkWithProxyView extends React.Component<CollectionFreeFormLinkViewProps> {
-
-    // @observable private _proxyX: number = NumCast(this.props.proxyDoc.x);
-    // @observable private _proxyY: number = NumCast(this.props.proxyDoc.y);
-    private _ref = React.createRef<HTMLDivElement>();
-    private _downX: number = 0;
-    private _downY: number = 0;
-    @observable _x: number = 0;
-    @observable _y: number = 0;
-    // @observable private _proxyDoc: Doc = Docs.TextDocument(); // used for positioning
-
-    @action
-    componentDidMount() {
-        let a2 = this.props.proxyDoc;
-        this._x = NumCast(a2.x) + (BoolCast(a2.isMinimized, false) ? 5 : NumCast(a2.width) / NumCast(a2.zoomBasis, 1) / 2);
-        this._y = NumCast(a2.y) + (BoolCast(a2.isMinimized, false) ? 5 : NumCast(a2.height) / NumCast(a2.zoomBasis, 1) / 2);
-    }
-
-
-    followButton = (e: React.PointerEvent): void => {
-        e.stopPropagation();
-        let open = this.props.targetView.props.ContainingCollectionView ? this.props.targetView.props.ContainingCollectionView.props.Document : this.props.targetView.props.Document;
-        CollectionDockingView.Instance.AddRightSplit(open);
-        DocumentManager.Instance.jumpToDocument(this.props.targetView.props.Document, e.altKey);
-    }
-
-    @action
-    setPosition(x: number, y: number) {
-        this._x = x;
-        this._y = y;
-    }
-
-    startDragging(x: number, y: number) {
-        if (this._ref.current) {
-            let dragData = new DragManager.DocumentDragData([this.props.proxyDoc]);
-
-            DragManager.StartLinkProxyDrag(this._ref.current, dragData, x, y, {
-                handlers: {
-                    dragComplete: action(() => {
-                        let a2 = this.props.proxyDoc;
-                        let offset = NumCast(a2.width) / NumCast(a2.zoomBasis, 1) / 2;
-                        let x = NumCast(a2.x);// + NumCast(a2.width) / NumCast(a2.zoomBasis, 1) / 2;
-                        let y = NumCast(a2.y);// + NumCast(a2.height) / NumCast(a2.zoomBasis, 1) / 2;
-                        this.setPosition(x, y);
-
-                        // this is a hack :'( theres prob a better way to make the input doc not render
-                        let views = DocumentManager.Instance.getDocumentViews(this.props.proxyDoc);
-                        views.forEach(dv => {
-                            dv.props.removeDocument && dv.props.removeDocument(dv.props.Document);
-                        });
-                    }),
-                },
-                hideSource: true //?
-            });
-        }
-    }
-
-    onPointerDown = (e: React.PointerEvent): void => {
-        this._downX = e.clientX;
-        this._downY = e.clientY;
-
-        e.stopPropagation();
-        document.removeEventListener("pointermove", this.onPointerMove);
-        document.addEventListener("pointermove", this.onPointerMove);
-        document.removeEventListener("pointerup", this.onPointerUp);
-        document.addEventListener("pointerup", this.onPointerUp);
-    }
-
-    onPointerMove = (e: PointerEvent): void => {
-        if (Math.abs(this._downX - e.clientX) > 3 || Math.abs(this._downY - e.clientY) > 3) {
-            document.removeEventListener("pointermove", this.onPointerMove);
-            document.removeEventListener("pointerup", this.onPointerUp);
-            this.startDragging(this._downX, this._downY);
-        }
-        e.stopPropagation();
-        e.preventDefault();
-    }
-    onPointerUp = (e: PointerEvent): void => {
-        document.removeEventListener("pointermove", this.onPointerMove);
-        document.removeEventListener("pointerup", this.onPointerUp);
-    }
-
-    render() {
-        let a1 = this.props.sourceView;
-        let x1 = NumCast(a1.Document.x) + (BoolCast(a1.Document.isMinimized, false) ? 5 : NumCast(a1.Document.width) / NumCast(a1.Document.zoomBasis, 1) / 2);
-        let y1 = NumCast(a1.Document.y) + (BoolCast(a1.Document.isMinimized, false) ? 5 : NumCast(a1.Document.height) / NumCast(a1.Document.zoomBasis, 1) / 2);
-
-        let context = this.props.targetView.props.ContainingCollectionView ?
-            (" in the context of " + StrCast(this.props.targetView.props.ContainingCollectionView.props.Document.title)) : "";
-        let text = "link to " + StrCast(this.props.targetView.props.Document.title) + context;
-
-        return (
-            <>
-                <line className="linkview-line linkview-ele"
-                    // style={{ strokeWidth: `${2 * 1 / 2}` }}
-                    x1={`${x1}`} y1={`${y1}`}
-                    x2={`${this._x}`} y2={`${this._y}`} />
-                <foreignObject className="linkview-button-wrapper linkview-ele" width={200} height={100} x={this._x - 100} y={this._y - 50}>
-                    <div className="linkview-button" onPointerDown={this.onPointerDown} onPointerUp={this.followButton} ref={this._ref}>
-                        <p>{text}</p>
-                    </div>
-                </foreignObject>
-            </>
-        );
-    }
-}
-
-//onPointerDown={this.followButton}
\ No newline at end of file
diff --git a/src/client/views/nodes/DocumentContentsView.tsx b/src/client/views/nodes/DocumentContentsView.tsx
index 940b00a90..02396c3af 100644
--- a/src/client/views/nodes/DocumentContentsView.tsx
+++ b/src/client/views/nodes/DocumentContentsView.tsx
@@ -12,7 +12,6 @@ import "./DocumentView.scss";
 import { FormattedTextBox } from "./FormattedTextBox";
 import { ImageBox } from "./ImageBox";
 import { IconBox } from "./IconBox";
-import { LinkButtonBox } from "./LinkButtonBox";
 import { KeyValueBox } from "./KeyValueBox";
 import { PDFBox } from "./PDFBox";
 import { VideoBox } from "./VideoBox";
@@ -104,7 +103,7 @@ export class DocumentContentsView extends React.Component<DocumentViewProps & {
     render() {
         if (!this.layout && (this.props.layoutKey !== "overlayLayout" || !this.templates.length)) return (null);
         return <ObserverJsxParser
-            components={{ FormattedTextBox, ImageBox, IconBox, FieldView, CollectionFreeFormView, CollectionDockingView, CollectionSchemaView, CollectionView, CollectionPDFView, CollectionVideoView, WebBox, KeyValueBox, PDFBox, VideoBox, AudioBox, HistogramBox, LinkButtonBox }}
+            components={{ FormattedTextBox, ImageBox, IconBox, FieldView, CollectionFreeFormView, CollectionDockingView, CollectionSchemaView, CollectionView, CollectionPDFView, CollectionVideoView, WebBox, KeyValueBox, PDFBox, VideoBox, AudioBox, HistogramBox }}
             bindings={this.CreateBindings()}
             jsx={this.finalLayout}
             showWarnings={true}
diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index b705276a6..c71d7ed68 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -555,16 +555,6 @@ export class DocumentView extends DocComponent<DocumentViewProps, Document>(Docu
         var scaling = this.props.ContentScaling();
         var nativeWidth = this.nativeWidth > 0 ? `${this.nativeWidth}px` : "100%";
 
-        // // for linkbutton docs
-        // let isLinkButton = BoolCast(this.props.Document.isLinkButton);
-        // let activeDvs = DocumentManager.Instance.DocumentViews.filter(dv => dv.isSelected() || BoolCast(dv.props.Document.libraryBrush, false));
-        // let display = isLinkButton ? activeDvs.reduce((found, dv) => {
-        //     let matchSv = this.props.Document.sourceViewId === StrCast(dv.props.Document[Id]);
-        //     let matchTv = this.props.Document.targetViewId === StrCast(dv.props.Document[Id]);
-        //     let match = matchSv || matchTv;
-        //     return match || found;
-        // }, false) : true;
-
         var nativeHeight = BoolCast(this.props.Document.ignoreAspect) ? this.props.PanelHeight() / this.props.ContentScaling() : this.nativeHeight > 0 ? `${this.nativeHeight}px` : "100%";
         return (
             <div className={`documentView-node${this.props.isTopMost ? "-topmost" : ""}`}
@@ -581,7 +571,6 @@ export class DocumentView extends DocComponent<DocumentViewProps, Document>(Docu
                     width: nativeWidth,
                     height: nativeHeight,
                     transform: `scale(${scaling}, ${scaling})`,
-                    // display: display ? "block" : "none"
                 }}
                 onDrop={this.onDrop} onContextMenu={this.onContextMenu} onPointerDown={this.onPointerDown} onClick={this.onClick}
                 onPointerEnter={this.onPointerEnter} onPointerLeave={this.onPointerLeave}
diff --git a/src/client/views/nodes/LinkButtonBox.scss b/src/client/views/nodes/LinkButtonBox.scss
deleted file mode 100644
index 6be2dcf60..000000000
--- a/src/client/views/nodes/LinkButtonBox.scss
+++ /dev/null
@@ -1,18 +0,0 @@
-// .linkBox-cont {
-//     width: 200px;
-//     height: 100px;
-//     background-color: black;
-//     text-align: center;
-//     color: white;
-//     padding: 10px;
-//     border-radius: 5px;
-//     position: relative;
-
-//     .linkBox-cont-wrapper {
-//         width: calc(100% - 20px);
-//         position: absolute;
-//         left: 50%;
-//         top: 50%;
-//         transform: translate(-50%, -50%);
-//     }
-// }
\ No newline at end of file
diff --git a/src/client/views/nodes/LinkButtonBox.tsx b/src/client/views/nodes/LinkButtonBox.tsx
deleted file mode 100644
index 440847ead..000000000
--- a/src/client/views/nodes/LinkButtonBox.tsx
+++ /dev/null
@@ -1,63 +0,0 @@
-// import React = require("react");
-// import { library } from '@fortawesome/fontawesome-svg-core';
-// import { faCaretUp, faFilePdf, faFilm, faImage, faObjectGroup, faStickyNote } from '@fortawesome/free-solid-svg-icons';
-// import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-// import { computed, observable, runInAction } from "mobx";
-// import { observer } from "mobx-react";
-// import { FieldView, FieldViewProps } from './FieldView';
-// import "./LinkButtonBox.scss";
-// import { DocumentView } from "./DocumentView";
-// import { Doc } from "../../../new_fields/Doc";
-// import { LinkButtonField } from "../../../new_fields/LinkButtonField";
-// import { Cast, StrCast, BoolCast } from "../../../new_fields/Types";
-// import { CollectionDockingView } from "../collections/CollectionDockingView";
-// import { DocumentManager } from "../../util/DocumentManager";
-// import { Id } from "../../../new_fields/FieldSymbols";
-
-// library.add(faCaretUp);
-// library.add(faObjectGroup);
-// library.add(faStickyNote);
-// library.add(faFilePdf);
-// library.add(faFilm);
-
-// @observer
-// export class LinkButtonBox extends React.Component<FieldViewProps> {
-//     public static LayoutString() { return FieldView.LayoutString(LinkButtonBox); }
-
-//     followLink = (): void => {
-//         console.log("follow link???");
-//         let field = Cast(this.props.Document[this.props.fieldKey], LinkButtonField, new LinkButtonField({ sourceViewId: "-1", targetViewId: "-1" }));
-//         let targetView = DocumentManager.Instance.getDocumentViewById(field.data.targetViewId);
-//         if (targetView && targetView.props.ContainingCollectionView) {
-//             CollectionDockingView.Instance.AddRightSplit(targetView.props.ContainingCollectionView.props.Document);
-//         }
-//     }
-
-//     render() {
-
-//         let field = Cast(this.props.Document[this.props.fieldKey], LinkButtonField, new LinkButtonField({ sourceViewId: "-1", targetViewId: "-1" }));
-//         let targetView = DocumentManager.Instance.getDocumentViewById(field.data.targetViewId);
-
-//         let text = "Could not find link";
-//         if (targetView) {
-//             let context = targetView.props.ContainingCollectionView ? (" in the context of " + StrCast(targetView.props.ContainingCollectionView.props.Document.title)) : "";
-//             text = "Link to " + StrCast(targetView.props.Document.title) + context;
-//         }
-
-//         let activeDvs = DocumentManager.Instance.DocumentViews.filter(dv => dv.isSelected() || BoolCast(dv.props.Document.libraryBrush, false));
-//         let display = activeDvs.reduce((found, dv) => {
-//             let matchSv = field.data.sourceViewId === StrCast(dv.props.Document[Id]);
-//             let matchTv = field.data.targetViewId === StrCast(dv.props.Document[Id]);
-//             let match = matchSv || matchTv;
-//             return match || found;
-//         }, false);
-
-//         return (
-//             <div className="linkBox-cont" style={{ display: display ? "block" : "none" }}>
-//                 <div className="linkBox-cont-wrapper">
-//                     <p>{text}</p>
-//                 </div>
-//             </div >
-//         );
-//     }
-// }
\ No newline at end of file
diff --git a/src/client/views/nodes/LinkEditor.tsx b/src/client/views/nodes/LinkEditor.tsx
index a6511c3fe..eed34b21f 100644
--- a/src/client/views/nodes/LinkEditor.tsx
+++ b/src/client/views/nodes/LinkEditor.tsx
@@ -71,10 +71,12 @@ class GroupTypesDropdown extends React.Component<GroupTypesDropdownProps> {
 
 
 interface LinkMetadataEditorProps {
+    id: string;
     groupType: string;
     mdDoc: Doc;
     mdKey: string;
     mdValue: string;
+    changeMdIdKey: (id: string, newKey: string) => void;
 }
 @observer
 class LinkMetadataEditor extends React.Component<LinkMetadataEditorProps> {
@@ -86,8 +88,6 @@ class LinkMetadataEditor extends React.Component<LinkMetadataEditorProps> {
     setMetadataKey = (value: string): void => {
         let groupMdKeys = LinkManager.Instance.getMetadataKeysInGroup(this.props.groupType);
 
-        // console.log("set", ...groupMdKeys, typeof (groupMdKeys[0]));
-
         // don't allow user to create existing key
         let newIndex = groupMdKeys.findIndex(key => key.toUpperCase() === value.toUpperCase());
         if (newIndex > -1) {
@@ -105,6 +105,7 @@ class LinkMetadataEditor extends React.Component<LinkMetadataEditorProps> {
         if (currIndex === -1) console.error("LinkMetadataEditor: key was not found");
         groupMdKeys[currIndex] = value;
 
+        this.props.changeMdIdKey(this.props.id, value);
         this._key = value;
         LinkManager.Instance.setMetadataKeysForGroup(this.props.groupType, [...groupMdKeys]);
     }
@@ -133,7 +134,7 @@ class LinkMetadataEditor extends React.Component<LinkMetadataEditorProps> {
         return (
             <div className="linkEditor-metadata-row">
                 <input className={this._keyError ? "linkEditor-error" : ""} type="text" value={this._key} placeholder="key" onChange={e => this.setMetadataKey(e.target.value)}></input>:
-                <input type="text" value={this._value} placeholder="value" onChange={e => this.setMetadataValue(e.target.value)}></input>
+                <input type="text" value={this._value === "new key" ? "" : this._value} placeholder="value" onChange={e => this.setMetadataValue(e.target.value)}></input>
                 <button onClick={() => this.removeMetadata()}><FontAwesomeIcon icon="times" size="sm" /></button>
             </div>
         );
@@ -148,6 +149,17 @@ interface LinkGroupEditorProps {
 @observer
 export class LinkGroupEditor extends React.Component<LinkGroupEditorProps> {
 
+    private _metadataIds: Map<string, string> = new Map();
+
+    constructor(props: LinkGroupEditorProps) {
+        super(props);
+
+        let groupMdKeys = LinkManager.Instance.getMetadataKeysInGroup(StrCast(props.groupDoc.type));
+        groupMdKeys.forEach(key => {
+            this._metadataIds.set(key, Utils.GenerateGuid());
+        });
+    }
+
     @action
     setGroupType = (groupType: string): void => {
         this.props.groupDoc.type = groupType;
@@ -188,12 +200,18 @@ export class LinkGroupEditor extends React.Component<LinkGroupEditorProps> {
 
     @action
     addMetadata = (groupType: string): void => {
+        this._metadataIds.set("new key", Utils.GenerateGuid());
         let mdKeys = LinkManager.Instance.getMetadataKeysInGroup(groupType);
         // only add "new key" if there is no other key with value "new key"; prevents spamming
         if (mdKeys.indexOf("new key") === -1) mdKeys.push("new key");
         LinkManager.Instance.setMetadataKeysForGroup(groupType, mdKeys);
     }
 
+    // for key rendering purposes
+    changeMdIdKey = (id: string, newKey: string) => {
+        this._metadataIds.set(newKey, id);
+    }
+
     renderMetadata = (): JSX.Element[] => {
         let metadata: Array<JSX.Element> = [];
         let groupDoc = this.props.groupDoc;
@@ -201,25 +219,24 @@ export class LinkGroupEditor extends React.Component<LinkGroupEditorProps> {
         let groupType = StrCast(groupDoc.type);
         let groupMdKeys = LinkManager.Instance.getMetadataKeysInGroup(groupType);
 
-        if (groupMdKeys) {
-            groupMdKeys.forEach((key, index) => {
-                metadata.push(
-                    <LinkMetadataEditor key={"mded-" + index} groupType={groupType} mdDoc={mdDoc} mdKey={key} mdValue={(mdDoc[key] === undefined) ? "" : StrCast(mdDoc[key])} />
-                );
-            });
-        }
+        groupMdKeys.forEach((key) => {
+            let val = StrCast(mdDoc[key]);
+            metadata.push(
+                <LinkMetadataEditor key={"mded-" + this._metadataIds.get(key)} id={this._metadataIds.get(key)!} groupType={groupType} mdDoc={mdDoc} mdKey={key} mdValue={val} changeMdIdKey={this.changeMdIdKey} />
+            );
+        });
         return metadata;
     }
 
     viewGroupAsTable = (groupType: string): JSX.Element => {
         let keys = LinkManager.Instance.getMetadataKeysInGroup(groupType);
+        let index = keys.indexOf("");
+        if (index > -1) keys.splice(index, 1);
         let cols = ["anchor1", "anchor2", ...[...keys]];
-        // keys.forEach(k => cols.push(k));
-        // console.log("COLS", ...cols);
         let docs: Doc[] = LinkManager.Instance.getAllMetadataDocsInGroup(groupType);
         let createTable = action(() => Docs.SchemaDocument(cols, docs, { width: 500, height: 300, title: groupType + " table" }));
         let ref = React.createRef<HTMLDivElement>();
-        return <div ref={ref}><button className="linkEditor-button" onPointerDown={SetupDrag(ref, createTable)}><FontAwesomeIcon icon="table" size="sm" /></button></div>;
+        return <div ref={ref}><button className="linkEditor-button" onPointerDown={SetupDrag(ref, createTable)} title="Drag to view relationship table"><FontAwesomeIcon icon="table" size="sm" /></button></div>;
     }
 
     render() {
@@ -233,7 +250,7 @@ export class LinkGroupEditor extends React.Component<LinkGroupEditorProps> {
                     <button className="linkEditor-button" disabled title="Copy group to opposite anchor"><FontAwesomeIcon icon="exchange-alt" size="sm" /></button>
                     <button className="linkEditor-button" onClick={() => this.removeGroupFromLink(groupType)} title="Remove group from link"><FontAwesomeIcon icon="times" size="sm" /></button>
                     <button className="linkEditor-button" disabled title="Delete group"><FontAwesomeIcon icon="trash" size="sm" /></button>
-                    <button className="linkEditor-button" disabled><FontAwesomeIcon icon="table" size="sm" /></button>
+                    <button className="linkEditor-button" disabled title="Drag to view relationship table"><FontAwesomeIcon icon="table" size="sm" /></button>
                 </>
             );
         } else {
diff --git a/src/new_fields/LinkButtonField.ts b/src/new_fields/LinkButtonField.ts
deleted file mode 100644
index e6d1de749..000000000
--- a/src/new_fields/LinkButtonField.ts
+++ /dev/null
@@ -1,35 +0,0 @@
-// import { Deserializable } from "../client/util/SerializationHelper";
-// import { serializable, primitive, createSimpleSchema, object } from "serializr";
-// import { ObjectField } from "./ObjectField";
-// import { Copy, ToScriptString } from "./FieldSymbols";
-// import { Doc } from "./Doc";
-// import { DocumentView } from "../client/views/nodes/DocumentView";
-
-// export type LinkButtonData = {
-//     sourceViewId: string,
-//     targetViewId: string
-// };
-
-// const LinkButtonSchema = createSimpleSchema({
-//     sourceViewId: true,
-//     targetViewId: true
-// });
-
-// @Deserializable("linkButton")
-// export class LinkButtonField extends ObjectField {
-//     @serializable(object(LinkButtonSchema))
-//     readonly data: LinkButtonData;
-
-//     constructor(data: LinkButtonData) {
-//         super();
-//         this.data = data;
-//     }
-
-//     [Copy]() {
-//         return new LinkButtonField(this.data);
-//     }
-
-//     [ToScriptString]() {
-//         return "invalid";
-//     }
-// }