Angular-based large model relation component display method and system

Abstract

The invention relates to the technical field of large model front ends, in particular to a large model relation component display method and system based on angular, and the method comprises an angular packaging step of a topological graph component and a dynamic assembling step of a topological data source. The method has the beneficial effects that efficient visualization of a multi-level topological relation is realized by packaging a reusable topological component through Anglar and combining a self-defined node / edge rendering algorithm and a dynamic data assembly method, and the system readability and the user experience are improved.

Description

TECHNICAL FIELD

[0001] The present application relates to the technical field of large model front-end, in particular to a method and system for displaying a large model relationship component based on angular. BACKGROUND

[0002] In the prior art, the ordinary relationship diagram component cannot effectively display the many-to-one and one-to-many dependency relationship between the intelligent agent and the model, and it is difficult to present the hierarchical structure of the model and the resource pool. The traditional implementation has the following defects: 1) The node / edge style is single and cannot distinguish different types of entities (such as intelligent agents / models / resource pools) 2) Lack of dynamic interaction (hover highlighting, path tracking) 3) High coupling degree of data assembly and view, poor reusability. SUMMARY

[0003] The purpose of the present application is to provide a method and system for displaying a large model relationship component based on angular to solve the problems raised in the background art.

[0004] To achieve the above purpose, the present application provides the following technical solution: a method for displaying a large model relationship component based on angular, including an Angular encapsulation step of a topology graph component, specifically as follows: Component initialization: initialize the topology graph instance object graph, specify the container identifier container, define the width width and the height height; Set the fitView attribute to determine whether to automatically scale to fit the canvas size when the graph is initialized, the fitCenter attribute determines whether to display the graph in the center when the graph is initialized, the animate attribute controls the animation effect when the graph layout changes, the plugins attribute is used to extend the plug-in function, the modes define the interaction mode, and the layout attribute defines the layout method, including the sortByCombo, rankdir, nodesepFunc and ranksepFunc parameter settings; Custom node implementation: set the default node to define the node default style as the custom node customNode, set the size and anchor point position; Define the customNode node through the registerNode method, including the shape keyShape, the main title text text, the sub-title text, the icon added in the left side inside the node, and the sub-icon added in the lower right corner and distinguished according to the nodeType icon; Implementation of custom edges: Set defaultEdge to define the default style of edges, encapsulate custom edges loop-dash and line-dash through registerEdge method; Set different types of edges and render different effects according to whether the start and end points of the edge are the same node; Processing of communication mouse interaction events between parent and child components: Effect processing of mouse over and out of nodes and edges, changing node background color and border color when mouse over the node, traversing associated edges to update style; Restore the default style when the mouse moves out; Change the line thickness and color when the mouse hovers over the edge, and restore when the mouse moves out; Update the style after DOM updates through setTimeout delayed execution; Responsive processing and destruction: Based on Vue framework, use watch to listen to the change of topoLogicData in parent component props to get the latest data; Define refreshData method for data rendering and topology drawing after DOM update; Expose the graph instance and refreshData method of the child component through defineExpose; Define windowResizeFn to update and center the topology graph when the view is scaled; Destroy and clear instances when the child component is unloaded.

[0005] Preferably, in the component initialization step, when the fitView attribute is set to true, the graph is automatically scaled according to the range of nodes and edges to ensure that the entire graph is fully displayed in the canvas; When set to false, the graph will not automatically adjust the zoom ratio; When the fitCenter attribute is set to true, the center of the graph will be aligned to the center of the canvas, and it will be used in conjunction with fitView, even if the graph is not scaled, it will also ensure that the graph is displayed centered in the canvas; When the animate attribute is set to true, the graph has a smooth transition effect animation when the layout changes, and when the number of nodes or edges is large, it can be set to false to improve rendering efficiency; The sortByCombo attribute in the layout attribute is set to true to indicate that the current topology combination sorts the nodes, the TB value of rankdir indicates that the layout of the topology graph is from top to bottom, and nodesepFunc and ranksepFunc define the horizontal spacing between nodes and the vertical spacing between levels, respectively.

