Topological graph rendering method and device, network equipment and storage medium

Abstract

The invention relates to the technical field of graph visualization, in particular to a topological graph rendering method and device, network equipment and a storage medium. The topological graph rendering method comprises the following steps: acquiring topological graph information of a topological graph; under the condition that the topological graph information meets information requirements, a JavaScript file is executed on each sub-thread in at least one sub-thread to obtain an execution result, rendering of a first page element is executed on a main thread to obtain a first rendering result, the JavaScript file is generated by compiling a second page element corresponding to the topological graph and a layout algorithm, and the JavaScript file is generated by compiling the second page element corresponding to the topological graph and the layout algorithm. The second page elements comprise layout type elements, and the first page elements are elements except the second page elements in the page elements corresponding to the topological graph; according to the execution result and the first rendering result, a graph visualization engine is called, and rendering of the topological graph is completed. By adopting the method, the main thread blockage condition can be reduced, the system performance is improved, and the user experience is improved.

Description

Technical Field

[0001] The present disclosure relates to the field of graph visualization technology, and in particular to a topology graph rendering method, apparatus, network device, and storage medium. Background Art

[0002] With the development of science and technology, more and more services are provided to users, and improving service quality has become the focus of users. Among them, in the field of graph visualization technology, large-scale data such as application panoramic topology graphs can be processed. For example, a panoramic topology graph can be an enterprise-level panoramic graph composed of applications as points and call relationships between applications as edges. It is used to show the topological relationship between applications and can be used as a visual reference for application architecture analysis. However, due to the limitations of open source components, when the amount of data is large, the page will be obviously stuck, the browser will not respond or the response time is too long, resulting in a poor user experience. Summary of the invention

[0003] The present disclosure provides a topology map rendering method, device, network device and storage medium to reduce main thread congestion, improve system performance and user experience. The technical solution of the present disclosure is as follows:

[0004] According to a first aspect of an embodiment of the present disclosure, a topology map rendering method is provided, comprising:

[0005] Get topology information of the topology map;

[0006] In the case where the topology map information meets the information requirements, a JavaScript file is executed on each sub-thread in at least one sub-thread to obtain an execution result, and rendering of a first page element is executed on the main thread to obtain a first rendering result, wherein the JavaScript file is generated by compiling a second page element corresponding to the topology map and a layout algorithm, wherein the second page element includes a layout class element, and the first page element is an element of the page element corresponding to the topology map except the second page element;

[0007] According to the execution result and the first rendering result, a graph visualization engine is called to complete the rendering of the topology graph.

[0008] According to some embodiments, calling a graph visualization engine according to the execution result and the first rendering result to complete rendering of the topology graph includes:

[0009] Return the execution result to the main thread via the postMessage application program interface;

[0010] According to the execution result and the first rendering result, a graph visualization engine is called on the main thread to complete the rendering of the topology graph.

[0011] According to some embodiments, the topology map information includes operation duration, and the obtaining of the topology map information includes:

[0012] Acquire a relevant data set of the topological graph, wherein the relevant data set includes node data and associated data;

[0013] In the case that the amount of data included in the relevant data set is greater than a data amount threshold, it is determined that the topology map information meets the information requirement.

[0014] According to some embodiments, the topology map information includes operation duration, and the obtaining of the topology map information includes:

[0015] Obtain the total operation duration corresponding to each operation of the topology graph after rendering begins;

[0016] In the case that the operation duration is greater than the duration threshold, it is determined that the topology map information meets the information requirement.

[0017] According to some embodiments, the topology map information includes page fluency, and obtaining the topology map information of the topology map includes:

[0018] After the topology map starts to be rendered, the page fluency corresponding to the topology map is obtained once at a preset time interval;

[0019] When the page fluency is lower than the fluency threshold, it is determined that the topology map information meets the information requirement.

[0020] According to some embodiments, the method further comprises:

[0021] In the case that the topology map information does not meet the information requirement, the second page element is rendered using the layout algorithm on the main thread, and the first page element is rendered on the main thread to obtain a second rendering result;

[0022] According to the second rendering result, a graph visualization engine is called to complete the rendering of each topology graph in the topology graph set.

[0023] According to some embodiments, the method further comprises:

[0024] The processing capability corresponding to each sub-thread in at least one sub-thread;

[0025] According to the processing capabilities corresponding to the sub-threads, the JavaScript files corresponding to the sub-threads are determined.

[0026] According to a second aspect of an embodiment of the present disclosure, a topology map rendering device is provided, including:

[0027] An information acquisition unit, used to acquire topology information of the topology map;

[0028] A result acquisition unit is used to execute a JavaScript file on each sub-thread in at least one sub-thread to obtain an execution result when the topology map information meets the information requirement, and to render a first page element on a main thread to obtain a first rendering result, wherein the JavaScript file is generated by compiling a second page element corresponding to the topology map and a layout algorithm, wherein the second page element includes a layout class element, and the first page element is an element of the page element corresponding to the topology map except the second page element;

