Method and device for realizing topology interaction of service system based on SVG technology, and computer equipment

Abstract

The embodiment of the invention discloses a method and a device for realizing topology interaction of a service system based on an SVG (Scalable Vector Graphics) technology, and computer equipment. The method comprises the following steps: acquiring a request for initiating topological statistics of a service system through a front-end interface; analyzing the request and returning formatted statistical data; and distributing the statistical data to related components by utilizing a React Context API (Application Program Interface), so that a browser dynamically updates a UI (User Interface) according to the received statistical data to display the latest topological information of the service system. By implementing the method provided by the embodiment of the invention, higher customization space and safety guarantee can be provided by completely controlling component details.

Description

Technical Field

[0001] The present invention relates to a method for topological interaction of business systems, and more specifically to a method, apparatus, and computer device for realizing topological interaction of business systems based on SVG technology. Background Art

[0002] With the rapid development of information technology, various graphic display and interaction technologies have been widely used. Graphic display solutions, especially in the fields of data visualization, interaction design, etc., have received extensive attention and application. To meet the requirements in different scenarios, there are various solutions in the prior art, including open-source components. Among them, open-source components such as AntV G6 and Three.js are widely used in the development of graphics and 3D visualization. These components are applicable to a variety of application scenarios due to their generality and powerful functions, but they also introduce a certain degree of complexity, resulting in a relatively high learning cost for developers during use. Open-source components usually contain a large number of general functions, and developers may need to deeply study their usage methods and internal implementations in order to effectively apply them according to specific requirements. At the same time, these open-source components have certain limitations in customization. Especially in scenarios with specific requirements, it may be difficult to fully customize and optimize their underlying logic. In addition, open-source components often involve third-party libraries and dependencies, especially packages obtained through channels such as npm. These external dependencies may bring certain security risks. Taking the npm package poisoning incident as an example, malicious code may sneak into the application through the update of these external dependency libraries, posing a potential threat to system security. Therefore, when using open-source components, developers need to pay extra attention to their security and dependency management issues. When integrating with existing projects, open-source components may also have certain code compatibility issues. Due to the frequent updates of external components and the large number of versions of third-party libraries relied on by the project, version conflicts or interface incompatibilities may occur during integration, affecting the stability and maintainability of the project.

[0003] Therefore, it is necessary to design a new method to provide a higher customization space and security guarantee by fully controlling component details. Summary of the Invention

[0004] The purpose of the present invention is to overcome the defects of the prior art and provide a method, apparatus, and computer device for realizing topological interaction of business systems based on SVG technology.

[0005] To achieve the above purpose, the present invention adopts the following technical solutions: A method for realizing topological interaction of business systems based on SVG technology, including: Obtain a request for business system topology statistics initiated through a front-end interface; Parse the request and return formatted statistical data; Use the React Context API to distribute the statistical data to relevant components, so that the browser can dynamically update the UI according to the received statistical data to display the latest business system topology information.

[0006] A further technical solution thereof is: the request includes request parameters. When a user selects a business system or sets query conditions on the front-end interface, the front-end captures the user's operation, constructs request parameters according to the operation, and sends the request parameters through an HTTP request.

[0007] A further technical solution thereof is: parsing the request and returning formatted statistical data, including: Parsing the request and performing queries and retrievals according to the results of the parsing to obtain query results; Performing a formatting conversion on the query results to obtain formatted statistical data; Returning the formatted statistical data to components related to the front end.

[0008] A further technical solution thereof is: parsing the request and performing queries and retrievals according to the results of the parsing to obtain query results, including: Parsing the URL of the request and extracting query fields therefrom; Retrieving asset information related to the business system from the database according to the query fields to obtain query results.

[0009] A further technical solution thereof is: performing a formatting conversion on the query results to obtain formatted statistical data, including: Converting the query results into a JSON array adapted for front-end interface display to obtain formatted statistical data; wherein each array element in the JSON array represents detailed information about a node or an edge and includes the parent-child relationship between nodes.

[0010] A further technical solution thereof is: the query results include a list of nodes related to the business system, connection relationships, and performance metrics.

[0011] A further technical solution thereof is: using the React Context API to distribute the statistical data to relevant components, so that the browser can dynamically update the UI according to the received statistical data to display the latest business system topology information, including: Using the React Context API, create a TopologyContext within the NodeTable component and use the Provider to pass the statistical data to child components, enabling the browser to automatically detect component state changes based on the received statistical data using the React framework and perform minimal DOM updates, redrawing the interface to display the updated business system topology structure.

[0012] Its further technical solution is as follows: The method of using the React Context API to create a TopologyContext within the NodeTable component and use the Provider to pass the statistical data to child components, enabling the browser to automatically detect component state changes based on the received statistical data using the React framework and perform minimal DOM updates, redrawing the interface to display the updated business system topology structure, includes: Create a context instance named TopologyContext inside the NodeTable component, and use the TopologyContext.Provider tag to wrap the child components that need to access the context instance data. Manage the statistical data through the useState hook, store the statistical data in a state variable, and pass the state variable as the value property of the Provider component, enabling the browser to automatically detect component state changes based on the received statistical data using the React framework and perform minimal DOM updates, redrawing the interface to display the updated business system topology structure.

[0013] The present invention also provides a device for implementing business system topology interaction based on SVG technology, including: A request acquisition unit for acquiring a request for business system topology statistics initiated through the front-end interface; A parsing and returning unit for parsing the request and returning formatted statistical data; A distribution unit for distributing the statistical data to relevant components using the React Context API, enabling the browser to dynamically update the UI based on the received statistical data to display the latest business system topology information.