[0006] Preferably, in the custom node implementation step, the main title text text is added by addShape('text') first, and 14 characters are defined as the upper limit. If it exceeds, it is truncated and an ellipsis is added, otherwise all are displayed. The subtitle text is displayed according to the nodeType. When agent represents the agent, the appid is displayed. The model or component displays the apikey, and the resource displays the corresponding resource pool label according to the mapping relationship table. The main icon and the secondary icon are added by addShape('image'). The main icon is located on the left side inside the node, and the secondary icon is located on the lower right corner inside the node. The img attribute of the main icon is specified by the logoIcon of the node. The img attribute of the secondary icon uses different icons according to the nodeType of the node, and is imported and defined by require to distinguish the name attribute.

[0007] Preferably, in the implementation step of the custom edge, the loop-dash edge in the animate callback function determines whether to use a dashed line according to the configuration when the index value is greater than 0 and less than 9, and sets the dashed line offset, sets the animation to repeat and the duration to 3000 milliseconds. The line-dash edge uses a dashed line mode [4,2,1,2], which represents a solid line of 4px, a blank of 2px, a solid line of 1px, and a blank of 2px. The lineDashOffset produces a left scrolling effect by reducing the offset amount frame by frame. When the start and end points of the edge are the same node, the type of the edge is set to loop-dash, otherwise it is set to line-dash, and the style attribute is set to render different effects.

[0008] Preferably, the dynamic assembly step includes a topology data source, and the specific steps are as follows: Model data assembly: judge whether the value of modelList is valid, if valid, define the data source instanceRelationList of the topology graph, traverse each data of modelList, push the source node and target node to instanceRelationList, the source node contains id, appId, nodeType, logoIcon, content fields, the target node contains id, modelId, nodeType, logoIcon, content fields, add children nodes and assemble new source and target according to resoucreList, the nodeType of the source side is set to model, and the nodeType of the target side is set to resource. Component data assembly: determine whether the value of component componentList is valid, and if so, define the data source instanceRelationList of the topology graph, traverse each data of componentList, and push the source node and target node to instanceRelationList. The source node contains id, appId, nodeType, logoIcon, and content fields, and the target node sets the corresponding fields. The nodeType is set to component. Recursive traversal assembly: recursively traverse the assembly data to achieve the hierarchical relationship of the topology data.

