Tagged Document Viewer

This node visualizes terms and tags of a document using the Brat JS library. Each term will be highlighted and its corresponding tags will be displayed above it. The highlighting colors are static depending on the tags.

The node supports custom CSS styling. You can simply put CSS rules into a single string and set it as a flow variable 'customCSS' in the node configuration dialog. You will find the list of available classes and their description on our documentation page.


General view and display options

Document Column
The column containing the documents to show.
No. of rows to display
Use this numerical value to restrict the number of rows used for this visualization.
Title (*)
An optional title to be displayed above the tiles. Leave blank if no title is desired.
Subtitle (*)
An optional subtitle to be displayed above the tiles. Leave blank if no subtitle is desired.
Show line numbers
If checked line numbers are shown next to the document.
Display document tags
If checked document tags are shown in the document.
Show title in document
If checked the title of each document is additionally rendered into each document. This is useful, if the title itself has tags.


The JavaScript Tagged Document Viewer allows for several ways of interactivity. Please use the options below to configure which features will be activated on the view and further configuration of interactive properties.

Enable pagination
Enable or disable the pagination feature globally. When disabled the table is rendered whole on one page. When enabled use the options below to further refine the pagination settings.
Initial page size
Set the page size to be used on initial layout. A page size is defined as the number of documents the view displays on one page. If the page size change control is enabled the page length can be changed in the view.
Enable page size change control
Enable or disable the control to change the page size interactively in the view.
Selectable page sizes
Define a comma-separated list of allowed page sizes for the page size control.
Enable selection
If checked a checkbox is rendered in the top left corner of each document. The selection, when applied, will be represented in the output table as a new boolean column.
Subscribe to filter events
If checked, the view reacts when applied filters have been changed.
Enable 'Clear Selection' button
If checked a button is displayed above the documents, to clear any selection that is applied, regardless of current search and/or filter settings.
Show selected documents only
If checked, only documents which are selected are displayed.
Enable 'Show selected documents only' option
If checked, a checkbox to switch on and off the mode of displaying only selected documents is rendered in the view.
Publish selection events
If checked, notifies other interactive views when user changes the selection in the current view. See also "Subscribe to selection events".
Subscribe to selection events
If checked, the view reacts on notifications from other interactive views that the selection has been changed. See also "Publish selection events".
Selection column name
The name of the boolean column containing the selection.

Input Ports

The input table containing the tagged documents.

Output Ports

Data table containing the input data appended with a column, that represents the selection made in the document viewer.


Interactive View: Tagged Document View
Displays the visualization of the tagged documents.




You want to see the source code for this node? Click the following button and we’ll use our super-powers to find it for you.