@finos/legend-extension-dsl-data-space 9.1.3 → 9.1.5

package/lib/stores/studio/DataSpacePreviewState.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DataSpacePreviewState.d.ts","sourceRoot":"","sources":["../../../src/stores/studio/DataSpacePreviewState.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AAEH,OAAO,EACL,oBAAoB,EAEpB,KAAK,WAAW,EACjB,MAAM,kCAAkC,CAAC;AAE1C,OAAO,EACL,KAAK,WAAW,EAEhB,WAAW,EAEZ,MAAM,sBAAsB,CAAC;AAE9B,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,2FAA2F,CAAC;AAG3H,OAAO,EAAE,oBAAoB,EAAE,MAAM,4BAA4B,CAAC;AAElE,qBAAa,qBAAsB,SAAQ,oBAAoB;IAC7D,QAAQ,CAAC,WAAW,EAAE,WAAW,CAAC;IAElC,QAAQ,CAAC,kBAAkB,cAAwB;IAEnD,SAAS,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;IAClC,oBAAoB,CAAC,EAAE,oBAAoB,GAAG,SAAS,CAAC;gBAE5C,WAAW,EAAE,WAAW;IAapC,MAAM,CAAC,aAAa,CAAC,WAAW,EAAE,WAAW,GAAG,qBAAqB;IAUrE,YAAY,CAAC,GAAG,EAAE,SAAS,GAAG,SAAS,GAAG,IAAI;IAO7C,gBAAgB,CAAC,SAAS,EAAE,SAAS,GAAG,WAAW,CAAC,IAAI,CAAC;CA6E3D"}
+{"version":3,"file":"DataSpacePreviewState.d.ts","sourceRoot":"","sources":["../../../src/stores/studio/DataSpacePreviewState.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AAEH,OAAO,EACL,oBAAoB,EAEpB,KAAK,WAAW,EACjB,MAAM,kCAAkC,CAAC;AAE1C,OAAO,EACL,KAAK,WAAW,EAEhB,WAAW,EAEZ,MAAM,sBAAsB,CAAC;AAE9B,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,2FAA2F,CAAC;AAG3H,OAAO,EAAE,oBAAoB,EAAE,MAAM,4BAA4B,CAAC;AAElE,qBAAa,qBAAsB,SAAQ,oBAAoB;IAC7D,QAAQ,CAAC,WAAW,EAAE,WAAW,CAAC;IAElC,QAAQ,CAAC,kBAAkB,cAAwB;IAEnD,SAAS,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;IAClC,oBAAoB,CAAC,EAAE,oBAAoB,GAAG,SAAS,CAAC;gBAE5C,WAAW,EAAE,WAAW;IAapC,MAAM,CAAC,aAAa,CAAC,WAAW,EAAE,WAAW,GAAG,qBAAqB;IAUrE,YAAY,CAAC,GAAG,EAAE,SAAS,GAAG,SAAS,GAAG,IAAI;IAO7C,gBAAgB,CAAC,SAAS,EAAE,SAAS,GAAG,WAAW,CAAC,IAAI,CAAC;CAwE3D"}

package/lib/stores/studio/DataSpacePreviewState.js

@@ -66,9 +66,6 @@ export class DataSpacePreviewState extends EditorExtensionState {
                 onDiagramClassDoubleClick: (classView) => {
                     queryClass(classView.class.value, this.editorStore).catch(this.editorStore.applicationStore.alertUnhandledError);
                 },
-            }, {
-                HACKY__previewExperimentalFeatures: this.editorStore.applicationStore.config.options
-                    .HACKY__previewExperimentalFeatures,
             });
             this.loadDataSpaceState.pass();
         }

package/lib/stores/studio/DataSpacePreviewState.js.map

