Merge #1252

1252: Fix `HierarchicalMenu` when `keepZeroFacets` is set to true r=curquiza a=atoulmet

# Pull Request

## Related issue
Fixes #1040 

## What does this PR do?
The `initialFacetDistribution` were missing the hierarchical facets we get from the search, which was breaking the `HierarchicalMenu`. 
This PR aims to fix it by adding `fillMissingFacets` function that is called at every search.

It also updates the React playground to `instant-search` v7.

## PR checklist
Please check if your PR fulfills the following requirements:
- [x] Does this PR fix an existing issue, or have you listed the changes applied in the PR description (and why they are needed)?
- [x] Have you read the contributing guidelines?
- [x] Have you made sure that the title is accurate and descriptive of the changes?

Thank you so much for contributing to Meilisearch!


Co-authored-by: Alexia Toulmet <alexia.toulmet@gmail.com>
Co-authored-by: curquiza <clementine@meilisearch.com>

Author: 3 people

.changeset/giant-clouds-smell.md

@@ -0,0 +1,5 @@
+---
+"@meilisearch/instant-meilisearch": patch
+---
+
+Fix HierarchicalMenu when keepZeroFacets is set to true

packages/instant-meilisearch/src/cache/__tests__/fill-missing-facets.test.ts

@@ -0,0 +1,56 @@
+import { fillMissingFacets } from '../init-facets-distribution'
+
+describe('Fill missing facets', () => {
+  it('should fill missing facets without changing the results', () => {
+    const initialFacetDistribution = {
+      movies: {
+        'categories.lvl0': {
+          goods: 6,
+        },
+        genres: {
+          Action: 2,
+        },
+      },
+    }
+
+    const searchResults = [
+      {
+        hits: [{ id: 1 }, { id: 2 }, { id: 3 }],
+        processingTimeMs: 0,
+        query: '',
+        indexUid: 'movies',
+        pagination: {
+          finite: true,
+          hitsPerPage: 0,
+          page: 0,
+        },
+        facetDistribution: {
+          'categories.lvl0': {
+            goods: 42,
+          },
+          'categories.lvl1': {
+            'goods > to drink': 1,
+          },
+          genres: {
+            Action: 1,
+          },
+        },
+      },
+    ]
+
+    const result = fillMissingFacets(initialFacetDistribution, searchResults)
+    expect(result).toEqual({
+      movies: {
+        'categories.lvl0': {
+          goods: 6,
+        },
+        'categories.lvl1': {
+          'goods > to drink': 1,
+        },
+        genres: {
+          Action: 2,
+        },
+      },
+    })
+  })
+})

packages/instant-meilisearch/src/cache/init-facets-distribution.ts

@@ -3,6 +3,7 @@ import {
   SearchContext,
   MeiliSearchMultiSearchParams,
   MultiSearchResolver,
+  MeilisearchMultiSearchResult,
 } from '../types'
 import { MeiliParamsCreator } from '../adapter'
 import { removeDuplicate } from '../utils'
@@ -53,3 +54,16 @@ export async function initFacetDistribution(
 
   return initialFacetDistribution
 }
+
+export function fillMissingFacets(
+  initialFacetDistribution: Record<string, FacetDistribution>,
+  meilisearchResults: MeilisearchMultiSearchResult[]
+) {
+  for (const searchResult of meilisearchResults) {
+    initialFacetDistribution[searchResult.indexUid] = {
+      ...(searchResult.facetDistribution || {}),
+      ...(initialFacetDistribution[searchResult.indexUid] || {}),
+    }
+  }
+  return initialFacetDistribution
+}

packages/instant-meilisearch/src/client/instant-meilisearch-client.ts

@@ -26,6 +26,7 @@ import {
   SearchCache,
   initFacetDistribution,
   getParametersWithoutFilters,
+  fillMissingFacets,
 } from '../cache/'
 import { constructClientAgents } from './agents'
 
@@ -122,6 +123,12 @@ export function instantMeiliSearch(
           instantSearchPagination // Create issue on pagination
         )
 
