diff --git a/docs/refmans/gui/viselements/corelements/data_node_selector-filter1-d.png b/docs/refmans/gui/viselements/corelements/data_node_selector-filter1-d.png new file mode 100644 index 000000000..07b07fe53 Binary files /dev/null and b/docs/refmans/gui/viselements/corelements/data_node_selector-filter1-d.png differ diff --git a/docs/refmans/gui/viselements/corelements/data_node_selector-filter1-l.png b/docs/refmans/gui/viselements/corelements/data_node_selector-filter1-l.png new file mode 100644 index 000000000..ae33d3e02 Binary files /dev/null and b/docs/refmans/gui/viselements/corelements/data_node_selector-filter1-l.png differ diff --git a/docs/refmans/gui/viselements/corelements/data_node_selector-filter2-d.png b/docs/refmans/gui/viselements/corelements/data_node_selector-filter2-d.png new file mode 100644 index 000000000..99f7ce6fb Binary files /dev/null and b/docs/refmans/gui/viselements/corelements/data_node_selector-filter2-d.png differ diff --git a/docs/refmans/gui/viselements/corelements/data_node_selector-filter2-l.png b/docs/refmans/gui/viselements/corelements/data_node_selector-filter2-l.png new file mode 100644 index 000000000..c0c9ea254 Binary files /dev/null and b/docs/refmans/gui/viselements/corelements/data_node_selector-filter2-l.png differ diff --git a/docs/refmans/gui/viselements/corelements/data_node_selector-filter3-d.png b/docs/refmans/gui/viselements/corelements/data_node_selector-filter3-d.png new file mode 100644 index 000000000..fcf4f5307 Binary files /dev/null and b/docs/refmans/gui/viselements/corelements/data_node_selector-filter3-d.png differ diff --git a/docs/refmans/gui/viselements/corelements/data_node_selector-filter3-l.png b/docs/refmans/gui/viselements/corelements/data_node_selector-filter3-l.png new file mode 100644 index 000000000..ac183dfc7 Binary files /dev/null and b/docs/refmans/gui/viselements/corelements/data_node_selector-filter3-l.png differ diff --git a/docs/refmans/gui/viselements/corelements/data_node_selector-filter4-d.png b/docs/refmans/gui/viselements/corelements/data_node_selector-filter4-d.png new file mode 100644 index 000000000..3fca4b127 Binary files /dev/null and b/docs/refmans/gui/viselements/corelements/data_node_selector-filter4-d.png differ diff --git a/docs/refmans/gui/viselements/corelements/data_node_selector-filter4-l.png b/docs/refmans/gui/viselements/corelements/data_node_selector-filter4-l.png new file mode 100644 index 000000000..b24f27a7f Binary files /dev/null and b/docs/refmans/gui/viselements/corelements/data_node_selector-filter4-l.png differ diff --git a/docs/refmans/gui/viselements/corelements/data_node_selector-init-d.png b/docs/refmans/gui/viselements/corelements/data_node_selector-init-d.png index 3b736bc28..cc325bccb 100644 Binary files a/docs/refmans/gui/viselements/corelements/data_node_selector-init-d.png and b/docs/refmans/gui/viselements/corelements/data_node_selector-init-d.png differ diff --git a/docs/refmans/gui/viselements/corelements/data_node_selector-init-l.png b/docs/refmans/gui/viselements/corelements/data_node_selector-init-l.png index 606af49ca..679cde596 100644 Binary files a/docs/refmans/gui/viselements/corelements/data_node_selector-init-l.png and b/docs/refmans/gui/viselements/corelements/data_node_selector-init-l.png differ diff --git a/docs/refmans/gui/viselements/corelements/data_node_selector-pin1-d.png b/docs/refmans/gui/viselements/corelements/data_node_selector-pin1-d.png index 8031a84e5..c25a0d268 100644 Binary files a/docs/refmans/gui/viselements/corelements/data_node_selector-pin1-d.png and b/docs/refmans/gui/viselements/corelements/data_node_selector-pin1-d.png differ diff --git a/docs/refmans/gui/viselements/corelements/data_node_selector-pin1-l.png b/docs/refmans/gui/viselements/corelements/data_node_selector-pin1-l.png index fe3903225..84ac9718c 100644 Binary files a/docs/refmans/gui/viselements/corelements/data_node_selector-pin1-l.png and b/docs/refmans/gui/viselements/corelements/data_node_selector-pin1-l.png differ diff --git a/docs/refmans/gui/viselements/corelements/data_node_selector-pin2-d.png b/docs/refmans/gui/viselements/corelements/data_node_selector-pin2-d.png index 19323f35a..069c8038b 100644 Binary files a/docs/refmans/gui/viselements/corelements/data_node_selector-pin2-d.png and b/docs/refmans/gui/viselements/corelements/data_node_selector-pin2-d.png differ diff --git a/docs/refmans/gui/viselements/corelements/data_node_selector-pin2-l.png b/docs/refmans/gui/viselements/corelements/data_node_selector-pin2-l.png index 1ea9dd041..72c31c308 100644 Binary files a/docs/refmans/gui/viselements/corelements/data_node_selector-pin2-l.png and b/docs/refmans/gui/viselements/corelements/data_node_selector-pin2-l.png differ diff --git a/docs/refmans/gui/viselements/corelements/data_node_selector-pin3-d.png b/docs/refmans/gui/viselements/corelements/data_node_selector-pin3-d.png index 06c8e62f9..1b21dbc74 100644 Binary files a/docs/refmans/gui/viselements/corelements/data_node_selector-pin3-d.png and b/docs/refmans/gui/viselements/corelements/data_node_selector-pin3-d.png differ diff --git a/docs/refmans/gui/viselements/corelements/data_node_selector-pin3-l.png b/docs/refmans/gui/viselements/corelements/data_node_selector-pin3-l.png index e5c6557e7..c9f62b5cf 100644 Binary files a/docs/refmans/gui/viselements/corelements/data_node_selector-pin3-l.png and b/docs/refmans/gui/viselements/corelements/data_node_selector-pin3-l.png differ diff --git a/docs/refmans/gui/viselements/corelements/data_node_selector-search1-d.png b/docs/refmans/gui/viselements/corelements/data_node_selector-search1-d.png new file mode 100644 index 000000000..07a9dee84 Binary files /dev/null and b/docs/refmans/gui/viselements/corelements/data_node_selector-search1-d.png differ diff --git a/docs/refmans/gui/viselements/corelements/data_node_selector-search1-l.png b/docs/refmans/gui/viselements/corelements/data_node_selector-search1-l.png new file mode 100644 index 000000000..f142ecc7c Binary files /dev/null and b/docs/refmans/gui/viselements/corelements/data_node_selector-search1-l.png differ diff --git a/docs/refmans/gui/viselements/corelements/data_node_selector-search2-d.png b/docs/refmans/gui/viselements/corelements/data_node_selector-search2-d.png new file mode 100644 index 000000000..e4b6af6d6 Binary files /dev/null and b/docs/refmans/gui/viselements/corelements/data_node_selector-search2-d.png differ diff --git a/docs/refmans/gui/viselements/corelements/data_node_selector-search2-l.png b/docs/refmans/gui/viselements/corelements/data_node_selector-search2-l.png new file mode 100644 index 000000000..d514583e4 Binary files /dev/null and b/docs/refmans/gui/viselements/corelements/data_node_selector-search2-l.png differ diff --git a/docs/refmans/gui/viselements/corelements/data_node_selector-sort1-d.png b/docs/refmans/gui/viselements/corelements/data_node_selector-sort1-d.png new file mode 100644 index 000000000..b9d6383f9 Binary files /dev/null and b/docs/refmans/gui/viselements/corelements/data_node_selector-sort1-d.png differ diff --git a/docs/refmans/gui/viselements/corelements/data_node_selector-sort1-l.png b/docs/refmans/gui/viselements/corelements/data_node_selector-sort1-l.png new file mode 100644 index 000000000..6a61ec43d Binary files /dev/null and b/docs/refmans/gui/viselements/corelements/data_node_selector-sort1-l.png differ diff --git a/docs/refmans/gui/viselements/corelements/data_node_selector-sort2-d.png b/docs/refmans/gui/viselements/corelements/data_node_selector-sort2-d.png new file mode 100644 index 000000000..372487f7c Binary files /dev/null and b/docs/refmans/gui/viselements/corelements/data_node_selector-sort2-d.png differ diff --git a/docs/refmans/gui/viselements/corelements/data_node_selector-sort2-l.png b/docs/refmans/gui/viselements/corelements/data_node_selector-sort2-l.png new file mode 100644 index 000000000..b7bd5e231 Binary files /dev/null and b/docs/refmans/gui/viselements/corelements/data_node_selector-sort2-l.png differ diff --git a/docs/refmans/gui/viselements/corelements/data_node_selector-sort3-d.png b/docs/refmans/gui/viselements/corelements/data_node_selector-sort3-d.png new file mode 100644 index 000000000..8c79c3218 Binary files /dev/null and b/docs/refmans/gui/viselements/corelements/data_node_selector-sort3-d.png differ diff --git a/docs/refmans/gui/viselements/corelements/data_node_selector-sort3-l.png b/docs/refmans/gui/viselements/corelements/data_node_selector-sort3-l.png new file mode 100644 index 000000000..34754b158 Binary files /dev/null and b/docs/refmans/gui/viselements/corelements/data_node_selector-sort3-l.png differ diff --git a/docs/refmans/gui/viselements/corelements/data_node_selector-sort4-d.png b/docs/refmans/gui/viselements/corelements/data_node_selector-sort4-d.png new file mode 100644 index 000000000..ec8c4917b Binary files /dev/null and b/docs/refmans/gui/viselements/corelements/data_node_selector-sort4-d.png differ diff --git a/docs/refmans/gui/viselements/corelements/data_node_selector-sort4-l.png b/docs/refmans/gui/viselements/corelements/data_node_selector-sort4-l.png new file mode 100644 index 000000000..53dedf322 Binary files /dev/null and b/docs/refmans/gui/viselements/corelements/data_node_selector-sort4-l.png differ diff --git a/docs/refmans/gui/viselements/corelements/data_node_selector-toolbar-d.png b/docs/refmans/gui/viselements/corelements/data_node_selector-toolbar-d.png new file mode 100644 index 000000000..f5bc12110 Binary files /dev/null and b/docs/refmans/gui/viselements/corelements/data_node_selector-toolbar-d.png differ diff --git a/docs/refmans/gui/viselements/corelements/data_node_selector-toolbar-l.png b/docs/refmans/gui/viselements/corelements/data_node_selector-toolbar-l.png new file mode 100644 index 000000000..d5db6c887 Binary files /dev/null and b/docs/refmans/gui/viselements/corelements/data_node_selector-toolbar-l.png differ diff --git a/docs/refmans/gui/viselements/corelements/data_node_selector.md_template b/docs/refmans/gui/viselements/corelements/data_node_selector.md_template index f7ea2ce63..b50b595f0 100644 --- a/docs/refmans/gui/viselements/corelements/data_node_selector.md_template +++ b/docs/refmans/gui/viselements/corelements/data_node_selector.md_template @@ -2,62 +2,243 @@ Displays a list of the Data Node entities that can be selected. # Details -The control displays a tree selector where all data node entities are listed.
-If [*display_cycles*](#p-display_cycles) is set to False, the cycles are not represented. +The Data Node Selector control displays a tree-like structure listing all available data nodes. This +visual element list all the available data nodes, potentially organizing them hierarchically based +on their owning scenario (and cycle if [*display_cycles*](#p-display_cycles) is set to True). -In an application that would have created a few data nodes, some of them being scoped at the -scenario level, here is what the data node selector would look like: +In an application where multiple data nodes have been created, some scoped at the scenario level, +the selector might appear as follows:
- - + +
The list of selectable data nodes
-Data nodes are organized in their owning scenario and cycle, when relevant. +Data nodes are organized in their owning scenario and cycle, when relevant.
+In this example, *cleaned_dataset* and *initial_dataset* are scoped at the +[`Scope.GLOBAL`](../../../reference/pkg_taipy/pkg_common/pkg_config/Scope/index.md) level.
+Expanding the 'My scenario' item (by clicking the + +- Expand - icon) reveals data nodes scoped at +[`Scope.SCENARIO`](../../../reference/pkg_taipy/pkg_common/pkg_config/Scope/index.md). -When the user selects a data node, the [*on_change*](#p-on_change) callback is invoked so that -the application can use the selected value. The value is set to the [*value*](#p-value) property. +When the user selects a data node, the [*on_change*](#p-on_change) callback is triggered allowing +the application to respond to the user's selection. The selected node's value is reflected in the +control's [*value*](#p-value) property. -

Pins

+At the top of the control, a toolbar provides additional functionality via a series of icons. These +icons allow users to perform various actions: +
+ + +
Data node selector toolbar
+
+ +Users can interact with the icons in the toolbar to perform various tasks: + +- + : Opens a filter configuration dialog, allowing users to define filters that apply to the list of + data nodes. +- : + Enables users to specify sorting preferences for organizing the data nodes in the list. +- + : Toggles the visibility of a text search box, which helps users locate specific data nodes + quickly. + +

Filtering

+ +The Filter functionality allows users to refine the list of data nodes by applying one or more +criteria. + +

Opening the Filter dialog

+ +When the user presses the + +icon (Filter), the following dialog appears: +
+ + +
Initialize filters
+
+ +All the filters that are currently applied to the list of data nodes is shown. So far, it is +empty. + +

Creating a new filter

+ +To create a new filter, the user must select a filtering criterion from the dropdown menu in the +first field: +
+ + +
Filter criteria dialog
+
+ +After selecting a criterion, the 'Action' dropdown updates with comparison options specific to the +selected criterion.
+The available comparisons depend on the type of the selected field: + +- Boolean: Options include "is" and "is not." The value field accepts True or False. +- String: Options include "is," "is not," and "contains." The value field accepts a text + value. +- Number: Options include "equals," "does not equal," "is less than," "is less than or equal to," + "is greater than or equal to" and "is greater than." The value field accepts a numerical + value. +- Date: Options include "is on," "is not on," "is before," "is on or before," "is on or after" and + "is after." The value field accepts a date value. + +To list all data nodes with labels containing the string "eva", the user would configue a filter as +follows: +
+ + +
Create a new filter
+
+ +To add this filter to the filters list, the user must press the + +(Check) icon.
+Multiple filters can be added as needed. + +To close the filter configuration dialog, the user must click outside the dialog area. + +Once filters are added, they are applied immediately. The filtered data node list appears as shown: +
+ + +
Filters applied
+
+ +To remove a filter from the list, the user would open the filters dialog +( +icon), locate the criterion that must be removed and delete it pressing the + +(Delete) icon. + +

Sorting

+ +The data node selector sorts data nodes by default in alphabetically ascending order based on their +labels. Grouping is applied according to their respective Cycle or Scenario, if applicable + +Users can define custom sorting criteria to modify how data nodes are ordered. This process is +similar to filtering and allows users to create a sequence of sorting rules applied in order of +priority. + +Each sorting criterion specifies: + +- The property of the data node to sort by (e.g., label, last edit date, etc.). +- The order: either *ascending* or *descending*. + +Consider the following initial list of data nodes displayed in the selector: +
+ + +
Initial data nodes list
+
+ +When the user presses the + +icon (Sort), the sorting configuration dialog appears: +
+ + +
Sorting configuration dialog
+
+ +The user can select a property from the dropdown and specify the sorting order: 'asc' (Ascending) or +'desc' (Descending). + +In the following image, the user has selected the 'Label' property, and a descending sort: +
+ + +
Sort criterion configuration
+
+ +After the sorting criterion is validated (pressing the + icon), +it is added to the sorting criteria list and the criterion is immediately applied to reorder the +data nodes: +
+ + +
Data nodes sorted by their label
+
+ +The user can then create additional sorting criteria (which are applied in sequence).
+To remove a sorting rule, the user can select the + button +next to the criterion. + +To exit the sorting dialog, click anywhere outside the dialog window. + +

Searching

+ +The Search feature allows users to quickly locate data nodes by filtering the list based on text +input. + +When the user presses the + +icon (Search), a search box appears within the data node selector interface: +
+ + +
Search box in the selector
+
+ +If text is entered in the search box, the list dynamically updates to display only data nodes with +labels containing the entered text: +
+ + +
Search active
+
+ +To close the search box, the user must press the + +icon (Search off) in the toolbar. + +

Pinning

-When there are many data nodes in your application, the user can filter out a set of data nodes -by *pinning* them and then set the *Pinned only* switch (that is active only if some data nodes are -pinned): only pinned data nodes will then appear in the list. +The Pinning feature allows users to focus on specific data nodes by "pinning" them.
+Pinned data nodes can then be displayed exclusively by enabling the 'Pinned Only' switch. This +feature is particularly useful when dealing with a large number of data nodes. Assuming we are in the following situation:
- - + +
Crowded data node selector
-If the user wants to focus only on the 'initial_dataset' and the data nodes from the scenario -called 'Peter's', she can click on the pin icon next to these two items. Here is what the display -would look like: +If the user wants to focus only on the data node called *initial_dataset* and the data nodes from +the scenario called 'Peter's', she can click the + +icon (Pin) next to these two items. Here is what the display would look like:
- - + +
Data node selector with pinned items
Here is what the control looks like after the 'Pinned only' switch was set and the scenario item was expanded:
- - + +
Filtering pinned data nodes
You can see that only the pinned data nodes are visible. -Note that the cycle item is not pinned because the other scenarios it contains are not, either. +Note that the cycle item is not pinned because the other scenarios it contains are not, either. -- If all data nodes for a scenario or a cycle are pinned, the scenario or cycle item is itself +- If all data nodes for a scenario or cycle are pinned, the scenario or cycle item becomes itself pinned. -- A scenario or cycle item appears *not pinned* if any of its data nodes is not pinned. +- A scenario or cycle item appears *not pinned* if any of its data nodes remain unpinned. - *Pinning* a scenario item pins all its data nodes.
*Unpinning* a scenario item unpins all its data nodes. -- *Pinning* a cycle item pins all the data nodes of all its scenarios.
- *Unpinning* a cycle item unpins all the data nodes of all its scenarios. +- *Pinning* a cycle item pins all the data nodes across all its scenarios.
+ *Unpinning* a cycle item unpins all the data nodes across all its scenarios. -To reveal all existing data nodes, the *Pinned only* switch must be turned off. +Turn off the 'Pinned Only' switch to view the complete list of data nodes again. diff --git a/docs/refmans/gui/viselements/mui-icons.svg b/docs/refmans/gui/viselements/mui-icons.svg new file mode 100644 index 000000000..f9e39a220 --- /dev/null +++ b/docs/refmans/gui/viselements/mui-icons.svg @@ -0,0 +1,66 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/docs/release-notes/index.md b/docs/release-notes/index.md index c753cd13b..bf9b38ec9 100644 --- a/docs/release-notes/index.md +++ b/docs/release-notes/index.md @@ -66,19 +66,36 @@ Published on 2024-10.

taipy 4.0.0

-- The User Experience of the Scenario and Data management Visual elements have been greatly - improved by the following new functionalities: - - The multiple selection is now available on the data node selector: TODO add details - - A filter capability has been added to the data node selector: TODO add details - - A sort capability has been added to the data node selector: TODO add details - - A search capability has been added to the data node selector: TODO add details - - A new detail panel has been added to the job selector: TODO add details - - The multiple selection is now available on the scenario selector: TODO add details +The User Experience of the Scenario and Data management controls have been greatly improved by the +following new functionalities: + +- [*Scenario Selector*](../refmans/gui/viselements/corelements/scenario_selector.md): + - Multiple selection is now available.
+ See the [*multiple*](../refmans/gui/viselements/corelements/scenario_selector.md#p-multiple) + property for more details. - A filter capability has been added to the scenario selector: TODO add details - A sort capability has been added to the scenario selector: TODO add details - A search capability has been added to the scenario selector: TODO add details - - The data node viewer now offers the possibility to upload/download data for the file - based data nodes: TODO add details +- [*Data Node Selector*](../refmans/gui/viselements/corelements/data_node_selector.md): + - Multiple selection is now available.
+ See the [*multiple*](../refmans/gui/viselements/corelements/data_node_selector.md#p-multiple) + property for more details. + - Users can now filter data nodes in the list.
+ See the + [section on Filtering](../refmans/gui/viselements/corelements/data_node_selector.md#filtering) + for more details. + - Users can now sort data nodes in the list.
+ See the + [section on Sorting](../refmans/gui/viselements/corelements/data_node_selector.md#sorting) for + more details. + - Users can now search data nodes in the list
+ See the + [section on Searching](../refmans/gui/viselements/corelements/data_node_selector.md#searching) + for more details. +- [*Data Node Viewer*](../refmans/gui/viselements/corelements/data_node.md): + - Users can now upload and download data of file-based data nodes. +- [*Job Selector*](../refmans/gui/viselements/corelements/job_selector.md): + - A new detail panel has been added to the job selector.

taipy-gui 4.0.0

@@ -298,7 +315,7 @@ Published on 2024-10. - Table columns are too narrow if there are many.
See [issue #2082](https://github.com/Avaiga/taipy/issues/2082). - Styling is not applied to a [`table`](../refmans/gui/viselements/generic/table.md) control if its - [*rebuild*](../refmans/gui/viselements/corelements/data_node.md#p-rebuild) property is set to + [*rebuild*](../refmans/gui/viselements/generic/table.md#p-rebuild) property is set to True.
See [issue #2005](https://github.com/Avaiga/taipy/issues/2005). diff --git a/taipy_theme/assets/stylesheets/avaiga.css b/taipy_theme/assets/stylesheets/avaiga.css index 35cbdb59c..34de9d38d 100644 --- a/taipy_theme/assets/stylesheets/avaiga.css +++ b/taipy_theme/assets/stylesheets/avaiga.css @@ -915,14 +915,21 @@ figure.tp-center { [data-md-color-scheme="default"] .visible-dark{ display: none; } - [data-md-color-scheme="slate"] .visible-light{ display: none; } + a.md-content__button{ display: none; } +svg.mui-icon{ + width: 1.4em; + height: 1.4em; + vertical-align: middle; + fill: currentColor; +} + .tp-btn-parent, .md-content .tp-btn-parent { margin-bottom: 1rem;