{% extends 'base.html' %}
{% load static %}
{% block content %}
{% block title %}skinregeneration.org | JID fb{% endblock %}

<link rel="stylesheet" href="{% static '/css/JID.css' %}">

<a href="https://doi.org/10.1016/j.jid.2021.11.032" class="title">
    <h1>Parallel Single-Cell Multiomics Analysis of Neonatal Skin Reveals the Transitional Fibroblast States that Restrict Differentiation into Distinct Fates </h1>
    <p> Sean Thompson, Quan Phan, Sarayut Winuthayanon, Iwona Driskell, Ryan Driskell</p>
    <p> See Paper </p>
</a>

<div class="sub-title">
    <p>Fibroblast Cell Collection</p>
    <div class="searchbar">
        <div class="search-div">
            <input type="text" id="geneName" placeholder="Lef1...">
            <button id="searchBtn" onclick="search()">Search</button>
        </div>
    </div>
</div>

<div class="triple-grid">
    <div class="box i">
        <div class="s1" id="portrait">
            <img alt= "P0 sRNA-seq celltype UMAP" class="img1" src='../../../media/data_files/JID-P0fbRNA.png'>
        </div>

        <div class="d1" id="portrait">
            <div class='result' id='imageContainer1'>
                <img alt="P0 sRNA-seq Lef1 RNA UMAP expression plot" src="../../../media/datasets/JID-P0fbRNA/LEF1.png">
            </div>

        </div>
    </div>

    <div class="box ii">
        <div class="s2" id="portrait">
            <img alt= "P0 scATAC-seq celltype UMAP" class="img1" src='../../../media/data_files/JID-P0fbATAC.png'>
        </div>

        <div class="d2" id="portrait">
            <div class='result' id='imageContainer2'>
                <img alt="P0 scATAC-seq Lef1 RNA UMAP expression plot" src="../../../media/datasets/JID-P0fbATAC/LEF1.png">
            </div>
        </div>
    </div>
    
    <div class="box iii">
        <div class="d3" id="portrait3">
            <div class='result' id='imageContainer3'>
                <img alt="Lef1 ATAC accessibility plot" src="../../../media/datasets/JID-P0fbGP/LEF1.png">
            </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;
        for (let i = 0; i < imageContainers.length; i++) {
            if (imageContainers[i].id === 'imageContainer1') {
                databasepath = 'JID-P0fbRNA';
            } else if (imageContainers[i].id === 'imageContainer2') {
                databasepath = 'JID-P0fbATAC';
            } else if (imageContainers[i].id === 'imageContainer3') {
                databasepath = 'JID-P0fbGP';
            } 
    
            imageContainers[i].innerHTML = '';
            const image = document.createElement('img');
            image.src = `../../../media/datasets/${databasepath}/${geneName}.png`;
            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/error.png`;
            image.alt = `Gene not found`;
            image.classList.add("img-search");
        
            // Append the image to the container
            imageContainers[i].appendChild(image);
        };
    }
}
</script>
{% endblock %}