[0014] The present invention also provides a computer device, which includes a memory and a processor. A computer program is stored on the memory, and when the processor executes the computer program, the above-mentioned method is implemented.

[0015] The beneficial effects of the present invention compared with the prior art are as follows: The present invention initiates a business system topology statistics request through the front-end interface and parses the request to return formatted statistical data, enabling the system to accurately respond to user requirements; these data are distributed to relevant components using the React Context API, ensuring efficient and direct data flow between components, reducing the dependence on external libraries, and thus enhancing security; this approach allows developers to fully control component details, including data flow and UI update logic, providing a higher degree of customization to meet the needs of specific business scenarios; since all code is written and maintained by the team itself and can be adjusted as needed, security reviews can be conducted regularly to further enhance the security of the system; finally, this method enables the browser to dynamically update the UI based on the latest statistical data, display the latest business system topology information, and provide a smooth and personalized user experience.

[0016] The following further describes the present invention in conjunction with the accompanying drawings and specific embodiments. Description of the Drawings

[0017] In order to more clearly illustrate the technical solutions of the embodiments of the present invention, the accompanying drawings required for the description of the embodiments will be briefly introduced below. Obviously, the accompanying drawings in the following description are some embodiments of the present invention. For those of ordinary skill in the art, without creative efforts, other drawings can be obtained based on these drawings.

[0018] Figure 1 It is a schematic diagram of the application scenario of the method for implementing business system topology interaction based on SVG technology provided by the embodiment of the present invention; Figure 2 It is a schematic flowchart of the method for implementing business system topology interaction based on SVG technology provided by the embodiment of the present invention; Figure 3 It is a schematic sub-flowchart of the method for implementing business system topology interaction based on SVG technology provided by the embodiment of the present invention; Figure 4 It is a schematic sub-flowchart of the method for implementing business system topology interaction based on SVG technology provided by the embodiment of the present invention; Figure 5 It is a schematic block diagram of the device for implementing business system topology interaction based on SVG technology provided by the embodiment of the present invention; Figure 6 It is a schematic block diagram of the parsing and returning unit of the device for implementing business system topology interaction based on SVG technology provided by the embodiment of the present invention; Figure 7 It is a schematic block diagram of the query sub-unit of the device for implementing business system topology interaction based on SVG technology provided by the embodiment of the present invention; Figure 8 Schematic block diagram of a computer device provided by an embodiment of the present invention. Detailed implementation manners

[0019] Next, the technical solutions in the embodiments of the present invention will be clearly and completely described in conjunction with the accompanying drawings in the embodiments of the present invention. Obviously, the described embodiments are part of the embodiments of the present invention, rather than all the embodiments. Based on the embodiments of the present invention, all other embodiments obtained by those of ordinary skill in the art without creative efforts shall fall within the protection scope of the present invention.

[0020] It should be understood that when used in this specification and the appended claims, the terms "include" and "comprise" indicate the presence of the described features, wholes, steps, operations, elements, and / or components, but do not exclude the presence or addition of one or more other features, wholes, steps, operations, elements, components, and / or their combinations.

[0021] It should also be understood that the terms used in this specification of the present invention are only for the purpose of describing specific embodiments and are not intended to limit the present invention. As used in this specification of the present invention and the appended claims, unless the context clearly indicates otherwise, the singular forms "a", "an", and "the" are intended to include the plural forms.

[0022] It should be further understood that the term " / and" used in this specification of the present invention and the appended claims refers to any combination and all possible combinations of one or more of the related listed items, and includes these combinations.

[0023] Please refer to Figure 1 and Figure 2 , Figure 1 Schematic diagram of an application scenario of a method for implementing business system topology interaction based on SVG technology provided by an embodiment of the present invention. Figure 2 Schematic flowchart of a method for implementing business system topology interaction based on SVG technology provided by an embodiment of the present invention. The method for implementing business system topology interaction based on SVG technology is applied to a server. The server performs data interaction with relevant components, a browser, and a front-end interface, obtains a business system topology statistics request initiated by a user from the front-end interface, and constructs corresponding request parameters according to the user's operations, ensuring the accuracy and flexibility of data interaction; in the request parsing stage, by extracting query fields and performing database retrieval to obtain asset information related to the business system, ensuring the accuracy and timeliness of the data source; formatting and converting the query results to generate a JSON array adapted for front-end display, enhancing the readability and usability of the data, and at the same time supporting the expression of complex relationships between nodes; using the React Context API in <nodetable>Create a TopologyContext context instance within the component, which realizes the efficient distribution of statistical data and reduces the complexity of direct communication between components; use Provider to pass the statistical data to child components, allowing child components at any level to directly access the data in the context without additional state management or props drilling, simplifying the data flow management; child components use the useContext hook to access the statistical data in the context, enabling the components to dynamically update the UI according to the received data and display the latest business system topology information, enhancing the user experience; the React framework automatically detects component state changes and performs minimal DOM updates, only re-rendering the affected parts, improving the application performance and response speed; the entire process ensures the security and integrity of data through strict front-end and back-end separation and encrypted data transmission, providing users with a flexible and secure customization environment.

[0024] Figure 2 It is a schematic flowchart of the method for realizing business system topology interaction based on SVG technology provided by an embodiment of the present invention. As Figure 2 shown, the method includes the following steps S110 to S130.

[0025] S110. Obtain a request for business system topology statistics initiated through the front-end interface.

[0026] In this embodiment, a request refers to an HTTP request sent from the front-end (client) to the back-end server for the purpose of obtaining or operating on specific data resources. Specifically, it particularly refers to an information request initiated from the user interface for querying the specific business system topology structure.

