Graph visualization method, device, equipment, medium and product

Abstract

The present disclosure provides a graph visualization method, apparatus, device, medium and product, which relate to the field of data processing, and in particular to the field of data display technology. The specific implementation scheme is to determine the target template object corresponding to the graph element to be edited from a preset set of candidate template objects according to the graph element to be edited in the graph editing request; obtain the configuration value of at least one attribute of the graph element to be edited from the graph editing request, and configure the attribute of the target template object; wherein the attribute includes at least an interaction style; based on the configured target template object, render and display the corresponding graph element in the interface according to the configuration value of the interaction style. The scheme of the present disclosure improves the efficiency and effect of graph visualization editing.

Description

Technical Field

[0001] The present disclosure relates to the field of computer technology, in particular to the field of data display, and specifically to a graph visualization method, device, equipment, medium and product. Background Art

[0002] Front-end graph visualization refers to a technology that displays DAG graphs (Directed Acyclic Graph) and flowcharts on the browser side. Since DAG graphs and flowcharts involve multiple types of nodes, there is a problem of complex configuration when defining the interaction styles of different types of nodes in the graph when displaying the graph. Summary of the invention

[0003] The present disclosure provides a method, apparatus, device, medium and product for graph visualization.

[0004] According to one aspect of the present disclosure, a graph visualization method is provided, comprising:

[0005] Get the image editing request;

[0006] According to the graph element to be edited in the graph editing request, determining a target template object corresponding to the graph element to be edited from a preset candidate template object set;

[0007] Acquire a configuration value of at least one attribute of the to-be-edited graph element from the graph editing request, and configure the attributes of the target template object; wherein the attributes at least include an interaction style;

[0008] Based on the configured target template object, the corresponding graphic elements are rendered and displayed in the interface according to the configuration values ​​of the interaction style.

[0009] According to another aspect of the present disclosure, a graph visualization device is provided, comprising:

[0010] A graph editing request acquisition module, used to acquire a graph editing request;

[0011] A target template object determination module, configured to determine, according to the graph element to be edited in the graph editing request, a target template object corresponding to the graph element to be edited from a preset candidate template object set;

[0012] An attribute configuration module, used to obtain a configuration value of at least one attribute of the to-be-edited graph element from the graph editing request, and configure the attributes of the target template object; wherein the attributes at least include an interaction style;

[0013] The graphic element rendering module is used to render and display the corresponding graphic elements in the interface based on the configured target template object and the configuration value of the interaction style.

[0014] According to another aspect of the present disclosure, there is provided an electronic device, comprising:

[0015] at least one processor; and

[0016] a memory communicatively connected to the at least one processor; wherein,

[0017] The memory stores instructions that can be executed by the at least one processor, and the instructions are executed by the at least one processor to enable the at least one processor to perform the graph visualization method described in any embodiment of the present disclosure.

[0018] According to another aspect of the present disclosure, a non-transitory computer-readable storage medium storing computer instructions is provided, wherein the computer instructions are used to enable the computer to execute the graph visualization method according to any embodiment of the present disclosure.

[0019] According to another aspect of the present disclosure, a computer program product is provided, including a computer program, wherein when the computer program is executed by a processor, the computer program implements the graph visualization method according to any embodiment of the present disclosure.

[0020] It should be understood that the content described in this section is not intended to identify the key or important features of the embodiments of the present disclosure, nor is it intended to limit the scope of the present disclosure. Other features of the present disclosure will become easily understood through the following description. BRIEF DESCRIPTION OF THE DRAWINGS

[0021] The accompanying drawings are used to better understand the present solution and do not constitute a limitation of the present disclosure.

[0022] Figure 1 is a schematic diagram of a graph visualization method according to an embodiment of the present disclosure;

[0023] Figure 2 is a schematic diagram of another graph visualization method according to an embodiment of the present disclosure;

[0024] Figure 3 is a schematic diagram of another graph visualization method according to an embodiment of the present disclosure;

[0025] Figure 4 is a schematic diagram of a customizing process of a preset candidate template object according to an embodiment of the present disclosure;

[0026] Figure 5 is a structural schematic diagram of a graph visualization device according to an embodiment of the present disclosure;

[0027] Figure 6 It is a block diagram of an electronic device used to implement the graph visualization method of an embodiment of the present disclosure. DETAILED DESCRIPTION

[0028] The following is a description of exemplary embodiments of the present disclosure in conjunction with the accompanying drawings, including various details of the embodiments of the present disclosure to facilitate understanding, which should be considered as merely exemplary. Therefore, it should be recognized by those of ordinary skill in the art that various changes and modifications may be made to the embodiments described herein without departing from the scope and spirit of the present disclosure. Similarly, for the sake of clarity and conciseness, descriptions of well-known functions and structures are omitted in the following description.

[0029] Figure 1 This is a schematic diagram of a graph visualization method according to an embodiment of the present disclosure. This embodiment can be applied to the situation where the interactive style configuration is optimized when displaying the front-end graph visualization, such as displaying a DAG graph or a flow chart on the browser side. This method can be executed by a graph visualization device, which can be implemented by software and / or hardware and integrated in an electronic device. The electronic device involved in this embodiment can be a device with communication and computing capabilities such as a local server. Specifically, refer to Figure 1 , the method specifically includes the following:

[0030] S110: Obtain a graph editing request.

[0031] The diagram editing request refers to a request to create any element in the diagram during the process of creating a visualization diagram. The diagram editing request can be determined by user customization or automatically determined according to drawing requirements.

[0032] For example, for drawing a flowchart, when a user needs to build any process, the demand for building the process is a graph editing request; for drawing a DAG graph in machine learning, when a sub-model is created, the element corresponding to the sub-model is a graph editing request.

