Data table display method and device, electronic equipment and storage medium

Abstract

The present disclosure provides a data table display method and device, electronic equipment and storage medium, relates to the fields of artificial intelligence such as cloud computing, distributed storage and database, and can be applied to scenarios such as intelligent cloud. The method can comprise: in response to obtaining a data table display request of a user, determining a canvas region; determining target data tables to be rendered from each data table in the database according to the canvas region; adding each target data table to the canvas region for rendering according to the display position of each target data table in the canvas region, obtaining an ER graph corresponding to each target data table, and displaying the ER graph to the user. By applying the scheme, non-technical personnel can intuitively and efficiently view and understand the data table relationship in the database.

Description

Technical Field

[0001] This disclosure relates to artificial intelligence technology, and in particular to data table display methods, apparatus, electronic devices and storage media in the fields of cloud computing, distributed storage and databases. Background Technology

[0002] While traditional database systems can store and process large amounts of data, viewing and understanding the relationships between data tables in a database is often complex and difficult for non-technical people. Summary of the Invention

[0003] This disclosure provides methods, apparatus, electronic devices, and storage media for displaying data tables.

[0004] A method for displaying data tables, including:

[0005] In response to the user's request to display the data table, the canvas area is determined;

[0006] The target data table to be rendered is determined from each data table in the database based on the canvas area.

[0007] According to the determined display position of each target data table in the canvas area, each target data table is added to the canvas area for rendering to obtain the entity relationship graph corresponding to each target data table, and the entity relationship graph is displayed to the user.

[0008] A data table display device includes: a first determining module, a second determining module, and a processing module;

[0009] The first determining module is used to determine the canvas area in response to receiving a user's data table display request;

[0010] The second determining module is used to determine the target data table to be rendered from each data table in the database based on the canvas area;

[0011] The processing module is used to add each target data table to the canvas area according to the determined display position of each target data table in the canvas area, render each target data table, obtain the entity relationship diagram corresponding to each target data table, and display the entity relationship diagram to the user.

[0012] An electronic device, comprising:

[0013] At least one processor; and

[0014] A memory communicatively connected to the at least one processor; wherein,

[0015] The memory stores instructions that can be executed by the at least one processor to enable the at least one processor to perform the method described above.

[0016] A non-transitory computer-readable storage medium storing computer instructions for causing a computer to perform the methods described above.

[0017] A computer program product includes a computer program / instructions that, when executed by a processor, implement the method described above.

[0018] It should be understood that the description in this section is not intended to identify key or essential features of the embodiments of this disclosure, nor is it intended to limit the scope of this disclosure. Other features of this disclosure will become readily apparent from the following description. Attached Figure Description

[0019] The accompanying drawings are provided to better understand this solution and do not constitute a limitation of this disclosure. Wherein:

[0020] Figure 1 This is a flowchart illustrating an embodiment of the data table display method described in this disclosure;

[0021] Figure 2 This is a schematic diagram of the first nine-square grid disclosed in this paper;

[0022] Figure 3 This is a schematic diagram of the target data tables presented in this disclosure;

[0023] Figure 4 This is a schematic diagram of the second nine-square grid disclosed herein;

[0024] Figure 5 This is a schematic diagram of the composition structure of Embodiment 500 of the data table display device described in this disclosure;

[0025] Figure 6 A schematic block diagram of an electronic device 600 that can be used to implement embodiments of the present disclosure is shown. Detailed Implementation

[0026] The exemplary embodiments of this disclosure are described below with reference to the accompanying drawings, including various details of the embodiments to aid understanding, and should be considered merely exemplary. Therefore, those skilled in the art will recognize that various changes and modifications can be made to the embodiments described herein without departing from the scope and spirit of this disclosure. Similarly, for clarity and brevity, descriptions of well-known functions and structures are omitted in the following description.

[0027] Furthermore, it should be understood that the term "and / or" in this article is merely a description of the relationship between related objects, indicating that three relationships can exist. For example, A and / or B can represent: A existing alone, A and B existing simultaneously, or B existing alone. Additionally, the character " / " in this article generally indicates that the preceding and following related objects have an "or" relationship.

[0028] Figure 1 This is a flowchart illustrating an embodiment of the data table display method described in this disclosure. Figure 1 As shown, the specific implementation methods are as follows.

[0029] In step 101, in response to receiving a user's data table display request, the canvas area is determined.

[0030] In step 102, the target data table to be rendered is determined from the data tables in the database based on the canvas area.

[0031] In step 103, according to the determined display position of each target data table in the canvas area, each target data table is added to the canvas area for rendering to obtain the Entity-Relationship Diagram (ER) corresponding to each target data table, and the ER diagram is displayed to the user.

[0032] The solution described in the above method embodiments can provide users with a visual ER diagram front-end interface, enabling non-technical personnel to view and understand the data table relationships in the database in an intuitive and efficient way. Moreover, the display effect can be improved by determining the display position of each target data table.

[0033] There are no restrictions on how users submit data table display requests; for example, it could refer to clicking the reservation button on the front-end interface.

