orcheo-canvas 0.0.1

package/src/features/workflow/components/panels/sidebar-nodes/node-categories.tsx

@@ -0,0 +1,19 @@
+import type { NodeCategory } from "../sidebar-panel.types";
+
+import { actionCategory } from "./actions";
+import { aiCategory } from "./ai";
+import { dataCategory } from "./data";
+import { logicCategory } from "./logic";
+import { specialCategory } from "./special";
+import { triggerCategory } from "./triggers";
+import { visualizationCategory } from "./visualization";
+
+export const nodeCategories: NodeCategory[] = [
+  specialCategory,
+  triggerCategory,
+  actionCategory,
+  logicCategory,
+  dataCategory,
+  aiCategory,
+  visualizationCategory,
+];

package/src/features/workflow/components/panels/sidebar-nodes/node-lists.ts

@@ -0,0 +1,71 @@
+import { DEFAULT_PYTHON_CODE } from "@features/workflow/lib/python-node";
+
+import { buildSidebarNode, type SidebarNode } from "../sidebar-panel.types";
+
+export const recentNodes: SidebarNode[] = [
+  buildSidebarNode({
+    id: "http-recent",
+    name: "HTTP Request",
+    description: "Make HTTP requests to external APIs",
+    iconKey: "http",
+    type: "api",
+  }),
+  buildSidebarNode({
+    id: "python-recent",
+    name: "Python Code",
+    description: "Execute custom Python scripts",
+    iconKey: "python",
+    type: "python",
+    data: {
+      code: DEFAULT_PYTHON_CODE,
+    },
+  }),
+  buildSidebarNode({
+    id: "text-generation-recent",
+    name: "Text Generation",
+    description: "Generate text with AI models",
+    iconKey: "textGeneration",
+    type: "ai",
+  }),
+  buildSidebarNode({
+    id: "start-node-recent",
+    name: "Workflow Start",
+    description: "Beginning of the workflow",
+    iconKey: "start",
+    type: "start",
+  }),
+  buildSidebarNode({
+    id: "end-node-recent",
+    name: "Workflow End",
+    description: "End of the workflow",
+    iconKey: "end",
+    type: "end",
+  }),
+];
+
+export const favoriteNodes: SidebarNode[] = [
+  buildSidebarNode({
+    id: "http-favorite",
+    name: "HTTP Request",
+    description: "Make HTTP requests to external APIs",
+    iconKey: "http",
+    type: "api",
+  }),
+  buildSidebarNode({
+    id: "transform-favorite",
+    name: "Transform",
+    description: "Transform data between steps",
+    iconKey: "transform",
+    type: "data",
+  }),
+  buildSidebarNode({
+    id: "python-favorite",
+    name: "Python Code",
+    description: "Execute custom Python scripts",
+    iconKey: "python",
+    type: "python",
+    data: {
+      code: DEFAULT_PYTHON_CODE,
+    },
+  }),
+];

package/src/features/workflow/components/panels/sidebar-nodes/special.tsx

@@ -0,0 +1,44 @@
+import React from "react";
+import { Settings } from "lucide-react";
+
+import { buildSidebarNode, type NodeCategory } from "../sidebar-panel.types";
+
+export const specialCategory: NodeCategory = {
+  id: "special",
+  name: "Special Nodes",
+  icon: <Settings className="h-4 w-4 text-gray-500" />,
+  nodes: [
+    buildSidebarNode({
+      id: "start-node",
+      name: "Workflow Start",
+      description: "Beginning of the workflow",
+      iconKey: "start",
+      type: "start",
+    }),
+    buildSidebarNode({
+      id: "end-node",
+      name: "Workflow End",
+      description: "End of the workflow",
+      iconKey: "end",
+      type: "end",
+    }),
+    buildSidebarNode({
+      id: "group-node",
+      name: "Node Group",
+      description: "Group related nodes together",
+      iconKey: "group",
+      type: "group",
+    }),
+    buildSidebarNode({
+      id: "sticky-note",
+      name: "Sticky Note",
+      description: "Add workflow annotations",
+      iconKey: "stickyNote",
+      type: "annotation",
+      data: {
+        color: "yellow",
+        content: "Document why this branch exists.",
+      },
+    }),
+  ],
+};

package/src/features/workflow/components/panels/sidebar-nodes/triggers.tsx

