scottca.in node 4 source

scratch.js

<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script><script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script><script src="https://unpkg.com/@jbrowse/react-linear-genome-view/dist/react-linear-genome-view.umd.development.js" crossorigin></script>

<p>We're using the JBrowse Linear Genome View!</p>

<div id="jbrowse2_linear_genome_view" width="500px">this is where the browser should be</div>

  <script>
    function create_jbrowse2() {
      const { createElement } = React
      const { render } = ReactDOM
      const { createViewState, JBrowseLinearGenomeView, loadPlugins } =
        JBrowseReactLinearGenomeView

      const releaseVersion = 286
      const genomic_location = 'II:161136..172695'
      const jbrowse_dataset = 'c_elegans_PRJNA13758'


      fetch('https://s3.amazonaws.com/agrjbrowse/MOD-jbrowses/WormBase/WS' + releaseVersion + '/embed/' + jbrowse_dataset + '_embed.json')
        .then((response) =>
          Promise.all([response.json(), loadPlugins([])])
        ).then(([results]) => {
          const Plugin = JBrowseExports['@jbrowse/core/Plugin']
          class HexJexlPlugin extends Plugin {
            name = 'HexJexlPlugin'

            install(pluginManager) {
              pluginManager.jexl.addFunction('hex', (num1) => {
                return num1.toString(16);
              })
            }
          }
          class VariantColor extends Plugin {
              name = 'VariantColorPlugin'
              install(pluginManager) {
                  pluginManager.jexl.addFunction('variantColor', (f) => {
                      if (f['variant']['INFO']['ANN']) {
                      var ann = f['variant']['INFO']['ANN'][0].split('|')
                      var cons = ann[1]
                      if (cons.indexOf('&') > -1) {
                          cons = cons.substring(0,cons.indexOf('&'))
                      }
                      var color = 'peachpuff'
                           if(cons == 'frameshift_variant')                 {return '#9400D3';}
                      else if(cons == 'stop_lost')                          {return '#ff0000';}
                      else if(cons == '5_prime_UTR_premature_start_codon_gain_variant') {return '#7ac5cd';}
                      else if(cons == 'splice_acceptor_variant ')           {return '#FF581A';}
                      else if(cons == 'protein_altering_variant')           {return '#FF0080';}
                      else if(cons == 'coding_sequence_variant')            {return '#458b00';}
                      else if(cons == 'stop_gained')                        {return '#ff0000';}
                      else if(cons == 'incomplete_terminal_codon_variant')  {return '#ff00ff';}
                      else if(cons == 'transcript_ablation')                {return '#ff0000';}
                      else if(cons == 'start_lost')                         {return '#ffd700';}
                      else if(cons == 'splice_donor_variant')               {return '#FF581A';}
                      else if(cons == 'splice_region_variant')              {return '#ff7f50';}
                      else if(cons == 'missense_variant')                   {return '#ffd700';}
                      else if(cons == 'inframe_deletion')                   {return '#ff69b4';}
                      else if(cons == 'inframer_insertion')                 {return '#ff69b4';}
                      else if(cons == '3_prime_UTR_variant')                {return '#7ac5cd';}
                      else if(cons == 'synonymous_variant')                 {return '#76ee00';}
                      else if(cons == 'upstream_gene_variant')              {return '#a2b5cd';}
                      else if(cons == 'downstream_gene_variant')            {return '#a2b5cd';}
                      else if(cons == 'non_coding_transcript_exon_variant') {return '#32cd32';}
                      else if(cons == 'intron_variant')                     {return '#02599c';}
                      else if(cons == '5_prime_UTR_variant')                {return '#7ac5cd';}
                      else if(cons == 'stop_retained_variant')              {return '#76ee00';}
                      else if(cons == 'intergenic_variant')                 {return '#636363';}
                      else if(cons == 'non_coding_transcript_variant')      {return '#32cd32';}
                      else if(cons == 'non_coding_exon_variant')            {return '#7ac5cd';}
                      return color;
                      }
                      else {
                          return 'black'
                      }
                  })
              }
          }

          const assembl = results['assemblies'][0]
          const tra = results['tracks']
          const state = new createViewState({
            assembly: assembl,
            tracks: tra,
            location: genomic_location,
            plugins: [HexJexlPlugin,VariantColor],
            session: {
              id: '5nxOhj9gA',
              view: [
                {
                  id: 'ZiH76KASh',
                  type: 'LinearGenomeView',
                  trackLabels: 'offset',
                },
              ],
            },
            configuration: {
              theme: {
                palette: {
                  secondary: {
                    main: '#29405F',
                  },
                  tertiary: {
                    main: '#C5D1DE',
                  },
                },
              },
            },
          })

          function showTrackSilencer(id) {
            try {
              state.session.view.showTrack(id)
            } catch (e) {
              console.warn(e)
            }
          }

          showTrackSilencer(jbrowse_dataset + '_curated_genes')
          showTrackSilencer(jbrowse_dataset + '_classical_alleles')
          showTrackSilencer(jbrowse_dataset + '_change-of-function_alleles')
          showTrackSilencer(jbrowse_dataset + '_rnaseq_splice_junctions_(common)')
          showTrackSilencer(jbrowse_dataset + '_rnaseq_splice_junctions_(rare)')
          showTrackSilencer(jbrowse_dataset + '_cendr_variation')

          render(
            createElement(JBrowseLinearGenomeView, { viewState: state }),
            document.getElementById('jbrowse2_linear_genome_view'),
          )
        })
    }
    create_jbrowse2()
  </script>