PedigreeOnline: a new web server for two-way interactive pedigree drawing

Pedigree drawing is of special importance for genetic counseling and research on documenting families with inherited disease. Current pedigree-drawing tools fall into two types: those build pedigree diagrams from input family data, and those provide a graphical interface to draw pedigree directly. Here we merge the two types of programs into one, and release a brand new pedigree-drawing web server, PedigreeOnline. Through introducing a novel pedigree-like-layout (PLL) family data format and taking advantage of HTML5 canvas element in development, this program is able to build two-way interactive connections between family data and graphical interface. Users can work on and switch easily between the graphical interface and the family data window. Currently this web server is compatible with Linkage data format and comma-separated value (CSV) data format. These features make PedigreeOnline a pedigree-drawing tool with outstanding user-friendliness and exibility. PedigreeOnline is freely accessible for everyone at: http://www.ig.zju.edu.cn/PedigreeOnline/


Introduction
Collection, update and visualization of family history (pedigree data) are of crucial importance for genetic counseling and genetic research on families with inherited diseases. A variety of pedigree-drawing tools including stand-alone and web-based programs have been developed. These programs fall into two classes: those that generate pedigree diagrams from the input family data, and those that provide graphical interface for users to draw pedigree directly.
For the rst type of programs such as Madeline 2.0 [1] and CraneFoot [2], family data is stored and manipulated in a multi-column table, in which each line is used to describe information for each family member, including healthy ones. However, only limited information for healthy members is needed to build a pedigree, and healthy members usually constitute the vast majority in most families under study.
Moreover, even for the information such as proband status, the table needs one column to label it although there is only one proband member in the whole family. Therefore, such a multi-column table dramatically increases the size and decrease the readability of the data le, and manual creation of these les therefore becomes time consuming and error prone.
For the second type of programs, drawing on the graphical interface improves the user-friendliness, but the users have no option to save their state les in some programs, or in some other programs they have to save their graphical state les within the registered account, which makes the future update inconvenient. Some recent programs such as pedigreejs [3] and panogram (http://panogram.github.io/panogram/) made improvements and allow users to draw pedigree on the graphical interface and export the family data le for future update. But these data les are designed only for the programs and not readable for users, therefore users have to import the data le back into the program and work on graphical interface for any change or update. In many cases, another data set understandable for users still needs to be maintained separately.
A recent survey showed that nearly half of cancer genetic counselors (CGCs) were considering adopting or changing their pedigree drawing tool [4], and meanwhile they were concerned about budget and compatibility of the new tool to their old data [5]. Therefore, there is a need to provide freely-accessible pedigree-drawing tools with satisfying user-friendliness and compatibility for the geneticists and counselors. The difference in the structure of the family data in which each line represents an individual and the structure of the pedigree diagram in which each line represents one generation forms an obvious obstacle between pedigree datasets and diagrams, leading to different limitations of the two types of programs as mentioned above. Here we overcome these limitations through introducing a novel family data format and merging the two types of programs into one, and release a brand new pedigree-drawing web server, PedigreeOnline.

THE PedigreeOnline WEB SERVER
PedigreeOnline is a lightweight pedigree-drawing web server of considerable user-friendliness. It is written in JScript, and works with any web-browser supporting HTML5. PedigreeOnline provides a convenient and free access to all nal users, and no registration is needed. PedigreeOnline is featured with a novel family data format, two-way interactive mode between family data and pedigree, and compatibility to other family data formats.
The Pedigree-Like-Layout (PLL) family data format PedigreeOnline has two windows: family data window and pedigree drawing window. To show the family data consicely within the on-screen window and make data easy for editing, we've introduced a novel pedigree-like-layout (PLL) family data format. This PLL format is absolutely different from any other previously reported family data format in which each line represents one individual. In the pedigree-likelayout format, as its name suggests, family information is arranged with plain text following the structure of a pedigree, that is, different generations are arranged vertically, and information of the same generation is depicted in one line. In the PLL format ( Fig. 1A), from top to bottom, each line starting with the signal "#" stands for one generation. A typical generation line is composed of kinship information and phenotype information. The kinship information lists all members of this generation in this way: siblings from the same parent are placed within one parenthesis, with their parents names (father's name on the left, mother's name on the right) designated before the ":" sign. If the parents are close relatives, their names are connected with "-", otherwise with "+". The kinship information and phenotype information are separated with the "/" sign. In phenotype part, individuals with certain phenotypes are explicitly listed after the corresponding phenotype code (Fig. 1B). Different phenotype elds are separated with the ";" sign. After the generation data block, remark information is given after the "*" sign. Such a novel description method drastically decreases the size of the data, and the family data can be easily shown and edited within the on-screen window. Moreover, because family relationship is represented in a more straightforward way, data readability is effectively improved. Because the family data is small in size and the data arrangement directly re ects the pedigree layout, updating information for an existed family such as adding a new member or changing siblings order can be easily accomplished. In contrast, in the traditional multi-column table, updating family information such as adding a new member needs to be very careful, especially when the new entry is far from her/his parents and siblings in space.

Two-way interactive connections between family data and pedigree diagram
PedigreeOnline has two major windows: the family-data window and the graphical diagram window. Through introducing the concise and friendly PLL family data format and taking advantage of the HTML5 canvas element in development, we build two-way interactive connections between the family data and the graphical interface (Fig. 2). Users could type or edit the PLL family data within the familydata window, and build a pedigree diagram through a simple click. They could also work on the graphical interface, and any change on the pedigree diagram causes synchronized change in the family data. Users could switch very easily between these two windows at any time when drawing a pedigree.
The algorithm for symbol layout in pedigree diagram In PedigreeOnline, the symbol layout is calculated and adjusted anytime when a new member is added.
To get a beautiful symbol layout, we've used the algorithm shown in Fig. 3. In the rst step, positions of symbols of the latest generation are calculated (Fig. 3A). These symbols are grouped by parents and arranged in the order of birth from left (youngest) to right (oldest), with equal space leaving to every symbol. Above the siblings in the same family, horizontal lines and vertical lines connects these symbols. Calculate the center of horizontal (sibling) lines in same family, based on which symbols positions of their parents can be determined. In the second step, positions of symbols of the previous generation are calculated. Those individuals without children are added, and the siblings in this generation are also arranged in the order of birth from left (youngest) to right (oldest). Positions of the added symbols are determined by the position of the rst parent symbol with children. If there is enough space for the added individuals, no movement is necessary (Fig. 3B). Otherwise some parents together with their children need to move the same distance to the right to avoid any overlap (Fig. 3C). Then repeat the the second step, until the rst generation.

Compatibility with other family data formats
In addition to this new PLL family data format, the common Linkage format and comma-separated value (CSV) format can also be loaded into PedigreeOnline for pedigree drawing, after transforming to the PLL format through the interface provided. Moreover, due to the signi cance of the Linkage format in genetic analysis, PedigreeOnline also provides a function to transform our PLL data to the Linkage format. Such a two-way transform function dramatically improves the exibility and compatibility of the software.

Input
In PedigreeOnline, users have various ways to input their family data and draw a pedigree. 1). Type in or paste PLL family data in the on-screen window.
The PLL format is very concise and easy to follow, so users can easily type in the PLL family data within the on-screen data window ( Fig. 2A). They can also copy and paste their previously saved PLL data to the on-screen data window for update.
2). Draw pedigree directly on the graphical interface.
By utilizing the canvas element in HTML5, drawing on graphical interface becomes very easy. Click on any symbol in the pedigree diagram (Fig. 2B), a symbol editing window (Fig. 2C) will pop up, where users can set up or update information of an individual. Siblings or children can be added through simply clicking on the left/right or downward arrows at the bottom of the window. Deleting an individual from a pedigree can be simply ful lled by clicking on the "×" icon on the window. When adding the rst child for an individual, the program will automatically generate a spouse of the opposite gender.

