fix(cubejs-playground): update query builder

Author: tenphi

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 (_) {
       //
     }