Tree interface display method and device, electronic device, and computer program product

Abstract

This disclosure relates to a method, apparatus, electronic device, and computer program product for displaying a tree-shaped interface, belonging to the field of computer software technology. The method includes: constructing a tree data model in response to application startup and loading each node in the tree data model; binding a tree view and a drawing module to the tree data model, and drawing the tree data model on a graphical user interface through the tree view, wherein the drawing module contains multiple drawing strategy classes; determining the target node in the tree data model that has changed in response to an interaction command for the tree data model or an update of the node state in the tree data model; and calling the corresponding target drawing strategy class to partially redraw the target node according to the node type attribute of the target node, so as to display the updated node state on the graphical user interface. This disclosure can support complex hierarchical management of tree data models, improve data rendering efficiency, and reduce system resource consumption.

Description

Technical Field

[0001] This disclosure relates to the field of computer software technology, and more specifically, to a method for displaying a tree-shaped interface, a device for displaying a tree-shaped interface, an electronic device, and a computer program product. Background Technology

[0002] With the development of instant messaging and online collaboration, hierarchical channel resources and their member information often need to be presented synchronously in the client's graphical user interface. Related technologies often employ a linear list structure to fully load and centrally render this hierarchical data.

[0003] However, when the number of nodes is large or the node status changes frequently, the above solution requires a full refresh and redraw of the entire list, which significantly increases the rendering load of the terminal graphics processing unit and causes redundant data processing and increased memory usage, making it difficult to meet the interactive requirements of low latency and high responsiveness.

[0004] Therefore, how to reduce the terminal's computing load and improve data rendering efficiency during the display of hierarchical data has become an urgent technical problem to be solved. Summary of the Invention

[0005] The purpose of this disclosure is to provide a method for displaying a tree-shaped interface, a device for displaying a tree-shaped interface, an electronic device, and a computer program product, thereby reducing the terminal's computing pressure and improving data rendering efficiency, at least to a certain extent, during the display of hierarchical data in the interface.

[0006] According to a first aspect of this disclosure, a method for displaying a tree-shaped interface is provided, comprising: In response to application startup, a tree data model is constructed and each node in the tree data model is loaded, the node having a corresponding node type attribute; A tree view and a drawing module are bound to the tree data model, and the tree data model is drawn on the graphical user interface through the tree view. The drawing module contains multiple drawing strategy classes. In response to an interactive command for the tree data model or an update of the node state in the tree data model, determine the target node in the tree data model that has changed; The corresponding target drawing strategy class is invoked based on the node type attribute of the target node, and the target node is partially redrawn through the target drawing strategy class to display the updated node state on the graphical user interface.

[0007] According to a second aspect of this disclosure, a tree-shaped interface display device is provided, comprising: A tree model building module is used to build a tree data model in response to application startup and load each node in the tree data model, wherein the node has a corresponding node type attribute; A tree view binding module is used to bind a tree view and a drawing module to the tree data model, and to draw the tree data model on the graphical user interface through the tree view. The drawing module contains multiple drawing strategy classes. The target node determination module is used to determine the target node that has changed in the tree data model in response to an interactive command for the tree data model or a node state update in the tree data model. The node partial redrawing module is used to call the corresponding target drawing strategy class according to the node type attribute of the target node, and perform partial redrawing of the target node through the target drawing strategy class to display the updated node state on the graphical user interface.

[0008] According to a third aspect of this disclosure, a tree model building module provides an electronic device, including: a processor; and a memory for storing executable instructions of the processor; wherein the processor is configured to execute the tree interface display method described in any of the preceding claims by executing the executable instructions.

[0009] According to a fourth aspect of this disclosure, a computer program product is provided, comprising a computer program that, when executed by a processor, implements the tree interface display method described in any of the preceding claims.

[0010] The exemplary embodiments disclosed herein can have the following beneficial effects: In the tree-shaped interface display method of this exemplary implementation, by constructing a tree-shaped data model and performing local redrawing in response to interactive commands or node state updates, on the one hand, it can realize hierarchical structure data display for multiple types of channels and user nodes, improving channel navigation efficiency; on the other hand, the scalable differentiated local rendering mechanism can not only reduce the terminal's computing pressure and improve data rendering efficiency during the interface display of hierarchical structure data, but also realize the unique appearance and interactive effects of multiple types of channels, enhancing scalability; furthermore, it can provide efficient channel navigation, real-time status awareness, and flexible permission control in voice social clients, improving interface response efficiency and reducing system resource consumption.

[0011] It should be understood that the above general description and the following detailed description are exemplary and explanatory only, and are not intended to limit this disclosure. Attached Figure Description

[0012] The accompanying drawings, which are incorporated in and form part of this specification, illustrate embodiments consistent with this disclosure and, together with the description, serve to explain the principles of this disclosure. It is obvious that the drawings described below are merely some embodiments of this disclosure, and those skilled in the art can obtain other drawings based on these drawings without any inventive effort.

[0013] Figure 1 A flowchart illustrating a method for displaying a tree interface according to an exemplary embodiment of this disclosure is shown. Figure 2 A flowchart illustrating the process of determining the target node in a drag-and-drop operation according to an exemplary embodiment of this disclosure is shown. Figure 3 A flowchart illustrating the process of determining the target node in the next page node expansion operation according to an exemplary embodiment of this disclosure is shown. Figure 4 A flowchart illustrating a partial redraw when a node's unread state is updated, according to an example embodiment of this disclosure, is shown. Figure 5 A schematic diagram of a system architecture for tree interface management according to a specific embodiment of the present disclosure is shown; Figure 6 A flowchart illustrating a method for displaying a tree interface according to a specific embodiment of the present disclosure is shown. Figure 7 A sequence diagram of module interactions for real-time speech status management and drag-and-drop management according to a specific embodiment of the present disclosure is shown. Figure 8 A schematic diagram of a state machine representing a user's speaking state according to a specific embodiment of the present disclosure is shown; Figure 9 A block diagram of a display device for a tree-shaped interface according to an exemplary embodiment of the present disclosure is shown; Figure 10 A schematic diagram of the structure of a computer system suitable for implementing the embodiments of the present disclosure is shown. Detailed Implementation

