add related graph

Author: ruarim

src/server.ts

@@ -180,6 +180,19 @@ app.get('/api/events', authenticateJWT, (req: AuthenticatedRequest, res) => {
     Events.setupAnalysisSSE(req, res, spotifyId);
 });
 
+app.get('/api/related-tracks', authenticateJWT, async (req: AuthenticatedRequest, res: Response) => {
+    try {
+        const user = req.user;
+        if (!user) return res.status(401).json({ error: 'Not logged in' });
+        const trackId = req.query.trackId as string;
+        const relatedTracks = await Store.getRelatedTracks(trackId, user.spotifyId);
+        res.json(relatedTracks);
+    } catch (error: any) {
+        console.error('Error during related tracks', error?.message);
+        res.status(500).json({ error: 'Internal Server Error' });
+    }
+})
+
 const startServer = async () => {
     await connectRedis();
     app.listen(PORT, () => console.log(`Server running at http://localhost:${PORT}`));

src/store.ts

@@ -42,4 +42,34 @@ export const getTrackHistory = async (userId: string, count = 50): Promise<Track
     return cachedTracks
         .filter((data): data is string => data !== null)
         .map(data => JSON.parse(data));
-};
+};
+
+// based on trackId get items with at least one tag in common
+// then rank by number of tags in common 
+export const getRelatedTracks = async (trackId: string, userId: string, count = 5) => {
+    const track = await getCacheTrack(trackId);
+    if (!track || !track.analysis) return [];
+    const history = await getTrackHistory(userId);
+    const topTracks = findTracksWithCommonTags(track, history).slice(0, count);
+    return topTracks;
+};
+
+const findTracksWithCommonTags = (track: TrackDetails, tracks: TrackDetails[]) => {
+    const targetTags = track?.analysis?.tags ?? [];
+    const commonTracks = tracks.reduce<TrackDetails[]>((prev, curr) => {
+        if (curr.trackId === track.trackId) return prev;
+        if (curr.analysis?.tags?.length === 0) return prev;
+        if (curr.analysis?.tags?.some(tag => targetTags.includes(tag))) {
+            return [...prev, curr];
+        }
+        return prev;
+    }, []);
+
+    const countTagsInCommon = (track: TrackDetails) => {
+        const tags = track.analysis?.tags ?? [];
+        return targetTags.filter(tag => tags.includes(tag)).length;
+    };
+    return commonTracks.sort((a, b) => {
+        return countTagsInCommon(b) - countTagsInCommon(a);
+    });
+};

ui/package-lock.json

@@ -19,6 +19,7 @@
     "@xyflow/react": "^12.10.0",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
+    "dagre": "^0.8.5",
     "lucide-react": "^0.561.0",
     "next-themes": "^0.4.6",
     "radix-ui": "^1.4.3",
