fix(playground): match rollup button (#4401)

cube-js · Apr 18, 2022 · 18e90bb · 18e90bb
1 parent 34cf111
commit 18e90bb
Show file tree

Hide file tree

Showing 4 changed files with 106 additions and 428 deletions.
diff --git a/packages/cubejs-api-gateway/package.json b/packages/cubejs-api-gateway/package.json
@@ -34,7 +34,7 @@
     "body-parser": "^1.19.0",
     "chrono-node": "^2.2.6",
     "express-graphql": "^0.12.0",
-    "graphql": "^15.3.0",
+    "graphql": "^15.8.0",
     "graphql-scalars": "^1.10.0",
     "jsonwebtoken": "^8.3.0",
     "jwk-to-pem": "^2.0.4",

diff --git a/packages/cubejs-playground/package.json b/packages/cubejs-playground/package.json
@@ -36,15 +36,16 @@
     "@ant-design/icons": "^4.1.0",
     "@cubejs-client/core": "^0.29.48",
     "@cubejs-client/react": "^0.29.48",
-    "@graphiql/toolkit": "^0.4.2",
+    "@graphiql/toolkit": "^0.4.3",
     "camel-case": "^4.1.2",
     "codesandbox-import-utils": "^2.1.1",
     "cron-validator": "^1.2.1",
     "customize-cra": "^1.0.0",
     "fast-deep-equal": "^3.1.3",
     "fetch-retry": "^4.0.1",
     "flexsearch": "^0.6.32",
-    "graphiql": "^1.5.15",
+    "graphiql": "^1.8.6",
+    "graphql-ws": "^5.7.0",
     "history": "^4.9.0",
     "js-cookie": "^2.2.1",
     "js-object-pretty-print": "^0.3.0",
@@ -88,7 +89,7 @@
     "eslint-plugin-jsx-a11y": "^6.2.1",
     "eslint-plugin-react": "^7.20.0",
     "fs-extra": "^8.1.0",
-    "graphql": "^15.3.0",
+    "graphql": "^15.8.0",
     "less-loader": "^8.1.1",
     "react": "^17.0.1",
     "react-app-rewire-yarn-workspaces": "^1.0.3",
@@ -105,7 +106,7 @@
   },
   "peerDependencies": {
     "antd": ">=4.16.13",
-    "graphql": ">=15.3.0",
+    "graphql": ">=15.8.0",
     "react": ">=17.0.1",
     "react-dom": ">=17.0.1",
     "styled-components": ">=5.2.0"

diff --git a/packages/cubejs-playground/src/components/RollupDesigner/RollupDesigner.tsx b/packages/cubejs-playground/src/components/RollupDesigner/RollupDesigner.tsx
@@ -12,7 +12,8 @@ import {
   Typography,
   Skeleton,
 } from 'antd';
-import { useMemo, useState } from 'react';
+import deepEquals from 'fast-deep-equal';
+import { useMemo, useRef, useState } from 'react';
 import styled from 'styled-components';
 import { CodeSnippet, FatalError } from '../../atoms';
 import { Box, Flex } from '../../grid';
@@ -101,6 +102,7 @@ export function RollupDesigner({
   memberTypeCubeMap,
   token: designerToken,
 }: RollupDesignerProps) {
+  const initialMatching = useRef<boolean>();
   const isMounted = useIsMounted();
   const appToken = useToken();
 
@@ -117,7 +119,7 @@ export function RollupDesigner({
     null
   );
 
-  const [matching, setMatching] = useState<boolean>(true);
+  const [matching, setMatching] = useState<boolean | undefined>();
   const [saving, setSaving] = useState<boolean>(false);
   const [preAggName, setPreAggName] = useState<string>('main');
   const [nonAdditiveMeasure, setNonAdditiveMeasure] = useState<string | null>(
@@ -128,13 +130,6 @@ export function RollupDesigner({
 
   const [timeDimension] = matchedQuery.timeDimensions || [];
 
-  // There's nothing we can do to for a rollup to match such query
-  const hideMatchRollupButton =
-    (timeDimension?.dimension &&
-      !timeDimension?.dateRange &&
-      !timeDimension?.granularity) ||
-    (transformedQuery && !transformedQuery.leafMeasureAdditive);
-
   const segments = new Set<string>();
   memberTypeCubeMap.segments.forEach(({ members }) => {
     members.forEach(({ name }) => segments.add(name));
@@ -144,6 +139,17 @@ export function RollupDesigner({
     getPreAggregationReferences(transformedQuery, segments)
   );
 
+  const hideMatchRollupButton = useDeepMemo(() => {
+    if (matching === undefined || !initialMatching.current) {
+      return true;
+    }
+
+    return deepEquals(
+      references,
+      getPreAggregationReferences(transformedQuery, segments)
+    );
+  }, [matching, transformedQuery, references, segments, initialMatching]);
+
   useDeepEffect(() => {
     const references = getPreAggregationReferences(transformedQuery, segments);
 
@@ -195,7 +201,13 @@ export function RollupDesigner({
       );
 
       if (isMounted() && active) {
-        setMatching(json.canUsePreAggregationForTransformedQuery);
+        setMatching((prevMatching) => {
+          if (prevMatching === undefined) {
+            initialMatching.current =
+              json.canUsePreAggregationForTransformedQuery;
+          }
+          return json.canUsePreAggregationForTransformedQuery;
+        });
       }
     }
 
@@ -612,7 +624,9 @@ export function RollupDesigner({
                 ) : (
                   <Typography.Text data-testid="rd-query-tab">
                     Query Compatibility
-                    <WarningFilled style={{ color: '#FBBC05' }} />
+                    {matching != null ? (
+                      <WarningFilled style={{ color: '#FBBC05' }} />
+                    ) : null}
                   </Typography.Text>
                 )
               }