`data_node`

Displays and edits of a data node.

The data node viewer control displays a data node entity's information and lets users edit it.

Properties¶

Name	Type	Default	Description
`data_node`^(★)	`DataNode\|list[DataNode]` dynamic		The data node to display and edit. If the value is a list, it must have a single element otherwise nothing is shown.
`active`	`bool` dynamic	True	Indicates if this component is active. An inactive component allows no user interaction.
`expandable`	`bool`	True	If True, the data node viewer can be expanded. If False, the data node viewer is not expandable and it is shown depending on expanded value.
`expanded`	`bool`	True	If True, when a valid data node is selected, the data node viewer is expanded and its content is displayed. If False, the data node viewer is collapsed and only its name is visible.
`show_config`	`bool`	False	If False, the data node configuration label is not visible.
`show_owner`	`bool`	True	If False, the data node owner label is not visible.
`show_edit_date`	`bool`	False	If False, the data node edition date is not visible.
`show_expiration_date`	`bool`	False	If False, the data node expiration date is not visible.
`show_properties`	`bool`	True	If False, the data node properties are not visible.
`show_history`	`bool`	True	If False, the data node history is not visible.
`show_data`	`bool`	True	If False, the data node value is not visible.
`chart_config`	`dict`		Chart configs by data node configuration id.
`scenario`	`Scenario` dynamic		A variable bound to this property is set to the selected `Scenario` when the user picks it from the list of owner scenarios accessible from the 'Owner' field in the 'Properties' tab. This property is set to None if there is no selected owner scenario.
`id`	`str`		The identifier that will be assigned to the rendered HTML component.
`class_name`	`str` dynamic		The list of CSS class names associated with the generated HTML Element. These class names will be added to the default `taipy_gui_core-<element_type>`.

^(★)data_node is the default property for this visual element.

Details¶

The data node viewer displays the attributes of the data node set to the data_node property:

The topmost section shows the data node's label and storage type.
The arrow button lets the user collapse or expand the whole control.

The lower section is made of three tabs whose content is described below.

The 'Data' tab¶

The section is visible only if the show_data property is set to True (which is its default value).

In this section, the user can visualize the data referenced by the selected data node and change the data interactively.

Depending on the data type the data node uses, there are two display and edit modes.

Scalar data¶

When the data node refers to a scalar value, it is displayed as a simple text:

To edit the data node, the user can click the line where the value is displayed:

Note that a 'Comment' field allows the user to explain why this value is changed. This information is part of the history of the data node.

When the new value is entered, the user presses the 'Apply' (✓) or the 'Cancel' (⨉) button to apply or cancel the change, respectively.

Tabular data¶

Tabular data can be represented in tables or charts.
The way the data is represented depends on the setting of the representation switch located in the top-left corner of the 'Properties' section:

In the image above, the switch is set to the 'Table' mode.
The other option is the 'Chart' mode.

Tabular data can be edited only in the 'Table' mode, as described in this section.

Table mode¶

Here is an example of tabular data represented in a table:

The 'Columns' drop-down button allows the user to select which dataset columns to represent in the table.
The 'Reset view' button resets that setting so all columns are visible.

Editing tabular data¶

The tabular mode has an 'Edit data' switch in the top-right corner of the 'Data' section. If this switch is turned on, the user can edit the table cells by clicking the relevant pencil button next to cell values:

The user will typically edit several cells before quitting the edit mode.
When values are correctly updated manually, the user can set a comment (that will appear in the data node history) and quit the edit mode.

Chart mode¶

The chart mode displays the data node's referenced data in a chart that can be customized:

Several traces can be added (using the '+ Add trace' button), and their respective settings can be indicated (in the 'Category', 'x', and 'y' drop-down menus).
The user can also indicate that traces should be represented as accumulating values, setting the 'Cumulative' switch on.
Here is an example of a data node that references data with several columns, represented as a cumulative area chart:

The 'Properties' tab¶

From this tab, you can access the attributes of the data node:

The label of the data node can be changed using the 'Label' field: click in the value area, change the content, then press the 'Apply' button (with the ✓ icon.)
To cancel the change, press the 'Cancel' button (with the ⨉ icon).

If the data node has has an owner (a scenario or a cycle) and if the show_owner property is set to True (which is its default value), the label of the owning entity appears in the 'Owner' information line:

When the selected data node is owned by a scenario, a button is visible next to the scenario's label. This button can be pressed to display the list of the owning scenarios so the user can select one from there. As a result, any variable bound to the scenario is set to the selected scenario entity: the application can use that to update other parts of the page from an on_change callback.

The section at the bottom lists the custom properties for the selected data node. This is visible only if the show_properties property is set to True (which is its default value).
The user can create new properties by clicking the 'New Property Key' line, providing a property name and value, and then pressing the 'Apply' button (with the ✓ icon.).
The user can cancel the creation of a new property by pressing the 'Cancel' button (with the ⨉ icon).
The user can delete a property by selecting it and pressing the trash button.

The 'History' tab¶

The section is visible only if the show_history is set to True (which is its default value).

In this section, the user has access to the chronological list of changes applied to the selected data node.

Each history entry holds the date and time when the change was done and potentially some information on the data changes.