Thumbnails Not Rendering Completely On Loaded Document In The WebViewer

Technical Support WebViewer
,
1

WebViewer Version: 11.0+

Do you have an issue with a specific file(s)?
Can you reproduce using one of our samples or online demos?
Are you using the WebViewer server?
Yes
Does the issue only happen on certain browsers?
No
Is your issue related to a front-end framework?
Yes
Is your issue related to annotations?
No

Please give a brief summary of your issue:
I currently have a claim file that when done loading in the Webviewer (using the eventListener ‘documentLoaded’) does not have all thumbnails rendered in the thumbnails panel. It seems this happened after I used the below code snippet to optimize my document server-side:

var options = new ViewerOptimizedOptions();
options.SetThumbnailRenderingThreshold(0); // using value 0 means all pages according to Apryse
doc.SaveViewerOptimized(optiimizedFile, options);

I attempted to optimize the document again using generateThumbnails method in Apryse SDK, hoping it would correct the issue and all thumbnails would now be rendered after the document was loaded, but that did not happen.

Here is the code snippet below:

Optimizer.TextSettings textSettings = new();
textSettings.EmbedFonts(options.EmbedFonts);

Optimizer.ImageSettings imageSettings = new();
imageSettings.SetImageDPI(options.MaxDpi, options.DpiDownsampling);
imageSettings.SetQuality((uint)options.Quaility);

Optimizer.OptimizerSettings optimizerSettings = new();
optimizerSettings.SetTextSettings(textSettings);
optimizerSettings.SetColorImageSettings(imageSettings);

Optimizer.Optimize(doc, optimizerSettings);

Flattener fl = new();
fl.Process(workingSetPdf, Flattener.FlattenMode.e_fast);

workingSetPdf.GenerateThumbnails(96);

workingSetPdf.Save(linerizedFile, SaveOptions.e_linearized | SaveOptions.e_remove_unused);

Please describe your issue and provide steps to reproduce it:
See the above description and that is how you create the problem document and then attempt to re-optimize using the GenerateThumbnails method.

Please provide a link to a minimal sample where the issue is reproducible:

2

Hello, I’m AiRon, an automated tech support bot :robot:
While you wait for one of our customer support representatives, I can help you with your question.


It seems you’re experiencing an issue with thumbnails not rendering completely in WebViewer after optimizing the document server-side. This could be related to how the document is being optimized and the settings used, particularly around thumbnails and rendering thresholds.

Some things you can try:

  • Ensure that the SetThumbnailRenderingThreshold(0) is correctly applied, which should instruct the viewer to render all thumbnails. Double-check that this setting is being applied correctly in your optimization process.

  • Verify that the GenerateThumbnails method is being called correctly and that the document is being saved with the appropriate options to retain these thumbnails.

  • Consider using the SaveViewerOptimized function with default settings to see if this resolves the issue, then gradually adjust your settings to pinpoint where the problem might be introduced.

  • Check for any console errors or warnings in your browser’s developer tools that might provide more insight into what might be going wrong during the rendering process.



Here are some resources that might help you:


Hopefully, this helps you solve your problem while you wait for a human to get back to you.

3

Hello Andi Ja

Thank you for contacting WebViewer Forums.

If only some thumbnails are loaded in WebViewer, it can definitely be a timing issue on the documentLoaded event. If you were to use an event later in the document lifecycle such as annotationLoaded or invoking the thumbnail loading through a testing button click, are there any improvements? Providing a quick demo video would also help us to understand the issue further.

Regards,
Luke

4

This is an image of the issue happening:

ThumbailsNotRenderingIssue
ThumbailsNotRenderingIssue1520×921 54.2 KB

The thumbnail image should render in the spot circled in red, however no matter how long I wait, or how I scroll, it will not render - the same goes for all thumbnail images after Page 1 and 2.

The only way I know to force a thumbnail image render is through manually left clicking with my mouse on the empty white spot where the image should be, however this is not satisfactory to our stakeholders who wish to use the thumbnails panel as a form of navigation via the images to know where to go.

Currently we are streaming pages, we do not load the whole document into the viewer because we are dealing with documents with 10,000+ pages and do not want the user to wait so long before they see any pages, however it appears loading the whole document resolves the issue, but again this is not practical for our use case.

5

Hello Andi,

Thank you for your reply.

Typically with WebViewer Server, the first 5-6 pages will have thumbnails generated for initial loading in the Viewer itself and the thumbnail images in the panel are based of those. Re-renders happen with zoom controls as well which may be why manually clicking may render the missing thumbnails.

It seems that you have the WebViewer Server option enabled, can you provide the version as well as any server configurations? I am interested if you have any client side rendering options enabled.

Can you also provide any code snippets used for streaming the linearized files in WebViewer?

Regards,
Luke

6

Hi Luke,

Thanks for looking into this.

Upon closer look it appears this only happens when we enable “shouldUseMinimumDownloads” when loading the document into the viewer:

const loadOptions: Core.LoadDocumentOptions = {
  extension: docExtension,
  docId: docId,
  filename: 'document',
  customHeaders,
  shouldUseMinimumDownloads: this.shouldUseMinDownloads, // when set to true, thumbnails don't render
};

// The catch on .loadDocument will only be hit for errors during initial document loading.
// For errors during initial loading and/or page streaming, the onError hook from loadOptions will be hit.
await Core.documentViewer.loadDocument(docFullUrl, loadOptions).catch((err) => {
  this.wvInstance.UI.displayErrorMessage(
    'An error occurred when loading the document. Please reload the page.\n\nIf this issue continues, please contact Optum Serve tech support.'
  );
  throw new Error(`An error occurred during initial document loading: ${err}`);
});

When “shouldUseMinimumDownloads” is set to false, the whole document will load and all thumbnails will be rendered, which I guess is to be expected because the whole document is loaded. It appears thumbnail rendering is tied to page loading.

additional info for server and webviewer versions:

@pdftron/webviewer: 11.5.0
PDFTron.Net.x64: 10.5.0

I really would like to load and render the thumbnails without needing to load an entire page while still having shouldUseMinimumDownloads enabled in the case we have very large documents.

Thanks