Example illustrating problem noted in PR #1742

igvteam · Dec 14, 2023 · cdb5aa0 · cdb5aa0
1 parent 2f0f311
commit cdb5aa0
Showing 1 changed file with 119 additions and 0 deletions.
diff --git a/dev/issues/1742/roi_svg_shift.html b/dev/issues/1742/roi_svg_shift.html
@@ -0,0 +1,119 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <meta content="IE=edge" http-equiv="X-UA-Compatible">
+    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
+    <meta content="" name="description">
+    <meta content="" name="author">
+    <link href=https://igv.org/web/img/favicon.ico rel="shortcut icon">
+    <title>IGV - Dev</title>
+
+</head>
+
+<body>
+
+<div style="display: flex">
+
+    <div style="width: 300px">Spacer div</div>
+    <div id="container" style="padding-top: 50px;padding-bottom: 20px; height: auto"></div>
+</div>
+
+<script type="module">
+
+    import igv from "../../../js/index.js"
+
+    const options = {
+
+        locus: '1:67,655,272-67,684,468',
+
+        genome: "hg19",
+
+        showROITableButton: true,
+
+        // Define two global "region of interest" sets, the first with a bed file, the second with an explicit array
+        // of regions
+        roi:
+            [
+                {
+                    name: 'ROI set 1',
+                    url: 'https://s3.amazonaws.com/igv.org.test/data/roi/roi_bed_1.bed',
+                    indexed: false,
+                    color: "rgba(94,255,1,0.25)"
+                },
+                {
+                    name: "ROI set 2",
+                    color: "rgba(3,52,249,0.25)",
+                    features: [
+                        {
+                            chr: "chr1",
+                            start: 67670000,
+                            end: 67671080,
+                            name: 'Set 2 feature 1'
+                        },
+                        {
+                            chr: "chr1",
+                            start: 67672095,
+                            end: 67673993
+                        },
+                        {
+                            chr: "chr1",
+                            start: 67674681,
+                            end: 67675237
+                        },
+                        {
+                            chr: "chr1",
+                            start: 67676055,
+                            end: 67676710
+                        },
+                        {
+                            chr: "chr1",
+                            start: 67677561,
+                            end: 67677888
+                        },
+                        {
+                            chr: "chr1",
+                            start: 67679263,
+                            end: 67679394
+                        },
+                        {
+                            chr: "chr1",
+                            start: 67679950,
+                            end: 67680180
+                        },
+                        {
+                            chr: "chr1",
+                            start: 67681849,
+                            end: 67682340
+                        }
+                    ]
+                }
+            ],
+
+        // a track specific set
+        tracks:
+            [
+                {
+                    name: 'Some features',
+                    url: 'https://s3.amazonaws.com/igv.org.test/data/roi/some_features.bed',
+                    indexed: false,
+                    roi:
+                        [
+                            {
+                                name: 'Track Based ROI Set',
+                                url: 'https://s3.amazonaws.com/igv.org.test/data/roi/roi_bed_2.bed',
+                                indexed: false,
+                                color: "rgba(255,1,199,0.25)"
+                            },
+                        ]
+                }
+            ]
+    }
+
+    igv.createBrowser(document.getElementById('container'), options)
+
+</script>
+
+</body>
+
+</html>