@@ -29,6 +30,7 @@
   },
   "devDependencies": {
     "@eslint/js": "^9.39.1",
+    "@types/dagre": "^0.7.53",
     "@types/node": "^24.10.1",
     "@types/react": "^19.2.5",
     "@types/react-dom": "^19.2.3",

ui/package.json

@@ -48,7 +48,7 @@ export default function AnalyseRecent({
                     <ChevronsUpDown />
                 </Button>
             </DropdownMenuTrigger>
-            <DropdownMenuContent align="end" className="max-h-[600px]">
+            <DropdownMenuContent align="end" className="max-h-[600px] max-w-[250px]">
                 {loading && tracks.length === 0 && (
                     <DropdownMenuItem disabled>
                         <Loader2 className="mr-2 h-4 w-4 animate-spin" />

ui/src/components/analyse-recent.tsx

@@ -19,10 +19,13 @@ import PlatformLogin from "./platform-connect";
 import { NavUser } from "./nav-user";
 import { Button } from "./ui/button";
 import AnalyseRecent from "./analyse-recent";
-import TrackCard, { TrackItem } from "./track";
+import { TrackItem, TrackCard } from "./track";
 import { ResizableOverlay } from "./resizable-overlay";
 import { RelatedGraph } from "./related-graph";
 import { useWindowSize } from "../hooks/use-window-size";
+import { ReactFlowProvider } from "@xyflow/react";
+
+const SIDEBAR_WIDTH = 255;
 
 export default function Home({
     history,
@@ -37,7 +40,6 @@ export default function Home({
     isLoggedIn: boolean,
     setHistory: React.Dispatch<React.SetStateAction<Array<TrackDetails>>>,
 }) {
-    const SIDEBAR_WIDTH = 255;
     const { width: windowWidth } = useWindowSize();
     const [index, setIndex] = useState(0);
     const [isGraphOpen, setIsGraphOpen] = useState(false);
@@ -106,14 +108,16 @@ export default function Home({
                             </div>
                         </div>
                         <ResizableOverlay
-                            defaultWidthPx={400}
-                            minWidthPx={200}
+                            defaultWidthPx={500}
+                            minWidthPx={180}
                             maxWidthPx={windowWidth - SIDEBAR_WIDTH}
                             isOpen={isGraphOpen}
                             onOpenChange={setIsGraphOpen}
                         >
                             {selectedTrack
-                                ? <RelatedGraph track={selectedTrack} />
+                                ? <ReactFlowProvider>
+                                    <RelatedGraph track={selectedTrack} />
+                                </ReactFlowProvider>
                                 : <p>Select a track to view related graph.</p>
                             }
                         </ResizableOverlay>

ui/src/components/home.tsx

@@ -1,14 +1,22 @@
-import { ReactFlow, type Node, Controls } from '@xyflow/react';
 import '@xyflow/react/dist/style.css';
 import '@xyflow/react/dist/base.css';
+import { ReactFlow, type Node, Controls, Background, BackgroundVariant, type Edge, useNodesState, useEdgesState, ConnectionLineType, Handle, Position, useReactFlow } from '@xyflow/react';
 import type { TrackDetails } from '../../../src/types';
-import { useMemo } from 'react';
+import { useEffect, useState } from 'react';
 import { TrackItem } from './track';
+import * as Api from '../lib/api';
+import { cn } from '../lib/utils';
+import { useAutoLayout } from '../hooks/use-auto-layout';
+import { Loader2 } from 'lucide-react';
 
 const TrackNode = ({ data }: { data: { track: TrackDetails } }) => {
     return (
-        <div className='border border flex p-2 rounded-md gap-2'>
+        // add click to view track details
+        <div className='border border flex p-2 rounded-md gap-2 w-[200px] bg-background'>
+            <Handle type="target" position={Position.Top} className="!opacity-0" />
             <TrackItem track={data.track} selected={true} />
+            {/* add tags for related tracks */}
+            <Handle type="source" position={Position.Bottom} className="!opacity-0" />
         </div>
     );
 };
@@ -17,37 +25,100 @@ const nodeTypes = {
     track: TrackNode,
 };
 
+export function RelatedGraph({ track }: { track: TrackDetails }) {
+    const { layout } = useAutoLayout();
+    const { fitView } = useReactFlow();
+    const [isLoading, setIsLoading] = useState(true);
+    const [relatedTracks, setRelatedTracks] = useState<TrackDetails[]>([]);
 
+    useEffect(() => {
+        const fetchRelatedTracks = async () => {
+            try {
+                setIsLoading(true);
+                const relatedTracks = await Api.getRelatedTracks(track.trackId);
+                setRelatedTracks(relatedTracks);
+                setIsLoading(false);
+            } catch (error) {
+                console.error('Error fetching related tracks', error);
+            } finally {
+                setIsLoading(false);
+            }
+        };
+        fetchRelatedTracks();
+    }, [track]);
 
-export function RelatedGraph({ track }: { track: TrackDetails }) {
-    // based on trackId get items with at least one tag in common
-    // then rank by number of tags in common 
-    // return top 10
+    const [nodes, setNodes, onNodesChange] = useNodesState<Node>([]);
+    const [edges, setEdges, onEdgesChange] = useEdgesState<Edge>([]);
 
-    // const [relatedTracks, setRelatedTracks] = useState<TrackDetails[]>([]);
+    useEffect(() => {
+        let initialNodes: Node[] = [];
+        let initialEdges: Edge[] = [];
 
-    const nodes: Node[] = useMemo(() => [
-        {
-            id: 'current-track',
+        const selectedNode: Node = {
+            id: track.trackId,
             type: 'track',
             position: { x: 0, y: 0 },
             data: { track: track },
-        },
-        // TODO: Fetch related tracks
-    ], [track]);
+        };
+
+        if (relatedTracks.length > 0) {
+            const relatedTrackNodes = relatedTracks.map((related) => ({
+                id: related.trackId,
+                type: 'track',
+                position: { x: 0, y: 0 },
+                data: { track: related },
+            }));
+            initialNodes = [selectedNode, ...relatedTrackNodes];
+            initialEdges = relatedTracks.map((related) => ({
+                id: `e-${selectedNode.id}-${related.trackId}`,
+                source: selectedNode.id,
+                target: related.trackId,
+                type: ConnectionLineType.SmoothStep,
+                style: { stroke: '#b1b1b7', strokeWidth: 2 },
+            }));
+        } else {
+            initialNodes = [selectedNode];
+        }
+
+        const { nodes: layoutedNodes, edges: layoutedEdges } = layout({
+            direction: 'LR',
+            nodes: initialNodes,
+            edges: initialEdges,
+        });
+
+        setNodes(layoutedNodes);
+        setEdges(layoutedEdges);
+
+    }, [track, relatedTracks, layout, setNodes, setEdges]);
+
+    useEffect(() => {
+        if (nodes.length === 0) return
+        window.requestAnimationFrame(() => {
+            fitView({ duration: 800, padding: 0.2 });
+        });
+    }, [nodes, fitView]);
 
     return (
         <ReactFlow
             nodes={nodes}
-            edges={[]}
+            edges={edges}
+            onNodesChange={onNodesChange}
+            onEdgesChange={onEdgesChange}
             nodeTypes={nodeTypes}
-            defaultViewport={{ x: 0, y: 0, zoom: 0.75 }}
             proOptions={{ hideAttribution: true }}
             minZoom={0.1}
-            maxZoom={1.5}
+            maxZoom={1.25}
+            connectionLineType={ConnectionLineType.SmoothStep}
+            className={cn(isLoading && 'opacity-50 pointer-events-none')}
             fitView
         >
-            <Controls className="text-black dark:text-black hover:bg-white" />
+            <Controls
+                className="text-black dark:text-black hover:bg-white"
+                position="bottom-right"
+                showInteractive={false}
+            />
+            <Background variant={BackgroundVariant.Dots} gap={24} size={1} />
+            {isLoading && <Loader2 className="animate-spin absolute top-1/2 left-1/2" size={48} />}
         </ReactFlow>
     )
 }