@finos/legend-cube-builder 0.0.0-stage → 0.0.2

package/src/components/canvas/CubeCanvasDnd.ts

@@ -0,0 +1,82 @@
+/**
+ * Copyright (c) 2026-present, Goldman Sachs
+ *
+ * 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 type { CubeEditorState } from '../../stores/CubeEditorState.js';
+
+// Drag and drop on the canvas (spec §17.3): palette items and nodes are
+// dragged; nodes and the canvas take drops. The app's HTML5 backend provider
+// wraps every Legend application, so Cube mounts none of its own.
+
+export enum CUBE_DND_TYPE {
+  PALETTE_ITEM = 'legend-cube.palette-item',
+  NODE = 'legend-cube.node',
+}
+
+/** A palette item carries the type of node it adds */
+export interface CubePaletteDragItem {
+  readonly nodeType: string;
+}
+
+/** A node carries only its id */
+export interface CubeNodeDragItem {
+  readonly nodeId: string;
+}
+
+export type CubeDragItem = CubePaletteDragItem | CubeNodeDragItem;
+
+const isNodeDragItem = (item: CubeDragItem): item is CubeNodeDragItem =>
+  'nodeId' in item;
+
+/**
+ * Whether dropping the item on the node does anything, which also decides
+ * whether the node lights up under it: a palette item is spliced in after
+ * the node, another node connects to it or else moves after it
+ */
+export const canDropOnCubeNode = (
+  editorState: CubeEditorState,
+  item: CubeDragItem,
+  targetId: string,
+): boolean =>
+  isNodeDragItem(item)
+    ? editorState.canDropNode(item.nodeId, targetId)
+    : editorState.canAddNode(item.nodeType, targetId);
+
+export const dropOnCubeNode = (
+  editorState: CubeEditorState,
+  item: CubeDragItem,
+  targetId: string,
+): void => {
+  if (isNodeDragItem(item)) {
+    editorState.dropNode(item.nodeId, targetId);
+  } else {
+    editorState.addNode(item.nodeType, targetId);
+  }
+};
+
+/**
+ * A palette item dropped on the canvas around the nodes: a transform is
+ * added unconnected, a source opens the picker. A drop on a node is the
+ * node's, taken or refused, never the canvas's.
+ */
+export const dropOnCubeCanvas = (
+  editorState: CubeEditorState,
+  item: CubeDragItem,
+  isOverNode: boolean,
+): void => {
+  if (!isOverNode && !isNodeDragItem(item)) {
+    editorState.addNode(item.nodeType);
+  }
+};

package/src/components/canvas/CubeCanvasEdge.tsx

@@ -0,0 +1,57 @@
+/**
+ * Copyright (c) 2026-present, Goldman Sachs
+ *
+ * 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 {
+  BaseEdge,
+  EdgeLabelRenderer,
+  type EdgeProps,
+  getBezierPath,
+} from '@xyflow/react';
+import { LEGEND_CUBE_TEST_ID } from '../../__lib__/LegendCubeTesting.js';
+import type { CubeCanvasFlowEdge } from './CubeCanvasElements.js';
+
+/** The gap between an input's label and the node it feeds */
+const LABEL_GAP = 6;
+
+/**
+ * A connection, with its port's label (Left or Right on a Join) shown as text
+ * beside the input it feeds, not in a tooltip (spec §17.3). The label is HTML:
+ * React Flow's own edge label measures SVG text, which jsdom can't.
+ */
+export const CubeCanvasEdge: React.FC<EdgeProps<CubeCanvasFlowEdge>> = (
+  props,
+) => {
+  const { id, targetX, targetY, markerEnd, data } = props;
+  const [path] = getBezierPath(props);
+  return (
+    <>
+      <BaseEdge id={id} path={path} markerEnd={markerEnd} />
+      {data?.label && (
+        <EdgeLabelRenderer>
+          <div
+            className="absolute rounded bg-[var(--color-bg-panel)] px-1 text-sm text-[var(--color-text-secondary)]"
+            style={{
+              transform: `translate(-100%, -100%) translate(${targetX - LABEL_GAP}px, ${targetY - 2}px)`,
+            }}
+            data-testid={LEGEND_CUBE_TEST_ID.CANVAS_EDGE_LABEL}
+          >
+            {data.label}
+          </div>
+        </EdgeLabelRenderer>
+      )}
+    </>
+  );
+};

package/src/components/canvas/CubeCanvasElements.ts