[0027] Specifically, the request includes request parameters. Among them, when the user selects a business system or sets query conditions on the front-end interface, the front-end captures the user's operation, constructs request parameters according to the operation, and sends the request parameters through an HTTP request.

[0028] When the user selects a specific business system or sets specific query conditions (such as asset name, asset type, etc.) on the front-end interface, the front-end application captures these user actions.

[0029] Construct request parameters: Based on the user's operation, the front-end application will automatically construct a set of request parameters. These parameters may include but are not limited to: Business system ID: Identifies the business system that the user is interested in.

[0030] Asset name: The specific asset name that the user wants to query.

[0031] Asset type: The type of assets that the user is concerned about, such as hardware devices, software applications, etc.

[0032] Send request parameters: Once constructed, these parameters will be encapsulated into an HTTP request and transmitted over the network to the server for processing.

[0033] The main purpose of this request is to retrieve all necessary information related to a specified business system from the server, including but not limited to node lists, connection relationships, performance metrics, etc., in order to display them graphically to the user at the front end. This process not only supports precise data retrieval but also provides an intuitive way for users to understand and manage complex business system topologies.

[0034] In this way, the system can dynamically generate and update the business system topology diagram according to the specific needs of the user, thus providing a more personalized and efficient user experience. At the same time, this also ensures the real-time and accuracy of data, enhancing the flexibility and response ability of the system.

[0035] S120. Parse the request and return formatted statistical data.

[0036] In this embodiment, the formatted statistical data refers to processing and converting the query results so that the front-end interface can efficiently display this data.

[0037] The query results refer to the relevant data set retrieved from the database on the server according to the request parameters received from the front end (such as business system ID, asset name, asset type, etc.). Specifically, these query results include but are not limited to the following: Node list: Contains all node information in the business system, and each node may represent a specific asset or resource.

[0038] Connection relationship: Describes the association relationships between various nodes, such as physical connections, logical dependencies, or other types of associations.

[0039] Performance metrics: Provide data on the operating status and performance of each node or the entire system, such as response time, load level, etc.

[0040] In one embodiment, please refer to Figure 3 , the above step S120 may include steps S121 to S123.

[0041] S121. Parse the request and perform queries and retrievals based on the parsed results to obtain query results.

[0042] In this embodiment, the query results include a node list, connection relationship, and performance metrics related to the business system.

[0043] In one embodiment, please refer to Figure 4 Specifically, step S121 described above may include steps S1211 to S1212.

[0044] S1211. Parse the URL of the request and extract the query fields therefrom. S1212. Retrieve asset information related to the business system from the database according to the query fields to obtain a query result.

[0045] The server first parses the HTTP request received from the front end and extracts the query fields therein (such as businessId, name, type, etc.). Using these query fields as conditions, relevant business system asset information is retrieved from the database. Based on the above query conditions, the server will obtain a series of information from the database, including but not limited to a node list, connection relationships, and performance metrics, etc.

[0046] S122. Perform a formatting conversion on the query result to obtain formatted statistical data.

[0047] In this embodiment, the query result is converted into a JSON array adapted for front-end interface display to obtain formatted statistical data; wherein, each array element in the JSON array represents the detailed information of a node or an edge and includes the parent-child relationship between the nodes.

[0048] Specifically, the query result is converted into a JSON array format suitable for front-end display. Each array element represents the specific information of a node or an edge, including but not limited to: Node information: such as node ID, name, type, location coordinates, etc.

[0049] Edge information: that is, the connection relationship between nodes, including the starting node ID, ending node ID, connection type, etc.

[0050] Parent-child relationship: Clearly indicate which nodes are parent nodes and which are child nodes, which is crucial for constructing a hierarchical structure diagram.

[0051] This format is not only convenient for direct use by the front end but also ensures the clarity and readability of the data.

[0052] S123. Return the formatted statistical data to the front-end related components.

[0053] In this embodiment, finally, the server sends the formatted statistical data back to the front end through an HTTP response <nodetable>Components for further processing and display.

[0054] In this way, the system not only realizes the closed-loop data flow from the front end to the back end and then back to the front end, but also ensures the accuracy and real-time nature of the data, enhancing the user experience. In addition, the use of the JSON format for data exchange makes the system highly scalable and maintainable, supporting more complex application scenarios and technical implementations.

[0055] Specifically, when the user selects a specific business system or sets query conditions (such as asset name, asset type, etc.) on the front-end interface and triggers a data request by clicking the "Query" button, the front-end application constructs an HTTP request containing this information and sends it to the server.

[0056] After receiving this request, the server first parses the request URL to extract query parameters such as businessId, name, type, etc. These parameters will serve as the basis for subsequent database queries.

[0057] Using the query parameters extracted in the previous step, the server performs corresponding query operations in its database to obtain all the necessary information related to the selected business system.

[0058] This information typically includes, but is not limited to, a list of nodes (each node may represent a specific asset in the system), connection relationships (describing how the various nodes are associated), and performance metrics (providing data on the operating status and efficiency of each node or the entire system).

[0059] After the retrieval is complete, the server needs to process the original query results and convert them into a form suitable for front-end display - namely, the JSON array format. There are several purposes for doing this: Ensure that the data structure is clear and easy to understand, facilitating direct use by the front end.

[0060] Each element represents the specific information of a node or an edge, which helps to accurately present the details in the topology diagram. It includes the parent-child relationships between nodes, which is crucial for correctly displaying the hierarchical structure.

[0061] Return the data to the front-end components via an HTTP response: Finally, the server encapsulates the formatted data in an HTTP response and sends it back to the specified front end. <nodetable>Component

