@cubejs-client/react 0.30.30 → 0.30.60

package/index.d.ts

@@ -240,6 +240,7 @@ declare module '@cubejs-client/react' {
 
     meta: Meta | undefined;
     metaError?: Error | null;
+    richMetaError?: Error | null;
     metaErrorStack?: string | null;
     isFetchingMeta: boolean;
     /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cubejs-client/react",
-  "version": "0.30.30",
+  "version": "0.30.60",
   "author": "Cube Dev, Inc.",
   "license": "MIT",
   "engines": {},
@@ -24,10 +24,8 @@
   ],
   "dependencies": {
     "@babel/runtime": "^7.1.2",
-    "@cubejs-client/core": "^0.30.29",
-    "anser": "^2.0.1",
+    "@cubejs-client/core": "^0.30.60",
     "core-js": "^3.6.5",
-    "html-entities": "^2.3.2",
     "ramda": "^0.27.0"
   },
   "devDependencies": {
@@ -44,5 +42,5 @@
   "peerDependencies": {
     "react": ">=16.10.2"
   },
-  "gitHead": "21d664e571c93dc4bde75ee744f0cdd20a590bff"
+  "gitHead": "7ec87645cf0063257e527a83ea91f77551ad607c"
 }

package/src/QueryBuilder.jsx

