Graph layout method and related device

Abstract

Provided in the present application is a graph layout method, which is applied to a graph layout system. The graph layout system comprises a visualization module, a layout management module and a layout calculation module, wherein the layout management module and the layout calculation module use a shared memory to perform data interaction. The method comprises: a visualization module receiving a layout adjustment request and providing adjusted graph layout parameters to a layout management module; the layout management module loading the adjusted graph layout parameters into a shared memory; a layout calculation module acquiring the adjusted graph layout parameters from the shared memory, performing at least one instance of iterative calculation on the basis of the adjusted graph layout parameters, and updating an adjusted graph layout result in the shared memory, wherein the adjusted graph layout result comprises at least one of an intermediate result or a final result; and the visualization module displaying the adjusted graph layout result. The method can provide a high-performance interactive layout technical scheme allowing real-time presentation, thereby improving the user experience of a user viewing a graph (especially a large-scale graph).

Description

A graph layout method and related device

[0001] This application claims priority to the Chinese patent application filed with the State Intellectual Property Office on September 22, 2023, with application number 202311235023.6, and invention name “A graph layout processing method and related system”, and claims priority to the Chinese patent application filed with the State Intellectual Property Office on November 15, 2023, with application number 202311535266.1, and invention name “A graph layout method and related equipment”, the entire contents of which are incorporated by reference into this application. Technical Field

[0002] The present application relates to the field of computer technology, and in particular to a graph layout method, system, computing device, computer-readable storage medium, and computer program product. Background Art

[0003] With the advent of the information age, information visualization (infovis) can enhance information perception and has therefore gained widespread application in areas such as relationship analysis and data governance. A typical application of information visualization is graph visualization. Graph visualization specifically displays relationships between elements through graphs, helping users observe or analyze data.

[0004] The effectiveness of graph visualization is often related to the graph layout (the arrangement of elements within the graph). A good graph layout facilitates in-depth exploration and exploration. With the development of web-based display technologies, the primary medium for graph visualization has become the web. Compared to native applications, web applications often have less efficient algorithm execution, limited by JavaScript. This makes displaying large, interactive graphs on web pages more difficult.

[0005] Summary of the Invention

[0006] The present application provides a graph layout method that achieves efficient transmission of graph layout parameters and results based on shared memory, supports real-time presentation of intermediate results, and supports real-time adjustment of graph layout by users, thereby achieving rapid response to user interactions. Even for large-scale graphs, a high-performance, real-time presentation, and interactive layout technology solution can be provided, thereby improving the user experience. The present application also provides a graph layout system, computing device, computer-readable storage medium, and computer program product corresponding to the above-mentioned graph layout method.

[0007] In the first aspect, the present application provides a graph layout method. The method can be executed by a graph layout system. The graph layout system can be a software system. The software system can be integrated into a browser, for example, as a functional module of the browser, providing graph layout capabilities for browser-based web applications. The software system can also be independent of the browser, and the browser calls the software system to implement graph layout. The software system can be deployed on a computing device, for example, on a terminal device such as a desktop, laptop, tablet computer, smart phone (also referred to as a terminal). The computing device executes the program code of the software system, thereby executing the graph layout method of the present application. The graph layout system can also be a hardware system, for example, a computing device with graph layout function, and when the hardware system is running, it executes the graph layout method of the present application.

[0008] Specifically, the graph layout system includes a visualization module, a layout management module, and a layout calculation module. The layout management module and the layout calculation module use shared memory for data exchange. Among them, the visualization module can be the user interface main thread, the layout management module can be the graph layout worker thread, and the layout calculation module can be the graph layout engine, also known as the layout calculation engine or the graph layout calculation engine. Shared memory includes but is not limited to shared memory between threads; for modules with different running environments or execution languages ​​within the same thread, such as JavaScript and Web Assembly (WASM), the memory they share is also referred to as shared memory in this article.

[0009] The visualization module can receive a layout adjustment request including adjusted graph layout parameters. The visualization module then provides the adjusted graph layout parameters to the layout management module. The layout management module loads the adjusted graph layout parameters into shared memory. The layout calculation module retrieves the adjusted graph layout parameters from the shared memory, performs at least one iterative calculation based on the adjusted graph layout parameters, and updates the adjusted graph layout result in the shared memory. The adjusted graph layout result includes at least one of an intermediate result and a final result. The visualization module then displays the adjusted graph layout result.

[0010] This method, based on shared memory, enables efficient transmission of graph layout parameters and results. It supports real-time presentation of intermediate results and real-time adjustments to the graph layout, enabling rapid responses to user interactions. For both small and large graphs, this method provides a high-performance, real-time, and interactive layout solution, enhancing the user experience when viewing graphs, especially large ones.

[0011] In some possible implementations, before the visualization module receives a layout adjustment request, the visualization module receives an access request for accessing a webpage supporting graph visualization. Based on the access request, the visualization module provides graph layout parameters to the layout management module. The layout management module loads the graph layout parameters into shared memory. The layout calculation module obtains the graph layout parameters from the shared memory, performs at least one iterative calculation based on the graph layout parameters, and updates the graph layout result in the shared memory. The graph layout result includes intermediate results. The visualization module may also display the graph layout result.

[0012] This allows for real-time display of intermediate results during the graph layout process, enabling users to intervene and adjust the graph layout based on the intermediate results, thereby ensuring the quality and efficiency of the graph layout.

[0013] In some possible implementations, the visualization module may also receive a query request from the user. In response to the query request, the visualization module queries the adjusted graph layout result and displays the adjusted graph layout result. In this way, the graph layout result can be queried in response to the user's needs, realizing on-demand query.

[0014] In some possible implementations, the visualization module can respond to a scheduled task, query the adjusted graph layout result, render the adjusted graph layout result, and display the rendered graph layout result. The period of the scheduled task can be equal to the refresh period of the browser, and the frequency of the scheduled task can be equal to the rendering frequency of the browser (such as the refresh frequency). This can avoid the layout management module returning a result after each iterative calculation, and instead query the graph layout result on demand based on the browser's rendering frequency, etc., reducing unnecessary communication and thus reducing resource overhead.

[0015] In some possible implementations, the visualization module may further provide a layout identifier to the layout management module. Accordingly, the visualization module may query the adjusted graph layout result corresponding to the layout identifier based on the layout identifier.

[0016] This method introduces layout identifiers to manage different layout versions. Furthermore, when querying the graph layout results using the layout identifiers, the layout identifiers can be used for verification to prevent the previous layout results from being affected, thus ensuring the accuracy of the query results.

[0017] In some possible implementations, the visualization module may send a graph layout adjustment message to the layout management module, where the graph layout adjustment message carries adjusted graph layout parameters.

[0018] By utilizing a reasonable message mechanism, this method can enable the visualization module to obtain the latest graph layout results in a timely manner when the page is refreshed, and the graph layout engine can respond to the update of graph layout parameters in real time, thereby supporting real-time display of graph layout results and real-time adjustment of graph layout parameters by users.

[0019] In some possible implementations, the layout management module may further decompose the iterative calculation task into multiple subtasks and add each of these subtasks to a task queue. The subtasks instruct the layout calculation module to perform at least one iterative calculation. Upon receiving a message from the visualization module, the layout management module adds a corresponding message event to the task queue, allowing for easier processing of the message upon completion of the currently executing subtask.

[0020] This method breaks down long tasks into subtasks, adding each subtask, which includes at least one iterative calculation, to the browser's task queue. When the visualization module receives a message, the corresponding message event is added to the task queue for message processing. After the iterative calculation subtask completes, the message is prioritized over the next calculation. This solves the problem of layout calculation blocking, which prevents the visualization module from responding promptly, and provides real-time interactivity.

[0021] In some possible implementations, a high-performance graph layout engine (layout calculation module) performs relatively fast single calculations. Adding tasks to a task queue typically has a minimum time interval (e.g., 4 milliseconds). If a single layout iteration takes less than 4 milliseconds, time is wasted. Therefore, the layout management module can calculate the time taken for a single iteration and use this time to determine the number of iterations to be performed in the subtask.

