diff --git a/src/app/(private)/(dashboards)/superadmin/data-sources/[id]/components/InspectorConfigSection.tsx b/src/app/(private)/(dashboards)/superadmin/data-sources/[id]/components/InspectorConfigSection.tsx
index 8041b00f..6b5c8e8f 100644
--- a/src/app/(private)/(dashboards)/superadmin/data-sources/[id]/components/InspectorConfigSection.tsx
+++ b/src/app/(private)/(dashboards)/superadmin/data-sources/[id]/components/InspectorConfigSection.tsx
@@ -13,7 +13,11 @@ import { GripVertical, LayoutGrid, LayoutList } from "lucide-react";
 import { useCallback, useMemo } from "react";
 import { v4 as uuidv4 } from "uuid";
 import ColumnMetadataIcons from "@/app/(private)/map/[id]/components/ColumnMetadataIcons";
-import { INSPECTOR_COLOR_OPTIONS } from "@/app/(private)/map/[id]/components/InspectorPanel/inspectorPanelOptions";
+import {
+  DEFAULT_BAR_COLOR_VALUE,
+  INSPECTOR_BAR_COLOR_OPTIONS,
+  INSPECTOR_COLOR_OPTIONS,
+} from "@/app/(private)/map/[id]/components/InspectorPanel/inspectorPanelOptions";
 import { useDataSourceColumn } from "@/app/(private)/map/[id]/hooks/useDataSourceColumn";
 import { useInspectorColumn } from "@/app/(private)/map/[id]/hooks/useInspectorColumn";
 import { NULL_UUID } from "@/constants";
@@ -580,6 +584,26 @@ function ColumnItemRow({
             </select>
           )}
 
