ncbo/bioportal_web_ui

function numberWithCommas(x) {
  return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}

function jumpToValueOntology() {
  var ontology = jQuery("#find_ontology")[0].value;
  var ontology_id = jQuery("#find_ontology_id").val();

  if (ontology_id == null || ontology_id == "") {
    // didnt pick an ont
    alert("The ontology does not exist. You must pick an ontology from the list.")

    return false;
  }

  if (!!ontology_id) {
    var sValue = jQuery("#find_ontology_id").val();
    if (sValue == null || sValue == "") {
      sValue = data;
    }
    document.location="/ontologies/"+sValue;
    jQuery.blockUI({ message: '<h1><img src="<%= asset_path("jquery.simple.tree/spinner.gif") %>" /> Loading Ontology...</h1>' });
    return;
  }
}

function formatResultOntologySearch(value, data) {
  jQuery("#find_ontology_id").val("");
  var specials = new RegExp("[.*+?|()\\[\\]{}\\\\]", "g"); // .*+?|()[]{}\
  var keywords = jQuery("#find_ontology").val().replace(specials, "\\$&").split(' ').join('|');
  var regex = new RegExp( '(' + keywords + ')', 'gi' );
  return value.replace(regex, "<b><span style='color:#006600;'>$1</span></b>");
}

// Sets a hidden form value that records the virtual id when a concept is chosen in the jump to
// This is a workaround because the default autocomplete search method cannot distinguish between two
// ontologies that have the same preferred name but different ids.
function selectFindOntology(value, data){
  jQuery("#find_ontology_id").val(value.data[0]);
  jQuery("#find_ontology").focus();
  jumpToValueOntology();
}

var ontologies_array = [];
var findOntologyInput = document.getElementById("find_ontology");
if (findOntologyInput) {
  ontologies_array = JSON.parse(findOntologyInput.dataset.ontologynames);
}

jQuery(document).ready(function() {
  jQuery("#find_ontology").autocomplete({
    selectFirst: true,
    data: ontologies_array,
    minChars: 1,
    matchSubset: 1,
    maxItemsToShow: 20,
    delay: 1,
    showResult: formatResultOntologySearch,
    onItemSelect: selectFindOntology
  });

  var visitsChartDiv = document.getElementById("ontology-visits-chart");

  if (visitsChartDiv) {
    var ontNamesObject = JSON.parse(visitsChartDiv.dataset.ontnames);
    var ontNames = Object.keys(ontNamesObject);
    var ontNumbers = JSON.parse(visitsChartDiv.dataset.ontnumbers);
    var onts = JSON.parse(visitsChartDiv.dataset.ontnames);
    var ctx = document.getElementById("myChart");

    var myChart = new Chart(ctx, {
      type: 'horizontalBar',
      data: {
        labels: ontNames,
        datasets: [{
          label: "Ontology Visits",
          data: ontNumbers,
          backgroundColor: "rgba(151,187,205,0.2)",
          borderColor: "rgba(151,187,205,1)",
          borderWidth: 1
        }]
      },
      options: {
        responsive: true,
        legend: {
          display: false
        },
        scales: {
          xAxes: [{
            ticks: {
              beginAtZero: true,
              stepSize: 5000,
              // Return an empty string to draw the tick line but hide the tick label
              // Return `null` or `undefined` to hide the tick line entirely
              userCallback: function(value, index, values) {
                return numberWithCommas(value);
              }
            }
          }],
          yAxes: [{
            ticks: {}
          }]
        },
        tooltips: {
          enabled: true,
          callbacks: {
            title: function(tooltipItems, data) {
              lbl = onts[tooltipItems[0].yLabel];

              if (lbl.length > 45) {
                lbl = lbl.substring(0, 37) + "...";
              }
              return lbl + " (" + tooltipItems[0].yLabel + ")";
            },
            label: function(tooltipItem, data) {
              return data.datasets[0].label + ": " + numberWithCommas(tooltipItem.xLabel);
            }
          }
        },
        hover: {
          onHover: function(e) {
            jQuery("#myChart").css("cursor", e[0] ? "pointer" : "default");
          }
        }
      }
    });

    ctx.onclick = function(evt) {
      var activePoints = myChart.getElementsAtEvent(evt);

      if (activePoints.length > 0) {
        // get the internal index of slice in pie chart
        var clickedElementIndex = activePoints[0]["_index"];
        // get specific label by index
        var label = myChart.data.labels[clickedElementIndex];
        // get value by index
        // var value = myChart.data.datasets[0].data[clickedElementIndex];
        window.location.href = "/ontologies/" + label;
      }
    }
  }
});