[0014] Example embodiments will now be described more fully with reference to the accompanying drawings. However, example embodiments can be implemented in many forms and should not be construed as limited to the examples set forth herein; rather, these embodiments are provided to make this disclosure more comprehensive and complete, and to fully convey the concept of the example embodiments to those skilled in the art. The described features, structures, or characteristics can be combined in any suitable manner in one or more embodiments. In the following description, numerous specific details are provided to give a full understanding of embodiments of this disclosure. However, those skilled in the art will recognize that the technical solutions of this disclosure can be practiced with one or more of the specific details omitted, or other methods, components, apparatus, steps, etc., can be employed. In other instances, well-known technical solutions are not shown or described in detail to avoid obscuring various aspects of this disclosure.

[0015] Furthermore, the accompanying drawings are merely illustrative of this disclosure and are not necessarily drawn to scale. The same reference numerals in the drawings denote the same or similar parts, and therefore repeated descriptions of them will be omitted. Some block diagrams shown in the drawings are functional entities and do not necessarily correspond to physically or logically independent entities. These functional entities may be implemented in software, in one or more hardware modules or integrated circuits, or in different network and / or processor devices and / or microcontroller devices.

[0016] In some related embodiments, instant messaging voice social products typically use a simple linear list to display channels, which has the following drawbacks: 1. Lack of hierarchical management capabilities: The list only supports linear display and cannot meet the hierarchical management needs such as channel grouping and nesting, making it difficult for users to locate the target channel when the number of channels increases.

[0017] 2. Delayed dynamic status updates: Dynamic information such as speaking status and microphone status needs to be refreshed in real time. Related solutions either use full refresh, which leads to poor performance, or fail to display in time, affecting user experience.

[0018] 3. Crude drag-and-drop sorting and permission control: The relevant solutions lack a unified drag-and-drop management strategy and do not adequately support complex interactions such as cross-group movement, permission restrictions, and template constraints.

[0019] 4. Lack of differentiation in rendering of multiple channel types: Different channel types such as voice, text, and forums differ significantly in display format and interaction logic, making it difficult for the interface to provide a highly scalable and pluggable rendering solution.

[0020] 5. Unread and red dot notifications are scattered: There is a lack of an aggregated reminder mechanism that links with the grouped and collapsed status, making it easy for users to miss important messages.

[0021] To address the aforementioned issues, this exemplary implementation first provides a method for displaying a tree-shaped interface. (See reference...) Figure 1 As shown, the method for displaying the tree-shaped interface described above may include the following steps: Step S110. In response to application startup, construct a tree data model and load each node in the tree data model, with each node having a corresponding node type attribute.

[0022] Step S120. Bind a tree view and a drawing module to the tree data model, and draw the tree data model on the graphical user interface through the tree view. The drawing module contains multiple drawing strategy classes.

[0023] Step S130. In response to an interactive command for the tree data model or a node state update in the tree data model, determine the target node in the tree data model that has changed.

[0024] Step S140. Call the corresponding target drawing strategy class according to the node type attribute of the target node, and perform partial redrawing of the target node through the target drawing strategy class to display the updated node state on the graphical user interface.

[0025] In the tree-shaped interface display method of this exemplary implementation, by constructing a tree-shaped data model and performing local redrawing in response to interactive commands or node state updates, on the one hand, it can realize hierarchical structure data display for multiple types of channels and user nodes, improving channel navigation efficiency; on the other hand, the scalable differentiated local rendering mechanism can not only reduce the terminal's computing pressure and improve data rendering efficiency during the interface display of hierarchical structure data, but also realize the unique appearance and interactive effects of multiple types of channels, enhancing scalability; furthermore, it can provide efficient channel navigation, real-time status awareness, and flexible permission control in voice social clients, improving interface response efficiency and reducing system resource consumption.

[0026] Below, in conjunction with Figures 2 to 8 The steps described above in this example implementation will be explained in more detail.

[0027] In step S110, in response to application startup, a tree data model is constructed and each node in the tree data model is loaded, with each node having a corresponding node type attribute.

[0028] In this example implementation, the tree data model is a data structure used to organize and manage data with hierarchical relationships. In this model, data is stored in the form of nodes and connected through parent-child relationships to form a tree structure. This structure can effectively represent and process complex hierarchical information, such as channel groups, channel lists, and user members within channels. Nodes are the basic units in the tree data model. In this embodiment, the node type attribute can include group nodes, channel nodes, and user nodes. Group nodes are used to aggregate and manage multiple channel nodes or user nodes to form logical groups. Channel nodes represent different types of channels, such as voice channels, text channels, or forum channels. User nodes represent specific user members within a channel. In addition, room-level nodes can be added, such as using Tabs or another tree level at the top level.

[0029] When the application starts, a default tree-structured data model can be initialized first, and node data with hierarchical relationships can be obtained, including group information, channel information, and a list of users under each channel. Based on this information, corresponding group nodes, channel nodes, and user nodes can be created, and then these nodes can be added to the tree-structured data model according to their hierarchical relationships. Alternatively, only the root node and the first-level group nodes can be loaded when the application starts, and the remaining child nodes can be loaded on demand as needed by the user, in order to reduce resource consumption during startup.

[0030] In this example implementation, when loading each node in the tree data model, the node data storage field corresponding to each node can be obtained. The node data storage field contains the node type attribute, node identifier, and permission information of the node.

[0031] When loading nodes in the tree-structured data model, the system retrieves a unique data storage field, UserRole, for each node. This field can contain node-specific attributes, such as node type attributes, identifiers, and permission flags. The node type attribute is crucial for distinguishing different types of nodes, such as group nodes, channel nodes, and user nodes. It determines the node's appearance on the interface, the operations it can perform, and its interaction rules with other nodes. The node identifier is a unique identifier for each node, used for precise location within the system. Permission information defines the scope of operations that users or the system can perform on specific nodes. For example, some users may only be able to view specific channel nodes but not modify or delete them, and some nodes may only allow drag-and-drop operations by users with specific permissions.

