Method, device and storage medium for achievign graph visualization graphql editor

Abstract

Embodiments of the present application provide a method, system and storage medium for achieving graph visualization GraphQL editor. The method includes: pre-converting GraphQL schema to a knowledge graph with object types in the GraphQL schema as nodes and associations between the object types as edges; displaying the knowledge graph on a GraphQL editor; building a hierarchy tree corresponding to a GraphQL operation based on a select operation on a node of the knowledge graph, and displaying the hierarchy tree on the GraphQL editor; generating GraphQL statements according to the hierarchy tree based on preset statement generation mechanism.. The technical solutions of the present application can achieve a graph visualization GraphQL editor.

Description

METHOD, DEVICE AND STORAGE MEDIUM FOR ACHIEVIGN GRAPH VISUALIZATION GRAPHQL EDITORFIELD

[0001] The present application relates to intelligent manufacturing technologies, and more particularly, to a method, system and storage medium for achieving graph visualization GraphQL editor.BACKGROUND

[0002] With the function of Core and Configurator in the Industrial Information Hub (IIH) , each of connectors connected to the IIH can be configured and send data seamlessly to different integration layers. Data of OPC UA models can be directly published in the IIH. Or, data of the connectors can be directly, or via the IE Data bus in the IIH, published in the IIH and then be assigned to variables in an OPC UA-based asset model.

[0003] The IIH provides an option of automatically converting data points from a device into a semantic data model. This data model can then be queried via GraphQL queries in order to find the data again.

[0004] Therefore, it is necessary to find a powerful tool which leans exactly what data can be requested from the GraphQL APIs without leaving the GraphQL editor.SUMMARY

[0005] According to embodiments of the present application, a method, system and storage medium for achieving graph visualization GraphQL editor are provided to obtain a powerful tool which leans exactly what data can be requested without leaving the GraphQL editor.

[0006] The method for achieving graph visualization GraphQL editor provided by embodiments of the present application includes: pre-converting GraphQL schema to a knowledge graph with object types in the GraphQL schema as nodes and associations between object types as edges; displaying the knowledge graph on a GraphQL editor; building a hierarchy tree corresponding to a GraphQL operation based on a select operation on a node of the knowledge graph, and displaying the hierarchy tree on the GraphQL editor;  generating GraphQL statements according to the hierarchy tree based on preset statement generation mechanism.

[0007] In an example, the method further comprising: displaying generated GraphQL statements on the GraphQL editor.

[0008] In an example, wherein building a hierarchy tree corresponding to a GraphQL operation based on a click operation on a node of the knowledge graph comprises: when receiving a click operation on a node of the knowledge graph, determining the node as a source node of a hierarchy tree; when receiving a double click operation on a node of the knowledge graph, determining the node as a target node; when there exists the source node and the target node is a child node of the source node, adding the target node in the hierarchy tree; when there is no the source node and the target node is a child node of a root node, taking the root node as a source node of a hierarchy tree, and adding the target node in the hierarchy tree; when there exists the source node and the target node is not a child node of the source node, calculating all optional paths between the target node and the source node, and displaying calculated optional paths on the GraphQL editor, adding each node on an optional path selected by a user in the hierarchy tree; when there is on the source node and the target node is not a child node of the root node, taking the root node as a source node of a hierarchy tree, calculating all optional paths between the target node and the source node, and displaying calculated optional paths on the GraphQL editor, adding each node on an optional path selected by a user in the hierarchy tree.

[0009] In an example, further comprising: setting a filter condition for the hierarchy tree according to a filter condition setting operation on the hierarchy tree; and updating the GraphQL statements based on the filter condition.

[0010] In an example, further comprising: setting at least one property of a node according to a received property editing operation on a node in the hierarchy tree; and updating the GraphQL statements according to the at least one property.

[0011] In an example, wherein GraphQL statements comprises GraphQL query statements; the further comprising: receiving query results after the GraphQL statements are executed, and displaying the query results in the form of a visual tree graph on the GraphQL editor.

[0012] In an example, further comprising: receiving a GraphQL mutation editing operation through a GraphQL mutation editing page which is jumped to by clicking on corresponding block in the visual tree graph; and generating GraphQL mutation statements according to the GraphQL mutation editing operation.

