index.html

<!DOCTYPE html>

<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta name="theme-color" content="#333333" />
  <meta name="author" content="Yao-Yuan Mao" />
  <meta name="creator" content="Yao-Yuan Mao" />

  <title>Cutout Image List Tool for DESI Legacy Imaging Surveys and More</title>
  <meta name="description"
  content="Display image cutouts for a list of sky coordinates, allowing you to inspect and mark selections. Images are retrived from DESI Legacy Imaging Surveys, SDSS, and DSS.">
  <meta name="keywords"
    content="astronomy, survey, cutout, image, imaging, photmetric, SDSS, DESI, DSS, DES, HSC, GALEX, WISE, DESI Legacy Imaging Surveys, target selection, javascript" />

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pure/2.2.0/base-min.min.css" integrity="sha512-yhE6062TCkGPY2EvgbmzzVqiBe6Aq2/U3iwmZwjQ96uMwz4XMPI4wNFZv0/wehlzm2WFxs6rmWpViicTCnL13w==" crossorigin="anonymous" referrerpolicy="no-referrer" />
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pure/2.2.0/buttons-min.min.css" integrity="sha512-V2cF8nh1XgbM+ODfma6s2c/plJlLyPTYHTPW2ZIHU5vBNm8HXJLWQkovLmBP65YvJPOvv4Rtl+pUVB8F/CzpEA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pure/2.2.0/forms-min.min.css" integrity="sha512-hef4tvE5U32LMu8yBrUOV44nrrBkvdqOcbHC3fwD+ZsZGvqu9nIGG6Gd9NXbhx6JXPQSmonumKOkhWgsGW05uQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
  <style>
  #main{
    padding: 7px;
    max-width: 1020px;
    min-width: min-content;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 200px;
  }
  #form{
    max-width: 960px;
    margin: 0 auto;
    text-align: center;
  }
  #input{
    width: calc(100% - 0.8em);
    height: 100px;
    margin: 0 0.4em;
  }
  #layer, #scale{
    height: 2.5em;
    display: inline-block !important;
    margin-bottom: 0 !important;
  }
  #scale{
    width: 5em;
  }
  #list{
    margin: 0 auto;
    padding: 0;
    width: 200px;
  }
  .info_button{
    margin: 20px auto;
    width: 7em;
    display: none;
  }
  .options > label{
    margin: 0.1em 0.4em;
    display: inline-block;
  }
  .credit{
    font-size: 80%;
    color: #333;
    line-height: 1.5;
  }
  .credit a, .credit a:any-link{
    color: #0078e7;
    text-decoration: none;
  }
  .pic{
    margin: 2px;
    padding: 0;
    display: inline-block;
    transform-origin: center;
    border: solid 8px #FFF;
  }
  .marked{
    border-color:#0078e7;
  }
  .warning{
    display: none;
  }
  .warning-highlight{
    color: #dd514c;
    font-weight: bold;
  }
  .r1 {transform: rotate(90deg);}
  .r2 {transform: rotate(180deg);}
  .r3 {transform: rotate(270deg);}
  .r0f {transform: scaleX(-1);}
  .r1f {transform: rotate(90deg) scaleX(-1);}
  .r2f {transform: rotate(180deg) scaleX(-1);}
  .r3f {transform: rotate(270deg) scaleX(-1);}
  @media (min-width: 420px) {
    #list{ width: 400px;}
  }
  @media (min-width: 620px) {
    #list{ width: 600px;}
  }
  @media (min-width: 820px) {
    #list{ width: 800px;}
  }
  @media (min-width: 1020px) {
    #list{ width: 1000px;}
  }
  </style>
</head>

<body>
<div id="main">
<div id="form">
<form class="pure-form">
  <fieldset>
    <!-- Examples come from SAGA Satellites. See https://sagasurvey.org/ -->
    <p><textarea id="input" placeholder="Paste a list of R.A. and Decl."  required>SAGA_SAT    RA  DEC
