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

package/src/components/DataSpaceDiagramViewer.tsx

@@ -16,28 +16,49 @@
 
 import {
   AnchorLinkIcon,
+  CaretDownIcon,
+  CenterFocusIcon,
   CircleIcon,
+  CloseIcon,
+  ContextMenu,
+  CustomSelectorInput,
+  DescriptionIcon,
+  DropdownMenu,
+  MenuContent,
+  MenuContentDivider,
+  MenuContentItem,
+  MousePointerIcon,
+  MoveIcon,
+  ShapesIcon,
+  ThinChevronDownIcon,
   ThinChevronLeftIcon,
   ThinChevronRightIcon,
+  ThinChevronUpIcon,
+  ZoomInIcon,
+  ZoomOutIcon,
   clsx,
   useResizeDetector,
 } from '@finos/legend-art';
-import {
-  DATA_SPACE_VIEWER_ACTIVITY_MODE,
-  generateAnchorForActivity,
-  type DataSpaceViewerState,
-  generateAnchorForDiagram,
-} from '../stores/DataSpaceViewerState.js';
+import { type DataSpaceViewerState } 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 {
-  getNullableFirstEntry,
-  getNullableLastEntry,
-  guaranteeNonNullable,
-} from '@finos/legend-shared';
+  DIAGRAM_INTERACTION_MODE,
+  DIAGRAM_RELATIONSHIP_EDIT_MODE,
+  DIAGRAM_ZOOM_LEVELS,
+  DiagramRenderer,
+} from '@finos/legend-extension-dsl-diagram/application';
 import { DataSpaceWikiPlaceholder } from './DataSpacePlaceholder.js';