[0034] In response to a data table display request, the canvas area can be determined first. Preferably, a pre-set first display viewport size can be obtained, and the rectangle corresponding to the first display viewport size can be used as the center cell in the first nine-grid. The first nine-grid can be determined based on the center cell, and the size of each non-center cell in it is the same as the size of the center cell. Thus, the first nine-grid area can be used as the canvas area.

[0035] The first display viewport size can be the default display viewport size provided by the developer, including width and height.

[0036] Figure 2 This is a schematic diagram of the first nine-square grid disclosed herein. (As shown...) Figure 2As shown, the rectangle corresponding to the size of the first display viewport can be used as the center grid in the first nine-grid, i.e., grid 5. Grids 1, 2, 3, 4, 6, 7, 8, and 9 are all non-center grids. Grids 1 to 9 form the first nine-grid, and correspondingly, the area of ​​the first nine-grid can be used as the canvas area. It can be seen that the size of the canvas area is equivalent to enlarging the size of the first display viewport by 3, that is, multiplying the width of the first display viewport by 3 and the height of the first display viewport by 3.

[0037] The above process allows for a simple and convenient determination of the required canvas area, thus laying a solid foundation for subsequent processing.

[0038] Based on the canvas area, the target data table to be rendered can be determined from the various data tables in the database. Preferably, the quotient of the canvas area width and the default value can be obtained, and the quotient can be rounded down. The width of each data table during display is set to the default value. The rounded-down result can then be used as the target quantity, and the data tables representing that target quantity can be selected from the database as the default data tables. Further, data tables that have a direct correlation with the default data tables can be selected from the database. Finally, the selected data tables can be deduplicated before being used as the determined target data tables.

[0039] This determines how many data tables can be arranged horizontally in the canvas area. Correspondingly, the quotient of the width of the canvas area and the default value (the width of a single data table) can be calculated, and the quotient can be rounded down to obtain the number of default data tables. For ease of description, this number is referred to as the target number.

[0040] In addition, data tables that have a direct relationship with each default data table can be selected from the data tables in the database. Then, the default data tables and the selected data tables that have a direct relationship with each default data table can be deduplicated and used as the required target data tables.

[0041] For example, suppose there are 10 data tables in the database (these numbers are for illustrative purposes only, and the actual number may be much larger), namely data table A, data table B, ..., data table I and data table J. Suppose 3 default data tables are selected, namely data table A, data table B and data table D. Data tables that have a direct relationship with data table A are data table B and data table D. Data table that has a direct relationship with data table B is data table C. Data tables that have a direct relationship with data table D are data table A, data table C and data table E. After deduplication, the following target data tables can be obtained: data table A, data table B, data table C, data table D and data table E.

[0042] Preferably, when selecting a target number of data tables from the database, the data tables in the database can be sorted according to a predetermined method, and the data tables in the top M positions after sorting can be selected as the selected data tables, where the value of M is equal to the target number.

[0043] The specific method of pre-ordering is not limited. For example, the data tables can be sorted in order of when they were added to the database, or in order of priority from highest to lowest.

[0044] Through the above processing, effective filtering of data tables in the database can be achieved, thereby improving the efficiency of subsequent processing. Moreover, displaying the default data table and data tables that have direct relationships with the default data table enhances the display effect, allowing users to better view and understand the relationships between data tables.

[0045] Furthermore, each target data table can be added to the canvas area for rendering according to its display position in the canvas area, thereby obtaining the ER diagram corresponding to each target data table, and the ER diagram can be displayed to the user.

[0046] As mentioned earlier, the width of each data table is set to the default value when displayed. For each data table, the height when displayed can be: the height of the table header name + the number of fields * the default height of a single field. Each data table usually includes multiple fields.

[0047] Preferably, for each target data table, the display position of each target data table can be determined according to the force-directed layout algorithm, and each target data table can be displayed according to the display position. Target data tables with direct relationships can be connected by connecting lines.

[0048] For example, each target data table can be drawn as a Scalable Vector Graphics (SVG) tag using a Data-Driven Documents JavaScript (D3.JS) library, added to the canvas area for rendering, and the direct relationships between the target data tables can be used to draw connecting lines SVG tags representing the direct relationships, added to the canvas area for rendering.

[0049] The D3.JS library is a powerful JavaScript scripting language library that supports data visualization, providing rich graphics drawing and interactive features, and effectively rendering complex data charts.

[0050] Preferably, the force-directed layout algorithm used in the scheme described in this disclosure may include: a force-directed layout algorithm for collision forces (D3.forceCollide), a force-directed layout algorithm for central forces (D3.forceCenter), and a force-directed layout algorithm for connection forces (D3.forceLink).

[0051] If different target data tables are all regarded as nodes in the ER diagram, then D3.forceCollide can be used to simulate collisions between different nodes to prevent different nodes from overlapping. D3.forceCenter is used to position the node's attraction to the center of the canvas so that the nodes can be concentrated in the central area of ​​the canvas as much as possible. D3.forceLink is used to represent the force of the connecting line so that the connecting line is as short as possible.