[0029] A topology map rendering unit is used to call a graph visualization engine according to the execution result and the first rendering result to complete the rendering of the topology map.

[0030] According to a third aspect of an embodiment of the present disclosure, a network device is provided, including:

[0031] processor;

[0032] a memory for storing instructions executable by the processor;

[0033] The processor is configured to execute the instructions to implement the topology map rendering method described in any one of the aforementioned aspects.

[0034] According to a fourth aspect of an embodiment of the present disclosure, a storage medium is provided. When instructions in the storage medium are executed by a processor of a network device, the network device is enabled to execute the topology map rendering method described in any one of the preceding aspects.

[0035] According to a fifth aspect of an embodiment of the present disclosure, a computer program product is provided, including a computer program, wherein the computer program implements any one of the methods described in the preceding aspects when executed by a processor.

[0036] The technical solution provided by the embodiments of the present disclosure brings at least the following beneficial effects:

[0037] In some or related embodiments, by obtaining the topology information of the topology map; when the topology information meets the information requirements, executing the JavaScript file on each sub-thread in at least one sub-thread to obtain the execution result, and executing the rendering of the first page element on the main thread to obtain the first rendering result, the JavaScript file is generated by compiling the second page element and the layout algorithm corresponding to the topology map, the second page element includes the layout class element, and the first page element is the element other than the second page element in the page element corresponding to the topology map; according to the execution result and the first rendering result, calling the graph visualization engine to complete the rendering of the topology map. Therefore, in the case of a large amount of data, at least one sub-thread can be created, so that at least one sub-thread and the main thread can render the topology map in parallel, reducing the congestion of the main thread, reducing the resource consumption when only using at least one sub-thread makes the main thread idle, and reducing the situation that only using the main thread to process large-scale data makes the rendering time of the topology map longer. At the same time, using at least one sub-thread and the main thread to render the topology map in parallel can reduce the page jam, the browser cannot respond or the response time is too long, and the rendering efficiency of the topology map can be improved, the main thread congestion can be reduced, the system performance can be improved, and the user experience can be improved.

[0038] It is to be understood that the foregoing general description and the following detailed description are exemplary and explanatory only and are not restrictive of the present disclosure. BRIEF DESCRIPTION OF THE DRAWINGS

[0039] The drawings herein are incorporated into and constitute a part of the specification, illustrate embodiments consistent with the present disclosure, and together with the description are used to explain the principles of the present disclosure, and do not constitute improper limitations on the present disclosure.

[0040] Figure 1 is a flowchart of a topology map rendering method according to an exemplary embodiment;

[0041] Figure 2 is a flowchart of a topology map rendering method according to an exemplary embodiment;

[0042] Figure 3 is a schematic diagram showing an example of a topology map rendering structure according to an exemplary embodiment;

[0043] Figure 4 is a block diagram of a topology map rendering device according to an exemplary embodiment;

[0044] Figure 5 The invention is a block diagram of a network device according to an exemplary embodiment. DETAILED DESCRIPTION

[0045] In order to enable ordinary persons in the art to better understand the technical solutions of the present disclosure, the technical solutions in the embodiments of the present disclosure will be clearly and completely described below in conjunction with the accompanying drawings.

[0046] The embodiments of the present disclosure provide a topology map rendering method, device, network device, and storage medium. In some embodiments, the terms such as the topology map rendering method, information processing method, and communication method can be interchangeable, the terms such as the topology map rendering device, information processing device, and communication device can be interchangeable, and the terms such as the information processing system and communication system can be interchangeable.

[0047] The embodiments of the present disclosure are not exhaustive, but are only illustrative of some embodiments, and are not intended to be a specific limitation on the scope of protection of the present disclosure. In the absence of contradiction, each step in a certain embodiment can be implemented as an independent embodiment, and the steps can be arbitrarily combined. For example, a solution after removing some steps in a certain embodiment can also be implemented as an independent embodiment, and the order of the steps in a certain embodiment can be arbitrarily exchanged. In addition, the optional implementation methods in a certain embodiment can be arbitrarily combined; in addition, the embodiments can be arbitrarily combined, for example, some or all of the steps of different embodiments can be arbitrarily combined, and a certain embodiment can be arbitrarily combined with the optional implementation methods of other embodiments.

[0048] In each embodiment of the present disclosure, unless otherwise specified or there is a logical conflict, the terms and / or descriptions between the embodiments are consistent and can be referenced to each other, and the technical features in different embodiments can be combined to form a new embodiment based on their internal logical relationships.

[0049] The terms used in the embodiments of the present disclosure are only for the purpose of describing specific embodiments and are not intended to limit the present disclosure.

[0050] In the embodiments of the present disclosure, unless otherwise specified, elements expressed in the singular form, such as "a", "an", "the", "above", "said", "aforementioned", "this", etc., may mean "one and only one", or "one or more", "at least one", etc. For example, when using articles such as "a", "an", "the" in English in translation, the noun after the article may be understood as a singular expression or a plural expression.

