search

gammapy / gamma-sky

Portal to the gamma-ray sky
http://gamma-sky.net/
MIT License
6 stars 3 forks source link

Source search performance issues #82

Closed vorugantia closed 7 years ago

vorugantia commented 7 years ago

I'm currently looking for the solution to loading 5000+ items in our search bar and getting very slow performance. Loading the search entries and typing in the search bar need to be asynchronous processes. A virtual/infinite scroll seems to be the solution (basically loading search results as you scroll down).

If I were to write up a virtual scroll myself, it would take about 500 lines (and lots of tricky code...) so it's probably more time-efficient to turn to a third-party npm package (a few of them exist.)

See this thread - Angular2 Material should be implementing a virtual scroll sometime later this year: This issue is a reminder to look into Material's version or virtual scroll when it's released.

vorugantia commented 7 years ago

The alternative is to call an http get request on our catalog.json files and query by name - loading these search results should be an asynchronous process. This is more similar to what Google Maps does for their search bar.

cdeil commented 7 years ago

I'm not sure what best to do ... just a few thoughts.

If you have a solution that kinda works, maybe leave as-is and move on to other features (route to map position), even if the select autocomplete is slow, and revisit this in the future when Angular material has implemented a solution for this.

Would changing the "result preview" list to be fixed-length first 5 or 10 hits like Google maps does it for autocomplete work? Is it available / possible in Angular 2 material?

screen shot 2017-07-21 at 07 56 14

Another option could be to implement the "search result list" as a table, i.e. have a search field that's connected to a table result list like here: https://gammapy.github.io/gamma-cat/sources.html That is using: https://datatables.net/

I see that Angular material 2 has implemented a data table (https://material.angular.io/components/table/overview ), but I'm not sure how well-developed it is (connect to search field? responsive for 5000 rows?) and if it would be a good option to try at this point.

vorugantia commented 7 years ago

In f07abc4fe6ce596b96aa1ea0f5ed754c484bec7b, on this line, we only show the first 5 results that come from the search input. Now that we aren't loading thousands of items into the DOM but only five, the performance issue is gone.

Now the search field works similarly to the one on Google Maps.