Capability-Driven Node Palette

Palette Structure

The node palette sidebar in Flow Studio is organized into sections, each corresponding to one capability type. The section header shows the capability icon and display name. Nodes within each section are sorted alphabetically by display name.

  Node Palette
  ├── [webhook icon] Webhooks
  │       ├── Webhook Trigger
  │       └── Outbound Webhook Call
  ├── [envelope icon] Messaging
  │       ├── Email
  │       ├── Push Notification
  │       ├── Slack Message
  │       └── SMS
  ├── [database icon] Datasources
  │       ├── DataOcean Query
  │       ├── REST Datasource
  │       └── SQL Query
  └── ... (9 more capability sections)
  

Palette Store (TypeScript)

// Simplified palette store logic
interface PaletteSection {
  capabilityType: string;
  displayName: string;
  iconClass: string;
  nodes: NodePaletteItem[];
}

function buildPalette(
  capabilities: CapabilityInfo[],
  nodeTemplates: NodeTemplate[]
): PaletteSection[] {
  return capabilities.map(cap => ({
    capabilityType: cap.type,
    displayName: cap.displayName,
    iconClass: cap.iconClass,
    nodes: nodeTemplates
      .filter(t => t.capabilityType === cap.type)
      .sort((a, b) => a.displayName.localeCompare(b.displayName))
  }));
}

Capability Icon on Node Tiles

Each node tile on the canvas displays a small capability icon in its top-right corner. This lets designers quickly identify what category a node belongs to without hovering. The icon is resolved from CapabilityMetadata.IconClass:

// Node tile capability badge
function CapabilityBadge({ capabilityType }: { capabilityType: string }) {
  const meta = useCapabilityMeta(capabilityType);
  if (!meta) return null;
  return (
    <div className="capability-badge" title={meta.displayName}>
      <i className={meta.iconClass} />
    </div>
  );
}

Search and Filtering

The palette search bar filters across all capability sections simultaneously. Typing "email" shows:

• Email node (Messaging capability)
• Any other node with "email" in its name or description

The capability filter dropdown lets designers narrow to a single capability (e.g., show only Datasource nodes), collapsing all other sections.

Capability Visibility by Policy

If a tenant or user does not have access to a capability type (controlled by NodeCapabilityPolicy), that entire palette section is hidden. The designer receives the filtered capability list from the backend API based on the authenticated user's policy.