CN-121996120-A - Interactive method and device supporting infinite nested data structure visualization

CN121996120ACN 121996120 ACN121996120 ACN 121996120ACN-121996120-A

Abstract

The invention provides an interaction method and device supporting infinite nested data structure visualization, and relates to the technical field of data structure visualization and man-machine interaction collaborative modeling. The method comprises the steps of performing type-aware recursive rendering in response to a data structure loading event to generate a hierarchical topological clear nested graph, providing an expression mode and a fixed value mode dual-input mode for basic type nodes, realizing accurate binding of array variables through a special binding button, an intelligent array selector and a node type label identification and radio selection constraint mechanism in the expression mode, starting a root node-driven double-layer recursive verification process during submission, and enabling verification results to be aggregated and propagated upwards along a father path and fed back visually. The invention improves the rendering performance and interactive user experience of the depth nested data structure, supports real-time infinite recursion operation, and effectively solves the problems of the traditional tool such as unobserved topology, binding error-prone, verification inefficiency and the like in the visualization of the complex data structure.

Inventors

LIU BINGQUAN
Chen Ganji
TIAN WENJIE

Assignees

深圳市纷享互联科技有限责任公司

Dates

Publication Date: 20260508
Application Date: 20260409

Claims (10)

1. An interactive method supporting visualization of infinitely nested data structures, characterized in that, Responding to a data structure loading event, executing a recursive rendering process based on node types and nesting relations of the data structure, and rendering to generate a nested data structure diagram with a hierarchical topology; After the nested data structure diagram is rendered, receiving a folding or unfolding instruction of a user to any node, and dynamically updating the visible state of the corresponding child node according to the instruction; Responding to edit triggering operation of a user for inputting page information, determining a target input mode based on the edit triggering operation, and starting a data input flow corresponding to the target input mode; When the user finishes the input or submitting operation, a verification process is started, verification is performed on the current node data according to a preset field constraint rule, and a verification result is recursively propagated upwards along a parent node path of the embedded data structure diagram.
2. The interaction method of claim 1, wherein performing a recursive rendering process based on node types and nested relationships of the data structure, rendering to generate a nested data structure map having a hierarchical topology comprises: starting from a root node, identifying the data type of the current node; If the current node is of a basic type, a field type adaptation system is called to render a corresponding input control; If the current node is of the object or array type, a collapsible container is created, and node data is placed in the collapsible container.
3. The interaction method of claim 2, wherein creating a collapsible container and placing the current node data in the collapsible container if the current node is of an object or array type, further comprises: Traversing all child nodes of the current node, and calling the recursive rendering flow for each child node; the recursive rendering process includes identifying a data type of a child node, selecting a field type adaptation system or creating a collapsible container based on the data type.
4. The interaction method according to claim 1, wherein after the rendering of the nested data structure map is completed, receiving a folding or unfolding instruction of a user to any node, and dynamically updating the visible state of the corresponding child node according to the instruction comprises: after the nested data structure diagram is rendered, responding to click operation of a user on any object or array type node, and identifying a folding/unfolding control icon state of a node head area corresponding to the click operation; if the current icon is in the first state, displaying all the child nodes, and switching the icon into the second state; if the current icon is in the second state, all the child nodes are hidden, and the icon is switched to the first state.
5. The interaction method according to claim 1, wherein determining a target input mode based on the editing trigger operation, starting a data input flow corresponding to the target input mode includes: responding to input focus acquisition operation of any basic type node, detecting a user triggering mode switching instruction, and switching an activation mode of a current input field between an expression mode and a fixed value mode; When the activation mode is an expression mode, receiving selection or input of a dynamic variable reference by a user; And when the activation mode is a fixed value mode, receiving direct input of static data by a user.
6. The interactive method according to claim 5, wherein when the activation mode is an expression mode and the dynamic variable is an array type, a dedicated binding button is displayed; In response to clicking operation of the special binding button, popping up an array selector and loading a variable array data source; traversing each node in the variable array data source, identifying an array type node according to the node type label identification, marking the node as optional, and setting ash for non-array type nodes to be forbidden; responding to the fact that a user selects one array type node in the array selector, triggering a single selection constraint mechanism, and automatically disabling other selectable nodes; and responding to the user confirmation operation, saving the binding data of the selected array node, and updating the binding state and the component display of the corresponding basic type node.
7. The interaction method of claim 1, wherein the initiating the verification process, performing verification on the current node data according to a preset field constraint rule, and recursively propagating the verification result upward along a parent node path of the nested data structure graph comprises: executing verification from a root node, calling a first verification method by the root node, and traversing all layers of child nodes in a downward depth manner; After each level node receives the verification instruction, executing a second verification method, and executing independent verification on the level field; and when the verification of the root node and the child node fails, marking a second verification state and generating corresponding error information.
8. The method of interaction of claim 7, wherein, When any child node fails to execute the second verification method, generating corresponding error information and transmitting the error information to the upper-level father node; each level of father node receives error information from each child node and gathers the error information to the verification result of the node; The error information is returned layer by layer along the path of the father node of the nested data structure chart until the child node directly related under the root node; And the sub-nodes directly related under the root node aggregate all the received error information to the root component, and the root component integrates the verification states and the error information of all the hierarchical nodes of the full tree to form an overall verification result.
9. The method of interaction of claim 8, wherein, When any node fails in verification, updating the input control corresponding to the node which fails in verification into a first reminding state, and rendering error information in the adjacent area of the input control corresponding to the node which fails in verification; And responding to the error information to be transmitted back to any node along the father node path, and synchronously executing the first reminding state and the rendering error information by the verification failure fields in any node and all the descendant nodes receiving the transmitted back error information.
10. An interactive apparatus supporting visualization of infinitely nested data structures, comprising: the rendering module is used for responding to a data structure loading event, executing a recursive rendering process based on the node type and the nesting relationship of the data structure, and rendering to generate a nested data structure diagram with a hierarchical topology; The folding and unfolding module is used for receiving folding or unfolding instructions of a user to any node after the rendering of the embedded data structure diagram is completed, and dynamically updating the visible state of the corresponding child node according to the instructions; The input mode determining module is used for responding to the edit triggering operation of the user for inputting the page information, determining a target input mode based on the edit triggering operation and starting a data input flow corresponding to the target input mode; and the verification module is used for starting a verification process when a user finishes input or submitting operation, executing verification on the current node data according to a preset field constraint rule, and recursively spreading a verification result upwards along a parent node path of the embedded data structure diagram.

