From d26afdaeeaa05df37bfa550e7bb2818ecf6cc97b Mon Sep 17 00:00:00 2001 From: zoeyTM Date: Mon, 23 Sep 2024 06:42:39 -0400 Subject: [PATCH 1/2] implement svg zoom for mermaid diagram visualization --- packages/ui/package.json | 2 +- packages/ui/src/components/mermaid.tsx | 17 +++++ packages/ui/src/main.css | 13 ++++ pnpm-lock.yaml | 88 +++++++++++++++++--------- 4 files changed, 89 insertions(+), 31 deletions(-) diff --git a/packages/ui/package.json b/packages/ui/package.json index bca8a1005..40b59a29c 100644 --- a/packages/ui/package.json +++ b/packages/ui/package.json @@ -14,7 +14,6 @@ "clean": "rimraf dist tsconfig.tsbuildinfo", "prepack": "pnpm build" }, - "dependencies": {}, "devDependencies": { "@fontsource/roboto": "^5.0.8", "@nomicfoundation/ignition-core": "workspace:^", @@ -32,6 +31,7 @@ "react-router-dom": "6.11.0", "react-tooltip": "^5.21.4", "styled-components": "5.3.10", + "svg-pan-zoom": "^3.6.1", "vite": "^5.0.0", "vite-plugin-singlefile": "^2.0.1" } diff --git a/packages/ui/src/components/mermaid.tsx b/packages/ui/src/components/mermaid.tsx index 8ef9b7c52..50bb81e7a 100644 --- a/packages/ui/src/components/mermaid.tsx +++ b/packages/ui/src/components/mermaid.tsx @@ -1,11 +1,13 @@ import React, { useEffect, useMemo } from "react"; import styled from "styled-components"; +import svgPanZoom from "svg-pan-zoom"; import { IgnitionModule, IgnitionModuleResult, } from "@nomicfoundation/ignition-core/ui-helpers"; import mermaid from "mermaid"; + import { toMermaid } from "../utils/to-mermaid"; export const Mermaid: React.FC<{ @@ -23,6 +25,7 @@ export const Mermaid: React.FC<{ useEffect(() => { mermaid.initialize({ + maxTextSize: 500000, flowchart: { padding: 50, }, @@ -31,6 +34,20 @@ export const Mermaid: React.FC<{ mermaid.contentLoaded(); }); + // requestAnimationFrame is used to ensure that the svgPanZoom is called after the svg is rendered + useEffect(() => { + requestAnimationFrame(() => { + setTimeout(() => { + svgPanZoom(".mermaid > svg", { + zoomEnabled: true, + controlIconsEnabled: true, + fit: true, + center: true, + }); + }, 0); + }); + }); + return (
{diagram}
diff --git a/packages/ui/src/main.css b/packages/ui/src/main.css index 0a8c0c8e0..13b13163b 100644 --- a/packages/ui/src/main.css +++ b/packages/ui/src/main.css @@ -45,11 +45,24 @@ body { /* mermaid styles */ +.mermaid { + background: #fbfbfb; +} + .mermaid * { font-family: "Roboto", sans-serif; font-size: 30px; } +.mermaid svg { + height: 300px; + vertical-align: middle; +} + +.mermaid span { + cursor: default; +} + .mermaid rect { rx: 5; ry: 5; diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index bd727a9d1..563456643 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -121,7 +121,7 @@ importers: version: link:../../packages/hardhat-plugin-ethers '@nomicfoundation/hardhat-toolbox': specifier: 4.0.0 - version: 4.0.0(@nomicfoundation/hardhat-chai-matchers@2.0.7(@nomicfoundation/hardhat-ethers@3.0.8(ethers@6.13.2)(hardhat@2.22.10(ts-node@10.9.1(@types/node@18.19.50)(typescript@5.5.4))(typescript@5.5.4)))(chai@4.4.1)(ethers@6.13.2)(hardhat@2.22.10(ts-node@10.9.1(@types/node@18.19.50)(typescript@5.5.4))(typescript@5.5.4)))(@nomicfoundation/hardhat-ethers@3.0.8(ethers@6.13.2)(hardhat@2.22.10(ts-node@10.9.1(@types/node@18.19.50)(typescript@5.5.4))(typescript@5.5.4)))(@nomicfoundation/hardhat-network-helpers@1.0.10(hardhat@2.22.10(ts-node@10.9.1(@types/node@18.19.50)(typescript@5.5.4))(typescript@5.5.4)))(@nomicfoundation/hardhat-verify@2.0.10(hardhat@2.22.10(ts-node@10.9.1(@types/node@18.19.50)(typescript@5.5.4))(typescript@5.5.4)))(@typechain/ethers-v6@0.5.1(ethers@6.13.2)(typechain@8.3.2(typescript@5.5.4))(typescript@5.5.4))(@typechain/hardhat@9.1.0(@typechain/ethers-v6@0.5.1(ethers@6.13.2)(typechain@8.3.2(typescript@5.5.4))(typescript@5.5.4))(ethers@6.13.2)(hardhat@2.22.10(ts-node@10.9.1(@types/node@18.19.50)(typescript@5.5.4))(typescript@5.5.4))(typechain@8.3.2(typescript@5.5.4)))(@types/chai@4.3.19)(@types/mocha@9.1.1)(@types/node@18.19.50)(chai@4.4.1)(ethers@6.13.2)(hardhat-gas-reporter@1.0.10(hardhat@2.22.10(ts-node@10.9.1(@types/node@18.19.50)(typescript@5.5.4))(typescript@5.5.4)))(hardhat@2.22.10(ts-node@10.9.1(@types/node@18.19.50)(typescript@5.5.4))(typescript@5.5.4))(solidity-coverage@0.8.13(hardhat@2.22.10(ts-node@10.9.1(@types/node@18.19.50)(typescript@5.5.4))(typescript@5.5.4)))(ts-node@10.9.1(@types/node@18.19.50)(typescript@5.5.4))(typechain@8.3.2(typescript@5.5.4))(typescript@5.5.4) + version: 4.0.0(3ldts3gexhakbcnhhpvofqsyj4) hardhat: specifier: ^2.18.0 version: 2.22.10(ts-node@10.9.1(@types/node@18.19.50)(typescript@5.5.4))(typescript@5.5.4) @@ -136,7 +136,7 @@ importers: version: link:../../packages/hardhat-plugin-ethers '@nomicfoundation/hardhat-toolbox': specifier: 4.0.0 - version: 4.0.0(@nomicfoundation/hardhat-chai-matchers@2.0.7(@nomicfoundation/hardhat-ethers@3.0.8(ethers@6.13.2)(hardhat@2.22.10(ts-node@10.9.1(@types/node@18.19.50)(typescript@5.5.4))(typescript@5.5.4)))(chai@4.4.1)(ethers@6.13.2)(hardhat@2.22.10(ts-node@10.9.1(@types/node@18.19.50)(typescript@5.5.4))(typescript@5.5.4)))(@nomicfoundation/hardhat-ethers@3.0.8(ethers@6.13.2)(hardhat@2.22.10(ts-node@10.9.1(@types/node@18.19.50)(typescript@5.5.4))(typescript@5.5.4)))(@nomicfoundation/hardhat-network-helpers@1.0.10(hardhat@2.22.10(ts-node@10.9.1(@types/node@18.19.50)(typescript@5.5.4))(typescript@5.5.4)))(@nomicfoundation/hardhat-verify@2.0.10(hardhat@2.22.10(ts-node@10.9.1(@types/node@18.19.50)(typescript@5.5.4))(typescript@5.5.4)))(@typechain/ethers-v6@0.5.1(ethers@6.13.2)(typechain@8.3.2(typescript@5.5.4))(typescript@5.5.4))(@typechain/hardhat@9.1.0(@typechain/ethers-v6@0.5.1(ethers@6.13.2)(typechain@8.3.2(typescript@5.5.4))(typescript@5.5.4))(ethers@6.13.2)(hardhat@2.22.10(ts-node@10.9.1(@types/node@18.19.50)(typescript@5.5.4))(typescript@5.5.4))(typechain@8.3.2(typescript@5.5.4)))(@types/chai@4.3.19)(@types/mocha@9.1.1)(@types/node@18.19.50)(chai@4.4.1)(ethers@6.13.2)(hardhat-gas-reporter@1.0.10(hardhat@2.22.10(ts-node@10.9.1(@types/node@18.19.50)(typescript@5.5.4))(typescript@5.5.4)))(hardhat@2.22.10(ts-node@10.9.1(@types/node@18.19.50)(typescript@5.5.4))(typescript@5.5.4))(solidity-coverage@0.8.13(hardhat@2.22.10(ts-node@10.9.1(@types/node@18.19.50)(typescript@5.5.4))(typescript@5.5.4)))(ts-node@10.9.1(@types/node@18.19.50)(typescript@5.5.4))(typechain@8.3.2(typescript@5.5.4))(typescript@5.5.4) + version: 4.0.0(3ldts3gexhakbcnhhpvofqsyj4) hardhat: specifier: ^2.18.0 version: 2.22.10(ts-node@10.9.1(@types/node@18.19.50)(typescript@5.5.4))(typescript@5.5.4) @@ -151,7 +151,7 @@ importers: version: link:../../packages/hardhat-plugin-ethers '@nomicfoundation/hardhat-toolbox': specifier: 4.0.0 - version: 4.0.0(@nomicfoundation/hardhat-chai-matchers@2.0.7(@nomicfoundation/hardhat-ethers@3.0.8(ethers@6.13.2)(hardhat@2.22.10(ts-node@10.9.1(@types/node@18.19.50)(typescript@5.5.4))(typescript@5.5.4)))(chai@4.4.1)(ethers@6.13.2)(hardhat@2.22.10(ts-node@10.9.1(@types/node@18.19.50)(typescript@5.5.4))(typescript@5.5.4)))(@nomicfoundation/hardhat-ethers@3.0.8(ethers@6.13.2)(hardhat@2.22.10(ts-node@10.9.1(@types/node@18.19.50)(typescript@5.5.4))(typescript@5.5.4)))(@nomicfoundation/hardhat-network-helpers@1.0.10(hardhat@2.22.10(ts-node@10.9.1(@types/node@18.19.50)(typescript@5.5.4))(typescript@5.5.4)))(@nomicfoundation/hardhat-verify@2.0.10(hardhat@2.22.10(ts-node@10.9.1(@types/node@18.19.50)(typescript@5.5.4))(typescript@5.5.4)))(@typechain/ethers-v6@0.5.1(ethers@6.13.2)(typechain@8.3.2(typescript@5.5.4))(typescript@5.5.4))(@typechain/hardhat@9.1.0(@typechain/ethers-v6@0.5.1(ethers@6.13.2)(typechain@8.3.2(typescript@5.5.4))(typescript@5.5.4))(ethers@6.13.2)(hardhat@2.22.10(ts-node@10.9.1(@types/node@18.19.50)(typescript@5.5.4))(typescript@5.5.4))(typechain@8.3.2(typescript@5.5.4)))(@types/chai@4.3.19)(@types/mocha@9.1.1)(@types/node@18.19.50)(chai@4.4.1)(ethers@6.13.2)(hardhat-gas-reporter@1.0.10(hardhat@2.22.10(ts-node@10.9.1(@types/node@18.19.50)(typescript@5.5.4))(typescript@5.5.4)))(hardhat@2.22.10(ts-node@10.9.1(@types/node@18.19.50)(typescript@5.5.4))(typescript@5.5.4))(solidity-coverage@0.8.13(hardhat@2.22.10(ts-node@10.9.1(@types/node@18.19.50)(typescript@5.5.4))(typescript@5.5.4)))(ts-node@10.9.1(@types/node@18.19.50)(typescript@5.5.4))(typechain@8.3.2(typescript@5.5.4))(typescript@5.5.4) + version: 4.0.0(3ldts3gexhakbcnhhpvofqsyj4) hardhat: specifier: ^2.18.0 version: 2.22.10(ts-node@10.9.1(@types/node@18.19.50)(typescript@5.5.4))(typescript@5.5.4) @@ -170,7 +170,7 @@ importers: version: link:../../packages/hardhat-plugin-ethers '@nomicfoundation/hardhat-toolbox': specifier: 4.0.0 - version: 4.0.0(@nomicfoundation/hardhat-chai-matchers@2.0.7(@nomicfoundation/hardhat-ethers@3.0.8(ethers@6.13.2)(hardhat@2.22.10(ts-node@10.9.1(@types/node@18.19.50)(typescript@5.5.4))(typescript@5.5.4)))(chai@4.4.1)(ethers@6.13.2)(hardhat@2.22.10(ts-node@10.9.1(@types/node@18.19.50)(typescript@5.5.4))(typescript@5.5.4)))(@nomicfoundation/hardhat-ethers@3.0.8(ethers@6.13.2)(hardhat@2.22.10(ts-node@10.9.1(@types/node@18.19.50)(typescript@5.5.4))(typescript@5.5.4)))(@nomicfoundation/hardhat-network-helpers@1.0.10(hardhat@2.22.10(ts-node@10.9.1(@types/node@18.19.50)(typescript@5.5.4))(typescript@5.5.4)))(@nomicfoundation/hardhat-verify@2.0.10(hardhat@2.22.10(ts-node@10.9.1(@types/node@18.19.50)(typescript@5.5.4))(typescript@5.5.4)))(@typechain/ethers-v6@0.5.1(ethers@6.13.2)(typechain@8.3.2(typescript@5.5.4))(typescript@5.5.4))(@typechain/hardhat@9.1.0(@typechain/ethers-v6@0.5.1(ethers@6.13.2)(typechain@8.3.2(typescript@5.5.4))(typescript@5.5.4))(ethers@6.13.2)(hardhat@2.22.10(ts-node@10.9.1(@types/node@18.19.50)(typescript@5.5.4))(typescript@5.5.4))(typechain@8.3.2(typescript@5.5.4)))(@types/chai@4.3.19)(@types/mocha@9.1.1)(@types/node@18.19.50)(chai@4.4.1)(ethers@6.13.2)(hardhat-gas-reporter@1.0.10(hardhat@2.22.10(ts-node@10.9.1(@types/node@18.19.50)(typescript@5.5.4))(typescript@5.5.4)))(hardhat@2.22.10(ts-node@10.9.1(@types/node@18.19.50)(typescript@5.5.4))(typescript@5.5.4))(solidity-coverage@0.8.13(hardhat@2.22.10(ts-node@10.9.1(@types/node@18.19.50)(typescript@5.5.4))(typescript@5.5.4)))(ts-node@10.9.1(@types/node@18.19.50)(typescript@5.5.4))(typechain@8.3.2(typescript@5.5.4))(typescript@5.5.4) + version: 4.0.0(3ldts3gexhakbcnhhpvofqsyj4) hardhat: specifier: ^2.18.0 version: 2.22.10(ts-node@10.9.1(@types/node@18.19.50)(typescript@5.5.4))(typescript@5.5.4) @@ -212,7 +212,7 @@ importers: version: 9.0.2 debug: specifier: ^4.3.2 - version: 4.3.7(supports-color@5.5.0) + version: 4.3.7(supports-color@8.1.1) ethers: specifier: ^6.7.0 version: 6.13.2 @@ -255,7 +255,7 @@ importers: version: 4.1.2 debug: specifier: ^4.3.2 - version: 4.3.7(supports-color@5.5.0) + version: 4.3.7(supports-color@8.1.1) fs-extra: specifier: ^10.0.0 version: 10.1.0 @@ -391,6 +391,9 @@ importers: styled-components: specifier: 5.3.10 version: 5.3.10(@babel/core@7.25.2)(react-dom@18.3.1(react@18.3.1))(react-is@16.13.1)(react@18.3.1) + svg-pan-zoom: + specifier: ^3.6.1 + version: 3.6.1 vite: specifier: ^5.0.0 version: 5.4.3(@types/node@18.19.50) @@ -2767,6 +2770,7 @@ packages: follow-redirects@1.15.8: resolution: {integrity: sha512-xgrmBhBToVKay1q2Tao5LI26B83UhrB/vM1avwVSDzt8rx3rO6AizBAaF46EgksTVr+rFTQaqZZ9MVBfUe4nig==} engines: {node: '>=4.0'} + deprecated: Browser detection issues fixed in v1.15.9 peerDependencies: debug: '*' peerDependenciesMeta: @@ -4472,6 +4476,9 @@ packages: resolution: {integrity: sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==} engines: {node: '>= 0.4'} + svg-pan-zoom@3.6.1: + resolution: {integrity: sha512-JaKkGHHfGvRrcMPdJWkssLBeWqM+Isg/a09H7kgNNajT1cX5AztDTNs+C8UzpCxjCTRrG34WbquwaovZbmSk9g==} + sync-request@6.1.0: resolution: {integrity: sha512-8fjNkrNlNCrVc/av+Jn+xxqfCjYaBoHqCsDz6mt030UMxJGr+GSfCV1dQt2gRtlL63+VPidwDVLr7V2OcTSdRw==} engines: {node: '>=8.0.0'} @@ -4990,10 +4997,10 @@ snapshots: '@babel/helpers': 7.25.6 '@babel/parser': 7.25.6 '@babel/template': 7.25.0 - '@babel/traverse': 7.25.6(supports-color@5.5.0) + '@babel/traverse': 7.25.6 '@babel/types': 7.25.6 convert-source-map: 2.0.0 - debug: 4.3.7(supports-color@5.5.0) + debug: 4.3.7(supports-color@8.1.1) gensync: 1.0.0-beta.2 json5: 2.2.3 semver: 6.3.1 @@ -5019,6 +5026,13 @@ snapshots: lru-cache: 5.1.1 semver: 6.3.1 + '@babel/helper-module-imports@7.24.7': + dependencies: + '@babel/traverse': 7.25.6 + '@babel/types': 7.25.6 + transitivePeerDependencies: + - supports-color + '@babel/helper-module-imports@7.24.7(supports-color@5.5.0)': dependencies: '@babel/traverse': 7.25.6(supports-color@5.5.0) @@ -5029,10 +5043,10 @@ snapshots: '@babel/helper-module-transforms@7.25.2(@babel/core@7.25.2)': dependencies: '@babel/core': 7.25.2 - '@babel/helper-module-imports': 7.24.7(supports-color@5.5.0) + '@babel/helper-module-imports': 7.24.7 '@babel/helper-simple-access': 7.24.7 '@babel/helper-validator-identifier': 7.24.7 - '@babel/traverse': 7.25.6(supports-color@5.5.0) + '@babel/traverse': 7.25.6 transitivePeerDependencies: - supports-color @@ -5040,7 +5054,7 @@ snapshots: '@babel/helper-simple-access@7.24.7': dependencies: - '@babel/traverse': 7.25.6(supports-color@5.5.0) + '@babel/traverse': 7.25.6 '@babel/types': 7.25.6 transitivePeerDependencies: - supports-color @@ -5088,6 +5102,18 @@ snapshots: '@babel/parser': 7.25.6 '@babel/types': 7.25.6 + '@babel/traverse@7.25.6': + dependencies: + '@babel/code-frame': 7.24.7 + '@babel/generator': 7.25.6 + '@babel/parser': 7.25.6 + '@babel/template': 7.25.0 + '@babel/types': 7.25.6 + debug: 4.3.7(supports-color@8.1.1) + globals: 11.12.0 + transitivePeerDependencies: + - supports-color + '@babel/traverse@7.25.6(supports-color@5.5.0)': dependencies: '@babel/code-frame': 7.24.7 @@ -5207,7 +5233,7 @@ snapshots: '@eslint/eslintrc@2.1.4': dependencies: ajv: 6.12.6 - debug: 4.3.7(supports-color@5.5.0) + debug: 4.3.7(supports-color@8.1.1) espree: 9.6.1 globals: 13.24.0 ignore: 5.3.2 @@ -5509,7 +5535,7 @@ snapshots: '@humanwhocodes/config-array@0.11.14': dependencies: '@humanwhocodes/object-schema': 2.0.3 - debug: 4.3.7(supports-color@5.5.0) + debug: 4.3.7(supports-color@8.1.1) minimatch: 3.1.2 transitivePeerDependencies: - supports-color @@ -5690,7 +5716,7 @@ snapshots: '@nomicfoundation/hardhat-ethers@3.0.8(ethers@6.13.2)(hardhat@2.22.10(ts-node@10.9.1(@types/node@18.19.50)(typescript@5.5.4))(typescript@5.5.4))': dependencies: - debug: 4.3.7(supports-color@5.5.0) + debug: 4.3.7(supports-color@8.1.1) ethers: 6.13.2 hardhat: 2.22.10(ts-node@10.9.1(@types/node@18.19.50)(typescript@5.5.4))(typescript@5.5.4) lodash.isequal: 4.5.0 @@ -5707,8 +5733,8 @@ snapshots: ethereumjs-util: 7.1.5 hardhat: 2.22.10(ts-node@10.9.1(@types/node@18.19.50)(typescript@5.5.4))(typescript@5.5.4) - ? '@nomicfoundation/hardhat-toolbox@4.0.0(@nomicfoundation/hardhat-chai-matchers@2.0.7(@nomicfoundation/hardhat-ethers@3.0.8(ethers@6.13.2)(hardhat@2.22.10(ts-node@10.9.1(@types/node@18.19.50)(typescript@5.5.4))(typescript@5.5.4)))(chai@4.4.1)(ethers@6.13.2)(hardhat@2.22.10(ts-node@10.9.1(@types/node@18.19.50)(typescript@5.5.4))(typescript@5.5.4)))(@nomicfoundation/hardhat-ethers@3.0.8(ethers@6.13.2)(hardhat@2.22.10(ts-node@10.9.1(@types/node@18.19.50)(typescript@5.5.4))(typescript@5.5.4)))(@nomicfoundation/hardhat-network-helpers@1.0.10(hardhat@2.22.10(ts-node@10.9.1(@types/node@18.19.50)(typescript@5.5.4))(typescript@5.5.4)))(@nomicfoundation/hardhat-verify@2.0.10(hardhat@2.22.10(ts-node@10.9.1(@types/node@18.19.50)(typescript@5.5.4))(typescript@5.5.4)))(@typechain/ethers-v6@0.5.1(ethers@6.13.2)(typechain@8.3.2(typescript@5.5.4))(typescript@5.5.4))(@typechain/hardhat@9.1.0(@typechain/ethers-v6@0.5.1(ethers@6.13.2)(typechain@8.3.2(typescript@5.5.4))(typescript@5.5.4))(ethers@6.13.2)(hardhat@2.22.10(ts-node@10.9.1(@types/node@18.19.50)(typescript@5.5.4))(typescript@5.5.4))(typechain@8.3.2(typescript@5.5.4)))(@types/chai@4.3.19)(@types/mocha@9.1.1)(@types/node@18.19.50)(chai@4.4.1)(ethers@6.13.2)(hardhat-gas-reporter@1.0.10(hardhat@2.22.10(ts-node@10.9.1(@types/node@18.19.50)(typescript@5.5.4))(typescript@5.5.4)))(hardhat@2.22.10(ts-node@10.9.1(@types/node@18.19.50)(typescript@5.5.4))(typescript@5.5.4))(solidity-coverage@0.8.13(hardhat@2.22.10(ts-node@10.9.1(@types/node@18.19.50)(typescript@5.5.4))(typescript@5.5.4)))(ts-node@10.9.1(@types/node@18.19.50)(typescript@5.5.4))(typechain@8.3.2(typescript@5.5.4))(typescript@5.5.4)' - : dependencies: + '@nomicfoundation/hardhat-toolbox@4.0.0(3ldts3gexhakbcnhhpvofqsyj4)': + dependencies: '@nomicfoundation/hardhat-chai-matchers': 2.0.7(@nomicfoundation/hardhat-ethers@3.0.8(ethers@6.13.2)(hardhat@2.22.10(ts-node@10.9.1(@types/node@18.19.50)(typescript@5.5.4))(typescript@5.5.4)))(chai@4.4.1)(ethers@6.13.2)(hardhat@2.22.10(ts-node@10.9.1(@types/node@18.19.50)(typescript@5.5.4))(typescript@5.5.4)) '@nomicfoundation/hardhat-ethers': 3.0.8(ethers@6.13.2)(hardhat@2.22.10(ts-node@10.9.1(@types/node@18.19.50)(typescript@5.5.4))(typescript@5.5.4)) '@nomicfoundation/hardhat-network-helpers': 1.0.10(hardhat@2.22.10(ts-node@10.9.1(@types/node@18.19.50)(typescript@5.5.4))(typescript@5.5.4)) @@ -5733,7 +5759,7 @@ snapshots: '@ethersproject/address': 5.6.1 cbor: 8.1.0 chalk: 2.4.2 - debug: 4.3.7(supports-color@5.5.0) + debug: 4.3.7(supports-color@8.1.1) hardhat: 2.22.10(ts-node@10.9.1(@types/node@18.19.50)(typescript@5.5.4))(typescript@5.5.4) lodash.clonedeep: 4.5.0 semver: 6.3.1 @@ -6172,7 +6198,7 @@ snapshots: '@typescript-eslint/scope-manager': 5.62.0 '@typescript-eslint/type-utils': 5.62.0(eslint@8.57.0)(typescript@5.5.4) '@typescript-eslint/utils': 5.62.0(eslint@8.57.0)(typescript@5.5.4) - debug: 4.3.7(supports-color@5.5.0) + debug: 4.3.7(supports-color@8.1.1) eslint: 8.57.0 graphemer: 1.4.0 ignore: 5.3.2 @@ -6197,7 +6223,7 @@ snapshots: '@typescript-eslint/scope-manager': 5.62.0 '@typescript-eslint/types': 5.62.0 '@typescript-eslint/typescript-estree': 5.62.0(typescript@5.5.4) - debug: 4.3.7(supports-color@5.5.0) + debug: 4.3.7(supports-color@8.1.1) eslint: 8.57.0 optionalDependencies: typescript: 5.5.4 @@ -6213,7 +6239,7 @@ snapshots: dependencies: '@typescript-eslint/typescript-estree': 5.62.0(typescript@5.5.4) '@typescript-eslint/utils': 5.62.0(eslint@8.57.0)(typescript@5.5.4) - debug: 4.3.7(supports-color@5.5.0) + debug: 4.3.7(supports-color@8.1.1) eslint: 8.57.0 tsutils: 3.21.0(typescript@5.5.4) optionalDependencies: @@ -6227,7 +6253,7 @@ snapshots: dependencies: '@typescript-eslint/types': 5.62.0 '@typescript-eslint/visitor-keys': 5.62.0 - debug: 4.3.7(supports-color@5.5.0) + debug: 4.3.7(supports-color@8.1.1) globby: 11.1.0 is-glob: 4.0.3 semver: 7.6.3 @@ -6300,7 +6326,7 @@ snapshots: agent-base@6.0.2: dependencies: - debug: 4.3.7(supports-color@5.5.0) + debug: 4.3.7(supports-color@8.1.1) transitivePeerDependencies: - supports-color @@ -7364,7 +7390,7 @@ snapshots: eslint-import-resolver-typescript@3.6.3(@typescript-eslint/parser@5.62.0(eslint@8.57.0)(typescript@5.5.4))(eslint-plugin-import@2.29.0)(eslint@8.57.0): dependencies: '@nolyfill/is-core-module': 1.0.39 - debug: 4.3.7(supports-color@5.5.0) + debug: 4.3.7(supports-color@8.1.1) enhanced-resolve: 5.17.1 eslint: 8.57.0 eslint-module-utils: 2.10.0(@typescript-eslint/parser@5.62.0(eslint@8.57.0)(typescript@5.5.4))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.3(@typescript-eslint/parser@5.62.0(eslint@8.57.0)(typescript@5.5.4))(eslint-plugin-import@2.29.0)(eslint@8.57.0))(eslint@8.57.0) @@ -7474,7 +7500,7 @@ snapshots: ajv: 6.12.6 chalk: 4.1.2 cross-spawn: 7.0.3 - debug: 4.3.7(supports-color@5.5.0) + debug: 4.3.7(supports-color@8.1.1) doctrine: 3.0.0 escape-string-regexp: 4.0.0 eslint-scope: 7.2.2 @@ -7774,7 +7800,7 @@ snapshots: follow-redirects@1.15.8(debug@4.3.7): optionalDependencies: - debug: 4.3.7(supports-color@5.5.0) + debug: 4.3.7(supports-color@8.1.1) for-each@0.3.3: dependencies: @@ -8025,7 +8051,7 @@ snapshots: chalk: 2.4.2 chokidar: 3.6.0 ci-info: 2.0.0 - debug: 4.3.7(supports-color@5.5.0) + debug: 4.3.7(supports-color@8.1.1) enquirer: 2.4.1 env-paths: 2.2.1 ethereum-cryptography: 1.2.0 @@ -8146,7 +8172,7 @@ snapshots: https-proxy-agent@5.0.1: dependencies: agent-base: 6.0.2 - debug: 4.3.7(supports-color@5.5.0) + debug: 4.3.7(supports-color@8.1.1) transitivePeerDependencies: - supports-color @@ -8361,7 +8387,7 @@ snapshots: istanbul-lib-source-maps@4.0.1: dependencies: - debug: 4.3.7(supports-color@5.5.0) + debug: 4.3.7(supports-color@8.1.1) istanbul-lib-coverage: 3.2.2 source-map: 0.6.1 transitivePeerDependencies: @@ -8719,7 +8745,7 @@ snapshots: micromark@3.2.0: dependencies: '@types/debug': 4.1.12 - debug: 4.3.7(supports-color@5.5.0) + debug: 4.3.7(supports-color@8.1.1) decode-named-character-reference: 1.0.2 micromark-core-commonmark: 1.1.0 micromark-factory-space: 1.1.0 @@ -9733,6 +9759,8 @@ snapshots: supports-preserve-symlinks-flag@1.0.0: {} + svg-pan-zoom@3.6.1: {} + sync-request@6.1.0: dependencies: http-response-object: 3.0.2 @@ -9898,7 +9926,7 @@ snapshots: typechain@8.3.2(typescript@5.5.4): dependencies: '@types/prettier': 2.7.3 - debug: 4.3.7(supports-color@5.5.0) + debug: 4.3.7(supports-color@8.1.1) fs-extra: 7.0.1 glob: 7.1.7 js-sha3: 0.8.0 From 0bcbc232bd2ab1c4a94f28f5cbdffe475791b1b5 Mon Sep 17 00:00:00 2001 From: zoeyTM Date: Wed, 25 Sep 2024 04:20:11 -0400 Subject: [PATCH 2/2] fix diagram height and button overlap for large batch numbers --- packages/ui/src/components/mermaid.tsx | 2 +- packages/ui/src/main.css | 3 ++- .../visualization-overview/components/deployment-flow.tsx | 7 +++++++ 3 files changed, 10 insertions(+), 2 deletions(-) diff --git a/packages/ui/src/components/mermaid.tsx b/packages/ui/src/components/mermaid.tsx index 50bb81e7a..44341da19 100644 --- a/packages/ui/src/components/mermaid.tsx +++ b/packages/ui/src/components/mermaid.tsx @@ -25,7 +25,7 @@ export const Mermaid: React.FC<{ useEffect(() => { mermaid.initialize({ - maxTextSize: 500000, + maxTextSize: 5000000, flowchart: { padding: 50, }, diff --git a/packages/ui/src/main.css b/packages/ui/src/main.css index 13b13163b..5d0a72307 100644 --- a/packages/ui/src/main.css +++ b/packages/ui/src/main.css @@ -47,6 +47,7 @@ body { .mermaid { background: #fbfbfb; + height: 500px; } .mermaid * { @@ -55,7 +56,7 @@ body { } .mermaid svg { - height: 300px; + height: 100%; vertical-align: middle; } diff --git a/packages/ui/src/pages/visualization-overview/components/deployment-flow.tsx b/packages/ui/src/pages/visualization-overview/components/deployment-flow.tsx index 6aabdab07..419ab844c 100644 --- a/packages/ui/src/pages/visualization-overview/components/deployment-flow.tsx +++ b/packages/ui/src/pages/visualization-overview/components/deployment-flow.tsx @@ -90,6 +90,7 @@ const SingleFutureNotice = styled.div` const VisualizeDiv = styled.div` font-weight: 700; padding: 1.5rem; + width: 100%; `; const FlowTooltip: React.FC = () => ( @@ -165,6 +166,11 @@ const SectionHeader = styled.div` const BatchBtnSection = styled.div` margin-bottom: 40px; text-align: center; + display: inline-flex; + flex-wrap: wrap; + justify-content: center; + row-gap: 1rem; + width: 100%; `; const BatchBtn = styled.span<{ isCurrentlyHovered: boolean }>` @@ -177,6 +183,7 @@ const BatchBtn = styled.span<{ isCurrentlyHovered: boolean }>` background: #ffffff; border: 1px solid #edcf00; cursor: pointer; + white-space: nowrap; ${(props) => props.isCurrentlyHovered &&