[0033] Specifically, the diagram editing request includes at least a diagram element to be edited, which determines the type of the diagram requested to be edited, and an attribute configuration value of the diagram element to be edited, which can determine the specific content and style of the diagram element. Exemplarily, for a process editing request, the diagram element to be edited is a process box, and the attribute configuration value of the process box can include the specific content of the process and the style that the process needs to be rendered.

[0034] S120 . Determine, according to the graph element to be edited in the graph editing request, a target template object corresponding to the graph element to be edited from a preset candidate template object set.

[0035] Among them, the graph element to be edited refers to the content that needs to be edited for the visual graph in this graph editing request. The graph element to be edited may include at least one graphic node. The preset candidate template object refers to a template that pre-edits different types of graphic nodes in the visual graph according to the content of the visual graph, so that the graphic nodes can be quickly reused when editing the visual graph, thereby improving the editing efficiency of the visual graph. The preset candidate template object set refers to the result of grouping all preset candidate target objects related to the visual graph. At least one graph element to be edited can be included in the graph editing request.

[0036] Specifically, according to the type of the graphic element to be edited, a target template object matching the type is selected from a preset candidate template object set, and the type of the graphic element to be edited is used to divide the graphic element to be edited. Exemplarily, the type of the graphic element to be edited includes a text type and a picture type, and a preset candidate template object that can display text and pictures is selected from the preset candidate template object set as the target template object. For example, when the graphic editing request is a flowchart editing request, and the graphic element to be edited is a process box element, a target template object matching the shape of the process box is determined from the preset candidate template object set.

[0037] Exemplarily, multiple types of candidate template objects are preconfigured, each candidate template object has a unique identifier for distinction, and all candidate template objects are stored in an object, with the unique identifier of the candidate template object as the key and the candidate template object as the value. When a user sends a graph editing request, the graph editing request needs to include a unique identifier representing the template, so as to find the target template object from the candidate template object set according to the unique identifier in the graph editing request.

[0038] S130. Obtain a configuration value of at least one attribute of the graph element to be edited from the graph editing request, and configure the attributes of the target template object; wherein the attributes include at least an interaction style.

[0039] Among them, the properties of the graphic element to be edited are used to characterize the specific content of the graphic element to be edited. The specific content represents the specific display content of the graphic element on the canvas. The interactive style properties are used to characterize the way in which the graphic element responds to different interactive behaviors. The interactive behavior of the graphic element can be manual interaction through the interface or interaction triggered by background events. The interactive style content shows the display content of the graphic element on the canvas when there is an interactive behavior.

[0040] Specifically, the user sets the configuration value of the interactive style for the graphic element to be edited according to his own drawing requirements and the interactive style identifier provided in the candidate template object. When editing the graphic element, the configuration value is replaced with the variable of the corresponding interactive style in the target template object to realize the autonomous configuration of the interactive style of the graphic element. In addition, the graphic element to be edited also includes attributes for determining the content of the graphic element.

[0041] S140. Based on the configured target template object, corresponding graphic elements are rendered and displayed in the interface according to the configuration values ​​of the interaction style.

[0042] The configured target template object includes the static display content of the graphic elements to be rendered and the dynamic display configuration of the interactive style. The static display of the corresponding graphic elements is displayed in the interface according to the configuration value in the target template object, and the graphic elements are dynamically rendered accordingly according to the configuration value of the interactive style attribute. Exemplarily, the target template object includes node information and line information, as well as the interactive style configuration for the node information and line information. First, the nodes and lines are rendered in the interface according to the node information and line information, and then the associated events, listening functions and response functions of the interactive style are added to the node information and line information according to the interactive style configuration.

[0043] In another optional implementation of this embodiment, the interaction style includes an associated event, a listening function, and a responding function;

[0044] Correspondingly, rendering and displaying corresponding graphic elements in the interface according to the configuration value of the interaction style includes:

[0045] When the monitoring function of the interactive style of the graphic element monitors the associated event of the graphic element, the response function is executed to perform style rendering on the graphic element.

[0046] The interactive style attributes include associated events, listening functions, and response functions, wherein the associated events represent the specific behavior of the interaction, the listening function is used to obtain the specific behavior, and the response function is used to respond to the specific behavior. By setting the interactive style attributes in the template object, the user can customize the interactive style of the associated events when editing the visual graph, and realize flexible configuration of the style. Since the interactive style attributes are configured in advance in the template object, when the user sends a graph editing request, he only needs to determine the configuration values ​​of different interactive styles according to his own needs. The configuration is simple and does not require the user to master professional knowledge. Exemplarily, the configuration value of the interactive style includes an interactive style identifier, which is used to represent pre-set different display styles. By pre-determining the interactive style identifier corresponding to different response functions in the template object, the user can directly select the response function according to the interactive style identifier.

[0047] Specifically, after the graphic element is drawn on the interface, the listening function of its interaction style starts running and keeps listening to the corresponding associated events. After listening to the corresponding associated events, the corresponding response function is executed to realize the response to the display of the corresponding interaction style.

[0048] Exemplarily, based on the above example, when the interaction style flag is set to a for the associated event as a mouse hover event, the corresponding response function is represented as a magnification style. When this attribute is configured for the circular node in the graph element, when the circular node is rendered and displayed in the interface, the listening function starts running to listen to the mouse position. When the mouse position is detected to coincide with the circular node position, it means that the associated event is triggered, and the highlighted response function responds.

[0049] In another optional implementation of this embodiment, the associated event includes at least one of the following: a background trigger event and an interface operation event;

[0050] The interface operation event includes at least one of the following: a drag event, a selection event, and a mouse hover event.

[0051] Among them, the background trigger event refers to the event that triggers the interaction of the graphic elements based on the background data operation information. For example, for a flowchart, the background trigger event can be any process completion event; the interface operation event is used to represent the user's operation on the graphic elements on the interface. The interface operation event generally requires the mouse as a tool to participate, including the drag event, which is used to represent the user operating the mouse to drag the graphic element, the selection event, which is used to represent the user operating the mouse to select and confirm the graphic element, and the mouse hover event, which is used to represent the user operating the mouse to stay above the graphic element, but did not select the graphic element or perform other substantive operations.

