@finos/legend-extension-dsl-data-space 10.0.11 → 10.0.12

package/src/components/DataSpaceViewerActivityBar.tsx

@@ -34,12 +34,14 @@ import {
   MenuIcon,
   DropdownMenu,
   DataReadyIcon,
+  SparkleIcon,
 } from '@finos/legend-art';
+import { type DataSpaceViewerState } from '../stores/DataSpaceViewerState.js';
+import { type ActivityBarItemConfig } from '@finos/legend-lego/application';
 import {
-  type DataSpaceViewerState,
   DATA_SPACE_VIEWER_ACTIVITY_MODE,
   generateAnchorForActivity,
-} from '../stores/DataSpaceViewerState.js';
+} from '../stores/DataSpaceViewerNavigation.js';
 
 const ActivityBarMenu = observer(
   (props: { dataSpaceViewerState: DataSpaceViewerState }) => {
@@ -78,17 +80,20 @@ const ActivityBarMenu = observer(
   },
 );
 
-interface DataSpaceViewerActivityConfig {
-  mode: DATA_SPACE_VIEWER_ACTIVITY_MODE;
-  title: string;
-  icon: React.ReactElement;
-}
+const DataSpaceViewerActivityBarItemExperimentalBadge: React.FC = () => (
+  <div
+    className="data-space__viewer__activity-bar__item__experimental-badge"
+    title="This is work in progess"
+  >
+    <SparkleIcon />
+  </div>
+);
 
 export const DataSpaceViewerActivityBar = observer(
   (props: { dataSpaceViewerState: DataSpaceViewerState }) => {
     const { dataSpaceViewerState } = props;
     const changeActivity =
-      (activity: DATA_SPACE_VIEWER_ACTIVITY_MODE): (() => void) =>
+      (activity: string): (() => void) =>
       (): void => {
         dataSpaceViewerState.changeZone(
           generateAnchorForActivity(activity),
@@ -96,7 +101,7 @@ export const DataSpaceViewerActivityBar = observer(
         );
       };
 
-    const wikiActivities: DataSpaceViewerActivityConfig[] = [
+    const wikiActivities: ActivityBarItemConfig[] = [
       {
         mode: DATA_SPACE_VIEWER_ACTIVITY_MODE.DESCRIPTION,
         title: 'Description',
@@ -130,7 +135,7 @@ export const DataSpaceViewerActivityBar = observer(
       },
     ];
 
-    const activities: DataSpaceViewerActivityConfig[] = [
+    const activities: ActivityBarItemConfig[] = [
       {
         mode: DATA_SPACE_VIEWER_ACTIVITY_MODE.EXECUTION_CONTEXT,
         title: 'Execution Context',
@@ -138,37 +143,52 @@ export const DataSpaceViewerActivityBar = observer(
       },
       {
         mode: DATA_SPACE_VIEWER_ACTIVITY_MODE.DATA_STORES,
-        title: 'Data Stores',
+        title: 'Data Stores (Work In Progress)',
         icon: (
-          <DatasetIcon className="data-space__viewer__activity-bar__icon--dataset" />
+          <>
+            <DatasetIcon className="data-space__viewer__activity-bar__icon--dataset" />
+            <DataSpaceViewerActivityBarItemExperimentalBadge />
+          </>
         ),
       },
       {
         mode: DATA_SPACE_VIEWER_ACTIVITY_MODE.DATA_AVAILABILITY,
-        title: 'Data Availability',
+        title: 'Data Availability (Work In Progress)',
         icon: (
-          <AvailabilityIcon className="data-space__viewer__activity-bar__icon--availability" />
+          <>
+            <AvailabilityIcon className="data-space__viewer__activity-bar__icon--availability" />
+            <DataSpaceViewerActivityBarItemExperimentalBadge />
+          </>
         ),
       },
       {
         mode: DATA_SPACE_VIEWER_ACTIVITY_MODE.DATA_READINESS,
-        title: 'Data Readiness',
+        title: 'Data Readiness (Work In Progress)',
         icon: (
-          <DataReadyIcon className="data-space__viewer__activity-bar__icon--readiness" />
+          <>
+            <DataReadyIcon className="data-space__viewer__activity-bar__icon--readiness" />
+            <DataSpaceViewerActivityBarItemExperimentalBadge />
+          </>
         ),
       },
       {
         mode: DATA_SPACE_VIEWER_ACTIVITY_MODE.DATA_COST,
-        title: 'Data Cost',
+        title: 'Data Cost (Work In Progress)',
         icon: (
-          <CostCircleIcon className="data-space__viewer__activity-bar__icon--cost" />
+          <>
+            <CostCircleIcon className="data-space__viewer__activity-bar__icon--cost" />
+            <DataSpaceViewerActivityBarItemExperimentalBadge />
+          </>
         ),
       },
       {
         mode: DATA_SPACE_VIEWER_ACTIVITY_MODE.DATA_GOVERNANCE,
-        title: 'Governance',
+        title: 'Data Governance (Work In Progress)',
         icon: (
-          <GovernanceIcon className="data-space__viewer__activity-bar__icon--governance" />
+          <>
+            <GovernanceIcon className="data-space__viewer__activity-bar__icon--governance" />
+            <DataSpaceViewerActivityBarItemExperimentalBadge />
+          </>
         ),
       },
       {

package/src/components/index.ts

@@ -14,6 +14,7 @@
  * limitations under the License.
  */
 
+export * from '../__lib__/DSL_DataSpace_LegendApplicationNavigation.js';
 export { DSL_DataSpace_LegendApplicationPlugin } from './DSL_DataSpace_LegendApplicationPlugin.js';
 export { DataSpaceViewer } from './DataSpaceViewer.js';
 export * from '../stores/DSL_DataSpace_LegendApplicationPlugin_Extension.js';

package/src/graph-manager/protocol/pure/v1/V1_DSL_DataSpace_PureGraphManagerExtension.ts

@@ -164,7 +164,7 @@ export class V1_DSL_DataSpace_PureGraphManagerExtension extends DSL_DataSpace_Pu
     result.taggedValues = analysisResult.taggedValues.map((taggedValue) => {
       const info = new DataSpaceTaggedValueInfo();
       info.profile = taggedValue.profile;
-      info.tag = taggedValue.value;
+      info.tag = taggedValue.tag;
       info.value = taggedValue.value;
       return info;
     });

package/src/stores/DataSpaceLayoutState.ts

@@ -0,0 +1,272 @@
+/**
+ * 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 { NAVIGATION_ZONE_SEPARATOR } from '@finos/legend-application';
+import { action, computed, makeObservable, observable } from 'mobx';
+import { type DataSpaceViewerState } from './DataSpaceViewerState.js';
+import {
+  getNonNullableEntry,
+  getNullableFirstEntry,
+  guaranteeNonNullable,
+  isNonNullable,
+} from '@finos/legend-shared';
+import {
+  DATA_SPACE_VIEWER_ACTIVITY_MODE,
+  extractActivityFromAnchor,
+  generateAnchorForActivity,
+  generateAnchorForDiagram,
+} from './DataSpaceViewerNavigation.js';
+
+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;
+};
+
+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;
+
+  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 {
+    return (
+      Boolean(this.frame) &&
+      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 = getNonNullableEntry(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;
+  }
+
+  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 {
+    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.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,
+          );
+        if (matchingDiagram) {
+          this.dataSpaceViewerState.diagramViewerState.setCurrentDiagram(
+            matchingDiagram,
+          );
+        }
+      }
+
+      this.setWikiPageAnchorToNavigate(undefined);
+    }
+  }
+}

package/src/stores/DataSpaceModelsDocumentationState.ts

@@ -15,7 +15,7 @@
  */
 
 import { action, computed, makeObservable, observable } from 'mobx';
-import type { DataSpaceViewerState } from './DataSpaceViewerState.js';
+import { type DataSpaceViewerState } from './DataSpaceViewerState.js';
 import { type TreeData, type TreeNodeData } from '@finos/legend-art';
 import {
   ActionState,
@@ -32,6 +32,9 @@ import {
   type NormalizedDataSpaceDocumentationEntry,
 } from '../graph-manager/action/analytics/DataSpaceAnalysis.js';
 import { CORE_PURE_PATH, ELEMENT_PATH_DELIMITER } from '@finos/legend-graph';
+import type { CommandRegistrar } from '@finos/legend-application';
+import { DSL_DATA_SPACE_LEGEND_APPLICATION_COMMAND_KEY } from '../__lib__/DSL_DataSpace_LegendApplicationCommand.js';
+import { DATA_SPACE_VIEWER_ACTIVITY_MODE } from './DataSpaceViewerNavigation.js';
 
 export enum ModelsDocumentationFilterTreeNodeCheckType {
   CHECKED,
@@ -331,12 +334,15 @@ const buildPackageFilterTreeData = (
   };
 };
 
-export class DataSpaceViewerModelsDocumentationState {
+export class DataSpaceViewerModelsDocumentationState
+  implements CommandRegistrar
+{
   readonly dataSpaceViewerState: DataSpaceViewerState;
 
   showHumanizedForm = true;
 
   // search text
+  private searchInput?: HTMLInputElement | undefined;
   private readonly searchEngine: FuzzySearchEngine<NormalizedDataSpaceDocumentationEntry>;
   searchConfigurationState: FuzzySearchAdvancedConfigState;
   readonly searchState = ActionState.create();
@@ -585,4 +591,57 @@ export class DataSpaceViewerModelsDocumentationState {
     this.resetTypeFilter();
     this.resetPackageFilter();
   }
+
+  hasClassDocumentation(classPath: string): boolean {
+    return this.dataSpaceViewerState.dataSpaceAnalysisResult.elementDocs.some(
+      (entry) => entry.elementEntry.path === classPath,
+    );
+  }
+
+  viewClassDocumentation(classPath: string): void {
+    if (this.hasClassDocumentation(classPath)) {
+      const classNode = this.packageFilterTreeData.nodes.get(classPath);
+      if (classNode) {
+        uncheckAllFilterTree(this.packageFilterTreeData);
+        classNode.setCheckType(
+          ModelsDocumentationFilterTreeNodeCheckType.CHECKED,
+        );
+        this.resetSearch();
+        this.updatePackageFilter();
+      }
+    }
+  }
+
+  setSearchInput(el: HTMLInputElement | undefined): void {
+    this.searchInput = el;
+  }
+
+  focusSearchInput(): void {
+    this.searchInput?.focus();
+  }
+
+  selectSearchInput(): void {
+    this.searchInput?.select();
+  }
+
+  registerCommands(): void {
+    const DEFAULT_TRIGGER = (): boolean =>
+      this.dataSpaceViewerState.currentActivity ===
+      DATA_SPACE_VIEWER_ACTIVITY_MODE.MODELS_DOCUMENTATION;
+    this.dataSpaceViewerState.applicationStore.commandService.registerCommand({
+      key: DSL_DATA_SPACE_LEGEND_APPLICATION_COMMAND_KEY.SEARCH_DOCUMENTATION,
+      trigger: DEFAULT_TRIGGER,
+      action: () => this.focusSearchInput(),
+    });
+  }
+
+  deregisterCommands(): void {
+    [
+      DSL_DATA_SPACE_LEGEND_APPLICATION_COMMAND_KEY.SEARCH_DOCUMENTATION,
+    ].forEach((commandKey) =>
+      this.dataSpaceViewerState.applicationStore.commandService.deregisterCommand(
+        commandKey,
+      ),
+    );
+  }
 }

package/src/stores/DataSpaceQuickStartState.ts

@@ -0,0 +1,91 @@
+/**
+ * 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 { makeObservable, observable } from 'mobx';
+import { type DataSpaceViewerState } from './DataSpaceViewerState.js';
+import { DataAccessState } from '@finos/legend-query-builder';
+import {
+  type DataSpaceExecutableAnalysisResult,
+  DataSpaceServiceExecutableInfo,
+} from '../graph-manager/index.js';
+import type {
+  DatasetEntitlementReport,
+  DatasetSpecification,
+} from '@finos/legend-graph';
+
+export class DataSpaceQuickStartState {
+  readonly dataSpaceViewerState: DataSpaceViewerState;
+
+  dataAccessStateIndex = new Map<
+    DataSpaceExecutableAnalysisResult,
+    DataAccessState
+  >();
+
+  constructor(dataSpaceViewerState: DataSpaceViewerState) {
+    makeObservable(this, {
+      dataAccessStateIndex: observable,
+    });
+
+    this.dataSpaceViewerState = dataSpaceViewerState;
+    dataSpaceViewerState.dataSpaceAnalysisResult.executables.forEach(
+      (executable) => {
+        let dataAccessState: DataAccessState | undefined;
+
+        if (
+          executable.info instanceof DataSpaceServiceExecutableInfo &&
+          executable.info.mapping &&
+          executable.info.runtime
+        ) {
+          const query = executable.info.query;
+          const mapping = executable.info.mapping;
+          const runtime = executable.info.runtime;
+          dataAccessState = new DataAccessState(
+            this.dataSpaceViewerState.applicationStore,
+            this.dataSpaceViewerState.graphManagerState,
+            {
+              initialDatasets: executable.datasets,
+              surveyDatasets: async (): Promise<DatasetSpecification[]> =>
+                this.dataSpaceViewerState.graphManagerState.graphManager.surveyDatasets(
+                  mapping,
+                  runtime,
+                  await this.dataSpaceViewerState.graphManagerState.graphManager.pureCodeToLambda(
+                    query,
+                  ),
+                  this.dataSpaceViewerState.retrieveGraphData(),
+                ),
+              checkDatasetEntitlements: async (
+                datasets: DatasetSpecification[],
+              ): Promise<DatasetEntitlementReport[]> =>
+                this.dataSpaceViewerState.graphManagerState.graphManager.checkDatasetEntitlements(
+                  datasets,
+                  mapping,
+                  runtime,
+                  await this.dataSpaceViewerState.graphManagerState.graphManager.pureCodeToLambda(
+                    query,
+                  ),
+                  this.dataSpaceViewerState.retrieveGraphData(),
+                ),
+            },
+          );
+        }
+
+        if (dataAccessState) {
+          this.dataAccessStateIndex.set(executable, dataAccessState);
+        }
+      },
+    );
+  }
+}