@finos/legend-extension-dsl-data-space 9.0.48 → 9.1.1

package/src/components/DataSpaceViewer.tsx

@@ -27,18 +27,27 @@ import {
   PURE_MappingIcon,
   PURE_RuntimeIcon,
   CogIcon,
-  KeyIcon,
-  FlaskIcon,
-  ShieldIcon,
-  LightBulbIcon,
   InfoCircleIcon,
   ExternalLinkIcon,
   useResizeDetector,
-  DropdownMenu,
-  MenuContent,
-  MenuContentItem,
-  CaretDownIcon,
   ExternalLinkSquareIcon,
+  DocumentationIcon,
+  ResizablePanelGroup,
+  ResizablePanel,
+  ResizablePanelSplitter,
+  MarkdownTextViewer,
+  PencilIcon,
+  DisplayIcon,
+  ChevronRightIcon,
+  ChevronLeftIcon,
+  CircleIcon,
+  CaretDownIcon,
+  CaretRightIcon,
+  CopyIcon,
+  MoreHorizontalIcon,
+  FlaskIcon,
+  KeyIcon,
+  ShieldIcon,
 } from '@finos/legend-art';
 import {
   type Diagram,
@@ -55,8 +64,22 @@ import {
 } from '../stores/DataSpaceViewerState.js';
 import type { DataSpaceExecutionContextAnalysisResult } from '../graphManager/action/analytics/DataSpaceAnalysis.js';
 import { generateGAVCoordinates } from '@finos/legend-storage';
-import { useApplicationStore } from '@finos/legend-application';
+import {
+  EDITOR_LANGUAGE,
+  TextInputEditor,
+  useApplicationStore,
+} from '@finos/legend-application';
 import { DSL_DataSpace_LegendApplicationPlugin } from './DSL_DataSpace_LegendApplicationPlugin.js';
+import {
+  getNullableFirstElement,
+  getNullableLastElement,
+  guaranteeNonNullable,
+} from '@finos/legend-shared';
+import {
+  HACKY__DataSpaceUsageShowcaseTDSOutputDescription,
+  type HACKY__DataSpaceUsageShowcase,
+  HACKY__DataSpaceUsageShowcaseTDSSampleOutput,
+} from '../graphManager/action/analytics/HACKY__DataSpaceUsageShowcase.js';
 
 interface DataSpaceViewerActivityConfig {
   mode: DATA_SPACE_VIEWER_ACTIVITY_MODE;
@@ -108,62 +131,166 @@ const DataSpaceDiagramCanvas = observer(
   }),
 );
 