[0052] For example, in a flowchart visualization, selection-related events and mouse-hover-related events are added to candidate target objects. When a user sends a diagram editing request, the user needs to set configuration values ​​for the selection-related events and the mouse-hover-related events, that is, determine the specific style changes that each associated event needs to respond to. The specific style changes are determined by a response function, which is a code segment library that needs to be set up and corresponds one-to-one with the interaction style identifier.

[0053] By determining the associated events, users can freely configure various interactions in the visualization graph without being strongly bound to the technology stack. User configuration is simple and flexible, and rich interactive styles of the visualization graph can be displayed.

[0054] In another optional implementation of this embodiment, the diagram is a machine learning training flowchart, the nodes of the diagram elements in the machine learning training flowchart are sub-models in the machine learning model, the connections of the diagram elements in the machine learning training flowchart are the data flow between the sub-models, and the associated events include the end event or abnormal event of the sub-model executing the current calculation.

[0055] The graph elements to be edited include node elements and line elements, wherein the node elements are used to represent the graph, and the line elements are used to represent the connection between the graphs. Specifically, when a sub-model needs to be added to the machine learning model being trained, a request for a graph to be edited is sent, which includes the unique identification information of the candidate template object corresponding to the sub-model, and the interaction style identification corresponding to the event associated with the sub-model, through which the specific response function can be determined.

[0056] Exemplarily, corresponding candidate template objects are set in advance according to different types of sub-models. Exemplarily, a candidate template object including a circular node is used to represent a first type of sub-model, and a candidate template object including a rectangular node is used to represent a second type of sub-model. When a first type of sub-model needs to be added, the corresponding target template object is determined to be a template object including a circular node according to the acquired sub-model type, and the direction of the connection between the nodes is determined according to the data flow between the sub-models. An associated event is added to the circular node. For example, when the calculation of the sub-model ends, the circular node is highlighted, and the associated event of the circular node is determined to be the end event of the sub-model executing the current calculation. The monitoring function is to monitor whether the parameter input of the end of the sub-model is received. If it is listened, the corresponding highlighted response function is executed.

[0057] By configuring the visual interactive style of the machine learning training flowchart, the visualization of the machine learning training process is achieved.

[0058] In another optional implementation of this embodiment, the configuration value of the interaction style includes an interaction style identifier;

[0059] Correspondingly, when the monitoring function of the interactive style of the graph element monitors the associated event of the graph element, before executing the response function, the method further includes:

[0060] Based on the interaction style identifier in the configured target template object, the corresponding listening function is retrieved from the preset resource library and started to run to listen to the associated events.

[0061] Among them, the preset resource library includes a pre-edited listening function code segment library and a corresponding response function code segment library, and there is no specific restriction on the content of the code library. The interaction style identifier is used to represent the pre-set different display styles. By predetermining the interaction style identifiers corresponding to different response functions in the template object, the user can directly select the response function according to the interaction style identifier. Since the interaction style identifier represents the interaction style of the associated event that needs to be displayed for the graph element, the interaction style identifier can be uniquely identified by numbers or letters, and the specific content is not restricted.

[0062] Specifically, after setting the interaction style identifier, the user determines the listening function and the response function associated with the interaction style identifier, calls the corresponding listening function from the preset resource library to listen to the associated events, and when rendering the corresponding graphic elements in the interface, when the listening function listens to the set associated events, the corresponding response function responds to display the corresponding interaction style.

[0063] By configuring the listening function of the associated event for the target template object and starting the listening when rendering on the interface, the interactive style rendering of the graphic elements on the interface is realized, and the visualization effect of the graphic elements is enriched. The listening function is called from the preset resource library, and the user does not need to design it by himself, which simplifies the user's operation process.

[0064] The solution of this embodiment configures the interactive style attributes in the candidate template object, so that the user can customize the interactive style attributes when using the candidate template object, realize the style response to different associated events, improve the visualization effect of editing the graph, and the operation is simple. In addition, when drawing a graph, the user can realize the rapid reuse of the nodes in the model object by presetting the candidate model object, thereby improving the editing efficiency of the visualized graph.

[0065] Figure 2 is a schematic diagram of another graph visualization method according to an embodiment of the present disclosure. This embodiment is a further refinement of the above technical solution. The attributes also include parameter attributes; the configuration value of the parameter attribute includes a parameter value range or at least two optional parameter items. The technical solution in this embodiment can be combined with each optional solution in one or more of the above embodiments.

[0066] Among them, parameter-type attributes are used to configure the content of the graphic element to be edited, and the configuration content can be characterized by parameters. Exemplarily, parameter-type attributes can include static styles such as graphic shape, graphic content, and graphic color. The configuration value of the parameter-type attribute is set according to the specific attribute content, and at least two parameter items can be provided for the user to choose when editing the graphic. For example, when the parameter-type attribute is a shape, the corresponding configuration value is the range of the shape size, such as the radius range of a drawable circle; when the parameter-type attribute is a fill color, the corresponding configuration value is at least two color parameter items.

[0067] By setting the parameter class properties of the edited diagram elements, rich configuration of the diagram is achieved to meet complex business needs.

[0068] like Figure 2 As shown, the graph visualization methods include the following:

[0069] S210: Obtain a graph editing request.

[0070] S220 . Determine, according to the graph element to be edited in the graph editing request, a target template object corresponding to the graph element to be edited from a preset candidate template object set.

[0071] S230. Obtain a configuration value of at least one attribute of the graph element to be edited from the graph editing request, and configure the attributes of the target template object; wherein the attributes also include node static parameter class attributes.

[0072] The graph element to be edited includes nodes, which are used to characterize the graph in the graph element. The node static parameter class attributes are used to characterize the static parameters of the node, and the integrity of the visual graph is ensured by configuring the static parameters.

