ncbo/bioportal_web_ui

View on GitHub
app/assets/javascripts/bp_create_mappings.js.erb

Summary

Maintainability
Test Coverage
var observer = new MutationObserver(function(mutations) {
  mutations.forEach(function(mutation) {
    if (mutation.addedNodes.length > 0) {
      var elem = document.querySelector("#map_to_picker");
      if (elem != null) {
        resetAutocompleter(elem.options[elem.selectedIndex].value);
      } 
    } 
  });    
});

jQuery(document).ready(function() {
  var targetNode = document.querySelector(".createNewMappingModal, .modal-body");
  if (targetNode != null) {
    observer.observe(targetNode, { childList: true });
  }

  jQuery("body").on("change", "#map_to_picker", function(e) {
    resetAutocompleter(jQuery(this).val());
    jQuery("#map_to_concept_details_table").html("");
  });

  jQuery("input.search_autocomplete").live("autocomplete_selected", function(){
    var input = jQuery(this);
    if (input.val() != input.attr("title") && input.val() !== "") {
      getClassDetails(this);
    }
  });

  jQuery("input.search_autocomplete").blur(function(){
    var input = jQuery(this);
    setTimeout(function() {
      if (input.val() == "" || input.val() == input.attr("title")) {
        jQuery("#" + input.attr("id") + "_concept_details").hide();
      }
    }, 1);
  });

  jQuery("input.search_autocomplete").each(function(){
    var input = jQuery(this);
    if (input.val() != input.attr("title") && input.val() != "") {
      getClassDetails(this);
    }
  });

  // TODO: Can we get rid of calls to deprecated "live" method?

  // Reset mapping UI when tree changes or loaded from ajax
  jQuery(document).live("tree_changed", resetMappingUIWithFacebox);
  jQuery(document).live("classes_tab_visible", resetMappingUI);

  // TODO: Do we still need facebox stuff?

  // Details/visualize link to show details pane and visualize flexviz
  jQuery.facebox.settings.closeImage = "<%= asset_path("facebox/closelabel.png") %>";
  jQuery.facebox.settings.loadingImage = "<%= asset_path("facebox/loading.gif") %>";

  jQuery('#mappings_content a[rel*=facebox]').facebox();

  jQuery("#create_mapping_button").live("click", bp_createMapping.create);

  /*
   * Customize the title of the modal dialog for creating new mappings based 
   * on which class is selected in the class tree.
   */
  $('#createNewMappingModal').on('shown.bs.modal', function(e) {
    var conceptLabel = jQuery("#new_mapping_btn").data("concept-label");
    jQuery("h4#createNewMappingLabel").text("Create new mapping for: " + conceptLabel);
  })

  $('#createNewMappingModal').on('hidden.bs.modal', function(e) {
    jQuery("#map_to_concept_details").html("");
    jQuery("#create_mapping_success_messages").html("");
  })
});

// Also in bp_mappings.js
function updateMappingDeletePermissions() {
  var mapping_permission_checkbox = jQuery("#delete_mappings_permission");
  if (mapping_permission_checkbox.length === 0){
    //console.error("Failed to select #delete_mappings_permission");
    jQuery("#delete_mappings_button").hide();
    jQuery(".delete_mappings_column").hide();
    jQuery("input[name='delete_mapping_checkbox']").prop('disabled', true);
  } else {
    // Ensure the permission checkbox is hidden.
    mapping_permission_checkbox.hide();
    if (mapping_permission_checkbox.is(':checked')) {
      jQuery("#delete_mappings_button").show();
      jQuery(".delete_mappings_column").show();
      jQuery("input[name='delete_mapping_checkbox']").prop('disabled', false);
    } else {
      jQuery("#delete_mappings_button").hide();
      jQuery(".delete_mappings_column").hide();
      jQuery("input[name='delete_mapping_checkbox']").prop('disabled', true);
    }
  }
  jQuery("input[name='delete_mapping_checkbox']").prop('checked', false);
}

