A Dynamic Web-based Application for the Classification of Vascular Anomalies

Abstract

The International Society for the Study of Vascular Anomalies (ISSVA) released the most recent version of the classification of vascular anomalies in 2018.1 This revision of the 2014 classification expanded the scope of clinical entities and included molecular diagnostics. The 2018 report incorporated recent discoveries in the field and was released as a 20-page PDF file navigable through embedded links. The links lead users through the classification hierarchy, and each page lists anomalies, their corresponding genetic mutations (if known), and other details. Further information is found in five appendices in the last seven pages of the report. The document is comprehensive, but the structure has drawbacks in usability, organization, and sustainability. The format is rigid and difficult to update. The vascular anomaly field is new and ever growing. In just the past few years, there have been significant advances in discovering new clinical entities and uncovering the genetic basis for these conditions. The PDF-based classification cannot be updated routinely without reformatting entirely. Therefore, this format is unsustainable as new discoveries are made. The PDF format classification also limits organization, ease of use, and navigability. It includes a hierarchy of anomalies and categories organized into tables with internal page links that are difficult to navigate. The embedded links guide users to various pages throughout the document, which provides a nonlinear and somewhat confusing user experience. Additionally, the format of each page was unique (to accommodate custom information), and this lack of standardization stifles the user experience because of the inconsistent location of relevant information. Finally, the indices store information that cannot be placed on the appropriate PDF pages (because of space limitations), which makes navigating back and forth tedious. The aim for a new format was to streamline the design and solve the limitations of the current PDF format. We engineered an interactive web app format, which sustainably supports future updates. The classification is organized into a tree, with nested expandable nodes containing the anomalies in a hierarchical structure, similar to that of a file explorer. With this format, a user can expand the tree to view individual anomalies, associated information, and the entire hierarchy in a common location. The visual hierarchy provides a natural organization of the classification for a more intuitive experience. The app has a consistent format throughout, and it is easily modified. Minor additions and changes can be implemented quickly, without altering or compromising the framework of the format. The web app supports including additional anomaly-specific data through the use of popover buttons, which improves organization while providing comprehensive information. Popovers may contain clinical and radiological images (Figure 1), footnotes for unusual or exceptional cases (Figure 2), genomic information, and others if necessary. Additionally, we included search functionality via autocomplete “smart” select boxes (Figure 3). The user can search for a specific term by selecting it from an alphabetical list, or by typing into a free text field that limits selection to specific options dynamically. When searching for a specific anomaly, the web app opens the tree to the selected entry while briefly highlighting the entry itself and its parent nodes. Separate selectable dialog boxes allow the user to search genes and abbreviations without navigating away (Figure 4).Figure 1.: Expanded tree view of vascular anomalies classification hierarchy. Image popover shows clinical image of infantile hemangioma.Figure 2.: Popover with additional information about rapidly involuting congenital hemangioma.Figure 3.: Search function opens the tree to the selectable term (arteriovenous malformation in this case), automatically scrolls down the page, and highlights hierarchy.Figure 4.: Gene Search and Abbreviation Search dialog boxes with option filtering and autofill. The search buttons remain affixed to the bottom for easy look-up even as one scrolls up and down the tree. One can lookup terms without losing one’s place in the tree.The tree is rendered dynamically from a single data structure, which allows for flexible modification and efficiency. When data are changed it is instantly reflected in the classification. This makes minor or major alterations feasible and practical, in contrast to labor-intense reformats of PDF releases. The vascular anomaly field is changing rapidly with the recognition of new clinical entities and the identification of genes responsible for disease. This app format allows for real-time classification updates. The web app was created using React, a JavaScript library. It is a mobile-friendly application currently hosted at https://vascularanomalies.net. A pure client-side program, it can be embedded easily on the ISSVA website and updated to reflect any future changes rapidly.