search

vgteam / sequenceTubeMap

displays multiple genomic sequences in the form of a tube map
MIT License
180 stars 25 forks source link

Warning: Failed prop type: Invalid prop `tracks` of type `array` supplied to `TrackPicker`, expected `object`. #373

Closed shreyasun closed 7 months ago

shreyasun commented 11 months ago

Warning: Failed prop type: Invalid prop tracks of type array supplied to TrackPicker, expected object. at TrackPicker (http://127.0.0.1:3001/static/js/bundle.js:6028:21) at HeaderForm (http://127.0.0.1:3001/static/js/bundle.js:2546:157) at div at App (http://127.0.0.1:3001/static/js/bundle.js:101:157) at RenderedRoute (http://127.0.0.1:3001/static/js/bundle.js:135457:27) at RenderedRoute (http://127.0.0.1:3001/static/js/bundle.js:135457:27) at Routes (http://127.0.0.1:3001/static/js/bundle.js:136033:24) at Router (http://127.0.0.1:3001/static/js/bundle.js:135963:30) at BrowserRouter (http://127.0.0.1:3001/static/js/bundle.js:134166:23)

I am getting this warning and it looks like it might something coming in from other recent changes. @ducku maybe you can take a look?

ducku commented 11 months ago

When does this warning occur? Is there a way I can recreate this?

Think I have a good idea of where this is happening. Tracks from tracks.json are put into an array format, but likely need to be put into an object format with indices as keys.

shreyasun commented 11 months ago

I am getting this error when I select custom data, select cactus.vg for the bed file, and then select "region without read tracks" for the region. I'm not sure if it shows up anywhere else.

ducku commented 11 months ago

It works for me on the current master branch.

I'm guessing it's something that was fixed in this PR #356. Maybe try merging and see if that fixes your issue?

adamnovak commented 10 months ago

I can reproduce this on commit e70b93c291fd308e1ad718ef4104a9865214b046 which is the current master branch.

  1. Check out the right commit and be in the right node with the right modules installed.
  2. npm run start
  3. When the browser opens, open the dev tools console.
  4. Set "Data" to "custom".
  5. Set "BED file" to "cactus.bed" (not .vg)
  6. Click the "Region" field to open it, scroll down, and select "region without read tracks".

Here's my log from Firefox:

Sequence Tube Map booting up [index.js:9](http://127.0.0.1:3001/Users/anovak/workspace/sequenceTubeMap/src/index.js)
Configuring router with basename [index.js:18](http://127.0.0.1:3001/Users/anovak/workspace/sequenceTubeMap/src/index.js)
App component starting up with API URL: http://127.0.0.1:3001/api/v0 [App.js:49](http://127.0.0.1:3001/Users/anovak/workspace/sequenceTubeMap/src/App.js)
Rendering header form with fileSelectOptions:  
Array []
[HeaderForm.js:755](http://127.0.0.1:3001/Users/anovak/workspace/sequenceTubeMap/src/components/HeaderForm.js)
rendering with pathnames:  
Array [ "none" ]
[RegionInput.js:22](http://127.0.0.1:3001/Users/anovak/workspace/sequenceTubeMap/src/components/RegionInput.js)
Object { trackFile: "exampleData/internal/snp1kg-BRCA1.vg.xg", trackType: "graph", trackColorSettings: {…} }
[CustomizationAccordion.js:60](http://127.0.0.1:3001/Users/anovak/workspace/sequenceTubeMap/src/components/CustomizationAccordion.js)
Object { trackFile: "exampleData/internal/NA12878-BRCA1.sorted.gam", trackType: "read" }
[CustomizationAccordion.js:60](http://127.0.0.1:3001/Users/anovak/workspace/sequenceTubeMap/src/components/CustomizationAccordion.js)
Get path names for track:  
Object { trackFile: "exampleData/internal/snp1kg-BRCA1.vg.xg", trackType: "graph", trackColorSettings: {…} }
[HeaderForm.js:199](http://127.0.0.1:3001/Users/anovak/workspace/sequenceTubeMap/src/components/HeaderForm.js)
Rendering header form with fileSelectOptions:  
Array []
[HeaderForm.js:755](http://127.0.0.1:3001/Users/anovak/workspace/sequenceTubeMap/src/components/HeaderForm.js)
rendering with pathnames:  
Array [ "none" ]
[RegionInput.js:22](http://127.0.0.1:3001/Users/anovak/workspace/sequenceTubeMap/src/components/RegionInput.js)
Rendering header form with fileSelectOptions:  
Array []
[HeaderForm.js:755](http://127.0.0.1:3001/Users/anovak/workspace/sequenceTubeMap/src/components/HeaderForm.js)
rendering with pathnames:  
Array [ "none" ]
[RegionInput.js:22](http://127.0.0.1:3001/Users/anovak/workspace/sequenceTubeMap/src/components/RegionInput.js)
Rendering header form with fileSelectOptions:  
Array(32) [ {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, … ]
[HeaderForm.js:755](http://127.0.0.1:3001/Users/anovak/workspace/sequenceTubeMap/src/components/HeaderForm.js)
rendering with pathnames:  
Array [ "none" ]
[RegionInput.js:22](http://127.0.0.1:3001/Users/anovak/workspace/sequenceTubeMap/src/components/RegionInput.js)
Rendering header form with fileSelectOptions:  
Array(32) [ {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, … ]
[HeaderForm.js:755](http://127.0.0.1:3001/Users/anovak/workspace/sequenceTubeMap/src/components/HeaderForm.js)
rendering with pathnames:  
Array [ "17" ]
[RegionInput.js:22](http://127.0.0.1:3001/Users/anovak/workspace/sequenceTubeMap/src/components/RegionInput.js)
getting viewTarget  
Object { name: "snp1kg-BRCA1", tracks: (2) […], dataPath: "default", region: "17:1-100", bedFile: "exampleData/internal/snp1kg-BRCA1.bed", dataType: "built-in" }
[TubeMapContainer.js:152](http://127.0.0.1:3001/Users/anovak/workspace/sequenceTubeMap/src/components/TubeMapContainer.js)
Graph track: 0 Haplotype track: null [TubeMapContainer.js:169](http://127.0.0.1:3001/Users/anovak/workspace/sequenceTubeMap/src/components/TubeMapContainer.js)
Recreating tube map in undefined 2 [tubemap.js:418](http://127.0.0.1:3001/Users/anovak/workspace/sequenceTubeMap/src/util/tubemap.js)
Recreating tube map in #svg [tubemap.js:418](http://127.0.0.1:3001/Users/anovak/workspace/sequenceTubeMap/src/util/tubemap.js)
All sources:  
Array [ "1" ]
[tubemap.js:652](http://127.0.0.1:3001/Users/anovak/workspace/sequenceTubeMap/src/util/tubemap.js)
config: 
Object { mergeNodesFlag: true, transparentNodesFlag: false, clickableNodesFlag: false, showExonsFlag: false, nodeWidthOption: 0, showReads: true, showSoftClips: true, colorSchemes: {…}, exonColors: "lightColors", hideLegendFlag: false, … }
[tubemap.js:3138](http://127.0.0.1:3001/Users/anovak/workspace/sequenceTubeMap/src/util/tubemap.js)
Rendering header form with fileSelectOptions:  
Array(32) [ {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, … ]
[HeaderForm.js:755](http://127.0.0.1:3001/Users/anovak/workspace/sequenceTubeMap/src/components/HeaderForm.js)
rendering with pathnames:  
Array [ "none" ]
[RegionInput.js:22](http://127.0.0.1:3001/Users/anovak/workspace/sequenceTubeMap/src/components/RegionInput.js)
Rendering header form with fileSelectOptions:  
Array(32) [ {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, … ]
[HeaderForm.js:755](http://127.0.0.1:3001/Users/anovak/workspace/sequenceTubeMap/src/components/HeaderForm.js)
rendering with pathnames:  
Array [ "none" ]
[RegionInput.js:22](http://127.0.0.1:3001/Users/anovak/workspace/sequenceTubeMap/src/components/RegionInput.js)
Rendering header form with fileSelectOptions:  
Array(32) [ {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, … ]
[HeaderForm.js:755](http://127.0.0.1:3001/Users/anovak/workspace/sequenceTubeMap/src/components/HeaderForm.js)
rendering with pathnames:  
Array [ "none" ]
[RegionInput.js:22](http://127.0.0.1:3001/Users/anovak/workspace/sequenceTubeMap/src/components/RegionInput.js)
New tracks have been applied [HeaderForm.js:553](http://127.0.0.1:3001/Users/anovak/workspace/sequenceTubeMap/src/components/HeaderForm.js)
Rendering header form with fileSelectOptions:  
Array(32) [ {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, … ]
[HeaderForm.js:755](http://127.0.0.1:3001/Users/anovak/workspace/sequenceTubeMap/src/components/HeaderForm.js)
Warning: Failed prop type: Invalid prop `tracks` of type `array` supplied to `TrackPicker`, expected `object`.
TrackPicker@http://127.0.0.1:3001/static/js/bundle.js:6018:16
HeaderForm@http://127.0.0.1:3001/static/js/bundle.js:2537:145
div
App@http://127.0.0.1:3001/static/js/bundle.js:101:145
RenderedRoute@http://127.0.0.1:3001/static/js/bundle.js:136230:22
RenderedRoute@http://127.0.0.1:3001/static/js/bundle.js:136230:22
Routes@http://127.0.0.1:3001/static/js/bundle.js:136806:18
Router@http://127.0.0.1:3001/static/js/bundle.js:136736:24
BrowserRouter@http://127.0.0.1:3001/static/js/bundle.js:134939:18 [react-jsx-dev-runtime.development.js:117](http://127.0.0.1:3001/Users/anovak/workspace/sequenceTubeMap/node_modules/react/cjs/react-jsx-dev-runtime.development.js)
rendering with pathnames:  
Array [ "none" ]
[RegionInput.js:22](http://127.0.0.1:3001/Users/anovak/workspace/sequenceTubeMap/src/components/RegionInput.js)
Warning: Failed prop type: Invalid prop `tracks` of type `array` supplied to `TrackPickerDisplay`, expected `object`.
TrackPickerDisplay@http://127.0.0.1:3001/static/js/bundle.js:6295:16
TrackPicker@http://127.0.0.1:3001/static/js/bundle.js:6018:16
div
div
Col@http://127.0.0.1:3001/static/js/bundle.js:152784:19
div
Row@http://127.0.0.1:3001/static/js/bundle.js:161466:19
div
Container@http://127.0.0.1:3001/static/js/bundle.js:153268:19
div
HeaderForm@http://127.0.0.1:3001/static/js/bundle.js:2537:145
div
App@http://127.0.0.1:3001/static/js/bundle.js:101:145
RenderedRoute@http://127.0.0.1:3001/static/js/bundle.js:136230:22
RenderedRoute@http://127.0.0.1:3001/static/js/bundle.js:136230:22
Routes@http://127.0.0.1:3001/static/js/bundle.js:136806:18
Router@http://127.0.0.1:3001/static/js/bundle.js:136736:24
BrowserRouter@http://127.0.0.1:3001/static/js/bundle.js:134939:18

It looks like the /getBedRegions API request does indeed return a response where the items in tracks for each of the different regions are themselves arrays and not objects. I think those arrays aren't being converted to objects properly in the client.

adamnovak commented 8 months ago

I think the easiest way to fix this would be to go here: https://github.com/vgteam/sequenceTubeMap/blob/f4ab3c27dd53fc0ce0627d6a4885269378eb75ba/src/components/HeaderForm.js#L654 And to add a function call to convert from an array:

["a", "b", "c"]

to an object with integer keys:

{
    0: "a",
    1: "b",
    2: "c"
}