[0073] Specifically, the node static parameter class attributes of the graph element include at least one of the following: component element type, container type, node input point parameter, and node output point parameter; wherein:

[0074] The component element type is used to determine the type of graphics displayed in the nodes included in the graph elements in the interface;

[0075] The container type is used to determine the graph type including the node input point and the node output point;

[0076] Node input point parameters, node output point parameters and container type are used to determine the input point position and output point position of the nodes included in the graph elements in the interface.

[0077] Specifically, the configuration value of the component element type in the graph element indicates the specific graphic type displayed in the graph, such as a circle or a rectangle. The graph element may include at least one configuration value of the component element type. In other words, the candidate target object may include a combination of multiple images. The configuration value of the container type indicates the contour shape of the node input point and the node output point. For example, for a flowchart, the container type for the intermediate process is a rectangle, and the input point and output point of the process node are located on the contour of the rectangle; the container type for the start or end is a circle, and the input point or output point of the node is located on the contour of the circle.

[0078] The node input point parameters represent the position of the node input point on the container and the number of node input points, and the node output point parameters represent the position of the node output point on the container and the number of node output points. The coordinate information of the final input point is determined according to the container type and the position of the determined input point on the container. Similarly, the coordinate information of the final output point is determined according to the container type and the position of the determined output point on the container.

[0079] Exemplarily, the node input point parameters are determined as the position on the container is the bottom, and the quantity information is two. Then, according to the predetermined position calculation method corresponding to different container types, the bottom contour of the container is divided equally according to the number of input points, and the number of input points is determined as the position coordinates of the equally divided points.

[0080] Exemplarily, in the node object of the graph element, multiple components are configured, and each component element is configured with four attributes, including static parameter attributes and interactive style attributes, wherein the static parameter attributes include name, and the interactive style attributes include normal, hover, and selected. Among them, the name attribute represents the name of the graph in the node, and supports eight types of graphs: Bezier curve, circle, image, line, polygon, rectangle, text, and triangle. The normal attribute configures the style and shape of the graph in the normal state. The hover configures the style and shape associated with the mouse hover event of the graph. The selected attribute configures the style and shape of the graph under the selected associated event. Among them, the style configures the font, font size, fill, alignment and other styles; the shape configures the size of the graph, for example, the rectangle configures the horizontal coordinate, vertical coordinate, length, height, and rounded corners, and the circle configures the radius. In addition, the node also includes the container type box, the node input point parameter inputCircle, and the node output point parameter outputCircle. Box is a container, which can be any graphic, used to determine the placement graphics of the input and output points of the node. The inputCircle parameter configures the position of the input point in the container, which can be an enumeration value, and its value is one of top, bottom, left, and right. Similarly, outputCircle is the output point configuration of the node, which is used to configure the position of the output point in the container.

[0081] By configuring the static parameter class of nodes in the graph elements, the configurable items of the visualization graph are further enriched, and the visualization effect of the graph is improved.

[0082] In another optional implementation of this embodiment, the node input point parameters are also used to determine the connection guidance between nodes; wherein the connection guidance includes the node input point being connectable guidance or the node input point having completed the connection guidance.

[0083] Among them, the node input point can be connected to the user's current output point. The specific connection judgment is determined according to the data flow between the nodes. When the connection can be made, the node connection guide is displayed in a corresponding style. The current node input point has been connected to the user's current output point. The connection guide is used to prompt the user when connecting nodes to improve the user's editing efficiency of the graph.

[0084] For example, based on the above example, inputCircle is the input point parameter of the node, which has three configurations: guide and guideHovern. The guide configuration is used to represent the style displayed when the user starts to connect from the output point if the current node input point can be connected, which is used to give the user an input style prompt. The guideHover configuration is used to represent the style displayed when the user's connection point has touched the current node input point, informing the user that the connection has been successful.

[0085] By configuring the connection guides between nodes, users can further improve the visualization effect when drawing graphs, which facilitates improving the efficiency of graph editing.

[0086] S240. Based on the configured target template object, corresponding graph elements are rendered and displayed in the interface according to the node static parameter class attributes and the configuration values ​​of the interaction style.

[0087] Specifically, the corresponding component elements, containers, node input points and node output points are displayed on the interface according to the configuration values ​​of the component element type, container type, node input point parameters and node output point parameters in the node static parameter class attributes. Based on the above example, rendering is performed according to the container type and component element type, and the container and component elements are rendered and configured according to the corresponding configuration items, the location information of the node input point and output point is calculated, and the node input point is styled according to the connection guide. And the corresponding listening function is added to the corresponding component element according to the configuration value of the interaction style.

[0088] After configuring the node according to the configuration values ​​of the above attributes, when monitoring the associated events of the node, the corresponding response function is executed. Specifically, it can be the associated events of the constituent elements of the node or the associated events of the node input point and node output point.

[0089] For example, based on the above example, after the static image is rendered, the drawing engine will have built-in interactive event processing, add a mouseover listener to the node, read the template's hover state configuration in the listener function, render the node's hover state shape and style, and restore the node to normal state in the mouseout listener function. When the node is selected, the listener function will be triggered, and the node's selected state configuration will be read in the function, and the node's selected state shape and style will be rendered.

[0090] The solution of this embodiment, by setting configuration values ​​for the node static parameter class attributes of the graph elements, achieves rapid reuse of template object nodes while ensuring the richness of the composition and style of the nodes in the graph application and improving the editing efficiency of the visual graph.

[0091] Figure 3 is a schematic diagram of another graph visualization method according to an embodiment of the present disclosure. This embodiment is a further refinement of the above technical solution. The technical solution in this embodiment can be combined with various optional solutions in one or more of the above embodiments. Figure 3 As shown, the graph visualization methods include the following:

[0092] S310: Obtain a graph editing request.

