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

8 files changed, 466 insertions, 301 deletions

diff --git a/src/client/views/linking/LinkEditor.scss b/src/client/views/linking/LinkEditor.scss
index abd413f57..1d6496d3c 100644
--- a/src/client/views/linking/LinkEditor.scss
+++ b/src/client/views/linking/LinkEditor.scss
@@ -60,6 +60,24 @@
     }
 }
 
+.linkEditor-zoomFollow {
+    padding-left: 26px;
+    padding-right: 6.5px;
+    padding-bottom: 3.5px;
+    display: flex;
+
+    .linkEditor-zoomFollow-label {
+        text-decoration-color: black;
+        color: black;
+        line-height: 1.7;
+    }
+
+    .linkEditor-zoomFollow-input {
+        display: block;
+        width: 20px;
+    }
+}
+
 .linkEditor-description {
     padding-left: 26px;
     padding-right: 6.5px;
diff --git a/src/client/views/linking/LinkEditor.tsx b/src/client/views/linking/LinkEditor.tsx
index db331bb75..ba301962b 100644
--- a/src/client/views/linking/LinkEditor.tsx
+++ b/src/client/views/linking/LinkEditor.tsx
@@ -1,16 +1,14 @@
-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, NumListCast, StrListCast, Field } from "../../../fields/Doc";
-import { DateCast, StrCast, Cast } from "../../../fields/Types";
-import { LinkManager } from "../../util/LinkManager";
-import { undoBatch } from "../../util/UndoManager";
+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, NumListCast, StrListCast, Field } from '../../../fields/Doc';
+import { DateCast, StrCast, Cast } from '../../../fields/Types';
+import { LinkManager } from '../../util/LinkManager';
+import { undoBatch } from '../../util/UndoManager';
 import './LinkEditor.scss';
-import { LinkRelationshipSearch } from "./LinkRelationshipSearch";
-import React = require("react");
-import { ToString } from "../../../fields/FieldSymbols";
-
+import { LinkRelationshipSearch } from './LinkRelationshipSearch';
+import React = require('react');
 
 interface LinkEditorProps {
     sourceDoc: Doc;
@@ -20,15 +18,20 @@ interface LinkEditorProps {
 }
 @observer
 export class LinkEditor extends React.Component<LinkEditorProps> {
-
     @observable description = Field.toString(LinkManager.currentLink?.description as any as Field);
     @observable relationship = StrCast(LinkManager.currentLink?.linkRelationship);
+    @observable zoomFollow = StrCast(this.props.sourceDoc.followLinkZoom);
     @observable openDropdown: boolean = false;
     @observable showInfo: boolean = false;
-    @computed get infoIcon() { if (this.showInfo) { return "chevron-up"; } return "chevron-down"; }
-    @observable private buttonColor: string = "";
-    @observable private relationshipButtonColor: string = "";
-    @observable private relationshipSearchVisibility: string = "none";
+    @computed get infoIcon() {
+        if (this.showInfo) {
+            return 'chevron-up';
+        }
+        return 'chevron-down';
+    }
+    @observable private buttonColor: string = '';
+    @observable private relationshipButtonColor: string = '';
+    @observable private relationshipSearchVisibility: string = 'none';
     @observable private searchIsActive: boolean = false;
 
     //@observable description = this.props.linkDoc.description ? StrCast(this.props.linkDoc.description) : "DESCRIPTION";
@@ -37,7 +40,7 @@ export class LinkEditor extends React.Component<LinkEditorProps> {
     deleteLink = (): void => {
         LinkManager.Instance.deleteLink(this.props.linkDoc);
         this.props.showLinks();
-    }
+    };
 
     @undoBatch
     setRelationshipValue = action((value: string) => {
@@ -49,11 +52,11 @@ export class LinkEditor extends React.Component<LinkEditorProps> {
             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 the relationship does not exist in the list, add it and a corresponding unique randomly generated color
             if (!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) + ")";
+                const randColor = 'rgb(' + Math.floor(Math.random() * 255) + ',' + Math.floor(Math.random() * 255) + ',' + Math.floor(Math.random() * 255) + ')';
                 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) {
@@ -61,20 +64,22 @@ export class LinkEditor extends React.Component<LinkEditorProps> {
                 //increment size of new relationship size
                 if (index !== -1 && index < linkRelationshipSizes.length) {
                     const pvalue = linkRelationshipSizes[index];
-                    linkRelationshipSizes[index] = (pvalue === undefined || !Number.isFinite(pvalue) ? 1 : pvalue + 1);
+                    linkRelationshipSizes[index] = pvalue === undefined || !Number.isFinite(pvalue) ? 1 : pvalue + 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)) {
                     const pindex = linkRelationshipList.indexOf(prevRelationship);
                     if (pindex !== -1 && pindex < linkRelationshipSizes.length) {
                         const pvalue = linkRelationshipSizes[pindex];
-                        linkRelationshipSizes[pindex] = Math.max(0, (pvalue === undefined || !Number.isFinite(pvalue) ? 1 : pvalue - 1));
+                        linkRelationshipSizes[pindex] = Math.max(0, pvalue === undefined || !Number.isFinite(pvalue) ? 1 : pvalue - 1);
                     }
                 }
-
             }
-            this.relationshipButtonColor = "rgb(62, 133, 55)";
-            setTimeout(action(() => this.relationshipButtonColor = ""), 750);
+            this.relationshipButtonColor = 'rgb(62, 133, 55)';
+            setTimeout(
+                action(() => (this.relationshipButtonColor = '')),
+                750
+            );
             return true;
         }
     });
@@ -89,126 +94,143 @@ export class LinkEditor extends React.Component<LinkEditorProps> {
         if (linkRelationshipList) {
             return linkRelationshipList.filter(rel => rel.includes(query));
         }
-    }
+    };
 
     /**
      * toggles visibility of the relationship search results when the input field is focused on
      */
     @action
     toggleRelationshipResults = () => {
-        this.relationshipSearchVisibility = this.relationshipSearchVisibility === "none" ? "block" : "none";
-    }
+        this.relationshipSearchVisibility = this.relationshipSearchVisibility === 'none' ? 'block' : 'none';
+    };
 
     @undoBatch
     setDescripValue = action((value: string) => {
         if (LinkManager.currentLink) {
             Doc.GetProto(LinkManager.currentLink).description = value;
-            this.buttonColor = "rgb(62, 133, 55)";
-            setTimeout(action(() => this.buttonColor = ""), 750);
+            this.buttonColor = 'rgb(62, 133, 55)';
+            setTimeout(
+                action(() => (this.buttonColor = '')),
+                750
+            );
             return true;
         }
     });
 
     onDescriptionKey = (e: React.KeyboardEvent<HTMLInputElement>) => {
-        if (e.key === "Enter") {
+        if (e.key === 'Enter') {
             this.setDescripValue(this.description);
             document.getElementById('input')?.blur();
         }
-    }
+        e.stopPropagation();
+    };
 
     onRelationshipKey = (e: React.KeyboardEvent<HTMLInputElement>) => {
-        if (e.key === "Enter") {
+        if (e.key === 'Enter') {
             this.setRelationshipValue(this.relationship);
             document.getElementById('input')?.blur();
         }
-    }
+        e.stopPropagation();
+    };
 
     onDescriptionDown = () => this.setDescripValue(this.description);
     onRelationshipDown = () => this.setRelationshipValue(this.relationship);
 
     onBlur = () => {
-        //only hide the search results if the user clicks out of the input AND not on any of the search results 
+        //only hide the search results if the user clicks out of the input AND not on any of the search results
         // i.e. if search is not active
         if (!this.searchIsActive) {
             this.toggleRelationshipResults();
         }
-    }
+    };
     onFocus = () => {
         this.toggleRelationshipResults();
-    }
+    };
     toggleSearchIsActive = () => {
         this.searchIsActive = !this.searchIsActive;
-    }
+    };
 
     @action
