generated from Luis/nextjs-python-web-template
removed unnecessary style file and ran nix fmt
This commit is contained in:
sara-pervana
committed by
Sara Pervana
Sara Pervana
parent
7b2b675c2c
commit
1db032e932
@@ -1,23 +1,22 @@
|
||||
'use client';
|
||||
"use client";
|
||||
|
||||
import { useRef, useEffect, useState } from 'react';
|
||||
import mermaid from 'mermaid';
|
||||
import { IconButton } from '@mui/material';
|
||||
import RefreshIcon from '@mui/icons-material/Refresh';
|
||||
import ZoomInIcon from '@mui/icons-material/ZoomIn';
|
||||
import ZoomOutIcon from '@mui/icons-material/ZoomOut';
|
||||
import FullscreenIcon from '@mui/icons-material/Fullscreen';
|
||||
import DownloadIcon from '@mui/icons-material/Download';
|
||||
import ResetIcon from '@mui/icons-material/Autorenew';
|
||||
import Tooltip from '@mui/material/Tooltip';
|
||||
import { NoDataOverlay } from '../noDataOverlay';
|
||||
import { useGetAllEventmessages } from '@/api/eventmessages/eventmessages';
|
||||
import { mutate } from 'swr';
|
||||
import { LoadingOverlay } from '../join/loadingOverlay';
|
||||
import { generateMermaidString, dataFromBE } from './helpers';
|
||||
import { useRef, useEffect, useState } from "react";
|
||||
import mermaid from "mermaid";
|
||||
import { IconButton } from "@mui/material";
|
||||
import RefreshIcon from "@mui/icons-material/Refresh";
|
||||
import ZoomInIcon from "@mui/icons-material/ZoomIn";
|
||||
import ZoomOutIcon from "@mui/icons-material/ZoomOut";
|
||||
import FullscreenIcon from "@mui/icons-material/Fullscreen";
|
||||
import DownloadIcon from "@mui/icons-material/Download";
|
||||
import ResetIcon from "@mui/icons-material/Autorenew";
|
||||
import Tooltip from "@mui/material/Tooltip";
|
||||
import { NoDataOverlay } from "../noDataOverlay";
|
||||
import { useGetAllEventmessages } from "@/api/eventmessages/eventmessages";
|
||||
import { mutate } from "swr";
|
||||
import { LoadingOverlay } from "../join/loadingOverlay";
|
||||
import { generateMermaidString, dataFromBE } from "./helpers";
|
||||
|
||||
const SequenceDiagram = () => {
|
||||
|
||||
const {
|
||||
data: eventMessagesData,
|
||||
isLoading: loadingEventMessages,
|
||||
@@ -31,11 +30,10 @@ const SequenceDiagram = () => {
|
||||
const mermaidString = generateMermaidString(eventMessagesData?.data);
|
||||
|
||||
useEffect(() => {
|
||||
|
||||
if (!loadingEventMessages && hasData)
|
||||
mermaid.initialize({
|
||||
startOnLoad: false,
|
||||
securityLevel: 'loose',
|
||||
securityLevel: "loose",
|
||||
sequence: {
|
||||
mirrorActors: false,
|
||||
},
|
||||
@@ -49,17 +47,20 @@ const SequenceDiagram = () => {
|
||||
|
||||
useEffect(() => {
|
||||
if (mermaidRef.current) {
|
||||
const svg = mermaidRef.current.querySelector('svg');
|
||||
const svg = mermaidRef.current.querySelector("svg");
|
||||
if (svg) {
|
||||
svg.style.transform = `scale(${scale})`;
|
||||
svg.style.transformOrigin = 'top left'; // Set transform origin to top left
|
||||
mermaidRef.current.style.width = `${svg.getBoundingClientRect().width * scale}px`;
|
||||
mermaidRef.current.style.height = `${svg.getBoundingClientRect().height * scale}px`;
|
||||
svg.style.transformOrigin = "top left"; // Set transform origin to top left
|
||||
mermaidRef.current.style.width = `${
|
||||
svg.getBoundingClientRect().width * scale
|
||||
}px`;
|
||||
mermaidRef.current.style.height = `${
|
||||
svg.getBoundingClientRect().height * scale
|
||||
}px`;
|
||||
}
|
||||
}
|
||||
}, [scale]);
|
||||
|
||||
|
||||
const onRefresh = () => {
|
||||
const eventMessagesKey =
|
||||
typeof eventMessagesKeyFunc === "function"
|
||||
@@ -85,94 +86,96 @@ const SequenceDiagram = () => {
|
||||
|
||||
const viewInFullScreen = () => {
|
||||
if (mermaidRef.current) {
|
||||
const svg = mermaidRef.current.querySelector('svg');
|
||||
const svg = mermaidRef.current.querySelector("svg");
|
||||
const serializer = new XMLSerializer();
|
||||
const svgBlob = new Blob([serializer.serializeToString(svg)], {
|
||||
type: 'image/svg+xml',
|
||||
type: "image/svg+xml",
|
||||
});
|
||||
const url = URL.createObjectURL(svgBlob);
|
||||
window.open(url, '_blank');
|
||||
window.open(url, "_blank");
|
||||
}
|
||||
};
|
||||
|
||||
const downloadAsPng = () => {
|
||||
if (mermaidRef.current) {
|
||||
const svg = mermaidRef.current.querySelector('svg');
|
||||
const svg = mermaidRef.current.querySelector("svg");
|
||||
const svgData = new XMLSerializer().serializeToString(svg);
|
||||
|
||||
// Create a canvas element to convert SVG to PNG
|
||||
const canvas = document.createElement('canvas');
|
||||
const canvas = document.createElement("canvas");
|
||||
const svgSize = svg.getBoundingClientRect();
|
||||
canvas.width = svgSize.width;
|
||||
canvas.height = svgSize.height;
|
||||
const ctx = canvas.getContext('2d');
|
||||
const img = document.createElement('img');
|
||||
const ctx = canvas.getContext("2d");
|
||||
const img = document.createElement("img");
|
||||
|
||||
img.onload = () => {
|
||||
ctx?.drawImage(img, 0, 0);
|
||||
const pngData = canvas.toDataURL('image/png');
|
||||
const pngData = canvas.toDataURL("image/png");
|
||||
|
||||
// Trigger download
|
||||
const link = document.createElement('a');
|
||||
link.download = 'sequence-diagram.png';
|
||||
const link = document.createElement("a");
|
||||
link.download = "sequence-diagram.png";
|
||||
link.href = pngData;
|
||||
link.click();
|
||||
};
|
||||
|
||||
img.src =
|
||||
'data:image/svg+xml;base64,' +
|
||||
"data:image/svg+xml;base64," +
|
||||
btoa(unescape(encodeURIComponent(svgData)));
|
||||
}
|
||||
};
|
||||
|
||||
if (loadingEventMessages)
|
||||
return <LoadingOverlay title="Loading Diagram" subtitle="Please wait..." />
|
||||
return <LoadingOverlay title="Loading Diagram" subtitle="Please wait..." />;
|
||||
|
||||
return (
|
||||
<div className="flex flex-col items-end w-full">
|
||||
{
|
||||
hasData ? <>
|
||||
<div className='flex justify-end gap-2.5 mb-5 w-full'>
|
||||
<Tooltip placement='top' title='Refresh Diagram'>
|
||||
{hasData ? (
|
||||
<>
|
||||
<div className="flex justify-end gap-2.5 mb-5 w-full">
|
||||
<Tooltip placement="top" title="Refresh Diagram">
|
||||
<IconButton color="default" onClick={onRefresh}>
|
||||
<RefreshIcon />
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
<Tooltip title="Zoom In" placement='top'>
|
||||
<Tooltip title="Zoom In" placement="top">
|
||||
<IconButton color="primary" onClick={zoomIn}>
|
||||
<ZoomInIcon />
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
<Tooltip title="Zoom Out" placement='top'>
|
||||
<Tooltip title="Zoom Out" placement="top">
|
||||
<IconButton color="primary" onClick={zoomOut}>
|
||||
<ZoomOutIcon />
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
<Tooltip title="Reset" placement='top'>
|
||||
<Tooltip title="Reset" placement="top">
|
||||
<IconButton color="primary" onClick={resetZoom}>
|
||||
<ResetIcon />
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
<Tooltip title="View in Fullscreen" placement='top'>
|
||||
<Tooltip title="View in Fullscreen" placement="top">
|
||||
<IconButton color="primary" onClick={viewInFullScreen}>
|
||||
<FullscreenIcon />
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
<Tooltip title="Download as PNG" placement='top'>
|
||||
<Tooltip title="Download as PNG" placement="top">
|
||||
<IconButton color="primary" onClick={downloadAsPng}>
|
||||
<DownloadIcon />
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
</div>
|
||||
<div className="w-full h-500 overflow-auto p-2.5 box-border h-full">
|
||||
<div className='mermaid' ref={mermaidRef}></div>
|
||||
<div className="mermaid" ref={mermaidRef}></div>
|
||||
</div>
|
||||
</> : <div className="flex justify-center items-center w-full h-500">
|
||||
</>
|
||||
) : (
|
||||
<div className="flex justify-center items-center w-full h-500">
|
||||
<NoDataOverlay label="No Activity yet" />
|
||||
</div>
|
||||
}
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
);
|
||||
};
|
||||
|
||||
export default SequenceDiagram;
|
||||
export default SequenceDiagram;
|
||||
|
||||
Reference in New Issue
Block a user