Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

SVG zoom for visualization graph #810

Merged
merged 2 commits into from
Sep 25, 2024
Merged

SVG zoom for visualization graph #810

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
d26afda
implement svg zoom for mermaid diagram visualization
zoeyTM Sep 23, 2024
0bcbc23
fix diagram height and button overlap for large batch numbers
zoeyTM Sep 25, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion packages/ui/package.json
View file
Open in desktop
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
View file
Open in desktop
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(() => {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can you walk me through this one.

Is the problem that you want to hold on the svgPanZoom invocation until you are sure that the diagram svg is rendered?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Correct. If svgPanZoom is run before its rendered the function will error. This ensures that its run after rendering

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
View file
Open in desktop
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
7 changes: 7 additions & 0 deletions packages/ui/src/pages/visualization-overview/components/deployment-flow.tsx
View file
Open in desktop
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
Loading