Images are rendered in incorrect location if sheet is scrolled before image is loaded (gridjs-spreadsheet)

If the sheet has been scrolled before a given image has been loaded from the server, it gets rendered in the incorrect position:

image.png (92.5 KB)

I think the rendering code is assuming the scroll position is [0,0]. This can be reproduced with https://www.nab.com.au/content/dam/nab/documents/reports/corporate/2022-sustainability-data-pack.xlsx. Steps to reproduce:

  • load the spreadsheet in the viewer
  • open devtools
  • turn on network throttling (I used Slow 3G)
  • change sheet to financial health
  • scroll down before the images have a chance to load

Changing to a different sheet and back again fixes the rendering location, however we want the ability to open a sheet at a particular scroll location for the user, which doesn’t work with this bug.

@jrf.att
We have opened the following new ticket(s) in our internal issue tracking system and will deliver their fixes according to the terms mentioned in Free Support Policies.

Issue ID(s): CELLSGRIDJS-810

You can obtain Paid Support Services if you need support on a priority basis, along with the direct access to our Paid Support management team.

@jrf.att
It is fixed now .Please update to v23.5;
you need to update for both server side GridJs dll through nuget package and client side js through npmjs.

Hey @peter.zhou, after upgrading to 23.5, I’m seeing issues with the spreadsheet linked above. The steps I’m following:

  • Open spreadsheet
  • Switch to Financial Health sheet
  • Switch to Exposures sheet
  • Switch back to Financial Health sheet

The images from the Exposures sheet still rendered, not the Financial Health images:

image.png (80.6 KB)

Moreover, mouseover events are throwing a TypeError, because the images on the canvas do not match up with what’s in sheet.data:

xspreadsheet.js:12 Uncaught TypeError: Cannot read properties of undefined (reading 'hyperlink')
    at s.mousemove (xspreadsheet.js:12:1)
    at s.fire (xspreadsheet.js:3:1)
    at s._handleEvent (xspreadsheet.js:3:1)
    at s.__onMouseMove (xspreadsheet.js:3:1)
    at s._onMouseMove (xspreadsheet.js:3:1)

@jrf.att
We 've test in both local demo and qa site.
We cannot reproduce this issue. can you record a video for it?
can you try reproduce this issue in our qa test app online site

Hmm, I can’t repro there either… I’ll do some more testing and get back to you!

Apologies @peter.zhou, I realised it was being caused by a workaround we’d added for ESM module for GridJS - #13 by jrf.att. It seems like that bug has been fixed, so we no longer need the workaround, and after removing it, images work again!

@jrf.att
welcome

Hey @peter.zhou, I ended up finding a slightly different issue, which I’ve been able to repro on the QA site.

  • Open the sheet linked above
  • Set Network Throttling to Slow 3G
  • Switch sheet to Financial Health
  • Before images finish loading, switch sheet to Exposures

Images from both sheets get rendered on the Exposures sheet: image.png (969.7 KB)

If you then switch back to Financial Health, and scroll down before the images re-render, they get out of place: image.png (996.2 KB)

After scrolling again, they snap back into the correct location, however the Exposures sheet remains broken (i.e. with images from both sheets) until the page is reloaded.

@jrf.att
thanks for the detail steps.
We try many times.
however it is very hard to reproduce this issue,can you record a video for it .

Apologies for the slow reply @peter.zhou, I missed the notification about your reply. I’ve recorded a video showing the issue and uploaded it to https://www.loom.com/share/8b5fd8a3248d42baaf51fe8b58ca49b2.

Would it be possible for us to get access to the un-minified gridjs-spreadsheet code? We would be happy to assist with debugging, and may be able to provide a fix, however that’s not really possible with the minified code from gridjs-spreadsheet - npm. (In case it helps, we’ve recently purchased a full Site OEM license and have a signed confidentially agreement under the EULA.)

@jrf.att
Thanks for your video,we can now reproduce it.
We are sorry,We can not share the source of the js.
We have opened the following new ticket(s) in our internal issue tracking system and will deliver the fixes soon.

Issue ID(s): CELLSGRIDJS-822

The issues you have found earlier (filed as CELLSGRIDJS-822) have been fixed in this update. This message was posted using Bugs notification tool by johnson.shi

Hi @peter.zhou, I’ve tested the new release on Aspose’s public Viewer. There’s no exception in the logs, however I’m still seeing images rendered on the incorrect sheet. The steps to repro are the same as my last comment.

image.png (585.4 KB)

In the above screenshot, the Microfinance Loans charts are from the Financial Health sheet but are rendered on the Exposures sheet.

There also appears to have been a regression in the fix for the original issue in this thread. That is, if you switch to a sheet with images, then scroll before the images are loaded, they’re rendered in the incorrect location:

image.png (485.4 KB)

This is automatically fixed as soon as the user scrolls the page again, however it would be good if they didn’t have to do that to get images in the correct location.

@jrf.att,

Thanks for the feedback with screenshots.

We will look into your mentioned issue(s) and get back to you soon.

We are sorry for any inconvenience caused!

@jrf.att
finally we can reproduced thoes two issues.we will fix it soon.

@jrf.att
We have opened the following new ticket(s) in our internal issue tracking system and will deliver their fixes according to the terms mentioned in Free Support Policies.

Issue ID(s): CELLSGRIDJS-864

You can obtain Paid Support Services if you need support on a priority basis, along with the direct access to our Paid Support management team.

The issues you have found earlier (filed as CELLSGRIDJS-864) have been fixed in this update. This message was posted using Bugs notification tool by johnson.shi

Hi @peter.zhou @amjad.sahi,

I’ve found an issue with the latest grisjs-spreadsheet (23.7.0) which I think may be related to the fix that was implemented here. I’ve got spreadsheets where the scrollbars do not render, and I’m unable to scroll the sheets using my mouse.

I’ve been able to reproduce the issue on Aspose’s QA stack, using this file with the following steps:

  • Switch to a sheet which is big enough to scroll, eg “Con state of fin position 2014” (scrollbars are rendered)
  • Switch to any other sheet
  • Switch back to “Con state of fin position 2014” (scrollbars are NOT rendered)

I’ve had a quick look with the debugger, and what I think is happening is that isRestoreFromCanvas is being set to true on the second load. However, because the sheet doesn’t have any shapes, this.data.canvasData in rerenderCanvasBySavedJson is undefined, so isRestoreFromCanvasReady never gets set to true. As such, the isLoaded check in resetData always returns false and the scrollbars are never set back to scroll.

@jrf.att
Thanks for your reporting.
We can reproduce this issue.
We have opened the following new ticket(s) in our internal issue tracking system and will deliver their fixes according to the terms mentioned in Free Support Policies.

Issue ID(s): CELLSGRIDJS-880

You can obtain Paid Support Services if you need support on a priority basis, along with the direct access to our Paid Support management team.