String-based graphic analysis method

Abstract

The disclosure provides a string-based graphical analysis method, which defines the hierarchy, layout direction, size ratio and state color of a graph by designing a nested string DSL, converts the string expression into standard structured data using an analysis engine, and finally dynamically generates a visual graph through a rendering engine; this method abstracts complex graph layout into dataable semantic templates, allowing users to quickly build and modify complex nested graphs in a minimalist text form, while relying on a color and state binding mechanism and standardized data output to achieve flexible definition, efficient parsing, dynamic rendering and real-time state updating of graph layout in server cluster monitoring, distributed system state display and other scenarios, effectively solving the problems of low development efficiency, high maintenance cost and lack of dynamics in traditional hard coding methods.

Description

Technical Field

[0001] This invention relates to the field of graphics parsing and display technology, and in particular to a string-based graphics parsing method. Background Technology

[0002] In modern information systems, especially in cloud computing and large server cluster management scenarios, system and application monitoring platforms typically need to graphically display the real-time operational status of multiple objects. A common visualization method is to use a large rectangle to represent the overall server cluster status, which is then divided into multiple smaller rectangles. Each smaller rectangle represents a different level of functional module or resource node; for example, the bottom represents the infrastructure layer (such as CPU, memory, and disk usage), the middle represents middleware and database services, and the top represents the application service layer. By using different colors, sizes, and arrangements, users can quickly identify the health status and usage of a specific resource or module within the cluster.

[0003] However, in practical engineering, such graphical layouts often require custom development, generated through hard coding or inefficient graphical editors, resulting in significant shortcomings in flexibility, maintainability, and interactivity. For example, the layout structure in front-end pages is often hard-coded with nested HTML elements, lacking abstract expressive capabilities; while graphical tools often lack code-level expression, making them difficult to parse automatically or generate by back-end information systems, hindering the automated generation and dynamic updating of application system object state displays.

[0004] Therefore, there is a need for a concise and intuitive way of expressing the nested structure, layout direction, size ratio, and status color information of graphics, so as to facilitate the rapid construction, parsing and rendering of visual layouts, especially suitable for monitoring and real-time display of large-scale server cluster status and large-scale application system operation status. Summary of the Invention

[0005] The first aspect of this disclosure provides a string-based graph parsing method, comprising the following steps: S1: Obtain a string DSL template. The string DSL template uses nested functional syntax to define a graphic layout structure. The nested functional syntax includes a layout type indicator, at least one sub-block, and each sub-block includes an identifier, an optional percentage attribute, and an optional color attribute. S2: Fill the string DSL template with actual state data to generate the filled string expression; S3: Parse the filled string expression to generate a structured data object, which represents a graphical layout tree; S4: Based on the structured data object, generate a graphical display using a renderer.

[0006] In conjunction with the first aspect, the layout type indicator includes row and col, where row represents a horizontal layout and col represents a vertical layout.

[0007] In conjunction with the first aspect, in the nested functional syntax, sub-blocks are separated by commas and support nesting combinations at any depth.

[0008] In conjunction with the first aspect, the proportion attribute is represented by a colon followed by a positive integer, which is used to define the relative size ratio of the child block in the parent container, and the color attribute is represented by a hash symbol followed by a color value, which is used to distinguish the state or type of the graphic block.

[0009] In conjunction with the first aspect, step S3 includes: Lexical analysis identifies keywords, identifiers, delimiters, and attribute symbols in the string expression; Syntax analysis involves constructing a syntax tree based on bracket structures and delimiters. Attribute parsing: Extract the percentage and color attributes of each sub-block; The tree is constructed recursively to generate the structured data object, where each node corresponds to a graphic block.

[0010] In conjunction with the first aspect, the structured data object is a tree structure in JSON format, including node type, child node list, percentage attribute, and color attribute.

[0011] In conjunction with the first aspect, the rendering step uses HTML and CSS technologies to generate the graphical display, wherein: Each node corresponds to an HTML container element; The layout type row is mapped to CSS styles, and the layout type col is mapped to CSS styles; Percentage properties are mapped to CSS properties; The color attribute is mapped to the background color.

[0012] In conjunction with the first aspect, the color attribute is bound to the system operating status and can be dynamically updated based on real-time monitoring data. The graphic display is a nested rectangular layout, used to visualize the resource status and module relationships in server clusters, distributed systems, or cloud computing platforms.

[0013] A second aspect of this disclosure provides an electronic device, comprising: One or more processors; A storage unit is used to store one or more programs that, when executed by one or more processors, enable the one or more processors to implement the string-based graph parsing method.

[0014] A third aspect of this disclosure provides a computer-readable storage medium having a computer program stored thereon, characterized in that the computer program, when executed by a processor, can implement the string-based graph parsing method.

