<!doctype html>
<html>
    <head lang="en">
        <meta charset="UTF-8" />

        <title>VISION Report</title>

        <link rel="icon" type="image/png" href="css/favicon.png" />
        <link
            rel="stylesheet"
            href="{{url_for('static', filename='thirdparty/chosen/chosen.min.css')}}"
        />
        <link
            rel="stylesheet"
            href="{{url_for('static', filename='thirdparty/bootstrap/bootstrap.min.css')}}"
        />
        <link
            rel="stylesheet"
            href="{{url_for('static', filename='thirdparty/datatables/datatables.min.css')}}"
        />

        <script src="{{url_for('static', filename='thirdparty/jquery/jquery-2.1.4.min.js')}}"></script>
        <script src="{{url_for('static', filename='thirdparty/d3/d3.min.js')}}"></script>
        <script src="{{url_for('static', filename='thirdparty/d3/d3tip.js')}}"></script>
        <script src="{{url_for('static', filename='thirdparty/jszip/jszip.min.js')}}"></script>
        <script src="{{url_for('static', filename='thirdparty/lodash/lodash.min.js')}}"></script>
        <script src="{{url_for('static', filename='thirdparty/chosen/chosen.jquery.min.js')}}"></script>
        <script src="{{url_for('static', filename='thirdparty/bootstrap/bootstrap.bundle.min.js')}}"></script>
        <script src="{{url_for('static', filename='thirdparty/datatables/datatables.min.js')}}"></script>
        <script src="{{url_for('static', filename='thirdparty/popper/popper.js/dist/umd/popper.min.js')}}"></script>
        <script src="{{url_for('static', filename='thirdparty/plotly/plotly.js-1.45.2/dist/plotly.min.js')}}"></script>
        <script src="{{url_for('static', filename='thirdparty/hsluv/hsluv-0.1.0.min.js')}}"></script>

        <script src="{{url_for('static', filename='src/ColorScatterPlotly.js')}}"></script>
        <script src="{{url_for('static', filename='src/PhyloPlotly.js')}}"></script>
        <script src="{{url_for('static', filename='src/Clustered_HeatMap.js')}}"></script>
        <script src="{{url_for('static', filename='src/Utilities.js')}}"></script>
        <script src="{{url_for('static', filename='src/main.js')}}"></script>
        <script src="{{url_for('static', filename='src/upper_left_content.js')}}"></script>
        <script src="{{url_for('static', filename='src/lower_left_content.js')}}"></script>
        <script src="{{url_for('static', filename='src/right_content.js')}}"></script>
        <script src="{{url_for('static', filename='src/misc.js')}}"></script>
        <script src="{{url_for('static', filename='src/api.js')}}"></script>

        <link
            rel="stylesheet"
            href="{{url_for('static', filename='css/styles.css')}}"
        />
        <link
            rel="stylesheet"
            href="{{url_for('static', filename='css/right_content.css')}}"
        />
        <link
            rel="stylesheet"
            href="{{url_for('static', filename='css/upper_left_content.css')}}"
        />
        <link
            rel="stylesheet"
            href="{{url_for('static', filename='css/lower_left_content.css')}}"
        />
        <link
            rel="prefetch"
            href="{{url_for('static', filename='css/loading.svg')}}"
        />
    </head>

    <body>
        <div id="nav-bar">
            <div class="logo">
                <img
                    src="css/logo_HorizontalLogo.svg"
                    alt="VISION"
                    style="width: 200px"
                />
                <span id="SampleNameSpan"></span>
            </div>
            <ul class="nav nav-pills justify-content-end inv">
                <li class="nav-item">
                    <a class="nav-link active" href="#" data-main-vis="cells"
                        >Signature Autocorrelation</a
                    >
                </li>
                <li class="nav-item">
                    <a class="nav-link disabled" href="#" data-main-vis="genes"
                        >Hotspot</a
                    >
                </li>
                <li class="nav-item" style="display: none">
                    <a class="nav-link disabled" href="#" data-main-vis="tree"
                        >Trajectories</a
                    >
                </li>
            </ul>
        </div>
        <div id="main-content">
            <div id="left-content">
                <div id="upper-left-card" class="card">
                    <div class="card-header" id="headingOne">
                        <h5 class="mb-0">
                            <button
                                class="btn btn-link"
                                data-toggle="collapse"
                                data-target="#collapseOne"
                                aria-expanded="true"
                                aria-controls="collapseOne"
                            >
                                Controls
                            </button>
                        </h5>
                    </div>
                    <div
                        id="collapseOne"
                        class="collapse multi-collapse show"
                        aria-labelledby="headingOne"
                    >
                        <div id="upper-left-content">
                            <div
                                style="
                                    display: flex;
                                    flex-direction: row;
                                    flex-shrink: 0;
                                "
                            >
                                <div>
                                    <select
                                        id="cluster-group-select"
                                        class="form-control form-control-sm"
                                        style="width: 150px"
                                    ></select>
                                </div>
                                <div class="section-nav" style="flex-grow: 1">
                                    <ul
                                        class="nav nav-pills justify-content-center"
                                    >
                                        <li class="nav-item">
                                            <a
                                                class="nav-link active"
                                                id="sig-table-tab"
                                                data-toggle="tab"
                                                href="#table-div-container"
                                                role="tab"
                                                aria-controls="sig-table"
                                                aria-selected="true"
                                                >Signatures</a
                                            >
                                        </li>
                                        <li class="nav-item">
                                            <a
                                                class="nav-link"
                                                id="modules-table-tab"
                                                data-toggle="tab"
                                                href="#modules-table-div-container"
                                                role="tab"
                                                aria-controls="modules-table"
                                                aria-selected="true"
                                                >Modules</a
                                            >
                                        </li>
                                        <li class="nav-item">
                                            <a
                                                class="nav-link"
                                                id="protein-table-tab"
                                                data-toggle="tab"
                                                href="#protein-div-container"
                                                role="tab"
                                                aria-controls="protein-table"
                                                aria-selected="true"
                                                >Proteins</a
                                            >
                                        </li>
                                        <li class="nav-item">
                                            <a
                                                class="nav-link"
                                                id="meta-table-tab"
                                                data-toggle="tab"
                                                href="#meta-table-div"
                                                role="tab"
                                                aria-controls="meta-table"
                                                aria-selected="false"
                                                >Meta</a
                                            >
                                        </li>
                                        <li class="nav-item">
                                            <a
                                                class="nav-link"
                                                id="genes-table-tab"
                                                data-toggle="tab"
                                                href="#genes-table"
                                                role="tab"
                                                aria-controls="genes-table"
                                                aria-selected="false"
                                                >Genes</a
                                            >
                                        </li>
                                        <li class="nav-item">
                                            <a
                                                class="nav-link"
                                                id="de-table-tab"
                                                data-toggle="tab"
                                                href="#de-table"
                                                role="tab"
                                                aria-controls="de-table"
                                                aria-selected="false"
                                                >DE</a
                                            >
                                        </li>
                                    </ul>
                                </div>
                            </div>

                            <div
                                class="tab-content upper-left-section-content"
                                style="padding: 5px; display: block"
                            >
                                <div
                                    class="tab-pane show active"
                                    id="table-div-container"
                                    role="tabpanel"
                                    aria-labelledby="sig-table-tab"
                                    style="overflow: auto; max-height: 500px"
                                >
                                    <div
                                        class="sig-tables-header"
                                        style="overflow-y: auto"
                                    >
                                        <table class="sig-table">
                                            <thead>
                                                <tr class="proj-row">
                                                    <th>
                                                        <div>
                                                            <input
                                                                id="sig_filt_input"
                                                                class="form-control"
                                                                type="text"
                                                                placeholder="Filter Signatures..."
                                                            />
                                                        </div>
                                                    </th>
                                                </tr>
                                            </thead>
                                        </table>
                                    </div>
                                    <div class="sig-tables-wrapper"></div>
                                </div>
                                <div
                                    class="tab-pane"
                                    id="modules-table-div-container"
                                    role="tabpanel"
                                    aria-labelledby="modules-table-tab"
                                >
                                    <div class="modules-tables-header">
                                        <div id="modules-table-div">
                                            <table
                                                id="modules-table"
                                                class="compact stripe hover"
                                            ></table>
                                        </div>
                                    </div>
                                    <div class="modules-tables-wrapper"></div>
                                </div>
                                <div
                                    class="tab-pane"
                                    id="protein-div-container"
                                    role="tabpanel"
                                    aria-labelledby="protein-table-tab"
                                >
                                    <div class="sig-tables-header">
                                        <table class="sig-table">
                                            <thead>
                                                <tr class="proj-row">
                                                    <th>
                                                        <div>
                                                            <input
                                                                id="protein_filt_input"
                                                                class="form-control"
                                                                type="text"
                                                                placeholder="Filter Proteins..."
                                                            />
                                                        </div>
                                                    </th>
                                                </tr>
                                            </thead>
                                        </table>
                                    </div>
                                    <div class="sig-tables-wrapper">
                                        <div class="sig-table-div">
                                            <table
                                                id="protein-table"
                                                class="sig-table"
                                            >
                                                <tbody></tbody>
                                            </table>
                                        </div>
                                    </div>
                                </div>
                                <div
                                    class="tab-pane"
                                    id="meta-table-div"
                                    role="tabpanel"
                                    aria-labelledby="meta-table-tab"
                                >
                                    <div class="sig-tables-header">
                                        <table class="sig-table">
                                            <thead>
                                                <tr class="proj-row">
                                                    <th style="height: 38px">
                                                        <!-- Height matches space of filter input on other pane -->
                                                        <div>Variable Name</div>
                                                    </th>
                                                </tr>
                                            </thead>
                                        </table>
                                    </div>
                                    <div class="sig-tables-wrapper">
                                        <div class="sig-table-div">
                                            <table
                                                id="meta-table"
                                                class="sig-table"
                                            >
                                                <tbody></tbody>
                                            </table>
                                        </div>
                                    </div>
                                </div>
                                <div
                                    class="tab-pane"
                                    id="genes-table"
                                    role="tabpanel"
                                    aria-labelledby="genes-table-tab"
                                    style="height: 200px"
                                >
                                    <div>
                                        <table class="label-table">
                                            <tr>
                                                <td style="font-size: 1.2em">
                                                    Gene:
                                                </td>
                                                <td>
                                                    <select
                                                        id="SelectGene"
                                                        class="form-control"
                                                    ></select>
                                                </td>
                                            </tr>
                                        </table>
                                    </div>
                                    <div id="recent-genes-div">
                                        <div class="label1">Recent Genes:</div>
                                        <div id="recent-genes-list"></div>
                                    </div>
                                </div>
                                <div
                                    class="tab-pane"
                                    id="de-table"
                                    role="tabpanel"
                                    aria-labelledby="de-table-tab"
                                >
                                    <div class="controls">
                                        <div class="group-control">
                                            <div class="label">Group</div>
                                            <select
                                                id="num_control"
                                                class="form-control"
                                            ></select>
                                        </div>
                                        <div class="fgbg">
                                            <div>
                                                <div class="label">
                                                    Foreground
                                                </div>
                                                <select
                                                    id="num"
                                                    class="form-control"
                                                ></select>
                                            </div>

                                            <div>
                                                <div class="label">
                                                    Background
                                                </div>
                                                <select
                                                    id="denom"
                                                    class="form-control"
                                                ></select>
                                            </div>

                                            <div>
                                                <div
                                                    class="label"
                                                    style="height: 1em"
                                                ></div>
                                                <button
                                                    type="button"
                                                    class="btn btn-default btn-outline-primary"
                                                    id="submit_de"
                                                    class="form-control"
                                                >
                                                    Calculate DE
                                                </button>
                                            </div>
                                        </div>
                                        <button
                                            class="btn btn-secondary"
                                            type="button"
                                            data-toggle="collapse"
                                            data-target="#collapseExample"
                                            aria-expanded="false"
                                            aria-controls="collapseExample"
                                        >
                                            Advanced Options
                                        </button>
                                        <div
                                            class="collapse collapsed-controls"
                                            id="collapseExample"
                                        >
                                            <div>
                                                <div class="label">
                                                    Exclude genes expressed
                                                    in<br />less than
                                                    <i>m</i> cells:
                                                </div>
                                                <div class="label-control">
                                                    <span class="label"
                                                        >m =</span
                                                    >
                                                    <input
                                                        type="number"
                                                        id="de_min_cells"
                                                        class="form-control"
                                                        value="0"
                                                    />
                                                </div>
                                            </div>
                                            <div>
                                                <div
                                                    class="label-control no-select"
                                                    style="align-items: center"
                                                >
                                                    <span class="label">
                                                        <label
                                                            for="de_sub_cells"
                                                            >Subsample
                                                            Groups?</label
                                                        >
                                                    </span>
                                                    <input
                                                        type="checkbox"
                                                        id="de_sub_cells"
                                                        name="sub_groups"
                                                        value="off"
                                                    />
                                                </div>
                                                <div
                                                    class="label-control max-control disabled"
                                                >
                                                    <span class="label"
                                                        >Max Size =</span
                                                    >
                                                    <input
                                                        type="number"
                                                        id="de_sub_cells_n"
                                                        class="form-control"
                                                        tabindex="-1"
                                                        value="1000"
                                                    />
                                                </div>
                                            </div>

                                            <div>
                                                <div
                                                    class="label-control no-select"
                                                    style="align-items: center"
                                                >
                                                    <span class="label">
                                                        <label
                                                            for="de_test_type"
                                                            >DE Test Type</label
                                                        >
                                                    </span>
                                                </div>
                                                <div
                                                    class="label-control max-control"
                                                >
                                                    <select
                                                        id="de_test_type"
                                                        class="form-control"
                                                    >
                                                        <option value="wilcox">
                                                            Default (Fast
                                                            Wilcoxon Rank Sum)
                                                        </option>
                                                        <option
                                                            value="swilcox"
                                                            disabled=""
                                                        >
                                                            Wilcoxon Rank Sum
                                                            (Seurat)
                                                        </option>
                                                        <option
                                                            value="sbimod"
                                                            disabled
                                                        >
                                                            Bimodal (Seurat)
                                                        </option>
                                                        <!-- <option value="sroc">AUCROC (Seurat)</option>-->
                                                        <option
                                                            value="st"
                                                            disabled
                                                        >
                                                            T-test (Seurat)
                                                        </option>
                                                        <!-- <option value="spoisson">Poisson (Seurat)</option>-->
                                                        <!-- <option value="snegbinom">Negative Binomial (Seurat)</option>-->
                                                        <option
                                                            value="slr"
                                                            disabled
                                                        >
                                                            Logistic Regression
                                                            (Seurat)
                                                        </option>
                                                        <!-- <option value="smast">MAST (Seurat)</option> -->
                                                        <!-- <option value="sdeseq2">DESeq2 (Seurat)</option> -->
                                                    </select>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <div
                                        id="de-error"
                                        style="display: none"
                                    ></div>

                                    <div id="de-results" style="display: none">
                                        <div class="spacer"></div>
                                        <div id="de-results-title">
                                            Some Title for Comparison
                                        </div>
                                        <div class="spacer2"></div>
                                        <div class="label-control fdr-holder">
                                            <span>Maximum FDR: </span>
                                            <input
                                                type="search"
                                                id="max"
                                                name="max"
                                                value=".05"
                                            />
                                        </div>
                                        <div id="de-results-table-div">
                                            <table
                                                id="de-results-table"
                                                class="compact stripe hover"
                                            ></table>
                                        </div>
                                        <div class="spacer2"></div>
                                        <div class="button-container">
                                            <div class="back-button">
                                                <button
                                                    type="button"
                                                    class="btn btn-secondary"
                                                    id="new_de"
                                                    class="form-control"
                                                >
                                                    <svg
                                                        xmlns="http://www.w3.org/2000/svg"
                                                        width="21"
                                                        height="21"
                                                        viewBox="0 0 21 21"
                                                        fill="none"
                                                        stroke="currentColor"
                                                        stroke-width="2"
                                                        stroke-linecap="round"
                                                        stroke-linejoin="round"
                                                    >
                                                        <line
                                                            x1="3"
                                                            y1="10"
                                                            x2="18"
                                                            y2="10"
                                                        />
                                                        <line
                                                            x1="3"
                                                            y1="10"
                                                            x2="10"
                                                            y2="5"
                                                        />
                                                        <line
                                                            x1="3"
                                                            y1="10"
                                                            x2="10"
                                                            y2="15"
                                                        />
                                                    </svg>
                                                    New Comparison
                                                </button>
                                            </div>
                                        </div>
                                        <div class="spacer"></div>
                                    </div>
                                    <!-- End #de-results -->
                                </div>
                                <!-- End #de-table -->
                            </div>
                        </div>
                        <!-- End of upper-left-content -->
                    </div>
                </div>
                <!-- start new section -->
                <div class="card" id="dend-section">
                    <div class="card-header" id="headingThree">
                        <h5 class="mb-0">
                            <button
                                class="btn btn-link"
                                data-toggle="collapse"
                                data-target="#collapseThree"
                                aria-expanded="true"
                                aria-controls="collapseThree"
                            >
                                Dendrogram
                            </button>
                        </h5>
                    </div>
                    <div
                        id="collapseThree"
                        class="collapse multi-collapse show"
                        aria-labelledby="headingThree"
                        style="padding: 10px"
                    >
                        <div id="upper-middle-content">
                            <div class="tab-content upper-left-section-content">
                                <div class="tab-pane active container">
                                    <div
                                        class="form-inline justify-content-sm-around"
                                    >
                                        <div class="form-check">
                                            <label class="form-check-label">
                                                Radial Layout
                                                <input
                                                    class="form-check-input"
                                                    style="margin-left: 10px"
                                                    type="checkbox"
                                                    value="true"
                                                    id="dend_layout"
                                                />
                                            </label>
                                        </div>
                                        <div class="form-group">
                                            <label>
                                                Collapse To
                                                <input
                                                    class="form-control"
                                                    style="margin-left: 10px"
                                                    type="number"
                                                    value="5"
                                                    id="dend_collapse_to"
                                                />
                                            </label>
                                            <select id="collapse_select">
                                                <option selected value="mode">
                                                    Mode
                                                </option>
                                                <option value="arimean">
                                                    Arithmetic Mean
                                                </option>
                                                <option value="geomean">
                                                    Geometric Mean
                                                </option>
                                                <option value="median">
                                                    Median
                                                </option>
                                            </select>
                                            <button
                                                type="button"
                                                class="btn btn-secondary"
                                                id="dend_collapse"
                                            >
                                                Collapse
                                            </button>
                                        </div>
                                        <div class="form-group">
                                            <button
                                                type="button"
                                                class="btn btn-primary"
                                                id="dend_expand_all"
                                            >
                                                Expand All
                                            </button>
                                        </div>
                                    </div>
                                    <div class="row" style="overflow: hidden">
                                        <div class="col-md-12">
                                            <div
                                                id="tree_container_plotly"
                                            ></div>
                                        </div>
                                    </div>
                                    <!--<div class='row' style="overflow:hidden">
                              <div class = 'col-md-12'>
                                  <div id = 'tree_container' class = 'tree-widget'>
                                  </div>
                              </div>
                          </div>-->
                                </div>
                            </div>
                        </div>
                        <!-- End of middle-left-content -->
                    </div>
                </div>
                <!-- end of new section -->
                <div id="lower-left-card" class="card">
                    <div class="card-header" id="headingTwo">
                        <h5 class="mb-0">
                            <button
                                class="btn btn-link"
                                data-toggle="collapse"
                                data-target="#collapseTwo"
                                aria-expanded="true"
                                aria-controls="collapseTwo"
                            >
                                Values
                            </button>
                        </h5>
                    </div>
                    <div
                        id="collapseTwo"
                        class="collapse multi-collapse show"
                        aria-labelledby="headingTwo"
                    >
                        <div id="lower-left-content">
                            <div class="nav nav-pills justify-content-center">
                                <a
                                    class="nav-link active"
                                    id="ValuesButton"
                                    href="#value-plot"
                                    data-toggle="tab"
                                    aria-controls="value-plot"
                                    aria-selected="true"
                                    >Values</a
                                >
                                <a
                                    class="nav-link"
                                    id="SigInfoButton"
                                    href="#sig-info-default"
                                    data-toggle="tab"
                                    aria-controls="sig-info-default"
                                    aria-selected="true"
                                    >Signature</a
                                >
                                <a
                                    class="nav-link"
                                    id="HeatmapButton"
                                    href="#sig-info-cluster"
                                    data-toggle="tab"
                                    aria-controls="sig-info-cluster"
                                    aria-selected="false"
                                    >Heatmap</a
                                >
                                <a
                                    class="nav-link"
                                    id="CellButton"
                                    href="#selected-cell-info"
                                    data-toggle="tab"
                                    aria-controls="selected-cell-info"
                                    aria-selected="false"
                                    style="display: none"
                                    >Cell</a
                                >
                                <a
                                    class="nav-link"
                                    id="SelectionButton"
                                    href="#selection-info"
                                    data-toggle="tab"
                                    aria-controls="selection-info"
                                    aria-selected="false"
                                    style="display: none"
                                    >Selection</a
                                >
                            </div>
                            <div class="tab-content">
                                <div
                                    id="value-plot"
                                    class="tab-pane show active"
                                    role="tabpanel"
                                    aria-labelledby="ValuesButton"
                                >
                                    <table
                                        class="label-table"
                                        style="margin-left: 30px"
                                    >
                                        <tr style="font-size: 1.2em">
                                            <td></td>
                                            <td>
                                                <span
                                                    id="values-title"
                                                    style="
                                                        display: inline-block;
                                                        width: 300px;
                                                        word-wrap: break-word;
                                                    "
                                                ></span>
                                            </td>
                                            <td>
                                                <div class="checkbox-label">
                                                    <label for="log-check"
                                                        >Log Scale?</label
                                                    >
                                                    <input
                                                        type="checkbox"
                                                        value=""
                                                        id="log-check"
                                                    />
                                                </div>
                                            </td>
                                        </tr>
                                    </table>

                                    <div
                                        id="dist-div"
                                        style="flex-grow: 1"
                                    ></div>
                                </div>
                                <div
                                    id="sig-info-default"
                                    class="tab-pane show"
                                    role="tabpanel"
                                    aria-labelledby="SigInfoButton"
                                >
                                    <table
                                        class="label-table"
                                        style="
                                            margin-left: 30px;
                                            margin-bottom: 20px;
                                            width: 250px;
                                        "
                                    >
                                        <tr style="font-size: 1.2em">
                                            <td>Signature:</td>
                                            <td>
                                                <span
                                                    id="data-analysis-title"
                                                    style="
                                                        display: inline-block;
                                                        width: 300px;
                                                        word-wrap: break-word;
                                                    "
                                                ></span>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>Source:</td>
                                            <td>
                                                <span id="sig-source"></span>
                                            </td>
                                        </tr>
                                    </table>
                                    <!--
                              <table class='label-table' style='margin-left: 30px; margin-bottom: 20px; width: 250px;'>
                                  <tr style='font-size: 1.2em;'>
                                      <td> <button id="plot-ms-overlap-button" type="button" class="btn btn-outline-secondary"
                                        data-toggle="modal">Plot Overlap</button></td>
                                  </tr>
                              </table>-->
                                    <div
                                        id="sig-table-wrapper"
                                        style="
                                            margin: 0 20px;
                                            display: flex;
                                            flex-direction: column;
                                        "
                                    >
                                        <table
                                            id="sig-info-table"
                                            class="display"
                                            width="100%"
                                        ></table>
                                    </div>
                                </div>
                                <div
                                    id="sig-info-cluster"
                                    class="tab-pane"
                                    role="tabpanel"
                                    aria-labelledby="HeatmapButton"
                                >
                                    <div>
                                        <span class="label"
                                            >Grouping Variable:</span
                                        >
                                        <select
                                            id="heatmap-group-select"
                                            class="form-control form-control-sm"
                                            style="width: 150px"
                                        ></select>
                                    </div>
                                    <div id="heatmap-div"></div>
                                </div>
                                <div
                                    id="selected-cell-info"
                                    class="tab-pane"
                                    role="tabpanel"
                                    aria-labelledby="CellButton"
                                >
                                    <div
                                        class="label-row"
                                        style="
                                            margin-left: 30px;
                                            margin-bottom: 20px;
                                        "
                                    >
                                        <span>Cell ID:</span>
                                        <span id="cell-id-span"></span>
                                    </div>
                                    <div style="margin: 0 20px">
                                        <table
                                            id="cell-info-table"
                                            class="display"
                                            width="100%"
                                        ></table>
                                    </div>
                                </div>
                                <div
                                    id="selection-info"
                                    class="tab-pane"
                                    role="tabpanel"
                                    aria-labelledby="SelectionButton"
                                >
                                    <div
                                        class="label-row"
                                        style="
                                            margin-left: 30px;
                                            margin-bottom: 20px;
                                            display: flex;
                                            flex-shrink: 0;
                                            align-items: center;
                                        "
                                    >
                                        <div>Cells Selected:</div>
                                        <div
                                            id="selected-cell-count-span"
                                            style="padding-right: 5px"
                                        ></div>
                                        <div
                                            id="download-cells-button"
                                            class="vis-icon invert"
                                        >
                                            <svg
                                                xmlns="http://www.w3.org/2000/svg"
                                                width="29"
                                                height="29"
                                                viewBox="0 0 29 29"
                                                fill="none"
                                                stroke="currentColor"
                                                stroke-width="2"
                                                stroke-linecap="round"
                                                stroke-linejoin="round"
                                            >
                                                <line
                                                    x1="14"
                                                    y1="5"
                                                    x2="14"
                                                    y2="17"
                                                />
                                                <line
                                                    x1="9"
                                                    y1="13"
                                                    x2="14"
                                                    y2="17"
                                                />
                                                <line
                                                    x1="19"
                                                    y1="13"
                                                    x2="14"
                                                    y2="17"
                                                />
                                                <line
                                                    x1="19"
                                                    y1="13"
                                                    x2="14"
                                                    y2="17"
                                                />
                                                <path
                                                    d="M6 18 L6 21 L22 21 L22 18"
                                                />
                                            </svg>
                                        </div>
                                    </div>
                                    <div style="margin: 0 20px">
                                        <table
                                            id="selection-info-table"
                                            class="display"
                                            width="100%"
                                        ></table>
                                        <div style="min-height: 20px"></div>
                                        <table
                                            id="selection-info-table-meta"
                                            class="display"
                                            width="100%"
                                        ></table>
                                    </div>
                                </div>
                            </div>
                            <!-- End of .tab-content -->
                        </div>
                        <!-- End of lower-left-content -->
                    </div>
                </div>
            </div>
            <!-- End of left-content -->
            <div id="right-content">
                <div id="sigvp-scatter-div">
                    <div id="plot-title-div">
                        <div class="titles">
                            <div id="plot-subtitle-latent">
                                <div>
                                    <div class="labeled-select">
                                        <span class="label">View:</span>
                                        <select
                                            id="SelectProjScatter"
                                            class="form-control"
                                        ></select>
                                    </div>
                                    <div class="labeled-select">
                                        <span class="label">X:</span>
                                        <select
                                            id="SelectProjScatterX"
                                            class="form-control"
                                        ></select>
                                    </div>
                                </div>
                                <div class="labeled-select">
                                    <span class="label">Y:</span>
                                    <select
                                        id="SelectProjScatterY"
                                        class="form-control"
                                    ></select>
                                </div>
                            </div>
                            <div
                                id="plot-subtitle-trajectory"
                                style="display: none"
                            >
                                <div class="labeled-select">
                                    <span class="label">Projection:</span>
                                    <select
                                        id="SelectTrajectoryProjScatter"
                                        class="form-control"
                                    ></select>
                                </div>
                            </div>
                            <div
                                class="checkbox-label no-select"
                                style="margin: 5px 0 5px 10px"
                            >
                                <span class="label"
                                    ><label for="sync-check"
                                        >Update All?</label
                                    ></span
                                >
                                <input
                                    type="checkbox"
                                    value=""
                                    id="sync-check"
                                    checked
                                />
                            </div>
                        </div>
                        <div class="color-options">
                            <div id="plotted-layout-option">
                                <div class="label">Layout</div>
                                <div
                                    class="btn-group btn-group-toggle"
                                    role="group"
                                    aria-label="Layout Buttons"
                                    data-toggle="buttons"
                                >
                                    <label
                                        class="btn btn-outline-secondary active"
                                    >
                                        <input
                                            type="radio"
                                            name="scatterLayoutButtons"
                                            value="full"
                                            autocomplete="off"
                                            checked
                                        />
                                        <svg
                                            xmlns="http://www.w3.org/2000/svg"
                                            width="24"
                                            height="24"
                                            viewBox="0 0 24 24"
                                            fill="none"
                                            stroke="currentColor"
                                            stroke-width="2"
                                            stroke-linecap="round"
                                            stroke-linejoin="round"
                                        >
                                            <rect
                                                x="3"
                                                y="3"
                                                width="18"
                                                height="18"
                                                rx="2"
                                                ry="2"
                                            ></rect>
                                        </svg>
                                    </label>
                                    <label class="btn btn-outline-secondary">
                                        <input
                                            type="radio"
                                            name="scatterLayoutButtons"
                                            value="splitH"
                                            autocomplete="off"
                                        />
                                        <svg
                                            xmlns="http://www.w3.org/2000/svg"
                                            width="24"
                                            height="24"
                                            viewBox="0 0 24 24"
                                            fill="none"
                                            stroke="currentColor"
                                            stroke-width="1"
                                        >
                                            <rect
                                                x="3"
                                                y="3"
                                                width="18"
                                                height="18"
                                                rx="2"
                                                ry="2"
                                                stroke-width="2"
                                                stroke-linecap="round"
                                                stroke-linejoin="round"
                                            ></rect>
                                            <line
                                                x1="3"
                                                y1="12"
                                                x2="21"
                                                y2="12"
                                            />
                                        </svg>
                                    </label>
                                    <label class="btn btn-outline-secondary">
                                        <input
                                            type="radio"
                                            name="scatterLayoutButtons"
                                            value="splitV"
                                            autocomplete="off"
                                        />
                                        <svg
                                            xmlns="http://www.w3.org/2000/svg"
                                            width="24"
                                            height="24"
                                            viewBox="0 0 24 24"
                                            fill="none"
                                            stroke="currentColor"
                                            stroke-width="1"
                                        >
                                            <rect
                                                x="3"
                                                y="3"
                                                width="18"
                                                height="18"
                                                rx="2"
                                                ry="2"
                                                stroke-width="2"
                                                stroke-linecap="round"
                                                stroke-linejoin="round"
                                            ></rect>
                                            <line
                                                x1="12"
                                                y1="3"
                                                x2="12"
                                                y2="21"
                                            />
                                        </svg>
                                    </label>
                                    <label class="btn btn-outline-secondary">
                                        <input
                                            type="radio"
                                            name="scatterLayoutButtons"
                                            value="split4"
                                            autocomplete="off"
                                        />
                                        <svg
                                            xmlns="http://www.w3.org/2000/svg"
                                            width="24"
                                            height="24"
                                            viewBox="0 0 24 24"
                                            fill="none"
                                            stroke="currentColor"
                                            stroke-width="1"
                                        >
                                            <rect
                                                x="3"
                                                y="3"
                                                width="18"
                                                height="18"
                                                rx="2"
                                                ry="2"
                                                stroke-width="2"
                                                stroke-linecap="round"
                                                stroke-linejoin="round"
                                            ></rect>
                                            <line
                                                x1="3"
                                                y1="12"
                                                x2="21"
                                                y2="12"
                                            />
                                            <line
                                                x1="12"
                                                y1="3"
                                                x2="12"
                                                y2="21"
                                            />
                                        </svg>
                                    </label>
                                </div>
                            </div>
                            <div id="plotted-value-option">
                                <div class="label">Signature Scaling</div>
                                <div
                                    class="btn-group btn-group-toggle"
                                    role="group"
                                    data-toggle="buttons"
                                >
                                    <label class="btn btn-outline-secondary">
                                        <input
                                            type="radio"
                                            name="scatterColorButtons"
                                            id="valueoption"
                                            value="value"
                                            autocomplete="off"
                                        />
                                        Value
                                    </label>
                                    <label
                                        class="btn btn-outline-secondary active"
                                    >
                                        <input
                                            type="radio"
                                            name="scatterColorButtons"
                                            id="rankoption"
                                            value="rank"
                                            autocomplete="off"
                                            checked
                                        />
                                        Rank
                                    </label>
                                </div>
                            </div>
                            <div id="selection-options">
                                <div class="label">Selected Cells</div>
                                <div style="display: flex">
                                    <button
                                        id="save-selection-button"
                                        type="button"
                                        class="btn btn-outline-secondary"
                                        data-toggle="modal"
                                        data-target="#saveSelectionModal"
                                        disabled
                                    >
                                        Save
                                    </button>
                                    <button
                                        id="load-selection-button"
                                        type="button"
                                        class="btn btn-outline-secondary"
                                        data-toggle="modal"
                                        data-target="#loadSelectionModal"
                                        style="margin-left: 5px"
                                    >
                                        Load
                                    </button>
                                </div>
                            </div>
                            <div id="export-object">
                                <div class="label">Save Report Info</div>
                                <div style="display: flex">
                                    <button
                                        id="export-object-button"
                                        type="button"
                                        class="btn btn-outline-secondary"
                                        style="margin-left: 5px"
                                        data-toggle="modal"
                                        data-target="#saveObjectModal"
                                    >
                                        Download
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div id="scatter-container-div">
                        <div
                            id="scatter-div"
                            class="scatter-layout-container"
                        ></div>
                        <div
                            id="scatter-splitH-div"
                            class="scatter-layout-container"
                            style="display: none"
                        >
                            <div
                                id="scatter-splitH-div0"
                                class="scatter-split-plot-div active"
                            ></div>
                            <div
                                id="scatter-splitH-div1"
                                class="scatter-split-plot-div"
                            ></div>
                        </div>
                        <div
                            id="scatter-splitV-div"
                            class="scatter-layout-container"
                            style="display: none"
                        >
                            <div class="scatter-split-row-div">
                                <div
                                    id="scatter-splitV-div0"
                                    class="scatter-split-plot-div active"
                                ></div>
                                <div
                                    id="scatter-splitV-div1"
                                    class="scatter-split-plot-div"
                                ></div>
                            </div>
                        </div>
                        <div
                            id="scatter-split-div"
                            class="scatter-layout-container"
                            style="display: none"
                        >
                            <div class="scatter-split-row-div">
                                <div
                                    id="scatter-split-div0"
                                    class="scatter-split-plot-div active"
                                ></div>
                                <div
                                    id="scatter-split-div1"
                                    class="scatter-split-plot-div"
                                ></div>
                            </div>
                            <div class="scatter-split-row-div">
                                <div
                                    id="scatter-split-div2"
                                    class="scatter-split-plot-div"
                                ></div>
                                <div
                                    id="scatter-split-div3"
                                    class="scatter-split-plot-div"
                                ></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- End of right-content -->
        </div>
        <div id="sig-tooltip">
            <div class="inner">Test!</div>
            <div class="arrow"></div>
        </div>
        <div
            id="hidden-node"
            style="position: absolute; left: -10000px; top: 10000px"
        ></div>

        <!-- Save Selection Modal -->
        <div
            class="modal fade"
            id="saveSelectionModal"
            tabindex="-1"
            role="dialog"
            aria-labelledby="saveSelectionModalTitle"
            aria-hidden="true"
        >
            <div class="modal-dialog modal-dialog-centered" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="saveSelectionModalTitle">
                            Save Selection
                        </h5>
                        <button
                            type="button"
                            class="close"
                            data-dismiss="modal"
                            aria-label="Close"
                        >
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <div class="form-group">
                            <label for="saveSelectionName"
                                >Selection Name</label
                            >
                            <input
                                type="text"
                                class="form-control"
                                id="saveSelectionName"
                                area-describedby="selectionNameHelp"
                            />
                            <small
                                id="selectionNameHelp"
                                class="form-text text-muted"
                                >Pick a name for this selection.</small
                            >
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button
                            type="button"
                            class="btn btn-secondary"
                            data-dismiss="modal"
                        >
                            Cancel
                        </button>
                        <button
                            type="button"
                            class="btn btn-primary confirm-button"
                        >
                            Save
                        </button>
                    </div>
                </div>
            </div>
        </div>
        <!-- End Save Selection Modal -->
        <!-- Download Object Modal -->
        <div
            class="modal fade"
            id="saveObjectModal"
            tabindex="-1"
            role="dialog"
            aria-labelledby="saveObjectModalTitle"
            aria-hidden="true"
        >
            <div class="modal-dialog modal-dialog-centered" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="saveObjectModalTitle">
                            Download Vision Object
                        </h5>
                        <button
                            type="button"
                            class="close"
                            data-dismiss="modal"
                            aria-label="Close"
                        >
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <div class="form-group">
                            <label for="saveObjectName"
                                >File names prefix</label
                            >
                            <input
                                type="text"
                                class="form-control"
                                id="saveObjectName"
                                area-describedby="selectionObjectHelp"
                            />
                            <small
                                id="selectionObjectHelp"
                                class="form-text text-muted"
                                default="vision"
                                >Pick a prefix to be added before the downloaded
                                file names.</small
                            >
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button
                            type="button"
                            class="btn btn-secondary"
                            data-dismiss="modal"
                        >
                            Cancel
                        </button>
                        <button
                            type="button"
                            class="btn btn-primary confirm-button"
                        >
                            Download
                        </button>
                    </div>
                </div>
            </div>
        </div>
        <!-- End Save Object Modal -->
        <!-- Load Selection Modal -->
        <div
            class="modal fade"
            id="loadSelectionModal"
            tabindex="-1"
            role="dialog"
            aria-labelledby="loadSelectionModalTitle"
            aria-hidden="true"
        >
            <div class="modal-dialog modal-dialog-centered" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="loadSelectionModalTitle">
                            Load Selection
                        </h5>
                        <button
                            type="button"
                            class="close"
                            data-dismiss="modal"
                            aria-label="Close"
                        >
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <div style="font-weight: bold; margin-bottom: 15px">
                            Select a stored selection:
                        </div>
                        <div class="selection-list"></div>
                        <div class="empty-list" style="display: none">
                            <div>There are no saved selections</div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button
                            type="button"
                            class="btn btn-secondary"
                            data-dismiss="modal"
                        >
                            Cancel
                        </button>
                        <button
                            type="button"
                            class="btn btn-primary confirm-button"
                        >
                            Load
                        </button>
                    </div>
                </div>
            </div>
        </div>
        <!-- End Load Selection Modal -->
    </body>
</html>