[0022] In this way, the execution time of the subtask can be kept just above the minimum time interval, which prevents the layout management module from being idle for too long and improves resource utilization.

[0023] In some possible implementations, the visualization module and the layout management module use shared memory for data exchange. Accordingly, the visualization module can provide the adjusted graph layout parameters to the layout management module through the shared memory.

[0024] This method is based on the browser's shared memory to achieve efficient transmission of graph layout parameters and graph layout results between the visualization module (such as the user interface main thread) and the layout management module (such as the working thread), so that the visualization module can obtain the graph layout results in real time and pause or stop the layout when needed, reducing data communication overhead, and achieving real-time presentation of graph layout results and rapid response to user interaction.

[0025] In some possible implementations, the layout calculation module can perform iterative calculations based on the target parameters after the layout management module locks the target parameters in the adjusted graph layout parameters, and update the adjusted graph layout results obtained after the iterative calculations in shared memory. This prevents the visualization module from accessing the data being calculated, ensuring data security.

[0026] In some possible implementations, the layout calculation module includes a layout calculation engine based on WebAssembly, WebGL, or WebGPU.

[0027] This method is based on the browser task mechanism and uses high-performance engines such as WebAssembly, WebGL, and WebGPU to accelerate layout calculations in a non-blocking manner in the working thread (layout management module), shortening the calculation time to ensure the response to the main thread (visualization module), and achieving real-time presentation of graph layout results and rapid response to user interactions.

[0028] In a second aspect, the present application provides a graph layout system. The graph layout system includes a visualization module, a layout management module, and a layout calculation module, wherein the layout management module and the layout calculation module use shared memory for data exchange;

[0029] The visualization module is configured to receive a layout adjustment request, the layout adjustment request including adjusted graph layout parameters, and provide the adjusted graph layout parameters to the layout management module;

[0030] The layout management module is configured to load the adjusted graph layout parameters into the shared memory;

[0031] The layout calculation module is configured to obtain the adjusted graph layout parameters from the shared memory, perform at least one iterative calculation based on the adjusted graph layout parameters, and update the adjusted graph layout result in the shared memory, where the adjusted graph layout result includes at least one of an intermediate result and a final result;

[0032] The visualization module is also used to display the adjusted graph layout result.

[0033] In some possible implementations, the visualization module is further configured to:

[0034] receiving an access request for accessing a webpage supporting graph visualization;

[0035] providing graph layout parameters to the layout management module according to the access request;

[0036] The layout management module is also used to:

[0037] Loading the graph layout parameters into the shared memory;

[0038] The layout calculation module is further used for:

[0039] Obtaining the graph layout parameters from the shared memory, performing at least one iterative calculation according to the graph layout parameters, and updating a graph layout result in the shared memory, wherein the graph layout result includes an intermediate result;

[0040] The visualization module is further configured to:

[0041] Display the graph layout result.

[0042] In some possible implementations, the visualization module is further configured to:

[0043] Receive user query requests;

[0044] In response to the query request, the adjusted graph layout result is queried and the adjusted graph layout result is displayed.

[0045] In some possible implementations, the visualization module is specifically configured to:

[0046] In response to the scheduled task, querying the adjusted graph layout result;

[0047] Render the adjusted graph layout result, and display the rendered graph layout result.

[0048] In some possible implementations, the visualization module is further configured to:

[0049] Providing a layout identifier to the layout management module;

[0050] The visualization module is specifically used for:

[0051] The adjusted graph layout result corresponding to the layout identifier is queried according to the layout identifier.

[0052] In some possible implementations, the visualization module is specifically configured to:

[0053] A graph layout adjustment message is sent to the layout management module, where the graph layout adjustment message carries the adjusted graph layout parameters.

[0054] In some possible implementations, the layout management module is further configured to:

[0055] Decomposing the iterative calculation task into a plurality of subtasks, and adding the plurality of subtasks to a task queue, wherein the subtasks are used to instruct the layout calculation module to perform at least one iterative calculation;

[0056] When a message is received from the visualization module, a message event corresponding to the message is added to the task queue so that the message can be processed when the currently executed subtask is completed.

[0057] In some possible implementations, the layout management module is further configured to:

[0058] The time of a single iterative calculation is counted, and the number of iterative calculations in the subtask is determined according to the time of the single iterative calculation.

[0059] In some possible implementations, the visualization module and the layout management module use shared memory to perform data exchange, and the visualization module is specifically configured to:

[0060] The adjusted graph layout parameters are provided to the layout management module through the shared memory.

[0061] In some possible implementations, the layout calculation module is specifically configured to:

[0062] After the layout management module adds a lock to the target parameter in the adjusted graph layout parameters, iterative calculation is performed according to the target parameter, and the adjusted graph layout result obtained after the iterative calculation is updated in the shared memory.

[0063] In some possible implementations, the layout calculation module includes a layout calculation engine based on WebAssembly, WebGL, or WebGPU.

[0064] In a third aspect, the present application provides a computing device. The computing device includes at least one processor and at least one memory. The at least one processor and the at least one memory communicate with each other. The at least one processor is configured to execute instructions stored in the at least one memory, causing the computing device to perform the graph layout method described in the first aspect or any implementation of the first aspect.

[0065] In a fourth aspect, the present application provides a computer-readable storage medium, wherein the computer-readable storage medium stores instructions, wherein the instructions instruct a computing device to execute the graph layout method described in the first aspect or any one of the implementations of the first aspect.

[0066] In a fifth aspect, the present application provides a computer program product comprising instructions, which, when executed on a computing device, enables the computing device to execute the graph layout method described in the first aspect or any one of the implementations of the first aspect.

[0067] Based on the implementation methods provided in the above aspects, this application can also be further combined to provide more implementation methods. BRIEF DESCRIPTION OF THE DRAWINGS

[0068] In order to more clearly illustrate the technical methods of the embodiments of the present application, the following briefly introduces the drawings required for use in the embodiments.

[0069] FIG1A is a flowchart of a graph layout method provided by the present application;

[0070] FIG1B is a flowchart of another graph layout method provided by the present application;

[0071] FIG2 is a schematic diagram of the architecture of a graph layout system provided in an embodiment of the present application;

[0072] FIG3A is a schematic diagram of the layout of an object relationship diagram provided in an embodiment of the present application;

[0073] FIG3B is a schematic diagram of the layout of a data asset map provided in an embodiment of the present application;

[0074] FIG3C is a schematic diagram of the layout of a bubble chart provided in an embodiment of the present application;

[0075] FIG3D is a schematic diagram of the layout of another bubble chart provided in an embodiment of the present application;

[0076] FIG3E is a schematic diagram of the layout of a bee graph provided in an embodiment of the present application;

[0077] FIG4 is a flowchart of a graph layout method provided in an embodiment of the present application;

[0078] FIG5 is a signaling flow chart of a graph layout method for data interaction based on a message mechanism provided in an embodiment of the present application;

[0079] FIG6 is a signaling flow chart of a graph layout method for data interaction based on a shared memory mechanism provided in an embodiment of the present application;

[0080] FIG7 is a schematic diagram of the structure of a computing device provided in an embodiment of the present application. DETAILED DESCRIPTION

[0081] The terms "first" and "second" in the embodiments of this application are used for descriptive purposes only and should not be understood to indicate or imply relative importance or implicitly specify the number of technical features indicated. Therefore, features specified as "first" or "second" may explicitly or implicitly include one or more of the features.

[0082] First, some technical terms involved in the embodiments of this application are introduced.

[0083] Graph visualization is an information visualization technique that presents information or data through graphs. Graphs can show the relationships between elements, helping users observe and analyze data. Elements can be entities extracted from the data, including but not limited to names, locations, contact information, times, and Internet protocol addresses (IP addresses). IP addresses can be used to identify devices (such as computing devices like servers or network devices like routers).