[0052] In practical applications, the three force-directed layout algorithms mentioned above can be combined to determine the display position of each target data table, thereby achieving the best overall display effect.

[0053] In addition, each target data table can be sorted in a predetermined order, and each sorted target data table can be traversed. For each target data table traversed, the following processing can be performed: determine its display position according to the force-directed layout algorithm, add it to the canvas for rendering according to the display position, and if the force-directed layout algorithm determines that the display position of the added target data table needs to be adjusted, then the adjustment is performed accordingly.

[0054] As can be seen, by adopting the above processing method, the force-directed layout function of the D3.JS library can be used to automatically arrange and layout the target data tables, thereby further improving the display effect.

[0055] Figure 3 This is a schematic diagram of the target data tables presented in this disclosure. For example... Figure 3 As shown, the arrows on the connecting lines indicate the direction from the starting point to the ending point. Furthermore, for two target data tables, there may be one or more connecting lines between them. Assuming the two target data tables are target data table a and target data table b, and assuming a field in target data table a has a direct relationship with a field in target data table b, then there is one connecting line between target data table a and target data table b. If one field in target data table a has a direct relationship with two fields in target data table b, then there are two connecting lines between target data table a and target data table b. If each of the three fields in target data table a has a direct relationship with a corresponding field in target data table b, then there are three connecting lines between target data table a and target data table b.

[0056] Preferably, in response to determining that the user clicks on any of the displayed data tables, and that the clicked data table is the default data table, the clicked data table can be highlighted, or the clicked data table and the connecting lines can be highlighted.

[0057] If the data table clicked by the user is the default data table, then the clicked data table or the clicked data table and the connecting lines can be highlighted to make the clicked data table stand out and facilitate user viewing.

[0058] Preferably, in response to determining that the user clicks on any of the displayed data tables, and the clicked data table is a non-default data table, and there exists a data table in the database that has a direct relationship with the clicked data table but is not displayed in the canvas area, the data table that has a direct relationship with the clicked data table but is not displayed in the canvas area is designated as a data table to be added, and the data table to be added is added to the canvas area for rendering.

[0059] If the data table clicked by the user is not the default data table, then a data table that has a direct relationship with the clicked data table can be selected from the data tables in the database. Suppose two data tables are selected, and one data table (such as the default data table) is already displayed in the canvas area, then the other data table can be added as the data table to be added and rendered in the canvas area, so that the user can easily understand the information of the data table directly related to the clicked data table.

[0060] Preferably, while keeping the data tables already displayed in the canvas area unchanged, the display position of the data table to be added in the canvas area can be determined according to the force-directed layout algorithm, and the data table to be added can be displayed according to the display position, and the data table to be added can be connected to the clicked data table through a connecting line.

[0061] For example, the data table to be added can be drawn as an SVG tag using the D3.JS library and added to the canvas area for rendering. Similarly, based on the direct relationships mentioned above, corresponding connecting line SVG tags can be drawn using the D3.JS library and added to the canvas area for rendering. Furthermore, the positions of existing data tables in the canvas area can be maintained, making it easier for users to view information from newly added data tables.

[0062] Alternatively, preferably, in response to a user performing an edit operation on the content of the clicked data table, the updated content can be saved to the database.

[0063] For any data table displayed, all the field information can be shown for easy viewing by the user. In addition, after clicking on any data table, the user can also perform editing operations, such as modifying the content of one or more fields. Correspondingly, the modifications can be saved to the database, thereby enhancing user-friendliness and operability.

[0064] In addition, the solution described in this disclosure can also support user dragging and zooming operations.

[0065] Preferably, in response to a user dragging the ER diagram, a second center point position can be determined based on the dragging distance and the first center point position. The first center point position is the center point position of the center cell in the canvas area. In response to the second center point position being located in any non-center cell in the canvas area, the non-center cell is taken as the center cell in the second nine-grid, and the second nine-grid is determined based on the center cell in the second nine-grid. The area of ​​the second nine-grid is taken as the updated canvas area, and then the data table in the data table that was displayed before the update and located in the updated canvas area can be determined as the data table to be optimized, and a predetermined optimization process can be performed based on the data table to be optimized.

[0066] The location of the first center point is... Figure 2 The center point of the 5 grid cells shown is indicated by dragging. Dragging the drag will shift the center point relative to that center point. For example, if the drag distance to the left is greater than 50% of the width of the center grid cell, the second center point will be within 4 grid cells. If the drag distance to the right is greater than 50% of the width of the center grid cell, the second center point will be within 6 grid cells. If the drag distance to the upper right is greater than... A represents the width of the center grid, and B represents the height of the center grid. Therefore, the second center point is located within 3 grids.

[0067] The non-center cell where the second center point is located can be used as the center cell in the second nine-square grid, and the second nine-square grid can be generated accordingly. Then, the area of ​​the second nine-square grid can be used as the updated canvas area.

[0068] Figure 4 This is a schematic diagram of the second nine-square grid disclosed in this paper. (For example...) Figure 4 As shown, assuming the new center grid is (i.e., the center grid of the second 9x9 grid) and 4 grids in the first 9x9 grid, the data tables in the previously displayed data tables that are located within the updated canvas area can be further identified as the data tables to be optimized. Pre-defined optimization processes can then be performed based on these data tables, i.e., the update rendering logic can be executed.