[0093] S320: According to the graph element to be edited in the graph editing request, determine a target template object corresponding to the graph element to be edited from a preset candidate template object set.

[0094] S330. Obtain the configuration value of at least one attribute of the graph element to be edited from the graph editing request, and configure the attributes of the target template object; wherein the attributes also include connection static parameter class attributes.

[0095] The graph elements to be edited include lines, which are used to represent the connection lines between nodes in the graph elements. The static parameter class attributes of the lines are used to represent the static parameters of the lines, and the integrity of the visual graph is ensured by configuring the static parameters.

[0096] Specifically, the static parameter class attributes of the connection of the graph element include at least one of the following: connection type, arrow type and background line parameter; wherein:

[0097] The connection type is used to determine the connection method between nodes of the graph elements in the interface;

[0098] The arrow type is used to determine the sequential direction and arrow shape between nodes of the graph elements in the interface;

[0099] The background line parameters are used to determine the response expansion range of the connection lines between nodes.

[0100] Among them, the background line parameter is the background area range expanded according to the position of the connection line. Since the connection line is too small, it is difficult for the user to operate the connection line. Therefore, a response expansion range is set for the connection line. When the user operates the response expansion range, it is also defined as an operation on the connection line. The response expansion range of the connection between nodes is set according to the length of the connection line. The mapping relationship between each point on the connection line and the response expansion range is recommended. When operating the response expansion range, the area on the connection line that is actually operated is determined according to the mapping relationship.

[0101] Exemplarily, in the connection object of the graph element, there are three fixed configurations, line, backline, and triangle. Line configures the type of connection, which is generally a Bezier curve or a straight line. The connection can be configured with interactive style attributes, such as normal, hover, and selected, which correspond to different response style changes. Backline configures the background line parameters of the connection, which is generally used to expand the response hotspot. It can also configure interactive style attributes, such as normal, hover, and selected. Triangle configures the shape and style of the arrow, which is generally a triangle. It can also configure interactive style attributes, such as normal, hover, and selected.

[0102] By configuring the static parameter class of the connection in the graph elements, the data flow between nodes is clarified, which further enriches the configurable items of the visualization graph and improves the visualization effect of the graph.

[0103] S340. Based on the configured target template object, corresponding graphic elements are rendered and displayed in the interface according to the configuration values ​​of the connection static parameter class attributes and the interaction style.

[0104] Specifically, the corresponding connection and arrow are displayed on the interface according to the configuration values ​​of the connection type, arrow type and background line parameters in the static parameter class attributes of the connection. For example, based on the above example, the starting point and end point of the connection are calculated according to the node input point and node output point position information, and the connection is rendered according to the connection type, arrow type and background line parameters, and the connection, arrow and background line are rendered according to the corresponding interaction style configuration items. Finally, the corresponding listening function is added to the corresponding connection element according to the interaction style configuration.

[0105] After configuring the connection according to the configuration values ​​of the above attributes, when monitoring the connection-related events, the corresponding response function is executed. Specifically, it can be the connection event of the background line in the connection or the connection event of the arrow.

[0106] For example, based on the above example, after the static image is rendered, the drawing engine will have built-in interactive event processing, add a mouseover listener to the line, read the template's hover state configuration in the listener function, render the line's hover state shape and style, and restore the line to normal in the mouseout listener function. When the line is selected, the listener function will be triggered, and the selected state configuration of the line will be read in the function, and the selected state shape and style of the line will be rendered.

[0107] The solution of this embodiment, by setting configuration values ​​for the connection static parameter class attributes of the graph elements, achieves rapid reuse using template objects while ensuring accurate connections between nodes in the graph application and improving the editing efficiency of the visual graph.

[0108] Figure 4 1 is a schematic diagram of a customizing process of a preset candidate template object according to an embodiment of the present disclosure. This embodiment is a further refinement of the above technical solution. The technical solution in this embodiment can be combined with each optional solution in one or more of the above embodiments. Figure 4 As shown, the preset candidate template object in the preset candidate template object set is obtained in the following manner:

[0109] S450: Obtain a customization request for a candidate template object input by a user.

[0110] Users can customize candidate module objects as needed to meet drawing requirements.

[0111] Exemplarily, a customization request may be a combination of multiple graphics and lines, and a candidate template object may be a combination of graphics with higher reusability. The combination of graphics with higher reusability may be customized into a candidate template object. Then, in subsequent drawing, the candidate template object may be directly used to improve the efficiency of editing the drawing.

[0112] S420: Determine the template object, attributes, and attribute configurable items to be defined according to the customization request.

[0113] The custom request includes the template object, attributes and attribute configurable items that the user needs to define. Among them, the template object can be a template unique identifier to identify the candidate template object according to the unique identifier. The attribute can include any attribute in the above-mentioned embodiment, such as interaction style attributes, node static parameter class attributes and connection static parameter class attributes, and set attribute configurable items for fixed values ​​in the attributes, and set variables for items that the user can set by himself during subsequent reuse, so that the variables can be replaced according to the values ​​passed in by the user later.

[0114] In another optional implementation of this embodiment, the attribute to be defined is an interaction style, and the configurable attribute items include an associated event, a listening function, and a response function;

[0115] Accordingly, according to the customization request, the template objects, attributes and attribute configurable items to be defined are determined, including:

[0116] Determine the configurable item identifier of the template object to be defined and the interaction style from the customization request;

[0117] According to the configurable item identifier, the corresponding associated event, listening function or response function is obtained from the preset resource library to form an interaction style of the template object to be defined.

[0118] In the customization of the candidate template object, the interaction style can be customized. In the customization design, it is necessary to determine the template object to be defined, which can be a graph or a line, and set the configurable item identifier of the interaction style for the template object, wherein the configurable item identifier of the interaction style represents the interaction style that can be set for the template object, such as the associated event, listening function, and response function set for the template object. When the user subsequently uses the candidate template object, the interaction style of the template object can be specifically limited according to the configurable item identifier.

