[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

[Yicong-Huang]

Thank you for participating in the hackathon. We really enjoyed your idea and appreciate the contribution.

We are now archiving hackathon submissions by closing the submission PRs. However, we strongly encourage you to continue developing your idea and explore the possibility of merging it into the main branch.

To move forward, please:

1. Open an issue describing your idea, and link this PR as a reference.
2. Discuss the design and implementation plan with us in the issue.
3. Open smaller, focused PRs so they can go through proper review.

Thanks again for your participation and contribution!