@finos/legend-application-query 5.1.0 → 5.2.3

package/src/components/QueryBuilderPropertyExpressionEditor.tsx

@@ -15,7 +15,13 @@
  */
 
 import { useCallback } from 'react';
-import { clsx, Dialog, InfoCircleIcon } from '@finos/legend-art';
+import {
+  clsx,
+  Dialog,
+  PanelDropZone,
+  InfoCircleIcon,
+  PanelEntryDropZonePlaceholder,
+} from '@finos/legend-art';
 import { observer } from 'mobx-react-lite';
 import {
   generateMilestonedPropertyParameterValue,
@@ -24,17 +30,17 @@ import {
   type QueryBuilderDerivedPropertyExpressionState,
   type QueryBuilderPropertyExpressionState,
 } from '../stores/QueryBuilderPropertyEditorState.js';
-import { type DropTargetMonitor, useDrop } from 'react-dnd';
+import { useDrop } from 'react-dnd';
 import {
   QUERY_BUILDER_EXPLORER_TREE_DND_TYPE,
   type QueryBuilderExplorerTreeDragSource,
   type QueryBuilderExplorerTreePropertyNodeData,
-} from '../stores/QueryBuilderExplorerState.js';
-import { QueryBuilderPropertyInfoTooltip } from './QueryBuilderPropertyInfoTooltip.js';
+} from '../stores/explorer/QueryBuilderExplorerState.js';
+import { QueryBuilderPropertyInfoTooltip } from './shared/QueryBuilderPropertyInfoTooltip.js';
 import { VariableExpressionViewer } from './QueryBuilderParameterPanel.js';
 import {
   type QueryBuilderParameterDragSource,
-  QUERY_BUILDER_PARAMETER_TREE_DND_TYPE,
+  QUERY_BUILDER_PARAMETER_DND_TYPE,
 } from '../stores/QueryParametersState.js';
 import {
   type ValueSpecification,
@@ -74,13 +80,14 @@ const DerivedPropertyParameterValueEditor = observer(
       },
       [derivedPropertyExpressionState, idx],
     );
