links get saved to global table

7 files changed, 179 insertions, 21 deletions

diff --git a/src/client/views/DocumentDecorations.tsx b/src/client/views/DocumentDecorations.tsx
index da9b1253e..2aae9bce6 100644
--- a/src/client/views/DocumentDecorations.tsx
+++ b/src/client/views/DocumentDecorations.tsx
@@ -28,6 +28,7 @@ import { CollectionView } from "./collections/CollectionView";
 import { DocumentManager } from "../util/DocumentManager";
 import { FormattedTextBox } from "./nodes/FormattedTextBox";
 import { FieldView } from "./nodes/FieldView";
+import { LinkManager } from "./nodes/LinkManager";
 
 library.add(faLink);
 
@@ -510,9 +511,10 @@ export class DocumentDecorations extends React.Component<{}, { value: string }>
         let linkButton = null;
         if (SelectionManager.SelectedDocuments().length > 0) {
             let selFirst = SelectionManager.SelectedDocuments()[0];
-            let linkToSize = Cast(selFirst.props.Document.linkedToDocs, listSpec(Doc), []).length;
-            let linkFromSize = Cast(selFirst.props.Document.linkedFromDocs, listSpec(Doc), []).length;
-            let linkCount = linkToSize + linkFromSize;
+            // let linkToSize = Cast(selFirst.props.Document.linkedToDocs, listSpec(Doc), []).length;
+            // let linkFromSize = Cast(selFirst.props.Document.linkedFromDocs, listSpec(Doc), []).length;
+            // let linkCount = linkToSize + linkFromSize;
+            let linkCount = LinkManager.Instance.findAllRelatedLinks(selFirst.props.Document).length;
             linkButton = (<Flyout
                 anchorPoint={anchorPoints.RIGHT_TOP}
                 content={<LinkMenu docView={selFirst}
diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinksView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinksView.tsx
index a43c5f241..637674e36 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinksView.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinksView.tsx
@@ -110,7 +110,7 @@ export class CollectionFreeFormLinksView extends React.Component<CollectionViewP
                     }
                     return match || found;
                 }, false)) {
-                    console.log("A" + possiblePair.a[Id] + " B" + possiblePair.b[Id] + " L" + connection.l[Id]);
+                    // console.log("A" + possiblePair.a[Id] + " B" + possiblePair.b[Id] + " L" + connection.l[Id]);
                     drawnPairs.push({ a: possiblePair.a, b: possiblePair.b, l: [connection.l] })
                 }
             });
diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index 7750b9173..0baa061ab 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -5,7 +5,7 @@ import { observer } from "mobx-react";
 import { Doc, DocListCast, HeightSym, Opt, WidthSym, DocListCastAsync } from "../../../new_fields/Doc";
 import { List } from "../../../new_fields/List";
 import { ObjectField } from "../../../new_fields/ObjectField";
-import { createSchema, makeInterface } from "../../../new_fields/Schema";
+import { createSchema, makeInterface, listSpec } from "../../../new_fields/Schema";
 import { BoolCast, Cast, FieldValue, StrCast, NumCast } from "../../../new_fields/Types";
 import { CurrentUserUtils } from "../../../server/authentication/models/current_user_utils";
 import { emptyFunction, Utils } from "../../../Utils";
@@ -30,6 +30,7 @@ import "./DocumentView.scss";
 import React = require("react");
 import { Id, Copy } from '../../../new_fields/FieldSymbols';
 import { ContextMenuProps } from '../ContextMenuItem';
+import { list, object, createSimpleSchema } from 'serializr';
 const JsxParser = require('react-jsx-parser').default; //TODO Why does this need to be imported like this?
 
 library.add(faTrash);
@@ -47,10 +48,11 @@ library.add(faFingerprint);
 library.add(faCrosshairs);
 library.add(faDesktop);
 
+
 const linkSchema = createSchema({
     title: "string",
     linkDescription: "string",
-    linkTags: "string",
+    linkTags: listSpec("string"),
     linkedTo: Doc,
     linkedFrom: Doc
 });
diff --git a/src/client/views/nodes/LinkBox.tsx b/src/client/views/nodes/LinkBox.tsx
index 68b692aad..ebca1dc69 100644
--- a/src/client/views/nodes/LinkBox.tsx
+++ b/src/client/views/nodes/LinkBox.tsx
@@ -1,5 +1,5 @@
 import { library } from '@fortawesome/fontawesome-svg-core';
-import { faEdit, faEye, faTimes } from '@fortawesome/free-solid-svg-icons';
+import { faEdit, faEye, faTimes, faArrowRight } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { observer } from "mobx-react";
 import { DocumentManager } from "../../util/DocumentManager";
@@ -16,6 +16,7 @@ import { action } from 'mobx';
 library.add(faEye);
 library.add(faEdit);
 library.add(faTimes);