@@ -0,0 +1,44 @@
+import React from "react";
+import { Zap } from "lucide-react";
+
+import { buildSidebarNode, type NodeCategory } from "../sidebar-panel.types";
+
+export const triggerCategory: NodeCategory = {
+  id: "triggers",
+  name: "Triggers",
+  icon: <Zap className="h-4 w-4 text-amber-500" />,
+  nodes: [
+    buildSidebarNode({
+      id: "webhook-trigger",
+      name: "Webhook",
+      description: "Trigger workflow via HTTP request",
+      iconKey: "webhook",
+      type: "trigger",
+      backendType: "WebhookTriggerNode",
+    }),
+    buildSidebarNode({
+      id: "manual-trigger",
+      name: "Manual",
+      description: "Dispatch runs from the dashboard",
+      iconKey: "manualTrigger",
+      type: "trigger",
+      backendType: "ManualTriggerNode",
+    }),
+    buildSidebarNode({
+      id: "http-polling-trigger",
+      name: "HTTP Polling",
+      description: "Poll an API on a schedule",
+      iconKey: "httpPolling",
+      type: "trigger",
+      backendType: "HttpPollingTriggerNode",
+    }),
+    buildSidebarNode({
+      id: "schedule-trigger",
+      name: "Schedule",
+      description: "Run workflow on a schedule",
+      iconKey: "schedule",
+      type: "trigger",
+      backendType: "CronTriggerNode",
+    }),
+  ],
+};

package/src/features/workflow/components/panels/sidebar-nodes/visualization.tsx

@@ -0,0 +1,33 @@
+import React from "react";
+import { BarChart } from "lucide-react";
+
+import { buildSidebarNode, type NodeCategory } from "../sidebar-panel.types";
+
+export const visualizationCategory: NodeCategory = {
+  id: "visualization",
+  name: "Visualization",
+  icon: <BarChart className="h-4 w-4 text-orange-500" />,
+  nodes: [
+    buildSidebarNode({
+      id: "bar-chart",
+      name: "Bar Chart",
+      description: "Create bar charts from data",
+      iconKey: "barChart",
+      type: "visualization",
+    }),
+    buildSidebarNode({
+      id: "line-chart",
+      name: "Line Chart",
+      description: "Create line charts from data",
+      iconKey: "lineChart",
+      type: "visualization",
+    }),
+    buildSidebarNode({
+      id: "pie-chart",
+      name: "Pie Chart",
+      description: "Create pie charts from data",
+      iconKey: "pieChart",
+      type: "visualization",
+    }),
+  ],
+};

package/src/features/workflow/components/panels/sidebar-panel.tsx