[0032] By employing the aforementioned technical solution, when loading each node in the tree-structured data model, the system acquires and stores the node data storage field corresponding to each node, providing rich and structured metadata for each node in the tree interface. This enables the system to perform precise judgments, permission checks, and differentiated rendering based on this detailed information when subsequently processing user interaction commands (such as dragging and expanding) or node status updates (such as voice status and unread status), thereby improving the data management efficiency and user experience of the tree interface and enabling the model to support fine-grained management.

[0033] In step S120, a tree view and a drawing module are bound to the tree data model, and the tree data model is drawn on the graphical user interface through the tree view. The drawing module contains multiple drawing strategy classes.

[0034] In this example implementation, the tree view is a component in the graphical user interface (GUI) used to visually display data in a tree-structured data model, rendering the nodes and their hierarchical relationships on the screen for intuitive browsing and interaction. The drawing module handles the drawing logic for elements within a specific view. Specifically, by binding the drawing module to the tree data model, it determines how to draw these nodes on the GUI based on the node information in the data model. This drawing module can contain multiple drawing strategy classes to support differentiated drawing for different types of nodes. The drawing strategy classes define the drawing rules and styles for specific node type attributes. For example, there can be strategy classes specifically for drawing group nodes, channel nodes, and user nodes. Through different drawing strategy classes, customized visual presentations for different types of nodes can be achieved.

[0035] After the data model is built, it needs to be associated with visualization components. For example, a tree view can be bound to the tree data model so that changes in the data model are automatically reflected in the view. Simultaneously, to enable customized drawing for different types of nodes, a drawing module can be designed. This module encapsulates the drawing logic for different node type attributes, such as group nodes, channel nodes, and user nodes. When the tree view needs to draw a node, it calls this drawing module, which selects the appropriate drawing strategy class based on the node type. For example, group nodes can be drawn as expandable / collapseable folder icons, channel nodes can be drawn as text labels with specific icons, such as a microphone icon representing a voice channel, and user nodes can be drawn as list items with user avatars and names.

[0036] Specifically, the RoomChannelDelegate (drawing module) can dispatch different node type attributes to drawing strategy objects such as DrawGroup (drawing group nodes), DrawVoiceChannel (drawing voice channels), DrawTextChannel (drawing text channels), DrawForumChannel (drawing forum channels), DrawUser (drawing user nodes), and DrawExpandBtn (drawing expand controls). Among these, DrawVoiceChannel, DrawTextChannel, DrawForumChannel, DrawGroup, DrawUser, and DrawExpandBtn are used to draw voice channels, text channels, forum channels, groups, users, and expand controls, respectively. For example, the content drawn by DrawVoiceChannel can include the channel name, number of online users, voice icon, and unread red dot. DrawForumChannel can also be extended to support information such as the number of posts and pinned status.

[0037] In this example implementation, by adopting the DrawBase (drawing abstract base class) derived class architecture, in conjunction with RoomChannelDelegate, customized rendering of different node type attributes can be achieved, and new channel types can be supported through polymorphic extension.

[0038] In step S130, in response to an interactive command for the tree data model or a node state update in the tree data model, the target node in the tree data model that has changed is determined.

[0039] In this example implementation, interaction commands are instructions issued by the user when interacting with the application through the graphical user interface. For example, a user might click a node to expand or collapse a group, drag a node to change its position, or trigger other operations related to the tree structure. Node state updates refer to changes in the data or attributes of one or more nodes in the tree data model. For example, changes in a user node's voice status (e.g., currently speaking), number of unread messages, or online status need to be reflected in the graphical user interface promptly. A target node is the specific node in the tree data model whose data or display state changes due to interaction commands or node state updates; this node is the focus of the local redraw operation.

[0040] The application needs to continuously monitor user interactions and internal system data changes. For example, when a user clicks a group node, the system captures the click event and parses it into an interactive command to expand or collapse the group. When a user starts speaking in a voice channel, the system receives a notification of that user's voice status update. After receiving these commands or updates, the system needs to identify which specific node was affected. For example, for a click to expand a group, the group node is the target node; for a user's voice status update, the user node is the target node.

[0041] In this example implementation, the interactive commands may include node drag-and-drop commands, such as... Figure 2 As shown, responding to interactive commands for a tree data model and identifying the target node that has changed within the tree data model can specifically include the following steps: Step S210. Respond to drag commands for a tree-structured data model and determine whether the drag command is valid based on the node type attribute, permission information, and target drag position of the dragged node.

[0042] Node drag-and-drop commands refer to instructions that allow users to move nodes in a tree structure through a graphical user interface, such as by dragging with a mouse or using touch gestures. The purpose of these commands is to change the position or hierarchical relationship of nodes in the tree data model.

[0043] In this example implementation, drag-and-drop event handlers can be encapsulated using a drag-and-drop manager. The drag-and-drop manager can be a dedicated software module or class responsible for managing and coordinating all drag-and-drop operations. Its role is to provide a unified interface and logic for handling drag-and-drop events, ensuring the standardization and controllability of the drag-and-drop process. For example, the drag-and-drop manager `DragObject` can be used to encapsulate events such as `dragEnterEvent`, `dragMoveEvent`, and `dropEvent`.

[0044] When a user drags a node, a DragObject validation is triggered. If valid, the node order in the model is updated and synchronized with the backend. The DragObject can comprehensively determine the validity of a drag command based on multiple dimensions, including node type attributes, role permissions, and whether the destination location is allowed. In addition, it supports role-based batch permission management and allows reading and writing DragObject permission information.

[0045] Step S220. If the drag command is invalid, reject the drag command.

[0046] If a drag command is invalid, the drag command is rejected. This means that the system will not perform the drag operation and will usually provide feedback to the user, such as visual prompts or error messages.

[0047] Step S230. If the drag command is valid, determine the node order after executing the drag command, and determine the target node that has changed, including the dragged node, based on the updated node order.