@@ -15,7 +15,7 @@ import {
 
 import QueryRenderer from './QueryRenderer.jsx';
 import CubeContext from './CubeContext';
-import { generateAnsiHTML, removeEmpty } from './utils';
+import { removeEmpty } from './utils';
 
 const granularities = [
   { name: undefined, title: 'w/o grouping' },
@@ -148,20 +148,23 @@ export default class QueryBuilder extends React.Component {
 
     let meta;
     let metaError = null;
+    let richMetaError = null;
     let metaErrorStack = null;
 
     try {
       this.setState({ isFetchingMeta: true });
       meta = await this.cubejsApi().meta();
     } catch (error) {
-      metaError = error;
+      metaError = error.response?.plainError || error;
+      richMetaError = error;
       metaErrorStack = error.response?.stack?.replace(error.message || '', '') || '';
     }
 
     this.setState(
       {
         meta,
-        metaError: metaError ? new Error(generateAnsiHTML(metaError.message || metaError.toString())) : null,
+        metaError: metaError ? new Error(metaError.message || metaError.toString()) : null,
+        richMetaError,
         metaErrorStack,
         isFetchingMeta: false,
       },
@@ -248,6 +251,7 @@ export default class QueryBuilder extends React.Component {
     const {
       meta,
       metaError,
+      richMetaError,
       query,
       queryError,
       chartType,
@@ -339,6 +343,7 @@ export default class QueryBuilder extends React.Component {
     return {
       meta,
       metaError,
+      richMetaError,
       metaErrorStack,
       query,
       error: queryError, // Match same name as QueryRenderer prop
@@ -518,7 +523,8 @@ export default class QueryBuilder extends React.Component {
         }
       } catch (error) {
         this.setState({
-          queryError: new Error(generateAnsiHTML(error.message || error.toString())),
+          queryError: new Error(error.response?.plainError || error.message),
+          richQueryError: new Error(error.message || error.toString())
         });
       }
     }

package/src/QueryRenderer.jsx

@@ -3,7 +3,6 @@ import { equals, toPairs, fromPairs } from 'ramda';
 import { isQueryPresent } from '@cubejs-client/core';
 
 import CubeContext from './CubeContext';
-import { generateAnsiHTML } from './utils';
 
 export default class QueryRenderer extends React.Component {
   // @deprected use `isQueryPresent` from `@cubejs-client/core`
@@ -136,7 +135,7 @@ export default class QueryRenderer extends React.Component {
     const { render } = this.props;
 
     const loadState = {
-      error: error ? new Error(generateAnsiHTML(error.message || error.toString())) : null,
+      error: error ? new Error(error.response?.plainError || error.message || error.toString()) : null,
       resultSet: queries ? (resultSet || {}) : resultSet,
       loadingState: { isLoading },
       sqlQuery

package/src/hooks/cube-query.js

@@ -3,10 +3,11 @@ import { isQueryPresent, areQueriesEqual } from '@cubejs-client/core';
 
 import CubeContext from '../CubeContext';
 import useDeepCompareMemoize from './deep-compare-memoize';
+import { useIsMounted } from './is-mounted';
 
 export function useCubeQuery(query, options = {}) {
   const mutexRef = useRef({});
-  const isMounted = useRef(true);
+  const isMounted = useIsMounted();
   const [currentQuery, setCurrentQuery] = useState(null);
   const [isLoading, setLoading] = useState(false);
   const [resultSet, setResultSet] = useState(null);
@@ -40,29 +41,23 @@ export function useCubeQuery(query, options = {}) {
         progressCallback,
       });
 
-      if (isMounted.current) {
+      if (isMounted()) {
         setResultSet(response);
         setProgress(null);
       }
     } catch (error) {
-      if (isMounted.current) {
+      if (isMounted()) {
         setError(error);
         setResultSet(null);
         setProgress(null);
       }
     }
 
-    if (isMounted.current) {
+    if (isMounted()) {
       setLoading(false);
     }
   }
 
-  useEffect(() => {
-    return () => {
-      isMounted.current = false;
-    };
-  }, []);
-
   useEffect(() => {
     const { skip = false, resetResultSetOnChange } = options;
 
@@ -99,7 +94,7 @@ export function useCubeQuery(query, options = {}) {
                 progressCallback,
               },
               (e, result) => {
-                if (isMounted.current) {
+                if (isMounted()) {
                   if (e) {
                     setError(e);
                   } else {
@@ -114,7 +109,7 @@ export function useCubeQuery(query, options = {}) {
             await fetch();
           }
         } catch (e) {
-          if (isMounted.current) {
+          if (isMounted()) {
             setError(e);
             setResultSet(null);
             setLoading(false);

package/src/utils.js

@@ -1,81 +1,3 @@
-import Anser from 'anser';
-import { encode } from 'html-entities';
-
-const colors = {
-  reset: 'orange',
-  black: 'black',
-  red: 'red',
-  green: 'green',
-  yellow: 'orange',
-  blue: 'blue',
-  magenta: 'magenta',
-  cyan: 'cyan',
-  gray: 'gray',
-  lightgrey: 'lightgrey',
-  darkgrey: 'darkgrey',
-};
-
-const anserMap = {
-  'ansi-bright-black': 'black',
-  'ansi-bright-yellow': 'yellow',
-  'ansi-yellow': 'yellow',
-  'ansi-bright-green': 'green',
-  'ansi-green': 'green',
-  'ansi-bright-cyan': 'cyan',
-  'ansi-cyan': 'cyan',
-  'ansi-bright-red': 'red',
-  'ansi-red': 'red',
-  'ansi-bright-magenta': 'magenta',
-  'ansi-magenta': 'magenta',
-  'ansi-white': 'darkgrey',
-};
-
-export function generateAnsiHTML(txt) {
-  const arr = new Anser().ansiToJson(encode(txt), {
-    use_classes: true,
-  });
-
-  let result = '';
-  let open = false;
-  for (let index = 0; index < arr.length; ++index) {
-    const c = arr[index];
-    const { content } = c;
-    const { fg } = c;
-
-    const contentParts = content.split('\n');
-    for (let j = 0; j < contentParts.length; ++j) {
-      if (!open) {
-        result += '<span data-ansi-line="true">';
-        open = true;
-      }
-      const part = contentParts[j].replace('\r', '');
-      const color = colors[anserMap[fg]];
-
-      if (color != null) {
-        result += `<span style="color: ${color};">${part}</span>`;
-      } else {
-        if (fg != null) {
-          console.log('Missing color mapping: ', fg);
-        }
-
-        result += `<span>${part}</span>`;
-      }
-
-      if (j < contentParts.length - 1) {
-        result += '</span>';
-        open = false;
-        result += '<br/>';
-      }
-    }
-  }
-
-  if (open) {
-    result += '</span>';
-  }
-
-  return result;
-}
-
 export function removeEmpty(obj) {
   if (typeof obj !== 'object') {
     return obj;