[0015] Beneficial Effects: This disclosure provides a string-based graph parsing method that defines the hierarchical structure, layout direction, size proportion, and status color of a graph by designing a nested string DSL. The parsing engine then converts this string expression into standard structured data, and finally, a rendering engine dynamically generates a visual graph. This method abstracts complex graph layouts into data-driven semantic templates, enabling users to quickly construct and modify complex nested graphs using minimal text. Furthermore, relying on the color-state binding mechanism and standardized data output, it achieves flexible definition, efficient parsing, dynamic rendering, and real-time status updates of graph layouts in scenarios such as server cluster monitoring and distributed system status display. This effectively solves the problems of low development efficiency, high maintenance costs, and lack of dynamism associated with traditional hard-coding methods. Attached Figure Description

[0016] Figure 1 This is a flowchart illustrating a string-based graph parsing method according to an embodiment of the present disclosure; Figure 2 An electronic device as disclosed in the embodiments. Detailed Implementation

[0017] Exemplary embodiments will now be described in detail, examples of which are illustrated in the accompanying drawings. When the following description relates to the drawings, unless otherwise indicated, the same numbers in different drawings represent the same or similar elements. The embodiments described in the following exemplary embodiments do not represent all embodiments consistent with those disclosed herein.

[0018] The terminology used in this disclosure is for the purpose of describing particular embodiments only and is not intended to be limiting of the present disclosure. The singular forms “a,” “the,” and “the” as used in this disclosure and the appended claims are also intended to include the plural forms unless the context clearly indicates otherwise. It should also be understood that the term “and / or” as used herein refers to and includes any and all possible combinations of one or more of the associated listed items.

[0019] Figure 1 This disclosure provides a string-based graph parsing method, which includes the following steps: S1: Obtain a string DSL template. The string DSL template uses nested functional syntax to define a graphic layout structure. The nested functional syntax includes a layout type indicator, at least one sub-block, and each sub-block includes an identifier, an optional percentage attribute, and an optional color attribute. The layout type indicator includes row and col, where row represents a horizontal layout and col represents a vertical layout.

[0020] In the nested functional syntax, sub-blocks are separated by commas and support nesting combinations at any depth.

[0021] The percentage attribute is represented by a colon followed by a positive integer and is used to define the relative size ratio of the child block in the parent container. The color attribute is represented by a hash symbol followed by a color value and is used to distinguish the state or type of the graphic block.

[0022] The method begins with step S1, which involves obtaining the string DSL template. This template serves as the blueprint for the entire graph parsing process, employing a nested functional syntax to precisely describe the layout structure of the graph. The core of this syntax includes two layout type indicators: `row` for horizontal layout and `col` for vertical layout, which act as containers to organize child elements. Each child block contains its identifier (ID) and two key optional attributes: the proportion attribute, defined by a colon followed by a positive integer after the identifier, indicates the relative size of the child block within the parent container; the color attribute, set by a hash followed by a color value, visually distinguishes the state or type of different graphic blocks. These child blocks are separated by commas, and the entire syntax supports arbitrary depths of nesting, enabling the definition of extremely complex hierarchical layouts.

[0023] S2: Fill the string DSL template with actual state data to generate the filled string expression; In step S2, the system populates the DSL template obtained in the first step with actual, dynamically changing status data. This process combines the static template structure with real-time business data. For example, the server health status (normal, warning, fault) obtained by the monitoring system is mapped to specific color values ​​and replaced in the corresponding positions in the template, thereby generating a complete string expression containing real status information. This step achieves the binding of data and presentation.

[0024] S3: Parse the filled string expression to generate a structured data object, which represents a graphical layout tree; Step S3 includes: Lexical analysis identifies keywords, identifiers, delimiters, and attribute symbols in the string expression; Syntax analysis involves constructing a syntax tree based on bracket structures and delimiters. Attribute parsing: Extract the percentage and color attributes of each sub-block; The tree is constructed recursively to generate the structured data object, where each node corresponds to a graphic block.

[0025] Step S3 is responsible for parsing the padded string expression, converting it into a structured data object (usually in JSON format) that is easier for computer programs to process and manipulate. This object is essentially a graph layout tree. The parsing process is rigorous and step-by-step: First, lexical analysis is performed to break the string down into meaningful independent units, identifying keywords, identifiers, commas, parentheses, and other delimiters, as well as attribute symbols; next, syntax analysis is performed to construct a tree model expressing the grammatical structure based on the nesting relationships of parentheses and the positions of delimiters; then, attribute parsing is performed to extract specific information such as percentage and color attributes from each sub-block unit; finally, tree construction is performed, using a recursive algorithm to convert the syntax analysis tree into the final structured data object, where each node precisely corresponds to a graph block, containing all necessary information such as its type, child nodes, percentage, and color.

[0026] S4: Based on the structured data object, generate a graphical display using a renderer.

[0027] The rendering step uses HTML and CSS technologies to generate the graphical display, wherein: Each node corresponds to an HTML container element; The layout type row is mapped to CSS styles, and the layout type col is mapped to CSS styles; Percentage properties are mapped to CSS properties; The color attribute is mapped to the background color.

[0028] The color attribute is bound to the system's operating status and can be dynamically updated based on real-time monitoring data. The graphic display is a nested rectangular layout, used to visualize the resource status or module relationships in server clusters, distributed systems, or cloud computing platforms.

