@finos/legend-extension-dsl-diagram 8.1.195 → 8.1.196

package/src/components/DiagramViewer.tsx

@@ -0,0 +1,650 @@
+/**
+ * Copyright (c) 2025-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 {
+  AnchorLinkIcon,
+  CaretDownIcon,
+  CenterFocusIcon,
+  CircleIcon,
+  CloseIcon,
+  ContextMenu,
+  CustomSelectorInput,
+  DescriptionIcon,
+  ControlledDropdownMenu,
+  MenuContent,
+  MenuContentDivider,
+  MenuContentItem,
+  MousePointerIcon,
+  MoveIcon,
+  ShapesIcon,
+  ThinChevronDownIcon,
+  ThinChevronLeftIcon,
+  ThinChevronRightIcon,
+  ThinChevronUpIcon,
+  ZoomInIcon,
+  ZoomOutIcon,
+  clsx,
+  useResizeDetector,
+  createFilter,
+  MarkdownTextViewer,
+} from '@finos/legend-art';
+import { observer } from 'mobx-react-lite';
+import { forwardRef, useEffect, useRef } from 'react';
+import type { Diagram } from '../graph/metamodel/pure/packageableElements/diagram/DSL_Diagram_Diagram.js';
+import {
+  type DiagramAnalysisResult,
+  DIAGRAM_INTERACTION_MODE,
+  DIAGRAM_RELATIONSHIP_EDIT_MODE,
+  DIAGRAM_ZOOM_LEVELS,
+  DiagramRenderer,
+} from './DiagramRenderer.js';
+import type { DiagramViewerState } from './DiagramViewerState.js';
+import { at } from '@finos/legend-shared';
+import {
+  useCommands,
+  type GenericLegendApplicationStore,
+  type NavigationZone,
+} from '@finos/legend-application';
+import type { Class } from '@finos/legend-graph';
+
+enum DIAGRAM_VIEWER_MODES {
+  DIAGRAM_VIEWER = 'diagram-viewer',
+  MODELS_DOCUMENTATION = 'models-documentation',
+}
+
+const DiagramCanvas = observer(
+  forwardRef<
+    HTMLDivElement,
+    {
+      diagramViewerState: DiagramViewerState;
+      diagram: Diagram;
+      actions: {
+        onQueryClass?: ((_class: Class) => void) | undefined;
+        onViewClassDocumentation: (classPath: string) => void;
+        hasClassDocumentation: (classPath: string) => boolean;
+        onGenerateAnchorForActivity: (activity: string) => string;
+        onChangeZone: (zone: NavigationZone, force?: boolean) => void;
+      };
+    }
+  >(function DiagramCanvas(props, _ref) {
+    const { diagramViewerState, diagram, actions } = props;
+    const {
+      onQueryClass,
+      onViewClassDocumentation,
+      hasClassDocumentation,
+      onGenerateAnchorForActivity,
+      onChangeZone,
+    } = actions;
+    const ref = _ref as React.RefObject<HTMLDivElement>;
+    const descriptionText = diagramViewerState.currentDiagram?.description;
+
+    const { width, height } = useResizeDetector<HTMLDivElement>({
+      refreshMode: 'debounce',
+      refreshRate: 50,
+      targetRef: ref,
+    });
+
+    useEffect(() => {
+      diagramViewerState.setExpandDescription(false);
+    }, [diagramViewerState, diagramViewerState.currentDiagram]);
+
+    useEffect(() => {
+      const renderer = new DiagramRenderer(ref.current, diagram);
+      diagramViewerState.setDiagramRenderer(renderer);
+      diagramViewerState.setupDiagramRenderer();
+      renderer.render({ initial: true });
+    }, [ref, diagramViewerState, diagram]);
+
+    useEffect(() => {
+      if (diagramViewerState.isDiagramRendererInitialized) {
+        diagramViewerState.diagramRenderer.refresh();
+      }
+    }, [diagramViewerState, width, height]);
+
+    const queryClass = (): void => {
+      if (onQueryClass && diagramViewerState.contextMenuClassView) {
+        onQueryClass(diagramViewerState.contextMenuClassView.class.value);
+      }
+    };
+
+    const viewClassDocumentation = (): void => {
+      if (
+        diagramViewerState.contextMenuClassView &&
+        hasClassDocumentation(
+          diagramViewerState.contextMenuClassView.class.value.path,
+        )
+      ) {
+        onViewClassDocumentation(
+          diagramViewerState.contextMenuClassView.class.value.path,
+        );
+        onChangeZone(
+          onGenerateAnchorForActivity(
+            DIAGRAM_VIEWER_MODES.MODELS_DOCUMENTATION,
+          ),
+        );
+      }
+    };
+
+    return (
+      <ContextMenu
+        className="data-space__viewer__diagram-viewer__canvas"
+        content={
+          <MenuContent>
+            <MenuContentItem
+              onClick={queryClass}
+              disabled={!diagramViewerState.contextMenuClassView}
+            >
+              Query
+            </MenuContentItem>
+            <MenuContentItem
+              onClick={viewClassDocumentation}
+              disabled={
+                !diagramViewerState.contextMenuClassView ||
+                !hasClassDocumentation(
+                  diagramViewerState.contextMenuClassView.class.value.path,
+                )
+              }
+            >
+              See Model 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 ? (
+                <MarkdownTextViewer
+                  value={{
+                    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>
+        )}
+        <div
+          ref={ref}
+          className={clsx(
+            'diagram-canvas',
+            diagramViewerState.diagramCursorClass,
+          )}
+          tabIndex={0}
+        />
+      </ContextMenu>
+    );
+  }),
+);
+
+type DiagramOption = {
+  label: React.ReactNode;
+  value: DiagramAnalysisResult;
+};
+const buildDiagramOption = (diagram: DiagramAnalysisResult): 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 DiagramViewerHeader = observer(
+  (props: {
+    applicationStore: GenericLegendApplicationStore;
+    diagramViewerState: DiagramViewerState;
+    actions: {
+      onSyncZoneWithNavigation: (diagram: DiagramAnalysisResult) => void;
+    };
+  }) => {
+    const { applicationStore, diagramViewerState, actions } = props;
+    const { onSyncZoneWithNavigation } = actions;
+    const diagramOptions = diagramViewerState.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 diagramFilterOption = createFilter({
+      ignoreCase: true,
+      ignoreAccents: false,
+      stringify: (option: { data: DiagramOption }) => option.data.value.title,
+    });
+    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={
+              !applicationStore.layoutService
+                .TEMPORARY__isLightColorThemeEnabled
+            }
+            filterOption={diagramFilterOption}
+          />
+          <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 > diagramViewerState.diagrams.length
+                ) {
+                  return;
+                }
+                diagramViewerState.setCurrentDiagram(
+                  at(diagramViewerState.diagrams, value - 1),
+                );
+              }}
+            />
+          </div>
+          <div className="data-space__viewer__diagram-viewer__header__navigation__pager__count">
+            /{diagramViewerState.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) {
+                      onSyncZoneWithNavigation(
+                        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" />
+              <ControlledDropdownMenu
+                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>
+              </ControlledDropdownMenu>
+            </>
+          )}
+        </div>
+      </div>
+    );
+  },
+);
+
+export const DiagramPlaceholder: React.FC<{ message: string }> = (props) => (
+  <div className="diagram-viewer__placeholder">{props.message}</div>
+);
+
+export const DiagramViewer = observer(
+  (props: {
+    applicationStore: GenericLegendApplicationStore;
+    diagramViewerState: DiagramViewerState;
+    actions: {
+      onQueryClass?: ((_class: Class) => void) | undefined;
+      onViewClassDocumentation: (classPath: string) => void;
+      hasClassDocumentation: (classPath: string) => boolean;
+      onSyncZoneWithNavigation: (diagram: DiagramAnalysisResult) => void;
+      onGenerateAnchorForActivity: (activity: string) => string;
+      onChangeZone: (zone: NavigationZone, force?: boolean) => void;
+      onSetWikiPageAnchor: (anchorKey: string, element: HTMLElement) => void;
+      onUnsetWikiPageAnchor: (anchorKey: string) => void;
+    };
+  }) => {
+    const { diagramViewerState, applicationStore, actions } = props;
+    const {
+      onSyncZoneWithNavigation,
+      onGenerateAnchorForActivity,
+      onSetWikiPageAnchor,
+      onUnsetWikiPageAnchor,
+      onChangeZone,
+    } = actions;
+    const diagrams = diagramViewerState.diagrams;
+    const sectionRef = useRef<HTMLDivElement>(null);
+    const anchor = onGenerateAnchorForActivity(
+      DIAGRAM_VIEWER_MODES.DIAGRAM_VIEWER,
+    );
+
+    useCommands(diagramViewerState);
+
+    useEffect(() => {
+      if (sectionRef.current) {
+        onSetWikiPageAnchor(anchor, sectionRef.current);
+      }
+      return () => onUnsetWikiPageAnchor(anchor);
+    }, [onSetWikiPageAnchor, onUnsetWikiPageAnchor, anchor]);
+
+    const diagramCanvasRef = useRef<HTMLDivElement>(null);
+    const previousDiagram = diagramViewerState.previousDiagram;
+    const nextDiagram = diagramViewerState.nextDiagram;
+
+    const showPreviousDiagram = (): void => {
+      if (previousDiagram) {
+        diagramViewerState.setCurrentDiagram(previousDiagram);
+        onSyncZoneWithNavigation(previousDiagram);
+      }
+    };
+    const showNextDiagram = (): void => {
+      if (nextDiagram) {
+        diagramViewerState.setCurrentDiagram(nextDiagram);
+        onSyncZoneWithNavigation(nextDiagram);
+      }
+    };
+
+    return (
+      <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
+            <button
+              className="data-space__viewer__wiki__section__header__anchor"
+              tabIndex={-1}
+              onClick={() => onChangeZone(anchor, true)}
+            >
+              <AnchorLinkIcon />
+            </button>
+          </div>
+        </div>
+        <div className="data-space__viewer__wiki__section__content">
+          {diagrams.length > 0 && (
+            <div className="data-space__viewer__diagram-viewer">
+              <DiagramViewerHeader
+                applicationStore={applicationStore}
+                diagramViewerState={diagramViewerState}
+                actions={actions}
+              />
+              <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">
+                    {diagramViewerState.currentDiagram && (
+                      <DiagramCanvas
+                        diagramViewerState={diagramViewerState}
+                        diagram={diagramViewerState.currentDiagram.diagram}
+                        ref={diagramCanvasRef}
+                        actions={actions}
+                      />
+                    )}
+                  </div>
+                  <button
+                    className="data-space__viewer__diagram-viewer__carousel__frame__navigator data-space__viewer__diagram-viewer__carousel__frame__navigator--back"
+                    tabIndex={-1}
+                    title={`Previous - ${
+                      previousDiagram?.title
+                        ? previousDiagram.title
+                        : '(untitled)'
+                    } (⇦)`}
+                    disabled={!previousDiagram}
+                    onClick={showPreviousDiagram}
+                  >
+                    <ThinChevronLeftIcon />
+                  </button>
+                  <button
+                    className="data-space__viewer__diagram-viewer__carousel__frame__navigator data-space__viewer__diagram-viewer__carousel__frame__navigator--next"
+                    tabIndex={-1}
+                    title={`Next - ${
+                      nextDiagram?.title ? nextDiagram.title : '(untitled)'
+                    } (⇨)`}
+                    disabled={!nextDiagram}
+                    onClick={showNextDiagram}
+                  >
+                    <ThinChevronRightIcon />
+                  </button>
+                  <div className="data-space__viewer__diagram-viewer__carousel__frame__indicators">
+                    <div className="data-space__viewer__diagram-viewer__carousel__frame__indicators__notch">
+                      {diagrams.map((diagram) => (
+                        <button
+                          key={diagram.uuid}
+                          className={clsx(
+                            'data-space__viewer__diagram-viewer__carousel__frame__indicator',
+                            {
+                              'data-space__viewer__diagram-viewer__carousel__frame__indicator--active':
+                                diagramViewerState.currentDiagram === diagram,
+                            },
+                          )}
+                          title={`View Diagram - ${
+                            diagram.title ? diagram.title : '(untitled)'
+                          }`}
+                          onClick={() => {
+                            diagramViewerState.setCurrentDiagram(diagram);
+                            onSyncZoneWithNavigation(diagram);
+                          }}
+                        >
+                          <CircleIcon />
+                        </button>
+                      ))}
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          )}
+          {!diagrams.length && <DiagramPlaceholder message="(not specified)" />}
+        </div>
+      </div>
+    );
+  },
+);