St. Jude CloudDocs

Embed Your Visualization

In this part of the tutorial, one will learn how to embed an html file based on the code block developed to make a visualization.

In this part of the tutorial, one will learn how to embed an html file based on the code block developed to make a visualization.

Warning
The code editor uses JSON and ProteinPaint uses JavaScript, you will need to use their code example templates. We are working on a new embed feature soon.

Create a html file

You will need a text editor to create a .html file for embedding

  1. Open notepad or a text editor.
  2. Copy your code block you generated for your visualization.
  3. Replace the runproteinpaint() command below with your code block.
    • This should be everything between the script <>.
  4. Save the file with the .html suffix.
  5. Drag and drop the .html file into the browser, open the saved .html file by double-clicking, or save within a website.
<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <title></title>
      <link rel="stylesheet" href="">
      <script src="https://proteinpaint.stjude.org/bin/proteinpaint.js"></script>
   </head>
   <body>
      <div id="holder"></div>
      <script type="text/javascript">
         runproteinpaint({
         host: "https://proteinpaint.stjude.org",
         holder: document.getElementById('a'),
         parseurl: true,
         nobox: 1,
         noheader: 1,
         genome: "hg38",
         gene: "BCL11A",
         nativetracks: "RefGene",
         tracks: [{
         type: "vcf",
         name: "Clinvar",
          url: "https://westus.dl.azure.dnanex.us/F/DSYM/V1QVfjpp9PBg6q7v9FYxQXJYbXbz7JvJ528v5bvg/SJACT004_D.WholeGenome.g.vcf.gz",
         indexUrl: "https://westus.dl.azure.dnanex.us/F/DSYM/068pg2qJ196zv105vYqFV0P9bvj2f3Z9XJF88KJp/SJACT004_D.WholeGenome.g.vcf.gz.tbi"
         }]
         });
      </script>
   </body>
</html>
%

Approval Process (Public vs Private Visualizations)

In this section, you will learn how to make a visualization public. By default, all visualizations are private and cannot become public until it goes through the access control approval process. You can draft visualizations in your own dashboard which will not be seen by your team until you assign the visualization a team in the Info section. This can be useful if you want to generate a template and then hand over the efforts to another colleague in your team. Just add a team in the Info section and anyone on the team can edit and/or send for review.

Video Tutorials

In this section, you will find all the videos that were within the Getting Started chapter.