[0051] In the embodiments of the present disclosure, “plurality” refers to two or more.

[0052] In some embodiments, the terms “at least one,” “one or more,” “a plurality of,” “multiple,” etc. may be used interchangeably.

[0053] In some embodiments, "at least one of A and B", "A and / or B", "A in one case, B in another case", "in response to one case A, in response to another case B", etc., may include the following technical solutions according to the situation: in some embodiments, A (A is executed independently of B); in some embodiments, B (B is executed independently of A); in some embodiments, execution is selected from A and B (A and B are selectively executed); in some embodiments, A and B (both A and B are executed). When there are more branches such as A, B, C, etc., the above is also similar.

[0054] In some embodiments, devices and equipment may be interpreted as physical or virtual, and their names are not limited to the names recorded in the embodiments. In some cases, they may also be understood as "equipment", "device", "circuit", "network element", "node", "function", "unit", "section", "system", "network", "chip", "chip system", "entity", "subject", etc.

[0055] In some embodiments, "terminal" or "terminal device" can be referred to as "user equipment (UE)", "user terminal" "mobile station (MS)", "mobile terminal (MT)", subscriber station, mobile unit, subscriber unit, wireless unit, remote unit, mobile device, wireless device, wireless communication device, remote device, mobile subscriber station, access terminal, mobile terminal, wireless terminal, remote terminal, handset, user agent, mobile client, client, etc.

[0056] It should be noted that the information (including but not limited to user device information, user personal information, etc.), data (including but not limited to data used for analysis, stored data, displayed data, etc.) and signals involved in this application are all authorized by the user or fully authorized by all parties, and the collection, use and processing of relevant data must comply with relevant laws, regulations and standards of relevant countries and regions.

[0057] It should be noted that the terms "first", "second", etc. in the specification and claims of the present disclosure and the above-mentioned drawings are used to distinguish similar objects, and are not necessarily used to describe a specific order or sequence. It should be understood that the data used in this way can be interchanged where appropriate, so that the embodiments of the present disclosure described herein can be implemented in an order other than those illustrated or described herein. The embodiments described in the following exemplary embodiments do not represent all embodiments consistent with the present disclosure. Instead, they are merely examples of devices and methods consistent with some aspects of the present disclosure as detailed in the appended claims.

[0058] According to some embodiments, when the amount of data in the topology map is greater than a threshold, the execution time of JavaScript increases significantly, and JavaScript is a single-threaded mechanism that will wait for JavaScript execution to complete before performing other operations. Therefore, the time-consuming JS execution can be placed at a later time point in the event loop to ensure that the rendering of page elements is always at a higher priority to prevent freezes or unresponsiveness.

[0059] However, the setTimeout function provided by JavaScript can solve the problem of some pages being unresponsive. For example, by placing complex calculations in batches into separate setTimeout functions, continuous calculations can be split into different locations in the event loop. In this way, time is given to UI rendering and event response between two calculations, thus ensuring that the page will not freeze or become unresponsive. However, when the amount of calculation is too large, it will prolong the time it takes to fully present the page, resulting in poor real-time performance and inability to respond quickly.

[0060] Figure 1 is a flowchart of a topology map rendering method according to an exemplary embodiment. Figure 1 As shown, the following steps are included:

[0061] In step S11, topology information of the topology map is obtained;

[0062] In some embodiments, the execution subject of the embodiment of the present disclosure may be, for example, a network device, and the name of the network device is not limited. For example, the network device may also be called a server, a base station, or a server cluster, etc. The embodiment of the present disclosure does not limit this. The technical solution of the embodiment of the present disclosure may be applied to a topology map rendering scene based on the G6 visualization engine, for example.

[0063] According to some embodiments, the embodiments of the present disclosure may be applied to a topology map rendering optimization scenario of large-scale data, wherein the large-scale data may indicate, for example, that the amount of data is greater than a preset amount.

[0064] According to some embodiments, the topology map may represent the relationship between entities through abstract points and lines, where points represent entities and lines represent connections between entities. The topology map of the embodiment of the present disclosure may be, for example, an application panorama topology map.

[0065] In some embodiments, the topology map information can be used to indicate all information related to the topology map, for example. The topology map information includes, but is not limited to, one or more of the nodes of the topology map, the associated data of the topology map, the operation information corresponding to the topology map, the operation duration of each operation after the topology map starts to render, and the page fluency corresponding to the topology map. The topology map information does not specifically refer to a fixed information. For example, when the amount of information included in the topology map information changes, the topology map information can also change accordingly.

[0066] According to some embodiments, topology map information of a topology map may be obtained.

[0067] In step S12, when the topology map information meets the information requirement, the JavaScript file is executed on each of the at least one sub-thread to obtain an execution result, and the rendering of the first page element is executed on the main thread to obtain a first rendering result;