[0062] After the front end receives this data, it can immediately start rendering the view to show the user the latest business system topology structure.

[0063] Such a step, the data flow processing process directly from the front end to the back end and then to the front end, ensures the ability to quickly respond to user requests and improves the user experience. Using the JSON format for data exchange not only simplifies the communication between the front and back ends, but also improves the readability and maintainability of the code. By clearly distinguishing the information of nodes and edges and considering the parent-child relationship between nodes, a complex topology structure can be displayed more accurately. The server side processes the query parameters and executes database queries in a secure environment, reducing the possibility of security risks such as SQL injection. This process supports easily adding new query conditions or display options without significantly modifying the existing architecture, enhancing the adaptability and scalability of the system.

[0064] S130. Use the React Context API to distribute the statistical data to relevant components, so that the browser dynamically updates the UI according to the received statistical data to display the latest business system topology information.

[0065] In this embodiment, the latest business system topology information refers to: A list of nodes and connection relationships that are updated in real time: This information includes, but is not limited to, the identifiers of each node (such as businessId, name, type, etc.), the connection methods between them, and the possible parent-child relationships.

[0066] In addition to the basic structural information, it also includes data on the running status and efficiency of each node or the entire system, such as response time, load conditions, etc., which are crucial for monitoring the health of the system.

[0067] Based on the above data, a highly customizable graphical display implemented through SVG technology can not only accurately present the current topology structure, but also dynamically adjust the display content according to user interactions (such as queries, filters) to provide instant feedback.

[0068] In this embodiment, use the React Context API to create a TopologyContext within the NodeTable component and use the Provider to pass the statistical data to child components, so that the browser automatically detects changes in the component state according to the received statistical data and performs a minimized DOM update, redrawing the interface to display the updated business system topology structure.

[0069] Specifically, a context instance named TopologyContext is created inside the NodeTable component, and the sub-components that need to access the context instance data are wrapped with the TopologyContext.Provider tag. The statistical data is managed through the useState hook, stored in a state variable, and the state variable is passed as the value attribute of the Provider component, so that the browser automatically detects component state changes and performs minimal DOM updates based on the received statistical data, and redraws the interface to display the updated business system topology structure.

[0070] In this embodiment, in order to ensure that each component can efficiently and accurately obtain and display the latest business system topology information, the React Context API is adopted as the data transmission mechanism. Specifically, first, in <nodetable>Create a context instance named TopologyContext inside the component. This context will be used to share data related to the business system topology across the entire component tree. Next, wrap the child components that need to access the context data with the <TopologyContext.Provider> tag. In this way, all the wrapped child components can directly access the data in TopologyContext without having to manually pass props downwards. The statistical data returned by the server is encapsulated in a state variable, which is managed using React's useState hook. This state variable contains all the necessary business system topology information, and its value is passed as the value prop to the Provider component. In this way, any update to the state will automatically be reflected in all components that listen to this context. Child components can directly access the data in the context by calling the useContext(TopologyContext) hook. For example, <flyline>The component can extract the required data from it to calculate the angle and color of the fly line, and then render the fly line representing the association relationship between nodes.

[0071] In summary, the adoption of the React Context API not only simplifies the data transfer process between cross-level components, improves the maintainability and scalability of the code, but also ensures that the front-end application can promptly reflect the latest changes in the back-end database, providing users with a real-time updated and highly interactive topological view of the business system. This enables users to see the most accurate and timely state of the business system on the interface, thus making more informed decisions.

[0072] Specifically, the virtual DOM is one of the core concepts of React. It is a lightweight JavaScript object tree, which is a copy of the real DOM in memory. Whenever the state or properties of a component change, React will create a new virtual DOM tree and compare it with the old version (this process is called "differencing" or simply the "diff algorithm" for short). Through this comparison, React can accurately determine which parts of the UI need to be updated.

[0073] In React, each component can have its own state. When the state changes, React will automatically trigger the re-rendering of the component. However, not all state changes will cause the entire page to redraw. React only performs minimal DOM operations on those parts that actually change. This means that if only the state of a small widget changes, React will only update the DOM node corresponding to that widget, rather than the entire page, which greatly improves performance.

[0074] Diff algorithm: React uses a process called "reconciliation" to compare the differences between the new and old virtual DOM trees. During this process, React will try to reuse existing DOM nodes as much as possible, thus reducing unnecessary DOM operations. To further improve efficiency, React will also merge multiple state updates into one batch update, so that multiple changes can be processed at once, reducing the number of direct DOM operations.

[0075] Once React has completed the necessary minimal DOM updates, the browser will redraw the view based on these updates. What is involved here is how the browser parses HTML, CSS, and JavaScript and finally presents the visual effects that users can see. Due to React's efficient update mechanism, users can almost instantly see the changes reflecting the latest data state on the interface. For example, in the display of the topology of a business system, any new connections, deleted connections between nodes, or changes in the information of the nodes themselves can be quickly reflected on the user interface. Fast and smooth UI updates help improve the user experience and make the interaction more fluent and natural. This is particularly important in application scenarios where data changes frequently, such as real-time monitoring systems or dynamic network topology diagrams.

[0076] In summary, by combining the virtual DOM mechanism and intelligent DOM operation strategies, React not only ensures the high-performance operation of the application but also provides a very intuitive and responsive user interface experience.

[0077] In this embodiment, the SVG technology is adopted during rendering. The flexibility of the SVG technology enables a very high degree of customization of graphics and components. Through SVG, developers can precisely control the styles, positions, colors, curvatures, transparencies, and other attributes of each element, support dynamic changes and animation effects, and can easily achieve personalized design requirements. In topology diagrams, flowcharts, or interactive graphics, the high customizability of SVG can precisely meet different visual effect and interaction behavior requirements, far exceeding traditional picture or CSS style solutions.