[0048] If the drag-and-drop command is valid, the node order after executing the command needs to be determined. This involves calculating the new index of the dragged node under its parent node or its new position among its sibling nodes after insertion at the target location. Finally, based on the updated node order, the changed target nodes, including the dragged node, are identified. These nodes will need to be redrawn to reflect the latest state of the tree data model.

[0049] In this example implementation, the valid prompt information to be displayed when the drag command is valid and the invalid prompt information to be displayed when the drag command is invalid can also be determined based on the tree interface style manager.

[0050] The TreeViewStyle component manages and provides the display style and interactive prompts for tree-shaped interfaces. It can be a standalone software module or class, encapsulating various preset interface style rules and prompt templates, and providing interfaces for external calls to obtain or set these styles and information. Valid prompts refer to the system generating or selecting visual feedback when a drag-and-drop command is deemed valid, informing the user that the current drag operation is legal and executable. For example, the drag indicator can be rendered with a green border or a placeable icon can be displayed. Invalid prompts refer to the system generating or selecting visual feedback when a drag-and-drop command is deemed invalid, informing the user that the current drag operation is illegal and cannot be executed. For example, the drag indicator can be rendered with a red border or a prohibited placement icon can be displayed. By introducing the visual effects of the tree-shaped interface style manager, the prompts during the drag-and-drop process can be uniformly controlled. This allows for a clear judgment of legitimacy before the user completes the drag-and-drop action, thereby reducing the number of invalid drag attempts due to misoperation, reducing the time overhead of waiting for visual rejection feedback from the system, and maintaining the structural stability of the tree-shaped data model during frequent interactions.

[0051] Through the above technical solution, the system can effectively manage and validate drag-and-drop operations on tree-structured interfaces, supporting flexible sorting and repositioning of channels, groups, and users. This avoids data model chaos or permission conflicts caused by illegal drag-and-drop operations. This ensures the structural integrity and data consistency of the tree-structured data model. Simultaneously, through clear validity checks and rejection mechanisms, it provides users with a smooth drag-and-drop sorting interaction and clear operational feedback, enhancing user trust in the interface and ease of operation, significantly improving the user experience.

[0052] In this example implementation, the interactive instructions may also include instructions to expand the next page node, such as... Figure 3 As shown, responding to interactive commands for a tree data model and identifying the target node that has changed within the tree data model can specifically include the following steps: Step S310. When expanding group nodes, determine the current page node in the group nodes based on the number of nodes per page.

[0053] The "Next Page Node Expand" command specifically refers to a user's request to display more undisplayed child nodes within a group node. This can be achieved by the user clicking a specific button or area on the interface, or by scrolling down. The "Number of Nodes per Page" refers to the maximum number of child nodes allowed to be displayed under a group node in a single display operation. The "Current Page Node" refers to the set of child nodes belonging to that group node that are currently displayed in the current view.

[0054] Step S320. If there are undisplayed nodes other than the current page node in the group node, provide a next page node expansion control in the group node.

[0055] Undisplayed nodes refer to child nodes within a group that have not yet been displayed on the graphical user interface. The next page node expansion control is an interactive element provided to the user on the graphical user interface to trigger the next page node expansion command. This control can be in the form of a button, link, icon, etc., for example, it could be a dynamically generated "Load More" or "Next Page" button below or next to a group node.

[0056] Step S330. In response to the next page node expansion instruction applied to the next page node expansion control, determine the next page node from the undisplayed nodes based on the number of nodes on a single page, and use the next page node as the target node.

[0057] After receiving a user's instruction to expand the control via the next page node, the system will, based on the preset number of nodes per page, select the first N undisplayed nodes from the set of child nodes not yet displayed in the current group, according to the node's storage index in the tree data model. For example, when the number of nodes per page is 5, the next page node is determined from the undisplayed nodes at indices 6 to 10; when the number of nodes to be displayed is 10, the next page node is determined from the undisplayed nodes at indices 11 to 20. These selected nodes are determined as the target nodes, which are the nodes that need to be drawn or updated in this operation.

[0058] For example, when a user expands a group node, the system checks if lazy loading exists. If it does, it triggers the loading of the next page of voice user data via ExpandItem (the expanded node). After loading is complete, the child node structure of QStandardItemModel is updated, and the ExpandItem node is deleted. By combining the ExpandItem design with PAGE_SIZE (the number of nodes per page), on-demand loading of the voice channel user list can be achieved, avoiding lag caused by loading a large amount of user data at once and improving the interface responsiveness.

[0059] In this example implementation, the node status update includes voice status update. In response to the voice status update of the user node, the current speaking user identifier is obtained from the current speaking user set, and the target node is determined based on the current speaking user identifier.

[0060] Voice status update refers to a change in the voice activity state of a user represented by a user node in a tree-structured data model, such as changing from silent to speaking, or from speaking to silent. This update can be pushed by the server in real time, or triggered by the local client detecting a change in the user's microphone input state. Its purpose is to intuitively display the user's real-time voice status on the graphical user interface, such as displaying a speaking icon or a halo animation.

[0061] When a user node in the tree-structured data model experiences a voice status update, the system can quickly and accurately identify the corresponding target user node and trigger a local redraw. This avoids a global refresh of the entire tree-structured interface, significantly improving the efficiency and real-time performance of interface updates, providing users with a smoother and more responsive interactive experience. Especially in high-concurrency voice communication scenarios, it can effectively reduce system resource consumption and ensure the stability and availability of the user interface.

[0062] In this example implementation, the node status update also includes an unread status update, which, in response to the unread status update of a node in the tree data model, identifies the node with unread messages as the target node.

[0063] An unread status update refers to a change in the number of unread messages or the unread message flag associated with a node in a tree-structured data model. This update can be triggered by various events, such as receiving a new message, the user reading a message, or a message being marked as read or unread. Its purpose is to instruct the user interface to provide visual feedback on the unread status of the corresponding node, such as displaying the number of unread messages or an unread notification icon.

