Improvements to column transformation
diff --git a/ui/src/base/semantic_icons.ts b/ui/src/base/semantic_icons.ts
index 9133297..26c350a 100644
--- a/ui/src/base/semantic_icons.ts
+++ b/ui/src/base/semantic_icons.ts
@@ -68,6 +68,7 @@
   static readonly Analyze = 'analytics';
   static readonly Chart = 'bar_chart';
   static readonly Pivot = 'pivot_table_chart';
+  static readonly ApplyFunction = 'function';
 
   static readonly Play = 'play_arrow';
   static readonly Edit = 'edit';
diff --git a/ui/src/components/widgets/sql/table/menus/transform_column_menu.ts b/ui/src/components/widgets/sql/table/menus/transform_column_menu.ts
index 0c85041..8b20d97 100644
--- a/ui/src/components/widgets/sql/table/menus/transform_column_menu.ts
+++ b/ui/src/components/widgets/sql/table/menus/transform_column_menu.ts
@@ -24,17 +24,16 @@
   PerfettoSqlTypes,
 } from '../../../../../trace_processor/perfetto_sql_type';
 import {createTableColumn} from '../create_column';
-import {sqlColumnId, SqlExpression} from '../sql_column';
+import {SqlExpression} from '../sql_column';
 import {uuidv4} from '../../../../../base/uuid';
 import {range} from '../../../../../base/array_utils';
 
 type Transform = {
   label: string;
-  // The SQL function or operation to apply.
+  // The SQL expresssion to apply.
   expression: (colExpr: string, ...params: string[]) => string;
   // Optional parameters for the transform
   parameters?: TransformParameter[];
-  // The resulting type after transformation
   resultType: PerfettoSqlType;
 };
 
@@ -42,7 +41,6 @@
   name: string;
   placeholder: string;
   defaultValue?: string;
-  // Optional validation
   validate?: (value: string) => boolean;
 };
 
@@ -64,6 +62,7 @@
       {
         name: 'start',
         placeholder: '1-based, can be negative (optional)',
+        defaultValue: '1',
         validate: (value) => {
           if (value === '') {
             return true;
@@ -98,7 +97,7 @@
     resultType: PerfettoSqlTypes.STRING,
   },
   {
-    label: 'remove prefix',
+    label: 'strip prefix',
     expression: (col, prefix) =>
       `CASE WHEN ${col} LIKE '${prefix}%' THEN substr(${col}, ${prefix.length + 1}) ELSE ${col} END`,
     parameters: [
@@ -110,7 +109,7 @@
     resultType: PerfettoSqlTypes.STRING,
   },
   {
-    label: 'remove suffix',
+    label: 'strip suffix',
     expression: (col, suffix) =>
       `CASE WHEN ${col} LIKE '%${suffix}' THEN substr(${col}, 1, length(${col}) - ${suffix.length}) ELSE ${col} END`,
     parameters: [
@@ -161,8 +160,8 @@
           onSubmit: (e: Event) => {
             e.stopPropagation();
             params.forEach((param, index) => {
-              this.paramState[index].error =
-                param.validate?.(this.paramState[index].value) ?? false;
+              const value = this.paramState[index].value;
+              this.paramState[index].error = !(param.validate?.(value) ?? true);
             });
             const hasError = this.paramState.some((state) => state.error);
             if (hasError) {
@@ -174,7 +173,8 @@
           submitLabel: 'Apply',
         },
         params.map((param, index) => [
-          m(FormLabel, {for: `${this.uuid}_param_${index}`}, param.name),
+          params.length > 1 &&
+            m(FormLabel, {for: `${this.uuid}_param_${index}`}, param.name),
           m(TextInput, {
             id: `${this.uuid}_param_${index}`,
             placeholder: param.placeholder,
@@ -185,10 +185,12 @@
               ).value;
               this.paramState[index].error = false;
             },
-            style: this.paramState[index] ?? {
-              border: '1px solid red',
-              outline: 'none',
-            },
+            style: this.paramState[index].error
+              ? {
+                  border: '1px solid red',
+                  outline: 'none',
+                }
+              : {},
           }),
         ]),
       ),
@@ -197,7 +199,13 @@
 
   private applyTransform(attrs: TransformMenuItemAttrs) {
     const {column, columnIndex, state, transform} = attrs;
-    const values = this.paramState.map((state) => state.value);
+    const values = this.paramState.map((state, index) => {
+      const defaultValue = attrs.transform.parameters?.[index].defaultValue;
+      if (defaultValue !== undefined) {
+        return state.value || defaultValue;
+      }
+      return state.value;
+    });
 
     // Create the transformation expression
     const transformExpression = (cols: string[]) =>
@@ -206,11 +214,7 @@
     // Create the new column with transformation
     const newColumn = createTableColumn({
       trace: state.trace,
-      column: new SqlExpression(
-        transformExpression,
-        [column.column],
-        `${transform.label}(${sqlColumnId(column.column)})`,
-      ),
+      column: new SqlExpression(transformExpression, [column.column]),
       type: transform.resultType,
       origin: {
         kind: 'transform',
@@ -241,7 +245,7 @@
 
   return m(
     MenuItem,
-    {label: 'Transform', icon: Icons.Change},
+    {label: 'Transform', icon: Icons.ApplyFunction},
     transforms.map((transform) =>
       m(TransformMenuItem, {
         column,