[0009] A system for displaying large model relationships based on angular, including an Angular encapsulation module of a topology graph component, which specifically includes: Topology graph instance object initialization unit: used to initialize the topology graph instance object graph, set the container identifier container, width width, height height, fitView attribute, fitCenter attribute, animate attribute, plugins attribute, modes attribute, layout attribute; Custom node implementation unit: used to define custom node type customNode through registerNode method, describe custom node appearance, content and interaction behavior, including creating a rectangle as a node main shape (addShape(‘rect’) method, setting rectangle properties x, y, width, height, radius, stroke, fill and naming rect-shape, adding main title text (addShape(‘text’) method, processing ellipsis for agent or model name, setting text style properties x, y, textAlign, textBaseline, fill, fontSize, fontWeight and naming label-shape, adding subtitle text, adding main icon (addShape(‘image’) method, setting icon position, width and height, dynamically specifying img attribute, adding secondary icon; Custom edge implementation unit: used to define the default edge style of defaultEdge, and encapsulate the custom edge through registerEdge method, including loop-dash edge and line-dash edge, setting different edge types and style attributes according to whether the start point and end point of the edge are the same; The parent-child component communication and mouse interaction event processing unit is used for processing mouse interaction events of nodes and edges, changing the background color and the border color of the node when the mouse hovers over the node, updating the associated edge style, and restoring the default value when the mouse moves out; changing the line thickness and color when the mouse hovers over the edge, and restoring the default value when the mouse moves out; The responsive processing and destruction unit is used for listening to the change of the topoLogicData of the parent component props through watch, defining the refreshData method for data rendering and topology graph drawing after DOM update, exposing the graph instance and the update method refreshData of the child component through defineExpose, defining the windowResizeFn to realize topology graph update and position center display when the view is zoomed, and performing destruction and instance cleaning of the child component unloading mechanism.

[0010] Preferably, in the custom node implementation unit, the specific way of processing the agent or model name with ellipsis is to define 14 characters as the upper limit, and if it exceeds, it is truncated and an ellipsis is added, otherwise the full name is displayed.

[0011] Preferably, in the custom edge implementation unit, the animation effect of the loop-dash edge is set as follows: when the index value is greater than 0 and less than 9, it is determined according to the configuration whether to use a dashed line, the offset of the dashed line is set, the animation is played repeatedly, and the duration is 3000 milliseconds; the line-dash edge adopts a dashed line mode [4, 2, 1, 2], and the lineDashOffset produces a left scrolling effect by reducing the offset amount frame by frame.

[0012] Preferably, it further includes a dynamic assembly module of the topology data source, and the dynamic assembly module of the topology data source specifically includes: The model data assembly unit is used for judging whether the value of the model modelList is valid, and if valid, defining the topology graph data source instanceRelationList, traversing the modelList, processing each data, assembling the source node and the target node, adding the children child node, assembling new source and target according to the resoucreList, setting the source side nodeType as model, and setting the target side nodeType as resource. The component data assembly unit is used for judging whether the value of the component componentList is valid, and if valid, defining the topology graph data source instanceRelationList, traversing the componentList, processing each data, assembling the source node and the target node, and setting the source side nodeType as component. Recursive traversal assembly unit: assembly data for recursive traversal, reaching the hierarchical relationship of topology data.

[0013] Preferably, in the dynamic assembly module of the topology data source, the id field of the source node and the target node is used to ensure the uniqueness of the data node, the nodeType field is used to represent the type of the current node, the content field is used to represent the name of the current node, and the logoIcon field is used to represent the icon of the current node.

[0014] Compared with the prior art, the beneficial effects of the present application are: The method and system for displaying a large model relationship component based on angular provided by the present application encapsulate reusable topology components through Angular, combine a self-defined node / edge rendering algorithm with a dynamic data assembly method, realize efficient visualization of multi-level topology relationships, and improve system readability and user experience.

[0015] Multi-level relationship visualization: clearly display the tree-shaped / topology of the agent→model→resource pool; dynamic interaction experience: support node / edge hovering highlighting, path focusing, and thumbnail navigation; component reuse: encapsulated through Angular components, support flexible calling in multiple scenarios; data-driven rendering: decouple data assembly and view logic, adapt to the purpose of the application of heterogeneous data structures in the backend. BRIEF DESCRIPTION OF DRAWINGS

[0016] Figure 1 The method flowchart of the present application. DETAILED DESCRIPTION

[0017] In order to make the purpose, technical scheme of the present application clear, complete and more clear and obvious, the embodiments of the present application are further described in detail below in combination with the drawings. It should be understood that the specific embodiments described herein are part of the embodiments of the present application, not all embodiments, and are only used to explain the embodiments of the present application, and do not limit the embodiments of the present application. All other embodiments obtained by those skilled in the art without creative labor are within the scope of protection of the present application.

[0018] Embodiment one, the present application provides a technical scheme: a method for displaying a large model relationship component based on angular, comprising the following steps: I. Angular encapsulation of topology graph component Implementation method: 1. Component initialization, first we initialize the topology graph instance object graph, container for the container identification of the topology graph, and then define the width width and height hight, fitView attribute determines whether the graph is automatically scaled to fit the size of the canvas when initializing, when set to false, the graph will not automatically adjust the scaling ratio, when set to true, the graph will automatically scale according to the range of nodes and edges to ensure that the entire graph is completely displayed in the canvas; The fitCenter attribute determines whether the graph is centered when initializing, set to true, the center of the graph will be aligned to the center of the canvas, this attribute can be used with fitView, even if the graph is not scaled, it can also ensure that the graph is displayed in the center of the canvas, improving user experience; The animate attribute controls the animation effect of the graph, when set to true, the graph will have a smooth transition effect animation when the layout changes (such as node position adjustment or edge rearrangement), the animation effect can improve user experience and make the layout change more intuitive and smooth, for example, when the number of nodes or edges is very large, it can be set to false to improve rendering efficiency, The plugins attribute is used to extend the function implementation of the plug-in, the minimap is used to display the thumbnail of the topology graph, which is convenient for users to quickly locate and navigate, modes define the interactive mode of the graph, in this case we set the defalut mode contains drag-canvas allows users to drag the canvas, layout attribute defines the layout of the graph, determines the arrangement rule of nodes and edges, first the attribute true of sortByCombo indicates that the current topology combination sorts the nodes, the TB value of rankdir indicates that the layout of the topology graph is from top to bottom, nodesepFunc and ranksepFunc define the horizontal spacing between nodes and the vertical spacing between levels respectively, in this case, the fixed values 1 and 10 are defined, of course, reasonable adjustments can be made according to the actual layout relationship.

[0019] 2. Custom node implementation, defaultNode defines the default style of the node, since the nodes in this case need to be displayed diversely, so here set the node type to customNode, set the size and the position of the anchor point, used to connect the edge, this case set [0.5, 0] to represent the top middle position, [0.5, 1] to represent the bottom middle position, just mentioned that this case needs to register custom nodes due to the diversified display of nodes. First, define the node type customNode through the registerNode method, describe the appearance, content and interactive behavior of the custom node, and then we will gradually define the specific definition of the customNode node: 1) Shape keyShape, create a rectangle as the main shape of the node by using the addShape(‘rect’) method, then define the properties of the rectangle, x and y define the position of the rectangle, width and hight define the width and height of the rectangle, radius sets the radius of the node to make the corners of the rectangle more smooth, stroke defines the border color of the rectangle, fill defines the fill color of the rectangle, then we name our rectangle as rect-shape; 2) Main title text text, also added by addShape(‘text’) to add the main title, display the label attribute of the node, this case is too long for the name of the agent or model, so the ellipsis processing is carried out, first define 14 characters as the upper limit, if it exceeds, then truncate and add ellipsis, otherwise display all, the style attributes of the text are as follows: x and y define the position of the text, textAlign and textBaseline set the alignment of the text, here we set the center value to represent the center display, fill to define the color of the text, fontSize to define the size of the font, fontWeight to define the bold style of the text, name the main title as label-shape;3) Subtitle text, the same as the main title, set the position of the subtitle, font size, color, etc. Due to the length of the subtitle, we add the mouse style attribute cursor to achieve the effect of displaying the mouse over. Add a mouse interaction event to the main title and subtitle, that is, the mouse over and out effect. When hovering, a tooltip is displayed, showing the complete apiKey or label. When the mouse moves out, remove the tooltip. In this case, we need to judge according to the node type to display different text. According to the nodeType, we distinguish different display schemes. Agent represents the agent, showing the appid. If it is a model or component, it shows the apiKey. If it is a resource, it shows the corresponding resource pool label according to the mapping table. 4) Icon addition. First, the main icon is added. The main icon in this case is used to display the node icon, so it is placed on the left side of the node. The addShape(‘image’) method is used to add the icon. The x and y coordinates are set to indicate the position of the icon. The width and height indicate the width and height of the icon. The img attribute is dynamically specified by the node's logoIcon. In this case, since the model and component are in the same layer, we add a secondary icon to distinguish between models and components. The same as the main icon, set the position and width and height attributes. In this case, in order to consider the beauty of the style layout, we place it in the lower right corner of the node. The img attribute uses different secondary icons according to the nodeType. Define the logoIconModel variable and the logoIconComponent variable to represent the model secondary icon and the component secondary icon. The icon needs to be imported through require. The main icon and the secondary icon are added with the name attribute to distinguish them. Finally, return the current custom shape keyShape. 3. The implementation of the custom edge defined by defaultEdge defines the default style of the edge, and in this case, the custom edge is processed by defining loop-dash. The style defines the style of the edge, and the endArrow defines the terminal arrow of the edge. In this case, the triangular arrow is used, the width and height are set to 4, the offset is 2, the line width of the edge is set to 2 pixels by lineWidth, and stroke is used to set the color of the edge. Then we will describe how the custom edge loop-dash is packaged: first, the method of registerEdge is used to customize the edge. First, define a new edge type name loop-dash, and inherit the type of edge from loop. Here we set the animation effect to make our dashed edge achieve dynamic effect. First, execute the following method after the edge is drawn, get the shape element of the edge and cache it with the shape variable, index is the initialization index, which is used to calculate the dash offset, then through the animate callback function to set the effect, when the index value is greater than 0 and less than 9, according to the configuration to decide whether to use the dash line, and set the dash offset, also set whether the animation is played repeatedly and the animation duration, the duration of this case is set to 3000 milliseconds; Similarly, we can draw another kind of edge, that is, the quadratic Bezier curve edge with dashed line effect line-dash. The animation effect of the two kinds of edges needs to be added in the life cycle after the edge is drawn. LineDash uses the dashed line mode, and in this case, it uses [4,2,1,2] to represent solid line 4px, blank 2px, solid line 1px, and blank 2px, to achieve the effect of ordered loop edge with interval. Then lineDashOffset reduces the offset by frame to produce the effect of scrolling to the left; The drawing of the two types of edges is to render different edges when the mouse slides over a node. Specifically, when the edge of a node is processed, if the start point and the end point of the edge are the same node, set the type of the edge to loop-dash; Otherwise, set the type of the edge to line-dash, set the style attribute to render different effects, and improve the beautification effect of our topology graph 4. The communication of mouse interaction events between parent and child components. Since the rendering of the static topology graph is a bit too monotonous, the page display is not user-friendly and the experience needs to be improved. In this case, different effects are handled for the mouse-over and mouse-out of the nodes and edges of the graph. First, let's talk about the interaction of the nodes. Specifically, when the mouse hovers over the node, the background color becomes light blue, the border color deepens, and the lines of all associated edges become thicker and change color. Update the style of all associated edges of the node by traversing them using edge.update(), and then update the style using setTimeout() to delay execution until the DOM is updated. When the mouse moves out of the node and edge, the style returns to the default value. The mouse-over processing method is similar to the change of the border and background color, and then the edge interaction. When the mouse hovers over the edge, the line thickness is 3px, and the color remains highlighted. When the mouse moves out, the line thickness is 2px. The method of handling style updates is the same as the node call method. The mouse-over and mouse-out effects are different, and the visual contrast is distinct, improving the friendliness of the interface display 5. Responsive processing and destruction Because we are encapsulated as a child component for the parent component of our interface to call, because the system in this case displays our topology graph in more than one place, we need to handle the transmission of related events and data of the child component to achieve a safe mechanism for data connection and updating. This case is based on the vue framework, so we use some events and lifecycle methods of vue to handle it. First, watch the change of the topoLogicData prop of the parent component to get the data passed from the parent component, so that we can get the latest data to render the topology graph in time. Then define the refreshData method to render the data after DOM update and draw the topology graph. Then expose the graph instance and refreshData method of the child component through defineExpose, so that the parent component can call the refresh method of the topology component to render in time. Then define windowResizeFn to realize the scaling of the view and timely rendering and changing of the topology graph by changing the width and height of the viewport to trigger the update of the topology graph and adjust the position of the topology graph to display in the center. Finally, the destruction and instance cleaning mechanism of the child component needs to be destroyed to release the memory of the computer and optimize the reasonable loading of the component.

