igvteam/igv.js

Using Zoom in button or Zoom slider result in NaN values for reference coordinates when using a JSON session

safay opened this issue · 5 comments

safay commented

On 2.16.0 (according to package.json) I believe I have encountered an issue when using the zoom-in button and slider in the zoom widget. This is when trying to use a web session opened with the igvjs.html method shown in the examples:
http://127.0.0.1:8080/examples/igvjs.html?sessionURL=sessions/igvSession.json

The session opens with my own JSON formatted file:

  "reference": {
    "id": "test49128",
    "name": "the fragment name",
    "fastaURL": "<URL for a valid, accessible .fa fasta file>",
    "indexURL": "<URL for a valid, accessible .fai reference index"
  },
  "tracks": [
    {
      "url": "<URL for a valid .bam alignment>",
      "indexURL": "<URL for a valid .bam.bai alignment index>",
      "name": "alignment",
      "format": "bam"
    }
  ]
}

image

and it is possible to zoom in to a narrower range of the reference by directly selecting the range on the reference track, creating the red box:
image

but if the Zoom-in button is clicked
image

the app shows an error "Invalid array length," and notably there are NaNs in the chromosomal coordinates.
image

Console error:
image

Initially I thought the JSON file I created was responsible, but after some more poking around, I'm not so sure; the NaNs also appear when the Zoom-in button is pressed in the provided example, with the spinners perpetually spinning:
image

jrobinso commented

Thanks for the report. So far I can't reproduce it. You reference the "provided example", but I don't see an example I can actually run. What are you referring to exactly?

Version 2.16.0 is not released, so I assume you are pulling and building from the repository.

safay commented

Correct, I pulled the latest on master and built according to the readme, launching a server with npx http-server.
Starting at this page:
http://127.0.0.1:8080/examples/igv-links.html
clicking on "JSON session file" brings me to the link that generated the last image in my initial post, here:
http://127.0.0.1:8080/examples/igvjs.html?sessionURL=sessions/igvSession.json
My browser is Chrome 120.0.6099.109, MacOS 14.2, on an Apple M1 chip (ARM64)
The issue is not a deal breaker, it will just result in some frustration for end users who try to use the zoom widget. Zoom out works; it's just the slider and zoom in that result in the error and NaNs in the coordinates.
This project is really awesome, thank you for your hard work on it.

jrobinso commented

Thanks for the claification. I can reproduce it now. Curiously this problem only seems to occur if a session is loaded through a web link.

safay commented

Hi Jim,
Thanks for pushing a fix. I see your commit 12c05c7. I pulled these changes, am up to date with remote and I re-launched the server. Unfortunately I'm still seeing the issue with NaNs appearing in the coordinates and associated "ERROR Invalid array length" when hitting the zoom in button or adjusting the slider. This happens with the example file through a web link, e.g., http://127.0.0.1:8080/examples/igvjs.html?sessionURL=sessions/igvSession.json.
What am I missing? I appreciate your help.

jrobinso commented

Did you rebuild (npm run build) before running the example? I can't reproduce it now, another possibility is your browser is caching old code.