@@ -0,0 +1,150 @@
+/**
+ * Copyright (c) 2026-present, Goldman Sachs
+ *
+ * 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 {
+  isIncompleteError,
+  isSchemasError,
+  type Query,
+  type QueryNode,
+} from '@finos/legend-cube';
+import { type Edge, MarkerType, type Node, Position } from '@xyflow/react';
+import type { CubeEditorState } from '../../stores/CubeEditorState.js';
+import {
+  CUBE_CANVAS_NODE_HEIGHT,
+  CUBE_CANVAS_NODE_WIDTH,
+  type CubeCanvasPosition,
+} from './CubeCanvasLayout.js';
+
+// The query as React Flow draws it: one node per query node, one edge per
+// connection. Rebuilt from the query on every change; React Flow keeps no
+// state of its own that matters (PLAN §7.2)
+
+export const CUBE_CANVAS_NODE_TYPE = 'cube';
+export const CUBE_CANVAS_EDGE_TYPE = 'cube';
+/** The one output of every node; its inputs are named by its ports */
+export const CUBE_OUTPUT_HANDLE_ID = 'output';
+
+/** Shown when a node has no validity entry at all, which inference never leaves out */
+export const MISSING_VALIDITY_TOOLTIP =
+  'This node depends on some invalid inputs.';
+
+export type CubeCanvasNodeData = { readonly node: QueryNode };
+export type CubeCanvasEdgeData = { readonly label: string | undefined };
+export type CubeCanvasFlowNode = Node<CubeCanvasNodeData, 'cube'>;
+export type CubeCanvasFlowEdge = Edge<CubeCanvasEdgeData, 'cube'>;
+type CubeCanvasHandle = NonNullable<Node['handles']>[number];
+
+/** How far down the node's left side each input handle sits: evenly spaced, in port order */
+export const getInputHandleOffset = (index: number, count: number): number =>
+  (CUBE_CANVAS_NODE_HEIGHT * (index + 1)) / (count + 1);
+
+/**
+ * Where the node's handles are, so edges are drawn without measuring the DOM:
+ * its inputs down its left side in port order (a Join's Left above its
+ * Right), its output in the middle of its right side. New objects each time:
+ * React Flow writes into them.
+ */
+export const getCubeCanvasHandles = (node: QueryNode): CubeCanvasHandle[] => [
+  ...node.ports.map((port, index) => ({
+    id: port,
+    type: 'target' as const,
+    position: Position.Left,
+    x: 0,
+    y: getInputHandleOffset(index, node.ports.length),
+  })),
+  {
+    id: CUBE_OUTPUT_HANDLE_ID,
+    type: 'source' as const,
+    position: Position.Right,
+    x: CUBE_CANVAS_NODE_WIDTH,
+    y: CUBE_CANVAS_NODE_HEIGHT / 2,
+  },
+];
+
+export const buildCubeCanvasNodes = (
+  query: Query,
+  positions: ReadonlyMap<string, CubeCanvasPosition>,
+): CubeCanvasFlowNode[] =>
+  query.nodes.map((node) => ({
+    id: node.id,
+    type: CUBE_CANVAS_NODE_TYPE,
+    position: { ...(positions.get(node.id) ?? { x: 0, y: 0 }) },
+    width: CUBE_CANVAS_NODE_WIDTH,
+    height: CUBE_CANVAS_NODE_HEIGHT,
+    handles: getCubeCanvasHandles(node),
+    data: { node },
+  }));
+
+/** Each connection, labelled with its port's label when the target has one, e.g. Left and Right on a Join */
+export const buildCubeCanvasEdges = (query: Query): CubeCanvasFlowEdge[] =>
+  query.connections.map((connection) => {
+    const target = query.getNode(connection.target);
+    const label = target?.portLabels[target.ports.indexOf(connection.port)];
+    return {
+      id: connection.toString(),
+      type: CUBE_CANVAS_EDGE_TYPE,
+      source: connection.source,
+      target: connection.target,
+      sourceHandle: CUBE_OUTPUT_HANDLE_ID,
+      targetHandle: connection.port,
+      markerEnd: { type: MarkerType.ArrowClosed },
+      data: { label },
+    };
+  });
+
+/** How a node looks on the canvas (spec §17.3): each state is its own class modifier */
+export interface CubeCanvasNodeStatus {
+  /** Execute runs the query up to this node */
+  readonly isCapture: boolean;
+  /** It has errors of its own, the query rules' included; not the engine's */
+  readonly isInvalid: boolean;
+  /** An input is missing, or an input is invalid */
+  readonly isIncomplete: boolean;
+  /** The engine is typing its table */
+  readonly isResolving: boolean;
+  /** The last run failed on it */
+  readonly hasEngineError: boolean;
+  /** Its errors, then its warnings, its description and its id, one a line */
+  readonly tooltip: string;
+}
+
+export const getCubeCanvasNodeStatus = (
+  editorState: CubeEditorState,
+  node: QueryNode,
+): CubeCanvasNodeStatus => {
+  const ownErrors = editorState.analysis.validity.get(node.id);
+  // the tooltip adds the engine's error; the states keep it apart
+  const errors = editorState.getNodeErrors(node.id);
+  const warnings = editorState.warnings.get(node.key) ?? [];
+  return {
+    isCapture: editorState.document.query.selected === node.id,
+    isInvalid: (ownErrors ?? []).some(
+      (error) => !isIncompleteError(error) && !isSchemasError(error),
+    ),
+    isIncomplete: (ownErrors ?? []).some(
+      (error) => isIncompleteError(error) || isSchemasError(error),
+    ),
+    isResolving: editorState.isPendingSource(node),
+    hasEngineError: editorState.hostIssues.has(node.id),
+    tooltip: [
+      ...(ownErrors ? [] : [MISSING_VALIDITY_TOOLTIP]),
+      ...errors,
+      ...warnings,
+      node.describe(),
+      node.id,
+    ].join('\n'),
+  };
+};

