HydroLang Markup Language: Community-driven web components for hydrological analyses

API

Application Programming Interface

CRUD

Create-Read-Update-Delete

CSS

Cascading Style Sheets

cfs

Cubic feet per second

CWC

Common Web Clients

DOM

Document Object Model

ES6

ECMAScript 6

geoJSON

JSON for geographic data structures

GET

HTTP method used to request data from a resource

GIS

Geographic Information Systems

GUI

Graphical User Interface

HL-ML

HydroLang Markup Language

HTML

Hypertext Markup Language

HTTP

Hypertext Transfer Protocol

JSON

JavaScript Object Notation

ML

Markup Language

NN

Neural Network

NOAA

National Oceanic and Atmospheric Administration

SVG

Scalable Vector Graphics

UI

User Interface

USGS

United States Geological Survey

VBScript

Visual Basic Scripting Edition

W3C

World Wide Web Consortium

XML

Extensible Markup Language

Environmental analysis is inextricably tied to enormous volumes of data and monitoring efforts (Muste et al. 2017). The formats, structure, and requirements of these datasets differ depending on the domain and the scope of the research. To maintain a degree of integrity and dependability necessary to undertake an analysis, appropriate depuration procedures must be used. Thus, computational tools have been implemented for decades to circumvent the latter, allowing for better data analysis and workflows and producing accurate and appropriate outcomes. These tools have been used to gather information, clean and process, display, modify, and run mathematical models. Nonetheless, professionals in both academia and industry have faced several obstacles in keeping up with the plethora of programming languages, libraries, and standards that emerge regularly. Studies show using programming languages might present hurdles for researchers who lack the essential knowledge or time to learn how to properly apply scripts to perform their jobs (Bosse & Gerosa 2017; López Pimentel et al. 2021).

Several programming languages and applications have been used to create better and more efficient computing tools in the environmental domain. MATLAB, R, and Python are three of the most commonly used programming languages in academia. MATLAB is frequently used for signal processing as a completely mathematical construct with a variety of arrays and modules that use simple syntax for matrix operations but is restricted because of its proprietary agreements. Both R and Python are extensively used scripting languages for comprehensive scientific computing, with R being primarily used by academics for statistical and probabilistic research and Python being widely used for Geographic Information Systems (GIS), data manipulation and integration, and even web development. Moreover, the recently launched platform, Jupyter Notebooks, provides an expansion on the programming language, Python, to perform computationally intensive tasks both on the client and the server side through a cell-based interface for visualization and computation.

The environmental sciences have made extensive use of web technologies for analysis and communication needs. In particular, web development tools have been successfully used in real-time flood mapping systems (Hu & Demir 2021; Li et al. 2022), ethical decision-making (Ewing & Demir 2021), disaster mitigation analytics (Yildirim & Demir 2021; Alabbad et al. 2022), decision support systems (Teague et al. 2021), geovisual data analytics (Xu et al. 2019; Sit et al. 2021), and immersive virtual reality applications in environmental science and hydrology (Sermet & Demir 2020). Specifically, markup languages and similar ontologies have been used in many environmental studies (Yeşilköy et al. 2022) including the generation of comprehensive flood event specifications (Haltas et al. 2021) and markup language for flood information, forecast, and alerts (Xiang & Demir 2022). Even while it is straightforward to create full systems that function using JavaScript as the primary programming language, there is still room for additional advancement in terms of user adoption, such as the deployment of Hypertext Markup Language (HTML)-like libraries.

Many paradigms have been implemented and explored to create optimum performance and execution of tasks in web platforms focusing on computation libraries (Sit et al. 2019) and novel data structures (Demir & Szczepanek 2017). One of the most popularized approaches is the use of component-based models, which is a branch of software engineering emphasizing the separation of concerns throughout an application to create a reusable approach to definitions, implementations, and extendibility (Mraz 2019). Recently standardized, the use of web components provides an integrative approach to component-based development. This relatively new web technology is a set of standards that enable reusable custom elements for web applications, allowing for cross-platform functionality and the creation of reusable code that can be rendered in any web browser adhering to industry standards.