-    handleDescriptionChange = (e: React.ChangeEvent<HTMLInputElement>) => { this.description = e.target.value; }
+    handleDescriptionChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        this.description = e.target.value;
+    };
     @action
     handleRelationshipChange = (e: React.ChangeEvent<HTMLInputElement>) => {
         this.relationship = e.target.value;
-    }
+    };
+    @action
+    handleZoomFollowChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        this.props.sourceDoc.followLinkZoom = e.target.checked;
+    };
     @action
     handleRelationshipSearchChange = (result: string) => {
         this.setRelationshipValue(result);
         this.toggleRelationshipResults();
         this.relationship = result;
-    }
+    };
     @computed
     get editRelationship() {
         //NOTE: confusingly, the classnames for the following relationship JSX elements are the same as the for the description elements for shared CSS
-        return <div className="linkEditor-description">
-            <div className="linkEditor-description-label">Link Relationship:</div>
-            <div className="linkEditor-description-input">
-                <div className="linkEditor-description-editing">
-                    <input
-                        style={{ width: "100%" }}
-                        id="input"
-                        value={this.relationship}
-                        autoComplete={"off"}
-                        placeholder={"Enter link relationship"}
-                        onKeyDown={this.onRelationshipKey}
-                        onChange={this.handleRelationshipChange}
-                        onFocus={this.onFocus}
-                        onBlur={this.onBlur}
-                    ></input>
-                    <LinkRelationshipSearch
-                        results={this.getRelationshipResults()}
-                        display={this.relationshipSearchVisibility}
-                        handleRelationshipSearchChange={this.handleRelationshipSearchChange}
-                        toggleSearch={this.toggleSearchIsActive}
-                    />
+        return (
+            <div className="linkEditor-description">
+                <div className="linkEditor-description-label">Link Relationship:</div>
+                <div className="linkEditor-description-input">
+                    <div className="linkEditor-description-editing">
+                        <input
+                            style={{ width: '100%' }}
+                            id="input"
+                            value={this.relationship}
+                            autoComplete={'off'}
+                            placeholder={'Enter link relationship'}
+                            onKeyDown={this.onRelationshipKey}
+                            onChange={this.handleRelationshipChange}
+                            onFocus={this.onFocus}
+                            onBlur={this.onBlur}></input>
+                        <LinkRelationshipSearch results={this.getRelationshipResults()} display={this.relationshipSearchVisibility} handleRelationshipSearchChange={this.handleRelationshipSearchChange} toggleSearch={this.toggleSearchIsActive} />
+                    </div>
+                    <div className="linkEditor-description-add-button" style={{ background: this.relationshipButtonColor }} onPointerDown={this.onRelationshipDown}>
+                        Set
+                    </div>
                 </div>
-                <div className="linkEditor-description-add-button"
-                    style={{ background: this.relationshipButtonColor }}
-                    onPointerDown={this.onRelationshipDown}>Set</div>
             </div>
-        </div>;
+        );
+    }
+    @computed
+    get editZoomFollow() {
+        //NOTE: confusingly, the classnames for the following relationship JSX elements are the same as the for the description elements for shared CSS
+        return (
+            <div className="linkEditor-zoomFollow">
+                <div className="linkEditor-zoomFollow-label">Zoom To Link Target:</div>
+                <div className="linkEditor-zoomFollow-input">
+                    <div className="linkEditor-zoomFollow-editing">
+                        <input style={{ width: '100%' }} type="checkbox" value={this.zoomFollow} onChange={this.handleZoomFollowChange} />
+                    </div>
+                </div>
+            </div>
+        );
     }
 
     @computed
     get editDescription() {
-        return <div className="linkEditor-description">
-            <div className="linkEditor-description-label">Link Description:</div>
-            <div className="linkEditor-description-input">
-                <div className="linkEditor-description-editing">
-                    <input
-                        style={{ width: "100%" }}
-                        autoComplete={"off"}
-                        id="input"
-                        value={this.description}
-                        placeholder={"Enter link description"}
-                        onKeyDown={this.onDescriptionKey}
-                        onChange={this.handleDescriptionChange}
-                    ></input>
+        return (
+            <div className="linkEditor-description">
+                <div className="linkEditor-description-label">Link Description:</div>
+                <div className="linkEditor-description-input">
+                    <div className="linkEditor-description-editing">
+                        <input style={{ width: '100%' }} autoComplete={'off'} id="input" value={this.description} placeholder={'Enter link description'} onKeyDown={this.onDescriptionKey} onChange={this.handleDescriptionChange}></input>
+                    </div>
+                    <div className="linkEditor-description-add-button" style={{ background: this.buttonColor }} onPointerDown={this.onDescriptionDown}>
+                        Set
+                    </div>
                 </div>
-                <div className="linkEditor-description-add-button"
-                    style={{ background: this.buttonColor }}
-                    onPointerDown={this.onDescriptionDown}>Set</div>
             </div>
-        </div>;
+        );
     }
 
     @action