[0064] In this example implementation, WebSocket (a network communication protocol) can be used to connect to the backend interface to achieve real-time push notifications of voice status and unread messages. When the system detects an update to the unread status of a node in the tree-structured data model—for example, when a new message is received causing an increase in the number of unread messages for a user node or channel node, or when a user reads a message causing a decrease in the number of unread messages—the system actively identifies these nodes with unread messages. These identified nodes are then determined as target nodes requiring partial redrawing. In this way, the system can accurately locate the parts that need to be updated due to changes in unread status, thereby effectively utilizing rendering resources and improving the interface's responsiveness and display efficiency.

[0065] In step S140, the corresponding target drawing strategy class is called according to the node type attribute of the target node, and the target node is partially redrawn through the target drawing strategy class to display the updated node state on the graphical user interface.

[0066] In this example implementation, partial redrawing refers to redrawing only the target node that has changed and its affected area. This approach can significantly reduce the computational load of graphics rendering and improve the responsiveness and smoothness of the interface.

[0067] Once the target node that has changed is identified, the system selects and invokes the corresponding drawing strategy class in the drawing module based on the node's specific type. This target drawing strategy class is only responsible for redrawing the target node and its directly related visual elements, rather than redrawing the entire tree view. For example, if a user node's voice state changes, only the user node is redrawn, adding or removing a halo animation. If a group node is expanded, the group node and its newly displayed child nodes are redrawn. The view can perform partial redraws based on model changes, displaying real-time status, red dots, or new node order. This partial redraw mechanism efficiently updates the graphical user interface, avoiding unnecessary rendering overhead and thus improving the user experience.

[0068] In this example implementation, for updating the voice status of a node, a view refresh request for the target node can be triggered based on the current speaking user identifier; in response to the view refresh request, the target drawing strategy class corresponding to the user node is called to draw the voice status identifier for the target node.

[0069] When the system detects that a user has started or stopped speaking, it locates the corresponding user node in the tree data model based on the user's unique identifier, i.e., the current speaking user identifier, and sends a clear notification to that user node indicating that its voice status data has changed. Upon receiving the view refresh request, the system intelligently selects and executes a strategy class specifically for handling user node rendering logic, based on the target node information indicated in the signal. The invoked rendering strategy class is responsible for generating and displaying a dynamic visual identifier on the graphical user interface for the specific target user node, intuitively representing its current voice status. This voice status identifier can take various forms; for example, it can display a fluctuating volume bar next to the user node, a flashing microphone icon, or a dynamic halo around the avatar.

[0070] For example, a collection called `speakingUidSet` (the current set of speaking users) can be defined. When a user starts / stops speaking from the backend, the collection is updated, and the model's `dataChanged` function (view refresh request) is invoked. The delegate in `DrawUser` determines whether to draw the voice halo animation based on `speakingUidSet`. When an update to `speakingUidSet` is detected, the `dataChanged` signal of the data model is only invoked for the corresponding node, achieving partial redrawing of the animation. Sending the `dataChanged` signal only to the speaking user's node allows for partial redrawing of the voice state animation, reducing CPU / GPU load.

[0071] In this example implementation, the update of the unread status of a node is as follows: Figure 4 As shown, the corresponding target drawing strategy class is called based on the node type attribute of the target node. The target node is then partially redrawn using the target drawing strategy class. This process can include the following steps: Step S410. Update the hierarchical message mapping data according to the unread status of the target node. The hierarchical message mapping data is used to record the unread status information at the node level and the number of unread messages at the group level.

[0072] Hierarchical message mapping data can include two levels: channelId2LastMsg (last message mapping dictionary) and categoryId2RedPoint (group message mapping dictionary). The last message mapping dictionary is a data structure used to store the latest messages and their unread status information for each node in the tree-like data model. For example, when a user node receives a new message, the system updates the node's last message and unread status information in the last message mapping dictionary, marking it as unread. The last message refers to the latest message received by a node, while the unread status information indicates whether the node has any messages that have not yet been viewed by the user. Updating this information ensures that the system always has the latest unread status of each node, providing an accurate data foundation for subsequent interface rendering.

[0073] The grouped message mapping dictionary is another data structure used to summarize and store the total number of unread messages in the child nodes contained within each group node in a tree-structured data model. The number of unread messages within a group node represents the sum of the unread messages in all child nodes under that group node. This summarization mechanism allows for a visual display of the total number of unread messages within a group node when aggregating group nodes, without the need to expand the grouping.

[0074] Step S420. Perform local redrawing of the target node based on hierarchical message mapping data using the target drawing strategy class.

[0075] When the group to which the target node belongs expands, the target drawing strategy class corresponding to the target node can be called to draw an unread prompt mark for the target node based on the unread status information of the latest message of the target node.

[0076] An unread message indicator is a graphical element used to visually indicate that a node has unread messages. This indicator can be a red dot, a number bubble, or other styles. When groups are expanded, the system draws an independent unread message indicator for each child node with unread messages, allowing users to clearly identify which specific child node has unread messages.

[0077] When the target node belongs to a group aggregation, the target drawing strategy class corresponding to the target group node to which the target node belongs is called, and an aggregation unread prompt flag is drawn for the target group node according to the number of unread messages of the target group node.

[0078] Based on the group message mapping dictionary, unread red dots from sub-channels can be aggregated and displayed on the group node when it is collapsed. The aggregated unread indicator is a special graphical element used to indicate the total number of unread messages within a group node when it is aggregated. This indicator can be a bubble with a number representing the sum of unread messages in all child nodes under that group node. For example, when a group node is aggregated, the system draws an aggregated unread indicator for that group node based on the number of unread messages in the group message mapping dictionary, thus providing the user with an overview of its unread messages without expanding the group.

[0079] By maintaining two-level dictionaries, channelId2LastMsg and categoryId2RedPoint, the red dot status of the corresponding channel is updated when a new message arrives, and the red dot display position is determined according to the group expansion status. This allows the red dots or unread counts to be aggregated and displayed when the group is collapsed, and the red dots are displayed at the channel granularity after the group is expanded, triggering status synchronization.