[0069] In addition, preferably, in response to the user performing a zoom (shrink or enlarge) operation on the ER diagram, the second display viewport size can be determined based on the first display viewport size and the zoom ratio corresponding to the zoom operation, and the rectangle corresponding to the second display viewport size can be used as the center cell in the third nine-grid. The third nine-grid is determined based on the center cell in the third nine-grid, and the area of ​​the third nine-grid can be used as the updated canvas area. Furthermore, the data tables in the data tables that were displayed before the update and located within the updated canvas area can be determined as the data tables to be optimized, and a predetermined optimization process can be performed based on the data tables to be optimized.

[0070] The default value for scaling initialization can be 1, and a scaling range can be specified, such as [0.1, 10]. After the user triggers the scaling operation, the size of the second display viewport can be determined based on the scaling ratio and the size of the first display viewport, such as by multiplying the size of the first display viewport by the scaling ratio.

[0071] Based on the second display viewport size, a third 9-grid can be generated, and the area of ​​the third 9-grid can be used as the updated canvas area. Then, the data tables in the data tables that were displayed before the update and located in the updated canvas area can be identified as the data tables to be optimized. The predetermined optimization process can be performed based on the data tables to be optimized, that is, the update rendering logic can be executed.

[0072] As can be seen, the solution described in this disclosure supports user drag and zoom operations, thereby further enhancing user-friendliness and operability.

[0073] Preferably, the method of performing predetermined optimization processing based on the data table to be optimized may include: for any data table to be optimized, in response to determining that there is a data table in the database that has a direct relationship with the data table to be optimized and is not displayed in the updated canvas area, the determined data table can be used as the data table to be processed, and the data table to be processed can be added to the updated canvas area for rendering.

[0074] Preferably, the display position of the data table to be processed in the updated canvas area can be determined according to the force-directed layout algorithm without changing the position of the data table already displayed in the updated canvas area, and the data table to be processed can be displayed according to the display position, and the data table to be processed can be connected to the corresponding data table to be optimized through a connecting line.

[0075] For example, the data table to be processed can be drawn as SVG tags using the D3.JS library and added to the updated canvas area for rendering. Similarly, based on the direct relationships, corresponding connecting line SVG tags can be drawn using the D3.JS library and added to the updated canvas area for rendering. Furthermore, the positions of the data tables already displayed in the updated canvas area can be maintained, making it easier for users to view newly added data table information.

[0076] It should be noted that, for the sake of simplicity, the foregoing method embodiments are described as a series of actions. However, those skilled in the art should understand that this disclosure is not limited to the described order of actions, as some steps may be performed in other orders or simultaneously according to this disclosure. Furthermore, those skilled in the art should also understand that the embodiments described in the specification are preferred embodiments, and the actions and modules involved are not necessarily essential to this disclosure.

[0077] The above is an introduction to the method embodiments. The following describes the solution described in this disclosure further through device embodiments.

[0078] Figure 5 This is a schematic diagram of the structural composition of Embodiment 500 of the data table display device described in this disclosure. Figure 5 As shown, it includes: a first determining module 501, a second determining module 502, and a processing module 503.

[0079] The first determining module 501 is used to determine the canvas area in response to the user's request to display the data table.

[0080] The second determining module 502 is used to determine the target data table to be rendered from each data table in the database based on the canvas area.

[0081] The processing module 503 is used to add each target data table to the canvas area according to the determined display position of each target data table in the canvas area, render each target data table, obtain the ER diagram corresponding to each target data table, and display the ER diagram to the user.

[0082] The solution described in the above-described device embodiment can provide users with a visual ER diagram front-end interface, enabling non-technical personnel to view and understand the data table relationships in the database in an intuitive and efficient manner. Moreover, the display effect can be improved by determining the display position of each target data table.

[0083] In response to a data table display request, the canvas area can be determined first. Preferably, the first determining module 501 can obtain a pre-set first display viewport size, and can use the rectangle corresponding to the first display viewport size as the center cell in the first nine-grid, and can determine the first nine-grid based on the center cell, wherein the size of each non-center cell is the same as the size of the center cell, and then the first nine-grid area can be used as the canvas area.

[0084] Based on the canvas area, the target data table to be rendered can be determined from the data tables in the database. Preferably, the second determining module 502 can obtain the quotient of the width of the canvas area and the default value, and can round down the quotient. The width of each data table is set to the default value when displayed. Then, the rounded result can be used as the target quantity, and the data table of the target quantity can be selected from the database as the default data table. Further, data tables that have a direct relationship with the default data table can be selected from the data tables in the database. Then, the two selected data tables can be deduplicated and used as the determined target data table.

[0085] Preferably, when selecting a target number of data tables from the database, the second determining module 502 can sort the data tables in the database according to a predetermined method, and then select the data tables that are in the first M positions after sorting, where the value of M is equal to the target number.