-    changeDropdown = () => { this.openDropdown = !this.openDropdown; }
+    changeDropdown = () => {
+        this.openDropdown = !this.openDropdown;
+    };
 
     @undoBatch
     changeFollowBehavior = action((follow: string) => {
@@ -218,94 +240,114 @@ export class LinkEditor extends React.Component<LinkEditorProps> {
 
     @computed
     get followingDropdown() {
-        return <div className="linkEditor-followingDropdown">
-            <div className="linkEditor-followingDropdown-label">Follow Behavior:</div>
-            <div className="linkEditor-followingDropdown-dropdown">
-                <div className="linkEditor-followingDropdown-header"
-                    onPointerDown={this.changeDropdown}>
-                    {StrCast(this.props.linkDoc.followLinkLocation, "default")}
-                    <FontAwesomeIcon className="linkEditor-followingDropdown-icon"
-                        icon={this.openDropdown ? "chevron-up" : "chevron-down"}
-                        size={"lg"} />
-                </div>
-                <div className="linkEditor-followingDropdown-optionsList"
-                    style={{ display: this.openDropdown ? "" : "none" }}>
-                    <div className="linkEditor-followingDropdown-option"
-                        onPointerDown={() => this.changeFollowBehavior("default")}>
-                        Default
-                    </div>
-                    <div className="linkEditor-followingDropdown-option"
-                        onPointerDown={() => this.changeFollowBehavior("add:left")}>
-                        Always open in new left pane
-                    </div>
-                    <div className="linkEditor-followingDropdown-option"
-                        onPointerDown={() => this.changeFollowBehavior("add:right")}>
-                        Always open in new right pane
-                    </div>
-                    <div className="linkEditor-followingDropdown-option"
-                        onPointerDown={() => this.changeFollowBehavior("replace:right")}>
-                        Always replace right tab
-                    </div>
-                    <div className="linkEditor-followingDropdown-option"
-                        onPointerDown={() => this.changeFollowBehavior("replace:left")}>
-                        Always replace left tab
+        return (
+            <div className="linkEditor-followingDropdown">
+                <div className="linkEditor-followingDropdown-label">Follow Behavior:</div>
+                <div className="linkEditor-followingDropdown-dropdown">
+                    <div className="linkEditor-followingDropdown-header" onPointerDown={this.changeDropdown}>
+                        {StrCast(this.props.linkDoc.followLinkLocation, 'default')}
+                        <FontAwesomeIcon className="linkEditor-followingDropdown-icon" icon={this.openDropdown ? 'chevron-up' : 'chevron-down'} size={'lg'} />
                     </div>
-                    <div className="linkEditor-followingDropdown-option"
-                        onPointerDown={() => this.changeFollowBehavior("fullScreen")}>
-                        Always open full screen
-                    </div>
-                    <div className="linkEditor-followingDropdown-option"
-                        onPointerDown={() => this.changeFollowBehavior("add")}>
-                        Always open in a new tab
-                    </div>
-                    <div className="linkEditor-followingDropdown-option"
-                        onPointerDown={() => this.changeFollowBehavior("replace")}>
-                        Replace Tab
-                    </div>
-                    {this.props.linkDoc.linksToAnnotation ?
-                        <div className="linkEditor-followingDropdown-option"
-                            onPointerDown={() => this.changeFollowBehavior("openExternal")}>
-                            Always open in external page
+                    <div className="linkEditor-followingDropdown-optionsList" style={{ display: this.openDropdown ? '' : 'none' }}>
+                        <div className="linkEditor-followingDropdown-option" onPointerDown={() => this.changeFollowBehavior('default')}>
+                            Default
+                        </div>
+                        <div className="linkEditor-followingDropdown-option" onPointerDown={() => this.changeFollowBehavior('add:left')}>
+                            Always open in new left pane
+                        </div>
+                        <div className="linkEditor-followingDropdown-option" onPointerDown={() => this.changeFollowBehavior('add:right')}>
+                            Always open in new right pane
+                        </div>
+                        <div className="linkEditor-followingDropdown-option" onPointerDown={() => this.changeFollowBehavior('replace:right')}>
+                            Always replace right tab
                         </div>
-                        : null}
+                        <div className="linkEditor-followingDropdown-option" onPointerDown={() => this.changeFollowBehavior('replace:left')}>
+                            Always replace left tab
+                        </div>
+                        <div className="linkEditor-followingDropdown-option" onPointerDown={() => this.changeFollowBehavior('fullScreen')}>
+                            Always open full screen
+                        </div>
+                        <div className="linkEditor-followingDropdown-option" onPointerDown={() => this.changeFollowBehavior('add')}>
+                            Always open in a new tab
+                        </div>
+                        <div className="linkEditor-followingDropdown-option" onPointerDown={() => this.changeFollowBehavior('replace')}>
+                            Replace Tab
+                        </div>
+                        {this.props.linkDoc.linksToAnnotation ? (
+                            <div className="linkEditor-followingDropdown-option" onPointerDown={() => this.changeFollowBehavior('openExternal')}>
+                                Always open in external page
+                            </div>
+                        ) : null}
+                    </div>
                 </div>
             </div>
-        </div>;
+        );
     }
 
     @action
-    changeInfo = () => { this.showInfo = !this.showInfo; }
+    changeInfo = () => {
+        this.showInfo = !this.showInfo;
+    };
 
     render() {
         const destination = LinkManager.getOppositeAnchor(this.props.linkDoc, this.props.sourceDoc);
 
-
-        return !destination ? (null) : (
-            <div className="linkEditor">
+        return !destination ? null : (
+            <div className="linkEditor" tabIndex={0} onKeyDown={e => e.stopPropagation()}>
                 <div className="linkEditor-info">
-                    <Tooltip title={<><div className="dash-tooltip">Return to link menu</div></>} placement="top">
-                        <button className="linkEditor-button-back"
-                            style={{ display: this.props.hideback ? "none" : "" }}
-                            onClick={this.props.showLinks}>
-                            <FontAwesomeIcon icon="arrow-left" size="sm" /> </button>
+                    <Tooltip
+                        title={
+                            <>
+                                <div className="dash-tooltip">Return to link menu</div>
+                            </>
+                        }
+                        placement="top">
+                        <button className="linkEditor-button-back" style={{ display: this.props.hideback ? 'none' : '' }} onClick={this.props.showLinks}>
+                            <FontAwesomeIcon icon="arrow-left" size="sm" />{' '}
+                        </button>
                     </Tooltip>
-                    <p className="linkEditor-linkedTo">Editing Link to: <b>{
-                        destination.proto?.title ?? destination.title ?? "untitled"}</b></p>
-                    <Tooltip title={<><div className="dash-tooltip">Show more link information</div></>} placement="top">
-                        <div className="linkEditor-downArrow"><FontAwesomeIcon className="button" icon={this.infoIcon} size="lg" onPointerDown={this.changeInfo} /></div>
+                    <p className="linkEditor-linkedTo">
+                        Editing Link to: <b>{StrCast(destination.proto?.title, StrCast(destination.title, 'untitled'))}</b>
+                    </p>
+                    <Tooltip
+                        title={
+                            <>
+                                <div className="dash-tooltip">Show more link information</div>
+                            </>
+                        }
+                        placement="top">
+                        <div className="linkEditor-downArrow">
+                            <FontAwesomeIcon className="button" icon={this.infoIcon} size="lg" onPointerDown={this.changeInfo} />
+                        </div>
                     </Tooltip>
                 </div>
-                {this.showInfo ? <div className="linkEditor-moreInfo">
-                    <div>{this.props.linkDoc.author ? <div> <b>Author:</b> {this.props.linkDoc.author}</div> : null}</div>
-                    <div>{this.props.linkDoc.creationDate ? <div> <b>Creation Date:</b>
-                        {DateCast(this.props.linkDoc.creationDate).toString()}</div> : null}</div>
-                </div> : null}
+                {this.showInfo ? (
+                    <div className="linkEditor-moreInfo">
+                        <div>
+                            {this.props.linkDoc.author ? (
+                                <div>
+                                    {' '}
+                                    <b>Author:</b> {StrCast(this.props.linkDoc.author)}
+                                </div>
+                            ) : null}
+                        </div>
+                        <div>
+                            {this.props.linkDoc.creationDate ? (
+                                <div>
+                                    {' '}
+                                    <b>Creation Date:</b>
+                                    {DateCast(this.props.linkDoc.creationDate).toString()}
+                                </div>
+                            ) : null}
+                        </div>
+                    </div>
+                ) : null}
 
                 {this.editDescription}
                 {this.editRelationship}
+                {this.editZoomFollow}
                 {this.followingDropdown}
             </div>
-
         );
     }
-}
\ No newline at end of file
+}
diff --git a/src/client/views/linking/LinkMenu.scss b/src/client/views/linking/LinkMenu.scss
index 19c6463d3..77c16a28f 100644
--- a/src/client/views/linking/LinkMenu.scss
+++ b/src/client/views/linking/LinkMenu.scss
@@ -45,8 +45,11 @@
     }
 
     .linkMenu-group-name {
-        padding: 10px;
-
+        padding: 1px;
+        padding-left: 5px;
+        font-size: 10px;
+        font-style: italic;
+        font-weight: bold;
 
         &:hover {
             // p {
@@ -64,7 +67,7 @@
 
         p {
             width: 100%;
-            line-height: 12px;
+            line-height: 1;
             border-radius: 5px;
             text-transform: capitalize;
         }
diff --git a/src/client/views/linking/LinkMenu.tsx b/src/client/views/linking/LinkMenu.tsx
index 53fe3f682..0096a58bd 100644
--- a/src/client/views/linking/LinkMenu.tsx
+++ b/src/client/views/linking/LinkMenu.tsx
@@ -1,18 +1,19 @@
-import { action, computed, observable } from "mobx";
-import { observer } from "mobx-react";
-import { Doc } from "../../../fields/Doc";
-import { LinkManager } from "../../util/LinkManager";
-import { DocumentLinksButton } from "../nodes/DocumentLinksButton";
-import { DocumentView, DocumentViewSharedProps } from "../nodes/DocumentView";
-import { LinkDocPreview } from "../nodes/LinkDocPreview";
-import { LinkEditor } from "./LinkEditor";
+import { action, computed, observable } from 'mobx';
+import { observer } from 'mobx-react';
+import { Doc } from '../../../fields/Doc';
+import { LinkManager } from '../../util/LinkManager';
+import { DocumentView } from '../nodes/DocumentView';
+import { LinkDocPreview } from '../nodes/LinkDocPreview';
+import { LinkEditor } from './LinkEditor';
 import './LinkMenu.scss';
-import { LinkMenuGroup } from "./LinkMenuGroup";
-import React = require("react");
+import { LinkMenuGroup } from './LinkMenuGroup';
+import React = require('react');
 
 interface Props {
     docView: DocumentView;
-    changeFlyout: () => void;
+    position?: { x?: number; y?: number };
+    itemHandler?: (doc: Doc) => void;
+    clearLinkEditor: () => void;
 }
 
 /**
@@ -20,24 +21,32 @@ interface Props {
  */
 @observer
 export class LinkMenu extends React.Component<Props> {
-    private _editorRef = React.createRef<HTMLDivElement>();
+    _editorRef = React.createRef<HTMLDivElement>();
     @observable _editingLink?: Doc;
     @observable _linkMenuRef = React.createRef<HTMLDivElement>();
 
     @computed get position() {
-        return ((dv) => ({ x: dv?.left || 0, y: dv?.top || 0, r: dv?.right || 0, b: dv?.bottom || 0 }))(this.props.docView.getBounds());
+        return this.props.position ?? (dv => ({ x: dv?.left || 0, y: (dv?.bottom || 0) + 15 }))(this.props.docView.getBounds());
     }
 
-    componentDidMount() { document.addEventListener("pointerdown", this.onPointerDown); }
-    componentWillUnmount() { document.removeEventListener("pointerdown", this.onPointerDown); }
+    clear = action(() => {
+        this.props.clearLinkEditor();
+        this._editingLink = undefined;
+    });
 
-    onPointerDown = (e: PointerEvent) => {
+    componentDidMount() {
+        document.addEventListener('pointerdown', this.onPointerDown, true);
+    }
+    componentWillUnmount() {
+        document.removeEventListener('pointerdown', this.onPointerDown, true);
+    }
+
+    onPointerDown = action((e: PointerEvent) => {
         LinkDocPreview.Clear();
-        if (!this._linkMenuRef.current?.contains(e.target as any) &&
-            !this._editorRef.current?.contains(e.target as any)) {
-            DocumentLinksButton.ClearLinkEditor();
+        if (!this._linkMenuRef.current?.contains(e.target as any) && !this._editorRef.current?.contains(e.target as any)) {
+            this.clear();
         }
-    }
+    });
 
     /**
      * maps each link to a JSX element to be rendered
@@ -45,30 +54,34 @@ export class LinkMenu extends React.Component<Props> {
      * @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 =>
+        const linkItems = Array.from(groups.entries()).map(group => (
             <LinkMenuGroup
                 key={group[0]}
+                itemHandler={this.props.itemHandler}
                 docView={this.props.docView}
                 sourceDoc={this.props.docView.props.Document}
                 group={group[1]}
                 groupType={group[0]}
-                showEditor={action(linkDoc => this._editingLink = linkDoc)} />);
+                clearLinkEditor={this.clear}
+                showEditor={action(linkDoc => (this._editingLink = linkDoc))}
+            />
+        ));
 
-        return linkItems.length ? linkItems : [<p key="">No links have been created yet. Drag the linking button onto another document to create a link.</p>];
-    }
+        return linkItems.length ? linkItems : this.props.position ? [<></>] : [<p key="">No links have been created yet. Drag the linking button onto another document to create a link.</p>];
+    };
 
     render() {
         const sourceDoc = this.props.docView.props.Document;
-        return <div className="linkMenu" ref={this._linkMenuRef}
-            style={{ left: this.position.x, top: this.props.docView.topMost ? undefined : this.position.b + 15, bottom: this.props.docView.topMost ? 20 : undefined }}
-        >
-            {this._editingLink ?
-                <div className="linkMenu-listEditor">
-                    <LinkEditor sourceDoc={sourceDoc} linkDoc={this._editingLink} showLinks={action(() => this._editingLink = undefined)} />
-                </div> :
-                <div className="linkMenu-list" >
-                    {this.renderAllGroups(LinkManager.Instance.getRelatedGroupedLinks(sourceDoc))}
-                </div>}
-        </div>;
+        return (
+            <div className="linkMenu" ref={this._linkMenuRef} style={{ left: this.position.x, top: this.props.docView.topMost ? undefined : this.position.y, bottom: this.props.docView.topMost ? 20 : undefined }}>
+                {this._editingLink ? (
+                    <div className="linkMenu-listEditor">
+                        <LinkEditor sourceDoc={sourceDoc} linkDoc={this._editingLink} showLinks={action(() => (this._editingLink = undefined))} />
+                    </div>
+                ) : (
+                    <div className="linkMenu-list">{this.renderAllGroups(LinkManager.Instance.getRelatedGroupedLinks(sourceDoc))}</div>
+                )}
+            </div>
+        );
     }
-}
\ No newline at end of file
+}
diff --git a/src/client/views/linking/LinkMenuGroup.tsx b/src/client/views/linking/LinkMenuGroup.tsx
index 03377ad4e..fa6a2f506 100644
--- a/src/client/views/linking/LinkMenuGroup.tsx
+++ b/src/client/views/linking/LinkMenuGroup.tsx
@@ -1,4 +1,5 @@
 import { observer } from "mobx-react";
+import { observable, action } from "mobx";
 import { Doc, StrListCast } from "../../../fields/Doc";
 import { Id } from "../../../fields/FieldSymbols";
 import { Cast } from "../../../fields/Types";
@@ -12,8 +13,10 @@ interface LinkMenuGroupProps {
     sourceDoc: Doc;
     group: Doc[];
     groupType: string;
+    clearLinkEditor: () => void;
     showEditor: (linkDoc: Doc) => void;
     docView: DocumentView;
+    itemHandler?: (doc: Doc) => void;
 }
 
 @observer
@@ -36,6 +39,8 @@ export class LinkMenuGroup extends React.Component<LinkMenuGroupProps> {
         return color;
     }
 
+    @observable _collapsed = false;
+
     render() {
         const set = new Set<Doc>(this.props.group);
         const groupItems = Array.from(set.keys()).map(linkDoc => {
@@ -43,11 +48,13 @@ export class LinkMenuGroup extends React.Component<LinkMenuGroupProps> {
                 LinkManager.getOppositeAnchor(linkDoc, Cast(linkDoc.anchor2, Doc, null).annotationOn === this.props.sourceDoc ? Cast(linkDoc.anchor2, Doc, null) : Cast(linkDoc.anchor1, Doc, null));
             if (destination && this.props.sourceDoc) {
                 return <LinkMenuItem key={linkDoc[Id]}
+                    itemHandler={this.props.itemHandler}
                     groupType={this.props.groupType}
                     docView={this.props.docView}
                     linkDoc={linkDoc}
                     sourceDoc={this.props.sourceDoc}
                     destinationDoc={destination}
+                    clearLinkEditor={this.props.clearLinkEditor}
                     showEditor={this.props.showEditor}
                     menuRef={this._menuRef} />;
             }
@@ -55,12 +62,12 @@ export class LinkMenuGroup extends React.Component<LinkMenuGroupProps> {
 
         return (
             <div className="linkMenu-group" ref={this._menuRef}>
-                <div className="linkMenu-group-name" style={{ background: this.getBackgroundColor() }}>
+                <div className="linkMenu-group-name" onClick={action(() => this._collapsed = !this._collapsed)} style={{ background: this.getBackgroundColor() }}>
                     <p className={this.props.groupType === "*" || this.props.groupType === "" ? "" : "expand-one"}> {this.props.groupType}:</p>
                 </div>
-                <div className="linkMenu-group-wrapper">
+                {this._collapsed ? (null) : <div className="linkMenu-group-wrapper">
                     {groupItems}
-                </div>
+                </div>}
             </div >
         );
     }
diff --git a/src/client/views/linking/LinkMenuItem.scss b/src/client/views/linking/LinkMenuItem.scss
index 90722daf9..8333aa374 100644
--- a/src/client/views/linking/LinkMenuItem.scss
+++ b/src/client/views/linking/LinkMenuItem.scss
@@ -9,8 +9,8 @@
     padding-left: 6.5px;
     padding-right: 2px;
 
-    padding-top: 6.5px;
-    padding-bottom: 6.5px;
+    padding-top: 1px;
+    padding-bottom: 1px;
 
     background-color: white;
 
@@ -18,10 +18,12 @@
     .linkMenu-name {
         position: relative;
         width: auto;
+        align-items: center;
+        display: flex;
 
         .linkMenu-text {
 
-            padding: 4px 2px;
+            // padding: 4px 2px;
             //display: inline;
 
             .linkMenu-source-title {
@@ -37,6 +39,8 @@
             .linkMenu-title-wrapper {
 
                 display: flex;
+                align-items: center;
+                min-height: 20px;
 
                 .destination-icon-wrapper {
                     //border: 0.5px solid rgb(161, 161, 161);
@@ -56,7 +60,8 @@
                 .linkMenu-destination-title {
                     text-decoration: none;
                     color: #4476F7;
-                    font-size: 16px;
+                    font-size: 13px;
+                    line-height: 0.9;
                     padding-bottom: 2px;
                     padding-right: 4px;
                     margin-right: 4px;
@@ -77,6 +82,7 @@
                 font-style: italic;
                 color: rgb(95, 97, 102);
                 font-size: 9px;
+                line-height: 0.9;
                 margin-left: 20px;
                 max-width: 125px;
                 height: auto;
diff --git a/src/client/views/linking/LinkMenuItem.tsx b/src/client/views/linking/LinkMenuItem.tsx
index 96cc6d600..ed856a4ab 100644
--- a/src/client/views/linking/LinkMenuItem.tsx
+++ b/src/client/views/linking/LinkMenuItem.tsx
@@ -1,25 +1,23 @@
 import { IconProp } from '@fortawesome/fontawesome-svg-core';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { Tooltip } from '@material-ui/core';
-import { action, observable, runInAction } from 'mobx';
-import { observer } from "mobx-react";
+import { action, observable } from 'mobx';
+import { observer } from 'mobx-react';
 import { Doc, DocListCast } from '../../../fields/Doc';
 import { Cast, StrCast } from '../../../fields/Types';
 import { WebField } from '../../../fields/URLField';
-import { emptyFunction, setupMoveUpEvents, returnFalse } from '../../../Utils';
+import { emptyFunction, returnFalse, setupMoveUpEvents } from '../../../Utils';
 import { DocumentType } from '../../documents/DocumentTypes';
 import { DocumentManager } from '../../util/DocumentManager';
 import { DragManager } from '../../util/DragManager';
 import { Hypothesis } from '../../util/HypothesisUtils';
+import { LinkFollower } from '../../util/LinkFollower';
 import { LinkManager } from '../../util/LinkManager';
 import { undoBatch } from '../../util/UndoManager';
-import { DocumentLinksButton } from '../nodes/DocumentLinksButton';
-import { DocumentView, DocumentViewSharedProps } from '../nodes/DocumentView';
+import { DocumentView } from '../nodes/DocumentView';
 import { LinkDocPreview } from '../nodes/LinkDocPreview';
 import './LinkMenuItem.scss';
-import React = require("react");
-import { setup } from 'mocha';
-
+import React = require('react');
 
 interface LinkMenuItemProps {
     groupType: string;
@@ -27,8 +25,10 @@ interface LinkMenuItemProps {
     docView: DocumentView;
     sourceDoc: Doc;
     destinationDoc: Doc;
+    clearLinkEditor: () => void;
     showEditor: (linkDoc: Doc) => void;
     menuRef: React.Ref<HTMLDivElement>;
+    itemHandler?: (doc: Doc) => void;
 }
 
 // drag links and drop link targets (aliasing them if needed)
@@ -50,22 +50,21 @@ export async function StartLinkTargetsDrag(dragEle: HTMLElement, docView: Docume
         };
         const containingView = docView.props.ContainingCollectionView;
         const finishDrag = (e: DragManager.DragCompleteEvent) =>
-            e.docDragData && (e.docDragData.droppedDocuments =
-                dragData.draggedDocuments.reduce((droppedDocs, d) => {
-                    const dvs = DocumentManager.Instance.getDocumentViews(d).filter(dv => dv.props.ContainingCollectionView === containingView);
-                    if (dvs.length) {
-                        dvs.forEach(dv => droppedDocs.push(dv.props.Document));
-                    } else {
-                        droppedDocs.push(Doc.MakeAlias(d));
-                    }
-                    return droppedDocs;
-                }, [] as Doc[]));
+            e.docDragData &&
+            (e.docDragData.droppedDocuments = dragData.draggedDocuments.reduce((droppedDocs, d) => {
+                const dvs = DocumentManager.Instance.getDocumentViews(d).filter(dv => dv.props.ContainingCollectionView === containingView);
+                if (dvs.length) {
+                    dvs.forEach(dv => droppedDocs.push(dv.props.Document));
+                } else {
+                    droppedDocs.push(Doc.MakeAlias(d));
+                }
+                return droppedDocs;
+            }, [] as Doc[]));
 
         DragManager.StartDrag([dragEle], dragData, downX, downY, undefined, finishDrag);
     }
 }
 
-
 @observer
 export class LinkMenuItem extends React.Component<LinkMenuItemProps> {
     private _drag = React.createRef<HTMLDivElement>();
@@ -74,125 +73,206 @@ export class LinkMenuItem extends React.Component<LinkMenuItemProps> {
     _buttonRef = React.createRef<HTMLDivElement>();
 
     @observable private _showMore: boolean = false;
-    @action toggleShowMore(e: React.PointerEvent) { e.stopPropagation(); this._showMore = !this._showMore; }
+    @action toggleShowMore(e: React.PointerEvent) {
+        e.stopPropagation();
+        this._showMore = !this._showMore;
+    }
 
     onEdit = (e: React.PointerEvent): void => {
         LinkManager.currentLink = this.props.linkDoc;
-        setupMoveUpEvents(this, e, e => {
-            const dragData = new DragManager.DocumentDragData([this.props.linkDoc], "alias");
-            dragData.removeDropProperties = ["hidden"];
-            DragManager.StartDocumentDrag([this._editRef.current!], dragData, e.x, e.y);
-            return true;
-        }, emptyFunction, () => this.props.showEditor(this.props.linkDoc));
-    }
+        setupMoveUpEvents(
+            this,
+            e,
+            e => {
+                const dragData = new DragManager.DocumentDragData([this.props.linkDoc], 'alias');
+                dragData.removeDropProperties = ['hidden'];
+                DragManager.StartDocumentDrag([this._editRef.current!], dragData, e.x, e.y);
+                return true;
+            },
+            emptyFunction,
+            () => this.props.showEditor(this.props.linkDoc)
+        );
+    };
 
     onLinkButtonDown = (e: React.PointerEvent): void => {
-        setupMoveUpEvents(this, e,
+        setupMoveUpEvents(
+            this,
+            e,
             e => {
                 const eleClone: any = this._drag.current!.cloneNode(true);
                 eleClone.style.transform = `translate(${e.x}px, ${e.y}px)`;
                 StartLinkTargetsDrag(eleClone, this.props.docView, e.x, e.y, this.props.sourceDoc, [this.props.linkDoc]);
-                DocumentLinksButton.ClearLinkEditor();
+                this.props.clearLinkEditor();
                 return true;
             },
             emptyFunction,
             () => {
-                DocumentLinksButton.ClearLinkEditor();
-                LinkManager.FollowLink(this.props.linkDoc, this.props.sourceDoc, this.props.docView.props, false);
-            });
-    }
+                this.props.clearLinkEditor();
+                if (this.props.itemHandler) {
+                    this.props.itemHandler?.(this.props.linkDoc);
+                } else {
+                    const focusDoc =
+                        Cast(this.props.linkDoc.anchor1, Doc, null)?.annotationOn === this.props.sourceDoc
+                            ? Cast(this.props.linkDoc.anchor1, Doc, null)
+                            : Cast(this.props.linkDoc.anchor2, Doc, null)?.annotationOn === this.props.sourceDoc
+                            ? Cast(this.props.linkDoc.anchor12, Doc, null)
+                            : undefined;
+
+                    if (focusDoc) this.props.docView.ComponentView?.scrollFocus?.(focusDoc, true);
+                    LinkFollower.FollowLink(this.props.linkDoc, this.props.sourceDoc, this.props.docView.props, false);
+                }
+            }
+        );
+    };
 
     deleteLink = (e: React.PointerEvent): void => {
-        setupMoveUpEvents(this, e, returnFalse, emptyFunction, undoBatch(action(() => {
-            this.props.linkDoc.linksToAnnotation && Hypothesis.deleteLink(this.props.linkDoc, this.props.sourceDoc, this.props.destinationDoc);
-            LinkManager.Instance.deleteLink(this.props.linkDoc);
-        })));
-    }
+        setupMoveUpEvents(
+            this,
+            e,
+            returnFalse,
+            emptyFunction,
+            undoBatch(
+                action(() => {
+                    this.props.linkDoc.linksToAnnotation && Hypothesis.deleteLink(this.props.linkDoc, this.props.sourceDoc, this.props.destinationDoc);
+                    LinkManager.Instance.deleteLink(this.props.linkDoc);
+                })
+            )
+        );
+    };
 
     autoMove = (e: React.PointerEvent) => {
-        setupMoveUpEvents(this, e, returnFalse, emptyFunction, undoBatch(action(() => this.props.linkDoc.linkAutoMove = !this.props.linkDoc.linkAutoMove)));
-    }
+        setupMoveUpEvents(this, e, returnFalse, emptyFunction, undoBatch(action(() => (this.props.linkDoc.linkAutoMove = !this.props.linkDoc.linkAutoMove))));
+    };
 
     showLink = (e: React.PointerEvent) => {
-        setupMoveUpEvents(this, e, returnFalse, emptyFunction, undoBatch(action(() => this.props.linkDoc.linkDisplay = !this.props.linkDoc.linkDisplay)));
-    }
+        setupMoveUpEvents(this, e, returnFalse, emptyFunction, undoBatch(action(() => (this.props.linkDoc.linkDisplay = !this.props.linkDoc.linkDisplay))));
+    };
 
     showAnchor = (e: React.PointerEvent) => {
-        setupMoveUpEvents(this, e, returnFalse, emptyFunction, undoBatch(action(() => this.props.linkDoc.hidden = !this.props.linkDoc.hidden)));
-    }
+        setupMoveUpEvents(this, e, returnFalse, emptyFunction, undoBatch(action(() => (this.props.linkDoc.hidden = !this.props.linkDoc.hidden))));
+    };
 
     render() {
         const destinationIcon = Doc.toIcon(this.props.destinationDoc) as any as IconProp;
 
-        const title = StrCast(this.props.destinationDoc.title).length > 18 ?
-            StrCast(this.props.destinationDoc.title).substr(0, 14) + "..." : this.props.destinationDoc.title;
+        const title = StrCast(this.props.destinationDoc.title).length > 18 ? StrCast(this.props.destinationDoc.title).substr(0, 14) + '...' : this.props.destinationDoc.title;
 
         //  ...
         // from anika to bob: here's where the text that is specifically linked would show up (linkDoc.storedText)
         // ...
-        const source = this.props.sourceDoc.type === DocumentType.RTF ? this.props.linkDoc.storedText ?
-            StrCast(this.props.linkDoc.storedText).length > 17 ?
-                StrCast(this.props.linkDoc.storedText).substr(0, 18)
-                : this.props.linkDoc.storedText : undefined : undefined;
+        const source =
+            this.props.sourceDoc.type === DocumentType.RTF
+                ? this.props.linkDoc.storedText
+                    ? StrCast(this.props.linkDoc.storedText).length > 17
+                        ? StrCast(this.props.linkDoc.storedText).substr(0, 18)
+                        : this.props.linkDoc.storedText
+                    : undefined
+                : undefined;
 
         return (
             <div className="linkMenu-item">
-                <div className={"linkMenu-item-content expand-two"}>
-
-                    <div ref={this._drag} className="linkMenu-name" //title="drag to view target. click to customize."
+                <div className={'linkMenu-item-content expand-two'}>
+                    <div
+                        ref={this._drag}
+                        className="linkMenu-name" //title="drag to view target. click to customize."
                         onPointerLeave={LinkDocPreview.Clear}
-                        onPointerEnter={e => this.props.linkDoc && LinkDocPreview.SetLinkInfo({
-                            docProps: this.props.docView.props,
-                            linkSrc: this.props.sourceDoc,
-                            linkDoc: this.props.linkDoc,
-                            showHeader: false,
-                            location: [e.clientX, e.clientY + 20]
-                        })}
+                        onPointerEnter={e =>
+                            this.props.linkDoc &&
+                            LinkDocPreview.SetLinkInfo({
+                                docProps: this.props.docView.props,
+                                linkSrc: this.props.sourceDoc,
+                                linkDoc: this.props.linkDoc,
+                                showHeader: false,
+                                location: [e.clientX, e.clientY + 20],
+                            })
+                        }
                         onPointerDown={this.onLinkButtonDown}>
-
                         <div className="linkMenu-text">
-                            {source ? <p className="linkMenu-source-title"> <b>Source: {source}</b></p> : null}
+                            {source ? (
+                                <p className="linkMenu-source-title">
+                                    {' '}
+                                    <b>Source: {StrCast(source)}</b>
+                                </p>
+                            ) : null}
                             <div className="linkMenu-title-wrapper">
-                                <div className="destination-icon-wrapper" >
+                                <div className="destination-icon-wrapper">
                                     <FontAwesomeIcon className="destination-icon" icon={destinationIcon} size="sm" />
                                 </div>
                                 <p className="linkMenu-destination-title">
-                                    {this.props.linkDoc.linksToAnnotation && Cast(this.props.destinationDoc.data, WebField)?.url.href === this.props.linkDoc.annotationUri ? "Annotation in" : ""} {title}
+                                    {this.props.linkDoc.linksToAnnotation && Cast(this.props.destinationDoc.data, WebField)?.url.href === this.props.linkDoc.annotationUri ? 'Annotation in' : ''} {StrCast(title)}
                                 </p>
                             </div>
-                            {!this.props.linkDoc.description ? (null) : <p className="linkMenu-description">{StrCast(this.props.linkDoc.description)}</p>}
+                            {!this.props.linkDoc.description ? null : <p className="linkMenu-description">{StrCast(this.props.linkDoc.description)}</p>}
                         </div>
 
-                        <div className="linkMenu-item-buttons" ref={this._buttonRef} >
-
-                            <Tooltip title={<><div className="dash-tooltip">{this.props.linkDoc.hidden ? "Show Link Anchor" : "Hide Link Anchor"}</div></>}>
-                                <div className="button" ref={this._editRef} style={{ background: this.props.linkDoc.hidden ? "" : "#4476f7" /* $medium-blue */ }} onPointerDown={this.showAnchor} onClick={e => e.stopPropagation()}>
-                                    <FontAwesomeIcon className="fa-icon" icon={"eye"} size="sm" /></div>
+                        <div className="linkMenu-item-buttons" ref={this._buttonRef}>
+                            <Tooltip
+                                title={
+                                    <>
+                                        <div className="dash-tooltip">{this.props.linkDoc.hidden ? 'Show Link Anchor' : 'Hide Link Anchor'}</div>
+                                    </>
+                                }>
+                                <div className="button" ref={this._editRef} style={{ background: this.props.linkDoc.hidden ? '' : '#4476f7' /* $medium-blue */ }} onPointerDown={this.showAnchor} onClick={e => e.stopPropagation()}>
+                                    <FontAwesomeIcon className="fa-icon" icon={'eye'} size="sm" />
+                                </div>
                             </Tooltip>
 
-                            <Tooltip title={<><div className="dash-tooltip">{this.props.linkDoc.linkDisplay ? "Hide Link Line" : "Show Link Line"}</div></>}>
-                                <div className="button" ref={this._editRef} style={{ background: this.props.linkDoc.hidden ? "gray" : this.props.linkDoc.linkDisplay ? "#4476f7"/* $medium-blue */ : "" }} onPointerDown={this.showLink} onClick={e => e.stopPropagation()}>
-                                    <FontAwesomeIcon className="fa-icon" icon={"project-diagram"} size="sm" /></div>
+                            <Tooltip
+                                title={
+                                    <>
+                                        <div className="dash-tooltip">{this.props.linkDoc.linkDisplay ? 'Hide Link Line' : 'Show Link Line'}</div>
+                                    </>
+                                }>
+                                <div
+                                    className="button"
+                                    ref={this._editRef}
+                                    style={{ background: this.props.linkDoc.hidden ? 'gray' : this.props.linkDoc.linkDisplay ? '#4476f7' /* $medium-blue */ : '' }}
+                                    onPointerDown={this.showLink}
+                                    onClick={e => e.stopPropagation()}>
+                                    <FontAwesomeIcon className="fa-icon" icon={'project-diagram'} size="sm" />
+                                </div>
                             </Tooltip>
 
-                            <Tooltip title={<><div className="dash-tooltip">{this.props.linkDoc.linkAutoMove ? "Click to freeze link anchor position" : "Click to auto move link anchor"}</div></>}>
-                                <div className="button" ref={this._editRef} style={{ background: this.props.linkDoc.hidden ? "gray" : !this.props.linkDoc.linkAutoMove ? "" : "#4476f7" /* $medium-blue */ }} onPointerDown={this.autoMove} onClick={e => e.stopPropagation()}>
-                                    <FontAwesomeIcon className="fa-icon" icon={"play"} size="sm" /></div>
+                            <Tooltip
+                                title={
+                                    <>
+                                        <div className="dash-tooltip">{this.props.linkDoc.linkAutoMove ? 'Click to freeze link anchor position' : 'Click to auto move link anchor'}</div>
+                                    </>
+                                }>
+                                <div
+                                    className="button"
+                                    ref={this._editRef}
+                                    style={{ background: this.props.linkDoc.hidden ? 'gray' : !this.props.linkDoc.linkAutoMove ? '' : '#4476f7' /* $medium-blue */ }}
+                                    onPointerDown={this.autoMove}
+                                    onClick={e => e.stopPropagation()}>
+                                    <FontAwesomeIcon className="fa-icon" icon={'play'} size="sm" />
+                                </div>
                             </Tooltip>
 
-                            <Tooltip title={<><div className="dash-tooltip">Edit Link</div></>}>
+                            <Tooltip
+                                title={
+                                    <>
+                                        <div className="dash-tooltip">Edit Link</div>
+                                    </>
+                                }>
                                 <div className="button" ref={this._editRef} onPointerDown={this.onEdit} onClick={e => e.stopPropagation()}>
-                                    <FontAwesomeIcon className="fa-icon" icon="edit" size="sm" /></div>
+                                    <FontAwesomeIcon className="fa-icon" icon="edit" size="sm" />
+                                </div>
                             </Tooltip>
-                            <Tooltip title={<><div className="dash-tooltip">Delete Link</div></>}>
+                            <Tooltip
+                                title={
+                                    <>
+                                        <div className="dash-tooltip">Delete Link</div>
+                                    </>
+                                }>
                                 <div className="button" onPointerDown={this.deleteLink} onClick={e => e.stopPropagation()}>
-                                    <FontAwesomeIcon className="fa-icon" icon="trash" size="sm" /></div>
+                                    <FontAwesomeIcon className="fa-icon" icon="trash" size="sm" />
+                                </div>
                             </Tooltip>
                         </div>
                     </div>
                 </div>
-
-            </div >
+            </div>
         );
     }
-}
\ No newline at end of file
+}
diff --git a/src/client/views/linking/LinkPopup.tsx b/src/client/views/linking/LinkPopup.tsx
index c8be9069c..0bcb68f82 100644
--- a/src/client/views/linking/LinkPopup.tsx
+++ b/src/client/views/linking/LinkPopup.tsx
@@ -1,17 +1,16 @@
 import { action, observable } from 'mobx';
