search

allenai / pdf-component-library

51 stars 5 forks source link

Add tracking page number in PDF Component library #155

Closed huytr1995 closed 2 years ago

huytr1995 commented 2 years ago

Description

Ref: https://github.com/allenai/scholar/issues/32921 Figma: https://www.figma.com/file/2gUmD3D8tz6gnm9rsYgj6J/Semantic-Reader

With the creation of ScrollContext completed, now its time to add the ability to track current page and allow user to enter the page they want to view and then it will scroll to there. This PR address all of the above functionality.

Reviewer Instructions

Create a new component name PageNumberControl that will be imported to Semantic Reader in S2. Change default Threshold to an array with a specific range suggest by Paul so it will fire more frequent but not too harmful to performance. Separate out the logic of getMaxVisibleElement into a util file and add unit test for it. Added aria-label for accessibility and verify it works with Screen Reader

Testing Plan

Couple scenario to be test:

  1. If user scroll through the PDF it will display the correct page they are on
  2. If user types any letter it will display empty in the input box
  3. if user enter a decimal number that is in range of the total pages it will round down and scroll to the page and also update the current page to that round down number
  4. if user type a number in range of total pages it will scroll to that page
  5. if the user type a number and unfocus of the input it will scroll to that page
  6. Enter a number out of total range it wont do anything
  7. Enter a negative number wont do anything

Output / Screenshots

  1. If user scroll through the PDF it will display the correct page they are on

https://user-images.githubusercontent.com/84343285/182477091-bbc83cb8-d688-47ec-b07e-a2eb27bcf073.mov

  1. If user types any letter it will display empty in the input box (e works since it stands for exponential which is numeric)

https://user-images.githubusercontent.com/84343285/182477569-4b32c77e-c382-417c-883f-5e87cad5536d.mov

  1. If user enter a decimal number that is in range of the total pages it will round down and scroll to the page and also update the current page to that round down number

https://user-images.githubusercontent.com/84343285/182477780-275814cf-156a-4a99-805a-258cfd022981.mov

  1. If user type a number in range of total pages it will scroll to that page

https://user-images.githubusercontent.com/84343285/182477961-a5e60eba-ffd7-4a78-a957-23dda6b9912e.mov

  1. If the user type a number and unfocus of the input it will scroll to that page

https://user-images.githubusercontent.com/84343285/182478292-d9f35830-1e33-4d1b-90af-6158d7258c5a.mov

  1. Enter a number out of total range it wont do anything

https://user-images.githubusercontent.com/84343285/182483446-ea3c6198-50e2-4566-b476-c1809beaf8d3.mov

  1. Enter a negative number wont do anything

https://user-images.githubusercontent.com/84343285/182483688-e3ec95e0-0293-43dc-978f-5dec308f1d8a.mov

Browser

  1. Edge

https://user-images.githubusercontent.com/84343285/182687107-4d2fb31a-6800-436a-afa2-bf6f4ba7a2a5.mov

  1. Firefox

https://user-images.githubusercontent.com/84343285/182688807-1874190d-15b9-42df-abc3-8a0aae87ed24.mov

  1. Safari

https://user-images.githubusercontent.com/84343285/182697420-a6471b0d-0f11-4141-8cd2-ddcb462950bb.mov

A11y

https://user-images.githubusercontent.com/84343285/182479551-c01f29c6-9fb6-498f-acd5-1f9e82638bd1.mov

ctrier commented 2 years ago

Looking good! What happens if user enters a number that is out of range or page number that the user is already on?

huytr1995 commented 2 years ago

Looking good! What happens if user enters a number that is out of range or page number that the user is already on?

@ctrier nothing will happen but let me add a video for u to verify

ctrier commented 2 years ago

Oh, one more. What if the document page count is 3 digits long? Do we need to account for this by making the box bigger? Do we have any 100 pg documents?

huytr1995 commented 2 years ago

Oh, one more. What if the document page count is 3 digits long? Do we need to account for this by making the box bigger? Do we have any 100 pg documents?

@ctrier so far i havent seen any document in prod has 3 digits long the max i saw so far is like 40 pages