-type DiagramOption = { label: string; value: Diagram };
-const buildDiagramOption = (diagram: Diagram): DiagramOption => ({
-  label: diagram.name,
-  value: diagram,
-});
-
-const DataSpaceModelsOverview = observer(
+const DataSpaceOverview = observer(
   (props: { dataSpaceViewerState: DataSpaceViewerState }) => {
     const { dataSpaceViewerState } = props;
     const analysisResult = dataSpaceViewerState.dataSpaceAnalysisResult;
 
     // diagram selector
     const diagramCanvasRef = useRef<HTMLDivElement>(null);
-    const diagramOptions =
-      analysisResult.featuredDiagrams.map(buildDiagramOption);
-    const selectedDiagramOption = dataSpaceViewerState.currentDiagram
-      ? buildDiagramOption(dataSpaceViewerState.currentDiagram)
-      : null;
-    const onDiagramOptionChange = (option: DiagramOption): void => {
-      if (option.value !== dataSpaceViewerState.currentDiagram) {
-        dataSpaceViewerState.setCurrentDiagram(option.value);
+
+    const showPreviousDiagram = (): void => {
+      if (!dataSpaceViewerState.currentDiagram) {
+        return;
+      }
+      const idx = analysisResult.featuredDiagrams.indexOf(
+        dataSpaceViewerState.currentDiagram,
+      );
+      if (idx === 0 || idx === -1) {
+        return;
+      }
+      dataSpaceViewerState.setCurrentDiagram(
+        guaranteeNonNullable(analysisResult.featuredDiagrams[idx - 1]),
+      );
+    };
+    const showNextDiagram = (): void => {
+      if (!dataSpaceViewerState.currentDiagram) {
+        return;
       }
+      const idx = analysisResult.featuredDiagrams.indexOf(
+        dataSpaceViewerState.currentDiagram,
+      );
+      if (idx === analysisResult.featuredDiagrams.length - 1 || idx === -1) {
+        return;
+      }
+      dataSpaceViewerState.setCurrentDiagram(
+        guaranteeNonNullable(analysisResult.featuredDiagrams[idx + 1]),
+      );
     };
 
     if (analysisResult.featuredDiagrams.length === 0) {
       return <BlankPanelContent>No diagrams available</BlankPanelContent>;
     }
     return (
-      <div className="data-space__viewer__main-panel__content data-space__viewer__diagrams">
-        <div className="data-space__viewer__diagrams__header">
-          <CustomSelectorInput
-            className="data-space__viewer__diagrams__diagram-selector"
-            options={diagramOptions}
-            onChange={onDiagramOptionChange}
-            value={selectedDiagramOption}
-            placeholder="Search for a diagram"
-            darkMode={true}
-          />
-        </div>
-        <div className="data-space__viewer__diagrams__content">
-          {dataSpaceViewerState.currentDiagram && (
-            <DataSpaceDiagramCanvas
-              dataSpaceViewerState={dataSpaceViewerState}
-              diagram={dataSpaceViewerState.currentDiagram}
-              ref={diagramCanvasRef}
-            />
-          )}
-        </div>
-        <div className="data-space__viewer__diagrams__footer">
-          <div className="data-space__viewer__diagrams__footer__icon">
-            <LightBulbIcon />
-          </div>
-          <div className="data-space__viewer__diagrams__footer__text">
-            Double-click a class to start a query for that class
-          </div>
-        </div>
+      <div className="data-space__viewer__main-panel__content data-space__viewer__overview">
+        <ResizablePanelGroup orientation="horizontal">
+          <ResizablePanel size={250} minSize={100}>
+            <div className="data-space__viewer__overview__description">
+              {analysisResult.description !== undefined && (
+                <div className="data-space__viewer__overview__description__content">
+                  <MarkdownTextViewer
+                    className="data-space__viewer__overview__description__content__markdown-content"
+                    value={{
+                      value: analysisResult.description,
+                    }}
+                  />
+                </div>
+              )}
+              {analysisResult.description === undefined && (
+                <div className="data-space__viewer__overview__description--empty">
+                  No description
+                </div>
+              )}
+            </div>
+          </ResizablePanel>
+          <ResizablePanelSplitter />
+          <ResizablePanel minSize={100}>
+            <div className="data-space__viewer__overview__diagrams__carousel">
+              <div className="data-space__viewer__overview__diagrams__carousel__frame">
+                <div className="data-space__viewer__overview__diagrams__carousel__frame__display">
+                  {dataSpaceViewerState.currentDiagram && (
+                    <DataSpaceDiagramCanvas
+                      dataSpaceViewerState={dataSpaceViewerState}
+                      diagram={dataSpaceViewerState.currentDiagram}
+                      ref={diagramCanvasRef}
+                    />
+                  )}
+                </div>
+                <button
+                  className="data-space__viewer__overview__diagrams__carousel__frame__navigator data-space__viewer__overview__diagrams__carousel__frame__navigator--back"
+                  tabIndex={-1}
+                  title="Previous"
+                  disabled={
+                    getNullableFirstElement(analysisResult.featuredDiagrams) ===
+                    dataSpaceViewerState.currentDiagram
+                  }
+                  onClick={showPreviousDiagram}
+                >
+                  <ChevronLeftIcon />
+                </button>
+                <button
+                  className="data-space__viewer__overview__diagrams__carousel__frame__navigator data-space__viewer__overview__diagrams__carousel__frame__navigator--next"
+                  tabIndex={-1}
+                  title="Previous"
+                  disabled={
+                    getNullableLastElement(analysisResult.featuredDiagrams) ===
+                    dataSpaceViewerState.currentDiagram
+                  }
+                  onClick={showNextDiagram}
+                >
+                  <ChevronRightIcon />
+                </button>
+                <div className="data-space__viewer__overview__diagrams__carousel__frame__indicators">
+                  <div className="data-space__viewer__overview__diagrams__carousel__frame__indicators__notch">
+                    {analysisResult.featuredDiagrams.map((diagram) => (
+                      <button
+                        key={diagram.path}
+                        className={clsx(
+                          'data-space__viewer__overview__diagrams__carousel__frame__indicator',
+                          {
+                            'data-space__viewer__overview__diagrams__carousel__frame__indicator--active':
+                              dataSpaceViewerState.currentDiagram === diagram,
+                          },
+                        )}
+                        onClick={() =>
+                          dataSpaceViewerState.setCurrentDiagram(diagram)
+                        }
+                      >
+                        <CircleIcon />
+                      </button>
+                    ))}
+                  </div>
+                </div>
+              </div>
+            </div>
+          </ResizablePanel>
+        </ResizablePanelGroup>
+      </div>
+    );
+  },
+);
+
+const DataSpaceDocumentation = observer(
+  (props: { dataSpaceViewerState: DataSpaceViewerState }) => {
+    const { dataSpaceViewerState } = props;
+    const documentationEntries =
+      dataSpaceViewerState.dataSpaceAnalysisResult.elementDocs;
+
+    if (documentationEntries.length === 0) {
+      return <BlankPanelContent>No documentation available</BlankPanelContent>;
+    }
+    return (
+      <div className="data-space__viewer__main-panel__content data-space__viewer__overview">
+        <table className="table">
+          <thead>
+            <tr>
+              <th className="table__cell--left">Element</th>
+              <th className="table__cell--left"></th>
+              <th className="table__cell--left">Documentation</th>
+            </tr>
+          </thead>
+          <tbody>
+            {documentationEntries.map((entry) => (
+              <tr key={entry.uuid}>
+                <td className="table__cell--left">{entry.elementPath}</td>
+                <td className="table__cell--left">
+                  {entry.subElementText ?? ''}
+                </td>
+                <td className="table__cell--left">{entry.doc}</td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
       </div>
     );
   },
@@ -313,7 +440,9 @@ const DataSpaceExecutionViewer = observer(
 const DataSpaceInfo = observer(
   (props: { dataSpaceViewerState: DataSpaceViewerState }) => {
     const { dataSpaceViewerState } = props;
+    const applicationStore = useApplicationStore();
     const analysisResult = dataSpaceViewerState.dataSpaceAnalysisResult;
+
     const viewProject = (): void =>
       dataSpaceViewerState.viewProject(
         dataSpaceViewerState.groupId,
@@ -328,6 +457,15 @@ const DataSpaceInfo = observer(
         dataSpaceViewerState.versionId,
         analysisResult.path,
       );
+    const viewDataSpaceInSDLCProject = (): void => {
+      dataSpaceViewerState
+        .viewSDLCProject(
+          dataSpaceViewerState.groupId,
+          dataSpaceViewerState.artifactId,
+          analysisResult.path,
+        )
+        .catch(applicationStore.alertUnhandledError);
+    };
 
     return (
       <div className="data-space__viewer__info">
@@ -339,7 +477,7 @@ const DataSpaceInfo = observer(
             <button
               className="data-space__viewer__info__project-info__value"
               tabIndex={-1}
-              title="View Project"
+              title="Click to View Project"
               onClick={viewProject}
             >
               {generateGAVCoordinates(
@@ -348,9 +486,14 @@ const DataSpaceInfo = observer(
                 dataSpaceViewerState.versionId,
               )}
             </button>
-            <div className="data-space__viewer__info__project-info__link">
+            <button
+              className="data-space__viewer__info__project-info__link"
+              tabIndex={-1}
+              title="View Project"
+              onClick={viewProject}
+            >
               <ExternalLinkIcon />
-            </div>
+            </button>
           </div>
           <div className="data-space__viewer__info__section__entry">
             <div className="data-space__viewer__info__project-info__label">
@@ -359,14 +502,27 @@ const DataSpaceInfo = observer(
             <button
               className="data-space__viewer__info__project-info__value"
               tabIndex={-1}
-              title="View Data Space"
+              title="Click to View Data Space"
               onClick={viewDataSpaceInProject}
             >
               {analysisResult.path}
             </button>
-            <div className="data-space__viewer__info__project-info__link">
+            <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 />
-            </div>
+            </button>
           </div>
         </div>
         <div className="data-space__viewer__info__section">
@@ -494,6 +650,302 @@ const renderDataSpaceCheckEntitlementsEditor = (
   );
 };
 
+const DataSpaceUsageShowcaseTDSSampleOutputViewer = observer(
+  (props: {
+    dataSpaceViewerState: DataSpaceViewerState;
+    showcase: HACKY__DataSpaceUsageShowcase;
+    sampleOutput: HACKY__DataSpaceUsageShowcaseTDSSampleOutput;
+  }) => {
+    const { showcase, sampleOutput: sampleOutput } = props;
+
+    const toggleShowSampleOutput = (): void =>
+      showcase.setShowSampleOutput(!showcase.showSampleOutput);
+
+    return (
+      <div
+        className={clsx('data-space__viewer__usage__block', {
+          'data-space__viewer__usage__block--collapsed':
+            !showcase.showSampleOutput,
+        })}
+      >
+        <div
+          className="data-space__viewer__usage__block__header"
+          onClick={toggleShowSampleOutput}
+        >
+          <div className="data-space__viewer__usage__block__header__toggler">
+            {showcase.showSampleOutput ? <CaretDownIcon /> : <CaretRightIcon />}
+          </div>
+          <div className="data-space__viewer__usage__block__header__title">
+            Sample Output
+          </div>
+        </div>
+        {showcase.showSampleOutput && (
+          <div className="data-space__viewer__usage__block__content">
+            <table className="table data-space__viewer__usage__block__content__table">
+              <thead>
+                <tr>
+                  {sampleOutput.headers.map((header, idx) => (
+                    // eslint-disable-next-line react/no-array-index-key
+                    <th key={idx} className="table__cell--left">
+                      {header}
+                    </th>
+                  ))}
+                </tr>
+              </thead>
+              <tbody>
+                {sampleOutput.rows.map((row, idx) => (
+                  // eslint-disable-next-line react/no-array-index-key
+                  <tr key={idx}>
+                    {row.map((cell, rowIdx) => (
+                      // eslint-disable-next-line react/no-array-index-key
+                      <td key={rowIdx} className="table__cell--left">
+                        {cell}
+                      </td>
+                    ))}
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        )}
+      </div>
+    );
+  },
+);
+
+const DataSpaceUsageShowcaseSampleOutputViewer = observer(
+  (props: {
+    dataSpaceViewerState: DataSpaceViewerState;
+    showcase: HACKY__DataSpaceUsageShowcase;
+  }) => {
+    const { dataSpaceViewerState, showcase } = props;
+    if (
+      showcase.outputDescription.sampleOutput instanceof
+      HACKY__DataSpaceUsageShowcaseTDSSampleOutput
+    ) {
+      return (
+        <DataSpaceUsageShowcaseTDSSampleOutputViewer
+          dataSpaceViewerState={dataSpaceViewerState}
+          showcase={showcase}
+          sampleOutput={showcase.outputDescription.sampleOutput}
+        />
+      );
+    }
+    return (
+      <BlankPanelContent>Can&apos;t display sample output</BlankPanelContent>
+    );
+  },
+);
+
+const DataSpaceUsageShowcaseTDSOutputDescriptionViewer = observer(
+  (props: {
+    dataSpaceViewerState: DataSpaceViewerState;
+    showcase: HACKY__DataSpaceUsageShowcase;
+    description: HACKY__DataSpaceUsageShowcaseTDSOutputDescription;
+  }) => {
+    const { showcase, description: description } = props;
+
+    const toggleShowOutputDescription = (): void =>
+      showcase.setShowOutputDescription(!showcase.showOutputDescription);
+
+    return (
+      <div
+        className={clsx('data-space__viewer__usage__block', {
+          'data-space__viewer__usage__block--collapsed':
+            !showcase.showOutputDescription,
+        })}
+      >
+        <div
+          className="data-space__viewer__usage__block__header"
+          onClick={toggleShowOutputDescription}
+        >
+          <div className="data-space__viewer__usage__block__header__toggler">
+            {showcase.showOutputDescription ? (
+              <CaretDownIcon />
+            ) : (
+              <CaretRightIcon />
+            )}
+          </div>
+          <div className="data-space__viewer__usage__block__header__title">
+            Output Description
+          </div>
+        </div>
+        {showcase.showOutputDescription && (
+          <div className="data-space__viewer__usage__block__content">
+            <table className="table data-space__viewer__usage__block__content__table">
+              <thead>
+                <tr>
+                  <th className="table__cell--left">Column Name</th>
+                  <th className="table__cell--left">Description</th>
+                  <th className="table__cell--left">Sample Values</th>
+                </tr>
+              </thead>
+              <tbody>
+                {description.columns.map((column) => (
+                  <tr key={column.uuid}>
+                    <td className="table__cell--left">{column.name}</td>
+                    <td className="table__cell--left">{column.description}</td>
+                    <td className="table__cell--left">
+                      {column.sampleValues.join(', ')}
+                    </td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        )}
+      </div>
+    );
+  },
+);
+
+const DataSpaceUsageShowcaseOutputDescriptionViewer = observer(
+  (props: {
+    dataSpaceViewerState: DataSpaceViewerState;
+    showcase: HACKY__DataSpaceUsageShowcase;
+  }) => {
+    const { dataSpaceViewerState, showcase } = props;
+    if (
+      showcase.outputDescription instanceof
+      HACKY__DataSpaceUsageShowcaseTDSOutputDescription
+    ) {
+      return (
+        <DataSpaceUsageShowcaseTDSOutputDescriptionViewer
+          dataSpaceViewerState={dataSpaceViewerState}
+          showcase={showcase}
+          description={showcase.outputDescription}
+        />
+      );
+    }
+    return (
+      <BlankPanelContent>
+        Can&apos;t display output description
+      </BlankPanelContent>
+    );
+  },
+);
+
+const DataSpaceUsageShowcaseViewer = observer(
+  (props: {
+    dataSpaceViewerState: DataSpaceViewerState;
+    showcase: HACKY__DataSpaceUsageShowcase;
+  }) => {
+    const { dataSpaceViewerState, showcase } = props;
+    const applicationStore = useApplicationStore();
+
+    const toggleShowQuery = (): void =>
+      showcase.setShowQuery(!showcase.showQuery);
+    const copyQuery: React.MouseEventHandler<HTMLButtonElement> = (
+      event,
+    ): void => {
+      event.preventDefault();
+      event.stopPropagation();
+
+      applicationStore.clipboardService
+        .copyTextToClipboard(showcase.query)
+        .catch(applicationStore.alertUnhandledError);
+    };
+
+    return (
+      <div className="data-space__viewer__usage">
+        <div className="data-space__viewer__usage__title">{showcase.title}</div>
+        {showcase.description !== undefined && (
+          <div className="data-data-space__viewer__usage__description">
+            <MarkdownTextViewer
+              className="data-space__viewer__usage__description__markdown-content"
+              value={{
+                value: showcase.description,
+              }}
+            />
+          </div>
+        )}
+        <div
+          className={clsx(
+            'data-space__viewer__usage__block data-space__viewer__usage__query',
+            {
+              'data-space__viewer__usage__block--collapsed':
+                !showcase.showQuery,
+            },
+          )}
+        >
+          <div
+            className="data-space__viewer__usage__block__header"
+            onClick={toggleShowQuery}
+          >
+            <div className="data-space__viewer__usage__block__header__toggler">
+              {showcase.showQuery ? <CaretDownIcon /> : <CaretRightIcon />}
+            </div>
+            <div className="data-space__viewer__usage__block__header__title">
+              Query
+            </div>
+            <div className="data-space__viewer__usage__block__header__actions">
+              <button
+                className="data-space__viewer__usage__block__header__action"
+                tabIndex={-1}
+                onClick={copyQuery}
+              >
+                <CopyIcon />
+              </button>
+              <button
+                className="data-space__viewer__usage__block__header__action"
+                tabIndex={-1}
+              >
+                <MoreHorizontalIcon />
+              </button>
+            </div>
+          </div>
+          {showcase.showQuery && (
+            <div className="data-space__viewer__usage__block__content">
+              <TextInputEditor
+                inputValue={showcase.query}
+                isReadOnly={true}
+                language={EDITOR_LANGUAGE.PURE}
+                hideGutter={true}
+                showMiniMap={false}
+              />
+            </div>
+          )}
+        </div>
+        <DataSpaceUsageShowcaseOutputDescriptionViewer
+          dataSpaceViewerState={dataSpaceViewerState}
+          showcase={showcase}
+        />
+        <DataSpaceUsageShowcaseSampleOutputViewer
+          dataSpaceViewerState={dataSpaceViewerState}
+          showcase={showcase}
+        />
+      </div>
+    );
+  },
+);
+
+const DataSpaceUsageShowcasesPanel = observer(
+  (props: { dataSpaceViewerState: DataSpaceViewerState }) => {
+    const { dataSpaceViewerState } = props;
+
+    if (!dataSpaceViewerState.HACKY__previewExperimentalFeatures) {
+      return (
+        <BlankPanelContent>
+          Usage Showcases (Work in Progress)
+        </BlankPanelContent>
+      );
+    }
+    return (
+      <div className="data-space__viewer__main-panel__content data-space__viewer__usages">
+        {dataSpaceViewerState.dataSpaceAnalysisResult.HACKY__usageShowcases.map(
+          (showcase) => (
+            <DataSpaceUsageShowcaseViewer
+              key={showcase.uuid}
+              dataSpaceViewerState={dataSpaceViewerState}
+              showcase={showcase}
+            />
+          ),
+        )}
+      </div>
+    );
+  },
+);
+
 export const DataSpaceViewer = observer(
   (props: { dataSpaceViewerState: DataSpaceViewerState }) => {
     const { dataSpaceViewerState } = props;
@@ -506,25 +958,35 @@ export const DataSpaceViewer = observer(
 
     const activities: DataSpaceViewerActivityConfig[] = [
       {
-        mode: DATA_SPACE_VIEWER_ACTIVITY_MODE.MODELS_OVERVIEW,
-        title: 'Models Overview',
+        mode: DATA_SPACE_VIEWER_ACTIVITY_MODE.OVERVIEW,
+        title: 'Overview',
         icon: <ShapesIcon />,
       },
+      {
+        mode: DATA_SPACE_VIEWER_ACTIVITY_MODE.DOCUMENTATION,
+        title: 'Documentation',
+        icon: <DocumentationIcon />,
+      },
+      {
+        mode: DATA_SPACE_VIEWER_ACTIVITY_MODE.USAGE_SHOWCASE,
+        title: 'Usage Showcase',
+        icon: <DisplayIcon />,
+      },
       {
         mode: DATA_SPACE_VIEWER_ACTIVITY_MODE.EXECUTION,
         title: 'Execution Context',
         icon: <PlayIcon />,
       },
-      {
-        mode: DATA_SPACE_VIEWER_ACTIVITY_MODE.ENTITLEMENT,
-        title: 'Entitlement',
-        icon: <KeyIcon />,
-      },
       {
         mode: DATA_SPACE_VIEWER_ACTIVITY_MODE.TEST_DATA,
         title: 'Test Data',
         icon: <FlaskIcon />,
       },
+      {
+        mode: DATA_SPACE_VIEWER_ACTIVITY_MODE.ENTITLEMENT,
+        title: 'Entitlement',
+        icon: <KeyIcon />,
+      },
       {
         mode: DATA_SPACE_VIEWER_ACTIVITY_MODE.TEST_COVERAGE,
         title: 'Test Coverage',
@@ -549,15 +1011,6 @@ export const DataSpaceViewer = observer(
         dataSpaceViewerState.versionId,
         analysisResult.path,
       );
-    const viewSDLCProject = (): void => {
-      dataSpaceViewerState
-        .viewSDLCProject(
-          dataSpaceViewerState.groupId,
-          dataSpaceViewerState.artifactId,
-          analysisResult.path,
-        )
-        .catch(applicationStore.alertUnhandledError);
-    };
 
     return (
       <div className="data-space__viewer">
@@ -585,28 +1038,6 @@ export const DataSpaceViewer = observer(
                 <ExternalLinkSquareIcon />
               </div>
             </button>
-            <DropdownMenu
-              className="data-space__viewer__title__dropdown-trigger"
-              content={
-                <MenuContent>
-                  <MenuContentItem onClick={viewSDLCProject}>
-                    View SDLC project
-                  </MenuContentItem>
-                </MenuContent>
-              }
-            >
-              <CaretDownIcon title="Show more options..." />
-            </DropdownMenu>
-          </div>
-          <div
-            className={clsx('data-space__viewer__description', {
-              'data-space__viewer__description--empty':
-                !analysisResult.description,
-            })}
-          >
-            {analysisResult.description
-              ? analysisResult.description
-              : 'No description'}
           </div>
         </div>
         <div className="data-space__viewer__content">
@@ -631,8 +1062,14 @@ export const DataSpaceViewer = observer(
             </div>
             <div className="data-space__viewer__main-panel">
               {dataSpaceViewerState.currentActivity ===
-                DATA_SPACE_VIEWER_ACTIVITY_MODE.MODELS_OVERVIEW && (
-                <DataSpaceModelsOverview
+                DATA_SPACE_VIEWER_ACTIVITY_MODE.OVERVIEW && (
+                <DataSpaceOverview
+                  dataSpaceViewerState={dataSpaceViewerState}
+                />
+              )}
+              {dataSpaceViewerState.currentActivity ===
+                DATA_SPACE_VIEWER_ACTIVITY_MODE.DOCUMENTATION && (
+                <DataSpaceDocumentation
                   dataSpaceViewerState={dataSpaceViewerState}
                 />
               )}
@@ -642,6 +1079,12 @@ export const DataSpaceViewer = observer(
                   dataSpaceViewerState={dataSpaceViewerState}
                 />
               )}
+              {dataSpaceViewerState.currentActivity ===
+                DATA_SPACE_VIEWER_ACTIVITY_MODE.USAGE_SHOWCASE && (
+                <DataSpaceUsageShowcasesPanel
+                  dataSpaceViewerState={dataSpaceViewerState}
+                />
+              )}
               {dataSpaceViewerState.currentActivity ===
                 DATA_SPACE_VIEWER_ACTIVITY_MODE.ENTITLEMENT &&
                 renderDataSpaceCheckEntitlementsEditor(