-import { observer } from "mobx-react";
+import { observer } from 'mobx-react';
 import { EditorView } from 'prosemirror-view';
+import { Doc } from '../../../fields/Doc';
 import { emptyFunction, returnEmptyDoclist, returnEmptyFilter, returnFalse, returnTrue } from '../../../Utils';
 import { DocUtils } from '../../documents/Documents';
-import { CurrentUserUtils } from '../../util/CurrentUserUtils';
 import { Transform } from '../../util/Transform';
 import { undoBatch } from '../../util/UndoManager';
 import { FormattedTextBox } from '../nodes/formattedText/FormattedTextBox';
 import { SearchBox } from '../search/SearchBox';
 import { DefaultStyleProvider } from '../StyleProvider';
 import './LinkPopup.scss';
-import React = require("react");
-import { Doc, Opt } from '../../../fields/Doc';
+import React = require('react');
 
 interface LinkPopupProps {
     showPopup: boolean;
@@ -23,33 +22,30 @@ interface LinkPopupProps {
 }
 
 /**
- * Popup component for creating links from text to Dash documents 
+ * Popup component for creating links from text to Dash documents
  */
 
 @observer
 export class LinkPopup extends React.Component<LinkPopupProps> {
-    @observable private linkURL: string = "";
+    @observable private linkURL: string = '';
     @observable public view?: EditorView;
 
-
-
     // TODO: should check for valid URL
     @undoBatch
     makeLinkToURL = (target: string, lcoation: string) => {
-        ((this.view as any)?.TextView as FormattedTextBox).makeLinkAnchor(undefined, "onRadd:rightight", target, target);
-    }
+        ((this.view as any)?.TextView as FormattedTextBox).makeLinkAnchor(undefined, 'onRadd:rightight', target, target);
+    };
 
     @action
     onLinkChange = (e: React.ChangeEvent<HTMLInputElement>) => {
         this.linkURL = e.target.value;
-    }
-
+    };
 
     getPWidth = () => 500;
     getPHeight = () => 500;
 
     render() {
-        const popupVisibility = this.props.showPopup ? "block" : "none";
+        const popupVisibility = this.props.showPopup ? 'block' : 'none';
         const linkDoc = this.props.linkFrom ? this.props.linkFrom : undefined;
         return (
             <div className="linkPopup-container" style={{ display: popupVisibility }}>
@@ -67,9 +63,9 @@ export class LinkPopup extends React.Component<LinkPopupProps> {
                     <input defaultValue={""} autoComplete="off" type="text" placeholder="Search for Document..." id="search-input"
                         className="linkPopup-searchBox searchBox-input" /> */}
 
-                    <SearchBox 
-                        Document={CurrentUserUtils.MySearchPanelDoc}
-                        DataDoc={CurrentUserUtils.MySearchPanelDoc}
+                    <SearchBox
+                        Document={Doc.MySearcher}
+                        DataDoc={Doc.MySearcher}
                         linkFrom={linkDoc}
                         linkSearch={true}
                         fieldKey="data"
@@ -83,7 +79,6 @@ export class LinkPopup extends React.Component<LinkPopupProps> {
                         pinToPres={emptyFunction}
                         rootSelected={returnTrue}
                         styleProvider={DefaultStyleProvider}
-                        layerProvider={undefined}
                         removeDocument={undefined}
                         ScreenToLocalTransform={Transform.Identity}
                         PanelWidth={this.getPWidth}
@@ -97,9 +92,10 @@ export class LinkPopup extends React.Component<LinkPopupProps> {
                         docRangeFilters={returnEmptyFilter}
                         searchFilterDocs={returnEmptyDoclist}
                         ContainingCollectionView={undefined}
-                        ContainingCollectionDoc={undefined} />
+                        ContainingCollectionDoc={undefined}
+                    />
                 </div>
             </div>
         );
     }
-}
\ No newline at end of file
+}