The literature review identifies a substantial gap for a web component application that performs a hydrological and environmental analysis to download, clean, analyze, and visualize data through the use of web components. HydroLang Markup Language (HL-ML) is an open-source integrated programming interface that supports research and education in hydrology and environmental sciences, which is powered by the HydroLang framework (Erazo Ramirez et al. 2022) through the use of web component technology. It was developed using a component-based user interface (UI) architecture to integrate the modular assembly of HydroLang.js through the usage of semantic structures to provide an easier and more intuitive platform to perform strong analysis through web browsers. The technology allows the usage of all the modules and components of the HydroLang framework with added integrative data manipulation using the local storage memory allocation of web browsers to manipulate data according to the user's needs.

Throughout the article, Section 2 discusses web components as a technology, how they have been implemented and used across web platforms, and the associated applications the technology has had in industry and academia. Section 3 goes into the architectural design process and implementation methods used, as well as the relationship between the interface and the HydroLang.js framework, demonstrating how the interface is used in an HTML element to access each module within HydroLang. With an example of how the interface is used for retrieving, cleaning, and displaying hydrological data, Section 4 displays the results and discussions, emphasizing the necessity for the semantic development of web components for hydrological analysis. Finally, Section 5 discusses the conclusions and future research.

Microsoft HTML Components (Microsoft 2013) and Mozilla XBL (W3C 2012) were the first attempts to establish web components as a standard across web platforms. This first began in 1998 to expand the Document Object Model (DOM) by adding new properties that could aid in changing behaviors through the use of various tags that relied on JavaScript or Visual Basic Scripting Edition (VBScript). The components' implementation was limited, and Microsoft abandoned the feature after multiple tries, deprecating it with Internet Explorer 10 in 2011. The second started in 2001 to extend default DOM tags to provide customized behavior, but despite the fact that the additions worked across all Mozilla products, it was deprecated and abandoned in 2012.

Angular (Google 2022) and React (Facebook 2022) web frameworks were developed by Google and Facebook in 2009 and 2013, respectively. Angular provided improved semantics in web apps by allowing developers to design customizable tags, and React is being used to address the demand for reusable widgets, allowing many companies around the world to leverage the platform's implementation.

The World Wide Web Consortium (W3C) web component specification (W3C 2014) introduced a definition for expanded DOM usage in 2012 to standardize the idea of customized and reusable tags across all web browsers without any vendor library restrictions. The components are made up of four different principles that work around each other:

Custom Elements: It allows the construction of custom tags and determines their usage, attributes, how they interact with different events, and rendering alternatives.

Shadow DOM: It allows to expand an enclosed version of the DOM tree, including an HTML script that is not available through the Light DOM.

HTML Template: The template tag enables the rendering of any stated tags within the DOM tree, allowing for element mutability and extensibility.

Following the release of the web component standard, various third-party libraries were created to provide users with an easy-to-use development environment. Stencil (Rotman & Oliver 2022), Litcomponent (Lit 2022), Material, and Polymer (Polymer 2020) are some of the most popular frameworks. These front-end frameworks have been frequently used as alternatives to web components because of their ability to develop quick and simple components that act similarly to standard components but with the drawback that they are not portable and are bound to certain contexts.

Despite the fact that the usage of framework-based components has grown in the previous decade, the constant requests made to servers by clients and applications decrease response times and, as a result, degrade application performance. The key benefits of adopting the W3C web components including Application Programming Interface (API) are the robustness of the applications built, as well as the ease with which they can be maintained and changed to fit into any workflow, and their extensibility to be recoupled into new browsers or apps (Krishna 2022). Some of the disadvantages of using components stem from their restrictions on styling, particularly Cascading Style Sheets (CSS), and incompatibility with native elements. In addition to the fact that the components are not fully supported on all browsers, they are also misunderstood and misapplied because of the lack of information on usage in comparison to other frameworks, with the possibility of problems arising from nested functionality.