+import type { DataSpaceDiagramAnalysisResult } from '../graph-manager/index.js';
+import { getNonNullableEntry } from '@finos/legend-shared';
+import { DataSpaceMarkdownTextViewer } from './DataSpaceMarkdownTextViewer.js';
+import { useCommands } from '@finos/legend-application';
+import {
+  DATA_SPACE_VIEWER_ACTIVITY_MODE,
+  generateAnchorForActivity,
+  generateAnchorForDiagram,
+} from '../stores/DataSpaceViewerNavigation.js';
 
 const DataSpaceDiagramCanvas = observer(
   forwardRef<
@@ -48,7 +69,9 @@ const DataSpaceDiagramCanvas = observer(
     }
   >(function DataSpaceDiagramCanvas(props, ref) {
     const { dataSpaceViewerState, diagram } = props;
+    const diagramViewerState = dataSpaceViewerState.diagramViewerState;
     const diagramCanvasRef = ref as React.MutableRefObject<HTMLDivElement>;
+    const descriptionText = diagramViewerState.currentDiagram?.description;
 
     const { width, height } = useResizeDetector<HTMLDivElement>({
       refreshMode: 'debounce',
@@ -56,41 +79,411 @@ const DataSpaceDiagramCanvas = observer(
       targetRef: diagramCanvasRef,
     });
 
+    useEffect(() => {
+      diagramViewerState.setExpandDescription(false);
+    }, [diagramViewerState, diagramViewerState.currentDiagram]);
+
     useEffect(() => {
       const renderer = new DiagramRenderer(diagramCanvasRef.current, diagram);
-      dataSpaceViewerState.setDiagramRenderer(renderer);
-      dataSpaceViewerState.setupDiagramRenderer();
+      diagramViewerState.setDiagramRenderer(renderer);
+      diagramViewerState.setupDiagramRenderer();
       renderer.render({ initial: true });
-    }, [diagramCanvasRef, dataSpaceViewerState, diagram]);
+    }, [diagramCanvasRef, diagramViewerState, diagram]);
 
     useEffect(() => {
-      if (dataSpaceViewerState.isDiagramRendererInitialized) {
-        dataSpaceViewerState.diagramRenderer.refresh();
+      if (diagramViewerState.isDiagramRendererInitialized) {
+        diagramViewerState.diagramRenderer.refresh();
       }
-    }, [dataSpaceViewerState, width, height]);
+    }, [diagramViewerState, width, height]);
+
+    // actions
+    const queryClass = (): void => {
+      if (diagramViewerState.contextMenuClassView) {
+        dataSpaceViewerState.queryClass(
+          diagramViewerState.contextMenuClassView.class.value,
+        );
+      }
+    };
+    const viewClassDocumentation = (): void => {
+      if (
+        diagramViewerState.contextMenuClassView &&
+        dataSpaceViewerState.modelsDocumentationState.hasClassDocumentation(
+          diagramViewerState.contextMenuClassView.class.value.path,
+        )
+      ) {
+        dataSpaceViewerState.modelsDocumentationState.viewClassDocumentation(
+          diagramViewerState.contextMenuClassView.class.value.path,
+        );
+        dataSpaceViewerState.changeZone(
+          generateAnchorForActivity(
+            DATA_SPACE_VIEWER_ACTIVITY_MODE.MODELS_DOCUMENTATION,
+          ),
+        );
+      }
+    };
 
     return (
-      <div
-        ref={diagramCanvasRef}
-        className={clsx(
-          'diagram-canvas ',
-          dataSpaceViewerState.diagramCursorClass,
+      <ContextMenu
+        className="data-space__viewer__diagram-viewer__canvas"
+        content={
+          <MenuContent>
+            <MenuContentItem
+              onClick={queryClass}
+              disabled={!diagramViewerState.contextMenuClassView}
+            >
+              Query
+            </MenuContentItem>
+            <MenuContentItem
+              onClick={viewClassDocumentation}
+              disabled={
+                !diagramViewerState.contextMenuClassView ||
+                !dataSpaceViewerState.modelsDocumentationState.hasClassDocumentation(
+                  diagramViewerState.contextMenuClassView.class.value.path,
+                )
+              }
+            >
+              View Documentation
+            </MenuContentItem>
+          </MenuContent>
+        }
+        disabled={!diagramViewerState.contextMenuClassView}
+        menuProps={{ elevation: 7 }}
+        onClose={(): void =>
+          diagramViewerState.setContextMenuClassView(undefined)
+        }
+      >
+        {diagramViewerState.showDescription && (
+          <div
+            className={clsx('data-space__viewer__diagram-viewer__description', {
+              'data-space__viewer__diagram-viewer__description--expanded':
+                diagramViewerState.expandDescription,
+            })}
+          >
+            <button
+              className="data-space__viewer__diagram-viewer__description__close-btn"
+              tabIndex={-1}
+              title="Hide Description"
+              onClick={() => diagramViewerState.setShowDescription(false)}
+            >
+              <CloseIcon />
+            </button>
+            <div className="data-space__viewer__diagram-viewer__description__title">
+              {diagramViewerState.currentDiagram?.title
+                ? diagramViewerState.currentDiagram.title
+                : 'Untitled'}
+            </div>
+            <div className="data-space__viewer__diagram-viewer__description__content">
+              {descriptionText ? (
+                <DataSpaceMarkdownTextViewer value={descriptionText} />
+              ) : (
+                <div className="data-space__viewer__diagram-viewer__description__content__placeholder">
+                  (not specified)
+                </div>
+              )}
+            </div>
+            <button
+              className="data-space__viewer__diagram-viewer__description__expand-btn"
+              tabIndex={-1}
+              title={
+                diagramViewerState.expandDescription ? 'Collapse' : 'Expand'
+              }
+              onClick={() =>
+                diagramViewerState.setExpandDescription(
+                  !diagramViewerState.expandDescription,
+                )
+              }
+            >
+              {diagramViewerState.expandDescription ? (
+                <ThinChevronUpIcon />
+              ) : (
+                <ThinChevronDownIcon />
+              )}
+            </button>
+          </div>
         )}
-        tabIndex={0}
-      />
+        <div
+          ref={diagramCanvasRef}
+          className={clsx(
+            'diagram-canvas',
+            diagramViewerState.diagramCursorClass,
+          )}
+          tabIndex={0}
+        />
+      </ContextMenu>
     );
   }),
 );
 