[0013] The system for achieving graph visualization GraphQL editor provided by embodiments of the present application includes: a first module, to pre-convert GraphQL schema to a knowledge graph with object types in the GraphQL schema as nodes and associations between the object types as edges, and to display the knowledge graph on a GraphQL editor; a second module, to build a hierarchy tree corresponding to a GraphQL operation based on a select operation on a node of the knowledge graph, and to display the hierarchy tree on the GraphQL editor; and a third module, to generate GraphQL statements according to the hierarchy tree based on preset statement generation mechanism.

[0014] In an example, further comprising: a fourth module, to set a filter condition for the hierarchy tree according to a filter condition setting operation on the hierarchy tree; the third module is further to update the GraphQL statements based on the filter condition.

[0015] In an example, further comprising: a fifth module, to set at least one property of a node according to a received property editing operation on a node in the hierarchy tree; the third module is further to update the GraphQL statements according to the at least one property.

[0016] In an example, further comprising: a sixth module, to receive query results after the GraphQL statements are executed, and display the query results in the form of a visual tree graph on the GraphQL editor; and a seventh module, to receive a GraphQL mutation editing operation through a GraphQL mutation editing page which is jumped to by clicking on corresponding block in the visual tree graph; the third module is further to generate GraphQL mutation statements according to the GraphQL mutation editing operation.

[0017] Another system for achieving graph visualization GraphQL editor provided by embodiments of the present application includes: at least one memory, to store a computer program; and at least one processor, to call the computer program stored in the at least one memory to perform above mentioned method for achieving graph visualization GraphQL editor.

[0018] A non-transitory computer-readable storage medium on which a computer program is stored, the computer program is to be executed by a processor to implement above mentioned method for achieving graph visualization GraphQL editor.

[0019] It can be seen from the above technical solutions that in the embodiment of the application, because the GraphQL schema is pre-converted to a knowledge graph with object types in the GraphQL schema as nodes and associations between object types as edges, then a user can lean exactly what data can be requested and can quickly construct legitimate GraphQL statements by performing selection operation on the knowledge graph without leaving the GraphQL editor. In addition, the knowledge graph simplifies the complex relationships of information model and reduces the difficulty of generating GraphQL statements through interaction.BRIEF DESCRIPTION OF THE DRAWINGS

[0020] For a better understanding of the present application, reference should be made to the Detailed Description below, in conjunction with the following drawings in which like reference numerals refer to corresponding parts throughout the figures.

[0021] Figure 1 is a flow chat diagram illustrating a method for achieving graph visualization GraphQL editor according to an embodiment of the application.

[0022] Figure 2 is a schematic diagram illustrating partial knowledge graph according to an example of the present application.

[0023] Figure 3A to figure 3E are schematic diagrams illustrating a process for building a hierarchy tree according to an example of the present application.

[0024] Figure 4 is a schematic diagram illustrating a hierarchy tree and corresponding GraphQL query statements according to an example of the present application.

[0025] Figure 5 is a schematic diagram illustrating query results in the form of a visual tree graph according to an example of the present application.

[0026] Figure 6 is a schematic diagram illustrating a GraphQL mutation editing page, GraphQL mutation statements and modification status according to an example of the present application.

[0027] Figure 7 is a schematic diagram illustrating the linkage mechanism based on an event bus according to an example of the present application.

[0028] Figure 8 is a schematic diagram illustrating a system for achieving graph visualization GraphQL editor according to an embodiment of the present application.

[0029] Figure 9 is a schematic diagram illustrating another system for achieving graph visualization GraphQL editor according to an embodiment of the present application.

[0030] The reference numerals are as follows: DETAILED DESCRIPTION

[0031] In embodiments of the application, it is considered that based on GraphQL statements, most GraphQL Integrated development environments (IDEs) can run GraphQL queries, mutations and subscriptions , prettify or minify queries, export collections of queries, and so on. However, these IDEs still have the following issues: there is no GraphQL IDE which can achieve the visualization of GraphQL schema. Like Altair or GraphiQL, it is needed for users to continuously click shortcut button to obtain next level type definition. These IDEs have certain requirements for users' IT and GraphQL technology, which forms a threshold for users to the uses IDE to write legitimate GraphQL statements.