[0084] Depending on the application scenario, graphs generated using graph visualization technology can be divided into different types. Graph visualization technology can be applied to applications that require iterative computation. Applications that require iterative computation can be web-based graph visualization applications, including but not limited to data asset graph applications, network structure visualization applications, object relationship analysis applications, knowledge graph applications, or other force-directed visualization applications. Accordingly, graphs generated using the above-mentioned graph visualization technology can include object relationship graphs, data asset graphs, network topology graphs, knowledge graphs, force-directed bubble charts, and beeswarm plots.

[0085] The core of graph visualization technology lies in graph layout. Among the technical solutions for graph layout, the most widely used is the animated, interactive graph layout method. As shown in Figure 1A, all operations (including iterative calculation and rendering) are performed in the main thread of the user interface (UI). Since iterative calculation and rendering are in the same thread, no data transmission is required. The user can see the graph layout results in real time and make WYSIWYG adjustments. However, iterative calculation and rendering occupy each other's execution time. If more time is allocated to iterative calculation, it may lead to long page refresh time and display freeze; if the iterative calculation time is short, frequent page refreshes will lead to long layout time. At the same time, due to the limitations of JavaScript execution efficiency, this solution usually supports interactive layout of small-scale graphs.

[0086] For large-scale graphs (also referred to as large graphs), in order to speed up the layout, a graph layout engine can be used to accelerate the calculation, and a graph layout worker thread (such as graph layout Web Worker) can be used to prevent the UI main thread from being blocked. As shown in Figure 1B, the user operates in the user interface, triggering a request for graph visualization. The UI main thread sends the graph layout request to the graph layout worker thread (graph layout Web Worker). The graph layout worker thread calls the high-performance graph layout engine for iterative calculation. After the graph layout engine completes the iterative calculation, it returns the result and finally completes the rendering. Although the total calculation time is shortened, the data transmission cost of large-scale graphs is high. If the graph layout results are returned in real time, it will have a serious negative impact on performance. At the same time, since the calculation of the graph layout engine in the graph layout worker thread is blocked, the graph layout worker thread cannot respond to messages from the UI main thread in a timely manner, such as layout parameter adjustments. This method is difficult to provide real-time feedback and interaction. The user can only see the final graph layout result and cannot make interactive adjustments.

[0087] In view of this, the present application provides a graph layout method. The method can be executed by a graph layout system. The graph layout system can be a software system. The software system can be integrated into a browser, for example, as a functional module of the browser, providing graph layout capabilities for browser-based web applications. The software system can also be independent of the browser, and the browser calls the software system to implement graph layout. The software system can be deployed on a computing device, for example, on a terminal device such as a desktop, laptop, tablet computer, smart phone (also referred to as a terminal). The computing device executes the program code of the software system, thereby executing the graph layout method of the present application. The graph layout system can also be a hardware system, for example, a computing device with graph layout function, and when the hardware system is running, it executes the graph layout method of the present application.

[0088] Specifically, the graph layout system can include a visualization module (e.g., the UI main thread), a layout management module (e.g., a graph layout worker thread, also known as a graph layout web worker), and a layout calculation module (e.g., a graph layout engine, also known as a layout calculation engine or graph layout calculation engine). The layout management module and the layout calculation module use shared memory for data exchange. Shared memory includes, but is not limited to, shared memory between threads. For modules running in different environments or execution languages ​​within the same thread, such as JavaScript and WebAssembly (WASM), the shared memory between them is also referred to as shared memory in this article.

[0089] The visualization module receives a layout adjustment request, which includes adjusted graph layout parameters. The visualization module then provides the adjusted graph layout parameters to the layout management module. The layout management module loads the adjusted graph layout parameters into shared memory. The layout calculation module retrieves the adjusted graph layout parameters from the shared memory, performs at least one iterative calculation based on the adjusted graph layout parameters, and updates the adjusted graph layout result in the shared memory. The adjusted graph layout result includes at least one of an intermediate result and a final result. The visualization module then displays the adjusted graph layout result.

[0090] This method, based on shared memory, enables efficient transmission of graph layout parameters and results. It supports real-time presentation of intermediate results and real-time adjustments to the graph layout, enabling rapid responses to user interactions. For both small and large graphs, this method provides a high-performance, real-time, and interactive layout solution, enhancing the user experience when viewing graphs, especially large ones.

[0091] In order to make the technical solution of the present application clearer and easier to understand, the system architecture of the present application is introduced below with reference to the accompanying drawings.

[0092] Referring to FIG. 2 , which illustrates the architecture of a graph layout system, graph layout system 200 includes a visualization module 202, a layout management module 204, and a layout calculation module 206. Similar to how graph layout system 200 can be a software system or a hardware system, the aforementioned modules can be software modules or hardware modules. For ease of description, this application uses the aforementioned modules as software modules as examples.

[0093] The visualization module 202 is specifically a graph visualization display interface module, which is responsible for processing user interactions, for example, it is responsible for loading the graph layout results, adjusting the layout position of one or more nodes, periodically querying the graph layout results (such as the adjusted graph layout results, including intermediate results or final results), and displaying the adjusted graph layout results. The visualization module 202 can be implemented based on HyperText Markup Language (HTML) and JavaScript, for example, a code block implemented based on HTML and JavaScript, which can implement corresponding functions through a process or thread when executed. For ease of description, this application uses a thread example for illustration, for example, the visualization module 202 can be the UI main thread.

[0094] The layout management module 204 is used to manage the layout, including starting and stopping layout, updating layout parameters, and querying layout results. In specific implementations, the layout management module 204 can receive and respond to messages from the visualization module 202 (e.g., the UI main thread) to perform layout management, such as starting and stopping layout, updating layout parameters, and querying layout results in response to messages from the UI main thread. The layout management module 204 can run independently of the UI main thread in the form of a worker thread (e.g., a Web Worker).

[0095] The layout calculation module 206 is used to perform iterative calculations to achieve graph layout. The layout calculation module 206 can be a high-performance graph layout calculation engine (also referred to as a graph layout engine, layout calculation engine). For example, the layout calculation module 206 can be a graph layout engine based on web page assembly, web graphics library (Web Graphics Library, WebGL) or web graphics processing unit (webGPU). Taking the layout calculation module 206 as an example of a graph layout engine based on WebAssembly, the graph layout engine can be implemented based on C++ and compiled by a compilation tool into a WebAssembly code executable by a browser. Among them, the layout management module 204 also supports the management of the status of the layout calculation module 206.

[0096] Among them, the layout management module 204 and the layout calculation module 206 use shared memory for data exchange. Accordingly, the graph layout system 200 can support real-time adjustment of the layout based on shared memory to achieve an interactive graph layout. Specifically, the visualization module 202 is used to receive a layout adjustment request, which includes adjusted graph layout parameters, and provide the adjusted graph layout parameters to the layout management module 204. The layout management module 204 is used to load the adjusted graph layout parameters into the shared memory, and the layout calculation module 206 is used to obtain the adjusted graph layout parameters from the shared memory, perform at least one iterative calculation based on the adjusted graph layout parameters, and update the adjusted graph layout results in the shared memory. The adjusted graph layout results include at least one of the intermediate results or the final results. The visualization module 202 displays the adjusted graph layout results (also called rendering layout). It should be noted that the visualization module 202 and the layout management module 204 can also use shared memory for data exchange. In this way, the visualization module 202 can efficiently obtain the adjusted graph layout results through the shared memory. Alternatively, the visualization module 202 and the layout management module 204 may also use a message-based mechanism to perform data interaction, which is not limited in this application.

[0097] Based on the multi-threaded Web Worker and high-performance graph layout engine, the browser page's scheduled refresh (generally at a 60 Hz refresh rate, meaning it refreshes every 16.7 milliseconds. For large graphs, the refresh interval may be several times the screen refresh time due to rendering performance limitations) is decoupled from the iterative calculation of the graph layout (depending on the graph size, taking approximately 0.2 milliseconds for a graph with 100 nodes and 20 milliseconds for a graph with 10,000 nodes). Each has its own operating cycle. Simultaneously, by utilizing a reasonable messaging mechanism or shared memory, the main UI thread can promptly obtain the latest graph layout results when the page is refreshed. The graph layout engine can then respond in real time to updates to the main thread's graph layout parameters, supporting real-time display of graph layout results and user adjustments to these parameters.

