Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Retrieve spatialDataColumn in TableWidget for its future usage #900

Merged
merged 5 commits into from
Sep 10, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@
## Not released

- Spatial Index Sources use remote widgets calculation [#898](https://github.com/CartoDB/carto-react/pull/898)
- Support for `hiddenColumnFields` parameter and `onRowClick` handler for Table Widget [#900](https://github.com/CartoDB/carto-react/pull/900)

## 3.0.0

Expand Down
14 changes: 14 additions & 0 deletions DEVELOPERS.md
Original file line number Diff line number Diff line change
Expand Up @@ -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
```
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@zbigg I've added this, as we both sometimes copy&paste content for the seek of pragmatism when developing things on Carto4React and testing them on cloud-native 😄


## npm release

You will need npm credentials under @carto organization.
Expand Down
23 changes: 23 additions & 0 deletions copy-packages.sh
Original file line number Diff line number Diff line change
@@ -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!"
4 changes: 2 additions & 2 deletions packages/react-api/__tests__/api/model.test.js
Original file line number Diff line number Diff line change
Expand Up @@ -123,7 +123,7 @@ describe('model', () => {
expect(mockedMakeCall).toHaveBeenCalledWith({
credentials: TABLE_SOURCE.credentials,
opts: { method: 'GET' },
url: 'https://gcp-us-east1.api.carto.com/v3/sql/carto-ps-bq-developers/model/formula?type=query&client=c4react&source=SELECT+*+FROM+%60cartobq.public_account.seattle_collisions%60+WHERE+time_column+%3E+%40start+AND+time_column+%3C+%40end&params=%7B%22column%22%3A%22__test__%22%2C%22operation%22%3A%22avg%22%7D&queryParameters=%7B%22start%22%3A%222019-01-01%22%2C%22end%22%3A%222019-01-02%22%7D&filters=%7B%7D&filtersLogicalOperator=AND&spatialFilters=%7B%22geom%22%3A%7B%22type%22%3A%22Polygon%22%2C%22coordinates%22%3A%5B%5B%5B-84.40640911186557%2C31.358634554371573%5D%2C%5B-84.40640911186557%2C23.809680634191537%5D%2C%5B-78.72111096471372%2C23.809680634191537%5D%2C%5B-78.72111096471372%2C31.358634554371573%5D%2C%5B-84.40640911186557%2C31.358634554371573%5D%5D%5D%7D%7D&spatialDataType=geo'
url: 'https://gcp-us-east1.api.carto.com/v3/sql/carto-ps-bq-developers/model/formula?type=query&client=c4react&source=SELECT+*+FROM+%60cartobq.public_account.seattle_collisions%60+WHERE+time_column+%3E+%40start+AND+time_column+%3C+%40end&params=%7B%22column%22%3A%22__test__%22%2C%22operation%22%3A%22avg%22%7D&queryParameters=%7B%22start%22%3A%222019-01-01%22%2C%22end%22%3A%222019-01-02%22%7D&filters=%7B%7D&filtersLogicalOperator=AND&spatialFilters=%7B%22geom%22%3A%7B%22type%22%3A%22Polygon%22%2C%22coordinates%22%3A%5B%5B%5B-84.40640911186557%2C31.358634554371573%5D%2C%5B-84.40640911186557%2C23.809680634191537%5D%2C%5B-78.72111096471372%2C23.809680634191537%5D%2C%5B-78.72111096471372%2C31.358634554371573%5D%2C%5B-84.40640911186557%2C31.358634554371573%5D%5D%5D%7D%7D&spatialDataType=geo&spatialDataColumn=geom'
});
});

Expand All @@ -138,7 +138,7 @@ describe('model', () => {
expect(mockedMakeCall).toHaveBeenCalledWith({
credentials: TABLE_SOURCE.credentials,
opts: { method: 'GET' },
url: 'https://gcp-us-east1.api.carto.com/v3/sql/carto-ps-bq-developers/model/formula?type=query&client=c4react&source=SELECT+*+FROM+%60cartobq.public_account.seattle_collisions%60+WHERE+time_column+%3E+%40start+AND+time_column+%3C+%40end&params=%7B%22column%22%3A%22__test__%22%2C%22operation%22%3A%22avg%22%7D&queryParameters=%7B%22start%22%3A%222019-01-01%22%2C%22end%22%3A%222019-01-02%22%7D&filters=%7B%7D&filtersLogicalOperator=AND&spatialFilters=%7B%22abc%22%3A%7B%22type%22%3A%22Polygon%22%2C%22coordinates%22%3A%5B%5B%5B-84.40640911186557%2C31.358634554371573%5D%2C%5B-84.40640911186557%2C23.809680634191537%5D%2C%5B-78.72111096471372%2C23.809680634191537%5D%2C%5B-78.72111096471372%2C31.358634554371573%5D%2C%5B-84.40640911186557%2C31.358634554371573%5D%5D%5D%7D%7D&spatialDataType=geo'
url: 'https://gcp-us-east1.api.carto.com/v3/sql/carto-ps-bq-developers/model/formula?type=query&client=c4react&source=SELECT+*+FROM+%60cartobq.public_account.seattle_collisions%60+WHERE+time_column+%3E+%40start+AND+time_column+%3C+%40end&params=%7B%22column%22%3A%22__test__%22%2C%22operation%22%3A%22avg%22%7D&queryParameters=%7B%22start%22%3A%222019-01-01%22%2C%22end%22%3A%222019-01-02%22%7D&filters=%7B%7D&filtersLogicalOperator=AND&spatialFilters=%7B%22abc%22%3A%7B%22type%22%3A%22Polygon%22%2C%22coordinates%22%3A%5B%5B%5B-84.40640911186557%2C31.358634554371573%5D%2C%5B-84.40640911186557%2C23.809680634191537%5D%2C%5B-78.72111096471372%2C23.809680634191537%5D%2C%5B-78.72111096471372%2C31.358634554371573%5D%2C%5B-84.40640911186557%2C31.358634554371573%5D%5D%5D%7D%7D&spatialDataType=geo&spatialDataColumn=abc'
});
});
});
Expand Down
59 changes: 34 additions & 25 deletions packages/react-api/src/api/model.js
Original file line number Diff line number Diff line change
Expand Up @@ -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.
*
Expand Down Expand Up @@ -56,6 +83,7 @@ export function executeModel(props) {
const queryParameters = source.queryParameters
? JSON.stringify(source.queryParameters)
: '';

let queryParams = {
type,
client: _getClient(),
Expand All @@ -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
Expand All @@ -98,8 +105,10 @@ 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;
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This only specifies which is the spatialDataColumn and shouldn't affect other Widgets, but it's used from the Backend perspective for determining which column they should "transform", for more info see: https://github.com/CartoDB/cloud-native/pull/17146


if (spatialDataType !== 'geo') {
if (source.spatialFiltersResolution !== undefined) {
queryParams.spatialFiltersResolution = source.spatialFiltersResolution;
Expand Down
8 changes: 7 additions & 1 deletion packages/react-widgets/src/widgets/TableWidget.js
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,8 @@ import { _FeatureFlags, _hasFeatureFlag } from '@carto/react-core';
* @param {string} props.title - Title to show in the widget header.
* @param {string} props.dataSource - ID of the data source to get the data from.
* @param {Column[]} props.columns - List of data columns to display.
* @param {Column[]} props.hiddenColumnFields - List of data columns to be retrieved, but not displayed.
* @param {Function=} props.onRowClick - Function to handle on click events on rows.
* @param {Function=} [props.onError] - Function to handle error messages from the widget.
* @param {Function=} [props.onStateChange] - Callback to handle state updates of widgets
* @param {object} [props.wrapperProps] - Extra props to pass to [WrapperWidgetUI](https://storybook-react.carto.com/?path=/docs/widgets-wrapperwidgetui--default).
Expand All @@ -32,10 +34,12 @@ function TableWidget({
title,
dataSource,
columns,
hiddenColumnFields = [],
wrapperProps,
noDataAlertProps,
onError,
onStateChange,
onRowClick,
initialPageSize = 10,
onPageSizeChange,
global,
Expand All @@ -60,7 +64,7 @@ function TableWidget({
id,
dataSource,
params: {
columns: columns.map((c) => c.field),
columns: [...columns.map((c) => c.field), ...hiddenColumnFields],
sortBy,
sortDirection,
sortByColumnType,
Expand Down Expand Up @@ -121,6 +125,7 @@ function TableWidget({
height={height}
dense={dense}
isLoading={isLoading}
onRowClick={onRowClick}
Copy link
Contributor Author

@jmgaya jmgaya Sep 6, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I've added support for the onRowClick event Handler to the TableWidget, because it needs support for this initiative 👍

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ok but add a new comment in the parm section please

/>
)}
</WidgetWithAlert>
Expand All @@ -139,6 +144,7 @@ TableWidget.propTypes = {
align: PropTypes.oneOf(['left', 'right'])
})
).isRequired,
hiddenColumnFields: PropTypes.arrayOf(PropTypes.string),
onError: PropTypes.func,
wrapperProps: PropTypes.object,
noDataAlertProps: PropTypes.object,
Expand Down
Loading