[0032] Therefore, a solution for achieving a GraphQL editor based on graph visualization engine is provided in embodiments of the application. The solution can generate GraphQL statements automatically based on visual operations on knowledge graph of the user, namely it is not necessary for the user to directly input GraphQL statements, even if the user has no knowledge of GraphQL syntax, GraphQL operations can be performed for the user.

[0033] Reference will now be made in detail to examples, which are illustrated in the accompanying drawings. In the following detailed description, numerous specific details are set forth in order to provide a thorough understanding of the present application. Also, the figures are illustrations of an example, in which assemblies shown in the figures are not necessarily essential for implementing the present application. In other instances, well-known assemblies, components, and circuits have not been described in detail so as not to unnecessarily obscure aspects of the examples.

[0034] Figure 1 is a flow chat diagram illustrating a method for achieving graph visualization GraphQL editor according to an embodiment of the application. As shown in figure 1, in this embodiment, the method may include the following processes.

[0035] At block 101, GraphQL schema is converted to a knowledge graph with object types in the GraphQL schema as nodes and associations between the object types as edges. The most basic components of a GraphQL schema are object types, which just represent a kind of object can be fetched from a service, and what fields it has.

[0036] For example, figure 2 is a schematic diagram illustrating partial knowledge graph according to an example of the present application. As shown in figure 2, the knowledge  graph may include: node 1 with a label “query” , node 2 with a label “UserType” , edge 1-2 (whose source is node 1, and target is node 2) with a label “findUser” , node 3 with a label “LoadType” , edge 1-3 with a label “findLoad” , node 4 with a label “GearType” , edge 1-4 with a label “findGear” , node 5 with a label “MotorType” , edge 1-5with a label “findMotor” , edge 4-5with a label “motorIdentifier” , edge 5-4with a label “gearIdentifier” , node 6 with a label “OPCUAVariable” , edge 1-6 with a label “queryVariable” , node 7 with a label “PowerTrainType” , edge 1-7 with a label “findPowerTrain” , edge 7-4 with a label “gearIdentifier” , edge 7-5 with a label “motorIdentifier” , edge 7-7 with a label “powerTrainIdentifier” , node 8 with a label “AxisType” , edge 1-8 with a label “findAxis” , edge 7-8 with a label “AxisIdentifier” , edge 8-7 with a label “powerTrainIdentifier” , node 9 with a label “TaskControlType” , edge 1-9 with a label “findTaskControl” , node 10 with a label “MotionDeviceType” , edge 1-10 with a label “findMotionDevice” , edge 9-10 with a label “motionDeviceldentifier” , node 11 with a label “ControllerType” , edge 1-11 with a label “findController” , edge 11-10 with a label “motionDeviceldentifier” , node 12 with a label “MotionDeviceSystemType” , edge 1-12with a label “findMotionDeviceSystem” , node 13 with a label “SafetyStateType” , edge 1-13with a label “findSafetyState” , edge 11-13with a label “SafetyStateIdentifier” , node 14 with a label “EmergencyStopFunctionType” , edge 1-14with a label “findEmergencyStopFunction” , node 15 with a label “ProtectiveStopFunctionType” , edge 1-15with a label “findProtectiveStopFunction” , node 16 with a label “parameterSetMotorType” , edge 5-16with a label “parameterSet” , node 17 with a label “Mutation” , edge 17-6with a label “writeVariables” , node 18 with a label “ParameterSetAxisType” , edge 8-18with a label “parameterSet” , node 19 with a label “AdditionalLoadListType” , edge 8-19with a label “additionalLoad” , node 20 with a label “ParameterSetTaskControlType” , edge 9-20with a label “parameterSet” , node 21 with a label “PowerTrainsListType” , edge 10-21with a label “powerTrains” , edge 21-7with a label “powerTrainIdentifier” , node 22 with a label “AxesListType” , edge 10-22with a label “axes” , edge 22-8with a label “axesIdentifier” , node 23 with a label “FlangeLoadListType” , edge 10-23with a label “flangeLoad” , node 24 with a label “ParameterSetMotionDeviceType” , edge 10-24with a label “parameterSet” , node 25 with a label “AdditionalComponentsListType” , edge 10-25with a label “additionalComponents” , node 26 with a label “TaskControlsListType” , edge 11-26with a label “taskControls” , node 27with a label “MotionDevicesListType” , edge 12-27with a label “motionDevices” , edge 27-10 with a label “motionDeviceIdentifier” , node 28 with a label “ComponentsListType” , edge 11-28with a label “components” , node 29 with a label “ParameterSetControllerType” , edge 11-29with a  label “parameterSet” , node 30 with a label “SoftwareListType” , edge 11-30with a label “software” , node 31 with a label “ControllersListType” , edge 12-31with a label “controllers” , edge 31-11with a label “controllerIdentifier” , node 32 with a label “CurrentUsersListType” , edge 11-32with a label “currentUsers” , node 33with a label “SafetyStatesListType” , edge 12-33with a label “safetyStates” , edge 33-13with a label “safetyStateIdentifier” , node 34 with a label “ParameterSetSafetystateType” , edge 13-34 with a label “parameterSet” , node 35 with a label “EmergencyStopFunctionsListType” , edge 13-35 with a label “emergencyStopFunctions” , edge 35-15 with a label “emergencyStopFunctionIdentifier” , node 36 with a label “ProtectiveStopFunctionsListType” , edge 13-36 with a label “protectiveStopFunctions” , edge 36-16 with a label “protectiveStopFunctionIdentifier” , node 37 with a label “ComponentType” , edge 25-37 with a label “additionalComponentIdentifier” , edge 28-37 with a label “componentIdentifier” , node 38 with a label “SoftwareType” , edge 30-38 with a label “softwareIdentifier” . Due to limited display space, the labels of nodes and edges are represented by corresponding numbers in figure 2.