package/src/components/canvas/CubeCanvasLayout.ts

@@ -0,0 +1,88 @@
+/**
+ * Copyright (c) 2026-present, Goldman Sachs
+ *
+ * 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 dagre from '@dagrejs/dagre';
+import type { Connection, Query } from '@finos/legend-cube';
+
+/** Every node is drawn this size, so edges need no DOM measurement (PLAN §7.2) */
+export const CUBE_CANVAS_NODE_WIDTH = 200;
+export const CUBE_CANVAS_NODE_HEIGHT = 72;
+
+const RANK_SEPARATION = 80;
+const NODE_SEPARATION = 32;
+
+/** A node's top-left corner on the canvas */
+export interface CubeCanvasPosition {
+  readonly x: number;
+  readonly y: number;
+}
+
+// by code unit, so the order never depends on the locale
+const compareText = (a: string, b: string): number =>
+  a < b ? -1 : a > b ? 1 : 0;
+
+const compareConnections = (a: Connection, b: Connection): number =>
+  compareText(a.port, b.port) ||
+  compareText(a.source, b.source) ||
+  compareText(a.target, b.target);
+
+/**
+ * Where each node goes, laid out left to right (spec §17.3): a pure function
+ * of the query, recomputed on every change, so undo, import and every edit
+ * need no layout state. Nodes go in sorted by id and connections by port,
+ * source and target, so an edit that only reorders them moves nothing.
+ */
+export const layoutCubeQuery = (
+  query: Query,
+): Map<string, CubeCanvasPosition> => {
+  const graph = new dagre.graphlib.Graph<{
+    width: number;
+    height: number;
+  }>({ multigraph: true });
+  graph.setGraph({
+    rankdir: 'LR',
+    ranksep: RANK_SEPARATION,
+    nodesep: NODE_SEPARATION,
+  });
+  graph.setDefaultEdgeLabel(() => ({}));
+  [...query.nodes]
+    .sort((a, b) => compareText(a.id, b.id))
+    .forEach((node) =>
+      graph.setNode(node.id, {
+        width: CUBE_CANVAS_NODE_WIDTH,
+        height: CUBE_CANVAS_NODE_HEIGHT,
+      }),
+    );
+  [...query.connections]
+    .sort(compareConnections)
+    .forEach((connection) =>
+      graph.setEdge(connection.source, connection.target, {}, connection.port),
+    );
+  dagre.layout(graph);
+  return new Map(
+    query.nodes.map((node) => {
+      // dagre gives each node's centre
+      const { x, y } = graph.node(node.id);
+      return [
+        node.id,
+        {
+          x: x - CUBE_CANVAS_NODE_WIDTH / 2,
+          y: y - CUBE_CANVAS_NODE_HEIGHT / 2,
+        },
+      ];
+    }),
+  );
+};

package/src/components/canvas/CubeCanvasNode.tsx

