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

package/src/stores/DataSpaceViewerDiagramViewerState.ts

@@ -0,0 +1,245 @@
+/**
+ * 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 {
+  getNullableFirstEntry,
+  guaranteeNonNullable,
+} from '@finos/legend-shared';
+import { action, computed, makeObservable, observable } from 'mobx';
+import { type DataSpaceViewerState } from './DataSpaceViewerState.js';
+import type { ClassView } from '@finos/legend-extension-dsl-diagram/graph';
+import type { DataSpaceDiagramAnalysisResult } from '../graph-manager/index.js';
+import {
+  DIAGRAM_INTERACTION_MODE,
+  type DiagramRenderer,
+} from '@finos/legend-extension-dsl-diagram/application';
+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 class DataSpaceViewerDiagramViewerState implements CommandRegistrar {
+  readonly dataSpaceViewerState: DataSpaceViewerState;
+
+  _renderer?: DiagramRenderer | undefined;
+  currentDiagram?: DataSpaceDiagramAnalysisResult | undefined;
+  contextMenuClassView?: ClassView | undefined;
+  showDescription = true;
+  expandDescription = false;
+
+  constructor(dataSpaceViewerState: DataSpaceViewerState) {
+    makeObservable(this, {
+      _renderer: observable,
+      currentDiagram: observable,
+      contextMenuClassView: observable,
+      showDescription: observable,
+      expandDescription: observable,
+      previousDiagram: computed,
+      nextDiagram: computed,
+      currentDiagramIndex: computed,
+      diagramRenderer: computed,
+      setDiagramRenderer: action,
+      setCurrentDiagram: action,
+      setContextMenuClassView: action,
+      setShowDescription: action,
+      setExpandDescription: action,
+    });
+
+    this.dataSpaceViewerState = dataSpaceViewerState;
+    this.currentDiagram = getNullableFirstEntry(
+      this.dataSpaceViewerState.dataSpaceAnalysisResult.diagrams,
+    );
+  }
+
+  get diagramRenderer(): DiagramRenderer {
+    return guaranteeNonNullable(
+      this._renderer,
+      `Diagram renderer must be initialized (this is likely caused by calling this method at the wrong place)`,
+    );
+  }
+
+  get isDiagramRendererInitialized(): boolean {
+    return Boolean(this._renderer);
+  }
+
+  // NOTE: we have tried to use React to control the cursor and
+  // could not overcome the jank/lag problem, so we settle with CSS-based approach
+  // See https://css-tricks.com/using-css-cursors/
+  // See https://developer.mozilla.org/en-US/docs/Web/CSS/cursor
+  get diagramCursorClass(): string {
+    if (!this.isDiagramRendererInitialized) {
+      return '';
+    }
+    switch (this.diagramRenderer.interactionMode) {
+      case DIAGRAM_INTERACTION_MODE.PAN: {
+        return this.diagramRenderer.leftClick
+          ? 'data-space__viewer__diagram-viewer__cursor--grabbing'
+          : 'data-space__viewer__diagram-viewer__cursor--grab';
+      }
+      case DIAGRAM_INTERACTION_MODE.ZOOM_IN: {
+        return 'data-space__viewer__diagram-viewer__cursor--zoom-in';
+      }
+      case DIAGRAM_INTERACTION_MODE.ZOOM_OUT: {
+        return 'data-space__viewer__diagram-viewer__cursor--zoom-out';
+      }
+      case DIAGRAM_INTERACTION_MODE.LAYOUT: {
+        if (this.diagramRenderer.mouseOverClassView) {
+          return 'data-space__viewer__diagram-viewer__cursor--pointer';
+        }
+        return '';
+      }
+      default:
+        return '';
+    }
+  }
+
+  get previousDiagram(): DataSpaceDiagramAnalysisResult | undefined {
+    if (!this.currentDiagram) {
+      return undefined;
+    }
+    const idx =
+      this.dataSpaceViewerState.dataSpaceAnalysisResult.diagrams.indexOf(
+        this.currentDiagram,
+      );
+    if (idx === 0 || idx === -1) {
+      return undefined;
+    }
+    return this.dataSpaceViewerState.dataSpaceAnalysisResult.diagrams[idx - 1];
+  }
+
+  get nextDiagram(): DataSpaceDiagramAnalysisResult | undefined {
+    if (!this.currentDiagram) {
+      return undefined;
+    }
+    const idx =
+      this.dataSpaceViewerState.dataSpaceAnalysisResult.diagrams.indexOf(
+        this.currentDiagram,
+      );
+    if (
+      idx ===
+        this.dataSpaceViewerState.dataSpaceAnalysisResult.diagrams.length - 1 ||
+      idx === -1
+    ) {
+      return undefined;
+    }
+    return this.dataSpaceViewerState.dataSpaceAnalysisResult.diagrams[idx + 1];
+  }
+
+  get currentDiagramIndex(): number {
+    return this.currentDiagram
+      ? this.dataSpaceViewerState.dataSpaceAnalysisResult.diagrams.indexOf(
+          this.currentDiagram,
+        ) + 1
+      : 0;
+  }
+
+  setDiagramRenderer(val: DiagramRenderer): void {
+    this._renderer = val;
+  }
+
+  setCurrentDiagram(val: DataSpaceDiagramAnalysisResult): void {
+    this.currentDiagram = val;
+  }
+
+  setContextMenuClassView(val: ClassView | undefined): void {
+    this.contextMenuClassView = val;
+  }
+
+  setupDiagramRenderer(): void {
+    this.diagramRenderer.setIsReadOnly(true);
+    this.diagramRenderer.setEnableLayoutAutoAdjustment(true);
+    this.diagramRenderer.onClassViewDoubleClick = (
+      classView: ClassView,
+    ): void => this.dataSpaceViewerState.queryClass(classView.class.value);
+    this.diagramRenderer.onClassViewRightClick = (
+      classView: ClassView,
+    ): void => {
+      this.setContextMenuClassView(classView);
+    };
+  }
+
+  setShowDescription(val: boolean): void {
+    this.showDescription = val;
+    this.setExpandDescription(false);
+  }
+
+  setExpandDescription(val: boolean): void {
+    this.expandDescription = val;
+  }
+
+  registerCommands(): void {
+    const DEFAULT_TRIGGER = (): boolean =>
+      this.dataSpaceViewerState.currentActivity ===
+      DATA_SPACE_VIEWER_ACTIVITY_MODE.DIAGRAM_VIEWER;
+    this.dataSpaceViewerState.applicationStore.commandService.registerCommand({
+      key: DSL_DATA_SPACE_LEGEND_APPLICATION_COMMAND_KEY.RECENTER_DIAGRAM,
+      trigger: DEFAULT_TRIGGER,
+      action: () => this.diagramRenderer.recenter(),
+    });
+    this.dataSpaceViewerState.applicationStore.commandService.registerCommand({
+      key: DSL_DATA_SPACE_LEGEND_APPLICATION_COMMAND_KEY.USE_ZOOM_TOOL,
+      trigger: DEFAULT_TRIGGER,
+      action: () => this.diagramRenderer.switchToZoomMode(),
+    });
+    this.dataSpaceViewerState.applicationStore.commandService.registerCommand({
+      key: DSL_DATA_SPACE_LEGEND_APPLICATION_COMMAND_KEY.USE_VIEW_TOOL,
+      trigger: DEFAULT_TRIGGER,
+      action: () => this.diagramRenderer.switchToViewMode(),
+    });
+    this.dataSpaceViewerState.applicationStore.commandService.registerCommand({
+      key: DSL_DATA_SPACE_LEGEND_APPLICATION_COMMAND_KEY.USE_PAN_TOOL,
+      trigger: DEFAULT_TRIGGER,
+      action: () => this.diagramRenderer.switchToPanMode(),
+    });
+    this.dataSpaceViewerState.applicationStore.commandService.registerCommand({
+      key: DSL_DATA_SPACE_LEGEND_APPLICATION_COMMAND_KEY.GO_TO_NEXT_DIAGRAM,
+      trigger: DEFAULT_TRIGGER,
+      action: () => {
+        if (this.nextDiagram) {
+          this.setCurrentDiagram(this.nextDiagram);
+        }
+      },
+    });
+    this.dataSpaceViewerState.applicationStore.commandService.registerCommand({
+      key: DSL_DATA_SPACE_LEGEND_APPLICATION_COMMAND_KEY.GO_TO_PREVIOUS_DIAGRAM,
+      trigger: DEFAULT_TRIGGER,
+      action: () => {
+        if (this.previousDiagram) {
+          this.setCurrentDiagram(this.previousDiagram);
+        }
+      },
+    });
+    this.dataSpaceViewerState.applicationStore.commandService.registerCommand({
+      key: DSL_DATA_SPACE_LEGEND_APPLICATION_COMMAND_KEY.TOGGLE_DIAGRAM_DESCRIPTION,
+      trigger: DEFAULT_TRIGGER,
+      action: () => this.setShowDescription(!this.showDescription),
+    });
+  }
+
+  deregisterCommands(): void {
+    [
+      DSL_DATA_SPACE_LEGEND_APPLICATION_COMMAND_KEY.RECENTER_DIAGRAM,
+      DSL_DATA_SPACE_LEGEND_APPLICATION_COMMAND_KEY.USE_ZOOM_TOOL,
+      DSL_DATA_SPACE_LEGEND_APPLICATION_COMMAND_KEY.USE_VIEW_TOOL,
+      DSL_DATA_SPACE_LEGEND_APPLICATION_COMMAND_KEY.USE_PAN_TOOL,
+      DSL_DATA_SPACE_LEGEND_APPLICATION_COMMAND_KEY.GO_TO_NEXT_DIAGRAM,
+      DSL_DATA_SPACE_LEGEND_APPLICATION_COMMAND_KEY.GO_TO_PREVIOUS_DIAGRAM,
+    ].forEach((commandKey) =>
+      this.dataSpaceViewerState.applicationStore.commandService.deregisterCommand(
+        commandKey,
+      ),
+    );
+  }
+}

package/src/stores/DataSpaceViewerNavigation.ts

@@ -0,0 +1,64 @@
+/**
+ * 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 type {
+  DataSpaceDiagramAnalysisResult,
+  DataSpaceExecutableAnalysisResult,
+} from '../graph-manager/action/analytics/DataSpaceAnalysis.js';
+
+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',
+  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 extractActivityFromAnchor = (anchor: string): string =>
+  decodeURIComponent(anchor);
+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);