Any pointers on how to integrate LocusZoom.js into Dash?

Dash Python
1

I am developing a genomics app in Python and Dash and want to include LocusZoom.js into my app, but I am not very good at JS and can’t figure out how to convert LocusZoom.js into a DASH component. I have read and got the cookie cutter example etc. and can probably figure out how to get properties into the LocusZoom.js component, but the how do I convert something like this

  <body>
    <div id="lz-plot"></div>
    <script type="text/javascript">
      const data_sources = new LocusZoom.DataSources();
      data_sources.add("assoc", ["AssociationLZ", { url: "https://server.com/api/single/", source: 1 }]);
      const layout = {
        width: 800,
        panels: [
          {
            id : "association",
            height: 300,
            data_layers: [
              {
                id: "association",
                type: "scatter",
                x_axis: { field: "assoc:position" },
                y_axis: { field: "assoc:log_pvalue" }
              }
            ]
          }
        ]
      };
      const plot = LocusZoom.populate("#lz-plot", data_sources, layout);
    </script>
  </body>

Into a DASH component…I can see that the LocusZoom.populate function will “render” a D3 graph (Locuszoom is based on D3) into the DIV component with ID “lz-plot” but don’t know how to make that part of the render function in the component…

Any help or pointers to docs I might have missed would be appreciated…

Thon

2

I saw the answer here to a similar question, but that just points me to the “How to make a component” but that does not provide me with enough information on how to ensure that the function can render into an existing DIV ID…

3

Hello @thondeboer,

When you make a component, the render will allow you to perform the same action as listed above in the original code.

You will do this by passing the props to the function that you called like you passed the variables to the function.

Do you know if there is a react version of this? If not, you can use the function, just not sure how to reliably get information sent back to the server once the component has been rendered.

4

Thanks, but I thought that the render function has its own ID and that anything that needs to update the div in render needs to return proper HTML or JS, no? If I simply wrap the complete text of the JS example above, it does not return anything (the variable “plot” is not something that is renderable, I think) so surely that will fail, but I will try anyway…watch this space!

1 Like
5

Well…I bit the bullet and made an attempt to create a Dash component for the LocusZoom.js module and while It was not easy to wrap my head around some of the peculiarities of JS and React, I managed to create a component that works nicely with Dash!

It is still early days and have only pusblished it on Github, but once I clean it up I will release it and hopefully this is useful for others…

This is what it looks like as a dash component… I added some interactivity around the focus of the plot, since that is missing from the main component…

LocusZoom 4 DASH

Thon

1 Like
6

Good job!

I knew you could get it working. :grin:

1 Like