An increasing interest in the creation of applications in academics has emerged in addition to industry-driven applications that leverage web components to create tools for social media and mass communication, with examples including use cases in both natural and social sciences. For instance, since 2009, the ChemDoodle library (Burger 2015) has been available, and it is the first chemistry toolkit to view and modify data using just web components via the Common Web Client (CWC) standards. It is mostly used for generating 2D and 3D chemical graphics, as well as changing molecular data by putting it into a JavaScript Object Notation (JSON) file, which is then displayed using HTML-specific technology. In the field of genomics, MetExploreViz (Chazalviel et al. 2018) is a web component library that provides features aimed at visualizing metabolic networks and pathways in a biochemical context. The application was developed on a modular architecture that is embedded into a website and available through a basic graphical user interface (GUI). It leverages external libraries like D3.js to create high-quality scalable vector graphics (SVG). Executable HTML (Batalas et al. 2021) is a collection of custom HTML elements in psychology that allow authors to write and execute procedural logic in HTML5 through web components, with the primary goal of manipulating subtrees added as questionnaires, which are reproducible and accessible to users with little experience with web technologies and programming in general. Its main goal is to evaluate the use of ambulatory assessments from the standpoint of a non-programming expert.

Web components have been employed in GIS in the same way as in other web technologies to build widgets and apps that can be replicated across several interfaces. Calcite Design System serves as an example (ArcGIS 2022) being a set of design and development resources for the development of attractive and simple-to-use mapping apps. Instant Expert (Sermet & Demir 2021) is an open-source semantic web framework that is based on integrated voice-enabled smart assistants through any online platform, independent of domain or technology, using the extendibility and reproducibility of web components. It is adaptable to a variety of study topics and uses both machine-learning algorithms and web components for natural language processing to allow non-technical domain experts to add operational helpers.

Educational studies have also benefited from the use of web components, particularly in libraries and bookkeeping systems. The comparison between the reusability of custom elements and the use of widgets for displaying options for library patrons and control for librarians with little to no programming experience has been researched by Wusteman (2019), highlighting how the use of web components can drastically change interoperability within the library setting and allow for better control of the interactivity required from computer-based searching and sorting operations. Additionally, the web component standards have also helped in the development of loosely coupled server and client-side components that allow real-time communication between front and backend interfaces due to the isomorphic nature of JavaScript and the asynchronous behavior of web applications (Triglianos & Cesare 2015).

Despite the growing number of applications focusing on hydrological applications, there is a gap in the literature of studies using web components in the field, providing an opportunity to explore the usage of web component technology to address the needs of research in hydroinformatics.

HL-ML was created in response to the need for simple, easy-to-use frameworks for performing analysis using web technologies. The majority of programming interfaces have their own ontological design that follows specific criteria for an analysis based on the user's needs. Though this is still true for this project, being supported by the powerful computational engine of HydroLang.js, it makes use of standardized technologies to generate object-relational arguments that can later be passed onto the aforementioned framework to perform the required analysis via semantically driven instructions. It allows researchers, educators, and members of the general public with limited programming experience and an environmental analysis interest to use markup language to retrieve, clean, analyze, and visualize information on the client side with little or no further manipulation required. Furthermore, it enables users to manipulate data from the web browser's local storage, providing full Create-Read-Update-Delete (CRUD) operations that may be readily scaled into other databases if necessary. The project's major goals and contributions can be summarized as follows.

• Create environmental-specific HTML tags for computational tasks using standardized versions of web components adopted by major web technology providers.

• Provide a user interface that enables semantically driven instructions to be easily written using a stepwise ontology.

• Leverage the use of common standards for storing information via web browsers to save data manipulated directly by instructions provided in an HTML file.

• Improve the usability and accessibility of the majority of the functions integrated into the HydroLang.js core framework.

• Develop a high-level abstraction for the use of computational frameworks and libraries that can be readily copied and changed to fit any required context.

