To embed pedigreejs in your application, you will need to either download or link to a CDN for JQuery, Font Awesome and d3. Font Awesome is used to display some of the widgets for building the pedigree. The d3-hierarchy module is used to assist in the layout of the pedigree tree. The pedigreejs JavaScript and CSS files can be found under the projects GitHub 'build' directory. The examples show how the options can be used to provide a suitable pedigree display and can be used as templates to experiment with. The 'dataset' option in the initialisation and configuration of pedigreejs defines the pedigree to be rendered,
Note: if the default editor is being used, then jQuery UI is also needed and it requires an empty div with id set to node_properties.
<div id="node_properties"></div>
The ‘store_type’ options in the configuration allows the data to be store in the browser in 3 ways. The default is to use ‘session’ storage which is used in HTML5 to store data for a session. So if the browser or tab is closed the data is lost. The second option is to use ‘local’ storage which again is used in HTML but persists and has no expiration date. The last option is ‘array’ which just holds the data in JavaScript array and disappears if the page is refreshed or the browser closed.
The current pedigree data displayed can be accessed by calling the JavaScript routine:
var pedigree = pedigreejs_pedcache.current(opts);
Where 'opts' is the options used to intialise pedigreejs. This returns the pedigree data in JSON format. A search routine can then be implemented to interogate this, see example 8.
'pedigreejs' will validate the pedigree data loaded into the interface by default. It will check the existence of parents and that the sex of the mother is female and the father is male. Also it checks that the unique name exists and is unique for each individual in the pedigree. Errors are returned, e.g.
NON-UNIQUE NAME: f21 MOTHERS SEX NOT FEMALE: M MISSING FATHER FOR ch1
Alternatively a function can be passed to the 'validate' configuration option (see example 6) and define any validation requirements necessary.
The 'labels' configuration option is used to determine what annotations are displayed under each of the individuals in the pedigree. So that it is possible to customise different attributes to be shown.
A default data dialog is displayed when clicking on the icon. It shows the individual's details (e.g. name, age, sex). It is possible to implement and customise a data editor specific to the data set of interest by passing a function to as an option when configuring pedigreejs. See example 3. Alternatively set 'edit' in the configuration to false to disable and hide the data dialog.
The Jasmine test framework is used to provide tests for the JavaScript. It can be installed and run from the root directory as follows:
pip install jasmine jasmine server
Then visit 0.0.0.0:8888 in a web-browser to run the tests.