[0098] In a message-based implementation, the UI main thread can use different types of messages to change the state of the graph layout Web Worker and query the latest layout results. The graph layout Web Worker can process and return messages from the UI main thread between iterations. In a shared memory-based implementation, the UI main thread can directly read the graph layout results stored in shared memory and directly modify the graph layout parameters in shared memory to change the layout calculation status.

[0099] The graph layout method provided in this application can be applied to web-based graph visualization applications, including but not limited to data asset graph applications, network structure visualization applications, object relationship analysis applications, and knowledge graph applications. For ease of understanding, the following examples are provided. In some examples, the graph layout system 200 can extract objects and initiate layout based on the objects and the relationships between them. During the layout process, the graph layout system 200 can display the graph layout results in real time. Users can adjust the layout based on the graph layout results displayed in real time by the graph layout system 200. The graph layout system 200 can display the adjusted object relationship graph, as shown in Figure 3A. In other examples, the graph layout system 200 can obtain data assets. Data assets can be data resources that can generate value and are recorded in physical or electronic form, such as documents, electronic data, etc. The graph layout system 200 performs iterative calculations based on the data assets to perform graph layout on the data assets and obtain a data asset graph. During the graph layout process, the graph layout system 200 supports real-time adjustments by users, thereby displaying a more accurate data asset graph, as shown in Figure 3B.

[0100] The graph layout method provided in this application can also be applied to other force-directed graph visualization applications. As shown in FIG3C or FIG3D , the graph layout system 200 can support an interactive graph layout method to display the aforementioned bubble chart to assist users in data analysis. As shown in FIG3E , the graph layout system 200 can support an interactive graph layout method to display the aforementioned bee chart to assist users in data analysis.

[0101] In order to make the technical solution of the present application clearer and easier to understand, the graph layout method of the present application is described in detail below in conjunction with embodiments.

[0102] 4 shows a flowchart of a graph layout method, which is applied to a graph layout system 200. The graph layout system 200 includes a visualization module 202, a layout management module 204, and a layout calculation module 206. The layout management module 204 and the layout calculation module 206 use shared memory for data exchange. The method includes:

[0103] S402: The visualization module 202 receives a layout adjustment request.

[0104] The layout adjustment request includes adjusted graph layout parameters. Graph layout parameters include force-directed layout parameters. Force-directed layout parameters may include at least one of node parameters, force parameters, or simulated annealing parameters. Node parameters may include node positions or node sizes. When initializing the layout, the node positions may be initial positions of the nodes. Considering that some nodes have fixed positions, the node positions may also be fixed positions. When adjusting the layout, the node positions may be adjusted positions. Force parameters may include at least one of attractive or repulsive forces between nodes, collision forces between nodes, attraction to a node at a certain position, node centripetal force, or spring forces connecting two nodes. Simulated annealing parameters may include, but are not limited to, Markov chain length and temperature attenuation coefficient. Simulated annealing is an optimization algorithm that effectively avoids falling into local minima and ultimately approaches a global optimum by imbuing the search process with a time-varying probability jump that eventually approaches zero. The repulsive, attractive, or collision forces are calculated based on a quadtree.

[0105] Taking into account the issue of version iteration, the graph layout parameters may also include a layout identifier (ID). The layout ID is usually unique and is used to uniquely identify a layout process. The layout ID is usually an integer type and can be maintained by the visualization module 202 (such as the UI main thread). In some examples, the layout ID may be an ordered number. For example, when the layout starts, the layout ID may be 1. When the user triggers the layout adjustment (switching the layout), the visualization module 202 may perform mathematical operations on the layout ID, such as increasing the layout ID by 1 as the new layout ID. In other examples, the layout ID may also be a random number.

[0106] In a specific implementation, the visualization module 202 can display the graph layout result through the layout interface, and the user can trigger an adjustment operation based on the graph layout result displayed by the visualization module 202 to generate a layout adjustment request. The adjustment operation can be a drag-and-drop operation based on a graphical user interface (GUI), or a command input operation based on a command user interface (CUI). The visualization module 202 then receives the layout adjustment request from the user. It should be noted that the graph layout result can be an intermediate result or a final result. In other words, the user can adjust the layout in real time during the graph layout process, or can adjust the layout after the layout is completed.

[0107] Among them, the visualization module 202 can display the graph layout result in response to the user's access request. Specifically, the visualization module 202 can first receive an access request, and the access request is used to access a web page that supports graph visualization. The visualization module 202 provides the graph layout parameters to the layout management module 204 based on the access request. The layout management module 204 loads the graph layout parameters into the shared memory, and the layout calculation module 206 obtains the graph layout parameters from the shared memory, performs at least one iterative calculation based on the graph layout parameters, and updates the graph layout result in the shared memory. Among them, the graph layout result includes an intermediate result or a final result. The intermediate result can be an iterative calculation result that has not yet met the iteration stop condition, and the final result is an iterative calculation result that meets the iteration stop condition. The iteration stop condition can be set based on experience. For example, the iteration stop condition can be set to when the number of iterations reaches n times, and n is greater than 1. Accordingly, the intermediate result can be the iterative calculation result of iteration 1, 2...n-1 times, and the final result can be the iterative calculation result of iteration n times.

[0108] S404 , the visualization module 202 provides the adjusted graph layout parameters to the layout management module 204 .

[0109] In some possible implementations, the visualization module 202 may provide the adjusted graph layout parameters to the layout management module 204 via a message mechanism. Specifically, the visualization module 202 may send a graph layout adjustment message to the layout management module 204, the graph layout adjustment message carrying the adjusted graph layout parameters.

[0110] In some other possible implementations, the visualization module 202 and the layout management module 204 use shared memory for data exchange. Accordingly, the visualization module 202 can provide the adjusted graph layout parameters to the layout management module 204 through the shared memory. For example, the visualization module 202 can write the adjusted graph layout parameters to the shared memory, and the layout management module 204 can read the adjusted graph layout parameters from the shared memory.

[0111] It should be noted that the shared memory used for data exchange between the visualization module 202 and the layout management module 204 and the shared memory used for data exchange between the layout management module 204 and the layout calculation module 206 can be the same shared memory, or different shared memories (for example, the visualization module 202 and the layout management module 204 can be independently allocated shared memories). When the shared memory used for data exchange between the visualization module 202 and the layout management module 204 and the shared memory used for data exchange between the layout management module 204 and the layout calculation module 206 are different shared memories, data synchronization can also be performed between the shared memories.

[0112] S406 : The layout management module 204 loads the adjusted graph layout parameters into the shared memory.

[0113] Specifically, the layout management module 204 loads the adjusted graph layout parameters into a shared memory for data exchange with the layout calculation module 206 , so that the layout calculation module 206 can perform layout adjustment based on the adjusted graph layout parameters.

[0114] S408 , the layout calculation module 206 obtains the adjusted graph layout parameters from the shared memory, performs at least one iterative calculation based on the adjusted graph layout parameters, and updates the adjusted graph layout result in the shared memory.

[0115] Iteration is the activity of repeating a feedback process, the purpose of which is usually to approach and reach the desired goal or result. Each repetition of the process is called an "iteration", and the result obtained from each iteration can be used as the initial value for the next iteration. For example, after the position and size of node A are obtained by iterative calculation in one iteration, the position and size of node B can be iteratively calculated based on the position and size of node A in the next iteration. The iterative process can also be provided with an iteration stop condition. The iteration stop condition can be set to when the number of iterations reaches a maximum number (for example, n), or when the loss function of the iteration converges.

[0116] To promptly respond to messages from the visualization module 202, the layout management module 204 can break down the iterative computation task into multiple subtasks and add each of these subtasks to a task queue. Each subtask instructs the layout computation module 206 to perform at least one iterative computation. Upon receiving a message from the visualization module 202 (e.g., a message for adjusting the layout or querying the graph layout results), the layout management module 204 can add the corresponding message event to the task queue, allowing for easier processing of the message upon completion of the currently executing subtask.