3). Load an existed le in CSV format.
For any existed family data saved in the multi-column table, users need to modify it according to the format provided in our website, and then save it as CSV le before loading it to the PedigreeOnline. The loaded CSV data can be easily transformed to the PLL format and then used to build pedigree.

4). Load an existed le in the common Linkage format.
Following the suggestions of the editor after the initial evaluation, we've added the function to allow users to load the family data in the common Linkage format. Users can import the Linkage le, and transform it into the PLL data before building the pedigree diagram.

Output
As mentioned above, because of the two-way communications, the family data window and the graphical diagram interface can serve as both input and output windows. In PedigreeOnline, users can easily generate a beautifully arranged pedigree diagram. The size of the graphical window adapts automatically to the size of the pedigree diagram, and if the diagram goes beyond the screen, a scrollbar will appear at the bottom of the screen. The symbols in the diagram follow the recommendations of the PSTF [6], and all the symbols supported by the current version are listed in the Fig. 1B. In addition to building a standard pedigree in which each individual is labeled with an Arabic number (Fig. 4A), users can also create a pedigree with all individual names shown (Fig. 2B), for the convenience of the in-house research. If the family data is transformed from the Linkage format, the genotype information in the Linkage data is saved in the rst line of remark eld in the PLL data, and users have options to explicitly show the genotype information on the pedigree diagram or not. This operation can be made to all individuals or speci cally to one individual. If the genotypes or other remark information of all or some individuals are shown on the pedigree diagram, the space between symbols will be adjusted accordingly (Fig. 4B). The pedigree diagram can be saved as a PNG gure of publication-quality.
When pedigree is drawn or edited within the graphical interface, the family data updates automatically, therefore when the pedigree drawing is nished, the updated family data need to be saved. As the PLL data is in plain text, it can be saved and edited anywhere as users like. Due to the importance of the Linkage data in genetic analysis, PedigreeOnline also allow users to transform the updated PLL family data to the Linkage format.
Limitations and future directions: The current version of PedigreeOnline still has some limitations. The resolution of the individual number or names shown in the diagram needs to be improved. Users can only draw a pedigree from the rst generation downward to the later generations, and can not add a new member in a reverse direction. Therefore, only the family history from either paternal part or maternal part of a proband can be drawn.
Complicated situations such as consanguineous loops can not be shown in our diagram. We plan to overcome these limitations in the next version of PedigreeOnline. Efforts will also be made to improve the graphical editing ability of the pedigree window, for example, allowing users to select and extract a subgroup from a big pedigree.

