Merge #888

888: Add multi index and disjunctive facet search r=bidoubiwa a=bidoubiwa

⚠️ NOT working with `keepzerofacet`


Using the `Index` widget, it is now possible to do mult-index search, see example bellow.

By introducing the multi index search. we automatically introduce disjunctive facet search.

Related to: #774 #789 


# Multi index search

```jsx
    <InstantSearch indexName="movies" searchClient={searchClient}>
      <SearchBox />
      <h2>Movies</h2>
      <Index indexName="movies">
        <Hits hitComponent={Hit} />
      </Index>
      <h2>Games</h2>
      <Index indexName="games">
        <Hits hitComponent={Hit} />
      </Index>
    </InstantSearch>
```
https://user-images.githubusercontent.com/33010418/203822998-8fc99a62-970f-42a9-95bb-ab09d3c67a9d.mp4

## Disjunctive facet search


https://user-images.githubusercontent.com/33010418/204564207-576bca0c-344b-427c-a1a1-e10ddd7a677f.mp4

# Multi index + disjunctive facet search


https://user-images.githubusercontent.com/33010418/204565010-d4564fdb-88a0-46ad-8dc0-bb6761798e49.mp4






## TODO

- [x] Should work on simple search
- [x] Should be compatible with following widgets:
    - [x] Pagination
    - [x] RefinementList
- [x] Should be compatible with all Meilisearch parameters
    - [x] placeholder search
    - [x] finite pagination
    - [ ] keep zero facets ⚠️ Fixed in disjunctive facet search PR
- [x] check state of cache



Co-authored-by: Charlotte Vermandel <[email protected]>
Co-authored-by: cvermand <[email protected]>

Author: meili-bors[bot]

README.md