[0117] Considering that the layout calculation module 206 is a high-performance graph layout engine, it is faster to execute a single iterative calculation, and the method of adding a task queue has a minimum time interval (for example, 4 milliseconds). If the time of a single iterative calculation is less than 4ms, splitting each iterative calculation into a subtask (one subtask includes one iterative calculation) may result in a waste of time. The layout management module 204 can count the time of a single iterative calculation and determine the number of iterative calculations in the subtask based on the time of the single iterative calculation. In this way, an appropriate number of iterative calculations can be set for the subtask, keeping the execution time of the subtask just over 4ms, and avoiding the layout management module 204 being idle for too long.

[0118] Similarly, in a solution using shared memory for data interaction, the layout management module 204 can add a lock to the target parameters in the graph layout parameters (e.g., the node positions of several nodes). After the layout management module 204 adds the lock, the layout calculation module 206 can perform iterative calculations based on the target parameters and update the adjusted graph layout results obtained after the iterative calculations in the shared memory. The layout management module 204 can then release the lock. During the iterative calculation process, if the visualization module 202 receives a message for querying the graph layout results or adjusting the layout, the visualization module 202 can add a lock to the corresponding position in the shared memory after the iterative calculation lock is released. After processing the message, the lock is released, thereby ensuring data consistency.

[0119] In this embodiment, the adjusted graph layout result may be an intermediate result or a final result, and this embodiment does not impose any limitation on this.

[0120] S410 , the visualization module 202 displays the adjusted graph layout result.

[0121] Specifically, after obtaining the adjusted graph layout result, such as the node positions and node sizes calculated based on the adjusted graph layout parameters, the visualization module 202 renders the adjusted graph layout result, thereby displaying the adjusted graph layout result. It should be noted that rendering can also be performed by other modules, such as the layout management module 204. After rendering the adjusted graph layout result, the layout management module 204 can return the rendering result to the visualization module 202, and the visualization module 202 can display the adjusted graph layout result based on the rendering result.

[0122] In some possible implementations, the visualization module 202 may query the adjusted graph layout result in response to a scheduled task. For example, the visualization module 202 may create a scheduled task based on the browser's refresh rate, which is used to periodically refresh the page. In this manner, the visualization module 202 may query the layout management module 204 for the adjusted graph layout result in response to the scheduled task. The visualization module 202 then renders the adjusted graph layout result and displays the rendered graph layout result.

[0123] In some possible implementations, the visualization module 202 may also respond to user queries for graph layout results to implement real-time interactive graph layouts. Specifically, the visualization module 202 receives a user query request, and in response to the query request, the visualization module 202 may query for adjusted graph layout results and display the adjusted graph layout results.

[0124] Considering that layout switching can be very frequent, the query request may also include a layout ID. When querying the graph layout result, the visualization module 202 may first perform a verification based on the layout ID. For example, the visualization module 202 may compare the layout ID in the query request with the current layout ID. If they are consistent, the verification passes, and the visualization module 202 may query the corresponding graph layout result (e.g., the adjusted graph layout result). If they are inconsistent, the verification fails, and the visualization module 202 may discard the query request.

[0125] Based on the above description, the graph layout method provided in the embodiment of the present application uses shared memory (for example, browser shared memory) to achieve efficient transmission of graph layout parameters and results, support real-time presentation of intermediate results, and support real-time adjustment of the graph layout by the user, thereby achieving rapid response to user interaction. Whether it is a small-scale graph or a large-scale graph, this method can provide a high-performance, real-time presentation, and interactive layout technology solution, thereby improving the user experience when viewing the graph.

[0126] Next, based on specific application scenarios, the graph layout method for data interaction based on the message mechanism and the graph layout method for data interaction based on shared memory are explained.

[0127] First, referring to the signaling flow chart of a graph layout method for data interaction based on a message mechanism shown in FIG5 , the method may include: an initialization phase, an iterative calculation phase, a view update phase, and a layout adjustment phase.

[0128] During the initialization phase, the user can trigger the operation of accessing the web application that supports graph visualization, and send an access request (also called a graph visualization request) to the visualization module 202 (such as the UI main thread). The visualization module 202 can start the layout management module for graph layout (such as the graph layout Web Worker), and send the graph layout parameters including force-directed layout parameters (node ​​position, node size; force parameters; simulated annealing parameters) and layout ID to the graph layout Web Worker through a message (such as postMessage). Among them, the above-mentioned message sent during the initialization phase can also be called a graph layout request, and the force-directed layout parameters and layout ID carried in the graph layout request can be in array form. In some examples, the force-directed layout parameters and layout ID can also be encapsulated in the message in object form. Compared with the object form, the array form is easier to read and can improve the interaction efficiency.

[0129] When the layout management module 204 receives the access request, it can save the layout ID and load the layout calculation module 206, for example, loading a WebAssembly-based graph layout engine, a WebGL-based graph layout engine, or a WebGPU-based graph layout engine. The layout management module 204 loads the graph layout parameters into the shared memory (ArrayBuffer or SharedArrayBuffer, which can be applied for by the layout management module 204 or the layout calculation module 206) shared by the layout management module 204 and the layout calculation module 206 (such as the above-mentioned WebAssembly-based graph layout engine), and starts the layout calculation. The layout calculation can be at least one iterative calculation based on the graph layout parameters. The layout calculation module 206 can also return initialization completion to the layout management module 204, and the layout management module 204 can also notify the visualization module 202 to update the status to layout start.

[0130] During the iterative calculation phase, layout management module 204 controls the calculations of layout calculation module 206 after starting layout and processes messages from visualization module 202 between calculations. Layout calculation module 206 calculates the graph layout using an iterative calculation method, updating the data corresponding to the node position in memory after each iterative calculation.

[0131] The calculations performed by the layout calculation module 206 are blocking. During layout calculations, the layout management module 204 cannot respond to requests from the visualization module 202. If the layout management module 204 continuously performs layout calculations, it will not be able to promptly respond to messages from the visualization module 202. Related technologies typically use loops such as for or while to continuously call the layout calculation module 206 (graph layout engine) for iterative calculations. In this case, the iterative calculation task is a long task, and the layout management module 204 is blocked during the execution of this long task, unable to process messages.

[0132] To this end, the layout management module 204 can decompose a long task into multiple subtasks, each subtask including at least one iterative calculation. The sum of the iterative calculation times of the subtasks is equal to the iterative calculation times of the long task. The layout management module 204 adds the subtasks separately to the browser's Task Queue. Among them, the layout management module 204 supports multiple ways to decompose a long task into multiple subtasks, including but not limited to setInterval, setTimeout, postMessage, etc. Among them, setInterval is a method for repeatedly calling a function or executing a code snippet with a fixed time interval between each call; setTimeout is a method for calling a function or calculating an expression after a specified number of milliseconds; postMessage is a method that allows scripts from different sources to communicate effectively in an asynchronous manner, realizing cross-text document, multi-window, and cross-domain message delivery.

[0133] When the visualization module 202 sends a message, the layout management module 204 can add the message event corresponding to the message to the task queue Task Queue for message processing. After the current subtask (the subtask for iterative calculation) is completed, the layout management module 204 can give priority to processing the message instead of executing the next subtask (the next calculation). Specifically, the layout management module 204 can maintain two task queues, one task queue for iterative calculation and one task queue for processing messages. When the layout management module 204 receives a message, it can add the corresponding message event to the task queue for processing the message. The layout management module 204 can determine whether the task queue for processing the message is empty after the current subtask is executed. If so, the next subtask is taken out from the task queue for iterative calculation for iterative calculation; if not, the message event is taken out from the task queue for processing the message and the message is processed until the task queue for processing the message is empty, and then the next subtask is taken out from the task queue for iterative calculation for iterative calculation.

