ANL-CEEESA
/
RELOG
mirror of https://github.com/ANL-CEEESA/RELOG.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Fixed buttons in Pipeline Block

Browse Source
pull/33/head
Khwaja 2 months ago
parent 41a51d44e5
commit 0dda419711
5 changed files with 75 additions and 71 deletions
Show Stats Download Patch File Download Diff File

2
web/src/components/CaseBuilder/CaseBuilder.tsx
Unescape View File

@ -18,7 +18,7 @@ import {
CenterNode, CenterNode,
ProductNode, ProductNode,
RELOGScenario, RELOGScenario,
} from "./CircularData"; } from "./InitialData";
import { idText } from "typescript"; import { idText } from "typescript";
declare global { declare global {

2
web/src/components/CaseBuilder/CircularData.ts → web/src/components/CaseBuilder/InitialData.ts
Unescape View File

@ -29,7 +29,7 @@ export interface CenterNode {
} }
export interface CircularData { export interface InitialData {
plants: Record<string, PlantNode>; plants: Record<string, PlantNode>;
products: Record<string, ProductNode>; products: Record<string, ProductNode>;
centers: Record<string, CenterNode>; centers: Record<string, CenterNode>;

53
web/src/components/CaseBuilder/PipelineBlock.tsx
Unescape View File

@ -11,18 +11,16 @@ import {
Node, Node,
Edge, Edge,
Connection, Connection,
addEdge,
MarkerType, MarkerType,
getNodesBounds,
getViewportForBounds,
} from "@xyflow/react"; } from "@xyflow/react";
import { PlantNode, ProductNode, CenterNode } from "./CircularData"; import { PlantNode, ProductNode, CenterNode } from "./InitialData";
import CustomNode, { CustomNodeData } from "./NodesAndEdges"; import CustomNode, { CustomNodeData } from "./NodesAndEdges";
import Section from "../Common/Section"; import Section from "../Common/Section";
import Card from "../Common/Card"; import Card from "../Common/Card";
import styles from "./PipelineBlock.module.css"; import styles from "./PipelineBlock.module.css";
import buttonStyles from "./Button.module.css"; import buttonStyles from "./Button.module.css";
import HelpButton from "../Common/Buttons/HelpButton.module.css"; import HelpButton from "../Common/Buttons/HelpButton.module.css";
import * as htmlToImage from "html-to-image";
interface PipelineBlockProps { interface PipelineBlockProps {
onAddPlant: () => void; onAddPlant: () => void;
@ -211,38 +209,25 @@ const PipelineBlock: React.FC<PipelineBlockProps> = (props) => {
function DownloadButton() { function DownloadButton() {
const onDownload = async () => { const onDownload = async () => {
if (!rfInstance || !flowWrapper.current) return; if (!rfInstance || !flowWrapper.current) return;
rfInstance.fitView({ padding: 0.1 });
const minZoom = 0.1; const renderer = document.getElementsByClassName(
const maxZoom = 2; "react-flow__renderer",
const padding = 0.1; )[0] as HTMLElement;
if (!renderer) return;
const nodes = rfInstance.getNodes(); const dataurl = await htmlToImage.toSvg(renderer, {
const bounds = getNodesBounds(nodes); filter: (node: Element) => node.tagName.toLowerCase() !== "i",
});
const { clientWidth: width, clientHeight: height } = flowWrapper.current; const printWin = window.open("", "_blank");
const { x, y, zoom } = getViewportForBounds( if (!printWin) return;
bounds, printWin.document.write(
width, "<html><head> <style> @page {size: A4 landscape; margin: 0; body {margin: 0}</style> </head> <body>${rawSvg}</body> </html>",
height,
minZoom,
maxZoom,
padding,
); );
printWin.document.close();
rfInstance.setViewport({ x, y, zoom }); printWin.onload = () => printWin.print();
await new Promise((r) => setTimeout(r, 50));
const svgString = rfInstance.toSvg();
const blob = new Blob([svgString], { type: "image/svg+xml" });
const url = URL.createObjectURL(blob);
const a = document.createElement("a");
a.href = url;
a.download = "pipeline.svg";
a.click();
URL.revokeObjectURL(url);
}; };
return ( return (
<button className={buttonStyles.Button} onClick={onDownload}> <button className={buttonStyles.Button} onClick={onDownload}>
Export Pipeline Export Pipeline
@ -309,10 +294,12 @@ const PipelineBlock: React.FC<PipelineBlockProps> = (props) => {
Auto Layout Auto Layout
</button> </button>
<DownloadButton /> <DownloadButton />
<button className={`buttonStyles.Button} ${HelpButton.HelpButton}`}> <button
className={`${buttonStyles.Button} ${HelpButton.HelpButton}`}
>
? ?
<span className={HelpButton.tooltip}> <span className={HelpButton.tooltip}>
"Drag & connect. Double-click to rename. Delete to remove." Drag & connect. Double-click to rename. Delete to remove.
</span> </span>
</button> </button>
</div> </div>

4
web/src/components/CaseBuilder/defaults.ts
Unescape View File

@ -1,4 +1,4 @@
import { CircularData, PlantNode, ProductNode, CenterNode } from "./CircularData"; import { InitialData, PlantNode, ProductNode, CenterNode } from "./InitialData";
export interface DefaultProduct extends ProductNode{ export interface DefaultProduct extends ProductNode{
x: number; x: number;
@ -39,7 +39,7 @@ export const defaultCenter: CenterNode = {
output: [], output: [],
}; };
export const DefaultData: CircularData = { export const DefaultData: InitialData = {
products: {}, products: {},
plants: {}, plants: {},
centers: {} centers: {}

73
web/src/components/Common/Buttons/HelpButton.module.css
Unescape View File

@ -1,43 +1,60 @@
/* .HelpButton {
* RELOG: Supply Chain Analysis and Optimization padding: 6px 36px;
* Copyright (C) 2020-2025, UChicago Argonne, LLC. All rights reserved. margin: 12px 6px;
* Released under the modified BSD license. See COPYING.md for more details. line-height: 24px;
*/ border: var(--box-border);
box-shadow: var(--box-shadow);
border-radius: var(--border-radius);
cursor: pointer;
color: rgba(0, 0, 0, 0.8);
text-transform: uppercase;
font-weight: bold;
font-size: 12px;
background: linear-gradient(rgb(255, 255, 255) 25%, rgb(245, 245, 245) 100%);
position: relative;
}
.HelpButton:hover {
background: rgb(245, 245, 245);
}
.HelpButton:active {
background: rgba(220, 220, 220);
}
.tooltip { .tooltip {
background-color: var(--contrast-80); visibility: hidden;
color: var(--contrast-10); background-color: #333;
color: white;
opacity: 0; opacity: 0;
width: 250px; width: 180px;
margin-top: 36px; margin-top: 36px;
margin-left: -250px; margin-left: -90px;
position: absolute;
z-index: 100; z-index: 100;
font-size: 14px; text-transform: none;
border-radius: var(--border-radius); font-size: 13px;
box-shadow: var(--box-shadow); border-radius: 4px;
line-height: 20px; box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.25);
line-height: 18px;
padding: 6px 12px;
transition: opacity 0.5s; transition: opacity 0.5s;
font-weight: normal; font-weight: normal;
text-align: left; text-align: left;
padding: 6px 12px;
position: relative;
} }
.icon {
color: var(--contrast-60);
font-size: 16px;
padding: 8px 8px 8px 0;
}
.HelpButton {
border: 0;
background-color: transparent;
cursor: pointer;
position: relative;
}
.HelpButton:hover .tooltip { .HelpButton:hover .tooltip {
visibility: visible; visibility: visible;
opacity: 100%; opacity: 1;
transition: opacity 0.5s; transition: opacity 0.5s;
} }
.HelpButton:disabled {
color: rgba(0, 0, 0, 0.25);
cursor: default;
}

Write Preview
Loading…
Cancel
Save