[0029] Finally, in step S4, the system generates the final graphical display based on the parsed structured data object through the renderer. In this specific implementation, the renderer utilizes HTML and CSS technologies to accomplish this task: each node in the layout tree corresponds to an HTML container element; node types of row or col are mapped to CSS Flexbox horizontal and vertical layout styles, respectively; the node's proportion attribute is mapped to the CSS flex-grow property to control the element's space allocation within the container; and the Color property is directly used to set the element's background color. Crucially, this color attribute is tightly bound to the system's running status and can dynamically change based on real-time monitoring data updates, enabling the final generated nested rectangular layout graphic to serve as a real-time, intuitive visualization of resource status or module relationships within server clusters, distributed systems, or cloud computing platforms.

[0030] Electronic device 200 can be a desktop computer, laptop, handheld computer, cloud server, or other electronic device. Electronic device 200 may include, but is not limited to, processor 201 and memory 202. Those skilled in the art will understand that... Figure 2 This is merely an example of electronic device 200 and does not constitute a limitation on electronic device 200. It may include more or fewer components than shown, or combine certain components, or different components. For example, electronic device may also include input / output devices, network access devices, buses, etc.

[0031] The processor 201 can be a Central Processing Unit (CPU), or 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. A general-purpose processor can be a microprocessor or any conventional processor.

[0032] The memory 202 can be an internal storage unit of the electronic device 200, such as a hard disk or RAM of the electronic device 200. The memory 202 can also be an external storage device of the electronic device 200, such as a plug-in hard disk, Smart Media Card (SMC), Secure Digital (SD) card, or Flash Card equipped on the electronic device 200. Furthermore, the memory 202 can include both internal and external storage units of the electronic device 200. The memory 202 is used to store the computer program 203 and other programs and data required by the electronic device. The memory 202 can also be used to temporarily store data that has been output or will be output.

[0033] The above embodiments are only used to illustrate the technical solutions of this disclosure, and are not intended to limit it. Although this disclosure has been described in detail with reference to the foregoing embodiments, those skilled in the art should understand that modifications can still be made to the technical solutions described in the foregoing embodiments, or equivalent substitutions can be made to some of the technical features. Such modifications or substitutions do not cause the essence of the corresponding technical solutions to deviate from the spirit and scope of the technical solutions of the embodiments of this disclosure, and should all be included within the protection scope of this disclosure.

Claims

1. A string-based graph parsing method, characterized in that, Includes the following steps: S1: Obtain a string DSL template. The string DSL template uses nested functional syntax to define a graphic layout structure. The nested functional syntax includes a layout type indicator, at least one sub-block, and each sub-block includes an identifier, an optional percentage attribute, and an optional color attribute. S2: Fill the string DSL template with actual state data to generate the filled string expression; S3: Parse the filled string expression to generate a structured data object, which represents a graphical layout tree; S4: Based on the structured data object, generate a graphical display using a renderer.

2. The method according to claim 1, characterized in that, The layout type indicator includes row and col, where row represents a horizontal layout and col represents a vertical layout.

3. The method according to claim 1, characterized in that, In the nested functional syntax, sub-blocks are separated by commas and support nesting combinations at any depth.

4. The method according to claim 1, characterized in that, The percentage attribute is represented by a colon followed by a positive integer and is used to define the relative size ratio of the child block in the parent container. The color attribute is represented by a hash symbol followed by a color value and is used to distinguish the state or type of the graphic block.

5. The method according to claim 1, characterized in that, Step S3 includes: Lexical analysis identifies keywords, identifiers, delimiters, and attribute symbols in the string expression; Syntax analysis involves constructing a syntax tree based on bracket structures and delimiters. Attribute parsing: Extract the percentage and color attributes of each sub-block; The tree is constructed recursively to generate the structured data object, where each node corresponds to a graphic block.

6. The method according to claim 1, characterized in that, The structured data object is a tree structure in JSON format, including node type, child node list, percentage attribute, and color attribute.

7. The method according to claim 1, characterized in that, The rendering step uses HTML and CSS technologies to generate the graphical display, wherein: Each node corresponds to an HTML container element; The layout type row is mapped to CSS styles, and the layout type col is mapped to CSS styles; Percentage properties are mapped to CSS properties; The color attribute is mapped to the background color.

8. The method according to claim 1, characterized in that, The color attribute is bound to the system's operating status and can be dynamically updated based on real-time monitoring data. The graphic display is a nested rectangular layout, used to visualize the resource status and module relationships in server clusters, distributed systems, or cloud computing platforms.

9. An electronic device, characterized in that, include: One or more processors; A storage unit for storing one or more programs that, when executed by one or more processors, enable the one or more processors to implement the string-based graph parsing method according to any one of claims 1 to 8.

10. A computer-readable storage medium having a computer program stored thereon, characterized in that, When the computer program is executed by a processor, it can implement the string-based graph parsing method according to any one of claims 1 to 8.

Images