path: root/bh20simplewebuploader/static/main.js

/*
 * Menu and navigation
 */

/* Small helpers */
function cell(text) {
    html = ""
    html += '  <div class="rTableCell">';
    html += text;
    html += '  </div>';
    return html
}

/* Convert a list of table items to an HTML DIV table */
function toDIVTable(rows) {
    if (rows.length == 0)
        html = "no results";
    else {
        html = '<div class="rTable">';
        rows.forEach(row => {
            id = row['id'];
            info = row['info'];
            html += '<div class="rTableRow">';
            html += cell('<a href="'+info+'">'+id+'</a>');
            html += cell('<a href="'+row['collection']+'">Collection</a>');
            html += cell('<a href="'+row['fasta']+'">FASTA</a>');
            html += cell('<a href="/api/ebi/sample-'+id+'.xml">EBI/ENA export XML</a>');
            html += '</div>';
        });
        html += '</div>';
    }
    console.log(html);
    document.getElementById("table").innerHTML = html;
}

/* Toggle between adding and removing the "responsive" class to topnav
 * when the user clicks on the icon */
function myFunction() {
    var x = document.getElementById("myTopnav");
    if (x.className === "topnav") {
        x.className += " responsive";
    } else {
        x.className = "topnav";
    }
}

function fetchAPI(apiEndPoint,injectHTML=NULL) {
    fetch(scriptRoot + apiEndPoint)
        .then(response => {
            console.log("* response",response);
            return response.json();
        })
        .then(data => {
            console.log("* data",data);
            if (injectHTML)
                injectHTML(data);
        });
}

// Copy from function above but now output HTML table instead of plain json
function fetchHTMLTable(apiEndPoint) {
    fetch(scriptRoot + apiEndPoint)
        .then(response => {
            return response.json();
        })
        .then(data => {
            console.log(data)
            htmlString="<table>"
            for (var i=0; i<data.length;i++) {
                let url = data[i]["key"];
                continents = ["Q538", "Q48", "Q49", "Q18", "Q15", "Q27611" ];
                node = url.split("/").pop();
                console.log(continents.includes(node));
                if (url.includes("wikidata") && !continents.includes(node)) {
                    url = "http://covid19.genenetwork.org/location?label="+url ;
                }
                let label = data[i]["label"];
                htmlString=htmlString+"<tr><td><a href=\""+url+"\">"+label+"</a></td><td>"+data[i]["count"]+"<td></tr>"
            }
            htmlString=htmlString+"</table>"

            document.getElementById("table").innerHTML = htmlString
        });
}



// changing access for Demo page
function demofetchHTMLTable(apiEndPoint) {
    fetch(scriptRoot + apiEndPoint)
        .then(response => {
            return response.json();
        })
        .then(data => {
            htmlString="<h3>Description</h3><p>"+data[0][0]["description"]+"</p>"
            prefix=data[0][1]["prefix"].replaceAll("<","&lt;")
            htmlString+="<h4>Namespace</h4><pre>"+prefix+"</pre>"//prefix to construct correct query @data[0][1]["prefix"]
            htmlString+="<h3>SPARQL query</h3><pre>"+data[0][2]["query"]+"</pre>"
            htmlString+="<h3>SPARQL results table</h3><table>"

            keys=Object.keys(data[1][0])
           // Add keys as table headers
            htmlString+="<tr>"
            for (var j=0; j<keys.length;j++){
                    htmlString+="<td style='font-weight: bold;'>"+keys[j]+"</bold></td>"
                }

            //Go through the results set given the keys and fill the tail of the table
            for (var i=0; i<data[1].length;i++) {
                htmlString+="</tr><tr>"
                for (var j=0; j<keys.length;j++){
                    htmlString+="<td>"+data[1][i][keys[j]]+"</td>"
                }
                htmlString+="</tr>"
            }
            htmlString=htmlString+"</table>"

            //Something like this would be nice, hm
            //htmlString+="Execute this query <a href='http://sparql.genenetwork.org/sparql?query='"+encodeURIComponent(encodeURIComponent(data[0][1]["prefix"]+data[0][2]["query"]))+"'>here</a>"

            document.getElementById("playground").innerHTML = htmlString
        });
}




