@finos/legend-extension-dsl-data-space 4.0.4 → 6.0.0

package/src/DSLDataSpace_Const.ts

@@ -0,0 +1,20 @@
+/**
+ * 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.
+ */
+
+// NOTE: these are non-compilable profile and tag that we come up with for query
+// so that it records the dataSpace it is created from
+export const QUERY_PROFILE_PATH = 'meta::pure::profiles::query';
+export const QUERY_PROFILE_TAG_DATA_SPACE = 'dataSpace';

package/src/DSLDataSpace_Extension.ts

@@ -17,12 +17,12 @@
 import packageJson from '../package.json';
 import { AbstractPreset } from '@finos/legend-shared';
 import { DSLDataSpace_PureGraphManagerPlugin } from './graphManager/DSLDataSpace_PureGraphManagerPlugin.js';
-import { DSLDataSpace_PureProtocolProcessorPlugin } from './models/protocols/pure/DSLDataSpace_PureProtocolProcessorPlugin.js';
+import { DSLDataSpace_PureProtocolProcessorPlugin } from './graphManager/protocol/pure/DSLDataSpace_PureProtocolProcessorPlugin.js';
 import { DSLDataSpace_PureGraphPlugin } from './graph/DSLDataSpace_PureGraphPlugin.js';
 