[0080] This example implementation provides an efficient real-time status synchronization solution to display dynamic information such as voice messages and microphone input in a low-overhead manner. It also supports channel-level and group-level notifications, increasing user attention to important messages and enabling comprehensive interactive capabilities such as unread message caching, notification aggregation when groups are folded, and lazy loading for voice channel users.

[0081] Figure 5 The diagram illustrates a room channel tree management and visual interaction system based on the PyQt5 (Python bindings for the Qt framework) framework according to a specific embodiment of this disclosure. The system adopts an MVC (Model-View-Controller) architecture and includes the following core components: The tree data model module is based on QStandardItemModel to build a tree data structure, maintain five types of nodes: GroupItem, VoiceItem, TextItem, ForumItem, and UserItem, and uses a custom UserRole to store metadata such as node type attributes, identifiers, and permission flags.

[0082] The tree view module displays a tree-shaped data model based on QTreeView and supports interactions such as dragging, collapsing, and lazy loading.

[0083] The MVC controller is responsible for responding to user interaction events such as clicks, drags, expansions, and permission verifications, and for coordinating the state of the model and the view.

[0084] The delegated drawing module, RoomChannelDelegate, overrides paint() (drawing function) and sizeHint() (size hint function). It includes RoomChannelDelegate and several DrawBase derived classes, which are used to call the corresponding DrawBase derived class to perform differentiated graphics drawing based on the node type attribute, including icons, text, red dots, speech animations, etc.

[0085] The state caching module, including `speakingUidSet`, `channelId2LastMsg`, and `categoryId2RedPoint`, manages real-time voice status, unread messages, and group red dot information. `speakingUidSet` stores the currently speaking user ID and uses the `dataChanged()` signal from the data model to achieve partial refreshes. Animation frames periodically trigger delegated redraws to display dynamic apertures. `channelId2LastMsg` caches the last message and unread status of each channel. `categoryId2RedPoint` updates red dots based on the number of unread child nodes within a group, aggregating red dots onto the group nodes when a group is collapsed. The state caching module and the tree-structured data model are linked via signal slots to achieve partial node refreshes and aggregated red dot displays.

[0086] The drag-and-drop management module performs node type attribute matching, permission verification, and template restriction checks during the drag-and-drop process, and controls model updates. DragObject performs type matching, permission verification, and template restriction checks in dragEnterEvent, dragMoveEvent, and dropEvent, and combines this with TreeViewStyle for custom drag-and-drop visual prompts.

[0087] The lazy loading module is used to implement paginated loading of the user list in the voice channel node based on ExpandItem and PAGE_SIZE. For the voice channel user list, PAGE_SIZE users are loaded by default. ExpandItem is used to trigger the loading of the next page. Expanding a node triggers a background request and refreshes the model.

[0088] PyQt5, a commonly used GUI framework for desktop clients, provides mechanisms such as QTreeView, QStandardItemModel, delegate drawing, and signals and slots, laying the foundation for implementing complex channel tree interfaces. A tree-structured channel management system based on the PyQt5 framework can achieve differentiated drawing of multiple node types, real-time state synchronization, drag-and-drop permission control, lazy loading, and red dot aggregation, among other features.

[0089] In subsequent product iterations, the system can be integrated with the backend's real-time communication mechanism to ensure consistency between the speaking status and unread messages. Furthermore, the rendering strategy can be expanded to support custom themes.

[0090] like Figure 6 The diagram shown is a flowchart illustrating a method for displaying a tree-shaped interface in a specific embodiment of this disclosure. It serves as an example of the steps described above in this exemplary embodiment. The specific steps of the flowchart are as follows: Step S602. Initialize the tree data model.

[0091] Step S604. Bind the QTreeView to the drawing delegate.

[0092] Step S606. Determine the operation type / node status update.

[0093] If the operation type is expand / lazy loading, proceed to step S608; if the operation type is drag and drop sorting, proceed to step S612; if it is voice status update, proceed to step S618; if there is an unread message, proceed to step S622.

[0094] Step S608. Request the next page of user data.

[0095] Step S610. Update model nodes.

[0096] Step S612. Validate the type and permissions of the DragObject.

[0097] If the drag-and-drop verification result is valid, proceed to step S614; if the drag-and-drop verification result is invalid, proceed to step S616.

[0098] Step S614. Update the model order and synchronize the backend.

[0099] Step S616. Reject drag and drop and provide feedback.

[0100] Step S618. Update speakingUidSet.

[0101] Step S620. The dataChanged signal is triggered.

[0102] Step S622. Update Channelld2LastMsg.

[0103] Step S624. Categoryld2RedPoint aggregation.

[0104] Step S626. Trigger local redraw.

[0105] like Figure 7The diagram shown is a sequence diagram of the module interaction between real-time speech status management and drag-and-drop management in a specific embodiment of this disclosure. Steps S702 to S712 are real-time speech status / unread message management steps, and steps S714 to S722 are drag-and-drop management steps. The specific steps of this flowchart are as follows: Step S702. Push notifications for speaking status / unread messages.

[0106] Step S704. Update node data / state cache.

[0107] Step S706. Send the dataChanged signal.

[0108] Step S708. Request to draw the node.

[0109] Step S710. Invoke the corresponding DrawX strategy.

[0110] Step S712. Return the drawing results.

[0111] Step S714. Send dragMoveEvent.

[0112] Step S716. Request permission verification.

[0113] Step S718. Return the verification result.

[0114] Step S720. Update node position.

[0115] Step S722. Send the LayoutChanged / dataChanged signal.

[0116] like Figure 8 The diagram shown is a state machine diagram of the user speaking state in a specific embodiment of this disclosure. The implementation steps of this state machine diagram are as follows: When no user speaks, the state machine is in an idle state; when the backend pushes a user to start speaking, the state machine detects the speaking, updates the speackingUidSet and triggers an animation, at which point the speaking animation plays; when the backend pushes a user to stop speaking or periodically detects no speaking, it returns to or continues to remain in the idle state.

