@finos/legend-extension-dsl-data-space 10.4.255 → 10.4.257

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/DataSpaceQualityState.ts

@@ -0,0 +1,117 @@
+/**
+ * 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 { action, flow, makeObservable, observable } from 'mobx';
+import {
+  ActionState,
+  assertErrorThrown,
+  LogEvent,
+  type GeneratorFn,
+} from '@finos/legend-shared';
+import type { DataSpaceViewerState } from './DataSpaceViewerState.js';
+import { DSL_DATASPACE_EVENT } from '../__lib__/DSL_DataSpace_Event.js';
+
+export enum DATA_SPACE_QUALITY_LEVEL {
+  DIAMOND = 'DIAMOND',
+  PLATINUM = 'PLATINUM',
+  GOLD = 'GOLD',
+  SILVER = 'SILVER',
+  BRONZE = 'BRONZE',
+}
+
+// A step-by-step breakdown of every criterion behind the quality rating, so the UI can show
+// users a roadmap of what's already done and what's needed for the next tier.
+export type DataSpaceQualityBreakdown = {
+  isDescriptionDocumented: boolean;
+  isExecutablesPresent: boolean;
+  isModelsDocumentationPresent: boolean;
+  isEveryServiceDocumented: boolean;
+  attributeCoverage?: number;
+  documentedAttributeCount: number;
+  totalAttributeCount: number;
+};
+
+export type DataSpaceQualityResult = {
+  qualityLevel: DATA_SPACE_QUALITY_LEVEL;
+  qualityBreakdown: DataSpaceQualityBreakdown;
+};
+
+// The actual scoring (description/executables/Models Documentation checks, attribute
+// coverage thresholds) lives server-side — see vendor-data-marketplace's
+// `doc-quality/dataspace` endpoint — since SingleStore already has the dataspace's
+// description and per-attribute documentation ingested for search. This state calls the
+// host app's injected `fetchDataSpaceQuality` action (see DataSpaceViewerState) and stores
+// the result. If the host app didn't wire that action up (e.g. a non-Marketplace consumer
+// of DataSpaceViewerState), or the call fails, qualityLevel/qualityBreakdown stay undefined
+// and the badge simply doesn't render.
+export class DataSpaceQualityState {
+  readonly dataSpaceViewerState: DataSpaceViewerState;
+  qualityLevel: DATA_SPACE_QUALITY_LEVEL | undefined;
+  qualityBreakdown: DataSpaceQualityBreakdown | undefined;
+  readonly computingQualityState = ActionState.create();
+
+  constructor(dataSpaceViewerState: DataSpaceViewerState) {
+    makeObservable(this, {
+      qualityLevel: observable,
+      qualityBreakdown: observable,
+      setQualityLevel: action,
+      setQualityBreakdown: action,
+      computeQuality: flow,
+    });
+
+    this.dataSpaceViewerState = dataSpaceViewerState;
+  }
+
+  setQualityLevel(val: DATA_SPACE_QUALITY_LEVEL | undefined): void {
+    this.qualityLevel = val;
+  }
+
+  setQualityBreakdown(val: DataSpaceQualityBreakdown | undefined): void {
+    this.qualityBreakdown = val;
+  }
+
+  get isSupported(): boolean {
+    return this.dataSpaceViewerState.fetchDataSpaceQuality !== undefined;
+  }
+
+  *computeQuality(): GeneratorFn<void> {
+    if (!this.computingQualityState.isInInitialState) {
+      return;
+    }
+    const fetchDataSpaceQuality =
+      this.dataSpaceViewerState.fetchDataSpaceQuality;
+    if (!fetchDataSpaceQuality) {
+      this.computingQualityState.complete(false);
+      return;
+    }
+    this.computingQualityState.inProgress();
+    try {
+      const result = (yield fetchDataSpaceQuality()) as DataSpaceQualityResult;
+      this.setQualityLevel(result.qualityLevel);
+      this.setQualityBreakdown(result.qualityBreakdown);
+      this.computingQualityState.complete();
+    } catch (error) {
+      assertErrorThrown(error);
+      // A cosmetic badge failing to load isn't worth a user-facing toast — just log it and
+      // leave qualityLevel/qualityBreakdown undefined so the badge doesn't render.
+      this.dataSpaceViewerState.applicationStore.logService.warn(
+        LogEvent.create(DSL_DATASPACE_EVENT.ERROR_FETCH_DATA_SPACE_QUALITY),
+        error,
+      );
+      this.computingQualityState.complete(false);
+    }
+  }
+}

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;

package/src/stores/DataSpaceViewerState.ts

@@ -55,23 +55,25 @@ import {
   type DataSpaceMappingProviderAccessConfig,
   DataSpaceMappingProviderAccessState,
 } from './DataSpaceMappingProviderAccessState.js';
+import {
+  DataSpaceQualityState,
+  type DataSpaceQualityResult,
+} from './DataSpaceQualityState.js';
+import { BaseViewerState } from '@finos/legend-extension-dsl-data-product';
 
-export class DataSpaceViewerState {
-  readonly applicationStore: GenericLegendApplicationStore;
+export class DataSpaceViewerState extends BaseViewerState<
+  DataSpaceAnalysisResult,
+  DataSpaceLayoutState
+> {
   readonly graphManagerState: GraphManagerState;
-  readonly layoutState: DataSpaceLayoutState;
 
-  readonly dataSpaceAnalysisResult: DataSpaceAnalysisResult;
   readonly groupId: string;
   readonly artifactId: string;
   readonly versionId: string;
   readonly retrieveGraphData: () => GraphData;
-  readonly queryDataSpace: (executionContextKey: string) => void;
+  readonly queryDataSpace: (executionContextKey: string | undefined) => void;
   readonly viewProject: (path: string | undefined) => void;
   readonly viewSDLCProject: (path: string | undefined) => Promise<void>;
-  readonly onZoneChange?:
-    | ((zone: NavigationZone | undefined) => void)
-    | undefined;
   readonly queryClass: (_class: Class) => void;
   readonly openServiceQuery: (servicePath: string) => void;
   readonly onQuickStartTabChange?:
@@ -88,10 +90,14 @@ export class DataSpaceViewerState {
   readonly mappingProviderAccessConfig?:
     | DataSpaceMappingProviderAccessConfig
     | undefined;
+  readonly fetchDataSpaceQuality?:
+    | (() => Promise<DataSpaceQualityResult>)
+    | undefined;
 
   readonly diagramViewerState: DataSpaceViewerDiagramViewerState;
   readonly modelsDocumentationState: DataSpaceViewerModelsDocumentationState;
   readonly quickStartState: DataSpaceQuickStartState;
+  readonly qualityState: DataSpaceQualityState;
   legendAIConfig: LegendAIConfig;
   executableStates: DataSpaceViewerExecutableState[] = [];
 
@@ -119,7 +125,7 @@ export class DataSpaceViewerState {
     dataSpaceAnalysisResult: DataSpaceAnalysisResult,
     actions: {
       retrieveGraphData: () => GraphData;
-      queryDataSpace: (executionContextKey: string) => void;
+      queryDataSpace: (executionContextKey: string | undefined) => void;
       viewProject: (path: string | undefined) => void;
       viewSDLCProject: (path: string | undefined) => Promise<void>;
       queryClass: (_class: Class) => void;
@@ -139,8 +145,21 @@ export class DataSpaceViewerState {
       mappingProviderAccessConfig?:
         | DataSpaceMappingProviderAccessConfig
         | undefined;
+      fetchDataSpaceQuality?:
+        | (() => Promise<DataSpaceQualityResult>)
+        | undefined;
     },
   ) {
+    super(
+      dataSpaceAnalysisResult,
+      applicationStore,
+      new DataSpaceLayoutState(),
+      {
+        onZoneChange: actions.onZoneChange,
+      },
+    );
+    this.layoutState.setViewerState(this);
+
     makeObservable(this, {
       currentActivity: observable,
       currentExecutionContext: observable,
@@ -157,11 +176,8 @@ export class DataSpaceViewerState {
       refreshCurrentMappingProviderAccessState: action,
     });
 
-    this.applicationStore = applicationStore;
     this.graphManagerState = graphManagerState;
-    this.layoutState = new DataSpaceLayoutState(this);
 
-    this.dataSpaceAnalysisResult = dataSpaceAnalysisResult;
     this.executableStates = this.dataSpaceAnalysisResult.executables.map(
       (exec) => new DataSpaceViewerExecutableState(this, exec),
     );
@@ -172,12 +188,12 @@ export class DataSpaceViewerState {
     this.queryDataSpace = actions.queryDataSpace;
     this.viewProject = actions.viewProject;
     this.viewSDLCProject = actions.viewSDLCProject;
-    this.onZoneChange = actions.onZoneChange;
     this.queryClass = actions.queryClass;
     this.openServiceQuery = actions.openServiceQuery;
     this.onQuickStartTabChange = actions.onQuickStartTabChange;
     this.viewDataProduct = actions.viewDataProduct;
     this.mappingProviderAccessConfig = actions.mappingProviderAccessConfig;
+    this.fetchDataSpaceQuality = actions.fetchDataSpaceQuality;
 
     this.currentExecutionContext =
       dataSpaceAnalysisResult.defaultExecutionContext ??
@@ -202,10 +218,21 @@ export class DataSpaceViewerState {
     );
     this.diagramViewerState = new DataSpaceViewerDiagramViewerState(this);
     this.quickStartState = new DataSpaceQuickStartState(this);
+    this.qualityState = new DataSpaceQualityState(this);
     this.legendAIConfig = DEFAULT_LEGEND_AI_CONFIG;
     this.initMappingProviderAccessState();
   }
 
+  get dataSpaceAnalysisResult(): DataSpaceAnalysisResult {
+    return this.product;
+  }
+
+  protected getValidSections(): string[] {
+    return DATA_SPACE_WIKI_PAGE_SECTIONS.map((activity) =>
+      generateAnchorForActivity(activity),
+    );
+  }
+
   get isVerified(): boolean {
     return Boolean(
       this.dataSpaceAnalysisResult.stereotypes.find(
@@ -216,6 +243,10 @@ export class DataSpaceViewerState {
     );
   }
 
+  override get documentationUrl(): string | undefined {
+    return this.dataSpaceAnalysisResult.supportInfo?.documentationUrl;
+  }
+
   get currentMappingProviderAccessState():
     | DataSpaceMappingProviderAccessState
     | undefined {
@@ -305,12 +336,7 @@ export class DataSpaceViewerState {
     this.currentRuntime = val;
   }
 
-  syncZoneWithNavigation(zone: NavigationZone): void {
-    this.layoutState.setCurrentNavigationZone(zone);
-    this.onZoneChange?.(zone);
-  }
-
-  changeZone(zone: NavigationZone, force = false): void {
+  override changeZone(zone: NavigationZone, force = false): void {
     if (force) {
       this.layoutState.setCurrentNavigationZone('');
     }

package/src/stores/query/DataSpaceAdvancedSearchState.ts

@@ -211,14 +211,21 @@ export class DataSpaceAdvancedSearchState {
             new GraphDataWithOrigin(
               new LegendSDLC(groupId, artifactId, versionId),
             ),
-          queryDataSpace: (executionContextKey: string) =>
+          queryDataSpace: (executionContextKey: string | undefined) => {
+            if (executionContextKey === undefined) {
+              this.applicationStore.notificationService.notifyError(
+                'No execution context present on dataspace',
+              );
+              return;
+            }
             generateDataSpaceQueryCreatorRoute(
               groupId,
               artifactId,
               versionId,
               analysisResult.path,
               executionContextKey,
-            ),
+            );
+          },
           viewProject: (path: string | undefined) =>
             this.viewProject(groupId, artifactId, versionId, path),
           viewSDLCProject: (path: string | undefined) =>

package/tsconfig.json

@@ -88,6 +88,7 @@
     "./src/stores/DataSpaceLayoutState.ts",
     "./src/stores/DataSpaceMappingProviderAccessState.ts",
     "./src/stores/DataSpaceModelsDocumentationState.ts",
+    "./src/stores/DataSpaceQualityState.ts",
     "./src/stores/DataSpaceQuickStartState.ts",
     "./src/stores/DataSpaceViewerDiagramViewerState.ts",
     "./src/stores/DataSpaceViewerExecutableState.ts",
@@ -105,6 +106,7 @@
     "./src/components/DataSpaceLegendAIIntegration.tsx",
     "./src/components/DataSpaceMarkdownTextViewer.tsx",
     "./src/components/DataSpacePlaceholder.tsx",
+    "./src/components/DataSpaceQualityEmote.tsx",
     "./src/components/DataSpaceQuickStart.tsx",
     "./src/components/DataSpaceSupportPanel.tsx",
     "./src/components/DataSpaceViewer.tsx",