[Hackathon] feat: Custom Operator Builder — Create Reusable Operators from Code

[EmilySun621]

TL;DR: Write Python code once, save it as a real operator that appears in the drag-and-drop panel alongside built-in ones. Reusable, configurable, shareable — zero engine changes.

⚠️ Still under testing

---

😤 The Problem

A lab has Python functions they use in every project — a BMI calculator, an outlier remover, a custom normalization method. Every new workflow means someone opens a Python UDF and re-types the same code. If someone improves the function, the other workflows don't get the update.

No library. No reuse. No sharing. Just copy-paste across workflows.

---

✨ What We Built

🧩 Custom Operator Builder

Write Python code → save it as a named operator → drag and drop it in any workflow, just like a built-in one.

---

📋 My Operators Page

New sidebar entry under "Your Work":

	Feature	Details
🗂️	Operator grid	Saved operators with icon, name, description, category
➕	Create	"+ Create Operator" button
✏️	Manage	Edit, duplicate, delete existing operators

---

🖥️ Full-Page Operator Editor

Split-screen IDE-like experience:

Left panel (40%) — Configuration:

	Setting	Details
🏷️	Identity	Name, description, icon picker (10 presets)
📂	Category	Default "My Operators" or create custom categories
🔌	Ports	Define input/output count and types
⚙️	Properties	Add parameters (string / number / boolean / select) — accessible in code via self.args['property_name']
🌐	Sharing	"Make public" toggle for community sharing

Right panel (60%) — Code Editor:

	Feature	Details
📝	Monaco editor	Full syntax highlighting, same experience as built-in Python UDF
📄	Template	Pre-filled pytexera boilerplate
▶️	Test Run	Syntax validation before saving

---

🎯 Drag & Drop in Workflow Editor

Once saved, custom operators appear in the operator panel under a "My Operators" category:

• Shows alongside built-in operators
• Drag onto canvas → creates a node pre-filled with saved code, custom display name, and configured ports
• Works exactly like any built-in operator — connect, configure, run

---

⚙️ How It Works Under the Hood

Custom operators are a smart wrapper around Python UDF — no engine modifications:

What happens	How
Drag custom operator	Creates a standard PythonUDFV2 node
Saved code	Injected into the operator's code field
Custom properties	Rendered as PROPS = {...} dictionary prepended to code
Ports	Mapped to UDF's dynamic port configuration
Display name	customDisplayName shows your operator name instead of "Python UDF"

Result: Zero engine changes, full compatibility with existing execution infrastructure.

---

🎬 Demo Walkthrough

1. ➕ Open "My Operators" → "+ Create Operator"
2. 🏷️ Name: "BMI Calculator", icon: 📊
3. 🔌 Configure 1 input port, 1 output port
4. 📝 Write code:

   df['BMI'] = df['weight'] / (df['height'] / 100) ** 2
   yield df

5. 💾 Save → operator card appears in My Operators page
6. 🖥️ Open a workflow → left panel shows "My Operators" category
7. 🎯 Drag "BMI Calculator" onto canvas → Python UDF node appears with code pre-filled
8. ▶️ Connect to data source and run

---

📸 Screenshots

---

🏗️ Architecture

┌──────────────────────────────────────────────────────┐
│  🖥️  Frontend (Angular)                              │
│                                                      │
│  New Components                                      │
│  • My Operators page (grid, create, edit, delete)    │
│  • Full-page editor (Monaco + config panels)         │
│  • Draggable custom operator label in operator menu  │
│                                                      │
│  New Services                                        │
│  • custom-operator.service (CRUD, localStorage)      │
│  • custom-operator-factory.service (builds           │
│    PythonUDFV2 predicate from saved config)          │
│                                                      │
│  Modified (additive only)                            │
│  • 3 new routes, sidebar link, operator menu panel,  │
│    dragStartedCustom() in drag-drop service          │
├──────────────────────────────────────────────────────┤
│  🔒 Texera Core Engine (Amber) — UNMODIFIED          │
│  Custom operators are PythonUDFV2 wrappers —         │
│  no registry changes, no engine changes              │
└──────────────────────────────────────────────────────┘

🔒 Zero modifications to Texera's core engine

---

✅ Testing

Test	Status
Angular typecheck	✅ Clean
Create operator → save to localStorage	✅ Pass
Operator appears in panel	✅ Pass
Drag to canvas → creates PythonUDFV2 with pre-filled code	✅ Pass
Edit / delete	✅ Pass

---

💡 Why This Matters

Every data science platform has built-in operators. Almost none let users create their own without touching the engine internals. This turns every lab's common Python functions into first-class, drag-and-drop, shareable operators — with zero infrastructure changes.

❌ Copy-paste the same Python UDF into every new workflow, hope everyone uses the latest version

✅ Save once → drag and drop forever → update in one place → everyone gets the fix