@finos/legend-extension-dsl-data-space 9.2.0 → 9.2.1

package/src/components/DataSpaceDataAccess.tsx

@@ -15,14 +15,30 @@
  */
 
 import { observer } from 'mobx-react-lite';
-import { AnchorLinkIcon, QuestionCircleIcon } from '@finos/legend-art';
+import {
+  AnchorLinkIcon,
+  PanelLoadingIndicator,
+  QuestionCircleIcon,
+} from '@finos/legend-art';
 import { type DataSpaceViewerState } from '../stores/DataSpaceViewerState.js';
 import { useApplicationStore } from '@finos/legend-application';
 import { DataSpaceWikiPlaceholder } from './DataSpacePlaceholder.js';
+import { useEffect } from 'react';
+import { flowResult } from 'mobx';
+import { AgGridReact } from '@ag-grid-community/react';
+import { ClientSideRowModelModule } from '@ag-grid-community/client-side-row-model';
+import {
+  DatasetEntitlementAccessApprovedReport,
+  DatasetEntitlementAccessGrantedReport,
+  DatasetEntitlementAccessNotGrantedReport,
+  DatasetEntitlementAccessRequestedReport,
+  DatasetEntitlementUnsupportedReport,
+} from '@finos/legend-graph';
 
 export const DataSpaceDataAccess = observer(
   (props: { dataSpaceViewerState: DataSpaceViewerState }) => {
     const { dataSpaceViewerState } = props;
+    const dataAccessState = dataSpaceViewerState.dataAccessState;
     const applicationStore = useApplicationStore();
     const analysisResult = dataSpaceViewerState.dataSpaceAnalysisResult;
     const documentationUrl = analysisResult.supportInfo?.documentationUrl;
@@ -35,6 +51,19 @@ export const DataSpaceDataAccess = observer(
       }
     };
 
+    useEffect(() => {
+      flowResult(dataAccessState.fetchDatasetSpecifications()).catch(
+        applicationStore.alertUnhandledError,
+      );
+      flowResult(dataAccessState.fetchDatasetEntitlementReports()).catch(
+        applicationStore.alertUnhandledError,
+      );
+    }, [
+      applicationStore,
+      dataAccessState,
+      dataSpaceViewerState.currentExecutionContext,
+    ]);
+
     return (
       <div className="data-space__viewer__wiki__section">
         <div className="data-space__viewer__wiki__section__header">
@@ -56,8 +85,93 @@ export const DataSpaceDataAccess = observer(
           )}
         </div>
         <div className="data-space__viewer__wiki__section__content">
+          <PanelLoadingIndicator
+            isLoading={
+              dataAccessState.fetchDatasetSpecificationsState.isInProgress ||
+              dataAccessState.fetchDatasetEntitlementReportsState.isInProgress
+            }
+          />
           <div className="data-space__viewer__data-access">
-            <DataSpaceWikiPlaceholder message="View Data Access (Work in Progress)" />
+            {dataAccessState.datasets.length > 0 && (
+              <DataSpaceWikiPlaceholder message="View Data Access (Work in Progress)" />
+            )}
+            {dataAccessState.datasets.length === 0 && (
+              <>
+                <div className="data-space__viewer__data-access__chart"></div>
+                <div className="data-space__viewer__data-access__grid data-space__viewer__grid ag-theme-balham-dark">
+                  <AgGridReact
+                    rowData={dataAccessState.datasets}
+                    gridOptions={{
+                      suppressScrollOnNewData: true,
+                      getRowId: (rowData) => rowData.data.uuid,
+                    }}
+                    modules={[ClientSideRowModelModule]}
+                    suppressFieldDotNotation={true}
+                    columnDefs={[
+                      {
+                        minWidth: 50,
+                        sortable: true,
+                        resizable: true,
+                        valueGetter: (params) =>
+                          params.data?.specification.name,
+                        headerName: 'Dataset',
+                        flex: 1,
+                      },
+                      {
+                        minWidth: 50,
+                        sortable: true,
+                        resizable: true,
+                        valueGetter: (params) =>
+                          params.data?.specification.type,
+                        headerName: 'Type',
+                        flex: 1,
+                      },
+                      {
+                        minWidth: 50,
+                        sortable: true,
+                        resizable: true,
+                        headerName: 'Access Status',
+                        valueGetter: (params) => {
+                          const entitlementReport =
+                            params.data?.entitlementReport;
+                          if (
+                            entitlementReport instanceof
+                            DatasetEntitlementAccessGrantedReport
+                          ) {
+                            return 'Access Granted';
+                          } else if (
+                            entitlementReport instanceof
+                            DatasetEntitlementAccessApprovedReport
+                          ) {
+                            return 'Access Approved';
+                          } else if (
+                            entitlementReport instanceof
+                            DatasetEntitlementAccessRequestedReport
+                          ) {
+                            return 'Access Requested';
+                          } else if (
+                            entitlementReport instanceof
+                            DatasetEntitlementAccessNotGrantedReport
+                          ) {
+                            return '(x) Access Not Granted';
+                          } else if (
+                            entitlementReport instanceof
+                            DatasetEntitlementUnsupportedReport
+                          ) {
+                            return '(unsupported)';
+                          }
+                          return '';
+                        },
+                        flex: 1,
+                        wrapText: true,
+                        autoHeight: true,
+                      },
+                    ]}
+                  />
+                </div>
+                <DataSpaceWikiPlaceholder message="No documentation provided" />
+              </>
+            )}
           </div>
         </div>
       </div>

package/src/components/DataSpaceDescription.tsx

@@ -19,14 +19,20 @@ import type { DataSpaceViewerState } from '../stores/DataSpaceViewerState.js';
 import { observer } from 'mobx-react-lite';
 import { DataSpaceWikiPlaceholder } from './DataSpacePlaceholder.js';
 import { DataSpaceMarkdownTextViewer } from './DataSpaceMarkdownTextViewer.js';
+import { useEffect, useRef } from 'react';
 
 export const DataSpaceDescription = observer(
   (props: { dataSpaceViewerState: DataSpaceViewerState }) => {
     const { dataSpaceViewerState } = props;
     const analysisResult = dataSpaceViewerState.dataSpaceAnalysisResult;
+    const sectionRef = useRef<HTMLDivElement>(null);
+
+    useEffect(() => {
+      // do
+    }, [dataSpaceViewerState]);
 
     return (
-      <div className="data-space__viewer__wiki__section">
+      <div ref={sectionRef} className="data-space__viewer__wiki__section">
         <div className="data-space__viewer__wiki__section__header">
           <div className="data-space__viewer__wiki__section__header__label">
             Description

package/src/components/DataSpaceDiagramViewer.tsx

@@ -55,14 +55,14 @@ const DataSpaceDiagramCanvas = observer(
 
     useEffect(() => {
       const renderer = new DiagramRenderer(diagramCanvasRef.current, diagram);
-      dataSpaceViewerState.setRenderer(renderer);
-      dataSpaceViewerState.setupRenderer();
+      dataSpaceViewerState.setDiagramRenderer(renderer);
+      dataSpaceViewerState.setupDiagramRenderer();
       renderer.render({ initial: true });
     }, [diagramCanvasRef, dataSpaceViewerState, diagram]);
 
     useEffect(() => {
       if (dataSpaceViewerState.isDiagramRendererInitialized) {
-        dataSpaceViewerState.renderer.refresh();
+        dataSpaceViewerState.diagramRenderer.refresh();
       }
     }, [dataSpaceViewerState, width, height]);
 

package/src/components/DataSpaceViewer.tsx

@@ -44,7 +44,7 @@ const DataSpaceHeader = observer(
         <div
           className={clsx('data-space__viewer__header__content', {
             'data-space__viewer__header__content--expanded':
-              dataSpaceViewerState.isExpandedModeEnabled,
+              dataSpaceViewerState.layoutState.isExpandedModeEnabled,
           })}
         >
           <div
@@ -115,7 +115,7 @@ export const DataSpaceViewer = observer(
             className={clsx('data-space__viewer__frame', {
               'data-space__viewer__frame--boundless': isShowingWiki,
               'data-space__viewer__frame--expanded':
-                dataSpaceViewerState.isExpandedModeEnabled,
+                dataSpaceViewerState.layoutState.isExpandedModeEnabled,
             })}
           >
             <div className="data-space__viewer__content">

package/src/components/DataSpaceViewerActivityBar.tsx

@@ -43,12 +43,11 @@ import {
 const ActivityBarMenu = observer(
   (props: { dataSpaceViewerState: DataSpaceViewerState }) => {
     const { dataSpaceViewerState } = props;
+    const layoutState = dataSpaceViewerState.layoutState;
 
     // actions
     const toggleExpandedMode = (): void =>
-      dataSpaceViewerState.enableExpandedMode(
-        !dataSpaceViewerState.isExpandedModeEnabled,
-      );
+      layoutState.enableExpandedMode(!layoutState.isExpandedModeEnabled);
 
     return (
       <>
@@ -63,7 +62,7 @@ const ActivityBarMenu = observer(
             content={
               <MenuContent>
                 <MenuContentItem onClick={toggleExpandedMode}>
-                  {dataSpaceViewerState.isExpandedModeEnabled
+                  {layoutState.isExpandedModeEnabled
                     ? 'Disable Expanded Mode'
                     : 'Enable Expanded Mode'}{' '}
                 </MenuContentItem>
@@ -89,8 +88,10 @@ export const DataSpaceViewerActivityBar = observer(
     const { dataSpaceViewerState } = props;
     const changeActivity =
       (activity: DATA_SPACE_VIEWER_ACTIVITY_MODE): (() => void) =>
-      (): void =>
+      (): void => {
         dataSpaceViewerState.setCurrentActivity(activity);
+        dataSpaceViewerState.onZoneChange?.(activity);
+      };
 
     const wikiActivities: DataSpaceViewerActivityConfig[] = [
       {

package/src/components/DataSpaceWiki.tsx

@@ -26,6 +26,8 @@ export const DataSpaceWiki = observer(
   (props: { dataSpaceViewerState: DataSpaceViewerState }) => {
     const { dataSpaceViewerState } = props;
 
+    // const a = new IntersectionObserver(() => {});
+
     return (
       <div className="data-space__viewer__wiki">
         <DataSpaceDescription dataSpaceViewerState={dataSpaceViewerState} />

package/src/components/query/DataSpaceQueryCreator.tsx

@@ -80,7 +80,7 @@ export const DataSpaceQueryCreator = observer(() => {
   const runtimePath =
     parameters[DATA_SPACE_QUERY_CREATOR_ROUTE_PATTERN_TOKEN.RUNTIME_PATH];
   const classPath =
-    applicationStore.navigationService.navigator.getAddressParameterValue(
+    applicationStore.navigationService.navigator.getCurrentLocationParameterValue(
       DATA_SPACE_QUERY_CREATOR_QUERY_PARAM_TOKEN.CLASS_PATH,
     );
 

package/src/stores/DataSpaceViewerDataAccessState.ts

@@ -0,0 +1,146 @@
+/**
+ * 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 {
+  type GeneratorFn,
+  ActionState,
+  assertErrorThrown,
+  uuid,
+} from '@finos/legend-shared';
+import { action, flow, makeObservable, observable } from 'mobx';
+import type { DataSpaceViewerState } from './DataSpaceViewerState.js';
+import type {
+  DatasetSpecification,
+  DatasetEntitlementReport,
+} from '@finos/legend-graph';
+
+export class DataSpaceDatasetInfo {
+  readonly uuid = uuid();
+  readonly specification!: DatasetSpecification;
+
+  entitlementReport?: DatasetEntitlementReport | undefined;
+
+  constructor(specification: DatasetSpecification) {
+    makeObservable(this, {
+      entitlementReport: observable,
+      setEntitlementReport: action,
+    });
+
+    this.specification = specification;
+  }
+
+  setEntitlementReport(val: DatasetEntitlementReport | undefined): void {
+    this.entitlementReport = val;
+  }
+}
+
+export class DataSpaceViewerDataAccessState {
+  readonly dataSpaceViewerState: DataSpaceViewerState;
+
+  readonly fetchDatasetSpecificationsState = ActionState.create();
+  readonly fetchDatasetEntitlementReportsState = ActionState.create();
+
+  datasets: DataSpaceDatasetInfo[] = [];
+
+  constructor(dataSpaceViewerState: DataSpaceViewerState) {
+    makeObservable(this, {
+      datasets: observable,
+      fetchDatasetSpecifications: flow,
+      fetchDatasetEntitlementReports: flow,
+    });
+
+    this.dataSpaceViewerState = dataSpaceViewerState;
+  }
+
+  *fetchDatasetSpecifications(): GeneratorFn<void> {
+    this.fetchDatasetSpecificationsState.inProgress();
+
+    try {
+      const datasets =
+        (yield this.dataSpaceViewerState.graphManagerState.graphManager.surveyDatasets(
+          this.dataSpaceViewerState.currentExecutionContext.mapping,
+          this.dataSpaceViewerState.currentExecutionContext.defaultRuntime,
+          undefined,
+          this.dataSpaceViewerState.retriveGraphData(),
+        )) as DatasetSpecification[];
+      this.datasets = datasets.map((dataset) => {
+        const existingDataset = this.datasets.find(
+          (ds) => ds.specification.hashCode === dataset.hashCode,
+        );
+        if (existingDataset) {
+          return existingDataset;
+        }
+        return new DataSpaceDatasetInfo(dataset);
+      });
+    } catch (error) {
+      assertErrorThrown(error);
+      this.dataSpaceViewerState.applicationStore.notificationService.notifyError(
+        error,
+      );
+    } finally {
+      this.fetchDatasetSpecificationsState.complete();
+    }
+  }
+
+  *fetchDatasetEntitlementReports(): GeneratorFn<void> {
+    this.fetchDatasetEntitlementReportsState.inProgress();
+
+    try {
+      const reports =
+        (yield this.dataSpaceViewerState.graphManagerState.graphManager.checkEntitlements(
+          this.dataSpaceViewerState.currentExecutionContext.mapping,
+          this.dataSpaceViewerState.currentExecutionContext.defaultRuntime,
+          undefined,
+          this.dataSpaceViewerState.retriveGraphData(),
+        )) as DatasetEntitlementReport[];
+      this.datasets.forEach((dataset) => {
+        const matchingReport = reports.find(
+          (report) =>
+            report.storeSpecification.hashCode ===
+            dataset.specification.hashCode,
+        );
+        if (matchingReport) {
+          dataset.setEntitlementReport(matchingReport);
+          return;
+        }
+        dataset.setEntitlementReport(undefined);
+      });
+      const newDatasets: DataSpaceDatasetInfo[] = [];
+      reports.forEach((report) => {
+        const matchingDataset = this.datasets.find(
+          (dataset) =>
+            dataset.specification.hashCode ===
+            report.storeSpecification.hashCode,
+        );
+        if (!matchingDataset) {
+          const newDataset = new DataSpaceDatasetInfo(
+            report.storeSpecification,
+          );
+          newDataset.setEntitlementReport(report);
+          newDatasets.push(newDataset);
+        }
+      });
+      this.datasets = this.datasets.concat(newDatasets);
+    } catch (error) {
+      assertErrorThrown(error);
+      this.dataSpaceViewerState.applicationStore.notificationService.notifyError(
+        error,
+      );
+    } finally {
+      this.fetchDatasetEntitlementReportsState.complete();
+    }
+  }
+}

package/src/stores/DataSpaceViewerState.ts

@@ -14,7 +14,10 @@
  * limitations under the License.
  */
 
-import type { GenericLegendApplicationStore } from '@finos/legend-application';
+import type {
+  GenericLegendApplicationStore,
+  NavigationZone,
+} from '@finos/legend-application';
 import {
   type ClassView,
   type DiagramRenderer,
@@ -22,6 +25,7 @@ import {
 } from '@finos/legend-extension-dsl-diagram';
 import type {
   BasicGraphManagerState,
+  GraphData,
   PackageableRuntime,
 } from '@finos/legend-graph';
 import {
@@ -38,32 +42,54 @@ import {
   PURE_DATA_SPACE_INFO_PROFILE_PATH,
   PURE_DATA_SPACE_INFO_PROFILE_VERIFIED_STEREOTYPE,
 } from '../graphManager/DSL_DataSpace_PureGraphManagerPlugin.js';
+import { DataSpaceViewerDataAccessState } from './DataSpaceViewerDataAccessState.js';
 
 export enum DATA_SPACE_VIEWER_ACTIVITY_MODE {
-  DESCRIPTION = 'DESCRIPTION',
-  DIAGRAM_VIEWER = 'DIAGRAM_VIEWER',
-  MODELS_DOCUMENTATION = 'MODELS_DOCUMENTATION',
-  QUICK_START = 'QUICK_START',
-  EXECUTION_CONTEXT = 'EXECUTION_CONTEXT',
-  DATA_ACCESS = 'DATA_ACCESS',
-
-  DATA_STORES = 'DATA_STORES', // TODO: with test-data, also let user call TDS query on top of these
-  DATA_AVAILABILITY = 'DATA_AVAILABILITY',
-  DATA_READINESS = 'DATA_READINESS',
-  DATA_COST = 'DATA_COST',
-  DATA_GOVERNANCE = 'DATA_GOVERNANCE',
-  INFO = 'INFO', // TODO: test coverage? (or maybe this should be done in elements/diagrams/data-quality section)
-  SUPPORT = 'SUPPORT',
+  DESCRIPTION = 'description',
+  DIAGRAM_VIEWER = 'diagram_viewer',
+  MODELS_DOCUMENTATION = 'models_documentation',
+  QUICK_START = 'quick_start',
+  EXECUTION_CONTEXT = 'execution_context',
+  DATA_ACCESS = 'data_access',
+
+  DATA_STORES = 'data_stores', // TODO: with test-data, also let user call TDS query on top of these
+  DATA_AVAILABILITY = 'data_availability',
+  DATA_READINESS = 'data_readiness',
+  DATA_COST = 'data_cost',
+  DATA_GOVERNANCE = 'data_governance',
+  INFO = 'info', // TODO: test coverage? (or maybe this should be done in elements/diagrams/data-quality section)
+  SUPPORT = 'support',
+}
+
+class DataSpaceLayoutState {
+  readonly dataSpaceViewerState: DataSpaceViewerState;
+
+  isExpandedModeEnabled = false;
+
+  constructor(dataSpaceViewerState: DataSpaceViewerState) {
+    makeObservable(this, {
+      isExpandedModeEnabled: observable,
+      enableExpandedMode: action,
+    });
+
+    this.dataSpaceViewerState = dataSpaceViewerState;
+  }
+
+  enableExpandedMode(val: boolean): void {
+    this.isExpandedModeEnabled = val;
+  }
 }
 
 export class DataSpaceViewerState {
   readonly applicationStore: GenericLegendApplicationStore;
   readonly graphManagerState: BasicGraphManagerState;
+  readonly layoutState: DataSpaceLayoutState;
 
+  readonly dataSpaceAnalysisResult: DataSpaceAnalysisResult;
   readonly groupId: string;
   readonly artifactId: string;
   readonly versionId: string;
-  readonly dataSpaceAnalysisResult: DataSpaceAnalysisResult;
+  readonly retriveGraphData: () => GraphData;
   readonly viewProject: (
     groupId: string,
     artifactId: string,
@@ -76,6 +102,11 @@ export class DataSpaceViewerState {
     entityPath: string | undefined,
   ) => Promise<void>;
   readonly onDiagramClassDoubleClick: (classView: ClassView) => void;
+  readonly onZoneChange?:
+    | ((zone: NavigationZone | undefined) => void)
+    | undefined;
+
+  readonly dataAccessState: DataSpaceViewerDataAccessState;
 
   _renderer?: DiagramRenderer | undefined;
   currentDiagram?: DataSpaceDiagramAnalysisResult | undefined;
@@ -83,8 +114,6 @@ export class DataSpaceViewerState {
   currentExecutionContext: DataSpaceExecutionContextAnalysisResult;
   currentRuntime: PackageableRuntime;
 
-  isExpandedModeEnabled = false;
-
   constructor(
     applicationStore: GenericLegendApplicationStore,
     graphManagerState: BasicGraphManagerState,
@@ -93,6 +122,7 @@ export class DataSpaceViewerState {
     versionId: string,
     dataSpaceAnalysisResult: DataSpaceAnalysisResult,
     actions: {
+      retriveGraphData: () => GraphData;
       viewProject: (
         groupId: string,
         artifactId: string,
@@ -105,6 +135,7 @@ export class DataSpaceViewerState {
         entityPath: string | undefined,
       ) => Promise<void>;
       onDiagramClassDoubleClick: (classView: ClassView) => void;
+      onZoneChange?: ((zone: NavigationZone | undefined) => void) | undefined;
     },
   ) {
     makeObservable(this, {
@@ -113,19 +144,19 @@ export class DataSpaceViewerState {
       currentActivity: observable,
       currentExecutionContext: observable,
       currentRuntime: observable,
-      isExpandedModeEnabled: observable,
       isVerified: computed,
-      renderer: computed,
-      setRenderer: action,
+      diagramRenderer: computed,
+      setDiagramRenderer: action,
       setCurrentDiagram: action,
       setCurrentActivity: action,
       setCurrentExecutionContext: action,
       setCurrentRuntime: action,
-      enableExpandedMode: action,
     });
 
     this.applicationStore = applicationStore;
     this.graphManagerState = graphManagerState;
+    this.layoutState = new DataSpaceLayoutState(this);
+
     this.dataSpaceAnalysisResult = dataSpaceAnalysisResult;
     this.groupId = groupId;
     this.artifactId = artifactId;
@@ -136,12 +167,16 @@ export class DataSpaceViewerState {
     this.currentDiagram = getNullableFirstElement(
       this.dataSpaceAnalysisResult.diagrams,
     );
+    this.retriveGraphData = actions.retriveGraphData;
     this.viewProject = actions.viewProject;
     this.viewSDLCProject = actions.viewSDLCProject;
     this.onDiagramClassDoubleClick = actions.onDiagramClassDoubleClick;
+    this.onZoneChange = actions.onZoneChange;
+
+    this.dataAccessState = new DataSpaceViewerDataAccessState(this);
   }
 
-  get renderer(): DiagramRenderer {
+  get diagramRenderer(): DiagramRenderer {
     return guaranteeNonNullable(
       this._renderer,
       `Diagram renderer must be initialized (this is likely caused by calling this method at the wrong place)`,
@@ -160,12 +195,12 @@ export class DataSpaceViewerState {
     if (!this.isDiagramRendererInitialized) {
       return '';
     }
-    if (this.renderer.middleClick || this.renderer.rightClick) {
+    if (this.diagramRenderer.middleClick || this.diagramRenderer.rightClick) {
       return 'diagram-editor__cursor--grabbing';
     }
-    switch (this.renderer.interactionMode) {
+    switch (this.diagramRenderer.interactionMode) {
       case DIAGRAM_INTERACTION_MODE.LAYOUT: {
-        if (this.renderer.mouseOverClassView) {
+        if (this.diagramRenderer.mouseOverClassView) {
           return 'diagram-editor__cursor--pointer';
         }
         return '';
@@ -185,7 +220,7 @@ export class DataSpaceViewerState {
     );
   }
 
-  setRenderer(val: DiagramRenderer): void {
+  setDiagramRenderer(val: DiagramRenderer): void {
     this._renderer = val;
   }
 
@@ -208,14 +243,71 @@ export class DataSpaceViewerState {
     this.currentRuntime = val;
   }
 
-  setupRenderer(): void {
-    this.renderer.setIsReadOnly(true);
-    this.renderer.setEnableLayoutAutoAdjustment(true);
-    this.renderer.onClassViewDoubleClick = (classView: ClassView): void =>
-      this.onDiagramClassDoubleClick(classView);
+  setupDiagramRenderer(): void {
+    this.diagramRenderer.setIsReadOnly(true);
+    this.diagramRenderer.setEnableLayoutAutoAdjustment(true);
+    this.diagramRenderer.onClassViewDoubleClick = (
+      classView: ClassView,
+    ): void => this.onDiagramClassDoubleClick(classView);
   }
 
-  enableExpandedMode(val: boolean): void {
-    this.isExpandedModeEnabled = val;
+  changeZone(zone: NavigationZone): void {
+    switch (zone) {
+      case DATA_SPACE_VIEWER_ACTIVITY_MODE.DESCRIPTION:
+      case DATA_SPACE_VIEWER_ACTIVITY_MODE.DIAGRAM_VIEWER:
+      case DATA_SPACE_VIEWER_ACTIVITY_MODE.MODELS_DOCUMENTATION:
+      case DATA_SPACE_VIEWER_ACTIVITY_MODE.QUICK_START: {
+        this.setCurrentActivity(DATA_SPACE_VIEWER_ACTIVITY_MODE.DESCRIPTION);
+        break;
+      }
+      case DATA_SPACE_VIEWER_ACTIVITY_MODE.EXECUTION_CONTEXT: {
+        this.setCurrentActivity(
+          DATA_SPACE_VIEWER_ACTIVITY_MODE.EXECUTION_CONTEXT,
+        );
+        break;
+      }
+      case DATA_SPACE_VIEWER_ACTIVITY_MODE.DATA_ACCESS: {
+        this.setCurrentActivity(DATA_SPACE_VIEWER_ACTIVITY_MODE.DATA_ACCESS);
+        break;
+      }
+      case DATA_SPACE_VIEWER_ACTIVITY_MODE.DATA_STORES: {
+        this.setCurrentActivity(DATA_SPACE_VIEWER_ACTIVITY_MODE.DATA_STORES);
+        break;
+      }
+      case DATA_SPACE_VIEWER_ACTIVITY_MODE.DATA_AVAILABILITY: {
+        this.setCurrentActivity(
+          DATA_SPACE_VIEWER_ACTIVITY_MODE.DATA_AVAILABILITY,
+        );
+        break;
+      }
+      case DATA_SPACE_VIEWER_ACTIVITY_MODE.DATA_READINESS: {
+        this.setCurrentActivity(DATA_SPACE_VIEWER_ACTIVITY_MODE.DATA_READINESS);
+        break;
+      }
+      case DATA_SPACE_VIEWER_ACTIVITY_MODE.DATA_COST: {
+        this.setCurrentActivity(DATA_SPACE_VIEWER_ACTIVITY_MODE.DATA_COST);
+        break;
+      }
+      case DATA_SPACE_VIEWER_ACTIVITY_MODE.DATA_GOVERNANCE: {
+        this.setCurrentActivity(
+          DATA_SPACE_VIEWER_ACTIVITY_MODE.DATA_GOVERNANCE,
+        );
+        break;
+      }
+      case DATA_SPACE_VIEWER_ACTIVITY_MODE.INFO: {
+        this.setCurrentActivity(DATA_SPACE_VIEWER_ACTIVITY_MODE.INFO);
+        break;
+      }
+      case DATA_SPACE_VIEWER_ACTIVITY_MODE.SUPPORT: {
+        this.setCurrentActivity(DATA_SPACE_VIEWER_ACTIVITY_MODE.SUPPORT);
+        break;
+      }
+      default: {
+        // unknown
+        this.setCurrentActivity(DATA_SPACE_VIEWER_ACTIVITY_MODE.DESCRIPTION);
+        this.onZoneChange?.(undefined);
+        break;
+      }
+    }
   }
 }