[0119] Exemplarily, the template object to be defined is a line object, and the configurable items of the interaction style are identified as normal, hover, and selected. Normal represents the style of the template object to be defined in the normal state, hover represents the style of the template object to be defined in the mouse hovering state, and selected represents the style of the template object to be defined in the selected state.

[0120] According to the configurable item representation, a corresponding associated event, a listening function or a response function is selected from a preset resource library, wherein the preset resource library predefines the execution code segments of the associated function, the response function and the listening function and is associated with the configurable item identifier.

[0121] By allowing users to customize the interaction style in the candidate template object, it is easy to simplify the process of determining the interaction style during subsequent diagram editing. The flexible configuration of the template improves the efficiency of diagram editing and meets complex business needs.

[0122] S430: Add or update preset candidate template objects according to the template objects, attributes and attribute configurable items to be defined.

[0123] If the template unique identifier to be defined exists, the candidate template object is updated according to the attributes and attribute configurable items to obtain an updated preset candidate template object; if the template unique identifier to be defined does not exist, a new object is re-rendered according to the attributes and attribute configurable items as a new preset candidate template object, and the updated preset candidate template object is added to the candidate template object set for use in subsequent drawing processes.

[0124] The solution of this embodiment is that when a highly reusable graphic appears during the graph editing process, the user can customize the new preset candidate template object to add a corresponding candidate template object to the highly reusable graphic so that it can be directly used in subsequent graph editing. The flexible configuration of the template improves the editing efficiency of the graph and meets complex business needs.

[0125] Figure 5 is a schematic diagram of the structure of a graph visualization device according to an embodiment of the present disclosure, and the device can execute the graph visualization method involved in any embodiment of the present disclosure; Figure 5 The graph visualization device 500 includes: a graph editing request acquisition module 510, a target template object determination module 520, a property configuration module 530 and a graph element rendering module 540.

[0126] A graph editing request obtaining module 510, used to obtain a graph editing request;

[0127] A target template object determining module 520 is used to determine a target template object corresponding to the graph element to be edited from a preset candidate template object set according to the graph element to be edited in the graph editing request;

[0128] The attribute configuration module 530 is used to obtain the configuration value of at least one attribute of the to-be-edited graph element from the graph editing request, and configure the attributes of the target template object; wherein the attributes at least include an interaction style;

[0129] The graphic element rendering module 540 is used to render and display the corresponding graphic elements in the interface based on the configured target template object and the configuration value of the interaction style.

[0130] The solution of this embodiment configures the interactive style attributes in the candidate template object, so that the user can customize the interactive style attributes when using the candidate template object, realize the style response to different associated events, improve the visualization effect of editing the graph, and the operation is simple. In addition, when drawing a graph, the user can realize the rapid reuse of the nodes in the model object by presetting the candidate model object, thereby improving the editing efficiency of the visualized graph.

[0131] In an optional implementation of this embodiment, the interaction style includes an associated event, a listening function, and a responding function;

[0132] Correspondingly, the graph element rendering module is specifically used for:

[0133] When the monitoring function of the interactive style of the graphic element monitors the associated event of the graphic element, the response function is executed.

[0134] In an optional implementation of this embodiment, the associated event includes at least one of the following: a background trigger event and an interface operation event;

[0135] The interface operation event includes at least one of the following: a drag event, a selection event, and a mouse hover event.

[0136] In an optional implementation of this embodiment, the attribute further includes a parameter-type attribute; the configuration value of the parameter-type attribute includes a parameter value range or at least two optional parameter items.

[0137] In an optional implementation of this embodiment, the node static parameter class attribute of the graph element includes at least one of the following: component element type, container type, node input point parameter, and node output point parameter; wherein:

[0138] The component element type is used to determine the type of graphics displayed in the nodes included in the graph element in the interface;

[0139] The container type is used to determine the type of graph including the node input point and the node output point;

[0140] The node input point parameters, node output point parameters and container type are used to determine the input point positions and output point positions of the nodes included in the graph elements in the interface.

[0141] In an optional implementation of this embodiment, the static parameter class attribute of the connection of the graphic element includes at least one of the following: connection type, arrow type and background line parameter; wherein:

[0142] The connection type is used to determine the connection method between nodes of the graphic elements in the interface;

[0143] The arrow type is used to determine the sequential direction and arrow shape between nodes of the graph elements in the interface;

[0144] The background line parameters are used to determine the response expansion range of the connection lines between nodes.

[0145] In an optional implementation of this embodiment, the node input point parameters are also used to determine the connection guidelines between nodes; wherein the connection guidelines include the node input point can be connected guidelines or the node input point has completed the connection guidelines.

[0146] In an optional implementation of this embodiment, the graph is a machine learning training flowchart, the nodes of the graph elements in the machine learning training flowchart are sub-models in the machine learning model, the connections between the graph elements in the machine learning training flowchart are the data flow between the sub-models, and the associated events include the end event or abnormal event of the sub-model executing the current calculation.

[0147] In an optional implementation of this embodiment, the device further includes a candidate template object customization module, which is used to customize the preset candidate template objects in the preset candidate template object set, including:

[0148] A custom request acquisition unit, used to acquire a custom request for a candidate template object input by a user;

[0149] An attribute determination unit, used to determine the template object, attributes and attribute configurable items to be defined according to the customization request;

[0150] The template object determining unit is used to add or update a preset candidate template object according to the template object to be defined, the attribute and the attribute configurable item.

[0151] In an optional implementation of this embodiment, the attribute to be defined is an interaction style, and the configurable attribute items include an associated event, a listening function, and a response function;

[0152] Accordingly, the attribute determination unit includes:

[0153] Determine, from the customization request, a template object to be defined and a configurable item identifier of the interaction style;

