🕵 Search fixes (#178)

# Search - Moves `ES_API_KEY` to `.env` - closes #167 - Renames aapb_host to aapbHost
WGBH-MLA · Feb 6, 2025 · bd29019 · bd29019
2 parents e41720c + aeb0691
commit bd29019
Show file tree

Hide file tree

Showing 7 changed files with 109 additions and 126 deletions.
diff --git a/app/classes/aapbRecordHelpers.tsx b/app/classes/aapbRecordHelpers.tsx
@@ -327,7 +327,7 @@ export class AAPBRecords extends Component<AAPBRecordBlockProps> {
       accessLevel = this.props.accessLevel
     }
 
-    this.setState({ aapb_host: window.ENV.AAPB_HOST }, async () => {
+    this.setState({ aapbHost: window.ENV.AAPB_HOST }, async () => {
       var data
       if (this.props.specialCollections) {
         // fetch actual number of records from this special collection search
@@ -359,7 +359,7 @@ export class AAPBRecords extends Component<AAPBRecordBlockProps> {
       )
     })
 
-    var recordsSearchLink = `${this.state.aapb_host}/catalog`
+    var recordsSearchLink = `${this.state.aapbHost}/catalog`
     if (this.props.specialCollections) {
       recordsSearchLink += `?f[special_collections][]=${this.props.specialCollections}&sort=title+asc&f[access_types][]=${this.props.accessLevel}`
     }

diff --git a/app/classes/search-ui.tsx b/app/classes/search-ui.tsx
@@ -1,6 +1,3 @@
-import Client from '@searchkit/instantsearch-client'
-import Searchkit from 'searchkit'
-import searchkit_options from '~/data/searchkit'
 import { InstantSearch, SearchBox, Index } from 'react-instantsearch'
 
 import { SearchProps } from '~/routes/search'
@@ -20,28 +17,8 @@ import {
   EmptyQueryMessage,
   EmptyQueryBoundary,
 } from '~/components'
-import { useLoaderData } from '@remix-run/react'
-
-const INDICES = ['wagtail__wagtailcore_page', 'gbh-series']
-
-const sk = new Searchkit(searchkit_options)
-
-export const searchClient = Client(sk, {
-  getQuery: (query, search_attributes) => {
-    console.log('search query', query, search_attributes)
-    return [
-      {
-        simple_query_string: {
-          query,
-        },
-      },
-    ]
-  },
-})
-
-export const Search = () => {
-  const { serverUrl, aapb_host }: SearchProps = useLoaderData()
 
+export const Search = ({ serverUrl, aapbHost, searchClient }: SearchProps) => {
   let timerId: NodeJS.Timeout
   let timeout: number = 250
 
@@ -91,10 +68,10 @@ export const Search = () => {
                 </Index>
               </span>
             }>
-            <SeriesResults aapb_host={aapb_host} />
+            <SeriesResults aapbHost={aapbHost} />
           </Tab>
           <Tab title='American Archive'>
-            <AAPBResults aapb_host={aapb_host} />
+            <AAPBResults aapbHost={aapbHost} />
           </Tab>
           <Tab title='Help'>
             <Help />

diff --git a/app/components/AAPBResults.tsx b/app/components/AAPBResults.tsx
@@ -18,10 +18,10 @@ export type AAPBHit = {
 
 export type AAPBHitProps = {
   hit: AAPBHit
-  aapb_host: string
+  aapbHost: string
 }
 
-export const AAPBResults = ({ aapb_host }) => {
+export const AAPBResults = ({ aapbHost }) => {
   const { indexUiState } = useInstantSearch()
 
   const [result_count, setResults] = useState(null)
@@ -31,7 +31,7 @@ export const AAPBResults = ({ aapb_host }) => {
     debounce((currentQuery) => {
       console.log('fetching AAPB results for', currentQuery)
       fetch(
-        `${aapb_host}/api.json?q=${encodeURIComponent(currentQuery)}&rows=10`
+        `${aapbHost}/api.json?q=${encodeURIComponent(currentQuery)}&rows=10`
       )
         .then((response) => response.json())
         .then((data) => {
@@ -58,12 +58,12 @@ export const AAPBResults = ({ aapb_host }) => {
       <div className='ais-Hits'>
         <div className='ais-Hits-list'>
           {hits.map((hit: AAPBHit) => (
-            <AAPBHit key={hit.id} hit={hit} aapb_host={aapb_host} />
+            <AAPBHit key={hit.id} hit={hit} aapbHost={aapbHost} />
           ))}
         </div>
       </div>
       <a
-        href={`${aapb_host}/catalog?q=${indexUiState.query}${gbh_query}`}
+        href={`${aapbHost}/catalog?q=${indexUiState.query}${gbh_query}`}
         target='_blank'>
         View
         <span className='ais-RefinementList-count'>
@@ -76,13 +76,13 @@ export const AAPBResults = ({ aapb_host }) => {
   )
 }
 
-export const AAPBHit = ({ hit, aapb_host }: AAPBHitProps) => {
+export const AAPBHit = ({ hit, aapbHost }: AAPBHitProps) => {
   let pb = pbcore2json(hit.xml)
 
   console.log('hit pbcore', pb)
   return (
     <div className='ais-Hits-item aapb-hit'>
-      <a href={`${aapb_host}/catalog/${hit.id}`}>
+      <a href={`${aapbHost}/catalog/${hit.id}`}>
         <div className='tag'>AAPB</div>
         <h3>
           {highlightHighlight(hit.title)} <ExternalLink />

diff --git a/app/components/Series.tsx b/app/components/Series.tsx
@@ -22,9 +22,9 @@ type SeriesHitProps = {
   }>
 }
 
-export const SeriesResults = ({ aapb_host }) => {
+export const SeriesResults = ({ aapbHost }) => {
   const aapb_link = (title: string) =>
-    `${aapb_host}/catalog?f[series_titles][]=${title}&q=+(contributing_organizations: WGBH(MA) OR producing_organizations: WGBH Educational Foundation)&f[access_types][]=all`
+    `${aapbHost}/catalog?f[series_titles][]=${title}&q=+(contributing_organizations: WGBH(MA) OR producing_organizations: WGBH Educational Foundation)&f[access_types][]=all`
 
   const SeriesHit = ({ hit }: SeriesHitProps) => {
     return (

diff --git a/app/data/searchkit.jsx b/app/data/searchkit.jsx
@@ -1,69 +1,63 @@
 export default {
-  connection: {
-    host: 'https://elastic.wgbh-mla.org',
-    apiKey: 'X3NoUXlJMEJZNE9yTDhJMHdMSEQ6N1RLcDQxYm9USEdCV1ByeXJ4MXFDUQ==',
-  },
-  search_settings: {
-    search_attributes: [
-      { field: 'title', weight: 3 },
-      'slug',
-      'exhibits_exhibitpage__body_edgengrams',
-      'ov_collections_collection__introduction_edgengrams',
-      'featured',
-    ],
-    result_attributes: [
-      'title',
-      'slug',
-      'exhibits_exhibitpage__body_edgengrams',
-      'ov_collections_collection__introduction_edgengrams',
-      'exhibits_exhibitpage__get_hero_thumb_url',
-      'ov_collections_collection__get_hero_thumb_url',
-    ],
-    highlight_attributes: ['title'],
-    snippet_attributes: [
-      'exhibits_exhibitpage__body_edgengrams:40',
-      'ov_collections_collection__introduction_edgengrams:40',
-    ],
-    facet_attributes: [
-      { attribute: 'content_type', field: 'content_type', type: 'string' },
-    ],
-    filter_attributes: [
-      {
-        attribute: 'featured',
-        field: 'exhibits_exhibitpage__featured_filter',
-        type: 'string',
-      },
-    ],
+  search_attributes: [
+    { field: 'title', weight: 3 },
+    'slug',
+    'exhibits_exhibitpage__body_edgengrams',
+    'ov_collections_collection__introduction_edgengrams',
+    'featured',
+  ],
+  result_attributes: [
+    'title',
+    'slug',
+    'exhibits_exhibitpage__body_edgengrams',
+    'ov_collections_collection__introduction_edgengrams',
+    'exhibits_exhibitpage__get_hero_thumb_url',
+    'ov_collections_collection__get_hero_thumb_url',
+  ],
+  highlight_attributes: ['title'],
+  snippet_attributes: [
+    'exhibits_exhibitpage__body_edgengrams:40',
+    'ov_collections_collection__introduction_edgengrams:40',
+  ],
+  facet_attributes: [
+    { attribute: 'content_type', field: 'content_type', type: 'string' },
+  ],
+  filter_attributes: [
+    {
+      attribute: 'featured',
+      field: 'exhibits_exhibitpage__featured_filter',
+      type: 'string',
+    },
+  ],
 
-    sorting: {
-      default: {
-        field: '_score',
-        order: 'desc',
-      },
-      _last_published_date_desc: {
-        field: 'last_published_at_filter',
-        order: 'desc',
-      },
-      _last_published_date_asc: {
-        field: 'last_published_at_filter',
-        order: 'asc',
-      },
-      _title_asc: {
-        field: 'title_filter',
-        order: 'asc',
-      },
-      _title_desc: {
-        field: 'title_filter',
-        order: 'desc',
-      },
-      _seriestitle_asc: {
-        field: 'title.keyword',
-        order: 'asc',
-      },
-      _seriestitle_desc: {
-        field: 'title.keyword',
-        order: 'desc',
-      },
+  sorting: {
+    default: {
+      field: '_score',
+      order: 'desc',
+    },
+    _last_published_date_desc: {
+      field: 'last_published_at_filter',
+      order: 'desc',
+    },
+    _last_published_date_asc: {
+      field: 'last_published_at_filter',
+      order: 'asc',
+    },
+    _title_asc: {
+      field: 'title_filter',
+      order: 'asc',
+    },
+    _title_desc: {
+      field: 'title_filter',
+      order: 'desc',
+    },
+    _seriestitle_asc: {
+      field: 'title.keyword',
+      order: 'asc',
+    },
+    _seriestitle_desc: {
+      field: 'title.keyword',
+      order: 'desc',
     },
   },
 }
diff --git a/app/routes/search.tsx b/app/routes/search.tsx
@@ -1,6 +1,8 @@
 import type { LoaderFunction, MetaFunction } from '@remix-run/node'
 import { useLoaderData, useRouteError } from '@remix-run/react'
-
+import Client from '@searchkit/instantsearch-client'
+import Searchkit from 'searchkit'
+import search_settings from '~/data/searchkit'
 import { Search } from '~/classes/search-ui'
 import 'instantsearch.css/themes/algolia-min.css'
 import '~/styles/search.css'
@@ -23,28 +25,53 @@ export const meta: MetaFunction = ({ location }) => {
   ]
 }
 
-export const loader: LoaderFunction = async ({ request, params }) => {
-  const serverUrl = request.url
-  const aapb_host = process.env.AAPB_HOST
-
+export const loader: LoaderFunction = async ({ request }) => {
   return {
-    serverUrl,
-    aapb_host,
+    serverUrl: request.url,
+    aapbHost: process.env.AAPB_HOST,
+    esUrl: process.env.ES_URL,
+    esApiKey: process.env.ES_API_KEY,
   }
 }
 
 export type SearchProps = {
   serverUrl?: string
-  aapb_host?: string
+  aapbHost?: string
 }
 
 export default function SearchPage() {
-  const { serverUrl, aapb_host }: SearchProps = useLoaderData()
+  const { serverUrl, aapbHost, esUrl, esApiKey }: SearchProps = useLoaderData()
+
+  const sk = new Searchkit({
+    connection: {
+      host: esUrl,
+      apiKey: esApiKey,
+    },
+    search_settings,
+  })
+
+  const searchClient = Client(sk, {
+    getQuery: (query, search_attributes) => {
+      console.log('search query', query, search_attributes)
+      return [
+        {
+          simple_query_string: {
+            query,
+          },
+        },
+      ]
+    },
+  })
+
   return (
     <>
       <div className='page-body-container'>
         <h1>Search Open Vault</h1>
-        <Search serverUrl={serverUrl} aapb_host={aapb_host} />
+        <Search
+          serverUrl={serverUrl}
+          aapbHost={aapbHost}
+          searchClient={searchClient}
+        />
       </div>
     </>
   )

diff --git a/app/routes/xsearch._index.tsx b/app/routes/xsearch._index.tsx