links get saved to global table

10 files changed, 247 insertions, 56 deletions

diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts
index ab61b915c..87b831663 100644
--- a/src/client/documents/Documents.ts
+++ b/src/client/documents/Documents.ts
@@ -35,6 +35,7 @@ import { dropActionType } from "../util/DragManager";
 import { DateField } from "../../new_fields/DateField";
 import { UndoManager } from "../util/UndoManager";
 import { RouteStore } from "../../server/RouteStore";
+import { LinkManager } from "../views/nodes/LinkManager";
 var requestImageSize = require('request-image-size');
 var path = require('path');
 
@@ -70,12 +71,12 @@ const delegateKeys = ["x", "y", "width", "height", "panX", "panY"];
 
 export namespace DocUtils {
     export function MakeLink(source: Doc, target: Doc) {
-        let protoSrc = source.proto ? source.proto : source;
-        let protoTarg = target.proto ? target.proto : target;
+        // let protoSrc = source.proto ? source.proto : source;
+        // let protoTarg = target.proto ? target.proto : target;
         UndoManager.RunInBatch(() => {
             let linkDoc = Docs.TextDocument({ width: 100, height: 30, borderRounding: -1 });
             //let linkDoc = new Doc;
-            linkDoc.proto!.title = "-link name-";
+            linkDoc.proto!.title = source.proto!.title + " and " + target.proto!.title;
             linkDoc.proto!.linkDescription = "";
             linkDoc.proto!.linkTags = "Default";
 
@@ -84,17 +85,20 @@ export namespace DocUtils {
             linkDoc.proto!.linkedFrom = source;
             linkDoc.proto!.linkedFromPage = source.curPage;
 
-            let linkedFrom = Cast(protoTarg.linkedFromDocs, listSpec(Doc));
-            if (!linkedFrom) {
-                protoTarg.linkedFromDocs = linkedFrom = new List<Doc>();
-            }
-            linkedFrom.push(linkDoc);
+            // let linkedFrom = Cast(protoTarg.linkedFromDocs, listSpec(Doc));
+            // if (!linkedFrom) {
+            //     protoTarg.linkedFromDocs = linkedFrom = new List<Doc>();
+            // }
+            // linkedFrom.push(linkDoc);
+
+            // let linkedTo = Cast(protoSrc.linkedToDocs, listSpec(Doc));
+            // if (!linkedTo) {
+            //     protoSrc.linkedToDocs = linkedTo = new List<Doc>();
+            // }
+            // linkedTo.push(linkDoc);
+
+            LinkManager.Instance.allLinks.push(linkDoc);
 
-            let linkedTo = Cast(protoSrc.linkedToDocs, listSpec(Doc));
-            if (!linkedTo) {
-                protoSrc.linkedToDocs = linkedTo = new List<Doc>();
-            }
-            linkedTo.push(linkDoc);
             return linkDoc;
         }, "make link");
     }
diff --git a/src/client/util/DocumentManager.ts b/src/client/util/DocumentManager.ts
index 65c4b9e4b..712529745 100644
--- a/src/client/util/DocumentManager.ts
+++ b/src/client/util/DocumentManager.ts
@@ -9,6 +9,7 @@ import { CollectionView } from '../views/collections/CollectionView';
 import { CollectionPDFView } from '../views/collections/CollectionPDFView';
 import { CollectionVideoView } from '../views/collections/CollectionVideoView';
 import { Id } from '../../new_fields/FieldSymbols';
+import { LinkManager } from '../views/nodes/LinkManager';
 
 
 export class DocumentManager {
@@ -83,12 +84,16 @@ export class DocumentManager {
 
     @computed
     public get LinkedDocumentViews() {
-        return DocumentManager.Instance.DocumentViews.filter(dv => dv.isSelected() || BoolCast(dv.props.Document.libraryBrush, false)).reduce((pairs, dv) => {
-            let linksList = DocListCast(dv.props.Document.linkedToDocs);
+        let linked = DocumentManager.Instance.DocumentViews.filter(dv => dv.isSelected() || BoolCast(dv.props.Document.libraryBrush, false)).reduce((pairs, dv) => {
+
+
+            let linksList = LinkManager.Instance.findAllRelatedLinks(dv.props.Document);
             if (linksList && linksList.length) {
                 pairs.push(...linksList.reduce((pairs, link) => {
                     if (link) {
-                        let linkToDoc = FieldValue(Cast(link.linkedTo, Doc));
+                        let destination = (link["linkedTo"] === dv.props.Document) ? link["linkedFrom"] : link["linkedTo"];
+                        let linkToDoc = FieldValue(Cast(destination, Doc));
+                        // let linkToDoc = FieldValue(Cast(link.linkedTo, Doc));
                         if (linkToDoc) {
                             DocumentManager.Instance.getDocumentViews(linkToDoc).map(docView1 =>
                                 pairs.push({ a: dv, b: docView1, l: link }));
@@ -97,21 +102,38 @@ export class DocumentManager {
                     return pairs;
                 }, [] as { a: DocumentView, b: DocumentView, l: Doc }[]));
             }
-            linksList = DocListCast(dv.props.Document.linkedFromDocs);
-            if (linksList && linksList.length) {
-                pairs.push(...linksList.reduce((pairs, link) => {
-                    if (link) {
-                        let linkFromDoc = FieldValue(Cast(link.linkedFrom, Doc));
-                        if (linkFromDoc) {
-                            DocumentManager.Instance.getDocumentViews(linkFromDoc).map(docView1 =>
-                                pairs.push({ a: dv, b: docView1, l: link }));
-                        }
-                    }
-                    return pairs;
-                }, pairs));
-            }
+
+            // let linksList = DocListCast(dv.props.Document.linkedToDocs);
+            // console.log("to links", linksList.length);
+            // if (linksList && linksList.length) {
+            //     pairs.push(...linksList.reduce((pairs, link) => {
+            //         if (link) {
+            //             let linkToDoc = FieldValue(Cast(link.linkedTo, Doc));
+            //             if (linkToDoc) {
+            //                 DocumentManager.Instance.getDocumentViews(linkToDoc).map(docView1 =>
+            //                     pairs.push({ a: dv, b: docView1, l: link }));
+            //             }
+            //         }
+            //         return pairs;
+            //     }, [] as { a: DocumentView, b: DocumentView, l: Doc }[]));
+            // }
+            // linksList = DocListCast(dv.props.Document.linkedFromDocs);
+            // console.log("from links", linksList.length);
+            // if (linksList && linksList.length) {
+            //     pairs.push(...linksList.reduce((pairs, link) => {
+            //         if (link) {
+            //             let linkFromDoc = FieldValue(Cast(link.linkedFrom, Doc));
+            //             if (linkFromDoc) {
+            //                 DocumentManager.Instance.getDocumentViews(linkFromDoc).map(docView1 =>
+            //                     pairs.push({ a: dv, b: docView1, l: link }));
+            //             }
+            //         }
+            //         return pairs;
+            //     }, pairs));
+            // }
             return pairs;
         }, [] as { a: DocumentView, b: DocumentView, l: Doc }[]);
+        return linked;
     }
 
     @undoBatch
diff --git a/src/client/util/DragManager.ts b/src/client/util/DragManager.ts
index 1e84a0db0..7854cc080 100644
--- a/src/client/util/DragManager.ts
+++ b/src/client/util/DragManager.ts
@@ -4,6 +4,7 @@ import { Cast } from "../../new_fields/Types";
 import { emptyFunction } from "../../Utils";
 import { CollectionDockingView } from "../views/collections/CollectionDockingView";
 import * as globalCssVariables from "../views/globalCssVariables.scss";
+import { LinkManager } from "../views/nodes/LinkManager";
 
 export type dropActionType = "alias" | "copy" | undefined;
 export function SetupDrag(_reference: React.RefObject<HTMLElement>, docFunc: () => Doc | Promise<Doc>, moveFunc?: DragManager.MoveFunction, dropAction?: dropActionType) {
@@ -41,14 +42,20 @@ export function SetupDrag(_reference: React.RefObject<HTMLElement>, docFunc: ()
 export async function DragLinksAsDocuments(dragEle: HTMLElement, x: number, y: number, sourceDoc: Doc) {
     let srcTarg = sourceDoc.proto;
     let draggedDocs: Doc[] = [];
-    let draggedFromDocs: Doc[] = [];
+    // let draggedFromDocs: Doc[] = [];
     if (srcTarg) {
-        let linkToDocs = await DocListCastAsync(srcTarg.linkedToDocs);
-        let linkFromDocs = await DocListCastAsync(srcTarg.linkedFromDocs);
-        if (linkToDocs) draggedDocs = linkToDocs.map(linkDoc => Cast(linkDoc.linkedTo, Doc) as Doc);
-        if (linkFromDocs) draggedFromDocs = linkFromDocs.map(linkDoc => Cast(linkDoc.linkedFrom, Doc) as Doc);
+        // let linkToDocs = await DocListCastAsync(srcTarg.linkedToDocs);
+        // let linkFromDocs = await DocListCastAsync(srcTarg.linkedFromDocs);
+        let linkDocs = LinkManager.Instance.findAllRelatedLinks(srcTarg);
+        if (linkDocs) draggedDocs = linkDocs.map(link => {
+            return LinkManager.Instance.findOppositeAnchor(link, sourceDoc);
+        });
+
+
+        // if (linkToDocs) draggedDocs = linkToDocs.map(linkDoc => Cast(linkDoc.linkedTo, Doc) as Doc);
+        // if (linkFromDocs) draggedFromDocs = linkFromDocs.map(linkDoc => Cast(linkDoc.linkedFrom, Doc) as Doc);
     }
-    draggedDocs.push(...draggedFromDocs);
+    // draggedDocs.push(...draggedFromDocs);
     if (draggedDocs.length) {
         let moddrag: Doc[] = [];
         for (const draggedDoc of draggedDocs) {
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>
             );