/* Fetch record info using a 'global search'. Returns for example

[
  {
    "id": "MT326090.1",
    "seq": "http://collections.lugli.arvadosapi.com/c=10eaef75e0b875f81aa1f411c75370cf+126/sequence.fasta"
  },
  {
    "id": "MT326090.1",
    "seq": "http://collections.lugli.arvadosapi.com/c=5a4c815f3e076ad7760a91864c39dd07+126/sequence.fasta"
  }
]

 */
let searchGlobal = (toHTML) => {
    let m =  document.getElementById('search-input').value;
    fetchAPI(scriptRoot + "/api/search?s=" + encodeURIComponent(m), toHTML);
}

// Same as above, but generates div table
let searchGlobaltoDIVTable = () => {
    searchGlobal(toDIVTable);
}

let searchSeq = () => {
  let m =  document.getElementById('search-input').value;
  fetchAPI(scriptRoot + "/api/getDetailsForSeq?seq=" + encodeURIComponent(m));
}

// Get count from Arvados
let fetchCount = () => {
  fetchAPI("/api/getCount");
}

// Get count from Virtuoso
let fetchCountDB = () => {
  fetchAPI("/api/getCountDB");
}

//////  old API functions, some might no be used //
let fetchSEQCountByTech = () => {
  fetchHTMLTable("/api/getSEQCountbytech");
}

let fetchAllaccessions = () => {
  fetchHTMLTable("/api/getAllaccessions");
};

let fetchMap = () => {
    fetchAPI("/api/getCountByGPS");
    updateMapMarkers();
};

let fetchSEQByLocation = () => {
  console.log("Missing - set parameter for request, retrieve data")
};

let fetchSEQCountbyContinent = () => {
  fetchHTMLTable("/api/getSEQCountbyContinent");
}
/////////////////////////////////// End "old" function


////****** SPARQL playground functions ***************////
let demoFetchSEQCountBySpecimen = (toHTML) => {
  //fetchHTMLTable("/api/getSEQCountbySpecimenSource");
  demofetchHTMLTable("/api/demoGetSEQCountbySpecimenSource")
}

let demoFetchSEQCountByLocation = () => {
  //fetchHTMLTable("/api/getSEQCountbyLocation");
  demofetchHTMLTable("/api/demoGetSEQCountbyLocation")
}

//Get authors and there country/contitent where they come from
let demoGetAuthors = () => {
    demofetchHTMLTable("/api/demoGetAuthors")
}

// Fetch all institutes/originating labs and their associeted publications
let demoFetchInstitutesPublications = () => {
    demofetchHTMLTable("/api/demoInstitutesPublications")
}

// Fetch sequence technology used by continent
let demoGetSEQCountbytechContinent = () => {
    demofetchHTMLTable("/api/demoGetSEQCountbytechContinent")
}

let demoGetSEQCountbytech = () => {
    demofetchHTMLTable("/api/demoGetSEQCountbytech")
}

let demoGetSequencePerDate = () => {
    demofetchHTMLTable('/api/demoGetSequencePerDate')
}

let demoGetLocationGps = () => {
    demofetchHTMLTable("/api/demoGetLocationGps")
}

let demoGetNYsamples = () => {
    demofetchHTMLTable("/api/demoGetNYsamples")
}

let demoGetSouthAmericaSeq = () => {
    demofetchHTMLTable("/api/demoGetSouthAmericaSeq")
}

let demoGetSeqByAgeGender = () => {
    demofetchHTMLTable("/api/demoGetSeqByAgeGender")
}

let demoGetSeqIllumina = () => {
    demofetchHTMLTable("/api/demoGetSeqIllumina")
}
let demoGetSeqWithStrain = () => {
    demofetchHTMLTable("/api/demoGetSeqWithStrain")
}

