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,
ProductNode,
RELOGScenario,
} from "./CircularData";
} from "./InitialData";
import { idText } from "typescript";
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>;
products: Record<string, ProductNode>;
centers: Record<string, CenterNode>;

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

@ -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<PipelineBlockProps> = (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(
"<html><head> <style> @page {size: A4 landscape; margin: 0; body {margin: 0}</style> </head> <body>${rawSvg}</body> </html>",
);
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 (
<button className={buttonStyles.Button} onClick={onDownload}>
Export Pipeline
@ -309,10 +294,12 @@ const PipelineBlock: React.FC<PipelineBlockProps> = (props) => {
Auto Layout
</button>
<DownloadButton />
<button className={`buttonStyles.Button} ${HelpButton.HelpButton}`}>
<button
className={`${buttonStyles.Button} ${HelpButton.HelpButton}`}
>
?
<span className={HelpButton.tooltip}>
"Drag & connect. Double-click to rename. Delete to remove."
Drag & connect. Double-click to rename. Delete to remove.
</span>
</button>
</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{
x: number;
@ -39,7 +39,7 @@ export const defaultCenter: CenterNode = {
output: [],
};
export const DefaultData: CircularData = {
export const DefaultData: InitialData = {
products: {},
plants: {},
centers: {}

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

@ -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;
}

Write Preview
Loading…
Cancel
Save