added zoom in zoom out for DAGs. #774 (#899)

Author: kriyanshii

Diff for: ui/src/components/atoms/Mermaid.tsx

@@ -5,6 +5,7 @@ import '@fortawesome/fontawesome-free/css/all.min.css';
 type Props = {
   def: string;
   style?: CSSProperties;
+  scale: number;
 };
 
 // Mermaidの初期設定
@@ -23,7 +24,7 @@ mermaid.initialize({
   logLevel: 4, // ERROR
 });
 
-function Mermaid({ def, style = {} }: Props) {
+function Mermaid({ def, style = {}, scale }: Props) {
   const ref = React.useRef<HTMLDivElement>(null);
   const [uniqueId] = React.useState(
     () => `mermaid-${Math.random().toString(36).substr(2, 9)}`
@@ -36,6 +37,7 @@ function Mermaid({ def, style = {} }: Props) {
   const dStyle: CSSProperties = {
     overflowX: 'auto',
     padding: '2em',
+    position: 'relative',
   };
 
   const render = async () => {
@@ -76,29 +78,36 @@ function Mermaid({ def, style = {} }: Props) {
     }
   };
 
-  const renderWithRetry = () => {
-    try {
-      render();
-    } catch (error) {
-      console.error('error rendering mermaid, retrying, error:');
-      console.error(error);
-      console.error(def);
-      setTimeout(renderWithRetry, 1);
-    }
-  };
-
   React.useEffect(() => {
-    renderWithRetry();
+    render();
   }, [def]);
 
+  React.useEffect(() => {
+    if (ref.current) {
+      const svg = ref.current.querySelector('svg');
+      if (svg) {
+        svg.style.transform = `scale(${scale})`;
+        svg.style.transformOrigin = 'top left';
+      }
+    }
+  }, [scale]);
+
   return (
     <div style={dStyle}>
-      <div className="mermaid" ref={ref} style={mStyle} />
+      <div
+        className="mermaid"
+        ref={ref}
+        style={{
+          ...mStyle,
+          overflow: 'auto',
+          maxHeight: '80vh',
+        }}
+      />
     </div>
   );
 }
 
 // メモ化の条件を維持
 export default React.memo(Mermaid, (prev, next) => {
-  return prev.def === next.def;
+  return prev.def === next.def && prev.scale === next.scale;
 });

Diff for: ui/src/components/molecules/Graph.tsx

@@ -1,7 +1,9 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { Node, NodeStatus } from '../../models';
 import { Step } from '../../models';
 import Mermaid from '../atoms/Mermaid';
+import { ToggleButton, ToggleButtonGroup } from '@mui/material';
+import { ZoomIn, ZoomOut, RestartAlt } from '@mui/icons-material';
 
 type onClickNode = (name: string) => void;
 export type FlowchartType = 'TD' | 'LR';
@@ -29,6 +31,20 @@ const Graph: React.FC<Props> = ({
   showIcons = true,
   animate = true,
 }) => {
+  const [scale, setScale] = useState(1);
+
+  const zoomIn = () => {
+    setScale((prevScale) => Math.min(prevScale + 0.1, 2));
+  };
+
+  const zoomOut = () => {
+    setScale((prevScale) => Math.max(prevScale - 0.1, 0.5));
+  };
+
+  const resetZoom = () => {
+    setScale(1);
+  };
+
   // Calculate width based on flowchart type and graph breadth
   const width = React.useMemo(() => {
     if (!steps) return '100%';
@@ -59,6 +75,17 @@ const Graph: React.FC<Props> = ({
     backgroundSize: '20px 20px',
   };
 
+  const containerStyle = {
+    position: 'relative' as const,
+  };
+
+  const toggleButtonStyle = {
+    position: 'absolute' as const,
+    top: '10px',
+    right: '10px',
+    zIndex: 1,
+  };
+
   // Define FontAwesome icons for each status with colors and animations
   const statusIcons: { [key: number]: string } = {
     [NodeStatus.None]:
@@ -171,7 +198,38 @@ const Graph: React.FC<Props> = ({
     return dat.join('\n');
   }, [steps, onClickNode, flowchart, showIcons]);
 
-  return <Mermaid style={mermaidStyle} def={graph} />;
+  return (
+    <div style={containerStyle}>
+      <ToggleButtonGroup
+        size="small"
+        sx={{
+          ...toggleButtonStyle,
+          backgroundColor: 'white',
+          '& .MuiToggleButton-root': {
+            border: '1px solid rgba(0, 0, 0, 0.12)',
+            borderRadius: '4px !important',
+            marginRight: '8px',
+            padding: '4px 8px',
+            color: 'rgba(0, 0, 0, 0.54)',
+            '&:hover': {
+              backgroundColor: 'rgba(0, 0, 0, 0.04)',
+            },
+          },
+        }}
+      >
+        <ToggleButton value="zoomin" onClick={zoomIn}>
+          <ZoomIn fontSize="small" />
+        </ToggleButton>
+        <ToggleButton value="zoomout" onClick={zoomOut}>
+          <ZoomOut fontSize="small" />
+        </ToggleButton>
+        <ToggleButton value="reset" onClick={resetZoom}>
+          <RestartAlt fontSize="small" />
+        </ToggleButton>
+      </ToggleButtonGroup>
+      <Mermaid style={mermaidStyle} def={graph} scale={scale} />
+    </div>
+  );
 };
 
 // Function to calculate the maximum breadth of the graph