Replace infinite scrolling with pagination in query tool data output for better UX and performance. #1780

This commit is contained in:
Aditya Toshniwal
2024-10-01 14:47:12 +05:30
committed by GitHub
parent f8fb78be11
commit 6322674d98
24 changed files with 554 additions and 351 deletions

Binary file not shown.

Before

Width:  |  Height:  |  Size: 183 KiB

After

Width:  |  Height:  |  Size: 176 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 18 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 20 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 74 KiB

After

Width:  |  Height:  |  Size: 151 KiB

View File

@@ -230,7 +230,7 @@ Use the fields on the *Options* panel to manage ERD preferences.
* Use *Cardinality Notation* to change the cardinality notation format
used to present relationship links.
used to present relationship links.
* When the *SQL With DROP Table* switch is set to *True*, the SQL
generated by the ERD Tool will add DROP table DDL before each CREATE
@@ -398,7 +398,7 @@ Use the fields on the *Editor* panel to change settings of the query editor.
changed to text/plain. Keyword highlighting and code folding will be disabled.
This will improve editor performance with large files.
* When the *Highlight selection matches?* switch is set to *True*, the editor will
* When the *Highlight selection matches?* switch is set to *True*, the editor will
highlight matched selected text.
.. image:: images/preferences_sql_explain.png
@@ -476,11 +476,11 @@ Use the fields on the *Options* panel to manage editor preferences.
* When the *Show View/Edit Data Promotion Warning?* switch is set to *True*
View/Edit Data tool will show promote to Query tool confirm dialog on query edit.
* When the *Underline query at cursor?* switch is set to *True*, query tool will
* When the *Underline query at cursor?* switch is set to *True*, query tool will
parse and underline the query at the cursor position.
* When the *Underlined query execute warning?* switch is set to *True*, query tool
will warn upon clicking the *Execute Query* button in the query tool. The warning
* When the *Underlined query execute warning?* switch is set to *True*, query tool
will warn upon clicking the *Execute Query* button in the query tool. The warning
will appear only if *Underline query at cursor?* is set to *False*.
.. image:: images/preferences_sql_results_grid.png
@@ -497,9 +497,8 @@ preferences for copied data.
* Specify the maximum width of the column in pixels when 'Columns sized by' is
set to *Column data*. If 'Columns sized by' is set to *Column name* then this
setting won't have any effect.
* Specify the number of records to fetch in one batch in query tool when
query result set is large. Changing this value will override
ON_DEMAND_ROW_COUNT setting from config file.
* Specify the number of records to fetch in one batch. Changing this value will
override DATA_RESULT_ROWS_PER_PAGE setting from config file.
* Use the *Result copy field separator* drop-down listbox to select the field
separator for copied data.
* Use the *Result copy quote character* drop-down listbox to select the quote
@@ -523,7 +522,7 @@ reformatting of SQL.
* Use the *Data type case* option to specify whether to change data types
into upper, lower, or preserve case.
* Use the *Expression width* option to specify maximum number of characters
* Use the *Expression width* option to specify maximum number of characters
in parenthesized expressions to be kept on single line.
* Use the *Function case* option to specify whether to change function
names into upper, lower, or preserve case.
@@ -531,7 +530,7 @@ reformatting of SQL.
(object names) into upper, lower, or capitalized case.
* Use the *Keyword case* option to specify whether to change keywords into
upper, lower, or preserve case.
* Use *Lines between queries* to specify how many empty lines to leave
* Use *Lines between queries* to specify how many empty lines to leave
between SQL statements. If set to zero it puts no new line.
* Use *Logical operator new line* to specify newline placement before or
after logical operators (AND, OR, XOR).

View File

@@ -74,8 +74,8 @@ key combination to select from a popup menu of autocomplete options.
After entering a query, select the *Execute script* icon from the toolbar. The
complete contents of the SQL editor panel will be sent to the database server
for execution. To execute only a section of the code that is displayed in the
SQL editor, highlight the text that you want the server to execute, and click the
for execution. To execute only a section of the code that is displayed in the
SQL editor, highlight the text that you want the server to execute, and click the
*Execute script* icon.
.. image:: images/query_execute_script.png
@@ -177,6 +177,7 @@ You can:
* Use the *Save results to file* icon to save the content of the *Data Output*
tab as a comma-delimited file.
* Edit the data in the result set of a SELECT query if it is updatable.
* Move between pages of data result.
.. _updatable-result-set:

View File

@@ -214,6 +214,48 @@ Data Editing Options
| SQL | Use the SQL button to check the current query that gave the data. | |
+----------------------+---------------------------------------------------------------------------------------------------+----------------+
Pagination Options
********************
.. image:: images/query_data_pagination.png
:alt: Query tool data pagination options
:align: center
.. table::
:class: longtable
:widths: 1 4 1
+----------------------+---------------------------------------------------------------------------------------------------+----------------+
| Icon | Behavior | Shortcut |
+======================+===================================================================================================+================+
| *Rows Range* | Show the current row numbers visible in the data grid. | |
+----------------------+---------------------------------------------------------------------------------------------------+----------------+
| *Edit Range* | Click to open the from and to rows range inputs to allow setting them. | |
+----------------------+---------------------------------------------------------------------------------------------------+----------------+
| *Page No* | Enter the page no you want to jump to out of total shown next to this input | |
+----------------------+---------------------------------------------------------------------------------------------------+----------------+
| *First Page* | Click to go to the first page. | |
+----------------------+---------------------------------------------------------------------------------------------------+----------------+
| *Previous Page* | Click to go to the previous page. | |
+----------------------+---------------------------------------------------------------------------------------------------+----------------+
| *Next Page* | Click to go to the next page. | |
+----------------------+---------------------------------------------------------------------------------------------------+----------------+
| *Last Page* | Click to go to the last page. | |
+----------------------+---------------------------------------------------------------------------------------------------+----------------+
.. image:: images/query_data_pagination_edit.png
:alt: Query tool data pagination options
:align: center
One can click the edit range button to open rows range editor:
* From and to range should be between 1 and total rows.
* The range can be applied by clicking the *Apply* button or by pressing enter in the range inputs.
* Once the range is applied, pgAdmin will recalculate the rows per page. The pagination will then behave based on the new rows per page.
* It may be possible that on pressing next page button, the new rows range is not next to manually enterred range.
Status Bar
**********