NGC6181b    247.8399	20.1841
NGC6181c    248.3932	19.9461
NGC6181d    248.0513	19.6957
NGC6181e    247.8755	20.0948
NGC6181f    247.8259	20.2109
NGC6181g    248.1526	19.8095
NGC6181h    248.5809	19.7198
NGC6181i    248.1954	19.8670
NGC6181j    248.2119	19.9001
NGC6181k    248.1636	19.7923
NGC5602b    215.4049	50.3903
NGC5602c    215.4590	50.3884
NGC5602d    214.8035	50.4409
NGC5602e    215.4408	50.5062
NGC5602f    215.5340	50.6674</textarea></p>
    <div class="options">
      <label>
        <select id="layer">
          <option disabled selected value style="display: none;"> --&gt; Choose image source &lt;-- </option>
          <option value="ls-dr10-grz" id="default-layer">Legacy Surveys DR10 (grz)</option>
          <option value="ls-dr10-model-grz">Legacy Surveys DR10 Model (grz)</option>
          <option value="ls-dr10-resid-grz">Legacy Surveys DR10 Residual (grz)</option>
          <option value="ls-dr10">Legacy Surveys DR10</option>
          <option value="ls-dr10-model">Legacy Surveys DR10 Model</option>
          <option value="ls-dr10-resid">Legacy Surveys DR10 Residual</option>
          <option value="ls-dr9">Legacy Surveys DR9</option>
          <option value="ls-dr9-model">Legacy Surveys DR9 Model</option>
          <option value="ls-dr9-resid">Legacy Surveys DR9 Residual</option>
          <option value="unwise-neo7">unWISE NEO7 12um Dust Map</option>
          <option value="unwise-cat-model">unWISE Model</option>
          <option value="sdss">SDSS (reprocessed by Legacy Surveys)</option>
          <option value="des-dr1">Dark Energy Survey (DES) DR1</option>
          <option value="hsc-dr3">Hyper Suprime-Cam (HSC) SSP DR3</option>
          <option value="hsc-dr2">Hyper Suprime-Cam (HSC) SSP DR2</option>
          <option value="galex">GALEX</option>
          <option value="halpha">Halpha Map</option>
          <option value="sfd">SFD Dust Map</option>
          <option value="vlass1.2">VLASS</option>
          <option value="dr17:sdss">SDSS: DR17</option>
          <option value="poss2ukstu_red:dss">DSS: POSS2/UKSTU Red</option>
          <option value="poss2ukstu_blue:dss">DSS: POSS2/UKSTU Blue</option>
          <option value="poss2ukstu_ir:dss">DSS: POSS2/UKSTU IR</option>
        </select>
      </label>
      <label>
        Side length = <input type="number" id="scale" value="0.75" step="any" min="0.01" max="999" required> arcmin
      </label>
      <label>
        <input type="checkbox" id="enable_marking"/> Enable marking
      </label>
      <label>
        <button id="generate_output" class="pure-button" disabled>Record marks</button>
      </label>
    </div>
    <p class="credit">
      Images retrieved from <a href="https://www.legacysurvey.org/acknowledgment/">Legacy Surveys Sky Viewer</a>, <a href="https://skyserver.sdss.org/dr16/en/tools/chart/listinfo.aspx" title="Sloan Digital Sky Surveys">SDSS</a>, and <a href="https://archive.stsci.edu/cgi-bin/dss_form" title="Digitized Sky Survey">DSS</a>.
      Web interface by <a href="https://yymao.github.io">Yao-Yuan Mao</a>.
      <a href="https://github.com/yymao/decals-image-list-tool/issues">Issues?</a><br>
      <i>
        <span class="warning warning-highlight">Maintainance at NERSC may affect the cutout service of the DESI Legacy Imaging Surveys.<br></span>
        <span class="warning">An <a href="https://viewer.legacysurvey.org">alternative Legacy Surveys Viewer</a> is available, but has no cutout service.<br></span>
        <span class="no-warning">No cutout image shows up?</span>
        Try choosing <u>SDSS:DR17</u> or <u>DSS</u> from the dropdown menu.
      </i>
    </p>
  </fieldset>
</form>
</div>
<div id="list"></div>
<div class="info_button" id="loading"><span class="pure-button pure-button-disabled" style="border-radius: 4px;">Loading...</span></div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/cash/8.1.1/cash.min.js" integrity="sha512-X+cPfvYTMQ4sCK62U3QG9rdhziHcvR48TwiEJmlaXOpQH/aSaarxkL+zahylcvcZLDkGujg4o/ORdjSeBsRlMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script>
var nersc_is_down = false;
var _cols, _i_ra, _i_dec, _has_mark, _delimiter, _scale, _size, _layer, _source;

const search_params = (new URL(document.location.href)).searchParams;
const _use_dev = search_params.has("dev") ? "-dev" : "";
const _do_rand_rot = search_params.has("randrot");
var _select_layer = search_params.get("layer");
if (!_select_layer && $("#layer > option[value='" + _select_layer + "']").length == 0) _select_layer = false;

