Ticket: Faceted Search Not Showing up in UI

I’m currently passing all the tests and passing on the status page.
That said I cannot get the faceted Search to show up in the UI. My understanding is that there should be a way to filter by rating showing up.

I tried the following:

  • In the console I ran mflix.useFacets = true

  • Tried clearing cache and reloading the service worker.

  • Tried putting a script tag in the index.html file:

    document.addEventListener('DOMContentLoaded', () => {
      mflix.useFacets = true;

None of the above made a change to the UI. Even though the console in chorme shows useFacets is set to true:
mflix {useFacets: true}
Since the front end is compiled and source code for the react app is not present it’s hard to troubleshoot.

I want to point out this lesson is almost completely useless. There was zero implementation other than adding the already created aggregation stages to an array.


Got it to work, for anyone that wants to see the UI:

In the index.html you have to set it before the whole react app loads:
This is bad because the html is compressed, so best to format the HTML and add a script tag.

    mflix.useFacets = true;
<script type="text/javascript" src="/static/js/main.773a0f83.js"></script>

If you set it after, it won’t work.
Additionally you have to search by “Cast” for the faceted filter to come up, it won’t come up under any other search.


Thanks for mentioning this! I agree that even though the instructions are there to turn it on, it’s not as ergonomic as it could be.

We’ll look at adding a toggle switch in the UI to use the faceted search.


I am still having an issue showing the facet search in UI. I did what you mentioned and it is still not working. I updated the index.html and rebuilt but the index.html is not updating. Any suggestions? Thank you in advance.

1 Like

I got it to work by clearing the cache.

I am also having the same issue i cant see the facet search in UI even after changing to

<script>window.mflix = { useFacets true }</script> 
  <script type="text/javascript" src="/static/js/main.73a0f83.js"></script>

Worked in Chrome incognito mode.

Still not working can you share the screen shot once.

I think you should try pawlowsg’s answer.

You may have to clear your browser cache. The application uses service workers to cache document including the .js file.

I tried that too but still seems to be not working.

There you go.

I am trying all the comments for the latest version of mflix and it is not working. I have ensured to clear the cache and also tried in an incognito window.

my HTML had this:

and I tried to replace it with
<script>mflix.useFacets = true</script> and
<script>mflix.useFacets = 1</script>

all of them are not working. Can you please help me? Am I missing something?

You should be able to just set useFacets to true as you did in your second example, and then search by a cast member.

Only change to window.mflix = {useFacets: true}, add append the pipelines in file movieDAO.js, like this:

const queryPipeline = [

1 Like

hi, i get this error “mflix is not defined” when i change to mflix.useFacets = true

1 Like

facing similar issue, any one suggest how can i resolve it?

Please try after editing the line to:

 <script>mflix.useFacets = true</script>



I have followed your instructions and I have set my browser to not cache, but I am failing 2 out of 4 test and when I search by cast I get stuck in a loading loop. The test I am failing are

    ✓ should require cast members to perform search with (2ms)
    ✕ should return movies and runtime/rating facets for returned movies (314ms)
    ✕ should also support paging (301ms)
    ✓ should throw an error if castMembers is empty (1ms)

  ● Facets › should return movies and runtime/rating facets for returned movies

    TypeError: Cannot read property 'length' of undefined

      14 |     const filters = { cast: { $in: ["Tom Hanks"] } }
      15 |     const actual = await MoviesDAO.facetedSearch({ filters })
    > 16 |     expect(actual.movies.length).toBe(20)
         |                          ^
      17 |     expect(actual.rating.length).toBe(4)
      18 |     expect(actual.runtime.length).toBe(5)
      19 |     expect(actual.count).toBe(51)

      at length (test/facets.test.js:16:26)
      at tryCatch (node_modules/regenerator-runtime/runtime.js:62:40)
      at Generator.invoke [as _invoke] (node_modules/regenerator-runtime/runtime.js:296:22)
      at Generator.prototype.(anonymous function) [as next] (node_modules/regenerator-runtime/runtime.js:114:21)
      at step (node_modules/babel-runtime/helpers/asyncToGenerator.js:17:30)
      at node_modules/babel-runtime/helpers/asyncToGenerator.js:28:13

  ● Facets › should also support paging

    TypeError: Cannot read property 'length' of undefined

      23 |     const filters = { cast: { $in: ["Susan Sarandon"] } }
      24 |     const actual = await MoviesDAO.facetedSearch({ filters, page: 3 })
    > 25 |     expect(actual.movies.length).toBe(3)
         |                          ^
      26 |     expect(actual.rating.length).toBe(1)
      27 |     expect(actual.runtime.length).toBe(2)
      28 |     expect(actual.count).toBe(63)

      at length (test/facets.test.js:25:26)
      at tryCatch (node_modules/regenerator-runtime/runtime.js:62:40)
      at Generator.invoke [as _invoke] (node_modules/regenerator-runtime/runtime.js:296:22)
      at Generator.prototype.(anonymous function) [as next] (node_modules/regenerator-runtime/runtime.js:114:21)
      at step (node_modules/babel-runtime/helpers/asyncToGenerator.js:17:30)
      at node_modules/babel-runtime/helpers/asyncToGenerator.js:28:13

Test Suites: 1 failed, 1 total
Tests:       2 failed, 2 passed, 4 total
Snapshots:   0 total
Time:        1.528s, estimated 3s


On top of this I believe the path for main.d2c98b4b.chunk.css was not working. I had to add /build/.

Can you please share the code for facetedSearch function. Make sure it returns movies and not null.