[0037] At block 102, the knowledge graph is displayed on a GraphQL editor by drawing the knowledge graph on a graph canvas which is loaded in a HTML container created in the GraphQL editor.

[0038] In an example, the GraphQL editor may be achieved by adopting G6-graph, since the data including nodes and edges for G6 is in JSON format, it is necessary to convert the schema field to data structure required for G6. In the example, a HTML container may be created for a graph canvas, and a canvas tag is appended to the HTML container, namely, a graph canvas is loaded in the HTML container, and then the knowledge graph is drawn on the graph canvas.

[0039] At block 103, a hierarchy tree corresponding to a GraphQL operation is built and displayed on the GraphQL editor based on a select operation on a node of the knowledge graph.

[0040] In an example, there may be two manners to determine the path of the hierarchy tree. The first one: when the user double clicks on a node which is a child node of a selected node or a root node, the node will be directly added to the hierarchy tree as next path. The second one: when the user double click on a node which is not a child node of the selected node or the root node, all optional paths between the node and the selected node / the root node  will be calculated based on a path algorithm, and a suitable path selected by the user will be determined the path of the hierarchy tree, the hierarchy tree will be built based on the suitable path selected by the user. For example, when a click operation on a node of the knowledge graph is received, the node is determined as a source node of a hierarchy tree; when a double click operation on a node of the knowledge graph is received, the node is determined as a target node; when there exists the source node and the target node is a child node of the source node, the target node is added in the hierarchy tree; when there is no the source node and the target node is a child node of a root node, the root node is taken as a source node of a hierarchy tree, and the target node is added in the hierarchy tree; when there exists the source node and the target node is not a child node of the source node, all optional paths between the target node and the source node are calculated and displayed on the GraphQL editor, each node on an optional path selected by a user is added in the hierarchy tree; when there is on the source node and the target node is not a child node of the root node, taking the root node as a source node of a hierarchy tree, all optional paths between the target node and the source node are calculated and displayed on the GraphQL editor, each node on an optional path selected by a user is added in the hierarchy tree.

[0041] In addition, the user can edit a filter condition for the hierarchy tree to filter returned query results of GraphQL statement by performing a filter condition setting operation on the hierarchy tree. Correspondingly, the method may further include: a filter condition is set for the hierarchy tree according to a received filter condition setting operation on the hierarchy tree.

[0042] Furthermore, the user may edit properties of the node in the hierarchy tree. Correspondingly, the method may further include: at least one property of a node is set according to a received property editing operation on a node in the hierarchy tree.

[0043] Figure 3A to figure 3E are schematic diagrams illustrating a process for building a hierarchy tree according to an example of the present application. As shown in figure 3A, if the node “Query” in knowledge graph is selected as a source node of a hierarchy tree, when the node A in knowledge graph is double clicked, node A is directly added in the hierarchy tree as shown in figure 3C; when the node D in knowledge graph 31 is double clicked, two optional paths are shown to the user as shown in figure 3B, one path is Query→B→D, the other path is Query→C→D, if the user selects the path “Query→C→D” , nodes C and D are  added in the hierarchy tree as shown in figure 3C. A filter condition may be set for the hierarchy tree as shown in figure 3D. Properties of a node may be set as shown in figure 3E.

