Search terms highlighted in Wire [CPCN-17]

assets/ui/components/ArticleHeadline.jsx

@@ -2,9 +2,13 @@ import React from 'react';
 import PropTypes from 'prop-types';
 
 export default function ArticleHeadline({item}) {
-    return (
-        item.headline && <h2 className='wire-column__preview__headline'>{item.headline}</h2> || null
-    );
+    return item.headline ? (
+        <h2 className="wire-column__preview__headline">
+            {item.es_highlight && item.es_highlight.headline ? (
+                <span dangerouslySetInnerHTML={{__html: item.es_highlight.headline[0]}} />
+            ) : item.headline}
+        </h2>
+    ) : null;
 }
 
 ArticleHeadline.propTypes = {

assets/ui/components/ArticleSlugline.jsx

@@ -5,10 +5,14 @@ import {getSlugline} from 'utils';
 
 export default function ArticleSlugline({item}) {
     const slugline = getSlugline(item, true);
-
-    return !slugline ? null : (
-        <span className="wire-column__preview__slug">{slugline}</span>
-    );
+
+    return slugline ? (
+        <div className="wire-column__preview__slugline">
+            {item.es_highlight && item.es_highlight.slugline ? (
+                <span dangerouslySetInnerHTML={{__html: item.es_highlight.slugline[0]}} />
+            ) : slugline}
+        </div>
+    ) : null;
 }
 
 ArticleSlugline.propTypes = {

assets/wire/actions.js

@@ -226,7 +226,7 @@ export function search(state, next, aggs) {
         timezone_offset: getTimezoneOffset(),
         newsOnly,
         product: searchParams.product,
-        es_highlight: !searchParams.query ? null : 1,
+        es_highlight: !searchParams.query && !searchParams.advancedSearch ? null : 1,
         all_versions: !searchAllVersions ? null : 1,
         prepend_embargoed: !state.bookmarks ? null : 0,
         aggs: aggs === false ? '0' : '1',

assets/wire/components/WireListItem.jsx

@@ -186,7 +186,9 @@ class WireListItem extends React.Component {
                                 )}
                                 <Embargo item={item} />
                                 <UrgencyLabel item={item} listConfig={listConfig} filterGroupLabels={this.props.filterGroupLabels} />
-                                {item.headline}
+                                {item.es_highlight && item.es_highlight.headline ? <div
+                                    dangerouslySetInnerHTML={({__html: item.es_highlight.headline && item.es_highlight.headline[0]})}
+                                /> : item.headline}
                             </div>
                         </h4>
 
@@ -199,7 +201,9 @@ class WireListItem extends React.Component {
                                 />
                                 <div className="wire-articles__item__meta-info">
                                     <span className="bold">
-                                        {getSlugline(item, true)}
+                                        {item.es_highlight && item.es_highlight.slugline ? <div
+                                            dangerouslySetInnerHTML={({__html:item.es_highlight.slugline && item.es_highlight.slugline[0]})}
+                                        /> : getSlugline(item, true)}
                                     </span>
                                     <span>
                                         <FieldComponents
@@ -261,7 +265,9 @@ class WireListItem extends React.Component {
 
                         {isExtended && (
                             <div className="wire-articles__item__text">
-                                <p>{shortText(item, 40, listConfig)}</p>
+                                {item.es_highlight ? <div
+                                    dangerouslySetInnerHTML={({__html:item.es_highlight.body_html && item.es_highlight.body_html[0]})}
+                                /> : <p>{shortText(item, 40, listConfig)}</p>}
                             </div>
                         )}
 

newsroom/search.py

@@ -513,7 +513,12 @@ def prefill_search_items(self, search):
     def prefill_search_highlights(self, search, req):
         query_string = search.args.get("q")
         query_string_settings = app.config["ELASTICSEARCH_SETTINGS"]["settings"]["query_string"]
-        if app.data.elastic.should_highlight(req) and query_string:
+        advanced_search = search.args.get("advanced_search")
+        if app.data.elastic.should_highlight(req) and (
+            query_string
+            or (advanced_search and json.loads(advanced_search).get("all"))
+            or (advanced_search and json.loads(advanced_search).get("any"))
+        ):
             elastic_highlight_query = get_elastic_highlight_query(
                 query_string={
                     "query": query_string,
@@ -522,7 +527,11 @@ def prefill_search_highlights(self, search, req):
                     "lenient": True,
                 },
             )
-            elastic_highlight_query["fields"] = {"body_html": elastic_highlight_query["fields"]["body_html"]}
+            elastic_highlight_query["fields"] = {
+                "body_html": {},
+                "headline": {},
+                "slugline": {},
+            }
 
             search.highlight = elastic_highlight_query
 

tests/core/test_wire.py

@@ -801,10 +801,60 @@ def test_wire_delete(client, app):
 
 
 def test_highlighting(client, app):
-    app.data.insert("items", [{"_id": "foo", "body_html": "Story that involves cheese and onions"}])
+    app.data.insert(
+        "items",
+        [
+            {
+                "_id": "foo",
+                "body_html": "Story that involves cheese and onions",
+                "slugline": "That's the test slugline cheese",
+                "headline": "Demo Article",
+            }
+        ],
+    )
     resp = client.get("/wire/search?q=cheese&es_highlight=1")
     data = json.loads(resp.get_data())
     assert (
         data["_items"][0]["es_highlight"]["body_html"][0] == 'Story that involves <span class="es-highlight">'
         "cheese</span> and onions"
     )
+    assert (
+        data["_items"][0]["es_highlight"]["slugline"][0]
+        == 'That\'s the test slugline <span class="es-highlight">cheese</span>'
+    )
+
+    resp = client.get("/wire/search?q=demo&es_highlight=1")
+    data = json.loads(resp.get_data())
+    assert data["_items"][0]["es_highlight"]["headline"][0] == '<span class="es-highlight">Demo</span> Article'
+
+
+def test_highlighting_with_advanced_search(client, app):
+    app.data.insert(
+        "items",
+        [
+            {
+                "_id": "foo",
+                "body_html": "Story that involves cheese and onions",
+                "slugline": "That's the test slugline cheese",
+                "headline": "Demo Article",
+            }
+        ],
+    )
+    advanced_search_params = parse.quote('{"fields":[],"all":"demo"}')
+    url = f"/wire/search?advanced_search={advanced_search_params}&es_highlight=1"
+    resp = client.get(url)
+    data = json.loads(resp.get_data())
+    assert data["_items"][0]["es_highlight"]["headline"][0] == '<span class="es-highlight">Demo</span> Article'
+
+    advanced_search_params = parse.quote('{"fields":[],"any":"cheese"}')
+    url = f"/wire/search?advanced_search={advanced_search_params}&es_highlight=1"
+    resp = client.get(url)
+    data = json.loads(resp.get_data())
+    assert (
+        data["_items"][0]["es_highlight"]["slugline"][0]
+        == 'That\'s the test slugline <span class="es-highlight">cheese</span>'
+    )
+    assert (
+        data["_items"][0]["es_highlight"]["body_html"][0] == 'Story that involves <span class="es-highlight">'
+        "cheese</span> and onions"
+    )