+        // Fill the missing facet values if keepZeroFacets is true
+        initialFacetDistribution = fillMissingFacets(
+          initialFacetDistribution,
+          meilisearchResults
+        )
+
         const instantSearchResponse = adaptSearchResults<T>(
           meilisearchResults,
           initialFacetDistribution,

playgrounds/local-react/src/components/MultiIndex.jsx

@@ -9,7 +9,7 @@ import {
   InfiniteHits,
   Pagination,
   Hits,
-} from 'react-instantsearch-dom'
+} from 'react-instantsearch'
 import { instantMeiliSearch } from '@meilisearch/instant-meilisearch'
 
 const searchClient = instantMeiliSearch('http://localhost:7700', 'masterKey', {

playgrounds/local-react/src/components/SingleMovieIndex.jsx

@@ -8,7 +8,7 @@ import {
   Highlight,
   ClearRefinements,
   RefinementList,
-} from 'react-instantsearch-dom'
+} from 'react-instantsearch'
 import { instantMeiliSearch } from '@meilisearch/instant-meilisearch'
 
 const searchClient = instantMeiliSearch('http://localhost:7700', 'masterKey', {

playgrounds/react/package.json

@@ -22,7 +22,7 @@
   "dependencies": {
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
-    "react-instantsearch-dom": "^6.40.4",
+    "react-instantsearch": "^7.1.0",
     "@meilisearch/instant-meilisearch": "0.13.5"
   },
   "devDependencies": {

yarn.lock

@@ -3848,6 +3848,13 @@ algoliasearch-helper@3.14.0:
   dependencies:
     "@algolia/events" "^4.0.1"
 
+algoliasearch-helper@3.14.2:
+  version "3.14.2"
+  resolved "https://registry.npmjs.org/algoliasearch-helper/-/algoliasearch-helper-3.14.2.tgz#c34cfe6cefcfecd65c60bcb8bf9b68134472d28c"
+  integrity sha512-FjDSrjvQvJT/SKMW74nPgFpsoPUwZCzGbCqbp8HhBFfSk/OvNFxzCaCmuO0p7AWeLy1gD+muFwQEkBwcl5H4pg==
+  dependencies:
+    "@algolia/events" "^4.0.1"
+
 algoliasearch@^4.17.2:
   version "4.17.2"
   resolved "https://registry.yarnpkg.com/algoliasearch/-/algoliasearch-4.17.2.tgz#ca861340e04a78da8dc5f8c5646ee38c3d8b7ec7"
@@ -4893,25 +4900,10 @@ caniuse-api@^3.0.0:
     lodash.memoize "^4.1.2"
     lodash.uniq "^4.5.0"
 
-caniuse-lite@^1.0.0, caniuse-lite@^1.0.30001251, caniuse-lite@^1.0.30001400:
-  version "1.0.30001443"
-  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001443.tgz#8fc85f912d5471c9821acacf9e715c421ca0dd1f"
-  integrity sha512-jUo8svymO8+Mkj3qbUbVjR8zv8LUGpGkUM/jKvc9SO2BvjCI980dp9fQbf/dyLs6RascPzgR4nhAKFA4OHeSaA==
-
-caniuse-lite@^1.0.30001426:
-  version "1.0.30001445"
-  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001445.tgz#cf2d4eb93f2bcdf0310de9dd6d18be271bc0b447"
-  integrity sha512-8sdQIdMztYmzfTMO6KfLny878Ln9c2M0fc7EH60IjlP4Dc4PiCy7K2Vl3ITmWgOyPgVQKa5x+UP/KqFsxj4mBg==
-
-caniuse-lite@^1.0.30001449:
-  version "1.0.30001450"
-  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001450.tgz#022225b91200589196b814b51b1bbe45144cf74f"
-  integrity sha512-qMBmvmQmFXaSxexkjjfMvD5rnDL0+m+dUMZKoDYsGG8iZN29RuYh9eRoMvKsT6uMAWlyUUGDEQGJJYjzCIO9ew==
-
-caniuse-lite@^1.0.30001502:
-  version "1.0.30001502"
-  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001502.tgz#f7e4a76eb1d2d585340f773767be1fefc118dca8"
-  integrity sha512-AZ+9tFXw1sS0o0jcpJQIXvFTOB/xGiQ4OQ2t98QX3NDn2EZTSRBC801gxrsGgViuq2ak/NLkNgSNEPtCr5lfKg==
+caniuse-lite@^1.0.0, caniuse-lite@^1.0.30001251, caniuse-lite@^1.0.30001400, caniuse-lite@^1.0.30001426, caniuse-lite@^1.0.30001449, caniuse-lite@^1.0.30001502:
+  version "1.0.30001538"
+  resolved "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001538.tgz"
+  integrity sha512-HWJnhnID+0YMtGlzcp3T9drmBJUVDchPJ08tpUGFLs9CYlwWPH2uLgpHn8fND5pCgXVtnGS3H4QR9XLMHVNkHw==
 
 caseless@~0.12.0:
   version "0.12.0"
@@ -8428,6 +8420,25 @@ instantsearch.js@4.56.8, instantsearch.js@^4.48.1, instantsearch.js@^4.56.2:
     qs "^6.5.1 < 6.10"
     search-insights "^2.6.0"
 
+instantsearch.js@4.57.0:
+  version "4.57.0"
+  resolved "https://registry.npmjs.org/instantsearch.js/-/instantsearch.js-4.57.0.tgz#9165111679fcf5688f08c33078dcb21cd3ef2779"
+  integrity sha512-oaWmX4gUI4U8fcj77FmR3UPHfHOYpJoeHhek+9wM4bZ+VJ8uAQZOV/aBGka7Kmvln8NLZ7rqn+Hm84tDunIBog==
+  dependencies:
+    "@algolia/events" "^4.0.1"
+    "@algolia/ui-components-highlight-vdom" "^1.2.1"
+    "@algolia/ui-components-shared" "^1.2.1"
+    "@types/dom-speech-recognition" "^0.0.1"
+    "@types/google.maps" "^3.45.3"
+    "@types/hogan.js" "^3.0.0"
+    "@types/qs" "^6.5.3"
+    algoliasearch-helper "3.14.2"
+    hogan.js "^3.0.2"
+    htm "^3.0.0"
+    preact "^10.10.0"
+    qs "^6.5.1 < 6.10"
+    search-insights "^2.6.0"
+
 internal-slot@^1.0.2:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/internal-slot/-/internal-slot-1.0.3.tgz#7347e307deeea2faac2ac6205d4bc7d34967f59c"
@@ -12318,6 +12329,16 @@ react-instantsearch-core@6.40.4:
     prop-types "^15.6.2"
     react-fast-compare "^3.0.0"
 
+react-instantsearch-core@7.1.0:
+  version "7.1.0"
+  resolved "https://registry.npmjs.org/react-instantsearch-core/-/react-instantsearch-core-7.1.0.tgz#bf8ddc34655b5bd383a69f00979425ac5cc73c3f"
+  integrity sha512-f+QZqUhQ1my/c//kw23Tn8jO1LQVqGRh8ObCbHnDzSPyI9Kp5+ETvI0BbXby1I4iObIjE1ApLhugBkli77zsTQ==
+  dependencies:
+    "@babel/runtime" "^7.1.2"
+    algoliasearch-helper "3.14.2"
+    instantsearch.js "4.57.0"
+    use-sync-external-store "^1.0.0"
+
 react-instantsearch-dom@^6.40.4:
   version "6.40.4"
   resolved "https://registry.yarnpkg.com/react-instantsearch-dom/-/react-instantsearch-dom-6.40.4.tgz#9e56bb66626a66da523bd343e2cb5cd6362efbe4"
@@ -12330,6 +12351,15 @@ react-instantsearch-dom@^6.40.4:
     react-fast-compare "^3.0.0"
     react-instantsearch-core "6.40.4"
 
+react-instantsearch@^7.1.0:
+  version "7.1.0"
+  resolved "https://registry.npmjs.org/react-instantsearch/-/react-instantsearch-7.1.0.tgz#812bd7c28ccdd08cc4e6087e07c144eb85097dee"
+  integrity sha512-AdOP2+ubNVZCkODi45IXpWo9AklTjEGm9xqFQ227zt6CA6NLVhY5otFGkWPBrQwwbEnSKO5PH563pfNGnCMsRQ==
+  dependencies:
+    "@babel/runtime" "^7.1.2"
+    instantsearch.js "4.57.0"
+    react-instantsearch-core "7.1.0"
+
 react-is@^16.13.1:
   version "16.13.1"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
@@ -14569,6 +14599,11 @@ url@^0.11.0:
     punycode "1.3.2"
     querystring "0.2.0"
 
+use-sync-external-store@^1.0.0:
+  version "1.2.0"
+  resolved "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz#7dbefd6ef3fe4e767a0cf5d7287aacfb5846928a"
+  integrity sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA==
+
 use@^3.1.0:
   version "3.1.1"
   resolved "https://registry.yarnpkg.com/use/-/use-3.1.1.tgz#d50c8cac79a19fbc20f2911f56eb973f4e10070f"