-export class DSLDataSpace_GraphPreset extends AbstractPreset {
+export class DSLDataSpace_GraphManagerPreset extends AbstractPreset {
   constructor() {
-    super(packageJson.extensions.graphPreset, packageJson.version, [
+    super(packageJson.extensions.graphManagerPreset, packageJson.version, [
       new DSLDataSpace_PureGraphPlugin(),
       new DSLDataSpace_PureGraphManagerPlugin(),
       new DSLDataSpace_PureProtocolProcessorPlugin(),

package/src/components/DataSpaceViewer.tsx

@@ -39,16 +39,16 @@ import {
   type Diagram,
   DiagramRenderer,
 } from '@finos/legend-extension-dsl-diagram';
+import { DataSpaceSupportEmail } from '../graph/metamodel/pure/model/packageableElements/dataSpace/DSLDataSpace_DataSpace.js';
 import {
-  DataSpaceSupportEmail,
-  type DataSpaceExecutionContext,
-  type DataSpaceSupportInfo,
-} from '../models/metamodels/pure/model/packageableElements/dataSpace/DSLDataSpace_DataSpace.js';
-import type { PackageableRuntime } from '@finos/legend-graph';
+  extractElementNameFromPath,
+  type PackageableRuntime,
+} from '@finos/legend-graph';
 import {
   type DataSpaceViewerState,
   DATA_SPACE_VIEWER_ACTIVITY_MODE,
 } from '../stores/DataSpaceViewerState.js';
+import type { DataSpaceExecutionContextAnalysisResult } from '../graphManager/action/analytics/DataSpaceAnalysis.js';
 
 interface DataSpaceViewerActivityConfig {
   mode: DATA_SPACE_VIEWER_ACTIVITY_MODE;
@@ -113,16 +113,12 @@ const buildDiagramOption = (diagram: Diagram): DiagramOption => ({
 const DataSpaceModelsOverview = observer(
   (props: { dataSpaceViewerState: DataSpaceViewerState }) => {
     const { dataSpaceViewerState } = props;
+    const analysisResult = dataSpaceViewerState.dataSpaceAnalysisResult;
 
     // diagram selector
     const diagramCanvasRef = useRef<HTMLDivElement>(null);
-    const diagramOptions = dataSpaceViewerState.featuredDiagrams
-      .concat(
-        dataSpaceViewerState.diagrams.filter(
-          (diagram) => !dataSpaceViewerState.featuredDiagrams.includes(diagram),
-        ),
-      )
-      .map(buildDiagramOption);
+    const diagramOptions =
+      analysisResult.featuredDiagrams.map(buildDiagramOption);
     const selectedDiagramOption = dataSpaceViewerState.currentDiagram
       ? buildDiagramOption(dataSpaceViewerState.currentDiagram)
       : null;
@@ -131,22 +127,8 @@ const DataSpaceModelsOverview = observer(
         dataSpaceViewerState.setCurrentDiagram(option.value);
       }
     };
-    const formatDiagramOptionLabel = (
-      option: DiagramOption,
-    ): React.ReactNode => (
-      <div className="data-space__viewer__diagrams__dropdown__option">
-        <div className="data-space__viewer__diagrams__dropdown__option__label">
-          {option.label}
-        </div>
-        {dataSpaceViewerState.featuredDiagrams.includes(option.value) && (
-          <div className="data-space__viewer__diagrams__dropdown__option__tag">
-            featured
-          </div>
-        )}
-      </div>
-    );
 
-    if (dataSpaceViewerState.diagrams.length === 0) {
+    if (analysisResult.featuredDiagrams.length === 0) {
       return <BlankPanelContent>No diagrams available</BlankPanelContent>;
     }
     return (
@@ -159,7 +141,6 @@ const DataSpaceModelsOverview = observer(
             value={selectedDiagramOption}
             placeholder="Search for a diagram"
             darkMode={true}
-            formatOptionLabel={formatDiagramOptionLabel}
           />
         </div>
         <div className="data-space__viewer__diagrams__content">
@@ -186,10 +167,10 @@ const DataSpaceModelsOverview = observer(
 
 type ExecutionContextOption = {
   label: string;
-  value: DataSpaceExecutionContext;
+  value: DataSpaceExecutionContextAnalysisResult;
 };
 const buildExecutionContextOption = (
-  value: DataSpaceExecutionContext,
+  value: DataSpaceExecutionContextAnalysisResult,
 ): ExecutionContextOption => ({
   label: value.name,
   value: value,
@@ -207,12 +188,15 @@ const buildRuntimeOption = (value: PackageableRuntime): RuntimeOption => ({
 const DataSpaceExecutionViewer = observer(
   (props: { dataSpaceViewerState: DataSpaceViewerState }) => {
     const { dataSpaceViewerState } = props;
+    const analysisResult = dataSpaceViewerState.dataSpaceAnalysisResult;
+    const executionContexts = Array.from(
+      dataSpaceViewerState.dataSpaceAnalysisResult.executionContextsIndex.values(),
+    );
 
     // execution
-    const executionContextOptions =
-      dataSpaceViewerState.dataSpace.executionContexts.map(
-        buildExecutionContextOption,
-      );
+    const executionContextOptions = executionContexts.map(
+      buildExecutionContextOption,
+    );
     const selectedExecutionContextOption = buildExecutionContextOption(
       dataSpaceViewerState.currentExecutionContext,
     );
@@ -230,8 +214,7 @@ const DataSpaceExecutionViewer = observer(
         <div className="data-space__viewer__execution__entry__content__dropdown__option__label">
           {option.label}
         </div>
-        {option.value ===
-          dataSpaceViewerState.dataSpace.defaultExecutionContext && (
+        {option.value === analysisResult.defaultExecutionContext && (
           <div className="data-space__viewer__execution__entry__content__dropdown__option__tag">
             default
           </div>
@@ -241,7 +224,9 @@ const DataSpaceExecutionViewer = observer(
 
     // runtime
     const runtimeOptions =
-      dataSpaceViewerState.runtimes.map(buildRuntimeOption);
+      dataSpaceViewerState.currentExecutionContext.compatibleRuntimes.map(
+        buildRuntimeOption,
+      );
     const selectedRuntimeOption = buildRuntimeOption(
       dataSpaceViewerState.currentRuntime,
     );
@@ -258,7 +243,7 @@ const DataSpaceExecutionViewer = observer(
           {option.label}
         </div>
         {option.value ===
-          dataSpaceViewerState.currentExecutionContext.defaultRuntime.value && (
+          dataSpaceViewerState.currentExecutionContext.defaultRuntime && (
           <div className="data-space__viewer__execution__entry__content__dropdown__option__tag">
             default
           </div>
@@ -298,7 +283,7 @@ const DataSpaceExecutionViewer = observer(
             <PURE_MappingIcon />
           </div>
           <div className="data-space__viewer__execution__entry__content data-space__viewer__execution__entry__content__text">
-            {dataSpaceViewerState.currentExecutionContext.mapping.value.path}
+            {dataSpaceViewerState.currentExecutionContext.mapping.path}
           </div>
         </div>
         <div className="data-space__viewer__execution__entry">
@@ -324,8 +309,7 @@ const DataSpaceExecutionViewer = observer(
 const DataSpaceTags = observer(
   (props: { dataSpaceViewerState: DataSpaceViewerState }) => {
     const { dataSpaceViewerState } = props;
-
-    const dataSpace = dataSpaceViewerState.dataSpace;
+    const analysisResult = dataSpaceViewerState.dataSpaceAnalysisResult;
 
     return (
       <div className="data-space__viewer__tags">
@@ -333,24 +317,26 @@ const DataSpaceTags = observer(
           <div className="data-space__viewer__tags__section__title">
             Tagged Values
           </div>
-          {dataSpace.taggedValues.length !== 0 &&
-            dataSpace.taggedValues.map((taggedValue) => (
+          {analysisResult.taggedValues.length !== 0 &&
+            analysisResult.taggedValues.map((taggedValue) => (
               <div
                 key={taggedValue._UUID}
                 className="data-space__viewer__tags__section__entry"
               >
                 <div
                   className="data-space__viewer__tags__tagged-value__tag"
-                  title={`${taggedValue.tag.ownerReference.value.name}.${taggedValue.tag.value.value}`}
+                  title={`${taggedValue.profile}.${taggedValue.tag}`}
                 >
-                  {taggedValue.tag.value.value}
+                  {`${extractElementNameFromPath(taggedValue.profile)}.${
+                    taggedValue.tag
+                  }`}
                 </div>
                 <div className="data-space__viewer__tags__tagged-value__value">
                   {taggedValue.value}
                 </div>
               </div>
             ))}
-          {dataSpace.taggedValues.length === 0 && (
+          {analysisResult.taggedValues.length === 0 && (
             <div className="data-space__viewer__tags__section__placeholder">
               (empty)
             </div>
@@ -360,19 +346,21 @@ const DataSpaceTags = observer(
           <div className="data-space__viewer__tags__section__title">
             Stereotypes
           </div>
-          {dataSpace.stereotypes.length !== 0 &&
-            dataSpace.stereotypes.map((stereotype) => (
+          {analysisResult.stereotypes.length !== 0 &&
+            analysisResult.stereotypes.map((stereotype) => (
               <div
-                key={stereotype.value._UUID}
+                key={stereotype._UUID}
                 className="data-space__viewer__tags__section__entry"
-                title={`${stereotype.ownerReference.value.name}.${stereotype.value.value}`}
+                title={`${stereotype.profile}.${stereotype.value}`}
               >
                 <div className="data-space__viewer__tags__steoreotype">
-                  {stereotype.value.value}
+                  {`${extractElementNameFromPath(stereotype.profile)}.${
+                    stereotype.value
+                  }`}
                 </div>
               </div>
             ))}
-          {dataSpace.stereotypes.length === 0 && (
+          {analysisResult.stereotypes.length === 0 && (
             <div className="data-space__viewer__tags__section__placeholder">
               (empty)
             </div>
@@ -409,18 +397,18 @@ const DataSpaceSupportEmailViewer = observer(
 );
 
 const DataSpaceSupportInfoViewerInner = observer(
-  (props: {
-    dataSpaceViewerState: DataSpaceViewerState;
-    dataSpaceSupportInfo: DataSpaceSupportInfo | undefined;
-  }) => {
-    const { dataSpaceViewerState, dataSpaceSupportInfo } = props;
-    if (dataSpaceSupportInfo === undefined) {
+  (props: { dataSpaceViewerState: DataSpaceViewerState }) => {
+    const { dataSpaceViewerState } = props;
+    const supportInfo =
+      dataSpaceViewerState.dataSpaceAnalysisResult.supportInfo;
+
+    if (supportInfo === undefined) {
       return <BlankPanelContent>No support info available</BlankPanelContent>;
-    } else if (dataSpaceSupportInfo instanceof DataSpaceSupportEmail) {
+    } else if (supportInfo instanceof DataSpaceSupportEmail) {
       return (
         <DataSpaceSupportEmailViewer
           dataSpaceViewerState={dataSpaceViewerState}
-          dataSpaceSupportEmail={dataSpaceSupportInfo}
+          dataSpaceSupportEmail={supportInfo}
         />
       );
     }
@@ -433,7 +421,7 @@ const DataSpaceSupportInfoViewerInner = observer(
 export const DataSpaceViewer = observer(
   (props: { dataSpaceViewerState: DataSpaceViewerState }) => {
     const { dataSpaceViewerState } = props;
-    const dataSpace = dataSpaceViewerState.dataSpace;
+    const analysisResult = dataSpaceViewerState.dataSpaceAnalysisResult;
     const changeActivity =
       (activity: DATA_SPACE_VIEWER_ACTIVITY_MODE): (() => void) =>
       (): void =>
@@ -482,7 +470,7 @@ export const DataSpaceViewer = observer(
         dataSpaceViewerState.groupId,
         dataSpaceViewerState.artifactId,
         dataSpaceViewerState.versionId,
-        dataSpace.path,
+        analysisResult.path,
       );
 
     return (
@@ -495,7 +483,7 @@ export const DataSpaceViewer = observer(
             onClick={viewProject}
           >
             <div className="data-space__viewer__path__label">
-              {dataSpace.path}
+              {analysisResult.path}
             </div>
             <div className="data-space__viewer__path__link">
               <ExternalLinkSquareIcon />
@@ -503,10 +491,13 @@ export const DataSpaceViewer = observer(
           </button>
           <div
             className={clsx('data-space__viewer__description', {
-              'data-space__viewer__description--empty': !dataSpace.description,
+              'data-space__viewer__description--empty':
+                !analysisResult.description,
             })}
           >
-            {dataSpace.description ? dataSpace.description : 'No description'}
+            {analysisResult.description
+              ? analysisResult.description
+              : 'No description'}
           </div>
         </div>
         <div className="data-space__viewer__content">
@@ -569,7 +560,6 @@ export const DataSpaceViewer = observer(
                 <div className="data-space__viewer__main-panel__content data-space__viewer__support-info">
                   <DataSpaceSupportInfoViewerInner
                     dataSpaceViewerState={dataSpaceViewerState}
-                    dataSpaceSupportInfo={dataSpace.supportInfo}
                   />
                 </div>
               )}

package/src/components/query/{DSLDataSpace_LegendQueryPlugin.tsx → DSLDataSpace_LegendQueryApplicationPlugin.tsx}

@@ -16,19 +16,37 @@
 
 import packageJson from '../../../package.json';
 import {
-  LegendQueryPlugin,
+  type QueryEditorStore,
+  type QueryEditorHeaderLabeler,
   type QuerySetupOptionRendererConfiguration,
   type QuerySetupRenderer,
   type QuerySetupState,
   type QuerySetupStore,
-} from '@finos/legend-query';
+  LegendQueryApplicationPlugin,
+} from '@finos/legend-application-query';
 import { SquareIcon } from '@finos/legend-art';
 import { DataSpaceQuerySetupState } from '../../stores/query/DataSpaceQuerySetupState.js';
 import { DataspaceQuerySetup } from './DataSpaceQuerySetup.js';
+import type { ApplicationPageEntry } from '@finos/legend-application';
+import { DATA_SPACE_QUERY_EDITOR_ROUTE_PATTERN } from '../../stores/query/DSLDataSpace_LegendQueryRouter.js';
+import { DataSpaceQueryEditor } from './DataSpaceQueryEditor.js';
+import { DataSpaceQueryEditorStore } from '../../stores/query/DataSpaceQueryEditorStore.js';
+import { extractElementNameFromPath } from '@finos/legend-graph';
 
-export class DSLDataSpace_LegendQueryPlugin extends LegendQueryPlugin {
+export class DSLDataSpace_LegendQueryApplicationPlugin extends LegendQueryApplicationPlugin {
   constructor() {
-    super(packageJson.extensions.queryPlugin, packageJson.version);
+    super(packageJson.extensions.queryApplicationPlugin, packageJson.version);
+  }
+
+  override getExtraApplicationPageEntries(): ApplicationPageEntry[] {
+    return [
+      // data space query editor
+      {
+        key: 'data-space-query-editor-application-page',
+        urlPatterns: [DATA_SPACE_QUERY_EDITOR_ROUTE_PATTERN],
+        renderer: DataSpaceQueryEditor,
+      },
+    ];
   }
 
   override getExtraQuerySetupOptionRendererConfigurations(): QuerySetupOptionRendererConfiguration[] {
@@ -68,4 +86,23 @@ export class DSLDataSpace_LegendQueryPlugin extends LegendQueryPlugin {
       },
     ];
   }
+
+  override getExtraQueryEditorHeaderLabelers(): QueryEditorHeaderLabeler[] {
+    return [
+      (editorStore: QueryEditorStore): React.ReactNode | undefined => {
+        if (editorStore instanceof DataSpaceQueryEditorStore) {
+          return (
+            <div className="query-editor__header__label">
+              <SquareIcon className="query-editor__header__label__icon icon--data-space" />
+              {extractElementNameFromPath(editorStore.dataSpacePath)}
+              <div className="query-editor__header__label__tag">
+                {editorStore.executionContext}
+              </div>
+            </div>
+          );
+        }
+        return undefined;
+      },
+    ];
+  }
 }

package/src/components/query/DataSpaceQueryEditor.tsx

@@ -0,0 +1,106 @@
+/**
+ * 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 { observer, useLocalObservable } from 'mobx-react-lite';
+import { getQueryParameters } from '@finos/legend-shared';
+import { useApplicationStore } from '@finos/legend-application';
+import {
+  parseGAVCoordinates,
+  useDepotServerClient,
+} from '@finos/legend-server-depot';
+import {
+  LEGEND_QUERY_PATH_PARAM_TOKEN,
+  LEGEND_QUERY_QUERY_PARAM_TOKEN,
+  QueryEditor,
+  QueryEditorStoreContext,
+  useLegendQueryApplicationStore,
+  useLegendQueryBaseStore,
+} from '@finos/legend-application-query';
+import { useParams } from 'react-router';
+import { DataSpaceQueryEditorStore } from '../../stores/query/DataSpaceQueryEditorStore.js';
+import {
+  type DataSpaceQueryEditorPathParams,
+  type DataSpaceQueryEditorQueryParams,
+  DATA_SPACE_QUERY_EDITOR_PATH_PARAM_TOKEN,
+} from '../../stores/query/DSLDataSpace_LegendQueryRouter.js';
+
+const DataSpaceQueryEditorStoreProvider: React.FC<{
+  children: React.ReactNode;
+  gav: string;
+  dataSpacePath: string;
+  executionContext: string;
+  runtimePath: string | undefined;
+  classPath: string | undefined;
+}> = ({
+  children,
+  gav,
+  dataSpacePath,
+  executionContext,
+  runtimePath,
+  classPath,
+}) => {
+  const { groupId, artifactId, versionId } = parseGAVCoordinates(gav);
+  const applicationStore = useLegendQueryApplicationStore();
+  const depotServerClient = useDepotServerClient();
+  const baseStore = useLegendQueryBaseStore();
+  const store = useLocalObservable(
+    () =>
+      new DataSpaceQueryEditorStore(
+        applicationStore,
+        depotServerClient,
+        baseStore.pluginManager,
+        groupId,
+        artifactId,
+        versionId,
+        dataSpacePath,
+        executionContext,
+        runtimePath,
+        classPath,
+      ),
+  );
+  return (
+    <QueryEditorStoreContext.Provider value={store}>
+      {children}
+    </QueryEditorStoreContext.Provider>
+  );
+};
+
+export const DataSpaceQueryEditor = observer(() => {
+  const applicationStore = useApplicationStore();
+  const params = useParams<DataSpaceQueryEditorPathParams>();
+  const gav = params[LEGEND_QUERY_PATH_PARAM_TOKEN.GAV];
+  const dataSpacePath =
+    params[DATA_SPACE_QUERY_EDITOR_PATH_PARAM_TOKEN.DATA_SPACE_PATH];
+  const executionContext =
+    params[DATA_SPACE_QUERY_EDITOR_PATH_PARAM_TOKEN.EXECUTION_CONTEXT];
+  const runtimePath = params[LEGEND_QUERY_PATH_PARAM_TOKEN.RUNTIME_PATH];
+  const classPath = getQueryParameters<DataSpaceQueryEditorQueryParams>(
+    applicationStore.navigator.getCurrentLocation(),
+    true,
+  )[LEGEND_QUERY_QUERY_PARAM_TOKEN.CLASS_PATH];
+
+  return (
+    <DataSpaceQueryEditorStoreProvider
+      gav={gav}
+      dataSpacePath={dataSpacePath}
+      executionContext={executionContext}
+      runtimePath={runtimePath}
+      classPath={classPath}
+    >
+      <QueryEditor />
+    </DataSpaceQueryEditorStoreProvider>
+  );
+});

package/src/components/query/DataSpaceQuerySetup.tsx

@@ -27,7 +27,7 @@ import {
   CustomSelectorInput,
   SearchIcon,
 } from '@finos/legend-art';
-import { useQuerySetupStore, useLegendQueryStore } from '@finos/legend-query';
+import { useQuerySetupStore } from '@finos/legend-application-query';
 import { generateGAVCoordinates } from '@finos/legend-server-depot';
 import { debounce } from '@finos/legend-shared';
 import { flowResult } from 'mobx';
@@ -50,7 +50,6 @@ export const DataspaceQuerySetup = observer(
     const { querySetupState } = props;
     const applicationStore = useApplicationStore();
     const setupStore = useQuerySetupStore();
-    const queryStore = useLegendQueryStore();
     const dataSpaceSearchRef = useRef<SelectComponent>(null);
     const [searchText, setSearchText] = useState('');
 
@@ -73,7 +72,6 @@ export const DataspaceQuerySetup = observer(
     const back = (): void => {
       setupStore.setSetupState(undefined);
       querySetupState.setCurrentDataSpace(undefined);
-      queryStore.graphManagerState.resetGraph();
     };
 
     // query
@@ -84,7 +82,6 @@ export const DataspaceQuerySetup = observer(
       : null;
     const onDataSpaceOptionChange = (option: DataSpaceOption | null): void => {
       if (option?.value !== querySetupState.currentDataSpace) {
-        queryStore.graphManagerState.resetGraph();
         querySetupState.setCurrentDataSpace(option?.value);
         querySetupState.setDataSpaceViewerState(undefined);
       }
@@ -133,7 +130,7 @@ export const DataspaceQuerySetup = observer(
     useEffect(() => {
       if (querySetupState.currentDataSpace) {
         flowResult(
-          querySetupState.setUpDataSpace(querySetupState.currentDataSpace),
+          querySetupState.loadDataSpace(querySetupState.currentDataSpace),
         ).catch(applicationStore.alertUnhandledError);
       }
     }, [querySetupState, applicationStore, querySetupState.currentDataSpace]);
@@ -202,40 +199,34 @@ export const DataspaceQuerySetup = observer(
           </div>
           <div className="query-setup__data-space__view">
             <PanelLoadingIndicator
-              isLoading={querySetupState.setUpDataSpaceState.isInProgress}
+              isLoading={querySetupState.loadDataSpaceState.isInProgress}
             />
             {querySetupState.dataSpaceViewerState && (
               <DataSpaceViewer
                 dataSpaceViewerState={querySetupState.dataSpaceViewerState}
               />
             )}
-            {!querySetupState.dataSpaceViewerState &&
-              querySetupState.setUpDataSpaceState.isInProgress && (
-                <BlankPanelContent>
-                  {querySetupState.queryStore.buildGraphState.message ??
-                    querySetupState.queryStore.graphManagerState
-                      .systemBuildState.message ??
-                    querySetupState.queryStore.graphManagerState
-                      .dependenciesBuildState.message ??
-                    querySetupState.queryStore.graphManagerState
-                      .generationsBuildState.message ??
-                    querySetupState.queryStore.graphManagerState.graphBuildState
-                      .message}
-                </BlankPanelContent>
-              )}
-            {!querySetupState.dataSpaceViewerState &&
-              querySetupState.setUpDataSpaceState.hasFailed && (
-                <BlankPanelContent>
-                  <div className="query-setup__data-space__view--failed">
-                    <div className="query-setup__data-space__view--failed__icon">
-                      <TimesCircleIcon />
+            {!querySetupState.dataSpaceViewerState && (
+              <>
+                {querySetupState.loadDataSpaceState.isInProgress && (
+                  <BlankPanelContent>
+                    {querySetupState.loadDataSpaceState.message}
+                  </BlankPanelContent>
+                )}
+                {querySetupState.loadDataSpaceState.hasFailed && (
+                  <BlankPanelContent>
+                    <div className="query-setup__data-space__view--failed">
+                      <div className="query-setup__data-space__view--failed__icon">
+                        <TimesCircleIcon />
+                      </div>
+                      <div className="query-setup__data-space__view--failed__text">
+                        Can&apos;t load data space
+                      </div>
                     </div>
-                    <div className="query-setup__data-space__view--failed__text">
-                      Can&apos;t load data space
-                    </div>
-                  </div>
-                </BlankPanelContent>
-              )}
+                  </BlankPanelContent>
+                )}
+              </>
+            )}
           </div>
         </div>
       </div>

package/src/components/studio/{DSLDataSpace_LegendStudioPlugin.tsx → DSLDataSpace_LegendStudioApplicationPlugin.tsx}

@@ -20,7 +20,7 @@ import {
   type ElementTypeGetter,
   type ElementProjectExplorerDnDTypeGetter,
   type ElementIconGetter,
-  type DSL_LegendStudioPlugin_Extension,
+  type DSL_LegendStudioApplicationPlugin_Extension,
   type NewElementState,
   type ElementEditorStateCreator,
   type EditorStore,
@@ -31,8 +31,8 @@ import {
   type PureGrammarTextSuggestion,
   type PureGrammarParserElementSnippetSuggestionsGetter,
   UnsupportedElementEditorState,
-  LegendStudioPlugin,
-} from '@finos/legend-studio';
+  LegendStudioApplicationPlugin,
+} from '@finos/legend-application-studio';
 import { SquareIcon } from '@finos/legend-art';
 import {
   PackageableElementExplicitReference,
@@ -43,25 +43,25 @@ import {
 import {
   DataSpace,
   DataSpaceExecutionContext,
-} from '../../models/metamodels/pure/model/packageableElements/dataSpace/DSLDataSpace_DataSpace.js';
+} from '../../graph/metamodel/pure/model/packageableElements/dataSpace/DSLDataSpace_DataSpace.js';
 import { DSL_DATA_SPACE_LEGEND_STUDIO_DOCUMENTATION_KEY } from './DSLDataSpace_LegendStudioDocumentation.js';
 import {
   PURE_GRAMMAR_DATA_SPACE_ELEMENT_TYPE_LABEL,
   PURE_GRAMMAR_DATA_SPACE_PARSER_NAME,
 } from '../../graphManager/DSLDataSpace_PureGraphManagerPlugin.js';
 import { SIMPLE_DATA_SPACE_SNIPPET } from './DSLDataSpace_CodeSnippets.js';
-import type { LegendApplicationDocumentationEntry } from '@finos/legend-application';
+import type { DocumentationEntry } from '@finos/legend-application';
 
 const DATA_SPACE_ELEMENT_TYPE = 'DATA SPACE';
 const DATA_SPACE_ELEMENT_PROJECT_EXPLORER_DND_TYPE =
   'PROJECT_EXPLORER_DATA_SPACE';
 
-export class DSLDataSpace_LegendStudioPlugin
-  extends LegendStudioPlugin
-  implements DSL_LegendStudioPlugin_Extension
+export class DSLDataSpace_LegendStudioApplicationPlugin
+  extends LegendStudioApplicationPlugin
+  implements DSL_LegendStudioApplicationPlugin_Extension
 {
   constructor() {
-    super(packageJson.extensions.studioPlugin, packageJson.version);
+    super(packageJson.extensions.applicationStudioPlugin, packageJson.version);
   }
 
   override getExtraRequiredDocumentationKeys(): string[] {
@@ -162,7 +162,7 @@ export class DSLDataSpace_LegendStudioPlugin
         editorStore: EditorStore,
         parserKeyword: string,
         elementKeyword: string,
-      ): LegendApplicationDocumentationEntry | undefined => {
+      ): DocumentationEntry | undefined => {
         if (parserKeyword === PURE_GRAMMAR_DATA_SPACE_PARSER_NAME) {
           if (elementKeyword === PURE_GRAMMAR_DATA_SPACE_ELEMENT_TYPE_LABEL) {
             return editorStore.applicationStore.documentationService.getDocEntry(
@@ -180,7 +180,7 @@ export class DSLDataSpace_LegendStudioPlugin
       (
         editorStore: EditorStore,
         parserKeyword: string,
-      ): LegendApplicationDocumentationEntry | undefined => {
+      ): DocumentationEntry | undefined => {
         if (parserKeyword === PURE_GRAMMAR_DATA_SPACE_PARSER_NAME) {
           return editorStore.applicationStore.documentationService.getDocEntry(
             DSL_DATA_SPACE_LEGEND_STUDIO_DOCUMENTATION_KEY.GRAMMAR_PARSER,