High-performance graph rendering in browsers

• US 10,628,980 B2
• Filed: 04/27/2018
• Issued: 04/21/2020
• Est. Priority Date: 10/30/2017
• Status: Active Grant

• Current Assignee: Nutanix Incorporated
• Original Assignee: Nutanix Incorporated
• Inventors: Bhatt, Rajesh P., Kakani, Deepa Tuteja, Kwawu, Jacqueline, Chen, Ken, Lee, Ting Suk
• Primary Examiner(s): Le, Michael
• Application Number:
  US15/965,524
• Publication Number:
  US 20190130613A1
• Time in Patent Office: 725 Days
• CPC Class Codes: G06F 16/9024 Graphs; Linked lists G06F16/9027 takes precedence
• CPC Class Codes: G06F 16/904 Browsing; Visualisation therefor for navigating the web G06F16/954; browsing optimisation for the web G06F16/957
• CPC Class Codes: G06F 40/143 Markup, e.g. Standard Generalized Markup Language [SGML] or Document Type Definition [DTD]
• CPC Class Codes: G06F 8/34 Graphical or visual programming
• CPC Class Codes: G06F 8/41 Compilation
• CPC Class Codes: G06T 11/206 Drawing of charts or graphs
• CPC Class Codes: G06T 13/80 2D [Two Dimensional] animation, e.g. using sprites

Abstract

Systems for rendering graphs in browsers. A method embodiment for generating and manipulating a high-performance graph in a browser commences by receiving a set of node descriptions of the graph as well as a set of edge descriptions of the graph. In a first display layer, one or more HTML primitives are assigned to the individual ones of the set of nodes. In a second display layer, one or more non-HTML display graphical elements are assigned to the individual ones of the set of edges. The edges and nodes are sorted into a painting order based on size. The first layer and the second layer are combined into an HTML document that comprises at least some of the HTML primitives that correspond to the nodes as well as at least some of the non-HTML display graphical elements that correspond to the edges of the graph. The browser renders the graph.

Claims

1. A method comprising:

receiving a set of descriptions for a node and an edge in a graph for rendering the graph by separately processing nodes in a first layer from edges in a second layer and superimposing the first layer and the second layer on top of each other, wherein

the first layer including the node and the second layer including the edge are separately processed;

rendering the graph at least by;

processing the first layer at least by assigning an HTML (hypertext markup language) graphic primitive to the node in the first layer;

processing the second layer at least by assigning a non-HTML graphic primitive to the edge in the second layer;

superimposing the first layer and the second layer into a superimposed layer; and

sending the superimposed layer for rendering the graph.

2. The method of claim 1, wherein the set of descriptions includes descriptions for a combination of single nodes and compound nodes.

3. The method of claim 1, wherein the set of descriptions includes an edge description that further includes directionality of the edge.

4. The method of claim 1, wherein multiple edges corresponding to the set of descriptions respectively correspond to respective quantity measures.

5. The method of claim 4, wherein a first edge with a first quantity measure smaller than a second quantity of a second edge is displayed on top of the second edge in a user interface.

6. The method of claim 4, wherein the multiple edges corresponding to the set of descriptions correspond to an amount of backup traffic or an amount of network traffic.

7. The method of claim 1, further comprising assigning callback code or an animation to at least one of the node or the edge.

8. The method of claim 1, wherein the non-HTML graphic primitive includes a scalable vector graphic component, and the second layer only includes non-HTML graphic primitives.

9. The method of claim 1, wherein the node first layer comprises only nodes but not edges in the graph, and the second layer comprises only the edges but not the nodes in the graph.

10. The method of claim 9, wherein the node characteristic corresponds to an attribute of a virtual machine.

11. A non-transitory computer readable medium having stored thereon a sequence of instructions which, when stored in memory and executed by a processor, causes the processor to perform a set of acts, the set of acts comprising:

receiving a set of descriptions for a node and an edge in a graph for rendering the graph by separately processing nodes in a first layer from edges in a second layer and superimposing the first layer and the second layer on top of each other, wherein

the first layer including the node and the second layer including the edge are separately processed;

rendering the graph at least by;

processing the first layer at least by assigning an HTML (hypertext markup language) graphic primitive to the node in the first layer;

processing the second layer at least by assigning a non-HTML graphic primitive to the edge in the second layer;

superimposing the first layer and the second layer into a superimposed layer; and

sending the superimposed layer for rendering the graph.

12. The non-transitory computer readable medium of claim 11, wherein the set of descriptions includes descriptions for a combination of single nodes and compound nodes.

13. The non-transitory computer readable medium of claim 11, wherein the set of descriptions includes an edge descriptions that further include directionality of the edge.

14. The non-transitory computer readable medium of claim 11, wherein multiple edges corresponding to the set of descriptions respectively correspond to respective quantity measures.

15. The non-transitory computer readable medium of claim 14, wherein a first edge with a first quantity measure smaller than a second quantity of a second edge is displayed on top of the second edge in a user interface.

16. The non-transitory computer readable medium of claim 14, wherein multiple edges corresponding to the set of descriptions correspond to an amount of backup traffic or an amount of network traffic.

17. The non-transitory computer readable medium of claim 11, further comprising instructions which, when stored in the memory and executed by the processor, causes the processor to perform acts of assigning callback code or an animation to at least one of the node or the edge.

18. The non-transitory computer readable medium of claim 11, wherein the non-HTML graphic primitive includes a scalable vector graphic component, and the second layer only includes non-HTML graphic primitives.

19. A system comprising:

a non-transitory storage medium having stored thereon a sequence of instructions; and

a processor that executes the sequence of instructions to cause the processor to perform a set of acts, the set of acts comprising,

receiving a set of descriptions for a node and an edge in a graph for rendering the graph by separately processing nodes in a first layer from edges in a second layer and superimposing the first layer and the second layer on top of each other, wherein

the first layer including the node and the second layer including the edge are separately processed;

rendering the graph at least by;

processing the first layer at least by assigning an HTML (hypertext markup language) graphic primitive to the node in the first layer;

processing the second layer at least by assigning a non-HTML graphic element to the edge in the second layer;

superimposing the first layer and the second layer into a superimposed layer; and

sending the superimposed layer for rendering the graph.

20. The system of claim 19, wherein the set of descriptions comprises descriptions for a combination of single nodes and compound nodes.