function getClassDetails(input) {
  var current_ont_id = jQuery("#map_to_bioportal_ontology_id").val();
  var current_concept_id = jQuery("#map_to_bioportal_full_id").val();
  jQuery("#map_to_concept_details_table").html('<%= image_tag("spinners/spinner_000000_16px.gif", style: "padding: 5px;") %>');
  jQuery("#map_to_concept_details_table").load("/ajax/class_details?ontology=" + encodeURIComponent(current_ont_id) + "&styled=false&conceptid=" + encodeURIComponent(current_concept_id));
}

function resetAutocompleter(ontologyId) {
  var input = jQuery("#map_to");
  input[0].autocompleter.flushCache();
  input[0].autocompleter.getExtraParams()["id"] = ontologyId;
  input.val("");
}

function resetMappingUIWithFacebox() {
  jQuery('#mappings_content a[rel*=facebox]').facebox();
  resetMappingUI();
}

function resetMappingUI() {
  // Set map_from to the new class from the tree
  jQuery("#map_from_bioportal_full_id").val(jQuery("#sd_content a.active").attr("id"));

  jQuery("#map_to_concept_details").html("");
  jQuery("#create_mapping_success_messages").html("");
  jQuery("a.link_button, input.link_button").button();
  updateMappingDeletePermissions();
}

var bp_createMapping = {
  create: function() {
    bp_createMapping.reset();
    jQuery("#create_mapping_spinner").show();
    var errored = bp_createMapping.validate();

    if (errored) {
      jQuery("#create_mapping_spinner").hide();
      return false;
    }

    var ontology_from = jQuery("#map_from_bioportal_ontology_id");
    var ontology_to = jQuery("#map_to_bioportal_ontology_id");
    var concept_from_id = jQuery("#map_from_bioportal_full_id");
    var concept_to_id = jQuery("#map_to_bioportal_full_id");
    var mapping_comment = jQuery("#mapping_comment");
    var mapping_relation = jQuery("#mapping_relation");
    var mapping_bidirectional = jQuery("#mapping_bidirectional").is(":checked");

    var params = {
      map_from_bioportal_ontology_id: ontology_from.val(),
      map_to_bioportal_ontology_id: ontology_to.val(),
      map_from_bioportal_full_id: concept_from_id.val(),
      map_to_bioportal_full_id: concept_to_id.val(),
      mapping_comment: mapping_comment.val(),
      mapping_relation: mapping_relation.val(),
      mapping_bidirectional: mapping_bidirectional
    };

    jQuery.ajax({
        url: "/mappings",
        type: "POST",
        data: params,
        success: bp_createMapping.success,
        error: bp_createMapping.error
    });
  },

  success: function(data) {
    var ontology_id = jQuery("#map_from_bioportal_ontology_id").val();
    var source_class_id = jQuery("#map_from_bioportal_full_id").val();

    jQuery("#create_mapping_spinner").hide();
    jQuery("#create_mapping_success_messages").prepend(jQuery("<div/>").addClass("success_message").html(
        "Mapping from <b>" + jQuery("#new_mapping_btn").data("concept-label") + "</b> to <b>" + jQuery("#map_to").val() + "</b> was created"
    ));

    // If we have a concept mapping table, update it with new mappings
    if (document.getElementById("concept_mappings_table") != null) {
      var url = "/ajax/mappings/get_concept_table?ontologyid=" + ontology_id + "&conceptid=" + encodeURIComponent(source_class_id);
      jQuery("#concept_mappings_table").load(url, function(){
        jQuery("#mapping_count").html(jQuery("#mapping_details tbody tr:visible").size());
      });
    }

    jQuery.bioportal.ont_pages["mappings"].retrieve_and_publish();
    updateMappingDeletePermissions();
  },

  error: function() {
    jQuery("#create_mapping_spinner").hide();
    jQuery("#create_mapping_error").html("There was a problem creating the mapping, please try again");
  },

  validate: function() {
    var concept_to_input = jQuery("#map_to");
    var error = jQuery("#create_mapping_error");
    var errors = ["<b>Problem creating mapping:</b>"];
    var errored = false;

    if (concept_to_input.val() == "" || concept_to_input.val() == concept_to_input.attr("title")) {
      errors.push("Please select a target class");
      errored = true;
    }

    if (errors.length > 1)
      jQuery("#create_mapping_error").html(errors.join("<br/>"));

    return errored;
  },

  reset: function() {
    jQuery("#create_mapping_error").html("");
  }
}