[0068] According to some embodiments, the information requirement may be, for example, a requirement for determining whether to use at least one sub-thread to render some page elements of the topology map. The information requirement does not specifically refer to a fixed requirement. For example, when the topology map information changes, the information requirement may also change accordingly. For example, when a modification instruction corresponding to the information requirement is received, the information requirement may also change accordingly.

[0069] In some embodiments, a sub-thread may be used to indicate a thread other than a main thread. The number of the sub-thread may be at least one. The sub-thread may be a web worker sub-thread, and a web worker sub-thread may be an independent thread running inside a browser. The embodiments of the present disclosure are not limited to this.

[0070] According to some embodiments, the JavaScript file may be generated by compiling the second page element and layout algorithm corresponding to the topology map. The second page element includes a layout class element corresponding to the topology map. The JavaScript file may be, for example, an executable JavaScript file formed by passing the layout data to a layout class instance object after acquiring the layout data from the server, and compiling the layout data and layout algorithm in the layout class instance object. The layout class may be responsible for message transmission between threads, monitoring and processing of messages, etc.

[0071] According to some embodiments, the first page element is an element of the page elements corresponding to the topology map except the second page element.

[0072] In some embodiments, the execution result may be, for example, the result obtained by executing the corresponding JavaScript file using each sub-thread in at least one sub-thread. The execution result does not specifically refer to a fixed result. For example, when the second page element changes or the layout algorithm changes, the execution result may also change accordingly.

[0073] According to some embodiments, the main thread may refer to, for example, a thread corresponding to the topology map that is created when a rendering start instruction for the topology map is received.

[0074] In some embodiments, the first rendering result may be used to indicate a structure obtained by rendering the first page element on the main thread, for example. The first one of the first rendering results is used to distinguish from the other rendering results.

[0075] According to some embodiments, when the topology map information meets the information requirements, a JavaScript file is executed on each sub-thread in at least one sub-thread to obtain an execution result, and rendering of a first page element is executed on the main thread to obtain a first rendering result.

[0076] In step S13, a graph visualization engine is called according to the execution result and the first rendering result to complete the rendering of the topology graph.

[0077] In some embodiments, the graph visualization engine may be, for example, the G6 graph visualization engine, which is a simple, easy-to-use, complete, and open-source graph visualization engine that provides a series of elegantly designed and easy-to-use graph visualization solutions based on high customization capabilities. The G6 graph visualization engine can be used to build graph visualization, graph analysis, or graph editor applications that meet personalized requirements.

[0078] In some embodiments, a graph visualization engine may be called according to the execution result and the first rendering result to complete the rendering of the topology graph.

[0079] In some or related embodiments, by obtaining the topology information of the topology map; when the topology information meets the information requirements, executing the JavaScript file on each sub-thread in at least one sub-thread to obtain the execution result, and executing the rendering of the first page element on the main thread to obtain the first rendering result, the JavaScript file is generated by compiling the second page element and the layout algorithm corresponding to the topology map, the second page element includes a layout class element, and the first page element is an element other than the second page element in the page element corresponding to the topology map; according to the execution result and the first rendering result, calling the graph visualization engine to complete the rendering of the topology map. Therefore, in the case of a large amount of data, at least one sub-thread can be created, so that at least one sub-thread and the main thread can render the topology map in parallel, reducing the resource consumption when only using at least one sub-thread makes the main thread idle, and can reduce the situation that only using the main thread to process large-scale data makes the rendering time of the topology map longer, and at the same time, using at least one sub-thread and the main thread to render the topology map in parallel can reduce the page jam, the browser cannot respond or the response time is too long, and can improve the rendering efficiency of the topology map, reduce the main thread congestion, improve system performance, and improve user experience. In addition, this solution does not require local rendering or batch rendering and calculation, which can reduce the resource consumption required for multiple loadings, can display all applications and their relationships at one time, and can improve system performance.

[0080] Figure 2 is a flowchart of a topology map rendering method according to an exemplary embodiment. Figure 2 As shown, the following steps are included:

[0081] In step S21, topology information of the topology map is obtained;

[0082] The specific process is as described above and will not be repeated here.

[0083] The embodiments of the present disclosure can be applied, for example, to a web page rendering scenario. Figure 3 is an exemplary schematic diagram showing a topology map rendering structure according to an exemplary embodiment, wherein a detailed description of each step is as follows.

[0084] According to some embodiments, the topology map information includes operation duration, and the obtaining of the topology map information includes:

[0085] Acquire a relevant data set of the topological graph, wherein the relevant data set includes node data and association data;

[0086] When the amount of data included in the relevant data set is greater than the data amount threshold, it is determined that the topology map information meets the information requirement. Therefore, when the amount of data is large, at least one child thread can be created so that at least one child thread and the main thread can render the topology map in parallel, thereby reducing the rendering time of the topology map, improving the rendering efficiency of the topology map, reducing the congestion of the main thread, and improving system performance.

[0087] According to some embodiments, the topology map information includes operation duration, and the obtaining of the topology map information includes:

