@finos/legend-query-builder 4.14.9 → 4.14.11

package/src/components/shared/QueryBuilderPropertyInfoTooltip.tsx

@@ -18,6 +18,7 @@ import {
   ShareBoxIcon,
   type TooltipPlacement,
   Tooltip,
+  ClickAwayListener,
 } from '@finos/legend-art';
 import {
   type AbstractProperty,
@@ -137,73 +138,88 @@ export const QueryBuilderPropertyInfoTooltip: React.FC<{
     explorerState,
   } = props;
 
+  const [open, setIsOpen] = useState(false);
+
   return (
-    <Tooltip
-      arrow={true}
-      {...(placement !== undefined ? { placement } : {})}
-      classes={{
-        tooltip: 'query-builder__tooltip',
-        arrow: 'query-builder__tooltip__arrow',
-        tooltipPlacementRight: 'query-builder__tooltip--right',
-      }}
-      TransitionProps={{
-        // disable transition
-        // NOTE: somehow, this is the only workaround we have, if for example
-        // we set `appear = true`, the tooltip will jump out of position
-        timeout: 0,
-      }}
-      title={
-        <div className="query-builder__tooltip__content">
-          <div className="query-builder__tooltip__header">{title}</div>
-          <div className="query-builder__tooltip__item">
-            <div className="query-builder__tooltip__item__label">Type</div>
-            <div className="query-builder__tooltip__item__value">
-              {type?.path ?? property.genericType.value.rawType.path}
-            </div>
-          </div>
-          <div className="query-builder__tooltip__item">
-            <div className="query-builder__tooltip__item__label">Path</div>
-            <div className="query-builder__tooltip__item__value">{path}</div>
-            {explorerState && (
-              <div className="query-builder__tooltip__item__action">
-                <button
-                  onClick={() => explorerState.highlightTreeNode(path)}
-                  title="Show in tree"
-                >
-                  <ShareBoxIcon color="white" />
-                </button>
+    <ClickAwayListener onClickAway={() => setIsOpen(false)}>
+      <div>
+        <Tooltip
+          arrow={true}
+          {...(placement !== undefined ? { placement } : {})}
+          classes={{
+            tooltip: 'query-builder__tooltip',
+            arrow: 'query-builder__tooltip__arrow',
+            tooltipPlacementRight: 'query-builder__tooltip--right',
+          }}
+          open={open}
+          onClose={() => setIsOpen(false)}
+          TransitionProps={{
+            // disable transition
+            // NOTE: somehow, this is the only workaround we have, if for example
+            // we set `appear = true`, the tooltip will jump out of position
+            timeout: 0,
+          }}
+          disableFocusListener={true}
+          disableHoverListener={true}
+          disableTouchListener={true}
+          title={
+            <div className="query-builder__tooltip__content">
+              <div className="query-builder__tooltip__header">{title}</div>
+              <div className="query-builder__tooltip__item">
+                <div className="query-builder__tooltip__item__label">Type</div>
+                <div className="query-builder__tooltip__item__value">
+                  {type?.path ?? property.genericType.value.rawType.path}
+                </div>
               </div>
-            )}
-          </div>
-          <div className="query-builder__tooltip__item">
-            <div className="query-builder__tooltip__item__label">
-              Multiplicity
-            </div>
-            <div className="query-builder__tooltip__item__value">
-              {getMultiplicityDescription(property.multiplicity)}
-            </div>
-          </div>
-          <div className="query-builder__tooltip__item">
-            <div className="query-builder__tooltip__item__label">
-              Derived Property
-            </div>
-            <div className="query-builder__tooltip__item__value">
-              {property instanceof DerivedProperty ? 'Yes' : 'No'}
-            </div>
-          </div>
-          <div className="query-builder__tooltip__item">
-            <div className="query-builder__tooltip__item__label">Mapped</div>
-            <div className="query-builder__tooltip__item__value">
-              {isMapped ? 'Yes' : 'No'}
+              <div className="query-builder__tooltip__item">
+                <div className="query-builder__tooltip__item__label">Path</div>
+                <div className="query-builder__tooltip__item__value">
+                  {path}
+                </div>
+                {explorerState && (
+                  <div className="query-builder__tooltip__item__action">
+                    <button
+                      onClick={() => explorerState.highlightTreeNode(path)}
+                      title="Show in tree"
+                    >
+                      <ShareBoxIcon color="white" />
+                    </button>
+                  </div>
+                )}
+              </div>
+              <div className="query-builder__tooltip__item">
+                <div className="query-builder__tooltip__item__label">
+                  Multiplicity
+                </div>
+                <div className="query-builder__tooltip__item__value">
+                  {getMultiplicityDescription(property.multiplicity)}
+                </div>
+              </div>
+              <div className="query-builder__tooltip__item">
+                <div className="query-builder__tooltip__item__label">
+                  Derived Property
+                </div>
+                <div className="query-builder__tooltip__item__value">
+                  {property instanceof DerivedProperty ? 'Yes' : 'No'}
+                </div>
+              </div>
+              <div className="query-builder__tooltip__item">
+                <div className="query-builder__tooltip__item__label">
+                  Mapped
+                </div>
+                <div className="query-builder__tooltip__item__value">
+                  {isMapped ? 'Yes' : 'No'}
+                </div>
+              </div>
+              <QueryBuilderTaggedValueInfoTooltip
+                taggedValues={property.taggedValues}
+              />
             </div>
-          </div>
-          <QueryBuilderTaggedValueInfoTooltip
-            taggedValues={property.taggedValues}
-          />
-        </div>
-      }
-    >
-      {children}
-    </Tooltip>
+          }
+        >
+          <div onClick={() => setIsOpen(true)}>{children}</div>
+        </Tooltip>
+      </div>
+    </ClickAwayListener>
   );
 };