[0020] II. Dynamic assembly of topology data source We have assembled the topology component before, and then we will configure the data source of the parent component. Because the interface data of the system is returned according to the model modelList and the component componentList, the topology component cannot be used directly, so we need to modify the data. Next, we will describe the implementation steps: Implementation method: 1. First, judge the validity of the value of modelList. If the value is valid, define the data source instanceRelationList of the topology, iterate through modelList, iterate through each data, and then push instanceRelationList to assemble two keys, source node and target node. The source node has id, appId, nodeType, logoIcon, content, and other necessary field attributes. The target node has id, modelId, nodeType, logoIcon, content, and other fields. Id ensures the uniqueness of the data node. NodeType represents the type of the current node. Content represents the name of the current node. LogoIcon represents the icon of the current node. Then, since the topology needs to support one-to-many relationships, we need to add a children node. Then, the child node assembles new source and target according to resoucreList. The same necessary fields are displayed. This layer assembles the relationship between the model and the resource pool, so the nodeType processing is to set the source side to model and the target side to resource. 2. Judge the validity of the value of componentList. If the value is valid, define the data source instanceRelationList of the topology, iterate through componentList, iterate through each data, and then push instanceRelationList to assemble two keys, source node and target node. The source node has id, appId, nodeType, logoIcon, content, and other necessary field attributes. The target node has the same field settings. NodeType is set to component to distinguish.

