From 6dca38b26ed0e37fb0ff9139c2033f6f4670471e Mon Sep 17 00:00:00 2001
From: Joaquim d'Souza <joaquimds@gmail.com>
Date: Sun, 22 Mar 2026 22:55:01 +0100
Subject: [PATCH 1/6] feat: rework column metadata UI in data source dashboard

---
 AGENTS.md                                     |   4 +
 ...67146_data_source_column_visualisations.ts |  18 +
 ...67147_data_source_organisation_override.ts |  28 ++
 ...ector_config_boundaries_to_data_sources.ts |  19 +
 .../data-sources/[id]/DataSourceDashboard.tsx |  22 +-
 .../[id]/components/ColumnMetadataForm.tsx    | 318 ----------------
 .../[id]/components/ColumnMetadataTable.tsx   | 355 ++++++++++++++++++
 .../components/EnrichmentColumnDialog.tsx     |   0
 .../EnrichmentTable.tsx}                      |   9 +-
 .../[id]/components/ColumnMetadataIcons.tsx   |   5 +-
 .../components/EditColumnMetadataModal.tsx    |  21 +-
 .../(private)/map/[id]/components/Legend.tsx  |   4 +-
 .../map/[id]/components/MapViews.tsx          |   2 +-
 .../VisualisationPanel/VisualisationPanel.tsx |   4 +-
 .../inspector/BoundaryConfigItem.tsx          |   6 +-
 .../inspector/BoundaryDataPanel.tsx           |   4 +-
 .../inspector/DataSourcePropertiesList.tsx    |  10 +-
 .../inspector/InspectorDataConfig.tsx         |  31 +-
 .../components/inspector/InspectorDataTab.tsx |  10 +-
 .../map/[id]/hooks/useDisplayAreaStats.ts     |   2 +-
 .../map/[id]/hooks/useInitialMapView.ts       |   2 +-
 src/labels.ts                                 |   7 +
 src/models/ColumnMetadataOverride.ts          |  13 -
 src/models/DataSource.ts                      |  33 ++
 src/models/DataSourceOrganisationOverride.ts  |  14 +
 src/models/MapView.ts                         |  18 +-
 src/server/commands/ensureOrganisationMap.ts  |   2 +
 src/server/jobs/importDataRecords.ts          |   7 +-
 src/server/jobs/importDataSource.ts           |  86 ++++-
 src/server/models/ColumnMetadataOverride.ts   |   7 -
 .../models/DataSourceOrganisationOverride.ts  |   9 +
 src/server/repositories/DataRecord.ts         |  22 ++
 ...e.ts => DataSourceOrganisationOverride.ts} |  24 +-
 src/server/services/database/index.ts         |   4 +-
 src/server/services/database/schema.ts        |   1 +
 src/server/trpc/routers/dataSource.ts         |  27 +-
 tests/feature/dataSourcesAPI.test.ts          |   3 +
 tests/feature/enrichDataSource.test.ts        |   1 +
 tests/feature/geojsonAPI.test.ts              |   1 +
 tests/feature/importDataSource.test.ts        | 103 +++++
 tests/feature/stats.test.ts                   |   1 +
 tests/resources/percentages.csv               |   5 +
 .../unit/server/jobs/importDataSource.test.ts | 110 ++++++
 .../server/repositories/DataRecord.test.ts    |   1 +
 .../server/trpc/routers/dataRecord.test.ts    |   1 +
 .../server/trpc/routers/dataSource.test.ts    |   1 +
 tests/unit/utils/superjson.test.ts            |   1 +
 47 files changed, 948 insertions(+), 428 deletions(-)
 create mode 100644 migrations/1774204667146_data_source_column_visualisations.ts
 create mode 100644 migrations/1774204667147_data_source_organisation_override.ts
 create mode 100644 migrations/1774206346032_inspector_config_boundaries_to_data_sources.ts
 delete mode 100644 src/app/(private)/(dashboards)/data-sources/[id]/components/ColumnMetadataForm.tsx
 create mode 100644 src/app/(private)/(dashboards)/data-sources/[id]/components/ColumnMetadataTable.tsx
 rename src/app/(private)/(dashboards)/data-sources/{ => [id]}/components/EnrichmentColumnDialog.tsx (100%)
 rename src/app/(private)/(dashboards)/data-sources/[id]/{DataSourceEnrichmentDashboard.tsx => components/EnrichmentTable.tsx} (98%)
 delete mode 100644 src/models/ColumnMetadataOverride.ts
 create mode 100644 src/models/DataSourceOrganisationOverride.ts
 delete mode 100644 src/server/models/ColumnMetadataOverride.ts
 create mode 100644 src/server/models/DataSourceOrganisationOverride.ts
 rename src/server/repositories/{ColumnMetadataOverride.ts => DataSourceOrganisationOverride.ts} (55%)
 create mode 100644 tests/resources/percentages.csv
 create mode 100644 tests/unit/server/jobs/importDataSource.test.ts

diff --git a/AGENTS.md b/AGENTS.md
index fa26e1e3..a3b4bafa 100644
--- a/AGENTS.md
+++ b/AGENTS.md
@@ -83,6 +83,10 @@ Use tRPC as the bridge between client components and server logic:
 - **Server components**: call the server-side tRPC caller from `src/services/trpc/server.tsx`
 - **API routes**: use for streaming responses or bulk data that would be impractical over tRPC
 
+## Code Style
+
+- Do not use `!!x` to cast to `boolean`. Use `Boolean(x)`.
+
 ## Database
 
 ### Kysely ORM
