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

[EmilySun621]

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

The Story

Dr. Sarah's lab has a set of Python functions they use in every project — a BMI calculator, an outlier remover, a custom normalization method specific to their biomedical data. Every time they start a new workflow, someone has to open a Python UDF operator and re-type (or copy-paste) the same code. If someone improves the function, the other workflows don't get the update. There's no library, no reuse, no sharing.

What if they could save their code as a real operator — one that appears in the operator panel, ready to drag and drop, just like the built-in ones?

What We Built

A Custom Operator Builder that lets users create reusable operators from Python code. Write once, use everywhere.

My Operators Page

New sidebar entry under "Your Work" → "My Operators":

• Grid of saved custom operators, each showing icon, name, description, category
• "+ Create Operator" button to build a new one
• Edit, duplicate, delete existing operators

Full-Page Operator Editor

Split-screen editor like a real IDE:

Left panel (40%) — Configuration:

• Name, description, icon picker (10 preset icons)
• Category (default "My Operators", or create custom categories)
• Input ports — define how many inputs and their types
• Output ports — define outputs
• Configurable properties — add parameters (string/number/boolean/select) that users can set per-instance, accessible in code via self.args['property_name']
• "Make public" toggle for community sharing

Right panel (60%) — Code Editor:

• Full Monaco editor with Python syntax highlighting
• Pre-filled template with pytexera boilerplate
• "Test Run" button for syntax validation
• Same editor experience as Texera's built-in Python UDF

Drag & Drop in Workflow Editor

Once saved, custom operators appear in the operator panel (left side of workflow editor) under a "My Operators" category:

• Shows alongside built-in operators
• Drag onto canvas → creates a Python UDF node pre-filled with the 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 don't modify Texera's operator registry or engine. They're a smart wrapper around Python UDF:

• Dragging a custom operator creates a standard PythonUDFV2 node
• The saved code is injected into the operator's code field
• Custom properties are rendered as a PROPS = {...} dictionary prepended to the code
• Ports are mapped to the UDF's dynamic port configuration
• The customDisplayName shows the operator's name instead of "Python UDF"

This means zero engine changes, full compatibility with existing execution infrastructure.

Demo

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

Files Changed

New Components

• dashboard/component/user/user-operator/user-operator.component.* — My Operators list/grid page
• dashboard/component/user/user-operator/user-operator-editor.component.* — Full-page editor with Monaco
• workspace/component/left-panel/operator-menu/custom-operator-label/custom-operator-label.component.* — Draggable label in operator panel

New Services

• dashboard/service/user/custom-operator/custom-operator.service.ts — CRUD with localStorage persistence
• dashboard/service/user/custom-operator/custom-operator-factory.service.ts — Builds PythonUDFV2 predicate from saved config

New Types

• dashboard/type/custom-operator.interface.ts — CustomOperator, ports, properties, code template

Modified (additive only)

• app-routing.module.ts — 3 new routes (list, create, edit)
• dashboard.component.html/ts — "My Operators" sidebar link
• operator-menu.component.* — "My Operators" collapse panel in workflow editor
• drag-drop.service.ts — dragStartedCustom() method for pre-built predicates

Testing

• Angular typecheck: clean ✅
• Create operator: save to localStorage ✅
• Operator appears in panel: ✅
• Drag to canvas: creates PythonUDFV2 with pre-filled code ✅
• Edit/delete: ✅