keyphrase query ui

6 files changed, 112 insertions, 17 deletions

diff --git a/src/client/ClientRecommender.tsx b/src/client/ClientRecommender.tsx
index d2e2330b5..b384a8ebe 100644
--- a/src/client/ClientRecommender.tsx
+++ b/src/client/ClientRecommender.tsx
@@ -17,6 +17,7 @@ import { listSpec } from "../new_fields/Schema";
 import { Identified } from "./Network";
 import { ComputedField } from "../new_fields/ScriptField";
 import { ImageField } from "../new_fields/URLField";
+import { KeyphraseQueryView } from "./views/KeyphraseQueryView";
 
 export interface RecommenderProps {
     title: string;
@@ -279,6 +280,7 @@ export class ClientRecommender extends React.Component<RecommenderProps> {
                         highKP = [sorted_keywords[0].text];
                     }
                 });
+                let kpqv = new KeyphraseQueryView({ keyphrases: ["hello"] });
                 ext_recs = await this.sendRequest(highKP, api);
             }
 
diff --git a/src/client/cognitive_services/CognitiveServices.ts b/src/client/cognitive_services/CognitiveServices.ts
index becd38a99..356cf52ca 100644
--- a/src/client/cognitive_services/CognitiveServices.ts
+++ b/src/client/cognitive_services/CognitiveServices.ts
@@ -276,6 +276,55 @@ export namespace CognitiveServices {
 
     }
 