let demoGetContinentSpecimentSeqCount = () => {
    demofetchHTMLTable("/api/demoGetContinentSpecimentSeqCount")
}

////****** SPARQL playground functions ***************////


/*
 * Make sure that only one of the manual metadata entry and metadata upload
 * form components is *actually* a child of the form element in the DOM.
 *
 * Because both make use of the "required" attribute, we can't get away with
 * just hiding the one we don't want the user to fill in. The hidden part will
 * still have possibly empty required fields and (some) browsers will
 * blocksubmission because of it. Moreover, the data (including file uploads)
 * from the hidden elements will still be sent to the server, which the user
 * may not expect.
 */


function setUploadMode() {
  // Make the upload form the one in use.
  uploadFormSpot.appendChild(uploadForm)
  // Remove the upload form from the DOM so its required-ness does not block submission.
  fillFormSpot.removeChild(fillForm)
}

function setFillMode() {
  // Make the fillable form the one in use
  uploadFormSpot.removeChild(uploadForm)
  // Remove the fillable form from the DOM so its required-ness does not block submission.
  fillFormSpot.appendChild(fillForm)
}

function setMode() {
  // Pick mode based on radio
  if (document.getElementById('metadata_upload').checked) {
    setUploadMode()
 } else {
    setFillMode()
 }
}

/*
 * Machinery for variable-length lists of input items.
 */

// Start in mode appropriate to selected form item.
// It is important that we run this code when the page starts! The browser may
// have set the radio button to whatever the state was on last page load,
// instead of the default state, without raising an event, and we have to
// handle that.

/**
 * Add another form field to the group this button is part of.
 */
function addField(e) {
  // Find our parent field-group div
  let fieldGroup = this.parentElement

  // Get its keypath
  let keypath = fieldGroup.dataset.keypath

  // Find its last field child
  let existingFields = fieldGroup.getElementsByClassName('field')
  let templateField = existingFields[existingFields.length - 1]

  // Get its number
  let fieldNumber = templateField.dataset.number

  // Duplicate it
  let newField = templateField.cloneNode(true)

  // Increment the number and use the keypath and number to set IDs and cross
  // references.
  // TODO: Heavily dependent on the form field HTML. Maybe we want custom
  // elements for the labeled controls that know how to be list items?
  fieldNumber++
  newField.dataset.number = fieldNumber
  let newID = keypath + '[' + fieldNumber + ']'
  let newControl = newField.getElementsByClassName('control')[0]
  newControl.id = newID
  newControl.setAttribute('name', newID)
  let newLabel = newField.getElementsByTagName('label')[0]
  newLabel.setAttribute('for', newID)

  // Find the minus button
  let minusButton = fieldGroup.getElementsByClassName('remove-field')[0]

  // Put new field as a child before the minus button
  fieldGroup.insertBefore(newField, minusButton)

  // Enable the minus button
  minusButton.classList.remove('invisible')
}

/**
 * Remove the last form field from the group button is part of.
 */
function removeField(e) {
  // Find our parent field-group div
  let fieldGroup = this.parentElement

  // Find its field children
  let existingFields = fieldGroup.getElementsByClassName('field')

  if (existingFields.length > 1) {
    // There is a last field we can safely remove.
    let lastField = existingFields[existingFields.length - 1]
    fieldGroup.removeChild(lastField)
  }

  if (existingFields.length <= 1) {
    // Collection auto-updates. Now there's only one element. Don't let the
    // user remove it. If they don't want it, they can leave it empty.
    this.classList.add('invisible')
  }
}


// Change the submit button after hitting
function on_submit_button() {
    var f = document.getElementsByTagName('form')[0];
    if(f.checkValidity()) {
        var elem = document.getElementById("submit");
        elem.value = "Submitting...";
        elem.disabled = true;
        f.submit();
    } else {
        alert(document.getElementById('example').validationMessage);
        return false;
    }
}