Skip to content

Visual elements

Taipy provides some visual elements dedicated to the Data Node Management. These elements are the data node selector and the data node viewer.

Data node selector

The data_node_selector control displays all data node entities that can be selected.

The default usage is really simple. It does not require any specific configuration to display the selectable data nodes. The following image shows the default behavior of the data node selector control.

The list of selectable data nodes

Thanks to its rich configurability, you can customize the display of the data node selector, for example, by adding a search bar, adding a filter or a sort capability, grouping the data nodes by scenarios and cycles, etc. For more details, see the data node selector page.

Data node viewer

The data_node control displays a data node's information and lets end-users edit it.

The default usage is really simple. It does not require any specific configuration to display the selectable data nodes.

The data node viewer

Three main sections are displayed as three tabs: the data itself, the data node's properties, and the data node's historical edits.

In the previous picture, the data is a date so the data node viewer displays it with its string representation. The data node viewer can display the data in a more appropriate way depending on the data type and the data itself. It can also display the data in a tabular form or a graphical form if the data is a table. Note that the end-user can easily change the way the data is displayed. The following two images show the data node viewer displaying a table and a graph.

Table view of some tabular data
Graphical view of some tabular data

For more details, see the data node viewer page.

Data management interface

Once the data is modeled as data nodes, it becomes easy to expose it to the end-users. The combination of the data_node_selector and the data_node_viewer controls provides a user-friendly interface for data selection, visualization, and validation, covering the whole data management workflow.

Combining both visual elements

The following image shows an example of how to combine the data_node_selector and the data_node controls for data management. On the top, the data_node_selector displays all the data nodes that can be selected. Below, the data_node displays the selected data node.

Data management interface

The following code shows a complete example of how to combine the two visual elements. It consists of creating some data to be integrated to a Taipy application using data node configurations. Then three data nodes are instantiated. Finally, a Gui service is created with a data node selector and a data node viewer.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
from datetime import datetime

import pandas as pd

import taipy
from taipy import Config, Orchestrator, Gui, Scope

if __name__ == "__main__":
    # Creating a data node variable to be bound to the visual element
    data_node = None

    # Creating various data sources. A CSV file, an integer parameter and a datetime object
    pd.DataFrame({"A": [1, 2, 3], "B": [4, 5, 6]}).to_csv("out.csv")
    parameter, date = 15, datetime.now()

    # Configuring data nodes to integrate previous data
    ds1_cfg = Config.configure_csv_data_node(id="dataset_1", scope=Scope.GLOBAL, default_path="out.csv")
    parameter_cfg = Config.configure_data_node(id="parameter", scope=Scope.GLOBAL, default_data=parameter)
    date_cfg = Config.configure_data_node(id="date", scope=Scope.GLOBAL, default_data=date)

    # instantiating the data nodes
    Orchestrator().run()
    taipy.create_global_data_node(ds1_cfg)
    taipy.create_global_data_node(parameter_cfg)
    taipy.create_global_data_node(date_cfg)

    # Running the GUI with a data node selector and a data node viewer
    page = ("<|{data_node}|data_node_selector|>"
            "<|{data_node}|data_node|>")
    Gui(page=page).run()