[0086] Furthermore, the processing module 503 can add each target data table to the canvas area for rendering according to the display position of each target data table in the canvas area, thereby obtaining the ER diagram corresponding to each target data table, and can display the ER diagram to the user.

[0087] As mentioned earlier, the width of each data table is set to the default value when displayed. For each data table, the height when displayed can be: the height of the table header name + the number of fields * the default height of a single field. Each data table usually includes multiple fields.

[0088] Preferably, for each target data table, the processing module 503 can determine the display position of each target data table according to the force-directed layout algorithm, and can display each target data table according to the display position, and can connect target data tables with direct relationships through connecting lines.

[0089] In addition, preferably, in response to determining that the user clicks on any of the displayed data tables, and that the clicked data table is the default data table, the processing module 503 can highlight the clicked data table, or highlight the clicked data table and the connecting lines connected to it.

[0090] Preferably, in response to determining that the user clicks on any of the displayed data tables, and that the clicked data table is a non-default data table, and that there exists a data table in the database that has a direct relationship with the clicked data table but is not displayed in the canvas area, the processing module 503 selects the data table that has a direct relationship with the clicked data table but is not displayed in the canvas area as the data table to be added, and adds the data table to be added to the canvas area for rendering.

[0091] Preferably, the processing module 503 can determine the display position of the data table to be added in the canvas area according to the force-directed layout algorithm while keeping the position of the data table already displayed in the canvas area unchanged, and display the data table to be added according to the display position, and connect the data table to be added with the clicked data table through a connecting line.

[0092] Alternatively, preferably, in response to the user performing an editing operation on the content of the clicked data table, the processing module 503 can save the updated content to the database.

[0093] The solution described in this disclosure also supports user dragging and zooming operations.

[0094] Preferably, in response to a user dragging the ER diagram, the processing module 503 can determine the position of the second center point based on the dragging distance and the position of the first center point. The first center point is the center point of the center cell in the canvas area. In response to the second center point being located in any non-center cell in the canvas area, the non-center cell is taken as the center cell in the second 3x3 grid. The second 3x3 grid is determined based on the center cell in the second 3x3 grid, and the area of ​​the second 3x3 grid is taken as the updated canvas area. Then, the data table in the data table that was displayed before the update and located in the updated canvas area can be determined as the data table to be optimized, and a predetermined optimization process can be performed based on the data table to be optimized.

[0095] Preferably, in response to a user performing a zoom (shrink or enlarge) operation on the ER diagram, the processing module 503 can determine the second display viewport size based on the first display viewport size and the zoom ratio corresponding to the zoom operation, and can use the rectangle corresponding to the second display viewport size as the center cell in the third nine-grid. Based on the center cell in the third nine-grid, the third nine-grid is determined, and the area of ​​the third nine-grid is used as the updated canvas area. Further, the data tables in the data tables that were displayed before the update and located within the updated canvas area can be determined as the data tables to be optimized, and a predetermined optimization process can be performed based on the data tables to be optimized.

[0096] Preferably, the processing module 503 may perform a predetermined optimization process based on the data table to be optimized in the following ways: for any data table to be optimized, in response to determining that there is a data table in the database that has a direct relationship with the data table to be optimized but is not displayed in the updated canvas area, the determined data table may be used as the data table to be processed, and the data table to be processed may be added to the updated canvas area for rendering.

[0097] Preferably, the processing module 503 can determine the display position of the data table to be processed in the updated canvas area according to the force-directed layout algorithm while keeping the position of the data table already displayed in the updated canvas area unchanged, and can display the data table to be processed according to the display position, and can connect the data table to be processed with the corresponding data table to be optimized through a connecting line.

[0098] Figure 5 The specific workflow of the device embodiment shown can be found in the relevant descriptions in the foregoing method embodiments, and will not be repeated here.

[0099] In summary, the solution described in this disclosure enables non-technical personnel to view and understand the relationships between data tables in a database in an intuitive and efficient manner, thus improving the presentation effect. Moreover, in practical applications, the solution described in this disclosure can be implemented in the form of a software development kit (SDK). This SDK can be easily integrated into various front-end frameworks and web applications, offering great flexibility and reducing the technical difficulty and cost of integration.

[0100] Furthermore, the solutions described in this disclosure can be applied to the field of artificial intelligence, particularly in areas such as cloud computing, distributed storage, and databases. Artificial intelligence is the study of enabling computers to simulate certain human thought processes and intelligent behaviors (such as learning, reasoning, thinking, and planning). It encompasses both hardware and software technologies. Artificial intelligence hardware technologies generally include sensors, dedicated AI chips, cloud computing, distributed storage, and big data processing. Artificial intelligence software technologies mainly include computer vision, speech recognition, natural language processing, machine learning / deep learning, big data processing, and knowledge graph technologies.

[0101] The data tables and other data in the embodiments described in this disclosure are not targeted at any specific user and do not reflect the personal information of any specific user. The collection, storage, use, processing, transmission, provision, and disclosure of user personal information involved in the technical solutions of this disclosure all comply with relevant laws and regulations and do not violate public order and good morals.