[0134] In some possible implementations, the single calculation of a high-performance graph layout engine is faster, and some of the above-mentioned methods of adding Task Queues have a minimum time interval (usually 4ms). If the time of a single iterative calculation is less than 4ms, treating an iterative calculation as a subtask can lead to a waste of time. In this regard, the layout management module 204 can count the time of a single iterative calculation. For example, the layout management module 204 can obtain the time of each iterative calculation in multiple iterative calculations, perform statistical analysis on the time of each iterative calculation in multiple iterative calculations, and obtain the time of a single iterative calculation. In some examples, the time of a single iterative calculation can be the average or median value of the time of each iterative calculation in multiple iterative calculations. The layout management module 204 can determine the number of iterative calculations in the subtask based on the time of a single iterative calculation. In this way, it is possible to set an appropriate number of iterations, keep the execution time of the subtask just over 4 milliseconds (or equal to 4 milliseconds), and avoid the layout management module 204 being idle for too long.

[0135] During the view update phase, the visualization module 202 receives a notification from the layout management module 204 to start layout, and can monitor browser rendering. Before each browser re-renders the page, the visualization module 202 can send a query request to the layout management module 204. The query request is used to query the graph layout result, and the graph layout result is used for the next page refresh. The layout management module 204 can read the node position from the shared memory, and return it to the visualization module 202 through a message (such as a query result message) in combination with the layout ID currently held by itself. The visualization module 202 checks whether the layout ID in the message matches the current layout ID. If it matches, it renders according to the new node position, thereby refreshing the page. If it does not match, the visualization module 202 can ignore the message. This process allows users to observe the layout calculation process in real time.

[0136] It should be noted that rendering can be performed by the visualization module 202 or by an additional module for rendering. Among them, the additional module for rendering can be a Web Worker based on Canvas or WebGL, or WebGPU rendering. This application does not limit the specific rendering method, and Scalable Vector Graphics (SVG), Canvas, WebGL, and WebGPU can all be used for rendering of graph visualization.

[0137] During the layout adjustment phase, users can trigger layout adjustments by dragging one or more selected nodes. Specifically, visualization module 202 receives a user's layout adjustment request, which includes adjusted graph layout parameters, including adjusted node positions and an adjusted layout ID. Visualization module 202 can notify layout management module 204 of the adjustments to the corresponding layout ID and graph layout parameters via a message (e.g., a layout adjustment request). Upon receiving the message, layout management module 204 performs layout adjustments.

[0138] The layout ID is an integer type and is usually maintained by the visualization module 202. When the layout starts, the layout ID can be 1. When the layout is adjusted, the visualization module 202 can increase the layout ID by 1 as the new layout ID. The frequency of layout adjustment may be very high, and the message of the previous round of layout may not have been processed yet. In order to prevent the result of the previous round of layout from being affected, the layout ID can be used for verification. Specifically, if the layout ID in the message is greater than the held layout ID, the layout management module 204 can start a new layout. When starting a new layout, if there is currently a layout in progress, it can be ended early, and the layout calculation can be restarted with the new graph layout parameters (adjusted graph layout parameters) combined with the current graph layout results.

[0139] Furthermore, if the number of nodes requested for layout adjustment exceeds the number of nodes requested for graph layout, layout management module 204 can invoke the shared memory expansion method provided by the browser to expand the shared memory. For browsers that do not provide a shared memory expansion method, layout management module 204 can re-apply for new shared memory. It should be noted that layout management module 204 can also destroy the existing shared memory, for example, after the synchronization of the current graph layout results is completed.

[0140] After each iteration, the layout calculation module 206 can return information about whether further iteration is needed. When the layout calculation is complete (no further iteration is needed), the layout management module 204 can stop calling the layout calculation module 206 and notify the visualization module 202 that the layout is complete (layout is complete). The layout management module 204 can also return a layout ID. After verifying the layout ID, the visualization module 202 renders the final result and stops refreshing the page.

[0141] Next, referring to the signaling flow chart of a graph layout method for data interaction based on a shared memory mechanism, shown in Figure 6, this embodiment differs from the embodiment shown in Figure 5 primarily in data transmission. The visualization module 202 and layout management module 204 of the embodiment shown in Figure 6 communicate messages, graph layout parameters, and graph layout results based on shared memory (SharedArrayBuffer), independent of the messaging mechanism shown in Figure 5. This method may include an initialization phase, an iterative calculation phase, a view update phase, and a layout adjustment phase.

[0142] During the initialization phase, a user can trigger an operation to access a web application that supports graph visualization by sending an access request (also referred to as a graph visualization request) to the visualization module 202 (e.g., the UI main thread). The visualization module 202 can start the layout management module 204 (e.g., the graph layout Web Worker) for graph layout, store the graph layout parameters, including force-directed layout parameters and a layout ID, in shared memory, and simultaneously provide an area in the shared memory for storing the graph layout results. The address of the shared memory is then sent to the layout management module 204.

[0143] Layout management module 204 receives the address of the shared memory and uses the shared memory from visualization module 202 to load layout calculation module 206, such as a graph layout engine, for initialization. Considering that some graph layout engines may not support it, layout management module 204 can allocate separate shared memory to load layout calculation module 206. In this case, layout management module 204 synchronizes the two shared memories as needed. For example, after each iterative calculation, layout management module 204 synchronizes. Alternatively, visualization module 202 can notify layout management module 204 of synchronization via a shared memory flag. After initialization is complete, layout management module 204 can notify visualization module 202 via a shared memory flag to update the status to layout started.

[0144] During the iterative calculation phase, layout management module 204 calls layout calculation module 206 to perform iterative calculations. Before each iterative calculation, layout management module 204 checks the shared memory flag to determine whether the layout calculation needs to be paused or terminated. If the calculation can continue, layout management module 204 uses atomic operations to check and modify a specific shared memory flag (acquire a lock) to prevent visualization module 202 from accessing the data being calculated. The calculation then begins. When the iterative calculation of a subtask is completed, the corresponding shared memory flag is restored (release the lock).

[0145] During the view update phase, visualization module 202 receives a layout start notification from layout management module 204 and monitors browser rendering. Before each browser re-renders a page, visualization module 202 acquires a lock (waiting for layout management module 204 to release the lock), pauses calculations in layout management module 204, retrieves node positions from shared memory, and then releases the lock. Visualization module 202 then renders the resulting layout based on the new node positions, refreshing the page.

[0146] During the layout adjustment phase, the user can adjust the layout by dragging one or more selected nodes. The visualization module 202 receives the user's layout adjustment request, which includes the adjusted graph layout parameters, wherein the adjusted graph layout parameters may include the adjusted node positions and the adjusted layout ID. The visualization module 202 then acquires the lock, suspends the calculation of the layout management module 204, and updates the adjusted graph layout parameters in the shared memory, and then releases the lock. The layout management module 204 can restart the layout calculation based on the adjusted graph layout parameters and the current graph layout results. If the layout management module 204 has stopped calculating, the visualization module 202 can notify the layout management module 204 to restart the iterative calculation through the shared memory flag.

[0147] The original shared memory can still be used during layout adjustments. When the adjusted graph layout parameters indicate a change in the number of nodes or edges, the visualization module 202 can use the grow method to scale the shared memory. For browsers that do not support the grow method, if the shared memory capacity cannot accommodate the layout data (graph layout parameters, graph layout results), the visualization module 202 can re-apply for shared memory and send the address to the layout management module 204, destroying the original shared memory.

[0148] After each iteration of calculation is completed, or after a subtask is executed, the layout calculation module 206 can return information about whether iterative calculation needs to continue. When the layout calculation is completed (no further iteration is required), the layout management module 204 can stop calling the layout calculation module 206 and notify the visualization module 202 that the layout is complete (layout is complete). The layout management module 204 can also return a layout ID. After verifying the layout ID, the visualization module 202 renders the final result and stops refreshing the page.

[0149] Based on the aforementioned graph layout method, the present application also provides a graph layout system. As shown in FIG2 , the graph layout system 200 includes:

[0150] The visualization module 202 is configured to receive a layout adjustment request including adjusted graph layout parameters, and provide the adjusted graph layout parameters to the layout management module;

