Embedding a javascript app in rails view

rubyonrails-talk
1

Hi,

I made some progress on my rails project and would now like to visualize some data in a javascript app. I tried following instructions on how to install the package, but am now left with little to no guidance on how to actually get it running :slight_smile:

The app in question is this:

So far, I did:

 bin/importmap pin phylocanvas @phylocanvas/phylocanvas.gl

and added this to my application.js

import PhylocanvasGL from "phylocanvas"
import TreeTypes from "phylocanvas"

And that could already be wrong, not sure.

So now, well…now I am stuck :confused: How would I get that running in a view (or partial)? Let’s assume no data needs to be passed to the embedded app for now, getting the demo example (3.) to run with pre-set values would probably get me on my way.

Any help or pointers would be appreciated!

/Marc

2

Managed to figure it out, just ignore me :wink:

3

Please tell what you did :slight_smile:

4

Fair enough! :smiley:

In the view where I wanted to include the app, I did the follwing; leaving in the controller interactions, in case this is useful to anyone^^


<script src="https://unpkg.com/@phylocanvas/phylocanvas.gl@latest/dist/bundle.min.js"></script>

<div id="phylocanvas" style="border: 1px solid lightgray">

<script>

    const tree = new phylocanvas.PhylocanvasGL(
      document.querySelector("#phylocanvas"),
      {
        type: phylocanvas.TreeTypes.Radial,
        size: { width: 1500, height: 800 },
        interactive: true,
        showLabels: true,
        showBranchLengths: true,
        showLeafLabels: true,
        source: `<%= @xref_analysis_partition.cluster_analysis.tree %>;`,
        styles: {
          <% @xref_analysis_partition.clusters.each do |cluster| %>
            
            <% profiles = cluster.cgmlst_profiles %>
            <% if profiles.length > 1 %>
              <% colour = "%06x" % (rand * 0xffffff) %>
            <% else %>
              <% colour = "797d7f "%>
            <% end %>
            <% profiles.each do |cp| %>
              <% sample = cp.assembly.sample %>
              <% if @recent.include?(sample) %>
                <% prefix = "Neu: " %>
              <% else %>
                <% prefix = "" %>
              <% end %>
              <%= cp.assembly.sample.name %>: { fillColour: "#<%= colour %>" , label: "<%= prefix %> <%= cp.assembly.sample.name %> (<%= cluster.name %>)", fontColour: "#27ae60", shapeBorderWidth: 2, shapeBorderAlpha: 1.0 },
            <% end %>
          <% end %>
        },
      },
    );

  </script>