[0088] Obtain the total operation duration corresponding to each operation of the topology graph after rendering begins;

[0089] When the operation duration is greater than the duration threshold, it is determined that the topology map information meets the information requirement. Therefore, when the operation duration is long, at least one child thread can be created, so that at least one child thread and the main thread can render the topology map in parallel, thereby reducing the rendering time of the topology map, improving the rendering efficiency of the topology map, reducing the congestion of the main thread, and improving the system performance.

[0090] Among them, after the topology map starts rendering, each operation may include, for example, loading, script execution, rendering, painting, system, idle, etc. The total operation duration corresponding to each operation may be, for example, the total duration of at least one operation added together, and the duration corresponding to at least one operation may include, for example:

[0091] Loading: the time it takes to request the network and parse the HTML.

[0092] Scripting: JS script execution time;

[0093] Rendering: re-arrange duration, calculate size, position information, etc.

[0094] Painting: drawing time;

[0095] System: system usage time;

[0096] Idle: Idle waiting time.

[0097] Wherein, if the operation duration is greater than the duration threshold, it is determined that the topology map information meets the information requirement. For example, the timing can be started at the time when the topology map starts to be rendered, and when the timing reaches the duration threshold, it is determined that the topology map information meets the information requirement. Wherein, for example, the operation duration can be obtained through the performance panel. Wherein, the performance panel (Performance) can record the time consumed by various operations during the page rendering process.

[0098] According to some embodiments, the topology map information includes page fluency, and obtaining the topology map information of the topology map includes:

[0099] After the topology map starts to be rendered, the page fluency corresponding to the topology map is obtained once at a preset time interval;

[0100] When the page fluency is lower than the fluency threshold, it is determined that the topology map information meets the information requirement. Therefore, when the page fluency is low, at least one sub-thread can be created so that at least one sub-thread and the main thread can render the topology map in parallel, thereby reducing the rendering time of the topology map, improving the rendering efficiency of the topology map, reducing the main thread congestion, and improving system performance.

[0101] Among them, page fluency can refer to, for example, frame rate (FPS): that is, the number of frames per second. For example, when the page is idle, the frame rate can be greater than or equal to 80fps. When the frame rate is lower than 60fps, there will be a slight freeze; when it is lower than 20fps, there will be obvious frame drops and unsmoothness. Therefore, the fluency threshold can be set according to demand. Among them, the threshold of the embodiment of the present disclosure can be obtained based on experimental data, and can also be obtained based on manual experience. Among them, different types of topological maps, for example, can correspond to different thresholds.

[0102] The frame rate can be obtained through the Render panel. The Render panel (Render) can monitor the real-time frame rate of the page.

[0103] In step S22, when the topology map information meets the information requirement, the JavaScript file is executed on each of the at least one sub-thread to obtain an execution result, and the rendering of the first page element is executed on the main thread to obtain a first rendering result;

[0104] The specific process is as described above and will not be repeated here.

[0105] According to some embodiments, the JavaScript file is generated by compiling a second page element corresponding to the topology map and a layout algorithm, the second page element includes a layout class element, and the first page element is an element of the page elements corresponding to the topology map except the second page element.

[0106] According to some embodiments, the method further comprises:

[0107] The processing capability corresponding to each sub-thread in at least one sub-thread;

[0108] According to the processing capabilities corresponding to the sub-threads, the JavaScript files corresponding to the sub-threads are determined. Therefore, the JavaScript files corresponding to the sub-threads can be determined according to the processing capabilities, thereby improving the accuracy of obtaining the execution results.

[0109] For example, the communication between the child thread and the main thread can be established through the postMessage application program interface to complete the calculation of the layout algorithm. Among them, the JavaScript file can be, for example, after obtaining the layout data from the server, passing the layout data to the layout class instance object, and compiling the layout data and the layout algorithm in the layout class instance object to form an executable JavaScript file. The layout class can be responsible for message transmission between threads, monitoring and processing of messages, etc. The JavaScript file can be sent to the corresponding Web Worker child thread through the postMessage application program interface, and the js file can be executed on the Web Worker child thread. After the execution is completed, the execution result will be returned. At the same time, the main thread executes the rendering and drawing of other elements in parallel, so that the page enters the topology map waiting for loading state, reducing unresponsiveness or jamming.

[0110] The Web Worker sub-thread may, for example, load and run one or more separate JavaScript threads in the main JavaScript thread running on the page.

[0111] In some embodiments, the execution results may be cached, that is, the drawing of the topology map may be cached, and when the drawing is partially redrawn, the cache mechanism may be used to reduce the repeated process of re-rendering.

[0112] In step S23, according to the execution result and the first rendering result, a graph visualization engine is called to complete rendering of the topology graph;

[0113] The specific process is as described above and will not be repeated here.