[0078] Component-based design makes SVG graphics very efficient in maintenance and extension. Custom SVG flying line components can be extended in a modular way, enabling new functions, styles, and interactions to be added without affecting the original functions, enhancing the flexibility and security of the system. For example, by extending SVG graphic components, it is possible to implement dynamic graphic displays based on user query behaviors, providing real-time feedback on user needs, thereby improving security and accuracy and reducing the risk of data leakage or incorrect operations. In addition, self-developed SVG flying lines can eliminate potential security hazards brought by external libraries, ensuring code security and reducing the risk of external dependencies.

[0079] Through custom SVG flying line components, automatic filling, real-time suggestions, and dynamic interactions can be achieved, reducing the workload of developers when implementing these functions. Developers do not need to write complex graphic rendering code from scratch. The flexibility and programmability provided by SVG make it easier to implement customized requirements.

[0080] The encapsulated SVG fly-line component can be reused multiple times, avoiding repeated development, improving development efficiency, and simplifying maintenance work. Developers only need to call and customize existing components when needed.

[0081] The efficient rendering of SVG makes it particularly suitable for real-time data visualization and interactive applications. SVG can efficiently render graphics in the browser, especially in scenarios that require frequent updates or dynamic changes. By minimizing DOM operations and graphics rendering, it ensures that the system remains responsive during user interactions. In complex business topology diagrams or data flow displays, the lightweight rendering provided by SVG can quickly respond to user input and operations, ensuring that users receive real-time feedback when querying and operating, enhancing the experience and efficiency.

[0082] Although SVG technology is based on XML, it is very suitable for rendering small to medium-sized data sets. When faced with a large number of nodes, edges, and complex structures, SVG can effectively handle the rendering of large data volumes through optimization algorithms such as progressive loading and deferred rendering. The graphics processing ability of SVG is particularly important when rendering large-scale topology diagrams and relationship diagrams. For big data application scenarios such as data monitoring and data synchronization, SVG enables the system to update a large amount of graphic data in a short time, ensuring that users do not lose key information during real-time queries and guaranteeing the efficiency and accuracy of operations.

[0083] The application of SVG in the front-end field is very extensive, not limited to the display of icons and charts. It has great application potential in scenarios such as business system topology diagrams, data flow diagrams, data monitoring, and system operation flowcharts. In database operation and maintenance, SVG can display business processes such as data backup, data migration, and data synchronization, clearly expressing the direction and relationship of data flows and operation flows. SVG also has extensive applications in multiple fields such as real-time data visualization, user behavior analysis, and dynamic map displays. Its high performance, customizability, and flexibility enable it to support various data display requirements, providing users with a clear graphical interface and a smooth operation experience.

[0084] By encapsulating complex graphics rendering logic, developers only need to call a few APIs to create interactive effects without having to deeply understand the knowledge of underlying graphics libraries.

[0085] Developers can quickly generate fly-lines using the createFlyLine() method without having to master the specific working principle of SVG.

[0086] Supports developers to adjust attributes such as the color, shape, and animation of fly-lines through configuration files or programming interfaces to meet specific business requirements. Simply setting flyLineColor:'red' can change the color of all fly-lines to red.

[0087] The team writes and maintains all the code by itself and conducts regular security reviews to avoid security vulnerabilities that may be introduced by third - party libraries. Before each release, static code analysis tools are used for a comprehensive scan to identify and fix potential security issues in a timely manner.

[0088] It follows Web standards and is built based on the React framework to ensure good compatibility with most front - end environments.

[0089] Dynamically adjust the position, size, and style of interface elements according to user behavior to simplify the operation process; at the same time, optimize performance to reduce latency. When the mouse hovers over a node and the "View Details" button is clicked, a details information window will pop up, facilitating users to obtain the required data.

[0090] In summary, the method of this embodiment has made remarkable progress in reducing the learning threshold, enhancing customization flexibility, improving security, increasing code compatibility, and optimizing the user experience by encapsulating self - developed components. Compared with existing open - source graphics libraries, our solution provides higher flexibility and control, especially in handling complex interaction effects and graphic customization, and can better respond to business requirements. Rendering the business system topology using SVG technology not only ensures a high degree of customization and security but also achieves excellent performance, ensuring cross - platform compatibility and long - term stability of the project. This innovative solution uses SVG technology to provide a flexible and customizable rendering method for the business system topology, with good componentization and reusability, which helps to reduce repetitive development work and improve development efficiency.

[0091] Through the above content, the method of this embodiment not only improves the user experience and development efficiency but also ensures the security and flexibility of the system, meeting the requirements of various complex application scenarios.

[0092] The above - mentioned method for implementing business system topology interaction based on SVG technology initiates a business system topology statistics request through the front - end interface and parses the request to return formatted statistical data, enabling the system to accurately respond to user needs; uses the React Context API to distribute this data to relevant components, ensuring efficient and direct data flow between components, reducing the dependence on external libraries, and thus enhancing security; this approach allows developers to have full control over component details, including data flow and UI update logic, providing a higher customization space to meet the requirements of specific business scenarios; since all the code is written and maintained by the team itself and can be adjusted as needed, regular security reviews can be conducted to further enhance the security of the system; finally, this method enables the browser to dynamically update the UI according to the latest statistical data, display the latest business system topology information, and provide a smooth and personalized user experience.

