Implementation of filters in custom search modal.

[vivekjain23]

Description of change

• Added facet filter on search bar.

Links to any relevant issues

fixes iotaledger/iota#1438

Type of change

• Enhancement (a non-breaking change which adds functionality)

Change checklist

Tick the boxes that are relevant to your changes, and delete any items that are not.

• I have followed the contribution guidelines for this project
• I have performed a self-review of my own changes
• I have made sure that added/changed links still work
• I have commented my code, particularly in hard-to-understand areas

[jlvandenhout]

Just as a consideration, since we already have to change the search component provided by @docusaurus/theme-search-algolia anyway to support dynamic selection of facets to filter. We could also use the UI components provided by instantsearch, which supports facet filters out of the box. Basically the steps would be to swizzle the SearchBar component, like we already have to do anyway, like described here, build the UI using the Instantsearch components and style it so it matches the rest of the Wiki (which we also need to look at anyway for the rebrand).

[jlvandenhout]

The search query is cleared when the filter is changed in the search modal. This differs from the behavior on the search page, where it just updates the search results. I'd prefer if we can get the search modal to behave the same as the search page.

[github-actions]

This pull request has been deployed to Vercel.

Latest commit: 31482b1

✅ Preview: https://iota-wiki-k32uxfydr-iota1.vercel.app

[lucas-tortora]

The search query is cleared when the filter is changed in the search modal. This differs from the behavior on the search page, where it just updates the search results. I'd prefer if we can get the search modal to behave the same as the search page.

@vivekjain23 , could you look into this, please? It's been 2 weeks since this comment

[jlvandenhout]

I have tried to solve it, but my React knowledge is too limited, unfortunately.

[jlvandenhout]

After using the filter for a while, I also think we should make the selection behavior a bit different. Have the "all" filter still select everything, but as soon as you select individual items, I think it is more convenient to clear everything except the one selected item on the first individual selection.

Something like:

All is selected:

x All
x A
x B
x C

User selects B:

  All
  A
x B
  C

User selects A too:

  All
x A
x B
  C

[vivekjain23]

After using the filter for a while, I also think we should make the selection behavior a bit different. Have the "all" filter still select everything, but as soon as you select individual items, I think it is more convenient to clear everything except the one selected item on the first individual selection.

Something like:

All is selected:

x All
x A
x B
x C

User selects B:

  All
  A
x B
  C

User selects A too:

  All
x A
x B
  C

Yupp, thanks for the suggestion. I have implemented it

[github-actions]

This pull request has been deployed to Vercel.

Latest commit: fbdf425

✅ Preview: https://iota-wiki-8qorj3t6g-iota1.vercel.app

[github-actions]

This pull request has been deployed to Vercel.

Latest commit: 1ddf1d7

✅ Preview: https://iota-wiki-77vw3bp9s-iota1.vercel.app

[Dr-Electron]

Do we want this? I think in most cases the search filter state should revert again 🤔

[Dr-Electron]

Can you make this tsx? Will make it easier for us to migrate to the new docs

[Dr-Electron]

Can you swizzle this in ts please?

[Dr-Electron]

Can't we automate this somehow? We will never maintain it

[Dr-Electron]

Btw there is also still a bug, if there is only 1 search result for example, the footer is not at the bottom of the page