{% extends 'base.html' %}
{% load static %}
{% block content %}
{% block title %}skinregeneration.org | kdm6b vs{% endblock %}
<link rel="stylesheet" href="{% static '/css/kdm6b-vs.css' %}">
<div class="title">
    <label for="geneName"><h1> WT vs KO</h1></label>
</div>

<div class="sub-title">
    <div class = "search-div">
        <label for="geneName">Gene Name:</label>
        <input type="text" id="geneName" placeholder="Lef1...">
        <button id="searchBtn" onclick="search()">Search</button> 
    </div>
</div>

<div class="kdm6b-grid">
    <div class="box i">
        <div class="s1" id="portrait">
            <img alt="kdm6b celltype UMAP" class="img1" src='../../../../media/data_files/kdm6b-cell-type.jpg'>
        </div>
        
        <p> WT </p>
        <div class="d1" id="portrait">
            <div class='result' id='imageContainer1'>
                <img alt="kdm6bWT LEF1 UMAP expression plot" src="../../../../media/datasets/Kdm6b/Kdm6bWT/LEF1.png" class="img-search">
            </div>

        </div>
    </div>

    <div class="box ii">
        <div class="s2" id="portrait">
            <img alt="kdm6b condition UMAP" class="img1" src="../../../../media/data_files/kdm6b-condition.jpg">
        </div>

        <p> KO </p>
        <div class="d2" id="portrait">

        <div class='result' id='imageContainer2'>
           <img alt="kdm6bKO LEF1 UMAP expression plot" src="../../../../media/datasets/Kdm6b/Kdm6bKO/LEF1.png" class="img-search">
        </div>

        </div>
    </div>


    <div class="box iii">
    <p> H3K27me3 ChIP-seq </p>
        <div class="d3" id="portrait">

        <div class='result' id='imageContainer3'>
           <img alt="LEF1 ChIP-seq plot" src="../../../../media/datasets/Kdm6b/chipko/LEF1.jpg" class="img-search">
        </div>

        </div>
    </div>


    
</div>

<script>
    document.querySelector('#geneName').addEventListener('keydown', function (event) {
        if (event.keyCode === 13) {
            search();
        }
    });

    function search() {
        let geneName = document.querySelector('#geneName').value;
        geneName = geneName.toUpperCase();

        let imageContainers = document.querySelectorAll('.result');
        
        let databasepath;
        let imgExtend;
        for (let i = 0; i < imageContainers.length; i++) {
            if (imageContainers[i].id === 'imageContainer1') {
                databasepath = 'Kdm6b/Kdm6bWT';
                imgExtend='png';
            } else if (imageContainers[i].id === 'imageContainer2') {
                databasepath = 'Kdm6b/Kdm6bKO';
                imgExtend='png';
            } else if (imageContainers[i].id === 'imageContainer3') {
                databasepath = 'Kdm6b/chipko';
                imgExtend='jpg';


            } 
            imageContainers[i].innerHTML = '';
            const image = document.createElement('img');
            image.src = `../../../media/datasets/${databasepath}/${geneName}.${imgExtend}`;
            console.log(image.src);
            image.alt = `RNA UMAP expression plot of ${geneName}`;
            image.classList.add("img-search")
            imageContainers[i].appendChild(image);
            console.log("search");
    
        image.onerror = function() {
            imageContainers[i] = document.querySelector('#imageContainer');
            imageContainers[i].innerHTML = '';
        
            const image = document.createElement('img');
            image.src = `../../../media/assets/error3.png`;
            image.alt = `Gene not found`;
            image.classList.add("img-search");
        
            // Append the image to the container
            imageContainers[i].appendChild(image);
        };
    }
}
</script><script src='../../../../app.js'></script>
      <!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-168691047-1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());

gtag('config', 'UA-168691047-1');
</script>

{%endblock%}