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', () => {
      console.log('loaded');
      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.

Also,
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.

2 Likes

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.

<script>
    mflix.useFacets = true;
</script>
<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.

5 Likes

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.

2 Likes

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.
Clipboard011546545

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:
<script>window.mflix={useFacets:!1}</script>

and I tried to replace it with
<script>window.mflix={useFacets:1}</script>
<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 = [
matchStage,
sortStage,
skipStage,
limitStage,
facetStage,
]

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:
[EDIT]

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

Kanika

Kanika,

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

Facets
    ✓ 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

Also
24%20AM

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.

Kanika