[0114] According to some embodiments, after at least one child thread completes execution and returns the execution result, the execution result and the first rendering result are processed. Since the node needs to display the name label, the coordinates of all nodes can be obtained and sorted in the X-axis direction; the position with the same X-axis coordinate is found through binary search, the node anti-occlusion space is calculated, and the identification display result is determined according to the node anti-occlusion space, wherein the label display result is used to indicate whether to display the label, which can prevent mutual occlusion, while reducing the elements that need to be rendered and reducing the time for reflow and reflow.

[0115] According to some embodiments, the processed results may be cached, and the drawing method of G6 may be called to render the processed results to complete the rendering of the topology map. For example, the topology map may also be displayed through a canvas.

[0116] Among them, the G6 graph visualization engine can add web worker enhancements and cache enhancements to improve computing and rendering performance, and display the topology view through the canvas.

[0117] According to some embodiments, calling a graph visualization engine according to the execution result and the first rendering result to complete rendering of the topology graph includes:

[0118] Return the execution result to the main thread via the postMessage application program interface;

[0119] According to the execution result and the first rendering result, the graph visualization engine is called on the main thread to complete the rendering of the topology graph. Therefore, by establishing communication between the child thread and the main thread through the postMessage application program interface, the rendering of the topology graph can be completed, thereby improving the rendering efficiency of the topology graph.

[0120] In step S24, when the topology map information does not meet the information requirement, the second page element is rendered on the main thread using the layout algorithm, and the first page element is rendered on the main thread to obtain a second rendering result;

[0121] The specific process is as described above and will not be repeated here.

[0122] The second rendering result may be, for example, a result obtained by the main thread rendering all page elements of the topology graph separately. The second in the second rendering result is used to distinguish it from other rendering results.

[0123] According to some embodiments, when the topology map information does not meet the information requirements, the second page element is rendered on the main thread using the layout algorithm, and the rendering of the first page element is performed on the main thread to obtain a second rendering result.

[0124] In step S25, based on the second rendering result, a graph visualization engine is called to complete the rendering of each topology graph in the topology graph set.

[0125] The specific process is as described above and will not be repeated here.

[0126] In one or related embodiments, when the topology map information does not meet the information requirements, the layout algorithm is used on the main thread to render the second page element, and the rendering of the first page element is performed on the main thread to obtain a second rendering result; according to the second rendering result, the graph visualization engine is called to complete the rendering of each topology map in the topology map set. Therefore, when the amount of data is small, there is no need to create a child thread, which can reduce the energy consumption required to create a child thread and improve system performance.

[0127] Figure 4 is a block diagram of a topology map rendering device according to an exemplary embodiment. Figure 4 , the topology map rendering device 400 includes:

[0128] The information acquisition unit 401 is used to acquire topology information of the topology map;

[0129] A result acquisition unit 402 is used to execute a JavaScript file on each sub-thread in at least one sub-thread to obtain an execution result when the topology map information meets the information requirement, and to render a first page element on a main thread to obtain a first rendering result, wherein the JavaScript file is generated by compiling a second page element corresponding to the topology map and a layout algorithm, wherein the second page element includes a layout class element, and the first page element is an element of the page element corresponding to the topology map except the second page element;

[0130] The topology map rendering unit 403 is used to call a graph visualization engine according to the execution result and the first rendering result to complete the rendering of the topology map.

[0131] According to some embodiments, the topology map rendering unit 403 is used to call the graph visualization engine according to the execution result and the first rendering result to complete the rendering of the topology map, specifically for:

[0132] Return the execution result to the main thread via the postMessage application program interface;

[0133] According to the execution result and the first rendering result, a graph visualization engine is called on the main thread to complete the rendering of the topology graph.

[0134] According to some embodiments, the topology map information includes operation duration, and the information acquisition unit 401, when used to acquire the topology map information of the topology map, is specifically used to:

[0135] Acquire a relevant data set of the topological graph, wherein the relevant data set includes node data and associated data;

[0136] In the case that the amount of data included in the relevant data set is greater than a data amount threshold, it is determined that the topology map information meets the information requirement.

[0137] According to some embodiments, the topology map information includes operation duration, and the information acquisition unit 401, when used to acquire the topology map information of the topology map, is specifically used to:

[0138] Obtain the total operation duration corresponding to each operation of the topology graph after rendering begins;

[0139] In the case that the operation duration is greater than the duration threshold, it is determined that the topology map information meets the information requirement.

[0140] According to some embodiments, the topology map information includes page fluency, and the information acquisition unit 401, when used to acquire the topology map information of the topology map, is specifically used to:

[0141] After the topology map starts to be rendered, the page fluency corresponding to the topology map is obtained once at a preset time interval;

[0142] When the page fluency is lower than the fluency threshold, it is determined that the topology map information meets the information requirement.

[0143] According to some embodiments, the topology map rendering unit 403 is further specifically configured to:

[0144] In the case that the topology map information does not meet the information requirement, the second page element is rendered using the layout algorithm on the main thread, and the first page element is rendered on the main thread to obtain a second rendering result;

[0145] According to the second rendering result, a graph visualization engine is called to complete the rendering of each topology graph in the topology graph set.

