Add warning to widgets when column is missing

CHANGELOG.md

@@ -6,6 +6,7 @@
 - Ensure source exists in HistogramWidget before getting stats [#426](https://github.com/CartoDB/carto-react/pull/426)
 - Use en dash for intervals instead of hyphen [#428](https://github.com/CartoDB/carto-react/pull/428) and [#429](https://github.com/CartoDB/carto-react/pull/429)
 - Remove widgets dropping features warning in global mode [#430](https://github.com/CartoDB/carto-react/pull/430)
+- Add warning to widgets when column is missing [#427](https://github.com/CartoDB/carto-react/pull/427)
 
 ## 1.3
 

packages/react-api/src/api/common.js

@@ -1,7 +1,17 @@
+import { InvalidColumnError } from '@carto/react-core/';
+
 /**
  * Return more descriptive error from API
  */
 export function dealWithApiError({ response, data }) {
+  if (data.error === 'Column not found') {
+    throw new InvalidColumnError(`${data.error} ${data.column_name}`);
+  }
+
+  if (data.error?.includes('Missing columns')) {
+    throw new InvalidColumnError(data.error);
+  }
+
   switch (response.status) {
     case 401:
       throw new Error('Unauthorized access. Invalid credentials');

packages/react-api/src/api/stats.js

@@ -1,6 +1,7 @@
 import { assert, checkCredentials, makeCall } from './common';
 import { MAP_TYPES, API_VERSIONS } from '@deck.gl/carto';
 import { getTileJson } from './tilejson';
+import { InvalidColumnError } from '@carto/react-core/';
 
 /**
  * Execute a stats service request.
@@ -27,7 +28,11 @@ export async function getStats(props) {
     const tileJson = await getTileJson({ source });
     const tileStatsAttributes = tileJson.tilestats.layers[0].attributes;
     const columnStats = tileStatsAttributes.find(({ attribute }) => attribute === column);
-    assert(columnStats, 'getStats: column not found in tileset attributes');
+
+    if (!columnStats) {
+      throw new InvalidColumnError(`${column} not found in tileset attributes`);
+    }
+
     return columnStats;
   } else {
     const url = buildUrl(source, column);

packages/react-core/src/index.d.ts

@@ -7,6 +7,8 @@ export {
 
 export { getMonday } from './utils/dateUtils';
 
+export { InvalidColumnError } from './utils/InvalidColumnError';
+
 export { debounce } from './utils/debounce';
 export { throttle } from './utils/throttle';
 export { randomString } from './utils/randomString';

packages/react-core/src/index.js

@@ -7,6 +7,8 @@ export {
 
 export { getMonday } from './utils/dateUtils';
 
+export { InvalidColumnError } from './utils/InvalidColumnError';
+
 export { debounce } from './utils/debounce';
 export { throttle } from './utils/throttle';
 export { randomString } from './utils/randomString';

packages/react-core/src/utils/InvalidColumnError.js

@@ -0,0 +1,16 @@
+const NAME = 'InvalidColumnError';
+const MESSAGE_START = `Uncaught ${NAME}:`;
+
+export class InvalidColumnError extends Error {
+  static message =
+    'The column selected for this widget is no longer available in the data source.';
+
+  constructor(message) {
+    super(message);
+    this.name = NAME;
+  }
+
+  static is(error) {
+    return error.message?.startsWith(MESSAGE_START);
+  }
+}

packages/react-widgets/__tests__/hooks/useWidgetFetch.test.js

@@ -1,3 +1,4 @@
+import { InvalidColumnError } from '@carto/react-core/';
 import { act, render, screen } from '@testing-library/react';
 import React from 'react';
 import useWidgetFetch from '../../src/hooks/useWidgetFetch';
@@ -79,17 +80,45 @@ describe('useWidgetFetch', () => {
     await act(() => sleep(250));
     expect(screen.queryByText('loading')).not.toBeInTheDocument();
 
-    expect(onError).toBeCalled();
+    expect(onError).toBeCalledTimes(1);
+
+    modelFn.mockRejectedValue(
+      new InvalidColumnError('Uncaught InvalidColumnError: Invalid column')
+    );
+
+    rerender(
+      <TestComponent
+        modelFn={modelFn}
+        args={{
+          id: 'test',
+          dataSource: 'test',
+          params: PARAMS_MOCK,
+          global: false,
+          onError
+        }}
+      />
+    );
+
+    expect(screen.getByText('loading')).toBeInTheDocument();
+    await act(() => sleep(250));
+    expect(screen.queryByText('loading')).not.toBeInTheDocument();
+    expect(onError).toBeCalledTimes(1);
+    expect(screen.queryByText(InvalidColumnError.message)).toBeInTheDocument();
   });
 });
 
 // Aux
 function TestComponent({ modelFn, args }) {
-  const { data, isLoading } = useWidgetFetch(modelFn, args);
+  const { data, isLoading, warning } = useWidgetFetch(modelFn, args);
 
   if (isLoading) {
     return <div>loading</div>;
   }
+
+  if (warning) {
+    return <div>{warning}</div>;
+  }
+
   return <div>{data}</div>;
 }
 

packages/react-widgets/src/hooks/useWidgetFetch.js

@@ -1,4 +1,5 @@
-import { selectAreFeaturesReadyForSource } from '@carto/react-redux/';
+import { InvalidColumnError } from '@carto/react-core';
+import { selectAreFeaturesReadyForSource } from '@carto/react-redux';
 import { dequal } from 'dequal';
 import { useState } from 'react';
 import { useSelector } from 'react-redux';
@@ -12,6 +13,7 @@ export default function useWidgetFetch(
   // State
   const [data, setData] = useState();
   const [isLoading, setIsLoading] = useState(false);
+  const [warning, setWarning] = useState('');
 
   const isSourceReady = useSelector(
     (state) => global || selectAreFeaturesReadyForSource(state, dataSource)
@@ -21,6 +23,7 @@ export default function useWidgetFetch(
   useCustomCompareEffect(
     () => {
       setIsLoading(true);
+      setWarning('');
 
       if (source && isSourceReady && enabled) {
         modelFn({
@@ -34,7 +37,11 @@ export default function useWidgetFetch(
             }
           })
           .catch((error) => {
-            if (onError) onError(error);
+            if (InvalidColumnError.is(error)) {
+              setWarning(InvalidColumnError.message);
+            } else if (onError) {
+              onError(error);
+            }
           })
           .finally(() => {
             setIsLoading(false);
@@ -45,5 +52,5 @@ export default function useWidgetFetch(
     dequal
   );
 
-  return { data, isLoading, isSourceReady, source };
+  return { data, isLoading, isSourceReady, source, warning };
 }

packages/react-widgets/src/widgets/BarWidget.js

@@ -62,7 +62,11 @@ function BarWidget({
 }) {
   const dispatch = useDispatch();
 
-  const { data: _data = [], isLoading } = useWidgetFetch(getCategories, {
+  const {
+    data: _data = [],
+    isLoading,
+    warning
+  } = useWidgetFetch(getCategories, {
     id,
     dataSource,
     params: {
@@ -132,6 +136,7 @@ function BarWidget({
     <WrapperWidgetUI title={title} isLoading={isLoading} {...wrapperProps}>
       <WidgetWithAlert
         dataSource={dataSource}
+        warning={warning}
         global={global}
         droppingFeaturesAlertProps={droppingFeaturesAlertProps}
         noDataAlertProps={noDataAlertProps}

packages/react-widgets/src/widgets/CategoryWidget.js

@@ -59,7 +59,11 @@ function CategoryWidget(props) {
     useWidgetFilterValues({ dataSource, id, column, type: FilterTypes.IN }) ||
     EMPTY_ARRAY;
 
-  const { data = [], isLoading } = useWidgetFetch(getCategories, {
+  const {
+    data = [],
+    isLoading,
+    warning
+  } = useWidgetFetch(getCategories, {
     id,
     dataSource,
     params: {
@@ -100,6 +104,7 @@ function CategoryWidget(props) {
     <WrapperWidgetUI title={title} isLoading={isLoading} {...wrapperProps}>
       <WidgetWithAlert
         dataSource={dataSource}
+        warning={warning}
         global={global}
         droppingFeaturesAlertProps={droppingFeaturesAlertProps}
         noDataAlertProps={noDataAlertProps}

packages/react-widgets/src/widgets/FormulaWidget.js

@@ -37,7 +37,11 @@ function FormulaWidget({
   wrapperProps,
   droppingFeaturesAlertProps
 }) {
-  const { data = { value: undefined }, isLoading } = useWidgetFetch(getFormula, {
+  const {
+    data = { value: undefined },
+    isLoading,
+    warning
+  } = useWidgetFetch(getFormula, {
     id,
     dataSource,
     params: {
@@ -53,6 +57,7 @@ function FormulaWidget({
     <WrapperWidgetUI title={title} isLoading={isLoading} {...wrapperProps}>
       <WidgetWithAlert
         dataSource={dataSource}
+        warning={warning}
         global={global}
         droppingFeaturesAlertProps={droppingFeaturesAlertProps}
       >

packages/react-widgets/src/widgets/HistogramWidget.js

@@ -10,6 +10,7 @@ import useWidgetFetch from '../hooks/useWidgetFetch';
 import { _getStats } from '@carto/react-api';
 import useWidgetSource from '../hooks/useWidgetSource';
 import WidgetWithAlert from './utils/WidgetWithAlert';
+import { InvalidColumnError } from '@carto/react-core/';
 
 const EMPTY_ARRAY = [];
 
@@ -63,6 +64,8 @@ function HistogramWidget({
 
   const [[min, max], setMinMax] = useState([_min, _max]);
 
+  const [_warning, setWarning] = useState();
+
   const source = useWidgetSource({ dataSource, id });
 
   const hasMinMax =
@@ -73,12 +76,20 @@ function HistogramWidget({
 
   useEffect(() => {
     if (!hasMinMax && source) {
+      setWarning(undefined);
+
       _getStats({ column, source })
         .then((res) => {
           const { min, max } = res;
           setMinMax([min, max]);
         })
-        .catch((err) => onError?.(err));
+        .catch((err) => {
+          if (err instanceof InvalidColumnError) {
+            setWarning(InvalidColumnError.getMessage(err));
+          } else if (onError) {
+            onError(err);
+          }
+        });
     }
   }, [column, source, onError, hasMinMax]);
 
@@ -96,7 +107,11 @@ function HistogramWidget({
     return [];
   }, [min, max, _ticks, bins, hasMinMax]);
 
-  let { data = EMPTY_ARRAY, isLoading } = useWidgetFetch(getHistogram, {
+  let {
+    data = EMPTY_ARRAY,
+    isLoading,
+    warning = _warning
+  } = useWidgetFetch(getHistogram, {
     id,
     dataSource,
     params: {
@@ -165,6 +180,7 @@ function HistogramWidget({
     <WrapperWidgetUI title={title} {...wrapperProps} isLoading={isLoading}>
       <WidgetWithAlert
         dataSource={dataSource}
+        warning={warning}
         global={global}
         droppingFeaturesAlertProps={droppingFeaturesAlertProps}
         noDataAlertProps={noDataAlertProps}

packages/react-widgets/src/widgets/PieWidget.js

@@ -61,7 +61,11 @@ function PieWidget({
     useWidgetFilterValues({ dataSource, id, column, type: FilterTypes.IN }) ||
     EMPTY_ARRAY;
 
-  const { data = [], isLoading } = useWidgetFetch(getCategories, {
+  const {
+    data = [],
+    isLoading,
+    warning
+  } = useWidgetFetch(getCategories, {
     id,
     dataSource,
     params: {
@@ -102,6 +106,7 @@ function PieWidget({
     <WrapperWidgetUI title={title} isLoading={isLoading} {...wrapperProps}>
       <WidgetWithAlert
         dataSource={dataSource}
+        warning={warning}
         global={global}
         droppingFeaturesAlertProps={droppingFeaturesAlertProps}
         noDataAlertProps={noDataAlertProps}

packages/react-widgets/src/widgets/ScatterPlotWidget.js

@@ -43,7 +43,11 @@ function ScatterPlotWidget({
   noDataAlertProps,
   droppingFeaturesAlertProps
 }) {
-  const { data = [], isLoading } = useWidgetFetch(getScatter, {
+  const {
+    data = [],
+    isLoading,
+    warning
+  } = useWidgetFetch(getScatter, {
     id,
     dataSource,
     params: {
@@ -60,6 +64,7 @@ function ScatterPlotWidget({
     <WrapperWidgetUI title={title} isLoading={isLoading} {...wrapperProps}>
       <WidgetWithAlert
         dataSource={dataSource}
+        warning={warning}
         global={global}
         droppingFeaturesAlertProps={droppingFeaturesAlertProps}
         noDataAlertProps={noDataAlertProps}

packages/react-widgets/src/widgets/TableWidget.js

@@ -51,7 +51,8 @@ function TableWidget({
     data = { data: EMPTY_ARRAY, totalCount: 0 },
     isLoading,
     isSourceReady,
-    source
+    source,
+    warning
   } = useWidgetFetch(getTable, {
     id,
     dataSource,
@@ -85,6 +86,7 @@ function TableWidget({
     <WrapperWidgetUI title={title} {...wrapperProps} isLoading={isLoading}>
       <WidgetWithAlert
         dataSource={dataSource}
+        warning={warning}
         global={global}
         droppingFeaturesAlertProps={droppingFeaturesAlertProps}
         noDataAlertProps={noDataAlertProps}

packages/react-widgets/src/widgets/TimeSeriesWidget.js

@@ -33,7 +33,7 @@ const STEP_SIZE_RANGE_MAPPING = {
 
 /**
  * Renders a <TimeSeriesWidget /> component
- * @param  props
+ * @param  {object} props
  * @param  {string} props.id - ID for the widget instance.
  * @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.
@@ -119,7 +119,11 @@ function TimeSeriesWidget({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [stepSize]);
 
-  const { data = [], isLoading } = useWidgetFetch(getTimeSeries, {
+  const {
+    data = [],
+    isLoading,
+    warning
+  } = useWidgetFetch(getTimeSeries, {
     id,
     dataSource,
     params: {
@@ -231,6 +235,7 @@ function TimeSeriesWidget({
       >
         <WidgetWithAlert
           dataSource={dataSource}
+          warning={warning}
           global={global}
           droppingFeaturesAlertProps={droppingFeaturesAlertProps}
           noDataAlertProps={noDataAlertProps}