de: Remove unused widgets and merge others (#5208)

Author: aMayzner

ui/src/plugins/dev.perfetto.DataExplorer/query_builder/column_selector.ts

@@ -0,0 +1,129 @@
+// Copyright (C) 2026 The Android Open Source Project
+//
+// Licensed 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 m from 'mithril';
+import {ColumnInfo} from './column_info';
+import {Button, ButtonVariant} from '../../../widgets/button';
+import {Checkbox} from '../../../widgets/checkbox';
+import {DraggableItem} from './widgets';
+
+/**
+ * Reusable column selector widget with checkboxes, optional drag reorder,
+ * and optional per-row extra content.
+ *
+ * Used by ModifyColumnsNode, UnionNode, and JoinColumnSelector to replace
+ * the duplicated column-selection-with-checkboxes pattern.
+ */
+export interface ColumnSelectorAttrs {
+  // The columns to display with their checked state.
+  columns: ColumnInfo[];
+  // Called when columns change (check/uncheck, reorder).
+  onColumnsChange: (columns: ColumnInfo[]) => void;
+  // Optional help text shown above the list.
+  helpText?: string;
+  // Enable drag-and-drop reordering. Default: false.
+  draggable?: boolean;
+  // Optional per-row extra content (e.g., alias input, type selector).
+  renderExtra?: (col: ColumnInfo, index: number) => m.Children;
+  // Optional empty state when columns is empty.
+  emptyState?: m.Child;
+}
+
+export class ColumnSelector implements m.ClassComponent<ColumnSelectorAttrs> {
+  view({attrs}: m.CVnode<ColumnSelectorAttrs>) {
+    const {
+      columns,
+      onColumnsChange,
+      helpText,
+      draggable,
+      renderExtra,
+      emptyState,
+    } = attrs;
+
+    // If columns is empty and emptyState is provided, show that instead.
+    if (columns.length === 0 && emptyState !== undefined) {
+      return emptyState;
+    }
+
+    return m(
+      '.pf-modify-columns-content',
+      // Select All / Deselect All buttons
+      m(
+        '.pf-select-deselect-all-buttons',
+        m(Button, {
+          label: 'Select All',
+          onclick: () => {
+            onColumnsChange(columns.map((col) => ({...col, checked: true})));
+          },
+          variant: ButtonVariant.Outlined,
+          compact: true,
+        }),
+        m(Button, {
+          label: 'Deselect All',
+          onclick: () => {
+            onColumnsChange(columns.map((col) => ({...col, checked: false})));
+          },
+          variant: ButtonVariant.Outlined,
+          compact: true,
+        }),
+      ),
+      // Column list
+      m(
+        '.pf-modify-columns-node',
+        m(
+          '.pf-column-list-container',
+          helpText !== undefined && m('.pf-column-list-help', helpText),
+          m(
+            '.pf-column-list',
+            columns.map((col, index) => {
+              const checkbox = m(Checkbox, {
+                checked: col.checked,
+                label: col.column.name,
+                onchange: (e) => {
+                  const newColumns = [...columns];
+                  newColumns[index] = {
+                    ...newColumns[index],
+                    checked: (e.target as HTMLInputElement).checked,
+                  };
+                  onColumnsChange(newColumns);
+                },
+              });
+
+              const extra = renderExtra?.(col, index);
+
+              if (draggable) {
+                return m(
+                  DraggableItem,
+                  {
+                    index,
+                    onReorder: (from: number, to: number) => {
+                      const newColumns = [...columns];
+                      const [removed] = newColumns.splice(from, 1);
+                      newColumns.splice(to, 0, removed);
+                      onColumnsChange(newColumns);
+                    },
+                  },
+                  checkbox,
+                  extra,
+                );
+              }
+
+              return m('.pf-column-selector-row', checkbox, extra);
+            }),
+          ),
+        ),
+      ),
+    );
+  }
+}

ui/src/plugins/dev.perfetto.DataExplorer/query_builder/common.scss

@@ -57,15 +57,6 @@
   border: 1px solid var(--pf-color-border);
 }
 
