merge main

CHANGELOG.md

@@ -4,6 +4,15 @@
 
 ## 2.2
 
+### 2.2.16 (2023-11-23)
+
+- Fix TableWidget cannot render columns when it contains an array [#802](https://github.com/CartoDB/carto-react/pull/802)
+- Allow server-side table widget without hard limit [#798](https://github.com/CartoDB/carto-react/pull/798)
+
+### 2.2.15 (2023-11-15)
+
+- Fix TableWidget not displaying quadbin field for a table with spatial index [#799](https://github.com/CartoDB/carto-react/pull/799)
+
 ### 2.2.14 (2023-10-25)
 
 - AppBar: Add new color keys in the Theme [#794](https://github.com/CartoDB/carto-react/pull/794)

lerna.json

@@ -4,5 +4,5 @@
   ],
   "npmClient": "yarn",
   "useWorkspaces": true,
-  "version": "2.2.14"
+  "version": "2.2.16"
 }

packages/react-api/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@carto/react-api",
-  "version": "2.2.14",
+  "version": "2.2.16",
   "description": "CARTO for React - Api",
   "author": "CARTO Dev Team",
   "keywords": [
@@ -68,9 +68,9 @@
     "@babel/runtime": "^7.13.9"
   },
   "peerDependencies": {
-    "@carto/react-core": "^2.2.14",
-    "@carto/react-redux": "^2.2.14",
-    "@carto/react-workers": "^2.2.14",
+    "@carto/react-core": "^2.2.16",
+    "@carto/react-redux": "^2.2.16",
+    "@carto/react-workers": "^2.2.16",
     "@deck.gl/carto": "^8.9.18",
     "@deck.gl/core": "^8.9.18",
     "@deck.gl/extensions": "^8.9.18",

packages/react-auth/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@carto/react-auth",
-  "version": "2.2.14",
+  "version": "2.2.16",
   "description": "CARTO for React - Auth",
   "author": "CARTO Dev Team",
   "keywords": [
@@ -68,7 +68,7 @@
     "@babel/runtime": "^7.13.9"
   },
   "peerDependencies": {
-    "@carto/react-core": "^2.2.14",
+    "@carto/react-core": "^2.2.16",
     "react": "17.x || 18.x",
     "react-dom": "17.x || 18.x"
   }

packages/react-basemaps/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@carto/react-basemaps",
-  "version": "2.2.14",
+  "version": "2.2.16",
   "description": "CARTO for React - Basemaps",
   "keywords": [
     "carto",
@@ -68,7 +68,7 @@
     "@babel/runtime": "^7.13.9"
   },
   "peerDependencies": {
-    "@carto/react-core": "^2.2.14",
+    "@carto/react-core": "^2.2.16",
     "@deck.gl/google-maps": "^8.9.18",
     "react": "17.x || 18.x",
     "react-dom": "17.x || 18.x"

packages/react-core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@carto/react-core",
-  "version": "2.2.14",
+  "version": "2.2.16",
   "description": "CARTO for React - Core",
   "author": "CARTO Dev Team",
   "keywords": [

packages/react-redux/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@carto/react-redux",
-  "version": "2.2.14",
+  "version": "2.2.16",
   "description": "CARTO for React - Redux",
   "author": "CARTO Dev Team",
   "keywords": [
@@ -67,8 +67,8 @@
     "@babel/runtime": "^7.13.9"
   },
   "peerDependencies": {
-    "@carto/react-core": "^2.2.14",
-    "@carto/react-workers": "^2.2.14",
+    "@carto/react-core": "^2.2.16",
+    "@carto/react-workers": "^2.2.16",
     "@deck.gl/carto": "^8.9.18",
     "@deck.gl/core": "^8.9.18",
     "@reduxjs/toolkit": "^1.5.0"

packages/react-redux/src/slices/cartoSlice.d.ts

@@ -8,7 +8,7 @@ import { Feature, Polygon, MultiPolygon } from 'geojson';
 type FilterValues = string[] | number[] | number[][]
 
 export type SourceFilters = {
-  [column: string]: Partial<Record<_FilterTypes, { values: FilterValues; owner?: string; params?: Record<string, unknown>; isAnimation?: boolean }>>
+  [column: string]: Partial<Record<_FilterTypes, { values: FilterValues; owner?: string; params?: Record<string, unknown>; ignore?: boolean }>>
 }
 
 type Source = SourceProps & {

packages/react-ui/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@carto/react-ui",
-  "version": "2.2.14",
+  "version": "2.2.16",
   "description": "CARTO for React - UI",
   "author": "CARTO Dev Team",
   "keywords": [
@@ -82,7 +82,7 @@
     "@babel/runtime": "^7.13.9"
   },
   "peerDependencies": {
-    "@carto/react-core": "^2.2.14",
+    "@carto/react-core": "^2.2.16",
     "@emotion/react": "^11.10.6",
     "@emotion/styled": "^11.10.6",
     "@mui/icons-material": "^5.11.16",

packages/react-ui/src/widgets/TableWidgetUI/TableWidgetUI.js

@@ -180,9 +180,16 @@ function TableBodyComponent({ columns, rows, onRowClick }) {
             onClick={() => onRowClick && onRowClick(row)}
           >
             {columns.map(({ field, headerName, align, component }) => {
-              const cellValue = Object.entries(row).find(([key]) => {
+              let cellValue = Object.entries(row).find(([key]) => {
                 return key.toUpperCase() === field.toUpperCase();
               })?.[1];
+              if (typeof cellValue === 'bigint') {
+                cellValue = cellValue.toString(); // otherwise TableCell will fail for displaying it
+              } else if (Array.isArray(cellValue)) {
+                cellValue = `[${cellValue
+                  .map((c) => (typeof c === 'string' ? `"${c}"` : c))
+                  .join(', ')}]`;
+              }
               return (
                 (headerName || field) && (
                   <TableCellStyled

packages/react-widgets/__tests__/models/TableModel.test.js

@@ -1,4 +1,4 @@
-import { getTable, paginateTable } from '../../src/models/TableModel';
+import { getTable } from '../../src/models/TableModel';
 import { Methods, executeTask } from '@carto/react-workers';
 
 const RESULT = {
@@ -9,9 +9,9 @@ const RESULT = {
     { id: 40, city: 'Paris', value: 400 },
     { id: 50, city: 'London', value: 500 }
   ],
-  totalCount: 5,
-  hasData: true,
-  isDataComplete: true
+  metadata: {
+    total: 5
+  }
 };
 
 const mockedExecuteModel = jest.fn();
@@ -30,32 +30,6 @@ jest.mock('@carto/react-workers', () => ({
   }
 }));
 
-describe('paginateTable', () => {
-  const data = {
-    rows: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11], // 11 must hidden
-    totalCount: 10 // not 11
-  };
-  const tests = [
-    [0, 5, [1, 2, 3, 4, 5], 2], // first 5 elems
-    [1, 5, [6, 7, 8, 9, 10], 2], // second 5 elems
-    [0, 7, [1, 2, 3, 4, 5, 6, 7], 2], // first 7 elems
-    [1, 7, [8, 9, 10], 2], // second 7 elems, but not 11 that is hidden
-    [2, 5, [], 2], // 11 is hidden
-    [3, 5, [], 2], // no data at all
-    [0, 10, [1, 2, 3, 4, 5, 6, 7, 8, 9, 10], 1] // corner case, 1 page not 2
-  ];
-  it.each(tests)(
-    'should work as expected',
-    (page, rowsPerPage, expectedRows, expectedPages) => {
-      const expected = {
-        rows: expectedRows,
-        pages: expectedPages
-      };
-      expect(paginateTable(data, page, rowsPerPage)).toStrictEqual(expected);
-    }
-  );
-});
-
 describe('getTable', () => {
   const tableParams = {
     source: {
@@ -81,8 +55,7 @@ describe('getTable', () => {
             { id: 7, city: 'b', value: 1 }
           ],
           totalCount: 2,
-          hasData: true,
-          isDataComplete: true
+          hasData: true
         })
       );
       const data = await getTable(tableParams);
@@ -92,8 +65,7 @@ describe('getTable', () => {
           { id: 7, city: 'b', value: 1 }
         ],
         totalCount: 2,
-        hasData: true,
-        isDataComplete: true
+        hasData: true
       });
     });
 
@@ -115,7 +87,11 @@ describe('getTable', () => {
   describe('remote mode', () => {
     test('correctly returns data', async () => {
       const data = await getTable({ ...tableParams, remoteCalculation: true });
-      expect(data).toStrictEqual(RESULT);
+      expect(data).toStrictEqual({
+        rows: RESULT.rows,
+        totalCount: RESULT.metadata.total,
+        hasData: true
+      });
     });
   });
 });

packages/react-widgets/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@carto/react-widgets",
-  "version": "2.2.14",
+  "version": "2.2.16",
   "description": "CARTO for React - Widgets",
   "author": "CARTO Dev Team",
   "keywords": [
@@ -69,11 +69,11 @@
     "@babel/runtime": "^7.13.9"
   },
   "peerDependencies": {
-    "@carto/react-api": "^2.2.14",
-    "@carto/react-core": "^2.2.14",
-    "@carto/react-redux": "^2.2.14",
-    "@carto/react-ui": "^2.2.14",
-    "@carto/react-workers": "^2.2.14",
+    "@carto/react-api": "^2.2.16",
+    "@carto/react-core": "^2.2.16",
+    "@carto/react-redux": "^2.2.16",
+    "@carto/react-ui": "^2.2.16",
+    "@carto/react-workers": "^2.2.16",
     "@deck.gl/core": "^8.9.18",
     "@deck.gl/layers": "^8.9.18",
     "@emotion/react": "^11.10.6",

packages/react-widgets/src/models/TableModel.js

@@ -2,56 +2,52 @@ import { _executeModel } from '@carto/react-api';
 import { Methods, executeTask } from '@carto/react-workers';
 import { normalizeObjectKeys, wrapModelCall } from './utils';
 
-// Make sure this is sync with the same constant in cloud-native/maps-api
-export const HARD_LIMIT = 100;
-
 export function getTable(props) {
   return wrapModelCall(props, fromLocal, fromRemote);
 }
 
 function fromLocal(props) {
   // Injecting sortByColumnType externally from metadata gives better results. It allows to avoid deriving type from row value itself (with potential null values)
-  const { source, sortBy, sortDirection, sortByColumnType } = props;
+  const { source, sortBy, sortDirection, sortByColumnType, page, rowsPerPage } = props;
 
   return executeTask(source.id, Methods.FEATURES_RAW, {
     filters: source.filters,
     filtersLogicalOperator: source.filtersLogicalOperator,
     sortBy,
     sortByDirection: sortDirection,
-    sortByColumnType
+    sortByColumnType,
+    page,
+    rowsPerPage
   });
 }
 
-export function paginateTable({ rows, totalCount }, page, rowsPerPage) {
-  const sliced = rows.slice(
-    Math.min(rowsPerPage * Math.max(0, page), totalCount),
-    Math.min(rowsPerPage * Math.max(1, page + 1), totalCount)
-  );
-  const pages = Math.ceil(totalCount / rowsPerPage);
-  return { rows: sliced, pages };
-}
-
 function formatResult(res) {
-  const hasData = res.length > 0;
-  // We can detect if the data is complete because we request HARD_LIMIT + 1
-  const isDataComplete = res.length <= HARD_LIMIT;
-  // The actual extra record is hidden from pagination logic
-  const totalCount = isDataComplete ? res.length : HARD_LIMIT;
-  return { rows: res, totalCount, hasData, isDataComplete };
+  const { rows, totalCount } = res;
+  const hasData = totalCount > 0;
+  return { rows, totalCount, hasData };
 }
 
 // From remote
 function fromRemote(props) {
   const { source, spatialFilter, abortController, ...params } = props;
-  const { columns, sortBy, sortDirection } = params;
+  const { columns, sortBy, sortDirection, page, rowsPerPage } = params;
 
   return _executeModel({
     model: 'table',
     source,
     spatialFilter,
-    params: { column: columns, sortBy, sortDirection, limit: HARD_LIMIT + 1 },
+    params: {
+      column: columns,
+      sortBy,
+      sortDirection,
+      limit: rowsPerPage,
+      offset: page * rowsPerPage
+    },
     opts: { abortController }
   })
-    .then((res) => normalizeObjectKeys(res.rows))
+    .then((res) => ({
+      rows: normalizeObjectKeys(res.rows),
+      totalCount: res.metadata.total
+    }))
     .then(formatResult);
 }

packages/react-widgets/src/models/index.js

@@ -4,4 +4,4 @@ export { getCategories } from './CategoryModel';
 export { geocodeStreetPoint } from './GeocodingModel';
 export { getScatter, HARD_LIMIT as SCATTER_PLOT_HARD_LIMIT } from './ScatterPlotModel';
 export { getTimeSeries } from './TimeSeriesModel';
-export { getTable, paginateTable, HARD_LIMIT as TABLE_HARD_LIMIT } from './TableModel';
+export { getTable } from './TableModel';

packages/react-widgets/src/models/utils.js

@@ -104,6 +104,8 @@ function getSqlEscapedSource(table, provider) {
 export function normalizeObjectKeys(el) {
   if (Array.isArray(el)) {
     return el.map(normalizeObjectKeys);
+  } else if (typeof el !== 'object') {
+    return el;
   }
 
   return Object.entries(el).reduce((acc, [key, value]) => {