@finos/legend-extension-dsl-data-space 10.0.6 → 10.0.7

package/src/stores/DataSpaceViewerState.ts

@@ -30,6 +30,7 @@ import type {
   PackageableRuntime,
 } from '@finos/legend-graph';
 import {
+  getNonNullableEnry,
   getNullableEntry,
   getNullableFirstEntry,
   guaranteeNonNullable,
@@ -75,6 +76,8 @@ const generateAnchorChunk = (text: string): string =>
   );
 export const generateAnchorForActivity = (activity: string): string =>
   generateAnchorChunk(activity);
+export const extractActivityFromAnchor = (anchor: string): string =>
+  decodeURIComponent(anchor);
 export const generateAnchorForQuickStart = (
   quickStart: DataSpaceExecutableAnalysisResult,
 ): string =>
@@ -104,7 +107,6 @@ const DATA_SPACE_WIKI_PAGE_ANCHORS = DATA_SPACE_WIKI_PAGE_SECTIONS.map(
 
 type DataSpacePageNavigationCommand = {
   anchor: string;
-  useSmoothScroll?: boolean;
 };
 
 class DataSpaceLayoutState {
@@ -117,25 +119,35 @@ class DataSpaceLayoutState {
   header?: HTMLElement | undefined;
   isTopScrollerVisible = false;
 
-  wikiPageAnchorIndex = new Map<string, HTMLElement>();
-  wikiNavigationCommand?: DataSpacePageNavigationCommand | undefined;
+  private wikiPageAnchorIndex = new Map<string, HTMLElement>();
+  wikiPageNavigationCommand?: DataSpacePageNavigationCommand | undefined;
+  private wikiPageVisibleAnchors: string[] = [];
+  private wikiPageScrollIntersectionObserver?: IntersectionObserver | undefined;
 
   constructor(dataSpaceViewerState: DataSpaceViewerState) {
-    makeObservable(this, {
+    makeObservable<
+      DataSpaceLayoutState,
+      | 'wikiPageAnchorIndex'
+      | 'wikiPageVisibleAnchors'
+      | 'updatePageVisibleAnchors'
+    >(this, {
       currentNavigationZone: observable,
       isExpandedModeEnabled: observable,
       isTopScrollerVisible: observable,
       wikiPageAnchorIndex: observable,
+      wikiPageVisibleAnchors: observable,
       frame: observable.ref,
-      wikiNavigationCommand: observable.ref,
-      isAllWikiPageFullyRendered: computed,
+      wikiPageNavigationCommand: observable.ref,
+      isWikiPageFullyRendered: computed,
+      registerWikiPageScrollObserver: action,
       setCurrentNavigationZone: action,
       enableExpandedMode: action,
       setFrame: action,
       setTopScrollerVisible: action,
       setWikiPageAnchor: action,
       unsetWikiPageAnchor: action,
-      setWikiAnchorToNavigate: action,
+      setWikiPageAnchorToNavigate: action,
+      updatePageVisibleAnchors: action,
     });
 
     this.dataSpaceViewerState = dataSpaceViewerState;
@@ -145,8 +157,9 @@ class DataSpaceLayoutState {
     this.currentNavigationZone = val;
   }
 
-  get isAllWikiPageFullyRendered(): boolean {
+  get isWikiPageFullyRendered(): boolean {
     return (
+      Boolean(this.frame) &&
       DATA_SPACE_WIKI_PAGE_SECTIONS.includes(
         this.dataSpaceViewerState.currentActivity,
       ) &&
@@ -157,6 +170,98 @@ class DataSpaceLayoutState {
     );
   }
 
+  registerWikiPageScrollObserver(): void {
+    if (this.frame && this.isWikiPageFullyRendered) {
+      const wikiPageIntersectionObserver = new IntersectionObserver(
+        (entries, observer) => {
+          const anchorsWithVisibilityChanged = entries
+            .map((entry) => {
+              for (const [key, element] of this.wikiPageAnchorIndex.entries()) {
+                if (element === entry.target) {
+                  return { key, isIntersecting: entry.isIntersecting };
+                }
+              }
+              return undefined;
+            })
+            .filter(isNonNullable);
+          anchorsWithVisibilityChanged.forEach((entry) => {
+            this.updatePageVisibleAnchors(entry.key, entry.isIntersecting);
+          });
+          // NOTE: sync scroll with menu/address is quite a delicate piece of work
+          // as it interferes with programatic scroll operations we do elsewhere.
+          // This is particularly bad when we do a programatic `smooth` scroll, which
+          // mimic user scrolling behavior and would tangle up with this observer
+          // Since currently, there's no good mechanism to detect scroll end event, and as such,
+          // there is no good way to temporarily disable this logic while doing the programmatic
+          // smooth scroll as such, we avoid supporting programatic smooth scrolling for now
+          // See https://github.com/w3c/csswg-drafts/issues/3744
+          // See https://developer.mozilla.org/en-US/docs/Web/API/Document/scrollend_event
+          if (
+            // if current navigation zone is not set, do not update zone
+            this.currentNavigationZone === '' ||
+            // if there is no visible anchors, do not update zone
+            !this.wikiPageVisibleAnchors.length ||
+            // if some of the current visible anchors match or is parent section of the current
+            // navigation zone, do not update zone
+            this.wikiPageVisibleAnchors.some(
+              (visibleAnchor) =>
+                this.currentNavigationZone === visibleAnchor ||
+                this.currentNavigationZone.startsWith(
+                  `${visibleAnchor}${NAVIGATION_ZONE_SEPARATOR}`,
+                ),
+            )
+          ) {
+            return;
+          }
+          const anchor = getNonNullableEnry(this.wikiPageVisibleAnchors, 0);
+          this.dataSpaceViewerState.syncZoneWithNavigation(anchor);
+          const anchorChunks = anchor.split(NAVIGATION_ZONE_SEPARATOR);
+          const activity = getNullableFirstEntry(anchorChunks);
+          if (activity) {
+            this.dataSpaceViewerState.setCurrentActivity(
+              extractActivityFromAnchor(
+                activity,
+              ) as DATA_SPACE_VIEWER_ACTIVITY_MODE,
+            );
+          }
+        },
+        {
+          root: this.frame,
+          threshold: 0.5,
+        },
+      );
+      Array.from(this.wikiPageAnchorIndex.values()).forEach((el) =>
+        wikiPageIntersectionObserver.observe(el),
+      );
+      this.wikiPageScrollIntersectionObserver = wikiPageIntersectionObserver;
+    }
+  }
+
+  unregisterWikiPageScrollObserver(): void {
+    this.wikiPageScrollIntersectionObserver?.disconnect();
+    this.wikiPageScrollIntersectionObserver = undefined;
+    this.wikiPageVisibleAnchors = [];
+  }
+
+  private updatePageVisibleAnchors(
+    changedAnchor: string,
+    isIntersecting: boolean,
+  ): void {
+    if (isIntersecting) {
+      const anchors = this.wikiPageVisibleAnchors.filter(
+        (anchor) => changedAnchor !== anchor,
+      );
+      // NOTE: the newly visible anchors should be the furthest one in
+      // the direction of scroll
+      anchors.push(changedAnchor);
+      this.wikiPageVisibleAnchors = anchors;
+    } else {
+      this.wikiPageVisibleAnchors = this.wikiPageVisibleAnchors.filter(
+        (anchor) => changedAnchor !== anchor,
+      );
+    }
+  }
+
   enableExpandedMode(val: boolean): void {
     this.isExpandedModeEnabled = val;
   }
@@ -180,32 +285,39 @@ class DataSpaceLayoutState {
     this.wikiPageAnchorIndex.delete(anchorKey);
   }
 
-  setWikiAnchorToNavigate(
+  setWikiPageAnchorToNavigate(
     val: DataSpacePageNavigationCommand | undefined,
   ): void {
-    this.wikiNavigationCommand = val;
+    this.wikiPageNavigationCommand = val;
   }
 
-  navigateWikiAnchor(): void {
-    if (this.wikiNavigationCommand && this.isAllWikiPageFullyRendered) {
-      const anchor = this.wikiNavigationCommand.anchor;
+  navigateWikiPageAnchor(): void {
+    if (
+      this.frame &&
+      this.wikiPageNavigationCommand &&
+      this.isWikiPageFullyRendered
+    ) {
+      const anchor = this.wikiPageNavigationCommand.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',
-        });
+        this.frame.scrollTop =
+          matchingWikiPageSection.offsetTop -
+          (this.header?.getBoundingClientRect().height ?? 0);
       } else if (
         getNullableFirstEntry(anchorChunks) ===
         generateAnchorForActivity(
           DATA_SPACE_VIEWER_ACTIVITY_MODE.DIAGRAM_VIEWER,
         )
       ) {
+        this.frame.scrollTop =
+          guaranteeNonNullable(
+            this.wikiPageAnchorIndex.get(
+              generateAnchorForActivity(
+                DATA_SPACE_VIEWER_ACTIVITY_MODE.DIAGRAM_VIEWER,
+              ),
+            ),
+          ).offsetTop - (this.header?.getBoundingClientRect().height ?? 0);
         const matchingDiagram =
           this.dataSpaceViewerState.dataSpaceAnalysisResult.diagrams.find(
             (diagram) => generateAnchorForDiagram(diagram) === anchor,
@@ -215,7 +327,7 @@ class DataSpaceLayoutState {
         }
       }
 
-      this.setWikiAnchorToNavigate(undefined);
+      this.setWikiPageAnchorToNavigate(undefined);
     }
   }
 }
@@ -426,13 +538,8 @@ export class DataSpaceViewerState {
       );
       if (activityChunk && matchingActivity) {
         if (DATA_SPACE_WIKI_PAGE_SECTIONS.includes(matchingActivity)) {
-          this.layoutState.setWikiAnchorToNavigate({
+          this.layoutState.setWikiPageAnchorToNavigate({
             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);