var delay_count = 0;
const delay = function(){
    var delay_time = (delay_count > 20 && _source == "desi") ? 200 : 5;
    delay_count += 1;
    return new Promise(resolve => {setTimeout(resolve, delay_time);});
};

/* When NERSC is down
(function(){
  var t = new Date().getTime();
  var t_out = Date.parse('9 Jul 2021 10:00:00 PDT');
  var t_back = Date.parse('12 Jul 2021 20:00:00 PDT');
  if ((t >= t_out) && (t < t_back)){
    nersc_is_down = true;
    $("span.warning").show();
  }
})();
*/

const _image_urls = {
  "desi": "https://www.legacysurvey.org/viewer" + _use_dev + "/cutout.jpg?ra=${ra}&dec=${dec}&pixscale=${scale}&layer=${layer}&size=180",
  "sdss": "https://skyserver.sdss.org/dr17/SkyServerWS/ImgCutout/getjpeg?ra=${ra}&dec=${dec}&scale=${scale}&width=180&height=180",
  "dss": "https://archive.stsci.edu/cgi-bin/dss_search?v=${layer}&r=${ra}&d=${dec}&e=J2000&h=${size}&w=${size}&f=gif"
};

const _link_urls = {
  "desi": "https://www.legacysurvey.org/viewer" + _use_dev + "?ra=${ra}&dec=${dec}&layer=${layer}&zoom=14",
  "sdss": "https://skyserver.sdss.org/dr17/VisualTools/navi?ra=${ra}&dec=${dec}",
  "desi-alt": "https://viewer.legacysurvey.org/?ra=${ra}&dec=${dec}&layer=${layer}&zoom=14",
  "dss": "https://archive.stsci.edu/cgi-bin/dss_search?v=${layer}&r=${ra}&d=${dec}&e=J2000&h=15&w=15&f=gif"
};

const _img_dom_template = "<img class='pic ${marked} ${rot}' title='${title}' src='${img_url}' width='180' height='180' ${lazy} />";
const _linked_img_template = "<a class='plink' href='${link_url}'>${img_dom}</a>";
const _rot_classes = ["", "r1", "r2", "r3", "r0f", "r1f", "r2f", "r3f"];
const _default_layer = $("#default-layer").attr("value");

const escapeHtml = function(s) {
  return s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
}

const parseHeader = function(line_raw) {
  const line = line_raw.trim();
  var has_header = true;

  _delimiter = /\s+/;
  if (line.search(",") > -1) _delimiter = ",";
  _cols = line.split(_delimiter).map(col => col.trim());

  const _cols_lower = _cols.map(col => col.toLowerCase());
  for (const key of ["ra", "r.a.", "radeg", "ra2000", "right ascension", "r"]) {
    _i_ra = _cols_lower.indexOf(key);
    if (_i_ra > -1) break;
  }
  for (const key of ["dec", "decl", "decl.", "dedeg", "de2000", "declination", "de", "d"]) {
    _i_dec = _cols_lower.indexOf(key);
    if (_i_ra > -1) break;
  }

  if (_i_ra == -1 || _i_dec == -1){  // no header
    if (_cols_lower[_cols.length-1] == "true" || _cols_lower[_cols.length-1] == "false"){
      _has_mark = true;
      _cols.pop();
    }
    if (_cols.length == 2){
      _i_ra = 0;
      _i_dec = 1;
    }
    else if (_cols.length > 2){
      _i_ra = 1;
      _i_dec = 2;
    }
    else{
      _has_mark = false;
      $("#list").html("<p>Error! \nPlease make sure the first line is header, and it contains at least \"ra\" and \"dec\". \nOnly supports space/tab/comma-separated tables.</p>");
      return -1;
    }
    _cols = _cols.fill("");
    has_header = false;
  }
  else{  // has header
    if (_cols_lower[_cols.length-1] == "marked"){
      _has_mark = true;
      _cols.pop();
    }
    else{
      _has_mark = false;
    }
  }
  return has_header;
};

