ShogunIsHere/spotify-manager-web
1
0
Fork 0
mirror of https://github.com/20kaushik02/spotify-manager-web.git synced 2025-12-06 09:34:07 +00:00
Code Issues Packages Projects Releases Wiki Activity

mmm

Browse Source
This commit is contained in:
Kaushik Narayan R 2025-01-08 10:21:41 -07:00
parent 4baedc3e60
commit e15575ce80
1 changed files with 87 additions and 83 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
src/pages/Graph/index.tsx
View File

@ -271,11 +271,8 @@ const Graph = () => {
type getLayoutedElementsOpts = { type getLayoutedElementsOpts = {
direction: rankdirType; direction: rankdirType;
}; };
const getLayoutedElements = ( const getLayoutedElements = useCallback(
nodes: Node[], (nodes: Node[], edges: Edge[], options: getLayoutedElementsOpts) => {
edges: Edge[],
options: getLayoutedElementsOpts
) => {
const g = new Dagre.graphlib.Graph(); const g = new Dagre.graphlib.Graph();
g.setDefaultEdgeLabel(() => ({})); g.setDefaultEdgeLabel(() => ({}));
g.setGraph({ g.setGraph({
@ -344,9 +341,15 @@ const Graph = () => {
console.debug("layout generated"); console.debug("layout generated");
return finalLayout; return finalLayout;
}; },
[]
);
const arrangeLayout = (direction: rankdirType) => { const arrangeLayout = useCallback(
(direction: rankdirType) => {
// TODO: race condition
// states not updated in time inside other functions that call this before they call this
// fix that
const layouted = getLayoutedElements(playlistNodes, linkEdges, { const layouted = getLayoutedElements(playlistNodes, linkEdges, {
direction, direction,
}); });
@ -356,7 +359,9 @@ const Graph = () => {
setTimeout(flowInstance.fitView); setTimeout(flowInstance.fitView);
console.debug("layout applied"); console.debug("layout applied");
}; },
[playlistNodes, linkEdges, flowInstance, getLayoutedElements]
);
const fetchGraph = useCallback(async () => { const fetchGraph = useCallback(async () => {
const resp = await APIWrapper({ apiFn: apiFetchGraph, refreshAuth }); const resp = await APIWrapper({ apiFn: apiFetchGraph, refreshAuth });
@ -364,7 +369,7 @@ const Graph = () => {
`graph fetched with ${resp?.data.playlists?.length} nodes and ${resp?.data.links?.length} edges` `graph fetched with ${resp?.data.playlists?.length} nodes and ${resp?.data.links?.length} edges`
); );
// place playlist nodes // place playlist nodes
setPlaylistNodes( const newNodes =
resp?.data.playlists?.map((pl, idx) => { resp?.data.playlists?.map((pl, idx) => {
return { return {
id: `${pl.playlistID}`, id: `${pl.playlistID}`,
@ -383,18 +388,18 @@ const Graph = () => {
}, },
}, },
}; };
}) ?? [] }) ?? [];
); setPlaylistNodes(newNodes);
// connect links // connect links
setLinkEdges( const newEdges =
resp?.data.links?.map((link, idx) => { resp?.data.links?.map((link, idx) => {
return { return {
id: `${link.from}->${link.to}`, id: `${link.from}->${link.to}`,
source: link.from, source: link.from,
target: link.to, target: link.to,
}; };
}) ?? [] }) ?? [];
); setLinkEdges(newEdges);
showInfoToastNotification("Graph updated."); showInfoToastNotification("Graph updated.");
}, [refreshAuth]); }, [refreshAuth]);
@ -403,7 +408,7 @@ const Graph = () => {
apiFn: apiUpdateUserData, apiFn: apiUpdateUserData,
refreshAuth, refreshAuth,
}); });
showInfoToastNotification("Spotify synced."); showInfoToastNotification(resp?.data.message);
if (resp?.data.removedLinks) if (resp?.data.removedLinks)
showWarnToastNotification( showWarnToastNotification(
"Some links with deleted playlists were removed." "Some links with deleted playlists were removed."
@ -413,7 +418,6 @@ const Graph = () => {
const refreshGraph = async () => { const refreshGraph = async () => {
await fetchGraph(); await fetchGraph();
arrangeLayout("TB");
}; };
useEffect(() => { useEffect(() => {