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

[shreyasun]

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]

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]

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]

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]

I can reproduce this on commit e70b93c 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]

I think the easiest way to fix this would be to go here:

sequenceTubeMap/src/components/HeaderForm.js

Line 654 in f4ab3c2

return { tracks: json.tracks };

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"
}