Skip to content

Browser based export - #12

Draft
will-moore wants to merge 18 commits into
ome:masterfrom
will-moore:browser_based_export
Draft

will-moore wants to merge 18 commits into
ome:masterfrom
will-moore:browser_based_export

Conversation

@will-moore

@will-moore will-moore commented Sep 17, 2026 •

Copy link
Copy Markdown
Member

Using jsPDF to create a PDF in the browser (with GitHub Co-pilot's help!)

Test sample: https://deploy-preview-12--ome-figure.netlify.app/?file=https://raw.githubusercontent.com/will-moore/figure/refs/heads/figure_json_from_gist/sample_figures/ngff_images_figure.json

This is a major rewrite of the Figure_To_Pdf.py script into JavaScript.

Follow-up work:

  • LUT colorbars - since we had complex logic there, loading from OMERO etc I skipped this for now. Need to convert LUTs into rgb arrays in the app before passing to PDF generation.
  • TIFF export - This would be nice to have and should come in a follow-up PR. Probably this will be "png export" rather than TIFF.

Outline of changes:

  • Even before the conversion of python script to JavaScript, I removed all the image rendering logic and other OMERO code from the python script and instead used the images that we have already rendered in the browser. These were included in the figure.json passed to the script in the form of panel.src = "data:url...".

  • In order to have these available to the figure-model, they are updated in the panel-model when the image is re-rendered. To reduce the size of the JSON passed to the pdf generation, I also implemented the cropping, rotation etc first, then just pass the viewport region to the pdf script. (I was also trying to make the export script a bit simpler so that it was easier to convert, but I probably didn't need to bother since AI handled the rewrite easily)

  • When images are rendered from OMERO, the src data should be included in the panel model in the same way, so the export step is the same for OME-Zarr and OMERO images.

  • The cropping of the rendered panel 'src' data happens at export time. As before, in the app page we actually render an image larger than the viewport so that the user can pan the image etc. For small images (< 3k) we render the whole image. For Big images we render a region that is 50% larger than the viewport.

  • So, there may be some bugs in the panel rendering - needs testing

  • Also need to test Big images where the smallest resolution is still very large. These images have been problematic in the past. There may be issues when manipulating large images on a canvas.

  • So, the Figure_To_Pdf.py script has had some changes to it, then I copied the minimal PDF generation code from it into a new script export_script.py to serve as the basis for AI conversion to JavaScript. I'm not sure if we want to keep either of these python scripts long-term. Are they still useful for anything?

  • The Figure_To_Pdf.py script contains TIFF export logic that hasn't yet been converted to JavaScript. However, it may be easier to have AI use the new JavaScript PDF generation as a template for png export, rather than the python code.

TODOS (this PR):

  • When in OMERO, add export option "PDF from web" (tooltip "Generate PDF in web browser, not via OMERO.script") to allow export from browser alongside existing options
  • When standalone app, this becomes the only option (no drop-down menu shown)
  • Ensure that you can't try to export while images are still loading (this fails).
  • Test with big images where smallest resolution is still big
  • LUT colorbars
  • check "dpi" feature - compare with previous script which resampled to boost dpi
  • test lots:
    • Page layouts & colors,
    • all ROIs
    • large images (just under 3k x 3k)
    • labels all sizes & orientation etc
    • panel borders
    • figure legend
    • with OMERO-rendered images
    • OMERO dynamic labels (generated by the script)?
    • markdown formatting of labels

@netlify

netlify Bot commented Sep 17, 2026 •

Copy link
Copy Markdown

✅ Deploy Preview for ome-figure ready!

Name Link
🔨 Latest commit 4de24d2
🔍 Latest deploy log https://app.netlify.com/projects/ome-figure/deploys/6ab67534f8c5ee0008aeef13
😎 Deploy Preview https://deploy-preview-12--ome-figure.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

@will-moore
will-moore marked this pull request as ready for review September 18, 2026 09:30
@snoopycrimecop

Copy link
Copy Markdown
Member

Conflicting PR. Removed from build OMERO-plugins-push#82. See the console output for more details.
Possible conflicts:

--conflicts

@will-moore
will-moore marked this pull request as draft September 22, 2026 15:06

This branch has not been deployed

No deployments
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.

2 participants