Improve search performance (#1339)

* Improve fulltext gambit

* Only search in visible posts

This change relies on the `visibility-scoping` branch to be merged.

* Change posts table to use InnoDB engine

Doing a JOIN between an InnoDB table (discussions) and a MyISAM table
(posts) is very very (very) bad for performance. FULLTEXT indexes are
fully supported in InnoDB now, and it is a superior engine in every
other way, so there is no longer any reason to be using MyISAM.

* Use ::class

* Only search for comment posts

* Add fulltext index to discussions.title

* Fix migration not working if there is a table prefix

* Update frontend appearance

* Apply fixes from StyleCI

[ci skip] [skip ci]

* Show search result excerpts on mobile

js/forum/src/components/DiscussionList.js

@@ -62,7 +62,7 @@ export default class DiscussionList extends Component {
     }
 
     return (
-      <div className="DiscussionList">
+      <div className={'DiscussionList'+(this.props.params.q ? ' DiscussionList--searchResults' : '')}>
         <ul className="DiscussionList-discussions">
           {this.discussions.map(discussion => {
             return (
@@ -94,7 +94,7 @@ export default class DiscussionList extends Component {
     if (this.props.params.q) {
       params.filter.q = this.props.params.q;
 
-      params.include.push('relevantPosts', 'relevantPosts.discussion', 'relevantPosts.user');
+      params.include.push('mostRelevantPost', 'mostRelevantPost.user');
     }
 
     return params;

js/forum/src/components/DiscussionListItem.js

@@ -62,14 +62,24 @@ export default class DiscussionListItem extends Component {
     const isUnread = discussion.isUnread();
     const isRead = discussion.isRead();
     const showUnread = !this.showRepliesCount() && isUnread;
-    const jumpTo = Math.min(discussion.lastPostNumber(), (discussion.readNumber() || 0) + 1);
-    const relevantPosts = this.props.params.q ? discussion.relevantPosts() : [];
+    let jumpTo = 0;
     const controls = DiscussionControls.controls(discussion, this).toArray();
     const attrs = this.attrs();
 
+    if (this.props.params.q) {
+      const post = discussion.mostRelevantPost();
+      if (post) {
+        jumpTo = post.number();
+      }
+
+      const phrase = this.props.params.q;
+      this.highlightRegExp = new RegExp(phrase+'|'+phrase.trim().replace(/\s+/g, '|'), 'gi');
+    } else {
+      jumpTo = Math.min(discussion.lastPostNumber(), (discussion.readNumber() || 0) + 1);
+    }
+
     return (
       <div {...attrs}>
-
         {controls.length ? Dropdown.component({
           icon: 'ellipsis-v',
           children: controls,
@@ -100,7 +110,7 @@ export default class DiscussionListItem extends Component {
           <a href={app.route.discussion(discussion, jumpTo)}
             config={m.route}
             className="DiscussionListItem-main">
-            <h3 className="DiscussionListItem-title">{highlight(discussion.title(), this.props.params.q)}</h3>
+            <h3 className="DiscussionListItem-title">{highlight(discussion.title(), this.highlightRegExp)}</h3>
             <ul className="DiscussionListItem-info">{listItems(this.infoItems().toArray())}</ul>
           </a>
 
@@ -109,13 +119,6 @@ export default class DiscussionListItem extends Component {
             title={showUnread ? app.translator.trans('core.forum.discussion_list.mark_as_read_tooltip') : ''}>
             {abbreviateNumber(discussion[showUnread ? 'unreadCount' : 'repliesCount']())}
           </span>
-
-          {relevantPosts && relevantPosts.length
-            ? <div className="DiscussionListItem-relevantPosts">
-                {relevantPosts.map(post => PostPreview.component({post, highlight: this.props.params.q}))}
-              </div>
-            : ''}
-
         </div>
       </div>
     );
@@ -188,12 +191,21 @@ export default class DiscussionListItem extends Component {
   infoItems() {
     const items = new ItemList();
 
-    items.add('terminalPost',
-      TerminalPost.component({
-        discussion: this.props.discussion,
-        lastPost: !this.showStartPost()
-      })
-    );
+    if (this.props.params.q) {
+      const post = this.props.discussion.mostRelevantPost() || this.props.discussion.startPost();
+
+      if (post && post.contentType() === 'comment') {
+        const excerpt = highlight(post.contentPlain(), this.highlightRegExp, 175);
+        items.add('excerpt', excerpt, -100);
+      }
+    } else {
+      items.add('terminalPost',
+        TerminalPost.component({
+          discussion: this.props.discussion,
+          lastPost: !this.showStartPost()
+        })
+      );
+    }
 
     return items;
   }

js/forum/src/components/DiscussionsSearchSource.js

@@ -20,7 +20,7 @@ export default class DiscussionsSearchSource {
     const params = {
       filter: {q: query},
       page: {limit: 3},
-      include: 'relevantPosts,relevantPosts.discussion,relevantPosts.user'
+      include: 'mostRelevantPost'
     };
 
     return app.store.find('discussions', params).then(results => this.results[query] = results);
@@ -41,14 +41,13 @@ export default class DiscussionsSearchSource {
         })}
       </li>,
       results.map(discussion => {
-        const relevantPosts = discussion.relevantPosts();
-        const post = relevantPosts && relevantPosts[0];
+        const mostRelevantPost = discussion.mostRelevantPost();
 
         return (
           <li className="DiscussionSearchResult" data-index={'discussions' + discussion.id()}>
-            <a href={app.route.discussion(discussion, post && post.number())} config={m.route}>
+            <a href={app.route.discussion(discussion, mostRelevantPost && mostRelevantPost.number())} config={m.route}>
               <div className="DiscussionSearchResult-title">{highlight(discussion.title(), query)}</div>
-              {post ? <div className="DiscussionSearchResult-excerpt">{highlight(post.contentPlain(), query, 100)}</div> : ''}
+              {mostRelevantPost ? <div className="DiscussionSearchResult-excerpt">{highlight(mostRelevantPost.contentPlain(), query, 100)}</div> : ''}
             </a>
           </li>
         );