[0102] According to embodiments of this disclosure, this disclosure also provides an electronic device, a readable storage medium, and a computer program product.

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

[0104] like Figure 6 As shown, device 600 includes a computing unit 601, which can perform various appropriate actions and processes based on a computer program stored in read-only memory (ROM) 602 or a computer program loaded from storage unit 608 into random access memory (RAM) 603. RAM 603 may also store various programs and data required for the operation of device 600. The computing unit 601, ROM 602, and RAM 603 are interconnected via bus 604. Input / output (I / O) interface 605 is also connected to bus 604.

[0105] Multiple components in device 600 are connected to I / O interface 605, including: input unit 606, such as keyboard, mouse, etc.; output unit 607, such as various types of monitors, speakers, etc.; storage unit 608, such as disk, optical disk, etc.; and communication unit 609, such as network card, modem, wireless transceiver, etc. Communication unit 609 allows device 600 to exchange information / data with other devices through computer networks such as the Internet and / or various telecommunications networks.

[0106] The computing unit 601 can be a variety of general-purpose and / or special-purpose processing components with processing and computing capabilities. Some examples of the computing unit 601 include, but are not limited to, a central processing unit (CPU), a graphics processing unit (GPU), various special-purpose artificial intelligence (AI) computing chips, various computing units running machine learning model algorithms, a digital signal processor (DSP), and any suitable processor, controller, microcontroller, etc. The computing unit 601 performs the various methods and processes described above, such as those described in this disclosure. For example, in some embodiments, the methods described in this disclosure can be implemented as a computer software program tangibly contained in a machine-readable medium, such as storage unit 608. In some embodiments, part or all of the computer program can be loaded and / or installed on device 600 via ROM 602 and / or communication unit 609. When the computer program is loaded into RAM 603 and executed by the computing unit 601, one or more steps of the methods described in this disclosure can be performed. Alternatively, in other embodiments, the computing unit 601 can be configured to perform the methods described in this disclosure by any other suitable means (e.g., by means of firmware).

[0107] Various embodiments of the systems and techniques described above herein can be implemented in digital electronic circuit systems, integrated circuit systems, field-programmable gate arrays (FPGAs), application-specific integrated circuits (ASICs), application-specific standard products (ASSPs), systems-on-a-chip (SoCs), complex programmable logic devices (CPLDs), computer hardware, firmware, software, and / or combinations thereof. These various embodiments may include implementations in one or more computer programs that can be executed and / or interpreted on a programmable system including at least one programmable processor, which may be a dedicated or general-purpose programmable processor, capable of receiving data and instructions from a storage system, at least one input device, and at least one output device, and transmitting data and instructions to the storage system, the at least one input device, and the at least one output device.

[0108] The program code used to implement the methods of this disclosure may be written in any combination of one or more programming languages. This program code may be provided to a processor or controller of a general-purpose computer, special-purpose computer, or other programmable data processing apparatus, such that when executed by the processor or controller, the program code causes the functions / operations specified in the flowcharts and / or block diagrams to be implemented. The program code may be executed entirely on a machine, partially on a machine, as a standalone software package partially on a machine and partially on a remote machine, or entirely on a remote machine or server.

[0109] In the context of this disclosure, a machine-readable medium can be a tangible medium that may contain or store a program for use by or in conjunction with an instruction execution system, apparatus, or device. A machine-readable medium can be a machine-readable signal medium or a machine-readable storage medium. A machine-readable medium can be, but is not limited to, electronic, magnetic, optical, electromagnetic, infrared, or semiconductor systems, apparatus, or devices, or any suitable combination of the foregoing. More specific examples of machine-readable storage media include electrical connections based on one or more wires, portable computer disks, hard disks, random access memory (RAM), read-only memory (ROM), erasable programmable read-only memory (EPROM or flash memory), optical fiber, portable compact disk read-only memory (CD-ROM), optical storage devices, magnetic storage devices, or any suitable combination of the foregoing.

[0110] To provide interaction with a user, the systems and techniques described herein can be implemented on a computer having: a display device for displaying information to the user (e.g., a CRT (cathode ray tube) or LCD (liquid crystal display) monitor); and a keyboard and pointing device (e.g., a mouse or trackball) through which the user provides input to the computer. Other types of devices can also be used to provide interaction with the user; for example, feedback provided to the user can be any form of sensory feedback (e.g., visual feedback, auditory feedback, or tactile feedback); and input from the user can be received in any form (including sound input, voice input, or tactile input).

[0111] The systems and technologies described herein can be implemented in computing systems that include backend components (e.g., as a data server), or computing systems that include middleware components (e.g., an application server), or computing systems that include frontend components (e.g., a user computer with a graphical user interface or web browser through which a user can interact with embodiments of the systems and technologies described herein), or any combination of such backend, middleware, or frontend components. The components of the system can be interconnected via digital data communication of any form or medium (e.g., a communication network). Examples of communication networks include local area networks (LANs), wide area networks (WANs), and the Internet.

