3 files changed, 20 insertions, 8 deletions

diff --git a/scraper/client/common/autocomplete.component.js b/scraper/client/common/autocomplete.component.js
index 03039b1c..e2908cd1 100644
--- a/scraper/client/common/autocomplete.component.js
+++ b/scraper/client/common/autocomplete.component.js
@@ -70,9 +70,9 @@ class Autocomplete extends Component {
 
   componentDidUpdate(oldProps) {
     if (this.props.vetting !== oldProps.vetting) {
-      this.handleChange({ target: { value: this.props.vetting }})
+      this.handleChange({ target: { value: this.props.vetting } })
     } else if (this.props.value !== oldProps.value) {
-      this.handleChange({ target: { value: this.props.value }})
+      this.setState({ q: '' })
     }
   }
 
@@ -155,13 +155,14 @@ class Autocomplete extends Component {
   }
 
   handleSelect(name) {
+    console.log('select', name)
     if (this.props.onSelect) this.props.onSelect(name)
-    this.setState({ q: "", selected: 0, matches: [] })
+    this.setState({ q: name, selected: 0, matches: [] })
   }
 
   handleCancel() {
     if (this.props.onCancel) this.props.onCancel()
-    this.setState({ q: "", selected: 0, matches: [] })
+    this.setState({ q: '', selected: 0, matches: [] })
   }
 
   render() {
@@ -184,7 +185,7 @@ class Autocomplete extends Component {
         <input
           type="text"
           name="q"
-          value={this.state.q}
+          value={this.state.q || this.props.value}
           onKeyDown={this.handleKeyDown}
           onChange={this.handleChange}
           autoFocus={this.props.autoFocus}
diff --git a/scraper/client/common/common.css b/scraper/client/common/common.css
index fb31aefb..7fdaf01c 100644
--- a/scraper/client/common/common.css
+++ b/scraper/client/common/common.css
@@ -63,12 +63,13 @@ header > section {
   justify-content: flex-start;
   align-items: center;
   display: flex;
-  flex: 1 0;
+  flex: 2 0;
   font-weight: bold;
   padding: 10px;
 }
 header > section:last-of-type {
   justify-content: flex-end;
+  flex: 1 0;
 }
 
 /* sidebar / body columns */
diff --git a/scraper/client/common/header.component.js b/scraper/client/common/header.component.js
index 0cd67c76..4da5af8a 100644
--- a/scraper/client/common/header.component.js
+++ b/scraper/client/common/header.component.js
@@ -21,16 +21,26 @@ class Header extends Component {
 
   render() {
     let { papers } = this.props.api.papers
+    let { dataset } = this.props.api.paperInfo
     papers = papers || {}
     const paperOptions = Object.keys(papers).map(key => (
-      <option key={key} value={key}>{papers[key][1]}</option>
+      <option key={key} value={key}>{papers[key].name}</option>
     ))
     return (
       <header>
         <section>
-          <select onChange={this.pickPaper.bind(this)}>
+          <select value={dataset && dataset.key} onChange={this.pickPaper.bind(this)}>
             {paperOptions}
           </select>
+          {dataset && 
+            <div>
+              {dataset.name_full}{' - '}
+              <a href={"/paper/" + dataset.key + "/info"}>Info</a>{' - '}
+              <a href={"/paper/" + dataset.key + "/citations/"}>Citations</a>{' - '}
+              <a href={"/paper/" + dataset.key + "/unknown/"}>Unknown</a>{' - '}
+              <a href={"/paper/" + dataset.key + "/random/"}>Random</a>
+            </div>
+          }
         </section>
         <section></section>
       </header>