@@ -1 +1 @@
-{"version":3,"file":"DataSpacePreviewState.js","sourceRoot":"","sources":["../../../src/stores/studio/DataSpacePreviewState.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"DataSpacePreviewState.js","sourceRoot":"","sources":["../../../src/stores/studio/DataSpacePreviewState.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@finos/legend-extension-dsl-data-space",
-  "version": "9.1.3",
+  "version": "9.1.5",
   "description": "Legend extension for Data Space DSL",
   "keywords": [
     "legend",
@@ -43,32 +43,36 @@
     "test:watch": "jest --watch"
   },
   "dependencies": {
-    "@finos/legend-application": "13.0.2",
-    "@finos/legend-application-query": "11.0.2",
-    "@finos/legend-application-studio": "23.0.2",
-    "@finos/legend-art": "5.0.36",
-    "@finos/legend-extension-dsl-diagram": "7.1.42",
-    "@finos/legend-graph": "24.0.1",
-    "@finos/legend-query-builder": "1.0.2",
-    "@finos/legend-server-depot": "4.4.6",
-    "@finos/legend-shared": "8.0.1",
-    "@finos/legend-storage": "3.0.41",
-    "@types/react": "18.0.28",
-    "mobx": "6.8.0",
+    "@ag-grid-community/client-side-row-model": "29.2.0",
+    "@ag-grid-community/core": "29.2.0",
+    "@ag-grid-community/react": "29.2.0",
+    "@ag-grid-community/styles": "29.2.0",
+    "@finos/legend-application": "13.0.4",
+    "@finos/legend-application-query": "11.0.4",
+    "@finos/legend-application-studio": "23.1.0",
+    "@finos/legend-art": "5.0.38",
+    "@finos/legend-extension-dsl-diagram": "7.1.44",
+    "@finos/legend-graph": "25.0.0",
+    "@finos/legend-query-builder": "1.0.4",
+    "@finos/legend-server-depot": "4.4.8",
+    "@finos/legend-shared": "8.0.3",
+    "@finos/legend-storage": "3.0.43",
+    "@types/react": "18.0.29",
+    "mobx": "6.9.0",
     "mobx-react-lite": "3.4.3",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "serializr": "3.0.2"
   },
   "devDependencies": {
-    "@finos/legend-dev-utils": "2.0.46",
+    "@finos/legend-dev-utils": "2.0.47",
     "@jest/globals": "29.5.0",
     "cross-env": "7.0.3",
     "eslint": "8.36.0",
     "jest": "29.5.0",
     "npm-run-all": "4.1.5",
-    "rimraf": "4.4.0",
-    "sass": "1.59.3",
+    "rimraf": "4.4.1",
+    "sass": "1.60.0",
     "typescript": "5.0.2"
   },
   "peerDependencies": {

package/src/application/studio/DSL_DataSpace_LegendStudioCodeSnippet.ts

@@ -20,6 +20,7 @@ export const SIMPLE_DATA_SPACE_SNIPPET = `DataSpace \${1:model::NewDataSpace}
   [
     {
       name: '\${5:Some Context}';
+      title: 'New Execution Context';
       description: 'some information about the execution context';
       mapping: \${6:model::SomeMapping};
       defaultRuntime: \${7:model::SomeRuntime};
@@ -27,14 +28,26 @@ export const SIMPLE_DATA_SPACE_SNIPPET = `DataSpace \${1:model::NewDataSpace}
   ];
   defaultExecutionContext: '\${5:Some Context}';
   // description: 'description of the data models';
-  // featuredDiagrams:
+  // diagrams:
   // [
-  //   model::SomeDiagram
+  //   {
+  //     title: 'Some Diagram';
+  //     description: 'some diagram';
+  //     diagram: model::SomeDiagram;
+  //   }
   // ];
   // elements:
   // [
   //   model::SomeClass,
   // ];
+  // executables:
+  // [
+  //   {
+  //     title: 'Some Executable';
+  //     description: 'some executable';
+  //     executable: model::SomeExecutable;
+  //   }
+  // ];
   // supportInfo: Email {
   //   address: 'someEmail@test.org';
   // };

package/src/components/DataSpaceDiagramViewer.tsx

@@ -0,0 +1,191 @@
+/**
+ * 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 {
+  BlankPanelContent,
+  CircleIcon,
+  ThinChevronLeftIcon,
+  ThinChevronRightIcon,
+  clsx,
+  useResizeDetector,
+} from '@finos/legend-art';
+import type { DataSpaceViewerState } from '../stores/DataSpaceViewerState.js';
+import { observer } from 'mobx-react-lite';
+import { forwardRef, useEffect, useRef } from 'react';
+import {
+  DiagramRenderer,
+  type Diagram,
+} from '@finos/legend-extension-dsl-diagram';
+import {
+  getNullableFirstElement,
+  getNullableLastElement,
+  guaranteeNonNullable,
+} from '@finos/legend-shared';
+
+const DataSpaceDiagramCanvas = observer(
+  forwardRef<
+    HTMLDivElement,
+    {
+      dataSpaceViewerState: DataSpaceViewerState;
+      diagram: Diagram;
+    }
+  >(function DataSpaceDiagramCanvas(props, ref) {
+    const { dataSpaceViewerState, diagram } = props;
+    const diagramCanvasRef = ref as React.MutableRefObject<HTMLDivElement>;
+
+    const { width, height } = useResizeDetector<HTMLDivElement>({
+      refreshMode: 'debounce',
+      refreshRate: 50,
+      targetRef: diagramCanvasRef,
+    });
+
+    useEffect(() => {
+      const renderer = new DiagramRenderer(diagramCanvasRef.current, diagram);
+      dataSpaceViewerState.setRenderer(renderer);
+      dataSpaceViewerState.setupRenderer();
+      renderer.render({ initial: true });
+    }, [diagramCanvasRef, dataSpaceViewerState, diagram]);
+
+    useEffect(() => {
+      if (dataSpaceViewerState.isDiagramRendererInitialized) {
+        dataSpaceViewerState.renderer.refresh();
+      }
+    }, [dataSpaceViewerState, width, height]);
+
+    return (
+      <div
+        ref={diagramCanvasRef}
+        className={clsx(
+          'diagram-canvas ',
+          dataSpaceViewerState.diagramCursorClass,
+        )}
+        tabIndex={0}
+      />
+    );
+  }),
+);
+
+export const DataSpaceDiagramViewer = observer(
+  (props: { dataSpaceViewerState: DataSpaceViewerState }) => {
+    const { dataSpaceViewerState } = props;
+    const analysisResult = dataSpaceViewerState.dataSpaceAnalysisResult;
+
+    // diagram selector
+    const diagramCanvasRef = useRef<HTMLDivElement>(null);
+
+    const showPreviousDiagram = (): void => {
+      if (!dataSpaceViewerState.currentDiagram) {
+        return;
+      }
+      const idx = analysisResult.diagrams.indexOf(
+        dataSpaceViewerState.currentDiagram,
+      );
+      if (idx === 0 || idx === -1) {
+        return;
+      }
+      dataSpaceViewerState.setCurrentDiagram(
+        guaranteeNonNullable(analysisResult.diagrams[idx - 1]),
+      );
+    };
+    const showNextDiagram = (): void => {
+      if (!dataSpaceViewerState.currentDiagram) {
+        return;
+      }
+      const idx = analysisResult.diagrams.indexOf(
+        dataSpaceViewerState.currentDiagram,
+      );
+      if (idx === analysisResult.diagrams.length - 1 || idx === -1) {
+        return;
+      }
+      dataSpaceViewerState.setCurrentDiagram(
+        guaranteeNonNullable(analysisResult.diagrams[idx + 1]),
+      );
+    };
+
+    if (analysisResult.diagrams.length === 0) {
+      return <BlankPanelContent>No diagrams available</BlankPanelContent>;
+    }
+    return (
+      <div className="data-space__viewer__wiki__section">
+        <div className="data-space__viewer__wiki__section__header">
+          Diagrams
+        </div>
+        <div className="data-space__viewer__wiki__section__content">
+          <div className="data-space__viewer__diagram-viewer">
+            <div className="data-space__viewer__diagram-viewer__carousel">
+              <div className="data-space__viewer__diagram-viewer__carousel__frame">
+                <div className="data-space__viewer__diagram-viewer__carousel__frame__display">
+                  {dataSpaceViewerState.currentDiagram && (
+                    <DataSpaceDiagramCanvas
+                      dataSpaceViewerState={dataSpaceViewerState}
+                      diagram={dataSpaceViewerState.currentDiagram.diagram}
+                      ref={diagramCanvasRef}
+                    />
+                  )}
+                </div>
+                <button
+                  className="data-space__viewer__diagram-viewer__carousel__frame__navigator data-space__viewer__diagram-viewer__carousel__frame__navigator--back"
+                  tabIndex={-1}
+                  title="Previous"
+                  disabled={
+                    getNullableFirstElement(analysisResult.diagrams) ===
+                    dataSpaceViewerState.currentDiagram
+                  }
+                  onClick={showPreviousDiagram}
+                >
+                  <ThinChevronLeftIcon />
+                </button>
+                <button
+                  className="data-space__viewer__diagram-viewer__carousel__frame__navigator data-space__viewer__diagram-viewer__carousel__frame__navigator--next"
+                  tabIndex={-1}
+                  title="Next"
+                  disabled={
+                    getNullableLastElement(analysisResult.diagrams) ===
+                    dataSpaceViewerState.currentDiagram
+                  }
+                  onClick={showNextDiagram}
+                >
+                  <ThinChevronRightIcon />
+                </button>
+                <div className="data-space__viewer__diagram-viewer__carousel__frame__indicators">
+                  <div className="data-space__viewer__diagram-viewer__carousel__frame__indicators__notch">
+                    {analysisResult.diagrams.map((diagram) => (
+                      <button
+                        key={diagram.diagram.path}
+                        className={clsx(
+                          'data-space__viewer__diagram-viewer__carousel__frame__indicator',
+                          {
+                            'data-space__viewer__diagram-viewer__carousel__frame__indicator--active':
+                              dataSpaceViewerState.currentDiagram === diagram,
+                          },
+                        )}
+                        onClick={() =>
+                          dataSpaceViewerState.setCurrentDiagram(diagram)
+                        }
+                      >
+                        <CircleIcon />
+                      </button>
+                    ))}
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  },
+);

package/src/components/DataSpaceExecutionContextViewer.tsx

@@ -0,0 +1,173 @@
+/**
+ * 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 } from 'mobx-react-lite';
+import {
+  clsx,
+  CustomSelectorInput,
+  PURE_MappingIcon,
+  PURE_RuntimeIcon,
+  CogIcon,
+} from '@finos/legend-art';
+import { type PackageableRuntime } from '@finos/legend-graph';
+import { type DataSpaceViewerState } from '../stores/DataSpaceViewerState.js';
+import type { DataSpaceExecutionContextAnalysisResult } from '../graphManager/action/analytics/DataSpaceAnalysis.js';
+
+type ExecutionContextOption = {
+  label: string;
+  value: DataSpaceExecutionContextAnalysisResult;
+};
+const buildExecutionContextOption = (
+  value: DataSpaceExecutionContextAnalysisResult,
+): ExecutionContextOption => ({
+  label: value.name,
+  value: value,
+});
+
+type RuntimeOption = {
+  label: string;
+  value: PackageableRuntime;
+};
+const buildRuntimeOption = (value: PackageableRuntime): RuntimeOption => ({
+  label: value.name,
+  value: value,
+});
+
+export const DataSpaceExecutionContextViewer = observer(
+  (props: { dataSpaceViewerState: DataSpaceViewerState }) => {
+    const { dataSpaceViewerState } = props;
+    const analysisResult = dataSpaceViewerState.dataSpaceAnalysisResult;
+    const executionContexts = Array.from(
+      dataSpaceViewerState.dataSpaceAnalysisResult.executionContextsIndex.values(),
+    );
+
+    // execution
+    const executionContextOptions = executionContexts.map(
+      buildExecutionContextOption,
+    );
+    const selectedExecutionContextOption = buildExecutionContextOption(
+      dataSpaceViewerState.currentExecutionContext,
+    );
+    const onExecutionContextOptionChange = (
+      option: ExecutionContextOption,
+    ): void => {
+      if (option.value !== dataSpaceViewerState.currentExecutionContext) {
+        dataSpaceViewerState.setCurrentExecutionContext(option.value);
+      }
+    };
+    const formatExecutionContextOptionLabel = (
+      option: ExecutionContextOption,
+    ): React.ReactNode => (
+      <div className="data-space__viewer__execution-context__entry__content__dropdown__option">
+        <div className="data-space__viewer__execution-context__entry__content__dropdown__option__label">
+          {option.label}
+        </div>
+        {option.value === analysisResult.defaultExecutionContext && (
+          <div className="data-space__viewer__execution-context__entry__content__dropdown__option__tag">
+            default
+          </div>
+        )}
+      </div>
+    );
+
+    // runtime
+    const runtimeOptions =
+      dataSpaceViewerState.currentExecutionContext.compatibleRuntimes.map(
+        buildRuntimeOption,
+      );
+    const selectedRuntimeOption = buildRuntimeOption(
+      dataSpaceViewerState.currentRuntime,
+    );
+    const onRuntimeOptionChange = (option: RuntimeOption): void => {
+      if (option.value !== dataSpaceViewerState.currentRuntime) {
+        dataSpaceViewerState.setCurrentRuntime(option.value);
+      }
+    };
+    const formatRuntimeOptionLabel = (
+      option: RuntimeOption,
+    ): React.ReactNode => (
+      <div className="data-space__viewer__execution-context__entry__content__dropdown__option">
+        <div className="data-space__viewer__execution-context__entry__content__dropdown__option__label">
+          {option.label}
+        </div>
+        {option.value ===
+          dataSpaceViewerState.currentExecutionContext.defaultRuntime && (
+          <div className="data-space__viewer__execution-context__entry__content__dropdown__option__tag">
+            default
+          </div>
+        )}
+      </div>
+    );
+
+    return (
+      <div className="data-space__viewer__panel">
+        <div className="data-space__viewer__execution-context">
+          <div className="data-space__viewer__execution-context__entry">
+            <div className="data-space__viewer__execution-context__entry__icon">
+              <CogIcon className="data-space__viewer__execution-context__context-icon" />
+            </div>
+            <div className="data-space__viewer__execution-context__entry__content data-space__viewer__execution-context__entry__content__dropdown__container">
+              <CustomSelectorInput
+                className="data-space__viewer__execution-context__entry__content__dropdown"
+                options={executionContextOptions}
+                onChange={onExecutionContextOptionChange}
+                value={selectedExecutionContextOption}
+                darkMode={true}
+                formatOptionLabel={formatExecutionContextOptionLabel}
+              />
+            </div>
+          </div>
+          <div
+            className={clsx(
+              'data-space__viewer__execution-context__description',
+              {
+                'data-space__viewer__execution-context__description--empty':
+                  !dataSpaceViewerState.currentExecutionContext.description,
+              },
+            )}
+          >
+            {dataSpaceViewerState.currentExecutionContext.description
+              ? dataSpaceViewerState.currentExecutionContext.description
+              : 'No description'}
+          </div>
+          <div className="data-space__viewer__execution-context__entry data-space__viewer__execution-context__mapping">
+            <div className="data-space__viewer__execution-context__entry__icon">
+              <PURE_MappingIcon />
+            </div>
+            <div className="data-space__viewer__execution-context__entry__content data-space__viewer__execution-context__entry__content__text">
+              {dataSpaceViewerState.currentExecutionContext.mapping.path}
+            </div>
+          </div>
+          <div className="data-space__viewer__execution-context__entry">
+            <div className="data-space__viewer__execution-context__entry__icon">
+              <PURE_RuntimeIcon />
+            </div>
+            <div className="data-space__viewer__execution-context__entry__content data-space__viewer__execution-context__entry__content__dropdown__container">
+              <CustomSelectorInput
+                className="data-space__viewer__execution-context__entry__content__dropdown"
+                options={runtimeOptions}
+                onChange={onRuntimeOptionChange}
+                value={selectedRuntimeOption}
+                darkMode={true}
+                formatOptionLabel={formatRuntimeOptionLabel}
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  },
+);

package/src/components/DataSpaceInfoPanel.tsx

@@ -0,0 +1,170 @@
+/**
+ * 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 } from 'mobx-react-lite';
+import { ExternalLinkIcon, PencilIcon } from '@finos/legend-art';
+import { extractElementNameFromPath } from '@finos/legend-graph';
+import { type DataSpaceViewerState } from '../stores/DataSpaceViewerState.js';
+import { generateGAVCoordinates } from '@finos/legend-storage';
+import { useApplicationStore } from '@finos/legend-application';
+
+export const DataSpaceInfoPanel = observer(
+  (props: { dataSpaceViewerState: DataSpaceViewerState }) => {
+    const { dataSpaceViewerState } = props;
+    const applicationStore = useApplicationStore();
+    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,
+      );
+    const viewDataSpaceInSDLCProject = (): void => {
+      dataSpaceViewerState
+        .viewSDLCProject(
+          dataSpaceViewerState.groupId,
+          dataSpaceViewerState.artifactId,
+          analysisResult.path,
+        )
+        .catch(applicationStore.alertUnhandledError);
+    };
+
+    return (
+      <div className="data-space__viewer__panel">
+        <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="Click to View Project"
+                onClick={viewProject}
+              >
+                {generateGAVCoordinates(
+                  dataSpaceViewerState.groupId,
+                  dataSpaceViewerState.artifactId,
+                  dataSpaceViewerState.versionId,
+                )}
+              </button>
+              <button
+                className="data-space__viewer__info__project-info__link"
+                tabIndex={-1}
+                title="View Project"
+                onClick={viewProject}
+              >
+                <ExternalLinkIcon />
+              </button>
+            </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="Click to View Data Space"
+                onClick={viewDataSpaceInProject}
+              >
+                {analysisResult.path}
+              </button>
+              <button
+                className="data-space__viewer__info__project-info__link"
+                tabIndex={-1}
+                title="Edit Data Space"
+                onClick={viewDataSpaceInSDLCProject}
+              >
+                <PencilIcon />
+              </button>
+              <button
+                className="data-space__viewer__info__project-info__link"
+                tabIndex={-1}
+                title="View Data Space"
+                onClick={viewDataSpaceInProject}
+              >
+                <ExternalLinkIcon />
+              </button>
+            </div>
+          </div>
+          <div className="data-space__viewer__info__section">
+            <div className="data-space__viewer__info__section__title">
+              Tagged Values
+            </div>
+            {analysisResult.taggedValues.length !== 0 &&
+              analysisResult.taggedValues.map((taggedValue) => (
+                <div
+                  key={taggedValue._UUID}
+                  className="data-space__viewer__info__section__entry"
+                >
+                  <div
+                    className="data-space__viewer__info__tagged-value__tag"
+                    title={`${taggedValue.profile}.${taggedValue.tag}`}
+                  >
+                    {`${extractElementNameFromPath(taggedValue.profile)}.${
+                      taggedValue.tag
+                    }`}
+                  </div>
+                  <div className="data-space__viewer__info__tagged-value__value">
+                    {taggedValue.value}
+                  </div>
+                </div>
+              ))}
+            {analysisResult.taggedValues.length === 0 && (
+              <div className="data-space__viewer__info__section__placeholder">
+                (empty)
+              </div>
+            )}
+          </div>
+          <div className="data-space__viewer__info__section">
+            <div className="data-space__viewer__info__section__title">
+              Stereotypes
+            </div>
+            {analysisResult.stereotypes.length !== 0 &&
+              analysisResult.stereotypes.map((stereotype) => (
+                <div
+                  key={stereotype._UUID}
+                  className="data-space__viewer__info__section__entry"
+                  title={`${stereotype.profile}.${stereotype.value}`}
+                >
+                  <div className="data-space__viewer__info__steoreotype">
+                    {`${extractElementNameFromPath(stereotype.profile)}.${
+                      stereotype.value
+                    }`}
+                  </div>
+                </div>
+              ))}
+            {analysisResult.stereotypes.length === 0 && (
+              <div className="data-space__viewer__info__section__placeholder">
+                (empty)
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+    );
+  },
+);