🐛 (service.py): add missing 'id' column in SQL query to fix data retrieval issue

💡 (service.py): add print statement for debugging SQL query
♻️ (index.tsx): reorder imports for better readability and maintainability

♻️ (flowStore.ts): remove trailing commas to improve code consistency and readability

💡 (index.ts, storeUtils.ts): format type definitions for better readability

src/backend/base/langflow/services/monitor/service.py

@@ -73,7 +73,7 @@ class MonitorService(Service):
         valid: Optional[bool] = None,
         order_by: Optional[str] = "timestamp",
     ):
-        query = "SELECT index,flow_id, valid, params, data, artifacts, timestamp FROM vertex_builds"
+        query = "SELECT id, index,flow_id, valid, params, data, artifacts, timestamp FROM vertex_builds"
         conditions = []
         if flow_id:
             conditions.append(f"flow_id = '{flow_id}'")
@@ -92,6 +92,8 @@ class MonitorService(Service):
         with duckdb.connect(str(self.db_path)) as conn:
             df = conn.execute(query).df()
 
+        print(query)
+
         return df.to_dict(orient="records")
 
     def delete_vertex_builds(self, flow_id: Optional[str] = None):

src/frontend/src/modals/IOModal/components/chatView/index.tsx

@@ -1,5 +1,11 @@
 import { useEffect, useRef, useState } from "react";
 import IconComponent from "../../../../components/genericIconComponent";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+} from "../../../../components/ui/select";
 import {
   CHAT_FIRST_INITIAL_TEXT,
   CHAT_SECOND_INITIAL_TEXT,
@@ -18,12 +24,6 @@ import { chatViewProps } from "../../../../types/components";
 import { classNames } from "../../../../utils/utils";
 import ChatInput from "./chatInput";
 import ChatMessage from "./chatMessage";
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-} from "../../../../components/ui/select";
 
 export default function ChatView({
   sendMessage,
@@ -138,7 +138,7 @@ export default function ChatView({
   function updateChat(
     chat: ChatMessageType,
     message: string,
-    stream_url?: string,
+    stream_url?: string
   ) {
     // if (message === "") return;
     chat.message = message;
@@ -177,7 +177,7 @@ export default function ChatView({
                   name="Eraser"
                   className={classNames(
                     "h-5 w-5 transition-all duration-100",
-                    lockChat ? "animate-pulse text-primary" : "text-primary",
+                    lockChat ? "animate-pulse text-primary" : "text-primary"
                   )}
                   aria-hidden="true"
                 />

src/frontend/src/stores/flowStore.ts

@@ -79,7 +79,7 @@ const useFlowStore = create<FlowStoreType>((set, get) => ({
   updateFlowPool: (
     nodeId: string,
     data: FlowPoolObjectType | ChatOutputType | chatInputType,
-    buildId?: string,
+    buildId?: string
   ) => {
     let newFlowPool = cloneDeep({ ...get().flowPool });
     if (!newFlowPool[nodeId]) {
@@ -170,7 +170,7 @@ const useFlowStore = create<FlowStoreType>((set, get) => ({
       flowsManager.autoSaveCurrentFlow(
         newChange,
         newEdges,
-        get().reactFlowInstance?.getViewport() ?? { x: 0, y: 0, zoom: 1 },
+        get().reactFlowInstance?.getViewport() ?? { x: 0, y: 0, zoom: 1 }
       );
     }
   },
@@ -186,7 +186,7 @@ const useFlowStore = create<FlowStoreType>((set, get) => ({
       flowsManager.autoSaveCurrentFlow(
         get().nodes,
         newChange,
-        get().reactFlowInstance?.getViewport() ?? { x: 0, y: 0, zoom: 1 },
+        get().reactFlowInstance?.getViewport() ?? { x: 0, y: 0, zoom: 1 }
       );
     }
   },
@@ -204,7 +204,7 @@ const useFlowStore = create<FlowStoreType>((set, get) => ({
           return newChange;
         }
         return node;
-      }),
+      })
     );
   },
   getNode: (id: string) => {
@@ -215,8 +215,8 @@ const useFlowStore = create<FlowStoreType>((set, get) => ({
       get().nodes.filter((node) =>
         typeof nodeId === "string"
           ? node.id !== nodeId
-          : !nodeId.includes(node.id),
+          : !nodeId.includes(node.id)
-      ),
+      )
     );
   },
   deleteEdge: (edgeId) => {
@@ -224,8 +224,8 @@ const useFlowStore = create<FlowStoreType>((set, get) => ({
       get().edges.filter((edge) =>
         typeof edgeId === "string"
           ? edge.id !== edgeId
-          : !edgeId.includes(edge.id),
+          : !edgeId.includes(edge.id)
-      ),
+      )
     );
   },
   paste: (selection, position) => {
@@ -291,7 +291,7 @@ const useFlowStore = create<FlowStoreType>((set, get) => ({
       let source = idsMap[edge.source];
       let target = idsMap[edge.target];
       const sourceHandleObject: sourceHandleType = scapeJSONParse(
-        edge.sourceHandle!,
+        edge.sourceHandle!
       );
       let sourceHandle = scapedJSONStringfy({
         ...sourceHandleObject,
@@ -301,7 +301,7 @@ const useFlowStore = create<FlowStoreType>((set, get) => ({
 
       edge.data.sourceHandle = sourceHandleObject;
       const targetHandleObject: targetHandleType = scapeJSONParse(
-        edge.targetHandle!,
+        edge.targetHandle!
       );
       let targetHandle = scapedJSONStringfy({
         ...targetHandleObject,
@@ -322,7 +322,7 @@ const useFlowStore = create<FlowStoreType>((set, get) => ({
           className: "stroke-gray-900 ",
           selected: false,
         },
-        newEdges.map((edge) => ({ ...edge, selected: false })),
+        newEdges.map((edge) => ({ ...edge, selected: false }))
       );
     });
     get().setEdges(newEdges);
@@ -341,10 +341,10 @@ const useFlowStore = create<FlowStoreType>((set, get) => ({
       });
 
       const newNodes = get().nodes.filter(
-        (node) => !nodesIdsSelected.includes(node.id),
+        (node) => !nodesIdsSelected.includes(node.id)
       );
       const newEdges = get().edges.filter(
-        (edge) => !edgesIdsSelected.includes(edge.id),
+        (edge) => !edgesIdsSelected.includes(edge.id)
       );
 
       set({ nodes: newNodes, edges: newEdges });
@@ -402,7 +402,7 @@ const useFlowStore = create<FlowStoreType>((set, get) => ({
           style: { stroke: "#555" },
           className: "stroke-foreground stroke-connection",
         },
-        oldEdges,
+        oldEdges
       );
 
       return newEdges;
@@ -412,7 +412,7 @@ const useFlowStore = create<FlowStoreType>((set, get) => ({
       .autoSaveCurrentFlow(
         get().nodes,
         newEdges,
-        get().reactFlowInstance?.getViewport() ?? { x: 0, y: 0, zoom: 1 },
+        get().reactFlowInstance?.getViewport() ?? { x: 0, y: 0, zoom: 1 }
       );
   },
   unselectAll: () => {
@@ -443,7 +443,7 @@ const useFlowStore = create<FlowStoreType>((set, get) => ({
     function validateSubgraph(nodes: string[]) {
       const errorsObjs = validateNodes(
         get().nodes.filter((node) => nodes.includes(node.id)),
-        get().edges,
+        get().edges
       );
 
       const errors = errorsObjs.map((obj) => obj.errors).flat();
@@ -462,14 +462,14 @@ const useFlowStore = create<FlowStoreType>((set, get) => ({
     function handleBuildUpdate(
       vertexBuildData: VertexBuildTypeAPI,
       status: BuildStatus,
-      runId: string,
+      runId: string
     ) {
       console.log("handleBuildUpdate", vertexBuildData, status, runId);
       if (vertexBuildData && vertexBuildData.inactivated_vertices) {
         get().removeFromVerticesBuild(vertexBuildData.inactivated_vertices);
         get().updateBuildStatus(
           vertexBuildData.inactivated_vertices,
-          BuildStatus.INACTIVE,
+          BuildStatus.INACTIVE
         );
       }
 
@@ -485,15 +485,14 @@ const useFlowStore = create<FlowStoreType>((set, get) => ({
 
         // next_vertices_ids should be next_vertices_ids without the inactivated vertices
         const next_vertices_ids = vertexBuildData.next_vertices_ids.filter(
-          (id) => !vertexBuildData.inactivated_vertices?.includes(id),
+          (id) => !vertexBuildData.inactivated_vertices?.includes(id)
         );
         const top_level_vertices = vertexBuildData.top_level_vertices.filter(
-          (vertex) =>
+          (vertex) => !vertexBuildData.inactivated_vertices?.includes(vertex.id)
-            !vertexBuildData.inactivated_vertices?.includes(vertex.id),
         );
         const nextVertices: VertexLayerElementType[] = zip(
           next_vertices_ids,
-          top_level_vertices,
+          top_level_vertices
         ).map(([id, reference]) => ({ id: id!, reference }));
 
         const newLayers = [
@@ -515,7 +514,7 @@ const useFlowStore = create<FlowStoreType>((set, get) => ({
 
       get().addDataToFlowPool(
         { ...vertexBuildData, buildId: runId },
-        vertexBuildData.id,
+        vertexBuildData.id
       );
 
       useFlowStore.getState().updateBuildStatus([vertexBuildData.id], status);
@@ -524,7 +523,7 @@ const useFlowStore = create<FlowStoreType>((set, get) => ({
       const newFlowBuildStatus = { ...get().flowBuildStatus };
       // filter out the vertices that are not status
       const verticesToUpdate = verticesIds?.filter(
-        (id) => newFlowBuildStatus[id]?.status !== BuildStatus.BUILT,
+        (id) => newFlowBuildStatus[id]?.status !== BuildStatus.BUILT
       );
 
       if (verticesToUpdate) {
@@ -589,7 +588,7 @@ const useFlowStore = create<FlowStoreType>((set, get) => ({
       verticesLayers: VertexLayerElementType[][];
       runId: string;
       verticesToRun: string[];
-    } | null,
+    } | null
   ) => {
     set({ verticesBuild: vertices });
   },
@@ -614,7 +613,7 @@ const useFlowStore = create<FlowStoreType>((set, get) => ({
         // that are going to be built
         verticesIds: get().verticesBuild!.verticesIds.filter(
           // keep the vertices that are not in the list of vertices to remove
-          (vertex) => !vertices.includes(vertex),
+          (vertex) => !vertices.includes(vertex)
         ),
       },
     });

src/frontend/src/types/zustand/flow/index.ts

@@ -48,8 +48,16 @@ export type FlowStoreType = {
   onFlowPage: boolean;
   setOnFlowPage: (onFlowPage: boolean) => void;
   flowPool: FlowPoolType;
-  inputs: Array<{ type: string; id: string; displayName: string }>;
+  inputs: Array<{
-  outputs: Array<{ type: string; id: string; displayName: string }>;
+    type: string;
+    id: string;
+    displayName: string;
+  }>;
+  outputs: Array<{
+    type: string;
+    id: string;
+    displayName: string;
+  }>;
   hasIO: boolean;
   setFlowPool: (flowPool: FlowPoolType) => void;
   addDataToFlowPool: (data: FlowPoolObjectType, nodeId: string) => void;
@@ -70,7 +78,7 @@ export type FlowStoreType = {
     state:
       | FlowState
       | undefined
-      | ((oldState: FlowState | undefined) => FlowState),
+      | ((oldState: FlowState | undefined) => FlowState)
   ) => void;
   nodes: Node[];
   edges: Edge[];
@@ -78,11 +86,11 @@ export type FlowStoreType = {
   onEdgesChange: OnEdgesChange;
   setNodes: (
     update: Node[] | ((oldState: Node[]) => Node[]),
-    skipSave?: boolean,
+    skipSave?: boolean
   ) => void;
   setEdges: (
     update: Edge[] | ((oldState: Edge[]) => Edge[]),
-    skipSave?: boolean,
+    skipSave?: boolean
   ) => void;
   setNode: (id: string, update: Node | ((oldState: Node) => Node)) => void;
   getNode: (id: string) => Node | undefined;
@@ -90,12 +98,12 @@ export type FlowStoreType = {
   deleteEdge: (edgeId: string | Array<string>) => void;
   paste: (
     selection: { nodes: any; edges: any },
-    position: { x: number; y: number; paneX?: number; paneY?: number },
+    position: { x: number; y: number; paneX?: number; paneY?: number }
   ) => void;
   lastCopiedSelection: { nodes: any; edges: any } | null;
   setLastCopiedSelection: (
     newSelection: { nodes: any; edges: any } | null,
-    isCrop?: boolean,
+    isCrop?: boolean
   ) => void;
   cleanFlow: () => void;
   setFilterEdge: (newState) => void;
@@ -119,7 +127,7 @@ export type FlowStoreType = {
       verticesLayers: VertexLayerElementType[][];
       runId: string;
       verticesToRun: string[];
-    } | null,
+    } | null
   ) => void;
   addToVerticesBuild: (vertices: string[]) => void;
   removeFromVerticesBuild: (vertices: string[]) => void;
@@ -137,7 +145,7 @@ export type FlowStoreType = {
   updateFlowPool: (
     nodeId: string,
     data: FlowPoolObjectType | ChatOutputType | chatInputType,
-    buildId?: string,
+    buildId?: string
   ) => void;
   getNodePosition: (nodeId: string) => { x: number; y: number };
 };

src/frontend/src/utils/storeUtils.ts

@@ -7,7 +7,7 @@ export default function cloneFLowWithParent(
   flow: FlowType,
   parent: string,
   is_component: boolean,
-  keepId = false,
+  keepId = false
 ) {
   let childFLow = cloneDeep(flow);
   childFLow.parent = parent;
@@ -21,8 +21,16 @@ export default function cloneFLowWithParent(
 }
 
 export function getInputsAndOutputs(nodes: Node[]) {
-  let inputs: { type: string; id: string; displayName: string }[] = [];
+  let inputs: {
-  let outputs: { type: string; id: string; displayName: string }[] = [];
+    type: string;
+    id: string;
+    displayName: string;
+  }[] = [];
+  let outputs: {
+    type: string;
+    id: string;
+    displayName: string;
+  }[] = [];
   nodes.forEach((node) => {
     const nodeData: NodeDataType = node.data as NodeDataType;
     if (isOutputNode(nodeData)) {