[0154] According to the configurable item identifier, the corresponding associated event, the listening function or the responding function is obtained from the preset resource library to form the interaction style of the template object to be defined.

[0155] In an optional implementation of this embodiment, the configuration value of the interaction style includes an interaction style identifier;

[0156] Correspondingly, the device also includes a listening function starting module, which is used to call the corresponding listening function from a preset resource library and start running it based on the interaction style identifier in the configured target template object when the listening function of the interaction style of the graphic element listens to the associated event of the graphic element before executing the response function, so as to monitor the associated event.

[0157] The above-mentioned graph visualization device can execute the graph visualization method provided by any embodiment of the present disclosure, and has the functional modules and beneficial effects corresponding to the execution method. For technical details not fully described in this embodiment, please refer to the graph visualization method provided by any embodiment of the present disclosure.

[0158] In the technical solution of the present disclosure, the collection, storage, use, processing, transmission, provision and disclosure of user personal information involved are in compliance with the provisions of relevant laws and regulations and do not violate public order and good morals.

[0159] According to an embodiment of the present disclosure, the present disclosure also provides an electronic device, a readable storage medium and a computer program product.

[0160] Figure 6 A schematic block diagram of an example electronic device 500 that can be used to implement an embodiment of the present disclosure is shown. The electronic device is intended to represent various forms of digital computers, such as laptop computers, desktop computers, workstations, personal digital assistants, servers, blade servers, mainframe computers, and other suitable computers. The electronic device can also represent various forms of mobile devices, such as personal digital processing, cellular phones, smart phones, wearable devices, and other similar computing devices. The components shown herein, their connections and relationships, and their functions are merely examples and are not intended to limit the implementation of the present disclosure described and / or required herein.

[0161] like Figure 6 As shown, the device 500 includes a computing unit 501, which can perform various appropriate actions and processes according to a computer program stored in a read-only memory (ROM) 502 or a computer program loaded from a storage unit 508 into a random access memory (RAM) 503. In the RAM 503, various programs and data required for the operation of the device 500 can also be stored. The computing unit 501, the ROM 502, and the RAM 503 are connected to each other via a bus 504. An input / output (I / O) interface 505 is also connected to the bus 504.

[0162] A number of components in the device 500 are connected to the I / O interface 505, including: an input unit 506, such as a keyboard, a mouse, etc.; an output unit 507, such as various types of displays, speakers, etc.; a storage unit 508, such as a disk, an optical disk, etc.; and a communication unit 509, such as a network card, a modem, a wireless communication transceiver, etc. The communication unit 509 allows the device 500 to exchange information / data with other devices through a computer network such as the Internet and / or various telecommunication networks.

[0163] The computing unit 501 may be a variety of general and / or special processing components with processing and computing capabilities. Some examples of the computing unit 501 include, but are not limited to, a central processing unit (CPU), a graphics processing unit (GPU), various dedicated artificial intelligence (AI) computing chips, various computing units running machine learning model algorithms, digital signal processors (DSPs), and any appropriate processors, controllers, microcontrollers, etc. The computing unit 501 performs the various methods and processes described above, such as the graph visualization method. For example, in some embodiments, the graph visualization method may be implemented as a computer software program, which is tangibly contained in a machine-readable medium, such as a storage unit 508. In some embodiments, part or all of the computer program may be loaded and / or installed on the device 500 via the ROM 502 and / or the communication unit 509. When the computer program is loaded into the RAM 503 and executed by the computing unit 501, one or more steps of the graph visualization method described above may be performed. Alternatively, in other embodiments, the computing unit 501 may be configured to perform the method graph visualization in any other appropriate manner (e.g., by means of firmware).

[0164] 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.

[0165] 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 data processing device, so that the program code, when executed by the processor or controller, enables the functions / operations specified in the flow chart and / or block diagram to be implemented. The program code may be executed entirely on the machine, partially on the machine, partially on the machine and partially on a remote machine as a stand-alone software package, or entirely on a remote machine or server.

[0166] 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.

[0167] 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).

[0168] The systems and techniques described herein may 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 may 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), a blockchain network, and the Internet.

[0169] 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 of client and server is generated by computer programs running on respective computers and having a client-server relationship with each other. The server may be a cloud server, a server of a distributed system, or a server combined with a blockchain.

[0170] 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.

[0171] 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 graph visualization method, comprising: Get the image editing request; According to the graph element to be edited in the graph editing request, determining a target template object corresponding to the graph element to be edited from a preset candidate template object set; The graph elements to be edited include nodes and lines; Obtain the configuration value of at least one attribute of the graph element to be edited from the graph editing request, and configure the attributes of the target template object; wherein the attributes at least include an interaction style; the interaction style includes an associated event, a listening function, and a response function; the attributes also include parameter class attributes; the configuration value of the parameter class attributes includes a parameter value range or at least two optional parameter items; the parameter class attributes include node static parameter class attributes and line static parameter class attributes; The configuration value of the interaction style includes the interaction style identifier; Based on the interaction style identifier in the configured target template object, the corresponding listening function is called from the preset resource library and started to run to listen to the associated events. When the listening function of the interaction style of the graphic element listens to the associated events of the graphic element, the response function is executed to render the style of the graphic element.

2. The method according to claim 1, wherein: The associated event includes at least one of the following: a background trigger event and an interface operation event; The interface operation event includes at least one of the following: a drag event, a selection event, and a mouse hover event.

3. The method according to claim 1, wherein: The node static parameter class attributes include at least one of the following: component element type, container type, node input point parameter, and node output point parameter; wherein: The component element type is used to determine the type of graphics displayed in the nodes included in the graph element in the interface; The container type is used to determine the type of graph including the node input point and the node output point; The node input point parameters, node output point parameters and container type are used to determine the input point positions and output point positions of the nodes included in the graph elements in the interface.

