Add zoom controls to Mermaid charts (#10586)

Author: smallbrownbike

package.json

@@ -139,6 +139,7 @@
         "react-textarea-autosize": "^8.4.0",
         "react-transition-group": "^4.4.5",
         "react-tsparticles": "^2.11.0",
+        "react-zoom-pan-pinch": "^3.7.0",
         "reactflow": "^11.11.4",
         "redoc": "^2.0.0-rc.62",
         "redux": "^4.0.5",

src/components/Mermaid/index.tsx

@@ -1,5 +1,36 @@
 import React, { useEffect, useRef, useState } from 'react'
 import mermaid from 'mermaid'
+import { TransformWrapper, TransformComponent, useControls } from 'react-zoom-pan-pinch'
+import { IconMinus, IconPlus, IconRefresh } from '@posthog/icons'
+
+const ControlButton = ({ children, onClick }: { children: React.ReactNode; onClick: () => void }) => {
+    return (
+        <button
+            onClick={onClick}
+            className="p-2 border border-light dark:border-dark rounded-md bg-accent dark:bg-accent-dark"
+        >
+            {children}
+        </button>
+    )
+}
+
+const Controls = () => {
+    const { zoomIn, zoomOut, resetTransform } = useControls()
+
+    return (
+        <div className="opacity-0 group-hover:opacity-100 transition-opacity space-x-1 absolute bottom-0 right-0 z-10">
+            <ControlButton onClick={() => zoomIn()}>
+                <IconPlus className="w-4" />
+            </ControlButton>
+            <ControlButton onClick={() => zoomOut()}>
+                <IconMinus className="w-4" />
+            </ControlButton>
+            <ControlButton onClick={() => resetTransform()}>
+                <IconRefresh className="w-4" />
+            </ControlButton>
+        </div>
+    )
+}
 
 export default function Mermaid({ children }: { children: string }): JSX.Element {
     const [loading, setLoading] = useState(true)
@@ -17,13 +48,18 @@ export default function Mermaid({ children }: { children: string }): JSX.Element
         }
     }, [])
     return (
-        <div className="relative">
+        <div className="relative group">
             {loading && (
                 <div className="bg-accent dark:bg-accent-dark flex items-center justify-center size-full rounded-md animate-pulse absolute inset-0" />
             )}
-            <div ref={mermaidRef} className={`${loading ? 'invisible' : ''} mermaid-container`}>
-                {children}
-            </div>
+            <TransformWrapper>
+                <Controls />
+                <TransformComponent contentStyle={{ width: '100%' }} wrapperStyle={{ width: '100%' }}>
+                    <div ref={mermaidRef} className={`${loading ? 'invisible' : ''} mermaid-container w-full`}>
+                        {children}
+                    </div>
+                </TransformComponent>
+            </TransformWrapper>
         </div>
     )
 }

yarn.lock

@@ -21665,6 +21665,11 @@ react-tsparticles@^2.11.0:
   dependencies:
     tsparticles-engine "^2.12.0"
 
+react-zoom-pan-pinch@^3.7.0:
+  version "3.7.0"
+  resolved "https://registry.yarnpkg.com/react-zoom-pan-pinch/-/react-zoom-pan-pinch-3.7.0.tgz#7db4d2ec49c316eb20f71c56e9012eeb3ef4b504"
+  integrity sha512-UmReVZ0TxlKzxSbYiAj+LeGRW8s8LraAFTXRAxzMYnNRgGPsxCudwZKVkjvGmjtx7SW/hZamt69NUmGf4xrkXA==
+
 react@^16.13.1:
   version "16.14.0"
   resolved "https://registry.yarnpkg.com/react/-/react-16.14.0.tgz#94d776ddd0aaa37da3eda8fc5b6b18a4c9a3114d"
@@ -23700,16 +23705,7 @@ string-similarity@^1.2.2:
     lodash.map "^4.6.0"
     lodash.maxby "^4.6.0"
 
-"string-width-cjs@npm:string-width@^4.2.0":
-  version "4.2.3"
-  resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
-  integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
-  dependencies:
-    emoji-regex "^8.0.0"
-    is-fullwidth-code-point "^3.0.0"
-    strip-ansi "^6.0.1"
-
-"string-width@^1.0.2 || 2 || 3 || 4", string-width@^4.0.0, string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.2, string-width@^4.2.3:
+"string-width-cjs@npm:string-width@^4.2.0", "string-width@^1.0.2 || 2 || 3 || 4", string-width@^4.0.0, string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.2, string-width@^4.2.3:
   version "4.2.3"
   resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
   integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
@@ -23843,7 +23839,7 @@ stringify-object@^3.3.0:
     is-obj "^1.0.1"
     is-regexp "^1.0.0"
 
-"strip-ansi-cjs@npm:strip-ansi@^6.0.1":
+"strip-ansi-cjs@npm:strip-ansi@^6.0.1", strip-ansi@^6.0.0, strip-ansi@^6.0.1:
   version "6.0.1"
   resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
   integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
@@ -23871,13 +23867,6 @@ strip-ansi@^5.2.0:
   dependencies:
     ansi-regex "^4.1.0"
 
-strip-ansi@^6.0.0, strip-ansi@^6.0.1:
-  version "6.0.1"
-  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
-  integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
-  dependencies:
-    ansi-regex "^5.0.1"
-
 strip-ansi@^7.0.1:
   version "7.1.0"
   resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-7.1.0.tgz#d5b6568ca689d8561370b0707685d22434faff45"
@@ -26366,7 +26355,7 @@ worker-rpc@^0.1.0:
   dependencies:
     microevent.ts "~0.1.1"
 
-"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0":
+"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0", wrap-ansi@^7.0.0:
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
   integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
@@ -26384,15 +26373,6 @@ wrap-ansi@^6.2.0:
     string-width "^4.1.0"
     strip-ansi "^6.0.0"
 
-wrap-ansi@^7.0.0:
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
-  integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
-  dependencies:
-    ansi-styles "^4.0.0"
-    string-width "^4.1.0"
-    strip-ansi "^6.0.0"
-
 wrap-ansi@^8.1.0:
   version "8.1.0"
   resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-8.1.0.tgz#56dc22368ee570face1b49819975d9b9a5ead214"