1 files changed, 18 insertions, 2 deletions
diff --git a/src/client/views/linking/LinkEditor.tsx b/src/client/views/linking/LinkEditor.tsx
index 219f7d3a2..58c57a23b 100644
--- a/src/client/views/linking/LinkEditor.tsx
+++ b/src/client/views/linking/LinkEditor.tsx
@@ -2,7 +2,7 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { Tooltip } from "@material-ui/core";
 import { action, computed, observable } from "mobx";
 import { observer } from "mobx-react";
-import { Doc, StrListCast, Field } from "../../../fields/Doc";
+import { Doc, NumListCast, StrListCast, Field } from "../../../fields/Doc";
 import { DateCast, StrCast, Cast } from "../../../fields/Types";
 import { LinkManager } from "../../util/LinkManager";
 import { undoBatch } from "../../util/UndoManager";
@@ -42,14 +42,28 @@ export class LinkEditor extends React.Component<LinkEditorProps> {
     @undoBatch
     setRelationshipValue = action((value: string) => {
         if (LinkManager.currentLink) {
+            const prevRelationship = LinkManager.currentLink.linkRelationship as string;
+            LinkManager.currentLink.linkRelationship = value;
             Doc.GetProto(LinkManager.currentLink).linkRelationship = value;
             const linkRelationshipList = StrListCast(Doc.UserDoc().linkRelationshipList);
+            const linkRelationshipSizes = NumListCast(Doc.UserDoc().linkRelationshipSizes);
             const linkColorList = StrListCast(Doc.UserDoc().linkColorList);
+
             // 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);
+                linkRelationshipSizes.push(1);
                 const randColor = "rgb(" + Math.floor(Math.random() * 255) + "," + Math.floor(Math.random() * 255) + "," + Math.floor(Math.random() * 255) + ")";
-                linkColorList.push(randColor);
+                linkColorList.push(randColor)
+                // if the relationship is already in the list AND the new rel is different from the prev rel, update the rel sizes
+            } else if (linkRelationshipList && value != prevRelationship) {
+                //increment size of new relationship size
+                linkRelationshipSizes[linkRelationshipList.indexOf(value)] = linkRelationshipSizes[linkRelationshipList.indexOf(value)] + 1;
+                //decrement the size of the previous relationship if it already exists (i.e. not default 'link' relationship upon link creation)
+                if (linkRelationshipList.includes(prevRelationship)) {
+                    linkRelationshipSizes[linkRelationshipList.indexOf(prevRelationship)] = linkRelationshipSizes[linkRelationshipList.indexOf(prevRelationship)] - 1;
+                }
+
             }
             this.relationshipButtonColor = "rgb(62, 133, 55)";
             setTimeout(action(() => this.relationshipButtonColor = ""), 750);
@@ -141,6 +155,7 @@ export class LinkEditor extends React.Component<LinkEditorProps> {
                         style={{ width: "100%" }}
                         id="input"
                         value={this.relationship}
+                        autoComplete={"off"}
                         placeholder={"Enter link relationship"}
                         onKeyDown={this.onRelationshipKey}
                         onChange={this.handleRelationshipChange}
@@ -169,6 +184,7 @@ export class LinkEditor extends React.Component<LinkEditorProps> {
                 <div className="linkEditor-description-editing">
                     <input
                         style={{ width: "100%" }}
+                        autoComplete={"off"}
                         id="input"
                         value={this.description}
                         placeholder={"Enter link description"}