@@ -0,0 +1,141 @@
+/**
+ * Copyright (c) 2026-present, Goldman Sachs
+ *
+ * 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 { clsx, ContextMenu } from '@finos/legend-art';
+import { Handle, type NodeProps, Position } from '@xyflow/react';
+import { observer } from 'mobx-react-lite';
+import { useRef } from 'react';
+import { useDrag, useDrop } from 'react-dnd';
+import { LEGEND_CUBE_TEST_ID } from '../../__lib__/LegendCubeTesting.js';
+import { CubeNodeIcon } from '../CubeNodeIcon.js';
+import {
+  CUBE_OUTPUT_HANDLE_ID,
+  type CubeCanvasFlowNode,
+  getCubeCanvasNodeStatus,
+  getInputHandleOffset,
+} from './CubeCanvasElements.js';
+import { useCubeCanvasEditorState } from './CubeCanvasContext.js';
+import { CubeCanvasContextMenu } from './CubeCanvasContextMenu.js';
+import {
+  canDropOnCubeNode,
+  CUBE_DND_TYPE,
+  type CubeDragItem,
+  type CubeNodeDragItem,
+  dropOnCubeNode,
+} from './CubeCanvasDnd.js';
+
+/**
+ * A node on the canvas: its type's icon and its description, never its id,
+ * which is in the tooltip (spec §17.3). Its look tells its state at a glance.
+ * It can be dragged onto another node, and takes palette items and other
+ * nodes, lighting up only for a drop that would do something. Its handles
+ * sit beside its draggable body, not in it, so dragging from a handle
+ * connects rather than drags the node.
+ */
+export const CubeCanvasNode = observer(
+  (props: NodeProps<CubeCanvasFlowNode>) => {
+    const { node } = props.data;
+    const editorState = useCubeCanvasEditorState();
+    const status = getCubeCanvasNodeStatus(editorState, node);
+    const connectable = !editorState.readOnly && node.acceptsNewInputs;
+    const ref = useRef<HTMLDivElement>(null);
+    const [, dragConnector] = useDrag<CubeNodeDragItem>(
+      () => ({
+        type: CUBE_DND_TYPE.NODE,
+        item: { nodeId: node.id },
+        canDrag: () => !editorState.readOnly,
+      }),
+      [editorState, node.id],
+    );
+    const [{ isDropTarget }, dropConnector] = useDrop<
+      CubeDragItem,
+      void,
+      { isDropTarget: boolean }
+    >(
+      () => ({
+        accept: [CUBE_DND_TYPE.NODE, CUBE_DND_TYPE.PALETTE_ITEM],
+        canDrop: (item) => canDropOnCubeNode(editorState, item, node.id),
+        drop: (item) => dropOnCubeNode(editorState, item, node.id),
+        collect: (monitor) => ({
+          isDropTarget: monitor.isOver({ shallow: true }) && monitor.canDrop(),
+        }),
+      }),
+      [editorState, node.id],
+    );
+    dragConnector(dropConnector(ref));
+    return (
+      <ContextMenu
+        className="h-full w-full"
+        content={
+          <CubeCanvasContextMenu editorState={editorState} nodeId={node.id} />
+        }
+        menuProps={{ elevation: 7 }}
+      >
+        {node.ports.map((port, index) => (
+          <Handle
+            key={port}
+            id={port}
+            type="target"
+            position={Position.Left}
+            isConnectable={connectable}
+            style={{ top: getInputHandleOffset(index, node.ports.length) }}
+          />
+        ))}
+        <div
+          ref={ref}
+          className={clsx(
+            // React Flow must leave the mouse to the HTML drag: 'nodrag' keeps
+            // it from moving the node, 'nopan' from panning the canvas
+            'legend-cube__node nodrag nopan flex h-full w-full items-center gap-2 rounded border bg-[var(--color-bg-panel)] px-2 text-base text-[var(--color-text-primary)]',
+            status.isInvalid
+              ? 'border-[var(--color-status-error)]'
+              : status.isIncomplete
+                ? 'border-dashed border-[var(--color-status-warn)]'
+                : 'border-[var(--color-border-default)]',
+            {
+              'legend-cube__node--selected ring-2 ring-[var(--color-accent)]':
+                status.isCapture,
+              'legend-cube__node--invalid': status.isInvalid,
+              'legend-cube__node--incomplete': status.isIncomplete,
+              'legend-cube__node--resolving animate-pulse': status.isResolving,
+              'legend-cube__node--engine-error bg-[var(--color-status-error-bg)]':
+                status.hasEngineError,
+              'legend-cube__node--drop-target outline-dashed outline-2 outline-[var(--color-accent)]':
+                isDropTarget,
+            },
+          )}
+          title={status.tooltip}
+          aria-current={status.isCapture}
+          data-testid={LEGEND_CUBE_TEST_ID.CANVAS_NODE}
+        >
+          <CubeNodeIcon
+            icon={editorState.registry.get(node.type)?.icon}
+            className="shrink-0 text-lg text-[var(--color-text-secondary)]"
+          />
+          <span className="line-clamp-2 min-w-0 break-words leading-tight">
+            {node.describe()}
+          </span>
+        </div>
+        <Handle
+          id={CUBE_OUTPUT_HANDLE_ID}
+          type="source"
+          position={Position.Right}
+          isConnectable={!editorState.readOnly}
+        />
+      </ContextMenu>
+    );
+  },
+);