[0151] A layout management module 204 is configured to load the adjusted graph layout parameters into the shared memory;

[0152] a layout calculation module 206 configured to obtain the adjusted graph layout parameters from the shared memory, perform at least one iterative calculation based on the adjusted graph layout parameters, and update an adjusted graph layout result in the shared memory, wherein the adjusted graph layout result includes at least one of an intermediate result and a final result;

[0153] The visualization module 202 is further used to display the adjusted graph layout result.

[0154] Exemplarily, the visualization module 202 , the layout management module 204 , and the layout calculation module 206 may be implemented by hardware or software.

[0155] When implemented via software, the visualization module 202, layout management module 204, and layout calculation module 206 can be applications running on a computing device, such as a computing engine. Applications can be provided in the form of virtualization services. Virtualization services can include virtual machine (VM) services, bare metal server (BMS) services, and container services. VM services can be services that use virtualization technology to create a virtual machine (VM) resource pool on multiple physical hosts to provide users with VMs on demand. BMS services can be services that create a virtual BMS resource pool on multiple physical hosts to provide users with BMSs on demand. Container services can be services that create a virtual container resource pool on multiple physical hosts to provide users with containers on demand. A VM is a simulated virtual computer, or logically a single computer. BMS is a scalable, high-performance computing service with computing performance comparable to traditional physical machines and secure physical isolation. Containers are a kernel virtualization technology that provides lightweight virtualization to isolate user space, processes, and resources. It should be understood that the VM service, BMS service and container service in the above-mentioned virtualization services are only specific examples. In actual applications, virtualization services can also be other lightweight or heavyweight virtualization services, which are not specifically limited here.

[0156] When implemented through hardware, the visualization module 202, the layout management module 204, and the layout calculation module 206 may include at least one processor or a processor core. Alternatively, the visualization module 202, the layout management module 204, and the layout calculation module 206 may be implemented using an application-specific integrated circuit (ASIC) or a programmable logic device (PLD). The PLD may be a complex programmable logical device (CPLD), a field-programmable gate array (FPGA), a generic array logic (GAL), or any combination thereof.

[0157] In some possible implementations, the visualization module 202 is further configured to:

[0158] receiving an access request for accessing a webpage supporting graph visualization;

[0159] providing graph layout parameters to the layout management module according to the access request;

[0160] The layout management module 204 is further configured to:

[0161] Loading the graph layout parameters into the shared memory;

[0162] The layout calculation module 206 is further configured to:

[0163] Obtaining the graph layout parameters from the shared memory, performing at least one iterative calculation according to the graph layout parameters, and updating a graph layout result in the shared memory, wherein the graph layout result includes an intermediate result;

[0164] The visualization module 202 is further configured to:

[0165] Display the graph layout result.

[0166] In some possible implementations, the visualization module 202 is further configured to:

[0167] Receive user query requests;

[0168] In response to the query request, the adjusted graph layout result is queried and the adjusted graph layout result is displayed.

[0169] In some possible implementations, the visualization module 202 is specifically configured to:

[0170] In response to the scheduled task, querying the adjusted graph layout result;

[0171] Render the adjusted graph layout result, and display the rendered graph layout result.

[0172] In some possible implementations, the visualization module 202 is further configured to:

[0173] Providing a layout identifier to the layout management module;

[0174] The visualization module is specifically used for:

[0175] The adjusted graph layout result corresponding to the layout identifier is queried according to the layout identifier.

[0176] In some possible implementations, the visualization module 202 is specifically configured to:

[0177] A graph layout adjustment message is sent to the layout management module, where the graph layout adjustment message carries the adjusted graph layout parameters.

[0178] In some possible implementations, the layout management module 204 is further configured to:

[0179] Decomposing the iterative calculation task into a plurality of subtasks, and adding the plurality of subtasks to a task queue, wherein the subtasks are used to instruct the layout calculation module to perform at least one iterative calculation;

[0180] When a message is received from the visualization module, a message event corresponding to the message is added to the task queue so that the message can be processed when the currently executed subtask is completed.

[0181] In some possible implementations, the layout management module 204 is further configured to:

[0182] The time of a single iterative calculation is counted, and the number of iterative calculations in the subtask is determined according to the time of the single iterative calculation.

[0183] In some possible implementations, the visualization module and the layout management module use shared memory to perform data exchange, and the visualization module is specifically configured to:

[0184] The adjusted graph layout parameters are provided to the layout management module through the shared memory.

[0185] In some possible implementations, the layout calculation module 206 is specifically configured to:

[0186] After the layout management module adds a lock to the target parameter in the adjusted graph layout parameters, iterative calculation is performed according to the target parameter, and the adjusted graph layout result obtained after the iterative calculation is updated in the shared memory.

[0187] In some possible implementations, the layout calculation module includes a layout calculation engine based on WebAssembly, WebGL, or WebGPU.

[0188] This application also provides a computing device 700. As shown in Figure 7, computing device 700 includes a bus 702, a processor 704, a memory 706, and a communication interface 708. Processor 704, memory 706, and communication interface 708 communicate with each other via bus 702. Computing device 700 can be a server or a terminal device. It should be understood that this application does not limit the number of processors and memories in computing device 700.

[0189] Bus 702 may be a Peripheral Component Interconnect (PCI) bus or an Extended Industry Standard Architecture (EISA) bus, among others. Buses may be classified as address buses, data buses, control buses, and the like. For ease of illustration, FIG7 illustrates a single bus line, but this does not imply a single bus or type of bus. Bus 702 may include a path for transmitting information between various components of computing device 700 (e.g., memory 706, processor 704, and communication interface 708).

[0190] The processor 704 may include any one or more processors such as a central processing unit (CPU), a graphics processing unit (GPU), a microprocessor (MP), or a digital signal processor (DSP).

[0191] The memory 706 may include volatile memory, such as random access memory (RAM), or non-volatile memory, such as read-only memory (ROM), flash memory, hard disk drive (HDD), or solid state drive (SSD).

[0192] The memory 706 stores executable program code, and the processor 704 executes the executable program code to implement the aforementioned graph layout method. Specifically, the memory 706 stores instructions for the graph layout system 200 to execute the graph layout method. For example, the memory 706 stores instructions for implementing the functions of the visualization module 202, the layout management module 204, and the layout calculation module 206. The processor 704 executes the instructions for implementing the functions of the visualization module 202, thereby executing the method steps performed by the visualization module 202 in the aforementioned embodiment. The processor 704 executes the instructions for implementing the functions of the layout management module 204, thereby executing the method steps performed by the layout management module 204 in the aforementioned embodiment. The processor 704 executes the instructions for implementing the functions of the layout calculation module 106, thereby executing the method steps performed by the layout calculation module 106 in the aforementioned embodiment.

[0193] The communication interface 708 uses a transceiver module such as, but not limited to, a network interface card or a transceiver to implement communication between the computing device 700 and other devices or a communication network.

[0194] In some possible implementations, the computing device may further include a display 709. The visualization module 202 may present a visualization interface, such as a visualization layout interface, to the user through the display 709, and receive a layout adjustment request triggered by the user through the visualization layout interface. Similarly, the visualization module 202 may also display the adjusted graph layout result (such as at least one of the intermediate results or the final result) to the user through the display 709. In a specific implementation, the processor 704 executes instructions for implementing the functions of the visualization module 202, starts the UI main thread, and the UI main thread may output the rendered graph layout result to the display 709 for display.

[0195] The present application also provides a computer-readable storage medium. The computer-readable storage medium can be any available medium that can be stored by a computing device or a data storage device such as a data center that contains one or more available media. The available medium can be a magnetic medium (e.g., a floppy disk, a hard disk, a tape), an optical medium (e.g., a DVD), or a semiconductor medium (e.g., a solid-state drive). The computer-readable storage medium includes instructions that instruct the computing device to execute the above-mentioned graph layout system for executing the graph layout method.

[0196] Embodiments of the present application also provide a computer program product comprising instructions. The computer program product may be software or a program product comprising instructions that can be executed on a computing device or stored in any available medium. When the computer program product is executed on at least one computing device, the at least one computing device executes the graph layout method described above.

