@finos/legend-extension-dsl-data-space 10.0.2 → 10.0.4

package/src/stores/DataSpaceViewerState.ts

@@ -14,9 +14,10 @@
  * limitations under the License.
  */
 
-import type {
-  GenericLegendApplicationStore,
-  NavigationZone,
+import {
+  NAVIGATION_ZONE_SEPARATOR,
+  type GenericLegendApplicationStore,
+  type NavigationZone,
 } from '@finos/legend-application';
 import { type ClassView } from '@finos/legend-extension-dsl-diagram/graph';
 import {
@@ -29,13 +30,16 @@ import type {
   PackageableRuntime,
 } from '@finos/legend-graph';
 import {
-  getNullableFirstElement,
+  getNullableEntry,
+  getNullableFirstEntry,
   guaranteeNonNullable,
+  isNonNullable,
 } from '@finos/legend-shared';
 import { action, computed, makeObservable, observable } from 'mobx';
 import type {
   DataSpaceAnalysisResult,
   DataSpaceDiagramAnalysisResult,
+  DataSpaceExecutableAnalysisResult,
   DataSpaceExecutionContextAnalysisResult,
 } from '../graph-manager/action/analytics/DataSpaceAnalysis.js';
 import {
@@ -47,38 +51,173 @@ import { DataSpaceViewerModelsDocumentationState } from './DataSpaceModelsDocume
 
 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',
+  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',
 }
 
+const generateAnchorChunk = (text: string): string =>
+  encodeURIComponent(
+    text
+      .trim()
+      .toLowerCase() // anchor is case-insensitive
+      .replace(/\s+/gu, '-'), // spaces will be replaced by hyphens
+  );
+export const generateAnchorForActivity = (activity: string): string =>
+  generateAnchorChunk(activity);
+export const generateAnchorForQuickStart = (
+  quickStart: DataSpaceExecutableAnalysisResult,
+): string =>
+  [
+    DATA_SPACE_VIEWER_ACTIVITY_MODE.QUICK_START,
+    generateAnchorChunk(quickStart.title),
+  ].join(NAVIGATION_ZONE_SEPARATOR);
+export const generateAnchorForDiagram = (
+  diagram: DataSpaceDiagramAnalysisResult,
+): string =>
+  [
+    DATA_SPACE_VIEWER_ACTIVITY_MODE.DIAGRAM_VIEWER,
+    generateAnchorChunk(diagram.title),
+  ].join(NAVIGATION_ZONE_SEPARATOR);
+
+export const DATA_SPACE_WIKI_PAGE_SECTIONS = [
+  DATA_SPACE_VIEWER_ACTIVITY_MODE.DESCRIPTION,
+  DATA_SPACE_VIEWER_ACTIVITY_MODE.DIAGRAM_VIEWER,
+  DATA_SPACE_VIEWER_ACTIVITY_MODE.MODELS_DOCUMENTATION,
+  DATA_SPACE_VIEWER_ACTIVITY_MODE.QUICK_START,
+  DATA_SPACE_VIEWER_ACTIVITY_MODE.DATA_ACCESS,
+];
+
+const DATA_SPACE_WIKI_PAGE_ANCHORS = DATA_SPACE_WIKI_PAGE_SECTIONS.map(
+  (activity) => generateAnchorForActivity(activity),
+);
+
+type DataSpacePageNavigationCommand = {
+  anchor: string;
+  useSmoothScroll?: boolean;
+};
+
 class DataSpaceLayoutState {
   readonly dataSpaceViewerState: DataSpaceViewerState;
 
+  currentNavigationZone = '';
   isExpandedModeEnabled = false;
 
+  frame?: HTMLElement | undefined;
+  header?: HTMLElement | undefined;
+  isTopScrollerVisible = false;
+
+  wikiPageAnchorIndex = new Map<string, HTMLElement>();
+  wikiNavigationCommand?: DataSpacePageNavigationCommand | undefined;
+
   constructor(dataSpaceViewerState: DataSpaceViewerState) {
     makeObservable(this, {
+      currentNavigationZone: observable,
       isExpandedModeEnabled: observable,
+      isTopScrollerVisible: observable,
+      wikiPageAnchorIndex: observable,
+      frame: observable.ref,
+      wikiNavigationCommand: observable.ref,
+      isAllWikiPageFullyRendered: computed,
+      setCurrentNavigationZone: action,
       enableExpandedMode: action,
+      setFrame: action,
+      setTopScrollerVisible: action,
+      setWikiPageAnchor: action,
+      unsetWikiPageAnchor: action,
+      setWikiAnchorToNavigate: action,
     });
 
     this.dataSpaceViewerState = dataSpaceViewerState;
   }
 
+  setCurrentNavigationZone(val: string): void {
+    this.currentNavigationZone = val;
+  }
+
+  get isAllWikiPageFullyRendered(): boolean {
+    return (
+      DATA_SPACE_WIKI_PAGE_SECTIONS.includes(
+        this.dataSpaceViewerState.currentActivity,
+      ) &&
+      DATA_SPACE_WIKI_PAGE_ANCHORS.every((anchor) =>
+        this.wikiPageAnchorIndex.has(anchor),
+      ) &&
+      Array.from(this.wikiPageAnchorIndex.values()).every(isNonNullable)
+    );
+  }
+
   enableExpandedMode(val: boolean): void {
     this.isExpandedModeEnabled = val;
   }
+
+  setFrame(val: HTMLElement | undefined): void {
+    this.frame = val;
+  }
+
+  setTopScrollerVisible(val: boolean): void {
+    this.isTopScrollerVisible = val;
+  }
+
+  setWikiPageAnchor(anchorKey: string, element: HTMLElement): void {
+    // do not allow overriding existing anchor
+    if (!this.wikiPageAnchorIndex.has(anchorKey)) {
+      this.wikiPageAnchorIndex.set(anchorKey, element);
+    }
+  }
+
+  unsetWikiPageAnchor(anchorKey: string): void {
+    this.wikiPageAnchorIndex.delete(anchorKey);
+  }
+
+  setWikiAnchorToNavigate(
+    val: DataSpacePageNavigationCommand | undefined,
+  ): void {
+    this.wikiNavigationCommand = val;
+  }
+
+  navigateWikiAnchor(): void {
+    if (this.wikiNavigationCommand && this.isAllWikiPageFullyRendered) {
+      const anchor = this.wikiNavigationCommand.anchor;
+      const matchingWikiPageSection = this.wikiPageAnchorIndex.get(anchor);
+      const anchorChunks = anchor.split(NAVIGATION_ZONE_SEPARATOR);
+      if (matchingWikiPageSection) {
+        this.frame?.scrollTo({
+          top:
+            matchingWikiPageSection.offsetTop -
+            (this.header?.getBoundingClientRect().height ?? 0),
+          behavior: this.wikiNavigationCommand.useSmoothScroll
+            ? 'smooth'
+            : 'auto',
+        });
+      } else if (
+        getNullableFirstEntry(anchorChunks) ===
+        generateAnchorForActivity(
+          DATA_SPACE_VIEWER_ACTIVITY_MODE.DIAGRAM_VIEWER,
+        )
+      ) {
+        const matchingDiagram =
+          this.dataSpaceViewerState.dataSpaceAnalysisResult.diagrams.find(
+            (diagram) => generateAnchorForDiagram(diagram) === anchor,
+          );
+        if (matchingDiagram) {
+          this.dataSpaceViewerState.setCurrentDiagram(matchingDiagram);
+        }
+      }
+
+      this.setWikiAnchorToNavigate(undefined);
+    }
+  }
 }
 
 export class DataSpaceViewerState {
@@ -107,12 +246,15 @@ export class DataSpaceViewerState {
     | ((zone: NavigationZone | undefined) => void)
     | undefined;
 
-  readonly dataAccessState: DataSpaceViewerDataAccessState;
   readonly modelsDocumentationState: DataSpaceViewerModelsDocumentationState;
 
+  // TODO: change this so it holds the data access state for each execution context
+  readonly dataAccessState: DataSpaceViewerDataAccessState;
+  // TODO: have a state similar to dataAccessState for each executables
+
   _renderer?: DiagramRenderer | undefined;
-  currentDiagram?: DataSpaceDiagramAnalysisResult | undefined;
   currentActivity = DATA_SPACE_VIEWER_ACTIVITY_MODE.DESCRIPTION;
+  currentDiagram?: DataSpaceDiagramAnalysisResult | undefined;
   currentExecutionContext: DataSpaceExecutionContextAnalysisResult;
   currentRuntime: PackageableRuntime;
 
@@ -171,7 +313,7 @@ export class DataSpaceViewerState {
     this.currentExecutionContext =
       dataSpaceAnalysisResult.defaultExecutionContext;
     this.currentRuntime = this.currentExecutionContext.defaultRuntime;
-    this.currentDiagram = getNullableFirstElement(
+    this.currentDiagram = getNullableFirstEntry(
       this.dataSpaceAnalysisResult.diagrams,
     );
     this.retriveGraphData = actions.retriveGraphData;
@@ -265,62 +407,40 @@ export class DataSpaceViewerState {
     ): void => this.onDiagramClassDoubleClick(classView);
   }
 
-  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
+  syncZoneWithNavigation(zone: NavigationZone): void {
+    this.layoutState.setCurrentNavigationZone(zone);
+    this.onZoneChange?.(zone);
+  }
+
+  changeZone(zone: NavigationZone, force = false): void {
+    if (force) {
+      this.layoutState.setCurrentNavigationZone('');
+    }
+    if (zone !== this.layoutState.currentNavigationZone) {
+      const zoneChunks = zone.split(NAVIGATION_ZONE_SEPARATOR);
+      const activityChunk = getNullableEntry(zoneChunks, 0);
+      const matchingActivity = Object.values(
+        DATA_SPACE_VIEWER_ACTIVITY_MODE,
+      ).find(
+        (activity) => generateAnchorForActivity(activity) === activityChunk,
+      );
+      if (activityChunk && matchingActivity) {
+        if (DATA_SPACE_WIKI_PAGE_SECTIONS.includes(matchingActivity)) {
+          this.layoutState.setWikiAnchorToNavigate({
+            anchor: zone,
+            // NOTE: if we are already on the wiki page, use smooth scroll to suggest the scrollability of the page
+            // if we are navigating from a different section, go directly to the section within the page to avoid the wait
+            useSmoothScroll: DATA_SPACE_WIKI_PAGE_SECTIONS.includes(
+              this.currentActivity,
+            ),
+          });
+        }
+        this.setCurrentActivity(matchingActivity);
+        this.onZoneChange?.(zone);
+        this.layoutState.setCurrentNavigationZone(zone);
+      } else {
         this.setCurrentActivity(DATA_SPACE_VIEWER_ACTIVITY_MODE.DESCRIPTION);
-        this.onZoneChange?.(undefined);
-        break;
+        this.layoutState.setCurrentNavigationZone('');
       }
     }
   }

package/src/stores/query/DataSpaceQueryBuilderState.ts

@@ -37,7 +37,7 @@ import {
   type GeneratorFn,
   ActionState,
   assertErrorThrown,
-  getNullableFirstElement,
+  getNullableFirstEntry,
 } from '@finos/legend-shared';
 import { action, flow, makeObservable, observable } from 'mobx';
 import { renderDataSpaceQueryBuilderSetupPanelContent } from '../../components/query/DataSpaceQueryBuilder.js';
@@ -228,7 +228,7 @@ export class DataSpaceQueryBuilderState extends QueryBuilderState {
     // if there is no chosen class or the chosen one is not compatible
     // with the mapping then pick a compatible class if possible
     if (!this.class || !compatibleClasses.includes(this.class)) {
-      const possibleNewClass = getNullableFirstElement(compatibleClasses);
+      const possibleNewClass = getNullableFirstEntry(compatibleClasses);
       if (possibleNewClass) {
         this.changeClass(possibleNewClass);
       }