Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: Initial frontend search proof of concept with Fuse.js #3435

Merged
merged 8 commits into from
Jul 30, 2024

Conversation

DafyddLlyr
Copy link
Contributor

@DafyddLlyr DafyddLlyr commented Jul 17, 2024

What does this PR do?

  • Handles search in the frontend using Fuse.js
  • Creates useSearch() hook as a facade for this library
    • This means we could search elsewhere fairly easily by re-using this hook (e.g. teams, flows)
    • We could also more easily swap out the search functionality in future (maybe with our own API or another library)
  • Displays list of external portals to contextualise search results (see Figma designs here)

Why search in the frontend?

  • We have all flow data already in the frontend and don't need to fetch this from the db, add parentIds etc (on each debounced search request)
  • Most flows aren't actually that big, so handling this in the frontend isn't as intensive a task as I would have thought (I have some SQL queries for avg. number of nodes, flow size in kb etc I can share).
  • Initial testing indicates it's pretty performant
  • If we start hitting performance issues, the Fuse.js code could still run server side so there's not much "lost" work as such

Why Fuse.js?

  • Docs and API are comprehensive - covers all our needs and then some
  • Well established and stable
  • Plenty of other options out there if we find it's either not performant or inaccurate

Next steps...

I'll pick up the below as follow up PRs -

Screen.Recording.2024-07-19.at.16.52.26.mov

Copy link

github-actions bot commented Jul 17, 2024

Removed vultr server and associated DNS entries

@DafyddLlyr
Copy link
Contributor Author

@RODO94 @jessicamcinchak - Still plenty of TODO comments, and outstanding tasks + some planx-core / flow navigation questions for the next dev call, but I'm opening this up for review just now to get feedback on the code that's here.

Once I've resolved a few questions on theopensystemslab/planx-core#462 (which this PR relies on) we can progress this (still feature flagged) to main if we're happy.

@DafyddLlyr DafyddLlyr requested a review from a team July 22, 2024 17:10
@DafyddLlyr DafyddLlyr marked this pull request as ready for review July 22, 2024 17:10
Copy link
Contributor

@RODO94 RODO94 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hiya! Great to spend time looking through the code here, and my comments are just clarifying how it all works. I can cast a more critical eye once it's clear to me, really appreciate the early review request.

@DafyddLlyr DafyddLlyr changed the title feat(wip): Initial frontend search proof of concept with Fuse.js feat: Initial frontend search proof of concept with Fuse.js Jul 29, 2024
DafyddLlyr added a commit to theopensystemslab/planx-core that referenced this pull request Jul 29, 2024
## What?
 - Adds a required `parentId` property to `IndexedNode`
 - Updates `sortFlow()` logic to match PlanX graph structure

## Why?
- Implemented in
theopensystemslab/planx-new#3435
- For navigation to a node to work from search, we need to know the
"path" through the graph to a node
- Currently `sortFlow()` returns an optional `parentId`, despite all
nodes having a parent (apart from the root node). It's more accurate to
give all nodes a parent. This makes things a bit easier when
constructing a path (upcoming PR)
- The current implementation of `sortFlow()` doesn't quite match our
graph structure. When reaching the next child of the root node, the
current parentId is maintained instead of falling back to the root. This
worked well for treating the graph as a linear structure to split it up
be portal names (pseudo sections), but doesn't work in terms of actually
describing the hierarchy of the graph (required to build a valid PlanX
URL).
- **The difference really comes down to "previous node" vs. "parent
node"**
- The flow will still retain the same sorted order, `root.edges[0]` →
`root.edges[1]` → `root.edges[2]` → etc
 
Note: This should not impact any current functionality. `sortFlow()` and
`findNextNodeOfType()` are not used anywhere in PlanX currently.

### Example
 - I have a root node with two edges
- I navigate through the branches of the first edges until there are no
more edges
 - My next step will be the second edge of the root node
- **Currently:** The parentId for `root.edges[1]` will be set to the
very final node of `root.edges[0]` (previous node)
- **This PR:** The parentId for `root.edges[1]` will be set to "_root"
(parent node)
Copy link
Member

@jessicamcinchak jessicamcinchak left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Very cool prototype - happy for this to merge whenever since feature-flagged !

@DafyddLlyr DafyddLlyr merged commit c0990ca into main Jul 30, 2024
12 checks passed
@DafyddLlyr DafyddLlyr deleted the dp/fuse-js branch July 30, 2024 11:27
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants