From 0dda419711bb7c3f8732c7210c4a98c7fb0fdc3c Mon Sep 17 00:00:00 2001 From: Khwaja Date: Thu, 24 Jul 2025 13:14:22 -0500 Subject: [PATCH] Fixed buttons in Pipeline Block --- .../components/CaseBuilder/CaseBuilder.tsx | 2 +- .../{CircularData.ts => InitialData.ts} | 2 +- .../components/CaseBuilder/PipelineBlock.tsx | 53 +++++------- web/src/components/CaseBuilder/defaults.ts | 4 +- .../Common/Buttons/HelpButton.module.css | 85 +++++++++++-------- 5 files changed, 75 insertions(+), 71 deletions(-) rename web/src/components/CaseBuilder/{CircularData.ts => InitialData.ts} (95%) diff --git a/web/src/components/CaseBuilder/CaseBuilder.tsx b/web/src/components/CaseBuilder/CaseBuilder.tsx index fa219ab..c00efd8 100644 --- a/web/src/components/CaseBuilder/CaseBuilder.tsx +++ b/web/src/components/CaseBuilder/CaseBuilder.tsx @@ -18,7 +18,7 @@ import { CenterNode, ProductNode, RELOGScenario, -} from "./CircularData"; +} from "./InitialData"; import { idText } from "typescript"; declare global { diff --git a/web/src/components/CaseBuilder/CircularData.ts b/web/src/components/CaseBuilder/InitialData.ts similarity index 95% rename from web/src/components/CaseBuilder/CircularData.ts rename to web/src/components/CaseBuilder/InitialData.ts index 55311a0..54bec93 100644 --- a/web/src/components/CaseBuilder/CircularData.ts +++ b/web/src/components/CaseBuilder/InitialData.ts @@ -29,7 +29,7 @@ export interface CenterNode { } -export interface CircularData { +export interface InitialData { plants: Record; products: Record; centers: Record; diff --git a/web/src/components/CaseBuilder/PipelineBlock.tsx b/web/src/components/CaseBuilder/PipelineBlock.tsx index e1bde71..c6ad8ca 100644 --- a/web/src/components/CaseBuilder/PipelineBlock.tsx +++ b/web/src/components/CaseBuilder/PipelineBlock.tsx @@ -11,18 +11,16 @@ import { Node, Edge, Connection, - addEdge, MarkerType, - getNodesBounds, - getViewportForBounds, } from "@xyflow/react"; -import { PlantNode, ProductNode, CenterNode } from "./CircularData"; +import { PlantNode, ProductNode, CenterNode } from "./InitialData"; import CustomNode, { CustomNodeData } from "./NodesAndEdges"; import Section from "../Common/Section"; import Card from "../Common/Card"; import styles from "./PipelineBlock.module.css"; import buttonStyles from "./Button.module.css"; import HelpButton from "../Common/Buttons/HelpButton.module.css"; +import * as htmlToImage from "html-to-image"; interface PipelineBlockProps { onAddPlant: () => void; @@ -211,38 +209,25 @@ const PipelineBlock: React.FC = (props) => { function DownloadButton() { const onDownload = async () => { if (!rfInstance || !flowWrapper.current) return; + rfInstance.fitView({ padding: 0.1 }); - const minZoom = 0.1; - const maxZoom = 2; - const padding = 0.1; + const renderer = document.getElementsByClassName( + "react-flow__renderer", + )[0] as HTMLElement; + if (!renderer) return; - const nodes = rfInstance.getNodes(); - const bounds = getNodesBounds(nodes); + const dataurl = await htmlToImage.toSvg(renderer, { + filter: (node: Element) => node.tagName.toLowerCase() !== "i", + }); - const { clientWidth: width, clientHeight: height } = flowWrapper.current; - const { x, y, zoom } = getViewportForBounds( - bounds, - width, - height, - minZoom, - maxZoom, - padding, + const printWin = window.open("", "_blank"); + if (!printWin) return; + printWin.document.write( + " ${rawSvg} ", ); - - rfInstance.setViewport({ x, y, zoom }); - - 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); + printWin.document.close(); + printWin.onload = () => printWin.print(); }; - return ( - diff --git a/web/src/components/CaseBuilder/defaults.ts b/web/src/components/CaseBuilder/defaults.ts index 3042e9e..ac44dc5 100644 --- a/web/src/components/CaseBuilder/defaults.ts +++ b/web/src/components/CaseBuilder/defaults.ts @@ -1,4 +1,4 @@ -import { CircularData, PlantNode, ProductNode, CenterNode } from "./CircularData"; +import { InitialData, PlantNode, ProductNode, CenterNode } from "./InitialData"; export interface DefaultProduct extends ProductNode{ x: number; @@ -39,7 +39,7 @@ export const defaultCenter: CenterNode = { output: [], }; -export const DefaultData: CircularData = { +export const DefaultData: InitialData = { products: {}, plants: {}, centers: {} diff --git a/web/src/components/Common/Buttons/HelpButton.module.css b/web/src/components/Common/Buttons/HelpButton.module.css index f265c3f..87358b2 100644 --- a/web/src/components/Common/Buttons/HelpButton.module.css +++ b/web/src/components/Common/Buttons/HelpButton.module.css @@ -1,43 +1,60 @@ -/* - * RELOG: Supply Chain Analysis and Optimization - * Copyright (C) 2020-2025, UChicago Argonne, LLC. All rights reserved. - * Released under the modified BSD license. See COPYING.md for more details. - */ - -.tooltip { - background-color: var(--contrast-80); - color: var(--contrast-10); - opacity: 0; - width: 250px; - margin-top: 36px; - margin-left: -250px; - z-index: 100; - font-size: 14px; +.HelpButton { + padding: 6px 36px; + margin: 12px 6px; + line-height: 24px; + border: var(--box-border); + box-shadow: var(--box-shadow); border-radius: var(--border-radius); - box-shadow: var(--box-shadow); - line-height: 20px; - transition: opacity 0.5s; - font-weight: normal; - text-align: left; - padding: 6px 12px; - position: relative; + 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; } -.icon { - color: var(--contrast-60); - font-size: 16px; - padding: 8px 8px 8px 0; + +.HelpButton:hover { + background: rgb(245, 245, 245); } -.HelpButton { - border: 0; - background-color: transparent; - cursor: pointer; - position: relative; + +.HelpButton:active { + background: rgba(220, 220, 220); +} + + +.tooltip { + visibility: hidden; + background-color: #333; + color: white; + opacity: 0; + width: 180px; + margin-top: 36px; + margin-left: -90px; + position: absolute; + z-index: 100; + text-transform: none; + font-size: 13px; + border-radius: 4px; + box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.25); + line-height: 18px; + padding: 6px 12px; + transition: opacity 0.5s; + font-weight: normal; + text-align: left; } + .HelpButton:hover .tooltip { - visibility: visible; - opacity: 100%; - transition: opacity 0.5s; + visibility: visible; + opacity: 1; + transition: opacity 0.5s; +} + + +.HelpButton:disabled { + color: rgba(0, 0, 0, 0.25); + cursor: default; }