package/src/components/editors/CubeColumnPicker.tsx

@@ -0,0 +1,114 @@
+/**
+ * Copyright (c) 2026-present, Goldman Sachs
+ *
+ * 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 {
+  CalendarIcon,
+  clsx,
+  HashtagIcon,
+  ListIcon,
+  QuestionIcon,
+  StringTypeIcon,
+  ToggleIcon,
+} from '@finos/legend-art';
+import { type CubeType, type Schema, TypeFamily } from '@finos/legend-cube';
+import { getColumnTypeLabel } from '../../__lib__/LegendCubeLabels.js';
+
+const FAMILY_ICONS: Readonly<
+  Partial<Record<TypeFamily, React.FC<{ className?: string }>>>
+> = {
+  [TypeFamily.STRING]: StringTypeIcon,
+  [TypeFamily.BOOLEAN]: ToggleIcon,
+  [TypeFamily.INTEGER]: HashtagIcon,
+  [TypeFamily.FLOAT]: HashtagIcon,
+  [TypeFamily.DECIMAL]: HashtagIcon,
+  [TypeFamily.NUMBER]: HashtagIcon,
+  [TypeFamily.STRICT_DATE]: CalendarIcon,
+  [TypeFamily.DATETIME]: CalendarIcon,
+  [TypeFamily.DATE]: CalendarIcon,
+  [TypeFamily.ENUM]: ListIcon,
+};
+
+/** The icon of a column type's family: text, number, date, ...; a question mark for the rest */
+export const CubeColumnTypeIcon: React.FC<{
+  type: CubeType;
+  className?: string;
+}> = (props) => {
+  const Icon = FAMILY_ICONS[props.type.family] ?? QuestionIcon;
+  return <Icon className={clsx('shrink-0', props.className)} />;
+};
+
+/**
+ * Picks a column of an input schema, in schema order (spec §17.5: only the
+ * columns of the actual input). Each option names its type, e.g.
+ * `CUSTOMER_ID: Varchar(5)?`; the picked column's type shows beside, with
+ * its family's icon and its full type in the tooltip. A column the input
+ * doesn't have stays shown, so the problem can be seen and fixed.
+ */
+export const CubeColumnPicker: React.FC<{
+  /** What the column is for, e.g. `Left join column 1`: the picker's accessible name */
+  label: string;
+  schema: Schema;
+  /** The picked column's name, `''` or `undefined` for none */
+  value: string | undefined;
+  onChange: (columnName: string) => void;
+  disabled?: boolean | undefined;
+  /** Marks the pick as wrong, e.g. a type that doesn't match */
+  invalid?: boolean | undefined;
+}> = (props) => {
+  const { label, schema, value, onChange, disabled, invalid } = props;
+  const picked = value ? schema.lookup(value) : undefined;
+  return (
+    <div className="flex min-w-0 items-center gap-1">
+      <select
+        aria-label={label}
+        aria-invalid={Boolean(invalid) || (Boolean(value) && !picked)}
+        className={clsx(
+          'h-6 min-w-0 flex-1 rounded-sm border bg-[var(--color-bg-input)] px-1 text-base',
+          invalid || (value && !picked)
+            ? 'border-[var(--color-status-error)]'
+            : 'border-[var(--color-border-default)]',
+        )}
+        value={value ?? ''}
+        disabled={disabled}
+        onChange={(event) => onChange(event.target.value)}
+      >
+        {!picked && (
+          <option value={value ?? ''} disabled={true}>
+            {value ? `${value} (not in the input)` : 'Pick a column'}
+          </option>
+        )}
+        {schema.columns.map((column) => (
+          <option
+            key={column.name}
+            value={column.name}
+            title={column.type.fullName}
+          >
+            {`${column.name}: ${getColumnTypeLabel(column)}`}
+          </option>
+        ))}
+      </select>
+      {picked && (
+        <span
+          className="flex shrink-0 items-center gap-1 text-sm text-[var(--color-text-secondary)]"
+          title={picked.type.fullName}
+        >
+          <CubeColumnTypeIcon type={picked.type} />
+          {getColumnTypeLabel(picked)}
+        </span>
+      )}
+    </div>
+  );
+};