Fixed an issue where the result grid slowed down when any column contained a large amount of data. #6510

Author: pravesh-sharma

docs/en_US/images/preferences_sql_results_grid.png

@@ -542,6 +542,9 @@ preferences for copied data.
   setting won't have any effect.
 * 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 *Max column data display length* to specify the maximum number of
+  characters to display in a cell. If the data is larger than this value, it
+  will be truncated.
 * 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

docs/en_US/preferences.rst

@@ -114,7 +114,6 @@
     "insert-if": "^1.1.0",
     "ip-address": "^10.0.1",
     "json-bignumber": "^1.0.1",
-    "jsoneditor": "^10.1.2",
     "leaflet": "^1.9.4",
     "lodash": "4.*",
     "moment": "^2.29.4",
@@ -150,6 +149,7 @@
     "uplot": "^1.6.32",
     "uplot-react": "^1.1.4",
     "valid-filename": "^4.0.0",
+    "vanilla-jsoneditor": "^3.3.1",
     "wkx": "^0.5.0",
     "zustand": "^5.0.3"
   },

web/package.json

@@ -3,7 +3,6 @@
 
 @import 'node_modules/@xterm/xterm/css/xterm.css';
 
-@import 'node_modules/jsoneditor/dist/jsoneditor.min.css';
 @import 'node_modules/react-checkbox-tree/lib/react-checkbox-tree.css';
 
 @import 'node_modules/@simonwep/pickr/dist/themes/monolith.min.css';

web/pgadmin/static/css/style.css

@@ -11,6 +11,11 @@ export default function cmOverride(theme) {
   const editor = theme.otherVars.editor;
   return {
     '.cm-editor': {
+      // CSS variables for jsoneditor's CodeMirror
+      '--jse-font-family-mono': theme.typography.fontFamilySourceCode,
+      '--jse-panel-background': editor.guttersBg,
+      '--jse-panel-color-readonly': editor.guttersFg,
+      '--jse-panel-border': 'none',
       height: '100%',
       color: editor.fg,
       backgroundColor: editor.bg,