The latest version of the framework adopted the ECMAScript 6 (ES6) standardized functional destructured parameters to access all the methods, leveraging the adoption of the features in major web browsers like Chrome, Firefox, and Edge. The usage of JavaScript's object-oriented nature allows for the integration of the commonly used separation of interests within each function. Since the methods included in HydroLang often require several types of instructions and data, the destructuring set for development can be found in Table 1.

This information was adopted to enable a more efficient development process for extendibility and reliability, standardizing how the community approach should follow the usage and implementation phases while maintaining a modular architecture. The documentation for each of the methods included in HydroLang.js, as well as case studies with the full implementation of most methods of the framework, can be found in the software's repository (Erazo et al. 2020).

HL-ML was built with the primary focus on data integration and manipulation by combining the capabilities of web components using a semantic approach that triggers instructions based on information fed by the users. Five separate custom elements that seek to register, alter, and control data are used to manipulate the given information and create a direct link with the HydroLang.js library, serving as an abstraction of the framework and main interface for easier usage (Table 2).

Deferred routines to manage data reading and writing have been added to the main component methods to handle the asynchronous behavior of most data queries provided in HydroLang, as well as the static nature of HTML. Because HTML does not execute sequentially driven code, any process handling is done inside the functions of the main component. The deferral routines included the use of the type of instruction the user is sending within a component to adopt the processes to be awaited. For example, if a user retrieves data from any of the available sources, the data will be saved in local storage with a name specified by the user or automatically generated.

Following that, the user must refer to the data using the specified name for additional analytical purposes. This must be done while waiting for the procedure to be completed. If the named object is still inaccessible on the local storage, an error message will be displayed indicating the reason. Furthermore, the modules follow the same pattern for data processing, accessing HydroLang instances, visualization modules, and any other requests. The use of the dynamic refresh feature of web pages and browsers has also been integrated into the design.

Each element was built using a reusable taxonomy that adapts to the expected growth of the HydroLang framework, with the ability to add new functionalities and modules to give stronger and more reliable analysis. Other implemented modules will be accessible through the HL-ML API as the framework expands, allowing for the continued adoption of easy-to-use software.

Figure 6 shows the declaration of HL-ML. The script element is used to load HydroLang.js into an HTML page, which can then be used in the console of a web browser. This is done by either inserting another script element into the HTML or using the console to call the library. The user must provide variables as JavaScript datatypes to use as parameters, arguments, and data in each module's methods. Using HL-ML, there is no need to specify variables beyond the scope of the HTML page. The custom names assigned to the web components make the library accessible. The tags, which are put within an additional divisor tag on the HTML script, include all modules once the page goes live in order to preserve order throughout the DOM tree.

The retrieval of data from any source requires specific request information to be sent to a web service, as shown in Figure 7. For example, if the data required is from the United States Geological Survey (USGS) API, the user needs to create an object that declares all the information to be later passed as a Hypertext Transfer Protocol (HTTP) method used to request data from a resource (GET) request through the HydroLang data module. The retrieved information is prompted as a local variable that can be accessed through the console of the web browser and is lost after the page is refreshed. HL-ML creates the request from the given tags passed by the user, with the results being downloaded and saved in the web browser's local storage with the name from the ‘output’ tag, serialized and saved as a string. Data manipulation (such as transformation, analysis, visualization, or deletion) is made possible with HL-ML within the browser's environment by saving data in the local storage.

Data visualization through HydroLang.js is done synchronously through the visualize and maps modules. With no stored object available, any visualization dataset should be declared before it is passed to the visualize functions. Using HL-ML, if there is data stored in the local storage that contains a specific name passed by the user, then it will be rendered to the screen, circumventing the asynchrony of the required APIs. An example declaration of both modules is shown in Figure 8.

