Spaces:
Paused
Paused
File size: 2,277 Bytes
4279593 85a4a41 4279593 85a4a41 25f9610 4279593 2bab159 4279593 85a4a41 4279593 a4986ed 4279593 a4986ed 4279593 a4986ed 4279593 a4986ed 85a4a41 4279593 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 |
import React, { useState, useEffect } from 'react';
import { FaTimes } from 'react-icons/fa';
import './Graph.css';
export default function Graph({ open, onClose, payload, onError }) {
const [graphHtml, setGraphHtml] = useState("");
const [loading, setLoading] = useState(true);
const [error, setError] = useState("");
useEffect(() => {
// if (open && payload) {
if (open) {
setLoading(true);
setError("");
fetch("/action/graph", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify()
// body: JSON.stringify(payload)
})
.then(res => res.json())
.then(data => {
// If the API returns an error, throw it to be caught below.
if (data.error) {
throw new Error(data.error);
}
setGraphHtml(data.result);
setLoading(false);
})
.catch(err => {
console.error("Error fetching graph:", err);
const errMsg = err.message || "Error fetching graph.";
setError(errMsg);
setLoading(false);
// Propagate error to parent using the onError callback.
if (onError && typeof onError === 'function') {
onError(errMsg);
}
});
}
}, [open, onError]);
// }, [open, payload, onError]);
if (!open) return null;
return (
<div className="graph-dialog-container" onClick={onClose}>
<div className="graph-dialog-inner" onClick={e => e.stopPropagation()}>
<div className="graph-dialog-header">
<h3 className="graph-dialog-title">Graph Display</h3>
<button className="graph-dialog close-btn" onClick={onClose}>
<FaTimes />
</button>
</div>
<div className="graph-dialog-content">
{loading ? (
<div className="graph-loading">
<p>Loading Graph...</p>
</div>
) : error ? (
<p className="graph-error">{error}</p>
) : (
<iframe
title="Graph Display"
srcDoc={graphHtml}
style={{ border: "none", width: "100%", height: "625px" }}
/>
)}
</div>
</div>
</div>
);
} |