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

Add QR code generation and scanning to UI #808

Merged
merged 14 commits into from
Aug 30, 2024
Merged

Add QR code generation and scanning to UI #808

merged 14 commits into from
Aug 30, 2024

Conversation

ml-evs
Copy link
Member

@ml-evs ml-evs commented Jul 13, 2024

Closes #803.

This PR:

  • Adds a QR code icon to all refcode displays, which, when clicked, opens a modal showing the QR code for that sample item, with a WIP print button that create a dummy window containing just the QR code.
  • The QR codes point to {{ QR_CODE_RESOLVER_URL }}/items/<refcode>, which can be configured. The refcode itself is always parseable from this URL, so datalab-native scanners (such as that described below) can resolve the item without needing to go via the resolver.
  • There is also a "Scan QR Code" button at the top of the sample table page (for now) which opens a camera stream and provides file upload for providing a datalab QR code.
  • API route argument is added for redirect-to-ui, where the /items endpoint can point itself to the UI, if configured. This is the default redirect used by the purl system.

Potential follow-ups:

  • This scanner should do the following:
    • Detect if the sample is from this deployment, and if so, redirect to the edit page directly.
    • Follow the resolver link with JS and get the "real" underlying URL, then present it to the user to click on, if it believes it to be a datalab QR code.
    • If it does not believe it to be a datalab QR code, do the same as above but with a giant warning.
  • QR codes should also embed tokens that allow for access of non-private/safety data. This will need updates to the API too.
  • The barcode print itself should also allow some info to be printed automatically.

Copy link

codecov bot commented Jul 13, 2024

Codecov Report

Attention: Patch coverage is 89.47368% with 2 lines in your changes missing coverage. Please review.

Project coverage is 67.33%. Comparing base (1b05dfe) to head (955216d).
Report is 1 commits behind head on main.

Additional details and impacted files
@@            Coverage Diff             @@
##             main     #808      +/-   ##
==========================================
+ Coverage   67.26%   67.33%   +0.06%     
==========================================
  Files          62       62              
  Lines        3858     3869      +11     
==========================================
+ Hits         2595     2605      +10     
- Misses       1263     1264       +1     
Files Coverage Δ
pydatalab/pydatalab/permissions.py 84.44% <100.00%> (+0.72%) ⬆️
pydatalab/pydatalab/routes/v0_1/items.py 82.83% <87.50%> (+0.21%) ⬆️

Copy link

codecov bot commented Aug 22, 2024

Codecov Report

Attention: Patch coverage is 83.33333% with 1 line in your changes missing coverage. Please review.

Project coverage is 68.14%. Comparing base (5bd7e24) to head (b88194c).
Report is 164 commits behind head on main.

Files with missing lines Patch % Lines
pydatalab/pydatalab/routes/v0_1/items.py 83.33% 1 Missing ⚠️
Additional details and impacted files
@@            Coverage Diff             @@
##             main     #808      +/-   ##
==========================================
+ Coverage   68.12%   68.14%   +0.01%     
==========================================
  Files          62       62              
  Lines        3884     3889       +5     
==========================================
+ Hits         2646     2650       +4     
- Misses       1238     1239       +1     
Files with missing lines Coverage Δ
pydatalab/pydatalab/routes/v0_1/items.py 82.65% <83.33%> (-0.05%) ⬇️

Copy link

cypress bot commented Aug 22, 2024

datalab    Run #2337

Run Properties:  status check passed Passed #2337  •  git commit a855ce461b ℹ️: Merge b88194cffa16450126b083fde20ba537eb094937 into 5bd7e24356853cf65364e531a886...
Project datalab
Branch Review ml-evs/qr-codes
Run status status check passed Passed #2337
Run duration 04m 33s
Commit git commit a855ce461b ℹ️: Merge b88194cffa16450126b083fde20ba537eb094937 into 5bd7e24356853cf65364e531a886...
Committer Matthew Evans
View all properties for this run ↗︎

Test results
Tests that failed  Failures 0
Tests that were flaky  Flaky 0
Tests that did not run due to a developer annotating a test with .skip  Pending 0
Tests that did not run due to a failure in a mocha hook  Skipped 0
Tests that passed  Passing 132
View all changes introduced in this branch ↗︎

@ml-evs ml-evs force-pushed the ml-evs/qr-codes branch 2 times, most recently from 1066a68 to 6875b87 Compare August 23, 2024 12:30
@ml-evs ml-evs mentioned this pull request Aug 23, 2024
8 tasks
@ml-evs ml-evs changed the title Use refcode endpoints in UI for QR codes Add QR code generation and scanning to UI Aug 24, 2024
@ml-evs ml-evs marked this pull request as ready for review August 24, 2024 10:15
@ml-evs ml-evs requested a review from jdbocarsly as a code owner August 24, 2024 10:15
@ml-evs ml-evs force-pushed the ml-evs/qr-codes branch 2 times, most recently from 78dd2c3 to beff5ed Compare August 28, 2024 17:10
@ml-evs ml-evs added this to the v0.5.x milestone Aug 28, 2024
@ml-evs ml-evs requested a review from BenjaminCharmes August 28, 2024 18:17
@ml-evs ml-evs added enhancement New feature or request API For issues/PRs pertaining to the API javascript Pull requests that update Javascript code labels Aug 28, 2024
Copy link
Member Author

@ml-evs ml-evs left a comment

Choose a reason for hiding this comment

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

This this is ready when you are @jdbocarsly and @BenjaminCharmes -- I have one comment we can discuss regarding configuration (but probably that can be addressed in another PR before release)

Copy link
Contributor

@BenjaminCharmes BenjaminCharmes left a comment

Choose a reason for hiding this comment

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

It looks really good! 👏

Copy link
Member

@jdbocarsly jdbocarsly left a comment

Choose a reason for hiding this comment

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

looks good! excited to start using this and build on top of it

@ml-evs ml-evs merged commit e77f136 into main Aug 30, 2024
19 checks passed
@ml-evs ml-evs deleted the ml-evs/qr-codes branch August 30, 2024 16:16
BenjaminCharmes pushed a commit that referenced this pull request Sep 11, 2024
* Add clickable QRCode modal in navbar

* Add qr code library

* Add QRCodeModal component to formatted refcode

* Add QRScanner functionality using `vue-qrcode-reader`

* Add QR scanning from image

* Add alert and spinner to handle camera authorisation/availaility

* Add textual label to QRCode

* Update default pURL resolver

* Add query parameter redirect-to-ui to `/items` endpoint to allow link resolver to work more smoothly

* List all QR codes in stream

* Use auxiliary variable in store to map refcodes to IDs

* Make sure item_id is set at top level of item response when querying by refcode

* Redirect to the correct UI URL

* Update config for qr code resolver and add warnings if unconfigured
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
API For issues/PRs pertaining to the API enhancement New feature or request javascript Pull requests that update Javascript code
Projects
None yet
Development

Successfully merging this pull request may close these issues.

QR codes and barcodes for samples
3 participants