-    const [{ isParameterValueDragOver }, dropConnector] = useDrop(
+    const [{ isParameterValueDragOver }, dropTargetConnector] = useDrop<
+      QueryBuilderParameterDragSource,
+      void,
+      { isParameterValueDragOver: boolean }
+    >(
       () => ({
-        accept: [QUERY_BUILDER_PARAMETER_TREE_DND_TYPE.VARIABLE],
-        drop: (
-          item: QueryBuilderParameterDragSource,
-          monitor: DropTargetMonitor,
-        ): void => {
+        accept: [QUERY_BUILDER_PARAMETER_DND_TYPE],
+        drop: (item, monitor): void => {
           const itemType = item.variable.parameter.genericType?.value.rawType;
           if (
             !monitor.didDrop() &&
@@ -90,9 +97,9 @@ const DerivedPropertyParameterValueEditor = observer(
               parameterType.name === itemType.name)
           ) {
             handleDrop(item);
-          }
+          } // prevent drop event propagation to accomondate for nested DnD
         },
-        collect: (monitor): { isParameterValueDragOver: boolean } => ({
+        collect: (monitor) => ({
           isParameterValueDragOver: monitor.isOver({
             shallow: true,
           }),
@@ -125,37 +132,34 @@ const DerivedPropertyParameterValueEditor = observer(
         <div className="panel__content__form__section__header__prompt">{`${
           variable.multiplicity.lowerBound === 0 ? 'optional' : ''
         }`}</div>
-        <div
-          ref={dropConnector}
-          className="query-builder__parameter-editor dnd__overlay__container"
-        >
-          {isParameterValueDragOver && (
-            <div className="query-builder__parameter-editor__node__dnd__overlay">
-              Change Parameter Value
-            </div>
-          )}
-          <BasicValueSpecificationEditor
-            valueSpecification={guaranteeNonNullable(
-              derivedPropertyExpressionState.parameterValues[idx],
-            )}
-            setValueSpecification={(val: ValueSpecification): void => {
-              propertyExpression_setParametersValue(
-                derivedPropertyExpressionState.propertyExpression,
-                idx + 1,
-                val,
-                derivedPropertyExpressionState.queryBuilderState
-                  .observableContext,
-              );
-            }}
-            graph={graph}
-            typeCheckOption={{
-              expectedType: parameterType,
-              match:
-                parameterType ===
-                graph.getPrimitiveType(PRIMITIVE_TYPE.DATETIME),
-            }}
-            resetValue={resetParameterValue}
-          />
+        <div className="query-builder__parameter-editor">
+          <PanelDropZone
+            isDragOver={isParameterValueDragOver}
+            dropTargetConnector={dropTargetConnector}
+          >
+            <BasicValueSpecificationEditor
+              valueSpecification={guaranteeNonNullable(
+                derivedPropertyExpressionState.parameterValues[idx],
+              )}
+              setValueSpecification={(val: ValueSpecification): void => {
+                propertyExpression_setParametersValue(
+                  derivedPropertyExpressionState.propertyExpression,
+                  idx + 1,
+                  val,
+                  derivedPropertyExpressionState.queryBuilderState
+                    .observableContext,
+                );
+              }}
+              graph={graph}
+              typeCheckOption={{
+                expectedType: parameterType,
+                match:
+                  parameterType ===
+                  graph.getPrimitiveType(PRIMITIVE_TYPE.DATETIME),
+              }}
+              resetValue={resetParameterValue}
+            />
+          </PanelDropZone>
         </div>
         <div className="panel__content__form__section__list"></div>
       </div>
@@ -282,22 +286,23 @@ export const QueryBuilderPropertyExpressionBadge = observer(
         onPropertyExpressionChange(item.node),
       [onPropertyExpressionChange],
     );
-    const [{ isPropertyDragOver }, dropConnector] = useDrop(
+    const [{ isDragOver }, dropConnector] = useDrop<
+      QueryBuilderExplorerTreeDragSource,
+      void,
+      { isDragOver: boolean }
+    >(
       () => ({
         accept: [
           QUERY_BUILDER_EXPLORER_TREE_DND_TYPE.ENUM_PROPERTY,
           QUERY_BUILDER_EXPLORER_TREE_DND_TYPE.PRIMITIVE_PROPERTY,
         ],
-        drop: (
-          item: QueryBuilderExplorerTreeDragSource,
-          monitor: DropTargetMonitor,
-        ): void => {
+        drop: (item, monitor): void => {
           if (!monitor.didDrop()) {
             handleDrop(item);
           } // prevent drop event propagation to accomondate for nested DnD
         },
-        collect: (monitor): { isPropertyDragOver: boolean } => ({
-          isPropertyDragOver: monitor.isOver({ shallow: true }),
+        collect: (monitor) => ({
+          isDragOver: monitor.isOver({ shallow: true }),
         }),
       }),
       [handleDrop],
@@ -305,15 +310,14 @@ export const QueryBuilderPropertyExpressionBadge = observer(
 
     return (
       <div
-        ref={dropConnector}
         className="query-builder-property-expression-badge"
+        ref={dropConnector}
       >
-        {isPropertyDragOver && (
-          <div className="query-builder__dnd__placeholder query-builder-property-expression-badge__dnd__placeholder">
-            Change Property
-          </div>
-        )}
-        {!isPropertyDragOver && (
+        <PanelEntryDropZonePlaceholder
+          showPlaceholder={isDragOver}
+          label="Change Property"
+          className="query-builder__dnd__placeholder"
+        >
           <div
             className={clsx(
               'query-builder-property-expression-badge__content',
@@ -363,7 +367,7 @@ export const QueryBuilderPropertyExpressionBadge = observer(
               </div>
             </QueryBuilderPropertyInfoTooltip>
           </div>
-        )}
+        </PanelEntryDropZonePlaceholder>
       </div>
     );
   },

package/src/components/QueryBuilderResultPanel.tsx

@@ -63,21 +63,21 @@ import type { CellMouseOverEvent } from '@ag-grid-community/core';
 import {
   QueryBuilderDerivationProjectionColumnState,
   QueryBuilderProjectionColumnState,
-} from '../stores/QueryBuilderProjectionState.js';
+} from '../stores/fetch-structure/projection/QueryBuilderProjectionColumnState.js';
 import {
   type QueryBuilderPostFilterTreeNodeData,
   PostFilterConditionState,
   QueryBuilderPostFilterTreeConditionNodeData,
-} from '../stores/QueryBuilderPostFilterState.js';
+} from '../stores/fetch-structure/projection/post-filter/QueryBuilderPostFilterState.js';
 import {
   QueryBuilderPostFilterOperator_Equal,
   QueryBuilderPostFilterOperator_NotEqual,
-} from '../stores/postFilterOperators/QueryBuilderPostFilterOperator_Equal.js';
+} from '../stores/fetch-structure/projection/post-filter/operators/QueryBuilderPostFilterOperator_Equal.js';
 import {
   QueryBuilderPostFilterOperator_In,
   QueryBuilderPostFilterOperator_NotIn,
-} from '../stores/postFilterOperators/QueryBuilderPostFilterOperator_In.js';
-import type { QueryBuilderPostFilterOperator } from '../stores/QueryBuilderPostFilterOperator.js';
+} from '../stores/fetch-structure/projection/post-filter/operators/QueryBuilderPostFilterOperator_In.js';
+import type { QueryBuilderPostFilterOperator } from '../stores/fetch-structure/projection/post-filter/QueryBuilderPostFilterOperator.js';
 
 const QueryBuilderResultContextMenu = observer(
   forwardRef<
@@ -94,7 +94,8 @@ const QueryBuilderResultContextMenu = observer(
     const postFilterNotEqualOperator =
       new QueryBuilderPostFilterOperator_NotEqual();
     const postFilterNotInOperator = new QueryBuilderPostFilterOperator_NotIn();
-    const postFilterState = queryBuilderState.postFilterState;
+    const postFilterState =
+      queryBuilderState.fetchStructureState.projectionState.postFilterState;
     const projectionColumnState = guaranteeNonNullable(
       queryBuilderState.fetchStructureState.projectionState.columns
         .filter((c) => c.columnName === event?.column.getColId())
@@ -251,7 +252,9 @@ const QueryBuilderResultContextMenu = observer(
     };
 
     const filterByOrOut = (isFilterBy: boolean): void => {
-      queryBuilderState.setShowPostFilterPanel(true);
+      queryBuilderState.fetchStructureState.projectionState.setShowPostFilterPanel(
+        true,
+      );
       const existingPostFilterNode = getExistingPostFilterNode(
         isFilterBy
           ? [postFilterEqualOperator, postFilterInOperator]
@@ -288,6 +291,61 @@ const QueryBuilderResultContextMenu = observer(
   }),
 );
 
+const QueryBuilderGridResult = observer(
+  (props: {
+    executionResult: TdsExecutionResult;
+    queryBuilderState: QueryBuilderState;
+  }) => {
+    const { executionResult, queryBuilderState } = props;
+    const [cellDoubleClickedEvent, setCellDoubleClickedEvent] =
+      useState<CellMouseOverEvent | null>(null);
+    const columns = executionResult.result.columns;
+    const rowData = executionResult.result.rows.map((_row) => {
+      const row: Record<PropertyKey, unknown> = {};
+      const cols = executionResult.result.columns;
+      _row.values.forEach((value, idx) => {
+        // `ag-grid` shows `false` value as empty string so we have
+        // call `.toString()` to avoid this behavior.
+        // See https://github.com/finos/legend-studio/issues/1008
+        row[cols[idx] as string] = isBoolean(value) ? String(value) : value;
+      });
+      return row;
+    });
+
+    return (
+      <ContextMenu
+        content={
+          <QueryBuilderResultContextMenu
+            event={cellDoubleClickedEvent}
+            queryBuilderState={queryBuilderState}
+          />
+        }
+        menuProps={{ elevation: 7 }}
+        key={executionResult._UUID}
+        className={clsx('ag-theme-balham-dark query-builder__result__tds-grid')}
+      >
+        <AgGridReact
+          rowData={rowData}
+          onCellMouseOver={(event): void => {
+            setCellDoubleClickedEvent(event);
+          }}
+        >
+          {columns.map((colName) => (
+            <AgGridColumn
+              minWidth={50}
+              sortable={true}
+              resizable={true}
+              field={colName}
+              key={colName}
+              flex={1}
+            />
+          ))}
+        </AgGridReact>
+      </ContextMenu>
+    );
+  },
+);
+
 const QueryBuilderResultValues = observer(
   (props: {
     executionResult: ExecutionResult;
@@ -295,52 +353,11 @@ const QueryBuilderResultValues = observer(
   }) => {
     const { executionResult, queryBuilderState } = props;
     if (executionResult instanceof TdsExecutionResult) {
-      const [cellDoubleClickedEvent, setCellDoubleClickedEvent] =
-        useState<CellMouseOverEvent | null>(null);
-      const columns = executionResult.result.columns;
-      const rowData = executionResult.result.rows.map((_row) => {
-        const row: Record<PropertyKey, unknown> = {};
-        const cols = executionResult.result.columns;
-        _row.values.forEach((value, idx) => {
-          // `ag-grid` shows `false` value as empty string so we have
-          // call `.toString()` to avoid this behavior.
-          // See https://github.com/finos/legend-studio/issues/1008
-          row[cols[idx] as string] = isBoolean(value) ? String(value) : value;
-        });
-        return row;
-      });
       return (
-        <ContextMenu
-          content={
-            <QueryBuilderResultContextMenu
-              event={cellDoubleClickedEvent}
-              queryBuilderState={queryBuilderState}
-            />
-          }
-          menuProps={{ elevation: 7 }}
-          key={executionResult._UUID}
-          className={clsx(
-            'ag-theme-balham-dark query-builder__result__tds-grid',
-          )}
-        >
-          <AgGridReact
-            rowData={rowData}
-            onCellMouseOver={(event): void => {
-              setCellDoubleClickedEvent(event);
-            }}
-          >
-            {columns.map((colName) => (
-              <AgGridColumn
-                minWidth={50}
-                sortable={true}
-                resizable={true}
-                field={colName}
-                key={colName}
-                flex={1}
-              />
-            ))}
-          </AgGridReact>
-        </ContextMenu>
+        <QueryBuilderGridResult
+          queryBuilderState={queryBuilderState}
+          executionResult={executionResult}
+        />
       );
     } else if (executionResult instanceof RawExecutionResult) {
       return (
@@ -414,6 +431,9 @@ export const QueryBuilderResultPanel = observer(
         ],
       });
     };
+    const queryValidationIssues = queryBuilderState.validationIssues;
+    const isQueryValid =
+      !queryBuilderState.isQuerySupported() || !queryValidationIssues;
     const runQuery = (): void => {
       if (queryParametersState.parameterStates.length) {
         queryParametersState.parameterValuesEditorState.open(
@@ -475,7 +495,7 @@ export const QueryBuilderResultPanel = observer(
                   type="number"
                   value={resultState.previewLimit}
                   onChange={changeLimit}
-                  disabled={!queryBuilderState.isValidQueryBuilderState()}
+                  disabled={!isQueryValid}
                 />
               </div>
             )}
@@ -484,7 +504,7 @@ export const QueryBuilderResultPanel = observer(
                 className="query-builder__result__stop-btn"
                 onClick={cancelQuery}
                 tabIndex={-1}
-                disabled={!queryBuilderState.isValidQueryBuilderState()}
+                disabled={!isQueryValid}
               >
                 <div className="btn--dark btn--caution query-builder__result__stop-btn__label">
                   <PauseCircleIcon className="query-builder__result__stop-btn__label__icon" />
@@ -499,11 +519,13 @@ export const QueryBuilderResultPanel = observer(
                 onClick={runQuery}
                 tabIndex={-1}
                 title={
-                  !queryBuilderState.isValidQueryBuilderState()
-                    ? 'Query is not valid'
+                  queryValidationIssues
+                    ? `Query is not valid:\n${queryValidationIssues
+                        .map((issue) => `\u2022 ${issue}`)
+                        .join('\n')}`
                     : undefined
                 }
-                disabled={!queryBuilderState.isValidQueryBuilderState()}
+                disabled={!isQueryValid}
               >
                 <div className="query-builder__result__execute-btn__label">
                   <PlayIcon className="query-builder__result__execute-btn__label__icon" />
@@ -566,14 +588,14 @@ export const QueryBuilderResultPanel = observer(
                 className="query-builder__result__export__dropdown__label"
                 tabIndex={-1}
                 title="Export"
-                disabled={!queryBuilderState.isValidQueryBuilderState()}
+                disabled={!isQueryValid}
               >
                 Export
               </button>
               <button
                 className="query-builder__result__export__dropdown__trigger"
                 tabIndex={-1}
-                disabled={!queryBuilderState.isValidQueryBuilderState()}
+                disabled={!isQueryValid}
               >
                 <CaretDownIcon />
               </button>

package/src/components/QueryBuilderSetupPanel.tsx

@@ -21,7 +21,6 @@ import {
   PURE_ClassIcon,
   PURE_MappingIcon,
   PURE_RuntimeIcon,
-  EyeIcon,
   ClockIcon,
   clsx,
 } from '@finos/legend-art';
@@ -48,8 +47,9 @@ import {
   type PackageableElementOption,
   getPackageableElementOptionFormatter,
   buildElementOption,
+  useApplicationStore,
 } from '@finos/legend-application';
-import { MilestoningParametersEditor } from './QueryBuilderMilestoneEditor.js';
+import { MilestoningParametersEditor } from './explorer/QueryBuilderMilestoneEditor.js';
 import { useState } from 'react';
 
 const getParameterValue = (
@@ -124,8 +124,8 @@ const generateClassLabel = (
         >
           {val.name}
         </div>
-        <EyeIcon
-          className="query-builder__setup__config__item__class-label__btn"
+        <ClockIcon
+          className="query-builder__setup__config__item__class-label__milestoning"
           title={milestoningParameterValues}
         />
       </div>
@@ -151,6 +151,7 @@ const generateClassLabel = (
 export const QueryBuilderSetupPanel = observer(
   (props: { queryBuilderState: QueryBuilderState }) => {
     const { queryBuilderState } = props;
+    const applicationStore = useApplicationStore();
     const querySetupState = queryBuilderState.querySetupState;
     const [isMilestoneEditorOpened, setIsMilestoneEditorOpened] =
       useState<boolean>(false);
@@ -266,16 +267,15 @@ export const QueryBuilderSetupPanel = observer(
               options={classOptions}
               onChange={changeClass}
               value={selectedClassOption}
-              darkMode={true}
+              darkMode={!applicationStore.TEMPORARY__isLightThemeEnabled}
               disabled={!isQuerySupported || querySetupState.classIsReadOnly}
               filterOption={elementFilterOption}
               formatOptionLabel={getPackageableElementOptionFormatter({
-                darkMode: true,
-                graphManagerState: queryBuilderState.graphManagerState,
+                darkMode: !applicationStore.TEMPORARY__isLightThemeEnabled,
               })}
             />
             <button
-              className="btn--dark btn__icon--dark"
+              className="btn--dark btn__icon--dark query-builder__setup__milestoning"
               tabIndex={-1}
               onClick={(): void => setIsMilestoneEditorOpened(true)}
               disabled={!isMilestonedQuery}
@@ -303,11 +303,10 @@ export const QueryBuilderSetupPanel = observer(
               options={mappingOptions}
               onChange={changeMapping}
               value={selectedMappingOption}
-              darkMode={true}
+              darkMode={!applicationStore.TEMPORARY__isLightThemeEnabled}
               filterOption={elementFilterOption}
               formatOptionLabel={getPackageableElementOptionFormatter({
-                darkMode: true,
-                graphManagerState: queryBuilderState.graphManagerState,
+                darkMode: !applicationStore.TEMPORARY__isLightThemeEnabled,
               })}
             />
           </div>
@@ -332,7 +331,7 @@ export const QueryBuilderSetupPanel = observer(
               options={runtimeOptions}
               onChange={changeRuntime}
               value={selectedRuntimeOption}
-              darkMode={true}
+              darkMode={!applicationStore.TEMPORARY__isLightThemeEnabled}
               filterOption={runtimeFilterOption}
             />
           </div>

package/src/components/QueryBuilderTextEditor.tsx

@@ -20,7 +20,7 @@ import { clsx, Dialog } from '@finos/legend-art';
 import type { QueryBuilderState } from '../stores/QueryBuilderState.js';
 import { QueryTextEditorMode } from '../stores/QueryTextEditorState.js';
 import { flowResult } from 'mobx';
-import { QueryBuilderLambdaEditor } from './QueryBuilderLambdaEditor.js';
+import { QueryBuilderLambdaEditor } from './shared/QueryBuilderLambdaEditor.js';
 import {
   EDITOR_LANGUAGE,
   TextInputEditor,

package/src/components/QueryBuilderUnsupportedQueryEditor.tsx

@@ -48,7 +48,9 @@ const QueryBuilderUnsupportedQueryEditPanel = observer(
     const { queryBuilderState } = props;
     const queryUnsupportedState = queryBuilderState.queryUnsupportedState;
     const lambdaError = queryUnsupportedState.lambdaError;
-    const errorMessage = lambdaError ? `due to: ${lambdaError.message}` : '';
+    const errorMessage = lambdaError?.message
+      ? ` due to: ${lambdaError.message}`
+      : '';
     const openLambdaModal = (): void =>
       queryBuilderState.queryTextEditorState.openModal(
         QueryTextEditorMode.TEXT,
@@ -63,7 +65,7 @@ const QueryBuilderUnsupportedQueryEditPanel = observer(
         <div className="panel__content">
           <BlankPanelContent>
             <div className="query-builder__unsupported-view__main">
-              <div className="query-builder__unsupported-view__summary">{`Can't display query in form mode ${errorMessage}`}</div>
+              <div className="query-builder__unsupported-view__summary">{`Can't display query in form mode${errorMessage}`}</div>
               <button
                 className="btn--dark query-builder__unsupported-view__to-text-mode__btn"
                 onClick={openLambdaModal}

package/src/components/QueryEditor.tsx

@@ -22,6 +22,9 @@ import {
   RobotIcon,
   SaveIcon,
   BlankPanelContent,
+  clsx,
+  EmptyLightBulbIcon,
+  LightBulbIcon,
 } from '@finos/legend-art';
 import { getQueryParameters } from '@finos/legend-shared';
 import { observer } from 'mobx-react-lite';
@@ -108,6 +111,8 @@ const QueryExportDialogContent = observer(
           )}
           <button
             className="btn modal__footer__close-btn btn--dark"
+            // TODO?: we should probably annotate here why,
+            // when we disable this action
             disabled={!allowCreate}
             onClick={create}
           >
@@ -199,6 +204,10 @@ const QueryEditorHeaderContent = observer(() => {
       ),
     );
   };
+  const toggleLightDarkTheme = (): void =>
+    applicationStore.TEMPORARY__setIsLightThemeEnabled(
+      !applicationStore.TEMPORARY__isLightThemeEnabled,
+    );
   const saveQuery = (): void => {
     editorStore.queryBuilderState
       .saveQuery(async (lambda: RawLambda) => {
@@ -227,6 +236,20 @@ const QueryEditorHeaderContent = observer(() => {
         >
           <ExternalLinkSquareIcon />
         </button>
+        {applicationStore.config.options.TEMPORARY__enableThemeSwitcher && (
+          <button
+            className="query-editor__header__action query-editor__header__action--simple btn--dark"
+            tabIndex={-1}
+            title="Toggle Light/Dark Theme"
+            onClick={toggleLightDarkTheme}
+          >
+            {applicationStore.TEMPORARY__isLightThemeEnabled ? (
+              <EmptyLightBulbIcon />
+            ) : (
+              <LightBulbIcon />
+            )}
+          </button>
+        )}
         <button
           className="query-editor__header__action btn--dark"
           tabIndex={-1}
@@ -256,9 +279,24 @@ export const QueryEditor = observer(() => {
     );
   }, [editorStore, applicationStore]);
 
+  useEffect(() => {
+    document.body.classList.toggle(
+      'light-theme',
+      applicationStore.TEMPORARY__isLightThemeEnabled,
+    );
+  }, [applicationStore.TEMPORARY__isLightThemeEnabled]);
+
   return (
     <DndProvider backend={HTML5Backend}>
-      <div className="query-editor">
+      <div
+        className={clsx([
+          'query-editor ',
+          {
+            'query-editor--light':
+              applicationStore.TEMPORARY__isLightThemeEnabled,
+          },
+        ])}
+      >
         <div className="query-editor__header">
           <button
             className="query-editor__header__back-btn btn--dark"

package/src/components/QueryEditorComponentTestUtils.tsx

@@ -166,8 +166,6 @@ export const TEST__setUpQueryEditor = async (
       );
   }
   MOCK__editorStore.buildGraph = jest.fn<TEMPORARY__JestMock>();
-  // TODO: we need to think of how we will mock these calls when we modularize
-  // See https://github.com/finos/legend-studio/issues/731
   MOCK__editorStore.graphManagerState.graphManager.initialize =
     jest.fn<TEMPORARY__JestMock>();
   MOBX__disableSpyOrMock();