@finos/legend-extension-dsl-data-space 10.0.3 → 10.0.4

package/src/components/DataSpaceDiagramViewer.tsx

@@ -22,14 +22,19 @@ import {
   clsx,
   useResizeDetector,
 } from '@finos/legend-art';
-import type { DataSpaceViewerState } from '../stores/DataSpaceViewerState.js';
+import {
+  DATA_SPACE_VIEWER_ACTIVITY_MODE,
+  generateAnchorForActivity,
+  type DataSpaceViewerState,
+  generateAnchorForDiagram,
+} from '../stores/DataSpaceViewerState.js';
 import { observer } from 'mobx-react-lite';
 import { forwardRef, useEffect, useRef } from 'react';
 import { type Diagram } from '@finos/legend-extension-dsl-diagram/graph';
 import { DiagramRenderer } from '@finos/legend-extension-dsl-diagram/application';
 import {
-  getNullableFirstElement,
-  getNullableLastElement,
+  getNullableFirstEntry,
+  getNullableLastEntry,
   guaranteeNonNullable,
 } from '@finos/legend-shared';
 import { DataSpaceWikiPlaceholder } from './DataSpacePlaceholder.js';
@@ -81,6 +86,20 @@ export const DataSpaceDiagramViewer = observer(
   (props: { dataSpaceViewerState: DataSpaceViewerState }) => {
     const { dataSpaceViewerState } = props;
     const analysisResult = dataSpaceViewerState.dataSpaceAnalysisResult;
+    const sectionRef = useRef<HTMLDivElement>(null);
+    const anchor = generateAnchorForActivity(
+      DATA_SPACE_VIEWER_ACTIVITY_MODE.DIAGRAM_VIEWER,
+    );
+
+    useEffect(() => {
+      if (sectionRef.current) {
+        dataSpaceViewerState.layoutState.setWikiPageAnchor(
+          anchor,
+          sectionRef.current,
+        );
+      }
+      return () => dataSpaceViewerState.layoutState.unsetWikiPageAnchor(anchor);
+    }, [dataSpaceViewerState, anchor]);
 
     // diagram selector
     const diagramCanvasRef = useRef<HTMLDivElement>(null);
@@ -95,8 +114,12 @@ export const DataSpaceDiagramViewer = observer(
       if (idx === 0 || idx === -1) {
         return;
       }
-      dataSpaceViewerState.setCurrentDiagram(
-        guaranteeNonNullable(analysisResult.diagrams[idx - 1]),
+      const previousDiagram = guaranteeNonNullable(
+        analysisResult.diagrams[idx - 1],
+      );
+      dataSpaceViewerState.setCurrentDiagram(previousDiagram);
+      dataSpaceViewerState.syncZoneWithNavigation(
+        generateAnchorForDiagram(previousDiagram),
       );
     };
     const showNextDiagram = (): void => {
@@ -109,19 +132,27 @@ export const DataSpaceDiagramViewer = observer(
       if (idx === analysisResult.diagrams.length - 1 || idx === -1) {
         return;
       }
-      dataSpaceViewerState.setCurrentDiagram(
-        guaranteeNonNullable(analysisResult.diagrams[idx + 1]),
+      const nextDiagram = guaranteeNonNullable(
+        analysisResult.diagrams[idx + 1],
+      );
+      dataSpaceViewerState.setCurrentDiagram(nextDiagram);
+      dataSpaceViewerState.syncZoneWithNavigation(
+        generateAnchorForDiagram(nextDiagram),
       );
     };
 
     return (
-      <div className="data-space__viewer__wiki__section">
+      <div ref={sectionRef} className="data-space__viewer__wiki__section">
         <div className="data-space__viewer__wiki__section__header">
           <div className="data-space__viewer__wiki__section__header__label">
             Diagrams
-            <div className="data-space__viewer__wiki__section__header__anchor">
+            <button
+              className="data-space__viewer__wiki__section__header__anchor"
+              tabIndex={-1}
+              onClick={() => dataSpaceViewerState.changeZone(anchor, true)}
+            >
               <AnchorLinkIcon />
-            </div>
+            </button>
           </div>
         </div>
         <div className="data-space__viewer__wiki__section__content">
@@ -143,7 +174,7 @@ export const DataSpaceDiagramViewer = observer(
                     tabIndex={-1}
                     title="Previous"
                     disabled={
-                      getNullableFirstElement(analysisResult.diagrams) ===
+                      getNullableFirstEntry(analysisResult.diagrams) ===
                       dataSpaceViewerState.currentDiagram
                     }
                     onClick={showPreviousDiagram}
@@ -155,7 +186,7 @@ export const DataSpaceDiagramViewer = observer(
                     tabIndex={-1}
                     title="Next"
                     disabled={
-                      getNullableLastElement(analysisResult.diagrams) ===
+                      getNullableLastEntry(analysisResult.diagrams) ===
                       dataSpaceViewerState.currentDiagram
                     }
                     onClick={showNextDiagram}
@@ -174,9 +205,12 @@ export const DataSpaceDiagramViewer = observer(
                                 dataSpaceViewerState.currentDiagram === diagram,
                             },
                           )}
-                          onClick={() =>
-                            dataSpaceViewerState.setCurrentDiagram(diagram)
-                          }
+                          onClick={() => {
+                            dataSpaceViewerState.setCurrentDiagram(diagram);
+                            dataSpaceViewerState.syncZoneWithNavigation(
+                              generateAnchorForDiagram(diagram),
+                            );
+                          }}
                         >
                           <CircleIcon />
                         </button>

package/src/components/DataSpaceModelsDocumentation.tsx

@@ -41,7 +41,11 @@ import {
   CaretRightIcon,
   CaretLeftIcon,
 } from '@finos/legend-art';
-import { type DataSpaceViewerState } from '../stores/DataSpaceViewerState.js';
+import {
+  DATA_SPACE_VIEWER_ACTIVITY_MODE,
+  generateAnchorForActivity,
+  type DataSpaceViewerState,
+} from '../stores/DataSpaceViewerState.js';
 import { DataSpaceWikiPlaceholder } from './DataSpacePlaceholder.js';
 import {
   DataSpaceAssociationDocumentationEntry,
@@ -61,7 +65,7 @@ import {
   PROPERTY_ACCESSOR,
   getMultiplicityDescription,
 } from '@finos/legend-graph';
-import { useMemo, useRef } from 'react';
+import { useEffect, useMemo, useRef } from 'react';
 import {
   type ModelsDocumentationFilterTreeNodeData,
   type DataSpaceViewerModelsDocumentationState,
@@ -1031,22 +1035,42 @@ const DataSpaceModelsDocumentationSearchBar = observer(
 export const DataSpaceModelsDocumentation = observer(
   (props: { dataSpaceViewerState: DataSpaceViewerState }) => {
     const { dataSpaceViewerState } = props;
+    const sectionRef = useRef<HTMLDivElement>(null);
+    const anchor = generateAnchorForActivity(
+      DATA_SPACE_VIEWER_ACTIVITY_MODE.MODELS_DOCUMENTATION,
+    );
+
+    useEffect(() => {
+      if (sectionRef.current) {
+        dataSpaceViewerState.layoutState.setWikiPageAnchor(
+          anchor,
+          sectionRef.current,
+        );
+      }
+      return () => dataSpaceViewerState.layoutState.unsetWikiPageAnchor(anchor);
+    }, [dataSpaceViewerState, anchor]);
+
     const documentationEntries =
       dataSpaceViewerState.dataSpaceAnalysisResult.elementDocs;
     const documentationState = dataSpaceViewerState.modelsDocumentationState;
+
     const toggleFilterPanel = (): void =>
       documentationState.setShowFilterPanel(
         !documentationState.showFilterPanel,
       );
 
     return (
-      <div className="data-space__viewer__wiki__section">
+      <div ref={sectionRef} className="data-space__viewer__wiki__section">
         <div className="data-space__viewer__wiki__section__header">
           <div className="data-space__viewer__wiki__section__header__label">
             Models Documentation
-            <div className="data-space__viewer__wiki__section__header__anchor">
+            <button
+              className="data-space__viewer__wiki__section__header__anchor"
+              tabIndex={-1}
+              onClick={() => dataSpaceViewerState.changeZone(anchor, true)}
+            >
               <AnchorLinkIcon />
-            </div>
+            </button>
           </div>
         </div>
         <div className="data-space__viewer__wiki__section__content">