The ontology_annotator.cgi uses a lot of javascript, most of it from the YUI javascript modules, but all the ontology annotator specific code comes from this file.
The ontology_annotator.js is loaded from the ontology_annotator.cgi table frame, and while it could be moved to a different frame, the calls to get variables from html elements would need to be edited.
Some variables are static and used at various places. myDataTable is a YUI ScrollingDataTable object used in various places.
@param {Object} myDataTable is the YUI ScrollingDataTable object used to display data in ontology_annotator.cgi table frame. Constructed by calling initializeTable(myColumnDefs) creating it with myDataTable = new YAHOO.widget.ScrollingDataTable("myContainer", myColumnDefs, myDataSource, { width:"99.5%", height:"100%", draggableColumns:true});
@param {Array} myFields is an array listing all the ontology annotator fields, gotten from all html input elements with class 'fields'. Initialized by calling populateMyFields() .
@param {Object} fieldsData is a hash mapping all the ontology annotator fields and options to their values, gotten from all html hidden input elements with id 'data_<field>'. Initialized by calling populateMyFields() .
@param {String} datatype is the datatype loaded into the ontology_annotator.cgi , gotten from the editor frame html hidden input element with id 'datatype'. Initialized from the window load listener.
@param {String} curatorTwo is the id of the curator who loaded into the ontology_annotator.cgi , gotten from the editor frame html hidden input element with id 'curatorTwo'. Initialized from the window load listener. curatorTwo is the id of the curator, as opposed to the human name.
@param {String} cgiUrl is the ontology_annotator.cgi , used for constructing all the AJAX calls.
@param {String} loadingGifUrl is the path to the 'loading' image used when there's a postgres query to load data into the dataTable, and in the YUI wait Panel.
Event Window Load
When the window loads an anonymous function is called setting values to global variables and listeners to actions.
Call populateMyFields() to get list of fields from the editor frame into the array myFields .
Get datatype and curatorTwo from editor frame html hidden input elements with ids 'datatype' and 'curatorTwo'.
For each field in myFields:
- get editor frame element 'button_<field>' and add 'click' listener to assignQueryButtonListenerAjax to query postgres for the corresponding input to load data.
- get editor frame element 'input_<field>' and add 'blur' listener to editorInputBlurListener to update postgres tables and dataTable for the corresponding input ; skipping fields of type 'bigtext' which are handled later.
- get editor frame element 'label_<field>' and add 'click' listener to assignEditorLabelTdListener to toggle corresponding dataTable column hide / show.
- get tab from fieldsData[<field>]["tab"] and add to tabs hash.
- for 'ontology' fieldsData[<field>]["type"] get editor frame element 'input_<field>' and add 'click' listener to asyncTermInfo(field, this.value) to change the term info in the obo frame. input fields add data to postgres, datatable, and corresponding select (if appropriate) when blurred.
- for 'multiontology' and 'multidropdown' fieldsData[<field>]["type"] get editor frame element 'button_remove_<field>' and add 'click' listener to removeSelectFieldEntriesListener to remove values from field's select html element and update postgres table ; get editor frame element 'select_<field>' and add 'change' listener to load the value into the input field and for 'multiontology' call asyncTermInfo(field, inputValue) to change the term info in the obo frame. multivalue fields load select element into input when changed, load term info into obo frame ; have a remove button to remove values.
- for 'toggle' and 'toggletext' fieldsData[<field>]["type"] get editor frame element 'toggle_<field>' and add 'click' listener to toggle the value of the field on or off ; 'on' sets the background color 'red' and calls editorFieldBlur(field, fieldsData[field]["label"]) setting the postgres value to be the label ; 'off' sets the background color 'white' and calls editorFieldBlur(field, "") setting the postgres value to be deleted. toggle fields store the label in postgres and show red when on.
- for 'bigtext' fieldsData[<field>]["type"] get editor frame element 'input_<field>' and add 'focus' listener to hide the element, show the corresponding 'textarea_bigtext_<field>', place the 'input_<field>' value into the 'textarea_bigtext_<field>' value, and focus on the 'textarea_bigtext_<field>' element ; get editor frame element 'textarea_bigtext_<field>' and add 'blur' listener to hide the element, show the corresponding 'input_<field>' element, place the 'textarea_bigtext_<field>' value into the 'input_<field>' value, and for all fields except for those with fieldsData[<field>]["noteditable"] call editorFieldBlur(field, top.frames['editor'].document.getElementById("input_" + field).value) to update dataTable and postgres table. bigtext input fields switch to textareas when focused and back to input fields when blurred.
For each tab in tabs hash, get editor frame element with id '<tab>' and add 'click' listener to call showTab(this.id) to only show html elements that have class '<tab>'.
If the datatype has a numeric tab (as opposed to all fields having value 'all'), by default call showTab("tab" + firstTab); to show the html elements in the lowest tab.
Get editor frame element 'resetPage' and add 'click' listener to call resetButtonListener to reload the obo frame, clear the dataTable data, and all editor values.
Get controls frame element 'checkData' and add 'click' listener to call checkDataButtonListener to reload to check dataTable data against datatype constraints.
Get controls frame element 'deleteRow' and add 'click' listener to call deleteRowButtonListener to delete selected dataTable rows from dataTable and postgres tables.
Get controls frame element 'duplicateRow' and add 'click' listener to call duplicateRowButtonListener to duplicate selected dataTable rows into the dataTable and postgres tables.
Get controls frame element 'newRow' and add 'click' listener to call newRowButtonListener to create a new row in the dataTable and new datatype object in the postgres tables.
Get controls frame element 'filtersAmount' and add 'change' listener to call updateFiltersAmountListener to show that amount of filter pairs.
For each filter pair showing, get control frame element with id 'filterValue<count>' and add 'keyup' listener to call filterDataKeyUpListener to hide dataTable rows that don't have data matching the filter pairs.
Get column definitions by looking at each field, setting the key to <field>, sortable to true, resizeable to true, and getting property values from fieldsData[<field>][<property>] . columns are entered in order of fields unless the 'columnOrder' property is set.
Get <myColumnDefs>, an array of hashes, by looping over all fields in <myFields>, adding for each field a (hash) object with pairs 'key' to field, 'sortable' to true, 'resizable' to true, and each pair from <fieldsData[field]>. If there is an order property set it at that index in the array, otherwise enter them in order.
Initialize dataTable by calling initializeTable(myColumnDefs) .
Initialize the amount of filters by calling updateFiltersAmount() .
Initialize autocomplete listeners for fields of type 'dropdown', 'multidropdown', 'ontology', or 'multiontology'.
Initialize waitPanel a YUI Panel to show the loadingGif when data is loading to the dataTable from a postgresQueryField(field, userValue, amountRowsToHighlight) call. Hide the panel by default and show while waiting for AJAX response.
populateMyFields()
Populates the global array myFields and global object hash fieldsData .
myFields has all the ontology annotator fields, gotten from the html input element fields of with class 'fields', in the order they show in the table frame.
fieldsData has mappings for each field to the property values in the format fieldsData[<field>][<property>] = <value> , gotten from the html elements 'data_<field>' and splitting on comma for pairs then splitting the pairs on <space><colon><space>.
The editor frame contains fields for data input, field query buttons to query postgres, a reset button to reset the OA, tabs to pick which fields to show, field labels to toggle dataTable columns showing or hiding.
All fields have a query button, clicking the query button makes an AJAX call for postgres data matching the field's input.
assignQueryButtonListenerAjax(e)
Assigns a listener action for when a field's query button is clicked.
Get the field from the event trigger id.
toggle-type fields get the userValue from the backgroundColor, queryonly fields set a dummy userValue 'queryonly', other fields get the userValue from the input field.
If there is a userValue call postgresQueryField(field, userValue, 0) to query postgres to populate dataTable.
postgresQueryField(field, userValue, amountRowsToHighlight)
Queries postgres for a field and userValue with an AJAX query, populates the dataTable at the top and highlights <amountRowsToHighlight> from the top.
@param {String} field is the field / postgres table to query postgres.
@param {String} userValue is the value the curator wants to query postgres for.
@param {Integer} amountRowsToHighlight is the amount of rows from the top to highlight after returning data to the dataTable.
Clear all dataTable selections.
Clear all input fields and values from the editor frame by calling clearEditorFields(field) .
Define callbacks action for AJAX return.
Get all dataTable pgids into a comma-separated string by calling getAllDataTableIds() .
Get maximum amount of records to retrieve from postgres to populate the dataTable from the editor frame html hidden input element with id 'maxPerQuery'.
Construct a URL for AJAX data query to the CGI with action 'jsonFieldQuery', passing the <userValue>, <curatorTwo>, <maxPerQuery>, and <allDataTableIds>.
Set the obo frame to have a message on what is being queried.
Create an html img element with id 'loadingImg' and image <loadingGifUrl>, appending it to the control frame html element with id 'loadingImage'.
Show the table frame html element with id 'wait_c' because waitPanel.show() doesn't work for some reason.
Make a YAHOO.util.Connect.asyncRequest with method GET to the constructed URL with callbacks actions.
callbacks from postgresQueryField
Get back AJAX response of return message and jsonData. Populate dataTable with jsonData and give appropriate messages.
On successful return do the following.
Parse <o.responseText> with YAHOO.lang.JSON.parse into a <jsonData> array.
Shift the first element from the array, it is the <returnedMessage>.
Add remaining jsonData to the dataTable.
Add <returnedMessage> to the obo frame.
If there is no <jsonData> give user a warning of no matches result.
Autoset dataTable columns's widths with YUI dataTable method validateColumnWidths().
Get html div elements from dataTable that have been newly added by the query.
Add or remove the red_square.jpg to those html div elements depending on whether there's too much data in the cell or not (respectively) by calling colorMoreCells(divArray) .
Since there's an AJAX return, remove the loading image and hide the 'wait_c' html element.
If there was data returned, unselect all rows ; if there are rows to highlight, highlight them ; load the data from the first row to the editor frame by calling rowSelectLoadToEditor(recordData) .
Clear all inputs and values for all fields in the editor frame, keeping the <fieldToKeep>
clearEditorFields(fieldToKeep)
Clear all inputs and values for all fields in the editor frame, keeping the <fieldToKeep>
@param {String} fieldToKeep is the field that should not get cleared.
Loop through all fields:
- Skip the <fieldToKeep> if it matches the <field> looping through.
- Skip if the field type is of type 'queryonly', there is no html element to clear.
- Fields of type 'toggle' or 'toggle_text' have toggle fields with an html element 'toggle_<field>' that has its backgroundColor set to 'white'.
- Fields of type 'textarea' have an html textarea element 'textarea_<field>' that has its value set to blank ''.
- Fields not of type 'toggle' nor 'toggle_text' nor 'textarea' have an html input element 'input_<field>' that has its value set to blank ''.
- Fields of type 'multiontology' or 'multidropdown' call removeSelectAllOptions(<elSel>) to remove all html option elements from the field's html select element.
Field labels on the editor can be clicked to toggle the column to show or hide. It also makes an AJAX call for postgres to store the user's preference for that datatype-field.
assignEditorLabelTdListener(e)
Assigns a listener action for when a field's label in the editor frame is clicked.
Get the field from the event trigger id.
Call showHideToggle(field) to update dataTable column state and postgres table.
showHideToggle(field)
Updates dataTable and postgres oac_column_showhide table value.
@param {String} field is the field whose column state should be updated.
Get editor frame label td html element with id 'label_<field>' ; if the corresponding dataTable column is hidden, show it and make the style of the html td element 'black' ; if it is not hidden, hide it and make the html td element 'grey'.
Call updatePostgresShowHideColumn(field, columnShowHide) to update the state of the column for that curator-datatype-field in the oac_column_showhide postgres table.
Multivalue fields have a select element to store its values and a 'remove' button to remove selecte values.
removeSelectAllOptions(elSel)
Remove all html option elements from a given html select element to clear it.
@param {Object} elSel is the html select element to clear by removing all its options.
@return {Boolean} is the true/false state of whether anything was removed from the html select element.
Loop through all <elSel> html option elements, removing them. If any are removed set <haveRemoved> to true.
Resize the html select element to fit the amount of values (none) by calling resizeSelectField(elSel) .
Return <haveRemoved> to pass whether anything was removed or not.
resizeSelectField(elSel)
Resize the html select element to exactly fit the amount of values it has.
@param {Object} elSel is the html select element to resize
If it has elements set the size to the amount values, otherwise make the size 1.
Multivalue fields (multiontology / multidropdown) have an html select element listing all its values. A 'remove' html button element is needed to remove selected values.
removeSelectFieldEntriesListener(e)
Assigns a listener action for when a multivalue field's 'remove' html button element is clicked.
Get the field from the event trigger id.
Get the <elSel> html select element from the editor frame element with id 'select_<field>'.
Call removeSelected(elSel) to remove the selected options.
If a value was removed:
- Blank out value of the corresponding html input element with id 'input_<field>'.
- Get array of rows selected in dataTable.
- Call convertSelectToDatatableValue(field) to convert <elSel> values to dataTable format.
- Call updateDataTableValues(field, newValue, selectedRows) to update postgres tables and dataTable.
removeSelected(elSel)
Remove all selected values from <elSel> html select element.
@param {Object} elSel is the html select element for that field.
@return {Boolean} is the true/false state of whether anything was removed from the html select element.
Loop through all <elSel> html option elements, removing any that are selected. If any are removed set <haveRemoved> to true.
Resize the html select element to fit the amount of values (none) by calling resizeSelectField(elSel) .
Return <haveRemoved> to pass whether anything was removed or not.
When a tab is clicked, show only fields that belong to that tab.
showTab(tabClass)
When a tab is clicked, show only fields that belong to that tab.
@param {String} tabClass is 'tab<number>' or 'all' from fieldsData[<field>]["tab"]
Get all html tr elements from the editor frame. Loop through all elements and if the className matches exactly the <tabClass>, display it ; otherwise hide it.
Resets ontology annotator by reloading obo frame, deleting all rows in dataTable, and clearing editor fields. Leaves dataTable and control settings.
resetButtonListener(e)
Assigns a listener action for when the editor frame's 'Reset' html button element is clicked.
Call resetButton() to reset the ontology annotator.
resetButton()
Resets ontology annotator by reloading obo frame, deleting all rows in dataTable, and clearing editor fields. Leaves dataTable and control settings.
Reload obo frame from server, not cache.
Delete all rows from dataTable.
Clear all input fields and values from the editor frame by calling clearEditorFields(field) .
Autocomplete fields can be single value or multivalue, and can be 'dropdown' or 'autocomplete'. Multivalue fields have an html select element to store its value and a button to remove selected values. 'dropdown' fields can have a relatively small amount of values and a button to show all values. 'ontology' fields have term info to show in the obo frame.
setAutocompleteListeners()
Autocomplete fields (dropdown / multidropdown / ontology / multiontology) create a YUI AutoComplete object to autocomplete what the user types into the only possible values. All Autocomplete fields are forced. Dropdown-type fields (dropdown / multidropdown) have a button to click to show all possible options.
Loop through all fields, and if the fieldsData[<field>][type] is an autocomplete field (dropdown / multidropdown / ontology / multiontology) set autocomplete listeners by:
Construct a URL for AJAX autocomplete query to the CGI with action 'autocompleteXHR', passing the <field>, <datatype>, <curatorTwo>, and '&' for YUI to append the 'query' field with the value the user typed in.
Create <oDS> as a new YUI XHRDataSource, passing in the URL ; with data response of type text ; delimiting records with newlines (\n) and fields with tabs (\t) ; and enabling caching because autocomplete values don't change often.
All autocompletes force data to be in the ontology, so the container element is gotten from the editor frame html div element with id 'forced<field>Container'. The input element from the editor frame html input element with id 'input_<field>'.
Create <forcedOAC> as a new YUI AutoComplete ; passing in the <inputElement>, <containerElement>, and <oDS>. Set 'queryQuestionMark' to 'false' because the URL has been built with other value and already has an '&'. Set 'maxResultsDisplayed' to '500' because even though most results are limited to 20 by the CGI, some GO config ontology values have hundreds that match on some terms and curatos wants to look at hundreds of them. Set 'forceSelection' to 'false' because it doesn't seem to work, so using checkValueIsValidAndUpdate(field, newValue, selectedRows) instead.
If the field is a 'dropdown' or 'multidropdown' also add a 'click' listener to the editor frame html span element with id 'type_<field>', so that when clicked it will focus on the <forcedOAC> input and send a query for blank, which returns all possible values for the field. Set the 'minQueryLength' to 0 to allow blank queries which return all values.
Subscribe a <forcedOAC> itemSelectEvent to call onAutocompleteItemSelect to update term information, input field, postgres, and dataTable.
Subscribe a <forcedOAC> selectionEnforceEvent to call onAutocompleteSelectionEnforce to give message in obo frame about what value was cleared.
Subscribe a <forcedOAC> itemArrowToEvent to call onAutocompleteItemHighlight to show the value's term info in the obo frame if it is an ontology-type field.
Subscribe a <forcedOAC> itemMouseOverEvent to call onAutocompleteItemHighlight to show the value's term info in the obo frame if it is an ontology-type field.
onAutocompleteItemSelect(oSelf, elItem)
Get the value's id, set the obo frame to show the id's term info, set the field input to the value, and blur to call editorInputBlurListener to update postgres and the dataTable.
@param {Object} oSelf is the YUI AutoComplete object.
@param {Object} elItem is the html li element selected.
Get the <field> by matching on the <elSel> name.
Get the user <value> from the <elItem>.
Set the editor frame html input element with id 'input_<field>' to have value <value>, focus it, and blur it, to trigger editorInputBlurListener .
If the type is 'ontology' or 'multiontology':
- Initialize <id> as a copy of <value>.
- If the value matches as a '^<syn> ( <id> ) [<name>]$' reconstruct it as '<name> ( <id> ) '.
- If the value matches as '( <id> ) ' set the <id> as the matched <id>.
- Set the obo frame to a <oboUrl>, the ontology_annotator.cgi with action 'oboFrame', passing the <datatype>, <curatorTwo>, <id>, and <field>.
onAutocompleteSelectionEnforce(oSelf, sClearedValue)
Give message in obo frame about what value was cleared.
@param {Object} oSelf is the YUI AutoComplete object.
@param {String} sClearedValue is the value that was cleared.
Give a message in the obo frame html div element with id 'myObo' about which value was cleared by value enforcement.
onAutocompleteItemHighlight(oSelf , elItem)
When highlighting an 'ontology' or 'multiontology' value call asyncTermInfo(field, value) to change the term info in the obo frame.
@param {Object} oSelf is the YUI AutoComplete object.
@param {Object} elItem is the html li element highlighted from mouseOver or arrowTo.
Get the <field> by matching on the <elSel> name.
If the <field> is of type 'ontology' or 'multiontology' call asyncTermInfo(field, value) to change the term info in the obo frame.
Editor fields make an automatic AJAX call to update the appropriate postgres data table, postgres history table, and ontology annotator dataTable. 'text' and 'bigtext' fields do it when blurred, 'toggle'-type fields do it when clicked, autocomplete-type fields do it when selected or clicked.
editorInputBlurListener(e)
Assigns a listener action for when a field's html input element is blurred.
Get the field from the event trigger id.
Call editorFieldBlur(field, newValue) to update postgres and dataTable.
editorFieldBlur(field, newValue)
Updates dataTable and postgres data table values, if appropriate.
@param {String} field is the field whose value should be updated.
@param {String} newValue is the new value for that field and pgids.
Get selected rows from dataTable.
Skip field 'id', it has no corresponding postgres table to update and its dataTable column cannot be changed.
Skip fields of type 'noteditable', they should not change.
Fields of multivalue type (multiontology / multidropdown) check values are valid and update calling checkValueIsValidAndUpdate(field, newValue, selectedRows) . Having a blank value doesn't matter, only what is / gets added / gets removed from html select element. Any autocomplete value needs to be checked before update.
Other fields with a blank value update postgres and dataTable by calling updateDataTableValues(field, newValue, selectedRows) . Blank values are not valid value when checked, so update normally.
Fields of type 'dropdown' or 'ontology' check values are valid and update calling checkValueIsValidAndUpdate(field, newValue, selectedRows) . Autocomplete values need to be checked before update.
All other fields update postgres and dataTable by calling updateDataTableValues(field, newValue, selectedRows) .
editorTextareaBlurListener(e)
Assigns a listener action for when a field's html textarea element is blurred for fields of type 'textarea' but not 'bigtext'.
Get the field from the event trigger id.
Call editorFieldBlur(field, newValue) to update postgres and dataTable.
checkValueIsValidAndUpdate(field, newValue, selectedRows)
Check whether a field's new user value is a proper autocomplete value with an AJAX call. If it is update postgres tables and dataTable. If it's not replaced the editor input with the last value selected in the dataTable or blank if there isn't one.
@param {String} field is the field whose value should be updated.
@param {String} newValue is the new value for that field and pgids.
@param {Array} selectedRows is an array of record ids of selected dataTable rows.
Define callbacks action for AJAX return.
Call convertDisplayToUrlFormat(newValue) to replace any characters to escape with html URL escape characters.
Construct a URL for AJAX check to the CGI with action 'asyncValidValue', passing the <field>, <newValue>, <datatype>, and <curatorTwo>.
Make a YAHOO.util.Connect.asyncRequest with method GET to the constructed URL with callbacks actions.
callbacks from checkValueIsValidAndUpdate
Get back AJAX response of true / false of whether a field's new user value is a proper autocomplete value. If it is, update postgres tables and dataTable. If it's not, replace the editor input with the last value selected in the dataTable (or blank if there isn't one).
On successful return with <o.responseText> do the following.
If <o.responseText> is 'true' call processValuesForDataTable(field, newValue, selectedRows) to update postgres tables and dataTable.
If <o.responseText> is not 'true' get the current value from the editor frame html input element with id 'input_<field>' ; if the <newValue> being checked is the same as was in the editor frame (the user hasn't changed the value while the AJAX call returned) ; if the first selected record is in the dataTable, get the record, replace the html span element with parentheses, and place the value back in the editor field (The new value the user tried is not a valid autocomplete value so put back the previous value) ; if there is no corresponding dataTable value, clear the editor input by setting the value to blank ''.
convertDisplayToUrlFormat(value)
Convert value from display format to a URL format by converting characters to URL escape characters for making AJAX calls.
@param {String} value is the display value to convert to URL format.
@return {String} is the URL value, having been converted from the display value.
If there is a <value>, and it matches a character to escape (+ or #), convert all matches of the character to the html URL escape character.
processValuesForDataTable(field, newValue, selectedRows)
Convert values to dataTable format and call updateDataTableValues(field, newValue, selectedRows) for AJAX call to update postgres tables and dataTable.
@param {String} field is the field whose value should be updated.
@param {String} newValue is the new value for that field.
@param {Array} selectedRows is an array of record ids of selected dataTable rows, whose pgids should be updated.
If the field is a single autocomplete type (dropdown / ontology) replace the <newValue>'s parentheses with an html span element to hide the id in the dataTable.
If the field is a multi autocomplete type (multidropdown / multiontology) call addToSelectField(field, newValue) to add the value to the corresponding html select element ; convert the <newValue> to dataTable display format ; and check if <newValue> is a new value, if it already existed in the html select element there is no need to update, so return.
Call updateDataTableValues(field, newValue, selectedRows) to update postgres tables and dataTable.
addToSelectField(field, newValue)
If the user's <newValue> is new, add it to the field's html select element and return the element's values in dataTable format, otherwise return 'noChange'.
@param {String} field is the field whose value should be updated.
@param {String} newValue is the new value for that field and pgids.
@return {String} is 'noChange' if there was no change, or the data in the field's html select element in dataTable format.
Get the <elSel> html select element with id 'select_<field>' and remove all html option elements.
Convert value from URL format to display format by converting characters from URL escape characters back to normal characters.
Check if the <field>'s <newValue> is already in <elSel> by calling checkValueInSelect(field, newValue, elSel) ; if not, add it by:
- Create a new html option element, setting its text and value to <newValue>, and add it to <elSel>.
- Resize <elSel> to fit the amount of values with resizeSelectField(elSel) .
- Blur the corresponding input field with id 'input_<field>' in the editor frame to avoid triggering a manual blur event later. Set the value to blank ''.
- Call convertSelectToDatatableValue(field) to convert <elSel> values to dataTable format, and return these values.
If the <newValue> already existed in <elSel> return 'noChange'. Do not clear the html input element because the user might have entered the value to query postgres.
checkValueInSelect(field, newValue, elSel)
Check if the <newValue> already exists in the field's html select element. If so return 'true', if not return 'false'.
@param {String} field is the field whose value should be updated.
@param {String} newValue is the new value for that field and pgids.
@param {Object} elSel is the html select element for that field.
@return {Boolean} is the true/false state of whether a value already existed in an html select element.
Loop through all html option elements in <elSel> and if a value matches <newValue> return true.
If there was no match return false.
convertSelectToDatatableValue(field)
Get a field's corresponding html select element's values in dataTable format.
@param {String} field is the field whose html select element's values should be converted to dataTable format.
@return {String} is the html select element's values in dataTable format.
Get the <elSel> html select element with id 'select_<field>' and replace all pairs of parentheses with a set of html select element tags with style display 'none'.
If there are values, group all values with doublequote-comma-doublequote, wrap in doublequotes and return. If there are no values return blank ''.
updateDataTableValues(field, newValue, selectedRows)
Update postgres tables and dataTable by directing to the default or batch more for AJAX call.
@param {String} field is the field whose value should be updated.
@param {String} newValue is the new value for that field. Autocomplete values are in dataTable display format (with html span elements, not with parentheses)
@param {Array} selectedRows is an array of record ids of selected dataTable rows, whose pgids should be updated.
The <displayValue> is the value to display in the dataTable, and it is the same as the userValue to pass through AJAX, but converts URL escapes to normal characters.
Get whether the user wants to use normal mode or the batch unsafe mode (which updates postgres, but does not update the dataTable because changing a lot of values is slow) by getting the editor frame html hidden input element with id 'batchUnsafeFlag'.
If the batch unsafe flag is selected (originally from the front page of the ontology_annotator.cgi) make changes to postgres tables (only) with an AJAX call by calling batchUnsafeUpdateDataTableValues(field, selectedRows, newValue, displayValue) .
If the batch unsafe flag is not selected (default mode) make changes to postgres tables and dataTable with an AJAX call by calling normalSafeUpdateDataTableValues(field, selectedRows, newValue, displayValue) .
batchUnsafeUpdateDataTableValues(field, selectedRows, newValue, displayValue)
Fast and 'unsafe' mode to batch update data from a lot of <selectedRows> in postgres tables with a single AJAX call, but unsafe because dataTable is not updated and there is a single error message for all errors instead of individual error messages per field-pgid-value update.
@param {String} field is the field whose value should be updated.
@param {Array} selectedRows is an array of record ids of selected dataTable rows, whose pgids should be updated.
@param {String} newValue is the new value for that field in URL format. Autocomplete values are in dataTable display format (with html span elements, not with parentheses)
@param {String} displayValue is the same new value, but in dataTable display format. Deprecated -- It is not used because the dataTable is not being updated because myDataTable.updateCell(record, field, displayValue) seems to happen quickly, but then the browser hangs for many selected rows. Kept here in case a future update makes it faster.
Get all ids from dataTable selected rows and put them in an array <arrPgidsToChange> and hash <idHash>. Deprecated -- <idHash> is not used, but kept here in case a future update makes updating dataTable cells faster.
If there are pgids to update, join them with comma and update postgres tables and dataTable by calling updatePostgresTableField(pgidsToChange, field, newValue) .
Deprecated -- For each selected row, if the pgid is in <idHash> get the record and update the dataTable cell to have the <displayValue>.
normalSafeUpdateDataTableValues(field, selectedRows, newValue, displayValue)
Safe and default mode to update data from <selectedRows> one by one with individual AJAX calls to update postgres tables and update dataTable.
@param {String} field is the field whose value should be updated.
@param {Array} selectedRows is an array of record ids of selected dataTable rows, whose pgids should be updated.
@param {String} newValue is the new value for that field in URL format. Autocomplete values are in dataTable display format (with html span elements, not with parentheses)
@param {String} displayValue is the same new value, but in dataTable display format.
Get all ids from dataTable selected rows, and if the <newValue> is different from the corresponding dataTable value:
- Call updatePostgresTableField(pgidsToChange, field, newValue) to update postgres tables.
- Update the dataTable cell to show the <displayValue>. It's possible for this to happen even if updatePostgresTableField fails, but a failure there will give an error message for users to check data.
- Get the html div elements corresponding to this dataTable record.
- Add or remove the red_square.jpg to those html div elements depending on whether there's too much data in the cell or not (respectively) by calling colorMoreCells(divArray) .
updatePostgresTableField(pgid, field, newValue)
Update data in postgres data tables with an AJAX call, alerting of any errors.
@param {String} pgid are the comma-separated pgids that should be updated.
@param {String} field is the field whose value should be updated.
@param {String} newValue is the new value for that field in URL format. Autocomplete values are in dataTable display format (with html span elements, not with parentheses)
Disable the form if appropriate by calling disableForm() .
Define callbacks action for AJAX return.
Call convertDisplayToUrlFormat(newValue) to replace any characters to escape with html URL escape characters.
Construct a URL for AJAX postgres update to the CGI with action 'updatePostgresTableField', passing the <pgid>, <field>, <newValue>, <datatype>, and <curatorTwo>.
Make a YAHOO.util.Connect.asyncRequest with method GET to the constructed URL with callbacks actions.
callbacks from updatePostgresTableField
Get back AJAX response of 'OK' or error message. Undisable form if appropriate and warn of any errors in an alert window.
On successful return undisable the form by calling undisableForm() . If the response is not 'OK' make an alert window with the <newValue>, <pgid>, <field>, and <o.responseText>.
On failure return undisable the form by calling undisableForm() and make an alert window with the <newValue>, <pgid>, <field>, and <o.statusText>.
Given an autocomplete field and value, make an AJAX call to get the term info and display it in the obo frame. Display various messages in the obo frame.
asyncTermInfo(field, value)
Given an autocomplete <field> and <value>, make an AJAX call to get the term info from postgres and display in the obo frame.
@param {String} field is the field whose term needs info.
@param {String} value is the term that needs info.
Define callbacks action for AJAX return.
Call convertDisplayToUrlFormat(value) to replace any characters to escape with html URL escape characters.
Construct a URL for AJAX term info query to the CGI with action 'asyncTermInfo', passing the <field>, <value>, <datatype>, and <curatorTwo>.
Make a YAHOO.util.Connect.asyncRequest with method GET to the constructed URL with callbacks actions.
callbacks from asyncTermInfo
Get back AJAX response of term information. Display in obo frame.
On successful return, if there is data set the <o.responseText> to the innerHTML of the obo frame html div element with id 'termInfo'.
The control frame has controls to:
- 'Check_Data' Check all data in the dataTable against mod-datatype specific constraints.
- 'Delete' Delete all selected dataTable rows from postgres tables and dataTable.
- 'Duplicate' Duplicate selected dataTable rows from postgres tables, query them into the dataTable, and select the new rows.
- 'New' Create a new object entry in postgres tables, query it into the dataTable, and select that new row.
- Filtering for N filter pairs to only show records in the dataTable that match a text value in a given / all column(s).
checkDataButtonListener(e)
Assigns a listener action for when the control frame's 'Check_Data' html button element is clicked. Makes an AJAX call passing pgids to check and adds ok message if 'OK', or pop up window if there's a message.
Get all dataTable pgids into a comma-separated string by calling getAllDataTableIds() .
If there are no pgids in the dataTable, give a message in the obo frame html div element with id 'myObo', and return.
Disable the form if appropriate by calling disableForm() .
Define callbacks action for AJAX return.
Construct a URL for AJAX postgres check to the CGI with action 'checkDataByPgids', passing the <datatype>, <curatorTwo>, and <allDataTableIds>.
Make a YAHOO.util.Connect.asyncRequest with method GET to the constructed URL with callbacks actions.
callbacks from checkDataButtonListener(e)
Get back AJAX response of 'OK' or message to display. Undisable form if appropriate.
On successful return undisable the form by calling undisableForm() . If the response is 'OK', give a message in the obo frame html div element with id 'myObo'. If the response is not 'OK' make a pop up window with innerHTML being the <o.responseText>.
On failure return undisable the form by calling undisableForm() and make an alert window with <allDataTableIds> and <o.statusText>.
deleteRowButtonListener(e)
Assigns a listener action for when the control frame's 'Delete' html button element is clicked. Makes an AJAX call passing pgids to delete ; adds ok message if 'OK' and removes selected rows from dataTable ; or alert message if there's an error message.
Get all pgids from selected dataTable rows into a comma-separated string.
If there are no selected row pgids, give a message in the obo frame html div element with id 'myObo', and return.
Disable the form if appropriate by calling disableForm() .
Define callbacks action for AJAX return.
Construct a URL for AJAX postgres update to the CGI with action 'deleteByPgids', passing the <idsToDelete>, <datatype>, and <curatorTwo>.
Make a YAHOO.util.Connect.asyncRequest with method GET to the constructed URL with callbacks actions.
callbacks from deleteRowButtonListener(e)
Get back AJAX response of 'OK' or error message to alert. Undisable form if appropriate.
On successful return undisable the form by calling undisableForm() . If the response is 'OK', get dataTable selected rows, delete them, and give a message in the obo frame html div element with id 'myObo' about the <idsToDelete> being deleted. If the response is not 'OK' make an alert message with the <idsToDelete> and <o.responseText>.
On failure return undisable the form by calling undisableForm() and make an alert window with <idsToDelete> and <o.statusText>.
duplicateRowButtonListener(e)
Assigns a listener action for when the control frame's 'Duplicate' html button element is clicked. Makes an AJAX call passing pgids to duplicate ; adds ok message if 'OK' and newly duplicated rows into dataTable ; or alert message if there's an error message.
Get all pgids from selected dataTable rows into a comma-separated string.
If there are no selected row pgids, give a message in the obo frame html div element with id 'myObo', and return.
Disable the form if appropriate by calling disableForm() .
Define callbacks action for AJAX return.
Construct a URL for AJAX postgres update to the CGI with action 'duplicateByPgids', passing the <idsToDuplicate>, <datatype>, and <curatorTwo>.
Make a YAHOO.util.Connect.asyncRequest with method GET to the constructed URL with callbacks actions.
callbacks from duplicateRowButtonListener(e)
Get back AJAX response of 'OK<tab> DIVIDER <tab><comma-separated pgids of duplicated rows>', or error message to alert. Undisable form if appropriate.
On successful return undisable the form by calling undisableForm() . If the response is 'OK', get comma-separated pgids of duplicated rows, query them from postgres into the dataTable by calling postgresQueryField('id', arrTextReturned[1], arrIdsReturned.length) , select the newly queried row, and give a message in the obo frame html div element with id 'myObo' about the <idsToDuplicate> being duplicated. If the response is not 'OK' make an alert window with the response message. If the <o.responseText> is undefined make an alert window with the <idsToDuplicate> and <o.responseText>.
On successful return undisable the form by calling undisableForm() . If the response message is 'OK', get pgid of duplicated rows, query pgid from postgres into the dataTable by calling postgresQueryField('id', arrTextReturned[1], 1) , select the newly queried row, and give a message in the obo frame html div element with id 'myObo' about the pgid being created. If the response message is not 'OK' make an
On failure return undisable the form by calling undisableForm() and make an alert window with <idsToDuplicate> and <o.statusText>.
newRowButtonListener(e)
Assigns a listener action for when the control frame's 'New' html button element is clicked. Makes an AJAX call to create a new entry for the datatype ; adds ok message if 'OK' and newly created row into dataTable ; or alert message if there's an error message.
Disable the form if appropriate by calling disableForm() .
Define callbacks action for AJAX return.
Construct a URL for AJAX postgres update to the CGI with action 'newRow', passing the <datatype>, and <curatorTwo>.
Make a YAHOO.util.Connect.asyncRequest with method GET to the constructed URL with callbacks actions.
callbacks from newRowButtonListener(e)
Get back AJAX response of 'OK<tab> DIVIDER <tab><pgids of new row>', or error message to alert. Undisable form if appropriate.
On successful return undisable the form by calling undisableForm() . If the response message is 'OK', get pgid of duplicated rows, query pgid from postgres into the dataTable by calling postgresQueryField('id', arrTextReturned[1], 1) , select the newly queried row, and give a message in the obo frame html div element with id 'myObo' about the pgid being created. If the response message is not 'OK' make an alert window with the response message. If the <o.responseText> is undefined make an alert window with the <o.responseText>.
On failure return undisable the form by calling undisableForm() and make an alert window with <o.statusText>.
updateFiltersAmountListener(e)
Assigns a listener action for when the control frame's 'filtersAmount' html select element is changed.
Call updateFiltersAmount() to display that amount of filter pairs of html elements, and filter dataTable based on those filters.
updateFiltersAmount()
Displays the amount of control frame filter pair html elements showing on the control frame html hidden input element with id 'filtersMaxAmount', then fitlers dataTable based on the showing pairs.
Gets the <filtersMaxAmount> from the control frame html hidden input element with id 'filtersMaxAmount'.
Gets the <filtersAmount> to display and filter on, from the selected html option element in the control frame html select element with id 'filtersAmount'.
Loop through the <filtersMaxAmount> of filters, and if they number less than or equal to / greater than <filtersAmount>, then display / hide the control frame html select element with id 'filterType<count>' and html input element with id 'filterValue<count>'.
Call filterData() to display the dataTable data based on the displayed filter pairs.
filterData()
Display only dataTable data that matches in the showing filter pairs, for each pair matching the value to the specified field type.
Blank out the obo frame html div element with id 'myObo'.
Get <records> from dataTable.
Gets the <filtersAmount> to display and filter on, from the selected html option element in the control frame html select element with id 'filtersAmount'.
Loop through each record. For each record get the <recordIndex> and loop through each <filtersAmount>:
- Get the <filterType> from the control frame html select element with id 'filterType<count>'.
- Get the <filterValue> from the control frame html select element with id 'filterValue<count>'.
- The <queryValue> is a lowercased <filterValue>.
- If <filterType> is 'all' use all values from <myFields>, otherwise use the <filterType>.
- Loop through each <filterType> value, matching a lowercased value to <queryValue> ; if it matches flag the record to show and stop checking other <filterType> values.
If there are greater or equal show flags than <filtersAmount> the record matches all filters, so count it in <recordsShown> and display the html tr element containing the <recordIndex> in the dataTable ; otherwise hide it.
Give a message in the obo frame html div element with id 'myObo' about how many records match.
filterDataKeyUpListener(e)
Assigns a listener action for when any of the control frame's html input element with id 'filterValue<count>' has a key up (release) action.
Call filterData() to display the dataTable data based on the displayed filter pairs.
The table frame has a YUI ScrollingDataTable object used to display the curator's working data.
initializeTable(myColumnDefs)
Initialize dataTable column properties and action listeners.
@param {Array} myColumnDefs is an array of (hash) objects, listing the fields in the order they should display dataTable columns, and holding key-value pairs of column properties.
Create a new YUI LocalDataSource <myDataSource>, set its responseSchema to have fields be a copy of <myFields>.
Create <myDataTable> as a new YUI ScrolingDataTable ; passing its container element the id for the html div element 'myContainer' ; <myColumnDefs> for column definitions ; <myDataSource> for data source ; and config parameters 'width' to '99.5%' to avoid horizontal scrollbar in frame, 'height' to '100%', and 'draggableColumns' to 'true' so columns can be reordered.
Call populateMyFields(); to repopulate <myFields> because creating the scrolling data table changed the data in <myFields> into objects.
Call resizeDataTable(); to resize height of dataTable header div and data row div to the frame height minus 29 pixels so a vertical frame scrollbar won't show.
Set listener for 'rowMouseoverEvent' to highlight row.
Set listener for 'rowMouseoutEvent' to unhighlight row.
Set listener for 'rowClickEvent' to select row. Set additional listener to call rowSelectLoadToEditor(recordData) to load the row's data to the editor frame.
Set listener for 'columnReorderEvent' to get the order of the columns by looping through all html a elements in the html div element with id 'myContainer' and sub-looping through all the fields in <myField> to match the fieldsData[<field>][label] to the innerHTML of the html a element and adding to an array. If there are fields in the array, join with comma and update postgres column table by calling updatePostgresReorderColumn(columnOrder) .
Set listener for 'columnResizeEvent' to get all html th elements in the html div element with id 'myContainer', looping through all elements to find the array index <colIndex> of the element matching the target of the object that triggered the listener. Get all html tr elements in the body of the dataTable and loop to get an array of html div elements <divArray>, and add or remove the red_square.jpg to them depending on whether there's too much data in the cell or not (respectively) by calling colorMoreCells(divArray) . Get the field from the column key of the element that triggered the listener, get the new column width for that field column, and update postgres column table by calling updatePostgresResizeColumn(field, columnWidth) .
Loop through all fields ; if there's a fieldsData[<field>][columnWidth] set the field column width to that size ; if there's a fieldsData[<field>][columnShowHide] and the value is 'hidden', hide the field column in the dataTable, and set the editor frame html td element with it 'label_<field>' color to 'grey'.
resizeDataTable()
Resize height of dataTable header div and data row div to the frame height minus 29 pixels so a vertical frame scrollbar won't show.
Set <myHeight> to the height of the client minus 29 pixels so the whole dataTable will show without a vertical frame scrollbar.
Get all html div elements in the html div element with id 'myContainer'.
Loop through all divs and if they have class 'yui-dt-bd' they refer to either the dataTable header, or the dataTable data rows, and their height should be set to <myHeight> to avoid a vertical frame scrollbar.
getAllDataTableIds
Get all dataTable pgids into a comma-separated string.
@return {String} all the pgids corresponding to selected rows, joined in a string with commas.
Get all dataTable records, for each of those get the id, join them with comma, and return.
colorMoreCells(divArray)
For the html div elements passed in, see if there's more data than can show and add the red_square.jpg or remove it as appropriate.
@param {Array} divArray is an array of all the html div elements in the dataTable that need color check.
Loop through all html div elements to color, and for those of class 'yui-dt-liner' do the following:
If the scrollHeight is not the same as the clientHeight, add to the html div element the class 'hidden-overflow-data' to show the red_square.jpg from the ontology_annotator.css .
If they are the same, remove it instead.
rowSelectLoadToEditor(recordData)
Load last selected dataTable <recordData> into the editor frame's inputs and values.
@param {Object} recordData is the YAHOO.widget.Record object to load into the editor frame's inputs and values.
Loop through all fields, get the value from recordData[<field>] and depending on the fieldsData[<field>][type] load differently.
Skip all fields that are 'queryonly', they have nothing to load.
Autocomplete fields (dropdown / ontology / multidropdown / multiontology) convert the html span element into parentheses.
MultiAutocomplete fields call populateSelectFieldFromDatatable(<field>, <value>) to populate the html select element.
Toggle-type fields set the 'toggle_<field>' element background color to 'red' for data and 'white' for no data.
Textarea fields sets the 'textarea_<field>' html textarea element to <value>3
Bigtext fields sets the 'textarea_bigtext_<field>' html textarea element to blank '', and 'input_<field>' html input element to <value>.
All fields get the value of 'input_<field>' html input element set to <value>.
populateSelectFieldFromDatatable(field, value)
Load <value> into the <field>'s corresponding html select element, and clear the corresponding html input element.
@param {String} field is the field whose corresponding html select element should load values.
@param {String} value has the comma-separated data to load into the html select element.
Set the 'input_<field>' value to blank ''.
Get the 'select_<field>' html select element and remove all html option elements.
Strip out leading and trailing doublequotes from value, split on comma to get individual values.
For each individual value create an html option element with that for text and value and append to the html select element.
Resize the html select element to fit the amount of values by calling resizeSelectField(elSel) .
Changing the state of dataTable columns automatically store the state for the curator-datatype-field in the corresponding oac_column_<type> postgres table. The types to store are order of fields, show-hide column state, and column's width in pixels.
updatePostgresReorderColumn(columnOrder)
@param {String} columnOrder is a comma-separated string with the fields in column order.
Calls updatePostgresColumn(columnOrder, null, 'columnOrder') to update the column order in postgres.
updatePostgresShowHideColumn(field, columnState)
@param {String} field is the field whose column state should be updated.
@param {String} columnState is a string stating whether the new column state is 'visible' or 'hidden'.
Calls updatePostgresColumn(columnState, field, 'columnShowHide') to update the show-hide column state in postgres.
updatePostgresResizeColumn(field, columnWidth)
@param {String} field is the field whose column state should be updated.
@param {String} columnState is a string (converted earlier from an Int) with the new column width in pixels.
Calls updatePostgresColumn(columnWidth, field, 'columnWidth') to update the column width in postgres.
updatePostgresColumn(newValue, field, columnAction)
@param {String} newValue is the new value for the column's column action.
@param {String} field is the field whose column state should be updated.
@param {String} columnAction is the type of column action taken, to specify which postgres table to update.
Disable the form if appropriate by calling disableForm() .
Define callbacks action for AJAX return.
Call convertDisplayToUrlFormat(newValue) to replace any characters to escape with html URL escape characters.
Construct a URL for AJAX postgres update to the CGI with action 'updatePostgresColumn', passing the <columnAction>, <datatype>, <curatorTwo>, <field>, and <newValue>.
Make a YAHOO.util.Connect.asyncRequest with method GET to the constructed URL with callbacks actions.
callbacks from updatePostgresColumn
Get back AJAX response of 'OK' or error message. Undisable form if appropriate and warn of any errors in an alert window.
On successful return undisable the form by calling undisableForm() . If the response is not 'OK' make an alert window with the <field>, <columnAction>, <newValue>, <curatorTwo>, and <o.responseText>.
On failure return undisable the form by calling undisableForm() and make an alert window with the <field>, <columnAction>, <newValue>, <curatorTwo>, and <o.statusText>.
disableForm()
This used to disable the dataTable, editor, and controls ; but it was removed curators complained that when updating multiple rows in normal mode the dataTable would 'flash' because of the quick disabling (greying out) and undisabling (normal).
undisableForm()
This used to undisable the dataTable, editor, and controls ; but it was removed curators complained that when updating multiple rows in normal mode the dataTable would 'flash' because of the quick disabling (greying out) and undisabling (normal).