[0093] Figure 5 It is a schematic block diagram of an apparatus 300 for implementing business system topology interaction based on SVG technology provided by an embodiment of the present invention. As Figure 5 shown, corresponding to the above method for implementing business system topology interaction based on SVG technology, the present invention also provides an apparatus 300 for implementing business system topology interaction based on SVG technology. The apparatus 300 for implementing business system topology interaction based on SVG technology includes units for executing the above method for implementing business system topology interaction based on SVG technology, and the apparatus can be configured in a server. Specifically, please refer to Figure 5 , the apparatus 300 for implementing business system topology interaction based on SVG technology includes a request acquisition unit 301, a parsing and returning unit 302, and a distribution unit 303.

[0094] The request acquisition unit 301 is configured to acquire a request for initiating business system topology statistics through a front-end interface; the parsing and returning unit 302 is configured to parse the request and return formatted statistical data; the distribution unit 303 is configured to distribute the statistical data to relevant components by using the ReactContext API, so that the browser dynamically updates the UI according to the received statistical data to display the latest business system topology information.

[0095] In one embodiment, as Figure 6 shown, the parsing and returning unit 302 includes a query subunit 3021, a format conversion subunit 3022, and a returning subunit 3023.

[0096] The query subunit 3021 is configured to parse the request, perform query and retrieval according to the parsed result to obtain a query result; the format conversion subunit 3022 is configured to perform format conversion on the query result to obtain formatted statistical data; the returning subunit 3023 is configured to return the formatted statistical data to components related to the front end.

[0097] In one embodiment, as Figure 7 shown, the query subunit 3021 includes a parsing module 30211 and a retrieval module 30212.

[0098] The parsing module 30211 is configured to parse the URL of the request and extract query fields therefrom; the retrieval module 30212 is configured to retrieve asset information related to the business system from the database according to the query fields to obtain a query result.

[0099] In one embodiment, the format conversion subunit 3022 is configured to convert the query result into a JSON array adapted for display on the front-end interface to obtain formatted statistical data; wherein each array element in the JSON array represents the detailed information of a node or an edge and includes the parent-child relationship between the nodes.

[0100] In one embodiment, the distribution unit 303 is configured to use the React Context API to create a TopologyContext within the NodeTable component and use the Provider to pass the statistical data to the child components, so that the browser automatically detects changes in the component state and performs a minimized DOM update based on the received statistical data, and redraws the interface to display the updated business system topology structure.

[0101] In one embodiment, the distribution unit 303 is configured to create a context instance named TopologyContext inside the NodeTable component, wrap the child components that need to access the context instance data with the TopologyContext.Provider tag, manage the statistical data through the useState hook, store the statistical data in a state variable, and pass the state variable as the value attribute of the Provider component, so that the browser automatically detects changes in the component state and performs a minimized DOM update based on the received statistical data, and redraws the interface to display the updated business system topology structure.

[0102] It should be noted that those skilled in the art can clearly understand that the specific implementation processes of the above-mentioned apparatus 300 for implementing business system topology interaction based on SVG technology and each unit can refer to the corresponding descriptions in the foregoing method embodiments. For the sake of convenience and brevity of description, they will not be repeated here.

[0103] The above-mentioned apparatus 300 for implementing business system topology interaction based on SVG technology can be implemented in the form of a computer program, and this computer program can run on a computer device as shown in Figure 8 shown.

[0104] Please refer to Figure 8 , Figure 8 which is a schematic block diagram of a computer device provided by an embodiment of the present application. The computer device 500 can be a server, where the server can be an independent server or a server cluster composed of multiple servers.

[0105] Refer to Figure 8 , the computer device 500 includes a processor 502, a memory, and a network interface 505 connected via a system bus 501. Among them, the memory may include a non-volatile storage medium 503 and an internal memory 504.

[0106] The non-volatile storage medium 503 can store an operating system 5031 and a computer program 5032. The computer program 5032 includes program instructions, which when executed, can cause the processor 502 to execute a method for implementing business system topology interaction based on SVG technology.

[0107] The processor 502 is used to provide computing and control capabilities to support the operation of the entire computer device 500.

[0108] The internal memory 504 provides an environment for the operation of the computer program 5032 in the non-volatile storage medium 503. When the computer program 5032 is executed by the processor 502, it can cause the processor 502 to execute a method for implementing business system topology interaction based on SVG technology.

[0109] The network interface 505 is used for network communication with other devices. Those skilled in the art can understand that Figure 8 the structure shown in is only a block diagram of some structures related to the solution of this application, and does not constitute a limitation on the computer device 500 to which the solution of this application is applied. The specific computer device 500 may include more or fewer components than those shown in the figure, or combine some components, or have different component arrangements.

[0110] Among them, the processor 502 is used to run the computer program 5032 stored in the memory to implement the following steps: Obtain a request for business system topology statistics initiated through the front-end interface; parse the request and return formatted statistical data; use the React Context API to distribute the statistical data to relevant components, so that the browser dynamically updates the UI according to the received statistical data to display the latest business system topology information.

[0111] The request includes request parameters. Among them, when the user selects a business system or sets query conditions on the front-end interface, the front-end captures the user's operation, constructs request parameters according to the operation, and sends the request parameters through an HTTP request.

[0112] In one embodiment, when the processor 502 implements the step of parsing the request and returning formatted statistical data, the following steps are specifically implemented: Parse the request and perform queries and retrievals based on the parsed results to obtain query results; perform formatting conversions on the query results to obtain formatted statistical data; return the formatted statistical data to the relevant components on the front end.

[0113] In one embodiment, when the processor 502 implements the step of parsing the request and performing queries and retrievals based on the parsed results to obtain query results, the specific implementation is as follows: Parse the URL of the request and extract the query fields from it; retrieve asset information related to the business system from the database according to the query fields to obtain query results.

