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

Search: Add additional view type using pig.js #1089

Closed
wants to merge 1 commit into from

Conversation

seond
Copy link

@seond seond commented Feb 23, 2021

This PR is to create a new feature that was requested in #85. The ask of issue #85 was to use pig.js to create a feed that is a lot easier to scroll through all the images with better performance. The result turned out pretty nice. The page loads 1500+ images I have almost instantly and I can freely scroll to any position of the huge stack of pictures, then the page fluently lazy load the requested part of the page smoothly.

Check this demo to see how smooth it is.
https://drive.google.com/file/d/1Gku6aWRzShX4Ciz3xg68XHIvDCGv_Y8v/view?usp=sharing

Here's a few implementation highlights:

  • The page replicates the existing /photos page in terms of 1. how it handles the filters/url params 2. all the actions on an opened image
  • Instead of infinite scroll mechanism, the page loads all the images that subject to the applied filter based on the batch size. API calls are made consecutively instead of being made simultaneously.
  • The page creates multiple chunk divs as many as the number of batches then converts each div into a pig.js object so it can prevent a dom object from being humongous.
  • The only event that could be handled on a photo item was onClick due to the limitation pig.js has. The library does not provide any other event handler options. You can still like and the rest of actions by opening the image by clicking on it.

The page is accessible at /instant and I intentionally skipped adding the page in the menu to leave it on to the maintainers to decide how we want to utilize or even improve/develop this page in a long run.

This is my first contribution to PhotoPrism and I fell in love with the project as I was trying and working on it. Great work, and big thanks to all the efforts on this fantastic project.

@lastzero
Copy link
Member

Thank you very much for submitting this PR & sorry for the wait!

  • Loading all search results is generally not a good idea as some users may have millions of pictures.
  • Users trying different search filters / keywords are going to trigger many reloads.
  • Results should automatically refresh after new files have been added / uploaded as well.

Loading all pictures is very inefficient in this case. It's great in case the user scrolls very far, doesn't change search filters, and there are no index updates. A solution might be to disable those features on this page and maybe also reduce the amount of metadata if the view doesn't need it, similar to Places.

The pig.js library should be included via NPM (see https://github.com/photoprism/photoprism/blob/develop/frontend/package.json) and not directly added to our repository.

@lastzero lastzero self-assigned this Apr 11, 2021
@CLAassistant
Copy link

CLA assistant check
Thank you for your submission! We really appreciate it. Like many open source projects, we ask that you sign our Contributor License Agreement before we can accept your contribution.
You have signed the CLA already but the status is still pending? Let us recheck it.

@lastzero
Copy link
Member

Thanks a lot for your contribution! I have to close this PR as there is still a lot of work to do and we haven't received any feedback for a long time. pig.js may be something we can use for a static export in the future though.

@lastzero lastzero closed this Jun 27, 2023
@lastzero lastzero added ux Impacts User Experience incomplete Cannot be processed due to missing information labels Jun 27, 2023
@lastzero lastzero changed the title Add additional view type using pig.js Search: Add additional view type using pig.js Jun 27, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
incomplete Cannot be processed due to missing information ux Impacts User Experience
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

3 participants