neuhausi / canvasXpress

CanvasXpress: A JavaScript Library for Data Analytics with Full Audit Trail Capabilities.
http://www.canvasXpress.org
290 stars 44 forks source link

Problem updating Manhattan plot data using CanvasXpress.updateData(data) #115

Open sammyjava opened 2 years ago

sammyjava commented 2 years ago

Hiya! I've used updateData(data) to update a heatmap, and now I'm trying to do so with a Manhattan scatter plot. I have a selector that determines which data to plot, and I use a function to generate the plot, including the default when the page is first loaded. Here's how I'm updating the canvas:

     // create/update the CanvasXpress object
     var cx = CanvasXpress.$('canvasx');
     if (cx==null) {
         cx = new CanvasXpress('canvasx', data, conf, evts);
     } else {
         cx.updateData(data);
     }

The initial plot created with the constructor is fine (first attached image). However, when I change the selection, updateData() leaves a blue spinner on the plot, with no plotted data, and the legend gets "-log10(p) vs Manhattan" appended (second attached image). It seems like a bug! I've pasted the data, conf, evts below with the two data options.

     var evts = {
         "click": function(o, e, t) {
             var markerName = o.y.vars[0];
             var markerIdentifier = genome+"."+markerName;
             window.open("/"+"${WEB_PROPERTIES['webapp.path']}"+"/geneticmarker:"+markerIdentifier);
         }
     }

  var conf = {
     "decorations": {
         "line": [
             { "color": "rgb(0,0,255)", "width": 1, "y": 1.3 }
         ]
     },
     "graphType": "Scatter2D",
     "manhattanMarkerChromosomeNumber": "Chr",
     "manhattanMarkerLogPValue": "-log10(p)",
     "manhattanMarkerPosition": "Pos",
     "scatterType": "manhattan",
     "title": "Slide window with mouse; change scale with mouse wheel over axis; select region to zoom in; click marker to see its page.",
     "titleScaleFontFactor": 0.1,
     "disableToolbar": true,
     "colorBy": "Trait",
     "colorByShowLegend": true,
     "canvasBox": true,
     "setMinY": 0.0,
     "dataPointSize": 50,
     "legendBox": false,
     "legendScaleFontFactor": 2,
     "legendInside": false,
     "legendPositionAuto": false,
     "legendPosition": "right",
     "chromosomeLengths": [
         55915595,
         51656713,
         47781076,
         49243852,
         41936504,
         50722821,
         44683157,
         46995532,
         46843750,
         50969635,
         39172790,
         40113140,
         44408971,
         49711204,
         50939160,
         37397385,
         41906774,
         62308140,
         50589441,
         46773167
     ]
 }

data
{
    "z": {
        "Trait": [
            "Seed oil",
            "Seed oil",
            "Seed oil",
            "Seed oil",
            "Seed oil",
            "Seed protein",
            "Seed protein",
            "Seed protein",
            "Seed protein",
            "Seed protein",
            "Seed oil",
            "Seed protein",
            "Seed protein",
            "Seed protein",
            "Seed protein",
            "Seed protein",
            "Seed protein",
            "Seed protein",
            "Seed protein",
            "Seed protein",
            "Seed protein",
            "Seed protein",
            "Seed protein",
            "Seed protein",
            "Seed protein"
        ]
    },
    "y": {
        "smps": [
            "Chr",
            "Pos",
            "-log10(p)"
        ],
        "vars": [
            "ss715591641",
            "ss715591642",
            "ss715591644",
            "ss715591647",
            "ss715591649",
            "ss715594540",
            "ss715595353",
            "ss715595357",
            "ss715614263",
            "ss715621777",
            "ss715621779",
            "ss715621799",
            "ss715621801",
            "ss715621816",
            "ss715637225",
            "ss715637240",
            "ss715637283",
            "ss715637294",
            "ss715637299",
            "ss715637309",
            "ss715637315",
            "ss715637316",
            "ss715637318",
            "ss715637321",
            "ss715637329"
        ],
        "data": [
            [
                5,
                38495217,
                8.500312917381596
            ],
            [
                5,
                38495666,
                7.5003129173815966
            ],
            [
                5,
                38519280,
                6.1598939055432425
            ],
            [
                5,
                38543317,
                7.489454989793388
            ],
            [
                5,
                38569452,
                8.950781977329818
            ],
            [
                6,
                46040638,
                5.779891911959945
            ],
            [
                6,
                5591484,
                5.369572124974976
            ],
            [
                6,
                5660542,
                5.838631997765025
            ],
            [
                13,
                24858209,
                10.950781977329818
            ],
            [
                15,
                3828587,
                19.2298847052129
            ],
            [
                15,
                3833574,
                6.489454989793388
            ],
            [
                15,
                3918803,
                9.570247719997592
            ],
            [
                15,
                3919945,
                10.100179497572904
            ],
            [
                15,
                3967324,
                6.97061622231479
            ],
            [
                20,
                29594697,
                5.489454989793388
            ],
            [
                20,
                29983050,
                6.1598939055432425
            ],
            [
                20,
                30930931,
                10.349692476868064
            ],
            [
                20,
                31150279,
                30.939302159646388
            ],
            [
                20,
                31243150,
                32.27984069659404
            ],
            [
                20,
                31436069,
                7.8696662315049934
            ],
            [
                20,
                31580769,
                24.97881070093006
            ],
            [
                20,
                31610452,
                22.159893905543242
            ],
            [
                20,
                31640038,
                13.939302159646388
            ],
            [
                20,
                31687470,
                19.250263684430937
            ],
            [
                20,
                31972955,
                17.679853713888946
            ]
        ]
    }
}