const addImage = function(line) {
  if (!line.replace(/[-=\s]/g, "")) return;
  var items, out, mark;
  items = line.trim().split(_delimiter);
  if (_has_mark) mark = (items.pop().trim().toLowerCase() == "true");
  out = _linked_img_template
       .replace("${img_dom}", _img_dom_template)
       .replace("${link_url}", _link_urls[_source])
       .replace("${img_url}", _image_urls[_source])
       .replace(/\${ra}/g, parseFloat(items[_i_ra]).toString())
       .replace(/\${dec}/g, parseFloat(items[_i_dec]).toString())
       .replace(/\${scale}/g, _scale)
       .replace(/\${size}/g, _size)
       .replace(/\${layer}/g, _layer)
       .replace("${title}", items.map((item, i) => (_cols[i] + " = " + item.trim())).join("\n"))
       .replace("${marked}", mark ? "marked" : "")
       .replace("${lazy}", (_source == "desi") ? "" : "loading='lazy'")
       .replace("${rot}", _do_rand_rot ? _rot_classes[Math.floor(Math.random()*_rot_classes.length)] : "");
  $(out).appendTo(document.getElementById("list"));
};

const run = async function() {
  window.stop();
  record_output();
  delay_count = 1;

  const current_layer = _layer;
  const current_source = _source;
  const current_size = _size;
  const current_scale = _scale;

  const layer_source = $("#layer").val().split(":");
  _layer = layer_source[0] || _default_layer;
  _source = layer_source[1] || "desi";
  _size = parseFloat($("#scale").val()).toFixed(7).replace(/0+$/, '');
  _scale = (parseFloat($("#scale").val()) / 3).toFixed(7).replace(/0+$/, '');
  if (!layer_source[0]) $("#default-layer").prop("selected", true);

  if ((current_source != _source) || (!current_layer) || (!current_scale) || (!current_size) || $(".pic").length == 0){
    var lines = escapeHtml($("#input").val()).trim().split(/\n/);
    const has_header = parseHeader(lines[0]);
    if (has_header == -1) return;
    if (has_header) lines.shift();

    $("#list").empty();
    $("#loading").show();
    for (const line of lines) {
      addImage(line);
      await delay();
    }
    update_click_events();
    $("#loading").hide();
    return;
  }

  if (current_layer == _layer && current_size == _size && current_scale == _scale) return;
  for (const elem of $(".pic").get()){
    const url = $(elem).attr("src")
                .replace("="+current_layer+"&", "="+_layer+"&")
                .replace("scale="+current_scale+"&", "scale="+_scale+"&")
                .replace("h="+current_size+"&w="+current_size, "h="+_size+"&w="+_size);
    $(elem).attr("src", url);
    await delay();
  }

  if (current_layer == _layer) return;
  $(".plink").each((i, elem) => {
    const url = $(elem).attr("href").replace("="+current_layer+"&", "="+_layer+"&");
    $(elem).attr("href", url);
  });
};

const update_click_events = function(){
  if ($("#enable_marking").prop("checked")){
    $(".plink").on("click", (event) => { event.preventDefault(); });
    $(".pic").on("click", (event) => {
      if (event.ctrlKey) { window.open( $(event.target).parent().attr("href") ); }
      else {
        $(event.target).toggleClass("marked");
        $("#generate_output").prop("disabled", false);
     }
    });
    $("#input").prop("readonly", true);
    $("#generate_output").addClass("pure-button-primary");
  }
  else{
    record_output();
    $(".plink, .pic").off("click");
    $("#input").prop("readonly", false);
    $("#generate_output").removeClass("pure-button-primary");
  }
};

const record_output = function(){
  if ($("#generate_output").prop("disabled") || $(".pic").length == 0) return;
  var out = _cols.join("\t") + "\tmarked\n";
  if (out.trim() == "marked") out = "";  // no header
  out += $(".pic").map((i, elem) => (
    $(elem).attr("title").split(/\n/).map(item => item.substring(item.indexOf(" = ") + 3)).join("\t")
    + "\t" + $(elem).hasClass("marked")
  )).get().join("\n");
  $("#input").val(out);
  $("#generate_output").prop("disabled", true);
}

$("form").on("submit", (event) => {event.preventDefault();});
$("#generate_output").on("click", record_output);
$("#layer").on("input", run);
$("#scale").on("input", run);
$("#input").on("input", () => { _source = ""; run(); });
$("#enable_marking").on("input", () => {
  if ($(".pic").length == 0) { run(); }
  else { update_click_events() };
});
$(window).on("beforeunload", () => {
  if (!$("#generate_output").prop("disabled")){
    return "Are you sure you want to close this page? You cannot recover the marks you made!";
  }
});

if (_select_layer){ $("#layer > option[value='" + _select_layer + "']").prop("selected", true); }
if (search_params.get("input")) { $("#input").val(search_params.get("input")); }

if (_select_layer || search_params.get("input")){ run(true); }
else { document.getElementById("layer").focus(); }

</script>
</body>
</html>