uses linkMenu in propertiesWindow now. updated linkMenu api, changed layout, made groups collapsible

10 files changed, 64 insertions, 31 deletions

diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx
index 5e68832fc..a67cb3014 100644
--- a/src/client/views/MainView.tsx
+++ b/src/client/views/MainView.tsx
@@ -631,7 +631,7 @@ export class MainView extends React.Component {
             <ComponentDecorations boundsLeft={this.leftScreenOffsetOfMainDocView} boundsTop={this.topOfMainDocContent} />
             {this.topbar}
             {LinkDescriptionPopup.descriptionPopup ? <LinkDescriptionPopup /> : null}
-            {DocumentLinksButton.LinkEditorDocView ? <LinkMenu docView={DocumentLinksButton.LinkEditorDocView} changeFlyout={emptyFunction} /> : (null)}
+            {DocumentLinksButton.LinkEditorDocView ? <LinkMenu docView={DocumentLinksButton.LinkEditorDocView} /> : (null)}
             {LinkDocPreview.LinkInfo ? <LinkDocPreview {...LinkDocPreview.LinkInfo} /> : (null)}
             <div style={{ position: "relative", display: LightboxView.LightboxDoc ? "none" : undefined, zIndex: 2001 }} >
                 <CollectionMenu panelWidth={this.topMenuWidth} panelHeight={this.topMenuHeight} />
diff --git a/src/client/views/PropertiesDocBacklinksSelector.scss b/src/client/views/PropertiesDocBacklinksSelector.scss
new file mode 100644
index 000000000..4d2a61c3b
--- /dev/null
+++ b/src/client/views/PropertiesDocBacklinksSelector.scss
@@ -0,0 +1,5 @@
+.propertiesView-contexts-content {
+    .linkMenu {
+        position: relative;
+    }
+}
\ No newline at end of file
diff --git a/src/client/views/PropertiesDocBacklinksSelector.tsx b/src/client/views/PropertiesDocBacklinksSelector.tsx
index ea0d90e04..082492671 100644
--- a/src/client/views/PropertiesDocBacklinksSelector.tsx
+++ b/src/client/views/PropertiesDocBacklinksSelector.tsx
@@ -2,10 +2,12 @@ import { computed } from "mobx";
 import { observer } from "mobx-react";
 import * as React from "react";
 import { Doc, DocListCast } from "../../fields/Doc";
-import { Id } from "../../fields/FieldSymbols";
-import { Cast, NumCast, StrCast } from "../../fields/Types";
+import { Cast } from "../../fields/Types";
+import { DocumentType } from "../documents/DocumentTypes";
 import { LinkManager } from "../util/LinkManager";
-import './PropertiesDocContextSelector.scss';
+import { SelectionManager } from "../util/SelectionManager";
+import { LinkMenu } from "./linking/LinkMenu";
+import './PropertiesDocBacklinksSelector.scss';
 
 type PropertiesDocBacklinksSelectorProps = {
     Document: Doc,
@@ -22,7 +24,7 @@ export class PropertiesDocBacklinksSelector extends React.Component<PropertiesDo
         const collectedLinks = [] as Doc[];
         links.map(link => {
             const other = LinkManager.getOppositeAnchor(link, linkSource);
-            const otherdoc = !other ? undefined : other.annotationOn ? Cast(other.annotationOn, Doc, null) : other;
+            const otherdoc = !other ? undefined : other.annotationOn && other.type !== DocumentType.RTF ? Cast(other.annotationOn, Doc, null) : other;
             if (otherdoc && !collectedLinks.some(d => Doc.AreProtosEqual(d, otherdoc))) {
                 collectedLinks.push(otherdoc);
             }
@@ -30,15 +32,20 @@ export class PropertiesDocBacklinksSelector extends React.Component<PropertiesDo
         return collectedLinks;
     }
 
-    getOnClick = (col: Doc) => {
-        col = Doc.IsPrototype(col) ? Doc.MakeDelegate(col) : col;
-        this.props.addDocTab(col, "toggle:right");
+    getOnClick = (link: Doc) => {
+        const linkSource = this.props.Document;
+        const other = LinkManager.getOppositeAnchor(link, linkSource);
+        const otherdoc = !other ? undefined : other.annotationOn && other.type !== DocumentType.RTF ? Cast(other.annotationOn, Doc, null) : other;
+
+        if (otherdoc) {
+            this.props.addDocTab(Doc.IsPrototype(otherdoc) ? Doc.MakeDelegate(otherdoc) : otherdoc, "toggle:right");
+        }
     }
 
     render() {
-        return <div>
+        return !SelectionManager.Views().length ? (null) : <div>
             {this.props.hideTitle ? (null) : <p key="contexts">Contexts:</p>}
-            {this._docs.map(doc => <p key={doc[Id]}><a onClick={() => this.getOnClick(doc)}>{StrCast(doc.title)}</a></p>)}
+            <LinkMenu docView={SelectionManager.Views().lastElement()} itemHandler={this.getOnClick} position={{ x: 0 }} />
         </div>;
     }
 }
\ No newline at end of file
diff --git a/src/client/views/SidebarAnnos.tsx b/src/client/views/SidebarAnnos.tsx
index 62f6e388f..fae385660 100644
--- a/src/client/views/SidebarAnnos.tsx
+++ b/src/client/views/SidebarAnnos.tsx
@@ -61,7 +61,7 @@ export class SidebarAnnos extends React.Component<FieldViewProps & ExtraProps> {
         FormattedTextBox.SelectOnLoad = target[Id];
         FormattedTextBox.DontSelectInitialText = true;
         this.allMetadata.map(tag => target[tag] = tag);
-        DocUtils.MakeLink({ doc: anchor }, { doc: target }, "inline markup", "annotation");
+        DocUtils.MakeLink({ doc: anchor }, { doc: target }, "inline markup");
         this.addDocument(target);
         this._stackRef.current?.focusDocument(target);
     }
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..bc922be36 100644
--- a/src/client/views/linking/LinkMenu.tsx
+++ b/src/client/views/linking/LinkMenu.tsx
@@ -12,7 +12,8 @@ import React = require("react");
 
 interface Props {
     docView: DocumentView;
-    changeFlyout: () => void;
+    position?: { x?: number, y?: number };
+    itemHandler?: (doc: Doc) => void;
 }
 
 /**
@@ -25,7 +26,7 @@ export class LinkMenu extends React.Component<Props> {
     @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); }
@@ -48,19 +49,20 @@ export class LinkMenu extends React.Component<Props> {
         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)} />);
 
-        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 }}
+            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">
diff --git a/src/client/views/linking/LinkMenuGroup.tsx b/src/client/views/linking/LinkMenuGroup.tsx
index 03377ad4e..5b1e29e67 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";
@@ -14,6 +15,7 @@ interface LinkMenuGroupProps {
     groupType: string;
     showEditor: (linkDoc: Doc) => void;
     docView: DocumentView;
+    itemHandler?: (doc: Doc) => void;
 }
 
 @observer
@@ -36,6 +38,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,6 +47,7 @@ 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}
@@ -55,12 +60,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..d6400a6b3 100644
--- a/src/client/views/linking/LinkMenuItem.tsx
+++ b/src/client/views/linking/LinkMenuItem.tsx
@@ -1,12 +1,12 @@
 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 { 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';
@@ -14,11 +14,10 @@ import { Hypothesis } from '../../util/HypothesisUtils';
 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';
 
 
 interface LinkMenuItemProps {
@@ -29,6 +28,7 @@ interface LinkMenuItemProps {
     destinationDoc: Doc;
     showEditor: (linkDoc: Doc) => void;
     menuRef: React.Ref<HTMLDivElement>;
+    itemHandler?: (doc: Doc) => void;
 }
 
 // drag links and drop link targets (aliasing them if needed)
@@ -98,7 +98,12 @@ export class LinkMenuItem extends React.Component<LinkMenuItemProps> {
             emptyFunction,
             () => {
                 DocumentLinksButton.ClearLinkEditor();
-                LinkManager.FollowLink(this.props.linkDoc, this.props.sourceDoc, this.props.docView.props, false);
+                if (this.props.itemHandler) {
+
+                    this.props.itemHandler?.(this.props.linkDoc);
+                } else {
+                    LinkManager.FollowLink(this.props.linkDoc, this.props.sourceDoc, this.props.docView.props, false);
+                }
             });
     }
 
diff --git a/src/client/views/nodes/LinkDocPreview.tsx b/src/client/views/nodes/LinkDocPreview.tsx
index 7637d39be..f5f773595 100644
--- a/src/client/views/nodes/LinkDocPreview.tsx
+++ b/src/client/views/nodes/LinkDocPreview.tsx
@@ -46,7 +46,7 @@ export class LinkDocPreview extends React.Component<LinkDocPreviewProps> {
         if (anchor1 && anchor2) {
             linkTarget = Doc.AreProtosEqual(anchor1, this._linkSrc) || Doc.AreProtosEqual(anchor1?.annotationOn as Doc, this._linkSrc) ? anchor2 : anchor1;
         }
-        if (linkTarget?.annotationOn) {
+        if (linkTarget?.annotationOn && linkTarget?.type !== DocumentType.RTF) { // want to show annotation context document if annotation is not text
             linkTarget && DocCastAsync(linkTarget.annotationOn).then(action(anno => this._targetDoc = anno));
         } else {
             this._targetDoc = linkTarget;