+type DiagramOption = {
+  label: React.ReactNode;
+  value: DataSpaceDiagramAnalysisResult;
+};
+const buildDiagramOption = (
+  diagram: DataSpaceDiagramAnalysisResult,
+): DiagramOption => ({
+  label: (
+    <div className="data-space__viewer__diagram-viewer__header__navigation__selector__label">
+      <ShapesIcon className="data-space__viewer__diagram-viewer__header__navigation__selector__icon" />
+      <div className="data-space__viewer__diagram-viewer__header__navigation__selector__title">
+        {diagram.title ? diagram.title : 'Untitled'}
+      </div>
+    </div>
+  ),
+  value: diagram,
+});
+
+const DataSpaceDiagramViewerHeader = observer(
+  (props: { dataSpaceViewerState: DataSpaceViewerState }) => {
+    const { dataSpaceViewerState } = props;
+    const diagramViewerState = dataSpaceViewerState.diagramViewerState;
+    const diagramOptions =
+      dataSpaceViewerState.dataSpaceAnalysisResult.diagrams.map(
+        buildDiagramOption,
+      );
+    const selectedDiagramOption = diagramViewerState.currentDiagram
+      ? buildDiagramOption(diagramViewerState.currentDiagram)
+      : null;
+    const onDiagramOptionChange = (option: DiagramOption): void => {
+      if (option.value !== diagramViewerState.currentDiagram) {
+        diagramViewerState.setCurrentDiagram(option.value);
+      }
+    };
+    const createModeSwitcher =
+      (
+        editMode: DIAGRAM_INTERACTION_MODE,
+        relationshipMode: DIAGRAM_RELATIONSHIP_EDIT_MODE,
+      ): (() => void) =>
+      (): void =>
+        diagramViewerState.diagramRenderer.changeMode(
+          editMode,
+          relationshipMode,
+        );
+    const createCenterZoomer =
+      (zoomLevel: number): (() => void) =>
+      (): void => {
+        diagramViewerState.diagramRenderer.zoomCenter(zoomLevel / 100);
+      };
+    const zoomToFit = (): void =>
+      diagramViewerState.diagramRenderer.zoomToFit();
+
+    return (
+      <div className="data-space__viewer__diagram-viewer__header">
+        <div className="data-space__viewer__diagram-viewer__header__navigation">
+          <CustomSelectorInput
+            className="data-space__viewer__diagram-viewer__header__navigation__selector"
+            options={diagramOptions}
+            onChange={onDiagramOptionChange}
+            value={selectedDiagramOption}
+            placeholder="Search for a diagram"
+            darkMode={true}
+          />
+          <div className="data-space__viewer__diagram-viewer__header__navigation__pager">
+            <input
+              className="data-space__viewer__diagram-viewer__header__navigation__pager__input input--dark"
+              value={diagramViewerState.currentDiagramIndex}
+              type="number"
+              onChange={(event) => {
+                const value = parseInt(event.target.value, 10);
+                if (
+                  isNaN(value) ||
+                  value < 1 ||
+                  value >
+                    dataSpaceViewerState.dataSpaceAnalysisResult.diagrams.length
+                ) {
+                  return;
+                }
+                diagramViewerState.setCurrentDiagram(
+                  getNonNullableEntry(
+                    dataSpaceViewerState.dataSpaceAnalysisResult.diagrams,
+                    value - 1,
+                  ),
+                );
+              }}
+            />
+          </div>
+          <div className="data-space__viewer__diagram-viewer__header__navigation__pager__count">
+            /{dataSpaceViewerState.dataSpaceAnalysisResult.diagrams.length}
+          </div>
+        </div>
+        <div className="data-space__viewer__diagram-viewer__header__actions">
+          {diagramViewerState.isDiagramRendererInitialized && (
+            <>
+              <div className="data-space__viewer__diagram-viewer__header__group">
+                <button
+                  className="data-space__viewer__diagram-viewer__header__tool"
+                  tabIndex={-1}
+                  onClick={(): void => {
+                    if (diagramViewerState.currentDiagram) {
+                      dataSpaceViewerState.syncZoneWithNavigation(
+                        generateAnchorForDiagram(
+                          diagramViewerState.currentDiagram,
+                        ),
+                      );
+                    }
+                  }}
+                  title="Copy Link"
+                >
+                  <AnchorLinkIcon />
+                </button>
+                <button
+                  className="data-space__viewer__diagram-viewer__header__tool"
+                  tabIndex={-1}
+                  onClick={() => diagramViewerState.diagramRenderer.recenter()}
+                  title="Recenter (R)"
+                >
+                  <CenterFocusIcon className="data-space__viewer__diagram-viewer__icon--recenter" />
+                </button>
+                <button
+                  className={clsx(
+                    'data-space__viewer__diagram-viewer__header__tool',
+                    {
+                      'data-space__viewer__diagram-viewer__header__tool--active':
+                        diagramViewerState.showDescription,
+                    },
+                  )}
+                  tabIndex={-1}
+                  onClick={() =>
+                    diagramViewerState.setShowDescription(
+                      !diagramViewerState.showDescription,
+                    )
+                  }
+                  title="Toggle Description (D)"
+                >
+                  <DescriptionIcon className="data-space__viewer__diagram-viewer__icon--description" />
+                </button>
+              </div>
+              <div className="data-space__viewer__diagram-viewer__header__group__separator" />
+              <div className="data-space__viewer__diagram-viewer__header__group">
+                <button
+                  className={clsx(
+                    'data-space__viewer__diagram-viewer__header__tool',
+                    {
+                      'data-space__viewer__diagram-viewer__header__tool--active':
+                        diagramViewerState.diagramRenderer.interactionMode ===
+                        DIAGRAM_INTERACTION_MODE.LAYOUT,
+                    },
+                  )}
+                  tabIndex={-1}
+                  onClick={createModeSwitcher(
+                    DIAGRAM_INTERACTION_MODE.LAYOUT,
+                    DIAGRAM_RELATIONSHIP_EDIT_MODE.NONE,
+                  )}
+                  title="View Tool (V)"
+                >
+                  <MousePointerIcon className="data-space__viewer__diagram-viewer__icon--layout" />
+                </button>
+                <button
+                  className={clsx(
+                    'data-space__viewer__diagram-viewer__header__tool',
+                    {
+                      'data-space__viewer__diagram-viewer__header__tool--active':
+                        diagramViewerState.diagramRenderer.interactionMode ===
+                        DIAGRAM_INTERACTION_MODE.PAN,
+                    },
+                  )}
+                  tabIndex={-1}
+                  onClick={createModeSwitcher(
+                    DIAGRAM_INTERACTION_MODE.PAN,
+                    DIAGRAM_RELATIONSHIP_EDIT_MODE.NONE,
+                  )}
+                  title="Pan Tool (M)"
+                >
+                  <MoveIcon className="data-space__viewer__diagram-viewer__icon--pan" />
+                </button>
+                <button
+                  className={clsx(
+                    'data-space__viewer__diagram-viewer__header__tool',
+                    {
+                      'data-space__viewer__diagram-viewer__header__tool--active':
+                        diagramViewerState.diagramRenderer.interactionMode ===
+                        DIAGRAM_INTERACTION_MODE.ZOOM_IN,
+                    },
+                  )}
+                  tabIndex={-1}
+                  title="Zoom In (Z)"
+                  onClick={createModeSwitcher(
+                    DIAGRAM_INTERACTION_MODE.ZOOM_IN,
+                    DIAGRAM_RELATIONSHIP_EDIT_MODE.NONE,
+                  )}
+                >
+                  <ZoomInIcon className="data-space__viewer__diagram-viewer__icon--zoom-in" />
+                </button>
+                <button
+                  className={clsx(
+                    'data-space__viewer__diagram-viewer__header__tool',
+                    {
+                      'data-space__viewer__diagram-viewer__header__tool--active':
+                        diagramViewerState.diagramRenderer.interactionMode ===
+                        DIAGRAM_INTERACTION_MODE.ZOOM_OUT,
+                    },
+                  )}
+                  tabIndex={-1}
+                  title="Zoom Out (Z)"
+                  onClick={createModeSwitcher(
+                    DIAGRAM_INTERACTION_MODE.ZOOM_OUT,
+                    DIAGRAM_RELATIONSHIP_EDIT_MODE.NONE,
+                  )}
+                >
+                  <ZoomOutIcon className="data-space__viewer__diagram-viewer__icon--zoom-out" />
+                </button>
+              </div>
+              <div className="data-space__viewer__diagram-viewer__header__group__separator" />
+              <DropdownMenu
+                className="data-space__viewer__diagram-viewer__header__group data-space__viewer__diagram-viewer__header__dropdown"
+                title="Zoom..."
+                content={
+                  <MenuContent>
+                    <MenuContentItem
+                      className="data-space__viewer__diagram-viewer__header__zoomer__dropdown__menu__item"
+                      onClick={zoomToFit}
+                    >
+                      Fit
+                    </MenuContentItem>
+                    <MenuContentDivider />
+                    {DIAGRAM_ZOOM_LEVELS.map((zoomLevel) => (
+                      <MenuContentItem
+                        key={zoomLevel}
+                        className="data-space__viewer__diagram-viewer__header__zoomer__dropdown__menu__item"
+                        onClick={createCenterZoomer(zoomLevel)}
+                      >
+                        {zoomLevel}%
+                      </MenuContentItem>
+                    ))}
+                  </MenuContent>
+                }
+                menuProps={{
+                  anchorOrigin: { vertical: 'bottom', horizontal: 'right' },
+                  transformOrigin: { vertical: 'top', horizontal: 'right' },
+                  elevation: 7,
+                }}
+              >
+                <div className="data-space__viewer__diagram-viewer__header__dropdown__label data-space__viewer__diagram-viewer__header__zoomer__dropdown__label">
+                  {Math.round(diagramViewerState.diagramRenderer.zoom * 100)}%
+                </div>
+                <div className="data-space__viewer__diagram-viewer__header__dropdown__trigger data-space__viewer__diagram-viewer__header__zoomer__dropdown__trigger">
+                  <CaretDownIcon />
+                </div>
+              </DropdownMenu>
+            </>
+          )}
+        </div>
+      </div>
+    );
+  },
+);
+
 export const DataSpaceDiagramViewer = observer(
   (props: { dataSpaceViewerState: DataSpaceViewerState }) => {
     const { dataSpaceViewerState } = props;
+    const diagramViewerState = dataSpaceViewerState.diagramViewerState;
     const analysisResult = dataSpaceViewerState.dataSpaceAnalysisResult;
     const sectionRef = useRef<HTMLDivElement>(null);
     const anchor = generateAnchorForActivity(
       DATA_SPACE_VIEWER_ACTIVITY_MODE.DIAGRAM_VIEWER,
     );
 
+    useCommands(diagramViewerState);
+
     useEffect(() => {
       if (sectionRef.current) {
         dataSpaceViewerState.layoutState.setWikiPageAnchor(
@@ -101,44 +494,25 @@ export const DataSpaceDiagramViewer = observer(
       return () => dataSpaceViewerState.layoutState.unsetWikiPageAnchor(anchor);
     }, [dataSpaceViewerState, anchor]);
 
-    // diagram selector
     const diagramCanvasRef = useRef<HTMLDivElement>(null);
+    const previousDiagram = diagramViewerState.previousDiagram;
+    const nextDiagram = diagramViewerState.nextDiagram;
 
     const showPreviousDiagram = (): void => {
-      if (!dataSpaceViewerState.currentDiagram) {
-        return;
-      }
-      const idx = analysisResult.diagrams.indexOf(
-        dataSpaceViewerState.currentDiagram,
-      );
-      if (idx === 0 || idx === -1) {
-        return;
+      if (previousDiagram) {
+        diagramViewerState.setCurrentDiagram(previousDiagram);
+        dataSpaceViewerState.syncZoneWithNavigation(
+          generateAnchorForDiagram(previousDiagram),
+        );
       }
-      const previousDiagram = guaranteeNonNullable(
-        analysisResult.diagrams[idx - 1],
-      );
-      dataSpaceViewerState.setCurrentDiagram(previousDiagram);
-      dataSpaceViewerState.syncZoneWithNavigation(
-        generateAnchorForDiagram(previousDiagram),
-      );
     };
     const showNextDiagram = (): void => {
-      if (!dataSpaceViewerState.currentDiagram) {
-        return;
-      }
-      const idx = analysisResult.diagrams.indexOf(
-        dataSpaceViewerState.currentDiagram,
-      );
-      if (idx === analysisResult.diagrams.length - 1 || idx === -1) {
-        return;
+      if (nextDiagram) {
+        diagramViewerState.setCurrentDiagram(nextDiagram);
+        dataSpaceViewerState.syncZoneWithNavigation(
+          generateAnchorForDiagram(nextDiagram),
+        );
       }
-      const nextDiagram = guaranteeNonNullable(
-        analysisResult.diagrams[idx + 1],
-      );
-      dataSpaceViewerState.setCurrentDiagram(nextDiagram);
-      dataSpaceViewerState.syncZoneWithNavigation(
-        generateAnchorForDiagram(nextDiagram),
-      );
     };
 
     return (
@@ -158,13 +532,16 @@ export const DataSpaceDiagramViewer = observer(
         <div className="data-space__viewer__wiki__section__content">
           {analysisResult.diagrams.length > 0 && (
             <div className="data-space__viewer__diagram-viewer">
+              <DataSpaceDiagramViewerHeader
+                dataSpaceViewerState={dataSpaceViewerState}
+              />
               <div className="data-space__viewer__diagram-viewer__carousel">
                 <div className="data-space__viewer__diagram-viewer__carousel__frame">
                   <div className="data-space__viewer__diagram-viewer__carousel__frame__display">
-                    {dataSpaceViewerState.currentDiagram && (
+                    {diagramViewerState.currentDiagram && (
                       <DataSpaceDiagramCanvas
                         dataSpaceViewerState={dataSpaceViewerState}
-                        diagram={dataSpaceViewerState.currentDiagram.diagram}
+                        diagram={diagramViewerState.currentDiagram.diagram}
                         ref={diagramCanvasRef}
                       />
                     )}
@@ -172,11 +549,12 @@ export const DataSpaceDiagramViewer = observer(
                   <button
                     className="data-space__viewer__diagram-viewer__carousel__frame__navigator data-space__viewer__diagram-viewer__carousel__frame__navigator--back"
                     tabIndex={-1}
-                    title="Previous"
-                    disabled={
-                      getNullableFirstEntry(analysisResult.diagrams) ===
-                      dataSpaceViewerState.currentDiagram
-                    }
+                    title={`Previous - ${
+                      previousDiagram?.title
+                        ? previousDiagram.title
+                        : '(untitled)'
+                    } (⇦)`}
+                    disabled={!previousDiagram}
                     onClick={showPreviousDiagram}
                   >
                     <ThinChevronLeftIcon />
@@ -184,11 +562,10 @@ export const DataSpaceDiagramViewer = observer(
                   <button
                     className="data-space__viewer__diagram-viewer__carousel__frame__navigator data-space__viewer__diagram-viewer__carousel__frame__navigator--next"
                     tabIndex={-1}
-                    title="Next"
-                    disabled={
-                      getNullableLastEntry(analysisResult.diagrams) ===
-                      dataSpaceViewerState.currentDiagram
-                    }
+                    title={`Next - ${
+                      nextDiagram?.title ? nextDiagram.title : '(untitled)'
+                    } (⇨)`}
+                    disabled={!nextDiagram}
                     onClick={showNextDiagram}
                   >
                     <ThinChevronRightIcon />
@@ -202,11 +579,14 @@ export const DataSpaceDiagramViewer = observer(
                             'data-space__viewer__diagram-viewer__carousel__frame__indicator',
                             {
                               'data-space__viewer__diagram-viewer__carousel__frame__indicator--active':
-                                dataSpaceViewerState.currentDiagram === diagram,
+                                diagramViewerState.currentDiagram === diagram,
                             },
                           )}
+                          title={`View Diagram - ${
+                            diagram.title ? diagram.title : '(untitled)'
+                          }`}
                           onClick={() => {
-                            dataSpaceViewerState.setCurrentDiagram(diagram);
+                            diagramViewerState.setCurrentDiagram(diagram);
                             dataSpaceViewerState.syncZoneWithNavigation(
                               generateAnchorForDiagram(diagram),
                             );