An interactive method and apparatus for visualizing data structures with unlimited nesting

Abstract

The application provides an interactive method and device supporting infinite nested data structure visualization, and relates to the technical field of data structure visualization and human-computer interaction collaborative modeling. The method comprises the following steps: performing type-aware recursive rendering in response to a data structure loading event to generate a nested embedding diagram with clear hierarchical topology; providing a dual-input mode of expression mode and fixed value mode for basic type nodes, and realizing accurate binding of array variables through a special binding button, an intelligent array selector, a node category label identification and a single selection constraint mechanism in the expression mode; starting a two-layer recursive verification process driven by the root node when submitting, and aggregating and propagating the verification results upwards along the parent path and visually feeding back. The application improves the rendering performance and interactive user experience of deeply nested data structures, supports real-time infinite recursion operations, and effectively solves the problems of non-intuitive topology, easy-to-make mistakes in binding, and low efficiency in verification in the visualization of complex data structures in traditional tools.

Description

Technical Field

[0001] This invention relates to the technical field of data structure visualization and human-computer interaction collaborative modeling, specifically to an interactive method and apparatus that supports infinitely nested data structure visualization. Background Technology

[0002] In existing data configuration and editing systems, traditional solutions often fall short when handling complex nested data structures like JSON and XML. Firstly, conventional form components struggle to effectively display and edit deeply nested data, particularly lacking visual support for dynamic hierarchical structures. This makes it difficult for users to intuitively understand and manipulate complex data relationships. Furthermore, existing systems generally lack intelligent binding mechanisms for array-type data, making batch configuration cumbersome. Of particular concern is the complexity of switching between expressions and fixed values, severely impacting user experience and configuration efficiency. Summary of the Invention

[0003] Based on this, in order to solve the above-mentioned problems of existing data structure visualization tools, an interactive method and device that supports infinitely nested data structure visualization is proposed.

[0004] This invention protects an interactive method for visualizing infinitely nested data structures. In response to a data structure loading event, a recursive rendering process is executed based on the node type and nesting relationship of the data structure to generate a nested data structure graph with a hierarchical topology. After the nested data structure graph is rendered, a user's command to collapse or expand any node is received, and the visibility state of the corresponding child nodes is dynamically updated according to the command. In response to a user's edit trigger operation on page information input, the target input mode is determined based on the edit trigger operation, and the data input process corresponding to the target input mode is initiated. When the user completes the input or submits the operation, a verification process is initiated, performing verification on the current node data according to preset field constraint rules, and recursively propagating the verification result upwards along the parent node path of the nested data structure graph.

[0005] Furthermore, based on the node types and nesting relationships of the data structure, a recursive rendering process is executed to render and generate a nested data structure graph with hierarchical topology, including: starting from the root node, identifying the data type of the current node; if the current node is a basic type, calling the field type adaptation system to render the corresponding input control; if the current node is an object or array type, creating a collapsible container and placing the node data inside the collapsible container.

[0006] Furthermore, if the current node is an object or array type, a collapsible container is created, and the node data is placed inside the collapsible container. This further includes: traversing all child nodes of the current node and calling the recursive rendering process for each child node; the recursive rendering process includes identifying the data type of the child node and selecting a field type to adapt to the system or creating a collapsible container based on the data type.

[0007] Furthermore, after the nested data structure graph is rendered, the system receives a user's command to collapse or expand any node, and dynamically updates the visible state of the corresponding child nodes according to the command. This includes: after the nested data structure graph is rendered, in response to a user's click operation on any object or array type node, identifying the collapse / expand control icon state in the header area of ​​that node; if the current icon is in the first state, then all child nodes are displayed and the icon is switched to the second state; if the current icon is in the second state, then all child nodes are hidden and the icon is switched to the first state.

[0008] Furthermore, based on the edit trigger operation, the target input mode is determined, and the data input process corresponding to the target input mode is initiated, including: in response to the input focus acquisition operation of any basic type node, detecting the user trigger mode switching instruction, switching the activation mode of the current input field between expression mode and fixed value mode; when the activation mode is expression mode, receiving the user's selection or input of dynamic variable references; when the activation mode is fixed value mode, receiving the user's direct input of static data.

[0009] Furthermore, when the activation mode is expression mode and the dynamic variable is an array type, a dedicated binding button is displayed; in response to a click on the dedicated binding button, an array selector pops up and loads the variable array data source; each node in the variable array data source is traversed, array type nodes are identified based on the node category label and marked as optional, while non-array type nodes are grayed out and disabled; in response to the user selecting an array type node in the array selector, a single-selection constraint mechanism is triggered, automatically disabling the remaining optional nodes; in response to the user's confirmation operation, the binding data of the selected array node is saved, and the binding status and component display of the corresponding basic type node are updated.

[0010] Furthermore, the verification process is initiated, and the data of the current node is verified according to the preset field constraint rules. The verification results are then recursively propagated upwards along the parent node path of the nested data structure graph, including: starting from the root node, the verification is performed, the root node calls the first verification method, and the child nodes at each level are traversed downwards; after receiving the verification instruction, each level node executes the second verification method to perform independent verification on the fields of its level; when the root node and child nodes pass the verification, the first verification status is marked; when the root node and child nodes fail the verification, the second verification status is marked and the corresponding error information is generated.