+        {inspectorColumn &&
+          (inspectorColumn.displayFormat === ColumnDisplayFormat.Percentage ||
+            inspectorColumn.displayFormat === ColumnDisplayFormat.Scale) && (
+            <select
+              className="h-6 rounded border border-input bg-background px-1.5 text-xs"
+              value={inspectorColumn?.barColor ?? DEFAULT_BAR_COLOR_VALUE}
+              onChange={(e) =>
+                onUpdate({
+                  barColor: e.target.value,
+                })
+              }
+            >
+              {INSPECTOR_BAR_COLOR_OPTIONS.map((o) => (
+                <option key={o.value} value={o.value}>
+                  {o.label}
+                </option>
+              ))}
+            </select>
+          )}
+
         {inspectorColumn?.displayFormat === ColumnDisplayFormat.Scale && (
           <input
             type="number"
diff --git a/src/app/(private)/map/[id]/components/InspectorPanel/DataRecordColumns.tsx b/src/app/(private)/map/[id]/components/InspectorPanel/DataRecordColumns.tsx
index b6f4d10e..ffadf14e 100644
--- a/src/app/(private)/map/[id]/components/InspectorPanel/DataRecordColumns.tsx
+++ b/src/app/(private)/map/[id]/components/InspectorPanel/DataRecordColumns.tsx
@@ -8,6 +8,7 @@ import { formatNumber } from "@/utils/text";
 import { PARTY_COLORS } from "../../constants";
 import { useDataSourceColumn } from "../../hooks/useDataSourceColumn";
 import { useInspectorColumn } from "../../hooks/useInspectorColumn";
+import { useInspectorDataSourceConfig } from "../../hooks/useInspectorDataSourceConfig";
 import { getDisplayValue, parseColumnNumber } from "../../utils/stats";
 import { getBarColorForLabel } from "./inspectorPanelOptions";
 import { PropertyLabel } from "./PropertyLabel";
@@ -61,6 +62,7 @@ interface SubRendererProps {
   dataSourceId: string | undefined;
   columnMetadata?: ColumnMetadata | undefined;
   columnType?: ColumnType | null;
+  inspectorColor?: string | null;
 }
 
 function TextOrNumberValue({
@@ -189,17 +191,19 @@ function PercentageBarValue({
   value,
   inspectorColumn,
   columnMetadata,
+  inspectorColor,
 }: Omit<SubRendererProps, "dataSourceId" | "columnType">) {
   const num = parseColumnNumber(value, {
     isCount: false,
     columnMetadata,
   });
   const fill = barFill(
-    getBarColorForLabel(
-      inspectorColumn.name,
-      columnMetadata?.displayName,
-      inspectorColumn.barColor,
-    ),
+    getBarColorForLabel({
+      columnName: inspectorColumn.name,
+      displayName: columnMetadata?.displayName,
+      barColor: inspectorColumn.barColor,
+      inspectorColor,
+    }),
   );
 
   if (num === null) {
@@ -229,17 +233,19 @@ function ScaleValue({
   value,
   inspectorColumn,
   columnMetadata,
+  inspectorColor,
 }: Omit<SubRendererProps, "dataSourceId" | "columnType">) {
   const num = parseColumnNumber(value, {
     isCount: false,
     columnMetadata,
   });
   const fill = barFill(
-    getBarColorForLabel(
-      inspectorColumn.name,
-      columnMetadata?.displayName,
-      inspectorColumn.barColor,
-    ),
+    getBarColorForLabel({
+      columnName: inspectorColumn.name,
+      displayName: columnMetadata?.displayName,
+      barColor: inspectorColumn.barColor,
+      inspectorColor,
+    }),
   );
 
   if (num === null) {
@@ -275,6 +281,7 @@ function DataRecordPropertyValue({
 }) {
   const { columnMetadata, columnDef } = useDataSourceColumn(dataSourceId, name);
   const inspectorColumn = useInspectorColumn(dataSourceId, name);
+  const inspectorConfig = useInspectorDataSourceConfig(dataSourceId);
 
   const format = inspectorColumn?.displayFormat;
 
@@ -310,6 +317,7 @@ function DataRecordPropertyValue({
         value={value}
         inspectorColumn={inspectorColumn}
         columnMetadata={columnMetadata}
+        inspectorColor={inspectorConfig?.color}
       />
     );
   }
@@ -320,6 +328,7 @@ function DataRecordPropertyValue({
         value={value}
         inspectorColumn={inspectorColumn}
         columnMetadata={columnMetadata}
+        inspectorColor={inspectorConfig?.color}
       />
     );
   }
diff --git a/src/app/(private)/map/[id]/components/InspectorPanel/InspectorSettingsModal/AvailableColumnRow.tsx b/src/app/(private)/map/[id]/components/InspectorPanel/InspectorSettingsModal/AvailableColumnRow.tsx
deleted file mode 100644
index b4499f34..00000000
--- a/src/app/(private)/map/[id]/components/InspectorPanel/InspectorSettingsModal/AvailableColumnRow.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-"use client";
-
-import { Checkbox } from "@/shadcn/ui/checkbox";
-import { cn } from "@/shadcn/utils";
-
-/** Simple row for the Available list: checkbox to add, no drag. */
-export function AvailableColumnRow({
-  columnName,
-  onAdd,
-}: {
-  columnName: string;
-  onAdd: () => void;
-}) {
-  return (
-    <div
-      className={cn(
-        "flex items-center gap-2 rounded py-1.5 pl-1 pr-2 text-sm hover:bg-neutral-100/80",
-      )}
-    >
-      <Checkbox
-        checked={false}
-        onCheckedChange={(checked) => checked === true && onAdd()}
-        aria-label={`Add ${columnName} to columns to show`}
-      />
-      <span className="truncate font-mono text-xs flex-1">{columnName}</span>
-    </div>
-  );
-}
diff --git a/src/app/(private)/map/[id]/components/InspectorPanel/InspectorSettingsModal/AvailableListWithDividers.tsx b/src/app/(private)/map/[id]/components/InspectorPanel/InspectorSettingsModal/AvailableListWithDividers.tsx
deleted file mode 100644
index 4a053b7d..00000000
--- a/src/app/(private)/map/[id]/components/InspectorPanel/InspectorSettingsModal/AvailableListWithDividers.tsx
+++ /dev/null
@@ -1,127 +0,0 @@
-"use client";
-
-import { useDroppable } from "@dnd-kit/core";
-import {
-  SortableContext,
-  verticalListSortingStrategy,
-} from "@dnd-kit/sortable";
-import { cn } from "@/shadcn/utils";
-import { AvailableColumnRow } from "./AvailableColumnRow";
-import { SELECTED_LEFT_DROPPABLE_ID } from "./constants";
-import { SortableAvailableRow } from "./SortableAvailableRow";
-import { SortableDividerRow } from "./SortableDividerRow";
-import type { InspectorItem } from "@/models/MapView";
-
-export function AvailableListWithDividers({
-  selectedItemsInOrder,
-  selectedSectionIds,
-  availableColumns,
-  onAddColumn,
-  onRemoveColumn,
-  onAddDivider,
-  onDividerLabelChange,
-  onRemoveDivider,
-  activeId,
-  mode = "both",
-}: {
-  selectedItemsInOrder: InspectorItem[];
-  selectedSectionIds: string[];
-  availableColumns: string[];
-  onAddColumn: (columnName: string) => void;
-  onRemoveColumn: (columnName: string) => void;
-  onAddDivider: () => void;
-  onDividerLabelChange: (id: string, label: string) => void;
-  onRemoveDivider: (id: string) => void;
-  activeId: string | null;
-  mode?: "both" | "selected" | "available";
-}) {
-  const { setNodeRef, isOver } = useDroppable({
-    id: SELECTED_LEFT_DROPPABLE_ID,
-  });
-
-  return (
-    <div className="rounded border border-dashed border-neutral-200 bg-neutral-50/50 flex flex-col flex-1 min-h-0 overflow-hidden">
-      {mode !== "available" && (
-        <>
-          <div className="p-2 shrink-0">
-            <button
-              type="button"
-              onClick={onAddDivider}
-              className="w-full rounded border border-dashed border-neutral-300 py-1.5 text-xs text-muted-foreground hover:border-neutral-400 hover:text-foreground transition-colors"
-            >
-              + Add label divider
-            </button>
-          </div>
-          <div className="flex flex-col flex-1 min-h-0 overflow-hidden">
-            <p className="text-[11px] font-medium text-muted-foreground px-2 pb-1 shrink-0">
-              Selected
-            </p>
-            <div
-              ref={setNodeRef}
-              className={cn(
-                "flex-1 min-h-0 overflow-y-auto p-2 pt-0 rounded-b space-y-1",
-                isOver &&
-                  "bg-primary/5 ring-1 ring-primary/20 border border-primary/30 border-dashed",
-              )}
-            >
-              <SortableContext
-                items={selectedSectionIds}
-                strategy={verticalListSortingStrategy}
-              >
-                {selectedItemsInOrder.length === 0 ? (
-                  <p className="text-xs text-muted-foreground py-3 text-center">
-                    Tick columns below to add
-                  </p>
-                ) : (
-                  selectedItemsInOrder.map((item, i) =>
-                    item.type === "column" ? (
-                      <SortableAvailableRow
-                        key={selectedSectionIds[i]}
-                        id={selectedSectionIds[i]}
-                        columnName={item.name}
-                        selected={true}
-                        onToggle={() => onRemoveColumn(item.name)}
-                        isDragging={activeId === selectedSectionIds[i]}
-                      />
-                    ) : (
-                      <SortableDividerRow
-                        key={`divider-${item.id}`}
-                        id={selectedSectionIds[i]}
-                        label={item.label}
-                        onLabelChange={(value) =>
-                          onDividerLabelChange(item.id, value)
-                        }
-                        onRemove={() => onRemoveDivider(item.id)}
-                        isDragging={activeId === selectedSectionIds[i]}
-                      />
-                    ),
-                  )
-                )}
-              </SortableContext>
-            </div>
-          </div>
-        </>
-      )}
-
-      {mode !== "selected" && (
-        <div className="flex-1 overflow-y-auto flex flex-col min-h-0">
-          <div className="p-2 pt-0 space-y-1 overflow-y-auto">
-            {availableColumns.length === 0 ? (
-              <p className="text-xs text-muted-foreground py-3 text-center">
-                All columns selected
-              </p>
-            ) : (
-              availableColumns.map((col) => (
-                <AvailableColumnRow
-                  key={col}
-                  columnName={col}
-                  onAdd={() => onAddColumn(col)}
-                />
-              ))
-            )}
-          </div>
-        </div>
-      )}
-    </div>
-  );
-}
diff --git a/src/app/(private)/map/[id]/components/InspectorPanel/InspectorSettingsModal/ColumnsSection.tsx b/src/app/(private)/map/[id]/components/InspectorPanel/InspectorSettingsModal/ColumnsSection.tsx
deleted file mode 100644
index d6fddf49..00000000
--- a/src/app/(private)/map/[id]/components/InspectorPanel/InspectorSettingsModal/ColumnsSection.tsx
+++ /dev/null
@@ -1,333 +0,0 @@
-"use client";
-
-import {
-  DndContext,
-  DragOverlay,
-  KeyboardSensor,
-  PointerSensor,
-  closestCenter,
-  useSensor,
-  useSensors,
-} from "@dnd-kit/core";
-import { sortableKeyboardCoordinates } from "@dnd-kit/sortable";
-import { useCallback, useMemo, useState } from "react";
-import { createPortal } from "react-dom";
-import { v4 as uuidv4 } from "uuid";
-import { Label } from "@/shadcn/ui/label";
-import { AvailableListWithDividers } from "./AvailableListWithDividers";
-import { SELECTED_DROPPABLE_ID, SELECTED_LEFT_DROPPABLE_ID } from "./constants";
-import {
-  AvailableDragPreview,
-  ColumnDragPreview,
-  DividerDragPreview,
-} from "./DragPreviews";
-import { DroppableSelectedColumns } from "./DroppableSelectedColumns";
-import type { InspectorDataSourceConfig } from "@/models/InspectorDataSourceConfig";
-import type { InspectorItem } from "@/models/MapView";
-import type { DragEndEvent } from "@dnd-kit/core";
-
-function isDivider(
-  item: InspectorItem,
-): item is { type: "divider"; id: string; label: string } {
-  return item.type === "divider";
-}
-
-function isColumn(
-  item: InspectorItem,
-): item is Extract<InspectorItem, { type: "column" }> {
-  return item.type === "column";
-}
-
-export function ColumnsSection({
-  selectedColumnsInOrder,
-  selectedItemsInOrder,
-  availableColumns,
-  columnIds,
-  updateConfig,
-  handleAddColumn,
-  handleRemoveColumn,
-  handleRemoveColumnFromRight,
-}: {
-  config: InspectorDataSourceConfig;
-  selectedColumnsInOrder: string[];
-  selectedItemsInOrder: InspectorItem[];
-  availableColumns: string[];
-  columnIds: string[];
-  updateConfig: (
-    updater: (prev: InspectorDataSourceConfig) => InspectorDataSourceConfig,
-  ) => void;
-  handleAddColumn: (colName: string) => void;
-  handleRemoveColumn: (colName: string) => void;
-  handleRemoveColumnFromRight: (colName: string) => void;
-}) {
-  const [activeId, setActiveId] = useState<string | null>(null);
-
-  const sensors = useSensors(
-    useSensor(PointerSensor, { activationConstraint: { distance: 6 } }),
-    useSensor(KeyboardSensor, {
-      coordinateGetter: sortableKeyboardCoordinates,
-    }),
-  );
-
-  const selectedSectionIds = useMemo(
-    () =>
-      selectedItemsInOrder.map((item, i) =>
-        isColumn(item)
-          ? `left-selected-${i}-${item.name}`
-          : `divider-${item.id}`,
-      ),
-    [selectedItemsInOrder],
-  );
-
-  const columnItems = useMemo(
-    () => selectedItemsInOrder.filter(isColumn),
-    [selectedItemsInOrder],
-  );
-
-  const isLeftSelectedItem = (s: string) =>
-    s.startsWith("left-selected-") || s.startsWith("divider-");
-
-  const handleDragEnd = useCallback(
-    (event: DragEndEvent) => {
-      const { active, over } = event;
-      setActiveId(null);
-      const activeStr = String(active.id);
-      const overStr = over ? String(over.id) : null;
-
-      if (isLeftSelectedItem(activeStr) && overStr) {
-        const oldIndex = selectedSectionIds.indexOf(activeStr);
-        if (oldIndex === -1) return;
-        const newIndex =
-          overStr === SELECTED_LEFT_DROPPABLE_ID
-            ? selectedSectionIds.length
-            : selectedSectionIds.indexOf(overStr);
-        if (
-          !isLeftSelectedItem(overStr) &&
-          overStr !== SELECTED_LEFT_DROPPABLE_ID
-        )
-          return;
-        if (newIndex === -1 && overStr !== SELECTED_LEFT_DROPPABLE_ID) return;
-        const next = [...selectedItemsInOrder];
-        const [removed] = next.splice(oldIndex, 1);
-        next.splice(newIndex, 0, removed);
-        updateConfig((prev) => ({
-          ...prev,
-          items: next,
-        }));
-        return;
-      }
-
-      const isSelectedItem = (s: string) => s.startsWith("col-");
-      if (isSelectedItem(activeStr) && overStr) {
-        const oldIndex = columnIds.indexOf(activeStr);
-        if (oldIndex === -1) return;
-        const newIndex =
-          overStr === SELECTED_DROPPABLE_ID
-            ? columnIds.length
-            : columnIds.indexOf(overStr);
-        if (!isSelectedItem(overStr) && overStr !== SELECTED_DROPPABLE_ID)
-          return;
-        if (newIndex === -1 && overStr !== SELECTED_DROPPABLE_ID) return;
-        const nextColOrder = [...selectedColumnsInOrder];
-        const [removed] = nextColOrder.splice(oldIndex, 1);
-        nextColOrder.splice(newIndex, 0, removed);
-        updateConfig((prev) => {
-          const colItemsMap = new Map(
-            (prev.items ?? []).filter(isColumn).map((ci) => [ci.name, ci]),
-          );
-          const newColItems = nextColOrder
-            .map((name) => colItemsMap.get(name))
-            .filter((c) => c !== undefined);
-          let colIdx = 0;
-          return {
-            ...prev,
-            items: (prev.items ?? []).map((item) =>
-              isColumn(item) ? newColItems[colIdx++] : item,
-            ),
-          };
-        });
-        return;
-      }
-    },
-    [
-      columnIds,
-      selectedSectionIds,
-      selectedItemsInOrder,
-      updateConfig,
-      selectedColumnsInOrder,
-    ],
-  );
-
-  return (
-    <div className="flex flex-col gap-3 min-h-0 flex-1">
-      <div className="flex items-start justify-between gap-4 shrink-0">
-        <div>
-          <Label className="text-muted-foreground">Columns</Label>
-          <p className="text-xs text-muted-foreground">
-            Tick columns in Available to add. Reorder with the handle.
-          </p>
-        </div>
-        <div className="flex items-center gap-2 shrink-0">
-          <button
-            type="button"
-            onClick={() =>
-              updateConfig((prev) => ({
-                ...prev,
-                items: [
-                  ...(prev.items ?? []),
-                  ...availableColumns.map(
-                    (n): InspectorItem => ({ type: "column", name: n }),
-                  ),
-                ],
-              }))
-            }
-            disabled={availableColumns.length === 0}
-            className="rounded-md border border-input bg-background px-3 py-1.5 text-xs font-medium hover:bg-accent hover:text-accent-foreground disabled:pointer-events-none disabled:opacity-50"
-          >
-            Add all
-          </button>
-          <button
-            type="button"
-            onClick={() =>
-              updateConfig((prev) => ({
-                ...prev,
-                items: (prev.items ?? []).filter(isDivider),
-              }))
-            }
-            disabled={selectedColumnsInOrder.length === 0}
-            className="rounded-md border border-input bg-background px-3 py-1.5 text-xs font-medium hover:bg-accent hover:text-accent-foreground disabled:pointer-events-none disabled:opacity-50"
-          >
-            Remove all
-          </button>
-        </div>
-      </div>
-      <DndContext
-        sensors={sensors}
-        collisionDetection={closestCenter}
-        onDragStart={({ active }) => setActiveId(active.id as string)}
-        onDragEnd={handleDragEnd}
-      >
-        <div className="grid grid-cols-3 gap-4 flex-1 min-h-0 items-stretch">
-          {/* Available columns */}
-          <div className="flex flex-col flex-1 min-h-0 overflow-hidden space-y-1.5">
-            <p className="text-xs font-medium text-muted-foreground shrink-0">
-              Available columns
-            </p>
-            <AvailableListWithDividers
-              selectedItemsInOrder={selectedItemsInOrder}
-              selectedSectionIds={selectedSectionIds}
-              availableColumns={availableColumns}
-              onAddColumn={handleAddColumn}
-              onRemoveColumn={handleRemoveColumn}
-              onAddDivider={() =>
-                updateConfig((prev) => ({
-                  ...prev,
-                  items: [
-                    ...(prev.items ?? []),
-                    { type: "divider" as const, id: uuidv4(), label: "" },
-                  ],
-                }))
-              }
-              onDividerLabelChange={(id, label) =>
-                updateConfig((prev) => ({
-                  ...prev,
-                  items: (prev.items ?? []).map((i) =>
-                    isDivider(i) && i.id === id ? { ...i, label } : i,
-                  ),
-                }))
-              }
-              onRemoveDivider={(id) =>
-                updateConfig((prev) => ({
-                  ...prev,
-                  items: (prev.items ?? []).filter(
-                    (i) => !(isDivider(i) && i.id === id),
-                  ),
-                }))
-              }
-              activeId={activeId}
-              mode="available"
-            />
-          </div>
-
-          {/* Selected columns */}
-          <div className="flex flex-col flex-1 min-h-0 overflow-hidden space-y-1.5">
-            <p className="text-xs font-medium text-muted-foreground shrink-0">
-              Selected columns
-            </p>
-            <AvailableListWithDividers
-              selectedItemsInOrder={selectedItemsInOrder}
-              selectedSectionIds={selectedSectionIds}
-              availableColumns={availableColumns}
-              onAddColumn={handleAddColumn}
-              onRemoveColumn={handleRemoveColumn}
-              onAddDivider={() =>
-                updateConfig((prev) => ({
-                  ...prev,
-                  items: [
-                    ...(prev.items ?? []),
-                    { type: "divider" as const, id: uuidv4(), label: "" },
-                  ],
-                }))
-              }
-              onDividerLabelChange={(id, label) =>
-                updateConfig((prev) => ({
-                  ...prev,
-                  items: (prev.items ?? []).map((i) =>
-                    isDivider(i) && i.id === id ? { ...i, label } : i,
-                  ),
-                }))
-              }
-              onRemoveDivider={(id) =>
-                updateConfig((prev) => ({
-                  ...prev,
-                  items: (prev.items ?? []).filter(
-                    (i) => !(isDivider(i) && i.id === id),
-                  ),
-                }))
-              }
-              activeId={activeId}
-              mode="selected"
-            />
-          </div>
-
-          {/* Selected column settings */}
-          <div className="flex flex-col flex-1 min-h-0 overflow-hidden space-y-1.5">
-            <p className="text-xs font-medium text-muted-foreground shrink-0">
-              Column settings
-            </p>
-            <DroppableSelectedColumns
-              columns={selectedColumnsInOrder}
-              columnItems={columnItems}
-              updateConfig={updateConfig}
-              onRemoveColumn={handleRemoveColumnFromRight}
-              activeId={activeId}
-            />
-          </div>
-        </div>
-        {typeof document !== "undefined" &&
-          createPortal(
-            <DragOverlay dropAnimation={{ duration: 200, easing: "ease" }}>
-              {activeId && String(activeId).startsWith("col-") ? (
-                <ColumnDragPreview activeId={String(activeId)} />
-              ) : activeId && String(activeId).startsWith("divider-") ? (
-                <DividerDragPreview
-                  label={(() => {
-                    const item = selectedItemsInOrder.find(
-                      (i) =>
-                        isDivider(i) && `divider-${i.id}` === String(activeId),
-                    );
-                    return (item && isDivider(item) ? item.label : "") ?? "";
-                  })()}
-                />
-              ) : activeId &&
-                (String(activeId).startsWith("available-") ||
-                  String(activeId).startsWith("left-selected-")) ? (
-                <AvailableDragPreview activeId={String(activeId)} />
-              ) : null}
-            </DragOverlay>,
-            document.body,
-          )}
-      </DndContext>
-    </div>
-  );
-}
diff --git a/src/app/(private)/map/[id]/components/InspectorPanel/InspectorSettingsModal/DragPreviews.tsx b/src/app/(private)/map/[id]/components/InspectorPanel/InspectorSettingsModal/DragPreviews.tsx
deleted file mode 100644
index 81adab6c..00000000
--- a/src/app/(private)/map/[id]/components/InspectorPanel/InspectorSettingsModal/DragPreviews.tsx
+++ /dev/null
@@ -1,58 +0,0 @@
-"use client";
-
-import { GripVertical, Minus } from "lucide-react";
-
-export function ColumnDragPreview({ activeId }: { activeId: string }) {
-  const parts = activeId.startsWith("col-") ? activeId.split("-") : [];
-  // id format: col-{index}-{colName}
-  const columnName = parts.length >= 3 ? parts.slice(2).join("-") : "";
-
-  return (
-    <div className="flex flex-col gap-1.5 rounded border-2 border-primary/30 bg-white py-1.5 px-2 shadow-lg min-w-[140px]">
-      <div className="flex items-center gap-2">
-        <GripVertical className="w-3.5 h-3.5 text-muted-foreground shrink-0 cursor-grabbing" />
-        <span
-          className="text-xs font-mono text-muted-foreground flex-1 truncate"
-          title={columnName}
-        >
-          {columnName}
-        </span>
-      </div>
-    </div>
-  );
-}
-
-export function DividerDragPreview({ label }: { label: string }) {
-  return (
-    <div className="flex items-center gap-2 rounded border-2 border-dashed border-primary/30 bg-white py-1.5 px-2 shadow-lg min-w-[140px]">
-      <GripVertical className="w-3.5 h-3.5 text-muted-foreground shrink-0 cursor-grabbing" />
-      <Minus className="w-3 h-3 text-muted-foreground shrink-0" />
-      <span className="text-xs font-medium uppercase tracking-wide text-neutral-500 truncate">
-        {label || "Section label"}
-      </span>
-    </div>
-  );
-}
-
-export function AvailableDragPreview({ activeId }: { activeId: string }) {
-  let columnName = "";
-  if (activeId.startsWith("available-")) {
-    columnName = activeId.includes("::")
-      ? activeId.slice(activeId.indexOf("::") + 2)
-      : activeId.slice("available-".length);
-  } else if (activeId.startsWith("left-selected-")) {
-    const match = activeId.match(/^left-selected-\d+-/);
-    columnName = match ? activeId.slice(match[0].length) : "";
-  }
-  return (
-    <div className="flex items-center gap-2 rounded border-2 border-primary/30 bg-white py-1.5 px-2 shadow-lg min-w-[140px]">
-      <GripVertical className="w-3.5 h-3.5 text-muted-foreground shrink-0 cursor-grabbing" />
-      <span
-        className="text-xs font-mono text-muted-foreground flex-1 truncate"
-        title={columnName}
-      >
-        {columnName}
-      </span>
-    </div>
-  );
-}
diff --git a/src/app/(private)/map/[id]/components/InspectorPanel/InspectorSettingsModal/DroppableSelectedColumns.tsx b/src/app/(private)/map/[id]/components/InspectorPanel/InspectorSettingsModal/DroppableSelectedColumns.tsx
deleted file mode 100644
index a9099788..00000000
--- a/src/app/(private)/map/[id]/components/InspectorPanel/InspectorSettingsModal/DroppableSelectedColumns.tsx
+++ /dev/null
@@ -1,132 +0,0 @@
-"use client";
-
-import { useDroppable } from "@dnd-kit/core";
-import {
-  SortableContext,
-  verticalListSortingStrategy,
-} from "@dnd-kit/sortable";
-import { useMemo } from "react";
-import { cn } from "@/shadcn/utils";
-import { SortableColumnRow } from "../../SortableColumnRow";
-import { SELECTED_DROPPABLE_ID } from "./constants";
-import type { InspectorDataSourceConfig } from "@/models/InspectorDataSourceConfig";
-import type { InspectorItem } from "@/models/MapView";
-
-type ColumnItem = Extract<InspectorItem, { type: "column" }>;
-
-export function DroppableSelectedColumns({
-  columns,
-  columnItems,
-  updateConfig,
-  onRemoveColumn,
-  activeId,
-}: {
-  columns: string[];
-  columnItems: ColumnItem[];
-  updateConfig: (
-    updater: (prev: InspectorDataSourceConfig) => InspectorDataSourceConfig,
-  ) => void;
-  onRemoveColumn?: (columnName: string) => void;
-  activeId: string | null;
-}) {
-  const { setNodeRef, isOver } = useDroppable({ id: SELECTED_DROPPABLE_ID });
-  const columnIds = useMemo(
-    () => columns.map((c, i) => `col-${i}-${c}`),
-    [columns],
-  );
-
-  const isEmpty = columns.length === 0;
-
-  return (
-    <div
-      ref={setNodeRef}
-      className={cn(
-        "rounded border flex-1 min-h-0 overflow-y-auto p-2 transition-all duration-150 flex flex-col",
-        isOver
-          ? "border-2 border-primary bg-primary/10 ring-2 ring-primary/20"
-          : "bg-neutral-100/80 border-neutral-200",
-      )}
-    >
-      {isEmpty ? (
-        <p className="text-xs py-6 text-center text-muted-foreground">
-          No columns — tick Available to add
-        </p>
-      ) : (
-        <SortableContext
-          items={columnIds}
-          strategy={verticalListSortingStrategy}
-        >
-          <div className="flex flex-col gap-1.5 flex-1">
-            {columns.map((col, i) => {
-              const item = columnItems.find((ci) => ci.name === col);
-              return (
-                <SortableColumnRow
-                  key={columnIds[i]}
-                  id={columnIds[i]}
-                  columnName={col}
-                  format={item?.displayFormat}
-                  onFormatChange={(format) =>
-                    updateConfig((prev) => ({
-                      ...prev,
-                      items: (prev.items ?? []).map((ci) =>
-                        ci.type === "column" && ci.name === col
-                          ? { ...ci, displayFormat: format }
-                          : ci,
-                      ),
-                    }))
-                  }
-                  comparisonStat={item?.comparisonStat}
-                  onComparisonStatChange={(comparisonStat) =>
-                    updateConfig((prev) => ({
-                      ...prev,
-                      items: (prev.items ?? []).map((ci) =>
-                        ci.type === "column" && ci.name === col
-                          ? { ...ci, comparisonStat }
-                          : ci,
-                      ),
-                    }))
-                  }
-                  scaleMax={item?.scaleMax ?? 3}
-                  onScaleMaxChange={(scaleMax) =>
-                    updateConfig((prev) => ({
-                      ...prev,
-                      items: (prev.items ?? []).map((ci) =>
-                        ci.type === "column" && ci.name === col
-                          ? { ...ci, scaleMax }
-                          : ci,
-                      ),
-                    }))
-                  }
-                  barColor={item?.barColor}
-                  onBarColorChange={(value) =>
-                    updateConfig((prev) => ({
-                      ...prev,
-                      items: (prev.items ?? []).map((ci) =>
-                        ci.type === "column" && ci.name === col
-                          ? { ...ci, barColor: value || undefined }
-                          : ci,
-                      ),
-                    }))
-                  }
-                  onRemove={
-                    onRemoveColumn
-                      ? () => onRemoveColumn(col)
-                      : () =>
-                          updateConfig((prev) => ({
-                            ...prev,
-                            items: (prev.items ?? []).filter(
-                              (ci) =>
-                                !(ci.type === "column" && ci.name === col),
-                            ),
-                          }))
-                  }
-                  isDragging={activeId === columnIds[i]}
-                />
-              );
-            })}
-          </div>
-        </SortableContext>
-      )}
-    </div>
-  );
-}
diff --git a/src/app/(private)/map/[id]/components/InspectorPanel/InspectorSettingsModal/SortableAvailableRow.tsx b/src/app/(private)/map/[id]/components/InspectorPanel/InspectorSettingsModal/SortableAvailableRow.tsx
deleted file mode 100644
index 87689b5c..00000000
--- a/src/app/(private)/map/[id]/components/InspectorPanel/InspectorSettingsModal/SortableAvailableRow.tsx
+++ /dev/null
@@ -1,67 +0,0 @@
-"use client";
-
-import { useSortable } from "@dnd-kit/sortable";
-import { CSS } from "@dnd-kit/utilities";
-import { GripVertical } from "lucide-react";
-import { Checkbox } from "@/shadcn/ui/checkbox";
-import { cn } from "@/shadcn/utils";
-
-export function SortableAvailableRow({
-  id,
-  columnName,
-  selected,
-  onToggle,
-  isDragging,
-}: {
-  id: string;
-  columnName: string;
-  selected: boolean;
-  onToggle: (checked: boolean) => void;
-  isDragging?: boolean;
-}) {
-  const {
-    attributes,
-    listeners,
-    setNodeRef,
-    transform,
-    transition,
-    isDragging: dndDragging,
-  } = useSortable({ id });
-  const dragging = isDragging ?? dndDragging;
-  const style = dragging
-    ? { transition }
-    : {
-        transform: CSS.Transform.toString(transform),
-        transition,
-      };
-  return (
-    <div
-      ref={setNodeRef}
-      style={style}
-      className={cn(
-        "flex items-center gap-2 rounded py-1.5 px-2 text-sm hover:bg-neutral-100/80",
-        dragging && "opacity-0 pointer-events-none",
-      )}
-    >
-      <button
-        type="button"
-        className="touch-none cursor-grab active:cursor-grabbing text-muted-foreground hover:text-foreground p-0.5 -ml-0.5 shrink-0"
-        {...attributes}
-        {...listeners}
-        aria-label="Drag to reorder"
-      >
-        <GripVertical className="w-3.5 h-3.5" />
-      </button>
-      <Checkbox
-        checked={selected}
-        onCheckedChange={(checked) => onToggle(checked === true)}
-        aria-label={
-          selected
-            ? `Remove ${columnName} from columns to show`
-            : `Add ${columnName} to columns to show`
-        }
-      />
-      <span className="truncate font-mono text-xs flex-1">{columnName}</span>
-    </div>
-  );
-}
diff --git a/src/app/(private)/map/[id]/components/InspectorPanel/InspectorSettingsModal/SortableDividerRow.tsx b/src/app/(private)/map/[id]/components/InspectorPanel/InspectorSettingsModal/SortableDividerRow.tsx
deleted file mode 100644
index 91ca39cf..00000000
--- a/src/app/(private)/map/[id]/components/InspectorPanel/InspectorSettingsModal/SortableDividerRow.tsx
+++ /dev/null
@@ -1,89 +0,0 @@
-"use client";
-
-import { useSortable } from "@dnd-kit/sortable";
-import { CSS } from "@dnd-kit/utilities";
-import { GripVertical, X } from "lucide-react";
-import { useEffect, useState } from "react";
-import { Input } from "@/shadcn/ui/input";
-import { cn } from "@/shadcn/utils";
-import { useDebouncedCallback } from "../../../hooks/useDebouncedCallback";
-
-export function SortableDividerRow({
-  id,
-  label,
-  onLabelChange,
-  onRemove,
-  isDragging,
-}: {
-  id: string;
-  label: string;
-  onLabelChange: (value: string) => void;
-  onRemove?: () => void;
-  isDragging?: boolean;
-}) {
-  const [localLabel, setLocalLabel] = useState(label);
-  useEffect(() => setLocalLabel(label), [label]);
-  const debouncedChange = useDebouncedCallback(onLabelChange, 600);
-
-  const {
-    attributes,
-    listeners,
-    setNodeRef,
-    transform,
-    transition,
-    isDragging: dndDragging,
-  } = useSortable({ id });
-
-  const dragging = isDragging ?? dndDragging;
-  const style = dragging
-    ? { transition }
-    : {
-        transform: CSS.Transform.toString(transform),
-        transition,
-      };
-
-  return (
-    <div
-      ref={setNodeRef}
-      style={style}
-      className={cn(
-        "flex items-center gap-2 border-t border-neutral-400 pt-2 mt-2 first:mt-0 first:border-t-0 first:pt-0 group",
-        dragging && "opacity-0 pointer-events-none",
-      )}
-    >
-      <button
-        type="button"
-        className="touch-none cursor-grab active:cursor-grabbing text-muted-foreground hover:text-foreground p-0.5 -ml-0.5 shrink-0"
-        {...attributes}
-        {...listeners}
-        aria-label="Drag to reorder"
-      >
-        <GripVertical className="w-4 h-4" />
-      </button>
-      <Input
-        className="h-6 flex-1 min-w-0 text-xs font-medium uppercase tracking-wide text-neutral-500 placeholder:text-neutral-400 border-0 bg-transparent px-0 shadow-none focus-visible:ring-0 focus-visible:ring-offset-0"
-        placeholder="Section label"
-        value={localLabel}
-        onChange={(e) => {
-          const v = e.target.value;
-          setLocalLabel(v);
-          debouncedChange(v);
-        }}
-        onClick={(e) => e.stopPropagation()}
-      />
-      {onRemove && (
-        <button
-          type="button"
-          onClick={(e) => {
-            e.stopPropagation();
-            onRemove();
-          }}
-          className="p-1 rounded text-muted-foreground hover:text-destructive hover:bg-neutral-100 shrink-0"
-          aria-label="Remove divider"
-        >
-          <X className="w-3.5 h-3.5" />
-        </button>
-      )}
-    </div>
-  );
-}
diff --git a/src/app/(private)/map/[id]/components/InspectorPanel/InspectorSettingsModal/constants.ts b/src/app/(private)/map/[id]/components/InspectorPanel/InspectorSettingsModal/constants.ts
deleted file mode 100644
index a8eb3aad..00000000
--- a/src/app/(private)/map/[id]/components/InspectorPanel/InspectorSettingsModal/constants.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import { ColumnDisplayFormat } from "@/models/shared";
-
-export const SELECTED_DROPPABLE_ID = "selected-columns";
-export const AVAILABLE_DROPPABLE_ID = "available-columns";
-/** Droppable id for the left column's "Selected" section (reorder selected items). */
-export const SELECTED_LEFT_DROPPABLE_ID = "selected-left-section";
-
-export type InspectorLayout = "single" | "twoColumn";
-
-/** Infer column format from name: Percentage if name contains % or "percentage". */
-export function inferFormat(
-  columnName: string,
-): ColumnDisplayFormat | undefined {
-  const lower = columnName.toLowerCase();
-  if (lower.includes("%") || lower.includes("percentage"))
-    return ColumnDisplayFormat.Percentage;
-  return undefined;
-}
diff --git a/src/app/(private)/map/[id]/components/InspectorPanel/inspectorPanelOptions.tsx b/src/app/(private)/map/[id]/components/InspectorPanel/inspectorPanelOptions.tsx
index 8c943bae..ae1946b2 100644
--- a/src/app/(private)/map/[id]/components/InspectorPanel/inspectorPanelOptions.tsx
+++ b/src/app/(private)/map/[id]/components/InspectorPanel/inspectorPanelOptions.tsx
@@ -122,7 +122,7 @@ interface BarColorOption {
 }
 
 export const INSPECTOR_BAR_COLOR_OPTIONS: BarColorOption[] = [
-  { value: DEFAULT_BAR_COLOR_VALUE, label: "Default (primary)", hex: "" },
+  { value: DEFAULT_BAR_COLOR_VALUE, label: "Default", hex: "" },
   { value: SMART_MATCH_BAR_COLOR_VALUE, label: "Smart match", hex: "" },
   { value: "#3b82f6", label: "Blue", hex: "#3b82f6" },
   { value: "#22c55e", label: "Green", hex: "#22c55e" },
@@ -140,7 +140,10 @@ export function getSmartMatchInfo(
   columnName: string,
   displayName?: string,
 ): { color: string; matchLabel: string } {
-  const combined = `${displayName} ${columnName}`.toLowerCase().trim();
+  const combined = [columnName, displayName]
+    .map((s) => (s ? s.trim() : ""))
+    .join(" ")
+    .toLowerCase();
   // Exact match first (e.g. column named "ruk" or "lab")
   if (PARTY_COLORS[combined]) {
     return { color: PARTY_COLORS[combined], matchLabel: combined };
@@ -154,17 +157,39 @@ export function getSmartMatchInfo(
   return { color: "var(--primary)", matchLabel: "default" };
 }
 
-export function getBarColorForLabel(
-  columnName: string,
-  displayName?: string | undefined,
-  barColor?: string | null,
-): string {
-  if (
-    !barColor ||
-    barColor === DEFAULT_BAR_COLOR_VALUE ||
-    barColor === SMART_MATCH_BAR_COLOR_VALUE
-  ) {
+const INSPECTOR_COLOR_HEX_MAP: Record<string, string> = {
+  blue: "#3b82f6",
+  green: "#22c55e",
+  yellow: "#f59e0b",
+  red: "#ef4444",
+  purple: "#8b5cf6",
+  pink: "#ec4899",
+  orange: "#f97316",
+  teal: "#14b8a6",
+  indigo: "#6366f1",
+  gray: "#6b7280",
+};
+
+export function getBarColorForLabel({
+  columnName,
+  displayName,
+  barColor,
+  inspectorColor,
+}: {
+  columnName: string;
+  displayName?: string | undefined;
+  barColor?: string | null;
+  inspectorColor?: string | null;
+}): string {
+  if (barColor === SMART_MATCH_BAR_COLOR_VALUE) {
     return getSmartMatchInfo(columnName, displayName).color;
   }
+  // Default / no explicit bar color: use the inspector config color
+  if (!barColor || barColor === DEFAULT_BAR_COLOR_VALUE) {
+    if (inspectorColor && INSPECTOR_COLOR_HEX_MAP[inspectorColor]) {
+      return INSPECTOR_COLOR_HEX_MAP[inspectorColor];
+    }
+    return "var(--primary)";
+  }
   return barColor;
 }
diff --git a/src/app/(private)/map/[id]/components/SortableColumnRow.tsx b/src/app/(private)/map/[id]/components/SortableColumnRow.tsx
deleted file mode 100644
index 1b53e88c..00000000
--- a/src/app/(private)/map/[id]/components/SortableColumnRow.tsx
+++ /dev/null
@@ -1,384 +0,0 @@
-"use client";
-
-import { useSortable } from "@dnd-kit/sortable";
-import { CSS } from "@dnd-kit/utilities";
-import { GripVertical, X } from "lucide-react";
-import { type MouseEvent, useEffect, useState } from "react";
-import { ColumnDisplayFormat, InspectorComparisonStat } from "@/models/shared";
-import { Input } from "@/shadcn/ui/input";
-import { Label } from "@/shadcn/ui/label";
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/shadcn/ui/select";
-import { cn } from "@/shadcn/utils";
-import { useDebouncedCallback } from "../hooks/useDebouncedCallback";
-import {
-  DEFAULT_BAR_COLOR_VALUE,
-  INSPECTOR_BAR_COLOR_OPTIONS,
-  SMART_MATCH_BAR_COLOR_VALUE,
-  getSmartMatchInfo,
-} from "./InspectorPanel/inspectorPanelOptions";
-
-const FORMAT_OPTIONS: { value: ColumnDisplayFormat; label: string }[] = [
-  { value: ColumnDisplayFormat.Text, label: "Text" },
-  { value: ColumnDisplayFormat.Number, label: "Number" },
-  {
-    value: ColumnDisplayFormat.NumberWithComparison,
-    label: "Number with comparison",
-  },
-  { value: ColumnDisplayFormat.Percentage, label: "Percentage (bar)" },
-  { value: ColumnDisplayFormat.Scale, label: "Scale (bars)" },
-];
-
-const COMPARISON_STAT_OPTIONS: {
-  value: InspectorComparisonStat;
-  label: string;
-}[] = [
-  { value: InspectorComparisonStat.Average, label: "Average" },
-  { value: InspectorComparisonStat.Median, label: "Median" },
-  { value: InspectorComparisonStat.Min, label: "Min" },
-  { value: InspectorComparisonStat.Max, label: "Max" },
-];
-
-function barColorSelectValue(barColor: string | undefined): string {
-  if (barColor === DEFAULT_BAR_COLOR_VALUE) return DEFAULT_BAR_COLOR_VALUE;
-  if (!barColor || barColor === "" || barColor === SMART_MATCH_BAR_COLOR_VALUE)
-    return SMART_MATCH_BAR_COLOR_VALUE;
-  return barColor;
-}
-
-function BarColorSelect({
-  barColor,
-  onBarColorChange,
-  displayName,
-  columnName,
-  onClick,
-}: {
-  barColor?: string;
-  onBarColorChange: (value: string) => void;
-  displayName: string | undefined;
-  columnName: string;
-  onClick: (e: MouseEvent) => void;
-}) {
-  const value = barColorSelectValue(barColor);
-  const smartMatch = getSmartMatchInfo(displayName ?? columnName, columnName);
-
-  const triggerLabel =
-    value === DEFAULT_BAR_COLOR_VALUE
-      ? "Default"
-      : value === SMART_MATCH_BAR_COLOR_VALUE
-        ? `Smart match (${smartMatch.matchLabel})`
-        : null;
-
-  const triggerSwatchColor =
-    value === DEFAULT_BAR_COLOR_VALUE
-      ? "var(--primary)"
-      : value === SMART_MATCH_BAR_COLOR_VALUE
-        ? smartMatch.color
-        : null;
-
-  return (
-    <div className="space-y-1">
-      <Label className="text-[10px] text-muted-foreground uppercase">
-        Bar colour
-      </Label>
-      <Select
-        value={value}
-        onValueChange={(v) => {
-          if (v === DEFAULT_BAR_COLOR_VALUE)
-            onBarColorChange(DEFAULT_BAR_COLOR_VALUE);
-          else if (v === SMART_MATCH_BAR_COLOR_VALUE)
-            onBarColorChange(SMART_MATCH_BAR_COLOR_VALUE);
-          else onBarColorChange(v);
-        }}
-      >
-        <SelectTrigger className="h-7 text-xs" onClick={onClick}>
-          {triggerLabel !== null ? (
-            <span className="flex items-center gap-2">
-              <span
-                className={cn(
-                  "h-3 w-3 shrink-0 rounded-full border border-neutral-200",
-                  value === DEFAULT_BAR_COLOR_VALUE && "bg-primary",
-                )}
-                style={
-                  value !== DEFAULT_BAR_COLOR_VALUE && triggerSwatchColor
-                    ? { backgroundColor: triggerSwatchColor }
-                    : undefined
-                }
-              />
-              {triggerLabel}
-            </span>
-          ) : (
-            <SelectValue placeholder="Default" />
-          )}
-        </SelectTrigger>
-        <SelectContent>
-          {INSPECTOR_BAR_COLOR_OPTIONS.map((opt) => {
-            const isDefault = opt.value === DEFAULT_BAR_COLOR_VALUE;
-            const isSmart = opt.value === SMART_MATCH_BAR_COLOR_VALUE;
-            const swatchColor = isSmart ? smartMatch.color : opt.hex;
-            const label = isSmart
-              ? `Smart match (${smartMatch.matchLabel})`
-              : opt.label;
-            return (
-              <SelectItem key={opt.value} value={opt.value}>
-                <span className="flex items-center gap-2">
-                  <span
-                    className={cn(
-                      "h-3 w-3 shrink-0 rounded-full border border-neutral-200",
-                      isDefault && "bg-primary",
-                    )}
-                    style={
-                      isDefault ? undefined : { backgroundColor: swatchColor }
-                    }
-                  />
-                  {label}
-                </span>
-              </SelectItem>
-            );
-          })}
-        </SelectContent>
-      </Select>
-    </div>
-  );
-}
-
-export function SortableColumnRow({
-  id,
-  columnName,
-  displayName,
-  onDisplayNameChange,
-  description,
-  onDescriptionChange,
-  format = ColumnDisplayFormat.Text,
-  onFormatChange,
-  comparisonStat,
-  onComparisonStatChange,
-  scaleMax = 3,
-  onScaleMaxChange,
-  barColor,
-  onBarColorChange,
-  onRemove,
-  isDragging,
-}: {
-  id: string;
-  columnName: string;
-  displayName?: string;
-  onDisplayNameChange?: (value: string) => void;
-  description?: string;
-  onDescriptionChange?: (value: string) => void;
-  format?: ColumnDisplayFormat;
-  onFormatChange?: (format: ColumnDisplayFormat) => void;
-  comparisonStat?: InspectorComparisonStat;
-  onComparisonStatChange?: (value: InspectorComparisonStat) => void;
-  scaleMax?: number;
-  onScaleMaxChange?: (value: number) => void;
-  barColor?: string;
-  onBarColorChange?: (value: string) => void;
-  onRemove?: () => void;
-  isDragging?: boolean;
-}) {
-  const [localDisplayName, setLocalDisplayName] = useState(displayName ?? "");
-  useEffect(() => setLocalDisplayName(displayName ?? ""), [displayName]);
-  const debouncedChange = useDebouncedCallback(
-    (v: string) => onDisplayNameChange?.(v),
-    600,
-  );
-
-  const [localDescription, setLocalDescription] = useState(description ?? "");
-  useEffect(() => setLocalDescription(description ?? ""), [description]);
-  const debouncedDescriptionChange = useDebouncedCallback(
-    (v: string) => onDescriptionChange?.(v),
-    600,
-  );
-
-  const [localScaleMax, setLocalScaleMax] = useState(String(scaleMax));
-  useEffect(() => setLocalScaleMax(String(scaleMax)), [scaleMax]);
-  const debouncedScaleMax = useDebouncedCallback(
-    (v: number) => onScaleMaxChange?.(v),
-    600,
-  );
-
-  const {
-    attributes,
-    listeners,
-    setNodeRef,
-    transform,
-    transition,
-    isDragging: dndDragging,
-  } = useSortable({ id });
-
-  const dragging = isDragging ?? dndDragging;
-  const style = dragging
-    ? { transition }
-    : {
-        transform: CSS.Transform.toString(transform),
-        transition,
-      };
-
-  return (
-    <div
-      ref={setNodeRef}
-      style={style}
-      className={cn(
-        "flex flex-col gap-2 rounded bg-white py-1.5 px-2 group",
-        dragging && "opacity-0 pointer-events-none",
-      )}
-    >
-      <div className="flex items-center gap-2">
-        <button
-          type="button"
-          className="touch-none cursor-grab active:cursor-grabbing text-muted-foreground hover:text-foreground p-0.5 -ml-0.5"
-          {...attributes}
-          {...listeners}
-          aria-label="Drag to reorder"
-        >
-          <GripVertical className="w-4 h-4" />
-        </button>
-        <span
-          className="text-xs font-mono font-medium uppercase text-muted-foreground flex-1 truncate"
-          title={columnName}
-        >
-          {columnName}
-        </span>
-        {onRemove && (
-          <button
-            type="button"
-            onClick={(e) => {
-              e.stopPropagation();
-              onRemove();
-            }}
-            className="p-1 rounded text-muted-foreground hover:text-destructive hover:bg-neutral-100"
-            aria-label="Remove column"
-          >
-            <X className="w-3.5 h-3.5" />
-          </button>
-        )}
-      </div>
-      <div className="space-y-1">
-        <Label className="text-[10px] text-muted-foreground uppercase">
-          Display name
-        </Label>
-        <Input
-          className="h-7 flex-1 min-w-0 text-sm"
-          placeholder={columnName}
-          value={localDisplayName}
-          onChange={(e) => {
-            const v = e.target.value;
-            setLocalDisplayName(v);
-            debouncedChange(v);
-          }}
-          onClick={(e) => e.stopPropagation()}
-        />
-      </div>
-      {onDescriptionChange && (
-        <div className="space-y-1">
-          <Label className="text-[10px] text-muted-foreground uppercase">
-            Description (tooltip)
-          </Label>
-          <Input
-            className="h-7 flex-1 min-w-0 text-sm"
-            placeholder="Shown on hover in inspector"
-            value={localDescription}
-            onChange={(e) => {
-              const v = e.target.value;
-              setLocalDescription(v);
-              debouncedDescriptionChange(v);
-            }}
-            onClick={(e) => e.stopPropagation()}
-          />
-        </div>
-      )}
-      {onFormatChange && (
-        <div className="space-y-1">
-          <Label className="text-[10px] text-muted-foreground uppercase">
-            Format
-          </Label>
-          <Select
-            value={format}
-            onValueChange={(v) => onFormatChange(v as ColumnDisplayFormat)}
-          >
-            <SelectTrigger
-              className="h-7 text-xs"
-              onClick={(e) => e.stopPropagation()}
-            >
-              <SelectValue />
-            </SelectTrigger>
-            <SelectContent>
-              {FORMAT_OPTIONS.map((opt) => (
-                <SelectItem key={opt.value} value={opt.value}>
-                  {opt.label}
-                </SelectItem>
-              ))}
-            </SelectContent>
-          </Select>
-        </div>
-      )}
-      {format === ColumnDisplayFormat.Scale && onScaleMaxChange && (
-        <div className="space-y-1">
-          <Label className="text-[10px] text-muted-foreground uppercase">
-            Scale max
-          </Label>
-          <Input
-            type="number"
-            min={2}
-            max={10}
-            className="h-7 text-xs w-16"
-            value={localScaleMax}
-            onChange={(e) => {
-              setLocalScaleMax(e.target.value);
-              const n = parseInt(e.target.value, 10);
-              if (!Number.isNaN(n) && n >= 2 && n <= 10) {
-                debouncedScaleMax(n);
-              }
-            }}
-            onClick={(e) => e.stopPropagation()}
-          />
-        </div>
-      )}
-      {format === ColumnDisplayFormat.NumberWithComparison &&
-        onComparisonStatChange && (
-          <div className="space-y-1">
-            <Label className="text-[10px] text-muted-foreground uppercase">
-              Compare against
-            </Label>
-            <Select
-              value={comparisonStat ?? InspectorComparisonStat.Average}
-              onValueChange={(v) =>
-                onComparisonStatChange(v as InspectorComparisonStat)
-              }
-            >
-              <SelectTrigger
-                className="h-7 text-xs"
-                onClick={(e) => e.stopPropagation()}
-              >
-                <SelectValue />
-              </SelectTrigger>
-              <SelectContent>
-                {COMPARISON_STAT_OPTIONS.map((opt) => (
-                  <SelectItem key={opt.value} value={opt.value}>
-                    {opt.label}
-                  </SelectItem>
-                ))}
-              </SelectContent>
-            </Select>
-          </div>
-        )}
-      {(format === ColumnDisplayFormat.Percentage ||
-        format === ColumnDisplayFormat.Scale) &&
-        onBarColorChange && (
-          <BarColorSelect
-            barColor={barColor}
-            onBarColorChange={onBarColorChange}
-            displayName={displayName}
-            columnName={columnName}
-            onClick={(e) => e.stopPropagation()}
-          />
-        )}
-    </div>
-  );
-}