@finos/legend-extension-dsl-data-space 10.4.256 → 10.4.258

package/src/stores/DataSpaceLayoutState.ts

@@ -15,15 +15,16 @@
  */
 
 import { NAVIGATION_ZONE_SEPARATOR } from '@finos/legend-application';
-import { action, computed, makeObservable, observable } from 'mobx';
+import { makeObservable, override } from 'mobx';
 import { type DataSpaceViewerState } from './DataSpaceViewerState.js';
-import { at, guaranteeNonNullable, isNonNullable } from '@finos/legend-shared';
+import { at, guaranteeNonNullable } from '@finos/legend-shared';
 import {
   DATA_SPACE_VIEWER_ACTIVITY_MODE,
   extractActivityFromAnchor,
   generateAnchorForActivity,
   generateAnchorForDiagram,
 } from './DataSpaceViewerNavigation.js';
+import { BaseLayoutState } from '@finos/legend-extension-dsl-data-product';
 
 export const DATA_SPACE_WIKI_PAGE_SECTIONS = [
   DATA_SPACE_VIEWER_ACTIVITY_MODE.DESCRIPTION,
@@ -37,234 +38,49 @@ const DATA_SPACE_WIKI_PAGE_ANCHORS = DATA_SPACE_WIKI_PAGE_SECTIONS.map(
   (activity) => generateAnchorForActivity(activity),
 );
 
-type DataSpacePageNavigationCommand = {
-  anchor: string;
-};
-
-export class CollapseState {
-  private readonly collapsedKeys = new Set<string>();
+export class DataSpaceLayoutState extends BaseLayoutState {
+  private dataSpaceViewerState!: DataSpaceViewerState;
 
   constructor() {
-    makeObservable<CollapseState, 'collapsedKeys'>(this, {
-      collapsedKeys: observable,
-      toggleSectionCollapse: action,
-      toggleAllSectionsCollapse: action,
+    super();
+    makeObservable(this, {
+      isWikiPageFullyRendered: override,
     });
   }
 
-  isSectionCollapsed(key: string): boolean {
-    return this.collapsedKeys.has(key);
+  setViewerState(dataSpaceViewerState: DataSpaceViewerState): void {
+    this.dataSpaceViewerState = dataSpaceViewerState;
   }
 
-  toggleSectionCollapse(key: string): void {
-    if (this.collapsedKeys.has(key)) {
-      this.collapsedKeys.delete(key);
-    } else {
-      this.collapsedKeys.add(key);
-    }
+  protected getValidAnchors(): string[] {
+    return DATA_SPACE_WIKI_PAGE_ANCHORS;
   }
 
-  areAllSectionsCollapsed(keys: string[]): boolean {
-    return keys.length > 0 && keys.every((key) => this.collapsedKeys.has(key));
+  protected get expectedGridCount(): number {
+    return 0;
   }
 
-  toggleAllSectionsCollapse(keys: string[]): void {
-    const shouldCollapse = !this.areAllSectionsCollapsed(keys);
-    keys.forEach((key) => {
-      if (shouldCollapse) {
-        this.collapsedKeys.add(key);
-      } else {
-        this.collapsedKeys.delete(key);
-      }
-    });
-  }
-}
-
-export class DataSpaceLayoutState {
-  readonly dataSpaceViewerState: DataSpaceViewerState;
-
-  currentNavigationZone = '';
-  isExpandedModeEnabled = false;
-
-  frame?: HTMLElement | undefined;
-  header?: HTMLElement | undefined;
-  isTopScrollerVisible = false;
-
-  private wikiPageAnchorIndex = new Map<string, HTMLElement>();
-  wikiPageNavigationCommand?: DataSpacePageNavigationCommand | undefined;
-  private wikiPageVisibleAnchors: string[] = [];
-  private wikiPageScrollIntersectionObserver?: IntersectionObserver | undefined;
-
-  readonly sectionCollapseState = new CollapseState();
-
-  constructor(dataSpaceViewerState: DataSpaceViewerState) {
-    makeObservable<
-      DataSpaceLayoutState,
-      | 'wikiPageAnchorIndex'
-      | 'wikiPageVisibleAnchors'
-      | 'updatePageVisibleAnchors'
-    >(this, {
-      currentNavigationZone: observable,
-      isExpandedModeEnabled: observable,
-      isTopScrollerVisible: observable,
-      wikiPageAnchorIndex: observable,
-      wikiPageVisibleAnchors: observable,
-      frame: observable.ref,
-      wikiPageNavigationCommand: observable.ref,
-      isWikiPageFullyRendered: computed,
-      registerWikiPageScrollObserver: action,
-      setCurrentNavigationZone: action,
-      enableExpandedMode: action,
-      setFrame: action,
-      setTopScrollerVisible: action,
-      setWikiPageAnchor: action,
-      unsetWikiPageAnchor: action,
-      setWikiPageAnchorToNavigate: action,
-      updatePageVisibleAnchors: action,
-    });
-
-    this.dataSpaceViewerState = dataSpaceViewerState;
-  }
-
-  setCurrentNavigationZone(val: string): void {
-    this.currentNavigationZone = val;
-  }
-
-  get isWikiPageFullyRendered(): boolean {
+  override get isWikiPageFullyRendered(): boolean {
     return (
-      Boolean(this.frame) &&
+      super.isWikiPageFullyRendered &&
       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)
+      )
     );
   }
 
-  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 = at(this.wikiPageVisibleAnchors, 0);
-          this.dataSpaceViewerState.syncZoneWithNavigation(anchor);
-          const anchorChunks = anchor.split(NAVIGATION_ZONE_SEPARATOR);
-          const activity = anchorChunks[0];
-          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),
+  protected override onWikiPageVisibleAnchorsSettled(): void {
+    const anchor = at(this.wikiPageVisibleAnchors, 0);
+    this.dataSpaceViewerState.syncZoneWithNavigation(anchor);
+    const activity = anchor.split(NAVIGATION_ZONE_SEPARATOR)[0];
+    if (activity) {
+      this.dataSpaceViewerState.setCurrentActivity(
+        extractActivityFromAnchor(activity) as DATA_SPACE_VIEWER_ACTIVITY_MODE,
       );
-      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;
-  }
-
-  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);
-  }
-
-  setWikiPageAnchorToNavigate(
-    val: DataSpacePageNavigationCommand | undefined,
-  ): void {
-    this.wikiPageNavigationCommand = val;
-  }
-
-  navigateWikiPageAnchor(): void {
+  override navigateWikiPageAnchor(): void {
     if (
       this.frame &&
       this.wikiPageNavigationCommand &&

package/src/stores/DataSpaceViewerDiagramViewerState.ts

@@ -30,9 +30,9 @@ export class DataSpaceViewerDiagramViewerState
     super(
       dataSpaceViewerState.applicationStore,
       dataSpaceViewerState.dataSpaceAnalysisResult.diagrams,
+      dataSpaceViewerState.layoutState.sectionCollapseState,
       {
         queryClass: dataSpaceViewerState.queryClass,
-        collapseState: dataSpaceViewerState.layoutState.sectionCollapseState,
       },
     );
     this.dataSpaceViewerState = dataSpaceViewerState;