cram-js/example/index.html at main · GMOD/cram-js · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
<html>
  <head>
    <script src="https://unpkg.com/@gmod/cram/dist/cram-bundle.js"></script>
    <script>
      const EXPECTED_RECORDS = 1971
      const { IndexedCramFile, CramFile, CraiIndex } = window.gmodCRAM

      const indexedFile = new IndexedCramFile({
        cramUrl: 'volvox-sorted.cram',
        index: new CraiIndex({
          url: 'volvox-sorted.cram.crai',
        }),
        seqFetch: async (seqId, start, end) => {
          return ''
        },
        checkSequenceMD5: false,
      })

      run = async () => {
        const status = document.getElementById('status')
        try {
          const records = await indexedFile.getRecordsForRange(0, 10000, 20000)
          if (records.length === EXPECTED_RECORDS) {
            status.textContent = `Success: ${records.length} records (matches samtools)`
            status.className = 'success'
          } else {
            status.textContent = `Mismatch: got ${records.length}, expected ${EXPECTED_RECORDS}`
            status.className = 'error'
          }
          const r = []
          records.forEach(record => {
            if (record.readFeatures != undefined) {
              record.readFeatures.forEach(({ code, pos, refPos, ref, sub }) => {
                if (code === 'X') {
                  r.push(
                    `${record.readName} shows a base substitution at ${refPos}`,
                  )
                }
              })
            }
          })
          document.getElementById('output').innerHTML = r.join('\n')
        } catch (e) {
          status.textContent = `Error: ${e.message}`
          status.className = 'error'
        }
      }

      run()
    </script>
    <style>
      #status {
        padding: 10px 20px;
        border-radius: 5px;
        font-weight: bold;
        display: inline-block;
        margin: 10px 0;
      }
      .success {
        background: #4caf50;
        color: white;
      }
      .error {
        background: #f44336;
        color: white;
      }
    </style>
  </head>
  <body>
    <h1>cram-js test</h1>
    <div id="status">Loading...</div>
    <pre id="output" />
  </body>
</html>