Along with the data module, the analyze module contains several methods for the creation of powerful hydrological, statistical, and machine-learning analyses. Well-known routines used by experts in the field, as well as novel approaches highlighting the capabilities of new technologies and methodologies, have been implemented within the module. An example declaration of the analysis module is shown in Figure 9. Most methods contain several parameters required to drive a computation, and through the usage of HL-ML, the information in place is significantly reduced. The data are accessed by any function using the name of the output results recorded in the local storage.

HL-ML incorporates HydroLang.js's powerful architecture to provide users with a seamless instruction-based interface that allows for easy-to-use and powerful commands for analysis in hydrology and environmental sciences. It allows for the visualization of many types of data (JSON, XML, map rendering, charts, and tabular structures), the retrieval of data from various sources throughout the world, and the execution of hydrological and hydraulic analysis. All of this is done through markup language, requiring basic knowledge of programming.

The web component standard's quality assurance allows a greater interpretation of the technology's scalability and its potential to become a high-level standard for web development. Studies have assessed the quality of information during user testing on web applications, highlighting that the W3C standardized web components provide a greater sense of understanding of usage and implementation (Lizcano et al. 2020). This paves the way for applications such as HL-ML to be scaled for public technological outreach. Furthermore, aside from research, the ease of use of the framework creates opportunities in most levels of academia, from high schools to university classrooms, with a tool that enables students to gain an understanding of web applications and high-level programming applied to environmental sciences.

To highlight the ease of use of HL-ML, a case study was carried out for the retrieval, cleaning, and visualization of rainfall data from sources included within the framework. The flood events of June and July 2008 in the Midwest created severe damage throughout several counties in the state of Iowa. Using the National Oceanic and Atmospheric Administration (NOAA) and USGS data sources, the available data stations were obtained for the dates prior to the flooding event to see data availability, as shown in Figure 10. The result request was saved and afterward rendered using the visualization component. From there on, a station in Iowa City was selected to retrieve hourly precipitation data obtained through volumetric weighting, as well as streamflow data from the nearest station downstream of the precipitation gauge. The recording for streamflow was obtained from the USGS as shown in Figure 11 and is statistically derived in half-hourly intervals, while the precipitation record was obtained from the NOAA from real-time observations in hourly intervals. Both queries were obtained between May and July 2008, with most of the records for precipitation being lost when the flooding event happened.

The recovered data were stripped from any additional information that was not useful for the analysis, and afterward saved as a new variable in the local storage with an appropriate nametag, storing the date and the value for each record. The data were afterward analyzed by applying basic statistic functions within the framework, calling the stats component. The result of the analysis was afterward rendered as tables to screen as shown in Figure 12.

Web components are used for a wide range of purposes from social media to information applications to the academic community. The main goal of this project is to introduce the technology behind web components in environmental and hydrological sciences to allow users with limited programming experience to easily process, analyze, and visualize data through the use of an intuitive HTML design linked to a powerful engine deployed only using browser technologies. The design's ontology allows for future growth of the HydroLang.js framework to be directly used within HL-ML, allowing for greater framework capabilities and a better user experience.

The HL-ML interface allows easy manipulation of the methods implemented within HydroLang.js, subject to the accuracy of the data acquisition, management, and implementation. However, this interface is limited by the type of data and analysis it can perform. As evidenced by the case study, the storm event data displayed alongside the retrieved streamflow does not fully capture the complexity of the 2008 floods. Therefore, HydroLang.js and HL-ML users must understand the limitations of the available data and its applicability to scientific and academic research. The use of HL-ML will allow the expansion of the community of users for the HydroLang.js framework, complementing its development in a circular loop with the integration of new modules and the possibility to expand through a community-driven approach. By integrating visual plug-and-play programming and analytics platforms serving intelligent hydrological modeling, HL-ML acts as a step forward for future releases of HydroLang.js. Furthermore, it is the first step in the development of components for environmental and hydrological platforms that can use the technology to undertake various sorts of analysis via the replication of instructions in self-contained declared objects.

All relevant data are available from an online repository or repositories (https://github.com/uihilab/HydroLang-ML).

The authors declare there is no conflict.