[0112] Computer systems can include clients and servers. Clients and servers are generally located far apart and typically interact via communication networks. Client-server relationships are created by computer programs running on the respective computers and having a client-server relationship with each other. Servers can be cloud servers, servers in distributed systems, or servers incorporating blockchain technology.

[0113] It should be understood that the various forms of processes shown above can be used to rearrange, add, or delete steps. For example, the steps described in this disclosure can be executed in parallel, sequentially, or in different orders, as long as the desired result of the technical solution disclosed in this disclosure can be achieved, and this is not limited herein.

[0114] The specific embodiments described above do not constitute a limitation on the scope of protection of this disclosure. Those skilled in the art should understand that various modifications, combinations, sub-combinations, and substitutions can be made according to design requirements and other factors. Any modifications, equivalent substitutions, and improvements made within the spirit and principles of this disclosure should be included within the scope of protection of this disclosure.

Claims

1. A method for displaying data tables, comprising: In response to the user's request to display the data table, the canvas area is determined; The process of determining the target data table to be rendered from each data table in the database based on the canvas area includes: obtaining the quotient of the width of the canvas area and the default value, and rounding the quotient down, wherein the width of each data table is set to the default value when displayed, taking the rounded result as the target quantity, selecting the data table of the target quantity from the database as the default data table, selecting data tables that have a direct relationship with the default data table from each data table in the database, and deduplicating the selected data tables to take the target data table. The display position of each target data table in the canvas area is determined according to the force-directed layout algorithm. Each target data table is added to the canvas area and rendered according to the display position to obtain the entity relationship graph corresponding to each target data table. The entity relationship graph is then displayed to the user.

2. The method according to claim 1, wherein, The process of determining the canvas area includes: Obtain the pre-set first display viewport size; The rectangle corresponding to the first display viewport size is taken as the center cell in the first nine-grid, and the first nine-grid is determined according to the center cell, wherein the size of each non-center cell is the same as the size of the center cell. The first nine-grid area is used as the canvas area.

3. The method according to claim 1, wherein, The step of selecting the target number of data tables from the database includes: sorting each data table in the database according to a predetermined method, and selecting the data tables that are in the top M positions after sorting as the selected data tables, where the value of M is equal to the target number.

4. The method according to claim 1, wherein, The step of adding each target data table to the canvas area for rendering also includes connecting the target data tables that have the direct relationship with each other using connection lines.

5. The method according to claim 4, further comprising: In response to determining that the user clicks on any of the displayed data tables, and that the clicked data table is the default data table, the clicked data table is highlighted, or the clicked data table and the connecting lines are highlighted.

6. The method according to claim 4, further comprising: In response to determining that the user clicks on any of the displayed data tables, and that the clicked data table is a non-default data table, and that there exists a data table in the database that has a direct relationship with the clicked data table but is not displayed in the canvas area, the data table that has a direct relationship with the clicked data table but is not displayed in the canvas area is designated as a data table to be added, and the data table to be added is added to the canvas area for rendering.

7. The method according to claim 6, wherein, The step of adding the data table to be added to the canvas area for rendering includes: Without changing the position of the data table already displayed in the canvas area, the display position of the data table to be added in the canvas area is determined according to the force-guided layout algorithm, the data table to be added is displayed according to the display position, and the data table to be added is connected to the clicked data table through a connecting line.

8. The method according to claim 5, 6 or 7, further comprising: In response to the user performing an edit operation on the content of the clicked data table, the edited and updated content is saved to the database.

9. The method according to claim 2, further comprising: In response to the user performing a drag operation on the entity relationship diagram, the second center point position is determined based on the drag distance and the first center point position, where the first center point position is the center point position of the center cell in the canvas area. In response to the second center point being located in any non-center cell of the canvas area, the non-center cell is taken as the center cell of the second nine-grid, and the second nine-grid is determined based on the center cell of the second nine-grid, and the area of ​​the second nine-grid is taken as the updated canvas area. The data tables that were displayed before the update and are located within the updated canvas area are identified as the data tables to be optimized, and a predetermined optimization process is performed based on the data tables to be optimized.

10. The method according to claim 2, further comprising: In response to the user performing a zoom operation on the entity relationship graph, the second display viewport size is determined based on the first display viewport size and the zoom ratio corresponding to the zoom operation. The rectangle corresponding to the second display viewport size is taken as the center cell in the third nine-grid, and the third nine-grid is determined based on the center cell in the third nine-grid. The area of ​​the third nine-grid is taken as the updated canvas area. The data tables that were displayed before the update and are located within the updated canvas area are identified as the data tables to be optimized, and a predetermined optimization process is performed based on the data tables to be optimized.

11. The method according to claim 9 or 10, wherein, The predetermined optimization process based on the data table to be optimized includes: For any data table to be optimized, in response to determining that there exists a data table in the database that has a direct relationship with the data table to be optimized but is not displayed in the updated canvas area, the determined data table is taken as the data table to be processed, and the data table to be processed is added to the updated canvas area for rendering.

12. The method according to claim 11, wherein, The step of adding the data table to be processed to the updated canvas area for rendering includes: while keeping the data table already displayed in the updated canvas area unchanged, determining the display position of the data table to be processed in the updated canvas area according to the force-directed layout algorithm, displaying the data table to be processed according to the display position, and connecting the data table to be processed with the corresponding data table to be optimized through a connection line.

