feat(frontend): add Python UDF UI parameter form support

frontend/package.json

@@ -38,6 +38,7 @@
     "@codingame/monaco-vscode-java-default-extension": "8.0.4",
     "@codingame/monaco-vscode-python-default-extension": "8.0.4",
     "@codingame/monaco-vscode-r-default-extension": "8.0.4",
+    "@lezer/python": "1.1.18",
     "@ngneat/until-destroy": "8.1.4",
     "@ngx-formly/core": "6.3.12",
     "@ngx-formly/ng-zorro-antd": "6.3.12",

frontend/src/app/app.module.ts

@@ -156,6 +156,7 @@ import { NzTreeModule } from "ng-zorro-antd/tree";
 import { NzTreeViewModule } from "ng-zorro-antd/tree-view";
 import { NzNoAnimationModule } from "ng-zorro-antd/core/animation";
 import { TreeModule } from "@ali-hm/angular-tree-component";
+import { UiUdfParametersComponent } from "./workspace/component/ui-udf-parameters/ui-udf-parameters.component";
 import { ResultExportationComponent } from "./workspace/component/result-exportation/result-exportation.component";
 import { ReportGenerationService } from "./workspace/service/report-generation/report-generation.service";
 import { SearchBarComponent } from "./dashboard/component/user/search-bar/search-bar.component";
@@ -265,6 +266,7 @@ registerLocaleData(en);
     NzGridModule,
     ScrollingModule,
     FormlyRepeatDndComponent,
+    UiUdfParametersComponent,
     AdminGmailComponent,
     PublicProjectComponent,
     WorkspaceComponent,

frontend/src/app/common/formly/formly-config.ts

@@ -27,6 +27,7 @@ import { PresetWrapperComponent } from "./preset-wrapper/preset-wrapper.componen
 import { DatasetFileSelectorComponent } from "../../workspace/component/dataset-file-selector/dataset-file-selector.component";
 import { CollabWrapperComponent } from "./collab-wrapper/collab-wrapper/collab-wrapper.component";
 import { FormlyRepeatDndComponent } from "./repeat-dnd/repeat-dnd.component";
