Retrieve spatialDataColumn in TableWidget for its future usage

CartoDB · Sep 6, 2024 · e9b5419 · e9b5419
1 parent fcfed20
commit e9b5419
Show file tree

Hide file tree

Showing 4 changed files with 81 additions and 25 deletions.
diff --git a/DEVELOPERS.md b/DEVELOPERS.md
@@ -31,6 +31,20 @@ Then, inside the proper template folder in carto-react-template, link packages w
   yarn link-carto-react
 ```
 
+## copy-packages.sh
+
+As an alternative to `yarn link`, `copy-packages.sh` could be used for copying the content of every package to the target directory, e.g:
+
+```
+./copy-packages.sh ~/workspace/repositories/cloud-native/workspace-www/node_modules/@carto
+```
+
+Thus, combined with the execution of `yarn build` in the root of this repository, will copy every package into the target directory:
+
+```
+yarn build && ./copy-packages.sh ~/workspace/repositories/cloud-native/workspace-www/node_modules/@carto
+```
+
 ## npm release
 
 You will need npm credentials under @carto organization.

diff --git a/copy-packages.sh b/copy-packages.sh
@@ -0,0 +1,23 @@
+#!/bin/bash
+
+if [ -z "$1" ]; then
+  echo "Missing target directory. Usage: $0 <target_dir>"
+  exit 1
+fi
+
+SOURCE_DIR="packages"
+TARGET_DIR="$1"
+
+for dir in "$SOURCE_DIR"/*; do
+  if [ -d "$dir" ]; then
+    DIR_NAME=$(basename "$dir")
+
+    SOURCE_PATH="$dir/dist"
+    TARGET_PATH="$TARGET_DIR/$DIR_NAME"
+
+    echo "Copying $SOURCE_PATH to $TARGET_PATH"
+    cp -r "$SOURCE_PATH" "$TARGET_PATH"
+  fi
+done
+
+echo "All directories copied successfully!"
diff --git a/packages/react-api/src/api/model.js b/packages/react-api/src/api/model.js
@@ -17,6 +17,33 @@ const AVAILABLE_MODELS = [
 
 const DEFAULT_GEO_COLUMN = 'geom';
 
+const extractSpatialDataFromSource = (source) => {
+  let spatialDataType = source.spatialDataType;
+  let spatialDataColumn = source.spatialDataColumn;
+
+  if (!spatialDataType || !spatialDataColumn) {
+    if (source.geoColumn) {
+      const parsedGeoColumn = source.geoColumn.split(':');
+      if (parsedGeoColumn.length === 2) {
+        spatialDataType = parsedGeoColumn[0];
+        spatialDataColumn = parsedGeoColumn[1];
+      } else if (parsedGeoColumn.length === 1) {
+        spatialDataColumn = parsedGeoColumn[0] || DEFAULT_GEO_COLUMN;
+        spatialDataType = 'geo';
+      }
+      if (spatialDataType === 'geom') {
+        // fallback if for some reason someone provided old `geom:$column`
+        spatialDataType = 'geo';
+      }
+    } else {
+      spatialDataType = 'geo';
+      spatialDataColumn = DEFAULT_GEO_COLUMN;
+    }
+  }
+
+  return { spatialDataType, spatialDataColumn };
+};
+
 /**
  * Execute a SQL model request.
  *
@@ -56,6 +83,7 @@ export function executeModel(props) {
   const queryParameters = source.queryParameters
     ? JSON.stringify(source.queryParameters)
     : '';
+
   let queryParams = {
     type,
     client: _getClient(),
@@ -67,29 +95,8 @@ export function executeModel(props) {
   };
 
   let spatialFilters;
-  if (spatialFilter) {
-    let spatialDataType = source.spatialDataType;
-    let spatialDataColumn = source.spatialDataColumn;
-
-    if (!spatialDataType || !spatialDataColumn) {
-      if (source.geoColumn) {
-        const parsedGeoColumn = source.geoColumn.split(':');
-        if (parsedGeoColumn.length === 2) {
-          spatialDataType = parsedGeoColumn[0];
-          spatialDataColumn = parsedGeoColumn[1];
-        } else if (parsedGeoColumn.length === 1) {
-          spatialDataColumn = parsedGeoColumn[0] || DEFAULT_GEO_COLUMN;
-          spatialDataType = 'geo';
-        }
-        if (spatialDataType === 'geom') {
-          // fallback if for some reason someone provided old `geom:$column`
-          spatialDataType = 'geo';
-        }
-      } else {
-        spatialDataType = 'geo';
-        spatialDataColumn = DEFAULT_GEO_COLUMN;
-      }
-    }
+  if (spatialFilter || props.model === 'table') {
+    const { spatialDataType, spatialDataColumn } = extractSpatialDataFromSource(source);
 
     // API supports multiple filters, we apply it only to geometry column or spatialDataColumn
     spatialFilters = spatialFilter
@@ -98,14 +105,24 @@ export function executeModel(props) {
         }
       : undefined;
 
-    queryParams.spatialFilters = JSON.stringify(spatialFilters);
-    queryParams.spatialDataType = spatialDataType;
+    if (spatialFilters) queryParams.spatialFilters = JSON.stringify(spatialFilters);
+    if (spatialDataType) queryParams.spatialDataType = spatialDataType;
+    if (spatialDataColumn) queryParams.spatialDataColumn = spatialDataColumn;
+
     if (spatialDataType !== 'geo') {
       if (source.spatialFiltersResolution !== undefined) {
         queryParams.spatialFiltersResolution = source.spatialFiltersResolution;
       }
       queryParams.spatialFiltersMode = source.spatialFiltersMode || 'intersects';
     }
+
+    // We should retrieve the spatialDataColumn as part of the params.column
+    if (props.model === 'table') {
+      queryParams.params = JSON.stringify({
+        ...params,
+        column: [...params.column, spatialDataColumn]
+      });
+    }
   }
 
   const urlWithSearchParams = url + '?' + new URLSearchParams(queryParams).toString();

diff --git a/packages/react-widgets/src/widgets/TableWidget.js b/packages/react-widgets/src/widgets/TableWidget.js
@@ -36,6 +36,7 @@ function TableWidget({
   noDataAlertProps,
   onError,
   onStateChange,
+  onRowClick,
   initialPageSize = 10,
   onPageSizeChange,
   global,
@@ -121,6 +122,7 @@ function TableWidget({
             height={height}
             dense={dense}
             isLoading={isLoading}
+            onRowClick={onRowClick}
           />
         )}
       </WidgetWithAlert>