[0044] At block 104, GraphQL statements are generated according to the hierarchy tree based on preset statement generation mechanism.

[0045] In an example, there may be multiple manners for generating the GraphQL statements according to the hierarchy tree. Three manners will be described as follows.

[0046] The first manner: when the hierarchy tree is built, GraphQL statements corresponding to the hierarchy tree may be generated and displayed on the GraphQL editor simultaneously based on a linkage mechanism.

[0047] In an example, the GraphQL statements may be GraphQL query statements, for instance, figure 4 is a schematic diagram illustrating a hierarchy tree and corresponding GraphQL query statements according to an example of the present application.

[0048] As shown in figure 4, when the hierarchy tree include node 1 “Qupery” -node 10 “MotionDeviceType” -node 21 “PowerTrainsListType” -node 7 “PowerTrainType” and node 7 “PowerTrainType” , the GraphQL query statements may include the following content.

[0049] The second manner: when the hierarchy tree is built, GraphQL statements corresponding to the hierarchy tree may be generated simultaneously based on a linkage mechanism, but the GraphQL statements may be not displayed on the GraphQL editor.

[0050] Regarding the first manner and the second manner, when a filter condition is set for the hierarchy tree, the GraphQL statements are updated immediately based on the filter condition. The filter conditions will be converted into parameters in GraphQL statements,  which like the query parameters and URL segments in a request at the REST system. When at least one property of a node is edited, the GraphQL statements are updated immediately. Change of the properties of nodes in the hierarchy tree directly affects the fields of the GraphQL statements. It can be seen, by further editing the properties of a node in the hierarchy tree and setting filter conditions of the sub level root node, the user could get the expected GraphQL query statements and get the expected data structure after the GraphQL query statements are executed.

[0051] The third manner: after the hierarchy tree is built and an instruction for generating GraphQL statements is triggered, statements corresponding to the hierarchy tree may be generated, and then the GraphQL statements may be or may be not displayed on the GraphQL editor.

[0052] In GraphQL statements, every field and nested object can get its own set of arguments, which makes GraphQL be a complete replacement of multiple API fetches.

[0053] The hierarchy tree may adopt a combination pattern and stored in an angular global service. In combination pattern, objects are composed into a tree structures to represent part-whole hierarchies, which lets clients treat individual object and compositions of objects uniformly. Therefore, GraphQL statements may be generated from the root nodes of the hierarchy tree by using iterative algorithm.

[0054] After the GraphQL statements are generated, the GraphQL statements may be executed to obtain corresponding query results. In an embodiment of the present application, the query results can be also visualized. Correspondingly, the method may further include the following processes.

[0055] At block 105, the GraphQL statements are executed and corresponding query results are received and displayed on the GraphQL editor.

[0056] In an example, after an execute button is clicked on to execute the GraphQL statements, the query results are obtained and displayed on the GraphQL editor as shown in figure 4 and figure 5. In figure 4, the query results are displayed in the form of GraphQL statements. In figure 5, the query results are displayed in the form of a visual tree graph. The two displaying manner can be switched by clicking on different buttons on the GraphQL editor.

[0057] In another example, the query results are only displayed on the GraphQL editor as shown in figure 5, namely, the query results are only displayed in the form of a visual tree graph.

[0058] At block 106, a GraphQL mutation editing operation is received through a GraphQL mutation editing page which is jumped to by clicking on a corresponding block in the visual tree graph.

[0059] In an example, when the GraphQL mutation editing operation is received, GraphQL mutation statements are generated and displayed on the GraphQL editor simultaneously based on a linkage mechanism. In another example, when the GraphQL mutation editing operation is received, GraphQL mutation statements are generated simultaneously based on a linkage mechanism, but not displayed on the GraphQL editor. In yet another example, GraphQL mutation statements are generated after the GraphQL mutation editing operation is received and an instruction for generating GraphQL statements is triggered, GraphQL mutation statements are generated.