[0114] Among them, the query results include a node list, connection relationships, and performance metrics related to the business system.

[0115] In one embodiment, when the processor 502 implements the step of performing formatting conversions on the query results to obtain formatted statistical data, the specific implementation is as follows: Convert the query results into a JSON array adapted for display on the front-end interface to obtain formatted statistical data; among them, each array element in the JSON array represents the detailed information of a node or an edge and includes the parent-child relationship between nodes.

[0116] In one embodiment, when the processor 502 implements the step of distributing the statistical data to relevant components by using the React Context API so that the browser dynamically updates the UI according to the received statistical data to display the latest business system topology information, the specific implementation is as follows: Use the React Context API to create a TopologyContext within the NodeTable component and use the Provider to pass the statistical data to child components, so that the browser automatically detects changes in the component state according to the received statistical data and performs a minimized DOM update, and redraws the interface to display the updated business system topology structure.

[0117] In one embodiment, when the processor 502 implements the step of using the React Context API to create a TopologyContext within the NodeTable component and use the Provider to pass the statistical data to child components, so that the browser automatically detects changes in the component state according to the received statistical data and performs a minimized DOM update, and redraws the interface to display the updated business system topology structure, the specific implementation is as follows: Create a context instance named TopologyContext inside the NodeTable component, wrap the sub-components that need to access the context instance data with the TopologyContext.Provider tag, manage the statistical data through the useState hook, store the statistical data in a state variable, and pass the state variable as the value property of the Provider component, so that the browser automatically detects component state changes and performs minimal DOM updates according to the received statistical data, and redraws the interface to display the updated business system topology structure.

[0118] It should be understood that in the embodiment of the present application, the processor 502 may be a central processing unit (CPU), and the processor 502 may also be other general-purpose processors, digital signal processors (DSPs), application specific integrated circuits (ASICs), field-programmable gate arrays (FPGAs) or other programmable logic devices, discrete gate or transistor logic devices, discrete hardware components, etc. Among them, the general-purpose processor may be a microprocessor or the processor may also be any conventional processor, etc.

[0119] Those of ordinary skill in the art can understand that all or part of the processes in the methods of the above embodiments can be completed by instructing relevant hardware through a computer program. The computer program includes program instructions, and the computer program can be stored in a storage medium, and the storage medium is a computer-readable storage medium. The program instructions are executed by at least one processor in the computer system to implement the flow steps of the embodiments of the above methods.

[0120] Therefore, the present invention also provides a storage medium. The storage medium may be a computer-readable storage medium. The storage medium stores a computer program, wherein when the computer program is executed by a processor, the processor performs the following steps: Obtain a request for business system topology statistics initiated through the front-end interface; parse the request and return formatted statistical data; use the React Context API to distribute the statistical data to relevant components, so that the browser dynamically updates the UI according to the received statistical data to display the latest business system topology information.

[0121] The request includes request parameters. When a user selects a business system or sets query conditions on the front-end interface, the front-end captures the user's operation, constructs request parameters based on the operation, and sends the request parameters through an HTTP request.

[0122] In one embodiment, when the processor executes the computer program to implement the step of parsing the request and returning formatted statistical data, the following steps are specifically implemented: Parse the request, perform queries and retrievals based on the results of the parsing to obtain query results; perform formatted conversion on the query results to obtain formatted statistical data; return the formatted statistical data to components related to the front end.

[0123] In one embodiment, when the processor executes the computer program to implement the step of parsing the request and performing queries and retrievals based on the results of the parsing to obtain query results, the following steps are specifically implemented: Parse the URL of the request to extract query fields; retrieve asset information related to the business system from the database according to the query fields to obtain query results.

[0124] The query results include a node list, connection relationships, and performance metrics related to the business system.

[0125] In one embodiment, when the processor executes the computer program to implement the step of performing formatted conversion on the query results to obtain formatted statistical data, the following steps are specifically implemented: Convert the query results into a JSON array adapted for display on the front-end interface to obtain formatted statistical data; each array element in the JSON array represents detailed information about a node or an edge and includes the parent-child relationship between nodes.

[0126] In one embodiment, when the processor executes the computer program to implement the step of distributing the statistical data to relevant components using the React Context API so that the browser dynamically updates the UI based on the received statistical data to display the latest business system topology information, the following steps are specifically implemented: Use the React Context API to create a TopologyContext within the NodeTable component and use the Provider to pass the statistical data to child components, so that the browser, based on the received statistical data, automatically detects changes in the component state using the React framework and performs a minimized DOM update to redraw the interface to display the updated business system topology structure.

[0127] In one embodiment, when the processor executes the computer program to implement the step of using the ReactContext API to create a TopologyContext within the NodeTable component and use the Provider to pass the statistical data to the child components, so that the browser automatically detects changes in the component state and performs a minimized DOM update based on the received statistical data, and redraws the interface to display the updated business system topology structure, the specific implementation is as follows: Create a context instance named TopologyContext inside the NodeTable component, and use the TopologyContext.Provider tag to wrap the child components that need to access the data of the context instance. Manage the statistical data through the useState hook, store the statistical data in a state variable, and pass the state variable as the value attribute of the Provider component, so that the browser automatically detects changes in the component state and performs a minimized DOM update based on the received statistical data, and redraws the interface to display the updated business system topology structure.

[0128] The storage medium can be various computer-readable storage media such as a USB flash drive, a mobile hard disk, a read-only memory (ROM), a magnetic disk, or an optical disc, etc., which can store program codes.

