@finos/legend-extension-dsl-data-space 4.0.5 → 6.1.0

package/src/components/DataSpaceViewer.tsx

@@ -32,23 +32,25 @@ import {
   FlaskIcon,
   ExternalLinkSquareIcon,
   ShieldIcon,
-  TagsIcon,
   LightBulbIcon,
+  InfoCircleIcon,
+  ExternalLinkIcon,
 } from '@finos/legend-art';
 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';
+import { generateGAVCoordinates } from '@finos/legend-server-depot';
 
 interface DataSpaceViewerActivityConfig {
   mode: DATA_SPACE_VIEWER_ACTIVITY_MODE;
@@ -113,16 +115,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 +129,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 +143,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 +169,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 +190,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 +216,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 +226,9 @@ const DataSpaceExecutionViewer = observer(
 
     // runtime
     const runtimeOptions =
-      dataSpaceViewerState.runtimes.map(buildRuntimeOption);
+      dataSpaceViewerState.currentExecutionContext.compatibleRuntimes.map(
+        buildRuntimeOption,
+      );
     const selectedRuntimeOption = buildRuntimeOption(
       dataSpaceViewerState.currentRuntime,
     );
@@ -258,7 +245,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 +285,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">
@@ -321,59 +308,114 @@ const DataSpaceExecutionViewer = observer(
   },
 );
 
-const DataSpaceTags = observer(
+const DataSpaceInfo = observer(
   (props: { dataSpaceViewerState: DataSpaceViewerState }) => {
     const { dataSpaceViewerState } = props;
-
-    const dataSpace = dataSpaceViewerState.dataSpace;
+    const analysisResult = dataSpaceViewerState.dataSpaceAnalysisResult;
+    const viewProject = (): void =>
+      dataSpaceViewerState.viewProject?.(
+        dataSpaceViewerState.groupId,
+        dataSpaceViewerState.artifactId,
+        dataSpaceViewerState.versionId,
+        undefined,
+      );
+    const viewDataSpaceInProject = (): void =>
+      dataSpaceViewerState.viewProject?.(
+        dataSpaceViewerState.groupId,
+        dataSpaceViewerState.artifactId,
+        dataSpaceViewerState.versionId,
+        analysisResult.path,
+      );
 
     return (
-      <div className="data-space__viewer__tags">
-        <div className="data-space__viewer__tags__section">
-          <div className="data-space__viewer__tags__section__title">
+      <div className="data-space__viewer__info">
+        <div className="data-space__viewer__info__section">
+          <div className="data-space__viewer__info__section__entry">
+            <div className="data-space__viewer__info__project-info__label">
+              Project
+            </div>
+            <button
+              className="data-space__viewer__info__project-info__value"
+              tabIndex={-1}
+              title="View Project"
+              onClick={viewProject}
+            >
+              {generateGAVCoordinates(
+                dataSpaceViewerState.groupId,
+                dataSpaceViewerState.artifactId,
+                dataSpaceViewerState.versionId,
+              )}
+            </button>
+            <div className="data-space__viewer__info__project-info__link">
+              <ExternalLinkIcon />
+            </div>
+          </div>
+          <div className="data-space__viewer__info__section__entry">
+            <div className="data-space__viewer__info__project-info__label">
+              Data Space
+            </div>
+            <button
+              className="data-space__viewer__info__project-info__value"
+              tabIndex={-1}
+              title="View Data Space"
+              onClick={viewDataSpaceInProject}
+            >
+              {analysisResult.path}
+            </button>
+            <div className="data-space__viewer__info__project-info__link">
+              <ExternalLinkIcon />
+            </div>
+          </div>
+        </div>
+        <div className="data-space__viewer__info__section">
+          <div className="data-space__viewer__info__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"
+                className="data-space__viewer__info__section__entry"
               >
                 <div
-                  className="data-space__viewer__tags__tagged-value__tag"
-                  title={`${taggedValue.tag.ownerReference.value.name}.${taggedValue.tag.value.value}`}
+                  className="data-space__viewer__info__tagged-value__tag"
+                  title={`${taggedValue.profile}.${taggedValue.tag}`}
                 >
-                  {taggedValue.tag.value.value}
+                  {`${extractElementNameFromPath(taggedValue.profile)}.${
+                    taggedValue.tag
+                  }`}
                 </div>
-                <div className="data-space__viewer__tags__tagged-value__value">
+                <div className="data-space__viewer__info__tagged-value__value">
                   {taggedValue.value}
                 </div>
               </div>
             ))}
-          {dataSpace.taggedValues.length === 0 && (
-            <div className="data-space__viewer__tags__section__placeholder">
+          {analysisResult.taggedValues.length === 0 && (
+            <div className="data-space__viewer__info__section__placeholder">
               (empty)
             </div>
           )}
         </div>
-        <div className="data-space__viewer__tags__section">
-          <div className="data-space__viewer__tags__section__title">
+        <div className="data-space__viewer__info__section">
+          <div className="data-space__viewer__info__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}
-                className="data-space__viewer__tags__section__entry"
-                title={`${stereotype.ownerReference.value.name}.${stereotype.value.value}`}
+                key={stereotype._UUID}
+                className="data-space__viewer__info__section__entry"
+                title={`${stereotype.profile}.${stereotype.value}`}
               >
-                <div className="data-space__viewer__tags__steoreotype">
-                  {stereotype.value.value}
+                <div className="data-space__viewer__info__steoreotype">
+                  {`${extractElementNameFromPath(stereotype.profile)}.${
+                    stereotype.value
+                  }`}
                 </div>
               </div>
             ))}
-          {dataSpace.stereotypes.length === 0 && (
-            <div className="data-space__viewer__tags__section__placeholder">
+          {analysisResult.stereotypes.length === 0 && (
+            <div className="data-space__viewer__info__section__placeholder">
               (empty)
             </div>
           )}
@@ -409,18 +451,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 +475,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 =>
@@ -466,9 +508,9 @@ export const DataSpaceViewer = observer(
         icon: <ShieldIcon />,
       },
       {
-        mode: DATA_SPACE_VIEWER_ACTIVITY_MODE.TAGS,
-        title: 'Tags',
-        icon: <TagsIcon />,
+        mode: DATA_SPACE_VIEWER_ACTIVITY_MODE.INFO,
+        title: 'Info',
+        icon: <InfoCircleIcon />,
       },
       {
         mode: DATA_SPACE_VIEWER_ACTIVITY_MODE.SUPPORT,
@@ -482,31 +524,43 @@ export const DataSpaceViewer = observer(
         dataSpaceViewerState.groupId,
         dataSpaceViewerState.artifactId,
         dataSpaceViewerState.versionId,
-        dataSpace.path,
+        analysisResult.path,
       );
 
     return (
       <div className="data-space__viewer">
         <div className="data-space__viewer__header">
           <button
-            className="data-space__viewer__path"
+            className="data-space__viewer__title"
             tabIndex={-1}
-            title="View Project"
+            title={`View Project (${generateGAVCoordinates(
+              dataSpaceViewerState.groupId,
+              dataSpaceViewerState.artifactId,
+              dataSpaceViewerState.versionId,
+            )})`}
             onClick={viewProject}
           >
-            <div className="data-space__viewer__path__label">
-              {dataSpace.path}
+            <div
+              className="data-space__viewer__title__label"
+              title={`${analysisResult.title ?? analysisResult.name} - ${
+                analysisResult.path
+              }`}
+            >
+              {analysisResult.title ?? analysisResult.name}
             </div>
-            <div className="data-space__viewer__path__link">
+            <div className="data-space__viewer__title__link">
               <ExternalLinkSquareIcon />
             </div>
           </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">
@@ -561,15 +615,14 @@ export const DataSpaceViewer = observer(
                 </BlankPanelContent>
               )}
               {dataSpaceViewerState.currentActivity ===
-                DATA_SPACE_VIEWER_ACTIVITY_MODE.TAGS && (
-                <DataSpaceTags dataSpaceViewerState={dataSpaceViewerState} />
+                DATA_SPACE_VIEWER_ACTIVITY_MODE.INFO && (
+                <DataSpaceInfo dataSpaceViewerState={dataSpaceViewerState} />
               )}
               {dataSpaceViewerState.currentActivity ===
                 DATA_SPACE_VIEWER_ACTIVITY_MODE.SUPPORT && (
                 <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>
+  );
+});