@@ -270,7 +270,7 @@ List of all the components that are available in [instantSearch](https://github.
 ### Table Of Widgets
 
 - ✅ [InstantSearch](#-instantsearch)
-- ❌ [index](#-index)
+- ✅ [index](#-index)
 - ✅ [SearchBox](#-searchbox)
 - ✅ [Configure](#-configure)
 - ❌ [ConfigureRelatedItems](#-configure-related-items)
@@ -339,15 +339,13 @@ const search = instantsearch({
 })
 ```
 
-### ❌ Index
+### ✅ Index
 
 [Index references](https://www.algolia.com/doc/api-reference/widgets/index-widget/js/)
 
 `Index` is the component that lets you apply widgets to a dedicated index. It’s useful if you want to build an interface that targets multiple indices.
 
-Not compatible as Meilisearch does not support federated search on multiple indexes.
-
-If you'd like to see federated search implemented please vote for it in the [roadmap](https://roadmap.meilisearch.com/c/74-multi-index-search?utm_medium=social&utm_source=portal_share).
+Using this component, instant-meilisearch does an http-request for each different `Index` widget added. More http requests are made when using the [`RefinementList`](#✅-refinementlist) widget.
 
 ### ✅ SearchBox
 
@@ -672,6 +670,9 @@ The `refinementList` widget is one of the most common widgets you can find in a
 - ✅ templates: The templates to use for the widget.
 - ✅ cssClasses: The CSS classes to override.
 
+The `RefinementList` widget uses the `disjunctive facet search` principle when using the `or` operator. For each different facet category used, an additional http call is made.
+For example, if I ask for `color=green` and `size=2`, three http requests are made. One for the hits, one for the `color` distribution and one for the `size` distribution. To provide any feedback on the subject, refer to [this discussion](https://github.com/meilisearch/product/issues/54).
+
 The following example will create a UI component with the a list of genres on which you will be able to facet.
 
 ```js

cypress/integration/search-ui.spec.js

@@ -38,24 +38,26 @@ describe(`${playground} playground test`, () => {
 
   it('Sort by recommendationCound ascending', () => {
     const select = `.ais-SortBy-select`
-    cy.get(select).select('steam-video-games:recommendationCount:asc')
+    cy.get(select).select('games:recommendationCount:asc')
     cy.wait(1000)
     cy.get(HIT_ITEM_CLASS).eq(0).contains('Deathmatch Classic')
   })
 
   it('Sort by default relevancy', () => {
     const select = `.ais-SortBy-select`
-    cy.get(select).select('steam-video-games')
+    cy.get(select).select('games')
     cy.wait(1000)
     cy.get(HIT_ITEM_CLASS).eq(0).contains('Counter-Strike')
   })
 
-  it('click on facets', () => {
-    const checkbox = `.ais-RefinementList-list .ais-RefinementList-checkbox`
-    cy.get(checkbox).eq(1).click()
+  it('click on facets ensure disjunctive facet search', () => {
+    const facet = `.ais-RefinementList-list`
+    const checkbox = `.ais-RefinementList-checkbox`
+    const facetCount = '.ais-RefinementList-count'
+    cy.get(facet).eq(0).find(checkbox).eq(1).click() // genres > action
     cy.wait(1000)
-    cy.get(HIT_ITEM_CLASS).eq(1).contains('Team Fortress Classic')
-    cy.get(HIT_ITEM_CLASS).eq(1).contains('4.99 $')
+    cy.get(facet).eq(0).find(facetCount).eq(0).contains('5') // genres > action count
+    cy.get(facet).eq(1).find(facetCount).eq(0).contains('4') // players > multiplayer
   })
 
   it('Search', () => {
@@ -78,6 +80,6 @@ describe(`${playground} playground test`, () => {
 
   it('Paginate Search', () => {
     cy.get('.ais-InfiniteHits-loadMore').click()
-    cy.get(HIT_ITEM_CLASS).should('have.length', 11)
+    cy.get(HIT_ITEM_CLASS).should('have.length', 12)
   })
 })

jest.config.js

@@ -32,6 +32,7 @@ module.exports = {
       displayName: 'dom',
       testPathIgnorePatterns: [...ignoreFiles, '<rootDir>/tests/build*'],
       testMatch: ['**/*.tests.ts', '/tests/**/*.ts'],
+      setupFilesAfterEnv: ['<rootDir>/scripts/jest_teardown.js'],
     },
     {
       globals: {
@@ -44,6 +45,7 @@ module.exports = {
       testEnvironment: 'node',
       testPathIgnorePatterns: [...ignoreFiles],
       testMatch: ['**/*.tests.ts', '/tests/**/*.ts'],
+      setupFilesAfterEnv: ['<rootDir>/scripts/jest_teardown.js'],
     },
   ],
 }

scripts/jest_teardown.js

@@ -0,0 +1,12 @@
+const { MeiliSearch } = require('meilisearch')
+
+const HOST = 'http://localhost:7700'
+const API_KEY = 'masterKey'
+
+afterAll(async () => {
+  const client = new MeiliSearch({ host: HOST, apiKey: API_KEY })
+  await client.deleteIndex('movies')
+  const task = await client.deleteIndex('games')
+
+  await client.waitForTask(task.taskUid)
+})

src/adapter/search-request-adapter/search-params-adapter.ts

@@ -76,8 +76,10 @@ export function MeiliParamsCreator(searchContext: SearchContext) {
       return meiliSearchParams
     },
     addFacets() {
-      if (facets?.length) {
+      if (Array.isArray(facets)) {
         meiliSearchParams.facets = facets
+      } else if (typeof facets === 'string') {
+        meiliSearchParams.facets = [facets]
       }
     },
     addAttributesToCrop() {

src/adapter/search-request-adapter/search-resolver.ts

@@ -39,18 +39,20 @@ export function SearchResolver(
       // Check if specific request is already cached with its associated search response.
       if (cachedResponse) return cachedResponse
 
-      const cachedFacets = extractFacets(searchContext, searchParams)
-
       // Make search request
       const searchResponse = await client
         .index(searchContext.indexUid)
         .search(searchContext.query, searchParams)
 
-      // Add missing facets back into facetDistribution
-      searchResponse.facetDistribution = addMissingFacets(
-        cachedFacets,
-        searchResponse.facetDistribution
-      )
+      if (searchContext.keepZeroFacets) {
+        const cachedFacets = extractFacets(searchContext, searchParams)
+
+        // Add missing facets back into facetDistribution
+        searchResponse.facetDistribution = addMissingFacets(
+          cachedFacets,
+          searchResponse.facetDistribution
+        )
+      }
 
       // query can be: empty string, undefined or null
       // all of them are falsy's

src/client/instant-meilisearch-client.ts

@@ -67,40 +67,49 @@ export function instantMeiliSearch(
       instantSearchRequests: readonly AlgoliaMultipleQueriesQuery[]
     ): Promise<{ results: Array<AlgoliaSearchResponse<T>> }> {
       try {
-        const searchRequest = instantSearchRequests[0]
-        const searchContext: SearchContext = createSearchContext(
-          searchRequest,
-          instantMeiliSearchOptions,
-          defaultFacetDistribution
-        )
+        const searchResponses: { results: Array<AlgoliaSearchResponse<T>> } = {
+          results: [],
+        }
 
-        // Adapt search request to Meilisearch compliant search request
-        const adaptedSearchRequest = adaptSearchParams(searchContext)
+        const requests = instantSearchRequests
 
-        // Cache first facets distribution of the instantMeilisearch instance
-        // Needed to add in the facetDistribution the fields that were not returned
-        // When the user sets `keepZeroFacets` to true.
-        if (defaultFacetDistribution === undefined) {
-          defaultFacetDistribution = await cacheFirstFacetDistribution(
-            searchResolver,
-            searchContext
+        for (const searchRequest of requests) {
+          const searchContext: SearchContext = createSearchContext(
+            searchRequest,
+            instantMeiliSearchOptions,
+            defaultFacetDistribution
           )
-          searchContext.defaultFacetDistribution = defaultFacetDistribution
-        }
 
-        // Search response from Meilisearch
-        const searchResponse = await searchResolver.searchResponse(
-          searchContext,
-          adaptedSearchRequest
-        )
+          // Adapt search request to Meilisearch compliant search request
+          const adaptedSearchRequest = adaptSearchParams(searchContext)
+
+          // Cache first facets distribution of the instantMeilisearch instance
+          // Needed to add in the facetDistribution the fields that were not returned
+          // When the user sets `keepZeroFacets` to true.
+          if (defaultFacetDistribution === undefined) {
+            defaultFacetDistribution = await cacheFirstFacetDistribution(
+              searchResolver,
+              searchContext
+            )
+            searchContext.defaultFacetDistribution = defaultFacetDistribution
+          }
+
+          // Search response from Meilisearch
+          const searchResponse = await searchResolver.searchResponse(
+            searchContext,
+            adaptedSearchRequest
+          )
 
-        // Adapt the Meilisearch responsne to a compliant instantsearch.js response
-        const adaptedSearchResponse = adaptSearchResponse<T>(
-          searchResponse,
-          searchContext
-        )
+          // Adapt the Meilisearch response to a compliant instantsearch.js response
+          const adaptedSearchResponse = adaptSearchResponse<T>(
+            searchResponse,
+            searchContext
+          )
+
+          searchResponses.results.push(adaptedSearchResponse.results[0])
+        }
 
-        return adaptedSearchResponse
+        return searchResponses
       } catch (e: any) {
         console.error(e)
         throw new Error(e)