@@ -0,0 +1,243 @@
+import React, { useMemo, useState } from "react";
+import { Input } from "@/design-system/ui/input";
+import { Button } from "@/design-system/ui/button";
+import { ScrollArea } from "@/design-system/ui/scroll-area";
+import {
+  Tabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger,
+} from "@/design-system/ui/tabs";
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "@/design-system/ui/accordion";
+import { Search, ChevronLeft } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+
+import { SidebarNodeItem } from "./sidebar-node-item";
+import { favoriteNodes, nodeCategories, recentNodes } from "./sidebar-nodes";
+import type { NodeCategory, SidebarNode } from "./sidebar-panel.types";
+
+interface SidebarPanelProps {
+  isCollapsed?: boolean;
+  onToggleCollapse?: () => void;
+  onAddNode?: (node: SidebarNode) => void;
+  className?: string;
+  position?: "left" | "canvas";
+}
+
+export default function SidebarPanel({
+  isCollapsed = false,
+  onToggleCollapse,
+  onAddNode,
+  className,
+  position = "left",
+}: SidebarPanelProps) {
+  const [searchQuery, setSearchQuery] = useState("");
+
+  const filteredCategories = useMemo(
+    () => filterCategories(nodeCategories, searchQuery),
+    [searchQuery],
+  );
+
+  const handleNodeSelect = (node: SidebarNode) => {
+    onAddNode?.(node);
+  };
+
+  const handleCategoryClick = () => {
+    if (isCollapsed) {
+      onToggleCollapse?.();
+    }
+  };
+
+  const containerClasses =
+    position === "canvas"
+      ? cn(
+          "bg-card border border-border rounded-md shadow-md transition-all duration-300",
+          isCollapsed ? "w-[50px]" : "w-[300px]",
+          className,
+        )
+      : cn(
+          "h-full border-r border-border bg-card transition-all duration-300 flex flex-col",
+          isCollapsed ? "w-[50px]" : "w-[300px]",
+          className,
+        );
+
+  const scrollAreaClass =
+    position === "canvas" ? "h-[calc(100vh-280px)]" : "h-[calc(100vh-180px)]";
+
+  return (
+    <div className={containerClasses}>
+      <div className="flex items-center justify-between p-3 border-b border-border">
+        {!isCollapsed && <div className="text-lg font-semibold">Nodes</div>}
+        <Button
+          variant="ghost"
+          size="icon"
+          onClick={onToggleCollapse}
+          className={cn(isCollapsed && "mx-auto")}
+        >
+          <ChevronLeft
+            className={cn(
+              "h-5 w-5 transition-transform",
+              isCollapsed && "rotate-180",
+            )}
+          />
+        </Button>
+      </div>
+
+      {!isCollapsed && (
+        <>
+          <div className="p-3">
+            <div className="relative">
+              <Search className="absolute left-2 top-2.5 h-4 w-4 text-muted-foreground" />
+              <Input
+                placeholder="Search nodes..."
+                className="pl-8"
+                value={searchQuery}
+                onChange={(event) => setSearchQuery(event.target.value)}
+              />
+            </div>
+          </div>
+
+          <Tabs defaultValue="all" className="flex-1 flex flex-col">
+            <div className="px-3">
+              <TabsList className="w-full">
+                <TabsTrigger value="all" className="flex-1">
+                  All
+                </TabsTrigger>
+                <TabsTrigger value="recent" className="flex-1">
+                  Recent
+                </TabsTrigger>
+                <TabsTrigger value="favorites" className="flex-1">
+                  Favorites
+                </TabsTrigger>
+              </TabsList>
+            </div>
+
+            <TabsContent value="all" className="flex-1 mt-0">
+              <ScrollArea className={scrollAreaClass}>
+                <div className="p-3">
+                  {searchQuery && filteredCategories.length === 0 ? (
+                    <div className="text-center py-8 text-muted-foreground">
+                      No nodes found matching "{searchQuery}"
+                    </div>
+                  ) : (
+                    <Accordion
+                      type="multiple"
+                      defaultValue={nodeCategories.map(
+                        (category) => category.id,
+                      )}
+                      className="space-y-2"
+                    >
+                      {filteredCategories.map((category) => (
+                        <AccordionItem
+                          key={category.id}
+                          value={category.id}
+                          className="border-border"
+                        >
+                          <AccordionTrigger className="py-2 hover:no-underline">
+                            <div className="flex items-center gap-2">
+                              {category.icon}
+                              <span>{category.name}</span>
+                            </div>
+                          </AccordionTrigger>
+                          <AccordionContent>
+                            <div className="space-y-1 pl-6">
+                              {category.nodes.map((node) => (
+                                <SidebarNodeItem
+                                  key={node.id}
+                                  node={node}
+                                  onSelect={handleNodeSelect}
+                                />
+                              ))}
+                            </div>
+                          </AccordionContent>
+                        </AccordionItem>
+                      ))}
+                    </Accordion>
+                  )}
+                </div>
+              </ScrollArea>
+            </TabsContent>
+
+            <TabsContent value="recent" className="flex-1 mt-0">
+              <ScrollArea className={scrollAreaClass}>
+                <div className="p-3 space-y-2">
+                  {recentNodes.map((node) => (
+                    <SidebarNodeItem
+                      key={node.id}
+                      node={node}
+                      onSelect={handleNodeSelect}
+                    />
+                  ))}
+                </div>
+              </ScrollArea>
+            </TabsContent>
+
+            <TabsContent value="favorites" className="flex-1 mt-0">
+              <ScrollArea className={scrollAreaClass}>
+                {favoriteNodes.length > 0 ? (
+                  <div className="p-3 space-y-2">
+                    {favoriteNodes.map((node) => (
+                      <SidebarNodeItem
+                        key={node.id}
+                        node={node}
+                        onSelect={handleNodeSelect}
+                      />
+                    ))}
+                  </div>
+                ) : (
+                  <div className="flex items-center justify-center h-full text-muted-foreground p-4">
+                    No favorite nodes yet
+                  </div>
+                )}
+              </ScrollArea>
+            </TabsContent>
+          </Tabs>
+        </>
+      )}
+
+      {isCollapsed && (
+        <div className="flex flex-col items-center gap-4 py-4">
+          {nodeCategories.map((category) => (
+            <Button
+              key={category.id}
+              variant="ghost"
+              size="icon"
+              className="h-8 w-8"
+              title={category.name}
+              onClick={handleCategoryClick}
+            >
+              {category.icon}
+            </Button>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
+
+const filterCategories = (
+  categories: NodeCategory[],
+  query: string,
+): NodeCategory[] => {
+  const normalizedQuery = query.toLowerCase();
+  if (!normalizedQuery) {
+    return categories;
+  }
+
+  return categories
+    .map((category) => ({
+      ...category,
+      nodes: category.nodes.filter(
+        (node) =>
+          node.name.toLowerCase().includes(normalizedQuery) ||
+          node.description.toLowerCase().includes(normalizedQuery),
+      ),
+    }))
+    .filter((category) => category.nodes.length > 0);
+};

package/src/features/workflow/components/panels/sidebar-panel.types.ts

@@ -0,0 +1,73 @@
+import type { ReactNode } from "react";
+
+import {
+  getNodeIcon,
+  type NodeIconKey,
+} from "@features/workflow/lib/node-icons";
+
+export interface NodeCategory {
+  id: string;
+  name: string;
+  icon: ReactNode;
+  nodes: SidebarNode[];
+}
+
+export interface SidebarNodeData {
+  label: string;
+  type: string;
+  description: string;
+  iconKey: NodeIconKey;
+  backendType?: string;
+  [key: string]: unknown;
+}
+
+export interface SidebarNode {
+  id: string;
+  name: string;
+  description: string;
+  iconKey: NodeIconKey;
+  icon?: ReactNode;
+  type: string;
+  backendType?: string;
+  data: SidebarNodeData;
+}
+
+export interface BuildSidebarNodeParams {
+  id: string;
+  name: string;
+  description: string;
+  iconKey: NodeIconKey;
+  type: string;
+  backendType?: string;
+  data?: Record<string, unknown>;
+}
+
+export const buildSidebarNode = ({
+  id,
+  name,
+  description,
+  iconKey,
+  type,
+  backendType,
+  data,
+}: BuildSidebarNodeParams): SidebarNode => {
+  const mergedData: SidebarNodeData = {
+    label: name,
+    type,
+    description,
+    ...(data ?? {}),
+    iconKey,
+    ...(backendType ? { backendType } : {}),
+  };
+
+  return {
+    id,
+    name,
+    description,
+    iconKey,
+    icon: getNodeIcon(iconKey),
+    type,
+    backendType,
+    data: mergedData,
+  };
+};

package/src/features/workflow/components/panels/variable-inspector-table.tsx

@@ -0,0 +1,99 @@
+"use client";
+
+import React from "react";
+import { Button } from "@/design-system/ui/button";
+import { Copy, Eye, EyeOff } from "lucide-react";
+import type { VariablesMap } from "./variable-inspector-types";
+
+interface VariableTableViewProps {
+  variables: VariablesMap;
+  hiddenValues: string[];
+  onToggleHideValue: (path: string) => void;
+  onCopy: (value: unknown) => void;
+}
+
+export function VariableTableView({
+  variables,
+  hiddenValues,
+  onToggleHideValue,
+  onCopy,
+}: VariableTableViewProps) {
+  const flatVariables = React.useMemo(
+    () => flattenObject(variables),
+    [variables],
+  );
+
+  return (
+    <div className="border rounded-md overflow-hidden">
+      <table className="w-full">
+        <thead>
+          <tr className="bg-muted">
+            <th className="text-left p-2 font-medium text-sm">Variable</th>
+            <th className="text-left p-2 font-medium text-sm">Value</th>
+            <th className="text-left p-2 font-medium text-sm w-10">Actions</th>
+          </tr>
+        </thead>
+        <tbody>
+          {Object.entries(flatVariables).map(([key, value]) => {
+            const isHidden = hiddenValues.includes(key);
+            const displayValue =
+              isHidden && typeof value === "string"
+                ? "••••••••"
+                : typeof value === "object"
+                  ? JSON.stringify(value)
+                  : String(value);
+
+            return (
+              <tr key={key} className="border-t border-border">
+                <td className="p-2 font-mono text-sm">{key}</td>
+                <td className="p-2 font-mono text-sm text-muted-foreground">
+                  {displayValue}
+                </td>
+                <td className="p-2">
+                  <div className="flex items-center">
+                    {typeof value === "string" && (
+                      <Button
+                        variant="ghost"
+                        size="icon"
+                        className="h-6 w-6"
+                        onClick={() => onToggleHideValue(key)}
+                      >
+                        {isHidden ? (
+                          <Eye className="h-3 w-3" />
+                        ) : (
+                          <EyeOff className="h-3 w-3" />
+                        )}
+                      </Button>
+                    )}
+                    <Button
+                      variant="ghost"
+                      size="icon"
+                      className="h-6 w-6"
+                      onClick={() => onCopy(value)}
+                    >
+                      <Copy className="h-3 w-3" />
+                    </Button>
+                  </div>
+                </td>
+              </tr>
+            );
+          })}
+        </tbody>
+      </table>
+    </div>
+  );
+}
+
+const flattenObject = (obj: VariablesMap, prefix = ""): VariablesMap => {
+  return Object.entries(obj).reduce<VariablesMap>((acc, [key, value]) => {
+    const pre = prefix.length ? `${prefix}.` : "";
+
+    if (value !== null && typeof value === "object" && !Array.isArray(value)) {
+      Object.assign(acc, flattenObject(value as VariablesMap, `${pre}${key}`));
+      return acc;
+    }
+
+    acc[`${pre}${key}`] = value;
+    return acc;
+  }, {});
+};