[0146] According to some embodiments, the result acquisition unit 402 is further specifically configured to:

[0147] The processing capability corresponding to each sub-thread in at least one sub-thread;

[0148] According to the processing capabilities corresponding to the sub-threads, the JavaScript files corresponding to the sub-threads are determined.

[0149] Regarding the device in the above embodiment, the specific manner in which each module performs operations has been described in detail in the embodiment of the method, and will not be elaborated here.

[0150] In some or related embodiments, an information acquisition unit is used to obtain topology information of a topology map; a result acquisition unit is used to execute a JavaScript file on each sub-thread in at least one sub-thread to obtain an execution result when the topology information meets the information requirements, and to execute rendering of a first page element on a main thread to obtain a first rendering result, wherein the JavaScript file is generated by compiling a second page element and a layout algorithm corresponding to the topology map, wherein the second page element includes a layout class element, and the first page element is an element of the page element corresponding to the topology map except the second page element; a topology rendering unit is used to call a graph visualization engine according to the execution result and the first rendering result to complete the rendering of the topology map. Therefore, when the amount of data is large, at least one child thread can be created so that the at least one child thread and the main thread can render the topology map in parallel, reducing the resource consumption when the main thread is idle due to using only at least one child thread, and reducing the situation where only the main thread is used to process large-scale data, resulting in a long rendering time of the topology map. At the same time, using at least one child thread and the main thread to render the topology map in parallel can reduce page freezes, browser failure to respond or long response time, improve the rendering efficiency of the topology map, reduce main thread congestion, improve system performance, and improve user experience.

[0151] Figure 5 is a block diagram of a network device 500 provided in an embodiment of the present disclosure. For example, the network device 500 may be provided as a network side device. Figure 5 The network device 500 includes a processing component 522, which further includes at least one processor, and a memory resource represented by a memory 532 for storing instructions executable by the processing component 522, such as an application. The application stored in the memory 532 may include one or more modules, each corresponding to a set of instructions. In addition, the processing component 522 is configured to execute instructions to perform any method of the aforementioned method applied to the network side device.

[0152] The network device 500 may also include a power supply component 527 configured to perform power management of the network device 500, a wired or wireless network interface 550 configured to connect the network device 500 to a network, and an input / output (I / O) interface 558. The network device 500 may operate based on an operating system stored in the memory 532, such as Windows Server TM, Mac OS X TM, Unix TM, Linux TM, Free BSD TM or the like.

[0153] Various implementations of the systems and techniques described above herein can be implemented in digital electronic circuit systems, integrated circuit systems, field programmable gate arrays (FPGAs), application specific integrated circuits (ASICs), application specific standard products (ASSPs), systems on chips (SOCs), load programmable logic devices (CPLDs), computer hardware, firmware, software, and / or combinations thereof. These various implementations can include: being implemented in one or more computer programs that can be executed and / or interpreted on a programmable system including at least one programmable processor, which can be a special purpose or general purpose programmable processor that can receive data and instructions from a storage system, at least one input device, and at least one output device, and transmit data and instructions to the storage system, the at least one input device, and the at least one output device.

[0154] The program code for implementing the method of the present disclosure may be written in any combination of one or more programming languages. These program codes may be provided to a processor or controller of a general-purpose computer, a special-purpose computer, or other programmable topology map rendering device, so that when the program code is executed by the processor or controller, the functions / operations specified in the flow chart and / or block diagram are implemented. The program code may be executed entirely on the machine, partially on the machine, partially on the machine as a stand-alone software package and partially on a remote machine, or entirely on a remote machine or server.

[0155] In the context of the present disclosure, a machine-readable medium may be a tangible medium that may contain or store a program for use by or in conjunction with an instruction execution system, device, or equipment. A machine-readable medium may be a machine-readable signal medium or a machine-readable storage medium. A machine-readable medium may include, but is not limited to, an electronic, magnetic, optical, electromagnetic, infrared, or semiconductor system, device, or equipment, or any suitable combination of the foregoing. A more specific example of a machine-readable storage medium may include an electrical connection based on one or more lines, a portable computer disk, a hard disk, a random access memory (RAM), a read-only memory (ROM), an erasable programmable read-only memory (EPROM or flash memory), an optical fiber, a portable compact disk read-only memory (CD-ROM), an optical storage device, a magnetic storage device, or any suitable combination of the foregoing.

[0156] To provide interaction with a user, the systems and techniques described herein can be implemented on a computer having: a display device (e.g., a CRT (cathode ray tube) or LCD (liquid crystal display) monitor) for displaying information to the user; and a keyboard and pointing device (e.g., a mouse or trackball) through which the user can provide input to the computer. Other types of devices can also be used to provide interaction with the user; for example, the feedback provided to the user can be any form of sensory feedback (e.g., visual feedback, auditory feedback, or tactile feedback); and input from the user can be received in any form (including acoustic input, voice input, or tactile input).

