fix(cubejs-playground): update query builder

packages/cubejs-playground/package.json

@@ -65,7 +65,7 @@
   "devDependencies": {
     "@ant-design/compatible": "^1.0.1",
     "@ant-design/icons": "^5.3.5",
-    "@cube-dev/ui-kit": "0.37.4",
+    "@cube-dev/ui-kit": "0.38.0",
     "@cubejs-client/core": "^1.0.0",
     "@cubejs-client/react": "^1.0.0",
     "@types/flexsearch": "^0.7.3",

packages/cubejs-playground/src/QueryBuilderV2/QueryBuilderExtras.tsx

@@ -405,7 +405,11 @@ export function QueryBuilderExtras() {
                   ) : null
                 }
                 selectedKey={timezone}
-                onSelectionChange={(val: Key) => {
+                onSelectionChange={(val: Key | null) => {
+                  if (!val) {
+                    return;
+                  }
+
                   const timezone = val as string;
 
                   updateQuery(() => ({

packages/cubejs-playground/src/QueryBuilderV2/QueryBuilderToolBar.tsx

@@ -38,6 +38,7 @@ export function QueryBuilderToolBar() {
     isQueryEmpty,
     isApiBlocked,
     stopQuery,
+    executedQuery,
     RequestStatusComponent,
   } = useQueryBuilderContext();
 
@@ -81,7 +82,7 @@ export function QueryBuilderToolBar() {
               isDisabled={isQueryEmpty || !!verificationError || isVerifying || isApiBlocked}
               isLoading={isLoading}
               icon={
-                !isQueryEmpty && (isLoading || !isResultOutdated) ? (
+                !isQueryEmpty && executedQuery && !isResultOutdated ? (
                   <ReloadOutlined />
                 ) : (
                   <PlayCircleOutlined />

packages/cubejs-playground/src/QueryBuilderV2/components/ChartRenderer.tsx

@@ -419,7 +419,7 @@ const TypeToChartComponent = {
     });
 
     columnData.forEach((field: any, i: number) => {
-      if (field.key) {
+      if (field.key && typeof field.key === 'string') {
         granularityMap[field.key] = field.key.split('.')[2];
       } else {
         field.key = `key${i}`; // fallback index

packages/cubejs-playground/src/QueryBuilderV2/hooks/query-builder.ts

@@ -1124,9 +1124,10 @@ export function useQueryBuilder(props: QueryBuilderProps) {
     isQueryEmpty,
     isApiTokenChanged,
     isDataModelChanged,
-    isResultOutdated:
+    isResultOutdated: !!(
       executedQuery &&
-      (queryHash !== getQueryHash(executedQuery) || isApiTokenChanged || isDataModelChanged),
+      (queryHash !== getQueryHash(executedQuery) || isApiTokenChanged || isDataModelChanged)
+    ),
     queryHash,
     cubeApi,
     hasPrivateMembers,

packages/cubejs-playground/src/QueryBuilderV2/hooks/server-core-version-gte.ts

@@ -3,10 +3,13 @@ export function useServerCoreVersionGte(version: string, currentVersion: string)
     let gt = false;
 
     try {
-      const [, m, p] = currentVersion.split('.').map(Number);
-      const [, m1, p1] = version.split('.').map(Number);
+      const [major, minor, patch] = currentVersion.split('.').map(Number);
+      const [major1, minor1, patch1] = version.split('.').map(Number);
 
-      gt = m > m1 || (m === m1 && p >= p1);
+      gt =
+        major > major1 ||
+        (major === major1 && minor > minor1) ||
+        (major === major1 && minor === minor1 && patch >= patch1);
     } catch (_) {
       //
     }

packages/cubejs-playground/src/hooks/server-core-version.ts

@@ -4,18 +4,25 @@ export function useServerCoreVersionGte(version: string): boolean {
   const { serverCoreVersion = '', coreServerVersion = '' } =
     usePlaygroundContext();
 
-  let gt = false;
+  const coreVersion = serverCoreVersion || coreServerVersion;
 
-  try {
-    const [, m, p] = (serverCoreVersion || coreServerVersion)
-      .split('.')
-      .map(Number);
-    const [, m1, p1] = version.split('.').map(Number);
+  if (coreVersion) {
+    let gt = false;
 
-    gt = m > m1 || (m === m1 && p >= p1);
-  } catch (_) {
-    //
+    try {
+      const [major, minor, patch] = coreVersion.split('.').map(Number);
+      const [major1, minor1, patch1] = version.split('.').map(Number);
+
+      gt =
+        major > major1 ||
+        (major === major1 && minor > minor1) ||
+        (major === major1 && minor === minor1 && patch >= patch1);
+    } catch (_) {
+      //
+    }
+
+    return gt;
   }
 
-  return gt;
+  return true;
 }