datanode viewer show_properties (#2182)

* datanode viewer show_properties
resolves #2181

* Fab's request

* Fab's request

---------

Co-authored-by: Fred Lefévère-Laoide <Fred.Lefevere-Laoide@Taipy.io>

frontend/taipy/src/DataNodeViewer.tsx

@@ -95,7 +95,7 @@ import { useUniqueId } from "./utils/hooks";
 import DataNodeChart from "./DataNodeChart";
 import DataNodeTable from "./DataNodeTable";
 
-const editTimestampFormat = "YYY/MM/dd HH:mm";
+const editTimestampFormat = "yyyy/MM/dd HH:mm";
 
 const tabBoxSx = { borderBottom: 1, borderColor: "divider" };
 const noDisplay = { display: "none" };
@@ -158,7 +158,7 @@ enum DatanodeDataProps {
     error,
 }
 
-interface DataNodeViewerProps extends  CoreProps {
+interface DataNodeViewerProps extends CoreProps {
     expandable?: boolean;
     expanded?: boolean;
     defaultDataNode?: string;
@@ -168,6 +168,7 @@ interface DataNodeViewerProps extends  CoreProps {
     showOwner?: boolean;
     showEditDate?: boolean;
     showExpirationDate?: boolean;
+    showCustomProperties?: boolean;
     showProperties?: boolean;
     showHistory?: boolean;
     showData?: boolean;
@@ -237,6 +238,7 @@ const DataNodeViewer = (props: DataNodeViewerProps) => {
         showOwner = true,
         showEditDate = false,
         showExpirationDate = false,
+        showCustomProperties = true,
         showProperties = true,
         showHistory = true,
         showData = true,
@@ -281,7 +283,9 @@ const DataNodeViewer = (props: DataNodeViewerProps) => {
     const dtError = dnData[DatanodeDataProps.error];
 
     // Tabs
-    const [tabValue, setTabValue] = useState<TabValues>(TabValues.Data);
+    const [tabValue, setTabValue] = useState<TabValues | undefined>(
+        showData ? TabValues.Data : showProperties ? TabValues.Properties : showHistory ? TabValues.History : undefined
+    );
     const handleTabChange = useCallback(
         (_: SyntheticEvent, newValue: number) => {
             if (valid) {
@@ -378,14 +382,14 @@ const DataNodeViewer = (props: DataNodeViewerProps) => {
                 );
             }
             if (!dn || isNewDn) {
-                setTabValue(showData ? TabValues.Data : TabValues.Properties);
+                (showData || showProperties || showHistory) && setTabValue(showData ? TabValues.Data : showProperties ? TabValues.Properties: showHistory ? TabValues.History: undefined);
             }
             if (!dn) {
                 return invalidDatanode;
             }
             editLock.current = dn[DataNodeFullProps.editInProgress];
             setHistoryRequested((req) => {
-                if (req && !isNewDn && tabValue == TabValues.History) {
+                if (req && showHistory && !isNewDn && tabValue == TabValues.History) {
                     const idVar = getUpdateVar(updateDnVars, "history_id");
                     const vars = getUpdateVarNames(updateVars, "history");
                     Promise.resolve().then(() =>
@@ -411,7 +415,7 @@ const DataNodeViewer = (props: DataNodeViewerProps) => {
                 return false;
             });
             setPropertiesRequested((req) => {
-                if ((req || !showData) && tabValue == TabValues.Properties) {
+                if ((req || !showData) && showProperties && tabValue == TabValues.Properties) {
                     const idVar = getUpdateVar(updateDnVars, "properties_id");
                     const vars = getUpdateVarNames(updateVars, "dnProperties");
                     Promise.resolve().then(() =>
@@ -429,7 +433,7 @@ const DataNodeViewer = (props: DataNodeViewerProps) => {
             return dn;
         });
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [props.dataNode, props.defaultDataNode, showData, id, dispatch, module, props.onLock]);
+    }, [props.dataNode, props.defaultDataNode, showData, showProperties, showHistory, id, dispatch, module, props.onLock]);
 
     // clean lock on unmount
     useEffect(
@@ -665,14 +669,18 @@ const DataNodeViewer = (props: DataNodeViewerProps) => {
     useEffect(() => {
         const ids = coreChanged?.datanode;
         if ((typeof ids === "string" && ids === dnId) || (Array.isArray(ids) && ids.includes(dnId))) {
-            props.updateVarName &&
-                dispatch(createRequestUpdateAction(id, module, [props.updateVarName], true));
+            props.updateVarName && dispatch(createRequestUpdateAction(id, module, [props.updateVarName], true));
         }
     }, [coreChanged, props.updateVarName, id, module, dispatch, dnId]);
 
     return (
         <>
-            <Box sx={dnMainBoxSx} id={id} onClick={onFocus} className={`${className} ${getComponentClassName(props.children)}`}>
+            <Box
+                sx={dnMainBoxSx}
+                id={id}
+                onClick={onFocus}
+                className={`${className} ${getComponentClassName(props.children)}`}
+            >
                 <Accordion defaultExpanded={expanded} expanded={userExpanded} onChange={onExpand} disabled={!valid}>
                     <AccordionSummary
                         expandIcon={expandable ? <ArrowForwardIosSharp sx={AccordionIconSx} /> : null}
@@ -716,6 +724,7 @@ const DataNodeViewer = (props: DataNodeViewerProps) => {
                                         label="Properties"
                                         id={`${uniqId}-properties`}
                                         aria-controls={`${uniqId}-dn-tabpanel-properties`}
+                                        style={showProperties ? undefined : noDisplay}
                                     />
                                     <Tab
                                         label="History"
@@ -913,7 +922,7 @@ const DataNodeViewer = (props: DataNodeViewerProps) => {
                                             ? props.dnProperties
                                             : []
                                     }
-                                    show={showProperties}
+                                    show={showCustomProperties}
                                     focusName={focusName}
                                     setFocusName={setFocusName}
                                     onFocus={onFocus}

taipy/gui_core/_GuiCoreLib.py

@@ -210,6 +210,7 @@ class _GuiCore(ElementLibrary):
                 "show_owner": ElementProperty(PropertyType.boolean, True),
                 "show_edit_date": ElementProperty(PropertyType.boolean, False),
                 "show_expiration_date": ElementProperty(PropertyType.boolean, False),
+                "show_custom_properties": ElementProperty(PropertyType.boolean, True),
                 "show_properties": ElementProperty(PropertyType.boolean, True),
                 "show_history": ElementProperty(PropertyType.boolean, True),
                 "show_data": ElementProperty(PropertyType.boolean, True),

taipy/gui_core/viselements.json

@@ -387,6 +387,24 @@
                         "type": "dynamic(DataNode|list[DataNode])",
                         "doc": "The data node to display and edit.<br/>If the value is a list, it must have a single element otherwise nothing is shown."
                     },
+                    {
+                        "name": "show_data",
+                        "type": "bool",
+                        "default_value": "True",
+                        "doc": "If False, the data node value tab is not visible."
+                    },
+                    {
+                        "name": "show_properties",
+                        "type": "bool",
+                        "default_value": "True",
+                        "doc": "If False, the data node properties tab is not visible."
+                    },
+                    {
+                        "name": "show_history",
+                        "type": "bool",
+                        "default_value": "True",
+                        "doc": "If False, the data node history tab is not visible."
+                    },
                     {
                         "name": "active",
                         "type": "dynamic(bool)",
@@ -418,40 +436,28 @@
                         "doc": "If False, the data node owner label is not visible."
                     },
                     {
-                        "name": "show_edit_date",
-                        "type": "bool",
-                        "default_value": "False",
-                        "doc": "If False, the data node edition date is not visible."
-                    },
-                    {
-                        "name": "show_expiration_date",
+                        "name": "show_owner_label",
                         "type": "bool",
                         "default_value": "False",
-                        "doc": "If False, the data node expiration date is not visible."
-                    },
-                    {
-                        "name": "show_properties",
-                        "type": "bool",
-                        "default_value": "True",
-                        "doc": "If False, the data node properties are not visible."
+                        "doc": "If True, the data node owner label is added to the datanode label at the top of the block."
                     },
                     {
-                        "name": "show_history",
+                        "name": "show_custom_properties",
                         "type": "bool",
                         "default_value": "True",
-                        "doc": "If False, the data node history is not visible."
+                        "doc": "If False, the custom properties for this data node properties are not visible in the Properties tab."
                     },
                     {
-                        "name": "show_data",
+                        "name": "show_edit_date",
                         "type": "bool",
-                        "default_value": "True",
-                        "doc": "If False, the data node value is not visible."
+                        "default_value": "False",
+                        "doc": "If False, the data node edition date is not visible."
                     },
                     {
-                        "name": "show_owner_label",
+                        "name": "show_expiration_date",
                         "type": "bool",
                         "default_value": "False",
-                        "doc": "If True, the data node owner label is added to the datanode label at the top of the block."
+                        "doc": "If False, the data node expiration date is not visible."
                     },
                     {
                         "name": "chart_config",
@@ -583,7 +589,7 @@
                     {
                         "name": "class_name",
                         "type": "dynamic(str)",
-                        "doc": "The list of CSS class names associated with the generated HTML Element.<br/>These class names will be added to the default <code>taipy_gui_core-&lt;element_type&gt;</code>."
+                        "doc": "The list of CSS class names associated with the generated HTML Element.<br/>These class names will be added to the default <code>taipy_gui_core-[element_type]</code>."
                     }
                 ]
             }