-.pf-exp-section {
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
-  padding: 0.75rem;
-  border: 1px solid var(--pf-color-border);
-  border-radius: 4px;
-}
-
 // Shared styling for all round action buttons (undo/redo/add node/dashboard).
 .pf-qb-round-action-button {
   width: 40px;

ui/src/plugins/dev.perfetto.DataExplorer/query_builder/join_widgets.ts

@@ -14,11 +14,8 @@
 
 import m from 'mithril';
 import {ColumnInfo} from './column_info';
-import {
-  OutlinedField,
-  ResultsPanelEmptyState,
-  SelectDeselectAllButtons,
-} from './widgets';
+import {OutlinedField, ResultsPanelEmptyState} from './widgets';
+import {ColumnSelector} from './column_selector';
 import {classNames} from '../../../base/classnames';
 import {Card} from '../../../widgets/card';
 import {Checkbox} from '../../../widgets/checkbox';
@@ -279,65 +276,46 @@ export interface JoinColumnSelectorAttrs {
   rightAlias: string;
   leftColumns: ColumnInfo[];
   rightColumns: ColumnInfo[];
-  onLeftColumnToggle: (index: number, checked: boolean) => void;
-  onRightColumnToggle: (index: number, checked: boolean) => void;
-  onLeftColumnAlias: (index: number, alias: string) => void;
-  onRightColumnAlias: (index: number, alias: string) => void;
-  onSelectAllLeft: () => void;
-  onDeselectAllLeft: () => void;
-  onSelectAllRight: () => void;
-  onDeselectAllRight: () => void;
+  onLeftColumnsChange: (columns: ColumnInfo[]) => void;
+  onRightColumnsChange: (columns: ColumnInfo[]) => void;
 }
 
 export class JoinColumnSelector
   implements m.ClassComponent<JoinColumnSelectorAttrs>
 {
-  private renderColumnRow(
-    col: ColumnInfo,
-    index: number,
-    onToggle: (index: number, checked: boolean) => void,
-    onAlias: (index: number, alias: string) => void,
-  ): m.Child {
-    return m(
-      '.pf-join-column-row',
-      m(Checkbox, {
-        checked: col.checked,
-        label: col.column.name,
-        onchange: (e) => {
-          onToggle(index, (e.target as HTMLInputElement).checked);
-        },
-      }),
-      m(TextInput, {
-        oninput: (e: Event) => {
-          const inputValue = (e.target as HTMLInputElement).value;
-          // Normalize empty strings to undefined (no alias)
-          onAlias(index, inputValue.trim() === '' ? '' : inputValue);
-        },
-        placeholder: 'alias',
-        value: col.alias ?? '',
-      }),
-    );
-  }
-
   view({attrs}: m.Vnode<JoinColumnSelectorAttrs>) {
     const {
       leftAlias,
       rightAlias,
       leftColumns,
       rightColumns,
-      onLeftColumnToggle,
-      onRightColumnToggle,
-      onLeftColumnAlias,
-      onRightColumnAlias,
-      onSelectAllLeft,
-      onDeselectAllLeft,
-      onSelectAllRight,
-      onDeselectAllRight,
+      onLeftColumnsChange,
+      onRightColumnsChange,
     } = attrs;
 
     const leftSelectedCount = leftColumns.filter((c) => c.checked).length;
     const rightSelectedCount = rightColumns.filter((c) => c.checked).length;
 
+    const renderAliasInput = (
+      col: ColumnInfo,
+      index: number,
+      columns: ColumnInfo[],
+      onColumnsChange: (columns: ColumnInfo[]) => void,
+    ) =>
+      m(TextInput, {
+        oninput: (e: Event) => {
+          const inputValue = (e.target as HTMLInputElement).value;
+          const newColumns = [...columns];
+          newColumns[index] = {
+            ...newColumns[index],
+            alias: inputValue.trim() === '' ? undefined : inputValue,
+          };
+          onColumnsChange(newColumns);
+        },
+        placeholder: 'alias',
+        value: col.alias ?? '',
+      });
+
     return m('.pf-join-column-selector', [
       // Left columns section
       m('.pf-join-column-section', [
@@ -347,27 +325,17 @@ export class JoinColumnSelector
             'h4',
             `${leftAlias} (${leftSelectedCount} / ${leftColumns.length} selected)`,
           ),
-          m(SelectDeselectAllButtons, {
-            onSelectAll: onSelectAllLeft,
-            onDeselectAll: onDeselectAllLeft,
-          }),
-        ),
-        m(
-          '.pf-join-column-list',
-          leftColumns.length === 0
-            ? m(ResultsPanelEmptyState, {
-                icon: 'cable',
-                title: 'Connect left source',
-              })
-            : leftColumns.map((col, i) =>
-                this.renderColumnRow(
-                  col,
-                  i,
-                  onLeftColumnToggle,
-                  onLeftColumnAlias,
-                ),
-              ),
         ),
+        m(ColumnSelector, {
+          columns: leftColumns,
+          onColumnsChange: onLeftColumnsChange,
+          renderExtra: (col, index) =>
+            renderAliasInput(col, index, leftColumns, onLeftColumnsChange),
+          emptyState: m(ResultsPanelEmptyState, {
+            icon: 'cable',
+            title: 'Connect left source',
+          }),
+        }),
       ]),
       // Right columns section
       m('.pf-join-column-section', [
@@ -377,27 +345,17 @@ export class JoinColumnSelector
             'h4',
             `${rightAlias} (${rightSelectedCount} / ${rightColumns.length} selected)`,
           ),
-          m(SelectDeselectAllButtons, {
-            onSelectAll: onSelectAllRight,
-            onDeselectAll: onDeselectAllRight,
-          }),
-        ),
-        m(
-          '.pf-join-column-list',
-          rightColumns.length === 0
-            ? m(ResultsPanelEmptyState, {
-                icon: 'cable',
-                title: 'Connect right source',
-              })
-            : rightColumns.map((col, i) =>
-                this.renderColumnRow(
-                  col,
-                  i,
-                  onRightColumnToggle,
-                  onRightColumnAlias,
-                ),
-              ),
         ),
+        m(ColumnSelector, {
+          columns: rightColumns,
+          onColumnsChange: onRightColumnsChange,
+          renderExtra: (col, index) =>
+            renderAliasInput(col, index, rightColumns, onRightColumnsChange),
+          emptyState: m(ResultsPanelEmptyState, {
+            icon: 'cable',
+            title: 'Connect right source',
+          }),
+        }),
       ]),
     ]);
   }