data
{
    "z": {
        "Trait": [
            "Seed oil",
            "Seed oil",
            "Seed oil",
            "Seed oil",
            "Seed oil",
            "Seed protein",
            "Seed protein",
            "Seed protein",
            "Seed protein",
            "Seed protein",
            "Seed oil",
            "Seed protein",
            "Seed protein",
            "Seed protein",
            "Seed protein",
            "Seed protein",
            "Seed protein",
            "Seed protein",
            "Seed protein",
            "Seed protein",
            "Seed protein",
            "Seed protein",
            "Seed protein",
            "Seed protein",
            "Seed protein"
        ]
    },
    "y": {
        "smps": [
            "Chr",
            "Pos",
            "-log10(p)"
        ],
        "vars": [
            "ss715591641",
            "ss715591642",
            "ss715591644",
            "ss715591647",
            "ss715591649",
            "ss715594540",
            "ss715595353",
            "ss715595357",
            "ss715614263",
            "ss715621777",
            "ss715621779",
            "ss715621799",
            "ss715621801",
            "ss715621816",
            "ss715637225",
            "ss715637240",
            "ss715637283",
            "ss715637294",
            "ss715637299",
            "ss715637309",
            "ss715637315",
            "ss715637316",
            "ss715637318",
            "ss715637321",
            "ss715637329"
        ],
        "data": [
            [
                5,
                41855235,
                8.500312917381596
            ],
            [
                5,
                41854786,
                7.5003129173815966
            ],
            [
                5,
                41831154,
                6.1598939055432425
            ],
            [
                5,
                41807117,
                7.489454989793388
            ],
            [
                5,
                41780982,
                8.950781977329818
            ],
            [
                6,
                46572307,
                5.779891911959945
            ],
            [
                6,
                5597303,
                5.369572124974976
            ],
            [
                6,
                5666361,
                5.838631997765025
            ],
            [
                13,
                26343911,
                10.950781977329818
            ],
            [
                15,
                3846538,
                19.2298847052129
            ],
            [
                15,
                3851525,
                6.489454989793388
            ],
            [
                15,
                3936757,
                9.570247719997592
            ],
            [
                15,
                3937899,
                10.100179497572904
            ],
            [
                15,
                3985288,
                6.97061622231479
            ],
            [
                20,
                30744968,
                5.489454989793388
            ],
            [
                20,
                31129249,
                6.1598939055432425
            ],
            [
                20,
                21083902,
                10.349692476868064
            ],
            [
                20,
                32282623,
                30.939302159646388
            ],
            [
                20,
                32384035,
                32.27984069659404
            ],
            [
                20,
                32576952,
                7.8696662315049934
            ],
            [
                20,
                32721955,
                24.97881070093006
            ],
            [
                20,
                32752215,
                22.159893905543242
            ],
            [
                20,
                32781800,
                13.939302159646388
            ],
            [
                20,
                32835139,
                19.250263684430937
            ],
            [
                20,
                33121197,
                17.679853713888946
            ]
        ]
    }
}

Screenshot 2022-03-05 at 10-45-41 SoyMine GWAS mixed gwas Bandillo_Jarquin_2015 Screenshot 2022-03-05 at 10-45-01 SoyMine Report page

sammyjava commented 2 years ago

I'm using the most recent CanvasXpress 37.8 given by

wget https://www.canvasxpress.org/dist/canvasXpress.css
wget https://www.canvasxpress.org/dist/canvasXpress.min.js
sammyjava commented 2 years ago

Note: I also need to update conf because the chromosome lengths change, but that's a separate issue. I'd be fine with blowing away the canvasx object and replacing it, if that's an option. I get Javasacript errors when I simply try to replace it with a new constructor call.