Version 0.20.0

package.json

@@ -64,13 +64,14 @@
     "hyperscript-helpers": "^3.0.2",
     "jszip": "^3.4.0",
     "leven": "^2.1.0",
-    "lodash": "^4.17.15",
+    "lodash": "^4.17.21",
     "lru-cache": "^4.1.1",
     "minisearch": "^3.0.2",
     "morgan": "^1.9.1",
     "mousetrap": "^1.6.1",
+    "node-cache": "^5.1.2",
     "node-cron": "^2.0.3",
-    "node-fetch": "^2.6.1",
+    "node-fetch": "^2.6.7",
     "nodemailer": "^4.6.8",
     "normalize.css": "^5.0.0",
     "p-cancelable": "^0.5.1",
@@ -88,7 +89,7 @@
     "serve-favicon": "^2.3.0",
     "smoothscroll-polyfill": "^0.4.4",
     "soap": "^0.25.0",
-    "socket.io": "^2.1.1",
+    "socket.io": "^2.4.0",
     "socket.io-client": "^2.1.1",
     "swagger-jsdoc": "^4.0.0",
     "swagger-ui-express": "^4.1.4",
@@ -133,5 +134,5 @@
   "engines": {
     "node": ">=10.0.0"
   },
-  "version": "0.19.0"
+  "version": "0.20.0"
 }

src/client/components/carousel.js

@@ -3,10 +3,8 @@ import h from 'react-hyperscript';
 import { Component } from 'react';
 import _ from 'lodash';
 import { formatDistanceToNow } from 'date-fns';
-import queryString from 'query-string';
 import { makeClassList } from '../dom';
 
