ZENBU-Reports: a graphical web-portal builder for interactive visualization and dissemination of genome-scale data

Abstract In the genomic era, data dissemination and visualization is an integral part of scientific publications and research projects involving international consortia producing massive genome-wide data sets, intra-organizational collaborations, or individual labs. However, creating custom supporting websites is oftentimes impractical due to the required programming effort, web server infrastructure, and data storage facilities, as well as the long-term maintenance burden. ZENBU-Reports (https://fantom.gsc.riken.jp/zenbu/reports) is a web application to create interactive scientific web portals by using graphical interfaces while providing storage and secured collaborative sharing for data uploaded by users. ZENBU-Reports provides the scientific visualization elements commonly used in supplementary websites, publications and presentations, presenting a complete solution for the interactive display and dissemination of data and analysis results during the full lifespan of a scientific project both during the active research phase and after publication of the results.


INTRODUCTION
Scientific publications are often accompanied by a dedicated w e bsite tha t manages and organizes the da ta, showcases the analysis results, and offers analysis tools to interact with the data. Such accompanying w e bsites are important both for consortia projects that produce massi v e genome-wide data sets, and increasingly also for smaller projects with limited r esour ces. Usually, these supporting w e bsites are custom-constructed manually for each publi-cation, requiring the services of a software engineer, w e b server infrastructure with large data storage capacity, as well as continuous software maintenance.
ZENBU-Reports builds on the ZENBU Genome Browser system ( 1 ), created as part of the FANTOM5 Project ( 2 , 3 ) to visualize large-scale next-generation sequencing data mapped to a genome. In contrast, the FANTOM6 project genera tes annota tions of gene products, including large amounts of genome-independent information (4)(5)(6). We created ZENBU-Reports to enable scientists to build w e bsites to display and disseminate their genomic and genome-independent data with minimal programming and hardware demands. ZENBU-Reports is a scientific da ta visualiza tion and w e b-portal building w e b application that uses graphical interfaces to build w e b pages while providing secure data management and storage facilities.

MATERIALS AND METHODS
ZENBU-Reports is a Web 2.0 style w e b application consisting of a server and a client ( Figure 1 ). The client runs in the visitor's w e b browser and obtains data from the server through w e b services, taking advantage of the ZENBU server and data management infrastructure for user uploaded data, secured collaborations for data sharing, and fast data access within massi v e datasets ( Figure  1 ). ZENBU-Reports is open source and can be installed on a local server if one chooses not to take advantage of the RIKEN server infrastructure.

Server side infr astructur e
Server side code is written in C++ to optimize speed performance and minimize memory usage. ZENBU ( 1 ) uses a flexible data model and an on-demand stream-processing design ar chitectur e (Figur e 1 ). In ZENBU-Reports, we cr eated Figure 1. Ov ervie w of the relationship between ZENBU Reports (top right), the ZENBU genome browser (top left) and the ZENBU server side (bottom) with w e b services, federa ted da tabase, da ta upload, and secured collabora tion da ta management system. a novel data storage and indexing system to efficiently store and retrie v e paired data such as Hi-C interaction maps, network graphs, lists of differentially expressed genes, and gene enrichment anal ysis results, w hich can be joined to gether into complex data hierarchies providing on-demand data loading capabilities. Taking advantage of the existing data previously uploaded into the ZENBU genome browser, we provide an integrated environment to visualize genomics, tabular, and interaction data.

Client-side code
The visualization and interface code is written in objectoriented JavaScript that renders w e b pages with HTML, SVG or by utilizing graphical toolkits where appropriate. Selection, filters, and searches on loaded data are managed in the w e b browser for immediate updates to the w e b page, while e v ent-triggers allow for on-demand data loading. Data are queried from the server, and can be shared between Elements on a page. Following the ZENBU data model and functions ( 1 ), all Elements inherit from a single superclass to simplify extending existing Elements or adding new Element types in the future.

Super class shar ed functionality
The superclass queries the server through the ZENBU w e b services , parses its response , and stores the data as objects in arrays with various tagged metada ta. Dynamic da ta loading, data processing, and visualization is provided by triggers, which include interaction e v ents like selecting a data point or row, as well as system notifications generated for example upon completion of specific tasks. The trigger system is configured via a graphical interface with predefined pull-down lists to specify which e v ents cause the trigger, which target Element the trigger will notify, and what action should be performed by the target Element. Triggers can be cascaded to allow for complex behaviors.
The data sources and the overall appearance of the Element can be specified through a core configuration panel. In addition, a common set of sub-panels allows for interaction with the loaded data: • a data columns panel shows the different column / attribute types of the returned data objects and provides an interface for choosing which columns are shown by default and which columns visitors are allo wed to sho w or hide, for changing the column order, and for renaming columns; • a search panel for text searching, supporting the logical operators AND, OR, NOT, and search term grouping that are available throughout ZENBU; • a data filter panel for a ppl ying min / max limits on numerical signal columns; • a data download panel for returning the filtered results.
Page la y out algorithms allow for Elements to be placed at fixed locations on the page or nested into La y out Elements of rows, columns or tab structures to create complex layouts, allowing for configuration of left / right or top / bottom justification depending on context. The page la y out system provides a user-friendly drag-drop and snap-to-location interface to place elements on the page.

Subclass specific visualization and functionality
Element subclasses implement the specific configuration panels, as well as functions and any additional data processing r equir ed for visualization. Subclasses were implemented using existing toolkits when possib le, and ne wly coded otherwise.
Element subclasses currently in the system are listed below, with their visualization types displayed in Figure 2 .
The Table Element subclass generates HTML code to visualize data in a table format. The table can be displayed in either a paging style or a scrollable window. In addition to the functionality provided by the superclass, the table can be sorted by clicking on column headers. Coloring options and configurable ho ver-o ver features are available.
The T r eeList Element subclass generates HTML code to show a scrollable display of simple lists, nested lists in a tree structure, or radio-button lists as a single column.
The HTML Element subclass provides a space to insert and display any static HTML content, while allowing access to a data object selected in another Element sharing its data.
The Chart Element subclass presents general-purpose charts , graphs , and plots. It takes advantage of the chart.js toolkit ( https://www.chartjs.org/ ) for drawing line, bar, 2d scatter, and bubble charts; and the plotly JavaScript toolkit ( https://plotly.com/javascript/ ) f or displa ying 3d scatter, ternary plots, box plots, and violin plots. Different configuration interfaces are provided as appropriate for each figure type.
The Category Element subclass calculates a histogram of the values in a specified column from a shared Element's loaded data, and draws it as a filter list r ender ed in HTML, or a pie chart, donut chart, or bar chart implemented using chart.js. A filter list includes checkboxes to allow visitors to select categories f or filtering, and ma y visualize the frequency of each category as a horizontal bar chart. Multiple Category Elements can be attached to a common shared datasource (for example a Table) and be used as AND or OR logical filters. A select-all / select-none button is provided f or con venience. After selecting all categories, users may deselect categories that are to be ex cluded, thereb y effecti v ely creating a NOT logical filter.
The Genomewide Element subclass generates SVG code to visualize genomic location data across the entire genome either as a Manhattan plot or as a chromosome view. A Manhattan plot shows chromosome location along the xaxis and numerical signal values on the y-axis. Points can be colored either by chromosome, or by their value on the y-axis or from any other data column, mapped to a color scale. In a chromosome view, each chromosome is drawn as a horizontal bar proportional to the chromosome size. Within each bar, genomic loca tion da ta is drawn as thin vertical lines colored either by chromosome or by their value from any other data column, mapped to a color scale.
The Heatmap Element subclass generates SVG code to draw a heatmap, with rows and columns corresponding to two columns in a data table, while the heatmap cell value is taken from a third column in the table. The color of each cell is determined by its value mapped to a color scale. Multiple heatmaps can thus be deri v ed from a single table by selecting different columns for display. Columns and rows of a heatmap can be independently sorted by column or row label, by a numerical column within the dataset, or by clustering based on the values displayed in the heatmap.
The Cytoscape Element subclass uses the Cytoscape.js ( https://js.cytoscape.org/ ) tool kit ( 7 ) to show a fully functional Cytoscape network graph. Data columns can be selected in the configuration panel to dynamically specify node shape, node color, and edge color.
The ZENBU genome browser Element subclass is a wrapper for a ZENBU genome browser instance. Multiple ZENBU genome browser instances can be included in the same ZENBU-Reports page. Elements on the page can control the genome browser by e v ent-triggers, and genome browser data can be shared with other page Elements.
The Circos Element subclass generates SVG to draw a simplified Circos-like graph showing chromosomes around the edge of a circle, and interactions between genomic regions as arcs through the circle. The colors of the chromosomes and arcs are configurable.
The ColorScale subclass generates SVG code to display a configurable color spectrum scale with numerical range markers and legends. The scale can either dynamically adjust to the currently loaded data, or be set to a fixed range.
The Filter Element subclass generates HTML code to provide an interacti v e interface to the signal filter system, displayed in the foreground of the page. Changes to the filter trigger updates to Elements associated with the filter.
The Search Element subclass generates HTML code to provide an interacti v e search interface for data within a shared Element, displayed in the foreground of the page. Search Elements support the logical operators AND, OR, and NOT, as well as search term grouping.
The Layout Element subclass generates SVG code to draw the la y out while editing a page, and stores the configuration parameters used by the page la y out algorithm.

RESULTS
ZENBU-Reports incorporates design concepts from wikipages , google-sheets / docs , and page-la y out programs, and lets users create interacti v e scientific w e b pa ges by dra gging and dropping data dri v en visualization Elements onto pages and configuring them with graphical interfaces. ZENBU-Reports provides the graphical Elements (exhibited in Figure 2 ) commonly used in article figures and supplementary w e bsites.
The la y out of a ZENBU-Reports page consists of nestable rows , columns , and tab structures. Each Element on a page is associated with data sources that can query a selected set of uploaded da ta. Da ta can be shared between Elements, which enables interactivity while reducing the amount of data transfers needed as well as the load on the server. The Elements on a page can be linked to each other with e v ent triggers, allowing d ynamic upda tes to the data presented. P ages cr eated by a user and data uploaded into ZENBU can be secured and shared only with user-specified collaborations of colleagues. The ZENBU server hardware at RIKEN is self-contained with local data storage, and accessible only to system administrators, providing security and isolation. The w e b portal can be saved to a permanent URL for sharing as a r efer ence in scientific publications. Upon publication, w e b portal pages and data can be opened to the public, allowing any visitor to access and interact with the pages and data.
The following four example pages demonstrate the concept and breadth of ZENBU-Reports: Example 1 : https://fantom.gsc.riken.jp/zenbu/reports/ #heart%20CAGE%20DE This page, created from the Atlas of Heart Promoters and Enhancers ( 8 ), shows genes differentially expressed between atrium and ventricle (Supplemental Figure S1). Genes are listed in a Table and visualized in a linked 2D scatter plot. Category filters can refine the data. Tabs allow for switching from Atrium to Ventricle. A ZENBU genome browser Element displays gene locus, genomic annotations and CAGE expression tracks. The annotation table, the scatter plot, and genomic tracks are connected through an e v ent trigger to highlight shared elements selected by the visitor. Selection of a gene or point in the plot will navigate visitors to the gene's position in the ZENBU genome browser.
To demonstrate how this page may be used in practice, we focus on enhancers supported by both 'consensus regions class' and 'chip class' by selecting those category filters, and hide the 'filtered out' regions in the scatter plot chart. We click in turn on each of the 14 remaining points in the scatter plot, triggering the genome browser to update to the genomic location of the region corresponding to the selected point. When we find the enhancer region overlapping the TRAJ49 gene, we zoom out on the genome browser to inspect the genomic neighborhood, and find in the CAGE tr anscriptome tr acks that this enhancer is highly expressed only in the healthy heart atrium.
A video demonstrating how to build a simplified version of this page is provided here: https: //z enbu-wiki.gsc.riken.jp/z enbu/wiki/index.php/ZENBU-Reports demo building page .
Example 2 : https://fantom.gsc.riken.jp/zenbu/reports/ #FANTOM6 target subcellular localization This page (Supplemental Figure S2) shows subcellular localiza tion da ta of lncRNAs included in FANTOM6 ( 4 ). Visitors can filter lncRNAs by their localization as well as CAGE data availability and promoter class based on DNase I hypersensitivity (DHS) analysis. Filter ed r esults ar e shown in the table, as a 3D scatter plot of the expression levels in cytoplasmic, nuclear, and chroma tin-associa ted fractions, and a ternary plot of relati v e e xpression le v els. Widget subpanels are available for searching and filtering. A subcellular localiza tion ca tegory can also be selected by clicking on it in the legend of each plot. Selecting a row in the table or point in a plot will show the corresponding gene location in the linked genome browser. This page demonstrates how two different visualization Elements can share data from the same table and visualize in different ways.
To demonstrate how this page may be used, we first exclude lowly expressed lncRNAs by applying a filter on the table of lncRNAs ('FANTOM6 DMFB targets') by setting the minimum CPM (counts per million) to 5. We also tick the checkbox in the 'KD CAGE' panel to select lncR-NAs for which CAGE data were available. We click on 'filtered out' in the ternary plot 'Subcellular localization (relati v e fractions)' to toggle it and only show the selected lncRNAs. Hovering the mouse over a point in the ternary plot with low cytoplasmic expression shows that it corresponds to lncRNA DNM3OS. Clicking on this point triggers the genome browser to update to the DNM3OS location. The RNASeq tracks in the genome browser confirm that DNM3OS is indeed lowly expressed in the cytoplasm. In the list of selected lncRNAs, we click on the GSEA hyperlink in the row for DNM3OS, which takes us to the ZENBU-Reports page showing the Gene Set Enrichment Analysis results for this lncRNA.
Example 3 : https://fantom.gsc.riken.jp/zenbu/reports/ #FANTOM6 GSEA ASO This page (Supplemental Figure S3) visualizes Gene Set Enrichment Analysis (GSEA; ( 9 , 10 )) results previously calculated in FANTOM6 ( 4 ), in which long non-coding RNAs were knocked down using LNA-modified GapmeR antisense oligos (ASOs; ( 11 )). Upon clicking on an ASO, an e v ent trigger causes the GSEA results to be loaded into the table and displayed in the linked scatter plot, which shows the P -value on a logarithmic scale and the normalized enrichment score. Clicking on a specific GSEA term in the table highlights it in the scatter plot and vice versa. Visitors can further interact with the data by built-in category filters , searching for ASOs , lncRNAs , or GSEA terms , or by a ppl ying cutoff filters from Element widgets and subpanels.
To demonstrate how this page may be used, we click on the magnifying glass in the 'FANTOM6 DMFB ASO oligos' table and search for 'DNM3OS' as our gene of interest, and find two antisense oligos associated with it. Selecting the antisense oligo ASO G0230630 AD 10 causes the corr esponding GSEA r esults to be loaded in the 'FANTOM6 GSEA Pathways' table. In this table, we use the filter to a ppl y a maxim um cutoff value of 0.1 on the p-value, and click on the magnifying glass to search for the term 'kinase', yielding 26 pathways. Choosing 'show only matches' will display these 26 pathways only. The scatter plot below the table then highlights these, and shows that the normalized enrichment score (NES) is positi v e for all 26 pathways.
Example 4 : https://fantom.gsc.riken.jp/zenbu/reports/ #Identification of therapeutic targets in poor outcome AML patients This page (Supplemental Figure S4) provides an interacti v e display of potential therapeutic targets for the treatment of Acute Myeloid Leukemia, shown as a static PCA plot in Figure 1 C by Hashimoto et al. ( 12 ). The page shows enriched GOterms as a table and as a PCA plot, a dynamically loaded table of expressed genes for the selected GOterm, a bar graph of patient gene expression of the selected expressed gene, and a table and plots of the differentially expressed genes comparing the AML conditions FLT3 wild type (FLT3-WT) and mutated (FLT3-Mut) to normal hematopoietic stem or progenitor cells (HSPC).
To demonstrate how this page may be used, we click on 'regulation of cell proliferation' in the 'Revigo' table, which highlights the corresponding point in the PCA plot and loads the expressed genes for that GOterm into the table labeled 'GOterm expressed genes.' Selecting gene JAG1 in this table loads its expression data into the bar graph labeled 'patient gene expression', with bars colored by their condition (FL T3-WT, FL T-Mut or HSPC). The bar graph shows that JAG1 is more highly expressed in both AML conditions compared to HSPC. JAG1 is also selected in the 'RN ASeq anal ysis' table and in the associa ted sca tter plots visualizing the differential expression analysis results, showing a statistically significant positi v e fold change for JAG1 in FLT3-mut AML compared to HSPC.
This video demonstrates how to interact with the data on this pa ge. https://zenb u-wiki.gsc.riken.jp/zenb u/wiki/index. php/ZENBU-Reports AML target page . report.index ( 15 , 16 ) The ZENBU w e b system at RIKEN https://fantom.gsc. riken.jp/zenbu is free for all to use and to upload data and build ZENBU-Report w e b pages or ZENBU genome browser views.

DISCUSSION
ZENBU-Reports was de v eloped to create interacti v e scientific w e b portals for da ta sharing and analysis. W hile other programming toolkits, like Shiny ( https://shiny.posit.co/ ) and Plotly ( https://plotly.com/ ), are available to build custom w e bsites, they generally r equir e familiarity with a programming language such as JavaScript, Python, or R. In addition, gener al purpose progr amming toolkits like d3.js ( https://d3js.org/ ) and visualization toolkits like chart.js ( https://www.chartjs.org/ ) typically do not provide specialized tools to display genomic data, such as the builtin genome browser in ZENBU. On the other hand, specialized toolkits like NG-Circos ( https://github.com/YaCui/ NG-Circos ), cytosca pe.js ( 7 ) ( https://js.cytosca pe.org/ ) and To goStanza ( http://to gostanza.org/ ) are excellent at the task they were designed for, but lack general scientific visualization modules. In addition, server infrastructure is either not provided, or may r equir e a fee for larger applications. Google Sheets ( http://sheets.google.com ) provides a visualization w e b application that is free to use and requires no programming skills, but is not specialized for visualizing genome science data or for the massi v e dataset sizes typical in genome science, and does not allow interacti v e data e xploration as provided by ZENBU-Reports. By being able to visualize both genomic and non-genomic data, without requiring any programming skills to create the pages or server availability to store the data, ZENBU-Reports provides a complete solution for scientific data visualization, analysis, and dissemination during the full lifespan of a r esear ch project and after completion of the project.

DA T A A V AILABILITY
ZENB U code is availa ble at: https://github.com/jessicase v erin/ZENBU under the 3-clause BSD Software License (permanent DOI: https://doi.org/10.5281/zenodo. 8213403 ). The ZENBU w e b system at RIKEN https:// fantom.gsc.riken.jp/zenbu is free for all to use, upload data and build ZENBU-Report w e b pages or ZENBU genome browser views. Documentation for the ZENBU system is available at https://zenbu-wiki.gsc.riken.jp .