[0060] Figure 6 is a schematic diagram illustrating a GraphQL mutation editing page, GraphQL mutation statements and modification status according to an example of the present application. In the example, a GraphQL mutation editing page is jumped to by clicking on corresponding block in the visual tree graph. As shown in Figure 6, after the input value is inputted, GraphQL mutation statements will be automatically generated.

[0061] At block 107, the GraphQL mutation statements are executed and a modification result is received.

[0062] As shown in Figure 6, after an execute button is clicked to execute the GraphQL mutation statement, the status of this modification can be obtained and displayed on the GraphQL editor.

[0063] In addition, when the OPC UA information is subscribed by a user, the query operation for querying the data, the mutation operation for modifying the data and data change result will be sent to the user based on a linkage mechanism.

[0064] To achieve the linkage mechanism, an event bus may be used to perform event transmission among angular global services and various components. Event bus may be  implemented by RxJS, which is a library for composing asynchronous and event-based programs by using observable sequences.

[0065] Figure 7 is a schematic diagram illustrating the linkage mechanism based on an event bus according to an example of the present application. As shown in figure 7, the linkage mechanism is achieved among a graph view component 71 for generating and displaying the knowledge graph, a tree graph component 72 for generating and displaying the hierarchy tree, a code view component 73 for generating and displaying the GraphQL statements including GraphQL query statements and GraphQL mutation statements, a node edit component 74 for editing properties of a node and a filter edit component 75 for editing filter condition for the hierarchy tree through an event bus 76.

[0066] Event bus also enables a subscriber to register with and receive notifications from a provider. The subscriber registers with the provider, and whenever a predefined condition, event, or state change occurs, the provider automatically notifies all subscribers.

[0067] The method for achieving graph visualization GraphQL editor in embodiments of the application is described in detail above, and the system for achieving graph visualization GraphQL editor in embodiments of the application is described in detail below. The system for achieving graph visualization GraphQL editor in embodiments of the application can be used to implement the method for achieving graph visualization GraphQL editor in embodiments of the application. For details not disclosed in system embodiments of the application, please refer to the corresponding description in method embodiments of the application.

[0068] Figure 8 is a schematic diagram illustrating a system for achieving graph visualization GraphQL editor according to an embodiment of the present application. As shown in figure 8, the system may include a first module 801, a second module 802, and a third module 803.

[0069] The first module 801 is configured to pre-convert GraphQL schema to a knowledge graph with object types in the GraphQL schema as nodes and associations between the object types as edges, and to display the knowledge graph on a GraphQL editor.

[0070] The second module 802 is configured to build a hierarchy tree corresponding to a GraphQL operation based on a select operation on a node of the knowledge graph, and to display the hierarchy tree on the GraphQL editor.

[0071] The third module 803 is configured to generate GraphQL statements according to the hierarchy tree based on preset statement generation mechanism.

[0072] Corresponding to the method as shown in figure 1, in an example, the system may further include a fourth module 804, which is configured to set a filter condition for the hierarchy tree according to a filter condition setting operation on the hierarchy tree. Correspondingly, the third module 803 is further to update the GraphQL statements based on the filter condition.

[0073] Corresponding to the method as shown in figure 1, in an example, the system may further include a fifth module 805, which is configured to set at least one property of a node according to a received property editing operation on a node in the hierarchy tree. Correspondingly, the third module 803 is further to update the GraphQL statements according to the at least one property.

[0074] Corresponding to the method as shown in figure 1, in an example, the system may further include a sixth module 806, which is configured to receive query results after the GraphQL statements are executed, and display the query results in the form of a visual tree graph on the GraphQL editor; and a seventh module 807, which is configured to receive a GraphQL mutation editing operation through a GraphQL mutation editing page which is jumped to by clicking on corresponding block in the visual tree graph. Correspondingly, the third module 803 is further to generate GraphQL mutation statements according to the GraphQL mutation editing operation.

[0075] In an example, the first module 801 to the seventh module 807 may achieve a linkage mechanism through an event bus.

[0076] In fact, the system for achieving graph visualization GraphQL editor provided by this embodiment of the present application may be specifically implemented in various manners. For example, the system for achieving graph visualization GraphQL editor may be compiled, by using an application programming interface that complies with a certain  regulation, as a plug-in that is installed in an intelligent terminal, or may be encapsulated into an application program for a user to download and use.