[0117] It should be noted that although the steps of the method in this disclosure are described in a specific order in the accompanying drawings, this does not require or imply that the steps must be performed in that specific order, or that all the steps shown must be performed to achieve the desired result. Additional or alternative steps may be omitted, multiple steps may be combined into one step, and / or a step may be broken down into multiple steps.

[0118] Furthermore, this disclosure also provides a display device for a tree-shaped interface. (See reference) Figure 9 As shown, the display device for the tree-shaped interface may include a tree model construction module 910, a tree view binding module 920, a target node determination module 930, and a node local redrawing module 940. Wherein: The tree model building module 910 can be used to build a tree data model in response to application startup and load the various nodes in the tree data model, with each node having a corresponding node type attribute; The tree view binding module 920 can be used to bind a tree view and a drawing module to a tree data model, and draw the tree data model on the graphical user interface through the tree view. The drawing module contains multiple drawing strategy classes. The target node determination module 930 can be used to respond to interactive commands for the tree data model or node state updates in the tree data model to determine the target node that has changed in the tree data model. The node partial redraw module 940 can be used to call the corresponding target drawing strategy class according to the node type attribute of the target node, and perform partial redrawing of the target node through the target drawing strategy class to display the updated node state on the graphical user interface.

[0119] The specific details of each module in the above-mentioned tree-shaped interface display device have been described in detail in the corresponding method embodiment section, and will not be repeated here.

[0120] It should be noted that although several modules or units for the device used to perform actions have been mentioned in the detailed description above, this division is not mandatory. In fact, according to exemplary embodiments of this disclosure, the features and functions of two or more modules or units described above can be embodied in one module or unit. Conversely, the features and functions of one module or unit described above can be further divided and embodied by multiple modules or units.

[0121] Figure 10 A schematic diagram of the structure of a computer system suitable for implementing the embodiments of the present disclosure is shown.

[0122] It should be noted that, Figure 10 The computer system 1000 of the electronic device shown is merely an example and should not impose any limitation on the functionality and scope of use of the embodiments disclosed herein.

[0123] like Figure 10As shown, the computer system 1000 includes a central processing unit (CPU) 1001, which can perform various appropriate actions and processes based on programs stored in read-only memory (ROM) 1002 or programs loaded from storage section 1008 into random access memory (RAM) 1003. The RAM 1003 also stores various programs and data required for system operation. The CPU 1001, ROM 1002, and RAM 1003 are interconnected via a bus 1004. An input / output (I / O) interface 1005 is also connected to the bus 1004.

[0124] The following components are connected to I / O interface 1005: an input section 1006 including a keyboard, mouse, etc.; an output section 1007 including a cathode ray tube (CRT), liquid crystal display (LCD), etc., and speakers, etc.; a storage section 1008 including a hard disk, etc.; and a communication section 1009 including a network interface card such as a LAN card, modem, etc. The communication section 1009 performs communication processing via a network such as the Internet. A drive 1010 is also connected to I / O interface 1005 as needed. A removable medium 1011, such as a disk, optical disk, magneto-optical disk, semiconductor memory, etc., is installed on drive 1010 as needed so that computer programs read from it can be installed into storage section 1008 as needed.

[0125] In particular, according to embodiments of this disclosure, the processes described above with reference to the flowcharts can be implemented as computer software programs. For example, embodiments of this disclosure include a computer program product comprising a computer program carried on a computer-readable medium, the computer program containing program code for performing the methods shown in the flowcharts. In such embodiments, the computer program can be downloaded and installed from a network via communication section 1009, and / or installed from removable medium 1011. When the computer program is executed by central processing unit (CPU) 1001, it performs various functions defined in the system of this disclosure.

[0126] Exemplary embodiments of this disclosure also provide a computer program product. The computer program product includes a computer program that, when executed by a processor, implements the above-described method for displaying a tree-shaped interface.

[0127] In one implementation, the computer program product can be a tangible product containing a computer program, such as a computer-readable storage medium storing the computer program. The readable storage medium can be a storage medium based on electrical, magnetic, optical, electromagnetic, infrared, or other signals, including but not limited to: random access memory (RAM), read-only memory (ROM), magnetic tape, floppy disk, flash memory, hard disk drive (HDD), solid-state drive (SSD), etc. For example, the computer program product can be implemented as a non-volatile storage medium storing a computer program, such as read-only memory, NAND flash memory, etc.

[0128] In one implementation, the computer program product can be an intangible product containing a computer program. For example, the computer program product can be implemented as a virtual digital product, such as an executable file, installation package, or other digital file storing the computer program.

[0129] Computer program code can be written in one or more programming languages. Examples of programming languages ​​include C, Java, and C++. Program code can execute entirely on the user's computing device, partially on the user's computing device, or as a standalone software package. It can also execute partially on the user's computing device and partially on a remote computing device, or entirely on a remote computing device or server. In cases involving remote computing devices, the remote computing device can be connected to the user's computing device via any type of network, such as a local area network (LAN) or a wide area network (WAN), or it can be connected to an external computing device (e.g., via an internet connection provided by a mobile network operator).

[0130] Computer programs can be carried or transmitted via signals such as electricity, magnetism, light, electromagnetic fields, and infrared radiation. Electronic devices can convert the signals carrying computer programs into digital signals, thereby running the computer programs. When a computer program runs on an electronic device, its code is used to cause the electronic device to execute (more specifically, to execute by the processor of the electronic device) the method steps of various exemplary embodiments of this disclosure, such as the tree interface display method described above.

[0131] The flowcharts and block diagrams in the accompanying drawings illustrate the architecture, functionality, and operation of possible implementations of systems, methods, and computer program products according to various embodiments of this disclosure. In this regard, each block in a flowchart or block diagram may represent a module, segment, or portion of code containing one or more executable instructions for implementing a specified logical function. It should also be noted that in some alternative implementations, the functions indicated in the blocks may occur in a different order than those indicated in the drawings. For example, two consecutively indicated blocks may actually be executed substantially in parallel, and they may sometimes be executed in reverse order, depending on the functions involved. It should also be noted that each block in a block diagram or flowchart, and combinations of blocks in a block diagram or flowchart, may be implemented using a dedicated hardware-based system that performs the specified function or operation, or using a combination of dedicated hardware and computer instructions.

