<!doctype html>
<html>
  <head>
    <title>TissUUmaps</title>
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, shrink-to-fit=no"
    />
    <meta charset="utf-8" />
    <script src="static/vendor/d3/d3.v4.min.js"></script>
    <script src="static/vendor/d3-plugins/d3-scale-chromaticV3.js"></script>
    <script src="static/vendor/jquery-3.5.1/jquery-3.5.1.min.js"></script>
    <script src="static/vendor/select2-4.1.0-rc.0/dist/js/select2.full.min.js"></script>
    <script src="static/vendor/jquery-3.5.1/jquery.autocomplete.min.js"></script>
    <link
      href="static/vendor/select2-4.1.0-rc.0/dist/css/select2.min.css"
      rel="stylesheet"
    />
    <link
      rel="stylesheet"
      href="static/vendor/jquery-3.5.1/jquery.autocomplete.css"
    />
    <link
      rel="stylesheet"
      href="static/vendor/bootstrap-5.1.1/dist/css/bootstrap.min.css"
    />
    <link
      rel="stylesheet"
      href="static/vendor/bootstrap-icons-1.5.0/bootstrap-icons.css"
    />
    <link rel="stylesheet" href="static/css/style.css" />
    {% if isStandalone %}
    <script src="qrc:///qtwebchannel/qwebchannel.js"></script>
    {% endif %}
  </head>

  <body>
    <div
      id="main-ui"
      class="container-fluid px-0 d-flex flex-column vh-100 overflow-hidden"
    >
      <nav
        id="main-navbar"
        class="navbar navbar-expand-lg navbar-light border-bottom border-dark flex-shrink-0 {% if isStandalone %}d-none{% endif %}"
      >
        <div class="container-fluid">
          <a
            class="navbar-brand pt-0"
            target="_blank"
            href="https://tissuumaps.github.io/"
          >
            <img
              src="static/misc/logo_40.png"
              width="25"
              height="27"
              alt="TissUUmaps Logotype"
              title="TissUUmaps"
            />
            <span class="ms-2 pt-2 small">TissUUmaps</span>
          </a>
          <button
            class="navbar-toggler"
            type="button"
            data-bs-toggle="collapse"
            data-bs-target="#navbar-menu"
            aria-controls="navbar-menu"
            aria-expanded="false"
            aria-label="Toggle navigation"
          >
            <span class="navbar-toggler-icon"></span>
          </button>

          <div class="collapse navbar-collapse" id="navbar-menu">
            <ul class="navbar-nav">
              <li class="nav-item dropdown">
                <a
                  class="nav-link dropdown-toggle active"
                  id="a_menubar_File"
                  href="#"
                  id="navbarDropdownMenuLink"
                  role="button"
                  data-bs-toggle="dropdown"
                  aria-expanded="false"
                >
                  File
                </a>
                <ul
                  class="dropdown-menu"
                  id="menubar_File"
                  aria-labelledby="navbarDropdownMenuLink"
                >
                  <li>
                    <a class="dropdown-item" href="#" id="capture_viewport">
                      <span>Capture viewport</span>
                    </a>
                  </li>
                  <li>
                    <a class="dropdown-item" href="#" id="see_version">
                      <span>TissUUmaps version</span>
                    </a>
                  </li>
                </ul>
              </li>
              <li class="nav-item" id="nav-item-title">
                <a
                  class="nav-link active"
                  aria-current="page"
                  id="project_title_top"
                  href="#"
                ></a>
              </li>
            </ul>
          </div>
        </div>
      </nav>

      <div class="row mx-0 flex-grow-1 overflow-hidden">
        <!-- Row for viewer  -->
        <div class="col px-0 position-relative" id="ISS_viewer_container">
          <a
            id="floating-navbar-toggler"
            class="hook in floating-menu-btn shadow navbar-dark p-2 d-none"
            data-bs-toggle="collapse"
            data-bs-target="#main-navbar"
            role="button"
            aria-expanded="false"
            aria-controls="main-navbar"
            href="#"
          >
            <span class="navbar-toggler-icon"></span>
          </a>
          <!-- The id is what OSD will look for to draw the viewer, the class is our own css to stylize
                The ID will give the prefix for all the objects related to the viewer in this case ISS-->
          <div id="ISS_viewer" class="ISS_viewer h-100"></div>
          <!-- Global marker size slider -->
          <div id="ISS_globalmarkersize" class="d-none px-1 mx-1 viewer-layer">
            <label class="form-label"
              >Marker size:
              <em class="form-label" id="ISS_globalmarkersize_label"
                >100</em
              ></label
            ><br />
            <input
              class="form-range"
              type="range"
              id="ISS_globalmarkersize_text"
              value="100"
              min="0"
              max="500"
              step="10"
              oninput="document.getElementById('ISS_globalmarkersize_label').innerHTML = this.value;"
            />
          </div>
        </div>

        <div
          id="ISS_menu"
          class="ISS_menu col-xl-4 col-lg-5 col-md-6 col-sm-8 col-xs-12 mh-100 overflow-auto"
        >
          {% if projectList %}
          <div class="row pb-2 p-2">
            <div class="card border-primary p5">
              <div class="card-body">
                <h5 class="card-title d-none" id="project_title"></h5>
                <p class="card-text d-none" id="project_description"></p>
                {% if projectList|length > 1 or not(projectList.0.selected) %}
                <strong>Select dataset to display:</strong>
                <br />
                <select class="form-select" id="project_select">
                  {% for project in projectList %}
                  <option
                    value="{{project.path}}"
                    {%
                    if
                    project.selected
                    %}selected{%
                    endif
                    %}
                  >
                    {{project.name}}
                  </option>
                  {% endfor %}
                </select>
                {% endif %}
              </div>
            </div>
          </div>
          {% endif %}
          <div class="row pb-2">
            <!-- Level 0 tabs -->
            <ul id="main-tabs-menu" class="nav nav-tabs pt-1 sticky-top">
              <li class="nav-item">
                <button
                  data-bs-target="#markers-iss-gui"
                  data-bs-toggle="tab"
                  aria-expanded="true"
                  class="nav-link active"
                  id="title-tab-markers"
                >
                  Markers
                </button>
              </li>
              <li>
                <button
                  data-bs-target="#markers-regions-gui"
                  data-bs-toggle="tab"
                  aria-expanded="false"
                  class="nav-link"
                  id="title-tab-regions"
                >
                  Regions
                </button>
              </li>
              <li>
                <button
                  data-bs-target="#image-gui"
                  data-bs-toggle="tab"
                  aria-expanded="false"
                  class="nav-link"
                  id="title-tab-image"
                >
                  Layers
                </button>
              </li>
              <li>
                <button
                  data-bs-target="#project-gui"
                  data-bs-toggle="tab"
                  aria-expanded="false"
                  class="nav-link"
                  id="title-tab-project"
                >
                  <u class="bi bi-gear-fill"></u>
                </button>
              </li>
              <li>
                <button
                  data-bs-target="#plugins-gui"
                  data-bs-toggle="tab"
                  aria-expanded="false"
                  class="nav-link d-none"
                  id="title-tab-plugins"
                >
                  Plugins
                </button>
              </li>
            </ul>

            <div id="TM-tabs" class="tab-content">
              <!-- TAB 1.1 ISS data  -------------------------------------------------------------------------------- -->
              <div class="tab-pane active" id="markers-iss-gui">
                <div class="panel panel-default">
                  <div class="panel-body">
                    <div class="row" id="divMarkersDownloadButtons"></div>
                    <!-- 1.1 Row nav tabs -->
                    <ul
                      class="nav nav-tabs mt-2"
                      id="level-1-tabs"
                      role="tablist"
                    >
                      <li class="nav-item" id="plus-1" role="presentation">
                        <button
                          class="nav-link"
                          id="plus-1-button"
                          data-bs-toggle="tab"
                          data-bs-target="#"
                          type="button"
                          role="tab"
                          aria-controls="plus"
                          aria-selected="false"
                        >
                          <strong>+</strong>
                        </button>
                      </li>
                    </ul>
                    <div class="tab-content" id="level-1-tabsContent"></div>
                  </div>
                </div>
              </div>
              <!-- TAB 1.2 Region data ----------------------------------------------------------------------------- -->
              <div class="tab-pane" id="markers-regions-gui">
                <div class="panel panel-default">
                  <div class="panel-body">
                    <div class="row">
                      <!-- Tabs 1.3.0 region subtabs -->
                      <ul class="nav nav-tabs mt-2">
                        <li class="nav-item">
                          <button
                            class="nav-link active"
                            data-bs-target="#markers-regions-project-gui"
                            data-bs-toggle="tab"
                            aria-expanded="true"
                          >
                            Regions
                          </button>
                        </li>
                        <li class="nav-item">
                          <button
                            class="nav-link"
                            data-bs-target="#markers-regions-import-gui"
                            data-bs-toggle="tab"
                            aria-expanded="false"
                          >
                            Import
                          </button>
                        </li>
                        <li class="nav-item">
                          <button
                            class="nav-link"
                            data-bs-target="#markers-regions-export-gui"
                            data-bs-toggle="tab"
                            aria-expanded="false"
                          >
                            Export
                          </button>
                        </li>
                      </ul>
                      <div id="markers-region-subtabs" class="tab-content">
                        <!-- Tabs 1.3.1 -->
                        <div
                          class="tab-pane show active"
                          id="markers-regions-project-gui"
                        >
                          <div class="panel panel-default">
                            <div class="panel-body">
                              <div id="divRegionsDownloadButtons"></div>
                              <div id="regionAccordions"></div>

                              <div id="markers-regions-div">
                                <div
                                  class="my-1"
                                  id="markers-regions-panel"
                                ></div>
                              </div>
                            </div>
                          </div>
                        </div>
                        <!-- Tabs 1.3.2 -->
                        <div class="tab-pane" id="markers-regions-import-gui">
                          <div class="panel panel-default">
                            <div class="panel-body">
                              <div class="row">
                                <div class="col-9">
                                  <input
                                    class="form-control-file form-control"
                                    type="file"
                                    id="ISS_region_files_import"
                                    name="files[]"
                                  />
                                </div>
                                <div class="col-3">
                                  <button
                                    id="ISS_import_regions"
                                    class="btn btn-primary"
                                    type="button"
                                  >
                                    Import
                                  </button>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                        <!-- Tabs 1.3.3 -->
                        <div class="tab-pane" id="markers-regions-export-gui">
                          <div class="panel panel-default">
                            <div class="panel-body">
                              <label for="ISS_region_file_name"
                                >Download regions for later use</label
                              >
                              <div class="row">
                                <div class="col-9">
                                  <input
                                    class="form-control"
                                    type="text"
                                    id="ISS_region_file_name"
                                    placeholder="regions.json"
                                    value="regions.json"
                                  />
                                </div>
                                <div class="col-3">
                                  <button
                                    id="ISS_export_regions"
                                    class="btn btn-primary"
                                    type="button"
                                  >
                                    Export
                                  </button>
                                </div>
                              </div>
                              <label for="ISS_region_csv_name"
                                >Download expression in regions</label
                              >
                              <div class="row">
                                <div class="col-9">
                                  <input
                                    class="form-control"
                                    type="text"
                                    id="ISS_region_csv_name"
                                    placeholder="regions.csv"
                                    value="regions.csv"
                                  />
                                </div>
                                <div class="col-3">
                                  <button
                                    id="ISS_export_regions_csv"
                                    class="btn btn-primary"
                                    type="button"
                                  >
                                    Export
                                  </button>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <!-- TAB 1.3 Overlay data ----------------------------------------------------------------------------- -->
              <div class="tab-pane" id="image-gui">
                <div class="panel panel-default">
                  <div class="panel-body">
                    <div
                      class="row overflow-auto mb-2"
                      id="image-overlay-panel"
                    ></div>
                    <div id="filterSettingsAccordions">
                      <div class="accordion-item">
                        <h2 class="accordion-header" id="filterSettingsHeaders">
                          <button
                            type="button"
                            class="accordion-button collapsed"
                            data-bs-toggle="collapse"
                            data-bs-target="#filterSettings"
                            aria-expanded="false"
                            aria-controls="filterSettings"
                          >
                            <i class="bi bi-gear-fill"></i>&nbsp;Filter settings
                          </button>
                        </h2>
                        <div
                          class="accordion-collapse p-2 collapse"
                          id="filterSettings"
                          aria-labelledby="filterSettingsHeaders"
                          data-bs-parent="#filterSettingsAccordions"
                        >
                          <div class="col-12 px-1" id="filterSettings"></div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <!-- end of a main panel -->
              </div>
              <!-- end of image-gui-->
              <!-- TAB 1.4 Plugin data ----------------------------------------------------------------------------- -->
              <div class="tab-pane" id="plugins-gui">
                <div class="panel panel-default">
                  <div class="panel-body">
                    <h6 class="my-2">List of plugins:</h6>
                    <div id="pluginsAccordions"></div>
                  </div>
                </div>
                <!-- end of a main panel -->
              </div>
              <!-- TAB 1.5 Project data ----------------------------------------------------------------------------- -->
              <div class="tab-pane" id="project-gui">
                <div class="panel panel-default">
                  <div class="panel-body">
                    <h6 class="my-2">Project title:</h6>
                    <div class="row">
                      <div class="col-12">
                        <input
                          class="form-control tmap_project_param_input"
                          type="text"
                          id="project_title_input"
                          placeholder="Project title"
                          data-param="filename"
                          data-type="str"
                        />
                      </div>
                    </div>
                    <h6 class="my-2">Project description (html):</h6>
                    <div class="row">
                      <div class="col-12">
                        <textarea
                          class="form-control tmap_project_param_input"
                          id="project_description_input"
                          rows="3"
                          placeholder="Project description"
                          data-param="description"
                          data-type="str"
                        ></textarea>
                      </div>
                    </div>
                    <!-- List of plugins used in the project-->
                    <h6 class="my-2">List of plugins:</h6>
                    <div class="row">
                      <div class="col-12">
                        <input
                          class="form-control tmap_project_param_input"
                          type="text"
                          id="project_plugins_input"
                          placeholder="Plugin1, Plugin2, ..."
                          data-param="plugins"
                          data-type="list"
                        />
                      </div>
                    </div>
                    <!-- List of plugins used in the project-->
                    <h6 class="my-2">Scalebar pixel resolution (mpp):</h6>
                    <div class="row">
                      <div class="col-12">
                        <input
                          class="form-control tmap_project_param_input"
                          type="text"
                          id="project_mpp_input"
                          placeholder="0"
                          data-param="mpp"
                          data-type="number"
                        />
                      </div>
                    </div>
                    <!-- Starting Viewport Bounding Box, as x, y, width, and height floats -->
                    <h6 class="my-2">Starting viewport:</h6>
                    <div class="row">
                      <div class="col-2">
                        <div class="row">
                          <label class="col-4" for="project_boundingBox_x"
                            >X:</label
                          >
                          <input
                            class="col-8 form-control tmap_project_param_input"
                            type="text"
                            id="project_boundingBox_x"
                            placeholder="0"
                            data-param="boundingBox.x"
                            data-type="number"
                          />
                        </div>
                      </div>
                      <div class="col-2">
                        <div class="row">
                          <label class="col-4" for="project_boundingBox_y"
                            >Y:</label
                          >
                          <input
                            class="col-8 form-control tmap_project_param_input"
                            type="text"
                            id="project_boundingBox_y"
                            placeholder="0"
                            data-param="boundingBox.y"
                            data-type="number"
                          />
                        </div>
                      </div>
                      <div class="col-2">
                        <div class="row">
                          <label class="col-4" for="project_boundingBox_width"
                            >W:</label
                          >
                          <input
                            class="col-8 form-control tmap_project_param_input"
                            type="text"
                            id="project_boundingBox_width"
                            placeholder="0"
                            data-param="boundingBox.width"
                            data-type="number"
                          />
                        </div>
                      </div>
                      <div class="col-2">
                        <div class="row">
                          <label class="col-4" for="project_boundingBox_height"
                            >H:</label
                          >
                          <input
                            class="col-8 form-control tmap_project_param_input"
                            type="text"
                            id="project_boundingBox_height"
                            placeholder="0"
                            data-param="boundingBox.height"
                            data-type="number"
                          />
                        </div>
                      </div>
                      <div class="col-4">
                        <!-- Add button to use actual boundingBox -->
                        <button
                          id="project_boundingBox_actual"
                          class="w-100 btn btn-primary"
                          type="button"
                        >
                          Use actual viewport
                        </button>
                      </div>
                    </div>
                    <!--Import and export tmap project button, with ids load_project_menu and save_project_menu -->
                    <div class="row mt-2">
                      <div class="col-6">
                        <button
                          id="load_project_menu"
                          class="btn btn-primary w-100"
                          type="button"
                        >
                          Import project
                        </button>
                      </div>
                      <div class="col-6">
                        <button
                          id="save_project_menu"
                          class="btn btn-primary w-100"
                          type="button"
                        >
                          Export project
                        </button>
                      </div>
                    </div>
                    <div class="row mt-2">
                      <div class="col-6">
                        <button
                          id="edit_project_json"
                          class="btn btn-primary w-100"
                          type="button"
                        >
                          Edit tmap JSON
                        </button>
                      </div>
                      <div class="col-6">
                        <button
                          id="download_all_files"
                          class="btn btn-primary w-100"
                          type="button"
                        >
                          Download project archive (.tar)
                        </button>
                      </div>
                    </div>
                  </div>
                </div>
                <!-- end of a main panel -->
              </div>
              <!-- end of Plugin-gui-->
              <!-- end of Plugin-gui-->
            </div>
            <!-- end of TM-tabs-->
          </div>
          <!-- end of Level 0 tabs -->
        </div>
        <!-- end of lateral panel -->

        <div
          id="ISS_collapser"
          class="d-flex align-self-center justify-content-end px-0 position-absolute"
        >
          <div class="btn btn-primary" id="ISS_collapse_btn">
            <i class="bi bi-caret-right-fill"></i>
          </div>
        </div>
      </div>
      <!-- end of single row -->
    </div>
    <!-- end of container-fuild-->
    <div
      id="powered_by_tissuumaps"
      class="d-none"
      style="left: 10px; bottom: 10px; z-index: 100"
    >
      <div class="px-1 me-3 viewer-layer">
        <small
          ><img src="static/misc/logo.svg" height="22px" /> Powered by
          <a href="https://tissuumaps.github.io/" target="_blank"
            >TissUUmaps</a
          ></small
        >
      </div>
    </div>
  </body>
  <script src="static/vendor/geobuf-3.0.2/geobuf.js"></script>
  <script src="static/vendor/geobuf-3.0.2/pbf.js"></script>
  <script src="static/vendor/clipper-js/clipper-js.js"></script>
  <script src="static/vendor/bootstrap-5.1.1/dist/js/bootstrap.bundle.min.js"></script>
  <script src="static/vendor/openseadragon-bin-4.1.0/openseadragon.min.js"></script>
  <script src="static/vendor/openseadragon-plugins/openseadragon-filtering.js"></script>
  <script src="static/vendor/openseadragon-plugins/openseadragon-svg-overlay.js"></script>
  <script src="static/vendor/openseadragon-plugins/openseadragon-scalebar.js"></script>
  <script src="static/vendor/CamanJS-4.1.2/dist/caman.min.js"></script>
  <script src="static/vendor/PapaParse-5.3.0/papaparse.min.js"></script>
  <script src="static/vendor/sorttable/sorttable.js"></script>
  <script src="static/vendor/jsonEditor/jsoneditor.min.js"></script>
  <script src="static/js/utils/interfaceUtils.js"></script>
  <script src="static/js/utils/customElementUtils.js"></script>
  <script src="static/js/utils/dataUtils.js"></script>
  <script src="static/js/utils/h5Utils.js"></script>
  <script src="static/js/utils/markerUtils.js"></script>
  <script src="static/js/utils/OSDViewerUtils.js"></script>
  <script src="static/js/utils/HTMLElementUtils.js"></script>
  <script src="static/js/utils/regionUtils.js"></script>
  <script src="static/js/utils/regionOperations.js"></script>
  <script src="static/js/utils/regionOperationsUI.js"></script>
  <script src="static/js/utils/overlayUtils.js"></script>
  <script src="static/js/utils/filterUtils.js"></script>
  <script src="static/js/utils/glUtils.js"></script>
  <script src="static/js/utils/pluginUtils.js"></script>
  <script src="static/js/utils/projectUtils.js"></script>
  <script src="static/js/tmapp.js"></script>
  <script src="static/js/flask.js"></script>
  <script>
    //Workaround JQuery Issue 2292
    //https://github.com/jquery/jquery-ui/issues/2292
    $.fn.offset = (function (_super) {
      return function () {
        // Call base function
        var originalResult = _super.apply(this, arguments);
        //Define default value
        var zoom = 1;
        try {
          //Use `currentCSSZoom` of HTML element
          //https://caniuse.com/?search=currentCSSZoom
          //https://developer.mozilla.org/de/docs/Web/API/Element/currentCSSZoom
          if (this && this[0] && this[0].currentCSSZoom) {
            zoom = this[0].currentCSSZoom;
          }
        } catch {
          //Fallback for unexpected errors
          zoom = 1;
        }
        //Modify result
        originalResult.top = originalResult.top / zoom;
        originalResult.left = originalResult.left / zoom;
        //Return result
        return originalResult;
      };
    })($.fn.offset);
    if (window!=window.top) {
      /* I'm in a frame! */
      OpenSeadragon.MouseTracker.passiveWheelEvents = false;
      document.getElementById("main-navbar").classList.add("collapse");

      //document.html.style.zoom=0.6
      document.getElementById("ISS_menu").style.zoom = 0.7;
      document.getElementById("ISS_menu").classList.remove("col-xl-4");
      document.getElementById("ISS_menu").classList.remove("col-lg-5");
      document.getElementById("ISS_menu").classList.remove("col-md-6");
      document.getElementById("ISS_menu").classList.remove("col-sm-8");
      document.getElementById("ISS_menu").classList.add("col-xl-3");
      document.getElementById("ISS_menu").classList.add("col-lg-4");
      document.getElementById("ISS_menu").classList.add("col-md-5");
      document.getElementById("ISS_menu").classList.add("col-sm-6");
    }
    // ----------
    $(document).ready(function () {
      const queryString = window.location.search;
      const urlParams = new URLSearchParams(queryString);
      const tmapFile = urlParams.get('tmap')

      glUtils._markershapes = "/static/misc/markershapes.png"
      h5Utils.worker_path = "/static/js/utils/h5Utils_worker.js";
      h5Utils.relative_root = "../../../";
      tmapp.registerActions();
      tmapp.init();
      tmapp.version = "{{ version | safe }}";
      tmapp.schema_version = "{{ schema_version | safe }}";
      {% for plugin in plugins %} {% if plugin %}
      pluginUtils.addPlugin("{{ plugin }}");
      {% endif %} {% endfor %}

      if (tmapFile != null) {
        if (tmapFile != "null") {
          projectUtils.loadProjectFileFromServer(tmapFile);
        }
      }
      else {
        {% if jsonProject %}
        jsonState = {{ jsonProject | tojson | safe }}
        projectUtils.loadProject(jsonState);
        {% endif %}
      }

      {% if isStandalone %}
      flask.standalone.init();
      {% elif readOnly %}
      flask.init();
      {% else %}
      flask.server.init();
      {% endif %}
      {% if message %}
      interfaceUtils.alert("{{message|safe}}");
      {% endif %}
      {% if warning %}
      interfaceUtils.generateNotification("{{warning|safe}}", "loading_alert", false, 3000, "warning");
      {% endif %}
      if (window!=window.top) {
          document.getElementById("main-navbar").classList.add("collapse");
          elt = document.getElementById("powered_by_tissuumaps");
          tmapp["ISS_viewer"].addControl(elt,{
              anchor: OpenSeadragon.ControlAnchor.BOTTOM_LEFT,
          });
          elt.classList.remove("d-none");
          elt = document
          .getElementById("floating-navbar-toggler")
          tmapp["ISS_viewer"].addControl(elt,{
              anchor: OpenSeadragon.ControlAnchor.TOP_LEFT,
              attachToViewer: true,
              autoFade: false
          });
          elt.classList.remove("d-none");
      }
      });
  </script>
</html>