Description

Interactive method and device supporting infinite nested data structure visualization Technical Field The invention relates to the technical field of data structure visualization and man-machine interaction collaborative modeling, in particular to an interaction method and device supporting infinite nested data structure visualization. Background In existing data configuration and editing systems, traditional schemes tend to be frustrating when dealing with complex nested data structures like JSON, XML, etc. Firstly, the conventional form component is difficult to effectively display and edit deeply nested data, and particularly lacks of visual support for a dynamic hierarchical structure, which leads users to be difficult to intuitively understand and operate when facing complex data relationships, in addition, the conventional system is generally lack of an intelligent binding mechanism for array type data, so that batch configuration becomes complicated, and particularly, the switching operation between an expression and a fixed value is complex, so that user experience and configuration efficiency are seriously affected. Disclosure of Invention Based on the above, in order to solve the above problems of the existing data structure visualization tool, an interactive method and device supporting infinite nested data structure visualization are provided. The invention provides an interaction method supporting infinite nested data structure visualization, which is characterized by responding to a data structure loading event, executing a recursive rendering process based on node types and nesting relations of a data structure, rendering to generate a nested data structure diagram with hierarchical topology, receiving a folding or unfolding instruction of a user to any node after the nested data structure diagram is rendered, dynamically updating the visible state of a corresponding child node according to the instruction, responding to an editing triggering operation of the user to page information input, determining a target input mode based on the editing triggering operation, starting a data input process corresponding to the target input mode, starting a verification process when the user finishes the input or submitting operation, executing verification on current node data according to a preset field constraint rule, and recursively propagating a verification result upwards along a parent node path of the nested data structure diagram. Further, based on the node types and the nesting relation of the data structure, executing a recursive rendering process, and rendering to generate a nested data structure diagram with hierarchical topology, wherein the nested data structure diagram comprises the steps of starting from a root node, identifying the data type of a current node, calling a field type adaptation system to render a corresponding input control if the current node is a basic type, creating a foldable container if the current node is an object or array type, and placing node data in the foldable container. Further, if the current node is an object or array type, creating a foldable container, and placing the node data in the foldable container, further comprising traversing all the child nodes of the current node, and invoking a recursive rendering process for each child node, wherein the recursive rendering process comprises identifying the data type of the child node, and selecting a field type adaptation system or creating the foldable container according to the data type. Further, after the rendering of the nested data structure diagram is completed, receiving a folding or unfolding instruction of a user to any node, and dynamically updating the visible states of the corresponding sub-nodes according to the instruction, wherein the receiving of the folding or unfolding instruction comprises the steps of responding to clicking operation of the user to any object or array type node after the rendering of the nested data structure diagram is completed, identifying the folding/unfolding control icon state of the head area of the node, displaying all the sub-nodes and switching the icons to a second state if the current icon is in the first state, and hiding all the sub-nodes and switching the icons to the first state if the current icon is in the second state. Further, a target input mode is determined based on editing trigger operation, and a data input flow corresponding to the target input mode is started, wherein the method comprises the steps of responding to input focus acquisition operation of any basic type node, detecting a user trigger mode switching instruction, switching an activation mode of a current input field between an expression mode and a fixed value mode, receiving selection or input of a dynamic variable reference by a user when the activation mode is the expression mode, and receiving direct input of static data by the user when the activation mode is the fixed value mode.