[0197] Finally, it should be noted that the above embodiments are only used to illustrate the technical solutions of the present invention, rather than to limit it. Although the present invention has been described in detail with reference to the aforementioned embodiments, those skilled in the art should understand that they can still modify the technical solutions described in the aforementioned embodiments, or make equivalent replacements for some of the technical features therein. However, these modifications or replacements do not deviate the essence of the corresponding technical solutions from the protection scope of the technical solutions of the various embodiments of the present invention.

Claims

1. A graph layout method, characterized in that: Applied to a graph layout system, the graph layout system includes a visualization module, a layout management module and a layout calculation module, the layout management module and the layout calculation module use shared memory to perform data interaction, and the method includes: The visualization module receives a layout adjustment request, the layout adjustment request includes adjusted graph layout parameters, and provides the adjusted graph layout parameters to the layout management module; The layout management module loads the adjusted graph layout parameters into the shared memory, the layout calculation module obtains the adjusted graph layout parameters from the shared memory, performs at least one iterative calculation according to the adjusted graph layout parameters, and updates the adjusted graph layout result in the shared memory, wherein the adjusted graph layout result includes at least one of an intermediate result or a final result; The visualization module displays the adjusted graph layout result.

2. The method according to claim 1, characterized in that Before the visualization module receives the layout adjustment request, the method further includes: The visualization module receives an access request, the access request being used to access a web page supporting graph visualization; The visualization module provides the graph layout parameters to the layout management module according to the access request; The layout management module loads the graph layout parameters into the shared memory, the layout calculation module obtains the graph layout parameters from the shared memory, performs at least one iterative calculation according to the graph layout parameters, and updates the graph layout results in the shared memory, wherein the graph layout results include intermediate results; The visualization module displays the graph layout result.

3. The method according to claim 1 or 2, characterized in that: The method further comprises: The visualization module receives a query request from a user; The visualization module queries the adjusted graph layout result in response to the query request, and displays the adjusted graph layout result.

4. The method according to claim 1 or 2, characterized in that: The visualization module displays the adjusted graph layout result, including: The visualization module queries the adjusted graph layout result in response to the scheduled task; The visualization module renders the adjusted graph layout result and displays the rendered graph layout result.

5. The method according to claim 4, characterized in that The method further comprises: The visualization module provides a layout identifier to the layout management module; The visualization module queries the adjusted graph layout result, including: The visualization module queries the adjusted graph layout result corresponding to the layout identifier according to the layout identifier.

6. The method according to any one of claims 1 to 5, characterized in that: The visualization module provides the adjusted graph layout parameters to the layout management module, including: The visualization module sends a graph layout adjustment message to the layout management module, where the graph layout adjustment message carries the adjusted graph layout parameters.

7. The method according to claim 6, characterized in that The method further comprises: The layout management module decomposes the iterative calculation task into multiple subtasks, and adds the multiple subtasks to the task queue, wherein the subtasks are used to instruct the layout calculation module to perform at least one iterative calculation; When receiving a message from the visualization module, the layout management module adds a message event corresponding to the message to the task queue, so as to process the message when the currently executed subtask is completed.

8. The method according to claim 7, characterized in that The method further comprises: The layout management module counts the time of a single iterative calculation, and determines the number of iterative calculations in the subtask according to the time of the single iterative calculation.

9. The method according to any one of claims 1 to 5, characterized in that: The visualization module and the layout management module use a shared memory to perform data interaction, and the visualization module provides the layout management module with adjusted graph layout parameters, including: The visualization module provides the adjusted graph layout parameters to the layout management module through the shared memory.

10. The method according to claim 9, characterized in that The layout calculation module performs at least one iterative calculation according to the adjusted graph layout parameters, and updates the adjusted graph layout result in the shared memory, including: After the layout management module adds a lock to the target parameter in the adjusted graph layout parameter, the layout calculation module performs iterative calculation according to the target parameter, and updates the adjusted graph layout result obtained after the iterative calculation in the shared memory.

11. The method according to any one of claims 1 to 10, characterized in that: The layout calculation module includes a layout calculation engine based on WebAssembly, WebGL or WebGPU.

12. A graph layout system, characterized in that: The graph layout system includes a visualization module, a layout management module and a layout calculation module, and the layout management module and the layout calculation module use shared memory to perform data interaction; The visualization module is used to receive a layout adjustment request, the layout adjustment request includes adjusted graph layout parameters, and provide the adjusted graph layout parameters to the layout management module; The layout management module is used to load the adjusted graph layout parameters into the shared memory; The layout calculation module is used to obtain the adjusted graph layout parameters from the shared memory, perform at least one iterative calculation according to the adjusted graph layout parameters, and update the adjusted graph layout result in the shared memory, wherein the adjusted graph layout result includes at least one of an intermediate result or a final result; The visualization module is also used to display the adjusted graph layout result.

13. The system according to claim 12, characterized in that The visualization module is also used for: receiving an access request for accessing a web page supporting graph visualization; providing graph layout parameters to the layout management module according to the access request; The layout management module is also used for: Loading the graph layout parameters into the shared memory; The layout calculation module is also used for: Acquire the graph layout parameters from the shared memory, perform at least one iterative calculation according to the graph layout parameters, and update the graph layout results in the shared memory, wherein the graph layout results include intermediate results; The visualization module is also used for: The graph layout result is displayed.

14. The system according to claim 12 or 13, characterized in that The visualization module is also used for: Receive user query requests; In response to the query request, the adjusted graph layout result is queried and the adjusted graph layout result is displayed.

15. The system according to claim 12 or 13, characterized in that The visualization module is specifically used for: In response to the scheduled task, querying the adjusted graph layout result; Render the adjusted graph layout result, and display the rendered graph layout result.

16. The system according to claim 15, characterized in that The visualization module is also used for: Providing a layout identifier to the layout management module; The visualization module is specifically used for: The adjusted graph layout result corresponding to the layout identifier is queried according to the layout identifier.

17. The system according to any one of claims 12 to 16, characterized in that The visualization module is specifically used for: A graph layout adjustment message is sent to the layout management module, wherein the graph layout adjustment message carries the adjusted graph layout parameters.

18. The system according to claim 17, characterized in that The layout management module is also used for: Decomposing the iterative calculation task into a plurality of subtasks, and adding the plurality of subtasks to a task queue, wherein the subtasks are used to instruct the layout calculation module to perform at least one iterative calculation; When a message is received from the visualization module, a message event corresponding to the message is added to the task queue so that the message can be processed when the currently executed subtask is completed.

19. The system according to claim 18, characterized in that The layout management module is also used for: The time of a single iterative calculation is counted, and the number of iterative calculations in the subtask is determined according to the time of the single iterative calculation.

20. The system according to any one of claims 12 to 16, characterized in that The visualization module and the layout management module use shared memory to perform data interaction, and the visualization module is specifically used for: The adjusted graph layout parameters are provided to the layout management module through the shared memory.

21. The system according to claim 20, characterized in that The layout calculation module is specifically used for: After the layout management module adds a lock to the target parameter in the adjusted graph layout parameter, iterative calculation is performed according to the target parameter, and the adjusted graph layout result obtained after the iterative calculation is updated in the shared memory.

22. The system according to any one of claims 12 to 21, characterized in that The layout calculation module includes a layout calculation engine based on WebAssembly, WebGL or WebGPU.

23. A computing device, characterized in that The computing device includes at least one processor and at least one memory, wherein the at least one memory stores computer-readable instructions; the at least one processor executes the computer-readable instructions so that the computing device executes the graph layout method according to any one of claims 1 to 11.

24. A computer-readable storage medium, characterized in that: Comprising computer-readable instructions; the computer-readable instructions are used to implement the graph layout method described in any one of claims 1 to 11.

25. A computer program product, characterized in that Comprising computer-readable instructions; the computer-readable instructions are used to implement the graph layout method described in any one of claims 1 to 11.

Images