Skip to content

Commit

Permalink
Multiple fetches fixed (#13)
Browse files Browse the repository at this point in the history 
* Multiple fetches fixed
  • Loading branch information
@SharanRP
SharanRP authored Aug 31, 2024
1 parent b8be827 commit ce35e1e
Show file tree
Hide file tree
Showing 2 changed files with 57 additions and 70 deletions.
3 changes: 3 additions & 0 deletions src/AiidaExplorer/ProvenanceBrowser/GraphBrowser.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -86,6 +86,7 @@ const GraphBrowser = ({ apiUrl }) => {
const [animationPhase, setAnimationPhase] = useState('idle');
const [previouslySelectedNode, setPreviouslySelectedNode] = useState(null);
const [breadcrumbs, setBreadcrumbs] = useState([]);
const [tooltipData, setTooltipData] = useState([]);


const API_URL = `${apiUrl}`
Expand Down Expand Up @@ -313,6 +314,7 @@ const GraphBrowser = ({ apiUrl }) => {
try {
console.log("Fetching data for", nodeUuid);
const data = await fetchAllLinks(nodeUuid);
setTooltipData(data);
console.log("Received data:", data);
if (!data) {
console.log("No data received");
Expand Down Expand Up @@ -569,6 +571,7 @@ const toggleEdgeLabels = () => {
details={tooltipDetails}
position={tooltipPosition}
containerRef={containerRef}
tooltipData={tooltipData}
/>
)}
{/* <Breadcrumbs breadcrumbs={breadcrumbs} handleBreadcrumbClick={handleBreadcrumbClick} /> */}
Expand Down
124 changes: 54 additions & 70 deletions src/AiidaExplorer/ProvenanceBrowser/Tooltip.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,91 +1,75 @@
import React, { useEffect, useState, useCallback } from 'react';
import React, { useEffect, useState, useMemo } from 'react';

const dataCache = {};

const Tooltip = ({ details, position, containerRef, apiUrl }) => {
const [tooltipPosition, setTooltipPosition] = useState({ x: 0, y: 0 });
const [fetchedData, setFetchedData] = useState(null);
const [loading, setLoading] = useState(false);
const [error, setError] = useState(null);
const Tooltip = ({ details, position, containerRef, tooltipData }) => {
const [tooltip, setTooltip] = useState({ position: { x: 0, y: 0 }, data: null });
// console.log(tooltipData)

useEffect(() => {
if (containerRef.current && position) {
const containerRect = containerRef.current.getBoundingClientRect();
const x = position.x - containerRect.left + 40;
const y = position.y - containerRect.top;
setTooltipPosition({ x, y });
}
}, [position]);

const fetchData = useCallback(async (uuid) => {
if (dataCache[uuid]) {
setFetchedData(dataCache[uuid]);
return;
}
let matchingNode = null;

setLoading(true);
try {
const response = await fetch(`${apiUrl}/nodes/${uuid}`);
const data = await response.json();
const nodeData = data.data.nodes[0];

dataCache[uuid] = nodeData;

setFetchedData(nodeData);
} catch (err) {
setError(err);
} finally {
setLoading(false);
}
}, [apiUrl]);
if (tooltipData && details.uuid) {
matchingNode = tooltipData.inputLogical.links.find(node => node.uuid === details.uuid)
|| tooltipData.inputData.links.find(node => node.uuid === details.uuid)
|| tooltipData.outputLogical.links.find(node => node.uuid === details.uuid)
|| tooltipData.outputData.links.find(node => node.uuid === details.uuid);

useEffect(() => {
if (details && details.uuid) {
fetchData(details.uuid);
}
console.log(matchingNode);

setTooltip({ position: { x, y }, data: matchingNode });
}
}, [details, fetchData]);
}, [position, containerRef, tooltipData, details]);

const tooltipContent = useMemo(() => {
if (!tooltip.data) return null;

const { id, uuid, full_type, ctime, link_label } = tooltip.data;

console.log("Tooltip Data:", tooltip.data);

return (
<>
<div className="mb-2 flex items-center">
<div className="h-3 w-3 rounded-full bg-blue-500 mr-2"></div>
<span className="font-semibold">ID : </span> {id}
</div>
<div className="mb-2 flex items-center">
<div className="h-3 w-3 rounded-full bg-green-500 mr-2"></div>
<span className="font-semibold">UUID : </span> {uuid}
</div>
<div className="mb-2 flex items-center">
<div className="h-3 w-3 rounded-full bg-orange-500 mr-2"></div>
<span className="font-semibold">Type : </span> {full_type}
</div>
<div className="mb-2 flex items-center">
<div className="h-3 w-3 rounded-full bg-red-500 mr-2"></div>
<span className="font-semibold">Created : </span> {ctime}
</div>
{link_label && (
<div className="mb-2 flex items-center">
<div className="h-3 w-3 rounded-full bg-indigo-500 mr-2"></div>
<span className="font-semibold">Link Label : </span> {link_label}
</div>
)}
</>
);
}, [tooltip.data]);

if (!details) return null;
if (!tooltip.data) return null;

return (
<div
className="absolute bg-white z-50 text-gray-800 border border-gray-200 rounded-lg shadow-md p-4 text-sm"
style={{ top: tooltipPosition.y, left: tooltipPosition.x }}
style={{ top: tooltip.position.y, left: tooltip.position.x }}
>
{loading && <div>Loading...</div>}
{error && <div>Error: {error.message}</div>}
{fetchedData && (
<>
<div className="mb-2 flex items-center">
<div className="h-3 w-3 rounded-full bg-blue-500 mr-2"></div>
<span className="font-semibold">ID : </span> {fetchedData.id}
</div>
<div className="mb-2 flex items-center">
<div className="h-3 w-3 rounded-full bg-green-500 mr-2"></div>
<span className="font-semibold">UUID : </span> {fetchedData.uuid}
</div>
<div className="mb-2 flex items-center">
<div className="h-3 w-3 rounded-full bg-orange-500 mr-2"></div>
<span className="font-semibold">Type : </span> {fetchedData.node_type}
</div>
<div className="mb-2 flex items-center">
<div className="h-3 w-3 rounded-full bg-red-500 mr-2"></div>
<span className="font-semibold">Created : </span> {fetchedData.ctime}
</div>
<div className="mb-2 flex items-center">
<div className="h-3 w-3 rounded-full bg-gray-500 mr-2"></div>
<span className="font-semibold">Modified : </span> {fetchedData.mtime}
</div>
{fetchedData.process_type && (
<div className="flex items-center">
<div className="h-3 w-3 rounded-full bg-indigo-500 mr-2"></div>
<span className="font-semibold">Process Type : </span> {fetchedData.process_type}
</div>
)}
</>
)}
{tooltipContent}
</div>
);
};

export default Tooltip;
export default Tooltip;

0 comments on commit ce35e1e

Please sign in to comment.