13. A data table display device, comprising: The module comprises a first determination module, a second determination module, and a processing module. The first determining module is used to determine the canvas area in response to receiving a user's data table display request; The second determining module is used to determine the target data table to be rendered from each data table in the database based on the canvas area, including: obtaining the quotient of the width of the canvas area and the default value, and rounding the quotient down, wherein the width of each data table is set to the default value when displayed, taking the rounded result as the target quantity, selecting the data table of the target quantity from the database as the default data table, selecting the data table that has a direct relationship with the default data table from each data table in the database, and deduplicating the selected data tables twice to take the target data table; The processing module is used to determine the display position of each target data table in the canvas area according to the force-directed layout algorithm, add each target data table to the canvas area for rendering according to the display position, obtain the entity relationship graph corresponding to each target data table, and display the entity relationship graph to the user.

14. The apparatus according to claim 13, wherein, The first determining module obtains a preset first display viewport size, takes the rectangle corresponding to the first display viewport size as the center grid in the first nine-grid, and determines the first nine-grid based on the center grid, wherein the size of each non-center grid is the same as the size of the center grid, and takes the first nine-grid area as the canvas area.

15. The apparatus according to claim 13, wherein, The second determining module sorts each data table in the database according to a predetermined method, and selects the data tables that are in the top M positions after sorting, where the value of M is equal to the target number.

16. The apparatus according to claim 13, wherein, The processing module is further configured to connect target data tables that have the direct relationship using connection lines.

17. The apparatus according to claim 16, wherein, The processing module is further configured to, in response to determining that the user clicks on any of the displayed data tables, and that the clicked data table is the default data table, highlight the clicked data table, or highlight the clicked data table and the connecting lines connected to it.

18. The apparatus according to claim 16, wherein, The processing module is further configured to, in response to determining that the user clicks on any of the displayed data tables, and that the clicked data table is a non-default data table, and that there exists a data table in the database that has a direct association with the clicked data table but is not displayed in the canvas area, designate the data table that has a direct association with the clicked data table but is not displayed in the canvas area as a data table to be added, and add the data table to be added to the canvas area for rendering.

19. The apparatus according to claim 18, wherein, While keeping the already displayed data tables in the canvas area unchanged, the processing module determines the display position of the data table to be added in the canvas area according to the force-guided layout algorithm, displays the data table to be added according to the display position, and connects the data table to be added with the clicked data table through a connecting line.

20. The apparatus according to claim 17, 18 or 19, wherein, The processing module is further configured to, in response to the user performing an edit operation on the content of the clicked data table, save the edited and updated content to the database.

21. The apparatus according to claim 14, wherein, The processing module is further configured to, in response to the user performing a drag operation on the entity relationship diagram, determine a second center point position based on the drag distance and the first center point position, wherein the first center point position is the center point position of the center cell in the canvas area; in response to the second center point position being located in any non-center cell in the canvas area, designate the non-center cell as the center cell in the second nine-square grid, determine the second nine-square grid based on the center cell in the second nine-square grid, designate the second nine-square grid area as the updated canvas area, determine the data table in the data table that was displayed before the update and located within the updated canvas area as the data table to be optimized, and perform predetermined optimization processing based on the data table to be optimized.

22. The apparatus according to claim 14, wherein, The processing module is further configured to, in response to the user performing a scaling operation on the entity relationship diagram, determine a second display viewport size based on the first display viewport size and the scaling ratio corresponding to the scaling operation, take the rectangle corresponding to the second display viewport size as the center cell in the third nine-grid, determine the third nine-grid based on the center cell in the third nine-grid, take the area of ​​the third nine-grid as the updated canvas area, determine the data table in the data table that was displayed before the update and located in the updated canvas area as the data table to be optimized, and perform predetermined optimization processing based on the data table to be optimized.

23. The apparatus according to claim 21 or 22, wherein, For any data table to be optimized, the processing module, in response to determining that there exists a data table in the database that has a direct relationship with the data table to be optimized but is not displayed in the updated canvas area, takes the determined data table as the data table to be processed and adds the data table to be processed to the updated canvas area for rendering.

24. The apparatus according to claim 23, wherein, While keeping the data tables already displayed in the updated canvas area unchanged, the processing module determines the display position of the data table to be processed in the updated canvas area according to the force-directed layout algorithm, displays the data table to be processed according to the display position, and connects the data table to be processed with the corresponding data table to be optimized through a connecting line.

25. An electronic device, comprising: At least one processor; as well as A memory communicatively connected to the at least one processor; wherein, The memory stores instructions that can be executed by the at least one processor to enable the at least one processor to perform the method of any one of claims 1-12.

26. A non-transitory computer-readable storage medium storing computer instructions, wherein, The computer instructions are used to cause the computer to perform the method according to any one of claims 1-12.

27. A computer program product comprising a computer program / instructions that, when executed by a processor, implement the method of any one of claims 1-12.

Images