From 17b27d3575d3f91f461262e5ad72a457238d198a Mon Sep 17 00:00:00 2001
From: ab <abdullah_ahmed@brown.edu>
Date: Wed, 7 Aug 2019 16:28:51 -0400
Subject: correlation matrix completed

---
 src/client/views/MainView.tsx | 7 +++++++
 1 file changed, 7 insertions(+)

(limited to 'src/client/views/MainView.tsx')

diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx
index 2ecf5fd85..97964166a 100644
--- a/src/client/views/MainView.tsx
+++ b/src/client/views/MainView.tsx
@@ -39,6 +39,7 @@ import { FilterBox } from './search/FilterBox';
 import { CollectionTreeView } from './collections/CollectionTreeView';
 import { ClientUtils } from '../util/ClientUtils';
 import { SchemaHeaderField, RandomPastel } from '../../new_fields/SchemaHeaderField';
+//import { DocumentManager } from '../util/DocumentManager';
 
 @observer
 export class MainView extends React.Component {
@@ -435,6 +436,12 @@ export class MainView extends React.Component {
         </div >;
     }
 
+    // clusterDocuments = () => {
+    //     DocumentManager.Instance.DocumentViews();
+    // }
+
+
+
 
 
     @action
-- 
cgit v1.2.3-70-g09d2


From e03a1b2cc90e0fdb7789f4826e482e9040aa7075 Mon Sep 17 00:00:00 2001
From: ab <abdullah_ahmed@brown.edu>
Date: Tue, 13 Aug 2019 17:26:49 -0400
Subject: 80% done, garbage collection is much needed

---
 src/Recommendations.scss                           |  21 ---
 src/Recommendations.tsx                            |  28 ----
 src/client/util/SearchUtil.ts                      |   7 +-
 src/client/views/MainView.tsx                      |   2 +
 src/client/views/Recommendations.scss              |  65 ++++++++
 src/client/views/Recommendations.tsx               | 169 +++++++++++++++++++++
 .../collectionFreeForm/CollectionFreeFormView.tsx  |  13 +-
 src/client/views/nodes/DocumentView.tsx            |  34 ++++-
 src/client/views/nodes/ImageBox.tsx                |  21 ++-
 9 files changed, 297 insertions(+), 63 deletions(-)
 delete mode 100644 src/Recommendations.scss
 delete mode 100644 src/Recommendations.tsx
 create mode 100644 src/client/views/Recommendations.scss
 create mode 100644 src/client/views/Recommendations.tsx

(limited to 'src/client/views/MainView.tsx')

diff --git a/src/Recommendations.scss b/src/Recommendations.scss
deleted file mode 100644
index 5129a59d9..000000000
--- a/src/Recommendations.scss
+++ /dev/null
@@ -1,21 +0,0 @@
-.recommendation-content *{
-    display: inline-block;
-    margin: auto;
-    border: 1px dashed grey;
-    padding: 2px 2px;
-}
-
-.recommendation-content {
-    float: left;
-    border: 1px solid green;
-    width: 200px;
-    align-content: center;
-}
-
-.rec-scroll {
-    overflow-y: scroll;
-    height: 300px; 
-    width: auto;
-    position: absolute;
-    background: #cdcdcd;
-}
\ No newline at end of file
diff --git a/src/Recommendations.tsx b/src/Recommendations.tsx
deleted file mode 100644
index ca1123ef9..000000000
--- a/src/Recommendations.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-import { observer } from "mobx-react";
-import React = require("react");
-import { Doc } from "./new_fields/Doc";
-import { NumCast } from "./new_fields/Types";
-
-export interface RecProps {
-    documents: { preview: string, similarity: number }[],
-    node: Doc;
-}
-
-@observer
-export class Recommendations extends React.Component<RecProps> {
-    render() {
-        const transform = "translate(" + (NumCast(this.props.node.x) + 350) + "px, " + NumCast(this.props.node.y) + "px"
-        return (
-            <div className="rec-scroll" style={{ transform: transform }}>
-                {this.props.documents.map(doc => {
-                    return (
-                        <div className="recommendation-content">
-                            <img src={doc.preview} />
-                            <div>{doc.similarity}</div>
-                        </div>
-                    )
-                })}
-            </div>
-        )
-    }
-}
\ No newline at end of file
diff --git a/src/client/util/SearchUtil.ts b/src/client/util/SearchUtil.ts
index 1fce995d7..85e593529 100644
--- a/src/client/util/SearchUtil.ts
+++ b/src/client/util/SearchUtil.ts
@@ -81,12 +81,13 @@ export namespace SearchUtil {
     export async function GetAllDocs() {
         const query = "*";
         let response = await rp.get(Utils.prepend('/search'), {
-            qs: {
-                q: query
-            }
+            qs:
+                { start: 0, rows: 10000, q: query },
+
         });
         let result: IdSearchResult = JSON.parse(response);
         const { ids, numFound, highlighting } = result;
+        console.log(ids.length);
         const docMap = await DocServer.GetRefFields(ids);
         const docs: Doc[] = [];
         for (const id of ids) {
diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx
index 419b15697..0b6fe3876 100644
--- a/src/client/views/MainView.tsx
+++ b/src/client/views/MainView.tsx
@@ -41,6 +41,7 @@ import { ClientUtils } from '../util/ClientUtils';
 import { SchemaHeaderField, RandomPastel } from '../../new_fields/SchemaHeaderField';
 //import { DocumentManager } from '../util/DocumentManager';
 import { DictationManager } from '../util/DictationManager';
+import { Recommendations } from './Recommendations';
 
 @observer
 export class MainView extends React.Component {
@@ -581,6 +582,7 @@ export class MainView extends React.Component {
                 {this.mainContent}
                 <PreviewCursor />
                 <ContextMenu />
+                <Recommendations />
                 {this.nodesMenu()}
                 {this.miscButtons}
                 <PDFMenu />
diff --git a/src/client/views/Recommendations.scss b/src/client/views/Recommendations.scss
new file mode 100644
index 000000000..5d8f17e37
--- /dev/null
+++ b/src/client/views/Recommendations.scss
@@ -0,0 +1,65 @@
+@import "globalCssVariables";
+
+.rec-content *{
+    display: inline-block;
+    margin: auto;
+    width: 50;
+    height: 30px;
+    border: 1px dashed grey;
+    padding: 10px 10px;
+}
+
+.rec-content {
+    float: left;
+    width: inherit;
+    align-content: center;
+}
+
+.rec-scroll {
+    overflow-y: scroll;
+    overflow-x: hidden;
+    position: absolute;
+    // display: flex;
+    z-index: 10000;
+    box-shadow: gray 0.2vw 0.2vw 0.4vw;
+    // flex-direction: column;
+    background: whitesmoke;
+    padding-bottom: 10px;
+    border-radius: 15px;
+    border: solid #BBBBBBBB 1px;
+    width: 200px;
+    text-align: center;
+    max-height: 250px;
+    text-transform: uppercase;
+    color: grey;
+    letter-spacing: 2px;
+}
+
+.content {
+    padding: 10px;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+}
+
+.image-background {
+    pointer-events: none;
+    background-color: transparent;
+    width: 50%;
+    text-align: center;
+    height: 35px;
+    margin-left: 5px;
+}
+
+img{
+    width: 100%;
+    height: 100%;
+}
+
+.score {
+    // margin-left: 15px;
+    width: 50%;
+    height: 100%;
+    text-align: center;
+}
diff --git a/src/client/views/Recommendations.tsx b/src/client/views/Recommendations.tsx
new file mode 100644
index 000000000..8569996b3
--- /dev/null
+++ b/src/client/views/Recommendations.tsx
@@ -0,0 +1,169 @@
+import { observer } from "mobx-react";
+import React = require("react");
+import { observable, action } from "mobx";
+import Measure from "react-measure";
+import "./Recommendations.scss";
+import { Doc, DocListCast, WidthSym, HeightSym } from "../../new_fields/Doc";
+import { DocumentIcon } from "./nodes/DocumentIcon";
+import { StrCast, NumCast } from "../../new_fields/Types";
+import { returnFalse, emptyFunction, returnEmptyString, returnOne } from "../../Utils";
+import { Transform } from "../util/Transform";
+import { ObjectField } from "../../new_fields/ObjectField";
+import { DocumentView } from "./nodes/DocumentView";
+import { DocumentType } from "../documents/Documents";
+
+
+export interface RecProps {
+    documents: { preview: Doc, similarity: number }[];
+    node: Doc;
+}
+
+@observer
+export class Recommendations extends React.Component<{}> {
+
+    static Instance: Recommendations;
+    @observable private _display: boolean = false;
+    @observable private _pageX: number = 0;
+    @observable private _pageY: number = 0;
+    @observable private _width: number = 0;
+    @observable private _height: number = 0;
+    @observable private _documents: { preview: Doc, score: number }[] = [];
+
+    constructor(props: {}) {
+        super(props);
+        Recommendations.Instance = this;
+    }
+
+    private DocumentIcon(doc: Doc) {
+        let layoutresult = StrCast(doc.type);
+        let renderDoc = doc;
+        //let box: number[] = [];
+        if (layoutresult.indexOf(DocumentType.COL) !== -1) {
+            renderDoc = Doc.MakeDelegate(renderDoc);
+            let bounds = DocListCast(renderDoc.data).reduce((bounds, doc) => {
+                var [sptX, sptY] = [NumCast(doc.x), NumCast(doc.y)];
+                let [bptX, bptY] = [sptX + doc[WidthSym](), sptY + doc[HeightSym]()];
+                return {
+                    x: Math.min(sptX, bounds.x), y: Math.min(sptY, bounds.y),
+                    r: Math.max(bptX, bounds.r), b: Math.max(bptY, bounds.b)
+                };
+            }, { x: Number.MAX_VALUE, y: Number.MAX_VALUE, r: Number.MIN_VALUE, b: Number.MIN_VALUE });
+        }
+        let returnXDimension = () => 50;
+        let returnYDimension = () => 50;
+        let scale = () => returnXDimension() / NumCast(renderDoc.nativeWidth, returnXDimension());
+        let newRenderDoc = Doc.MakeDelegate(renderDoc); ///   newRenderDoc -> renderDoc -> render"data"Doc -> TextProt
+        const docview = <div>
+            {/* onPointerDown={action(() => {
+                this._useIcons = !this._useIcons;
+                this._displayDim = this._useIcons ? 50 : Number(SEARCH_THUMBNAIL_SIZE);
+            })}
+            onPointerEnter={action(() => this._displayDim = this._useIcons ? 50 : Number(SEARCH_THUMBNAIL_SIZE))}
+            onPointerLeave={action(() => this._displayDim = 50)} > */}
+            <DocumentView
+                fitToBox={StrCast(doc.type).indexOf(DocumentType.COL) !== -1}
+                Document={doc}
+                addDocument={returnFalse}
+                removeDocument={returnFalse}
+                ScreenToLocalTransform={Transform.Identity}
+                addDocTab={returnFalse}
+                renderDepth={1}
+                PanelWidth={returnXDimension}
+                PanelHeight={returnYDimension}
+                focus={emptyFunction}
+                backgroundColor={returnEmptyString}
+                selectOnLoad={false}
+                parentActive={returnFalse}
+                whenActiveChanged={returnFalse}
+                bringToFront={emptyFunction}
+                zoomToScale={emptyFunction}
+                getScale={returnOne}
+                ContainingCollectionView={undefined}
+                ContentScaling={scale}
+            />
+        </div>;
+        const data = renderDoc.data;
+        if (data instanceof ObjectField) newRenderDoc.data = ObjectField.MakeCopy(data);
+        newRenderDoc.preview = true;
+        return docview;
+
+    }
+
+    @action
+    closeMenu = () => {
+        this._display = false;
+    }
+
+    @action
+    resetDocuments = () => {
+        this._documents = [];
+    }
+
+    @action
+    addDocuments = (documents: { preview: Doc, score: number }[]) => {
+        this._documents = documents;
+    }
+
+    @action
+    displayRecommendations(x: number, y: number) {
+        this._pageX = x;
+        this._pageY = y;
+        this._display = true;
+    }
+
+    static readonly buffer = 20;
+
+    get pageX() {
+        const x = this._pageX;
+        if (x < 0) {
+            return 0;
+        }
+        const width = this._width;
+        if (x + width > window.innerWidth - Recommendations.buffer) {
+            return window.innerWidth - Recommendations.buffer - width;
+        }
+        return x;
+    }
+
+    get pageY() {
+        const y = this._pageY;
+        if (y < 0) {
+            return 0;
+        }
+        const height = this._height;
+        if (y + height > window.innerHeight - Recommendations.buffer) {
+            return window.innerHeight - Recommendations.buffer - height;
+        }
+        return y;
+    }
+
+    render() {
+        if (!this._display) {
+            return null;
+        }
+        let style = { left: this.pageX, top: this.pageY };
+        //const transform = "translate(" + (NumCast(this.props.node.x) + 350) + "px, " + NumCast(this.props.node.y) + "px"
+        return (
+            <Measure offset onResize={action((r: any) => { this._width = r.offset.width; this._height = r.offset.height; })}>
+                {({ measureRef }) => (
+                    <div className="rec-scroll" style={style} ref={measureRef}>
+                        <p>Recommendations</p>
+                        {this._documents.map(doc => {
+                            return (
+                                <div className="content">
+                                    <span className="image-background">
+                                        {this.DocumentIcon(doc.preview)}
+                                    </span>
+                                    <span className="score">{doc.score}</span>
+                                </div>
+                            );
+                        })}
+
+                    </div>
+                )
+                }
+
+            </Measure>
+        );
+    }
+}
\ No newline at end of file
diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
index d1e8031fd..50f7e2dc8 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
@@ -896,10 +896,13 @@ export class CollectionFreeFormView extends CollectionSubView(PanZoomDocument) {
                 allDocs.forEach(doc => console.log(doc.title));
                 // clears internal representation of documents as vectors
                 ClientRecommender.Instance.reset_docs();
-                await Promise.all(activedocs.map((doc: Doc) => {
-                    //console.log(StrCast(doc.title));
-                    const extdoc = doc.data_ext as Doc;
-                    return ClientRecommender.Instance.extractText(doc, extdoc ? extdoc : doc);
+                await Promise.all(allDocs.map((doc: Doc) => {
+                    console.log(StrCast(doc.title));
+                    if (doc.type === DocumentType.IMG) {
+                        console.log(doc.title);
+                        const extdoc = doc.data_ext as Doc;
+                        return ClientRecommender.Instance.extractText(doc, extdoc ? extdoc : doc);
+                    }
                 }));
                 console.log(ClientRecommender.Instance.createDistanceMatrix());
             },
@@ -1013,7 +1016,7 @@ class CollectionFreeFormViewPannableContents extends React.Component<CollectionF
         const zoom = this.props.zoomScaling();// needs to be a variable outside of the <Measure> otherwise, reactions won't fire
         return <div className={freeformclass} style={{ borderRadius: "inherit", transform: `translate(${cenx}px, ${ceny}px) scale(${zoom}, ${zoom}) translate(${panx}px, ${pany}px)` }}>
             {this.props.children}
-            <ClientRecommender title="Distance Matrix" />
+            {/* <ClientRecommender title="Distance Matrix" /> */}
         </div>;
     }
 }
\ No newline at end of file
diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index 24bcc0217..3ce4dbd4f 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -40,9 +40,13 @@ import React = require("react");
 import { DictationManager } from '../../util/DictationManager';
 import { MainView } from '../MainView';
 import requestPromise = require('request-promise');
-import { Recommendations } from '../../../Recommendations';
+import { Recommendations } from '../Recommendations';
+import { SearchUtil } from '../../util/SearchUtil';
+import { ClientRecommender } from '../../ClientRecommender';
+import { DocumentType } from '../../documents/Documents';
 const JsxParser = require('react-jsx-parser').default; //TODO Why does this need to be imported like this?
 
+library.add(fa.faBrain);
 library.add(fa.faTrash);
 library.add(fa.faShare);
 library.add(fa.faDownload);
@@ -610,6 +614,33 @@ export class DocumentView extends DocComponent<DocumentViewProps, Document>(Docu
                 a.click();
             }
         });
+        cm.addItem({
+            description: "Recommender System",
+            event: async () => {
+                if (!ClientRecommender.Instance) new ClientRecommender({ title: "Client Recommender" });
+                let documents: Doc[] = [];
+                let allDocs = await SearchUtil.GetAllDocs();
+                allDocs.forEach(doc => console.log(doc.title));
+                // clears internal representation of documents as vectors
+                ClientRecommender.Instance.reset_docs();
+                await Promise.all(allDocs.map((doc: Doc) => {
+                    if (doc.type === DocumentType.IMG) {
+                        console.log(StrCast(doc.title));
+                        documents.push(doc);
+                        const extdoc = doc.data_ext as Doc;
+                        return ClientRecommender.Instance.extractText(doc, extdoc ? extdoc : doc);
+                    }
+                }));
+                console.log(ClientRecommender.Instance.createDistanceMatrix());
+                let recDocs: { preview: Doc, score: number }[] = [];
+                for (let i = 0; i < documents.length; i++) {
+                    recDocs.push({ preview: documents[i], score: i });
+                }
+                Recommendations.Instance.addDocuments(recDocs);
+                Recommendations.Instance.displayRecommendations(e.pageX + 100, e.pageY);
+            },
+            icon: "brain"
+        });
         cm.addItem({ description: "Delete", event: this.deleteClicked, icon: "trash" });
         type User = { email: string, userDocumentId: string };
         let usersMenu: ContextMenuProps[] = [];
@@ -758,7 +789,6 @@ export class DocumentView extends DocComponent<DocumentViewProps, Document>(Docu
                         </div>
                     }
                 </div>
-                <Recommendations documents={documents} node={this.props.Document}></Recommendations>
             </div>
         );
     }
diff --git a/src/client/views/nodes/ImageBox.tsx b/src/client/views/nodes/ImageBox.tsx
index 73b892e26..45d389ba6 100644
--- a/src/client/views/nodes/ImageBox.tsx
+++ b/src/client/views/nodes/ImageBox.tsx
@@ -28,6 +28,9 @@ import FaceRectangles from './FaceRectangles';
 import { FieldView, FieldViewProps } from './FieldView';
 import "./ImageBox.scss";
 import React = require("react");
+import { SearchUtil } from '../../util/SearchUtil';
+import { ClientRecommender } from '../../ClientRecommender';
+import { DocumentType } from '../../documents/Documents';
 var requestImageSize = require('../../util/request-image-size');
 var path = require('path');
 const { Howl } = require('howler');
@@ -240,10 +243,20 @@ export class ImageBox extends DocComponent<FieldViewProps, ImageDocument>(ImageD
         }
     }
 
-    extractText = () => {
-        //Recommender.Instance.extractText(this.dataDoc, this.extensionDoc);
-        // request recommender 
-        //fetch(Utils.prepend("/recommender"), { body: body, method: "POST", headers: { "content-type": "application/json" } }).then((value) => console.log(value));
+    extractText = async () => {
+        //let activedocs = this.getActiveDocuments();
+        let allDocs = await SearchUtil.GetAllDocs();
+        allDocs.forEach(doc => console.log(doc.title));
+        // clears internal representation of documents as vectors
+        ClientRecommender.Instance.reset_docs();
+        await Promise.all(allDocs.map((doc: Doc) => {
+            //console.log(StrCast(doc.title));
+            if (doc.type === DocumentType.IMG) {
+                const extdoc = doc.data_ext as Doc;
+                return ClientRecommender.Instance.extractText(doc, extdoc ? extdoc : doc);
+            }
+        }));
+        console.log(ClientRecommender.Instance.createDistanceMatrix());
     }
 
     generateMetadata = (threshold: Confidence = Confidence.Excellent) => {
-- 
cgit v1.2.3-70-g09d2


From e0bfe978e029268b3901b5d098f946b1a6fc7d0d Mon Sep 17 00:00:00 2001
From: ab <abdullah_ahmed@brown.edu>
Date: Thu, 29 Aug 2019 18:43:32 -0400
Subject: ui fixes, datadoc resolved

---
 src/client/ClientRecommender.tsx                   | 83 +++++++++++++++-------
 src/client/cognitive_services/CognitiveServices.ts | 24 ++++---
 src/client/views/MainView.tsx                      |  1 +
 src/client/views/Recommendations.tsx               | 21 ++++--
 .../collectionFreeForm/CollectionFreeFormView.tsx  | 21 ------
 src/client/views/nodes/DocumentView.tsx            | 26 ++++---
 src/client/views/nodes/ImageBox.tsx                | 16 -----
 7 files changed, 104 insertions(+), 88 deletions(-)

(limited to 'src/client/views/MainView.tsx')

diff --git a/src/client/ClientRecommender.tsx b/src/client/ClientRecommender.tsx
index 63f85c737..a6d1a32b3 100644
--- a/src/client/ClientRecommender.tsx
+++ b/src/client/ClientRecommender.tsx
@@ -1,5 +1,5 @@
 import { Doc } from "../new_fields/Doc";
-import { StrCast } from "../new_fields/Types";
+import { StrCast, Cast } from "../new_fields/Types";
 import { List } from "../new_fields/List";
 import { CognitiveServices } from "./cognitive_services/CognitiveServices";
 import React = require("react");
@@ -8,30 +8,42 @@ import { observable, action, computed, reaction } from "mobx";
 var assert = require('assert');
 import "./ClientRecommender.scss";
 import { JSXElement } from "babel-types";
+import { ToPlainText, RichTextField } from "../new_fields/RichTextField";
 
 export interface RecommenderProps {
     title: string;
 }
 
+export interface RecommenderDocument {
+    actualDoc: Doc;
+    vectorDoc: number[];
+    score: number;
+}
+
 @observer
 export class ClientRecommender extends React.Component<RecommenderProps> {
 
     static Instance: ClientRecommender;
-    private docVectors: Set<number[]>;
+    private mainDoc?: RecommenderDocument;
+    private docVectors: Set<RecommenderDocument> = new Set();
     @observable private corr_matrix = [[0, 0], [0, 0]];
 
     constructor(props: RecommenderProps) {
         //console.log("creating client recommender...");
         super(props);
         if (!ClientRecommender.Instance) ClientRecommender.Instance = this;
-        this.docVectors = new Set<number[]>();
-        //this.corr_matrix = [[0, 0], [0, 0]];
+        ClientRecommender.Instance.docVectors = new Set();
+        //ClientRecommender.Instance.corr_matrix = [[0, 0], [0, 0]];
     }
 
     @action
     public reset_docs() {
-        this.docVectors = new Set();
-        this.corr_matrix = [[0, 0], [0, 0]];
+        ClientRecommender.Instance.docVectors = new Set();
+        ClientRecommender.Instance.corr_matrix = [[0, 0], [0, 0]];
+    }
+
+    public deleteDocs() {
+        console.log("deleting previews...");
     }
 
     /***
@@ -67,11 +79,24 @@ export class ClientRecommender extends React.Component<RecommenderProps> {
         }
     }
 
+    public computeSimilarities() {
+        ClientRecommender.Instance.docVectors.forEach((doc: RecommenderDocument) => {
+            if (ClientRecommender.Instance.mainDoc) {
+                const distance = ClientRecommender.Instance.distance(ClientRecommender.Instance.mainDoc.vectorDoc, doc.vectorDoc, "euclidian");
+                doc.score = distance;
+            }
+        }
+        );
+        let doclist = Array.from(ClientRecommender.Instance.docVectors);
+        doclist.sort((a: RecommenderDocument, b: RecommenderDocument) => a.score - b.score);
+        return doclist;
+    }
+
     /***
      * Computes the mean of a set of vectors
      */
 
-    public mean(paragraph: Set<number[]>) {
+    public mean(paragraph: Set<number[]>, dataDoc: Doc, mainDoc: boolean) {
         const n = 200;
         const num_words = paragraph.size;
         let meanVector = new Array<number>(n).fill(0); // mean vector
@@ -82,14 +107,16 @@ export class ClientRecommender extends React.Component<RecommenderProps> {
                 }
             });
             meanVector = meanVector.map(x => x / num_words);
-            this.addToDocSet(meanVector);
+            const internalDoc: RecommenderDocument = { actualDoc: dataDoc, vectorDoc: meanVector, score: 0 };
+            if (mainDoc) ClientRecommender.Instance.mainDoc = internalDoc;
+            ClientRecommender.Instance.addToDocSet(internalDoc);
         }
         return meanVector;
     }
 
-    private addToDocSet(vector: number[]) {
-        if (this.docVectors) {
-            this.docVectors.add(vector);
+    private addToDocSet(internalDoc: RecommenderDocument) {
+        if (ClientRecommender.Instance.docVectors) {
+            ClientRecommender.Instance.docVectors.add(internalDoc);
         }
     }
 
@@ -97,9 +124,11 @@ export class ClientRecommender extends React.Component<RecommenderProps> {
      * Uses Cognitive Services to extract keywords from a document
      */
 
-    public async extractText(dataDoc: Doc, extDoc: Doc) {
-        let data = StrCast(dataDoc.title);
-        //console.log(data);
+    public async extractText(dataDoc: Doc, extDoc: Doc, mainDoc: boolean = false) {
+        let fielddata = Cast(dataDoc.data, RichTextField);
+        let data: string;
+        fielddata ? data = fielddata[ToPlainText]() : data = "";
+        console.log(data);
         let converter = (results: any) => {
             let keyterms = new List<string>();
             results.documents.forEach((doc: any) => {
@@ -108,7 +137,7 @@ export class ClientRecommender extends React.Component<RecommenderProps> {
             });
             return keyterms;
         };
-        await CognitiveServices.Text.Appliers.analyzer(extDoc, ["key words"], data, converter);
+        await CognitiveServices.Text.Appliers.analyzer(dataDoc, extDoc, ["key words"], data, converter, mainDoc);
     }
 
     /***
@@ -116,7 +145,7 @@ export class ClientRecommender extends React.Component<RecommenderProps> {
      */
 
     @action
-    public createDistanceMatrix(documents: Set<number[]> = this.docVectors) {
+    public createDistanceMatrix(documents: Set<RecommenderDocument> = ClientRecommender.Instance.docVectors) {
         const documents_list = Array.from(documents);
         const n = documents_list.length;
         var matrix = new Array<number>(n).fill(0).map(() => new Array<number>(n).fill(0));
@@ -124,22 +153,22 @@ export class ClientRecommender extends React.Component<RecommenderProps> {
             var doc1 = documents_list[i];
             for (let j = 0; j < n; j++) {
                 var doc2 = documents_list[j];
-                matrix[i][j] = this.distance(doc1, doc2, "euclidian");
+                matrix[i][j] = ClientRecommender.Instance.distance(doc1.vectorDoc, doc2.vectorDoc, "euclidian");
             }
         }
-        this.corr_matrix = matrix;
+        ClientRecommender.Instance.corr_matrix = matrix;
         return matrix;
     }
 
     @computed
     private get generateRows() {
-        const n = this.corr_matrix.length;
+        const n = ClientRecommender.Instance.corr_matrix.length;
         let rows: JSX.Element[] = [];
         for (let i = 0; i < n; i++) {
             let children: JSX.Element[] = [];
             for (let j = 0; j < n; j++) {
-                //let cell = React.createElement("td", this.corr_matrix[i][j]);
-                let cell = <td>{this.corr_matrix[i][j].toFixed(4)}</td>;
+                //let cell = React.createElement("td", ClientRecommender.Instance.corr_matrix[i][j]);
+                let cell = <td>{ClientRecommender.Instance.corr_matrix[i][j].toFixed(4)}</td>;
                 children.push(cell);
             }
             //let row = React.createElement("tr", { children: children, key: i });
@@ -151,22 +180,22 @@ export class ClientRecommender extends React.Component<RecommenderProps> {
 
     render() {
         return (<div className="wrapper">
-            <h3 >{this.props.title ? this.props.title : "hello"}</h3>
+            <h3 >{ClientRecommender.Instance.props.title ? ClientRecommender.Instance.props.title : "hello"}</h3>
             {/* <table className="space" >
                 <tbody>
                     <tr key="1">
-                        <td key="1">{this.corr_matrix[0][0].toFixed(4)}</td>
-                        <td key="2">{this.corr_matrix[0][1].toFixed(4)}</td>
+                        <td key="1">{ClientRecommender.Instance.corr_matrix[0][0].toFixed(4)}</td>
+                        <td key="2">{ClientRecommender.Instance.corr_matrix[0][1].toFixed(4)}</td>
                     </tr>
                     <tr key="2">
-                        <td key="1">{this.corr_matrix[1][0].toFixed(4)}</td>
-                        <td key="2">{this.corr_matrix[1][1].toFixed(4)}</td>
+                        <td key="1">{ClientRecommender.Instance.corr_matrix[1][0].toFixed(4)}</td>
+                        <td key="2">{ClientRecommender.Instance.corr_matrix[1][1].toFixed(4)}</td>
                     </tr>
                 </tbody>
             </table> */}
             <table className="space">
                 <tbody>
-                    {this.generateRows}
+                    {ClientRecommender.Instance.generateRows}
                 </tbody>
             </table>
         </div>);
diff --git a/src/client/cognitive_services/CognitiveServices.ts b/src/client/cognitive_services/CognitiveServices.ts
index 75d0760ed..874ee433d 100644
--- a/src/client/cognitive_services/CognitiveServices.ts
+++ b/src/client/cognitive_services/CognitiveServices.ts
@@ -263,29 +263,35 @@ export namespace CognitiveServices {
 
         export namespace Appliers {
 
-            export async function vectorize(keyterms: any) {
+            export async function vectorize(keyterms: any, dataDoc: Doc, mainDoc: boolean = false) {
                 console.log("vectorizing...");
                 //keyterms = ["father", "king"];
                 let args = { method: 'POST', uri: Utils.prepend("/recommender"), body: { keyphrases: keyterms }, json: true };
                 await requestPromise.post(args).then(async (wordvecs) => {
-                    var vectorValues = new Set<number[]>();
-                    wordvecs.forEach((wordvec: any) => {
-                        //console.log(wordvec.word);
-                        vectorValues.add(wordvec.values as number[]);
-                    });
-                    ClientRecommender.Instance.mean(vectorValues);
+                    if (wordvecs.length > 0) {
+                        console.log("successful vectorization!");
+                        var vectorValues = new Set<number[]>();
+                        wordvecs.forEach((wordvec: any) => {
+                            //console.log(wordvec.word);
+                            vectorValues.add(wordvec.values as number[]);
+                        });
+                        ClientRecommender.Instance.mean(vectorValues, dataDoc, mainDoc);
+                    } // adds document to internal doc set
+                    else {
+                        console.log("unsuccessful :( word(s) not in vocabulary");
+                    }
                     //console.log(vectorValues.size);
                 });
             }
 
-            export const analyzer = async (target: Doc, keys: string[], data: string, converter: Converter) => {
+            export const analyzer = async (dataDoc: Doc, target: Doc, keys: string[], data: string, converter: Converter, mainDoc: boolean = false) => {
                 let results = await ExecuteQuery(Service.Text, Manager, data);
                 console.log(results);
                 let keyterms = converter(results);
                 //target[keys[0]] = Docs.Get.DocumentHierarchyFromJson(results, "Key Word Analysis");
                 target[keys[0]] = keyterms;
                 console.log("analyzed!");
-                await vectorize(keyterms);
+                await vectorize(keyterms, dataDoc, mainDoc);
             };
         }
 
diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx
index 57eb30439..3a5795077 100644
--- a/src/client/views/MainView.tsx
+++ b/src/client/views/MainView.tsx
@@ -204,6 +204,7 @@ export class MainView extends React.Component {
         const targets = document.elementsFromPoint(e.x, e.y);
         if (targets && targets.length && targets[0].className.toString().indexOf("contextMenu") === -1) {
             ContextMenu.Instance.closeMenu();
+            Recommendations.Instance.closeMenu();
         }
     });
 
diff --git a/src/client/views/Recommendations.tsx b/src/client/views/Recommendations.tsx
index 8569996b3..cf1974c69 100644
--- a/src/client/views/Recommendations.tsx
+++ b/src/client/views/Recommendations.tsx
@@ -10,8 +10,10 @@ import { returnFalse, emptyFunction, returnEmptyString, returnOne } from "../../
 import { Transform } from "../util/Transform";
 import { ObjectField } from "../../new_fields/ObjectField";
 import { DocumentView } from "./nodes/DocumentView";
-import { DocumentType } from "../documents/Documents";
-
+import { DocumentType } from '../documents/DocumentTypes';
+import { ClientRecommender } from "../ClientRecommender";
+import { DocServer } from "../DocServer";
+import { Id } from "../../new_fields/FieldSymbols";
 
 export interface RecProps {
     documents: { preview: Doc, similarity: number }[];
@@ -28,6 +30,7 @@ export class Recommendations extends React.Component<{}> {
     @observable private _width: number = 0;
     @observable private _height: number = 0;
     @observable private _documents: { preview: Doc, score: number }[] = [];
+    private previewDocs: Doc[] = [];
 
     constructor(props: {}) {
         super(props);
@@ -52,7 +55,8 @@ export class Recommendations extends React.Component<{}> {
         let returnXDimension = () => 50;
         let returnYDimension = () => 50;
         let scale = () => returnXDimension() / NumCast(renderDoc.nativeWidth, returnXDimension());
-        let newRenderDoc = Doc.MakeDelegate(renderDoc); ///   newRenderDoc -> renderDoc -> render"data"Doc -> TextProt
+        //let scale = () => 1;
+        //let newRenderDoc = Doc.MakeDelegate(renderDoc); ///   newRenderDoc -> renderDoc -> render"data"Doc -> TextProt
         const docview = <div>
             {/* onPointerDown={action(() => {
                 this._useIcons = !this._useIcons;
@@ -62,7 +66,7 @@ export class Recommendations extends React.Component<{}> {
             onPointerLeave={action(() => this._displayDim = 50)} > */}
             <DocumentView
                 fitToBox={StrCast(doc.type).indexOf(DocumentType.COL) !== -1}
-                Document={doc}
+                Document={renderDoc}
                 addDocument={returnFalse}
                 removeDocument={returnFalse}
                 ScreenToLocalTransform={Transform.Identity}
@@ -82,9 +86,10 @@ export class Recommendations extends React.Component<{}> {
                 ContentScaling={scale}
             />
         </div>;
-        const data = renderDoc.data;
-        if (data instanceof ObjectField) newRenderDoc.data = ObjectField.MakeCopy(data);
-        newRenderDoc.preview = true;
+        // const data = renderDoc.data;
+        // if (data instanceof ObjectField) newRenderDoc.data = ObjectField.MakeCopy(data);
+        // newRenderDoc.preview = true;
+        // this.previewDocs.push(newRenderDoc);
         return docview;
 
     }
@@ -92,6 +97,8 @@ export class Recommendations extends React.Component<{}> {
     @action
     closeMenu = () => {
         this._display = false;
+        this.previewDocs.forEach(doc => DocServer.DeleteDocument(doc[Id]));
+        this.previewDocs = [];
     }
 
     @action
diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
index 2d4775070..3cef93383 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
@@ -857,27 +857,6 @@ export class CollectionFreeFormView extends CollectionSubView(PanZoomDocument) {
                 input.click();
             }
         });
-        ContextMenu.Instance.addItem({
-            description: "Recommender System",
-            event: async () => {
-                // if (!ClientRecommender.Instance) new ClientRecommender({ title: "Client Recommender" });
-                let activedocs = this.getActiveDocuments();
-                let allDocs = await SearchUtil.GetAllDocs();
-                allDocs.forEach(doc => console.log(doc.title));
-                // clears internal representation of documents as vectors
-                ClientRecommender.Instance.reset_docs();
-                await Promise.all(allDocs.map((doc: Doc) => {
-                    console.log(StrCast(doc.title));
-                    if (doc.type === DocumentType.IMG) {
-                        console.log(doc.title);
-                        const extdoc = doc.data_ext as Doc;
-                        return ClientRecommender.Instance.extractText(doc, extdoc ? extdoc : doc);
-                    }
-                }));
-                console.log(ClientRecommender.Instance.createDistanceMatrix());
-            },
-            icon: "brain"
-        });
         layoutItems.push({ description: `${this.fitToBox ? "Unset" : "Set"} Fit To Container`, event: this.fitToContainer, icon: !this.fitToBox ? "expand-arrows-alt" : "compress-arrows-alt" });
         layoutItems.push({ description: "reset view", event: () => { this.props.Document.panX = this.props.Document.panY = 0; this.props.Document.scale = 1; }, icon: "compress-arrows-alt" });
         layoutItems.push({
diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index 2a6e91272..f708a7a3a 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -648,21 +648,31 @@ export class DocumentView extends DocComponent<DocumentViewProps, Document>(Docu
                 if (!ClientRecommender.Instance) new ClientRecommender({ title: "Client Recommender" });
                 let documents: Doc[] = [];
                 let allDocs = await SearchUtil.GetAllDocs();
-                allDocs.forEach(doc => console.log(doc.title));
+                //allDocs.forEach(doc => console.log(doc.title));
                 // clears internal representation of documents as vectors
                 ClientRecommender.Instance.reset_docs();
                 await Promise.all(allDocs.map((doc: Doc) => {
-                    if (doc.type === DocumentType.IMG) {
-                        console.log(StrCast(doc.title));
-                        documents.push(doc);
-                        const extdoc = doc.data_ext as Doc;
-                        return ClientRecommender.Instance.extractText(doc, extdoc ? extdoc : doc);
+                    let mainDoc: boolean = false;
+                    const dataDoc = Doc.GetDataDoc(doc);
+                    if (doc.type === DocumentType.TEXT) {
+                        if (dataDoc === Doc.GetDataDoc(this.props.Document)) {
+                            mainDoc = true;
+                            console.log(StrCast(doc.title));
+                        }
+                        if (!documents.includes(dataDoc)) {
+                            documents.push(dataDoc);
+                            const extdoc = doc.data_ext as Doc;
+                            return ClientRecommender.Instance.extractText(doc, extdoc ? extdoc : doc, mainDoc);
+                        }
                     }
                 }));
                 console.log(ClientRecommender.Instance.createDistanceMatrix());
+                const doclist = ClientRecommender.Instance.computeSimilarities();
                 let recDocs: { preview: Doc, score: number }[] = [];
-                for (let i = 0; i < documents.length; i++) {
-                    recDocs.push({ preview: documents[i], score: i });
+                // tslint:disable-next-line: prefer-for-of
+                for (let i = 0; i < doclist.length; i++) {
+                    console.log(doclist[i].score);
+                    recDocs.push({ preview: doclist[i].actualDoc, score: doclist[i].score });
                 }
                 Recommendations.Instance.addDocuments(recDocs);
                 Recommendations.Instance.displayRecommendations(e.pageX + 100, e.pageY);
diff --git a/src/client/views/nodes/ImageBox.tsx b/src/client/views/nodes/ImageBox.tsx
index ec35465eb..d94e92847 100644
--- a/src/client/views/nodes/ImageBox.tsx
+++ b/src/client/views/nodes/ImageBox.tsx
@@ -240,22 +240,6 @@ export class ImageBox extends DocComponent<FieldViewProps, ImageDocument>(ImageD
         }
     }
 
-    extractText = async () => {
-        //let activedocs = this.getActiveDocuments();
-        let allDocs = await SearchUtil.GetAllDocs();
-        allDocs.forEach(doc => console.log(doc.title));
-        // clears internal representation of documents as vectors
-        ClientRecommender.Instance.reset_docs();
-        await Promise.all(allDocs.map((doc: Doc) => {
-            //console.log(StrCast(doc.title));
-            if (doc.type === DocumentType.IMG) {
-                const extdoc = doc.data_ext as Doc;
-                return ClientRecommender.Instance.extractText(doc, extdoc ? extdoc : doc);
-            }
-        }));
-        console.log(ClientRecommender.Instance.createDistanceMatrix());
-    }
-
     generateMetadata = (threshold: Confidence = Confidence.Excellent) => {
         let converter = (results: any) => {
             let tagDoc = new Doc;
-- 
cgit v1.2.3-70-g09d2


From af59d641022119e25402f1f13ae2c3f3eb4c20a2 Mon Sep 17 00:00:00 2001
From: ab <abdullah_ahmed@brown.edu>
Date: Mon, 16 Sep 2019 14:39:44 -0400
Subject: initial commit

---
 src/client/documents/DocumentTypes.ts           |   1 +
 src/client/documents/Documents.ts               |   9 ++
 src/client/views/GlobalKeyHandler.ts            |   2 +
 src/client/views/MainView.tsx                   |   5 +-
 src/client/views/Recommendations.scss           |  12 +-
 src/client/views/Recommendations.tsx            | 172 +++++++++++++-----------
 src/client/views/nodes/DocumentContentsView.tsx |   3 +-
 src/client/views/nodes/DocumentView.tsx         |  20 ++-
 8 files changed, 132 insertions(+), 92 deletions(-)

(limited to 'src/client/views/MainView.tsx')

diff --git a/src/client/documents/DocumentTypes.ts b/src/client/documents/DocumentTypes.ts
index 1578e49fe..08f64fc8e 100644
--- a/src/client/documents/DocumentTypes.ts
+++ b/src/client/documents/DocumentTypes.ts
@@ -19,4 +19,5 @@ export enum DocumentType {
     YOUTUBE = "youtube",
     DRAGBOX = "dragbox",
     PRES = "presentation",
+    RECOMMENDATION = "recommendation"
 }
\ No newline at end of file
diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts
index 1e9d1687f..89358d773 100644
--- a/src/client/documents/Documents.ts
+++ b/src/client/documents/Documents.ts
@@ -45,6 +45,7 @@ import { PresBox } from "../views/nodes/PresBox";
 import { ComputedField } from "../../new_fields/ScriptField";
 import { ProxyField } from "../../new_fields/Proxy";
 import { DocumentType } from "./DocumentTypes";
+import { RecommendationsBox } from "../views/Recommendations";
 //import { PresBox } from "../views/nodes/PresBox";
 //import { PresField } from "../../new_fields/PresField";
 var requestImageSize = require('../util/request-image-size');
@@ -170,6 +171,10 @@ export namespace Docs {
             [DocumentType.DRAGBOX, {
                 layout: { view: DragBox },
                 options: { width: 40, height: 40 },
+            }],
+            [DocumentType.RECOMMENDATION, {
+                layout: { view: RecommendationsBox },
+                options: { width: 200, height: 200 },
             }]
         ]);
 
@@ -451,6 +456,10 @@ export namespace Docs {
             return InstanceFromProto(Prototypes.get(DocumentType.IMPORT), new List<Doc>(), options);
         }
 
+        export function RecommendationsDocument(data: Doc[], options: DocumentOptions = {}) {
+            return InstanceFromProto(Prototypes.get(DocumentType.RECOMMENDATION), new List<Doc>(data), options);
+        }
+
         export type DocConfig = {
             doc: Doc,
             initialWidth?: number
diff --git a/src/client/views/GlobalKeyHandler.ts b/src/client/views/GlobalKeyHandler.ts
index d0464bd5f..4135afcb8 100644
--- a/src/client/views/GlobalKeyHandler.ts
+++ b/src/client/views/GlobalKeyHandler.ts
@@ -6,6 +6,7 @@ import { DragManager } from "../util/DragManager";
 import { action, runInAction } from "mobx";
 import { Doc } from "../../new_fields/Doc";
 import { DictationManager } from "../util/DictationManager";
+import { RecommendationsBox } from "./Recommendations";
 
 const modifiers = ["control", "meta", "shift", "alt"];
 type KeyHandler = (keycode: string, e: KeyboardEvent) => KeyControlInfo | Promise<KeyControlInfo>;
@@ -72,6 +73,7 @@ export default class KeyManager {
                 main.toggleColorPicker(true);
                 SelectionManager.DeselectAll();
                 DictationManager.Controls.stop();
+                // RecommendationsBox.Instance.closeMenu();
                 break;
             case "delete":
             case "backspace":
diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx
index 3a5795077..0bc539dca 100644
--- a/src/client/views/MainView.tsx
+++ b/src/client/views/MainView.tsx
@@ -40,7 +40,7 @@ import { PreviewCursor } from './PreviewCursor';
 import { FilterBox } from './search/FilterBox';
 import { SchemaHeaderField, RandomPastel } from '../../new_fields/SchemaHeaderField';
 //import { DocumentManager } from '../util/DocumentManager';
-import { Recommendations } from './Recommendations';
+import { RecommendationsBox } from './Recommendations';
 import PresModeMenu from './presentationview/PresentationModeMenu';
 import { PresBox } from './nodes/PresBox';
 
@@ -204,7 +204,6 @@ export class MainView extends React.Component {
         const targets = document.elementsFromPoint(e.x, e.y);
         if (targets && targets.length && targets[0].className.toString().indexOf("contextMenu") === -1) {
             ContextMenu.Instance.closeMenu();
-            Recommendations.Instance.closeMenu();
         }
     });
 
@@ -567,7 +566,7 @@ export class MainView extends React.Component {
                 {this.miniPresentation}
                 <PreviewCursor />
                 <ContextMenu />
-                <Recommendations />
+                {/* <RecommendationsBox /> */}
                 {this.nodesMenu()}
                 {this.miscButtons}
                 <PDFMenu />
diff --git a/src/client/views/Recommendations.scss b/src/client/views/Recommendations.scss
index 6619d8df3..dd8a105f6 100644
--- a/src/client/views/Recommendations.scss
+++ b/src/client/views/Recommendations.scss
@@ -4,7 +4,7 @@
     display: inline-block;
     margin: auto;
     width: 50;
-    height: 30px;
+    height: 150px;
     border: 1px dashed grey;
     padding: 10px 10px;
 }
@@ -19,17 +19,20 @@
     overflow-y: scroll;
     overflow-x: hidden;
     position: absolute;
+    pointer-events: all;
     // display: flex;
     z-index: 10000;
     box-shadow: gray 0.2vw 0.2vw 0.4vw;
     // flex-direction: column;
     background: whitesmoke;
     padding-bottom: 10px;
-    border-radius: 15px;
+    padding-top: 20px;
+    // border-radius: 15px;
     border: solid #BBBBBBBB 1px;
-    width: 250px;
+    width: 100%;
     text-align: center;
-    max-height: 250px;
+    // max-height: 250px;
+    height: 100%;
     text-transform: uppercase;
     color: grey;
     letter-spacing: 2px;
@@ -48,7 +51,6 @@
     background-color: transparent;
     width: 50%;
     text-align: center;
-    height: 35px;
     margin-left: 5px;
 }
 
diff --git a/src/client/views/Recommendations.tsx b/src/client/views/Recommendations.tsx
index d0105ee18..ff6e66492 100644
--- a/src/client/views/Recommendations.tsx
+++ b/src/client/views/Recommendations.tsx
@@ -14,27 +14,37 @@ import { DocumentType } from '../documents/DocumentTypes';
 import { ClientRecommender } from "../ClientRecommender";
 import { DocServer } from "../DocServer";
 import { Id } from "../../new_fields/FieldSymbols";
+import { FieldView, FieldViewProps } from "./nodes/FieldView";
+import { DocumentManager } from "../util/DocumentManager";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { library } from "@fortawesome/fontawesome-svg-core";
+import { faBullseye, faLink } from "@fortawesome/free-solid-svg-icons";
+import { DocUtils } from "../documents/Documents";
 
 export interface RecProps {
     documents: { preview: Doc, similarity: number }[];
     node: Doc;
 }
 
+library.add(faBullseye, faLink);
+
 @observer
-export class Recommendations extends React.Component<{}> {
+export class RecommendationsBox extends React.Component<FieldViewProps> {
+
+    public static LayoutString(fieldKey?: string) { return FieldView.LayoutString(RecommendationsBox, fieldKey); }
 
-    static Instance: Recommendations;
-    @observable private _display: boolean = false;
+    static Instance: RecommendationsBox;
+    // @observable private _display: boolean = false;
     @observable private _pageX: number = 0;
     @observable private _pageY: number = 0;
     @observable private _width: number = 0;
     @observable private _height: number = 0;
-    @observable private _documents: { preview: Doc, score: number }[] = [];
+    // @observable private _documents: { preview: Doc, score: number }[] = [];
     private previewDocs: Doc[] = [];
 
-    constructor(props: {}) {
+    constructor(props: FieldViewProps) {
         super(props);
-        Recommendations.Instance = this;
+        RecommendationsBox.Instance = this;
     }
 
     private DocumentIcon(doc: Doc) {
@@ -52,12 +62,12 @@ export class Recommendations extends React.Component<{}> {
                 };
             }, { x: Number.MAX_VALUE, y: Number.MAX_VALUE, r: Number.MIN_VALUE, b: Number.MIN_VALUE });
         }
-        let returnXDimension = () => 50;
-        let returnYDimension = () => 50;
+        let returnXDimension = () => 150;
+        let returnYDimension = () => 150;
         let scale = () => returnXDimension() / NumCast(renderDoc.nativeWidth, returnXDimension());
         //let scale = () => 1;
         let newRenderDoc = Doc.MakeAlias(renderDoc); ///   newRenderDoc -> renderDoc -> render"data"Doc -> TextProt
-        newRenderDoc.height = 50;
+        newRenderDoc.height = NumCast(this.props.Document.documentIconHeight);
         newRenderDoc.autoHeight = false;
         const docview = <div>
             {/* onPointerDown={action(() => {
@@ -78,7 +88,8 @@ export class Recommendations extends React.Component<{}> {
                 PanelHeight={returnYDimension}
                 focus={emptyFunction}
                 backgroundColor={returnEmptyString}
-                selectOnLoad={false}
+                // selectOnLoad={false}
+                pinToPres={emptyFunction}
                 parentActive={returnFalse}
                 whenActiveChanged={returnFalse}
                 bringToFront={emptyFunction}
@@ -96,83 +107,84 @@ export class Recommendations extends React.Component<{}> {
 
     }
 
-    @action
-    closeMenu = () => {
-        this._display = false;
-        this.previewDocs.forEach(doc => DocServer.DeleteDocument(doc[Id]));
-        this.previewDocs = [];
-    }
-
-    @action
-    resetDocuments = () => {
-        this._documents = [];
-    }
-
-    @action
-    addDocuments = (documents: { preview: Doc, score: number }[]) => {
-        this._documents = documents;
-    }
-
-    @action
-    displayRecommendations(x: number, y: number) {
-        this._pageX = x;
-        this._pageY = y;
-        this._display = true;
-    }
+    // @action
+    // closeMenu = () => {
+    //     this._display = false;
+    //     this.previewDocs.forEach(doc => DocServer.DeleteDocument(doc[Id]));
+    //     this.previewDocs = [];
+    // }
+
+    // @action
+    // resetDocuments = () => {
+    //     this._documents = [];
+    // }
+
+    // @action
+    // displayRecommendations(x: number, y: number) {
+    //     this._pageX = x;
+    //     this._pageY = y;
+    //     this._display = true;
+    // }
 
     static readonly buffer = 20;
 
-    get pageX() {
-        const x = this._pageX;
-        if (x < 0) {
-            return 0;
-        }
-        const width = this._width;
-        if (x + width > window.innerWidth - Recommendations.buffer) {
-            return window.innerWidth - Recommendations.buffer - width;
-        }
-        return x;
-    }
-
-    get pageY() {
-        const y = this._pageY;
-        if (y < 0) {
-            return 0;
-        }
-        const height = this._height;
-        if (y + height > window.innerHeight - Recommendations.buffer) {
-            return window.innerHeight - Recommendations.buffer - height;
-        }
-        return y;
-    }
+    // get pageX() {
+    //     const x = this._pageX;
+    //     if (x < 0) {
+    //         return 0;
+    //     }
+    //     const width = this._width;
+    //     if (x + width > window.innerWidth - RecommendationsBox.buffer) {
+    //         return window.innerWidth - RecommendationsBox.buffer - width;
+    //     }
+    //     return x;
+    // }
+
+    // get pageY() {
+    //     const y = this._pageY;
+    //     if (y < 0) {
+    //         return 0;
+    //     }
+    //     const height = this._height;
+    //     if (y + height > window.innerHeight - RecommendationsBox.buffer) {
+    //         return window.innerHeight - RecommendationsBox.buffer - height;
+    //     }
+    //     return y;
+    // }
 
     render() {
-        if (!this._display) {
-            return null;
-        }
-        let style = { left: this.pageX, top: this.pageY };
+        // if (!this._display) {
+        //     return null;
+        // }
+        // let style = { left: this.pageX, top: this.pageY };
         //const transform = "translate(" + (NumCast(this.props.node.x) + 350) + "px, " + NumCast(this.props.node.y) + "px"
         return (
-            <Measure offset onResize={action((r: any) => { this._width = r.offset.width; this._height = r.offset.height; })}>
-                {({ measureRef }) => (
-                    <div className="rec-scroll" style={style} ref={measureRef}>
-                        <p>Recommendations</p>
-                        {this._documents.map(doc => {
-                            return (
-                                <div className="content">
-                                    <span className="image-background">
-                                        {this.DocumentIcon(doc.preview)}
-                                    </span>
-                                    <span className="score">{doc.score.toFixed(4)}</span>
-                                </div>
-                            );
-                        })}
-
-                    </div>
-                )
-                }
-
-            </Measure>
+            // <Measure offset onResize={action((r: any) => { this._width = r.offset.width; this._height = r.offset.height; })}>
+            // {({ measureRef }) => (
+            <div className="rec-scroll">
+                <p>Recommendations</p>
+                {DocListCast(this.props.Document.data).map(doc => {
+                    return (
+                        <div className="content">
+                            <span style={{ height: NumCast(this.props.Document.documentIconHeight) }} className="image-background">
+                                {this.DocumentIcon(doc)}
+                            </span>
+                            <span className="score">{NumCast(doc.score).toFixed(4)}</span>
+                            <div style={{ marginRight: 50 }} onClick={() => DocumentManager.Instance.jumpToDocument(doc, true, undefined, undefined, undefined, this.props.Document.sourceDocContext as Doc)}>
+                                <FontAwesomeIcon className="documentdecorations-icon" icon={"bullseye"} size="sm" />
+                            </div>
+                            <div style={{ marginRight: 50 }} onClick={() => DocUtils.MakeLink(this.props.Document.sourceDoc as Doc, doc, undefined, "User Selected Link", "Generated from Recommender", undefined)}>
+                                <FontAwesomeIcon className="documentdecorations-icon" icon={"link"} size="sm" />
+                            </div>
+                        </div>
+                    );
+                })}
+
+            </div>
+            // );
+            // }
+
+            // </Measure>
         );
     }
 }
\ No newline at end of file
diff --git a/src/client/views/nodes/DocumentContentsView.tsx b/src/client/views/nodes/DocumentContentsView.tsx
index d77662355..c8a636727 100644
--- a/src/client/views/nodes/DocumentContentsView.tsx
+++ b/src/client/views/nodes/DocumentContentsView.tsx
@@ -29,6 +29,7 @@ import { Cast, StrCast, NumCast } from "../../../new_fields/Types";
 import { List } from "../../../new_fields/List";
 import { Doc } from "../../../new_fields/Doc";
 import DirectoryImportBox from "../../util/Import & Export/DirectoryImportBox";
+import { RecommendationsBox } from "../../views/Recommendations";
 import { ScriptField } from "../../../new_fields/ScriptField";
 const JsxParser = require('react-jsx-parser').default; //TODO Why does this need to be imported like this?
 
@@ -108,7 +109,7 @@ export class DocumentContentsView extends React.Component<DocumentViewProps & {
         if (!this.layout && (this.props.layoutKey !== "overlayLayout" || !this.templates.length)) return (null);
         return <ObserverJsxParser
             blacklistedAttrs={[]}
-            components={{ FormattedTextBox, ImageBox, IconBox, DirectoryImportBox, DragBox, ButtonBox, FieldView, CollectionFreeFormView, CollectionDockingView, CollectionSchemaView, CollectionView, CollectionPDFView, CollectionVideoView, WebBox, KeyValueBox, PDFBox, VideoBox, AudioBox, HistogramBox, PresBox, YoutubeBox }}
+            components={{ FormattedTextBox, ImageBox, RecommendationsBox, IconBox, DirectoryImportBox, DragBox, ButtonBox, FieldView, CollectionFreeFormView, CollectionDockingView, CollectionSchemaView, CollectionView, CollectionPDFView, CollectionVideoView, WebBox, KeyValueBox, PDFBox, VideoBox, AudioBox, HistogramBox, PresBox, YoutubeBox }}
             bindings={this.CreateBindings()}
             jsx={this.finalLayout}
             showWarnings={true}
diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index 48a059b8e..d1e87b663 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -41,7 +41,7 @@ import "./DocumentView.scss";
 import { FormattedTextBox } from './FormattedTextBox';
 import React = require("react");
 import requestPromise = require('request-promise');
-import { Recommendations } from '../Recommendations';
+import { RecommendationsBox } from '../Recommendations';
 import { SearchUtil } from '../../util/SearchUtil';
 import { ClientRecommender } from '../../ClientRecommender';
 import { DocumentType } from '../../documents/DocumentTypes';
@@ -739,8 +739,22 @@ export class DocumentView extends DocComponent<DocumentViewProps, Document>(Docu
         for (let i = 0; i < doclist.length; i++) {
             recDocs.push({ preview: doclist[i].actualDoc, score: doclist[i].score });
         }
-        Recommendations.Instance.addDocuments(recDocs);
-        Recommendations.Instance.displayRecommendations(e.pageX + 100, e.pageY);
+
+        const data = recDocs.map(unit => {
+            unit.preview.score = unit.score;
+            return unit.preview;
+        });
+
+        console.log(recDocs.map(doc => doc.score));
+
+        const title = `Showing ${data.length} recommendations for "${StrCast(this.props.Document.title)}"`;
+        const recommendations = Docs.Create.RecommendationsDocument(data, { title });
+        recommendations.documentIconHeight = 150;
+        recommendations.sourceDoc = this.props.Document;
+        recommendations.sourceDocContext = this.props.ContainingCollectionView!.props.Document;
+        CollectionDockingView.Instance.AddRightSplit(recommendations, undefined);
+
+        // RecommendationsBox.Instance.displayRecommendations(e.pageX + 100, e.pageY);
     }
 
     onPointerEnter = (e: React.PointerEvent): void => { Doc.BrushDoc(this.props.Document); };
-- 
cgit v1.2.3-70-g09d2


From c6e2eee8e5b035ed4cab1e7bb1315a36d43255c5 Mon Sep 17 00:00:00 2001
From: ab <abdullah_ahmed@brown.edu>
Date: Tue, 8 Oct 2019 16:02:25 -0400
Subject: switching out

---
 src/client/views/MainView.tsx                           |  1 -
 src/client/views/Recommendations.tsx                    |  2 +-
 .../collectionFreeForm/CollectionFreeFormView.tsx       |  3 ---
 src/client/views/nodes/DocumentContentsView.tsx         |  6 ------
 src/client/views/nodes/DocumentView.tsx                 |  4 ++--
 src/client/views/nodes/ImageBox.tsx                     |  1 -
 src/new_fields/RichTextField.ts                         | 17 ++++++++++++++++-
 7 files changed, 19 insertions(+), 15 deletions(-)

(limited to 'src/client/views/MainView.tsx')

diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx
index 17de708a2..e6f500e75 100644
--- a/src/client/views/MainView.tsx
+++ b/src/client/views/MainView.tsx
@@ -41,7 +41,6 @@ import { FilterBox } from './search/FilterBox';
 import { SchemaHeaderField, RandomPastel } from '../../new_fields/SchemaHeaderField';
 //import { DocumentManager } from '../util/DocumentManager';
 import { RecommendationsBox } from './Recommendations';
-import PresModeMenu from './presentationview/PresentationModeMenu';
 import { PresBox } from './nodes/PresBox';
 import { OverlayView } from './OverlayView';
 
diff --git a/src/client/views/Recommendations.tsx b/src/client/views/Recommendations.tsx
index b7b1d84d0..c44dfc032 100644
--- a/src/client/views/Recommendations.tsx
+++ b/src/client/views/Recommendations.tsx
@@ -174,7 +174,7 @@ export class RecommendationsBox extends React.Component<FieldViewProps> {
                                 {this.DocumentIcon(doc)}
                             </span>
                             <span className="score">{NumCast(doc.score).toFixed(4)}</span>
-                            <div style={{ marginRight: 50 }} onClick={() => DocumentManager.Instance.jumpToDocument(doc, true, undefined, undefined, undefined, this.props.Document.sourceDocContext as Doc)}>
+                            <div style={{ marginRight: 50 }} onClick={() => DocumentManager.Instance.jumpToDocument(doc, false)}>
                                 <FontAwesomeIcon className="documentdecorations-icon" icon={"bullseye"} size="sm" />
                             </div>
                             <div style={{ marginRight: 50 }} onClick={() => DocUtils.MakeLink(this.props.Document.sourceDoc as Doc, doc, undefined, "User Selected Link", "Generated from Recommender", undefined)}>
diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
index 3ee069e4c..d2b8afa02 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
@@ -12,7 +12,6 @@ import { BoolCast, Cast, DateCast, NumCast, StrCast } from "../../../../new_fiel
 import { CurrentUserUtils } from "../../../../server/authentication/models/current_user_utils";
 import { aggregateBounds, emptyFunction, intersectRect, returnEmptyString, returnOne, Utils } from "../../../../Utils";
 import { CognitiveServices } from "../../../cognitive_services/CognitiveServices";
-import { DocServer } from "../../../DocServer";
 import { Docs } from "../../../documents/Documents";
 import { DocumentType } from "../../../documents/DocumentTypes";
 import { DocumentManager } from "../../../util/DocumentManager";
@@ -28,7 +27,6 @@ import { InkingCanvas } from "../../InkingCanvas";
 import { CollectionFreeFormDocumentView, positionSchema } from "../../nodes/CollectionFreeFormDocumentView";
 import { DocumentContentsView } from "../../nodes/DocumentContentsView";
 import { documentSchema, DocumentViewProps } from "../../nodes/DocumentView";
-import { FormattedTextBox } from "../../nodes/FormattedTextBox";
 import { pageSchema } from "../../nodes/ImageBox";
 import PDFMenu from "../../pdf/PDFMenu";
 import { CollectionSubView } from "../CollectionSubView";
@@ -41,7 +39,6 @@ import React = require("react");
 import v5 = require("uuid/v5");
 import { ClientRecommender } from "../../../ClientRecommender";
 import { SearchUtil } from "../../../util/SearchUtil";
-import { SearchBox } from "../../SearchBox";
 import { RouteStore } from "../../../../server/RouteStore";
 import { string, number, elementType } from "prop-types";
 import { DocServer } from "../../../DocServer";
diff --git a/src/client/views/nodes/DocumentContentsView.tsx b/src/client/views/nodes/DocumentContentsView.tsx
index e5eb8dbce..919c13055 100644
--- a/src/client/views/nodes/DocumentContentsView.tsx
+++ b/src/client/views/nodes/DocumentContentsView.tsx
@@ -2,8 +2,6 @@ import { computed } from "mobx";
 import { observer } from "mobx-react";
 import { Doc } from "../../../new_fields/Doc";
 import { ScriptField } from "../../../new_fields/ScriptField";
-import { Cast } from "../../../new_fields/Types";
-import { OmitKeys, Without } from "../../../Utils";
 import { HistogramBox } from "../../northstar/dash-nodes/HistogramBox";
 import DirectoryImportBox from "../../util/Import & Export/DirectoryImportBox";
 import { CollectionDockingView } from "../collections/CollectionDockingView";
@@ -30,14 +28,10 @@ import { PresElementBox } from "../presentationview/PresElementBox";
 import { VideoBox } from "./VideoBox";
 import { WebBox } from "./WebBox";
 import React = require("react");
-import { FieldViewProps } from "./FieldView";
 import { Without, OmitKeys } from "../../../Utils";
 import { Cast, StrCast, NumCast } from "../../../new_fields/Types";
 import { List } from "../../../new_fields/List";
-import { Doc } from "../../../new_fields/Doc";
-import DirectoryImportBox from "../../util/Import & Export/DirectoryImportBox";
 import { RecommendationsBox } from "../../views/Recommendations";
-import { ScriptField } from "../../../new_fields/ScriptField";
 const JsxParser = require('react-jsx-parser').default; //TODO Why does this need to be imported like this?
 
 type BindingProps = Without<FieldViewProps, 'fieldKey'>;
diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index 0064b98c3..070b1f426 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -621,7 +621,7 @@ export class DocumentView extends DocComponent<DocumentViewProps, Document>(Docu
         recommendations.documentIconHeight = 150;
         recommendations.sourceDoc = this.props.Document;
         recommendations.sourceDocContext = this.props.ContainingCollectionView!.props.Document;
-        CollectionDockingView.Instance.AddRightSplit(recommendations, undefined);
+        CollectionDockingView.AddRightSplit(recommendations, undefined);
 
         // RecommendationsBox.Instance.displayRecommendations(e.pageX + 100, e.pageY);
     }
@@ -641,7 +641,7 @@ export class DocumentView extends DocComponent<DocumentViewProps, Document>(Docu
             body.href = urls[i];
             bodies.push(body);
         }
-        CollectionDockingView.Instance.AddRightSplit(Docs.Create.SchemaDocument(headers, bodies, { title: `Showing External Recommendations for "${StrCast(doc.title)}"` }), undefined);
+        CollectionDockingView.AddRightSplit(Docs.Create.SchemaDocument(headers, bodies, { title: `Showing External Recommendations for "${StrCast(doc.title)}"` }), undefined);
     }
 
     onPointerEnter = (e: React.PointerEvent): void => { Doc.BrushDoc(this.props.Document); };
diff --git a/src/client/views/nodes/ImageBox.tsx b/src/client/views/nodes/ImageBox.tsx
index f36b9895f..7ffe64b9b 100644
--- a/src/client/views/nodes/ImageBox.tsx
+++ b/src/client/views/nodes/ImageBox.tsx
@@ -29,7 +29,6 @@ import "./ImageBox.scss";
 import React = require("react");
 import { SearchUtil } from '../../util/SearchUtil';
 import { ClientRecommender } from '../../ClientRecommender';
-import { DocumentType } from '../../documents/Documents';
 var requestImageSize = require('../../util/request-image-size');
 var path = require('path');
 const { Howl } = require('howler');
diff --git a/src/new_fields/RichTextField.ts b/src/new_fields/RichTextField.ts
index 390045ee1..f41ea0350 100644
--- a/src/new_fields/RichTextField.ts
+++ b/src/new_fields/RichTextField.ts
@@ -4,6 +4,9 @@ import { Deserializable } from "../client/util/SerializationHelper";
 import { Copy, ToScriptString, ToPlainText } from "./FieldSymbols";
 import { scriptingGlobal } from "../client/util/Scripting";
 
+const delimiter = "\n";
+const joiner = "";
+
 @scriptingGlobal
 @Deserializable("RichTextField")
 export class RichTextField extends ObjectField {
@@ -24,7 +27,19 @@ export class RichTextField extends ObjectField {
     }
 
     [ToPlainText]() {
-        return this.Data;
+        // Because we're working with plain text, just concatenate all paragraphs
+        let content = JSON.parse(this.Data).doc.content;
+        let paragraphs = content.filter((item: any) => item.type === "paragraph");
+
+        // Functions to flatten ProseMirror paragraph objects (and their components) to plain text
+        // While this function already exists in state.doc.textBeteen(), it doesn't account for newlines 
+        let blockText = (block: any) => block.text;
+        let concatenateParagraph = (p: any) => (p.content ? p.content.map(blockText).join(joiner) : "") + delimiter;
+
+        // Concatentate paragraphs and string the result together
+        let textParagraphs: string[] = paragraphs.map(concatenateParagraph);
+        let plainText = textParagraphs.join(joiner);
+        return plainText.substring(0, plainText.length - 1);
     }
 
 }
\ No newline at end of file
-- 
cgit v1.2.3-70-g09d2


From 301784883375860a7c693db97fe8f279e5380caf Mon Sep 17 00:00:00 2001
From: ab <abdullah_ahmed@brown.edu>
Date: Sat, 19 Oct 2019 16:51:45 -0400
Subject: image stuff

---
 src/client/ClientRecommender.tsx                |   3 +-
 src/client/documents/Documents.ts               |   2 +-
 src/client/views/GlobalKeyHandler.ts            |   2 +-
 src/client/views/MainView.tsx                   |   2 +-
 src/client/views/Recommendations.scss           |  68 ---------
 src/client/views/Recommendations.tsx            | 185 ------------------------
 src/client/views/RecommendationsBox.scss        |  68 +++++++++
 src/client/views/RecommendationsBox.tsx         | 185 ++++++++++++++++++++++++
 src/client/views/nodes/DocumentContentsView.tsx |   4 +-
 src/client/views/nodes/DocumentView.tsx         |   2 +-
 10 files changed, 261 insertions(+), 260 deletions(-)
 delete mode 100644 src/client/views/Recommendations.scss
 delete mode 100644 src/client/views/Recommendations.tsx
 create mode 100644 src/client/views/RecommendationsBox.scss
 create mode 100644 src/client/views/RecommendationsBox.tsx

(limited to 'src/client/views/MainView.tsx')

diff --git a/src/client/ClientRecommender.tsx b/src/client/ClientRecommender.tsx
index 73b05cf1a..97efedd89 100644
--- a/src/client/ClientRecommender.tsx
+++ b/src/client/ClientRecommender.tsx
@@ -12,6 +12,7 @@ import "./ClientRecommender.scss";
 import { JSXElement } from "babel-types";
 import { RichTextField } from "../new_fields/RichTextField";
 import { ToPlainText } from "../new_fields/FieldSymbols";
+import { listSpec } from "../new_fields/Schema";
 
 export interface RecommenderProps {
     title: string;
@@ -148,7 +149,7 @@ export class ClientRecommender extends React.Component<RecommenderProps> {
     public async extractText(dataDoc: Doc, extDoc: Doc, internal: boolean = true, isMainDoc: boolean = false, image: boolean = false) {
         let fielddata = Cast(dataDoc.data, RichTextField);
         if (image && extDoc.generatedTags) {
-            console.log(StrCast(extDoc.generatedTags));
+            console.log(Cast(extDoc.generatedTags, listSpec("string")));
         }
         let data: string;
         fielddata ? data = fielddata[ToPlainText]() : data = "";
diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts
index 1179f0238..36f20199c 100644
--- a/src/client/documents/Documents.ts
+++ b/src/client/documents/Documents.ts
@@ -43,7 +43,7 @@ import { PresBox } from "../views/nodes/PresBox";
 import { ComputedField, ScriptField } from "../../new_fields/ScriptField";
 import { ProxyField } from "../../new_fields/Proxy";
 import { DocumentType } from "./DocumentTypes";
-import { RecommendationsBox } from "../views/Recommendations";
+import { RecommendationsBox } from "../views/RecommendationsBox";
 //import { PresBox } from "../views/nodes/PresBox";
 //import { PresField } from "../../new_fields/PresField";
 import { LinkFollowBox } from "../views/linking/LinkFollowBox";
diff --git a/src/client/views/GlobalKeyHandler.ts b/src/client/views/GlobalKeyHandler.ts
index 189e2bbe0..b0d0a0d28 100644
--- a/src/client/views/GlobalKeyHandler.ts
+++ b/src/client/views/GlobalKeyHandler.ts
@@ -6,7 +6,7 @@ import { DragManager } from "../util/DragManager";
 import { action, runInAction } from "mobx";
 import { Doc } from "../../new_fields/Doc";
 import { DictationManager } from "../util/DictationManager";
-import { RecommendationsBox } from "./Recommendations";
+import { RecommendationsBox } from "./RecommendationsBox";
 import SharingManager from "../util/SharingManager";
 import { CurrentUserUtils } from "../../server/authentication/models/current_user_utils";
 import { Cast, PromiseValue } from "../../new_fields/Types";
diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx
index bfd9c2163..2b47c2534 100644
--- a/src/client/views/MainView.tsx
+++ b/src/client/views/MainView.tsx
@@ -38,7 +38,7 @@ import { PreviewCursor } from './PreviewCursor';
 import { FilterBox } from './search/FilterBox';
 import { SchemaHeaderField, RandomPastel } from '../../new_fields/SchemaHeaderField';
 //import { DocumentManager } from '../util/DocumentManager';
-import { RecommendationsBox } from './Recommendations';
+import { RecommendationsBox } from './RecommendationsBox';
 import { PresBox } from './nodes/PresBox';
 import { OverlayView } from './OverlayView';
 
diff --git a/src/client/views/Recommendations.scss b/src/client/views/Recommendations.scss
deleted file mode 100644
index dd8a105f6..000000000
--- a/src/client/views/Recommendations.scss
+++ /dev/null
@@ -1,68 +0,0 @@
-@import "globalCssVariables";
-
-.rec-content *{
-    display: inline-block;
-    margin: auto;
-    width: 50;
-    height: 150px;
-    border: 1px dashed grey;
-    padding: 10px 10px;
-}
-
-.rec-content {
-    float: left;
-    width: inherit;
-    align-content: center;
-}
-
-.rec-scroll {
-    overflow-y: scroll;
-    overflow-x: hidden;
-    position: absolute;
-    pointer-events: all;
-    // display: flex;
-    z-index: 10000;
-    box-shadow: gray 0.2vw 0.2vw 0.4vw;
-    // flex-direction: column;
-    background: whitesmoke;
-    padding-bottom: 10px;
-    padding-top: 20px;
-    // border-radius: 15px;
-    border: solid #BBBBBBBB 1px;
-    width: 100%;
-    text-align: center;
-    // max-height: 250px;
-    height: 100%;
-    text-transform: uppercase;
-    color: grey;
-    letter-spacing: 2px;
-}
-
-.content {
-    padding: 10px;
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    justify-content: center;
-}
-
-.image-background {
-    pointer-events: none;
-    background-color: transparent;
-    width: 50%;
-    text-align: center;
-    margin-left: 5px;
-}
-
-img{
-    width: 100%;
-    height: 100%;
-}
-
-.score {
-    // margin-left: 15px;
-    width: 50%;
-    height: 100%;
-    text-align: center;
-    margin-left: 10px;
-}
diff --git a/src/client/views/Recommendations.tsx b/src/client/views/Recommendations.tsx
deleted file mode 100644
index f965d655b..000000000
--- a/src/client/views/Recommendations.tsx
+++ /dev/null
@@ -1,185 +0,0 @@
-import { observer } from "mobx-react";
-import React = require("react");
-import { observable, action } from "mobx";
-import Measure from "react-measure";
-import "./Recommendations.scss";
-import { Doc, DocListCast, WidthSym, HeightSym } from "../../new_fields/Doc";
-import { DocumentIcon } from "./nodes/DocumentIcon";
-import { StrCast, NumCast } from "../../new_fields/Types";
-import { returnFalse, emptyFunction, returnEmptyString, returnOne } from "../../Utils";
-import { Transform } from "../util/Transform";
-import { ObjectField } from "../../new_fields/ObjectField";
-import { DocumentView } from "./nodes/DocumentView";
-import { DocumentType } from '../documents/DocumentTypes';
-import { ClientRecommender } from "../ClientRecommender";
-import { DocServer } from "../DocServer";
-import { Id } from "../../new_fields/FieldSymbols";
-import { FieldView, FieldViewProps } from "./nodes/FieldView";
-import { DocumentManager } from "../util/DocumentManager";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { library } from "@fortawesome/fontawesome-svg-core";
-import { faBullseye, faLink } from "@fortawesome/free-solid-svg-icons";
-import { DocUtils } from "../documents/Documents";
-
-export interface RecProps {
-    documents: { preview: Doc, similarity: number }[];
-    node: Doc;
-}
-
-library.add(faBullseye, faLink);
-
-@observer
-export class RecommendationsBox extends React.Component<FieldViewProps> {
-
-    public static LayoutString(fieldKey?: string) { return FieldView.LayoutString(RecommendationsBox, fieldKey); }
-
-    static Instance: RecommendationsBox;
-    // @observable private _display: boolean = false;
-    @observable private _pageX: number = 0;
-    @observable private _pageY: number = 0;
-    @observable private _width: number = 0;
-    @observable private _height: number = 0;
-    // @observable private _documents: { preview: Doc, score: number }[] = [];
-    private previewDocs: Doc[] = [];
-
-    constructor(props: FieldViewProps) {
-        super(props);
-        RecommendationsBox.Instance = this;
-    }
-
-    private DocumentIcon(doc: Doc) {
-        let layoutresult = StrCast(doc.type);
-        let renderDoc = doc;
-        //let box: number[] = [];
-        if (layoutresult.indexOf(DocumentType.COL) !== -1) {
-            renderDoc = Doc.MakeDelegate(renderDoc);
-            let bounds = DocListCast(renderDoc.data).reduce((bounds, doc) => {
-                var [sptX, sptY] = [NumCast(doc.x), NumCast(doc.y)];
-                let [bptX, bptY] = [sptX + doc[WidthSym](), sptY + doc[HeightSym]()];
-                return {
-                    x: Math.min(sptX, bounds.x), y: Math.min(sptY, bounds.y),
-                    r: Math.max(bptX, bounds.r), b: Math.max(bptY, bounds.b)
-                };
-            }, { x: Number.MAX_VALUE, y: Number.MAX_VALUE, r: Number.MIN_VALUE, b: Number.MIN_VALUE });
-        }
-        let returnXDimension = () => 150;
-        let returnYDimension = () => 150;
-        let scale = () => returnXDimension() / NumCast(renderDoc.nativeWidth, returnXDimension());
-        //let scale = () => 1;
-        let newRenderDoc = Doc.MakeAlias(renderDoc); ///   newRenderDoc -> renderDoc -> render"data"Doc -> TextProt
-        newRenderDoc.height = NumCast(this.props.Document.documentIconHeight);
-        newRenderDoc.autoHeight = false;
-        const docview = <div>
-            <DocumentView
-                fitToBox={StrCast(doc.type).indexOf(DocumentType.COL) !== -1}
-                Document={newRenderDoc}
-                addDocument={returnFalse}
-                removeDocument={returnFalse}
-                ruleProvider={undefined}
-                ScreenToLocalTransform={Transform.Identity}
-                addDocTab={returnFalse}
-                pinToPres={returnFalse}
-                renderDepth={1}
-                PanelWidth={returnXDimension}
-                PanelHeight={returnYDimension}
-                focus={emptyFunction}
-                backgroundColor={returnEmptyString}
-                parentActive={returnFalse}
-                whenActiveChanged={returnFalse}
-                bringToFront={emptyFunction}
-                zoomToScale={emptyFunction}
-                getScale={returnOne}
-                ContainingCollectionView={undefined}
-                ContainingCollectionDoc={undefined}
-                ContentScaling={scale}
-            />
-        </div>;
-        return docview;
-
-    }
-
-    // @action
-    // closeMenu = () => {
-    //     this._display = false;
-    //     this.previewDocs.forEach(doc => DocServer.DeleteDocument(doc[Id]));
-    //     this.previewDocs = [];
-    // }
-
-    // @action
-    // resetDocuments = () => {
-    //     this._documents = [];
-    // }
-
-    // @action
-    // displayRecommendations(x: number, y: number) {
-    //     this._pageX = x;
-    //     this._pageY = y;
-    //     this._display = true;
-    // }
-
-    static readonly buffer = 20;
-
-    // get pageX() {
-    //     const x = this._pageX;
-    //     if (x < 0) {
-    //         return 0;
-    //     }
-    //     const width = this._width;
-    //     if (x + width > window.innerWidth - RecommendationsBox.buffer) {
-    //         return window.innerWidth - RecommendationsBox.buffer - width;
-    //     }
-    //     return x;
-    // }
-
-    // get pageY() {
-    //     const y = this._pageY;
-    //     if (y < 0) {
-    //         return 0;
-    //     }
-    //     const height = this._height;
-    //     if (y + height > window.innerHeight - RecommendationsBox.buffer) {
-    //         return window.innerHeight - RecommendationsBox.buffer - height;
-    //     }
-    //     return y;
-    // }
-
-    render() {
-        // if (!this._display) {
-        //     return null;
-        // }
-        // let style = { left: this.pageX, top: this.pageY };
-        //const transform = "translate(" + (NumCast(this.props.node.x) + 350) + "px, " + NumCast(this.props.node.y) + "px"
-        let title = StrCast((this.props.Document.sourceDoc as Doc).title);
-        if (title.length > 15) {
-            title = title.substring(0, 15) + "...";
-        }
-        return (
-            // <Measure offset onResize={action((r: any) => { this._width = r.offset.width; this._height = r.offset.height; })}>
-            // {({ measureRef }) => (
-            <div className="rec-scroll">
-                <p>Recommendations for "{title}"</p>
-                {DocListCast(this.props.Document.data).map(doc => {
-                    return (
-                        <div className="content">
-                            <span style={{ height: NumCast(this.props.Document.documentIconHeight) }} className="image-background">
-                                {this.DocumentIcon(doc)}
-                            </span>
-                            <span className="score">{NumCast(doc.score).toFixed(4)}</span>
-                            <div style={{ marginRight: 50 }} onClick={() => DocumentManager.Instance.jumpToDocument(doc, false)}>
-                                <FontAwesomeIcon className="documentdecorations-icon" icon={"bullseye"} size="sm" />
-                            </div>
-                            <div style={{ marginRight: 50 }} onClick={() => DocUtils.MakeLink({ doc: this.props.Document.sourceDoc as Doc }, { doc: doc }, "User Selected Link", "Generated from Recommender", undefined)}>
-                                <FontAwesomeIcon className="documentdecorations-icon" icon={"link"} size="sm" />
-                            </div>
-                        </div>
-                    );
-                })}
-
-            </div>
-            // );
-            // }
-
-            // </Measure>
-        );
-    }
-}
\ No newline at end of file
diff --git a/src/client/views/RecommendationsBox.scss b/src/client/views/RecommendationsBox.scss
new file mode 100644
index 000000000..dd8a105f6
--- /dev/null
+++ b/src/client/views/RecommendationsBox.scss
@@ -0,0 +1,68 @@
+@import "globalCssVariables";
+
+.rec-content *{
+    display: inline-block;
+    margin: auto;
+    width: 50;
+    height: 150px;
+    border: 1px dashed grey;
+    padding: 10px 10px;
+}
+
+.rec-content {
+    float: left;
+    width: inherit;
+    align-content: center;
+}
+
+.rec-scroll {
+    overflow-y: scroll;
+    overflow-x: hidden;
+    position: absolute;
+    pointer-events: all;
+    // display: flex;
+    z-index: 10000;
+    box-shadow: gray 0.2vw 0.2vw 0.4vw;
+    // flex-direction: column;
+    background: whitesmoke;
+    padding-bottom: 10px;
+    padding-top: 20px;
+    // border-radius: 15px;
+    border: solid #BBBBBBBB 1px;
+    width: 100%;
+    text-align: center;
+    // max-height: 250px;
+    height: 100%;
+    text-transform: uppercase;
+    color: grey;
+    letter-spacing: 2px;
+}
+
+.content {
+    padding: 10px;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+}
+
+.image-background {
+    pointer-events: none;
+    background-color: transparent;
+    width: 50%;
+    text-align: center;
+    margin-left: 5px;
+}
+
+img{
+    width: 100%;
+    height: 100%;
+}
+
+.score {
+    // margin-left: 15px;
+    width: 50%;
+    height: 100%;
+    text-align: center;
+    margin-left: 10px;
+}
diff --git a/src/client/views/RecommendationsBox.tsx b/src/client/views/RecommendationsBox.tsx
new file mode 100644
index 000000000..3938a8690
--- /dev/null
+++ b/src/client/views/RecommendationsBox.tsx
@@ -0,0 +1,185 @@
+import { observer } from "mobx-react";
+import React = require("react");
+import { observable, action } from "mobx";
+import Measure from "react-measure";
+import "./RecommendationsBox.scss";
+import { Doc, DocListCast, WidthSym, HeightSym } from "../../new_fields/Doc";
+import { DocumentIcon } from "./nodes/DocumentIcon";
+import { StrCast, NumCast } from "../../new_fields/Types";
+import { returnFalse, emptyFunction, returnEmptyString, returnOne } from "../../Utils";
+import { Transform } from "../util/Transform";
+import { ObjectField } from "../../new_fields/ObjectField";
+import { DocumentView } from "./nodes/DocumentView";
+import { DocumentType } from '../documents/DocumentTypes';
+import { ClientRecommender } from "../ClientRecommender";
+import { DocServer } from "../DocServer";
+import { Id } from "../../new_fields/FieldSymbols";
+import { FieldView, FieldViewProps } from "./nodes/FieldView";
+import { DocumentManager } from "../util/DocumentManager";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { library } from "@fortawesome/fontawesome-svg-core";
+import { faBullseye, faLink } from "@fortawesome/free-solid-svg-icons";
+import { DocUtils } from "../documents/Documents";
+
+export interface RecProps {
+    documents: { preview: Doc, similarity: number }[];
+    node: Doc;
+}
+
+library.add(faBullseye, faLink);
+
+@observer
+export class RecommendationsBox extends React.Component<FieldViewProps> {
+
+    public static LayoutString(fieldKey?: string) { return FieldView.LayoutString(RecommendationsBox, fieldKey); }
+
+    static Instance: RecommendationsBox;
+    // @observable private _display: boolean = false;
+    @observable private _pageX: number = 0;
+    @observable private _pageY: number = 0;
+    @observable private _width: number = 0;
+    @observable private _height: number = 0;
+    // @observable private _documents: { preview: Doc, score: number }[] = [];
+    private previewDocs: Doc[] = [];
+
+    constructor(props: FieldViewProps) {
+        super(props);
+        RecommendationsBox.Instance = this;
+    }
+
+    private DocumentIcon(doc: Doc) {
+        let layoutresult = StrCast(doc.type);
+        let renderDoc = doc;
+        //let box: number[] = [];
+        if (layoutresult.indexOf(DocumentType.COL) !== -1) {
+            renderDoc = Doc.MakeDelegate(renderDoc);
+            let bounds = DocListCast(renderDoc.data).reduce((bounds, doc) => {
+                var [sptX, sptY] = [NumCast(doc.x), NumCast(doc.y)];
+                let [bptX, bptY] = [sptX + doc[WidthSym](), sptY + doc[HeightSym]()];
+                return {
+                    x: Math.min(sptX, bounds.x), y: Math.min(sptY, bounds.y),
+                    r: Math.max(bptX, bounds.r), b: Math.max(bptY, bounds.b)
+                };
+            }, { x: Number.MAX_VALUE, y: Number.MAX_VALUE, r: Number.MIN_VALUE, b: Number.MIN_VALUE });
+        }
+        let returnXDimension = () => 150;
+        let returnYDimension = () => 150;
+        let scale = () => returnXDimension() / NumCast(renderDoc.nativeWidth, returnXDimension());
+        //let scale = () => 1;
+        let newRenderDoc = Doc.MakeAlias(renderDoc); ///   newRenderDoc -> renderDoc -> render"data"Doc -> TextProt
+        newRenderDoc.height = NumCast(this.props.Document.documentIconHeight);
+        newRenderDoc.autoHeight = false;
+        const docview = <div>
+            <DocumentView
+                fitToBox={StrCast(doc.type).indexOf(DocumentType.COL) !== -1}
+                Document={newRenderDoc}
+                addDocument={returnFalse}
+                removeDocument={returnFalse}
+                ruleProvider={undefined}
+                ScreenToLocalTransform={Transform.Identity}
+                addDocTab={returnFalse}
+                pinToPres={returnFalse}
+                renderDepth={1}
+                PanelWidth={returnXDimension}
+                PanelHeight={returnYDimension}
+                focus={emptyFunction}
+                backgroundColor={returnEmptyString}
+                parentActive={returnFalse}
+                whenActiveChanged={returnFalse}
+                bringToFront={emptyFunction}
+                zoomToScale={emptyFunction}
+                getScale={returnOne}
+                ContainingCollectionView={undefined}
+                ContainingCollectionDoc={undefined}
+                ContentScaling={scale}
+            />
+        </div>;
+        return docview;
+
+    }
+
+    // @action
+    // closeMenu = () => {
+    //     this._display = false;
+    //     this.previewDocs.forEach(doc => DocServer.DeleteDocument(doc[Id]));
+    //     this.previewDocs = [];
+    // }
+
+    // @action
+    // resetDocuments = () => {
+    //     this._documents = [];
+    // }
+
+    // @action
+    // displayRecommendations(x: number, y: number) {
+    //     this._pageX = x;
+    //     this._pageY = y;
+    //     this._display = true;
+    // }
+
+    static readonly buffer = 20;
+
+    // get pageX() {
+    //     const x = this._pageX;
+    //     if (x < 0) {
+    //         return 0;
+    //     }
+    //     const width = this._width;
+    //     if (x + width > window.innerWidth - RecommendationsBox.buffer) {
+    //         return window.innerWidth - RecommendationsBox.buffer - width;
+    //     }
+    //     return x;
+    // }
+
+    // get pageY() {
+    //     const y = this._pageY;
+    //     if (y < 0) {
+    //         return 0;
+    //     }
+    //     const height = this._height;
+    //     if (y + height > window.innerHeight - RecommendationsBox.buffer) {
+    //         return window.innerHeight - RecommendationsBox.buffer - height;
+    //     }
+    //     return y;
+    // }
+
+    render() {
+        // if (!this._display) {
+        //     return null;
+        // }
+        // let style = { left: this.pageX, top: this.pageY };
+        //const transform = "translate(" + (NumCast(this.props.node.x) + 350) + "px, " + NumCast(this.props.node.y) + "px"
+        let title = StrCast((this.props.Document.sourceDoc as Doc).title);
+        if (title.length > 15) {
+            title = title.substring(0, 15) + "...";
+        }
+        return (
+            // <Measure offset onResize={action((r: any) => { this._width = r.offset.width; this._height = r.offset.height; })}>
+            // {({ measureRef }) => (
+            <div className="rec-scroll">
+                <p>Recommendations for "{title}"</p>
+                {DocListCast(this.props.Document.data).map(doc => {
+                    return (
+                        <div className="content">
+                            <span style={{ height: NumCast(this.props.Document.documentIconHeight) }} className="image-background">
+                                {this.DocumentIcon(doc)}
+                            </span>
+                            <span className="score">{NumCast(doc.score).toFixed(4)}</span>
+                            <div style={{ marginRight: 50 }} onClick={() => DocumentManager.Instance.jumpToDocument(doc, false)}>
+                                <FontAwesomeIcon className="documentdecorations-icon" icon={"bullseye"} size="sm" />
+                            </div>
+                            <div style={{ marginRight: 50 }} onClick={() => DocUtils.MakeLink({ doc: this.props.Document.sourceDoc as Doc }, { doc: doc }, "User Selected Link", "Generated from Recommender", undefined)}>
+                                <FontAwesomeIcon className="documentdecorations-icon" icon={"link"} size="sm" />
+                            </div>
+                        </div>
+                    );
+                })}
+
+            </div>
+            // );
+            // }
+
+            // </Measure>
+        );
+    }
+}
\ No newline at end of file
diff --git a/src/client/views/nodes/DocumentContentsView.tsx b/src/client/views/nodes/DocumentContentsView.tsx
index 32d74b193..01096e5e5 100644
--- a/src/client/views/nodes/DocumentContentsView.tsx
+++ b/src/client/views/nodes/DocumentContentsView.tsx
@@ -31,7 +31,7 @@ import { WebBox } from "./WebBox";
 import React = require("react");
 import { Without, OmitKeys } from "../../../Utils";
 import { Cast } from "../../../new_fields/Types";
-import { RecommendationsBox } from "../../views/Recommendations";
+import { RecommendationsBox } from "../RecommendationsBox";
 const JsxParser = require('react-jsx-parser').default; //TODO Why does this need to be imported like this?
 
 type BindingProps = Without<FieldViewProps, 'fieldKey'>;
@@ -96,7 +96,7 @@ export class DocumentContentsView extends React.Component<DocumentViewProps & {
                 components={{
                     FormattedTextBox, ImageBox, IconBox, DirectoryImportBox, FontIconBox: FontIconBox, ButtonBox, FieldView,
                     CollectionFreeFormView, CollectionDockingView, CollectionSchemaView, CollectionView, WebBox, KeyValueBox,
-                    PDFBox, VideoBox, AudioBox, HistogramBox, PresBox, YoutubeBox, LinkFollowBox, PresElementBox, QueryBox, ColorBox, DocuLinkBox
+                    PDFBox, VideoBox, AudioBox, HistogramBox, PresBox, YoutubeBox, LinkFollowBox, PresElementBox, QueryBox, ColorBox, DocuLinkBox, RecommendationsBox
                 }}
                 bindings={this.CreateBindings()}
                 jsx={this.layout}
diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index 56a399139..bc7cef650 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -34,7 +34,7 @@ import "./DocumentView.scss";
 import { FormattedTextBox } from './FormattedTextBox';
 import React = require("react");
 import requestPromise = require('request-promise');
-import { RecommendationsBox } from '../Recommendations';
+import { RecommendationsBox } from '../RecommendationsBox';
 import { SearchUtil } from '../../util/SearchUtil';
 import { ClientRecommender } from '../../ClientRecommender';
 import { DocumentType } from '../../documents/DocumentTypes';
-- 
cgit v1.2.3-70-g09d2

