first commit

Author: liuyanbioinfo

.gitignore

@@ -0,0 +1,10 @@
+app/static/ref/hg19*
+app/static/dynamic_bam/*.bam
+app/static/dynamic_bam/*.bam.bai
+*.py[cod]
+
+# 忽略所有 __pycache__ 目录及其内容
+__pycache__/
+
+# build dir
+dist/

README.md

@@ -0,0 +1,58 @@
+# IGV Viewer Web Application
+This project provides a web-based interface for visualizing BAM files using IGV.js. Users can view genomic data in an interactive IGV browser, specifying loci of interest for visualization.
+Input bam files should be accessible and valid in the app server. 
+
+## Features
++ **Interactive Genomic Visualization**: View genomic alignments and variations from BAM files directly in the browser using the IGV.js library.
++ **User Customization**: Users can input the locus (chromosome region) and BAM file path, and the visualization will update dynamically.
++ **Genome Reference**: The app uses the `hg19` reference genome, but it can be customized to support other genomes if necessary.
+
+## Requirements
++ Python 3.x
++ Flask (for backend)
++ IGV.js (JavaScript library for genomic visualization)
+
+## Installation
+### Step 1: Clone the Repository
+Clone the repository to your local machine:
+
+```bash
+git clone https://github.com/liuyanbioinfo/igv_web_app.git
+cd igv_web_app
+```
+
+### Step 2: Download the reference files
+Download hg19 reference genome and index files.
+
+(Optional) You can change to other refernce versions by editing `fastaURL` and `indexURL` in `/static/index.html`:
+
+```bash
+cp /path/to/hg19.fa /static/ref/hg19.fa
+cp /path/to/hg19.fa.fai /static/ref/hg19.fa.fai
+```
+
+### Step 3: Install Dependencies
+Install the required Python packages using `pip`:
+
+```bash
+pip install -r requirements.txt
+```
+
+### Step 4: Run the Application
+Start the Flask application:
+
+```bash
+python run.py
+```
+
+The application will be available at `http://127.0.0.1:5000/` by default.
+
+## Usage
+1. **Open the Web Application**: Go to `http://127.0.0.1:5000/` in your web browser.
+2. **Input Locus**: In the "Locus" input field, provide a chromosome region in the format `chr7:55241607-55241807`. This will specify the region of the genome to display in the IGV viewer.
+3. **Input BAM File Path**: Provide the absolute file path to the BAM file you wish to visualize. Ensure the path is valid and the file is accessible.
+4. **Click Update IGV**: Once the locus and BAM path are entered, click the "Update IGV" button. The IGV viewer will refresh and display the BAM file content for the specified locus.
+5. **Visualize Data**: The genomic alignments will be displayed in the IGV viewer. You can zoom in/out, scroll, and interact with the visualization.
+
+
+

app/__init__.py

@@ -0,0 +1,5 @@
+from flask import Flask
+
+app = Flask(__name__)
+
+from app import routes

app/routes.py

@@ -0,0 +1,71 @@
+from app import app
+from flask import Flask, request, jsonify, render_template
+import os
+
+
+def is_allowed_path(file_path):
+    """
+    检查文件路径是否在允许的目录中。
+    """
+    # 合法路径和映射目录
+    if os.path.basename(file_path) == "test.cons.bam":
+        return True
+    ALLOWED_DIRECTORIES = ["/"] # 如果需要限制目录，更改为本地项目路径，例如 /path/to/projects
+    for allowed_dir in ALLOWED_DIRECTORIES:
+        if file_path.startswith(allowed_dir) and os.path.exists(file_path):
+            return True
+    return False
+
+def create_symlink(file_path):
+    """
+    为合法路径创建软链接，并返回映射路径。
+    """
+    if not is_allowed_path(file_path):
+        return None
+
+    print("app.root_path", app.root_path)
+    SYMLINK_DIR = app.root_path + "/static/dynamic_bam/"
+    print("app.root_path", SYMLINK_DIR)
+    # 初始化动态 BAM 文件目录
+    os.makedirs(SYMLINK_DIR, exist_ok=True)
+
+    file_name = os.path.basename(file_path)
+    symlink_path = os.path.join(SYMLINK_DIR, file_name)
+
+    # 如果软链接不存在，创建它
+    if not os.path.exists(symlink_path):
+        os.symlink(file_path, symlink_path)
+    # flask 应用只能访问app.root_path下路径， 相当于app.root_path为'/'
+    return f"/static/dynamic_bam/{file_name}"
+
+@app.route("/")
+def index():
+    """
+    渲染前端页面
+    """
+    return render_template("index.html")
+
+@app.route("/api/check-bam", methods=["POST"])
+def check_bam():
+    """
+    检查 BAM 文件路径，并返回映射的静态路径。
+    """
+    data = request.json
+    bam_path = data.get("bam_path")
+    print(f"bam_path:{bam_path}")
+
+    if not bam_path:
+        return jsonify({"error": "BAM path is required."}), 400
+
+    symlink = create_symlink(bam_path)
+    if not symlink:
+        return jsonify({"error": "File not found or not allowed."}), 404
+
+    bam_index_symlink = create_symlink(bam_path + ".bai")
+    if not bam_index_symlink:
+        return jsonify({"error": "Index file not found."}), 404
+
+    return jsonify({"bam_url": symlink, "bam_index_url": bam_index_symlink})
+
+
+

app/static/testdata/test.cons.bam

@@ -0,0 +1,152 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>BAM IGV Viewer</title>
+    <script src="https://igv.org/web/release/2.6.6/dist/igv.min.js"></script>
+    <style>
+        body {
+            font-family: Arial, sans-serif;
+            margin: 20px;
+            line-height: 1.5;
+        }
+
+        .form-container {
+            margin-bottom: 20px;
+        }
+
+        label {
+            font-weight: bold;
+        }
+
+        .form-row {
+            display: flex;
+            align-items: center;
+            margin-bottom: 10px;
+        }
+
+        .form-row input {
+            flex: 1;
+            padding: 8px;
+            margin-left: 10px;
+            font-size: 16px;
+        }
+
+        .form-row button {
+            padding: 10px 20px;
+            font-size: 18px;
+            background-color: #007BFF;
+            color: white;
+            border: none;
+            border-radius: 4px;
+            cursor: pointer;
+        }
+
+        .form-row button:hover {
+            background-color: #0056b3;
+        }
+
+        #igv-div {
+            width: 100%;
+            height: 1200px;
+            border: 1px solid #ccc;
+        }
+    </style>
+</head>
+<body>
+    <h1>BAM IGV Viewer</h1>
+
+    <div class="form-container">
+        <div class="form-row">
+            <label for="locus">Locus:</label>
+            <input type="text" id="locus" placeholder="e.g., chr7:55241607-55241807">
+        </div>
+        <div class="form-row">
+            <label for="bam_path">BAM Path:</label>
+            <input type="text" id="bam_path" placeholder="Enter the absolute path of your BAM file">
+        </div>
+        <div class="form-row">
+            <button id="update-button">Update IGV</button>
+        </div>
+    </div>
+
+    <div id="igv-div"></div>
+
+    <script>
+        let browser;
+
+        function createBrowser(locus, bamUrl, bamIndexUrl) {
+            // Dispose of the existing browser to avoid rendering conflicts
+            if (browser) {
+                browser.dispose();
+            }
+
+            const igvDiv = document.getElementById("igv-div");
+
+            // Ensure the igvDiv is cleared before creating a new browser instance
+            igvDiv.innerHTML = "";
+
+            // Extract the basename of the BAM file from its URL
+            const bamName = bamUrl.split('/').pop(); 
+
+            const options = {
+                genome: {
+                    id: "hg19",
+                    fastaURL: "/static/ref/hg19.fa",
+                    indexURL: "/static/ref/hg19.fa.fai",
+                },
+                locus: locus,
+                tracks: [
+                    {
+                        name: bamName, // Use the basename of the BAM file
+                        type: "alignment",
+                        format: "bam",
+                        url: bamUrl,
+                        indexURL: bamIndexUrl,
+                        visibilityWindow: -1,
+                        height: 1000 
+                    }
+                ]
+            };
+
+            igv.createBrowser(igvDiv, options).then(newBrowser => {
+                browser = newBrowser;
+                console.log("IGV Browser created");
+            });
+        }
+
+        document.getElementById("update-button").addEventListener("click", function () {
+            const locus = document.getElementById("locus").value.trim();
+            const bamPath = document.getElementById("bam_path").value.trim();
+
+            if (!locus || !bamPath) {
+                alert("Please enter both Locus and BAM Path!");
+                return;
+            }
+
+            fetch("/api/check-bam", {
+                method: "POST",
+                headers: {
+                    "Content-Type": "application/json"
+                },
+                body: JSON.stringify({ bam_path: bamPath })
+            })
+                .then(response => {
+                    if (!response.ok) {
+                        return response.json().then(data => {
+                            throw new Error(data.error || "Unknown error.");
+                        });
+                    }
+                    return response.json();
+                })
+                .then(data => {
+                    createBrowser(locus, data.bam_url, data.bam_index_url);
+                })
+                .catch(error => {
+                    alert(error.message);
+                });
+        });
+    </script>
+</body>
+</html>