[0011] Furthermore, when any child node fails to perform the second verification method, it generates a corresponding error message and passes it to the next higher parent node. Each parent node receives error messages from each child node and summarizes them in its own verification result. The error messages are passed back up the nested data structure graph layer by layer until they reach the child nodes directly associated with the root node. The child nodes directly associated with the root node gather all the received error messages into the root component. The root component integrates the verification status and error messages of all levels of nodes in the tree to form the overall verification result.

[0012] Furthermore, when any node fails to verify, the input control corresponding to that node is updated to the first alert state, and error information is rendered in the vicinity of the input control corresponding to that node; in response to the error information being sent back to any node along the parent node path, the first alert and error information are simultaneously executed and rendered in the fields of the node that received the returned error information and all its descendant nodes.

[0013] This invention protects an interactive device for visualizing infinitely nested data structures, comprising: a rendering module, used to respond to a data structure loading event, and based on the node type and nesting relationship of the data structure, execute a recursive rendering process to render and generate a nested data structure graph with hierarchical topology; a folding / expanding module, used to receive a user's folding or expanding instruction for any node after the nested data structure graph is rendered, and dynamically update the visibility state of the corresponding child node according to the instruction; an input mode determination module, used to respond to a user's editing trigger operation on page information input, determine the target input mode based on the editing trigger operation, and start the data input process corresponding to the target input mode; and a verification module, used to start a verification process when the user completes the input or submission operation, perform verification on the current node data according to preset field constraint rules, and recursively propagate the verification result upwards along the parent node path of the nested data structure graph.

[0014] This invention protects an electronic device, comprising: a processor, a memory, and a bus. The memory stores machine-readable instructions executable by the processor. When the electronic device is running, the processor and the memory communicate via the bus. The machine-readable instructions are executed by the processor to perform steps of an interactive method that supports visualization of infinitely nested data structures.

[0015] This invention protects a computer-readable storage medium storing a computer program, the computer program being executed by a processor to perform steps of an interactive method that supports visualization of infinitely nested data structures.

[0016] This invention provides an interactive method and apparatus for visualizing infinitely nested data structures. Oriented towards visual interaction with dynamically bound variables, it responds to a data structure loading event and, based on the node types and nesting relationships of the data structure, executes a recursive rendering process to generate a nested data structure graph with a hierarchical topology. After the nested data structure graph is rendered, it receives a user's command to collapse or expand any node and dynamically updates the visibility state of the corresponding child nodes according to the command. Responding to a user's edit trigger operation on page information input, it determines the target input mode based on the edit trigger operation and initiates the data input process corresponding to the target input mode. When the user completes the input or submits the operation, it initiates a verification process, performs verification on the current node data according to preset field constraint rules, and recursively propagates the verification result upwards along the parent node path of the nested data structure graph. This solution organically integrates recursive rendering, dynamic node state control, context-aware input mode switching, and a verification mechanism that propagates recursively along the parent path, forming a closed-loop, scalable visual editing interaction paradigm. To address the need for refined binding control of array-type variables in expression mode, this paper introduces a dedicated binding button, an intelligent array selector, automatic identification and state differentiation driven by node category labels, a single-selection constraint mechanism, and a binding state linkage update strategy. This significantly improves the binding accuracy and user-friendliness of complex array-type data structures on the platform. Simultaneously, a recursive start verification process based on nested data structure graphs is proposed. This constructs a two-layer verification architecture that starts from the root node, calls differentiated verification methods hierarchically (the root node executes the first verification method and drives a deep traversal, while each child node executes the second verification method for independent field-level verification), and supports upward aggregation and propagation of verification states along the parent node path. This achieves a high degree of alignment between the verification logic and the data structure topology, ensuring the integrity and compliance checks of all fields. Attached Figure Description

[0017] The accompanying drawings are provided to further illustrate the invention and form part of the specification. They are used in conjunction with embodiments of the invention to explain the invention and do not constitute a limitation thereof. In the drawings: Figure 1 The present application provides a visual interactive flowchart of the nested data structure diagram. Figure 2 The flowchart of dynamic form rendering based on data type provided in this application embodiment; Figure 3 The flowchart of dynamic variable binding and mode switching provided in the embodiments of this application; Figure 4 The form validation flowchart provided in this application embodiment; Figure 5 : A diagram of the data structure visualization device provided in the embodiments of this application; Figure 6 The data structure visualization electronic device diagram provided in the embodiments of this application; Figure 7 The recursive rendering flowchart provided in this application embodiment; Figure 8 The following is a flowchart of the array binding interaction provided in the embodiments of this application; Figure 9 : A schematic diagram of the verification propagation mechanism provided in the embodiments of this application. Detailed Implementation

[0018] To make the objectives, technical solutions, and advantages of the embodiments of this application clearer, the technical solutions of the embodiments of this application will be clearly and completely described below with reference to the accompanying drawings. Obviously, the described embodiments are only some embodiments of this application, and not all embodiments. The components of the embodiments of this application described and shown in the accompanying drawings can generally be arranged and designed in various different configurations. Therefore, the following detailed description of the embodiments of this application provided in the accompanying drawings is not intended to limit the scope of the claimed application, but merely represents selected embodiments of this application. Based on the embodiments of this application, every other embodiment obtained by those skilled in the art without inventive effort falls within the scope of protection of this application.

[0019] Research has revealed that when handling complex nested data structures (such as JSON and XML), traditional form components struggle to effectively display and edit deeply nested relationships, lacking visualization support for dynamic hierarchical data. Users cannot intuitively understand multi-layered nested data topology, and the lack of collapsible / expandable interactions results in long structures occupying significant screen space. Input modes are limited, requiring component reloading or manual configuration for switching between expressions and fixed values, making operations cumbersome and error-prone. The validation mechanism is flat, only validating the current field without considering constraints and dependencies between parent and child nodes, preventing error messages from accurately tracing back along the nested path, leading to insufficient data integrity and low debugging efficiency.