[0157] The systems and techniques described herein can be implemented in a computing system that includes backend components (e.g., as a data server), or a computing system that includes middleware components (e.g., an application server), or a computing system that includes frontend components (e.g., a user computer with a graphical user interface or a web browser through which a user can interact with implementations of the systems and techniques described herein), or a computing system that includes any combination of such backend components, middleware components, or frontend components. The components of the system can be interconnected by any form or medium of digital data communication (e.g., a communication network). Examples of communication networks include: a local area network (LAN), a wide area network (WAN), the Internet, and a blockchain network.

[0158] A computer system may include a client and a server. The client and the server are generally remote from each other and usually interact through a communication network. The relationship between the client and the server is generated by computer programs running on the corresponding computers and having a client-server relationship with each other. The server may be a cloud server, also known as a cloud computing server or cloud host, which is a host product in the cloud computing service system to solve the defects of difficult management and weak business scalability in traditional physical hosts and VPS services ("Virtual Private Server", or "VPS" for short). The server may also be a server of a distributed system, or a server combined with a blockchain.

[0159] It should be understood that the various forms of processes shown above can be used to reorder, add or delete steps. For example, the steps recorded in this disclosure can be executed in parallel, sequentially or in different orders, as long as the desired results of the technical solutions disclosed in this disclosure can be achieved, and this document does not limit this.

[0160] The above specific implementations do not constitute a limitation on the protection scope of the present disclosure. It should be understood by those skilled in the art that various modifications, combinations, sub-combinations and substitutions can be made according to design requirements and other factors. Any modification, equivalent substitution and improvement made within the spirit and principle of the present disclosure shall be included in the protection scope of the present disclosure.

Claims

1. A topology map rendering method, characterized in that: include: Get topology information of the topology map; In the case where the topology map information meets the information requirements, a JavaScript file is executed on each sub-thread in at least one sub-thread to obtain an execution result, and rendering of a first page element is executed on the main thread to obtain a first rendering result, wherein the JavaScript file is generated by compiling a second page element corresponding to the topology map and a layout algorithm, wherein the second page element includes a layout class element, and the first page element is an element of the page element corresponding to the topology map except the second page element; According to the execution result and the first rendering result, a graph visualization engine is called to complete the rendering of the topology graph.

2. The method according to claim 1, characterized in that The calling of a graph visualization engine according to the execution result and the first rendering result to complete the rendering of the topology graph includes: Return the execution result to the main thread via the postMessage application program interface; According to the execution result and the first rendering result, a graph visualization engine is called on the main thread to complete the rendering of the topology graph.

3. The method according to claim 1, characterized in that The topology map information includes operation duration, and the topology map information of the topology map obtained includes: Acquire a relevant data set of the topological graph, wherein the relevant data set includes node data and associated data; In the case that the amount of data included in the relevant data set is greater than a data amount threshold, it is determined that the topology map information meets the information requirement.

4. The method according to claim 1, characterized in that: The topology map information includes operation duration, and the topology map information of the topology map obtained includes: Obtain the total operation duration corresponding to each operation of the topology graph after rendering begins; In the case that the operation duration is greater than the duration threshold, it is determined that the topology map information meets the information requirement.

5. The method according to claim 1, characterized in that The topology map information includes page fluency, and the topology map information of the topology map is obtained, including: After the topology map starts to be rendered, the page fluency corresponding to the topology map is obtained once at a preset time interval; When the page fluency is lower than the fluency threshold, it is determined that the topology map information meets the information requirement.

6. The method according to claim 1, characterized in that The method further comprises: In the case that the topology map information does not meet the information requirement, the second page element is rendered using the layout algorithm on the main thread, and the first page element is rendered on the main thread to obtain a second rendering result; According to the second rendering result, a graph visualization engine is called to complete the rendering of each topology graph in the topology graph set.

7. The method according to claim 1, characterized in that The method further comprises: The processing capability corresponding to each sub-thread in at least one sub-thread; According to the processing capabilities corresponding to the sub-threads, the JavaScript files corresponding to the sub-threads are determined.

8. A topology map rendering device, characterized in that: include: An information acquisition unit, used to acquire topology information of the topology map; A result acquisition unit is used to execute a JavaScript file on each sub-thread in at least one sub-thread to obtain an execution result when the topology map information meets the information requirement, and to render a first page element on a main thread to obtain a first rendering result, wherein the JavaScript file is generated by compiling a second page element corresponding to the topology map and a layout algorithm, wherein the second page element includes a layout class element, and the first page element is an element of the page element corresponding to the topology map except the second page element; A topology map rendering unit is used to call a graph visualization engine according to the execution result and the first rendering result to complete the rendering of the topology map.

9. A network device, characterized in that: include: processor; a memory for storing instructions executable by the processor; The processor is configured to execute the instructions to implement the topology map rendering method as described in any one of claims 1 to 7.

10. A storage medium, when instructions in the storage medium are executed by a processor of a network device, enables the network device to execute the topology map rendering method according to any one of claims 1 to 7.

Images