From 61f5e6edac1967480e31c6407e3505eea2a08c26 Mon Sep 17 00:00:00 2001
From: dinhanhtruong <70963346+dinhanhtruong@users.noreply.github.com>
Date: Mon, 28 Jun 2021 16:31:02 -0400
Subject: linkMenu comments

added linkMenu comments
---
 src/client/views/linking/LinkMenu.tsx | 8 ++++++++
 1 file changed, 8 insertions(+)

(limited to 'src/client/views/linking/LinkMenu.tsx')

diff --git a/src/client/views/linking/LinkMenu.tsx b/src/client/views/linking/LinkMenu.tsx
index c7888c5ee..6fc860447 100644
--- a/src/client/views/linking/LinkMenu.tsx
+++ b/src/client/views/linking/LinkMenu.tsx
@@ -15,6 +15,9 @@ interface Props {
     changeFlyout: () => void;
 }
 
+/**
+ * the outermost component for the link menu of a node that contains a list of its linked nodes
+ */
 @observer
 export class LinkMenu extends React.Component<Props> {
     private _editorRef = React.createRef<HTMLDivElement>();
@@ -36,6 +39,11 @@ 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
+     * @returns list of link JSX elements if there at least one linked element
+     */
     renderAllGroups = (groups: Map<string, Array<Doc>>): Array<JSX.Element> => {
         const linkItems = Array.from(groups.entries()).map(group =>
             <LinkMenuGroup
-- 
cgit v1.2.3-70-g09d2


From 2e0174e16abab1c603bc45bf98903a89f0cbf84b Mon Sep 17 00:00:00 2001
From: dinhanhtruong <70963346+dinhanhtruong@users.noreply.github.com>
Date: Tue, 17 Aug 2021 23:17:36 -0400
Subject: in-progress link relationship color association

created list fields for link relationships and their associated colors. Need to implement colors in front end
---
 src/client/documents/Documents.ts       |  2 ++
 src/client/util/LinkManager.ts          | 13 +++++++++++++
 src/client/views/linking/LinkEditor.tsx | 32 ++++++++++++++++++++++----------
 src/client/views/linking/LinkMenu.tsx   |  2 +-
 4 files changed, 38 insertions(+), 11 deletions(-)

(limited to 'src/client/views/linking/LinkMenu.tsx')

diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts
index 48886aa3b..7c7943501 100644
--- a/src/client/documents/Documents.ts
+++ b/src/client/documents/Documents.ts
@@ -270,6 +270,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> => {
-- 
cgit v1.2.3-70-g09d2