[0020] Based on this, please refer to Figure 1 This application provides an interactive method for visualizing infinitely nested data structures. It achieves highly available, highly controllable, and highly reliable interactive visualization of data structures with arbitrary depth of nesting by recursively rendering a hierarchical topology graph, dynamically controlling the visibility of child nodes through folding and unfolding, initiating dual-mode input processes on demand, and recursively propagating verification results upwards along the parent node path. The method specifically includes the following steps: S101 responds to the data structure loading event and, based on the node type and nesting relationship of the data structure, executes a recursive rendering process to render and generate a nested data structure graph with hierarchical topology. S102 After the nested data structure diagram is rendered, it receives a user's command to fold or expand any node, and dynamically updates the visibility state of the corresponding child node according to the command. S103 responds to the user's edit trigger operation on page information input, determines the target input mode based on the edit trigger operation, and starts the data input process corresponding to the target input mode; When the user completes the input or submission operation, S104 initiates the verification process, performs verification on the current node data according to the preset field constraint rules, and recursively propagates the verification result upwards along the parent node path of the nested data structure graph.

[0021] This application provides an interactive method for visualizing infinitely nested data structures. By responding to data structure loading events and executing a recursive rendering process, it can adaptively identify node types such as objects and arrays, as well as nesting relationships, to generate nested data structure diagrams with clear hierarchical topology. This breaks through the hard limitations of traditional components on nesting depth, enabling infinitely nested visualization. By receiving and responding to user commands to collapse or expand any node, it dynamically updates the visibility state of the corresponding child nodes, significantly improving screen space utilization and operational focus in long structures. By responding to editing trigger operations triggered by page information input, it intelligently identifies and initiates the data input process corresponding to expression mode or fixed value mode, supporting the switching between dynamic variable binding and static value configuration. By initiating a verification process when the user completes input or submits the operation, and performing verification on the current node according to preset field constraint rules, while recursively propagating the verification results upward along the parent node path, it achieves accurate error location, global verification scope, and structured feedback path, effectively ensuring the integrity of nested data.

[0022] S101 responds to the data structure loading event and, based on the node type and nesting relationship of the data structure, executes a recursive rendering process to render and generate a nested data structure graph with hierarchical topology.

[0023] In one optional implementation, upon receiving an externally passed data structure during the initialization phase, the component immediately triggers a data structure loading event and starts the recursive rendering module. This module, starting from the root node, identifies the data type of each node layer by layer and executes a differentiated rendering strategy based on the type differences. See details... Figure 2 , Figure 7 Rendering includes the following steps: S1011 starts from the root node and identifies the data type of the current node; if the current node is a basic type, it calls the field type adaptation system.

[0024] Basic data types include strings, numbers, booleans, selectors, password fields, and multiline text. When the node type determination module determines that the data of the node being called is of a normal type, it calls the field type adaptation system to render the corresponding input control based on the node field label: strings are mapped to ordinary text boxes, numbers to number input boxes, booleans to toggle controls or drop-down selectors, password fields to password boxes with hiding functionality, multiline text to scalable text fields, and condition combiners to dedicated composite components; if the current node is an object or array type, it enters the S1012 branch. S1012 If the current node is an object or array type, create a collapsible container and place the node data inside the collapsible container.

[0025] In the appendix Figure 7 In the left branch, if the current node is an object or array, a collapsible container is created, and the node data is placed inside the collapsible container. This further includes: traversing all child nodes of the current node and calling the recursive rendering process for each child node; the recursive rendering process includes identifying the data type of the child node, selecting a field type to adapt to the system, or creating a collapsible container based on the data type; when the child node is still an object or array, new collapsible containers are generated and the component itself is recursively called, thus forming an infinitely hierarchical tree-like nested structure; the entire recursive process is implemented through the component self-referencing mechanism under the front-end framework, and the final generated nested data structure diagram has a clear hierarchical topology, with each node visually strictly corresponding to its nesting depth and parent-child relationship in the original data structure.

[0026] After the nested data structure diagram is rendered, S102 receives a user's command to fold or expand any node, and dynamically updates the visibility state of the corresponding child node according to the command.

[0027] The folding and unfolding functions rely on the folding and unfolding interaction module, which is ready after the S101 completes the recursive rendering of the front-end node tree.

[0028] After the nested data structure graph is rendered, in response to a user's click on any object or array-type node, the system identifies the state of the collapse / expand control icon in the node's header area. The system captures the user's interaction intent by listening to click events and reads the boolean state variable maintained within the current node. If the current icon is in the first state (right arrow icon), indicating that the node is in a collapsed state, `expanded` is set to `true`, triggering a command to display all child nodes within its content area, and simultaneously switching the icon to the second state (down arrow icon). If the current icon is in the second state (down arrow icon), indicating that the node is in an expanded state, `expanded` is set to `false`, a command to hide all child nodes within its content area, and simultaneously switching the icon back to the first state (right arrow icon). This state switching process is accompanied by a transition animation, achieving a smooth expand / collapse visual effect. The states of all nodes are independent of each other; the collapse or expansion operation of any node does not affect the visibility of other nodes, thus supporting users to focus on specific levels of data structures as needed, effectively optimizing screen space utilization efficiency under long nested structures.