package/src/stores/QueryBuilderChangeHistoryState.ts

@@ -0,0 +1,129 @@
+/**
+ * Copyright (c) 2020-present, Goldman Sachs
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { type RawLambda } from '@finos/legend-graph';
+import {
+  ActionState,
+  LogEvent,
+  assertErrorThrown,
+  guaranteeNonNullable,
+} from '@finos/legend-shared';
+import { makeObservable, observable, computed, action } from 'mobx';
+import type { QueryBuilderState } from './QueryBuilderState.js';
+import { QUERY_BUILDER_EVENT } from '../__lib__/QueryBuilderEvent.js';
+
+export class QueryBuilderChangeHistoryState {
+  readonly queryBuilderState: QueryBuilderState;
+  readonly initState = ActionState.create();
+
+  querySnapshotBuffer: RawLambda[] = [];
+  currentQuery: RawLambda | undefined;
+  pointer = -1;
+  bufferSize = 10;
+
+  constructor(queryBuilderState: QueryBuilderState) {
+    makeObservable(this, {
+      currentQuery: observable,
+      pointer: observable,
+      querySnapshotBuffer: observable,
+      initialize: action,
+      undo: action,
+      redo: action,
+      setCurrentQuery: action,
+      cacheNewQuery: action,
+      canRedo: computed,
+      canUndo: computed,
+    });
+
+    this.queryBuilderState = queryBuilderState;
+  }
+
+  get canRedo(): boolean {
+    return this.pointer < this.querySnapshotBuffer.length - 1;
+  }
+
+  get canUndo(): boolean {
+    return this.pointer > 0;
+  }
+
+  redo(): void {
+    if (this.canRedo) {
+      this.pointer = this.pointer + 1;
+      const query = this.querySnapshotBuffer[this.pointer];
+      this.setCurrentQuery(query);
+      this.queryBuilderState.rebuildWithQuery(guaranteeNonNullable(query), {
+        preserveParameterValues: true,
+        preserveResult: true,
+      });
+    }
+  }
+
+  undo(): void {
+    if (this.canUndo) {
+      this.pointer = this.pointer - 1;
+      const query = this.querySnapshotBuffer[this.pointer];
+      this.setCurrentQuery(query);
+      this.queryBuilderState.rebuildWithQuery(guaranteeNonNullable(query), {
+        preserveParameterValues: true,
+        preserveResult: true,
+      });
+    }
+  }
+
+  setCurrentQuery(query: RawLambda | undefined): void {
+    this.currentQuery = query;
+  }
+
+  initialize(initialQuery: RawLambda): void {
+    if (this.queryBuilderState.isQuerySupported) {
+      this.initState.inProgress();
+      this.currentQuery = initialQuery;
+      this.querySnapshotBuffer.push(initialQuery);
+      this.pointer = this.pointer + 1;
+      this.initState.complete();
+    }
+  }
+
+  cacheNewQuery(query: RawLambda): void {
+    try {
+      if (this.queryBuilderState.isQuerySupported) {
+        if (query.hashCode !== this.currentQuery?.hashCode) {
+          if (
+            this.querySnapshotBuffer.length === this.bufferSize &&
+            this.pointer === this.querySnapshotBuffer.length - 1
+          ) {
+            // only record 10 query snapshots
+            this.querySnapshotBuffer = this.querySnapshotBuffer.slice(1);
+          } else {
+            this.querySnapshotBuffer = this.querySnapshotBuffer.slice(
+              0,
+              this.pointer + 1,
+            );
+          }
+          this.querySnapshotBuffer.push(query);
+          this.pointer = this.querySnapshotBuffer.length - 1;
+          this.setCurrentQuery(query);
+        }
+      }
+    } catch (error) {
+      assertErrorThrown(error);
+      this.queryBuilderState.applicationStore.logService.error(
+        LogEvent.create(QUERY_BUILDER_EVENT.CHANGE_HISTORY_ERROR),
+        `Can't cache query in query builder change history buffer: ${error.message}`,
+      );
+    }
+  }
+}

package/src/stores/QueryBuilderState.ts

@@ -104,6 +104,7 @@ import {
 } from './QueryBuilderExecutionContextState.js';
 import type { QueryBuilderConfig } from '../graph-manager/QueryBuilderConfig.js';
 import { QUERY_BUILDER_EVENT } from '../__lib__/QueryBuilderEvent.js';
+import { QueryBuilderChangeHistoryState } from './QueryBuilderChangeHistoryState.js';
 
 export interface QuerySDLC {}
 
@@ -136,6 +137,7 @@ export abstract class QueryBuilderState implements CommandRegistrar {
   resultState: QueryBuilderResultState;
   textEditorState: QueryBuilderTextEditorState;
   unsupportedQueryState: QueryBuilderUnsupportedQueryState;
+  changeHistoryState: QueryBuilderChangeHistoryState;
   showFunctionsExplorerPanel = false;
   showParametersPanel = false;
   isEditingWatermark = false;
@@ -184,6 +186,7 @@ export abstract class QueryBuilderState implements CommandRegistrar {
       isCheckingEntitlments: observable,
       isCalendarEnabled: observable,
       changeDetectionState: observable,
+      changeHistoryState: observable,
       executionContextState: observable,
       class: observable,
       isQueryChatOpened: observable,
@@ -236,6 +239,7 @@ export abstract class QueryBuilderState implements CommandRegistrar {
       this.graphManagerState.pluginManager.getPureGraphManagerPlugins(),
     );
     this.changeDetectionState = new QueryBuilderChangeDetectionState(this);
+    this.changeHistoryState = new QueryBuilderChangeHistoryState(this);
     this.config = config;
     this.sourceInfo = sourceInfo;
   }
@@ -441,6 +445,7 @@ export abstract class QueryBuilderState implements CommandRegistrar {
     this.explorerState.refreshTreeData();
     this.fetchStructureState.implementation.onClassChange(val);
     this.milestoningState.updateMilestoningConfiguration();
+    this.changeHistoryState.cacheNewQuery(this.buildQuery());
   }
 
   changeMapping(val: Mapping, options?: { keepQueryContent?: boolean }): void {
@@ -553,6 +558,7 @@ export abstract class QueryBuilderState implements CommandRegistrar {
     });
     this.resetQueryResult();
     this.changeDetectionState.initialize(query);
+    this.changeHistoryState.initialize(query);
   }
 
   /**

package/src/stores/fetch-structure/tds/QueryResultSetModifierState.ts

@@ -16,12 +16,7 @@
 
 import { action, computed, makeObservable, observable } from 'mobx';
 import type { QueryBuilderTDSState } from './QueryBuilderTDSState.js';
-import {
-  addUniqueEntry,
-  deleteEntry,
-  type Hashable,
-  hashArray,
-} from '@finos/legend-shared';
+import { addUniqueEntry, type Hashable, hashArray } from '@finos/legend-shared';
 import { QUERY_BUILDER_STATE_HASH_STRUCTURE } from '../../QueryBuilderStateHashUtils.js';
 import type { QueryBuilderTDSColumnState } from './QueryBuilderTDSColumnState.js';
 import { COLUMN_SORT_TYPE } from '../../../graph/QueryBuilderMetaModelConst.js';
@@ -76,8 +71,8 @@ export class QueryResultSetModifierState implements Hashable {
       slice: observable.ref,
       setShowModal: action,
       setLimit: action,
-      toggleDistinct: action,
-      deleteSortColumn: action,
+      setDistinct: action,
+      setSortColumns: action,
       addSortColumn: action,
       updateSortColumns: action,
       setSlice: action,
@@ -96,12 +91,12 @@ export class QueryResultSetModifierState implements Hashable {
     this.limit = val === undefined || val <= 0 ? undefined : val;
   }
 
-  toggleDistinct(): void {
-    this.distinct = !this.distinct;
+  setDistinct(val: boolean): void {
+    this.distinct = val;
   }
 
-  deleteSortColumn(val: SortColumnState): void {
-    deleteEntry(this.sortColumns, val);
+  setSortColumns(val: SortColumnState[]): void {
+    this.sortColumns = val;
   }
 
   addSortColumn(val: SortColumnState): void {

package/tsconfig.json

@@ -56,6 +56,7 @@
     "./src/graph-manager/protocol/pure/v1/V1_QueryBuilder_PureGraphManagerExtension.ts",
     "./src/graph-manager/protocol/pure/v1/V1_QueryValueSpecificationBuilderHelper.ts",
     "./src/stores/QueryBuilderChangeDetectionState.ts",
+    "./src/stores/QueryBuilderChangeHistoryState.ts",
     "./src/stores/QueryBuilderCommand.ts",
     "./src/stores/QueryBuilderConfig.ts",
     "./src/stores/QueryBuilderConstantsState.ts",