@finos/legend-application-studio 28.13.13 → 28.13.14

package/src/components/lazy-text-editor/LazyTextEditor.tsx

@@ -0,0 +1,458 @@
+/**
+ * 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 { useEffect } from 'react';
+import { observer } from 'mobx-react-lite';
+import {
+  type ResizablePanelHandlerProps,
+  getCollapsiblePanelGroupProps,
+  ResizablePanel,
+  ResizablePanelGroup,
+  ResizablePanelSplitter,
+  useResizeDetector,
+  ResizablePanelSplitterLine,
+  clsx,
+  CodeBranchIcon,
+  ErrorIcon,
+  WarningIcon,
+  CloudUploadIcon,
+  TerminalIcon,
+  AssistantIcon,
+  HammerIcon,
+} from '@finos/legend-art';
+import {
+  generateSetupRoute,
+  type WorkspaceEditorPathParams,
+} from '../../__lib__/LegendStudioNavigation.js';
+import { guaranteeNonNullable } from '@finos/legend-shared';
+import { flowResult } from 'mobx';
+import {
+  useApplicationStore,
+  useApplicationNavigationContext,
+  useCommands,
+} from '@finos/legend-application';
+import { useParams } from '@finos/legend-application/browser';
+import { WorkspaceType } from '@finos/legend-server-sdlc';
+import { LEGEND_STUDIO_APPLICATION_NAVIGATION_CONTEXT_KEY } from '../../__lib__/LegendStudioApplicationNavigationContext.js';
+import {
+  useEditorStore,
+  withEditorStore,
+} from '../editor/EditorStoreProvider.js';
+import { ActivityBar } from '../editor/ActivityBar.js';
+import { SideBar } from '../editor/side-bar/SideBar.js';
+import { GrammarTextEditor } from '../editor/editor-group/GrammarTextEditor.js';
+import { PanelGroup } from '../editor/panel-group/PanelGroup.js';
+import {
+  ACTIVITY_MODE,
+  GRAPH_EDITOR_MODE,
+  PANEL_MODE,
+} from '../../stores/editor/EditorConfig.js';
+import { QuickInput } from '../editor/QuickInput.js';
+import { useLegendStudioApplicationStore } from '../LegendStudioFrameworkProvider.js';
+import { LEGEND_STUDIO_TEST_ID } from '../../__lib__/LegendStudioTesting.js';
+
+const LazyStatusBar = observer((props: { actionsDisabled: boolean }) => {
+  const { actionsDisabled } = props;
+  const params = useParams<WorkspaceEditorPathParams>();
+  const editorStore = useEditorStore();
+  const applicationStore = useLegendStudioApplicationStore();
+  const isInConflictResolutionMode = editorStore.isInConflictResolutionMode;
+  // SDLC
+  const projectId = params.projectId;
+  const workspaceType = params.groupWorkspaceId
+    ? WorkspaceType.GROUP
+    : WorkspaceType.USER;
+  const patchReleaseVersionId = params.patchReleaseVersionId
+    ? `patch / ${params.patchReleaseVersionId} / `
+    : '';
+  const workspaceId = guaranteeNonNullable(
+    params.groupWorkspaceId ?? params.workspaceId,
+    `Workspace/group workspace ID is not provided`,
+  );
+  const currentProject = editorStore.sdlcState.currentProject;
+  const goToWorkspaceUpdater = (): void =>
+    editorStore.setActiveActivity(
+      isInConflictResolutionMode
+        ? ACTIVITY_MODE.CONFLICT_RESOLUTION
+        : ACTIVITY_MODE.WORKSPACE_UPDATER,
+    );
+
+  const goToLocalChanges = (): void =>
+    editorStore.setActiveActivity(ACTIVITY_MODE.LOCAL_CHANGES);
+  // Change Detection
+  const changes =
+    editorStore.changeDetectionState.workspaceLocalLatestRevisionState.changes
+      .length;
+
+  const configurationState = editorStore.projectConfigurationEditorState;
+  const pushLocalChanges = applicationStore.guardUnhandledError(() =>
+    flowResult(editorStore.localChangesState.pushLocalChanges()),
+  );
+  // TODO: we probably should refactor this, these messages are not that helpful and
+  // meant for different purposes
+  const pushStatusText =
+    editorStore.graphManagerState.graphBuildState.hasFailed ||
+    editorStore.changeDetectionState.initState.hasFailed
+      ? 'change detection halted'
+      : !editorStore.changeDetectionState.initState.hasSucceeded
+      ? editorStore.changeDetectionState.workspaceLocalLatestRevisionState
+          .isBuildingEntityHashesIndex
+        ? 'building indexes...'
+        : 'starting change detection...'
+      : editorStore.localChangesState.pushChangesState.isInProgress
+      ? 'pushing local changes...'
+      : configurationState.updatingConfigurationState.isInProgress
+      ? 'updating configuration...'
+      : changes
+      ? `${changes} unpushed changes`
+      : 'no changes detected';
+  const workspaceOutOfSync =
+    !actionsDisabled && editorStore.sdlcState.isWorkspaceOutOfSync;
+
+  // Problems
+  const error = editorStore.graphState.error;
+  const warnings = editorStore.graphState.warnings;
+
+  // Other actions
+  const togglePanel = (): void => editorStore.panelGroupDisplayState.toggle();
+
+  const showCompilationWarnings = (): void => {
+    editorStore.panelGroupDisplayState.open();
+    editorStore.setActivePanelMode(PANEL_MODE.PROBLEMS);
+  };
+  const compile = applicationStore.guardUnhandledError(() =>
+    flowResult(editorStore.graphEditorMode.globalCompile()),
+  );
+  const toggleAssistant = (): void =>
+    applicationStore.assistantService.toggleAssistant();
+
+  return (
+    <div
+      data-testid={LEGEND_STUDIO_TEST_ID.STATUS_BAR}
+      className={clsx('editor__status-bar', 'lazy-text-editor__status-bar')}
+    >
+      <div className="editor__status-bar__left">
+        <div className="editor__status-bar__workspace">
+          <div className="editor__status-bar__workspace__icon">
+            <CodeBranchIcon />
+          </div>
+          <button
+            className="editor__status-bar__workspace__project"
+            title="Go back to workspace setup using the specified project"
+            tabIndex={-1}
+            onClick={(): void =>
+              applicationStore.navigationService.navigator.visitAddress(
+                applicationStore.navigationService.navigator.generateAddress(
+                  generateSetupRoute(projectId, undefined),
+                ),
+              )
+            }
+          >
+            {currentProject?.name ?? 'unknown'}
+          </button>
+          /
+          <button
+            className="editor__status-bar__workspace__workspace"
+            title="Go back to workspace setup using the specified workspace"
+            tabIndex={-1}
+            onClick={(): void =>
+              applicationStore.navigationService.navigator.visitAddress(
+                applicationStore.navigationService.navigator.generateAddress(
+                  generateSetupRoute(projectId, workspaceId, workspaceType),
+                ),
+              )
+            }
+          >
+            {patchReleaseVersionId}
+            {workspaceId}
+            {editorStore.localChangesState.hasUnpushedChanges ? '*' : ''}
+          </button>
+          {workspaceOutOfSync && (
+            <button
+              className="editor__status-bar__workspace__status__btn"
+              tabIndex={-1}
+              onClick={goToLocalChanges}
+              title={
+                'Local workspace is out-of-sync. Click to see incoming changes to your workspace.'
+              }
+            >
+              OUT-OF-SYNC
+            </button>
+          )}
+          {editorStore.sdlcState.isWorkspaceOutdated && !workspaceOutOfSync && (
+            <button
+              className="editor__status-bar__workspace__status__btn"
+              tabIndex={-1}
+              onClick={goToWorkspaceUpdater}
+              title={
+                'Workspace is outdated. Click to see latest changes of the project'
+              }
+            >
+              OUTDATED
+            </button>
+          )}
+          <button
+            className="editor__status-bar__problems"
+            tabIndex={-1}
+            onClick={showCompilationWarnings}
+            title={`${error ? 'Error: 1, ' : ''}Warnings: ${warnings.length}`}
+          >
+            <div className="editor__status-bar__problems__icon">
+              <ErrorIcon />
+            </div>
+            <div className="editor__status-bar__problems__counter">
+              {error ? 1 : 0}
+            </div>
+            <div className="editor__status-bar__problems__icon">
+              <WarningIcon />
+            </div>
+            <div className="editor__status-bar__problems__counter">
+              {warnings.length}
+            </div>
+          </button>
+        </div>
+      </div>
+      <div
+        data-testid={LEGEND_STUDIO_TEST_ID.EDITOR__STATUS_BAR__RIGHT}
+        className="editor__status-bar__right"
+      >
+        {!isInConflictResolutionMode && (
+          <div className="editor__status-bar__workspace-sync">
+            <div className="editor__status-bar__workspace-sync__status">
+              {pushStatusText}
+            </div>
+            <button
+              className={clsx('editor__status-bar__push-changes__btn', {
+                'editor__status-bar__push-changes__btn--loading':
+                  editorStore.localChangesState.pushChangesState.isInProgress ||
+                  configurationState.updatingConfigurationState.isInProgress,
+              })}
+              onClick={pushLocalChanges}
+              disabled={
+                !changes ||
+                configurationState.updatingConfigurationState.isInProgress ||
+                editorStore.localChangesState.pushChangesState.isInProgress ||
+                editorStore.changeDetectionState
+                  .workspaceLocalLatestRevisionState
+                  .isBuildingEntityHashesIndex ||
+                actionsDisabled
+              }
+              tabIndex={-1}
+              title="Push local changes (Ctrl + S)"
+            >
+              <CloudUploadIcon />
+            </button>
+          </div>
+        )}
+        <button
+          className={clsx(
+            'editor__status-bar__action editor__status-bar__compile-btn',
+            {
+              'editor__status-bar__compile-btn--wiggling':
+                editorStore.graphState.isRunningGlobalCompile,
+            },
+          )}
+          disabled={
+            editorStore.graphState.isApplicationUpdateOperationIsRunning ||
+            actionsDisabled
+          }
+          onClick={compile}
+          tabIndex={-1}
+          title="Compile (F9)"
+        >
+          <HammerIcon />
+        </button>
+        <button
+          className={clsx(
+            'editor__status-bar__action editor__status-bar__action__toggler',
+            {
+              'editor__status-bar__action__toggler--active':
+                editorStore.panelGroupDisplayState.isOpen,
+            },
+          )}
+          onClick={togglePanel}
+          tabIndex={-1}
+          title="Toggle panel (Ctrl + `)"
+        >
+          <TerminalIcon />
+        </button>
+        <button
+          className={clsx(
+            'editor__status-bar__action editor__status-bar__action__toggler',
+            {
+              'editor__status-bar__action__toggler--active':
+                !applicationStore.assistantService.isHidden,
+            },
+          )}
+          onClick={toggleAssistant}
+          tabIndex={-1}
+          title="Toggle assistant"
+        >
+          <AssistantIcon />
+        </button>
+      </div>
+    </div>
+  );
+});
+
+export const LazyTextEditor = withEditorStore(
+  observer(() => {
+    const params = useParams<WorkspaceEditorPathParams>();
+    const projectId = params.projectId;
+    const patchReleaseVersionId = params.patchReleaseVersionId;
+    const workspaceType = params.groupWorkspaceId
+      ? WorkspaceType.GROUP
+      : WorkspaceType.USER;
+    const workspaceId = guaranteeNonNullable(
+      params.groupWorkspaceId ?? params.workspaceId,
+      `Workspace/group workspace ID is not provided`,
+    );
+    const editorStore = useEditorStore();
+    const applicationStore = useApplicationStore();
+    const editable =
+      editorStore.graphManagerState.graphBuildState.hasCompleted &&
+      editorStore.isInitialized;
+
+    // layout
+    const { ref, width, height } = useResizeDetector<HTMLDivElement>();
+    // These create snapping effect on panel resizing
+    const resizeSideBar = (handleProps: ResizablePanelHandlerProps): void =>
+      editorStore.sideBarDisplayState.setSize(
+        (handleProps.domElement as HTMLDivElement).getBoundingClientRect()
+          .width,
+      );
+    const resizePanel = (handleProps: ResizablePanelHandlerProps): void =>
+      editorStore.panelGroupDisplayState.setSize(
+        (handleProps.domElement as HTMLDivElement).getBoundingClientRect()
+          .height,
+      );
+    const collapsibleSideBarGroupProps = getCollapsiblePanelGroupProps(
+      editorStore.sideBarDisplayState.size === 0,
+      {
+        onStopResize: resizeSideBar,
+        size: editorStore.sideBarDisplayState.size,
+      },
+    );
+    const collapsiblePanelGroupProps = getCollapsiblePanelGroupProps(
+      editorStore.panelGroupDisplayState.size === 0,
+      {
+        onStopResize: resizePanel,
+        size: editorStore.panelGroupDisplayState.size,
+      },
+    );
+    const maximizedCollapsiblePanelGroupProps = getCollapsiblePanelGroupProps(
+      editorStore.panelGroupDisplayState.isMaximized,
+    );
+    // Extensions
+    useEffect(() => {
+      if (ref.current) {
+        editorStore.panelGroupDisplayState.setMaxSize(ref.current.offsetHeight);
+      }
+    }, [editorStore, ref, height, width]);
+
+    // initialize
+    useEffect(() => {
+      editorStore.internalizeEntityPath(params);
+    }, [editorStore, params]);
+    useEffect(() => {
+      flowResult(
+        editorStore.lazyTextEditorStore.init(
+          projectId,
+          patchReleaseVersionId,
+          workspaceId,
+          workspaceType,
+        ),
+      ).catch(applicationStore.alertUnhandledError);
+    }, [
+      editorStore,
+      patchReleaseVersionId,
+      applicationStore,
+      projectId,
+      workspaceId,
+      workspaceType,
+    ]);
+
+    useApplicationNavigationContext(
+      LEGEND_STUDIO_APPLICATION_NAVIGATION_CONTEXT_KEY.EDITOR,
+    );
+
+    useCommands(editorStore);
+
+    // Cleanup the editor
+    useEffect(() => (): void => editorStore.cleanUp(), [editorStore]);
+    return (
+      <div className="app__page">
+        <div className="editor">
+          <div className="editor__body">
+            <ActivityBar />
+            <div ref={ref} className="editor__content-container">
+              <div className="editor__content">
+                <ResizablePanelGroup orientation="vertical">
+                  <ResizablePanel
+                    {...collapsibleSideBarGroupProps.collapsiblePanel}
+                    direction={1}
+                  >
+                    <SideBar />
+                  </ResizablePanel>
+                  <ResizablePanelSplitter />
+                  <ResizablePanel
+                    {...collapsibleSideBarGroupProps.remainingPanel}
+                    minSize={300}
+                  >
+                    <ResizablePanelGroup orientation="horizontal">
+                      <ResizablePanel
+                        {...maximizedCollapsiblePanelGroupProps.collapsiblePanel}
+                        {...(editorStore.panelGroupDisplayState.size === 0
+                          ? collapsiblePanelGroupProps.remainingPanel
+                          : {})}
+                      >
+                        {editable &&
+                          editorStore.graphEditorMode.mode ===
+                            GRAPH_EDITOR_MODE.GRAMMAR_TEXT && (
+                            <GrammarTextEditor />
+                          )}
+                      </ResizablePanel>
+                      <ResizablePanelSplitter>
+                        <ResizablePanelSplitterLine
+                          color={
+                            editorStore.panelGroupDisplayState.isMaximized
+                              ? 'transparent'
+                              : 'var(--color-dark-grey-250)'
+                          }
+                        />
+                      </ResizablePanelSplitter>
+                      <ResizablePanel
+                        {...collapsiblePanelGroupProps.collapsiblePanel}
+                        {...(editorStore.panelGroupDisplayState.isMaximized
+                          ? maximizedCollapsiblePanelGroupProps.remainingPanel
+                          : {})}
+                        direction={-1}
+                      >
+                        <PanelGroup />
+                      </ResizablePanel>
+                    </ResizablePanelGroup>
+                  </ResizablePanel>
+                </ResizablePanelGroup>
+              </div>
+            </div>
+          </div>
+          <QuickInput />
+          <LazyStatusBar actionsDisabled={!editable} />
+        </div>
+      </div>
+    );
+  }),
+);

package/src/components/workspace-setup/WorkspaceSetup.tsx

@@ -32,8 +32,8 @@ import {
   LongArrowRightIcon,
   DividerWithText,
   SearchIcon,
-  FileImportIcon,
   BaseCard,
+  OpenIcon,
 } from '@finos/legend-art';
 import { LEGEND_STUDIO_TEST_ID } from '../../__lib__/LegendStudioTesting.js';
 import {
@@ -108,7 +108,7 @@ export const ShowcaseCard: React.FC<{ hideDocumentation?: boolean }> = (
           title: 'Showcase explorer',
           content: (
             <div className="workspace-setup__content__card__action__icon">
-              <FileImportIcon />
+              <OpenIcon />
             </div>
           ),
           action: () => openShowcaseManager(applicationStore),
@@ -145,7 +145,7 @@ export const DocumentationCard: React.FC = () => {
           title: 'Review documentation',
           content: (
             <div className="workspace-setup__content__card__action__icon">
-              <FileImportIcon />
+              <OpenIcon />
             </div>
           ),
           action: () => {
@@ -180,7 +180,7 @@ export const ProductionCard: React.FC = () => {
             title: productionDocument.text,
             content: (
               <div className="workspace-setup__content__card__action__icon">
-                <FileImportIcon />
+                <OpenIcon />
               </div>
             ),
             action: () => {
@@ -216,7 +216,7 @@ export const SandboxCard: React.FC = () => {
             title: sandboxDocument.text,
             content: (
               <div className="workspace-setup__content__card__action__icon">
-                <FileImportIcon />
+                <OpenIcon />
               </div>
             ),
             action: () => {
@@ -254,7 +254,7 @@ export const RuleEngagementCard: React.FC = () => {
             title: ruleEngagementDocument.text,
             content: (
               <div className="workspace-setup__content__card__action__icon">
-                <FileImportIcon />
+                <OpenIcon />
               </div>
             ),
             action: () => {

package/src/stores/ShowcaseManagerState.ts

@@ -22,7 +22,7 @@ import {
   guaranteeNonNullable,
   isNonNullable,
 } from '@finos/legend-shared';
-import { action, flow, makeObservable, observable } from 'mobx';
+import { action, computed, flow, makeObservable, observable } from 'mobx';
 import { LEGEND_STUDIO_APP_EVENT } from '../__lib__/LegendStudioEvent.js';
 import {
   type Showcase,
@@ -40,6 +40,7 @@ import {
 import type { TreeData, TreeNodeData } from '@finos/legend-art';
 import { DIRECTORY_PATH_DELIMITER } from '@finos/legend-graph';
 import { SHOWCASE_MANAGER_VIRTUAL_ASSISTANT_TAB_KEY } from '../components/extensions/Core_LegendStudioApplicationPlugin.js';
+import { LegendStudioTelemetryHelper } from '../__lib__/LegendStudioTelemetryHelper.js';
 
 export enum SHOWCASE_MANAGER_VIEW {
   EXPLORER = 'EXPLORER',
@@ -160,7 +161,7 @@ export class ShowcaseManagerState extends ApplicationExtensionState {
 
   private readonly showcaseServerClient?: ShowcaseRegistryServerClient;
 
-  showcases: ShowcaseMetadata[] = [];
+  allShowcases: ShowcaseMetadata[] | undefined;
   currentShowcase?: Showcase | undefined;
   showcaseLineToScroll?: number | undefined;
 
@@ -176,7 +177,7 @@ export class ShowcaseManagerState extends ApplicationExtensionState {
     super();
 
     makeObservable(this, {
-      showcases: observable,
+      allShowcases: observable,
       currentShowcase: observable,
       currentView: observable,
       explorerTreeData: observable.ref,
@@ -185,6 +186,8 @@ export class ShowcaseManagerState extends ApplicationExtensionState {
       showcaseSearchResults: observable.ref,
       currentSearchCaterogy: observable,
       showcaseLineToScroll: observable,
+      nonDevShowcases: computed,
+      logOpenManager: action,
       setCurrentView: action,
       closeShowcase: action,
       setExplorerTreeData: action,
@@ -209,6 +212,10 @@ export class ShowcaseManagerState extends ApplicationExtensionState {
     return ShowcaseManagerState.IDENTIFIER;
   }
 
+  get nonDevShowcases(): ShowcaseMetadata[] {
+    return this.allShowcases?.filter((showcase) => !showcase.development) ?? [];
+  }
+
   static retrieveNullableState(
     applicationStore: GenericLegendApplicationStore,
   ): ShowcaseManagerState | undefined {
@@ -263,9 +270,16 @@ export class ShowcaseManagerState extends ApplicationExtensionState {
     this.fetchShowcaseState.inProgress();
 
     try {
-      this.currentShowcase = (yield this.client.getShowcase(
+      const showcase = (yield this.client.getShowcase(
         metadata.path,
       )) as Showcase;
+      this.currentShowcase = showcase;
+      LegendStudioTelemetryHelper.logEvent_ShowcaseManagerShowcaseProjectLaunch(
+        this.applicationStore.telemetryService,
+        {
+          showcasePath: showcase.path,
+        },
+      );
       this.showcaseLineToScroll = showcaseLineToScroll;
       this.fetchShowcaseState.pass();
     } catch (error) {
@@ -278,6 +292,19 @@ export class ShowcaseManagerState extends ApplicationExtensionState {
     }
   }
 
+  logOpenManager(): void {
+    if (this.allShowcases) {
+      const report = {
+        showcasesTotalCount: this.allShowcases.length,
+        showcasesDevelopmentCount: this.nonDevShowcases.length,
+      };
+      LegendStudioTelemetryHelper.logEvent_ShowcaseManagerLaunch(
+        this.applicationStore.telemetryService,
+        report,
+      );
+    }
+  }
+
   closeShowcase(): void {
     this.currentShowcase = undefined;
     this.showcaseLineToScroll = undefined;
@@ -308,10 +335,11 @@ export class ShowcaseManagerState extends ApplicationExtensionState {
     this.initState.inProgress();
 
     try {
-      this.showcases = (
-        (yield this.client.getShowcases()) as ShowcaseMetadata[]
-      ).filter((showcase) => !showcase.development);
-      this.explorerTreeData = buildShowcasesExplorerTreeData(this.showcases);
+      this.allShowcases =
+        (yield this.client.getShowcases()) as ShowcaseMetadata[];
+      this.explorerTreeData = buildShowcasesExplorerTreeData(
+        this.nonDevShowcases,
+      );
       // expand all the root nodes by default
       this.explorerTreeData.rootIds.forEach((rootId) => {
         const rootNode = this.explorerTreeData?.nodes.get(rootId);
@@ -320,7 +348,6 @@ export class ShowcaseManagerState extends ApplicationExtensionState {
         }
       });
       this.setExplorerTreeData({ ...this.explorerTreeData });
-
       this.initState.pass();
     } catch (error) {
       assertErrorThrown(error);
@@ -347,7 +374,7 @@ export class ShowcaseManagerState extends ApplicationExtensionState {
       )) as ShowcaseTextSearchResult;
       this.textSearchResults = result.textMatches
         .map((match) => {
-          const matchingShowcase = this.showcases.find(
+          const matchingShowcase = this.nonDevShowcases.find(
             (showcase) => showcase.path === match.path,
           );
           if (matchingShowcase) {
@@ -361,7 +388,9 @@ export class ShowcaseManagerState extends ApplicationExtensionState {
         .filter(isNonNullable);
       this.showcaseSearchResults = result.showcases
         .map((showcasePath) =>
-          this.showcases.find((showcase) => showcase.path === showcasePath),
+          this.nonDevShowcases.find(
+            (showcase) => showcase.path === showcasePath,
+          ),
         )
         .filter(isNonNullable);
     } catch (error) {
@@ -388,5 +417,6 @@ export const openShowcaseManager = (
     applicationStore.assistantService.setSelectedTab(
       SHOWCASE_MANAGER_VIRTUAL_ASSISTANT_TAB_KEY,
     );
+    showcaseManagerState.logOpenManager();
   }
 };

package/src/stores/editor/EditorConfig.ts

@@ -19,6 +19,7 @@ export enum EDITOR_MODE {
   CONFLICT_RESOLUTION = 'CONFLICT_RESOLUTION',
   REVIEW = 'REVIEW',
   VIEWER = 'VIEWER',
+  LAZY_TEXT_EDITOR = 'LAZY_TEXT_EDITOR',
 }
 
 export enum TEST_RUNNER_TABS {

package/src/stores/editor/EditorGraphState.ts

@@ -491,6 +491,31 @@ export class EditorGraphState {
     }
   }
 
+  *buildGraphForLazyText(): GeneratorFn<void> {
+    this.isInitializingGraph = true;
+    const stopWatch = new StopWatch();
+    // reset
+    this.editorStore.graphManagerState.resetGraph();
+    // fetch and build dependencies
+    stopWatch.record();
+    const dependencyManager =
+      this.editorStore.graphManagerState.graphManager.createDependencyManager();
+    this.editorStore.graphManagerState.graph.dependencyManager =
+      dependencyManager;
+    this.editorStore.graphManagerState.dependenciesBuildState.setMessage(
+      `Fetching dependencies...`,
+    );
+    const dependencyEntitiesIndex = (yield flowResult(
+      this.getIndexedDependencyEntities(),
+    )) as Map<string, EntitiesWithOrigin>;
+    stopWatch.record(GRAPH_MANAGER_EVENT.FETCH_GRAPH_DEPENDENCIES__SUCCESS);
+    dependencyManager.initialize(dependencyEntitiesIndex);
+    this.isInitializingGraph = false;
+    this.editorStore.graphManagerState.dependenciesBuildState.sync(
+      ActionState.create().pass(),
+    );
+  }
+
   private redirectToModelImporterForDebugging(error: Error): void {
     if (this.editorStore.isInConflictResolutionMode) {
       this.editorStore.applicationStore.alertService.setBlockingAlert({