-import Document from '../../model/document';
 
 export const CAROUSEL_CONTENT = {
   FIGURE: 'figure',
@@ -17,21 +15,16 @@ export class Carousel extends Component {
   constructor(props){
     super(props);
 
-    const DOCUMENT_STATUS_FIELDS = Document.statusFields();
-
     this.state = {
       pagerLeftAvailable: false,
       pagerRightAvailable: false,
       isScrolling: false,
+      refreshing: true,
       docs: [],
       content: props.content,
       refresh: props.refresh || (() => { // get all docs from service by default
         const url = `/api/document`;
-        const params = queryString.stringify({
-          status: [DOCUMENT_STATUS_FIELDS.PUBLIC].join(','),
-          limit: 20
-        });
-        const doFetch = () => fetch(`${url}?${params}`);
+        const doFetch = () => fetch(url);
         const toJson = res => res.json();
 
         return tryPromise(doFetch).then(toJson);
@@ -56,6 +49,14 @@ export class Carousel extends Component {
       this.updatePagerAvailabilityDebounced();
       this.setScrollState();
     };
+
+    const { bus } = this.props;
+
+    if (bus) {
+      bus.on('carouselrefresh', () => {
+        this.onRefreshRequested();
+      });
+    }
   }
 
   componentDidMount(){
@@ -118,9 +119,19 @@ export class Carousel extends Component {
   }
 
   refreshDocs(){
+    this.setState({ refreshing: true });
+
     const update = docs => new Promise(resolve => this.setState({ docs }, () => resolve(docs)));
 
-    return this.state.refresh().then(update);
+    return this.state.refresh().then(update).then(docs => {
+      this.setState({ refreshing: false });
+
+      return docs;
+    });
+  }
+
+  onRefreshRequested() {
+    this.refreshDocs().then(() => this.updatePagerAvailabilityDebounced());
   }
 
   render(){
@@ -199,7 +210,7 @@ export class Carousel extends Component {
     };
 
     const docs = this.state.docs;
-
+    const refreshing = this.state.refreshing;
 
     return h('div.carousel', {
       className: makeClassList({
@@ -222,13 +233,14 @@ export class Carousel extends Component {
       }, [
         h('i.carousel-pager-icon.material-icons', 'chevron_right')
       ]),
+      h('div.carousel-bg'),
       h('div.carousel-content', {
         className: makeClassList({
           'carousel-content-only-placeholders': docs.length === 0
         }),
         onScroll: () => this.onScrollExplore(),
         ref: el => this.exploreDocsContainer = el
-      }, (docs.length > 0 ? docs.map(exploreDocEntry) : docPlaceholders()).concat([
+      }, (!refreshing && docs.length > 0 ? docs.map(exploreDocEntry) : docPlaceholders()).concat([
         h('div.carousel-doc-spacer')
       ]))
     ]);

src/client/components/element-info/entity-info.js

@@ -600,9 +600,9 @@ class EntityInfo extends DataComponent {
       if( assoc == null ){
         const type = s.element.type();
         const name = s.name;
-        const entityNames = s.element.participants().map(ppt => ppt.name());
 
         if( isComplex(s.element.type()) ){
+          const entityNames = s.element.participants().map(ppt => ppt.name());
           children.push( h('div.entity-info-assoc', targetFromAssoc({ type, name, entityNames }, true )) );
           children.push( h('div.entity-info-related-papers', [
             h(RelatedPapers, { document, source: s.element })

src/client/components/home.js

@@ -5,8 +5,12 @@ import RequestForm from './request-form';
 import { makeClassList } from '../dom';
 import EventEmitter from 'eventemitter3';
 import { Carousel, CAROUSEL_CONTENT } from './carousel';
+import { tryPromise } from '../../util';
+import { formatDistanceToNow } from 'date-fns';
+import DocumentSearch from '../document-search';
 
 import { TWITTER_ACCOUNT_NAME, SAMPLE_DOC_ID, EMAIL_ADDRESS_INFO } from '../../config';
+import _ from 'lodash';
 
 const checkStatus = response => {
   if ( response.status >= 200 && response.status < 300 ) {
@@ -132,6 +136,21 @@ class Home extends Component {
     super(props);
 
     this.bus = new EventEmitter();
+
+    this.state = {
+      query: '',
+      searchMode: false
+    };
+
+    this.debouncedSearch = _.debounce(() => {
+      this.search();
+    }, 500);
+
+    this.docSearch = new DocumentSearch();
+
+    this.docSearchFetch = this.docSearch.fetch('/api/document');
+
+    this.docSearchFetch.then(docs => this.setState({ allDocs: docs, searchDocs: docs }));
   }
 
   componentDidMount(){
@@ -212,6 +231,49 @@ class Home extends Component {
 
   }
 
+  activateSearchMode() {
+    this.setState({ searchMode: true });
+  }
+
+  deactivateSearchMode() {
+    if (this.state.query) {
+      // keep in search mode
+    } else {
+      this.setState({ searchMode: false, query: '', searchDocs: this.state.allDocs });
+    }
+  }
+
+  updateSearchQuery(query) {
+    this.setState({ query });
+
+    if (query) {
+      this.activateSearchMode();
+
+      this.debouncedSearch();
+    } else {
+      this.setState({ searchDocs: this.state.allDocs });
+    }
+  }
+
+  clearSearchQuery() {
+    this.setState({ query: '', searchDocs: this.state.allDocs, searchMode: false });
+  }
+
+  search() {
+    const q = this.state.query;
+    const waitForFetch = () => this.docSearchFetch;
+    const doQuery = () => this.docSearch.search(q);
+
+    this.setState({ searching: true });
+
+    (tryPromise(waitForFetch)
+      .then(doQuery)
+      .then(docs => {
+        this.setState({ searchDocs: docs, searching: false });
+      })
+    );
+  }
+
   render(){
     const CTAPopover = props => {
       return h(Popover, {
@@ -257,13 +319,77 @@ class Home extends Component {
       ]);
     };
 
-    return h('div.home', [
+    const docCard = doc => {
+      const { title, authors: { authorList }, reference: journalName } = doc.citation;
+        let authorNames = authorList.map( a => a.name );
+        const id = doc.id;
+        const link = doc.publicUrl;
+
+        if( authorNames.length > 3 ){
+          authorNames = authorNames.slice(0, 2).concat([ '...', authorNames[authorNames.length - 1] ]);
+        }
+
+        const figureDiv = h('div.home-search-doc-figure', {
+          style: {
+            backgroundImage: `url('/api/document/${id}.png')`
+          }
+        });
+
+        return h('div.home-search-doc',  [
+          h('a', {
+            href: link,
+            target: '_blank'
+          }, [
+            h('div.home-search-doc-descr', [
+              h('div.home-search-doc-title', title),
+              h('div.home-search-doc-meta', [
+                h('div.home-search-doc-authors', authorNames.map((name, i) => h(`span.home-search-doc-author.home-search-doc-author-${i}`, name))),
+                h('div.home-search-doc-journal', journalName)
+              ]),
+              h('div.home-search-doc-footer', [
+                h('div.home-search-doc-text', doc.text),
+                h('div.home-search-doc-datestamp', formatDistanceToNow( new Date( doc.lastEditedDate || 0 ), { addSuffix: true } ))
+              ]),
+            ]),
+            figureDiv,
+            h('div.home-search-doc-journal-banner')
+          ])
+        ]);
+    };
+
+    return h('div.home', {
+      className: makeClassList({
+        'home-search-mode': this.state.searchMode,
+        'home-search-focus': this.state.searchFocus
+      })
+    }, [
       h('div.home-section.home-figure-section.home-banner', [
         h('div.home-nav', [
           h('div.home-nav-left', [
             h('div.home-nav-logo')
           ]),
           h('div.home-nav-right', [
+            h('span.home-nav-link.home-search-box-area', [
+              h('input.home-search-box.input-round.input-joined', {
+                value: this.state.query,
+                onChange: event => this.updateSearchQuery(event.target.value),
+                type: 'text',
+                placeholder: 'Search',
+                onFocus: () => {
+                  this.setState({ searchFocus: true });
+
+                  this.activateSearchMode();
+                },
+                onBlur: () => {
+                  this.setState({ searchFocus: false });
+                }
+              }),
+              h('button', {
+                onClick: () => this.clearSearchQuery()
+              }, [
+                h('i.material-icons', 'clear')
+              ])
+            ]),
             h('a.home-nav-link', [
               h(ContactPopover)
             ]),
@@ -471,6 +597,27 @@ class Home extends Component {
           ])
         ])
       ]),
+      h('div.home-section.home-search-results', [
+        this.state.searchMode ? (
+          this.state.searching ? (
+            h('div.home-search-results-searching', [
+              h('i.icon.icon-spinner')
+            ])
+          ) : (
+            this.state.searchDocs ?
+            (
+              this.state.searchDocs.length > 0 ? (
+                h('div.home-search-results-docs', this.state.searchDocs.map(docCard))
+              ) : (
+                h('div.home-search-results-none', 'There are no results for your search.')
+              )
+            )
+            : h('div.home-search-results-searching', [
+              h('i.icon.icon-spinner')
+            ])
+          )
+        ) : null
+      ]),
       h('div.home-footer', [
         h('p', [
           h('small', [