[0077] When compiled as a plug-in, the system for achieving graph visualization GraphQL editor may be implemented in various plug-in forms such as ocx, dll, and cab. The system for achieving graph visualization GraphQL editor provided by this embodiment of the present application may also be implemented by using a specific technology, such as a Flash plug-in technology, a RealPlayer plug-in technology, an MMS plug-in technology, a MIDI staff plug-in technology, or an ActiveX plug-in technology.

[0078] The method for achieving graph visualization GraphQL editor provided by this implementation manner of the present application may be stored in various storage mediums in an instruction storage manner or an instruction set storage manner. These storage mediums include, but are not limited to: a floppy disk, an optical disc, a DVD, a hard disk, a flash memory, a USB flash drive, a CF card, an SD card, an SDHC card, an MMC card, an SM card, a memory stick, and an xD card.

[0079] Moreover, it should be clear that an operating system operated in a computer can be made, not only by executing program code read by the computer from a storage medium, but also by using an instruction based on the program code, to implement some or all actual operations, so as to implement functions of any embodiment in the foregoing embodiments.

[0080] For example, figure 9 is a schematic diagram illustrating another system for achieving graph visualization GraphQL editor according to an embodiment of the present application. The system may be used to perform the method shown in figure 1, or to implement the system shown in figure 8. As shown in figure 9, the system may include at least one memory 91 and at least one processor 92. In addition, some other components may be included, such as communication port, input / output controller, network communication interface, etc. These components communicate through bus 93, etc.

[0081] At least one memory 91 is configured to store a computer program. In one example, the computer program can be understood to include various modules of the system shown in figure 8. In addition, at least one memory 91 may store an operating system or the like. Operating systems include but are not limited to: Android operating system, Symbian operating system, windows operating system, Linux operating system, etc.

[0082] At least one processor 92 is configured to call the computer program stored in at least one memory 91 to perform a method for achieving graph visualization GraphQL editor described in embodiments of the present application. The processor 92 can be CPU, processing unit / module, ASIC, logic module or programmable gate array, etc. It can receive and send data through the communication port.

[0083] The I / O controller has a display and an input device, which is used to input, output and display relevant data.

[0084] It can be seen from the above technical solutions that in the embodiment of the application, because the GraphQL schema is pre-converted to a knowledge graph with object types in the GraphQL schema as nodes and associations between the object types as edges, then a user can lean exactly what data can be requested and can quickly construct legitimate GraphQL statements by performing selection operation on the knowledge graph without leaving the GraphQL editor. In addition, the knowledge graph simplifies the complex relationships of information model and reduces the difficulty of generating GraphQL statements through interaction.

[0085] Furthermore, by providing tree graph query results to users, the users can modify the data based on the query results, and then a GraphQL mutation statement is generated automatically. It can be seen, users can complete closed-loop operations such as query, mutation, and subscription to the semantic data model through this solution.

[0086] GraphQL isn't tied to any specific database or storage engine and is instead backed by your existing code and data. Therefore, due to its high flexibility and scalability, this solution can be easily adopted by almost all software development projects.

[0087] It should be understood that, as used herein, unless the context clearly supports exceptions, the singular forms "a" ( "a" , "an" , "the" ) are intended to include the plural forms. It should also be understood that, "and  / or" used herein is intended to include any and all possible combinations of one or more of the associated listed items.

[0088] The foregoing description, for purpose of explanation, has been described with reference to specific examples. However, the illustrative discussions above are not intended to be exhaustive or to limit the present application to the precise forms disclosed. Many modifications and variations are possible in view of the above teachings. The examples were  chosen and described in order to best explain the principles of the present application and its practical applications, to thereby enable others skilled in the art to best utilize the present application and various examples with various modifications as are suited to the particular use contemplated.

Claims