[0132] It should be noted that although several modules for the device used to perform actions have been mentioned in the detailed description above, this division is not mandatory. In fact, according to embodiments of this disclosure, the features and functions of two or more modules described above can be embodied in one module. Conversely, the features and functions of one module described above can be further divided and embodied by multiple modules.

[0133] Other embodiments of this disclosure will readily occur to those skilled in the art upon consideration of the specification and practice of the invention disclosed herein. This disclosure is intended to cover any variations, uses, or adaptations of this disclosure that follow the general principles of this disclosure and include common knowledge or customary techniques in the art not disclosed herein.

[0134] It should be understood that this disclosure is not limited to the precise structures described above and shown in the accompanying drawings, and various modifications and changes can be made without departing from its scope. The scope of this disclosure is limited only by the appended claims.

Claims

1. A method for displaying a tree-shaped interface, characterized in that, include: In response to application startup, a tree data model is constructed and each node in the tree data model is loaded, the node having a corresponding node type attribute; A tree view and a drawing module are bound to the tree data model, and the tree data model is drawn on the graphical user interface through the tree view. The drawing module contains multiple drawing strategy classes. In response to an interactive command for the tree data model or a node state update in the tree data model, determine the target node in the tree data model that has changed; The corresponding target drawing strategy class is invoked based on the node type attribute of the target node, and the target node is partially redrawn through the target drawing strategy class to display the updated node state on the graphical user interface.

2. The method for displaying a tree-shaped interface according to claim 1, characterized in that, The method further includes: When loading each node in the tree data model, the node data storage field corresponding to each node is obtained. The node data storage field contains the node type attribute, node identifier, and permission information of the node.

3. The method for displaying a tree-shaped interface according to claim 2, characterized in that, The interactive commands include node drag-and-drop commands. Responding to interactive commands specific to the tree data model, the command identifies the target node in the tree data model that has changed, including: In response to a drag command for the tree data model, determine whether the drag command is valid based on the node type attribute, permission information, and target drag position of the dragged node; If the drag command is invalid, then reject the drag command; If the drag-and-drop command is valid, the node order after executing the drag-and-drop command is determined, and the target node that has changed, including the dragged node, is determined according to the updated node order.

4. The method for displaying a tree-shaped interface according to claim 1, characterized in that, The node type attribute includes grouped nodes, the interaction instructions include a next page node expansion instruction, and in response to the interaction instructions for the tree data model, the target node that has changed in the tree data model is determined, including: When expanding the group nodes, the current page node in the group nodes is determined according to the number of nodes per page; If there are undisplayed nodes other than the current page node in the group node, then a next page node expansion control is provided in the group node; In response to a next-page node expansion command applied to the next-page node expansion control, a next-page node is determined from the undisplayed nodes based on the number of nodes per page, and the next-page node is used as the target node.

5. The method for displaying a tree-shaped interface according to claim 1, characterized in that, The node type attribute includes user nodes, the node state update includes voice state update, and in response to the node state update in the tree data model, the target node that has changed in the tree data model is determined, including: In response to the voice status update of the user node, the current speaking user identifier is obtained from the current speaking user set, and the target node is determined based on the current speaking user identifier.

6. The method for displaying a tree-shaped interface according to claim 5, characterized in that, The step of calling the corresponding target rendering strategy class based on the node type attribute of the target node, and performing partial redrawing of the target node through the target rendering strategy class, includes: A view refresh request for the target node is triggered based on the currently speaking user identifier; In response to the view refresh request, the target drawing strategy class corresponding to the user node is invoked to draw the voice status identifier for the target node.

7. The method for displaying a tree-shaped interface according to claim 1, characterized in that, The node state update includes an unread state update, responding to the node state update in the tree data model, and determining the target node in the tree data model that has changed, including: In response to the update of the unread status of a node in the tree data model, the node with unread messages is selected as the target node.

8. The method for displaying a tree-shaped interface according to claim 7, characterized in that, The step of calling the corresponding target rendering strategy class based on the node type attribute of the target node, and performing partial redrawing of the target node through the target rendering strategy class, includes: Based on the unread status of the target node, update the hierarchical message mapping data, which is used to record the unread status information at the node level and the number of unread messages at the group level. The target node is partially redrawn based on the hierarchical message mapping data using the target drawing strategy class.

9. The method for displaying a tree-shaped interface according to claim 8, characterized in that, The step of performing local redrawing of the target node based on the hierarchical message mapping data using the target drawing strategy class includes: When the group to which the target node belongs is expanded, the target drawing strategy class corresponding to the target node is called, and an unread prompt icon is drawn for the target node according to the unread status information of the latest message of the target node; When the target node belongs to a group aggregation, the target drawing strategy class corresponding to the target group node to which the target node belongs is called, and an aggregation unread prompt flag is drawn for the target group node according to the number of unread messages of the target group node.

10. A tree-shaped interface display device, characterized in that, include: A tree model building module is used to build a tree data model in response to application startup and load each node in the tree data model, wherein the node has a corresponding node type attribute; A tree view binding module is used to bind a tree view and a drawing module to the tree data model, and to draw the tree data model on the graphical user interface through the tree view. The drawing module contains multiple drawing strategy classes. The target node determination module is used to determine the target node that has changed in the tree data model in response to an interactive command for the tree data model or a node state update in the tree data model. The node partial redrawing module is used to call the corresponding target drawing strategy class according to the node type attribute of the target node, and perform partial redrawing of the target node through the target drawing strategy class to display the updated node state on the graphical user interface.

11. An electronic device, characterized in that, include: processor; as well as A memory for storing one or more programs, which, when executed by the processor, cause the processor to implement the method for displaying a tree-shaped interface as described in any one of claims 1 to 9.

12. A computer program product, comprising a computer program, characterized in that, When the computer program is executed by the processor, it implements the method for displaying the tree interface as described in any one of claims 1 to 9.

Images