diff --git a/migrations/1774204667146_data_source_column_visualisations.ts b/migrations/1774204667146_data_source_column_visualisations.ts
new file mode 100644
index 00000000..7b2e6674
--- /dev/null
+++ b/migrations/1774204667146_data_source_column_visualisations.ts
@@ -0,0 +1,18 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import type { Kysely } from "kysely";
+
+export async function up(db: Kysely<any>): Promise<void> {
+  await db.schema
+    .alterTable("dataSource")
+    .addColumn("columnVisualisations", "jsonb", (col) =>
+      col.notNull().defaultTo("[]"),
+    )
+    .execute();
+}
+
+export async function down(db: Kysely<any>): Promise<void> {
+  await db.schema
+    .alterTable("dataSource")
+    .dropColumn("columnVisualisations")
+    .execute();
+}
diff --git a/migrations/1774204667147_data_source_organisation_override.ts b/migrations/1774204667147_data_source_organisation_override.ts
new file mode 100644
index 00000000..dfe1c4e1
--- /dev/null
+++ b/migrations/1774204667147_data_source_organisation_override.ts
@@ -0,0 +1,28 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import type { Kysely } from "kysely";
+
+export async function up(db: Kysely<any>): Promise<void> {
+  await db.schema
+    .alterTable("columnMetadataOverride")
+    .renameTo("dataSourceOrganisationOverride")
+    .execute();
+
+  await db.schema
+    .alterTable("dataSourceOrganisationOverride")
+    .addColumn("columnVisualisations", "jsonb", (col) =>
+      col.notNull().defaultTo("[]"),
+    )
+    .execute();
+}
+
+export async function down(db: Kysely<any>): Promise<void> {
+  await db.schema
+    .alterTable("dataSourceOrganisationOverride")
+    .dropColumn("columnVisualisations")
+    .execute();
+
+  await db.schema
+    .alterTable("dataSourceOrganisationOverride")
+    .renameTo("columnMetadataOverride")
+    .execute();
+}
diff --git a/migrations/1774206346032_inspector_config_boundaries_to_data_sources.ts b/migrations/1774206346032_inspector_config_boundaries_to_data_sources.ts
new file mode 100644
index 00000000..5735c209
--- /dev/null
+++ b/migrations/1774206346032_inspector_config_boundaries_to_data_sources.ts
@@ -0,0 +1,19 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { sql } from "kysely";
+import type { Kysely } from "kysely";
+
+export async function up(db: Kysely<any>): Promise<void> {
+  await sql`
+    UPDATE map_view
+    SET inspector_config = (inspector_config - 'boundaries') || jsonb_build_object('dataSources', inspector_config->'boundaries')
+    WHERE inspector_config ? 'boundaries'
+  `.execute(db);
+}
+
+export async function down(db: Kysely<any>): Promise<void> {
+  await sql`
+    UPDATE map_view
+    SET inspector_config = (inspector_config - 'dataSources') || jsonb_build_object('boundaries', inspector_config->'dataSources')
+    WHERE inspector_config ? 'dataSources'
+  `.execute(db);
+}
diff --git a/src/app/(private)/(dashboards)/data-sources/[id]/DataSourceDashboard.tsx b/src/app/(private)/(dashboards)/data-sources/[id]/DataSourceDashboard.tsx
index 3649395a..94b3ae58 100644
--- a/src/app/(private)/(dashboards)/data-sources/[id]/DataSourceDashboard.tsx
+++ b/src/app/(private)/(dashboards)/data-sources/[id]/DataSourceDashboard.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { useMutation, useQuery } from "@tanstack/react-query";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import { useSubscription } from "@trpc/tanstack-react-query";
 import { format, formatDistanceToNow } from "date-fns";
 import {
@@ -34,9 +34,9 @@ import {
 import { Button } from "@/shadcn/ui/button";
 import { Separator } from "@/shadcn/ui/separator";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/shadcn/ui/tabs";
-import ColumnMetadataForm from "./components/ColumnMetadataForm";
+import ColumnMetadataTable from "./components/ColumnMetadataTable";
 import ConfigurationForm from "./components/ConfigurationForm";
-import { DataSourceEnrichmentDashboard } from "./DataSourceEnrichmentDashboard";
+import EnrichmentTable from "./components/EnrichmentTable";
 import type { RouterOutputs } from "@/services/trpc/react";
 
 export function DataSourceDashboard({
@@ -67,6 +67,7 @@ export function DataSourceDashboard({
   );
 
   const trpc = useTRPC();
+  const queryClient = useQueryClient();
 
   // Check webhook status for Google Sheets data sources
   const { data: webhookStatus } = useQuery(
@@ -104,6 +105,11 @@ export function DataSourceDashboard({
           if (dataSourceEvent.event === "ImportComplete") {
             setImporting(false);
             setLastImported(dataSourceEvent.at);
+            queryClient.invalidateQueries({
+              queryKey: trpc.dataSource.byId.queryKey({
+                dataSourceId: dataSource.id,
+              }),
+            });
           }
         },
       },
@@ -226,7 +232,8 @@ export function DataSourceDashboard({
 
       <Tabs defaultValue="settings" className="gap-6">
         <TabsList>
-          <TabsTrigger value="settings">Settings</TabsTrigger>
+          <TabsTrigger value="settings">Configuration</TabsTrigger>
+          <TabsTrigger value="columns">Column metadata</TabsTrigger>
           {showEnrichment && (
             <TabsTrigger value="enrichment">Enrichment</TabsTrigger>
           )}
@@ -249,7 +256,6 @@ export function DataSourceDashboard({
                     : mappedInformation
                 }
               />
-              <ColumnMetadataForm dataSource={dataSource} />
             </div>
 
             <div className="flex flex-col gap-6">
@@ -268,9 +274,13 @@ export function DataSourceDashboard({
           </div>
         </TabsContent>
 
+        <TabsContent value="columns">
+          <ColumnMetadataTable dataSource={dataSource} />
+        </TabsContent>
+
         {showEnrichment && (
           <TabsContent value="enrichment">
-            <DataSourceEnrichmentDashboard dataSource={dataSource} />
+            <EnrichmentTable dataSource={dataSource} />
           </TabsContent>
         )}
       </Tabs>
diff --git a/src/app/(private)/(dashboards)/data-sources/[id]/components/ColumnMetadataForm.tsx b/src/app/(private)/(dashboards)/data-sources/[id]/components/ColumnMetadataForm.tsx
deleted file mode 100644
index 15bd8f16..00000000
--- a/src/app/(private)/(dashboards)/data-sources/[id]/components/ColumnMetadataForm.tsx
+++ /dev/null
@@ -1,318 +0,0 @@
-"use client";
-
-import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
-import { Pencil, Plus, Save } from "lucide-react";
-import { useCallback, useMemo, useState } from "react";
-import { toast } from "sonner";
-import { type ColumnMetadata, ColumnType } from "@/models/DataSource";
-import { useTRPC } from "@/services/trpc/react";
-import { Button } from "@/shadcn/ui/button";
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-} from "@/shadcn/ui/dialog";
-import { Input } from "@/shadcn/ui/input";
-import { ScrollArea } from "@/shadcn/ui/scroll-area";
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from "@/shadcn/ui/table";
-import { Textarea } from "@/shadcn/ui/textarea";
-import type { RouterOutputs } from "@/services/trpc/react";
-
-type DataSource = NonNullable<RouterOutputs["dataSource"]["byId"]>;
-
-function hasMetadata(col: ColumnMetadata) {
-  return col.description !== "" || Object.keys(col.valueLabels).length > 0;
-}
-
-export default function ColumnMetadataForm({
-  dataSource,
-}: {
-  dataSource: DataSource;
-}) {
-  const initialMetadata = useMemo(() => {
-    const existing = new Map(
-      (dataSource.columnMetadata ?? []).map((m) => [m.name, m]),
-    );
-    return dataSource.columnDefs.map((col) => ({
-      name: col.name,
-      valueLabels: existing.get(col.name)?.valueLabels ?? {},
-      description: existing.get(col.name)?.description ?? "",
-    }));
-  }, [dataSource.columnDefs, dataSource.columnMetadata]);
-
-  const [metadata, setMetadata] = useState<ColumnMetadata[]>(initialMetadata);
-  const [loading, setLoading] = useState(false);
-  const [editingIndex, setEditingIndex] = useState<number | null>(null);
-  const [draftDescription, setDraftDescription] = useState("");
-  const [draftValueLabels, setDraftValueLabels] = useState<
-    Record<string, string>
-  >({});
-
-  const client = useQueryClient();
-  const trpc = useTRPC();
-  const editingCol = editingIndex !== null ? metadata[editingIndex] : null;
-  const { data: rawColumnValues } = useQuery(
-    trpc.dataSource.uniqueColumnValues.queryOptions(
-      { dataSourceId: dataSource.id, column: editingCol?.name ?? "" },
-      { enabled: editingCol !== null },
-    ),
-  );
-
-  const editingColumnType = dataSource.columnDefs.find(
-    (col) => col.name === editingCol?.name,
-  )?.type;
-
-  // If nullIsZero is true for a numeric column, combine "", "null" and "undefined" into "0"
-  const columnValues = useMemo(() => {
-    if (rawColumnValues == null) return rawColumnValues;
-    if (!dataSource.nullIsZero || editingColumnType !== ColumnType.Number) {
-      return rawColumnValues;
-    }
-    const blankValues = new Set(["", "null", "undefined"]);
-    const hasBlankOrZero =
-      rawColumnValues.some((v) => blankValues.has(v)) ||
-      rawColumnValues.includes("0");
-    if (!hasBlankOrZero) return rawColumnValues;
-    const filtered = rawColumnValues.filter((v) => !blankValues.has(v));
-    if (!filtered.includes("0")) {
-      filtered.push("0");
-    }
-    return filtered;
-  }, [rawColumnValues, dataSource.nullIsZero, editingColumnType]);
-  const { mutate: updateDataSourceConfig } = useMutation(
-    trpc.dataSource.updateConfig.mutationOptions({
-      onSuccess: () => {
-        setLoading(false);
-        toast.success("Column metadata saved.");
-        client.invalidateQueries({
-          queryKey: trpc.dataSource.listReadable.queryKey(),
-        });
-      },
-      onError: (error) => {
-        setLoading(false);
-        toast.error(error.message || "Could not save column metadata.");
-      },
-    }),
-  );
-
-  const openDialog = useCallback(
-    (index: number) => {
-      const col = metadata[index];
-      setDraftDescription(col.description);
-      setDraftValueLabels(col.valueLabels);
-      setEditingIndex(index);
-    },
-    [metadata],
-  );
-
-  const closeDialog = useCallback(() => {
-    setEditingIndex(null);
-  }, []);
-
-  const saveDialog = useCallback(() => {
-    if (editingIndex === null) return;
-    const updated = metadata.map((m, i) =>
-      i === editingIndex
-        ? { ...m, description: draftDescription, valueLabels: draftValueLabels }
-        : m,
-    );
-    setMetadata(updated);
-    setEditingIndex(null);
-    setLoading(true);
-    updateDataSourceConfig({
-      dataSourceId: dataSource.id,
-      columnMetadata: updated,
-    });
-  }, [
-    editingIndex,
-    metadata,
-    draftDescription,
-    draftValueLabels,
-    dataSource.id,
-    updateDataSourceConfig,
-  ]);
-
-  if (dataSource.columnDefs.length === 0) {
-    return (
-      <p className="text-sm text-muted-foreground">
-        Import data to configure column metadata.
-      </p>
-    );
-  }
-
-  return (
-    <div className="flex flex-col gap-4">
-      <h3 className="font-medium text-lg">Column metadata</h3>
-      <p className="text-sm text-muted-foreground">
-        Add labels and descriptions for each column. These are shown to users
-        viewing your data.
-      </p>
-      <ul className="rounded-md border divide-y">
-        {metadata.map((col, index) => {
-          const hasMeta = hasMetadata(col);
-          return (
-            <li
-              key={col.name}
-              className="flex items-center justify-between px-4 py-2 gap-2"
-            >
-              <span className="font-mono text-sm">{col.name}</span>
-              <Button
-                type="button"
-                variant="outline"
-                size="sm"
-                className="gap-1.5"
-                onClick={() => openDialog(index)}
-              >
-                {hasMeta ? (
-                  <>
-                    <Pencil className="h-3.5 w-3.5" />
-                    Edit metadata
-                  </>
-                ) : (
-                  <>
-                    <Plus className="h-3.5 w-3.5" />
-                    Add metadata
-                  </>
-                )}
-              </Button>
-            </li>
-          );
-        })}
-      </ul>
-
-      <Dialog
-        open={editingIndex !== null}
-        onOpenChange={(open) => {
-          if (!open) closeDialog();
-        }}
-      >
-        <DialogContent>
-          <DialogHeader>
-            <DialogTitle>
-              Metadata for <span className="font-mono">{editingCol?.name}</span>
-            </DialogTitle>
-            <DialogDescription>
-              Configure a description and value labels for this column.
-            </DialogDescription>
-          </DialogHeader>
-          {editingCol && (
-            <div className="flex flex-col gap-4 py-2">
-              <div className="flex flex-col gap-1.5">
-                <label className="text-sm font-medium">Description</label>
-                <Textarea
-                  value={draftDescription}
-                  onChange={(e) => setDraftDescription(e.target.value)}
-                  placeholder="Column description"
-                />
-              </div>
-              <div className="flex flex-col gap-1.5">
-                <label className="text-sm font-medium">Value labels</label>
-                {(() => {
-                  if (columnValues === undefined) {
-                    return (
-                      <p className="text-sm text-muted-foreground">
-                        Loading values…
-                      </p>
-                    );
-                  }
-                  if (columnValues === null) {
-                    return (
-                      <p className="text-sm text-muted-foreground">
-                        Too many unique values to configure labels.
-                      </p>
-                    );
-                  }
-                  if (columnValues.length === 0) {
-                    return (
-                      <p className="text-sm text-muted-foreground">
-                        No values found.
-                      </p>
-                    );
-                  }
-                  return (
-                    <ScrollArea className="max-h-64 rounded-md border">
-                      <Table>
-                        <TableHeader>
-                          <TableRow>
-                            <TableHead className="w-1/2">Value</TableHead>
-                            <TableHead className="w-1/2">Label</TableHead>
-                          </TableRow>
-                        </TableHeader>
-                        <TableBody>
-                          {columnValues
-                            .toSorted((a, b) => {
-                              const columnType = dataSource.columnDefs.find(
-                                (col) => col.name === editingCol?.name,
-                              )?.type;
-                              if (columnType === ColumnType.Number) {
-                                const numA = Number(a);
-                                const numB = Number(b);
-                                if (isNaN(numA) || isNaN(numB)) {
-                                  return a.localeCompare(b);
-                                }
-                                return numA - numB;
-                              }
-                              return a.localeCompare(b);
-                            })
-                            .map((value) => (
-                              <TableRow key={value}>
-                                <TableCell className="font-mono text-sm text-muted-foreground whitespace-normal">
-                                  {value || "(blank)"}
-                                </TableCell>
-                                <TableCell>
-                                  <Input
-                                    value={draftValueLabels[value] ?? ""}
-                                    onChange={(e) => {
-                                      const label = e.target.value;
-                                      setDraftValueLabels((prev) => {
-                                        if (label) {
-                                          return { ...prev, [value]: label };
-                                        }
-                                        // eslint-disable-next-line @typescript-eslint/no-unused-vars
-                                        const { [value]: _removed, ...rest } =
-                                          prev;
-                                        return rest;
-                                      });
-                                    }}
-                                    className="h-8 text-sm"
-                                  />
-                                </TableCell>
-                              </TableRow>
-                            ))}
-                        </TableBody>
-                      </Table>
-                    </ScrollArea>
-                  );
-                })()}
-              </div>
-            </div>
-          )}
-          <DialogFooter>
-            <Button type="button" variant="ghost" onClick={closeDialog}>
-              Cancel
-            </Button>
-            <Button
-              type="button"
-              variant="secondary"
-              disabled={loading}
-              onClick={saveDialog}
-            >
-              <Save className="h-4 w-4" />
-              {loading ? "Saving..." : "Save"}
-            </Button>
-          </DialogFooter>
-        </DialogContent>
-      </Dialog>
-    </div>
-  );
-}
diff --git a/src/app/(private)/(dashboards)/data-sources/[id]/components/ColumnMetadataTable.tsx b/src/app/(private)/(dashboards)/data-sources/[id]/components/ColumnMetadataTable.tsx
new file mode 100644
index 00000000..be8904f4
--- /dev/null
+++ b/src/app/(private)/(dashboards)/data-sources/[id]/components/ColumnMetadataTable.tsx
@@ -0,0 +1,355 @@
+"use client";
+
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { toast } from "sonner";
+import { ColumnSemanticTypeLabels } from "@/labels";
+import {
+  type ColumnMetadata,
+  type ColumnSemanticType,
+  ColumnType,
+  JobStatus,
+  numericColumnSemanticTypes,
+} from "@/models/DataSource";
+import { useTRPC } from "@/services/trpc/react";
+import { Badge } from "@/shadcn/ui/badge";
+import { Button } from "@/shadcn/ui/button";
+import { Input } from "@/shadcn/ui/input";
+import { Popover, PopoverContent, PopoverTrigger } from "@/shadcn/ui/popover";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/shadcn/ui/select";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/shadcn/ui/table";
+import { Textarea } from "@/shadcn/ui/textarea";
+import type { RouterOutputs } from "@/services/trpc/react";
+
+type DataSource = NonNullable<RouterOutputs["dataSource"]["byId"]>;
+
+function ColumnValueLabelsCell({
+  dataSourceId,
+  columnName,
+  columnType,
+  nullIsZero,
+  currentLabels,
+  onSave,
+}: {
+  dataSourceId: string;
+  columnName: string;
+  columnType: ColumnType;
+  nullIsZero: boolean | undefined;
+  currentLabels: Record<string, string>;
+  onSave: (labels: Record<string, string>) => void;
+}) {
+  const [open, setOpen] = useState(false);
+  const [localLabels, setLocalLabels] =
+    useState<Record<string, string>>(currentLabels);
+  const debounceRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const trpc = useTRPC();
+
+  const { data: rawColumnValues } = useQuery(
+    trpc.dataSource.uniqueColumnValues.queryOptions(
+      { dataSourceId, column: columnName },
+      { enabled: open },
+    ),
+  );
+
+  const columnValues = useMemo(() => {
+    if (rawColumnValues == null) return rawColumnValues;
+    if (!nullIsZero || columnType !== ColumnType.Number) {
+      return rawColumnValues;
+    }
+    const blankValues = new Set(["", "null", "undefined"]);
+    const hasBlankOrZero =
+      rawColumnValues.some((v) => blankValues.has(v)) ||
+      rawColumnValues.includes("0");
+    if (!hasBlankOrZero) return rawColumnValues;
+    const filtered = rawColumnValues.filter((v) => !blankValues.has(v));
+    if (!filtered.includes("0")) {
+      filtered.push("0");
+    }
+    return filtered;
+  }, [rawColumnValues, nullIsZero, columnType]);
+
+  const sortedValues = useMemo(() => {
+    if (!columnValues) return columnValues;
+    return columnValues.toSorted((a, b) => {
+      if (columnType === ColumnType.Number) {
+        const numA = Number(a);
+        const numB = Number(b);
+        if (!isNaN(numA) && !isNaN(numB)) return numA - numB;
+      }
+      return a.localeCompare(b);
+    });
+  }, [columnValues, columnType]);
+
+  const handleLabelChange = useCallback(
+    (value: string, label: string) => {
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      const { [value]: _removed, ...rest } = localLabels;
+      const updated = label ? { ...localLabels, [value]: label } : rest;
+      setLocalLabels(updated);
+      if (debounceRef.current) clearTimeout(debounceRef.current);
+      debounceRef.current = setTimeout(() => {
+        onSave(updated);
+      }, 300);
+    },
+    [localLabels, onSave],
+  );
+
+  const labelCount = Object.keys(currentLabels).length;
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild>
+        <Button variant="outline" size="sm" className="text-xs">
+          {labelCount > 0
+            ? `${labelCount} label${labelCount !== 1 ? "s" : ""}`
+            : "Configure labels"}
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="w-72 p-0" align="start">
+        <div className="max-h-64 overflow-y-auto">
+          {sortedValues === undefined ? (
+            <p className="text-sm text-muted-foreground p-3">Loading values…</p>
+          ) : sortedValues === null ? (
+            <p className="text-sm text-muted-foreground p-3">
+              Too many unique values to configure labels.
+            </p>
+          ) : sortedValues.length === 0 ? (
+            <p className="text-sm text-muted-foreground p-3">
+              No values found.
+            </p>
+          ) : (
+            <Table>
+              <TableHeader>
+                <TableRow>
+                  <TableHead className="w-1/2 text-xs">Value</TableHead>
+                  <TableHead className="w-1/2 text-xs">Label</TableHead>
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                {sortedValues.map((value) => (
+                  <TableRow key={value}>
+                    <TableCell className="font-mono text-xs text-muted-foreground whitespace-normal py-1.5">
+                      {value || "(blank)"}
+                    </TableCell>
+                    <TableCell className="py-1.5">
+                      <Input
+                        value={localLabels[value] ?? ""}
+                        onChange={(e) =>
+                          handleLabelChange(value, e.target.value)
+                        }
+                        className="h-7 text-xs"
+                      />
+                    </TableCell>
+                  </TableRow>
+                ))}
+              </TableBody>
+            </Table>
+          )}
+        </div>
+      </PopoverContent>
+    </Popover>
+  );
+}
+
+export default function ColumnMetadataTable({
+  dataSource,
+}: {
+  dataSource: DataSource;
+}) {
+  const initialMetadata = useMemo(() => {
+    const existing = new Map(
+      (dataSource.columnMetadata ?? []).map((m) => [m.name, m]),
+    );
+    return dataSource.columnDefs.map((col) => ({
+      name: col.name,
+      valueLabels: existing.get(col.name)?.valueLabels ?? {},
+      description: existing.get(col.name)?.description ?? "",
+      semanticType: existing.get(col.name)?.semanticType,
+    }));
+  }, [dataSource.columnDefs, dataSource.columnMetadata]);
+
+  const [metadata, setMetadata] = useState<ColumnMetadata[]>(initialMetadata);
+  const debounceRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  useEffect(() => {
+    if (debounceRef.current) clearTimeout(debounceRef.current);
+    setMetadata(initialMetadata);
+  }, [initialMetadata]);
+
+  const client = useQueryClient();
+  const trpc = useTRPC();
+
+  const { mutate: updateDataSourceConfig } = useMutation(
+    trpc.dataSource.updateConfig.mutationOptions({
+      onSuccess: () => {
+        toast.success("Saved.");
+        client.invalidateQueries({
+          queryKey: trpc.dataSource.listReadable.queryKey(),
+        });
+      },
+      onError: (error) => {
+        toast.error(error.message || "Could not save column metadata.");
+      },
+    }),
+  );
+
+  const save = useCallback(
+    (updated: ColumnMetadata[]) => {
+      updateDataSourceConfig({
+        dataSourceId: dataSource.id,
+        columnMetadata: updated,
+      });
+    },
+    [dataSource.id, updateDataSourceConfig],
+  );
+
+  const handleDescriptionChange = useCallback(
+    (index: number, value: string) => {
+      const updated = metadata.map((m, i) =>
+        i === index ? { ...m, description: value } : m,
+      );
+      setMetadata(updated);
+      if (debounceRef.current) clearTimeout(debounceRef.current);
+      debounceRef.current = setTimeout(() => save(updated), 500);
+    },
+    [metadata, save],
+  );
+
+  const handleSemanticTypeChange = useCallback(
+    (index: number, value: ColumnSemanticType | undefined) => {
+      const updated = metadata.map((m, i) =>
+        i === index ? { ...m, semanticType: value } : m,
+      );
+      setMetadata(updated);
+      save(updated);
+    },
+    [metadata, save],
+  );
+
+  const handleValueLabelsChange = useCallback(
+    (index: number, labels: Record<string, string>) => {
+      const updated = metadata.map((m, i) =>
+        i === index ? { ...m, valueLabels: labels } : m,
+      );
+      setMetadata(updated);
+      save(updated);
+    },
+    [metadata, save],
+  );
+
+  const importStatus = dataSource.importInfo?.status;
+  const importInProgress =
+    importStatus === JobStatus.Running || importStatus === JobStatus.Pending;
+  const hasBeenImported = dataSource.columnDefs.some(
+    (col) => col.type !== ColumnType.Unknown,
+  );
+
+  if (!hasBeenImported) {
+    return (
+      <p className="text-sm text-muted-foreground">
+        {importInProgress
+          ? "Column metadata will be editable when your data source is fully imported."
+          : "Import your data source to set column metadata."}
+      </p>
+    );
+  }
+
+  return (
+    <div className="space-y-4">
+      <p className="text-sm">
+        Add descriptions to columns, set up numeric columns, and configure
+        display labels for specific values.
+      </p>
+      <Table>
+        <TableHeader>
+          <TableRow>
+            <TableHead>Column name</TableHead>
+            <TableHead>Description</TableHead>
+            <TableHead>Data type</TableHead>
+            <TableHead>Value labels</TableHead>
+          </TableRow>
+        </TableHeader>
+        <TableBody>
+          {metadata.map((col, index) => {
+            const colDef = dataSource.columnDefs.find(
+              (d) => d.name === col.name,
+            );
+            const isNumeric = colDef?.type === ColumnType.Number;
+
+            return (
+              <TableRow key={col.name}>
+                <TableCell className="font-mono text-sm align-top">
+                  {col.name}
+                </TableCell>
+                <TableCell className="align-top">
+                  <Textarea
+                    value={col.description}
+                    onChange={(e) =>
+                      handleDescriptionChange(index, e.target.value)
+                    }
+                    placeholder="Add description"
+                    className="text-sm min-h-0 resize-none"
+                    rows={2}
+                  />
+                </TableCell>
+                <TableCell className="align-top">
+                  {isNumeric ? (
+                    <Select
+                      value={col.semanticType ?? ""}
+                      onValueChange={(value) =>
+                        handleSemanticTypeChange(
+                          index,
+                          value ? (value as ColumnSemanticType) : undefined,
+                        )
+                      }
+                    >
+                      <SelectTrigger className="h-8 text-sm data-[placeholder]:text-black">
+                        <SelectValue placeholder="Number" />
+                      </SelectTrigger>
+                      <SelectContent>
+                        {numericColumnSemanticTypes.map((type) => (
+                          <SelectItem key={type} value={type}>
+                            {ColumnSemanticTypeLabels[type]}
+                          </SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                  ) : (
+                    <Badge variant="outline" className="text-sm font-normal">
+                      {colDef?.type === ColumnType.String
+                        ? "Text"
+                        : (colDef?.type ?? "Unknown")}
+                    </Badge>
+                  )}
+                </TableCell>
+                <TableCell className="align-top">
+                  <ColumnValueLabelsCell
+                    dataSourceId={dataSource.id}
+                    columnName={col.name}
+                    columnType={colDef?.type ?? ColumnType.Unknown}
+                    nullIsZero={dataSource.nullIsZero}
+                    currentLabels={col.valueLabels}
+                    onSave={(labels) => handleValueLabelsChange(index, labels)}
+                  />
+                </TableCell>
+              </TableRow>
+            );
+          })}
+        </TableBody>
+      </Table>
+    </div>
+  );
+}
diff --git a/src/app/(private)/(dashboards)/data-sources/components/EnrichmentColumnDialog.tsx b/src/app/(private)/(dashboards)/data-sources/[id]/components/EnrichmentColumnDialog.tsx
similarity index 100%
rename from src/app/(private)/(dashboards)/data-sources/components/EnrichmentColumnDialog.tsx
rename to src/app/(private)/(dashboards)/data-sources/[id]/components/EnrichmentColumnDialog.tsx
diff --git a/src/app/(private)/(dashboards)/data-sources/[id]/DataSourceEnrichmentDashboard.tsx b/src/app/(private)/(dashboards)/data-sources/[id]/components/EnrichmentTable.tsx
similarity index 98%
rename from src/app/(private)/(dashboards)/data-sources/[id]/DataSourceEnrichmentDashboard.tsx
rename to src/app/(private)/(dashboards)/data-sources/[id]/components/EnrichmentTable.tsx
index 78f42db1..da825e5f 100644
--- a/src/app/(private)/(dashboards)/data-sources/[id]/DataSourceEnrichmentDashboard.tsx
+++ b/src/app/(private)/(dashboards)/data-sources/[id]/components/EnrichmentTable.tsx
@@ -22,9 +22,9 @@ import {
 import { Badge } from "@/shadcn/ui/badge";
 import { Button } from "@/shadcn/ui/button";
 import { Tooltip, TooltipContent, TooltipTrigger } from "@/shadcn/ui/tooltip";
-import EnrichmentColumnDialog from "../components/EnrichmentColumnDialog";
+import EnrichmentColumnDialog from "./EnrichmentColumnDialog";
 
-export function DataSourceEnrichmentDashboard({
+export default function EnrichmentTable({
   dataSource,
 }: {
   dataSource: RouterOutputs["dataSource"]["byId"];
@@ -140,11 +140,6 @@ export function DataSourceEnrichmentDashboard({
                 page: 0,
               }),
             });
-            queryClient.invalidateQueries({
-              queryKey: trpc.dataSource.byId.queryKey({
-                dataSourceId: dataSource.id,
-              }),
-            });
           }
           if (dataSourceEvent.event === "EnrichmentComplete") {
             setEnriching(false);
diff --git a/src/app/(private)/map/[id]/components/ColumnMetadataIcons.tsx b/src/app/(private)/map/[id]/components/ColumnMetadataIcons.tsx
index e779857e..13a925f7 100644
--- a/src/app/(private)/map/[id]/components/ColumnMetadataIcons.tsx
+++ b/src/app/(private)/map/[id]/components/ColumnMetadataIcons.tsx
@@ -4,6 +4,7 @@ import { resolveColumnMetadataEntry } from "@/utils/resolveColumnMetadata";
 import { useEditColumnMetadata } from "../hooks/useEditColumnMetadata";
 import type { EditColumnMetadataFields } from "../atoms/editColumnMetadataAtom";
 import type { ColumnMetadata } from "@/models/DataSource";
+import type { DataSourceOrganisationOverride } from "@/models/DataSourceOrganisationOverride";
 
 function ColumnMetadataIcons({
   dataSource,
@@ -15,7 +16,7 @@ function ColumnMetadataIcons({
     | {
         id: string;
         columnMetadata: ColumnMetadata[];
-        columnMetadataOverride?: ColumnMetadata[] | null;
+        organisationOverride?: DataSourceOrganisationOverride | null;
       }
     | null
     | undefined;
@@ -31,7 +32,7 @@ function ColumnMetadataIcons({
 
   const description = resolveColumnMetadataEntry(
     dataSource.columnMetadata,
-    dataSource.columnMetadataOverride,
+    dataSource.organisationOverride?.columnMetadata,
     column,
   )?.description;
 
diff --git a/src/app/(private)/map/[id]/components/EditColumnMetadataModal.tsx b/src/app/(private)/map/[id]/components/EditColumnMetadataModal.tsx
index ffcf17fb..560da5b3 100644
--- a/src/app/(private)/map/[id]/components/EditColumnMetadataModal.tsx
+++ b/src/app/(private)/map/[id]/components/EditColumnMetadataModal.tsx
@@ -85,7 +85,7 @@ export default function EditColumnMetadataModal() {
     if (!dataSource) return undefined;
     return resolveColumnMetadataEntry(
       dataSource.columnMetadata,
-      dataSource.columnMetadataOverride,
+      dataSource.organisationOverride?.columnMetadata,
       columnName,
     );
   }, [dataSource, columnName]);
@@ -263,7 +263,7 @@ export default function EditColumnMetadataModal() {
 
   // Mutation for non-owners: save as org-specific override
   const { mutate: updateOverride } = useMutation(
-    trpc.dataSource.updateColumnMetadataOverride.mutationOptions({
+    trpc.dataSource.updateOrganisationOverride.mutationOptions({
       onSuccess: (_data, variables) => {
         client.setQueryData(
           trpc.dataSource.listReadable.queryKey({
@@ -272,7 +272,18 @@ export default function EditColumnMetadataModal() {
           (old) =>
             old?.map((ds) =>
               ds.id === variables.dataSourceId
-                ? { ...ds, columnMetadataOverride: variables.columnMetadata }
+                ? {
+                    ...ds,
+                    organisationOverride: {
+                      ...(ds.organisationOverride ?? {
+                        id: 0,
+                        organisationId: organisationId ?? "",
+                        dataSourceId: variables.dataSourceId,
+                        columnVisualisations: [],
+                      }),
+                      columnMetadata: variables.columnMetadata,
+                    },
+                  }
                 : ds,
             ),
         );
@@ -288,7 +299,7 @@ export default function EditColumnMetadataModal() {
 
     const sourceMetadata = isOwner
       ? dataSource.columnMetadata
-      : (dataSource.columnMetadataOverride ?? []);
+      : (dataSource.organisationOverride?.columnMetadata ?? []);
 
     const existingMetadata: ColumnMetadata[] = dataSource.columnDefs.map(
       (col) => {
@@ -322,6 +333,8 @@ export default function EditColumnMetadataModal() {
         organisationId,
         dataSourceId: dataSource.id,
         columnMetadata: updated,
+        columnVisualisations:
+          dataSource.organisationOverride?.columnVisualisations ?? [],
       });
     }
   }, [
diff --git a/src/app/(private)/map/[id]/components/Legend.tsx b/src/app/(private)/map/[id]/components/Legend.tsx
index ed89fd96..baf487dc 100644
--- a/src/app/(private)/map/[id]/components/Legend.tsx
+++ b/src/app/(private)/map/[id]/components/Legend.tsx
@@ -127,7 +127,7 @@ export default function Legend() {
       const valueLabels =
         resolveColumnMetadataEntry(
           dataSource?.columnMetadata ?? [],
-          dataSource?.columnMetadataOverride,
+          dataSource?.organisationOverride?.columnMetadata,
           viewConfig.areaDataColumn,
         )?.valueLabels || {};
 
@@ -277,7 +277,7 @@ export default function Legend() {
     const valueLabels =
       resolveColumnMetadataEntry(
         dataSource?.columnMetadata ?? [],
-        dataSource?.columnMetadataOverride,
+        dataSource?.organisationOverride?.columnMetadata,
         viewConfig.areaDataColumn,
       )?.valueLabels || {};
 
diff --git a/src/app/(private)/map/[id]/components/MapViews.tsx b/src/app/(private)/map/[id]/components/MapViews.tsx
index fe2a211e..7359d617 100644
--- a/src/app/(private)/map/[id]/components/MapViews.tsx
+++ b/src/app/(private)/map/[id]/components/MapViews.tsx
@@ -88,7 +88,7 @@ export default function MapViews() {
       name: newViewName.trim(),
       config: createNewViewConfig(),
       dataSourceViews: [],
-      inspectorConfig: { boundaries: [] },
+      inspectorConfig: { dataSources: [] },
       mapId,
       createdAt: new Date(),
     };
diff --git a/src/app/(private)/map/[id]/components/controls/VisualisationPanel/VisualisationPanel.tsx b/src/app/(private)/map/[id]/components/controls/VisualisationPanel/VisualisationPanel.tsx
index 0e791ccc..0be4fd05 100644
--- a/src/app/(private)/map/[id]/components/controls/VisualisationPanel/VisualisationPanel.tsx
+++ b/src/app/(private)/map/[id]/components/controls/VisualisationPanel/VisualisationPanel.tsx
@@ -378,7 +378,7 @@ export default function VisualisationPanel({
                       label: `${col.name} (${col.type})`,
                       hint: resolveColumnMetadataEntry(
                         dataSource?.columnMetadata || [],
-                        dataSource?.columnMetadataOverride,
+                        dataSource?.organisationOverride?.columnMetadata,
                         col.name,
                       )?.description,
                     })) || []),
@@ -419,7 +419,7 @@ export default function VisualisationPanel({
                         label: `${col.name} (${col.type})`,
                         hint: resolveColumnMetadataEntry(
                           dataSource?.columnMetadata || [],
-                          dataSource?.columnMetadataOverride,
+                          dataSource?.organisationOverride?.columnMetadata,
                           col.name,
                         )?.description,
                       })) || []),
diff --git a/src/app/(private)/map/[id]/components/inspector/BoundaryConfigItem.tsx b/src/app/(private)/map/[id]/components/inspector/BoundaryConfigItem.tsx
index 8fe8723e..edbffd41 100644
--- a/src/app/(private)/map/[id]/components/inspector/BoundaryConfigItem.tsx
+++ b/src/app/(private)/map/[id]/components/inspector/BoundaryConfigItem.tsx
@@ -2,7 +2,7 @@ import { Database, X } from "lucide-react";
 import { useMemo, useState } from "react";
 import DataSourceIcon from "@/components/DataSourceIcon";
 import { getDataSourceType } from "@/components/DataSourceItem";
-import { type InspectorBoundaryConfig } from "@/models/MapView";
+import { type InspectorDataSourceConfig } from "@/models/MapView";
 import { Button } from "@/shadcn/ui/button";
 import { Input } from "@/shadcn/ui/input";
 import { Label } from "@/shadcn/ui/label";
@@ -17,10 +17,10 @@ export function BoundaryConfigItem({
   onClickRemove,
   onUpdate,
 }: {
-  boundaryConfig: InspectorBoundaryConfig;
+  boundaryConfig: InspectorDataSourceConfig;
   index: number;
   onClickRemove: () => void;
-  onUpdate: (config: InspectorBoundaryConfig) => void;
+  onUpdate: (config: InspectorDataSourceConfig) => void;
 }) {
   const { getDataSourceById } = useDataSources();
   const dataSource = getDataSourceById(boundaryConfig.dataSourceId);
diff --git a/src/app/(private)/map/[id]/components/inspector/BoundaryDataPanel.tsx b/src/app/(private)/map/[id]/components/inspector/BoundaryDataPanel.tsx
index 5a0f28ef..c274867e 100644
--- a/src/app/(private)/map/[id]/components/inspector/BoundaryDataPanel.tsx
+++ b/src/app/(private)/map/[id]/components/inspector/BoundaryDataPanel.tsx
@@ -10,7 +10,7 @@ import { useDataSources } from "../../hooks/useDataSources";
 import DataSourcePropertiesList from "./DataSourcePropertiesList";
 import type { SelectedBoundary } from "../../types/inspector";
 import type { DataSource } from "@/models/DataSource";
-import type { InspectorBoundaryConfig } from "@/models/MapView";
+import type { InspectorDataSourceConfig } from "@/models/MapView";
 import type { Point } from "@/models/shared";
 
 export function BoundaryDataPanel({
@@ -19,7 +19,7 @@ export function BoundaryDataPanel({
   markerPoint,
   defaultExpanded,
 }: {
-  config: InspectorBoundaryConfig;
+  config: InspectorDataSourceConfig;
   selectedBoundary?: SelectedBoundary | null | undefined;
   markerPoint?: Point | null | undefined;
   defaultExpanded: boolean;
diff --git a/src/app/(private)/map/[id]/components/inspector/DataSourcePropertiesList.tsx b/src/app/(private)/map/[id]/components/inspector/DataSourcePropertiesList.tsx
index 5a70da6a..1b38af75 100644
--- a/src/app/(private)/map/[id]/components/inspector/DataSourcePropertiesList.tsx
+++ b/src/app/(private)/map/[id]/components/inspector/DataSourcePropertiesList.tsx
@@ -4,6 +4,7 @@ import { resolveColumnMetadata } from "@/utils/resolveColumnMetadata";
 import { getDisplayValue } from "../../utils/stats";
 import ColumnMetadataIcons from "../ColumnMetadataIcons";
 import type { ColumnMetadata, ColumnType } from "@/models/DataSource";
+import type { DataSourceOrganisationOverride } from "@/models/DataSourceOrganisationOverride";
 
 export default function DataSourcePropertiesList({
   dataSource,
@@ -13,7 +14,7 @@ export default function DataSourcePropertiesList({
   dataSource:
     | {
         columnMetadata: ColumnMetadata[];
-        columnMetadataOverride?: ColumnMetadata[] | null;
+        organisationOverride?: DataSourceOrganisationOverride | null;
         columnDefs?: { name: string; type: ColumnType }[];
         id: string;
       }
@@ -27,9 +28,12 @@ export default function DataSourcePropertiesList({
     () =>
       resolveColumnMetadata(
         dataSource?.columnMetadata || [],
-        dataSource?.columnMetadataOverride,
+        dataSource?.organisationOverride?.columnMetadata,
       ),
-    [dataSource?.columnMetadata, dataSource?.columnMetadataOverride],
+    [
+      dataSource?.columnMetadata,
+      dataSource?.organisationOverride?.columnMetadata,
+    ],
   );
   const properties = useMemo(() => {
     const filtered: { column: string; value: string }[] = [];
diff --git a/src/app/(private)/map/[id]/components/inspector/InspectorDataConfig.tsx b/src/app/(private)/map/[id]/components/inspector/InspectorDataConfig.tsx
index 1eebd78f..29a2437c 100644
--- a/src/app/(private)/map/[id]/components/inspector/InspectorDataConfig.tsx
+++ b/src/app/(private)/map/[id]/components/inspector/InspectorDataConfig.tsx
@@ -1,6 +1,6 @@
 import { useCallback } from "react";
 import { v4 as uuidv4 } from "uuid";
-import { type InspectorBoundaryConfig } from "@/models/MapView";
+import { type InspectorDataSourceConfig } from "@/models/MapView";
 import { useDataSources } from "../../hooks/useDataSources";
 import { useMapViews } from "../../hooks/useMapViews";
 import DataSourceSelectButton from "../DataSourceSelectButton";
@@ -10,7 +10,7 @@ export default function InspectorConfigTab() {
   const { view, updateView } = useMapViews();
   const { getDataSourceById } = useDataSources();
 
-  const boundaryStatsConfig = view?.inspectorConfig?.boundaries || [];
+  const dataSourcesConfig = view?.inspectorConfig?.dataSources || [];
 
   const addDataSourceToConfig = useCallback(
     (dataSourceId: string) => {
@@ -19,20 +19,20 @@ export default function InspectorConfigTab() {
       }
 
       const dataSource = getDataSourceById(dataSourceId);
-      const newBoundaryConfig: InspectorBoundaryConfig = {
+      const newDataSourceConfig: InspectorDataSourceConfig = {
         id: uuidv4(),
         dataSourceId,
-        name: dataSource?.name || "Boundary Data",
+        name: dataSource?.name || "Data Source",
         columns: [],
       };
 
-      const prevBoundaries = view.inspectorConfig?.boundaries || [];
+      const prevDataSources = view.inspectorConfig?.dataSources || [];
 
       updateView({
         ...view,
         inspectorConfig: {
           ...view.inspectorConfig,
-          boundaries: [...prevBoundaries, newBoundaryConfig],
+          dataSources: [...prevDataSources, newDataSourceConfig],
         },
       });
     },
@@ -41,33 +41,32 @@ export default function InspectorConfigTab() {
 
   return (
     <div className="flex flex-col gap-4">
-      {boundaryStatsConfig.map((boundaryConfig, index) => (
+      {dataSourcesConfig.map((dataSourceConfig, index) => (
         <BoundaryConfigItem
-          key={boundaryConfig.id}
-          boundaryConfig={boundaryConfig}
+          key={dataSourceConfig.id}
+          boundaryConfig={dataSourceConfig}
           index={index}
           onClickRemove={() => {
             if (!view) return;
-            const updatedBoundaries = view.inspectorConfig?.boundaries?.filter(
-              (_, i) => i !== index,
-            );
+            const updatedDataSources =
+              view.inspectorConfig?.dataSources?.filter((_, i) => i !== index);
             updateView({
               ...view,
               inspectorConfig: {
                 ...view.inspectorConfig,
-                boundaries: updatedBoundaries,
+                dataSources: updatedDataSources,
               },
             });
           }}
           onUpdate={(updatedConfig) => {
             if (!view) return;
-            const updatedBoundaries = [...boundaryStatsConfig];
-            updatedBoundaries[index] = updatedConfig;
+            const updatedDataSources = [...dataSourcesConfig];
+            updatedDataSources[index] = updatedConfig;
             updateView({
               ...view,
               inspectorConfig: {
                 ...view.inspectorConfig,
-                boundaries: updatedBoundaries,
+                dataSources: updatedDataSources,
               },
             });
           }}
diff --git a/src/app/(private)/map/[id]/components/inspector/InspectorDataTab.tsx b/src/app/(private)/map/[id]/components/inspector/InspectorDataTab.tsx
index d9e10ea4..af3c876d 100644
--- a/src/app/(private)/map/[id]/components/inspector/InspectorDataTab.tsx
+++ b/src/app/(private)/map/[id]/components/inspector/InspectorDataTab.tsx
@@ -58,9 +58,9 @@ export default function InspectorDataTab({
     ),
   );
 
-  const boundaryConfigs = useMemo(
-    () => view?.inspectorConfig?.boundaries || [],
-    [view?.inspectorConfig?.boundaries],
+  const dataSourceConfigs = useMemo(
+    () => view?.inspectorConfig?.dataSources || [],
+    [view?.inspectorConfig?.dataSources],
   );
 
   const isBoundary = type === LayerType.Boundary;
@@ -122,7 +122,7 @@ export default function InspectorDataTab({
             const hasProperties =
               properties.length ||
               Object.keys(recordData?.json || {}).length ||
-              boundaryConfigs.length;
+              dataSourceConfigs.length;
 
             if (!hasProperties) {
               return (
@@ -147,7 +147,7 @@ export default function InspectorDataTab({
         </>
       )}
 
-      {boundaryConfigs.map((config, index) => (
+      {dataSourceConfigs.map((config, index) => (
         <BoundaryDataPanel
           key={config.id}
           config={config}
diff --git a/src/app/(private)/map/[id]/hooks/useDisplayAreaStats.ts b/src/app/(private)/map/[id]/hooks/useDisplayAreaStats.ts
index 164c88f7..3599376a 100644
--- a/src/app/(private)/map/[id]/hooks/useDisplayAreaStats.ts
+++ b/src/app/(private)/map/[id]/hooks/useDisplayAreaStats.ts
@@ -52,7 +52,7 @@ export const useDisplayAreaStats = <
     () =>
       resolveColumnMetadata(
         choroplethDataSource?.columnMetadata ?? [],
-        choroplethDataSource?.columnMetadataOverride,
+        choroplethDataSource?.organisationOverride?.columnMetadata,
       ),
     [choroplethDataSource],
   );
diff --git a/src/app/(private)/map/[id]/hooks/useInitialMapView.ts b/src/app/(private)/map/[id]/hooks/useInitialMapView.ts
index b41c942e..796d9f2c 100644
--- a/src/app/(private)/map/[id]/hooks/useInitialMapView.ts
+++ b/src/app/(private)/map/[id]/hooks/useInitialMapView.ts
@@ -73,7 +73,7 @@ export function useInitialMapViewEffect() {
         name: "Default View",
         config: createNewViewConfig(),
         dataSourceViews,
-        inspectorConfig: { boundaries: [] },
+        inspectorConfig: { dataSources: [] },
         mapId: mapId,
         position: getNewLastPosition(mapData.views),
         createdAt: new Date(),
diff --git a/src/labels.ts b/src/labels.ts
index 713ac690..df0dd097 100644
--- a/src/labels.ts
+++ b/src/labels.ts
@@ -3,6 +3,7 @@
 import { FilterType } from "@/models/MapView";
 import type { AreaSetCode, AreaSetGroupCode } from "@/models/AreaSet";
 import type {
+  ColumnSemanticType,
   DataSourceRecordType,
   EnrichmentSourceType,
   GeocodingType,
@@ -140,6 +141,12 @@ export const GeocodingTypeLabels: Record<GeocodingType | "Postcode", string> = {
   None: "Disabled",
 };
 
+export const ColumnSemanticTypeLabels: Record<ColumnSemanticType, string> = {
+  Auto: "Number",
+  Percentage01: "Percentage (0–1)",
+  Percentage0100: "Percentage (0–100)",
+};
+
 export const DataSourceRecordTypeLabels: Record<DataSourceRecordType, string> =
   {
     Members: "Members",
diff --git a/src/models/ColumnMetadataOverride.ts b/src/models/ColumnMetadataOverride.ts
deleted file mode 100644
index 1f8ca031..00000000
--- a/src/models/ColumnMetadataOverride.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-import { z } from "zod";
-import { columnMetadataSchema } from "./DataSource";
-
-export const columnMetadataOverrideSchema = z.object({
-  id: z.number(),
-  organisationId: z.string(),
-  dataSourceId: z.string(),
-  columnMetadata: z.array(columnMetadataSchema),
-});
-
-export type ColumnMetadataOverride = z.infer<
-  typeof columnMetadataOverrideSchema
->;
diff --git a/src/models/DataSource.ts b/src/models/DataSource.ts
index ab75be66..8bafa069 100644
--- a/src/models/DataSource.ts
+++ b/src/models/DataSource.ts
@@ -198,6 +198,28 @@ export enum ColumnType {
 }
 export const columnTypes = Object.values(ColumnType);
 
+export enum ColumnSemanticType {
+  Auto = "Auto",
+  Percentage01 = "Percentage01",
+  Percentage0100 = "Percentage0100",
+}
+export const columnSemanticTypes = Object.values(ColumnSemanticType);
+export const numericColumnSemanticTypes = [
+  ColumnSemanticType.Auto,
+  ColumnSemanticType.Percentage01,
+  ColumnSemanticType.Percentage0100,
+];
+
+export enum ColumnDisplayFormat {
+  Auto = "Auto",
+  Bar = "Bar",
+}
+export const columnDisplayFormats = Object.values(ColumnDisplayFormat);
+export const percentageColumnDisplayFormats = [
+  ColumnDisplayFormat.Auto,
+  ColumnDisplayFormat.Bar,
+];
+
 export const columnDefSchema = z.object({
   name: z.string(),
   type: z.nativeEnum(ColumnType),
@@ -211,8 +233,18 @@ export const columnMetadataSchema = z.object({
   name: z.string(),
   description: z.string(),
   valueLabels: z.record(z.string(), z.string()),
+  semanticType: z.nativeEnum(ColumnSemanticType).optional(),
 });
 
+export const columnVisualisationSchema = z.object({
+  name: z.string(),
+  displayFormat: z.nativeEnum(ColumnDisplayFormat).optional(),
+  colourMappings: z.record(z.string(), z.string()).optional(),
+  visible: z.boolean().optional(),
+});
+
+export type ColumnVisualisation = z.infer<typeof columnVisualisationSchema>;
+
 export type ColumnMetadata = z.infer<typeof columnMetadataSchema>;
 
 export const columnRolesSchema = z.object({
@@ -242,6 +274,7 @@ export const dataSourceSchema = z.object({
   config: dataSourceConfigSchema,
   columnDefs: z.array(columnDefSchema),
   columnMetadata: z.array(columnMetadataSchema),
+  columnVisualisations: z.array(columnVisualisationSchema),
   columnRoles: columnRolesSchema,
   enrichments: z.array(enrichmentSchema),
   geocodingConfig: geocodingConfigSchema,
diff --git a/src/models/DataSourceOrganisationOverride.ts b/src/models/DataSourceOrganisationOverride.ts
new file mode 100644
index 00000000..5414a6d6
--- /dev/null
+++ b/src/models/DataSourceOrganisationOverride.ts
@@ -0,0 +1,14 @@
+import { z } from "zod";
+import { columnMetadataSchema, columnVisualisationSchema } from "./DataSource";
+
+export const dataSourceOrganisationOverrideSchema = z.object({
+  id: z.number(),
+  organisationId: z.string(),
+  dataSourceId: z.string(),
+  columnMetadata: z.array(columnMetadataSchema),
+  columnVisualisations: z.array(columnVisualisationSchema),
+});
+
+export type DataSourceOrganisationOverride = z.infer<
+  typeof dataSourceOrganisationOverrideSchema
+>;
diff --git a/src/models/MapView.ts b/src/models/MapView.ts
index d9af7ce9..691afb64 100644
--- a/src/models/MapView.ts
+++ b/src/models/MapView.ts
@@ -1,5 +1,6 @@
 import z from "zod";
 import { areaSetCode, areaSetGroupCode } from "./AreaSet";
+import { columnVisualisationSchema } from "./DataSource";
 import { pointSchema } from "./shared";
 
 export enum FilterOperator {
@@ -157,30 +158,29 @@ export type MapViewConfig = z.infer<typeof mapViewConfigSchema>;
 // for different aspects (boundaries, markers, members, etc.)
 
 /**
- * Configuration for a single boundary data source in the inspector
+ * Configuration for a single data source in the inspector
  * - dataSourceId: Reference to the data source
  * - name: User-friendly name for this inspector config
- * - type: The type of inspector display (currently only "simple")
  * - columns: Array of column names to display from this data source
  */
-export const inspectorBoundaryConfigSchema = z.object({
+export const inspectorDataSourceConfigSchema = z.object({
   id: z.string(),
   dataSourceId: z.string(),
   name: z.string(),
   columns: z.array(z.string()),
+  columnVisualisations: z.array(columnVisualisationSchema).optional(),
 });
 
-export type InspectorBoundaryConfig = z.infer<
-  typeof inspectorBoundaryConfigSchema
+export type InspectorDataSourceConfig = z.infer<
+  typeof inspectorDataSourceConfigSchema
 >;
 
 /**
- * Complete inspector configuration for a map view
- * Organized by aspect (boundaries, markers, members, etc.)
+ * Complete inspector configuration for a map view.
+ * - dataSources: Data to display for all visualisation types (boundaries, markers, etc.)
  */
 export const inspectorConfigSchema = z.object({
-  boundaries: z.array(inspectorBoundaryConfigSchema).optional(),
-  // Future: markers, members, etc.
+  dataSources: z.array(inspectorDataSourceConfigSchema).optional(),
 });
 
 export type InspectorConfig = z.infer<typeof inspectorConfigSchema>;
diff --git a/src/server/commands/ensureOrganisationMap.ts b/src/server/commands/ensureOrganisationMap.ts
index b203b672..273d34f3 100644
--- a/src/server/commands/ensureOrganisationMap.ts
+++ b/src/server/commands/ensureOrganisationMap.ts
@@ -128,6 +128,7 @@ const ensureMembersDataSource = async (orgId: string): Promise<DataSource> => {
       },
       columnDefs: [],
       columnMetadata: [],
+      columnVisualisations: [],
       public: false,
       recordType: DataSourceRecordType.Members,
     });
@@ -161,6 +162,7 @@ const ensureElectionResultsDataSource = async (): Promise<DataSource> => {
       },
       columnDefs: [],
       columnMetadata: [],
+      columnVisualisations: [],
       public: true,
       recordType: DataSourceRecordType.Data,
     });
diff --git a/src/server/jobs/importDataRecords.ts b/src/server/jobs/importDataRecords.ts
index c07e6c71..c8d2bc6c 100644
--- a/src/server/jobs/importDataRecords.ts
+++ b/src/server/jobs/importDataRecords.ts
@@ -7,7 +7,7 @@ import {
 import { db } from "@/server/services/database";
 import logger from "@/server/services/logger";
 import { batchAsync } from "../utils";
-import { importBatch } from "./importDataSource";
+import { importBatch, inferColumnSemanticTypes } from "./importDataSource";
 
 const importDataRecords = async (args: object | null): Promise<boolean> => {
   if (!args || !("dataSourceId" in args)) {
@@ -96,6 +96,11 @@ const importDataRecords = async (args: object | null): Promise<boolean> => {
     recordCount: Number(totalRecordCount?.count ?? 0),
   });
 
+  await inferColumnSemanticTypes({
+    ...dataSource,
+    columnDefs: columnDefsAccumulator,
+  });
+
   return true;
 };
 
diff --git a/src/server/jobs/importDataSource.ts b/src/server/jobs/importDataSource.ts
index 3306139d..e6278704 100644
--- a/src/server/jobs/importDataSource.ts
+++ b/src/server/jobs/importDataSource.ts
@@ -1,9 +1,10 @@
 import { DATA_SOURCE_JOB_BATCH_SIZE } from "@/constants";
-import { ColumnType } from "@/models/DataSource";
+import { ColumnSemanticType, ColumnType } from "@/models/DataSource";
 import { getDataSourceAdaptor } from "@/server/adaptors";
 import { geocodeRecord } from "@/server/mapping/geocode";
 import {
   deleteByDataSourceId,
+  getNumericColumnRange,
   upsertDataRecords,
 } from "@/server/repositories/DataRecord";
 import {
@@ -13,7 +14,7 @@ import {
 import logger from "@/server/services/logger";
 import { getPubSub } from "@/server/services/pubsub";
 import { batchAsync } from "@/server/utils";
-import type { ColumnDef } from "@/models/DataSource";
+import type { ColumnDef, ColumnMetadata } from "@/models/DataSource";
 import type { DataSource } from "@/models/DataSource";
 import type { ExternalRecord } from "@/types";
 
@@ -80,6 +81,11 @@ const importDataSource = async (args: object | null): Promise<boolean> => {
       recordCount: count,
     });
 
+    await inferColumnSemanticTypes({
+      ...dataSource,
+      columnDefs: columnDefsAccumulator,
+    });
+
     pubsub.publish("dataSourceEvent", {
       dataSourceId: dataSource.id,
       event: "ImportComplete",
@@ -270,4 +276,80 @@ const mergeColumnType = (
   return ColumnType.Unknown;
 };
 
+const PERCENTAGE_NAME_PATTERNS = ["pct", "percent", "%"];
+
+export function isPercentageColumnName(name: string): boolean {
+  const lower = name.toLowerCase();
+  return PERCENTAGE_NAME_PATTERNS.some((p) => lower.includes(p));
+}
+
+export function inferSemanticTypeFromRange(
+  hasPercentageColName: boolean,
+  min: number | null,
+  max: number | null,
+  hasDecimals: boolean,
+): ColumnSemanticType | null {
+  if (max === null) return null;
+
+  if (hasPercentageColName) {
+    if (max <= 1) return ColumnSemanticType.Percentage01;
+    if (max <= 100) return ColumnSemanticType.Percentage0100;
+    return null;
+  }
+
+  // Value-range rule: 0–1 with at least one decimal value
+  if (min !== null && min >= 0 && max <= 1 && hasDecimals) {
+    return ColumnSemanticType.Percentage01;
+  }
+
+  return null;
+}
+
+export async function inferColumnSemanticTypes(
+  dataSource: DataSource,
+): Promise<void> {
+  const numericColumns = dataSource.columnDefs.filter(
+    (col) => col.type === ColumnType.Number,
+  );
+  if (numericColumns.length === 0) return;
+
+  const updatedMetadata: ColumnMetadata[] = [...dataSource.columnMetadata];
+  let changed = false;
+
+  for (const col of numericColumns) {
+    console.log("checking col", col);
+    const existing = updatedMetadata.find((m) => m.name === col.name);
+    if (existing?.semanticType !== undefined) continue;
+
+    const hasPercentageColumnName = isPercentageColumnName(col.name);
+    const { min, max, hasDecimals } = await getNumericColumnRange(
+      dataSource.id,
+      col.name,
+    );
+    const inferred = inferSemanticTypeFromRange(
+      hasPercentageColumnName,
+      min,
+      max,
+      hasDecimals,
+    );
+    if (inferred === null) continue;
+
+    if (existing) {
+      existing.semanticType = inferred;
+    } else {
+      updatedMetadata.push({
+        name: col.name,
+        description: "",
+        valueLabels: {},
+        semanticType: inferred,
+      });
+    }
+    changed = true;
+  }
+
+  if (changed) {
+    await updateDataSource(dataSource.id, { columnMetadata: updatedMetadata });
+  }
+}
+
 export default importDataSource;
diff --git a/src/server/models/ColumnMetadataOverride.ts b/src/server/models/ColumnMetadataOverride.ts
deleted file mode 100644
index d22b11d5..00000000
--- a/src/server/models/ColumnMetadataOverride.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import type { ColumnMetadataOverride } from "@/models/ColumnMetadataOverride";
-import type { Generated, Insertable } from "kysely";
-
-export type ColumnMetadataOverrideTable = ColumnMetadataOverride & {
-  id: Generated<number>;
-};
-export type NewColumnMetadataOverride = Insertable<ColumnMetadataOverrideTable>;
diff --git a/src/server/models/DataSourceOrganisationOverride.ts b/src/server/models/DataSourceOrganisationOverride.ts
new file mode 100644
index 00000000..f5384ce4
--- /dev/null
+++ b/src/server/models/DataSourceOrganisationOverride.ts
@@ -0,0 +1,9 @@
+import type { DataSourceOrganisationOverride } from "@/models/DataSourceOrganisationOverride";
+import type { Generated, Insertable } from "kysely";
+
+export type DataSourceOrganisationOverrideTable =
+  DataSourceOrganisationOverride & {
+    id: Generated<number>;
+  };
+export type NewDataSourceOrganisationOverride =
+  Insertable<DataSourceOrganisationOverrideTable>;
diff --git a/src/server/repositories/DataRecord.ts b/src/server/repositories/DataRecord.ts
index 56f9c2e1..8fde7d19 100644
--- a/src/server/repositories/DataRecord.ts
+++ b/src/server/repositories/DataRecord.ts
@@ -434,3 +434,25 @@ export const deleteByDataSourceId = async (dataSourceId: string) =>
     .deleteFrom("dataRecord")
     .where("dataSourceId", "=", dataSourceId)
     .execute();
+
+export async function getNumericColumnRange(
+  dataSourceId: string,
+  columnName: string,
+): Promise<{ min: number | null; max: number | null; hasDecimals: boolean }> {
+  const result = await db
+    .selectFrom("dataRecord")
+    .where("dataSourceId", "=", dataSourceId)
+    .select([
+      sql<number | null>`MIN((json->>${columnName})::float)`.as("min"),
+      sql<number | null>`MAX((json->>${columnName})::float)`.as("max"),
+      sql<boolean>`BOOL_OR((json->>${columnName})::float > 0 AND (json->>${columnName})::float < 1)`.as(
+        "hasDecimals",
+      ),
+    ])
+    .executeTakeFirst();
+  return {
+    min: result?.min ?? null,
+    max: result?.max ?? null,
+    hasDecimals: result?.hasDecimals ?? false,
+  };
+}
diff --git a/src/server/repositories/ColumnMetadataOverride.ts b/src/server/repositories/DataSourceOrganisationOverride.ts
similarity index 55%
rename from src/server/repositories/ColumnMetadataOverride.ts
rename to src/server/repositories/DataSourceOrganisationOverride.ts
index f0fd57ad..3579322d 100644
--- a/src/server/repositories/ColumnMetadataOverride.ts
+++ b/src/server/repositories/DataSourceOrganisationOverride.ts
@@ -1,12 +1,12 @@
 import { db } from "@/server/services/database";
-import type { ColumnMetadata } from "@/models/DataSource";
+import type { ColumnMetadata, ColumnVisualisation } from "@/models/DataSource";
 
-export async function findColumnMetadataOverride(
+export async function findDataSourceOrganisationOverride(
   organisationId: string,
   dataSourceId: string,
 ) {
   const row = await db
-    .selectFrom("columnMetadataOverride")
+    .selectFrom("dataSourceOrganisationOverride")
     .where("organisationId", "=", organisationId)
     .where("dataSourceId", "=", dataSourceId)
     .selectAll()
@@ -14,31 +14,37 @@ export async function findColumnMetadataOverride(
   return row ?? null;
 }
 
-export async function findColumnMetadataOverridesByOrg(
+export async function findDataSourceOrganisationOverridesByOrg(
   organisationId: string,
   dataSourceIds: string[],
 ) {
   if (!dataSourceIds.length) return [];
   return db
-    .selectFrom("columnMetadataOverride")
+    .selectFrom("dataSourceOrganisationOverride")
     .where("organisationId", "=", organisationId)
     .where("dataSourceId", "in", dataSourceIds)
     .selectAll()
     .execute();
 }
 
-export async function upsertColumnMetadataOverride(
+export async function upsertDataSourceOrganisationOverride(
   organisationId: string,
   dataSourceId: string,
   columnMetadata: ColumnMetadata[],
+  columnVisualisations: ColumnVisualisation[],
 ) {
   return db
-    .insertInto("columnMetadataOverride")
-    .values({ organisationId, dataSourceId, columnMetadata })
+    .insertInto("dataSourceOrganisationOverride")
+    .values({
+      organisationId,
+      dataSourceId,
+      columnMetadata,
+      columnVisualisations,
+    })
     .onConflict((oc) =>
       oc
         .columns(["organisationId", "dataSourceId"])
-        .doUpdateSet({ columnMetadata }),
+        .doUpdateSet({ columnMetadata, columnVisualisations }),
     )
     .returningAll()
     .executeTakeFirstOrThrow();
diff --git a/src/server/services/database/index.ts b/src/server/services/database/index.ts
index 29453478..53782008 100644
--- a/src/server/services/database/index.ts
+++ b/src/server/services/database/index.ts
@@ -7,9 +7,9 @@ import { PointPlugin } from "./plugins/PointPlugin";
 import type { AirtableWebhookTable } from "@/server/models/AirtableWebhook";
 import type { AreaSearchTable, AreaTable } from "@/server/models/Area";
 import type { AreaSetTable } from "@/server/models/AreaSet";
-import type { ColumnMetadataOverrideTable } from "@/server/models/ColumnMetadataOverride";
 import type { DataRecordTable } from "@/server/models/DataRecord";
 import type { DataSourceTable } from "@/server/models/DataSource";
+import type { DataSourceOrganisationOverrideTable } from "@/server/models/DataSourceOrganisationOverride";
 import type { FolderTable } from "@/server/models/Folder";
 import type { InvitationTable } from "@/server/models/Invitation";
 import type { JobTable } from "@/server/models/Job";
@@ -57,7 +57,7 @@ export interface Database {
   area: AreaTable;
   areaSearch: AreaSearchTable;
   areaSet: AreaSetTable;
-  columnMetadataOverride: ColumnMetadataOverrideTable;
+  dataSourceOrganisationOverride: DataSourceOrganisationOverrideTable;
   dataSource: DataSourceTable;
   dataRecord: DataRecordTable;
   folder: FolderTable;
diff --git a/src/server/services/database/schema.ts b/src/server/services/database/schema.ts
index 221e7287..883d528c 100644
--- a/src/server/services/database/schema.ts
+++ b/src/server/services/database/schema.ts
@@ -128,6 +128,7 @@ export interface DataSource {
   config: object; // jsonb, UNIQUE, NOT NULL, DEFAULT {}
   geocodingConfig: object; // jsonb, NOT NULL, DEFAULT {}
   columnDefs: unknown[]; // jsonb, NOT NULL, DEFAULT []
+  columnVisualisations: unknown[]; // jsonb, NOT NULL, DEFAULT []
   columnRoles: object; // jsonb, NOT NULL, DEFAULT {} (renamed from columnsConfig)
   enrichments: unknown[]; // jsonb, NOT NULL, DEFAULT [] (renamed from enrichmentConfig)
   organisationId: string; // uuid, NOT NULL
diff --git a/src/server/trpc/routers/dataSource.ts b/src/server/trpc/routers/dataSource.ts
index 3588f461..d3a42481 100644
--- a/src/server/trpc/routers/dataSource.ts
+++ b/src/server/trpc/routers/dataSource.ts
@@ -8,6 +8,7 @@ import {
   EnrichmentSourceType,
   GeocodingType,
   columnMetadataSchema,
+  columnVisualisationSchema,
   dataSourceSchema,
 } from "@/models/DataSource";
 import { dataSourceViewSchema } from "@/models/MapView";
@@ -16,10 +17,6 @@ import {
   getEnrichedColumn,
   removeEnrichmentColumnsFromDataSource,
 } from "@/server/mapping/enrich";
-import {
-  findColumnMetadataOverridesByOrg,
-  upsertColumnMetadataOverride,
-} from "@/server/repositories/ColumnMetadataOverride";
 import {
   applyFilterAndSearch,
   findDataRecordsByDataSource,
@@ -33,6 +30,10 @@ import {
   getUniqueColumnValues,
   updateDataSource,
 } from "@/server/repositories/DataSource";
+import {
+  findDataSourceOrganisationOverridesByOrg,
+  upsertDataSourceOrganisationOverride,
+} from "@/server/repositories/DataSourceOrganisationOverride";
 import { findMapViewById } from "@/server/repositories/MapView";
 import { findOrganisationsByUserId } from "@/server/repositories/Organisation";
 import { db } from "@/server/services/database";
@@ -68,7 +69,7 @@ export const dataSourceRouter = router({
       const withImportInfo = await addImportInfo(dataSources);
       return withImportInfo.map((ds) => ({
         ...ds,
-        columnMetadataOverride: null,
+        organisationOverride: null,
       }));
     }),
   listReadable: protectedProcedure
@@ -116,20 +117,18 @@ export const dataSourceRouter = router({
 
       const overrides =
         orgId && filteredDataSources.length
-          ? await findColumnMetadataOverridesByOrg(
+          ? await findDataSourceOrganisationOverridesByOrg(
               orgId,
               filteredDataSources.map((ds) => ds.id),
             )
           : [];
 
-      const overrideMap = new Map(
-        overrides.map((o) => [o.dataSourceId, o.columnMetadata]),
-      );
+      const overrideMap = new Map(overrides.map((o) => [o.dataSourceId, o]));
 
       const withImportInfo = await addImportInfo(filteredDataSources);
       return withImportInfo.map((ds) => ({
         ...ds,
-        columnMetadataOverride: overrideMap.get(ds.id) ?? null,
+        organisationOverride: overrideMap.get(ds.id) ?? null,
       }));
     }),
   byOrganisation: organisationProcedure.query(async ({ ctx }) => {
@@ -353,6 +352,7 @@ export const dataSourceRouter = router({
         public: false,
         columnDefs,
         columnMetadata: [],
+        columnVisualisations: [],
         columnRoles: { nameColumns: [] },
         geocodingConfig: { type: GeocodingType.None },
         enrichments: [],
@@ -394,6 +394,7 @@ export const dataSourceRouter = router({
         name: input.name,
         columnRoles: input.columnRoles,
         columnMetadata: input.columnMetadata,
+        columnVisualisations: input.columnVisualisations,
         enrichments: input.enrichments,
         geocodingConfig: input.geocodingConfig,
         dateFormat: input.dateFormat,
@@ -593,18 +594,20 @@ export const dataSourceRouter = router({
     return true;
   }),
 
-  updateColumnMetadataOverride: organisationProcedure
+  updateOrganisationOverride: organisationProcedure
     .input(
       z.object({
         dataSourceId: z.string(),
         columnMetadata: z.array(columnMetadataSchema),
+        columnVisualisations: z.array(columnVisualisationSchema),
       }),
     )
     .mutation(async ({ ctx, input }) => {
-      await upsertColumnMetadataOverride(
+      await upsertDataSourceOrganisationOverride(
         ctx.organisation.id,
         input.dataSourceId,
         input.columnMetadata,
+        input.columnVisualisations,
       );
       return true;
     }),
diff --git a/tests/feature/dataSourcesAPI.test.ts b/tests/feature/dataSourcesAPI.test.ts
index c4ba272c..0a5b8e4a 100644
--- a/tests/feature/dataSourcesAPI.test.ts
+++ b/tests/feature/dataSourcesAPI.test.ts
@@ -70,6 +70,7 @@ describe("Data sources REST API", () => {
       config: { type: DataSourceType.CSV, url: "https://example.com/org1.csv" },
       columnDefs: [{ name: "name", type: ColumnType.String }],
       columnMetadata: [],
+      columnVisualisations: [],
       columnRoles: { nameColumns: ["name"] },
       geocodingConfig: { type: GeocodingType.None },
       enrichments: [],
@@ -85,6 +86,7 @@ describe("Data sources REST API", () => {
       config: { type: DataSourceType.CSV, url: "https://example.com/org2.csv" },
       columnDefs: [{ name: "name", type: ColumnType.String }],
       columnMetadata: [],
+      columnVisualisations: [],
       columnRoles: { nameColumns: ["name"] },
       geocodingConfig: { type: GeocodingType.None },
       enrichments: [],
@@ -100,6 +102,7 @@ describe("Data sources REST API", () => {
       config: { type: DataSourceType.CSV, url: "https://example.com/org3.csv" },
       columnDefs: [{ name: "name", type: ColumnType.String }],
       columnMetadata: [],
+      columnVisualisations: [],
       columnRoles: { nameColumns: ["name"] },
       geocodingConfig: { type: GeocodingType.None },
       enrichments: [],
diff --git a/tests/feature/enrichDataSource.test.ts b/tests/feature/enrichDataSource.test.ts
index 22eaefc0..b890b4c8 100644
--- a/tests/feature/enrichDataSource.test.ts
+++ b/tests/feature/enrichDataSource.test.ts
@@ -45,6 +45,7 @@ async function createGoogleSheetsDataSource(
     },
     columnDefs: [],
     columnMetadata: [],
+    columnVisualisations: [],
     columnRoles: { nameColumns: [] },
     enrichments,
     geocodingConfig: {
diff --git a/tests/feature/geojsonAPI.test.ts b/tests/feature/geojsonAPI.test.ts
index 0f00a113..95ab8304 100644
--- a/tests/feature/geojsonAPI.test.ts
+++ b/tests/feature/geojsonAPI.test.ts
@@ -69,6 +69,7 @@ describe("GeoJSON REST API", () => {
           { name: "address", type: ColumnType.String },
         ],
         columnMetadata: [],
+        columnVisualisations: [],
         columnRoles: { nameColumns: ["name"] },
         geocodingConfig: { type: GeocodingType.None },
         enrichments: [],
diff --git a/tests/feature/importDataSource.test.ts b/tests/feature/importDataSource.test.ts
index e00e15c1..72d990c9 100644
--- a/tests/feature/importDataSource.test.ts
+++ b/tests/feature/importDataSource.test.ts
@@ -3,6 +3,7 @@ import { afterAll, describe, expect, test } from "vitest";
 import { AreaSetCode } from "@/models/AreaSet";
 
 import {
+  ColumnSemanticType,
   ColumnType,
   DataSourceRecordType,
   DataSourceType,
@@ -40,6 +41,7 @@ describe("importDataSource tests", () => {
       },
       columnDefs: [],
       columnMetadata: [],
+      columnVisualisations: [],
       columnRoles: { nameColumns: [] },
       enrichments: [],
       geocodingConfig: {
@@ -238,6 +240,7 @@ describe("importDataSource tests", () => {
       },
       columnDefs: [],
       columnMetadata: [],
+      columnVisualisations: [],
       columnRoles: { nameColumns: [] },
       enrichments: [],
       geocodingConfig: {
@@ -328,6 +331,7 @@ describe("importDataSource tests", () => {
       },
       columnDefs: [],
       columnMetadata: [],
+      columnVisualisations: [],
       columnRoles: { nameColumns: [] },
       enrichments: [],
       geocodingConfig: {
@@ -400,6 +404,7 @@ describe("importDataSource tests", () => {
       },
       columnDefs: [],
       columnMetadata: [],
+      columnVisualisations: [],
       columnRoles: { nameColumns: [] },
       enrichments: [],
       geocodingConfig: {
@@ -452,6 +457,104 @@ describe("importDataSource tests", () => {
     await deleteDataSource(dataSource.id);
   });
 
+  test("importDataSource infers semantic types for percentage columns", async () => {
+    const org = await upsertOrganisation({
+      name: "Test Semantic Type Org",
+    });
+
+    const dataSource = await createDataSource({
+      name: "Test Semantic Type CSV Source",
+      autoEnrich: false,
+      autoImport: false,
+      recordType: DataSourceRecordType.Data,
+      config: {
+        type: DataSourceType.CSV,
+        url: `file://tests/resources/percentages.csv?${uuidv4()}`,
+      },
+      columnDefs: [],
+      columnMetadata: [],
+      columnVisualisations: [],
+      columnRoles: { nameColumns: [] },
+      enrichments: [],
+      geocodingConfig: {
+        type: GeocodingType.Code,
+        column: "Code",
+        areaSetCode: AreaSetCode.WMC24,
+      },
+      organisationId: org.id,
+      public: false,
+    });
+
+    toRemove.push(dataSource.id);
+
+    await importDataSource({ dataSourceId: dataSource.id });
+
+    const imported = await findDataSourceById(dataSource.id);
+    const metadata = imported?.columnMetadata ?? [];
+
+    const semanticTypeByName = Object.fromEntries(
+      metadata.map((m) => [m.name, m.semanticType ?? null]),
+    );
+
+    expect(semanticTypeByName["pct_share"]).toBe(
+      ColumnSemanticType.Percentage01,
+    );
+    expect(semanticTypeByName["turnout_pct"]).toBe(
+      ColumnSemanticType.Percentage0100,
+    );
+    expect(semanticTypeByName["share"]).toBe(ColumnSemanticType.Percentage01);
+    expect(semanticTypeByName["count"]).toBeUndefined();
+    expect(semanticTypeByName["binary"]).toBeUndefined();
+  });
+
+  test("importDataSource does not overwrite a manually set semantic type on re-import", async () => {
+    const org = await upsertOrganisation({
+      name: "Test Preserve Semantic Type Org",
+    });
+
+    const dataSource = await createDataSource({
+      name: "Test Preserve Semantic Type CSV Source",
+      autoEnrich: false,
+      autoImport: false,
+      recordType: DataSourceRecordType.Data,
+      config: {
+        type: DataSourceType.CSV,
+        url: `file://tests/resources/percentages.csv?${uuidv4()}`,
+      },
+      columnDefs: [],
+      // Pre-set a semantic type for pct_share as if the user manually chose it
+      columnMetadata: [
+        {
+          name: "pct_share",
+          description: "",
+          valueLabels: {},
+          semanticType: ColumnSemanticType.Percentage0100,
+        },
+      ],
+      columnVisualisations: [],
+      columnRoles: { nameColumns: [] },
+      enrichments: [],
+      geocodingConfig: {
+        type: GeocodingType.Code,
+        column: "Code",
+        areaSetCode: AreaSetCode.WMC24,
+      },
+      organisationId: org.id,
+      public: false,
+    });
+
+    toRemove.push(dataSource.id);
+
+    await importDataSource({ dataSourceId: dataSource.id });
+
+    const imported = await findDataSourceById(dataSource.id);
+    const metadata = imported?.columnMetadata ?? [];
+    const pctShare = metadata.find((m) => m.name === "pct_share");
+
+    // The manually set Percentage0100 must not be overwritten to Percentage01
+    expect(pctShare?.semanticType).toBe(ColumnSemanticType.Percentage0100);
+  });
+
   afterAll(async () => {
     for (const id of toRemove) {
       await deleteDataSource(id);
diff --git a/tests/feature/stats.test.ts b/tests/feature/stats.test.ts
index 2b037dbd..53d74379 100644
--- a/tests/feature/stats.test.ts
+++ b/tests/feature/stats.test.ts
@@ -38,6 +38,7 @@ describe("getAreaStats tests", () => {
       },
       columnDefs: [],
       columnMetadata: [],
+      columnVisualisations: [],
       columnRoles: { nameColumns: [] },
       enrichments: [],
       geocodingConfig: {
diff --git a/tests/resources/percentages.csv b/tests/resources/percentages.csv
new file mode 100644
index 00000000..45cc5eca
--- /dev/null
+++ b/tests/resources/percentages.csv
@@ -0,0 +1,5 @@
+Code,Name,pct_share,turnout_pct,share,count,binary
+E14001071,Aylesbury,0.11,25.5,0.15,100,0
+E14001088,Bexhill,0.12,30.0,0.25,200,1
+E14001092,Birmingham,0.22,15.5,0.35,300,0
+E14001225,Enfield,0.13,20.0,0.45,400,1
diff --git a/tests/unit/server/jobs/importDataSource.test.ts b/tests/unit/server/jobs/importDataSource.test.ts
new file mode 100644
index 00000000..a1eded5c
--- /dev/null
+++ b/tests/unit/server/jobs/importDataSource.test.ts
@@ -0,0 +1,110 @@
+import { describe, expect, test } from "vitest";
+
+import { ColumnSemanticType } from "@/models/DataSource";
+import {
+  inferSemanticTypeFromRange,
+  isPercentageColumnName,
+} from "@/server/jobs/importDataSource";
+
+describe("isPercentageColumnName", () => {
+  test.each([
+    ["pct_share", true],
+    ["turnout_pct", true],
+    ["PCT_VOTES", true],
+    ["lab_percent", true],
+    ["Lab %", true],
+    ["Con %", true],
+    ["electorate", false],
+    ["turnout", false],
+    ["count", false],
+    ["Name", false],
+  ])("%s → %s", (name, expected) => {
+    expect(isPercentageColumnName(name)).toBe(expected);
+  });
+});
+
+describe("inferSemanticTypeFromRange", () => {
+  describe("name-based (nameBased=true)", () => {
+    test("max = null → null", () => {
+      expect(inferSemanticTypeFromRange(true, 0, null, false)).toBeNull();
+    });
+
+    test("max = 0 → Percentage01", () => {
+      expect(inferSemanticTypeFromRange(true, 0, 0, false)).toBe(
+        ColumnSemanticType.Percentage01,
+      );
+    });
+
+    test("max = 0.5 → Percentage01", () => {
+      expect(inferSemanticTypeFromRange(true, 0, 0.5, false)).toBe(
+        ColumnSemanticType.Percentage01,
+      );
+    });
+
+    test("max = 1 → Percentage01", () => {
+      expect(inferSemanticTypeFromRange(true, 0, 1, false)).toBe(
+        ColumnSemanticType.Percentage01,
+      );
+    });
+
+    test("max = 1.5 → Percentage0100", () => {
+      expect(inferSemanticTypeFromRange(true, 0, 1.5, false)).toBe(
+        ColumnSemanticType.Percentage0100,
+      );
+    });
+
+    test("max = 50 → Percentage0100", () => {
+      expect(inferSemanticTypeFromRange(true, 0, 50, false)).toBe(
+        ColumnSemanticType.Percentage0100,
+      );
+    });
+
+    test("max = 100 → Percentage0100", () => {
+      expect(inferSemanticTypeFromRange(true, 0, 100, false)).toBe(
+        ColumnSemanticType.Percentage0100,
+      );
+    });
+
+    test("max = 101 → null", () => {
+      expect(inferSemanticTypeFromRange(true, 0, 101, false)).toBeNull();
+    });
+  });
+
+  describe("value-range (nameBased=false)", () => {
+    test("min=0, max=0.5, hasDecimals=true → Percentage01", () => {
+      expect(inferSemanticTypeFromRange(false, 0, 0.5, true)).toBe(
+        ColumnSemanticType.Percentage01,
+      );
+    });
+
+    test("min=0, max=1, hasDecimals=true → Percentage01", () => {
+      expect(inferSemanticTypeFromRange(false, 0, 1, true)).toBe(
+        ColumnSemanticType.Percentage01,
+      );
+    });
+
+    test("min=0, max=1, hasDecimals=false → null (all 0s and 1s)", () => {
+      expect(inferSemanticTypeFromRange(false, 0, 1, false)).toBeNull();
+    });
+
+    test("min=0, max=0, hasDecimals=false → null (all zeros)", () => {
+      expect(inferSemanticTypeFromRange(false, 0, 0, false)).toBeNull();
+    });
+
+    test("min=null, max=0.5, hasDecimals=true → null", () => {
+      expect(inferSemanticTypeFromRange(false, null, 0.5, true)).toBeNull();
+    });
+
+    test("min=-0.5, max=0.5, hasDecimals=true → null (negative min)", () => {
+      expect(inferSemanticTypeFromRange(false, -0.5, 0.5, true)).toBeNull();
+    });
+
+    test("min=0, max=2, hasDecimals=true → null (max > 1)", () => {
+      expect(inferSemanticTypeFromRange(false, 0, 2, true)).toBeNull();
+    });
+
+    test("min=0, max=null → null", () => {
+      expect(inferSemanticTypeFromRange(false, 0, null, true)).toBeNull();
+    });
+  });
+});
diff --git a/tests/unit/server/repositories/DataRecord.test.ts b/tests/unit/server/repositories/DataRecord.test.ts
index 0dd2cacf..edd2b64a 100644
--- a/tests/unit/server/repositories/DataRecord.test.ts
+++ b/tests/unit/server/repositories/DataRecord.test.ts
@@ -38,6 +38,7 @@ describe("webhook route tests", () => {
       },
       columnDefs: [],
       columnMetadata: [],
+      columnVisualisations: [],
       columnRoles: { nameColumns: [] },
       enrichments: [],
       geocodingConfig: {
diff --git a/tests/unit/server/trpc/routers/dataRecord.test.ts b/tests/unit/server/trpc/routers/dataRecord.test.ts
index c1c691c2..38756862 100644
--- a/tests/unit/server/trpc/routers/dataRecord.test.ts
+++ b/tests/unit/server/trpc/routers/dataRecord.test.ts
@@ -35,6 +35,7 @@ describe("dataRecord router tests", () => {
       },
       columnDefs: [],
       columnMetadata: [],
+      columnVisualisations: [],
       columnRoles: { nameColumns: [] },
       enrichments: [],
       geocodingConfig: {
diff --git a/tests/unit/server/trpc/routers/dataSource.test.ts b/tests/unit/server/trpc/routers/dataSource.test.ts
index 5737c8f5..4379629f 100644
--- a/tests/unit/server/trpc/routers/dataSource.test.ts
+++ b/tests/unit/server/trpc/routers/dataSource.test.ts
@@ -46,6 +46,7 @@ describe("dataSource router tests", () => {
       },
       columnDefs: [],
       columnMetadata: [],
+      columnVisualisations: [],
       columnRoles: { nameColumns: [] },
       enrichments: [],
       geocodingConfig: { type: GeocodingType.None },
diff --git a/tests/unit/utils/superjson.test.ts b/tests/unit/utils/superjson.test.ts
index 253bd644..35cd0f29 100644
--- a/tests/unit/utils/superjson.test.ts
+++ b/tests/unit/utils/superjson.test.ts
@@ -23,6 +23,7 @@ test("server data source serializer", async () => {
     },
     columnDefs: [],
     columnMetadata: [],
+    columnVisualisations: [],
     columnRoles: { nameColumns: [] },
     enrichments: [],
     geocodingConfig: {

From cf8b74beed38069cb5460cc746b6d834cad9f9f3 Mon Sep 17 00:00:00 2001
From: Joaquim d'Souza <joaquimds@gmail.com>
Date: Mon, 23 Mar 2026 00:16:41 +0100
Subject: [PATCH 2/6] wip: column metadata and inspector config tabs on data
 sources page

---
 AGENTS.md                                     |   5 +
 ...umn_visualisations_to_inspector_columns.ts |  26 ++
 .../data-sources/[id]/DataSourceDashboard.tsx |  10 +-
 .../[id]/components/ColumnMetadataTable.tsx   | 144 ++++++++-
 .../components/ColumnVisualisationPanel.tsx   | 303 ++++++++++++++++++
 .../components/EditColumnMetadataModal.tsx    |   6 +-
 src/labels.ts                                 |   6 +
 src/models/DataSource.ts                      |  10 +-
 src/models/DataSourceOrganisationOverride.ts  |   4 +-
 src/models/MapView.ts                         |   4 +-
 src/server/commands/ensureOrganisationMap.ts  |   4 +-
 .../DataSourceOrganisationOverride.ts         |   8 +-
 src/server/services/database/schema.ts        |   2 +-
 src/server/trpc/routers/dataSource.ts         |  10 +-
 src/utils/resolveColumnMetadata.ts            |   3 +
 tests/feature/dataSourcesAPI.test.ts          |   6 +-
 tests/feature/enrichDataSource.test.ts        |   2 +-
 tests/feature/geojsonAPI.test.ts              |   2 +-
 tests/feature/importDataSource.test.ts        |  12 +-
 tests/feature/stats.test.ts                   |   2 +-
 .../server/repositories/DataRecord.test.ts    |   2 +-
 .../server/trpc/routers/dataRecord.test.ts    |   2 +-
 .../server/trpc/routers/dataSource.test.ts    |   2 +-
 .../unit/utils/resolveColumnMetadata.test.ts  |  41 +++
 tests/unit/utils/superjson.test.ts            |   2 +-
 25 files changed, 574 insertions(+), 44 deletions(-)
 create mode 100644 migrations/1774206346033_rename_column_visualisations_to_inspector_columns.ts
 create mode 100644 src/app/(private)/(dashboards)/data-sources/[id]/components/ColumnVisualisationPanel.tsx

diff --git a/AGENTS.md b/AGENTS.md
index a3b4bafa..2433382c 100644
--- a/AGENTS.md
+++ b/AGENTS.md
@@ -87,6 +87,11 @@ Use tRPC as the bridge between client components and server logic:
 
 - Do not use `!!x` to cast to `boolean`. Use `Boolean(x)`.
 
+## English Dialect
+
+- Use American spellings for code, British spellings for user-facing text.
+- Use British spellings in code if there is precedent (e.g. "visualisation") for consistency.
+
 ## Database
 
 ### Kysely ORM
diff --git a/migrations/1774206346033_rename_column_visualisations_to_inspector_columns.ts b/migrations/1774206346033_rename_column_visualisations_to_inspector_columns.ts
new file mode 100644
index 00000000..f59a533e
--- /dev/null
+++ b/migrations/1774206346033_rename_column_visualisations_to_inspector_columns.ts
@@ -0,0 +1,26 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import type { Kysely } from "kysely";
+
+export async function up(db: Kysely<any>): Promise<void> {
+  await db.schema
+    .alterTable("dataSource")
+    .renameColumn("columnVisualisations", "inspectorColumns")
+    .execute();
+
+  await db.schema
+    .alterTable("dataSourceOrganisationOverride")
+    .renameColumn("columnVisualisations", "inspectorColumns")
+    .execute();
+}
+
+export async function down(db: Kysely<any>): Promise<void> {
+  await db.schema
+    .alterTable("dataSourceOrganisationOverride")
+    .renameColumn("inspectorColumns", "columnVisualisations")
+    .execute();
+
+  await db.schema
+    .alterTable("dataSource")
+    .renameColumn("inspectorColumns", "columnVisualisations")
+    .execute();
+}
diff --git a/src/app/(private)/(dashboards)/data-sources/[id]/DataSourceDashboard.tsx b/src/app/(private)/(dashboards)/data-sources/[id]/DataSourceDashboard.tsx
index 94b3ae58..aed123a0 100644
--- a/src/app/(private)/(dashboards)/data-sources/[id]/DataSourceDashboard.tsx
+++ b/src/app/(private)/(dashboards)/data-sources/[id]/DataSourceDashboard.tsx
@@ -35,6 +35,7 @@ import { Button } from "@/shadcn/ui/button";
 import { Separator } from "@/shadcn/ui/separator";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/shadcn/ui/tabs";
 import ColumnMetadataTable from "./components/ColumnMetadataTable";
+import ColumnVisualisationPanel from "./components/ColumnVisualisationPanel";
 import ConfigurationForm from "./components/ConfigurationForm";
 import EnrichmentTable from "./components/EnrichmentTable";
 import type { RouterOutputs } from "@/services/trpc/react";
@@ -156,7 +157,7 @@ export function DataSourceDashboard({
   );
 
   return (
-    <div className="p-4 mx-auto max-w-5xl w-full">
+    <div className="flex flex-col h-full p-4 mx-auto max-w-5xl w-full">
       <div className="flex gap-12">
         <div className="grow">
           <Breadcrumb className="mb-4">
@@ -230,10 +231,11 @@ export function DataSourceDashboard({
         </Alert>
       )}
 
-      <Tabs defaultValue="settings" className="gap-6">
+      <Tabs defaultValue="settings" className="flex-1 min-h-0 gap-6">
         <TabsList>
           <TabsTrigger value="settings">Configuration</TabsTrigger>
           <TabsTrigger value="columns">Column metadata</TabsTrigger>
+          <TabsTrigger value="inspector">Map inspector</TabsTrigger>
           {showEnrichment && (
             <TabsTrigger value="enrichment">Enrichment</TabsTrigger>
           )}
@@ -278,6 +280,10 @@ export function DataSourceDashboard({
           <ColumnMetadataTable dataSource={dataSource} />
         </TabsContent>
 
+        <TabsContent value="inspector" className="flex flex-col min-h-0">
+          <ColumnVisualisationPanel dataSource={dataSource} />
+        </TabsContent>
+
         {showEnrichment && (
           <TabsContent value="enrichment">
             <EnrichmentTable dataSource={dataSource} />
diff --git a/src/app/(private)/(dashboards)/data-sources/[id]/components/ColumnMetadataTable.tsx b/src/app/(private)/(dashboards)/data-sources/[id]/components/ColumnMetadataTable.tsx
index be8904f4..5dcd84a6 100644
--- a/src/app/(private)/(dashboards)/data-sources/[id]/components/ColumnMetadataTable.tsx
+++ b/src/app/(private)/(dashboards)/data-sources/[id]/components/ColumnMetadataTable.tsx
@@ -164,6 +164,121 @@ function ColumnValueLabelsCell({
   );
 }
 
+function ColumnColorMappingsCell({
+  dataSourceId,
+  columnName,
+  columnType,
+  nullIsZero,
+  currentMappings,
+  onSave,
+}: {
+  dataSourceId: string;
+  columnName: string;
+  columnType: ColumnType;
+  nullIsZero: boolean | undefined;
+  currentMappings: Record<string, string>;
+  onSave: (mappings: Record<string, string>) => void;
+}) {
+  const [open, setOpen] = useState(false);
+  const [localMappings, setLocalMappings] =
+    useState<Record<string, string>>(currentMappings);
+  const debounceRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const trpc = useTRPC();
+
+  const { data: rawColumnValues } = useQuery(
+    trpc.dataSource.uniqueColumnValues.queryOptions(
+      { dataSourceId, column: columnName },
+      { enabled: open },
+    ),
+  );
+
+  const columnValues = useMemo(() => {
+    if (rawColumnValues == null) return rawColumnValues;
+    if (!nullIsZero || columnType !== ColumnType.Number) {
+      return rawColumnValues;
+    }
+    const blankValues = new Set(["", "null", "undefined"]);
+    const hasBlankOrZero =
+      rawColumnValues.some((v) => blankValues.has(v)) ||
+      rawColumnValues.includes("0");
+    if (!hasBlankOrZero) return rawColumnValues;
+    const filtered = rawColumnValues.filter((v) => !blankValues.has(v));
+    if (!filtered.includes("0")) {
+      filtered.push("0");
+    }
+    return filtered;
+  }, [rawColumnValues, nullIsZero, columnType]);
+
+  const sortedValues = useMemo(() => {
+    if (!columnValues) return columnValues;
+    return columnValues.toSorted((a, b) => {
+      if (columnType === ColumnType.Number) {
+        const numA = Number(a);
+        const numB = Number(b);
+        if (!isNaN(numA) && !isNaN(numB)) return numA - numB;
+      }
+      return a.localeCompare(b);
+    });
+  }, [columnValues, columnType]);
+
+  const handleMappingChange = useCallback(
+    (value: string, color: string) => {
+      const updated = { ...localMappings, [value]: color };
+      setLocalMappings(updated);
+      if (debounceRef.current) clearTimeout(debounceRef.current);
+      debounceRef.current = setTimeout(() => {
+        onSave(updated);
+      }, 300);
+    },
+    [localMappings, onSave],
+  );
+
+  const mappingCount = Object.keys(currentMappings).length;
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild>
+        <Button variant="outline" size="sm" className="text-xs">
+          {mappingCount > 0
+            ? `${mappingCount} colour${mappingCount !== 1 ? "s" : ""}`
+            : "Configure colours"}
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="w-56 p-0" align="start">
+        <div className="max-h-64 overflow-y-auto">
+          {sortedValues === undefined ? (
+            <p className="text-sm text-muted-foreground p-3">Loading values…</p>
+          ) : sortedValues === null ? (
+            <p className="text-sm text-muted-foreground p-3">
+              Too many unique values to configure colours.
+            </p>
+          ) : sortedValues.length === 0 ? (
+            <p className="text-sm text-muted-foreground p-3">
+              No values found.
+            </p>
+          ) : (
+            <div className="p-2 flex flex-col gap-1">
+              {sortedValues.map((value) => (
+                <div key={value} className="flex items-center gap-2">
+                  <Input
+                    type="color"
+                    value={localMappings[value] ?? "#000000"}
+                    onChange={(e) => handleMappingChange(value, e.target.value)}
+                    className="h-7 w-10 p-0.5 cursor-pointer shrink-0"
+                  />
+                  <span className="font-mono text-xs text-muted-foreground truncate">
+                    {value || "(blank)"}
+                  </span>
+                </div>
+              ))}
+            </div>
+          )}
+        </div>
+      </PopoverContent>
+    </Popover>
+  );
+}
+
 export default function ColumnMetadataTable({
   dataSource,
 }: {
@@ -178,6 +293,7 @@ export default function ColumnMetadataTable({
       valueLabels: existing.get(col.name)?.valueLabels ?? {},
       description: existing.get(col.name)?.description ?? "",
       semanticType: existing.get(col.name)?.semanticType,
+      colorMappings: existing.get(col.name)?.colorMappings,
     }));
   }, [dataSource.columnDefs, dataSource.columnMetadata]);
 
@@ -250,6 +366,17 @@ export default function ColumnMetadataTable({
     [metadata, save],
   );
 
+  const handleColorMappingsChange = useCallback(
+    (index: number, colorMappings: Record<string, string>) => {
+      const updated = metadata.map((m, i) =>
+        i === index ? { ...m, colorMappings } : m,
+      );
+      setMetadata(updated);
+      save(updated);
+    },
+    [metadata, save],
+  );
+
   const importStatus = dataSource.importInfo?.status;
   const importInProgress =
     importStatus === JobStatus.Running || importStatus === JobStatus.Pending;
@@ -270,8 +397,8 @@ export default function ColumnMetadataTable({
   return (
     <div className="space-y-4">
       <p className="text-sm">
-        Add descriptions to columns, set up numeric columns, and configure
-        display labels for specific values.
+        Add descriptions to columns, mark numeric columns as percentages, and
+        configure display labels for specific values.
       </p>
       <Table>
         <TableHeader>
@@ -280,6 +407,7 @@ export default function ColumnMetadataTable({
             <TableHead>Description</TableHead>
             <TableHead>Data type</TableHead>
             <TableHead>Value labels</TableHead>
+            <TableHead>Colour mappings</TableHead>
           </TableRow>
         </TableHeader>
         <TableBody>
@@ -345,6 +473,18 @@ export default function ColumnMetadataTable({
                     onSave={(labels) => handleValueLabelsChange(index, labels)}
                   />
                 </TableCell>
+                <TableCell className="align-top">
+                  <ColumnColorMappingsCell
+                    dataSourceId={dataSource.id}
+                    columnName={col.name}
+                    columnType={colDef?.type ?? ColumnType.Unknown}
+                    nullIsZero={dataSource.nullIsZero}
+                    currentMappings={col.colorMappings ?? {}}
+                    onSave={(mappings) =>
+                      handleColorMappingsChange(index, mappings)
+                    }
+                  />
+                </TableCell>
               </TableRow>
             );
           })}
diff --git a/src/app/(private)/(dashboards)/data-sources/[id]/components/ColumnVisualisationPanel.tsx b/src/app/(private)/(dashboards)/data-sources/[id]/components/ColumnVisualisationPanel.tsx
new file mode 100644
index 00000000..a0c2dcaa
--- /dev/null
+++ b/src/app/(private)/(dashboards)/data-sources/[id]/components/ColumnVisualisationPanel.tsx
@@ -0,0 +1,303 @@
+"use client";
+
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { Eye, EyeOff } from "lucide-react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { toast } from "sonner";
+import DataSourcePropertiesList from "@/app/(private)/map/[id]/components/inspector/DataSourcePropertiesList";
+import { ColumnDisplayFormatLabels } from "@/labels";
+import {
+  ColumnDisplayFormat,
+  type ColumnMetadata,
+  ColumnSemanticType,
+  ColumnType,
+  type InspectorColumn,
+  JobStatus,
+  percentageColumnDisplayFormats,
+} from "@/models/DataSource";
+import { useTRPC } from "@/services/trpc/react";
+import { Badge } from "@/shadcn/ui/badge";
+import { Button } from "@/shadcn/ui/button";
+import { Label } from "@/shadcn/ui/label";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/shadcn/ui/select";
+import type { RouterOutputs } from "@/services/trpc/react";
+
+type DataSource = NonNullable<RouterOutputs["dataSource"]["byId"]>;
+
+export default function ColumnVisualisationPanel({
+  dataSource,
+}: {
+  dataSource: DataSource;
+}) {
+  const importStatus = dataSource.importInfo?.status;
+  const importInProgress =
+    importStatus === JobStatus.Running || importStatus === JobStatus.Pending;
+  const hasBeenImported = dataSource.columnDefs.some(
+    (col) => col.type !== ColumnType.Unknown,
+  );
+
+  if (!hasBeenImported) {
+    return (
+      <p className="text-sm text-muted-foreground">
+        {importInProgress
+          ? "Column visualisations will be editable when your data source is fully imported."
+          : "Import your data source to configure the data inspector."}
+      </p>
+    );
+  }
+
+  return <ColumnVisualisationPanelInner dataSource={dataSource} />;
+}
+
+function ColumnVisualisationPanelInner({
+  dataSource,
+}: {
+  dataSource: DataSource;
+}) {
+  const initialInspectorColumns = useMemo(() => {
+    const existing = new Map(
+      (dataSource.inspectorColumns ?? []).map((v) => [v.name, v]),
+    );
+    return dataSource.columnDefs.map(
+      (col): InspectorColumn => existing.get(col.name) ?? { name: col.name },
+    );
+  }, [dataSource.columnDefs, dataSource.inspectorColumns]);
+
+  const [inspectorColumns, setInspectorColumns] = useState<InspectorColumn[]>(
+    initialInspectorColumns,
+  );
+  const [selectedColumnName, setSelectedColumnName] = useState<string | null>(
+    null,
+  );
+  const debounceRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  useEffect(() => {
+    if (debounceRef.current) clearTimeout(debounceRef.current);
+    setInspectorColumns(initialInspectorColumns);
+  }, [initialInspectorColumns]);
+
+  const client = useQueryClient();
+  const trpc = useTRPC();
+
+  const { mutate: updateDataSourceConfig } = useMutation(
+    trpc.dataSource.updateConfig.mutationOptions({
+      onSuccess: () => {
+        toast.success("Saved.");
+        client.invalidateQueries({
+          queryKey: trpc.dataSource.listReadable.queryKey(),
+        });
+      },
+      onError: (error) => {
+        toast.error(error.message || "Could not save column visualisations.");
+      },
+    }),
+  );
+
+  const save = useCallback(
+    (updated: InspectorColumn[]) => {
+      updateDataSourceConfig({
+        dataSourceId: dataSource.id,
+        inspectorColumns: updated,
+      });
+    },
+    [dataSource.id, updateDataSourceConfig],
+  );
+
+  const getVis = useCallback(
+    (name: string) => inspectorColumns.find((v) => v.name === name),
+    [inspectorColumns],
+  );
+
+  const isHidden = useCallback(
+    (name: string) => Boolean(getVis(name)?.hidden),
+    [getVis],
+  );
+
+  const updateVis = useCallback(
+    (name: string, partial: Partial<InspectorColumn>, debounce: boolean) => {
+      const updated = inspectorColumns.map((v) =>
+        v.name === name ? { ...v, ...partial } : v,
+      );
+      setInspectorColumns(updated);
+      if (debounce) {
+        if (debounceRef.current) clearTimeout(debounceRef.current);
+        debounceRef.current = setTimeout(() => save(updated), 500);
+      } else {
+        save(updated);
+      }
+    },
+    [inspectorColumns, save],
+  );
+
+  const shownColumnNames = useMemo(
+    () =>
+      dataSource.columnDefs
+        .map((col) => col.name)
+        .filter((name) => !isHidden(name)),
+    [dataSource.columnDefs, isHidden],
+  );
+
+  const { data: recordsData } = useQuery(
+    trpc.dataRecord.list.queryOptions({
+      dataSourceId: dataSource.id,
+      page: 0,
+    }),
+  );
+
+  const firstRecord = recordsData?.records[0];
+
+  return (
+    <div className="flex flex-col gap-4 flex-1 min-h-0">
+      <p className="text-sm">
+        Choose which data to display by default in the inspector panel of the
+        map.
+      </p>
+      <div className="grid grid-cols-3 gap-6 flex-1 min-h-0">
+        {/* Left panel: all columns */}
+        <div className="border rounded-md overflow-auto">
+          <div className="px-3 py-2 border-b bg-muted/40">
+            <p className="text-xs font-medium text-muted-foreground uppercase tracking-wide">
+              All columns
+            </p>
+          </div>
+          <ul className="divide-y">
+            {dataSource.columnDefs.map((col) => {
+              const hidden = isHidden(col.name);
+              return (
+                <li
+                  key={col.name}
+                  className={`flex items-center justify-between gap-2 px-3 py-2 cursor-pointer hover:bg-muted/40 transition-colors ${selectedColumnName === col.name ? "bg-muted" : ""} ${hidden ? "opacity-40" : ""}`}
+                  onClick={() =>
+                    setSelectedColumnName(
+                      selectedColumnName === col.name ? null : col.name,
+                    )
+                  }
+                >
+                  <span className="font-mono text-sm truncate">{col.name}</span>
+                  <Button
+                    variant="ghost"
+                    size="icon"
+                    className="h-6 w-6 shrink-0"
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      updateVis(col.name, { hidden: !hidden }, false);
+                    }}
+                  >
+                    {hidden ? (
+                      <EyeOff className="h-4 w-4" />
+                    ) : (
+                      <Eye className="h-4 w-4" />
+                    )}
+                  </Button>
+                </li>
+              );
+            })}
+          </ul>
+        </div>
+
+        {/* Middle panel: config for selected column */}
+        <div className="border rounded-md overflow-auto">
+          <div className="px-3 py-2 border-b bg-muted/40">
+            <p className="text-xs font-medium text-muted-foreground uppercase tracking-wide">
+              {selectedColumnName ? selectedColumnName : "Column config"}
+            </p>
+          </div>
+          {selectedColumnName ? (
+            <ColumnConfig
+              metadata={dataSource.columnMetadata.find(
+                (m) => m.name === selectedColumnName,
+              )}
+              inspectorColumn={
+                getVis(selectedColumnName) ?? { name: selectedColumnName }
+              }
+              onUpdate={(partial) =>
+                updateVis(selectedColumnName, partial, true)
+              }
+            />
+          ) : (
+            <p className="p-3 text-sm text-muted-foreground">
+              Select a column to configure.
+            </p>
+          )}
+        </div>
+
+        {/* Right panel: inspector preview */}
+        <div className="border rounded-md overflow-auto">
+          <div className="px-3 py-2 border-b bg-muted/40">
+            <p className="text-xs font-medium text-muted-foreground uppercase tracking-wide">
+              Inspector preview
+            </p>
+          </div>
+          <div className="p-3">
+            {firstRecord ? (
+              <DataSourcePropertiesList
+                dataSource={dataSource}
+                json={firstRecord.json}
+                onlyColumns={shownColumnNames}
+              />
+            ) : (
+              <p className="text-sm text-muted-foreground">No records found.</p>
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function ColumnConfig({
+  metadata,
+  inspectorColumn,
+  onUpdate,
+}: {
+  metadata: ColumnMetadata | undefined;
+  inspectorColumn: InspectorColumn;
+  onUpdate: (partial: Partial<InspectorColumn>) => void;
+}) {
+  const isPercentage =
+    metadata?.semanticType === ColumnSemanticType.Percentage01 ||
+    metadata?.semanticType === ColumnSemanticType.Percentage0100;
+
+  return (
+    <div className="p-3 flex flex-col gap-5">
+      <div className="flex flex-col gap-1.5">
+        <Label className="text-xs">Display format</Label>
+        {isPercentage ? (
+          <Select
+            value={inspectorColumn.displayFormat ?? ""}
+            onValueChange={(value) =>
+              onUpdate({
+                displayFormat: value
+                  ? (value as ColumnDisplayFormat)
+                  : undefined,
+              })
+            }
+          >
+            <SelectTrigger className="h-8 text-sm">
+              <SelectValue placeholder="Percentage" />
+            </SelectTrigger>
+            <SelectContent>
+              {percentageColumnDisplayFormats.map((fmt) => (
+                <SelectItem key={fmt} value={fmt}>
+                  {fmt === ColumnDisplayFormat.Auto
+                    ? "Percentage"
+                    : ColumnDisplayFormatLabels[fmt]}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        ) : (
+          <Badge variant="outline" className="text-sm font-normal self-start">
+            Text
+          </Badge>
+        )}
+      </div>
+    </div>
+  );
+}
diff --git a/src/app/(private)/map/[id]/components/EditColumnMetadataModal.tsx b/src/app/(private)/map/[id]/components/EditColumnMetadataModal.tsx
index 560da5b3..9ad038fd 100644
--- a/src/app/(private)/map/[id]/components/EditColumnMetadataModal.tsx
+++ b/src/app/(private)/map/[id]/components/EditColumnMetadataModal.tsx
@@ -279,7 +279,7 @@ export default function EditColumnMetadataModal() {
                         id: 0,
                         organisationId: organisationId ?? "",
                         dataSourceId: variables.dataSourceId,
-                        columnVisualisations: [],
+                        inspectorColumns: [],
                       }),
                       columnMetadata: variables.columnMetadata,
                     },
@@ -333,8 +333,8 @@ export default function EditColumnMetadataModal() {
         organisationId,
         dataSourceId: dataSource.id,
         columnMetadata: updated,
-        columnVisualisations:
-          dataSource.organisationOverride?.columnVisualisations ?? [],
+        inspectorColumns:
+          dataSource.organisationOverride?.inspectorColumns ?? [],
       });
     }
   }, [
diff --git a/src/labels.ts b/src/labels.ts
index df0dd097..36c68076 100644
--- a/src/labels.ts
+++ b/src/labels.ts
@@ -3,6 +3,7 @@
 import { FilterType } from "@/models/MapView";
 import type { AreaSetCode, AreaSetGroupCode } from "@/models/AreaSet";
 import type {
+  ColumnDisplayFormat,
   ColumnSemanticType,
   DataSourceRecordType,
   EnrichmentSourceType,
@@ -147,6 +148,11 @@ export const ColumnSemanticTypeLabels: Record<ColumnSemanticType, string> = {
   Percentage0100: "Percentage (0–100)",
 };
 
+export const ColumnDisplayFormatLabels: Record<ColumnDisplayFormat, string> = {
+  Auto: "Auto",
+  Bar: "Bar",
+};
+
 export const DataSourceRecordTypeLabels: Record<DataSourceRecordType, string> =
   {
     Members: "Members",
diff --git a/src/models/DataSource.ts b/src/models/DataSource.ts
index 8bafa069..2cab1fe9 100644
--- a/src/models/DataSource.ts
+++ b/src/models/DataSource.ts
@@ -234,16 +234,16 @@ export const columnMetadataSchema = z.object({
   description: z.string(),
   valueLabels: z.record(z.string(), z.string()),
   semanticType: z.nativeEnum(ColumnSemanticType).optional(),
+  colorMappings: z.record(z.string(), z.string()).optional(),
 });
 
-export const columnVisualisationSchema = z.object({
+export const inspectorColumnSchema = z.object({
   name: z.string(),
   displayFormat: z.nativeEnum(ColumnDisplayFormat).optional(),
-  colourMappings: z.record(z.string(), z.string()).optional(),
-  visible: z.boolean().optional(),
+  hidden: z.boolean().optional(),
 });
 
-export type ColumnVisualisation = z.infer<typeof columnVisualisationSchema>;
+export type InspectorColumn = z.infer<typeof inspectorColumnSchema>;
 
 export type ColumnMetadata = z.infer<typeof columnMetadataSchema>;
 
@@ -274,7 +274,7 @@ export const dataSourceSchema = z.object({
   config: dataSourceConfigSchema,
   columnDefs: z.array(columnDefSchema),
   columnMetadata: z.array(columnMetadataSchema),
-  columnVisualisations: z.array(columnVisualisationSchema),
+  inspectorColumns: z.array(inspectorColumnSchema),
   columnRoles: columnRolesSchema,
   enrichments: z.array(enrichmentSchema),
   geocodingConfig: geocodingConfigSchema,
diff --git a/src/models/DataSourceOrganisationOverride.ts b/src/models/DataSourceOrganisationOverride.ts
index 5414a6d6..862942e9 100644
--- a/src/models/DataSourceOrganisationOverride.ts
+++ b/src/models/DataSourceOrganisationOverride.ts
@@ -1,12 +1,12 @@
 import { z } from "zod";
-import { columnMetadataSchema, columnVisualisationSchema } from "./DataSource";
+import { columnMetadataSchema, inspectorColumnSchema } from "./DataSource";
 
 export const dataSourceOrganisationOverrideSchema = z.object({
   id: z.number(),
   organisationId: z.string(),
   dataSourceId: z.string(),
   columnMetadata: z.array(columnMetadataSchema),
-  columnVisualisations: z.array(columnVisualisationSchema),
+  inspectorColumns: z.array(inspectorColumnSchema),
 });
 
 export type DataSourceOrganisationOverride = z.infer<
diff --git a/src/models/MapView.ts b/src/models/MapView.ts
index 691afb64..2a399957 100644
--- a/src/models/MapView.ts
+++ b/src/models/MapView.ts
@@ -1,6 +1,6 @@
 import z from "zod";
 import { areaSetCode, areaSetGroupCode } from "./AreaSet";
-import { columnVisualisationSchema } from "./DataSource";
+import { inspectorColumnSchema } from "./DataSource";
 import { pointSchema } from "./shared";
 
 export enum FilterOperator {
@@ -168,7 +168,7 @@ export const inspectorDataSourceConfigSchema = z.object({
   dataSourceId: z.string(),
   name: z.string(),
   columns: z.array(z.string()),
-  columnVisualisations: z.array(columnVisualisationSchema).optional(),
+  inspectorColumns: z.array(inspectorColumnSchema).optional(),
 });
 
 export type InspectorDataSourceConfig = z.infer<
diff --git a/src/server/commands/ensureOrganisationMap.ts b/src/server/commands/ensureOrganisationMap.ts
index 273d34f3..b1d4b203 100644
--- a/src/server/commands/ensureOrganisationMap.ts
+++ b/src/server/commands/ensureOrganisationMap.ts
@@ -128,7 +128,7 @@ const ensureMembersDataSource = async (orgId: string): Promise<DataSource> => {
       },
       columnDefs: [],
       columnMetadata: [],
-      columnVisualisations: [],
+      inspectorColumns: [],
       public: false,
       recordType: DataSourceRecordType.Members,
     });
@@ -162,7 +162,7 @@ const ensureElectionResultsDataSource = async (): Promise<DataSource> => {
       },
       columnDefs: [],
       columnMetadata: [],
-      columnVisualisations: [],
+      inspectorColumns: [],
       public: true,
       recordType: DataSourceRecordType.Data,
     });
diff --git a/src/server/repositories/DataSourceOrganisationOverride.ts b/src/server/repositories/DataSourceOrganisationOverride.ts
index 3579322d..d11d6d9b 100644
--- a/src/server/repositories/DataSourceOrganisationOverride.ts
+++ b/src/server/repositories/DataSourceOrganisationOverride.ts
@@ -1,5 +1,5 @@
 import { db } from "@/server/services/database";
-import type { ColumnMetadata, ColumnVisualisation } from "@/models/DataSource";
+import type { ColumnMetadata, InspectorColumn } from "@/models/DataSource";
 
 export async function findDataSourceOrganisationOverride(
   organisationId: string,
@@ -31,7 +31,7 @@ export async function upsertDataSourceOrganisationOverride(
   organisationId: string,
   dataSourceId: string,
   columnMetadata: ColumnMetadata[],
-  columnVisualisations: ColumnVisualisation[],
+  inspectorColumns: InspectorColumn[],
 ) {
   return db
     .insertInto("dataSourceOrganisationOverride")
@@ -39,12 +39,12 @@ export async function upsertDataSourceOrganisationOverride(
       organisationId,
       dataSourceId,
       columnMetadata,
-      columnVisualisations,
+      inspectorColumns,
     })
     .onConflict((oc) =>
       oc
         .columns(["organisationId", "dataSourceId"])
-        .doUpdateSet({ columnMetadata, columnVisualisations }),
+        .doUpdateSet({ columnMetadata, inspectorColumns }),
     )
     .returningAll()
     .executeTakeFirstOrThrow();
diff --git a/src/server/services/database/schema.ts b/src/server/services/database/schema.ts
index 883d528c..60fdfe08 100644
--- a/src/server/services/database/schema.ts
+++ b/src/server/services/database/schema.ts
@@ -128,7 +128,7 @@ export interface DataSource {
   config: object; // jsonb, UNIQUE, NOT NULL, DEFAULT {}
   geocodingConfig: object; // jsonb, NOT NULL, DEFAULT {}
   columnDefs: unknown[]; // jsonb, NOT NULL, DEFAULT []
-  columnVisualisations: unknown[]; // jsonb, NOT NULL, DEFAULT []
+  inspectorColumns: unknown[]; // jsonb, NOT NULL, DEFAULT []
   columnRoles: object; // jsonb, NOT NULL, DEFAULT {} (renamed from columnsConfig)
   enrichments: unknown[]; // jsonb, NOT NULL, DEFAULT [] (renamed from enrichmentConfig)
   organisationId: string; // uuid, NOT NULL
diff --git a/src/server/trpc/routers/dataSource.ts b/src/server/trpc/routers/dataSource.ts
index d3a42481..ad7b5b77 100644
--- a/src/server/trpc/routers/dataSource.ts
+++ b/src/server/trpc/routers/dataSource.ts
@@ -8,8 +8,8 @@ import {
   EnrichmentSourceType,
   GeocodingType,
   columnMetadataSchema,
-  columnVisualisationSchema,
   dataSourceSchema,
+  inspectorColumnSchema,
 } from "@/models/DataSource";
 import { dataSourceViewSchema } from "@/models/MapView";
 import { getDataSourceAdaptor } from "@/server/adaptors";
@@ -352,7 +352,7 @@ export const dataSourceRouter = router({
         public: false,
         columnDefs,
         columnMetadata: [],
-        columnVisualisations: [],
+        inspectorColumns: [],
         columnRoles: { nameColumns: [] },
         geocodingConfig: { type: GeocodingType.None },
         enrichments: [],
@@ -394,7 +394,7 @@ export const dataSourceRouter = router({
         name: input.name,
         columnRoles: input.columnRoles,
         columnMetadata: input.columnMetadata,
-        columnVisualisations: input.columnVisualisations,
+        inspectorColumns: input.inspectorColumns,
         enrichments: input.enrichments,
         geocodingConfig: input.geocodingConfig,
         dateFormat: input.dateFormat,
@@ -599,7 +599,7 @@ export const dataSourceRouter = router({
       z.object({
         dataSourceId: z.string(),
         columnMetadata: z.array(columnMetadataSchema),
-        columnVisualisations: z.array(columnVisualisationSchema),
+        inspectorColumns: z.array(inspectorColumnSchema),
       }),
     )
     .mutation(async ({ ctx, input }) => {
@@ -607,7 +607,7 @@ export const dataSourceRouter = router({
         ctx.organisation.id,
         input.dataSourceId,
         input.columnMetadata,
-        input.columnVisualisations,
+        input.inspectorColumns,
       );
       return true;
     }),
diff --git a/src/utils/resolveColumnMetadata.ts b/src/utils/resolveColumnMetadata.ts
index 14abe0dc..16ab0394 100644
--- a/src/utils/resolveColumnMetadata.ts
+++ b/src/utils/resolveColumnMetadata.ts
@@ -26,6 +26,9 @@ export function resolveColumnMetadata(
         Object.keys(override.valueLabels).length > 0
           ? { ...base.valueLabels, ...override.valueLabels }
           : base.valueLabels,
+      colorMappings: override.colorMappings
+        ? { ...base.colorMappings, ...override.colorMappings }
+        : base.colorMappings,
     };
   });
 }
diff --git a/tests/feature/dataSourcesAPI.test.ts b/tests/feature/dataSourcesAPI.test.ts
index 0a5b8e4a..c37c8164 100644
--- a/tests/feature/dataSourcesAPI.test.ts
+++ b/tests/feature/dataSourcesAPI.test.ts
@@ -70,7 +70,7 @@ describe("Data sources REST API", () => {
       config: { type: DataSourceType.CSV, url: "https://example.com/org1.csv" },
       columnDefs: [{ name: "name", type: ColumnType.String }],
       columnMetadata: [],
-      columnVisualisations: [],
+      inspectorColumns: [],
       columnRoles: { nameColumns: ["name"] },
       geocodingConfig: { type: GeocodingType.None },
       enrichments: [],
@@ -86,7 +86,7 @@ describe("Data sources REST API", () => {
       config: { type: DataSourceType.CSV, url: "https://example.com/org2.csv" },
       columnDefs: [{ name: "name", type: ColumnType.String }],
       columnMetadata: [],
-      columnVisualisations: [],
+      inspectorColumns: [],
       columnRoles: { nameColumns: ["name"] },
       geocodingConfig: { type: GeocodingType.None },
       enrichments: [],
@@ -102,7 +102,7 @@ describe("Data sources REST API", () => {
       config: { type: DataSourceType.CSV, url: "https://example.com/org3.csv" },
       columnDefs: [{ name: "name", type: ColumnType.String }],
       columnMetadata: [],
-      columnVisualisations: [],
+      inspectorColumns: [],
       columnRoles: { nameColumns: ["name"] },
       geocodingConfig: { type: GeocodingType.None },
       enrichments: [],
diff --git a/tests/feature/enrichDataSource.test.ts b/tests/feature/enrichDataSource.test.ts
index b890b4c8..95fa4957 100644
--- a/tests/feature/enrichDataSource.test.ts
+++ b/tests/feature/enrichDataSource.test.ts
@@ -45,7 +45,7 @@ async function createGoogleSheetsDataSource(
     },
     columnDefs: [],
     columnMetadata: [],
-    columnVisualisations: [],
+    inspectorColumns: [],
     columnRoles: { nameColumns: [] },
     enrichments,
     geocodingConfig: {
diff --git a/tests/feature/geojsonAPI.test.ts b/tests/feature/geojsonAPI.test.ts
index 95ab8304..7713a5d7 100644
--- a/tests/feature/geojsonAPI.test.ts
+++ b/tests/feature/geojsonAPI.test.ts
@@ -69,7 +69,7 @@ describe("GeoJSON REST API", () => {
           { name: "address", type: ColumnType.String },
         ],
         columnMetadata: [],
-        columnVisualisations: [],
+        inspectorColumns: [],
         columnRoles: { nameColumns: ["name"] },
         geocodingConfig: { type: GeocodingType.None },
         enrichments: [],
diff --git a/tests/feature/importDataSource.test.ts b/tests/feature/importDataSource.test.ts
index 72d990c9..c5784c8a 100644
--- a/tests/feature/importDataSource.test.ts
+++ b/tests/feature/importDataSource.test.ts
@@ -41,7 +41,7 @@ describe("importDataSource tests", () => {
       },
       columnDefs: [],
       columnMetadata: [],
-      columnVisualisations: [],
+      inspectorColumns: [],
       columnRoles: { nameColumns: [] },
       enrichments: [],
       geocodingConfig: {
@@ -240,7 +240,7 @@ describe("importDataSource tests", () => {
       },
       columnDefs: [],
       columnMetadata: [],
-      columnVisualisations: [],
+      inspectorColumns: [],
       columnRoles: { nameColumns: [] },
       enrichments: [],
       geocodingConfig: {
@@ -331,7 +331,7 @@ describe("importDataSource tests", () => {
       },
       columnDefs: [],
       columnMetadata: [],
-      columnVisualisations: [],
+      inspectorColumns: [],
       columnRoles: { nameColumns: [] },
       enrichments: [],
       geocodingConfig: {
@@ -404,7 +404,7 @@ describe("importDataSource tests", () => {
       },
       columnDefs: [],
       columnMetadata: [],
-      columnVisualisations: [],
+      inspectorColumns: [],
       columnRoles: { nameColumns: [] },
       enrichments: [],
       geocodingConfig: {
@@ -473,7 +473,7 @@ describe("importDataSource tests", () => {
       },
       columnDefs: [],
       columnMetadata: [],
-      columnVisualisations: [],
+      inspectorColumns: [],
       columnRoles: { nameColumns: [] },
       enrichments: [],
       geocodingConfig: {
@@ -531,7 +531,7 @@ describe("importDataSource tests", () => {
           semanticType: ColumnSemanticType.Percentage0100,
         },
       ],
-      columnVisualisations: [],
+      inspectorColumns: [],
       columnRoles: { nameColumns: [] },
       enrichments: [],
       geocodingConfig: {
diff --git a/tests/feature/stats.test.ts b/tests/feature/stats.test.ts
index 53d74379..a95ddedd 100644
--- a/tests/feature/stats.test.ts
+++ b/tests/feature/stats.test.ts
@@ -38,7 +38,7 @@ describe("getAreaStats tests", () => {
       },
       columnDefs: [],
       columnMetadata: [],
-      columnVisualisations: [],
+      inspectorColumns: [],
       columnRoles: { nameColumns: [] },
       enrichments: [],
       geocodingConfig: {
diff --git a/tests/unit/server/repositories/DataRecord.test.ts b/tests/unit/server/repositories/DataRecord.test.ts
index edd2b64a..85bcb0b6 100644
--- a/tests/unit/server/repositories/DataRecord.test.ts
+++ b/tests/unit/server/repositories/DataRecord.test.ts
@@ -38,7 +38,7 @@ describe("webhook route tests", () => {
       },
       columnDefs: [],
       columnMetadata: [],
-      columnVisualisations: [],
+      inspectorColumns: [],
       columnRoles: { nameColumns: [] },
       enrichments: [],
       geocodingConfig: {
diff --git a/tests/unit/server/trpc/routers/dataRecord.test.ts b/tests/unit/server/trpc/routers/dataRecord.test.ts
index 38756862..48727a5f 100644
--- a/tests/unit/server/trpc/routers/dataRecord.test.ts
+++ b/tests/unit/server/trpc/routers/dataRecord.test.ts
@@ -35,7 +35,7 @@ describe("dataRecord router tests", () => {
       },
       columnDefs: [],
       columnMetadata: [],
-      columnVisualisations: [],
+      inspectorColumns: [],
       columnRoles: { nameColumns: [] },
       enrichments: [],
       geocodingConfig: {
diff --git a/tests/unit/server/trpc/routers/dataSource.test.ts b/tests/unit/server/trpc/routers/dataSource.test.ts
index 4379629f..44fd87ea 100644
--- a/tests/unit/server/trpc/routers/dataSource.test.ts
+++ b/tests/unit/server/trpc/routers/dataSource.test.ts
@@ -46,7 +46,7 @@ describe("dataSource router tests", () => {
       },
       columnDefs: [],
       columnMetadata: [],
-      columnVisualisations: [],
+      inspectorColumns: [],
       columnRoles: { nameColumns: [] },
       enrichments: [],
       geocodingConfig: { type: GeocodingType.None },
diff --git a/tests/unit/utils/resolveColumnMetadata.test.ts b/tests/unit/utils/resolveColumnMetadata.test.ts
index 119730b7..72a3a990 100644
--- a/tests/unit/utils/resolveColumnMetadata.test.ts
+++ b/tests/unit/utils/resolveColumnMetadata.test.ts
@@ -124,6 +124,47 @@ describe("resolveColumnMetadata", () => {
     ];
     expect(resolveColumnMetadata([], overrides)).toEqual([]);
   });
+
+  test("merges colorMappings from override on top of base", () => {
+    const baseWithColors: ColumnMetadata[] = [
+      {
+        name: "status",
+        description: "",
+        valueLabels: {},
+        colorMappings: { Active: "#00ff00", Inactive: "#ff0000" },
+      },
+    ];
+    const overrides: ColumnMetadata[] = [
+      {
+        name: "status",
+        description: "",
+        valueLabels: {},
+        colorMappings: { Inactive: "#aaaaaa", Pending: "#0000ff" },
+      },
+    ];
+    const result = resolveColumnMetadata(baseWithColors, overrides);
+    expect(result[0]?.colorMappings).toEqual({
+      Active: "#00ff00",
+      Inactive: "#aaaaaa",
+      Pending: "#0000ff",
+    });
+  });
+
+  test("keeps base colorMappings when override has none", () => {
+    const baseWithColors: ColumnMetadata[] = [
+      {
+        name: "status",
+        description: "",
+        valueLabels: {},
+        colorMappings: { Active: "#00ff00" },
+      },
+    ];
+    const overrides: ColumnMetadata[] = [
+      { name: "status", description: "New desc", valueLabels: {} },
+    ];
+    const result = resolveColumnMetadata(baseWithColors, overrides);
+    expect(result[0]?.colorMappings).toEqual({ Active: "#00ff00" });
+  });
 });
 
 describe("resolveColumnMetadataEntry", () => {
diff --git a/tests/unit/utils/superjson.test.ts b/tests/unit/utils/superjson.test.ts
index 35cd0f29..b81a20a8 100644
--- a/tests/unit/utils/superjson.test.ts
+++ b/tests/unit/utils/superjson.test.ts
@@ -23,7 +23,7 @@ test("server data source serializer", async () => {
     },
     columnDefs: [],
     columnMetadata: [],
-    columnVisualisations: [],
+    inspectorColumns: [],
     columnRoles: { nameColumns: [] },
     enrichments: [],
     geocodingConfig: {

From 468d95fbc6f6a8d0aaf309331b0c8f778db2c2b5 Mon Sep 17 00:00:00 2001
From: Joaquim d'Souza <joaquimds@gmail.com>
Date: Mon, 23 Mar 2026 00:40:14 +0100
Subject: [PATCH 3/6] docs

---
 .../data-sources/[id]/components/ColumnMetadataTable.tsx     | 2 +-
 src/models/DataSourceOrganisationOverride.ts                 | 5 +++++
 2 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/app/(private)/(dashboards)/data-sources/[id]/components/ColumnMetadataTable.tsx b/src/app/(private)/(dashboards)/data-sources/[id]/components/ColumnMetadataTable.tsx
index 5dcd84a6..e66606a8 100644
--- a/src/app/(private)/(dashboards)/data-sources/[id]/components/ColumnMetadataTable.tsx
+++ b/src/app/(private)/(dashboards)/data-sources/[id]/components/ColumnMetadataTable.tsx
@@ -398,7 +398,7 @@ export default function ColumnMetadataTable({
     <div className="space-y-4">
       <p className="text-sm">
         Add descriptions to columns, mark numeric columns as percentages, and
-        configure display labels for specific values.
+        configure display labels and colours for specific values.
       </p>
       <Table>
         <TableHeader>
diff --git a/src/models/DataSourceOrganisationOverride.ts b/src/models/DataSourceOrganisationOverride.ts
index 862942e9..0f5eddef 100644
--- a/src/models/DataSourceOrganisationOverride.ts
+++ b/src/models/DataSourceOrganisationOverride.ts
@@ -1,6 +1,11 @@
 import { z } from "zod";
 import { columnMetadataSchema, inspectorColumnSchema } from "./DataSource";
 
+/**
+ * Allows organisations to override column metadata and default
+ * inspector views for data sources they do not own.
+ */
+
 export const dataSourceOrganisationOverrideSchema = z.object({
   id: z.number(),
   organisationId: z.string(),

From 7eaa9cdff56f92a2e430e69c7aa5e392140efb4c Mon Sep 17 00:00:00 2001
From: Joaquim d'Souza <joaquimds@gmail.com>
Date: Mon, 23 Mar 2026 12:36:50 +0100
Subject: [PATCH 4/6] wip: refactor column metadata management UI

---
 AGENTS.md                                     |   9 +-
 ...2928000_rename_map_view_category_colors.ts |  19 +
 .../[id]/components/ColumnMetadataTable.tsx   | 195 ++----
 .../components/ColumnVisualisationPanel.tsx   |   2 +-
 .../map/[id]/atoms/editColumnMetadataAtom.ts  |   2 +-
 src/app/(private)/map/[id]/colors.ts          |  35 +-
 .../{index.tsx => BoundaryHoverInfo.tsx}      |   0
 .../Choropleth/{index.tsx => Choropleth.tsx}  |   0
 .../Choropleth/useChoroplethColors.ts         |  16 +-
 .../components/EditColumnMetadataModal.tsx    | 601 ------------------
 .../ColorMappingsSection.tsx                  | 201 ++++++
 .../EditColumnMetadataModal.tsx               | 295 +++++++++
 .../ValueLabelsSection.tsx                    |  30 +
 .../BoundaryConfigItem.tsx                    |   0
 .../BoundaryDataPanel.tsx                     |   0
 .../BoundaryMarkersList.tsx                   |   0
 .../ClusterMarkersList.tsx                    |   0
 .../DataSourcePropertiesList.tsx              |   0
 .../InspectorDataConfig.tsx                   |   0
 .../InspectorDataTab.tsx                      |   0
 .../InspectorMarkersTab.tsx                   |   0
 .../InspectorNotesTab.tsx                     |   0
 .../InspectorPanel.tsx                        |   0
 .../MarkerButton.tsx                          |   0
 .../MarkersLists.tsx                          |   0
 .../SimplePropertiesList.tsx                  |   0
 .../TurfMarkersList.tsx                       |   0
 .../UnderlineTabs.tsx                         |   0
 .../{inspector => InspectorPanel}/helpers.ts  |   0
 .../(private)/map/[id]/components/Legend.tsx  |  13 +-
 src/app/(private)/map/[id]/components/Map.tsx |   4 +-
 .../Markers/{index.tsx => Markers.tsx}        |   0
 .../[id]/components/PrivateMapControls.tsx    |   4 +-
 .../map/[id]/components/PrivateMapOverlay.tsx |   2 +-
 .../VisualisationPanel/VisualisationPanel.tsx |   2 +-
 src/app/(private)/map/[id]/constants.ts       |  55 +-
 .../[id]/hooks/useColumnMetadataMutations.ts  |  67 ++
 .../map/[id]/hooks/useDisplayAreaStats.ts     |  35 +-
 .../(private)/map/[id]/hooks/useInspector.ts  |   2 +-
 src/app/api/login/route.ts                    |   2 +-
 src/components/ColorMappingsEditor.tsx        | 132 ++++
 src/components/ValueLabelsEditor.tsx          |  81 +++
 src/constants/colors.ts                       |  52 ++
 src/{constants.ts => constants/index.ts}      |   2 +
 src/hooks/useColumnValues.ts                  |  69 ++
 src/models/MapView.ts                         |   2 +-
 src/server/{utils => services}/ratelimit.ts   |   0
 src/server/trpc/index.ts                      |   2 +-
 src/server/trpc/routers/auth.ts               |   2 +-
 src/server/trpc/routers/dataSource.ts         |  66 ++
 src/utils/colors.ts                           |  11 +
 tests/unit/app/api/login/route.test.ts        |   4 +-
 tests/unit/server/trpc/routers/auth.test.ts   |   4 +-
 53 files changed, 1172 insertions(+), 846 deletions(-)
 create mode 100644 migrations/1774222928000_rename_map_view_category_colors.ts
 rename src/app/(private)/map/[id]/components/BoundaryHoverInfo/{index.tsx => BoundaryHoverInfo.tsx} (100%)
 rename src/app/(private)/map/[id]/components/Choropleth/{index.tsx => Choropleth.tsx} (100%)
 delete mode 100644 src/app/(private)/map/[id]/components/EditColumnMetadataModal.tsx
 create mode 100644 src/app/(private)/map/[id]/components/EditColumnMetadataModal/ColorMappingsSection.tsx
 create mode 100644 src/app/(private)/map/[id]/components/EditColumnMetadataModal/EditColumnMetadataModal.tsx
 create mode 100644 src/app/(private)/map/[id]/components/EditColumnMetadataModal/ValueLabelsSection.tsx
 rename src/app/(private)/map/[id]/components/{inspector => InspectorPanel}/BoundaryConfigItem.tsx (100%)
 rename src/app/(private)/map/[id]/components/{inspector => InspectorPanel}/BoundaryDataPanel.tsx (100%)
 rename src/app/(private)/map/[id]/components/{inspector => InspectorPanel}/BoundaryMarkersList.tsx (100%)
 rename src/app/(private)/map/[id]/components/{inspector => InspectorPanel}/ClusterMarkersList.tsx (100%)
 rename src/app/(private)/map/[id]/components/{inspector => InspectorPanel}/DataSourcePropertiesList.tsx (100%)
 rename src/app/(private)/map/[id]/components/{inspector => InspectorPanel}/InspectorDataConfig.tsx (100%)
 rename src/app/(private)/map/[id]/components/{inspector => InspectorPanel}/InspectorDataTab.tsx (100%)
 rename src/app/(private)/map/[id]/components/{inspector => InspectorPanel}/InspectorMarkersTab.tsx (100%)
 rename src/app/(private)/map/[id]/components/{inspector => InspectorPanel}/InspectorNotesTab.tsx (100%)
 rename src/app/(private)/map/[id]/components/{inspector => InspectorPanel}/InspectorPanel.tsx (100%)
 rename src/app/(private)/map/[id]/components/{inspector => InspectorPanel}/MarkerButton.tsx (100%)
 rename src/app/(private)/map/[id]/components/{inspector => InspectorPanel}/MarkersLists.tsx (100%)
 rename src/app/(private)/map/[id]/components/{inspector => InspectorPanel}/SimplePropertiesList.tsx (100%)
 rename src/app/(private)/map/[id]/components/{inspector => InspectorPanel}/TurfMarkersList.tsx (100%)
 rename src/app/(private)/map/[id]/components/{inspector => InspectorPanel}/UnderlineTabs.tsx (100%)
 rename src/app/(private)/map/[id]/components/{inspector => InspectorPanel}/helpers.ts (100%)
 rename src/app/(private)/map/[id]/components/Markers/{index.tsx => Markers.tsx} (100%)
 create mode 100644 src/app/(private)/map/[id]/hooks/useColumnMetadataMutations.ts
 create mode 100644 src/components/ColorMappingsEditor.tsx
 create mode 100644 src/components/ValueLabelsEditor.tsx
 create mode 100644 src/constants/colors.ts
 rename src/{constants.ts => constants/index.ts} (98%)
 create mode 100644 src/hooks/useColumnValues.ts
 rename src/server/{utils => services}/ratelimit.ts (100%)
 create mode 100644 src/utils/colors.ts

diff --git a/AGENTS.md b/AGENTS.md
index 2433382c..ca3fb0cd 100644
--- a/AGENTS.md
+++ b/AGENTS.md
@@ -86,10 +86,17 @@ Use tRPC as the bridge between client components and server logic:
 ## Code Style
 
 - Do not use `!!x` to cast to `boolean`. Use `Boolean(x)`.
+- Functions with more than 2 parameters should use the destructured input pattern,
+  e.g. `const sum = ({ a, b, c }: { a: int, b: int, c: int }) => a + b + c`
+- Constants should either go in a `constants/` directory or a `constants.ts` file.
+- Utils (pure functions) should go in a `utils/` directory ot a `utils.ts` file.
+- Functions with side effects, or async functions, should go in a `services/` directory, or somewhere more specific.
+- Complex components that require their own directory should be in a file with the same name as the directory,
+  e.g. `Choropleth/Choropleth.tsx`.
 
 ## English Dialect
 
-- Use American spellings for code, British spellings for user-facing text.
+- Use American spellings for code, British spellings for user-facing text, comments, and documentation.
 - Use British spellings in code if there is precedent (e.g. "visualisation") for consistency.
 
 ## Database
diff --git a/migrations/1774222928000_rename_map_view_category_colors.ts b/migrations/1774222928000_rename_map_view_category_colors.ts
new file mode 100644
index 00000000..6fefed5c
--- /dev/null
+++ b/migrations/1774222928000_rename_map_view_category_colors.ts
@@ -0,0 +1,19 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { sql } from "kysely";
+import type { Kysely } from "kysely";
+
+export async function up(db: Kysely<any>): Promise<void> {
+  await sql`
+    UPDATE "mapView"
+    SET config = jsonb_set(config - 'categoryColors', '{colorMappings}', config->'categoryColors')
+    WHERE config ? 'categoryColors'
+  `.execute(db);
+}
+
+export async function down(db: Kysely<any>): Promise<void> {
+  await sql`
+    UPDATE "mapView"
+    SET config = jsonb_set(config - 'colorMappings', '{categoryColors}', config->'colorMappings')
+    WHERE config ? 'colorMappings'
+  `.execute(db);
+}
diff --git a/src/app/(private)/(dashboards)/data-sources/[id]/components/ColumnMetadataTable.tsx b/src/app/(private)/(dashboards)/data-sources/[id]/components/ColumnMetadataTable.tsx
index e66606a8..9a208a85 100644
--- a/src/app/(private)/(dashboards)/data-sources/[id]/components/ColumnMetadataTable.tsx
+++ b/src/app/(private)/(dashboards)/data-sources/[id]/components/ColumnMetadataTable.tsx
@@ -1,8 +1,11 @@
 "use client";
 
-import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { useMutation, useQueryClient } from "@tanstack/react-query";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { toast } from "sonner";
+import ColorMappingsEditor from "@/components/ColorMappingsEditor";
+import ValueLabelsEditor from "@/components/ValueLabelsEditor";
+import { useColumnValues } from "@/hooks/useColumnValues";
 import { ColumnSemanticTypeLabels } from "@/labels";
 import {
   type ColumnMetadata,
@@ -14,7 +17,6 @@ import {
 import { useTRPC } from "@/services/trpc/react";
 import { Badge } from "@/shadcn/ui/badge";
 import { Button } from "@/shadcn/ui/button";
-import { Input } from "@/shadcn/ui/input";
 import { Popover, PopoverContent, PopoverTrigger } from "@/shadcn/ui/popover";
 import {
   Select,
@@ -55,43 +57,18 @@ function ColumnValueLabelsCell({
   const [localLabels, setLocalLabels] =
     useState<Record<string, string>>(currentLabels);
   const debounceRef = useRef<ReturnType<typeof setTimeout> | null>(null);
-  const trpc = useTRPC();
-
-  const { data: rawColumnValues } = useQuery(
-    trpc.dataSource.uniqueColumnValues.queryOptions(
-      { dataSourceId, column: columnName },
-      { enabled: open },
-    ),
-  );
 
-  const columnValues = useMemo(() => {
-    if (rawColumnValues == null) return rawColumnValues;
-    if (!nullIsZero || columnType !== ColumnType.Number) {
-      return rawColumnValues;
-    }
-    const blankValues = new Set(["", "null", "undefined"]);
-    const hasBlankOrZero =
-      rawColumnValues.some((v) => blankValues.has(v)) ||
-      rawColumnValues.includes("0");
-    if (!hasBlankOrZero) return rawColumnValues;
-    const filtered = rawColumnValues.filter((v) => !blankValues.has(v));
-    if (!filtered.includes("0")) {
-      filtered.push("0");
-    }
-    return filtered;
-  }, [rawColumnValues, nullIsZero, columnType]);
+  useEffect(() => {
+    if (!open) setLocalLabels(currentLabels);
+  }, [currentLabels, open]);
 
-  const sortedValues = useMemo(() => {
-    if (!columnValues) return columnValues;
-    return columnValues.toSorted((a, b) => {
-      if (columnType === ColumnType.Number) {
-        const numA = Number(a);
-        const numB = Number(b);
-        if (!isNaN(numA) && !isNaN(numB)) return numA - numB;
-      }
-      return a.localeCompare(b);
-    });
-  }, [columnValues, columnType]);
+  const sortedValues = useColumnValues({
+    dataSourceId,
+    column: columnName,
+    columnType,
+    nullIsZero,
+    enabled: open,
+  });
 
   const handleLabelChange = useCallback(
     (value: string, label: string) => {
@@ -119,46 +96,12 @@ function ColumnValueLabelsCell({
         </Button>
       </PopoverTrigger>
       <PopoverContent className="w-72 p-0" align="start">
-        <div className="max-h-64 overflow-y-auto">
-          {sortedValues === undefined ? (
-            <p className="text-sm text-muted-foreground p-3">Loading values…</p>
-          ) : sortedValues === null ? (
-            <p className="text-sm text-muted-foreground p-3">
-              Too many unique values to configure labels.
-            </p>
-          ) : sortedValues.length === 0 ? (
-            <p className="text-sm text-muted-foreground p-3">
-              No values found.
-            </p>
-          ) : (
-            <Table>
-              <TableHeader>
-                <TableRow>
-                  <TableHead className="w-1/2 text-xs">Value</TableHead>
-                  <TableHead className="w-1/2 text-xs">Label</TableHead>
-                </TableRow>
-              </TableHeader>
-              <TableBody>
-                {sortedValues.map((value) => (
-                  <TableRow key={value}>
-                    <TableCell className="font-mono text-xs text-muted-foreground whitespace-normal py-1.5">
-                      {value || "(blank)"}
-                    </TableCell>
-                    <TableCell className="py-1.5">
-                      <Input
-                        value={localLabels[value] ?? ""}
-                        onChange={(e) =>
-                          handleLabelChange(value, e.target.value)
-                        }
-                        className="h-7 text-xs"
-                      />
-                    </TableCell>
-                  </TableRow>
-                ))}
-              </TableBody>
-            </Table>
-          )}
-        </div>
+        <ValueLabelsEditor
+          values={sortedValues}
+          columnType={columnType}
+          valueLabels={localLabels}
+          onChange={handleLabelChange}
+        />
       </PopoverContent>
     </Popover>
   );
@@ -183,45 +126,20 @@ function ColumnColorMappingsCell({
   const [localMappings, setLocalMappings] =
     useState<Record<string, string>>(currentMappings);
   const debounceRef = useRef<ReturnType<typeof setTimeout> | null>(null);
-  const trpc = useTRPC();
 
-  const { data: rawColumnValues } = useQuery(
-    trpc.dataSource.uniqueColumnValues.queryOptions(
-      { dataSourceId, column: columnName },
-      { enabled: open },
-    ),
-  );
-
-  const columnValues = useMemo(() => {
-    if (rawColumnValues == null) return rawColumnValues;
-    if (!nullIsZero || columnType !== ColumnType.Number) {
-      return rawColumnValues;
-    }
-    const blankValues = new Set(["", "null", "undefined"]);
-    const hasBlankOrZero =
-      rawColumnValues.some((v) => blankValues.has(v)) ||
-      rawColumnValues.includes("0");
-    if (!hasBlankOrZero) return rawColumnValues;
-    const filtered = rawColumnValues.filter((v) => !blankValues.has(v));
-    if (!filtered.includes("0")) {
-      filtered.push("0");
-    }
-    return filtered;
-  }, [rawColumnValues, nullIsZero, columnType]);
+  useEffect(() => {
+    if (!open) setLocalMappings(currentMappings);
+  }, [currentMappings, open]);
 
-  const sortedValues = useMemo(() => {
-    if (!columnValues) return columnValues;
-    return columnValues.toSorted((a, b) => {
-      if (columnType === ColumnType.Number) {
-        const numA = Number(a);
-        const numB = Number(b);
-        if (!isNaN(numA) && !isNaN(numB)) return numA - numB;
-      }
-      return a.localeCompare(b);
-    });
-  }, [columnValues, columnType]);
+  const sortedValues = useColumnValues({
+    dataSourceId,
+    column: columnName,
+    columnType,
+    nullIsZero,
+    enabled: open,
+  });
 
-  const handleMappingChange = useCallback(
+  const handleChange = useCallback(
     (value: string, color: string) => {
       const updated = { ...localMappings, [value]: color };
       setLocalMappings(updated);
@@ -233,6 +151,23 @@ function ColumnColorMappingsCell({
     [localMappings, onSave],
   );
 
+  const handleReset = useCallback(
+    (value: string) => {
+      if (debounceRef.current) clearTimeout(debounceRef.current);
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      const { [value]: _removed, ...rest } = localMappings;
+      setLocalMappings(rest);
+      onSave(rest);
+    },
+    [localMappings, onSave],
+  );
+
+  const handleResetAll = useCallback(() => {
+    if (debounceRef.current) clearTimeout(debounceRef.current);
+    setLocalMappings({});
+    onSave({});
+  }, [onSave]);
+
   const mappingCount = Object.keys(currentMappings).length;
 
   return (
@@ -246,33 +181,13 @@ function ColumnColorMappingsCell({
       </PopoverTrigger>
       <PopoverContent className="w-56 p-0" align="start">
         <div className="max-h-64 overflow-y-auto">
-          {sortedValues === undefined ? (
-            <p className="text-sm text-muted-foreground p-3">Loading values…</p>
-          ) : sortedValues === null ? (
-            <p className="text-sm text-muted-foreground p-3">
-              Too many unique values to configure colours.
-            </p>
-          ) : sortedValues.length === 0 ? (
-            <p className="text-sm text-muted-foreground p-3">
-              No values found.
-            </p>
-          ) : (
-            <div className="p-2 flex flex-col gap-1">
-              {sortedValues.map((value) => (
-                <div key={value} className="flex items-center gap-2">
-                  <Input
-                    type="color"
-                    value={localMappings[value] ?? "#000000"}
-                    onChange={(e) => handleMappingChange(value, e.target.value)}
-                    className="h-7 w-10 p-0.5 cursor-pointer shrink-0"
-                  />
-                  <span className="font-mono text-xs text-muted-foreground truncate">
-                    {value || "(blank)"}
-                  </span>
-                </div>
-              ))}
-            </div>
-          )}
+          <ColorMappingsEditor
+            values={sortedValues}
+            colorMappings={localMappings}
+            onChange={handleChange}
+            onReset={handleReset}
+            onResetAll={handleResetAll}
+          />
         </div>
       </PopoverContent>
     </Popover>
diff --git a/src/app/(private)/(dashboards)/data-sources/[id]/components/ColumnVisualisationPanel.tsx b/src/app/(private)/(dashboards)/data-sources/[id]/components/ColumnVisualisationPanel.tsx
index a0c2dcaa..41aaca16 100644
--- a/src/app/(private)/(dashboards)/data-sources/[id]/components/ColumnVisualisationPanel.tsx
+++ b/src/app/(private)/(dashboards)/data-sources/[id]/components/ColumnVisualisationPanel.tsx
@@ -4,7 +4,7 @@ import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import { Eye, EyeOff } from "lucide-react";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { toast } from "sonner";
-import DataSourcePropertiesList from "@/app/(private)/map/[id]/components/inspector/DataSourcePropertiesList";
+import DataSourcePropertiesList from "@/app/(private)/map/[id]/components/InspectorPanel/DataSourcePropertiesList";
 import { ColumnDisplayFormatLabels } from "@/labels";
 import {
   ColumnDisplayFormat,
diff --git a/src/app/(private)/map/[id]/atoms/editColumnMetadataAtom.ts b/src/app/(private)/map/[id]/atoms/editColumnMetadataAtom.ts
index 5a44dc66..16048ba7 100644
--- a/src/app/(private)/map/[id]/atoms/editColumnMetadataAtom.ts
+++ b/src/app/(private)/map/[id]/atoms/editColumnMetadataAtom.ts
@@ -3,7 +3,7 @@ import { atom } from "jotai";
 export interface EditColumnMetadataFields {
   description?: boolean;
   valueLabels?: boolean;
-  categoryColors?: boolean;
+  colorMappings?: boolean;
 }
 
 export const editColumnMetadataAtom = atom<{
diff --git a/src/app/(private)/map/[id]/colors.ts b/src/app/(private)/map/[id]/colors.ts
index 016c3ae8..d0f9b24d 100644
--- a/src/app/(private)/map/[id]/colors.ts
+++ b/src/app/(private)/map/[id]/colors.ts
@@ -1,4 +1,4 @@
-import { scaleLinear, scaleOrdinal, scaleSequential } from "d3-scale";
+import { scaleLinear, scaleSequential } from "d3-scale";
 import {
   interpolateBlues,
   interpolateBrBG,
@@ -7,7 +7,6 @@ import {
   interpolateRdBu,
   interpolateRdYlGn,
   interpolateViridis,
-  schemeCategory10,
 } from "d3-scale-chromatic";
 import { useMemo } from "react";
 import { DEFAULT_CUSTOM_COLOR } from "@/constants";
@@ -18,8 +17,9 @@ import {
   ColorScheme,
   type SteppedColorStep,
 } from "@/models/MapView";
+import { getCategoryColorScale } from "@/utils/colors";
 import { getChoroplethDataKey } from "./components/Choropleth/utils";
-import { DEFAULT_FILL_COLOR, PARTY_COLORS } from "./constants";
+import { DEFAULT_FILL_COLOR } from "./constants";
 import type { CombinedAreaStats } from "./data";
 import type { MapViewConfig } from "@/models/MapView";
 import type { ScaleSequential } from "d3-scale";
@@ -149,25 +149,30 @@ export const getInterpolator = (
 export const useColorScheme = ({
   areaStats,
   viewConfig,
+  resolvedColorMappings,
 }: {
   areaStats: CombinedAreaStats | null;
   viewConfig: MapViewConfig;
+  resolvedColorMappings?: Record<string, string>;
 }): CategoricColorScheme | NumericColorScheme | null => {
   // useMemo to cache calculated scales
   return useMemo(() => {
     return getColorScheme({
       areaStats,
       viewConfig,
+      resolvedColorMappings,
     });
-  }, [areaStats, viewConfig]);
+  }, [areaStats, viewConfig, resolvedColorMappings]);
 };
 
 const getColorScheme = ({
   areaStats,
   viewConfig,
+  resolvedColorMappings,
 }: {
   areaStats: CombinedAreaStats | null;
   viewConfig: MapViewConfig;
+  resolvedColorMappings?: Record<string, string>;
 }): CategoricColorScheme | NumericColorScheme | null => {
   if (!areaStats || !areaStats.stats.length) {
     return null;
@@ -188,6 +193,7 @@ const getColorScheme = ({
       viewConfig,
       areaStats.dataSourceId,
       areaStats.primary?.column,
+      resolvedColorMappings,
     );
     return {
       colorSchemeType: "categoric",
@@ -246,20 +252,16 @@ export const makeColorMap = (
   viewConfig: MapViewConfig,
   dataSourceId: string | undefined,
   column: string | undefined,
+  resolvedColorMappings?: Record<string, string>,
 ) => {
   const colorMap: Record<string, string> = {};
-  const colorScale = scaleOrdinal(schemeCategory10).domain(values);
+  const defaultColor = getCategoryColorScale(values);
   values.forEach((v) => {
-    const categoryColorsKey = getCategoryColorsKey(dataSourceId, column, v);
-    // Use custom color if provided, otherwise use default
-    // Try the color set specifically for this column, if exists
-    // Fallback to the color set for this value
-    // Fallback again to D3 color generation
-    const defaultColor = PARTY_COLORS[v.toLowerCase()] ?? colorScale(v);
+    const mapViewKey = getCategoryColorsKey(dataSourceId, column, v);
     colorMap[v] =
-      viewConfig.categoryColors?.[categoryColorsKey] ??
-      viewConfig.categoryColors?.[v] ??
-      defaultColor;
+      viewConfig.colorMappings?.[mapViewKey] ??
+      resolvedColorMappings?.[v] ??
+      defaultColor(v);
   });
   return colorMap;
 };
@@ -268,10 +270,12 @@ export const useFillColor = ({
   areaStats,
   viewConfig,
   selectedBivariateBucket,
+  resolvedColorMappings,
 }: {
   areaStats: CombinedAreaStats | null;
   viewConfig: MapViewConfig;
   selectedBivariateBucket: string | null;
+  resolvedColorMappings?: Record<string, string>;
 }): DataDrivenPropertyValueSpecification<string> => {
   // useMemo to cache calculated fillColor
   const fillColor = useMemo(() => {
@@ -283,6 +287,7 @@ export const useFillColor = ({
     const colorScheme = getColorScheme({
       areaStats,
       viewConfig,
+      resolvedColorMappings,
     });
     if (!colorScheme) {
       return DEFAULT_FILL_COLOR;
@@ -352,7 +357,7 @@ export const useFillColor = ({
         : ["feature-state", "value"],
       ...interpolateColorStops,
     ];
-  }, [areaStats, viewConfig, selectedBivariateBucket]);
+  }, [areaStats, viewConfig, selectedBivariateBucket, resolvedColorMappings]);
 
   return [
     "case",
diff --git a/src/app/(private)/map/[id]/components/BoundaryHoverInfo/index.tsx b/src/app/(private)/map/[id]/components/BoundaryHoverInfo/BoundaryHoverInfo.tsx
similarity index 100%
rename from src/app/(private)/map/[id]/components/BoundaryHoverInfo/index.tsx
rename to src/app/(private)/map/[id]/components/BoundaryHoverInfo/BoundaryHoverInfo.tsx
diff --git a/src/app/(private)/map/[id]/components/Choropleth/index.tsx b/src/app/(private)/map/[id]/components/Choropleth/Choropleth.tsx
similarity index 100%
rename from src/app/(private)/map/[id]/components/Choropleth/index.tsx
rename to src/app/(private)/map/[id]/components/Choropleth/Choropleth.tsx
diff --git a/src/app/(private)/map/[id]/components/Choropleth/useChoroplethColors.ts b/src/app/(private)/map/[id]/components/Choropleth/useChoroplethColors.ts
index ed87198e..879da697 100644
--- a/src/app/(private)/map/[id]/components/Choropleth/useChoroplethColors.ts
+++ b/src/app/(private)/map/[id]/components/Choropleth/useChoroplethColors.ts
@@ -1,12 +1,14 @@
-import { useEffect, useRef } from "react";
+import { useEffect, useMemo, useRef } from "react";
 import { useFillColor } from "@/app/(private)/map/[id]/colors";
 import { useAreaStats } from "@/app/(private)/map/[id]/data";
 import { useChoropleth } from "@/app/(private)/map/[id]/hooks/useChoropleth";
+import { useChoroplethDataSource } from "@/app/(private)/map/[id]/hooks/useDataSources";
 import {
   useLastLoadedSourceId,
   useMapRef,
 } from "@/app/(private)/map/[id]/hooks/useMapCore";
 import { useMapViews } from "@/app/(private)/map/[id]/hooks/useMapViews";
+import { resolveColumnMetadata } from "@/utils/resolveColumnMetadata";
 
 export function useChoroplethFillColor() {
   const { selectedBivariateBucket } = useChoropleth();
@@ -14,12 +16,24 @@ export function useChoroplethFillColor() {
   const { viewConfig } = useMapViews();
   const areaStatsQuery = useAreaStats();
   const areaStats = areaStatsQuery.data;
+  const dataSource = useChoroplethDataSource();
+  const primaryColumn = areaStats?.primary?.column;
+
+  const resolvedColorMappings = useMemo(() => {
+    if (!dataSource || !primaryColumn) return undefined;
+    const resolved = resolveColumnMetadata(
+      dataSource.columnMetadata,
+      dataSource.organisationOverride?.columnMetadata,
+    );
+    return resolved.find((m) => m.name === primaryColumn)?.colorMappings;
+  }, [dataSource, primaryColumn]);
 
   // Get fill color
   const fillColor = useFillColor({
     areaStats,
     viewConfig,
     selectedBivariateBucket,
+    resolvedColorMappings,
   });
 
   return fillColor;
diff --git a/src/app/(private)/map/[id]/components/EditColumnMetadataModal.tsx b/src/app/(private)/map/[id]/components/EditColumnMetadataModal.tsx
deleted file mode 100644
index 9ad038fd..00000000
--- a/src/app/(private)/map/[id]/components/EditColumnMetadataModal.tsx
+++ /dev/null
@@ -1,601 +0,0 @@
-"use client";
-
-import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
-import { X } from "lucide-react";
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { toast } from "sonner";
-import {
-  getCategoryColorsKey,
-  makeColorMap,
-} from "@/app/(private)/map/[id]/colors";
-import { useAreaStats } from "@/app/(private)/map/[id]/data";
-import { useDataSources } from "@/app/(private)/map/[id]/hooks/useDataSources";
-import { useMapViews } from "@/app/(private)/map/[id]/hooks/useMapViews";
-import { useOrganisationId } from "@/atoms/organisationAtoms";
-import { type ColumnMetadata, ColumnType } from "@/models/DataSource";
-import { useTRPC } from "@/services/trpc/react";
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogHeader,
-  DialogTitle,
-} from "@/shadcn/ui/dialog";
-import { Input } from "@/shadcn/ui/input";
-import { ScrollArea } from "@/shadcn/ui/scroll-area";
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from "@/shadcn/ui/table";
-import { Textarea } from "@/shadcn/ui/textarea";
-import { resolveColumnMetadataEntry } from "@/utils/resolveColumnMetadata";
-import { DEFAULT_FILL_COLOR } from "../constants";
-import { useEditColumnMetadata } from "../hooks/useEditColumnMetadata";
-import type { EditColumnMetadataFields } from "../atoms/editColumnMetadataAtom";
-
-export default function EditColumnMetadataModal() {
-  const [editColumnMetadata, setEditColumnMetadata] = useEditColumnMetadata();
-  const { getDataSourceById } = useDataSources();
-  const organisationId = useOrganisationId();
-  const trpc = useTRPC();
-  const client = useQueryClient();
-
-  const { viewConfig, updateViewConfig } = useMapViews();
-
-  const dataSource = getDataSourceById(editColumnMetadata?.dataSourceId);
-  const columnName = editColumnMetadata?.column ?? "";
-
-  // Debounce timers for color changes
-  const debounceTimers = useRef<Record<string, NodeJS.Timeout | null>>({});
-  const metadataSaveTimer = useRef<NodeJS.Timeout | null>(null);
-  const lastSavedRef = useRef({
-    description: "",
-    valueLabels: {} as Record<string, string>,
-  });
-
-  // Cleanup debounce timers on unmount
-  useEffect(() => {
-    const timers = debounceTimers.current;
-    return () => {
-      Object.values(timers).forEach((timer) => {
-        if (timer) clearTimeout(timer);
-      });
-      if (metadataSaveTimer.current) {
-        clearTimeout(metadataSaveTimer.current);
-      }
-    };
-  }, []);
-
-  // Whether the user's current org owns this data source
-  const isOwner = Boolean(
-    organisationId &&
-    dataSource &&
-    dataSource.organisationId === organisationId,
-  );
-
-  const columnType = dataSource?.columnDefs.find(
-    (col) => col.name === columnName,
-  )?.type;
-
-  const existingMeta = useMemo(() => {
-    if (!dataSource) return undefined;
-    return resolveColumnMetadataEntry(
-      dataSource.columnMetadata,
-      dataSource.organisationOverride?.columnMetadata,
-      columnName,
-    );
-  }, [dataSource, columnName]);
-
-  const [draftDescription, setDraftDescription] = useState("");
-  const [draftValueLabels, setDraftValueLabels] = useState<
-    Record<string, string>
-  >({});
-  // Reset draft state when the dialog opens for a new column
-  useEffect(() => {
-    if (editColumnMetadata) {
-      const desc = existingMeta?.description ?? "";
-      const labels = existingMeta?.valueLabels ?? {};
-      setDraftDescription(desc);
-      setDraftValueLabels(labels);
-      lastSavedRef.current = { description: desc, valueLabels: labels };
-    }
-  }, [editColumnMetadata, existingMeta]);
-
-  const { data: columnValues } = useQuery(
-    trpc.dataSource.uniqueColumnValues.queryOptions(
-      { dataSourceId: dataSource?.id ?? "", column: columnName },
-      { enabled: Boolean(dataSource && columnName) },
-    ),
-  );
-
-  // If this column is currently being visualised, merge in area stats categories
-  const areaStatsQuery = useAreaStats();
-  const areaStats = areaStatsQuery?.data;
-
-  const isVisualisedColumn =
-    editColumnMetadata?.dataSourceId === viewConfig.areaDataSourceId &&
-    editColumnMetadata?.column === viewConfig.areaDataColumn;
-
-  const areaStatsValues = useMemo(() => {
-    if (!isVisualisedColumn || !areaStats?.stats.length) return [];
-    return Array.from(
-      new Set(
-        areaStats.stats
-          .map((s) => String(s.primary))
-          .filter((v) => v && v !== "null" && v !== "undefined"),
-      ),
-    );
-  }, [isVisualisedColumn, areaStats]);
-
-  // Merge unique column values with area stats categories
-  // null means too many values (>50); undefined means still loading
-  const mergedValues = useMemo((): string[] | null | undefined => {
-    // If the query returned null, there are too many values
-    if (columnValues === null) return null;
-    // If the query is still loading and we have no area stats values, show loading
-    if (columnValues === undefined && areaStatsValues.length === 0)
-      return undefined;
-    let merged = Array.from(
-      new Set([...(columnValues ?? []), ...areaStatsValues]),
-    );
-    // If nullIsZero is true, combine blank/undefined/0 into just "0"
-    if (dataSource?.nullIsZero && columnType === ColumnType.Number) {
-      const blankValues = new Set(["", "null", "undefined"]);
-      const hasBlankOrZero =
-        merged.some((v) => blankValues.has(v)) || merged.includes("0");
-      if (hasBlankOrZero) {
-        merged = merged.filter((v) => !blankValues.has(v));
-        if (!merged.includes("0")) {
-          merged.push("0");
-        }
-      }
-    }
-    // Enforce the 50-value cap
-    if (merged.length > 50) return null;
-    return merged;
-  }, [columnValues, areaStatsValues, dataSource?.nullIsZero, columnType]);
-
-  // Sorted distinct values for the D3 ordinal scale domain
-  const sortedValues = useMemo(
-    () => [...(mergedValues ?? [])].sort(),
-    [mergedValues],
-  );
-
-  const colorMap = useMemo(
-    () => makeColorMap(sortedValues, viewConfig, dataSource?.id, columnName),
-    [columnName, dataSource, sortedValues, viewConfig],
-  );
-
-  // Resolve the display color for a given value
-  const getColorForValue = useCallback(
-    (value: string) => {
-      return colorMap[value] ?? DEFAULT_FILL_COLOR;
-    },
-    [colorMap],
-  );
-
-  const isColorSet = useCallback(
-    (value: string) => {
-      const key = getCategoryColorsKey(dataSource?.id, columnName, value);
-      return Boolean(
-        viewConfig.categoryColors?.[key] ?? viewConfig.categoryColors?.[value],
-      );
-    },
-    [viewConfig.categoryColors, dataSource?.id, columnName],
-  );
-
-  const handleColorChange = useCallback(
-    (value: string, color: string) => {
-      const key = getCategoryColorsKey(dataSource?.id, columnName, value);
-      const currentColors = viewConfig.categoryColors || {};
-      updateViewConfig({
-        categoryColors: {
-          ...currentColors,
-          [value]: color,
-          [key]: color,
-        },
-      });
-    },
-    [dataSource?.id, columnName, updateViewConfig, viewConfig.categoryColors],
-  );
-
-  const handleColorChangeDebounced = useCallback(
-    (value: string, color: string) => {
-      if (debounceTimers.current[value]) {
-        clearTimeout(debounceTimers.current[value]);
-      }
-      debounceTimers.current[value] = setTimeout(() => {
-        handleColorChange(value, color);
-        debounceTimers.current[value] = null;
-      }, 300);
-    },
-    [handleColorChange],
-  );
-
-  const handleResetColor = useCallback(
-    (value: string) => {
-      if (debounceTimers.current[value]) {
-        clearTimeout(debounceTimers.current[value]);
-        debounceTimers.current[value] = null;
-      }
-      const key = getCategoryColorsKey(dataSource?.id, columnName, value);
-      const currentColors = viewConfig.categoryColors || {};
-      const nextColors = Object.fromEntries(
-        Object.entries(currentColors).filter(([k]) => k !== value && k !== key),
-      );
-      updateViewConfig({
-        categoryColors:
-          Object.keys(nextColors).length > 0 ? nextColors : undefined,
-      });
-    },
-    [dataSource?.id, columnName, updateViewConfig, viewConfig.categoryColors],
-  );
-
-  // Mutation for owners: update the data source directly
-  const { mutate: updateDataSourceConfig } = useMutation(
-    trpc.dataSource.updateConfig.mutationOptions({
-      onSuccess: (_data, variables) => {
-        client.setQueryData(
-          trpc.dataSource.listReadable.queryKey({
-            activeOrganisationId: organisationId ?? undefined,
-          }),
-          (old) =>
-            old?.map((ds) =>
-              ds.id === variables.dataSourceId
-                ? {
-                    ...ds,
-                    columnMetadata:
-                      variables.columnMetadata ?? ds.columnMetadata,
-                  }
-                : ds,
-            ),
-        );
-      },
-      onError: (error) => {
-        toast.error(error.message || "Could not save column metadata.");
-      },
-    }),
-  );
-
-  // Mutation for non-owners: save as org-specific override
-  const { mutate: updateOverride } = useMutation(
-    trpc.dataSource.updateOrganisationOverride.mutationOptions({
-      onSuccess: (_data, variables) => {
-        client.setQueryData(
-          trpc.dataSource.listReadable.queryKey({
-            activeOrganisationId: organisationId ?? undefined,
-          }),
-          (old) =>
-            old?.map((ds) =>
-              ds.id === variables.dataSourceId
-                ? {
-                    ...ds,
-                    organisationOverride: {
-                      ...(ds.organisationOverride ?? {
-                        id: 0,
-                        organisationId: organisationId ?? "",
-                        dataSourceId: variables.dataSourceId,
-                        inspectorColumns: [],
-                      }),
-                      columnMetadata: variables.columnMetadata,
-                    },
-                  }
-                : ds,
-            ),
-        );
-      },
-      onError: (error) => {
-        toast.error(error.message || "Could not save column metadata.");
-      },
-    }),
-  );
-
-  const saveMetadata = useCallback(() => {
-    if (!dataSource) return;
-
-    const sourceMetadata = isOwner
-      ? dataSource.columnMetadata
-      : (dataSource.organisationOverride?.columnMetadata ?? []);
-
-    const existingMetadata: ColumnMetadata[] = dataSource.columnDefs.map(
-      (col) => {
-        const existing = sourceMetadata.find((m) => m.name === col.name);
-        return {
-          name: col.name,
-          description: existing?.description ?? "",
-          valueLabels: existing?.valueLabels ?? {},
-        };
-      },
-    );
-
-    const updated = existingMetadata.map((m) =>
-      m.name === columnName
-        ? { ...m, description: draftDescription, valueLabels: draftValueLabels }
-        : m,
-    );
-
-    lastSavedRef.current = {
-      description: draftDescription,
-      valueLabels: { ...draftValueLabels },
-    };
-
-    if (isOwner) {
-      updateDataSourceConfig({
-        dataSourceId: dataSource.id,
-        columnMetadata: updated,
-      });
-    } else if (organisationId) {
-      updateOverride({
-        organisationId,
-        dataSourceId: dataSource.id,
-        columnMetadata: updated,
-        inspectorColumns:
-          dataSource.organisationOverride?.inspectorColumns ?? [],
-      });
-    }
-  }, [
-    dataSource,
-    columnName,
-    draftDescription,
-    draftValueLabels,
-    isOwner,
-    organisationId,
-    updateDataSourceConfig,
-    updateOverride,
-  ]);
-
-  // Auto-save description and value labels when they change
-  useEffect(() => {
-    if (!dataSource || !editColumnMetadata) return;
-    const { description: lastDesc, valueLabels: lastLabels } =
-      lastSavedRef.current;
-    if (
-      draftDescription === lastDesc &&
-      JSON.stringify(draftValueLabels) === JSON.stringify(lastLabels)
-    ) {
-      return;
-    }
-    if (metadataSaveTimer.current) {
-      clearTimeout(metadataSaveTimer.current);
-    }
-    metadataSaveTimer.current = setTimeout(() => {
-      saveMetadata();
-      metadataSaveTimer.current = null;
-    }, 500);
-    return () => {
-      if (metadataSaveTimer.current) {
-        clearTimeout(metadataSaveTimer.current);
-      }
-    };
-  }, [
-    draftDescription,
-    draftValueLabels,
-    dataSource,
-    editColumnMetadata,
-    saveMetadata,
-  ]);
-
-  const handleClose = useCallback(() => {
-    // Flush any pending metadata save
-    if (metadataSaveTimer.current) {
-      clearTimeout(metadataSaveTimer.current);
-      metadataSaveTimer.current = null;
-    }
-    const { description: lastDesc, valueLabels: lastLabels } =
-      lastSavedRef.current;
-    if (
-      draftDescription !== lastDesc ||
-      JSON.stringify(draftValueLabels) !== JSON.stringify(lastLabels)
-    ) {
-      saveMetadata();
-    }
-    setEditColumnMetadata(null);
-  }, [setEditColumnMetadata, draftDescription, draftValueLabels, saveMetadata]);
-
-  const isOpen = editColumnMetadata !== null;
-
-  const showTable =
-    editColumnMetadata?.fields.valueLabels ||
-    editColumnMetadata?.fields.categoryColors;
-
-  return (
-    <Dialog
-      open={isOpen}
-      onOpenChange={(open) => {
-        if (!open) handleClose();
-      }}
-    >
-      {isOpen && (
-        <DialogContent>
-          <div className="flex flex-col">
-            <DialogHeader>
-              <DialogTitle>
-                {editColumnMetadata.fields.description ? (
-                  <>
-                    Metadata for <span className="font-mono">{columnName}</span>
-                  </>
-                ) : (
-                  <>
-                    Display values for{" "}
-                    <span className="font-mono">{columnName}</span>
-                  </>
-                )}
-              </DialogTitle>
-              <DialogDescription>
-                {fieldsToDescription(editColumnMetadata.fields)}
-              </DialogDescription>
-            </DialogHeader>
-            <div className="flex flex-col gap-4 py-2">
-              {editColumnMetadata.fields.description && (
-                <div className="flex flex-col gap-1.5">
-                  <label className="text-sm font-medium">Description</label>
-                  <Textarea
-                    value={draftDescription}
-                    onChange={(e) => setDraftDescription(e.target.value)}
-                    placeholder="Column description"
-                  />
-                </div>
-              )}
-              {showTable && (
-                <div className="flex flex-col gap-1.5">
-                  <label className="text-sm font-medium">Display values</label>
-                  {(() => {
-                    if (mergedValues === undefined) {
-                      return (
-                        <p className="text-sm text-muted-foreground">
-                          Loading values…
-                        </p>
-                      );
-                    }
-                    if (mergedValues === null) {
-                      return (
-                        <p className="text-sm text-muted-foreground">
-                          Too many unique values to configure labels.
-                        </p>
-                      );
-                    }
-                    if (mergedValues.length === 0) {
-                      return (
-                        <p className="text-sm text-muted-foreground">
-                          No values found.
-                        </p>
-                      );
-                    }
-                    return (
-                      <ScrollArea className="max-h-64 rounded-md border">
-                        <Table>
-                          <TableHeader>
-                            <TableRow>
-                              <TableHead>Value</TableHead>
-                              {editColumnMetadata.fields.valueLabels && (
-                                <TableHead>Label</TableHead>
-                              )}
-                              {editColumnMetadata.fields.categoryColors && (
-                                <TableHead className="w-16">Color</TableHead>
-                              )}
-                            </TableRow>
-                          </TableHeader>
-                          <TableBody>
-                            {mergedValues
-                              .toSorted((a, b) => {
-                                if (columnType === ColumnType.Number) {
-                                  const numA = Number(a);
-                                  const numB = Number(b);
-                                  if (isNaN(numA) || isNaN(numB)) {
-                                    return a.localeCompare(b);
-                                  }
-                                  return numA - numB;
-                                }
-                                return a.localeCompare(b);
-                              })
-                              .map((value) => (
-                                <TableRow key={value}>
-                                  <TableCell className="font-mono text-sm text-muted-foreground whitespace-normal">
-                                    {value || "(blank)"}
-                                  </TableCell>
-                                  {editColumnMetadata.fields.valueLabels && (
-                                    <TableCell>
-                                      <Input
-                                        value={draftValueLabels[value] ?? ""}
-                                        onChange={(e) => {
-                                          const label = e.target.value;
-                                          setDraftValueLabels((prev) => {
-                                            if (label) {
-                                              return {
-                                                ...prev,
-                                                [value]: label,
-                                              };
-                                            }
-
-                                            const {
-                                              // eslint-disable-next-line @typescript-eslint/no-unused-vars
-                                              [value]: _removed,
-                                              ...rest
-                                            } = prev;
-                                            return rest;
-                                          });
-                                        }}
-                                        className="h-8 text-sm"
-                                      />
-                                    </TableCell>
-                                  )}
-                                  {editColumnMetadata.fields.categoryColors && (
-                                    <TableCell>
-                                      <div className="flex items-center gap-1">
-                                        <label className="relative cursor-pointer">
-                                          <div
-                                            className="w-6 h-6 rounded border border-neutral-300 flex-shrink-0"
-                                            style={{
-                                              backgroundColor:
-                                                getColorForValue(value),
-                                            }}
-                                          />
-                                          <input
-                                            type="color"
-                                            value={getColorForValue(value)}
-                                            onChange={(e) =>
-                                              handleColorChangeDebounced(
-                                                value,
-                                                e.target.value,
-                                              )
-                                            }
-                                            className="absolute inset-0 w-full h-full opacity-0 cursor-pointer"
-                                            title={`Change color for ${value || "(blank)"}`}
-                                          />
-                                        </label>
-                                        {isColorSet(value) && (
-                                          <button
-                                            type="button"
-                                            onClick={() =>
-                                              handleResetColor(value)
-                                            }
-                                            className="h-5 w-5 flex items-center justify-center rounded hover:bg-neutral-100"
-                                            title="Reset to default color"
-                                          >
-                                            <X className="h-3 w-3" />
-                                          </button>
-                                        )}
-                                      </div>
-                                    </TableCell>
-                                  )}
-                                </TableRow>
-                              ))}
-                          </TableBody>
-                        </Table>
-                      </ScrollArea>
-                    );
-                  })()}
-                </div>
-              )}
-            </div>
-          </div>
-        </DialogContent>
-      )}
-    </Dialog>
-  );
-}
-
-const fieldsToDescription = (fields: EditColumnMetadataFields): string => {
-  const labels: Record<keyof EditColumnMetadataFields, string> = {
-    description: "description",
-    valueLabels: "display values",
-    categoryColors: "colors",
-  };
-  const keys = Object.keys(fields) as (keyof EditColumnMetadataFields)[];
-  const parts = keys.filter((f) => fields[f]).map((f) => labels[f]);
-  if (!parts.length) {
-    return "Configure this column.";
-  }
-  let listStr = "";
-  if (parts.length === 1) {
-    listStr = parts[0];
-  } else {
-    const last = parts.pop();
-    listStr = parts.join(", ") + " and " + last;
-  }
-  return `Configure ${listStr} for this column.`;
-};
diff --git a/src/app/(private)/map/[id]/components/EditColumnMetadataModal/ColorMappingsSection.tsx b/src/app/(private)/map/[id]/components/EditColumnMetadataModal/ColorMappingsSection.tsx
new file mode 100644
index 00000000..d3270378
--- /dev/null
+++ b/src/app/(private)/map/[id]/components/EditColumnMetadataModal/ColorMappingsSection.tsx
@@ -0,0 +1,201 @@
+"use client";
+
+import { useCallback, useEffect, useMemo, useRef } from "react";
+import { getCategoryColorsKey } from "@/app/(private)/map/[id]/colors";
+import { useColumnMetadataMutations } from "@/app/(private)/map/[id]/hooks/useColumnMetadataMutations";
+import { useMapViews } from "@/app/(private)/map/[id]/hooks/useMapViews";
+import ColorMappingsEditor from "@/components/ColorMappingsEditor";
+import type { ColumnMetadata } from "@/models/DataSource";
+
+interface ColorMappingsSectionProps {
+  dataSourceId: string | undefined;
+  columnName: string;
+  mergedValues: string[] | null | undefined;
+  existingMeta: ColumnMetadata | undefined;
+  ownerMeta: ColumnMetadata | undefined;
+  isOwner: boolean;
+  organisationId: string | null | undefined;
+}
+
+export default function ColorMappingsSection({
+  dataSourceId,
+  columnName,
+  mergedValues,
+  existingMeta,
+  ownerMeta,
+  isOwner,
+  organisationId,
+}: ColorMappingsSectionProps) {
+  const { viewConfig, updateViewConfig } = useMapViews();
+  const { patchColumnMetadata, patchColumnMetadataOverride } =
+    useColumnMetadataMutations();
+
+  const debounceTimers = useRef<Record<string, NodeJS.Timeout | null>>({});
+
+  useEffect(() => {
+    const timers = debounceTimers.current;
+    return () => {
+      Object.values(timers).forEach((timer) => {
+        if (timer) clearTimeout(timer);
+      });
+    };
+  }, []);
+
+  const mapViewColorMappings = useMemo(() => {
+    if (!viewConfig.colorMappings || !dataSourceId) return {};
+    const result: Record<string, string> = {};
+    for (const value of mergedValues ?? []) {
+      const key = getCategoryColorsKey(dataSourceId, columnName, value);
+      if (viewConfig.colorMappings[key]) {
+        result[value] = viewConfig.colorMappings[key];
+      }
+    }
+    return result;
+  }, [viewConfig.colorMappings, dataSourceId, columnName, mergedValues]);
+
+  const handleColorChange = useCallback(
+    (value: string, color: string) => {
+      const key = getCategoryColorsKey(dataSourceId, columnName, value);
+      const currentColors = viewConfig.colorMappings || {};
+      updateViewConfig({
+        colorMappings: { ...currentColors, [key]: color },
+      });
+    },
+    [dataSourceId, columnName, viewConfig.colorMappings, updateViewConfig],
+  );
+
+  const handleColorChangeDebounced = useCallback(
+    (value: string, color: string) => {
+      if (debounceTimers.current[value]) {
+        clearTimeout(debounceTimers.current[value]);
+      }
+      debounceTimers.current[value] = setTimeout(() => {
+        handleColorChange(value, color);
+        debounceTimers.current[value] = null;
+      }, 300);
+    },
+    [handleColorChange],
+  );
+
+  const clearMapViewColors = useCallback(() => {
+    if (!viewConfig.colorMappings || !dataSourceId) return;
+    const columnPrefix = getCategoryColorsKey(dataSourceId, columnName, "");
+    const nextColors = Object.fromEntries(
+      Object.entries(viewConfig.colorMappings).filter(
+        ([k]) => !k.startsWith(columnPrefix),
+      ),
+    );
+    updateViewConfig({
+      colorMappings:
+        Object.keys(nextColors).length > 0 ? nextColors : undefined,
+    });
+  }, [dataSourceId, columnName, viewConfig.colorMappings, updateViewConfig]);
+
+  const handleResetColor = useCallback(
+    (value: string) => {
+      if (debounceTimers.current[value]) {
+        clearTimeout(debounceTimers.current[value]);
+        debounceTimers.current[value] = null;
+      }
+      const key = getCategoryColorsKey(dataSourceId, columnName, value);
+      const currentColors = viewConfig.colorMappings || {};
+      const nextColors = Object.fromEntries(
+        Object.entries(currentColors).filter(([k]) => k !== key),
+      );
+      updateViewConfig({
+        colorMappings:
+          Object.keys(nextColors).length > 0 ? nextColors : undefined,
+      });
+    },
+    [dataSourceId, columnName, viewConfig.colorMappings, updateViewConfig],
+  );
+
+  const handleResetAllColors = useCallback(() => {
+    clearMapViewColors();
+  }, [clearMapViewColors]);
+
+  const hasSourceColors =
+    !isOwner &&
+    Boolean(dataSourceId) &&
+    Object.keys(ownerMeta?.colorMappings ?? {}).length > 0;
+
+  const handleUseSourceColors = useCallback(() => {
+    if (!dataSourceId) return;
+    const sourceColors = ownerMeta?.colorMappings ?? {};
+    const columnPrefix = getCategoryColorsKey(dataSourceId, columnName, "");
+    // Remove existing map-view overrides for this column, then apply source colors
+    const withoutThisColumn = Object.fromEntries(
+      Object.entries(viewConfig.colorMappings ?? {}).filter(
+        ([k]) => !k.startsWith(columnPrefix),
+      ),
+    );
+    const newKeys: Record<string, string> = {};
+    for (const [value, color] of Object.entries(sourceColors)) {
+      newKeys[getCategoryColorsKey(dataSourceId, columnName, value)] = color;
+    }
+    const nextColors = { ...withoutThisColumn, ...newKeys };
+    updateViewConfig({
+      colorMappings:
+        Object.keys(nextColors).length > 0 ? nextColors : undefined,
+    });
+  }, [
+    dataSourceId,
+    columnName,
+    ownerMeta,
+    viewConfig.colorMappings,
+    updateViewConfig,
+  ]);
+
+  const handleSaveAsDefaults = useCallback(() => {
+    if (!dataSourceId) return;
+    const mergedColorMappings = {
+      ...(existingMeta?.colorMappings ?? {}),
+      ...mapViewColorMappings,
+    };
+    if (isOwner) {
+      patchColumnMetadata({
+        dataSourceId,
+        column: columnName,
+        patch: { colorMappings: mergedColorMappings },
+      });
+    } else if (organisationId) {
+      patchColumnMetadataOverride({
+        organisationId,
+        dataSourceId,
+        column: columnName,
+        patch: { colorMappings: mergedColorMappings },
+      });
+    }
+    clearMapViewColors();
+  }, [
+    dataSourceId,
+    columnName,
+    existingMeta,
+    mapViewColorMappings,
+    isOwner,
+    organisationId,
+    patchColumnMetadata,
+    patchColumnMetadataOverride,
+    clearMapViewColors,
+  ]);
+
+  return (
+    <div className="flex flex-col gap-1.5">
+      <label className="text-sm font-medium">Colour mappings</label>
+      <div className="rounded-md border">
+        <ColorMappingsEditor
+          values={mergedValues}
+          colorMappings={mapViewColorMappings}
+          fallbackColors={existingMeta?.colorMappings}
+          onChange={handleColorChangeDebounced}
+          onReset={handleResetColor}
+          onResetAll={handleResetAllColors}
+          onSaveAsDefaults={handleSaveAsDefaults}
+          onUseSourceColors={
+            hasSourceColors ? handleUseSourceColors : undefined
+          }
+        />
+      </div>
+    </div>
+  );
+}
diff --git a/src/app/(private)/map/[id]/components/EditColumnMetadataModal/EditColumnMetadataModal.tsx b/src/app/(private)/map/[id]/components/EditColumnMetadataModal/EditColumnMetadataModal.tsx
new file mode 100644
index 00000000..2587e400
--- /dev/null
+++ b/src/app/(private)/map/[id]/components/EditColumnMetadataModal/EditColumnMetadataModal.tsx
@@ -0,0 +1,295 @@
+"use client";
+
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { useAreaStats } from "@/app/(private)/map/[id]/data";
+import { useColumnMetadataMutations } from "@/app/(private)/map/[id]/hooks/useColumnMetadataMutations";
+import { useDataSources } from "@/app/(private)/map/[id]/hooks/useDataSources";
+import { useMapViews } from "@/app/(private)/map/[id]/hooks/useMapViews";
+import { useOrganisationId } from "@/atoms/organisationAtoms";
+import { useColumnValues } from "@/hooks/useColumnValues";
+import { ColumnType } from "@/models/DataSource";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from "@/shadcn/ui/dialog";
+import { Textarea } from "@/shadcn/ui/textarea";
+import { resolveColumnMetadataEntry } from "@/utils/resolveColumnMetadata";
+import { useEditColumnMetadata } from "../../hooks/useEditColumnMetadata";
+import ColorMappingsSection from "./ColorMappingsSection";
+import ValueLabelsSection from "./ValueLabelsSection";
+import type { EditColumnMetadataFields } from "../../atoms/editColumnMetadataAtom";
+
+export default function EditColumnMetadataModal() {
+  const [editColumnMetadata, setEditColumnMetadata] = useEditColumnMetadata();
+  const { getDataSourceById } = useDataSources();
+  const organisationId = useOrganisationId();
+
+  const { viewConfig } = useMapViews();
+  const { patchColumnMetadata, patchColumnMetadataOverride } =
+    useColumnMetadataMutations();
+
+  const dataSource = getDataSourceById(editColumnMetadata?.dataSourceId);
+  const columnName = editColumnMetadata?.column ?? "";
+  const dataSourceId = dataSource?.id;
+
+  const metadataSaveTimer = useRef<NodeJS.Timeout | null>(null);
+  const lastSavedRef = useRef({
+    description: "",
+    valueLabels: {} as Record<string, string>,
+  });
+
+  useEffect(() => {
+    return () => {
+      if (metadataSaveTimer.current) {
+        clearTimeout(metadataSaveTimer.current);
+      }
+    };
+  }, []);
+
+  const isOwner = Boolean(
+    organisationId &&
+    dataSource &&
+    dataSource.organisationId === organisationId,
+  );
+
+  const columnType = dataSource?.columnDefs.find(
+    (col) => col.name === columnName,
+  )?.type;
+
+  const existingMeta = useMemo(() => {
+    if (!dataSource) return undefined;
+    return resolveColumnMetadataEntry(
+      dataSource.columnMetadata,
+      dataSource.organisationOverride?.columnMetadata,
+      columnName,
+    );
+  }, [dataSource, columnName]);
+
+  const ownerMeta = useMemo(() => {
+    if (!dataSource) return undefined;
+    return dataSource.columnMetadata.find((m) => m.name === columnName);
+  }, [dataSource, columnName]);
+
+  const [draftDescription, setDraftDescription] = useState("");
+  const [draftValueLabels, setDraftValueLabels] = useState<
+    Record<string, string>
+  >({});
+
+  useEffect(() => {
+    if (editColumnMetadata) {
+      const desc = existingMeta?.description ?? "";
+      const labels = existingMeta?.valueLabels ?? {};
+      setDraftDescription(desc);
+      setDraftValueLabels(labels);
+      lastSavedRef.current = { description: desc, valueLabels: labels };
+    }
+  }, [editColumnMetadata, existingMeta]);
+
+  const areaStatsQuery = useAreaStats();
+  const areaStats = areaStatsQuery?.data;
+
+  const isVisualisedColumn =
+    editColumnMetadata?.dataSourceId === viewConfig.areaDataSourceId &&
+    editColumnMetadata?.column === viewConfig.areaDataColumn;
+
+  const areaStatsValues = useMemo(() => {
+    if (!isVisualisedColumn || !areaStats?.stats.length) return [];
+    return Array.from(
+      new Set(
+        areaStats.stats
+          .map((s) => String(s.primary))
+          .filter((v) => v && v !== "null" && v !== "undefined"),
+      ),
+    );
+  }, [isVisualisedColumn, areaStats]);
+
+  const columnValues = useColumnValues({
+    dataSourceId: dataSource?.id ?? "",
+    column: columnName,
+    columnType: columnType ?? ColumnType.Unknown,
+    nullIsZero: dataSource?.nullIsZero,
+    enabled: Boolean(dataSource && columnName),
+    additionalValues: areaStatsValues,
+  });
+
+  const mergedValues = useMemo((): string[] | null | undefined => {
+    if (columnValues === null) return null;
+    if (columnValues === undefined) return undefined;
+    if (columnValues.length > 50) return null;
+    return columnValues;
+  }, [columnValues]);
+
+  const saveMetadata = useCallback(() => {
+    if (!dataSourceId) return;
+    const patch = {
+      description: draftDescription,
+      valueLabels: draftValueLabels,
+    };
+    lastSavedRef.current = {
+      description: draftDescription,
+      valueLabels: { ...draftValueLabels },
+    };
+    if (isOwner) {
+      patchColumnMetadata({ dataSourceId, column: columnName, patch });
+    } else if (organisationId) {
+      patchColumnMetadataOverride({
+        organisationId,
+        dataSourceId,
+        column: columnName,
+        patch,
+      });
+    }
+  }, [
+    dataSourceId,
+    columnName,
+    draftDescription,
+    draftValueLabels,
+    isOwner,
+    organisationId,
+    patchColumnMetadata,
+    patchColumnMetadataOverride,
+  ]);
+
+  useEffect(() => {
+    if (!dataSource || !editColumnMetadata) return;
+    const { description: lastDesc, valueLabels: lastLabels } =
+      lastSavedRef.current;
+    if (
+      draftDescription === lastDesc &&
+      JSON.stringify(draftValueLabels) === JSON.stringify(lastLabels)
+    ) {
+      return;
+    }
+    if (metadataSaveTimer.current) {
+      clearTimeout(metadataSaveTimer.current);
+    }
+    metadataSaveTimer.current = setTimeout(() => {
+      saveMetadata();
+      metadataSaveTimer.current = null;
+    }, 500);
+    return () => {
+      if (metadataSaveTimer.current) {
+        clearTimeout(metadataSaveTimer.current);
+      }
+    };
+  }, [
+    draftDescription,
+    draftValueLabels,
+    dataSource,
+    editColumnMetadata,
+    saveMetadata,
+  ]);
+
+  const handleClose = useCallback(() => {
+    if (metadataSaveTimer.current) {
+      clearTimeout(metadataSaveTimer.current);
+      metadataSaveTimer.current = null;
+    }
+    const { description: lastDesc, valueLabels: lastLabels } =
+      lastSavedRef.current;
+    if (
+      draftDescription !== lastDesc ||
+      JSON.stringify(draftValueLabels) !== JSON.stringify(lastLabels)
+    ) {
+      saveMetadata();
+    }
+    setEditColumnMetadata(null);
+  }, [setEditColumnMetadata, draftDescription, draftValueLabels, saveMetadata]);
+
+  const isOpen = editColumnMetadata !== null;
+
+  return (
+    <Dialog
+      open={isOpen}
+      onOpenChange={(open) => {
+        if (!open) handleClose();
+      }}
+    >
+      {isOpen && (
+        <DialogContent>
+          <div className="flex flex-col">
+            <DialogHeader>
+              <DialogTitle>
+                {editColumnMetadata.fields.description ? (
+                  <>
+                    Metadata for <span className="font-mono">{columnName}</span>
+                  </>
+                ) : (
+                  <>
+                    Display values for{" "}
+                    <span className="font-mono">{columnName}</span>
+                  </>
+                )}
+              </DialogTitle>
+              <DialogDescription>
+                {fieldsToDescription(editColumnMetadata.fields)}
+              </DialogDescription>
+            </DialogHeader>
+            <div className="flex flex-col gap-4 py-2">
+              {editColumnMetadata.fields.description && (
+                <div className="flex flex-col gap-1.5">
+                  <label className="text-sm font-medium">Description</label>
+                  <Textarea
+                    value={draftDescription}
+                    onChange={(e) => setDraftDescription(e.target.value)}
+                    placeholder="Column description"
+                  />
+                </div>
+              )}
+              {editColumnMetadata.fields.valueLabels && (
+                <ValueLabelsSection
+                  values={mergedValues}
+                  columnType={columnType}
+                  valueLabels={draftValueLabels}
+                  onChange={(value, label) => {
+                    setDraftValueLabels((prev) => {
+                      if (label) return { ...prev, [value]: label };
+                      return Object.fromEntries(
+                        Object.entries(prev).filter(([k]) => k !== value),
+                      );
+                    });
+                  }}
+                />
+              )}
+              {editColumnMetadata.fields.colorMappings && (
+                <ColorMappingsSection
+                  dataSourceId={dataSourceId}
+                  columnName={columnName}
+                  mergedValues={mergedValues}
+                  existingMeta={existingMeta}
+                  ownerMeta={ownerMeta}
+                  isOwner={isOwner}
+                  organisationId={organisationId}
+                />
+              )}
+            </div>
+          </div>
+        </DialogContent>
+      )}
+    </Dialog>
+  );
+}
+
+const fieldsToDescription = (fields: EditColumnMetadataFields): string => {
+  const labels: Record<keyof EditColumnMetadataFields, string> = {
+    description: "description",
+    valueLabels: "display values",
+    colorMappings: "colours",
+  };
+  const keys = Object.keys(fields) as (keyof EditColumnMetadataFields)[];
+  const parts = keys.filter((f) => fields[f]).map((f) => labels[f]);
+  if (!parts.length) {
+    return "Configure this column.";
+  }
+  let listStr = "";
+  if (parts.length === 1) {
+    listStr = parts[0];
+  } else {
+    const last = parts.pop();
+    listStr = parts.join(", ") + " and " + last;
+  }
+  return `Configure ${listStr} for this column.`;
+};
diff --git a/src/app/(private)/map/[id]/components/EditColumnMetadataModal/ValueLabelsSection.tsx b/src/app/(private)/map/[id]/components/EditColumnMetadataModal/ValueLabelsSection.tsx
new file mode 100644
index 00000000..1d1b9d9d
--- /dev/null
+++ b/src/app/(private)/map/[id]/components/EditColumnMetadataModal/ValueLabelsSection.tsx
@@ -0,0 +1,30 @@
+"use client";
+
+import ValueLabelsEditor from "@/components/ValueLabelsEditor";
+import type { ColumnType } from "@/models/DataSource";
+
+interface ValueLabelsSectionProps {
+  values: string[] | null | undefined;
+  columnType: ColumnType | undefined;
+  valueLabels: Record<string, string>;
+  onChange: (value: string, label: string) => void;
+}
+
+export default function ValueLabelsSection({
+  values,
+  columnType,
+  valueLabels,
+  onChange,
+}: ValueLabelsSectionProps) {
+  return (
+    <div className="flex flex-col gap-1.5">
+      <label className="text-sm font-medium">Display values</label>
+      <ValueLabelsEditor
+        values={values}
+        columnType={columnType}
+        valueLabels={valueLabels}
+        onChange={onChange}
+      />
+    </div>
+  );
+}
diff --git a/src/app/(private)/map/[id]/components/inspector/BoundaryConfigItem.tsx b/src/app/(private)/map/[id]/components/InspectorPanel/BoundaryConfigItem.tsx
similarity index 100%
rename from src/app/(private)/map/[id]/components/inspector/BoundaryConfigItem.tsx
rename to src/app/(private)/map/[id]/components/InspectorPanel/BoundaryConfigItem.tsx
diff --git a/src/app/(private)/map/[id]/components/inspector/BoundaryDataPanel.tsx b/src/app/(private)/map/[id]/components/InspectorPanel/BoundaryDataPanel.tsx
similarity index 100%
rename from src/app/(private)/map/[id]/components/inspector/BoundaryDataPanel.tsx
rename to src/app/(private)/map/[id]/components/InspectorPanel/BoundaryDataPanel.tsx
diff --git a/src/app/(private)/map/[id]/components/inspector/BoundaryMarkersList.tsx b/src/app/(private)/map/[id]/components/InspectorPanel/BoundaryMarkersList.tsx
similarity index 100%
rename from src/app/(private)/map/[id]/components/inspector/BoundaryMarkersList.tsx
rename to src/app/(private)/map/[id]/components/InspectorPanel/BoundaryMarkersList.tsx
diff --git a/src/app/(private)/map/[id]/components/inspector/ClusterMarkersList.tsx b/src/app/(private)/map/[id]/components/InspectorPanel/ClusterMarkersList.tsx
similarity index 100%
rename from src/app/(private)/map/[id]/components/inspector/ClusterMarkersList.tsx
rename to src/app/(private)/map/[id]/components/InspectorPanel/ClusterMarkersList.tsx
diff --git a/src/app/(private)/map/[id]/components/inspector/DataSourcePropertiesList.tsx b/src/app/(private)/map/[id]/components/InspectorPanel/DataSourcePropertiesList.tsx
similarity index 100%
rename from src/app/(private)/map/[id]/components/inspector/DataSourcePropertiesList.tsx
rename to src/app/(private)/map/[id]/components/InspectorPanel/DataSourcePropertiesList.tsx
diff --git a/src/app/(private)/map/[id]/components/inspector/InspectorDataConfig.tsx b/src/app/(private)/map/[id]/components/InspectorPanel/InspectorDataConfig.tsx
similarity index 100%
rename from src/app/(private)/map/[id]/components/inspector/InspectorDataConfig.tsx
rename to src/app/(private)/map/[id]/components/InspectorPanel/InspectorDataConfig.tsx
diff --git a/src/app/(private)/map/[id]/components/inspector/InspectorDataTab.tsx b/src/app/(private)/map/[id]/components/InspectorPanel/InspectorDataTab.tsx
similarity index 100%
rename from src/app/(private)/map/[id]/components/inspector/InspectorDataTab.tsx
rename to src/app/(private)/map/[id]/components/InspectorPanel/InspectorDataTab.tsx
diff --git a/src/app/(private)/map/[id]/components/inspector/InspectorMarkersTab.tsx b/src/app/(private)/map/[id]/components/InspectorPanel/InspectorMarkersTab.tsx
similarity index 100%
rename from src/app/(private)/map/[id]/components/inspector/InspectorMarkersTab.tsx
rename to src/app/(private)/map/[id]/components/InspectorPanel/InspectorMarkersTab.tsx
diff --git a/src/app/(private)/map/[id]/components/inspector/InspectorNotesTab.tsx b/src/app/(private)/map/[id]/components/InspectorPanel/InspectorNotesTab.tsx
similarity index 100%
rename from src/app/(private)/map/[id]/components/inspector/InspectorNotesTab.tsx
rename to src/app/(private)/map/[id]/components/InspectorPanel/InspectorNotesTab.tsx
diff --git a/src/app/(private)/map/[id]/components/inspector/InspectorPanel.tsx b/src/app/(private)/map/[id]/components/InspectorPanel/InspectorPanel.tsx
similarity index 100%
rename from src/app/(private)/map/[id]/components/inspector/InspectorPanel.tsx
rename to src/app/(private)/map/[id]/components/InspectorPanel/InspectorPanel.tsx
diff --git a/src/app/(private)/map/[id]/components/inspector/MarkerButton.tsx b/src/app/(private)/map/[id]/components/InspectorPanel/MarkerButton.tsx
similarity index 100%
rename from src/app/(private)/map/[id]/components/inspector/MarkerButton.tsx
rename to src/app/(private)/map/[id]/components/InspectorPanel/MarkerButton.tsx
diff --git a/src/app/(private)/map/[id]/components/inspector/MarkersLists.tsx b/src/app/(private)/map/[id]/components/InspectorPanel/MarkersLists.tsx
similarity index 100%
rename from src/app/(private)/map/[id]/components/inspector/MarkersLists.tsx
rename to src/app/(private)/map/[id]/components/InspectorPanel/MarkersLists.tsx
diff --git a/src/app/(private)/map/[id]/components/inspector/SimplePropertiesList.tsx b/src/app/(private)/map/[id]/components/InspectorPanel/SimplePropertiesList.tsx
similarity index 100%
rename from src/app/(private)/map/[id]/components/inspector/SimplePropertiesList.tsx
rename to src/app/(private)/map/[id]/components/InspectorPanel/SimplePropertiesList.tsx
diff --git a/src/app/(private)/map/[id]/components/inspector/TurfMarkersList.tsx b/src/app/(private)/map/[id]/components/InspectorPanel/TurfMarkersList.tsx
similarity index 100%
rename from src/app/(private)/map/[id]/components/inspector/TurfMarkersList.tsx
rename to src/app/(private)/map/[id]/components/InspectorPanel/TurfMarkersList.tsx
diff --git a/src/app/(private)/map/[id]/components/inspector/UnderlineTabs.tsx b/src/app/(private)/map/[id]/components/InspectorPanel/UnderlineTabs.tsx
similarity index 100%
rename from src/app/(private)/map/[id]/components/inspector/UnderlineTabs.tsx
rename to src/app/(private)/map/[id]/components/InspectorPanel/UnderlineTabs.tsx
diff --git a/src/app/(private)/map/[id]/components/inspector/helpers.ts b/src/app/(private)/map/[id]/components/InspectorPanel/helpers.ts
similarity index 100%
rename from src/app/(private)/map/[id]/components/inspector/helpers.ts
rename to src/app/(private)/map/[id]/components/InspectorPanel/helpers.ts
diff --git a/src/app/(private)/map/[id]/components/Legend.tsx b/src/app/(private)/map/[id]/components/Legend.tsx
index baf487dc..6f55a819 100644
--- a/src/app/(private)/map/[id]/components/Legend.tsx
+++ b/src/app/(private)/map/[id]/components/Legend.tsx
@@ -1,4 +1,5 @@
 import { ChevronRight, Eye, EyeOff, LoaderPinwheel } from "lucide-react";
+import { useMemo } from "react";
 import { useChoropleth } from "@/app/(private)/map/[id]/hooks/useChoropleth";
 import { useChoroplethDataSource } from "@/app/(private)/map/[id]/hooks/useDataSources";
 import { useMapViews } from "@/app/(private)/map/[id]/hooks/useMapViews";
@@ -24,9 +25,19 @@ export default function Legend() {
   const areaStats = areaStatsQuery?.data;
   const isLoading = areaStatsQuery?.isFetching;
 
+  const resolvedColorMappings = useMemo(() => {
+    if (!dataSource || !viewConfig.areaDataColumn) return undefined;
+    return resolveColumnMetadataEntry(
+      dataSource.columnMetadata,
+      dataSource.organisationOverride?.columnMetadata,
+      viewConfig.areaDataColumn,
+    )?.colorMappings;
+  }, [dataSource, viewConfig.areaDataColumn]);
+
   const colorScheme = useColorScheme({
     areaStats,
     viewConfig,
+    resolvedColorMappings,
   });
 
   const isLayerVisible = viewConfig.showChoropleth !== false;
@@ -69,7 +80,7 @@ export default function Legend() {
           fields={{
             description: true,
             valueLabels: true,
-            categoryColors: colorScheme?.colorSchemeType === "categoric",
+            colorMappings: colorScheme?.colorSchemeType === "categoric",
           }}
         />
       </div>
diff --git a/src/app/(private)/map/[id]/components/Map.tsx b/src/app/(private)/map/[id]/components/Map.tsx
index 75ccfde9..4a3309a8 100644
--- a/src/app/(private)/map/[id]/components/Map.tsx
+++ b/src/app/(private)/map/[id]/components/Map.tsx
@@ -36,12 +36,12 @@ import { useTurfMutations } from "../hooks/useTurfMutations";
 import { useTurfState, useWatchDrawModeEffect } from "../hooks/useTurfState";
 import { CONTROL_PANEL_WIDTH, mapColors } from "../styles";
 import { getMapStyle } from "../utils/map";
-import Choropleth from "./Choropleth";
+import Choropleth from "./Choropleth/Choropleth";
 import { MAPBOX_SOURCE_IDS } from "./Choropleth/configs";
 import FilterMarkers from "./FilterMarkers";
 import "./Map.css";
 import MarkerPopup from "./MarkerPopup";
-import Markers from "./Markers";
+import Markers from "./Markers/Markers";
 import PlacedMarkers from "./PlacedMarkers";
 import SearchResultMarker from "./SearchResultMarker";
 import SecondaryBoundaries from "./SecondaryBoundaries";
diff --git a/src/app/(private)/map/[id]/components/Markers/index.tsx b/src/app/(private)/map/[id]/components/Markers/Markers.tsx
similarity index 100%
rename from src/app/(private)/map/[id]/components/Markers/index.tsx
rename to src/app/(private)/map/[id]/components/Markers/Markers.tsx
diff --git a/src/app/(private)/map/[id]/components/PrivateMapControls.tsx b/src/app/(private)/map/[id]/components/PrivateMapControls.tsx
index e8da3e97..097849d7 100644
--- a/src/app/(private)/map/[id]/components/PrivateMapControls.tsx
+++ b/src/app/(private)/map/[id]/components/PrivateMapControls.tsx
@@ -11,8 +11,8 @@ import {
 import { useDrawMode } from "../hooks/useMapCore";
 import { useMapViews } from "../hooks/useMapViews";
 import { CONTROL_PANEL_WIDTH, mapColors } from "../styles";
-import BoundaryHoverInfo from "./BoundaryHoverInfo";
-import InspectorPanel from "./inspector/InspectorPanel";
+import BoundaryHoverInfo from "./BoundaryHoverInfo/BoundaryHoverInfo";
+import InspectorPanel from "./InspectorPanel/InspectorPanel";
 import MapMarkerAndAreaControls from "./MapMarkerAndAreaControls";
 import MapStyleSelector from "./MapStyleSelector";
 import ZoomControl from "./ZoomControl";
diff --git a/src/app/(private)/map/[id]/components/PrivateMapOverlay.tsx b/src/app/(private)/map/[id]/components/PrivateMapOverlay.tsx
index ad86b771..474af732 100644
--- a/src/app/(private)/map/[id]/components/PrivateMapOverlay.tsx
+++ b/src/app/(private)/map/[id]/components/PrivateMapOverlay.tsx
@@ -27,7 +27,7 @@ import { useMapQuery } from "../hooks/useMapQuery";
 import { CONTROL_PANEL_WIDTH } from "../styles";
 import ControlPanel from "./controls/ControlPanel";
 import VisualisationPanel from "./controls/VisualisationPanel/VisualisationPanel";
-import EditColumnMetadataModal from "./EditColumnMetadataModal";
+import EditColumnMetadataModal from "./EditColumnMetadataModal/EditColumnMetadataModal";
 import Loading from "./Loading";
 import MapInfoPopup from "./MapInfoPopup";
 import PrivateMapControls from "./PrivateMapControls";
diff --git a/src/app/(private)/map/[id]/components/controls/VisualisationPanel/VisualisationPanel.tsx b/src/app/(private)/map/[id]/components/controls/VisualisationPanel/VisualisationPanel.tsx
index 0be4fd05..e5a36c61 100644
--- a/src/app/(private)/map/[id]/components/controls/VisualisationPanel/VisualisationPanel.tsx
+++ b/src/app/(private)/map/[id]/components/controls/VisualisationPanel/VisualisationPanel.tsx
@@ -148,7 +148,7 @@ function SetCategoryColorsButton() {
             column: viewConfig.areaDataColumn,
             fields: {
               valueLabels: true,
-              categoryColors: true,
+              colorMappings: true,
             },
           });
         }
diff --git a/src/app/(private)/map/[id]/constants.ts b/src/app/(private)/map/[id]/constants.ts
index 6b63f2cb..a6aff25c 100644
--- a/src/app/(private)/map/[id]/constants.ts
+++ b/src/app/(private)/map/[id]/constants.ts
@@ -1,54 +1,3 @@
-export const DEFAULT_FILL_COLOR = "rgba(0, 0, 0, 0)";
+export { PARTY_COLORS } from "@/constants/colors";
 
-export const PARTY_COLORS: Record<string, string> = {
-  con: "rgb(0, 135, 220)",
-  conservative: "rgb(0, 135, 220)",
-  "conservative party": "rgb(0, 135, 220)",
-  "conservative and unionist party": "rgb(0, 135, 220)",
-  tory: "rgb(0, 135, 220)",
-  tories: "rgb(0, 135, 220)",
-  lab: "rgb(227, 6, 19)",
-  labour: "rgb(227, 6, 19)",
-  "labour party": "rgb(227, 6, 19)",
-  ld: "rgb(253, 187, 48)",
-  "lib dem": "rgb(253, 187, 48)",
-  "lib dems": "rgb(253, 187, 48)",
-  "liberal democrats": "rgb(253, 187, 48)",
-  "liberal democrat": "rgb(253, 187, 48)",
-  libdem: "rgb(253, 187, 48)",
-  libdems: "rgb(253, 187, 48)",
-  ruk: "rgb(18, 174, 219)",
-  "reform uk": "rgb(18, 174, 219)",
-  reform: "rgb(18, 174, 219)",
-  green: "rgb(108, 192, 58)",
-  "green party": "rgb(108, 192, 58)",
-  greens: "rgb(108, 192, 58)",
-  snp: "rgb(255, 242, 0)",
-  "scottish national party": "rgb(255, 242, 0)",
-  "scottish nationalist party": "rgb(255, 242, 0)",
-  nats: "rgb(255, 242, 0)",
-  pc: "rgb(0, 129, 66)",
-  "plaid cymru": "rgb(0, 129, 66)",
-  plaid: "rgb(0, 129, 66)",
-  dup: "rgb(209, 69, 53)",
-  "democratic unionist party": "rgb(209, 69, 53)",
-  "democratic unionists": "rgb(209, 69, 53)",
-  sf: "rgb(82, 130, 58)",
-  "sinn fein": "rgb(82, 130, 58)",
-  "sinn féin": "rgb(82, 130, 58)",
-  "shin fein": "rgb(82, 130, 58)",
-  sdlp: "rgb(153, 204, 0)",
-  "social democratic and labour party": "rgb(153, 204, 0)",
-  "social democratic & labour party": "rgb(153, 204, 0)",
-  uup: "rgb(155, 36, 35)",
-  "ulster unionist party": "rgb(155, 36, 35)",
-  "ulster unionists": "rgb(155, 36, 35)",
-  apni: "rgb(244, 198, 0)",
-  "alliance party of northern ireland": "rgb(244, 198, 0)",
-  "alliance party": "rgb(244, 198, 0)",
-  alliance: "rgb(244, 198, 0)",
-  ind: "rgb(128, 128, 128)",
-  independent: "rgb(128, 128, 128)",
-  independents: "rgb(128, 128, 128)",
-  "non-partisan": "rgb(128, 128, 128)",
-};
+export const DEFAULT_FILL_COLOR = "rgba(0, 0, 0, 0)";
diff --git a/src/app/(private)/map/[id]/hooks/useColumnMetadataMutations.ts b/src/app/(private)/map/[id]/hooks/useColumnMetadataMutations.ts
new file mode 100644
index 00000000..90b6e401
--- /dev/null
+++ b/src/app/(private)/map/[id]/hooks/useColumnMetadataMutations.ts
@@ -0,0 +1,67 @@
+"use client";
+
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { toast } from "sonner";
+import { useOrganisationId } from "@/atoms/organisationAtoms";
+import { useTRPC } from "@/services/trpc/react";
+
+export function useColumnMetadataMutations() {
+  const trpc = useTRPC();
+  const client = useQueryClient();
+  const organisationId = useOrganisationId();
+
+  const { mutate: patchColumnMetadata } = useMutation(
+    trpc.dataSource.patchColumnMetadata.mutationOptions({
+      onSuccess: (data, variables) => {
+        client.setQueryData(
+          trpc.dataSource.listReadable.queryKey({
+            activeOrganisationId: organisationId ?? undefined,
+          }),
+          (old) =>
+            old?.map((ds) =>
+              ds.id === variables.dataSourceId
+                ? { ...ds, columnMetadata: data.columnMetadata }
+                : ds,
+            ),
+        );
+      },
+      onError: (error) => {
+        toast.error(error.message || "Could not save column metadata.");
+      },
+    }),
+  );
+
+  const { mutate: patchColumnMetadataOverride } = useMutation(
+    trpc.dataSource.patchColumnMetadataOverride.mutationOptions({
+      onSuccess: (data, variables) => {
+        client.setQueryData(
+          trpc.dataSource.listReadable.queryKey({
+            activeOrganisationId: organisationId ?? undefined,
+          }),
+          (old) =>
+            old?.map((ds) =>
+              ds.id === variables.dataSourceId
+                ? {
+                    ...ds,
+                    organisationOverride: {
+                      ...(ds.organisationOverride ?? {
+                        id: 0,
+                        organisationId: organisationId ?? "",
+                        dataSourceId: variables.dataSourceId,
+                        inspectorColumns: [],
+                      }),
+                      columnMetadata: data.columnMetadata,
+                    },
+                  }
+                : ds,
+            ),
+        );
+      },
+      onError: (error) => {
+        toast.error(error.message || "Could not save column metadata.");
+      },
+    }),
+  );
+
+  return { patchColumnMetadata, patchColumnMetadataOverride };
+}
diff --git a/src/app/(private)/map/[id]/hooks/useDisplayAreaStats.ts b/src/app/(private)/map/[id]/hooks/useDisplayAreaStats.ts
index 3599376a..770464f1 100644
--- a/src/app/(private)/map/[id]/hooks/useDisplayAreaStats.ts
+++ b/src/app/(private)/map/[id]/hooks/useDisplayAreaStats.ts
@@ -29,10 +29,28 @@ export const useDisplayAreaStats = <
   const { viewConfig } = useMapViews();
   const choroplethDataSource = useChoroplethDataSource();
 
+  const resolvedMetadata = useMemo(
+    () =>
+      resolveColumnMetadata(
+        choroplethDataSource?.columnMetadata ?? [],
+        choroplethDataSource?.organisationOverride?.columnMetadata,
+      ),
+    [choroplethDataSource],
+  );
+
+  const columnMetadata = resolvedMetadata.find(
+    (c) => c.name === areaStats?.primary?.column,
+  );
+
+  const secondaryColumnMetadata = resolvedMetadata.find(
+    (c) => c.name === areaStats?.secondary?.column,
+  );
+
   const fillColor = useFillColor({
     areaStats,
     viewConfig,
     selectedBivariateBucket: null,
+    resolvedColorMappings: columnMetadata?.colorMappings,
   });
 
   const { result, value: fillColorExpression } = expression.createExpression([
@@ -48,23 +66,6 @@ export const useDisplayAreaStats = <
     );
   }
 
-  const resolvedMetadata = useMemo(
-    () =>
-      resolveColumnMetadata(
-        choroplethDataSource?.columnMetadata ?? [],
-        choroplethDataSource?.organisationOverride?.columnMetadata,
-      ),
-    [choroplethDataSource],
-  );
-
-  const columnMetadata = resolvedMetadata.find(
-    (c) => c.name === areaStats?.primary?.column,
-  );
-
-  const secondaryColumnMetadata = resolvedMetadata.find(
-    (c) => c.name === areaStats?.secondary?.column,
-  );
-
   const areasToDisplay = useMemo((): (T & DisplayAreaStat)[] => {
     return areas.map((area) => {
       const areaStat = areaStats?.stats.find(
diff --git a/src/app/(private)/map/[id]/hooks/useInspector.ts b/src/app/(private)/map/[id]/hooks/useInspector.ts
index 7df4e559..6c8d93f5 100644
--- a/src/app/(private)/map/[id]/hooks/useInspector.ts
+++ b/src/app/(private)/map/[id]/hooks/useInspector.ts
@@ -5,7 +5,7 @@ import { useDataSources } from "@/app/(private)/map/[id]/hooks/useDataSources";
 import { useMapConfig } from "@/app/(private)/map/[id]/hooks/useMapConfig";
 import { LayerType } from "@/types";
 import { useInspectorState } from "./useInspectorState";
-import type { PropertiesListItem } from "../components/inspector/SimplePropertiesList";
+import type { PropertiesListItem } from "../components/InspectorPanel/SimplePropertiesList";
 import type { DataSource } from "@/models/DataSource";
 
 export function useInspectorContent() {
diff --git a/src/app/api/login/route.ts b/src/app/api/login/route.ts
index 3a6b9f7d..9ee06306 100644
--- a/src/app/api/login/route.ts
+++ b/src/app/api/login/route.ts
@@ -7,7 +7,7 @@ import {
   checkLoginAttempt,
   getClientIp,
   rollbackLoginAttempt,
-} from "@/server/utils/ratelimit";
+} from "@/server/services/ratelimit";
 
 const loginSchema = z.object({
   email: z.string().email(),
diff --git a/src/components/ColorMappingsEditor.tsx b/src/components/ColorMappingsEditor.tsx
new file mode 100644
index 00000000..990caced
--- /dev/null
+++ b/src/components/ColorMappingsEditor.tsx
@@ -0,0 +1,132 @@
+"use client";
+
+import { X } from "lucide-react";
+import { Button } from "@/shadcn/ui/button";
+import { Input } from "@/shadcn/ui/input";
+import { getCategoryColorScale } from "@/utils/colors";
+
+interface ColorMappingsEditorProps {
+  /** Sorted distinct values to display. `undefined` = still loading, `null` = too many values. */
+  values: string[] | null | undefined;
+  /** Explicitly-set colour mappings (value → hex). These determine whether reset buttons appear. */
+  colorMappings: Record<string, string>;
+  /**
+   * Fallback display colours for values not in `colorMappings` (shown before D3 defaults).
+   * Use this to surface canonical data-source colours when the current layer has no override.
+   */
+  fallbackColors?: Record<string, string>;
+  onChange: (value: string, color: string) => void;
+  onReset: (value: string) => void;
+  onResetAll: () => void;
+  /** If provided, shows a "Save as data source defaults" button when there are map-level overrides. */
+  onSaveAsDefaults?: () => void;
+  /** If provided, shows a "Use source colours" button for non-owners to copy the owner's colours. */
+  onUseSourceColors?: () => void;
+}
+
+export default function ColorMappingsEditor({
+  values,
+  colorMappings,
+  fallbackColors,
+  onChange,
+  onReset,
+  onResetAll,
+  onSaveAsDefaults,
+  onUseSourceColors,
+}: ColorMappingsEditorProps) {
+  if (values === undefined) {
+    return <p className="text-sm text-muted-foreground p-3">Loading values…</p>;
+  }
+  if (values === null) {
+    return (
+      <p className="text-sm text-muted-foreground p-3">
+        Too many unique values to configure colours.
+      </p>
+    );
+  }
+  if (values.length === 0) {
+    return (
+      <p className="text-sm text-muted-foreground p-3">No values found.</p>
+    );
+  }
+
+  const defaultColor = getCategoryColorScale(values);
+  const hasMappings = Object.keys(colorMappings).length > 0;
+
+  return (
+    <div className="p-2 flex flex-col gap-1">
+      {values.map((value) => {
+        const explicit = colorMappings[value];
+        const displayColor =
+          explicit ?? fallbackColors?.[value] ?? defaultColor(value);
+        return (
+          <div key={value} className="flex items-center gap-2">
+            <label className="relative cursor-pointer shrink-0">
+              <div
+                className="w-7 h-7 rounded border border-neutral-300"
+                style={{ backgroundColor: displayColor }}
+              />
+              <Input
+                type="color"
+                value={displayColor}
+                onChange={(e) => onChange(value, e.target.value)}
+                className="absolute inset-0 w-full h-full opacity-0 cursor-pointer p-0"
+              />
+            </label>
+            <span className="font-mono text-xs text-muted-foreground truncate flex-1">
+              {value || "(blank)"}
+            </span>
+            {explicit && (
+              <button
+                type="button"
+                onClick={() => onReset(value)}
+                className="h-5 w-5 flex items-center justify-center rounded hover:bg-neutral-100 shrink-0"
+                title="Reset to default colour"
+              >
+                <X className="h-3 w-3" />
+              </button>
+            )}
+          </div>
+        );
+      })}
+      {(hasMappings || onUseSourceColors) && (
+        <>
+          {hasMappings && (
+            <Button
+              variant="ghost"
+              size="sm"
+              className="mt-1 text-xs text-muted-foreground w-full justify-start"
+              onClick={onResetAll}
+            >
+              Reset all colours
+            </Button>
+          )}
+          {onUseSourceColors && (
+            <Button
+              variant="ghost"
+              size="sm"
+              className={
+                hasMappings
+                  ? "text-xs text-muted-foreground w-full justify-start"
+                  : "mt-1 text-xs text-muted-foreground w-full justify-start"
+              }
+              onClick={onUseSourceColors}
+            >
+              Use source colours
+            </Button>
+          )}
+          {onSaveAsDefaults && hasMappings && (
+            <Button
+              variant="ghost"
+              size="sm"
+              className="text-xs text-muted-foreground w-full justify-start"
+              onClick={onSaveAsDefaults}
+            >
+              Save as data source defaults
+            </Button>
+          )}
+        </>
+      )}
+    </div>
+  );
+}
diff --git a/src/components/ValueLabelsEditor.tsx b/src/components/ValueLabelsEditor.tsx
new file mode 100644
index 00000000..c4943e20
--- /dev/null
+++ b/src/components/ValueLabelsEditor.tsx
@@ -0,0 +1,81 @@
+"use client";
+
+import { ColumnType } from "@/models/DataSource";
+import { Input } from "@/shadcn/ui/input";
+import { ScrollArea } from "@/shadcn/ui/scroll-area";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/shadcn/ui/table";
+
+interface ValueLabelsEditorProps {
+  /** Sorted distinct values to display. `undefined` = still loading, `null` = too many values. */
+  values: string[] | null | undefined;
+  columnType: ColumnType | undefined;
+  valueLabels: Record<string, string>;
+  onChange: (value: string, label: string) => void;
+}
+
+export default function ValueLabelsEditor({
+  values,
+  columnType,
+  valueLabels,
+  onChange,
+}: ValueLabelsEditorProps) {
+  if (values === undefined) {
+    return <p className="text-sm text-muted-foreground">Loading values…</p>;
+  }
+  if (values === null) {
+    return (
+      <p className="text-sm text-muted-foreground">
+        Too many unique values to configure labels.
+      </p>
+    );
+  }
+  if (values.length === 0) {
+    return <p className="text-sm text-muted-foreground">No values found.</p>;
+  }
+
+  const sorted = values.toSorted((a, b) => {
+    if (columnType === ColumnType.Number) {
+      const numA = Number(a);
+      const numB = Number(b);
+      if (isNaN(numA) || isNaN(numB)) return a.localeCompare(b);
+      return numA - numB;
+    }
+    return a.localeCompare(b);
+  });
+
+  return (
+    <ScrollArea className="max-h-64 rounded-md border">
+      <Table>
+        <TableHeader>
+          <TableRow>
+            <TableHead>Value</TableHead>
+            <TableHead>Label</TableHead>
+          </TableRow>
+        </TableHeader>
+        <TableBody>
+          {sorted.map((value) => (
+            <TableRow key={value}>
+              <TableCell className="font-mono text-sm text-muted-foreground whitespace-normal">
+                {value || "(blank)"}
+              </TableCell>
+              <TableCell>
+                <Input
+                  value={valueLabels[value] ?? ""}
+                  onChange={(e) => onChange(value, e.target.value)}
+                  className="h-8 text-sm"
+                />
+              </TableCell>
+            </TableRow>
+          ))}
+        </TableBody>
+      </Table>
+    </ScrollArea>
+  );
+}
diff --git a/src/constants/colors.ts b/src/constants/colors.ts
new file mode 100644
index 00000000..643115a1
--- /dev/null
+++ b/src/constants/colors.ts
@@ -0,0 +1,52 @@
+export const PARTY_COLORS: Record<string, string> = {
+  con: "rgb(0, 135, 220)",
+  conservative: "rgb(0, 135, 220)",
+  "conservative party": "rgb(0, 135, 220)",
+  "conservative and unionist party": "rgb(0, 135, 220)",
+  tory: "rgb(0, 135, 220)",
+  tories: "rgb(0, 135, 220)",
+  lab: "rgb(227, 6, 19)",
+  labour: "rgb(227, 6, 19)",
+  "labour party": "rgb(227, 6, 19)",
+  ld: "rgb(253, 187, 48)",
+  "lib dem": "rgb(253, 187, 48)",
+  "lib dems": "rgb(253, 187, 48)",
+  "liberal democrats": "rgb(253, 187, 48)",
+  "liberal democrat": "rgb(253, 187, 48)",
+  libdem: "rgb(253, 187, 48)",
+  libdems: "rgb(253, 187, 48)",
+  ruk: "rgb(18, 174, 219)",
+  "reform uk": "rgb(18, 174, 219)",
+  reform: "rgb(18, 174, 219)",
+  green: "rgb(108, 192, 58)",
+  "green party": "rgb(108, 192, 58)",
+  greens: "rgb(108, 192, 58)",
+  snp: "rgb(255, 242, 0)",
+  "scottish national party": "rgb(255, 242, 0)",
+  "scottish nationalist party": "rgb(255, 242, 0)",
+  nats: "rgb(255, 242, 0)",
+  pc: "rgb(0, 129, 66)",
+  "plaid cymru": "rgb(0, 129, 66)",
+  plaid: "rgb(0, 129, 66)",
+  dup: "rgb(209, 69, 53)",
+  "democratic unionist party": "rgb(209, 69, 53)",
+  "democratic unionists": "rgb(209, 69, 53)",
+  sf: "rgb(82, 130, 58)",
+  "sinn fein": "rgb(82, 130, 58)",
+  "sinn féin": "rgb(82, 130, 58)",
+  "shin fein": "rgb(82, 130, 58)",
+  sdlp: "rgb(153, 204, 0)",
+  "social democratic and labour party": "rgb(153, 204, 0)",
+  "social democratic & labour party": "rgb(153, 204, 0)",
+  uup: "rgb(155, 36, 35)",
+  "ulster unionist party": "rgb(155, 36, 35)",
+  "ulster unionists": "rgb(155, 36, 35)",
+  apni: "rgb(244, 198, 0)",
+  "alliance party of northern ireland": "rgb(244, 198, 0)",
+  "alliance party": "rgb(244, 198, 0)",
+  alliance: "rgb(244, 198, 0)",
+  ind: "rgb(128, 128, 128)",
+  independent: "rgb(128, 128, 128)",
+  independents: "rgb(128, 128, 128)",
+  "non-partisan": "rgb(128, 128, 128)",
+};
diff --git a/src/constants.ts b/src/constants/index.ts
similarity index 98%
rename from src/constants.ts
rename to src/constants/index.ts
index cf05e76e..a773beda 100644
--- a/src/constants.ts
+++ b/src/constants/index.ts
@@ -1,3 +1,5 @@
+export * from "./colors";
+
 export const ADMIN_ORGANISATION_NAME = "Common Knowledge";
 export const ADMIN_USER_EMAIL = "hello@commonknowledge.coop";
 
diff --git a/src/hooks/useColumnValues.ts b/src/hooks/useColumnValues.ts
new file mode 100644
index 00000000..5f3805b8
--- /dev/null
+++ b/src/hooks/useColumnValues.ts
@@ -0,0 +1,69 @@
+import { useQuery } from "@tanstack/react-query";
+import { useMemo } from "react";
+import { ColumnType } from "@/models/DataSource";
+import { useTRPC } from "@/services/trpc/react";
+
+const BLANK_VALUES = new Set(["", "null", "undefined"]);
+
+export function applyNullIsZero(values: string[]): string[] {
+  const hasBlankOrZero =
+    values.some((v) => BLANK_VALUES.has(v)) || values.includes("0");
+  if (!hasBlankOrZero) return values;
+  const filtered = values.filter((v) => !BLANK_VALUES.has(v));
+  if (!filtered.includes("0")) filtered.push("0");
+  return filtered;
+}
+
+/**
+ * Fetches unique column values for a data source column, applying nullIsZero
+ * normalisation and numeric-aware sorting.
+ *
+ * Returns:
+ *   - `undefined` while loading
+ *   - `null` if there are too many distinct values (server returned null)
+ *   - sorted `string[]` otherwise
+ */
+export function useColumnValues({
+  dataSourceId,
+  column,
+  columnType,
+  nullIsZero,
+  enabled,
+  additionalValues,
+}: {
+  dataSourceId: string;
+  column: string;
+  columnType: ColumnType;
+  nullIsZero: boolean | undefined;
+  enabled: boolean;
+  additionalValues?: string[];
+}): string[] | null | undefined {
+  const trpc = useTRPC();
+
+  const { data: rawValues } = useQuery(
+    trpc.dataSource.uniqueColumnValues.queryOptions(
+      { dataSourceId, column },
+      { enabled },
+    ),
+  );
+
+  return useMemo(() => {
+    if (rawValues == null) return rawValues;
+
+    let values = Array.from(
+      new Set([...rawValues, ...(additionalValues ?? [])]),
+    );
+    if (nullIsZero && columnType === ColumnType.Number) {
+      values = applyNullIsZero(values);
+    }
+
+    return values.toSorted((a, b) => {
+      if (columnType === ColumnType.Number) {
+        const numA = Number(a);
+        const numB = Number(b);
+        if (!isNaN(numA) && !isNaN(numB)) return numA - numB;
+      }
+      return a.localeCompare(b);
+    });
+  }, [rawValues, additionalValues, nullIsZero, columnType]);
+}
diff --git a/src/models/MapView.ts b/src/models/MapView.ts
index 2a399957..c5b00b2e 100644
--- a/src/models/MapView.ts
+++ b/src/models/MapView.ts
@@ -140,7 +140,7 @@ export const mapViewConfigSchema = z.object({
   calculationType: z.nativeEnum(CalculationType).nullish(),
   colorScheme: z.nativeEnum(ColorScheme).nullish(),
   reverseColorScheme: z.boolean().nullish(),
-  categoryColors: z.record(z.string(), z.string()).optional(),
+  colorMappings: z.record(z.string(), z.string()).optional(),
   colorScaleType: z.nativeEnum(ColorScaleType).optional(),
   steppedColorStepsByKey: z
     .record(z.string(), z.array(steppedColorStepSchema))
diff --git a/src/server/utils/ratelimit.ts b/src/server/services/ratelimit.ts
similarity index 100%
rename from src/server/utils/ratelimit.ts
rename to src/server/services/ratelimit.ts
diff --git a/src/server/trpc/index.ts b/src/server/trpc/index.ts
index 99803c45..22932769 100644
--- a/src/server/trpc/index.ts
+++ b/src/server/trpc/index.ts
@@ -3,8 +3,8 @@ import superjson from "superjson";
 import z, { ZodError } from "zod";
 import { getServerSession } from "@/auth";
 import { ADMIN_USER_EMAIL } from "@/constants";
+import { getClientIp } from "@/server/services/ratelimit";
 import { canReadDataSource } from "@/server/utils/auth";
-import { getClientIp } from "@/server/utils/ratelimit";
 import {
   hasPasswordHashSerializer,
   serverDataSourceSerializer,
diff --git a/src/server/trpc/routers/auth.ts b/src/server/trpc/routers/auth.ts
index 26d638ad..573e205b 100644
--- a/src/server/trpc/routers/auth.ts
+++ b/src/server/trpc/routers/auth.ts
@@ -20,7 +20,7 @@ import {
 } from "@/server/repositories/User";
 import logger from "@/server/services/logger";
 import { sendEmail } from "@/server/services/mailer";
-import { checkForgotPasswordAttempt } from "@/server/utils/ratelimit";
+import { checkForgotPasswordAttempt } from "@/server/services/ratelimit";
 import { publicProcedure, router } from "../index";
 
 export const authRouter = router({
diff --git a/src/server/trpc/routers/dataSource.ts b/src/server/trpc/routers/dataSource.ts
index ad7b5b77..eaf5a6e3 100644
--- a/src/server/trpc/routers/dataSource.ts
+++ b/src/server/trpc/routers/dataSource.ts
@@ -31,6 +31,7 @@ import {
   updateDataSource,
 } from "@/server/repositories/DataSource";
 import {
+  findDataSourceOrganisationOverride,
   findDataSourceOrganisationOverridesByOrg,
   upsertDataSourceOrganisationOverride,
 } from "@/server/repositories/DataSourceOrganisationOverride";
@@ -612,6 +613,71 @@ export const dataSourceRouter = router({
       return true;
     }),
 
+  patchColumnMetadata: dataSourceOwnerProcedure
+    .input(
+      z.object({
+        column: z.string(),
+        patch: columnMetadataSchema.omit({ name: true }).partial(),
+      }),
+    )
+    .mutation(async ({ ctx, input }) => {
+      const existing = ctx.dataSource.columnMetadata ?? [];
+      const hasEntry = existing.some((m) => m.name === input.column);
+      const updated = hasEntry
+        ? existing.map((m) =>
+            m.name === input.column ? { ...m, ...input.patch } : m,
+          )
+        : [
+            ...existing,
+            {
+              name: input.column,
+              description: "",
+              valueLabels: {},
+              ...input.patch,
+            },
+          ];
+      await updateDataSource(ctx.dataSource.id, { columnMetadata: updated });
+      return { columnMetadata: updated };
+    }),
+
+  patchColumnMetadataOverride: organisationProcedure
+    .input(
+      z.object({
+        dataSourceId: z.string(),
+        column: z.string(),
+        patch: columnMetadataSchema.omit({ name: true }).partial(),
+      }),
+    )
+    .mutation(async ({ ctx, input }) => {
+      const existing = await findDataSourceOrganisationOverride(
+        ctx.organisation.id,
+        input.dataSourceId,
+      );
+      const existingMetadata = existing?.columnMetadata ?? [];
+      const inspectorColumns = existing?.inspectorColumns ?? [];
+      const hasEntry = existingMetadata.some((m) => m.name === input.column);
+      const updated = hasEntry
+        ? existingMetadata.map((m) =>
+            m.name === input.column ? { ...m, ...input.patch } : m,
+          )
+        : [
+            ...existingMetadata,
+            {
+              name: input.column,
+              description: "",
+              valueLabels: {},
+              ...input.patch,
+            },
+          ];
+      await upsertDataSourceOrganisationOverride(
+        ctx.organisation.id,
+        input.dataSourceId,
+        updated,
+        inspectorColumns,
+      );
+      return { columnMetadata: updated };
+    }),
+
   events: dataSourceOwnerProcedure.subscription(async function* ({
     ctx,
     signal,
diff --git a/src/utils/colors.ts b/src/utils/colors.ts
new file mode 100644
index 00000000..f931f9e5
--- /dev/null
+++ b/src/utils/colors.ts
@@ -0,0 +1,11 @@
+import { scaleOrdinal } from "d3-scale";
+import { schemeCategory10 } from "d3-scale-chromatic";
+import { PARTY_COLORS } from "@/constants/colors";
+
+/** Returns a function that maps a category value to its default display colour,
+ *  checking PARTY_COLORS first then falling back to a D3 ordinal scale. */
+export const getCategoryColorScale = (values: string[]) => {
+  const ordinalScale = scaleOrdinal(schemeCategory10).domain(values);
+  return (value: string) =>
+    PARTY_COLORS[value.toLowerCase()] ?? ordinalScale(value);
+};
diff --git a/tests/unit/app/api/login/route.test.ts b/tests/unit/app/api/login/route.test.ts
index 8ba4b2d5..cda00c8c 100644
--- a/tests/unit/app/api/login/route.test.ts
+++ b/tests/unit/app/api/login/route.test.ts
@@ -4,7 +4,7 @@ import { beforeEach, describe, expect, test, vi } from "vitest";
 vi.mock("@/server/repositories/User", () => ({
   findUserByEmailAndPassword: vi.fn(),
 }));
-vi.mock("@/server/utils/ratelimit", async (importOriginal) => {
+vi.mock("@/server/services/ratelimit", async (importOriginal) => {
   const actual = await importOriginal();
   return {
     ...(actual as object),
@@ -24,7 +24,7 @@ import { findUserByEmailAndPassword } from "@/server/repositories/User";
 import {
   checkLoginAttempt,
   rollbackLoginAttempt,
-} from "@/server/utils/ratelimit";
+} from "@/server/services/ratelimit";
 
 const mockCheckLoginAttempt = vi.mocked(checkLoginAttempt);
 const mockRollbackLoginAttempt = vi.mocked(rollbackLoginAttempt);
diff --git a/tests/unit/server/trpc/routers/auth.test.ts b/tests/unit/server/trpc/routers/auth.test.ts
index 32e26c58..57bedcae 100644
--- a/tests/unit/server/trpc/routers/auth.test.ts
+++ b/tests/unit/server/trpc/routers/auth.test.ts
@@ -1,6 +1,6 @@
 import { beforeEach, describe, expect, test, vi } from "vitest";
 
-vi.mock("@/server/utils/ratelimit", () => ({
+vi.mock("@/server/services/ratelimit", () => ({
   checkForgotPasswordAttempt: vi.fn(),
 }));
 vi.mock("@/server/repositories/User", () => ({
@@ -14,8 +14,8 @@ vi.mock("@/server/services/logger", () => ({
 }));
 
 import { findUserByEmail } from "@/server/repositories/User";
+import { checkForgotPasswordAttempt } from "@/server/services/ratelimit";
 import { authRouter } from "@/server/trpc/routers/auth";
-import { checkForgotPasswordAttempt } from "@/server/utils/ratelimit";
 
 const mockCheckForgotPasswordAttempt = vi.mocked(checkForgotPasswordAttempt);
 const mockFindUserByEmail = vi.mocked(findUserByEmail);

From e08a788b49bab82d15a3a77d969621d99198001c Mon Sep 17 00:00:00 2001
From: Joaquim d'Souza <joaquimds@gmail.com>
Date: Tue, 24 Mar 2026 16:39:13 +0100
Subject: [PATCH 5/6] wip: refactor

---
 ...0_rename_column_metadata_color_mappings.ts | 75 +++++++++++++++++++
 .../[id]/components/ColumnMetadataTable.tsx   |  8 +-
 .../map/[id]/atoms/editColumnMetadataAtom.ts  |  2 +-
 .../Choropleth/useChoroplethColors.ts         |  2 +-
 .../ColorMappingsSection.tsx                  | 12 +--
 .../EditColumnMetadataModal.tsx               |  4 +-
 .../(private)/map/[id]/components/Legend.tsx  |  4 +-
 .../VisualisationPanel/VisualisationPanel.tsx |  2 +-
 .../map/[id]/hooks/useDisplayAreaStats.ts     |  2 +-
 src/models/DataSource.ts                      |  2 +-
 src/utils/resolveColumnMetadata.ts            |  6 +-
 .../unit/utils/resolveColumnMetadata.test.ts  | 14 ++--
 12 files changed, 104 insertions(+), 29 deletions(-)
 create mode 100644 migrations/1774300000000_rename_column_metadata_color_mappings.ts

diff --git a/migrations/1774300000000_rename_column_metadata_color_mappings.ts b/migrations/1774300000000_rename_column_metadata_color_mappings.ts
new file mode 100644
index 00000000..699ffb3e
--- /dev/null
+++ b/migrations/1774300000000_rename_column_metadata_color_mappings.ts
@@ -0,0 +1,75 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { sql } from "kysely";
+import type { Kysely } from "kysely";
+
+export async function up(db: Kysely<any>): Promise<void> {
+  await sql`
+    UPDATE "dataSource"
+    SET "columnMetadata" = (
+      SELECT jsonb_agg(
+        CASE
+          WHEN col ? 'colorMappings'
+          THEN jsonb_set(col - 'colorMappings', '{valueColors}', col->'colorMappings')
+          ELSE col
+        END
+      )
+      FROM jsonb_array_elements("columnMetadata") AS col
+    )
+    WHERE EXISTS (
+      SELECT 1 FROM jsonb_array_elements("columnMetadata") AS col WHERE col ? 'colorMappings'
+    )
+  `.execute(db);
+
+  await sql`
+    UPDATE "dataSourceOrganisationOverride"
+    SET "columnMetadata" = (
+      SELECT jsonb_agg(
+        CASE
+          WHEN col ? 'colorMappings'
+          THEN jsonb_set(col - 'colorMappings', '{valueColors}', col->'colorMappings')
+          ELSE col
+        END
+      )
+      FROM jsonb_array_elements("columnMetadata") AS col
+    )
+    WHERE EXISTS (
+      SELECT 1 FROM jsonb_array_elements("columnMetadata") AS col WHERE col ? 'colorMappings'
+    )
+  `.execute(db);
+}
+
+export async function down(db: Kysely<any>): Promise<void> {
+  await sql`
+    UPDATE "dataSource"
+    SET "columnMetadata" = (
+      SELECT jsonb_agg(
+        CASE
+          WHEN col ? 'valueColors'
+          THEN jsonb_set(col - 'valueColors', '{colorMappings}', col->'valueColors')
+          ELSE col
+        END
+      )
+      FROM jsonb_array_elements("columnMetadata") AS col
+    )
+    WHERE EXISTS (
+      SELECT 1 FROM jsonb_array_elements("columnMetadata") AS col WHERE col ? 'valueColors'
+    )
+  `.execute(db);
+
+  await sql`
+    UPDATE "dataSourceOrganisationOverride"
+    SET "columnMetadata" = (
+      SELECT jsonb_agg(
+        CASE
+          WHEN col ? 'valueColors'
+          THEN jsonb_set(col - 'valueColors', '{colorMappings}', col->'valueColors')
+          ELSE col
+        END
+      )
+      FROM jsonb_array_elements("columnMetadata") AS col
+    )
+    WHERE EXISTS (
+      SELECT 1 FROM jsonb_array_elements("columnMetadata") AS col WHERE col ? 'valueColors'
+    )
+  `.execute(db);
+}
diff --git a/src/app/(private)/(dashboards)/data-sources/[id]/components/ColumnMetadataTable.tsx b/src/app/(private)/(dashboards)/data-sources/[id]/components/ColumnMetadataTable.tsx
index 9a208a85..c0c1f7c0 100644
--- a/src/app/(private)/(dashboards)/data-sources/[id]/components/ColumnMetadataTable.tsx
+++ b/src/app/(private)/(dashboards)/data-sources/[id]/components/ColumnMetadataTable.tsx
@@ -208,7 +208,7 @@ export default function ColumnMetadataTable({
       valueLabels: existing.get(col.name)?.valueLabels ?? {},
       description: existing.get(col.name)?.description ?? "",
       semanticType: existing.get(col.name)?.semanticType,
-      colorMappings: existing.get(col.name)?.colorMappings,
+      valueColors: existing.get(col.name)?.valueColors,
     }));
   }, [dataSource.columnDefs, dataSource.columnMetadata]);
 
@@ -282,9 +282,9 @@ export default function ColumnMetadataTable({
   );
 
   const handleColorMappingsChange = useCallback(
-    (index: number, colorMappings: Record<string, string>) => {
+    (index: number, valueColors: Record<string, string>) => {
       const updated = metadata.map((m, i) =>
-        i === index ? { ...m, colorMappings } : m,
+        i === index ? { ...m, valueColors } : m,
       );
       setMetadata(updated);
       save(updated);
@@ -394,7 +394,7 @@ export default function ColumnMetadataTable({
                     columnName={col.name}
                     columnType={colDef?.type ?? ColumnType.Unknown}
                     nullIsZero={dataSource.nullIsZero}
-                    currentMappings={col.colorMappings ?? {}}
+                    currentMappings={col.valueColors ?? {}}
                     onSave={(mappings) =>
                       handleColorMappingsChange(index, mappings)
                     }
diff --git a/src/app/(private)/map/[id]/atoms/editColumnMetadataAtom.ts b/src/app/(private)/map/[id]/atoms/editColumnMetadataAtom.ts
index 16048ba7..321265e4 100644
--- a/src/app/(private)/map/[id]/atoms/editColumnMetadataAtom.ts
+++ b/src/app/(private)/map/[id]/atoms/editColumnMetadataAtom.ts
@@ -3,7 +3,7 @@ import { atom } from "jotai";
 export interface EditColumnMetadataFields {
   description?: boolean;
   valueLabels?: boolean;
-  colorMappings?: boolean;
+  valueColors?: boolean;
 }
 
 export const editColumnMetadataAtom = atom<{
diff --git a/src/app/(private)/map/[id]/components/Choropleth/useChoroplethColors.ts b/src/app/(private)/map/[id]/components/Choropleth/useChoroplethColors.ts
index 879da697..6026366b 100644
--- a/src/app/(private)/map/[id]/components/Choropleth/useChoroplethColors.ts
+++ b/src/app/(private)/map/[id]/components/Choropleth/useChoroplethColors.ts
@@ -25,7 +25,7 @@ export function useChoroplethFillColor() {
       dataSource.columnMetadata,
       dataSource.organisationOverride?.columnMetadata,
     );
-    return resolved.find((m) => m.name === primaryColumn)?.colorMappings;
+    return resolved.find((m) => m.name === primaryColumn)?.valueColors;
   }, [dataSource, primaryColumn]);
 
   // Get fill color
diff --git a/src/app/(private)/map/[id]/components/EditColumnMetadataModal/ColorMappingsSection.tsx b/src/app/(private)/map/[id]/components/EditColumnMetadataModal/ColorMappingsSection.tsx
index d3270378..1ba98f02 100644
--- a/src/app/(private)/map/[id]/components/EditColumnMetadataModal/ColorMappingsSection.tsx
+++ b/src/app/(private)/map/[id]/components/EditColumnMetadataModal/ColorMappingsSection.tsx
@@ -117,11 +117,11 @@ export default function ColorMappingsSection({
   const hasSourceColors =
     !isOwner &&
     Boolean(dataSourceId) &&
-    Object.keys(ownerMeta?.colorMappings ?? {}).length > 0;
+    Object.keys(ownerMeta?.valueColors ?? {}).length > 0;
 
   const handleUseSourceColors = useCallback(() => {
     if (!dataSourceId) return;
-    const sourceColors = ownerMeta?.colorMappings ?? {};
+    const sourceColors = ownerMeta?.valueColors ?? {};
     const columnPrefix = getCategoryColorsKey(dataSourceId, columnName, "");
     // Remove existing map-view overrides for this column, then apply source colors
     const withoutThisColumn = Object.fromEntries(
@@ -149,21 +149,21 @@ export default function ColorMappingsSection({
   const handleSaveAsDefaults = useCallback(() => {
     if (!dataSourceId) return;
     const mergedColorMappings = {
-      ...(existingMeta?.colorMappings ?? {}),
+      ...(existingMeta?.valueColors ?? {}),
       ...mapViewColorMappings,
     };
     if (isOwner) {
       patchColumnMetadata({
         dataSourceId,
         column: columnName,
-        patch: { colorMappings: mergedColorMappings },
+        patch: { valueColors: mergedColorMappings },
       });
     } else if (organisationId) {
       patchColumnMetadataOverride({
         organisationId,
         dataSourceId,
         column: columnName,
-        patch: { colorMappings: mergedColorMappings },
+        patch: { valueColors: mergedColorMappings },
       });
     }
     clearMapViewColors();
@@ -186,7 +186,7 @@ export default function ColorMappingsSection({
         <ColorMappingsEditor
           values={mergedValues}
           colorMappings={mapViewColorMappings}
-          fallbackColors={existingMeta?.colorMappings}
+          fallbackColors={existingMeta?.valueColors}
           onChange={handleColorChangeDebounced}
           onReset={handleResetColor}
           onResetAll={handleResetAllColors}
diff --git a/src/app/(private)/map/[id]/components/EditColumnMetadataModal/EditColumnMetadataModal.tsx b/src/app/(private)/map/[id]/components/EditColumnMetadataModal/EditColumnMetadataModal.tsx
index 2587e400..1c01a51d 100644
--- a/src/app/(private)/map/[id]/components/EditColumnMetadataModal/EditColumnMetadataModal.tsx
+++ b/src/app/(private)/map/[id]/components/EditColumnMetadataModal/EditColumnMetadataModal.tsx
@@ -254,7 +254,7 @@ export default function EditColumnMetadataModal() {
                   }}
                 />
               )}
-              {editColumnMetadata.fields.colorMappings && (
+              {editColumnMetadata.fields.valueColors && (
                 <ColorMappingsSection
                   dataSourceId={dataSourceId}
                   columnName={columnName}
@@ -277,7 +277,7 @@ const fieldsToDescription = (fields: EditColumnMetadataFields): string => {
   const labels: Record<keyof EditColumnMetadataFields, string> = {
     description: "description",
     valueLabels: "display values",
-    colorMappings: "colours",
+    valueColors: "colours",
   };
   const keys = Object.keys(fields) as (keyof EditColumnMetadataFields)[];
   const parts = keys.filter((f) => fields[f]).map((f) => labels[f]);
diff --git a/src/app/(private)/map/[id]/components/Legend.tsx b/src/app/(private)/map/[id]/components/Legend.tsx
index 6f55a819..1e15a4aa 100644
--- a/src/app/(private)/map/[id]/components/Legend.tsx
+++ b/src/app/(private)/map/[id]/components/Legend.tsx
@@ -31,7 +31,7 @@ export default function Legend() {
       dataSource.columnMetadata,
       dataSource.organisationOverride?.columnMetadata,
       viewConfig.areaDataColumn,
-    )?.colorMappings;
+    )?.valueColors;
   }, [dataSource, viewConfig.areaDataColumn]);
 
   const colorScheme = useColorScheme({
@@ -80,7 +80,7 @@ export default function Legend() {
           fields={{
             description: true,
             valueLabels: true,
-            colorMappings: colorScheme?.colorSchemeType === "categoric",
+            valueColors: colorScheme?.colorSchemeType === "categoric",
           }}
         />
       </div>
diff --git a/src/app/(private)/map/[id]/components/controls/VisualisationPanel/VisualisationPanel.tsx b/src/app/(private)/map/[id]/components/controls/VisualisationPanel/VisualisationPanel.tsx
index e5a36c61..f631dbdf 100644
--- a/src/app/(private)/map/[id]/components/controls/VisualisationPanel/VisualisationPanel.tsx
+++ b/src/app/(private)/map/[id]/components/controls/VisualisationPanel/VisualisationPanel.tsx
@@ -148,7 +148,7 @@ function SetCategoryColorsButton() {
             column: viewConfig.areaDataColumn,
             fields: {
               valueLabels: true,
-              colorMappings: true,
+              valueColors: true,
             },
           });
         }
diff --git a/src/app/(private)/map/[id]/hooks/useDisplayAreaStats.ts b/src/app/(private)/map/[id]/hooks/useDisplayAreaStats.ts
index 770464f1..d5211748 100644
--- a/src/app/(private)/map/[id]/hooks/useDisplayAreaStats.ts
+++ b/src/app/(private)/map/[id]/hooks/useDisplayAreaStats.ts
@@ -50,7 +50,7 @@ export const useDisplayAreaStats = <
     areaStats,
     viewConfig,
     selectedBivariateBucket: null,
-    resolvedColorMappings: columnMetadata?.colorMappings,
+    resolvedColorMappings: columnMetadata?.valueColors,
   });
 
   const { result, value: fillColorExpression } = expression.createExpression([
diff --git a/src/models/DataSource.ts b/src/models/DataSource.ts
index 2cab1fe9..e5945198 100644
--- a/src/models/DataSource.ts
+++ b/src/models/DataSource.ts
@@ -234,7 +234,7 @@ export const columnMetadataSchema = z.object({
   description: z.string(),
   valueLabels: z.record(z.string(), z.string()),
   semanticType: z.nativeEnum(ColumnSemanticType).optional(),
-  colorMappings: z.record(z.string(), z.string()).optional(),
+  valueColors: z.record(z.string(), z.string()).optional(),
 });
 
 export const inspectorColumnSchema = z.object({
diff --git a/src/utils/resolveColumnMetadata.ts b/src/utils/resolveColumnMetadata.ts
index 16ab0394..12b44b8f 100644
--- a/src/utils/resolveColumnMetadata.ts
+++ b/src/utils/resolveColumnMetadata.ts
@@ -26,9 +26,9 @@ export function resolveColumnMetadata(
         Object.keys(override.valueLabels).length > 0
           ? { ...base.valueLabels, ...override.valueLabels }
           : base.valueLabels,
-      colorMappings: override.colorMappings
-        ? { ...base.colorMappings, ...override.colorMappings }
-        : base.colorMappings,
+      valueColors: override.valueColors
+        ? { ...base.valueColors, ...override.valueColors }
+        : base.valueColors,
     };
   });
 }
diff --git a/tests/unit/utils/resolveColumnMetadata.test.ts b/tests/unit/utils/resolveColumnMetadata.test.ts
index 72a3a990..4defe2df 100644
--- a/tests/unit/utils/resolveColumnMetadata.test.ts
+++ b/tests/unit/utils/resolveColumnMetadata.test.ts
@@ -125,13 +125,13 @@ describe("resolveColumnMetadata", () => {
     expect(resolveColumnMetadata([], overrides)).toEqual([]);
   });
 
-  test("merges colorMappings from override on top of base", () => {
+  test("merges valueColors from override onto base", () => {
     const baseWithColors: ColumnMetadata[] = [
       {
         name: "status",
         description: "",
         valueLabels: {},
-        colorMappings: { Active: "#00ff00", Inactive: "#ff0000" },
+        valueColors: { Active: "#00ff00", Inactive: "#ff0000" },
       },
     ];
     const overrides: ColumnMetadata[] = [
@@ -139,31 +139,31 @@ describe("resolveColumnMetadata", () => {
         name: "status",
         description: "",
         valueLabels: {},
-        colorMappings: { Inactive: "#aaaaaa", Pending: "#0000ff" },
+        valueColors: { Inactive: "#aaaaaa", Pending: "#0000ff" },
       },
     ];
     const result = resolveColumnMetadata(baseWithColors, overrides);
-    expect(result[0]?.colorMappings).toEqual({
+    expect(result[0]?.valueColors).toEqual({
       Active: "#00ff00",
       Inactive: "#aaaaaa",
       Pending: "#0000ff",
     });
   });
 
-  test("keeps base colorMappings when override has none", () => {
+  test("keeps base valueColors when override has none", () => {
     const baseWithColors: ColumnMetadata[] = [
       {
         name: "status",
         description: "",
         valueLabels: {},
-        colorMappings: { Active: "#00ff00" },
+        valueColors: { Active: "#00ff00" },
       },
     ];
     const overrides: ColumnMetadata[] = [
       { name: "status", description: "New desc", valueLabels: {} },
     ];
     const result = resolveColumnMetadata(baseWithColors, overrides);
-    expect(result[0]?.colorMappings).toEqual({ Active: "#00ff00" });
+    expect(result[0]?.valueColors).toEqual({ Active: "#00ff00" });
   });
 });
 

From 3929dde80fcb64e5a7a7d58b53221e9e284445eb Mon Sep 17 00:00:00 2001
From: joaquimds <joaquimds@gmail.com>
Date: Tue, 24 Mar 2026 16:58:37 +0100
Subject: [PATCH 6/6] Update AGENTS.md

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
---
 AGENTS.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/AGENTS.md b/AGENTS.md
index ca3fb0cd..4b40e2ea 100644
--- a/AGENTS.md
+++ b/AGENTS.md
@@ -87,9 +87,9 @@ Use tRPC as the bridge between client components and server logic:
 
 - Do not use `!!x` to cast to `boolean`. Use `Boolean(x)`.
 - Functions with more than 2 parameters should use the destructured input pattern,
-  e.g. `const sum = ({ a, b, c }: { a: int, b: int, c: int }) => a + b + c`
+  e.g. `const sum = ({ a, b, c }: { a: number, b: number, c: number }) => a + b + c`
 - Constants should either go in a `constants/` directory or a `constants.ts` file.
-- Utils (pure functions) should go in a `utils/` directory ot a `utils.ts` file.
+- Utils (pure functions) should go in a `utils/` directory or a `utils.ts` file.
 - Functions with side effects, or async functions, should go in a `services/` directory, or somewhere more specific.
 - Complex components that require their own directory should be in a file with the same name as the directory,
   e.g. `Choropleth/Choropleth.tsx`.