1.A method for achieving graph visualization GraphQL editor, characterized in that, comprising:pre-converting GraphQL schema to a knowledge graph with object types in the GraphQL schema as nodes and associations between object types as edges;displaying the knowledge graph on a GraphQL editor;building a hierarchy tree corresponding to a GraphQL operation based on a select operation on a node of the knowledge graph, and displaying the hierarchy tree on the GraphQL editor;generating GraphQL statements according to the hierarchy tree based on preset statement generation mechanism.2.The method for achieving graph visualization GraphQL editor according to claim 1, characterized in that, further comprising:displaying generated GraphQL statements on the GraphQL editor.3.The method for achieving graph visualization GraphQL editor according to claim 1, characterized in that, wherein building a hierarchy tree corresponding to a GraphQL operation based on a click operation on a node of the knowledge graph comprises:when receiving a click operation on a node of the knowledge graph, determining the node as a source node of a hierarchy tree;when receiving a double click operation on a node of the knowledge graph, determining the node as a target node;when there exists the source node and the target node is a child node of the source node, adding the target node in the hierarchy tree;when there is no the source node and the target node is a child node of a root node, taking the root node as a source node of a hierarchy tree, and adding the target node in the hierarchy tree;when there exists the source node and the target node is not a child node of the source node, calculating all optional paths between the target node and the source node, and displaying calculated optional paths on the GraphQL editor, adding each node on an optional path selected by a user in the hierarchy tree;when there is on the source node and the target node is not a child node of the root node, taking the root node as a source node of a hierarchy tree, calculating all optional paths between the target node and the source node, and displaying calculated optional paths on the GraphQL editor, adding each node on an optional path selected by a user in the hierarchy tree.4.The method for achieving graph visualization GraphQL editor according to claim 1, characterized in that, further comprising:setting a filter condition for the hierarchy tree according to a filter condition setting operation on the hierarchy tree; and updating the GraphQL statements based on the filter condition.5.The method for achieving graph visualization GraphQL editor according to claim 1, characterized in that, further comprising:setting at least one property of a node according to a received property editing operation on a node in the hierarchy tree; and updating the GraphQL statements according to the at least one property.6.The method for achieving graph visualization GraphQL editor according to any one of claims 1 to 5, characterized in that, wherein GraphQL statements comprises GraphQL query statements; the further comprising:receiving query results after the GraphQL statements are executed, and displaying the query results in the form of a visual tree graph on the GraphQL editor.7.The method for achieving graph visualization GraphQL editor according to claim 6, characterized in that, further comprising:receiving a GraphQL mutation editing operation through a GraphQL mutation editing page which is jumped to by clicking on corresponding block in the visual tree graph; andgenerating GraphQL mutation statements according to the GraphQL mutation editing operation.8.A system for achieving graph visualization GraphQL editor, characterized in that, comprising:a first module (801) , to pre-convert GraphQL schema to a knowledge graph with object types in the GraphQL schema as nodes and associations between the object types as edges, and to display the knowledge graph on a GraphQL editor;a second module (802) , to build a hierarchy tree corresponding to a GraphQL operation based on a select operation on a node of the knowledge graph, and to display the hierarchy tree on the GraphQL editor; anda third module (803) , to generate GraphQL statements according to the hierarchy tree based on preset statement generation mechanism.9.The system for achieving graph visualization GraphQL editor according to claim 8, characterized in that, further comprising:a fourth module (804) , to set a filter condition for the hierarchy tree according to a filter condition setting operation on the hierarchy tree;the third module (803) is further to update the GraphQL statements based on the filter condition.10.The system for achieving graph visualization GraphQL editor according to claim 8, characterized in that, further comprising:a fifth module (805) , to set at least one property of a node according to a received property editing operation on a node in the hierarchy tree;the third module (803) is further to update the GraphQL statements according to the at least one property.11.The system for achieving graph visualization GraphQL editor according to any one of claims 8 to 10, characterized in that, further comprising:a sixth module (806) , to receive query results after the GraphQL statements are executed, and display the query results in the form of a visual tree graph on the GraphQL editor; anda seventh module (807) , to receive a GraphQL mutation editing operation through a GraphQL mutation editing page which is jumped to by clicking on corresponding block in the visual tree graph;the third module (803) is further to generate GraphQL mutation statements according to the GraphQL mutation editing operation.12.A system for achieving graph visualization GraphQL editor, characterized in that, comprising:at least one memory (91) , to store a computer program; andat least one processor (92) , to call the computer program stored in the at least one memory (91) to perform a method for achieving graph visualization GraphQL editor according to any one of claims 1 to 7.13.A non-transitory computer-readable storage medium, on which a computer program is stored, characterized in that, the computer program is to be executed by a processor to implement a method for achieving graph visualization GraphQL editor according to any one of claims 1 to 7..

Images