Fix an issue where query tool hangs for some time when multiple columns are selected to open geometry viewer. #5044

web/pgadmin/static/js/components/PgTree/scss/styles.scss

@@ -4,6 +4,7 @@
     background-color: $color-bg !important;
     display: inline-block;
     color: $tree-text-fg !important;
+    position: relative;
 
     &,
     & * {

web/pgadmin/tools/sqleditor/static/js/components/sections/GeometryViewer.jsx

@@ -208,10 +208,10 @@ function PopupTable({data}) {
 }
 
 PopupTable.propTypes = {
-  data: PropTypes.arrayOf({
+  data: PropTypes.arrayOf(PropTypes.shape({
     column: PropTypes.string,
-    value: PropTypes.string,
-  }),
+    value: PropTypes.any,
+  })),
 };
 
 function GeoJsonLayer({data}) {
@@ -250,13 +250,14 @@ function GeoJsonLayer({data}) {
       style={{weight: 2}}
       onEachFeature={(feature, layer)=>{
         if(_.isFunction(data.getPopupContent)) {
-          const popupContentNode = (
-            <Theme>
-              <PopupTable data={data.getPopupContent(layer.feature.geometry)}/>
-            </Theme>
-          );
-          const popupContentHtml = ReactDOMServer.renderToString(popupContentNode);
-          layer.bindPopup(popupContentHtml, {
+          layer.bindPopup((l)=>{
+            const popupContentNode = (
+              <Theme>
+                <PopupTable data={data.getPopupContent(l.feature.geometry)}/>
+              </Theme>
+            );
+            return ReactDOMServer.renderToString(popupContentNode);
+          }, {
             closeButton: false,
             minWidth: 260,
             maxWidth: 300,

web/pgadmin/tools/sqleditor/static/js/components/sections/ResultSet.jsx

@@ -1253,7 +1253,7 @@ export function ResultSet() {
       } else if(selectedRange.current) {
         let [,, startRowIdx, endRowIdx] = getRangeIndexes();
         selRowsData = rows.slice(startRowIdx, endRowIdx+1);
-      } else if(selectedCell.current[0]) {
+      } else if(selectedCell.current?.[0]) {
         selRowsData = [selectedCell.current[0]];
       }
       LayoutHelper.openTab(queryToolCtx.docker, {
@@ -1299,7 +1299,7 @@ export function ResultSet() {
   const onRowsChange = (newRows, otherInfo)=>{
     let row = newRows[otherInfo.indexes[0]];
     let clientPK = rowKeyGetter(row);
-    
+
     // Check if column is pk and value is null set it to default value.
     if(otherInfo.column.has_default_val && _.isNull(row[otherInfo.column.key]) && otherInfo.column.key in queryData.primary_keys) {
       row[otherInfo.column.key] = undefined;