[0029] S103 responds to the user's edit trigger operation on page information input, determines the target input mode based on the edit trigger operation, and starts the data input process corresponding to the target input mode.

[0030] This function is implemented by a dual-mode input system. After node collapse / expansion status management is completed in S102, users can perform edit trigger operations on any basic type of node (such as strings, numbers, booleans, etc.), including clicking the input box, focusing the control, or hovering to bring up the mode switching panel. The specific steps are as follows (see appendix for details). Figure 8 : S1031 responds to an input focus acquisition operation on any basic type node, detects a user-triggered mode switching instruction, and switches the activation mode of the current input field between expression mode and fixed value mode.

[0031] The system identifies the switching intent by listening to events and the interactive behavior of the floating prompt panel, and dynamically sets the initial mode based on the current binding status of the node and the user's operation path: if the node has been configured with variable references before, it defaults to expression mode; if it is the first time editing or the historical configuration is empty, it defaults to fixed value mode; after the mode switch, the interface updates the input control shape and validation rules in real time; when the active mode is expression mode, it receives the user's selection or input of dynamic variable references; at this time, the input area is displayed as an expression edit box with ${} syntax mark, and variable auto-completion suggestions are provided.

[0032] In one optional implementation, the system identifies bindable fields based on their data type, including string input, integer input, number, array, and other types. Each bindable field internally maintains a resource attribute to identify the current data source mode, with a value of either EXPRESSION (expression mode) or FIXED_VALUE (fixed value mode). Users can freely switch between the "expression" and "fixed value" modes by clicking the toggle button next to the input box. During switching, the interface updates dynamically: selecting "expression" displays the expression input area, while selecting "fixed value" displays the fixed value input control (such as a text box, number input box, switch, etc.) that matches the field type. The switching process intelligently preserves the content already entered in the current mode, preventing user data loss.

[0033] S1032 When the activation mode is expression mode and the dynamic variable is an array type, a dedicated binding button is displayed; the button is located on the right side of the expression editing box, and the icon is a "chain connection" style.

[0034] In one implementation, if the current field is in expression mode, the resource attribute value maintained inside the field is EXPRESSION, indicating that the user has chosen to reference dynamic variables through an expression; at the same time, the expression of the current field points to an array type: based on the data type metadata of the field, it is identified that the data type expected to be received by the field is an array, or the parsing result of the expression currently entered by the user is an array type.

[0035] Under the above conditions, the system dynamically renders a dedicated binding button in the right-hand area of ​​the expression editing box. This button uses a visually related "chain-like" icon, clearly distinguishing it from ordinary expression input and intuitively prompting the user that a special binding operation at the array dimension can be performed here.

[0036] S1033 In response to a click on the dedicated binding button, an array selector pops up and loads the variable array data source; When a user clicks the dedicated binding button in expression mode, a two-dimensional variable selection panel pops up. The left side of the panel displays a list of upstream nodes, showing all reachable nodes before the current node in the workflow; the right side displays the output field tree of the currently selected upstream node. The field tree recursively displays the node's output structure, with each field containing multiple labels. Optional labels include field name, field value examples, and field type, supporting infinite recursive expansion for object and array types.

[0037] In one alternative implementation, the aforementioned variable array data source is dynamically generated by the workflow orchestration engine based on the current node's position in the workflow and the output structure of all upstream nodes, thereby enabling context-aware variable referencing and ensuring that only the upstream outputs that the current node can actually reach are displayed.

[0038] S1034 traverses each node in the variable array data source, identifies array type nodes based on node category label and marks them as optional, and grays out non-array type nodes to disable them. In one optional implementation, after the variable selection panel loads the data source, it traverses all nodes in the output field tree. The system determines whether a node is an array type by identifying its field type label, which can be either "array" or "array_object". Only nodes identified as array types are marked as selectable; other non-array type nodes (such as primitive types or objects) are grayed out and their selection is disabled, guiding the user to perform the correct binding operation.

[0039] S1035 responds to the user selecting an array type node in the array selector, triggering a single-selection constraint mechanism to automatically disable the remaining selectable nodes.

[0040] By using a reactive front-end framework to listen for selection events, all candidate options are immediately iterated upon the selection of any valid node. Unselected array-type nodes are disabled to ensure only a unique binding target exists. When an array node is selected, a single-selection constraint mechanism is automatically triggered. In this case, the user-selected array node is highlighted and marked as selected, while all other previously selectable array nodes in the panel are automatically disabled, preventing multiple selections and guaranteeing the uniqueness and determinism of the binding.

[0041] S1036 responds to the user's confirmation operation by saving the binding data of the selected array node and updating the binding status and component display of the corresponding basic type node.

[0042] The bound data includes the node path, variable name, data type, and complete data structure. After saving, the input box content is refreshed synchronously to the selected path format, and a binding identifier icon is displayed at the node header. For array types, after successfully binding to the upstream array node, the variable source of its child fields will automatically switch to the element structure of the bound array, realizing the ability to perform loop mapping with one-time binding and batch mapping, simplifying the configuration process.

[0043] When the user completes all input and triggers save, the entire field tree is recursively traversed, collecting the attribute value of each field. When the resource attribute value is EXPRESSION, the EXPRESSION attribute is checked to be non-empty; when the resource attribute value is FIXED_VALUE, the FIXED_VALUE attribute is checked to be non-empty. Finally, the system outputs a multi-level nested mapping structure that fully expresses the configuration information of the entire data structure.