+    export namespace HathiTrust {
+        export const Manager: APIManager<string> = {
+            converter: (data: string) => {
+                return data;
+            },
+            requester: async (apiKey: string, query: string) => {
+                let xhttp = new XMLHttpRequest();
+                let serverAddress = "https://babel.hathitrust.org/cgi/htd/​";
+                let endpoint = serverAddress + '/bing/v5.0/search?q=' + encodeURIComponent(query);
+                let promisified = (resolve: any, reject: any) => {
+                    xhttp.onreadystatechange = function () {
+                        if (this.readyState === 4) {
+                            let result = xhttp.responseText;
+                            switch (this.status) {
+                                case 200:
+                                    return resolve(result);
+                                case 400:
+                                default:
+                                    return reject(result);
+                            }
+                        }
+                    };
+
+                    if (apiKey) {
+                        xhttp.open("GET", endpoint, true);
+                        xhttp.setRequestHeader('Ocp-Apim-Subscription-Key', apiKey);
+                        xhttp.setRequestHeader('Content-Type', 'application/json');
+                        xhttp.send();
+                    }
+                    else {
+                        console.log("API key for BING unavailable");
+                    }
+                };
+                return new Promise<any>(promisified);
+            }
+
+        };
+
+        export namespace Appliers {
+            export const analyzer = async (query: string, converter: BingConverter) => {
+                let results = await ExecuteQuery(Service.Bing, Manager, query);
+                console.log("Bing results: ", results);
+                const { title_vals, url_vals } = await converter(results);
+                return { title_vals, url_vals };
+            };
+        }
+
+    }
+
 
     export namespace Text {
         export const Manager: APIManager<string> = {
diff --git a/src/client/views/KeyphraseQueryView.scss b/src/client/views/KeyphraseQueryView.scss
new file mode 100644
index 000000000..ac715e5e7
--- /dev/null
+++ b/src/client/views/KeyphraseQueryView.scss
@@ -0,0 +1,8 @@
+.fading {
+    animation: fanOut 1s
+}
+
+@keyframes fanOut {
+    from {opacity: 0;}
+    to {opacity: 1;}
+}
\ No newline at end of file
diff --git a/src/client/views/KeyphraseQueryView.tsx b/src/client/views/KeyphraseQueryView.tsx
new file mode 100644
index 000000000..1955399f9
--- /dev/null
+++ b/src/client/views/KeyphraseQueryView.tsx
@@ -0,0 +1,30 @@
+import { observer } from "mobx-react";
+import React = require("react");
+import "./KeyphraseQueryView.scss";
+
+// tslint:disable-next-line: class-name
+export interface KP_Props {
+    keyphrases: string[];
+}
+
+@observer
+export class KeyphraseQueryView extends React.Component<KP_Props>{
+    constructor(props: KP_Props) {
+        super(props);
+        console.log("FIRST KEY PHRASE: ", props.keyphrases[0]);
+    }
+
+    render() {
+        return (
+            <div>
+                <h1>Select queries to send:</h1>
+                {this.props.keyphrases.map((kp: string) => {
+                    setTimeout(() => {
+                        return (<p className="fading">{kp}</p>);
+                    }, 1000);
+
+                })}
+            </div>
+        );
+    }
+}
\ No newline at end of file
diff --git a/src/client/views/collections/CollectionViewChromes.scss b/src/client/views/collections/CollectionViewChromes.scss
index 64411b5fe..1889a192c 100644
--- a/src/client/views/collections/CollectionViewChromes.scss
+++ b/src/client/views/collections/CollectionViewChromes.scss
@@ -247,7 +247,7 @@
     display:flex;
     flex-direction: row;
     width: 150px;
-    margin: auto 0 auto auto;
+    margin: auto auto auto auto;
 }
 
 .react-autosuggest__container {
diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index 2455c320d..b82486109 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -46,6 +46,7 @@ import { RecommendationsBox } from '../RecommendationsBox';
 import { SearchUtil } from '../../util/SearchUtil';
 import { ClientRecommender } from '../../ClientRecommender';
 import { SchemaHeaderField } from '../../../new_fields/SchemaHeaderField';
+import { KeyphraseQueryView } from '../KeyphraseQueryView';
 
 library.add(fa.faBrain);
 library.add(fa.faEdit);
@@ -117,6 +118,7 @@ export class DocumentView extends DocComponent<DocumentViewProps, Document>(Docu
     private _hitTemplateDrag = false;
     private _mainCont = React.createRef<HTMLDivElement>();
     private _dropDisposer?: DragManager.DragDropDisposer;
+    private _showKPQuery: boolean = false;
 
     public get ContentDiv() { return this._mainCont.current; }
     @computed get active() { return SelectionManager.IsSelected(this) || this.props.parentActive(); }
@@ -657,6 +659,7 @@ export class DocumentView extends DocComponent<DocumentViewProps, Document>(Docu
             bodies.push(body);
         }
         CollectionDockingView.AddRightSplit(Docs.Create.SchemaDocument(headers, bodies, { title: `Showing External Recommendations for "${StrCast(doc.title)}"` }), undefined);
+        this._showKPQuery = true;
     }
 
     onPointerEnter = (e: React.PointerEvent): void => { Doc.BrushDoc(this.props.Document); };
@@ -807,22 +810,25 @@ export class DocumentView extends DocComponent<DocumentViewProps, Document>(Docu
         const highlightColors = ["transparent", "maroon", "maroon", "yellow", "magenta", "cyan", "orange"];
         const highlightStyles = ["solid", "dashed", "solid", "solid", "solid", "solid", "solid", "solid"];
         let highlighting = fullDegree && this.layoutDoc.type !== DocumentType.FONTICON && this.layoutDoc.viewType !== CollectionViewType.Linear;
-        return <div className={`documentView-node${this.topMost ? "-topmost" : ""}`} ref={this._mainCont}
-            onDrop={this.onDrop} onContextMenu={this.onContextMenu} onPointerDown={this.onPointerDown} onClick={this.onClick}
-            onPointerEnter={() => Doc.BrushDoc(this.props.Document)} onPointerLeave={e => Doc.UnBrushDoc(this.props.Document)}
-            style={{
-                transition: this.Document.isAnimating !== undefined ? ".5s linear" : StrCast(this.Document.transition),
-                pointerEvents: this.Document.isBackground && !this.isSelected() ? "none" : "all",
-                color: StrCast(this.Document.color),
-                outline: highlighting && !borderRounding ? `${highlightColors[fullDegree]} ${highlightStyles[fullDegree]} ${localScale}px` : "solid 0px",
-                border: highlighting && borderRounding ? `${highlightStyles[fullDegree]} ${highlightColors[fullDegree]} ${localScale}px` : undefined,
-                background: this.layoutDoc.type === DocumentType.FONTICON || this.layoutDoc.viewType === CollectionViewType.Linear ? undefined : backgroundColor,
-                width: animwidth,
-                height: animheight,
-                transform: `scale(${this.layoutDoc.fitWidth ? 1 : this.props.ContentScaling()})`,
-                opacity: this.Document.opacity
-            }} >
-            {this.innards}
+        return <div>
+            <div className={`documentView-node${this.topMost ? "-topmost" : ""}`} ref={this._mainCont}
+                onDrop={this.onDrop} onContextMenu={this.onContextMenu} onPointerDown={this.onPointerDown} onClick={this.onClick}
+                onPointerEnter={() => Doc.BrushDoc(this.props.Document)} onPointerLeave={e => Doc.UnBrushDoc(this.props.Document)}
+                style={{
+                    transition: this.Document.isAnimating !== undefined ? ".5s linear" : StrCast(this.Document.transition),
+                    pointerEvents: this.Document.isBackground && !this.isSelected() ? "none" : "all",
+                    color: StrCast(this.Document.color),
+                    outline: highlighting && !borderRounding ? `${highlightColors[fullDegree]} ${highlightStyles[fullDegree]} ${localScale}px` : "solid 0px",
+                    border: highlighting && borderRounding ? `${highlightStyles[fullDegree]} ${highlightColors[fullDegree]} ${localScale}px` : undefined,
+                    background: this.layoutDoc.type === DocumentType.FONTICON || this.layoutDoc.viewType === CollectionViewType.Linear ? undefined : backgroundColor,
+                    width: animwidth,
+                    height: animheight,
+                    transform: `scale(${this.layoutDoc.fitWidth ? 1 : this.props.ContentScaling()})`,
+                    opacity: this.Document.opacity
+                }} >
+                {this.innards}
+            </div>
+            {this._showKPQuery ? <KeyphraseQueryView keyphrases={["bitch", "boy"]}></KeyphraseQueryView> : undefined}
         </div>;
     }
 }