Merge pull request #2211 from shinyichen/search-examples

Updated search examples

src/js/react/Recommender/components/SearchExamples.jsx.js

@@ -24,7 +24,7 @@ define([
       // eslint-disable-next-line react/jsx-fragments
       <React.Fragment>
         <dt>{label}</dt>
-        <dd>
+        <dd style={{ display: 'flex' }}>
           <button type="button" onClick={onClick} className="text-link">
             {text}
           </button>
@@ -54,51 +54,56 @@ define([
     tooltip: PropTypes.string,
   };
 
-  const SearchExamples = () => {
+  const SearchExamples = React.memo(() => {
     const dispatch = useDispatch();
     const onClick = (text) => {
       dispatch(updateSearchBar(text));
       dispatch(emitAnalytics(['send', 'event', 'interaction.suggestion-used']));
     };
 
+    const generateRandom = (max) => {
+      return Math.floor(Math.random() * max);
+    };
+
     return (
-      <div
-        style={{
-          paddingTop: '1rem',
-          display: 'flex',
-          justifyContent: 'space-between',
-          flexWrap: 'wrap',
-        }}
-      >
+      <div className="search-examples">
         <div className="quick-reference">
           <Dl>
-            {searchExamples.slice(0, 7).map((entry) => (
-              <Entry
-                label={entry.label}
-                text={entry.example}
-                tooltip={entry.tooltip}
-                onClick={() => onClick(entry.example)}
-                key={entry.label}
-              />
-            ))}
+            {searchExamples.slice(0, 7).map((entry) => {
+              const index = generateRandom(entry.examples.length - 1);
+              const example = entry.syntax.replace('%', entry.examples[index]);
+              return (
+                <Entry
+                  label={entry.label}
+                  text={example}
+                  tooltip={entry.tooltip}
+                  onClick={() => onClick(example)}
+                  key={entry.label}
+                />
+              );
+            })}
           </Dl>
         </div>
         <div className="quick-reference">
           <Dl>
-            {searchExamples.slice(7).map((entry) => (
-              <Entry
-                label={entry.label}
-                text={entry.example}
-                tooltip={entry.tooltip}
-                onClick={() => onClick(entry.example)}
-                key={entry.label}
-              />
-            ))}
+            {searchExamples.slice(7).map((entry) => {
+              const index = generateRandom(entry.examples.length - 1);
+              const example = entry.syntax.replace('%', entry.examples[index]);
+              return (
+                <Entry
+                  label={entry.label}
+                  text={example}
+                  tooltip={entry.tooltip}
+                  onClick={() => onClick(example)}
+                  key={entry.label}
+                />
+              );
+            })}
           </Dl>
         </div>
       </div>
     );
-  };
+  });
 
   return SearchExamples;
 });

src/js/react/Recommender/models/searchExamples.js

@@ -1,66 +1,101 @@
 define([], function() {
+  const authors = [
+    'Penrose, Roger',
+    'Genzel, Reinhard',
+    'Ghez, Andrea M.',
+    'Lupton, Robert',
+    'Paxton, Bill',
+    'Impey, Chris',
+    'Dressing, Courtney',
+    'Weinberg, David',
+    'López Rodríguez, Enrique',
+    'Kreidberg, Laura',
+    'Scoville, Nick',
+    'Dawson, Rebekah',
+    'Demorest, Paul',
+    'Suyu, Sherry H.',
+    'Kamionkowski, Marc',
+    'Seljak, Uroš',
+    'Zaldarriaga, Matias',
+    'Kaspi, Victoria M.',
+    'Kouveliotou, Chryssa',
+  ];
+
   const searchExamples = [
     {
       label: 'author',
-      example: 'author:"huchra, john"',
+      syntax: 'author:"%"',
+      examples: authors,
     },
     {
       label: 'first author',
-      example: 'author:"^huchra, john"',
+      syntax: 'author:"^%"',
+      examples: authors,
     },
     {
       label: 'abstract + title',
-      example: 'abs:"dark energy"',
+      syntax: 'abs:"%"',
+      examples: ['dark energy'],
     },
     {
       label: 'year',
-      example: 'year:2000',
+      syntax: 'year:%',
+      examples: ['2000'],
     },
     {
       label: 'year range',
-      example: 'year:2000-2005',
+      syntax: 'year:%',
+      examples: ['2000-2005'],
     },
     {
       label: 'full text',
-      example: 'full:"gravity waves"',
+      syntax: 'full:"%"',
+      examples: ['super Earth'],
     },
     {
       label: 'publication',
-      example: 'bibstem:ApJ',
+      syntax: 'bibstem:%',
+      examples: ['ApJ'],
       tooltip:
         "this field requires the bibstem, or journal abbreviation--try going to the 'Paper' tab above for an easy-to-use form version",
     },
     {
       label: 'citations',
-      example: 'citations(author:"huchra, j")',
+      syntax: 'citations(%)',
+      examples: ['abstract:JWST'],
       tooltip: 'finds all papers that cite a given set of papers',
     },
     {
-      label: 'references',
-      example: 'references(author:"huchra, j")',
-      tooltip: 'finds all papers referenced by a given set of papers',
+      label: 'refereed',
+      syntax: 'property:%',
+      examples: ['refereed'],
+      tooltip: 'limit to refereed papers',
     },
     {
-      label: 'reviews',
-      example: 'reviews("gamma-ray bursts")',
-      tooltip:
-        'finds articles citing the most relevant papers on the topic being researched',
+      label: 'astronomy',
+      syntax: 'collection:%',
+      examples: ['astronomy'],
+      tooltip: 'limit search to collection',
     },
     {
-      label: 'refereed',
-      example: 'property:refereed',
-      tooltip: 'limit to non-refereed papers by searching property:notrefereed',
+      label: 'exact search',
+      syntax: '=%',
+      examples: ['body:"intracluster medium"'],
     },
     {
-      label: 'astronomy',
-      example: 'database:astronomy',
-      tooltip: 'limit to physics papers by searching collection:physics',
+      label: 'institution',
+      syntax: 'inst:%',
+      examples: ['CfA'],
     },
     {
-      label: 'OR',
-      example: 'abs:(planet OR star)',
-      tooltip:
-        'default logic is AND, e.g. abs:(planet star) would be interpreted as abs:(planet AND star)',
+      label: 'author count',
+      syntax: 'author_count:%',
+      examples: ['[1 TO 10]'],
+    },
+    {
+      label: 'record type',
+      syntax: 'doctype:%',
+      examples: ['software'],
     },
   ];
 

src/js/wraps/landing_page_manager/landing-page-layout.html

@@ -13,7 +13,6 @@
   </div>
 
   <section class="s-search-bar-row  row">
-
     <div class="search-bar-rows-container s-search-bar-rows-container row">
       <br />
       <br />
@@ -23,40 +22,5 @@
       <br />
       <div data-widget="RecommenderWidget"></div>
     </div>
-
-    <div class="landing-faq row">
-      <a href="#classic-form">
-        <div class="col-sm-4">
-          <i class="fa fa-life-ring fa-2x"></i>
-          <div>
-            Use a classic ADS-style form
-          </div>
-        </div>
-      </a>
-      <a
-        href="/help/search/search-syntax"
-        target="_blank"
-        rel="noreferrer noopener"
-      >
-        <div class="col-sm-4">
-          <i class="fa fa-search fa-2x"></i>
-          <div>
-            Learn more about searching the ADS
-          </div>
-        </div>
-      </a>
-      <a
-        href="https://ui.adsabs.harvard.edu/help/api/"
-        target="_blank"
-        rel="noreferrer noopener"
-      >
-        <div class="col-sm-4">
-          <i class="fa fa-code fa-2x"></i>
-          <div>
-            Access ADS data with our API
-          </div>
-        </div>
-      </a>
-    </div>
   </section>
 </div>

src/styles/sass/ads-sass/search-bar.scss

@@ -195,6 +195,15 @@ input.hasbigquery {
     max-width: 800px;
   }
 
+  .search-examples {
+    padding-top: 1rem;
+    display: flex;
+    justify-content: space-between;
+    @media screen and (max-width: $screen-sm) {
+      display: unset;
+    }
+  }
+
   .quick-reference {
     display: block;
     font-size: 17px;
@@ -213,6 +222,7 @@ input.hasbigquery {
     }
 
     @media screen and (min-width: $screen-sm-min) {
+      width: 50%;
       .col-sm-6:first-of-type {
         width: 46%;
       }