[0044] When the user completes the input or submission operation, S104 initiates the verification process, performs verification on the current node data according to the preset field constraint rules, and recursively propagates the verification result upwards along the parent node path of the nested data structure graph.

[0045] This function is implemented through a real-time verification feedback mechanism. After the data entry for the target input mode is completed in S103, the system listens for verification trigger conditions and triggers the function. The specific steps include the following (see appendix). Figure 9 : S1041 starts validation from the root node. The root node calls the first validation method, traversing each level of child nodes downwards. This first validation method is validate(), exposed by the outermost ObjectBox component. When called, validateAllChildren() is executed first, traversing its direct child nodes and issuing validation commands one by one.

[0046] After receiving the verification instruction, each node in S1042 executes the second verification method to perform independent verification on the fields of this level. The second verification method is validateFields(), which runs inside each ObjectFieldItem component and performs matching and judgment based on the constraint rules of the r field defined in the node metadata. When the root node and the child node pass verification, a first verification state is marked; the first verification state can be selected as follows: Figure 9 The checkmark or Pass in the code. When the root node and the child node fail verification, a second verification state is marked and a corresponding error message is generated; the second verification state can be selected as follows: Figure 9 The cross or "Fall" in the error message corresponds to the relevant validation rule. Figure 9 An example error message is provided. If the required fields are empty, it can also include information such as the error code and error path.

[0047] When any child node fails to validate using the second verification method, a corresponding error message is generated and propagated to the next higher parent node. This error message includes the field path, error type code, and a readable message, such as "user.name cannot be empty" or "age must be a number." Each parent node receives error messages from its child nodes and aggregates them into its own validation result. The error messages are propagated upwards along the parent node path of the nested data structure diagram, layer by layer, until they reach the directly associated child nodes under the root node. Figure 9 As shown, the error messages are summarized in the Level node under the root directory (highlighted in red).

[0048] When any node fails validation, the corresponding input control is updated to the first alert state, and an error message is rendered in the vicinity of the corresponding input control. The first alert state is characterized by the input box border turning red, the background color slightly darkening, and red error message text floating below or to the right of the control. In response to the error message being passed back to any node along the parent node path, the first alert and error message are synchronously executed and rendered in the fields of the node that received the returned error message and all its descendant nodes. That is, if a child object of Level 2 has a field that fails validation, then its parent Level 2 node will also have the field that fails validation. Node 1 not only marks itself as failing verification, but also transmits the error information to its UI layer, causing a red warning icon to appear at the top of the entire collapsible container, and highlighting all failed sub-items in the expanded state. The child nodes directly associated with the root node gather all received error information to the root component. The root component integrates the verification status and error information of nodes at all levels of the tree to form an overall verification result. This result uses the boolean value "valid" to indicate global validity, and includes an "errors" array to record all error paths and details, which can be used by external systems to make judgments or drive submission actions. For example, when an input box of the header type fails verification because it is not filled in, the input box turns red, the background color is darkened, and the text "Business type cannot be empty" appears below the input box. Furthermore, the error information is transmitted back along the parent node "Customer Financial Information" of "Header Type". Any node in the parent node path executes the first reminder and renders the error information, which serves to prompt the error and perform overall verification. The entire verification chain strictly follows the component tree structure, ensuring that errors in any depth of nesting can be accurately located, fed back level by level, and converged uniformly. The specific front-end error view is marked with a validation error box and the reason for the error.

[0049] Please see Figure 5 , Figure 5 This is a schematic diagram of the structure of an interactive device that supports visualization of infinitely nested data structures, provided as an embodiment of this application. Figure 5 As shown, the interactive device 200 includes: Rendering module 210 is used to respond to a data structure loading event and, based on the node type and nesting relationship of the data structure, execute a recursive rendering process to render and generate a nested data structure graph with hierarchical topology. The recursive rendering process starts from the root node and identifies the data type of the current node. If the current node is a basic type, the field type adaptation system is invoked to render the corresponding input control, which includes text boxes, numeric input boxes, dropdown selectors, switch controls, or date pickers. If the current node is an object or array type, a collapsible container is created, and the node data is placed inside the collapsible container. Further, after creating the collapsible container, all child nodes of the current node are traversed, and the recursive rendering process is recursively called for each child node until all leaf nodes have been rendered.

[0050] The folding / expanding module 220 is used to receive a user's folding or expanding instruction for any node after the nested data structure graph is rendered, and dynamically update the visibility state of the corresponding child node according to the instruction; specifically, in response to the user's click operation on any object or array type node, it identifies the folding / expanding control icon state of the node's header area; if the current icon is in the first state (default is "right arrow"), it displays all direct child nodes and their descendant nodes under the node, and switches the icon to the second state ("down arrow"); if the current icon is in the second state, it hides all direct child nodes and their descendant nodes under the node, and switches the icon to the first state.

