Unable to generate element ID

[charliecurnin]

Trying to get to know LocusZoom (which is awesome) by playing with index.html, I ran into an error.

I wanted only to plot variants p values against their positions. So I shortened dataSources:

var dataSources = new LocusZoom.DataSources();
dataSources
        .add("assoc", ["AssociationLZ", {url: apiBase + "assoc_10_114550452-115067678.json?", params: {analysis: 3, id_field: "variant"}}])

and made a custom layout

var layout = {
  width: 500,
  height: 500,
  panels: [
    {
      id: "association",
      data_layers: [
         {
           id: "association",
           type: "scatter",
           fields: ["assoc:position", "assoc:pvalue"],
           x_axis: { field: "assoc:position" },
           y_axis: { field: "assoc:pvalue" }
         }
      ]
    }
  ]
}; 

The element I'm trying to populate is <div id="plot" data-region="10:114552267-115067641"></div>.

When I run this, however, the div has a grey background with the text "Unable to generate element ID" in black. If I click the dismiss button in the upper-right, the plot is empty but the crosshairs move around to track my cursor.

---

I'm also getting another error that I don't understand. In the console, there are multiple messages that say [Violation] Added non-passive event listener to a scroll-blocking 'touchmove' event. Consider marking event handler as 'passive' to make the page more responsive. I haven't attached (knowingly, at least) any event listeners. I'm not sure that this is related, however, because when include all the data sources originally added to dataSources ("ld", "gene", "recomb", "constraint")` and set my layout to

var layout = LocusZoom.Layouts.get("plot", "standard_association");
layout.dashboard = LocusZoom.Layouts.get("dashboard", "region_nav_plot");

the plot renders fine though I still these messages.

[abought]

Greetings! Glad you enjoy LocusZoom. We took a look at your report this morning, and below is an initial fix.

"Unable to generate element ID" error

I was able to replicate this error by changing only the layout, and not modifying datasources. (see screenshot)

Each scatter plot point needs an ID field, and without one throws an error. Although I don't know enough about your (custom?) datasource to recommend an appropriate ID field, the below snippet is enough to demonstrate getting the plot to work:

...
      data_layers: [
         {
           id: "association",
           type: "scatter",
           fields: ["assoc:position", "assoc:pvalue"],
           x_axis: { field: "assoc:position" },
           y_axis: { field: "assoc:pvalue" },
           // The line below is the fix: what item in the fields array contains the ID?
           id_field: "assoc:position"
         }
      ]
...

(see association pvalues datalayer definition or a customized layout example for further inspiration)

"Violation: event listener" messages

Thanks for the heads up! These messages are not errors outright; they are Chrome's way of alerting developers to modern browser features that could be used improve page performance. You can ignore them by changing the DevTools console logging level from "Verbose" to "info".

The event listeners in question are part of how d3 implements mouse interactivity, and we'll make a note internally for future reference.

[charliecurnin]

Thank you!