link menu styling

6 files changed, 42 insertions, 30 deletions

diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinksView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinksView.tsx
index bb8e8a5c2..ebeb1fcee 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinksView.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinksView.tsx
@@ -94,24 +94,12 @@ export class CollectionFreeFormLinksView extends React.Component<CollectionViewP
 
     @computed
     get uniqueConnections() {
-        // DocumentManager.Instance.LinkedDocumentViews.forEach(d => {
-        //     console.log("CONNECTION", StrCast(d.a.props.Document.title), StrCast(d.b.props.Document.title));
-        // });
-
-        // console.log("CONNECTIONS");
-
         let connections = DocumentManager.Instance.LinkedDocumentViews.reduce((drawnPairs, connection) => {
             let srcViews = this.documentAnchors(connection.a);
             let targetViews = this.documentAnchors(connection.b);
 
-            // console.log(srcViews.length, targetViews.length);
             let possiblePairs: { a: Doc, b: Doc, }[] = [];
-            srcViews.map(sv => {
-                targetViews.map(tv => {
-                    // console.log("PUSH", StrCast(sv.props.Document.title), StrCast(sv.props.Document.id), StrCast(tv.props.Document.title), StrCast(tv.props.Document.id));
-                    possiblePairs.push({ a: sv.props.Document, b: tv.props.Document });
-                });
-            });
+            srcViews.map(sv => targetViews.map(tv => possiblePairs.push({ a: sv.props.Document, b: tv.props.Document })));
             possiblePairs.map(possiblePair => {
                 if (!drawnPairs.reduce((found, drawnPair) => {
                     let match1 = (Doc.AreProtosEqual(possiblePair.a, drawnPair.a) && Doc.AreProtosEqual(possiblePair.b, drawnPair.b));
@@ -132,13 +120,6 @@ export class CollectionFreeFormLinksView extends React.Component<CollectionViewP
             return <CollectionFreeFormLinkView key={x} A={c.a} B={c.b} LinkDocs={c.l}
                 removeDocument={this.props.removeDocument} addDocument={this.props.addDocument} />;
         });
-
-        // return DocumentManager.Instance.LinkedDocumentViews.map(c => {
-        //     // let x = c.l.reduce((p, l) => p + l[Id], "");
-        //     let x = c.a.Document[Id] + c.b.Document[Id];
-        //     return <CollectionFreeFormLinkView key={x} A={c.a.props.Document} B={c.b.props.Document} LinkDoc={c.l}
-        //         removeDocument={this.props.removeDocument} addDocument={this.props.addDocument} />;
-        // });
     }
 
     render() {
diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index c71d7ed68..d77e08089 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -162,9 +162,7 @@ export class DocumentView extends DocComponent<DocumentViewProps, Document>(Docu
         this._animateToIconDisposer = reaction(() => this.props.Document.isIconAnimating, (values) =>
             (values instanceof List) && this.animateBetweenIcon(values, values[2], values[3] ? true : false)
             , { fireImmediately: true });
-        // console.log("CREATED NEW DOC VIEW", StrCast(this.props.Document.title), DocumentManager.Instance.DocumentViews.length);
         DocumentManager.Instance.DocumentViews.push(this);
-        // console.log("ADDED TO DOC MAN", StrCast(this.props.Document.title), DocumentManager.Instance.DocumentViews.length);
     }
 
     animateBetweenIcon = (iconPos: number[], startTime: number, maximizing: boolean) => {
diff --git a/src/client/views/nodes/LinkEditor.tsx b/src/client/views/nodes/LinkEditor.tsx
index 80eadf668..87ebeefdb 100644
--- a/src/client/views/nodes/LinkEditor.tsx
+++ b/src/client/views/nodes/LinkEditor.tsx
@@ -224,7 +224,6 @@ export class LinkGroupEditor extends React.Component<LinkGroupEditorProps> {
 
         groupMdKeys.forEach((key) => {
             let val = StrCast(mdDoc[key]);
-            console.log(key, val);
             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} />
             );
diff --git a/src/client/views/nodes/LinkMenu.scss b/src/client/views/nodes/LinkMenu.scss
index ae3446e25..1dd933c32 100644
--- a/src/client/views/nodes/LinkMenu.scss
+++ b/src/client/views/nodes/LinkMenu.scss
@@ -20,13 +20,28 @@
     }
 
     .linkMenu-group-name {
-        padding: 4px 6px;
-        line-height: 12px;
-        border-radius: 5px;
-        font-weight: bold;
+        display: flex;
 
         &:hover {
-            background-color: lightgray;
+            p {
+                background-color: lightgray;
+                width: calc(100% - 26px);
+            }
+            .linkEditor-tableButton {
+                display: block;
+            }
+        }
+
+        p {
+            width: 100%;
+            padding: 4px 6px;
+            line-height: 12px;
+            border-radius: 5px;
+            font-weight: bold;
+        }
+
+        .linkEditor-tableButton {
+            display: none;
         }
     }
 }
diff --git a/src/client/views/nodes/LinkMenuGroup.tsx b/src/client/views/nodes/LinkMenuGroup.tsx
index 71326f703..732e76997 100644
--- a/src/client/views/nodes/LinkMenuGroup.tsx
+++ b/src/client/views/nodes/LinkMenuGroup.tsx
@@ -8,8 +8,10 @@ import React = require("react");
 import { Doc, DocListCast } from "../../../new_fields/Doc";
 import { Id } from "../../../new_fields/FieldSymbols";
 import { LinkManager } from "../../util/LinkManager";
-import { DragLinksAsDocuments, DragManager } from "../../util/DragManager";
+import { DragLinksAsDocuments, DragManager, SetupDrag } from "../../util/DragManager";
 import { emptyFunction } from "../../../Utils";
+import { Docs } from "../../documents/Documents";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
 interface LinkMenuGroupProps {
     sourceDoc: Doc;
@@ -22,6 +24,7 @@ interface LinkMenuGroupProps {
 export class LinkMenuGroup extends React.Component<LinkMenuGroupProps> {
 
     private _drag = React.createRef<HTMLDivElement>();
+    private _table = React.createRef<HTMLDivElement>();
 
     onLinkButtonDown = (e: React.PointerEvent): void => {
         e.stopPropagation();
@@ -55,6 +58,17 @@ export class LinkMenuGroup extends React.Component<LinkMenuGroupProps> {
         e.stopPropagation();
     }
 
+    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]];
+        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 linkEditor-tableButton" onPointerDown={SetupDrag(ref, createTable)} title="Drag to view relationship table"><FontAwesomeIcon icon="table" size="sm" /></button></div>;
+    }
+
     render() {
         let groupItems = this.props.group.map(linkDoc => {
             let destination = LinkManager.Instance.getOppositeAnchor(linkDoc, this.props.sourceDoc);
@@ -64,7 +78,10 @@ export class LinkMenuGroup extends React.Component<LinkMenuGroupProps> {
 
         return (
             <div className="linkMenu-group">
-                <p className="linkMenu-group-name" ref={this._drag} onPointerDown={this.onLinkButtonDown} >{this.props.groupType}:</p>
+                <div className="linkMenu-group-name">
+                    <p ref={this._drag} onPointerDown={this.onLinkButtonDown}>{this.props.groupType}:</p>
+                    {this.viewGroupAsTable(this.props.groupType)}
+                </div>
                 <div className="linkMenu-group-wrapper">
                     {groupItems}
                 </div>
diff --git a/src/client/views/nodes/LinkMenuItem.scss b/src/client/views/nodes/LinkMenuItem.scss
index 25d167231..175a93cb2 100644
--- a/src/client/views/nodes/LinkMenuItem.scss
+++ b/src/client/views/nodes/LinkMenuItem.scss
@@ -1,4 +1,5 @@
 @import "../globalCssVariables";
+
 .linkMenu-item {
     // border-top: 0.5px solid $main-accent; 
     position: relative;
@@ -13,6 +14,7 @@
             padding: 4px 6px;
             line-height: 12px;
             border-radius: 5px;
+            overflow-wrap: break-word;
         }
     }