[0129] Those of ordinary skill in the art can realize that the units and algorithm steps of the examples described in conjunction with the embodiments disclosed herein can be implemented by electronic hardware, computer software, or a combination of the two. To clearly illustrate the interchangeability of hardware and software, the composition and steps of each example have been generally described according to functions in the above description. Whether these functions are executed in a hardware or software manner depends on the specific application and design constraints of the technical solution. Professional technicians can use different methods to implement the described functions for each specific application, but such implementation should not be considered to exceed the scope of the present invention.

[0130] In several embodiments provided by the present invention, it should be understood that the disclosed devices and methods can be implemented in other ways. For example, the device embodiments described above are merely illustrative. For example, the division of each unit is only a logical function division, and there may be other division methods in actual implementation. For example, multiple units or components can be combined or integrated into another system, or some features can be ignored or not executed.

[0131] The steps in the method of the embodiments of the present invention can be adjusted, combined, and deleted according to actual needs. The units in the device of the embodiments of the present invention can be combined, divided, and deleted according to actual needs. In addition, the functional units in the various embodiments of the present invention can be integrated into one processing unit, or each unit can exist physically alone, or two or more units can be integrated into one unit.

[0132] If the integrated unit is implemented in the form of a software functional unit and sold or used as an independent product, it can be stored in a storage medium. Based on such an understanding, the technical solution of the present invention, in essence, or the part that contributes to the prior art, or all or part of the technical solution, can be embodied in the form of a software product. The computer software product is stored in a storage medium and includes several instructions for causing a computer device (which can be a personal computer, a terminal, or a network device, etc.) to execute all or part of the steps of the methods described in the various embodiments of the present invention.

[0133] As mentioned above, the above are only specific embodiments of the present invention, but the protection scope of the present invention is not limited thereto. Any person skilled in the art within the technical scope disclosed by the present invention can easily think of various equivalent modifications or substitutions, and these modifications or substitutions should all be covered within the protection scope of the present invention. Therefore, the protection scope of the present invention should be subject to the protection scope of the claims.< / flyline> < / nodetable> < / nodetable> < / nodetable> < / nodetable>

Claims

1. A method for implementing business system topology interaction based on SVG technology, characterized in that: include: Get the request for business system topology statistics initiated through the front-end interface; Parse the request and return formatted statistics; React Context API is used to distribute the statistical data to relevant components, so that the browser dynamically updates the UI according to the received statistical data to display the latest business system topology information.

2. The method for realizing business system topology interaction based on SVG technology according to claim 1, characterized in that: The request includes request parameters, wherein when the user selects a business system or sets query conditions on the front-end interface, the front-end captures the user's operation, constructs request parameters according to the operation, and sends the request parameters via an HTTP request.

3. The method for realizing business system topology interaction based on SVG technology according to claim 2 is characterized in that: The parsing of the request and returning formatted statistical data includes: Parsing the request, and performing query and retrieval according to the parsed result to obtain the query result; Performing format conversion on the query results to obtain formatted statistical data; Returns the formatted statistics to the relevant components of the front end.

4. The method for realizing business system topology interaction based on SVG technology according to claim 3 is characterized in that: The request is parsed, and query and search are performed according to the parsed result to obtain the query result, including: Parsing the request URL and extracting the query field therefrom; According to the query field, asset information related to the business system will be retrieved from the database to obtain query results.

5. The method for realizing business system topology interaction based on SVG technology according to claim 4 is characterized in that: The formatting and converting of the query results to obtain formatted statistical data includes: The query result is converted into a JSON array suitable for display on a front-end interface to obtain formatted statistical data; wherein each array element in the JSON array represents detailed information of a node or an edge and includes the parent-child relationship between nodes.

6. The method for realizing business system topology interaction based on SVG technology according to claim 5 is characterized in that: The query results include a list of nodes related to the business system, connection relationships, and performance indicators.

7. The method for realizing business system topology interaction based on SVG technology according to claim 1, characterized in that: The use of the React Context API to distribute the statistical data to relevant components so that the browser dynamically updates the UI according to the received statistical data to display the latest business system topology information includes: React Context API is used to create TopologyContext in the NodeTable component and use Provider to pass the statistical data to the child component, so that the browser can use the React framework to automatically detect component state changes and perform minimized DOM updates based on the received statistical data, and redraw the interface to display the updated business system topology.

8. The method for implementing business system topology interaction based on SVG technology according to claim 7, characterized in that: The method uses the React Context API to create a TopologyContext in the NodeTable component and use Provider to pass the statistical data to the child component, so that the browser uses the React framework to automatically detect component state changes and perform minimized DOM updates based on the received statistical data, and redraws the interface to display the updated business system topology structure, including: Create a context instance named TopologyContext inside the NodeTable component, and use the TopologyContext.Provider tag to wrap the subcomponent that needs to access the data of the context instance. Manage the statistical data through the useState hook, store the statistical data in a state variable, and pass the state variable as the value attribute value of the Provider component, so that the browser can use the React framework to automatically detect component state changes and perform minimized DOM updates based on the received statistical data, and redraw the interface to display the updated business system topology.

9. A device for realizing topological interaction of business systems based on SVG technology, characterized in that: include: A request acquisition unit, used to acquire a request for initiating business system topology statistics through a front-end interface; A parsing and returning unit, used for parsing the request and returning formatted statistical data; The distribution unit is used to distribute the statistical data to relevant components by using the React Context API, so that the browser dynamically updates the UI according to the received statistical data to display the latest business system topology information.

10. A computer device, characterized in that: The computer device comprises a memory and a processor, wherein a computer program is stored in the memory, and the processor implements the method according to any one of claims 1 to 8 when executing the computer program.

Images