Conclusion
Through introducing a novel pedigree-like-layout (PLL) family data format and taking advantage of the HTML5 canvas element in development, the new pedigree-drawing web server, PedigreeOnline accomplishes a two-way interactive mode between family data and graphical interface. In this way, drawing and updating a pedigree diagram become extremely easy and exible. In PedigreeOnline, the PLL family data format and the common Linkage format can be transformed reciprocally, which will make the software more useful and popular among a broad group of geneticists and counselors.

Declarations
Funding This work has been supported by the National Natural Science Foundation of China (Grant No. 31400709 to X.C.) and Natural Science Foundation of Zhejiang Province (Grant No. LY18C050002 to X.C.).

Con icts of interest/Competing interests
The authors declare that they have no competing interests.
Availability of data and material Not applicable.

Code availability
Source code is available upon contacting with the corresponding authors.
Authors' contributions Y.C. wrote the code, X. C. conceived and supervised the project, Y.C. and X.C. wrote the paper Ethics approval Not applicable.

Consent to participate
Agreement for data publication was obtained from all individuals included in the study.

Consent for publication
Agreement for data publication was obtained from all individuals included in the study.    As there is enough space for the added symbols, no movement is necessary. (C) When there is not enough space for the added individuals (c1,c3,c4,c5), the sub-family (c6,c6+,b1,b2,b3) needs to move as a group to the right to avoid any overlap.