Merge branch 'linking-anh' of https://github.com/brown-dash/Dash-Web into linking-anh

4 files changed, 38 insertions, 11 deletions

diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts
index b14a6f800..91bd8e772 100644
--- a/src/client/documents/Documents.ts
+++ b/src/client/documents/Documents.ts
@@ -269,6 +269,8 @@ export class DocumentOptions {
     useLinkSmallAnchor?: boolean;  // whether links to this document should use a miniature linkAnchorBox
     border?: string; //for searchbox
     hoverBackgroundColor?: string; // background color of a label when hovered
+    linkRelationshipList?: List<string>; // for storing different link relationships (when set by user in the link editor)
+    linkColorList?: List<string>; // colors of links corresponding to specific link relationships
 }
 export namespace Docs {
 
diff --git a/src/client/util/LinkManager.ts b/src/client/util/LinkManager.ts
index 933b98a8c..c15e91df6 100644
--- a/src/client/util/LinkManager.ts
+++ b/src/client/util/LinkManager.ts
@@ -3,6 +3,7 @@ import { computedFn } from "mobx-utils";
 import { DirectLinksSym, Doc, DocListCast, Field, Opt } from "../../fields/Doc";
 import { List } from "../../fields/List";
 import { ProxyField } from "../../fields/Proxy";
+import { listSpec } from "../../fields/Schema";
 import { BoolCast, Cast, PromiseValue, StrCast } from "../../fields/Types";
 import { LightboxView } from "../views/LightboxView";
 import { DocumentViewSharedProps, ViewAdjustment } from "../views/nodes/DocumentView";
@@ -33,6 +34,7 @@ export class LinkManager {
     static links: Doc[] = [];
     constructor() {
         LinkManager._instance = this;
+        this.createLinkrelationshipList();
         setTimeout(() => {
             LinkManager.userLinkDBs = [];
             const addLinkToDoc = (link: Doc) => {
@@ -95,6 +97,17 @@ export class LinkManager {
         });
     }
 
+
+    public createLinkrelationshipList = () => {
+        const linkRelationshipList = new List<string>();
+        const linkColorList = new List<string>();
+        Doc.UserDoc().linkRelationshipList = linkRelationshipList;
+        Doc.UserDoc().linkColorList = linkColorList;
+        console.log(Doc.UserDoc().linkRelationshipList);
+        console.log(Doc.UserDoc().linkColorList);
+        //
+    }
+
     public addLink(linkDoc: Doc, checkExists = false) {
         if (!checkExists || !DocListCast(Doc.LinkDBDoc().data).includes(linkDoc)) {
             Doc.AddDocToList(Doc.LinkDBDoc(), "data", linkDoc);
diff --git a/src/client/views/linking/LinkEditor.tsx b/src/client/views/linking/LinkEditor.tsx
index f74b422d3..22c3c5f56 100644
--- a/src/client/views/linking/LinkEditor.tsx
+++ b/src/client/views/linking/LinkEditor.tsx
@@ -3,11 +3,13 @@ import { Tooltip } from "@material-ui/core";
 import { action, computed, observable } from "mobx";
 import { observer } from "mobx-react";
 import { Doc } from "../../../fields/Doc";
-import { DateCast, StrCast } from "../../../fields/Types";
+import { Cast, DateCast, StrCast } from "../../../fields/Types";
 import { LinkManager } from "../../util/LinkManager";
 import { undoBatch } from "../../util/UndoManager";
 import './LinkEditor.scss';
 import React = require("react");
+import { listSpec } from "../../../fields/Schema";
+import { List } from "../../../fields/List";
 
 
 interface LinkEditorProps {
@@ -39,6 +41,16 @@ export class LinkEditor extends React.Component<LinkEditorProps> {
     setRelationshipValue = action((value: string) => {
         if (LinkManager.currentLink) {
             LinkManager.currentLink.linkRelationship = value;
+            const linkRelationshipList = Doc.UserDoc().linkRelationshipList as List<string>;
+            const linkColorList = Doc.UserDoc().linkColorList as List<string>;
+            // if the relationship does not exist in the list, add it and a corresponding unique randomly generated color 
+            if (linkRelationshipList && !linkRelationshipList.includes(value)) {
+                linkRelationshipList.push(value);
+                const randColor = "rgb(" + Math.floor(Math.random() * 255) + "," + Math.floor(Math.random() * 255) + "," + Math.floor(Math.random() * 255) + ")";
+                linkColorList.push(randColor)
+                console.log(randColor)
+                console.log("linkRelList size: " + linkRelationshipList.length);
+            }
             this.relationshipButtonColor = "rgb(62, 133, 55)";
             setTimeout(action(() => this.relationshipButtonColor = ""), 750);
             return true;
@@ -70,7 +82,7 @@ export class LinkEditor extends React.Component<LinkEditorProps> {
     }
 
     onDown = () => this.setDescripValue(this.description);
-    onRelationshipDown = () => this.setRelationshipValue(this.description);
+    onRelationshipDown = () => this.setRelationshipValue(this.relationship);
 
     @action
     handleChange = (e: React.ChangeEvent<HTMLInputElement>) => { this.description = e.target.value; }
@@ -149,35 +161,35 @@ export class LinkEditor extends React.Component<LinkEditorProps> {
                     <div className="linkEditor-followingDropdown-option"
                         onPointerDown={() => this.changeFollowBehavior("default")}>
                         Default
-                        </div>
+                    </div>
                     <div className="linkEditor-followingDropdown-option"
                         onPointerDown={() => this.changeFollowBehavior("add:left")}>
                         Always open in new left pane
-                        </div>
+                    </div>
                     <div className="linkEditor-followingDropdown-option"
                         onPointerDown={() => this.changeFollowBehavior("add:right")}>
                         Always open in new right pane
-                        </div>
+                    </div>
                     <div className="linkEditor-followingDropdown-option"
                         onPointerDown={() => this.changeFollowBehavior("replace:right")}>
                         Always replace right tab
-                        </div>
+                    </div>
                     <div className="linkEditor-followingDropdown-option"
                         onPointerDown={() => this.changeFollowBehavior("replace:left")}>
                         Always replace left tab
-                        </div>
+                    </div>
                     <div className="linkEditor-followingDropdown-option"
                         onPointerDown={() => this.changeFollowBehavior("fullScreen")}>
                         Always open full screen
-                        </div>
+                    </div>
                     <div className="linkEditor-followingDropdown-option"
                         onPointerDown={() => this.changeFollowBehavior("add")}>
                         Always open in a new tab
-                        </div>
+                    </div>
                     <div className="linkEditor-followingDropdown-option"
                         onPointerDown={() => this.changeFollowBehavior("replace")}>
                         Replace Tab
-                        </div>
+                    </div>
                     {this.props.linkDoc.linksToAnnotation ?
                         <div className="linkEditor-followingDropdown-option"
                             onPointerDown={() => this.changeFollowBehavior("openExternal")}>
diff --git a/src/client/views/linking/LinkMenu.tsx b/src/client/views/linking/LinkMenu.tsx
index 6fc860447..53fe3f682 100644
--- a/src/client/views/linking/LinkMenu.tsx
+++ b/src/client/views/linking/LinkMenu.tsx
@@ -41,7 +41,7 @@ export class LinkMenu extends React.Component<Props> {
 
     /**
      * maps each link to a JSX element to be rendered
-     * @param groups LinkManager containing info of all of the links
+     * @param groups containing info of all of the links
      * @returns list of link JSX elements if there at least one linked element
      */
     renderAllGroups = (groups: Map<string, Array<Doc>>): Array<JSX.Element> => {