[0051] The input mode determination module 230 is used to respond to the user's editing trigger operation on page information input, determine the target input mode based on the editing trigger operation, and start the data input process corresponding to the target input mode; specifically, in response to the input focus acquisition operation of any basic type node, it detects whether the user has triggered a mode switching instruction; the mode switching instruction includes double-clicking the input control, long-pressing the input area, or clicking the mode switching button on the right side of the input box; after detecting the instruction, it switches the activation mode of the current input field between expression mode and fixed value mode; when the activation mode is expression mode, it receives the user's selection or input of dynamic variable references, and supports the selection of declared variables, path expressions (such as $.user.name), or function calls (such as now(), uuid()) through the auto-completion list; when the activation mode is fixed value mode, it receives the user's direct input of static data and disables the expression syntax parsing function; The verification module 240 is used to initiate a verification process when a user completes input or submission. It performs verification on the current node's data according to preset field constraint rules and recursively propagates the verification results upwards along the parent node path of the nested data structure graph. Specifically, verification begins at the root node, which calls the first verification method and traverses each level of child nodes downwards. Each level node, upon receiving a verification instruction, executes the second verification method to perform independent verification on the fields at its level. The field constraint rules include non-empty verification, length range verification, regular expression matching, numerical range verification, required field verification, uniqueness verification, and custom script verification. When any leaf node fails to execute the second verification method, it generates corresponding error information and propagates it to the next higher parent node. Each parent node receives error information from its child nodes and summarizes it in its own verification result. The error information propagates upwards along the parent node path of the nested data structure graph. The node path is propagated upwards layer by layer until the directly associated child node under the root node; the directly associated child node under the root node gathers all received error information to the root component, and the root component integrates the verification status and error information of all levels of nodes in the tree to form an overall verification result; when any node fails verification, the corresponding input control of the node is updated to the first reminder state (border turns red, background color is slightly adjusted, and the icon displays a warning symbol), and an error information prompt bubble is rendered in the vicinity of the corresponding input control of the node; in response to the error information being propagated back to any node along the parent node path, the first reminder and error information rendering are synchronously executed for the fields that failed verification in any node that received the backed-back error information and all its descendant nodes; the verification module 240 also supports asynchronous verification, and for fields that need to be verified by remotely calling the interface (such as username uniqueness), a partial verification retry and status refresh are triggered after the request is returned.

[0052] Optionally, the interactive device 200 further includes an array binding module, used to display a dedicated binding button when the activation mode is expression mode and the dynamic variable is an array type; in response to a click operation on the dedicated binding button, pop up an array selector and load the variable array data source; traverse each node in the variable array data source, identify array type nodes according to the node category label and mark them as optional, and gray out non-array type nodes to disable; in response to the user selecting an array type node in the array selector, trigger a single-selection constraint mechanism to automatically disable the remaining optional nodes; in response to the user confirmation operation, save the binding data of the selected array node, and update the binding status and component display of the corresponding basic type node; the array binding module also maintains a binding context cache, recording the current binding path, scope variable snapshot and dependency graph to support context-aware prompts during subsequent editing.

[0053] Furthermore, the interactive device 200 also includes a state management module for maintaining the runtime state of the entire tree, including node expand / collapse state, input mode state, verification state, binding state, and editing history. The state management module is implemented using an immutable data structure, generating a new state snapshot each time a state change occurs, and supports undo / redo operations. It integrates a Diff algorithm to perform minimal DOM updates only on the subtrees of nodes that have changed, thereby improving rendering performance under large-scale nested structures.

[0054] This application provides an interactive device for visualizing infinitely nested data structures. It achieves recursive visualization rendering based on node type and nesting relationship through a rendering module, provides efficient and controllable hierarchical browsing capabilities through a collapse / expand module, supports dual-mode input (expression and fixed value) through an input mode determination module, constructs a bottom-up recursive verification propagation mechanism through a verification module, and enhances interactive integrity and engineering usability through array binding and state management modules. This device can be widely applied in scenarios such as low-code platform configuration interfaces, API debugging tools, JSON Schema form generators, microservice configuration centers, and AI prompt word arrangement systems, significantly improving the readability, editability, and verifiability of complex nested data structures.

[0055] Please see Figure 6 , Figure 6 This is a schematic diagram of the structure of an electronic device provided in an embodiment of this application. Figure 6 As shown, the electronic device 300 includes a processor 310, a memory 320, and a bus 330.

[0056] The memory 320 stores machine-readable instructions executable by the processor 310. When the electronic device 300 is running, the processor 310 and the memory 320 communicate via the bus 330. When the machine-readable instructions are executed by the processor 310, the steps of an interactive method supporting infinitely nested data structure visualization can be executed, specifically including: responding to a data structure loading event to execute a recursive rendering process to generate a nested data structure graph with hierarchical topology; dynamically updating the visibility state of child nodes in response to user folding or expanding commands after rendering is complete; responding to user editing trigger operations to determine the target input mode and start the corresponding data input process; and starting a verification process when the user completes the input or submission operation, performing verification on the current node data according to preset field constraint rules, and following the parent node path. The verification results are verified through radial recursive propagation. The recursive rendering process includes calling the field type adaptation system to render input controls for basic type nodes, creating collapsible containers for object or array type nodes, and recursively processing child nodes. The collapse / expand instruction response logic includes recognizing the node header icon state and switching the visibility of child nodes. The input mode determination logic includes supporting dynamic variable reference input in expression mode and static data input in fixed value mode. The verification process includes summarizing error information layer by layer from bottom to top, synchronously updating node reminder states, and rendering error prompts. The machine-readable instructions also support dedicated binding button responses in the array binding module, array selector pop-ups, node filtering and single-selection constraint mechanisms, and immutable state maintenance and minimized DOM updates in the state management module.