+library.add(faArrowRight);
 
 interface Props {
     linkDoc: Doc;
@@ -29,7 +30,7 @@ interface Props {
 export class LinkBox extends React.Component<Props> {
 
     @undoBatch
-    onViewButtonPressed = async (e: React.PointerEvent): Promise<void> => {
+    followLink = async (e: React.PointerEvent): Promise<void> => {
         e.stopPropagation();
         DocumentManager.Instance.jumpToDocument(this.props.pairedDoc, e.altKey);
     }
@@ -62,8 +63,8 @@ export class LinkBox extends React.Component<Props> {
 
         return (
             //<LinkEditor linkBox={this} linkDoc={this.props.linkDoc} />
-            <div className="link-container">
-                <div className="info-container" onPointerDown={this.onViewButtonPressed}>
+            <div className="link-menu-item">
+                <div className="link-menu-item-content">
                     <div className="link-name">
                         <p>{this.props.linkName}</p>
                     </div>
@@ -72,13 +73,15 @@ export class LinkBox extends React.Component<Props> {
                     </div>
                 </div>
 
-                <div className="button-container">
+                <div className="link-menu-item-buttons">
                     {/* <div title="Follow Link" className="button" onPointerDown={this.onViewButtonPressed}>
                         <FontAwesomeIcon className="fa-icon-view" icon="eye" size="sm" /></div> */}
+                    <div title="Follow Link" className="button" onPointerDown={this.followLink}>
+                        <FontAwesomeIcon className="fa-icon" icon="arrow-right" size="sm" /></div>
                     <div title="Edit Link" className="button" onPointerDown={this.onEditButtonPressed}>
-                        <FontAwesomeIcon className="fa-icon-edit" icon="edit" size="sm" /></div>
+                        <FontAwesomeIcon className="fa-icon" icon="edit" size="sm" /></div>
                     <div title="Delete Link" className="button" onPointerDown={this.onDeleteButtonPressed}>
-                        <FontAwesomeIcon className="fa-icon-delete" icon="times" size="sm" /></div>
+                        <FontAwesomeIcon className="fa-icon" icon="times" size="sm" /></div>
                 </div>
             </div>
         );
diff --git a/src/client/views/nodes/LinkManager.tsx b/src/client/views/nodes/LinkManager.tsx
new file mode 100644
index 000000000..1064eaa22
--- /dev/null
+++ b/src/client/views/nodes/LinkManager.tsx
@@ -0,0 +1,51 @@
+import { observable, computed, action } from "mobx";
+import React = require("react");
+import { SelectionManager } from "../../util/SelectionManager";
+import { observer } from "mobx-react";
+import './LinkEditor.scss';
+import { props } from "bluebird";
+import { DocumentView } from "./DocumentView";
+import { link } from "fs";
+import { StrCast, Cast } from "../../../new_fields/Types";
+import { Doc } from "../../../new_fields/Doc";
+import { listSpec } from "../../../new_fields/Schema";
+
+
+export class LinkManager {
+    private static _instance: LinkManager;
+    public static get Instance(): LinkManager {
+        return this._instance || (this._instance = new this());
+    }
+    private constructor() {
+    }
+
+    @observable
+    public allLinks: Array<Doc> = [];
+
+    public findAllRelatedLinks(source: Doc): Array<Doc> {
+        let related = LinkManager.Instance.allLinks.filter(
+            link => Doc.AreProtosEqual(source, Cast(link.linkedFrom, Doc, new Doc)) || Doc.AreProtosEqual(source, Cast(link.linkedTo, Doc, new Doc)));
+        return related;
+    }
+
+    public findRelatedGroupedLinks(source: Doc): Map<string, Array<Doc>> {
+        let related = this.findAllRelatedLinks(source);
+        let categories = new Map();
+        related.forEach(link => {
+            let group = categories.get(link.linkTags);
+            if (group) group.push(link);
+            else group = [link];
+            categories.set(link.linkTags, group);
+        })
+        return categories;
+    }
+
+    public findOppositeAnchor(link: Doc, source: Doc): Doc {
+        if (Doc.AreProtosEqual(source, Cast(link.linkedFrom, Doc, new Doc))) {
+            return Cast(link.linkedTo, Doc, new Doc);
+        } else {
+            return Cast(link.linkedFrom, Doc, new Doc);
+        }
+    }
+
+}
\ No newline at end of file
diff --git a/src/client/views/nodes/LinkMenu.scss b/src/client/views/nodes/LinkMenu.scss
index dedcce6ef..860f31d8a 100644
--- a/src/client/views/nodes/LinkMenu.scss
+++ b/src/client/views/nodes/LinkMenu.scss
@@ -1,3 +1,5 @@
+@import "../globalCssVariables";
+
 #linkMenu-container {
     width: 100%;
     height: auto;
@@ -18,4 +20,65 @@
     width: 100%;
     height: 100px;
     overflow-y: scroll;
-}
\ No newline at end of file
+}
+
+.link-menu-group {
+    .link-menu-item {
+        border-top: 0.5px solid $light-color-secondary; 
+        padding: 6px;
+        position: relative;
+        display: flex;
+
+        .link-menu-item-content {
+            width: 100%;
+        }
+
+        &:last-child {
+            border-bottom: 0.5px solid $light-color-secondary;
+        }
+        &:hover .link-menu-item-buttons {
+            display: flex;
+        }
+        &:hover .link-menu-item-content {
+            width: calc(100% - 72px);
+        }
+    }
+    .link-menu-item-buttons {
+        display: none;
+        position: absolute;
+        top: 50%;
+        right: 0;
+        transform: translateY(-50%);
+
+        .button {
+            width: 20px;
+            height: 20px;
+            margin: 0;
+            margin-right: 6px;
+            border-radius: 50%;
+            cursor: pointer;
+            pointer-events: auto;
+            background-color: $dark-color;
+            color: $light-color;
+            font-size: 65%;
+            transition: transform 0.2s;
+            text-align: center;
+            position: relative;
+
+            .fa-icon {
+                position: absolute;
+                top: 50%;
+                left: 50%;
+                transform: translate(-50%, -50%);
+            }
+
+            &:last-child {
+                margin-right: 0;
+            }
+            &:hover {
+                background: $main-accent;
+            }
+        }
+    }
+}
+
diff --git a/src/client/views/nodes/LinkMenu.tsx b/src/client/views/nodes/LinkMenu.tsx
index 3f09d6214..6dc5623d1 100644
--- a/src/client/views/nodes/LinkMenu.tsx
+++ b/src/client/views/nodes/LinkMenu.tsx
@@ -8,6 +8,7 @@ import React = require("react");
 import { Doc, DocListCast } from "../../../new_fields/Doc";
 import { Cast, FieldValue, StrCast } from "../../../new_fields/Types";
 import { Id } from "../../../new_fields/FieldSymbols";
+import { LinkManager } from "./LinkManager";
 
 interface Props {
     docView: DocumentView;
@@ -19,26 +20,62 @@ export class LinkMenu extends React.Component<Props> {
 
     @observable private _editingLink?: Doc;
 
-    renderLinkItems(links: Doc[], key: string, type: string) {
+    // renderLinkItems(links: Doc[], key: string, type: string) {
+    //     return links.map(link => {
+    //         let doc = FieldValue(Cast(link[key], Doc));
+    //         if (doc) {
+    //             return <LinkBox key={doc[Id]} linkDoc={link} linkName={StrCast(link.title)} pairedDoc={doc} showEditor={action(() => this._editingLink = link)} type={type} />;
+    //         }
+    //     });
+    // }
+
+    renderLinkGroup(links: Doc[]) {
+        console.log("render link group");
+        let source = this.props.docView.Document;
+        console.log("num links", links.length, typeof links);
         return links.map(link => {
-            let doc = FieldValue(Cast(link[key], Doc));
+            let destination = (link["linkedTo"] === source) ? link["linkedFrom"] : link["linkedTo"];
+            let doc = FieldValue(Cast(destination, Doc));
             if (doc) {
-                return <LinkBox key={doc[Id]} linkDoc={link} linkName={StrCast(link.title)} pairedDoc={doc} showEditor={action(() => this._editingLink = link)} type={type} />;
+                console.log(doc[Id] + source[Id], "source is", source[Id]);
+                return <LinkBox key={doc[Id] + source[Id]} linkDoc={link} linkName={StrCast(link.title)} pairedDoc={doc} showEditor={action(() => this._editingLink = link)} type={""} />;
             }
         });
     }
 
+    renderLinkItems(links: Map<string, Array<Doc>>) {
+        console.log("render link items");
+
+        let linkItems: Array<JSX.Element> = [];
+
+        links.forEach((links, group) => {
+            console.log("category is ", group);
+            linkItems.push(
+                <div key={group} className="link-menu-group">
+                    <p className="link-menu-group-name">{group}:</p>
+                    <div className="link-menu-group-wrapper">
+                        {this.renderLinkGroup(links)}
+                    </div>
+                </div>
+            )
+        });
+
+        return linkItems;
+    }
+
     render() {
         //get list of links from document
-        let linkFrom = DocListCast(this.props.docView.props.Document.linkedFromDocs);
-        let linkTo = DocListCast(this.props.docView.props.Document.linkedToDocs);
+        // let linkFrom = DocListCast(this.props.docView.props.Document.linkedFromDocs);
+        // let linkTo = DocListCast(this.props.docView.props.Document.linkedToDocs);
+        let related = LinkManager.Instance.findRelatedGroupedLinks(this.props.docView.props.Document);
         if (this._editingLink === undefined) {
             return (
                 <div id="linkMenu-container">
                     {/* <input id="linkMenu-searchBar" type="text" placeholder="Search..."></input> */}
                     <div id="linkMenu-list">
-                        {this.renderLinkItems(linkTo, "linkedTo", "Destination: ")}
-                        {this.renderLinkItems(linkFrom, "linkedFrom", "Source: ")}
+                        {/* {this.renderLinkItems(linkTo, "linkedTo", "Destination: ")}
+                        {this.renderLinkItems(linkFrom, "linkedFrom", "Source: ")} */}
+                        {this.renderLinkItems(related)}
                     </div>
                 </div>
             );