infinite-table/test/encode-like.html at main · igvteam/infinite-table · 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
75
76
77
78
79
80
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>InfiniteTable — ENCODE-like Test</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="../css/infinite-table.css">
    <style>
        body { font-family: system-ui, sans-serif; padding: 2rem; max-width: 1000px; margin: 0 auto; }
        h1 { font-size: 1.4rem; font-weight: 500; margin-bottom: 1rem; }
        p { color: #666; font-size: 0.9rem; margin-bottom: 1rem; }
        #result { font-size: 0.85rem; color: #333; margin-top: 1rem; white-space: pre-wrap; font-family: monospace; max-height: 400px; overflow-y: auto; }
    </style>
</head>
<body>
    <h1>ENCODE-like Test — columnDefs + rowHandler</h1>
    <p>Verify: columnDef title overrides display ("AssayType" → "Assay Type"), rowHandler transforms selection to {name, url, color, metadata} objects.</p>

    <button class="btn btn-primary" id="open-btn">Open ENCODE Modal</button>
    <div id="result"></div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
    <script type="module">
        import { createModalTable } from '../src/index.js'
        import { generateEncodeData } from './helpers/generateData.js'

        const { columns, columnDefs, data } = generateEncodeData(2000)

        // Color map for targets (mimics ENCODE track coloring)
        const targetColors = {
            'H3K4me3': '0,150,0',
            'H3K27ac': '255,195,77',
            'H3K27me3': '255,0,0',
            'CTCF': '0,0,255',
            'POLR2A': '0,100,200',
            'EP300': '200,100,0',
            'H3K36me3': '0,175,175',
            'H3K4me1': '255,195,77'
        }

        // Simulate GenericDataSource with rowHandler
        const datasource = {
            columns: columns,
            columnDefs: columnDefs,
            rowHandler: (row) => {
                const name = `${row.Target}-${row.AssayType}-${row.Biosample}`
                const url = `https://www.encodeproject.org${row.HREF}`
                const color = targetColors[row.Target] || '80,80,80'
                return { name, url, color }
            },
            async tableColumns() {
                return this.columns
            },
            async tableData() {
                await new Promise(r => setTimeout(r, 300))
                return data
            }
        }

        const modalTable = createModalTable({
            id: 'encode-modal',
            title: 'ENCODE',
            datasource: datasource,
            selectionStyle: 'multi',
            description: 'Select ENCODE tracks to load',
            okHandler: (selected) => {
                document.getElementById('result').textContent =
                    `${selected.length} tracks selected:\n\n` +
                    JSON.stringify(selected.slice(0, 5), null, 2) +
                    (selected.length > 5 ? `\n\n... and ${selected.length - 5} more` : '')
            }
        })

        document.getElementById('open-btn').addEventListener('click', () => {
            modalTable.modal.show()
        })
    </script>
</body>
</html>