[0057] This application embodiment also provides a computer-readable storage medium storing a computer program. When the computer program is executed by a processor, it performs the following steps for an interactive method supporting the visualization of infinitely nested data structures: In response to a data structure loading event, based on the node type and nesting relationship of the data structure, a recursive rendering process is executed to render a nested data structure diagram with a hierarchical topology; after the nested data structure diagram is rendered, a user's command to collapse or expand any node is received, and the visibility state of the corresponding child node is dynamically updated according to the command; in response to a user's edit trigger operation on page information input, a target input mode is determined based on the edit trigger operation, and a data input process corresponding to the target input mode is initiated; when the user completes the input or submission operation, a verification process is initiated, performing verification on the current node data according to preset field constraint rules, and recursively propagating the verification result upwards along the parent node path of the nested data structure diagram; wherein, the recursive rendering process includes identifying the node data type starting from the root node, calling the field type adaptation system to render the corresponding input control for basic type nodes, and for object or array type nodes... The program creates a collapsible container and places node data within it, recursively executing the same process on child nodes. The collapsing or expanding instruction response includes recognizing the collapsing / expanding control icon status of object or array-type node headers and toggling the visibility of child nodes. The target input mode determination includes responding to basic type node input focus acquisition operation detection mode switching instructions, switching between expression mode and fixed value mode, and supporting dynamic variable reference input and static data input respectively. The verification process includes initiating a depth-first traversal verification from the root node, with each node performing independent verification. When verification fails, error messages are generated and propagated upwards along the parent node path, ultimately being integrated by the root component to consolidate the entire tree's verification status and error messages, and synchronously updating the alert status and error message rendering of each failed node. The program also supports displaying dedicated binding buttons for array-type variables in expression mode, popping up array selectors, filtering selectable array nodes, executing single-selection constraints, and updating binding status. Furthermore, the program supports maintaining node expansion status, input mode status, verification status, binding status, and editing history through a state management module, using immutable data structures to implement state snapshots and minimize DOM updates.

[0058] Those skilled in the art will understand that, for the sake of convenience and brevity, the specific working processes of the systems, devices, and units described above can be referred to the corresponding processes in the foregoing method embodiments, and will not be repeated here.

[0059] In the several embodiments provided in this application, it should be understood that the disclosed systems, apparatuses, and methods can be implemented in other ways. The apparatus embodiments described above are merely illustrative. For example, the division of units is only a logical functional division, and in actual implementation, there may be other division methods. Furthermore, multiple units or components may be combined or integrated into another system, or some features may be ignored or not executed. Additionally, the shown or discussed mutual couplings, direct couplings, or communication connections may be through some communication interfaces; indirect couplings or communication connections between devices or units may be electrical, mechanical, or other forms.

[0060] The units described as separate components may or may not be physically separate. The components shown as units may or may not be physical units; that is, they may be located in one place or distributed across multiple network units. Some or all of the units can be selected to achieve the purpose of this embodiment according to actual needs.

[0061] In addition, the functional units in the various embodiments of this application can be integrated into one processing unit, or each unit can exist physically separately, or two or more units can be integrated into one unit.

[0062] If the aforementioned functions are implemented as software functional units and sold or used as independent products, they can be stored in a processor-executable, non-volatile, computer-readable storage medium. Based on this understanding, the technical solution of this application, in essence, or the part that contributes to the prior art, or a portion of the technical solution, can be embodied in the form of a software product. This computer software product is stored in a storage medium and includes several instructions to cause a computer device (which may be a personal computer, server, or network device, etc.) to execute all or part of the steps of the methods described in the various embodiments of this application. The aforementioned storage medium includes various media capable of storing program code, such as USB flash drives, portable hard drives, read-only memory (ROM), random access memory (RAM), magnetic disks, or optical disks.

[0063] Finally, it should be noted that the above-described embodiments are merely specific implementations of this application, used to illustrate the technical solutions of this application, and not to limit them. The scope of protection of this application is not limited thereto. Although this application has been described in detail with reference to the foregoing embodiments, those skilled in the art should understand that any person skilled in the art can still modify or easily conceive of changes to the technical solutions described in the foregoing embodiments, or make equivalent substitutions for some of the technical features, within the scope of the technology disclosed in this application. Such modifications, changes, or substitutions do not cause the essence of the corresponding technical solutions to deviate from the spirit and scope of the technical solutions of the embodiments of this application, and should all be covered within the scope of protection of this application. Therefore, the scope of protection of this application should be determined by the scope of the claims.

Claims

1. An interactive method for visualizing infinitely nested data structures, characterized in that, In response to the data structure loading event, a recursive rendering process is executed based on the node type and nesting relationship of the data structure to render and generate a nested data structure graph with hierarchical topology; After the nested data structure graph is rendered, the system receives a user's command to collapse or expand any node, and dynamically updates the visibility state of the corresponding child node according to the command. In response to a user's edit trigger operation on page information input, a target input mode is determined based on the edit trigger operation, and the data input process corresponding to the target input mode is initiated; wherein, in response to an input focus acquisition operation on any basic type node, a user trigger mode switching instruction is detected, and the activation mode of the current input field is switched between expression mode and fixed value mode; when the activation mode is expression mode, the user's selection or input of dynamic variable references is received; when the activation mode is fixed value mode, the user's direct input of static data is received; when the activation mode is expression mode and the dynamic variable is an array type, a dedicated binding button is displayed; in response to the click of the dedicated binding button... Upon clicking, an array selector pops up and loads the variable array data source. It iterates through each node in the variable array data source, identifying array-type nodes based on node category labels and marking them as optional, while graying out non-array-type nodes to disable them. In response to the user selecting an array-type node in the array selector, a single-selection constraint mechanism is triggered, automatically disabling the remaining optional nodes. In response to the user's confirmation, the binding data of the selected array node is saved, and the binding status and component display of the corresponding basic type node are updated. For array types, after successfully binding to an upstream array node, the variable source of its child fields will automatically switch to the element structure of the bound array, achieving a one-time binding and batch mapping loop mapping capability, simplifying the configuration process. When the user completes input or submits an operation, the verification process is initiated. The current node data is validated according to the preset field constraint rules, and the verification result is recursively propagated upwards along the parent node path of the nested data structure graph. Specifically, when the resource attribute value is an expression, the expression attribute is checked to be non-empty; when the resource attribute value is a fixed value, the fixed value attribute is checked to be non-empty. A nested mapping structure containing multiple layers is output.

