...
Update the plug-in configuration file with the information shown below. This file can be found at:
/js-i2b2/cells/plugins/ExampPDO/cell_config_data.js
// This file contains a list of files that need to be dynamically loaded for this
// plugin after its Init function is called
{
files files"ExampPDO.js" ],
css css"ExampPDO.css" ],
config config: {
// additional configuration variables that are set by the system
short short_name: "PDO Request",
name name: "Example #3 - PDO Request",
description description: "This plugin demonstrates how to retrieve information using the Patient Data Object (PDO).",
category category"celless","plugin","examples"],
plugin plugin: {
isolateHtml: false,
standardTabs: true, // this means the plugin uses standard tabs at top
html: {
source source: 'injected_screens.html' ,
mainDivId mainDivId: 'ExampPDO_mainDiv'
}
}
}
} |
The new plug-in was registered with the module loader configuration file by adding the following lines:
// THESE ARE ALL THE CELLS THAT ARE INSTALLED ONTO THE SERVER
i2b2.hive.tempCellsList = [
{ code: "PM",
forceLoading forceLoading: true // <------- this must be set to true for the PM cell!
},
{ code: "ONT" } ,
{ code: "CRC" } ,
{ code: "PLUGINMGR" ,
forceLoading forceLoading: true,
forceConfigMsg forceConfigMsg: {
params params
}
},
{code: "ExampHello" ,
forceLoading forceLoading: true, // <------- this must be set to true for all plugins
forceDir forceDir: "cells/plugins/examples"
params params
},
{code: "ExampTabs" ,
forceLoading forceLoading: true,
forceDir forceDir: "cells/plugins/examples"
},
{code: "ExampPDO" ,
forceLoading forceLoading: true,
forceDir forceDir: "cells/plugins/examples"
}
]; |
HTML for Data Entry
The first data entry tab was modified to accept a patient record set and an Ontology concept. To do that we make the HTML for the first tab to be as follows:
<div class="ExampPDO-MainContent">
< <div class="ExampPDO-MainContentPad">
< <div>
Drop a Patient Set and a Concept (Ontology Term) into the input boxes below, and then click the "View Results" tab to retrieve
information about when that concept was observed in the selected patient set. In this example, the results are returned in the
standard i2b2 PDO (Patient Data Object) XML format. You may select whether to return information about the patients,
events, or observations.
< </div>
< <div class="droptrgtlbl">Patient Set:</div>
< <div class="droptrgt SDX-PRS" id="ExampPDO-PRSDROP">
Drop a Patient Set here
< </div>
< <div class="droptrgtlbl">Concept:</div>
< <div class="droptrgt SDX-CONCPT" id="ExampPDO-CONCPTDROP">
Drop a Concept here
< </div>
< <div class="outputOptionslbl">Return:</div>
< <div class="outputOptions">
<form>
< <span>
<input type="checkbox" checked id="ExampPDO-OutputPatient">
Patients
< Patients
</span>
< <span>
<input type="checkbox" checked id="ExampPDO-OutputEvents">
Events
< Events
</span>
< <span>
<input type="checkbox" checked id="ExampPDO-OutputObservations">
Observations
< Observations
</span>
</form>
< </div>
< </div>
</div> |
Setup Standard Tabs
This plug-in uses the standardized tabs system provided by the Plugin Viewer framework.
i2b2.ExampPDO.Init = function (loadedDiv) {
// Manage YUI Tabs
this this.yuiTabs = new YAHOO.widget.TabView("ExampTabs-TABS", {activeIndex : 0});
} |
...
The first and second highlighted parts in the previous section called "HTML For Data Entry" are the DIVs that will be used to accept SDX Drop operations. To register the first DIVs as Drop event targets the following code was incorporated into the plug-in's initialization routine:
i2b2.ExampPDO.Init = function (loadedDiv) {
// Manage YUI Tabs
this this.yuiTabs = new YAHOO.widget.TabView("ExampPDO-TABS", {activeIndex : 0});
// register the drop target DIVs
var var op_trgt = {dropTarge:true};
i2b2 i2b2.sdx.Master.AttachType("ExampPDO-CONCPTDROP", "CONCPT", op_trgt);
i2b2 i2b2.sdx.Master.AttachType("ExampPDO-PRSDROP", "PRS", op_trgt);
} |
...
i2b2.ExampPDO.prsDropped = function (sdxData) {
sdxData sdxData = sdxData[0]; // only interested in first record
// save the info to our local data model
i2b2 i2b2.ExampPDO.model.prsRecord = sdxData;
// let user know the drop was successful by displaying name of the patient set
$ $("ExampPDO-PRSDROP").innerHTML = i2b2.h.Escape(sdxData.sdxInfo.sdxDisplayName) ;
// change background temporarily to give feedback of a successful drop
$ $("ExampPDO-PRSDROP").style.background = "#CFB";
setTimeout setTimeout("$('ExampPDO-PRSDROP'). style.background = '#DEEBEF'", 250);
// prevent requerying the Hive for results if the input dataset has not changed
i2b2 i2b2.ExampPDO.model.dirtyResultsData = true;
}; |
...
i2b2.ExampPDO.conceptDropped = function (sdxData) {
sdxData sdxData = sdxData[0]; // only interested in first record
// save the info to our local data model
i2b2 i2b2.ExampPDO.model.conceptRecord = sdxData;
// let user know the drop was successful by displaying name of the patient set
$ $("ExampPDO-CONCPTDROP").innerHTML = i2b2.h.Escape(sdxData.sdxInfo.sdxDisplayName) ;
// change background temporarily to give feedback of a successful drop
$ $("ExampPDO- CONCPTDROP").style.background = "#CFB";
setTimeout setTimeout("$('ExampPDO- CONCPTDROP). style.background = '#DEEBEF'", 250);
// prevent requerying the Hive for results if the input dataset has not changed
i2b2 i2b2.ExampPDO.model.dirtyResultsData = true;
}; |
...
Once the drop event handlers were created they were registered to the proper Drop Target DIVs inside the plug-in's initialization code:
i2b2.ExampPDO.Init = function (loadedDiv) {
// Manage YUI Tabs
this this.yuiTabs = new YAHOO.widget.TabView("ExampPDO-TABS", {activeIndex : 0});
// register the drop target DIVs
var var op_trgt = {dropTarge:true};
i2b2 i2b2.sdx.Master.AttachType("ExampPDO-CONCPTDROP", "CONCPT", op_trgt);
i2b2 i2b2.sdx.Master.AttachType("ExampPDO-PRSDROP", "PRS", op_trgt);
// drop event handlers used by this plugin
i2b2 i2b2.sdx.Master.setHandlerCustom("ExampPDO-CONCPTDROP", "CONCPT", "DropHandler", i2b2.ExampPDO.conceptDropped);
i2b2 i2b2.sdx.Master.setHandlerCustom("ExampPDO-PRSDROP", "PRS", "DropHandler", i2b2.ExampPDO.prsDropped);
} |
...
To manage the user selecting one or more different types of output an outputOptions configuration namespace was created within the plug-in's data model namespace (i2b2.ExampPDO.model). This set of namespace extensions need to be setup before any other code attempts to access them and as such will be placed at the beginning of the plug-in's initialization code like so:
i2b2.ExampPDO.Init = function (loadedDiv) {
// Manage YUI Tabs
this this.yuiTabs = new YAHOO.widget.TabView("ExampPDO-TABS", {activeIndex : 0});
// set default output options
i2b2 i2b2.ExampPDO.model.outputOptions = {};
i2b2 i2b2.ExampPDO.model.outputOptions.patients = true;
i2b2 i2b2.ExampPDO.model.outputOptions.events = true;
i2b2 i2b2.ExampPDO.model.outputOptions.observations = true;
// register the drop target DIVs
var var op_trgt = {dropTarge:true};
i2b2 i2b2.sdx.Master.AttachType("ExampPDO-CONCPTDROP", "CONCPT", op_trgt);
i2b2 i2b2.sdx.Master.AttachType("ExampPDO-PRSDROP", "PRS", op_trgt);
// drop event handlers used by this plugin
i2b2 i2b2.sdx.Master.setHandlerCustom("ExampPDO-CONCPTDROP", "CONCPT", "DropHandler", i2b2.ExampPDO.conceptDropped);
i2b2 i2b2.sdx.Master.setHandlerCustom("ExampPDO-PRSDROP", "PRS", "DropHandler", i2b2.ExampPDO.prsDropped);
} |
To update the information in the outputOptions data model namespace we needed to connect the user's interaction with the output checkbox group with a function that performs the changes to the output options. First, a function was created and added to the plug-in's base namespace:
i2b2.ExampPDO.chgOutputOption = function (ckBox,option) {
// This function updates the data model object that controls the output format
// requested during the PDO call
i2b2 i2b2.ExampPDO.model.outputOptions[option] = ckBox.checked;
i2b2 i2b2.ExampPDO.model.dirtyResultsData = true;
}; |
...
<div class="ExampPDO-MainContent">
< <div class="ExampPDO-MainContentPad">
-
-
-
< <div class="outputOptionslbl">Return:</div>
< <div class="outputOptions">
<form>
< <span>
<input type="checkbox" checked id="ExampPDO-OutputPatient"
onChange onChange="i2b2.ExampPDO.chgOutputOption(this,'patients');" >
Patients
< Patients
</span>
< <span>
<input type="checkbox" checked id="ExampPDO-OutputEvents"
onChange onChange="i2b2.ExampPDO.chgOutputOption(this,'events');" >
Events
< Events
</span>
< <span>
<input type="checkbox" checked id="ExampPDO-OutputObservations"
onChange onChange="i2b2.ExampPDO.chgOutputOption(this,'observations');" >
Observations
< Observations
</span>
</form>
< </div>
< </div>
</div> |
HTML for Processing Output
...