[0021] 3. Then, recursively assemble the data to achieve the hierarchical relationship of the topology data.

[0022] Embodiment two, on the basis of embodiment one, proposes a system for large model relationship component display based on angular, including an Angular encapsulation module of a topology graph component, and the Angular encapsulation module of the topology graph component specifically includes: A topology graph instance object initialization unit is configured to initialize a topology graph instance object graph, set a container identifier container, a width width, a height height, fitView attributes, fitCenter attributes, animate attributes, plugins attributes, modes attributes, layout attributes, and the like. A custom node implementation unit is configured to define a custom node type customNode through a registerNode method, describe custom node appearance, content and interaction behavior, include creating a rectangle as a node main shape (addShape(‘rect’) method, setting rectangle attributes x, y, width, height, radius, stroke, fill and naming rect-shape, adding a main title text (addShape(‘text’) method, processing ellipsis for agent or model name, setting text style attributes x, y, textAlign, textBaseline, fill, fontSize, fontWeight and naming label-shape, adding a subtitle text, adding a main icon (addShape(‘image’) method, setting icon position, width and height, dynamically specifying img attribute, and adding a secondary icon. A custom edge implementation unit is configured to define a default edge style of defaultEdge, and encapsulate a custom edge through a registerEdge method, including a loop-dash edge and a line-dash edge, and setting different edge types and style attributes according to whether the start point and the end point of the edge are the same. A parent-child component communication and mouse interaction event processing unit is configured to process mouse interaction events of nodes and edges, change node background color and border color when the node is hovered over by the mouse, update associated edge style, and restore default values when the mouse is moved out; change line thickness and color when the edge is hovered over by the mouse, and restore default values when the mouse is moved out. A responsive processing and destruction unit is configured to listen to changes in the parent component props topoLogicData through watch, define a refreshData method for data rendering and topology graph drawing after DOM update, expose the graph instance and the update method refreshData of the child component through defineExpose, define windowResizeFn to update the topology graph and display the topology graph in the center when the view is zoomed in, and perform destruction and instance clearing of the child component unloading mechanism.

[0023] In the custom node implementation unit, the specific way of processing the agent or model name with ellipsis is as follows: 14 characters are defined as the upper limit, if it exceeds, it is truncated and an ellipsis is added, otherwise all are displayed.

[0024] In the custom edge implementation unit, the animation effect of the loop-dash edge is set as follows: when the index value is greater than 0 and less than 9, it is determined according to the configuration whether to use a dashed line, the dashed line offset is set, the animation is played repeatedly, and the duration is 3000 milliseconds; the line-dash edge adopts a dashed line mode [4, 2, 1, 2], and the lineDashOffset produces a left scrolling effect by reducing the offset amount frame by frame.

[0025] The dynamic assembly module of the topology data source further comprises: The model data assembly unit is used to judge whether the value of the model modelList is valid, and if valid, define the topology graph data source instanceRelationList, traverse the modelList, process each data, assemble the source node and the target node, add the children child node, assemble new source and target according to the resoucreList, set the nodeType of the source side to model, and set the nodeType of the target side to resource; the component data assembly unit is used to judge whether the value of the component componentList is valid, and if valid, define the topology graph data source instanceRelationList, traverse the componentList, process each data, assemble the source node and the target node, and set the nodeType of the source side to component; the recursive traversal assembly unit is used to recursively traverse the assembled data to achieve the hierarchical relationship of the topology data.

[0026] In the dynamic assembly module of the topology data source, the id field of the source node and the target node is used to ensure the uniqueness of the data node, the nodeType field is used to represent the type of the current node, the content field is used to represent the name of the current node, and the logoIcon field is used to represent the icon of the current node.

[0027] Although embodiments of the present application have been shown and described, it is to be understood that various modifications, substitutions, replacements and changes can be made to these embodiments without departing from the principles and spirit of the present application, and the scope of the present application is defined by the appended claims and their equivalents.

Claims

1. A method for displaying large model relationship components based on Angular, characterized in that: The Angular encapsulation steps for the topology graph component are as follows: Component initialization: Initialize the topology graph instance object graph, specify the container identifier container, and define the width and height; set the fitView property to determine whether the graph automatically scales to fit the canvas size during initialization, the fitCenter property to determine whether the graph is centered during initialization, the animate property to control the animation effect when the graph layout changes, the plugins property to extend plugin functionality, modes to define the interaction mode, and the layout property to define the layout method, including the sortByCombo, rankdir, nodesepFunc, and ranksepFunc parameter settings; Custom node implementation: Set defaultNode to define the default style of the node as customNode, and set the size and anchor point position; define customNode using the registerNode method, including shape keyShape, main title text text, subtitle text, and icon added inside the node on the left side. Similarly, add the sub-icon to the lower right corner and distinguish the icon according to nodeType. Custom edge implementation: Set the defaultEdge to define the default style of the edge, and encapsulate the custom edge loop-dash and line-dash using the registerEdge method; set different types of edges and render different effects based on whether the start and end points of the edge are the same node; Handling mouse interaction events for communication between parent and child components: Process mouse hover and hover effects on nodes and edges; change the background color and border color of a node when the mouse hovers over it, and update the style by traversing associated edges; restore the default style when the mouse moves away; change the line thickness and color when the mouse hovers over an edge, and restore them when the mouse moves away; use setTimeout to delay execution and wait for the DOM to update the style. Reactive processing and destruction: Based on the Vue framework, watch is used to listen for changes in the parent component's props' topologyLogicData and obtain the latest data; the refreshData method is defined to render the data and draw the topology graph after the DOM is updated; the graph instance and refreshData method of the child component are exposed by defineExpose; windowResizeFn is defined to update the topology graph and center the display when the view is scaled; and destruction and instance cleanup are performed when the child component is unloaded.

2. The method for displaying a large model relationship component based on Angular according to claim 1, characterized in that: In the component initialization step, when the `fitView` property is set to `true`, the graphic automatically scales according to the range of nodes and edges to ensure that the entire graphic is fully displayed within the canvas; when set to `false`, the graphic will not automatically adjust the scaling ratio. When the `fitCenter` property is set to `true`, the center of the graphic will be aligned with the center of the canvas. When used in conjunction with `fitView`, it ensures that the graphic is centered in the canvas even without scaling. When the `animate` property is set to `true`, the graphic has a smooth transition animation when the layout changes. When there are many nodes or edges, it can be set to `false` to improve rendering efficiency. The `sortByCombo` property in the `layout` property is set to `true` to indicate that the nodes are sorted according to the current topology combination. The `TB` value of `rankdir` indicates that the layout of the topology graph is from top to bottom. `nodesepFunc` and `ranksepFunc` define the horizontal spacing between nodes and the vertical spacing between levels, respectively.

3. The method for displaying a large model relationship component based on Angular according to claim 2, characterized in that: In the custom node implementation steps, the main title text `text` is added using `addShape('text')`, initially capped at 14 characters. If it exceeds this limit, it is truncated and an ellipsis is added; otherwise, the full text is displayed. The subtitle text is differentiated based on `nodeType`: `appid` is displayed for `agent` (representing an agent), `apikey` for `model` or `component`, and the resource pool tag corresponding to the mapping table is displayed for `resource`. The main and sub-icons are added using `addShape('image')`. The main icon is positioned on the left side of the node, and the sub-icon is positioned on the bottom right corner. The `img` attribute of the main icon is specified by the node's `logoIcon`, while the `img` attribute of the sub-icon uses different icons based on the node's `nodeType`, distinguished by importing them using `require` and defining the `name` attribute.

4. The method for displaying a large model relationship component based on Angular according to claim 3, characterized in that: In the implementation steps of the custom edge, the loop-dash edge, in the animate callback function, determines whether to use a dashed line based on the configuration when the index value is greater than 0 and less than 9, and sets the dashed line offset, while setting the animation repeat playback and duration to 3000 milliseconds; the line-dash edge adopts the dashed line mode [4,2,1,2], which respectively represent a solid line of 4px, a blank space of 2px, a solid line of 1px, and a blank space of 2px. lineDashOffset produces a leftward scrolling effect by reducing the offset frame by frame; when the start and end points of the edge are the same node, the edge type is set to loop-dash, otherwise it is set to line-dash, and the style attribute is set to render different effects.

5. The method for displaying a large model relationship component based on Angular according to claim 4, characterized in that: The dynamic assembly steps, including the topology data source, are as follows: Model data assembly: Determine if the value of modelList is valid. If valid, define the data source instanceRelationList for the topology graph. Iterate through each data item in modelList and push source and target nodes into instanceRelationList. The source node contains id, appId, nodeType, logoIcon, and content fields. The target node contains id, modelId, nodeType, logoIcon, and content fields. Add child nodes and assemble new source and target nodes according to resourceList. Set nodeType to model on the source side and set it to resource on the target side. Component data assembly: Determine if the value of componentList is valid. If valid, define the data source instanceRelationList of the topology graph, traverse each data item in componentList, and push the source node and target node into instanceRelationList. The source node contains id, appId, nodeType, logoIcon, and content fields. The target node sets the corresponding fields, and nodeType is set to component. Recursive traversal assembly: Recursively traverse and assemble the data to achieve the hierarchical relationship of the topological data.

6. A system for displaying large model relationship components based on Angular, using the method described in claim 5, characterized in that: This includes an Angular wrapper module for the topology graph component, specifically comprising: Topology graph instance object initialization unit: Used to initialize the topology graph instance object graph, setting the container identifier, width, height, fitView property, fitCenter property, animate property, plugins property, modes property, and layout property; Custom node implementation unit: Used to define a custom node type `customNode` through the `registerNode` method, describing the appearance, content, and interactive behavior of the custom node. This includes creating a rectangle as the main shape of the node (using the `addShape('rect')` method, setting the rectangle's properties `x`, `y`, `width`, `height`, `radius`, `stroke`, and `fill` and naming it `rect-shape`), adding main title text (using the `addShape('text')` method, adding ellipses to the agent or model name, setting the text style properties `x`, `y`, `textAlign`, `textBaseline`, `fill`, `fontSize`, and `fontWeight` and naming it `label-shape`), adding subtitle text, adding a main icon (using the `addShape('image')` method, setting the icon's position, width, height, and dynamically specifying the `img` attribute), and adding a secondary icon; Custom edge implementation unit: used to define the default edge style of defaultEdge. Custom edges are encapsulated through the registerEdge method, including loop-dash edges and line-dash edges. Different edge types and style attributes are set according to whether the start and end points of the edge are the same. Parent-child component communication and mouse interaction event handling unit: Used to handle mouse interaction events of nodes and edges. When the mouse hovers over a node, it changes the node's background color and border color, updates the style of associated edges, and restores the default values ​​when the mouse moves away; when the mouse hovers over an edge, it changes the line thickness and color, and restores the default values ​​when the mouse moves away. Reactive processing and destruction unit: Used to listen for changes in the parent component's props' topoLogicData via watch, define the refreshData method to render data and draw the topology graph after DOM updates, expose the child component's graph instance and update method refreshData by defineExpose, define windowResizeFn to update the topology graph and center its position when the view is scaled, and perform destruction and instance cleanup by the child component unloading mechanism.

7. A large model relationship component display system based on Angular according to claim 6, characterized in that: In the custom node implementation unit, the specific method for handling ellipses in agent or model names is as follows: set a limit of 14 characters; if it exceeds this limit, truncate the name and add an ellipsis; otherwise, display the full name.

8. A large model relationship component display system based on Angular according to claim 7, characterized in that: In the custom edge implementation unit, the animation effect of the loop-dash edge is set as follows: when the index value is greater than 0 and less than 9, the dashed line is used according to the configuration. The dashed line offset is set, the animation repeats, and the duration is 3000 milliseconds. The line-dash edge adopts the dashed line mode [4,2,1,2]. The lineDashOffset produces the effect of scrolling to the left by reducing the offset frame by frame.

9. A large model relationship component display system based on Angular according to claim 8, characterized in that: It also includes a dynamic assembly module for topology data sources, which specifically includes: Model data assembly unit: Used to determine whether the value of modelList is valid. If it is valid, define the topology graph data source instanceRelationList, traverse modelList, process each data, assemble source node and target node, add child nodes, assemble new source and target according to resourceList, set nodeType on the source side to model, and set nodeType on the target side to resource. Component data assembly unit: Used to determine whether the value of componentList is valid. If it is valid, define the topology graph data source instanceRelationList, traverse componentList, process each data item, assemble the source node and target node, and set the nodeType of the source side to component. Recursive traversal assembly unit: Used to assemble data for recursive traversal to achieve the hierarchical relationship of topological data.

10. A large model relationship component display system based on Angular according to claim 9, characterized in that: In the dynamic assembly module of the topology data source, the id field of the source node and the target node is used to ensure the uniqueness of the data node, the nodeType field is used to indicate the type of the current node, the content field is used to indicate the name of the current node, and the logoIcon field is used to indicate the icon of the current node.

Images