2. The interaction method according to claim 1, characterized in that, Based on the node types and nesting relationships of the data structure, a recursive rendering process is executed to generate a nested data structure graph with hierarchical topology, including: Starting from the root node, identify the data type of the current node; If the current node is of a basic type, the field type adaptation system will be called to render the corresponding input control; If the current node is an object or array, a collapsible container is created, and the node data is placed inside the collapsible container.

3. The interaction method according to claim 2, characterized in that, If the current node is an object or array, create a collapsible container and place the current node's data inside the collapsible container, further including: Iterate through all child nodes of the current node and call the recursive rendering process for each child node; The recursive rendering process includes identifying the data type of child nodes and selecting field types to adapt to the system or creating a collapsible container based on the data type.

4. The interaction method according to claim 1, characterized in that, After the nested data structure graph is rendered, the system receives a user's command to collapse or expand any node, and dynamically updates the visibility state of the corresponding child nodes according to the command, including: After the nested data structure diagram is rendered, in response to the user's click operation on any object or array type node, the collapse / expand control icon status of the node header area corresponding to the click operation is identified; If the current icon is in the first state, then all child nodes are displayed and the icon is switched to the second state; If the current icon is in the second state, hide all child nodes and switch the icon to the first state.

5. The interaction method according to claim 1, characterized in that, The verification process involves performing verification on the current node data according to preset field constraint rules, and recursively propagating the verification results upwards along the parent node path of the nested data structure graph. The verification process begins from the root node, which calls the first verification method and then traverses the child nodes at each level downwards. After receiving the verification command, each level node executes the second verification method to perform independent verification on the fields of its own level. When the root node and the child node pass the verification, a first verification state is marked; when the root node and the child node fail the verification, a second verification state is marked and corresponding error information is generated.

6. The interaction method according to claim 5, characterized in that, When any child node fails to perform the second verification method, it generates a corresponding error message and passes it to the next higher parent node. Each parent node receives error messages from its child nodes and aggregates them into the verification results of its own node. The error message is propagated upwards along the parent node path of the nested data structure graph, layer by layer, until it reaches the child node directly associated with the root node. The child nodes directly associated with the root node will gather all received error information to the root component. The root component will integrate the verification status and error information of all nodes at all levels of the tree to form an overall verification result.

7. The interaction method according to claim 6, characterized in that, When any node fails to verify, the input control corresponding to the node that failed to verify will be updated to the first reminder state, and an error message will be rendered in the adjacent area of ​​the input control corresponding to the node that failed to verify. In response to the error message being sent back to any node along the parent node path, the first alert state and the error message are synchronously executed in the field of the node that received the error message and all its descendant nodes that failed the verification.

8. An interactive device that supports visualization of infinitely nested data structures, characterized in that, include: The rendering module is used to respond to the data structure loading event, and based on the node type and nesting relationship of the data structure, execute a recursive rendering process to render and generate a nested data structure graph with hierarchical topology. The folding and unfolding module is used to receive a user's folding or unfolding command for any node after the nested data structure diagram is rendered, and dynamically update the visibility state of the corresponding child node according to the command. The input mode determination module is used to respond to a user's edit trigger operation on page information input, determine a target input mode based on the edit trigger operation, and initiate the data input process corresponding to the target input mode. Specifically, determining the target input mode and initiating the data input process corresponding to the target input mode based on the edit trigger operation includes: responding to an input focus acquisition operation on any basic type node, detecting a user trigger mode switching command, and switching the activation mode of the current input field between expression mode and fixed value mode; when the activation mode is expression mode, receiving the user's selection or input of a dynamic variable reference; when the activation mode is fixed value mode, receiving the user's direct input of static data; and when the activation mode is expression mode and the dynamic variable is an array type... When a data type is selected, a dedicated binding button is displayed. In response to clicking the dedicated binding button, an array selector pops up and loads the variable array data source. Each node in the variable array data source is traversed, and array type nodes are identified and marked as optional based on node category labels, while non-array type nodes are grayed out and disabled. In response to the user selecting an array type node in the array selector, a single-selection constraint mechanism is triggered, automatically disabling the remaining optional nodes. In response to the user's confirmation, the binding data of the selected array node is saved, and the binding status and component display of the corresponding basic type node are updated. For array types, after successfully binding an upstream array node, the variable source of its subfields will automatically switch to the element structure of the bound array, achieving a one-time binding and batch mapping loop mapping capability, simplifying the configuration process. The verification module is used to initiate the verification process when the user completes input or submits an operation. It performs verification on the data of the current node according to preset field constraint rules and recursively propagates the verification results upward along the parent node path of the nested data structure graph. Specifically, when the resource attribute value is an expression, it verifies that the expression attribute is not empty; when the resource attribute value is a fixed value, it verifies that the fixed value attribute is not empty. It outputs a nested mapping structure containing multiple layers.

Images