4. The method according to claim 1, wherein: The static parameter class attributes of the connection include at least one of the following: connection type, arrow type and background line parameter; wherein: The connection type is used to determine the connection method between nodes of the graphic elements in the interface; The arrow type is used to determine the sequential direction and arrow shape between nodes of the graph elements in the interface; The background line parameters are used to determine the response expansion range of the connection lines between nodes.

5. The method according to claim 3, wherein: The node input point parameters are also used to determine the connection guide between nodes; wherein the connection guide includes a node input point that can be connected guide or a node input point that has completed connection guide.

6. The method according to claim 1, wherein: The figure is a machine learning training flowchart, in which the nodes of the graph elements in the machine learning training flowchart are sub-models in the machine learning model, the lines connecting the graph elements in the machine learning training flowchart are the data flow between the sub-models, and the associated events include the end event or abnormal event of the sub-model executing the current calculation.

7. The method according to claim 1, wherein: The preset candidate template object in the preset candidate template object set is obtained by: Get the user input for the customized request of the candidate template object; According to the customization request, determine the template object, attributes and attribute configurable items to be defined; According to the template objects, attributes and attribute configurable items to be defined, preset candidate template objects are added or updated.

8. The method according to claim 7, wherein: The property to be defined is the interaction style. The configurable items of the property include associated events, listening functions, and response functions. Accordingly, according to the customization request, the template object, attributes and attribute configurable items to be defined are determined, including: Determine, from the customization request, a template object to be defined and a configurable item identifier of the interaction style; According to the configurable item identifier, the corresponding associated event, the listening function or the responding function is obtained from the preset resource library to form the interaction style of the template object to be defined.

9. A graph visualization device, comprising: A graph editing request acquisition module, used to acquire a graph editing request; A target template object determination module, configured to determine, according to the graph element to be edited in the graph editing request, a target template object corresponding to the graph element to be edited from a preset candidate template object set; The graph elements to be edited include nodes and lines; The attribute configuration module is used to obtain the configuration value of at least one attribute of the to-be-edited graph element from the graph editing request, and configure the attributes of the target template object; wherein the attributes at least include an interaction style; the interaction style includes an associated event, a listening function, and a response function; the attributes also include parameter class attributes; the configuration value of the parameter class attributes includes a parameter value range or at least two optional parameter items; the parameter class attributes include node static parameter class attributes and line static parameter class attributes; A graphic element rendering module, used to render and display corresponding graphic elements in the interface according to the configuration value of the interaction style based on the configured target template object; Among them, the graphic element rendering module is specifically used for: When the monitoring function of the interactive style of the graphic element monitors the associated event of the graphic element, the response function is executed; The configuration value of the interaction style includes an interaction style identifier; Correspondingly, the device further comprises a monitoring function starting module, which is used for, when the monitoring function of the interactive style of the graphic element monitors the associated event of the graphic element, before executing the response function, Based on the interaction style identifier in the configured target template object, the corresponding listening function is retrieved from the preset resource library and started to run to listen to the associated events.

10. The device according to claim 9, wherein: The associated event includes at least one of the following: a background trigger event and an interface operation event; The interface operation event includes at least one of the following: a drag event, a selection event, and a mouse hover event.

11. The device according to claim 9, wherein: The node static parameter class attributes of the graph element include at least one of the following: component element type, container type, node input point parameter, and node output point parameter; wherein: The component element type is used to determine the type of graphics displayed in the nodes included in the graph element in the interface; The container type is used to determine the type of graph including the node input point and the node output point; The node input point parameters, node output point parameters and container type are used to determine the input point positions and output point positions of the nodes included in the graph elements in the interface.

12. The device according to claim 9, wherein: The static parameter class attributes of the connection of the graphic element include at least one of the following: connection type, arrow type and background line parameter; wherein: The connection type is used to determine the connection method between nodes of the graphic elements in the interface; The arrow type is used to determine the sequential direction and arrow shape between nodes of the graph elements in the interface; The background line parameters are used to determine the response expansion range of the connection lines between nodes.

13. The device according to claim 11, wherein: The node input point parameters are also used to determine the connection guide between nodes; wherein the connection guide includes a node input point that can be connected guide or a node input point that has completed connection guide.

14. The device according to claim 9, wherein: The figure is a machine learning training flowchart, in which the nodes of the graph elements in the machine learning training flowchart are sub-models in the machine learning model, the lines connecting the graph elements in the machine learning training flowchart are the data flow between the sub-models, and the associated events include the end event or abnormal event of the sub-model executing the current calculation.

15. The device according to claim 9, wherein: The device further includes a candidate template object customization module, which is used to customize a preset candidate template object in a preset candidate template object set, including: A custom request acquisition unit, used to acquire a custom request for a candidate template object input by a user; An attribute determination unit, used to determine the template object, attributes and attribute configurable items to be defined according to the customization request; The template object determining unit is used to add or update a preset candidate template object according to the template object to be defined, the attribute and the attribute configurable item.

16. The device according to claim 15, wherein: The property to be defined is the interaction style. The configurable items of the property include associated events, listening functions, and response functions. Accordingly, the attribute determination unit includes: Determine, from the customization request, a template object to be defined and a configurable item identifier of the interaction style; According to the configurable item identifier, the corresponding associated event, the listening function or the responding function is obtained from the preset resource library to form the interaction style of the template object to be defined.

17. An electronic device comprising: at least one processor; as well as a memory communicatively connected to the at least one processor; wherein, The memory stores instructions that can be executed by the at least one processor, and the instructions are executed by the at least one processor to enable the at least one processor to perform the method according to any one of claims 1 to 8.

18. A non-transitory computer-readable storage medium storing computer instructions, wherein: The computer instructions are used to cause the computer to execute the method according to any one of claims 1-8.

19. A computer program product comprising a computer program / instructions, characterized in that When the computer program / instructions are executed by a processor, the steps of the method according to any one of claims 1 to 8 are implemented.

Images