+import { UiUdfParametersComponent } from "../../workspace/component/ui-udf-parameters/ui-udf-parameters.component";
 import { DatasetVersionSelectorComponent } from "../../workspace/component/dataset-version-selector/dataset-version-selector.component";
 
 /**
@@ -80,6 +81,7 @@ export const TEXERA_FORMLY_CONFIG = {
     { name: "inputautocomplete", component: DatasetFileSelectorComponent, wrappers: ["form-field"] },
     { name: "datasetversionselector", component: DatasetVersionSelectorComponent, wrappers: ["form-field"] },
     { name: "repeat-section-dnd", component: FormlyRepeatDndComponent },
+    { name: "ui-udf-parameters", component: UiUdfParametersComponent, wrappers: ["form-field"] },
   ],
   wrappers: [
     { name: "preset-wrapper", component: PresetWrapperComponent },

frontend/src/app/workspace/component/ui-udf-parameters/ui-udf-parameters.component.html

@@ -0,0 +1,43 @@
+<!--
+ Licensed to the Apache Software Foundation (ASF) under one
+ or more contributor license agreements.  See the NOTICE file
+ distributed with this work for additional information
+ regarding copyright ownership.  The ASF licenses this file
+ to you under the Apache License, Version 2.0 (the
+ "License"); you may not use this file except in compliance
+ with the License.  You may obtain a copy of the License at
+
+   http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing,
+ software distributed under the License is distributed on an
+ "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ KIND, either express or implied.  See the License for the
+ specific language governing permissions and limitations
+ under the License.
+-->
+<div
+  class="ui-udf-parameter-list"
+  *ngIf="model?.length">
+  <div class="ui-udf-parameter-row header">
+    <div
+      class="field-cell"
+      *ngFor="let column of fieldColumns">
+      <span class="col-title">{{ column.label }}</span>
+    </div>
+  </div>
+
+  <div
+    class="ui-udf-parameter-row"
+    *ngFor="let parameter of (model || []); let i = index; trackBy: trackByParameterName">
+    <ng-container *ngIf="field.fieldGroup?.[i] as rowField">
+      <div
+        class="field-cell"
+        *ngFor="let column of fieldColumns">
+        <formly-field
+          *ngIf="getColumnField(rowField, column) as columnField"
+          [field]="columnField"></formly-field>
+      </div>
+    </ng-container>
+  </div>
+</div>

frontend/src/app/workspace/component/ui-udf-parameters/ui-udf-parameters.component.scss

@@ -0,0 +1,37 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+.ui-udf-parameter-row {
+  display: grid;
+  grid-template-columns: 250px 250px 1fr;
+  gap: 12px;
+  align-items: start;
+}
+
+.field-cell {
+  min-width: 0;
+}
+
+:host ::ng-deep .ant-form-item {
+  margin-bottom: 0;
+}
+
+:host ::ng-deep .ant-form-item-label {
+  display: none;
+}

frontend/src/app/workspace/component/ui-udf-parameters/ui-udf-parameters.component.spec.ts

@@ -0,0 +1,117 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import { FormControl } from "@angular/forms";
+import { FormlyFieldConfig } from "@ngx-formly/core";
+import { UiUdfParametersComponent } from "./ui-udf-parameters.component";
+
+describe("UiUdfParametersComponent", () => {
+  let component: UiUdfParametersComponent;
+
+  beforeEach(() => {
+    component = new UiUdfParametersComponent();
+  });
+
+  it("should disable name and type fields while leaving value editable", () => {
+    const valueControl = new FormControl({ value: "42", disabled: true });
+    const nameControl = new FormControl("threshold");
+    const typeControl = new FormControl("double");
+
+    const rowField = rowConfig([
+      { key: "value", formControl: valueControl },
+      { key: "attributeName", formControl: nameControl },
+      { key: "attributeType", formControl: typeControl },
+    ]);
+
+    (component as any).field = { model: [{}], fieldGroup: [rowField] } as FormlyFieldConfig;
+
+    component.onPopulate((component as any).field);
+
+    // templateOptions is deprecated, but some existing Formly wrappers still read it.
+    [
+      {
+        column: component.fieldColumns[0],
+        field: component.getColumnField(rowField, component.fieldColumns[0]),
+        control: valueControl,
+      },
+      {
+        column: component.fieldColumns[1],
+        field: component.getColumnField(rowField, component.fieldColumns[1]),
+        control: nameControl,
+      },
+      {
+        column: component.fieldColumns[2],
+        field: component.getColumnField(rowField, component.fieldColumns[2]),
+        control: typeControl,
+      },
+    ].forEach(({ column, field, control }) => {
+      expect(component.getColumnField(rowField, column)).toBe(field);
+      const disabled = column.disabled;
+      expect((field as FormlyFieldConfig).props?.disabled).toBe(disabled);
+      expect((field as any).templateOptions?.disabled).toBe(disabled);
+      expect((control as FormControl).disabled).toBe(disabled);
+    });
+  });
+
+  it("should apply disabled state to rows generated from the field array template", () => {
+    const field: FormlyFieldConfig = {
+      model: [{ value: "42", attribute: { attributeName: "threshold", attributeType: "double" } }],
+      fieldArray: rowConfig([{ key: "value" }, { key: "attributeName" }, { key: "attributeType" }]),
+      fieldGroup: [],
+    };
+
+    component.onPopulate(field);
+
+    const generatedRow = field.fieldGroup?.[0] as FormlyFieldConfig;
+    const valueControl = new FormControl({ value: "42", disabled: true });
+    const nameControl = new FormControl("threshold");
+    const typeControl = new FormControl("double");
+
+    [
+      { column: component.fieldColumns[0], control: valueControl },
+      { column: component.fieldColumns[1], control: nameControl },
+      { column: component.fieldColumns[2], control: typeControl },
+    ].forEach(({ column, control }) => {
+      const columnField = component.getColumnField(generatedRow, column) as FormlyFieldConfig;
+      Object.assign(columnField, { formControl: control });
+      columnField.hooks?.onInit?.(columnField);
+
+      expect(columnField.props?.disabled).toBe(column.disabled);
+      expect((columnField as any).templateOptions?.disabled).toBe(column.disabled);
+      expect(control.disabled).toBe(column.disabled);
+    });
+  });
+});
+
+function rowConfig(fields: ReadonlyArray<{ key: string; formControl?: FormControl }>): FormlyFieldConfig {
+  const [valueField, nameField, typeField] = fields.map(field => ({
+    key: field.key,
+    formControl: field.formControl,
+  }));
+
+  return {
+    fieldGroup: [
+      valueField,
+      {
+        key: "attribute",
+        fieldGroup: [nameField, typeField],
+      },
+    ],
+  };
+}

frontend/src/app/workspace/component/ui-udf-parameters/ui-udf-parameters.component.ts

@@ -0,0 +1,118 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import { Component } from "@angular/core";
+import { NgFor, NgIf } from "@angular/common";
+import { FieldArrayType, FormlyFieldConfig, FormlyModule } from "@ngx-formly/core";
+
+type UiUdfParameterColumn = Readonly<{ label: string; key: string; parentKey?: string; disabled: boolean }>;
+
+/** Renders inferred Python UDF UI parameters with editable values and locked name/type columns. */
+@Component({
+  selector: "texera-ui-udf-parameters",
+  templateUrl: "./ui-udf-parameters.component.html",
+  styleUrls: ["./ui-udf-parameters.component.scss"],
+  imports: [NgIf, NgFor, FormlyModule],
+})
+export class UiUdfParametersComponent extends FieldArrayType<FormlyFieldConfig> {
+  private readonly disabledStateConfigured = new WeakMap<FormlyFieldConfig, boolean>();
+
+  readonly fieldColumns: UiUdfParameterColumn[] = [
+    { label: "Value", key: "value", disabled: false },
+    { label: "Name", key: "attributeName", parentKey: "attribute", disabled: true },
+    { label: "Type", key: "attributeType", parentKey: "attribute", disabled: true },
+  ];
+
+  override onPopulate(field: FormlyFieldConfig): void {
+    this.configureRowTemplate(this.getFieldArrayTemplate(field));
+    super.onPopulate(field);
+    field.fieldGroup?.forEach(rowField => this.configureRowFields(rowField));
+  }
+
+  /** Finds the Formly field config that backs one visible column in a parameter row. */
+  getColumnField(rowField: FormlyFieldConfig, column: UiUdfParameterColumn): FormlyFieldConfig | undefined {
+    return this.getChildField(column.parentKey ? this.getChildField(rowField, column.parentKey) : rowField, column.key);
+  }
+
+  private getFieldArrayTemplate(field: FormlyFieldConfig): FormlyFieldConfig | undefined {
+    return typeof field.fieldArray === "function" ? undefined : field.fieldArray;
+  }
+
+  private configureRowTemplate(rowField: FormlyFieldConfig | undefined): void {
+    this.configureRowColumns(rowField, this.setDisabledMetadata.bind(this));
+  }
+
+  private configureRowFields(rowField: FormlyFieldConfig | undefined): void {
+    this.configureRowColumns(rowField, this.configureDisabledState.bind(this));
+  }
+
+  private configureRowColumns(
+    rowField: FormlyFieldConfig | undefined,
+    configureColumn: (field: FormlyFieldConfig | undefined, disabled: boolean) => void
+  ): void {
+    if (!rowField) return;
+
+    this.fieldColumns.forEach(column => configureColumn(this.getColumnField(rowField, column), column.disabled));
+  }
+
+  private getChildField(rowField: FormlyFieldConfig | undefined, key: string): FormlyFieldConfig | undefined {
+    return rowField?.fieldGroup?.find(fieldConfig => fieldConfig.key === key);
+  }
+
+  /** Sets Formly disabled metadata and keeps controls created later in sync through an onInit hook. */
+  private configureDisabledState(field: FormlyFieldConfig | undefined, disabled: boolean): void {
+    if (!field) return;
+
+    this.setDisabledMetadata(field, disabled);
+
+    if (this.disabledStateConfigured.get(field) === disabled) {
+      this.applyDisabledState(field, disabled);
+      return;
+    }
+
+    const previousOnInit = field.hooks?.onInit;
+    field.hooks = {
+      ...(field.hooks ?? {}),
+      onInit: initializedField => {
+        previousOnInit?.(initializedField);
+        this.applyDisabledState(initializedField, disabled);
+      },
+    };
+
+    this.disabledStateConfigured.set(field, disabled);
+    this.applyDisabledState(field, disabled);
+  }
+
+  private setDisabledMetadata(field: FormlyFieldConfig | undefined, disabled: boolean): void {
+    if (!field) return;
+
+    field.props = { ...(field.props ?? {}), disabled };
+
+    // Keep deprecated templateOptions in sync for existing Formly wrappers that still read it.
+    (field as any).templateOptions = { ...((field as any).templateOptions ?? {}), disabled };
+  }
+
+  private applyDisabledState(field: FormlyFieldConfig, disabled: boolean): void {
+    if (disabled) field.formControl?.disable({ emitEvent: false });
+    else field.formControl?.enable({ emitEvent: false });
+  }
+
+  trackByParameterName = (index: number, parameter: any): string | number => {
+    return parameter?.attribute?.attributeName ?? index;
+  };
+}