Skip to content

Commit

Permalink
Merge pull request #810 from NomicFoundation/svg-zoom
Browse files Browse the repository at this point in the history
SVG zoom for visualization graph
  • Loading branch information
zoeyTM authored Sep 25, 2024
2 parents f77041e + 0bcbc23 commit 1f1ae43
Show file tree
Hide file tree
Showing 5 changed files with 97 additions and 31 deletions.
2 changes: 1 addition & 1 deletion packages/ui/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,6 @@
"clean": "rimraf dist tsconfig.tsbuildinfo",
"prepack": "pnpm build"
},
"dependencies": {},
"devDependencies": {
"@fontsource/roboto": "^5.0.8",
"@nomicfoundation/ignition-core": "workspace:^",
Expand All @@ -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"
}
Expand Down
17 changes: 17 additions & 0 deletions packages/ui/src/components/mermaid.tsx
Original file line number Diff line number Diff line change
@@ -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<{
Expand All @@ -23,6 +25,7 @@ export const Mermaid: React.FC<{

useEffect(() => {
mermaid.initialize({
maxTextSize: 5000000,
flowchart: {
padding: 50,
},
Expand All @@ -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 (
<Wrap>
<div className="mermaid">{diagram}</div>
Expand Down
14 changes: 14 additions & 0 deletions packages/ui/src/main.css
Original file line number Diff line number Diff line change
Expand Up @@ -45,11 +45,25 @@ body {

/* mermaid styles */

.mermaid {
background: #fbfbfb;
height: 500px;
}

.mermaid * {
font-family: "Roboto", sans-serif;
font-size: 30px;
}

.mermaid svg {
height: 100%;
vertical-align: middle;
}

.mermaid span {
cursor: default;
}

.mermaid rect {
rx: 5;
ry: 5;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -90,6 +90,7 @@ const SingleFutureNotice = styled.div`
const VisualizeDiv = styled.div`
font-weight: 700;
padding: 1.5rem;
width: 100%;
`;

const FlowTooltip: React.FC = () => (
Expand Down Expand Up @@ -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 }>`
Expand All @@ -177,6 +183,7 @@ const BatchBtn = styled.span<{ isCurrentlyHovered: boolean }>`
background: #ffffff;
border: 1px solid #edcf00;
cursor: pointer;
white-space: nowrap;
${(props) =>
props.isCurrentlyHovered &&
Expand Down
Loading

0 comments on commit 1f1ae43

Please sign in to comment.