fix recommend stuff

src/app/utils/reactFlowToWorkflow.ts

@@ -9,21 +9,7 @@ type ReactFlowToWorkflowInput = {
   edges: Edge[];
 };
 
-function filterNodes(nodes) {
-  return nodes.filter((node) => node.type?.match(/\w+\.\w+/));
-}
-
-function removeUnnecessaryData(nodes) {
-  nodes.forEach((node) => {
-    if (node.type === "Combiner.alternate") {
-      node.params.playlists = undefined;
-      node.params.playlistIds = undefined;
-    }
-  });
-}
-
 function addNodesToWorkflow(nodes, workflow) {
-  let _hasSource = false;
 
   nodes.forEach((node) => {
     const typeWithoutPostfix = node.type!.split("-")[0];
@@ -78,7 +64,6 @@ export default async function reactFlowToWorkflow({
   if (nodes.length > 0 && edges.length > 0) {
     addNodesToWorkflow(nodes, workflowObject);
     addEdgesToWorkflow(edges, workflowObject);
-    removeUnnecessaryData(workflowObject.operations);
     const response = await validateWorkflow(workflowObject);
     valid = response.valid;
     errors = response.errors;

src/components/nodes/Filter/RemoveMatch.tsx

@@ -25,14 +25,6 @@ type PlaylistProps = {
   data: any;
 };
 
-type Playlist = {
-  playlistId?: string;
-  name?: string;
-  description?: string;
-  image?: string;
-  total?: number;
-  owner?: string;
-};
 
 const formSchema = z.object({
   filterKey: z.string().min(1, {

src/components/nodes/Library/Playlist.tsx

@@ -51,15 +51,6 @@ type PlaylistProps = {
   data: Workflow.Playlist;
 };
 
-type Playlist = {
-  playlistId?: string;
-  name?: string;
-  description?: string;
-  image?: string;
-  total?: number;
-  owner?: string;
-};
-
 const formSchema = z.object({
   playlistId: z.string().min(1, {
     message: "Playlist is required.",

src/components/nodes/Primitives/Debug.tsx

@@ -29,7 +29,7 @@ const DebugInfo = ({
           data: {JSON.stringify(getNodeData(id), null, 2)}
         </pre>
       </pre>
-      <ScrollArea className="nodrag flex max-h-[200px] flex-col gap-2 overflow-auto overflow-x-hidden py-2">
+      <ScrollArea className="nodrag flex max-h-[1200px] flex-col gap-2 overflow-auto overflow-x-hidden py-2">
         <pre className="text-xs">TargetConnections:</pre>
         {TargetConnections?.map((connection) => (
           <pre key={connection.source} className="py-1 text-xs">

src/components/nodes/Selectors/Recommend.tsx

@@ -52,12 +52,12 @@ const Recommend: React.FC<PlaylistProps> = ({ id, data }) => {
     if (data) {
       const parsedData = {
         seedType: data.seedType || "tracks",
-        count: data.count || 20,
+        count: data.count || 27,
       };
       form!.reset(parsedData);
       form?.setValue("seedType", parsedData.seedType);
     }
-  }, [data, form]);
+  }, [data]);
 
   const watch = form!.watch();
   const prevWatchRef = React.useRef(watch);
@@ -109,11 +109,11 @@ const Recommend: React.FC<PlaylistProps> = ({ id, data }) => {
             <InputPrimitive
               control={form!.control}
               name="count"
-              inputType={"Number"}
-              label={"Number"}
+              inputType={"number"}
+              label={"Count"}
               placeholder="20"
               register={register!}
-              description={`Numbers of tracks tp generate`}
+              description={`Numbers of tracks to generate`}
             />
             <Separator />
             <InputPrimitive
@@ -130,13 +130,12 @@ const Recommend: React.FC<PlaylistProps> = ({ id, data }) => {
               }
               selectOptions={selectOptions}
               register={register!}
-              description={`The operation to perform`}
+              description={`The type of seed to use for the recommendation engine.`}
             />
             <Separator />
           </div>
         </form>
       </Form>
-      <Separator className="my-2" />
       <Debug
         id={id}
         isValid={nodeValid}

src/hooks/useBasicNodeState.ts

@@ -1,24 +1,16 @@
 import { zodResolver } from "@hookform/resolvers/zod";
-import { useHandleConnections } from "@xyflow/react";
+import { useHandleConnections, getIncomers, getOutgoers } from "@xyflow/react";
 import { useEffect, useMemo } from "react";
 import { useForm } from "react-hook-form";
 import { type ZodObject } from "zod";
 import { useShallow } from "zustand/react/shallow";
 import useStore from "~/app/states/store";
 
-type Playlist = {
-  playlistId?: string;
-  name?: string;
-  description?: string;
-  image?: string;
-  owner?: string;
-  total?: number;
-};
-
 const usePlaylistLogic = (id: string, formSchema?: ZodObject<any>) => {
-  const { nodes, getNode, updateNodeData } = useStore(
+  const { nodes, edges, getNode, updateNodeData } = useStore(
     useShallow((state) => ({
       nodes: state.nodes,
+      edges: state.edges,
       getNode: state.getNode,
       updateNodeData: state.updateNodeData,
     })),
@@ -32,6 +24,7 @@ const usePlaylistLogic = (id: string, formSchema?: ZodObject<any>) => {
 
   const { formState, register } = form ?? {};
 
+  const currentNode = getNode(id);
   const getNodeData = (id: string) => getNode(id)?.data;
 
   const targetConnections = useHandleConnections({
@@ -61,10 +54,11 @@ const usePlaylistLogic = (id: string, formSchema?: ZodObject<any>) => {
     }
 
     targetConnections.forEach((connection) => {
-      const target = getNodeData(connection.source);
+      const node = getNode(connection.source);
+      const target = node!.data;
       if (!target) return;
 
-      const {
+      let {
         playlistId,
         playlistIds = [],
         total,
@@ -75,13 +69,19 @@ const usePlaylistLogic = (id: string, formSchema?: ZodObject<any>) => {
         playlists = [],
       } = target as any;
 
+
       const hasPlaylistId = Boolean(playlistId);
       const hasPlaylistIds = Boolean(playlistIds && playlistIds.length > 0);
 
       if (!(hasPlaylistId || hasPlaylistIds)) {
         invalidNodesCount++;
       }
-
+
+      if (currentNode!.type === "Selector.recommend") {
+        playlistId = `recommend-${playlistId}`;
+        name = `[Recommended] ${name}`;
+        total = currentNode!.data.count;
+      }
       const playlist: Workflow.Playlist = {
         playlistId: playlistId as string,
         name: name as string,
@@ -103,7 +103,8 @@ const usePlaylistLogic = (id: string, formSchema?: ZodObject<any>) => {
     const combinedPlaylists = Array.from(playlistsSet)
       .filter(Boolean)
       .filter((playlist) => Object.keys(playlist).length !== 0)
-      .filter((playlist) => playlist.playlistId);
+      .filter((playlist) => playlist.playlistId)
+      .filter((playlist) => playlist.playlistId !== "recommended");
 
     return {
       playlistIds: combinedPlaylistIds,

src/lib/workflow/Selector.ts

@@ -155,13 +155,22 @@ export default class Selector extends Base {
     const tracks = Selector.getTracks(sources);
 
     const seedTracks = new Array<SpotifyApi.TrackObjectFull>();
+    let maxRetry = 5;
 
     if (Array.isArray(tracks)) {
-      const res = new Set<SpotifyApi.TrackObjectFull>();
-      while (res.size < 5) {
-        // 5 is the max number of seed shared between tracks, artists, and genres
-        const randomIndex = Math.floor(Math.random() * tracks.length);
-        res.add(tracks[randomIndex]!);
+      let res = new Set<SpotifyApi.TrackObjectFull>();
+      if (tracks.length < 5) {
+        res = new Set(tracks);
+      } else {
+        while (res.size < 5) {
+          if (maxRetry === 0) {
+            throw new Error("Failed to get seed tracks");
+          }
+          // 5 is the max number of seed shared between tracks, artists, and genres
+          const randomIndex = Math.floor(Math.random() * tracks.length);
+          res.add(tracks[randomIndex]!);
+          maxRetry--;
+        }
       }
       seedTracks.push(...Array.from(res));
     } else {