@oneuptime/common 12.0.22 → 12.0.24

package/UI/Components/ModelTable/AttributeColumns.tsx

@@ -0,0 +1,321 @@
+import Column from "./Column";
+import Columns from "./Columns";
+import { ColumnPreference } from "./ColumnPreference";
+import FieldType from "../Types/FieldType";
+import AnalyticsBaseModel from "../../../Models/AnalyticsModels/AnalyticsBaseModel/AnalyticsBaseModel";
+import BaseModel from "../../../Models/DatabaseModels/DatabaseBaseModel/DatabaseBaseModel";
+import { JSONObject } from "../../../Types/JSON";
+import React, { ReactElement } from "react";
+
+/*
+ * ---------------------------------------------------------------------------
+ * One table column per key inside a Map(String, String) attributes column
+ * ---------------------------------------------------------------------------
+ *
+ * Analytics rows (logs, spans, security events) carry the whole source
+ * payload flattened into a single map column - `attributes` - so that
+ * arbitrary vendor fields stay queryable without a schema change. Those keys
+ * differ per event class and per source, so there is no fixed list to ship as
+ * columns: the viewer picks the ones they care about and the table grows a
+ * column for each.
+ *
+ * The shape mirrors CustomFieldColumns, and for the same reasons:
+ *
+ *     field:            { attributes: true }     <- a real model column
+ *     selectedProperty: "device.hostname"        <- the key inside it
+ *
+ * which BaseModelTable turns into the column key "attributes.device.hostname".
+ *
+ *  - the declared field has to be the real map column. A synthetic
+ *    `field: { "attributes.device.hostname": true }` would fail the model's
+ *    column check in getSelectFromColumns and throw the whole table away.
+ *
+ *  - sorting is off. Nothing between the header and the query builder
+ *    validates `sort`, so a clickable header here would send a dotted
+ *    pseudo-column into ClickHouse, which can only order by a map key through
+ *    an explicit `attributes['key']` subscript the sort path cannot express.
+ *
+ *  - cells render through `getElement`, because the typed cell renderers index
+ *    `item[column.key]` directly and would look for a literal
+ *    "attributes.device.hostname" property that no row has.
+ *
+ * WHERE THE VIEWER'S CHOICE LIVES
+ *
+ * Nowhere new. A column exists iff its id appears in the stored
+ * ColumnPreference, and the id encodes the key, so the list of chosen
+ * attribute columns is recovered from the layout the viewer already saves
+ * (see getAttributeKeysFromColumnPreference). That keeps "Reset to default"
+ * honest, makes a saved TableView carry its attribute columns with it, and
+ * means there is no second store that can drift out of sync with the first.
+ */
+
+export type GetAttributeColumnIdFunction = (data: {
+  attributesColumnKey: string;
+  attributeKey: string;
+}) => string;
+
+/*
+ * Deliberately the same shape ColumnPreference.getColumnBaseId would derive
+ * from `field` + `selectedProperty` on its own ("attributes.device.hostname"),
+ * so an explicitly-set id and a derived one can never disagree.
+ */
+export const getAttributeColumnId: GetAttributeColumnIdFunction = (data: {
+  attributesColumnKey: string;
+  attributeKey: string;
+}): string => {
+  return `${data.attributesColumnKey}.${data.attributeKey}`;
+};
+
+export type GetAttributeKeyFromColumnIdFunction = (data: {
+  attributesColumnKey: string;
+  columnId: string;
+}) => string | null;
+
+export const getAttributeKeyFromColumnId: GetAttributeKeyFromColumnIdFunction =
+  (data: { attributesColumnKey: string; columnId: string }): string | null => {
+    const prefix: string = `${data.attributesColumnKey}.`;
+
+    if (!data.columnId.startsWith(prefix)) {
+      return null;
+    }
+
+    const attributeKey: string = data.columnId.slice(prefix.length);
+
+    return attributeKey.length > 0 ? attributeKey : null;
+  };
+
+export type NormalizeAttributeKeysFunction = (
+  keys: Array<unknown> | null | undefined,
+) => Array<string>;
+
+/*
+ * Whatever the server said, turned into a stable list: trimmed, de-duplicated,
+ * and sorted. The sort is load-bearing rather than cosmetic - the picker shows
+ * these in order, and an unsorted list from ClickHouse would reshuffle itself
+ * between requests.
+ */
+export const normalizeAttributeKeys: NormalizeAttributeKeysFunction = (
+  keys: Array<unknown> | null | undefined,
+): Array<string> => {
+  if (!Array.isArray(keys)) {
+    return [];
+  }
+
+  const seen: Set<string> = new Set();
+  const normalized: Array<string> = [];
+
+  for (const key of keys) {
+    if (typeof key !== "string") {
+      continue;
+    }
+
+    const trimmed: string = key.trim();
+
+    if (trimmed.length === 0 || seen.has(trimmed)) {
+      continue;
+    }
+
+    seen.add(trimmed);
+    normalized.push(trimmed);
+  }
+
+  return normalized.sort((a: string, b: string): number => {
+    return a.localeCompare(b);
+  });
+};
+
+export type GetAttributeValueFunction = (data: {
+  item: unknown;
+  attributesColumnKey: string;
+  attributeKey: string;
+}) => unknown;
+
+export const getAttributeValue: GetAttributeValueFunction = (data: {
+  item: unknown;
+  attributesColumnKey: string;
+  attributeKey: string;
+}): unknown => {
+  const attributes: unknown = (data.item as JSONObject | undefined)?.[
+    data.attributesColumnKey
+  ];
+
+  if (!attributes || typeof attributes !== "object") {
+    return undefined;
+  }
+
+  return (attributes as JSONObject)[data.attributeKey];
+};
+
+export type GetAttributeExportValueFunction = (value: unknown) => string;
+
+export const getAttributeExportValue: GetAttributeExportValueFunction = (
+  value: unknown,
+): string => {
+  if (value === undefined || value === null) {
+    return "";
+  }
+
+  if (Array.isArray(value)) {
+    return value
+      .map((entry: unknown): string => {
+        return getAttributeExportValue(entry);
+      })
+      .join(", ");
+  }
+
+  if (typeof value === "object") {
+    return JSON.stringify(value);
+  }
+
+  return String(value);
+};
+
+export type RenderAttributeValueFunction = (data: {
+  value: unknown;
+  noValueMessage?: string | undefined;
+}) => ReactElement;
+
+/*
+ * Map values arrive as strings, but the ingest side is free to write a
+ * flattened object or an array under a key, and a project can PUT anything
+ * over the API - so this renders whatever it is handed rather than assuming.
+ */
+export const renderAttributeValue: RenderAttributeValueFunction = (data: {
+  value: unknown;
+  noValueMessage?: string | undefined;
+}): ReactElement => {
+  const noValueMessage: string = data.noValueMessage ?? "-";
+  const text: string = getAttributeExportValue(data.value);
+
+  if (text.length === 0) {
+    return <span className="text-gray-400">{noValueMessage}</span>;
+  }
+
+  return (
+    <span className="break-words" title={text}>
+      {text}
+    </span>
+  );
+};
+
+export type GetAttributeColumnsFunction = <
+  TBaseModel extends BaseModel | AnalyticsBaseModel,
+>(data: {
+  attributeKeys: Array<string>;
+  attributesColumnKey: string;
+  isHiddenByDefault?: boolean | undefined;
+  noValueMessage?: string | undefined;
+}) => Columns<TBaseModel>;
+
+/*
+ * `isRemovable` is what separates these from every other optional column: a
+ * viewer who switches an attribute column off still has it sitting in the
+ * picker forever, and a table whose source writes a few hundred keys would
+ * accumulate an unusable list. Removing drops the id from the stored layout,
+ * which is the same thing as the column never having been added.
+ */
+export const getAttributeColumns: GetAttributeColumnsFunction = <
+  TBaseModel extends BaseModel | AnalyticsBaseModel,
+>(data: {
+  attributeKeys: Array<string>;
+  attributesColumnKey: string;
+  isHiddenByDefault?: boolean | undefined;
+  noValueMessage?: string | undefined;
+}): Columns<TBaseModel> => {
+  const { attributesColumnKey } = data;
+
+  return (data.attributeKeys || []).map(
+    (attributeKey: string): Column<TBaseModel> => {
+      return {
+        id: getAttributeColumnId({ attributesColumnKey, attributeKey }),
+        field: {
+          [attributesColumnKey]: true,
+        } as Column<TBaseModel>["field"],
+        selectedProperty: attributeKey,
+        title: attributeKey,
+        type: FieldType.Element,
+        // See the file header: a map key is not something the sort path can express.
+        disableSort: true,
+        isHiddenByDefault: Boolean(data.isHiddenByDefault),
+        isRemovable: true,
+        getExportValue: (item: TBaseModel): string => {
+          return getAttributeExportValue(
+            getAttributeValue({ item, attributesColumnKey, attributeKey }),
+          );
+        },
+        getElement: (item: TBaseModel): ReactElement => {
+          return renderAttributeValue({
+            value: getAttributeValue({
+              item,
+              attributesColumnKey,
+              attributeKey,
+            }),
+            noValueMessage: data.noValueMessage,
+          });
+        },
+      };
+    },
+  );
+};
+
+export type GetAttributeKeysFromColumnPreferenceFunction = (data: {
+  preference: ColumnPreference | null | undefined;
+  attributesColumnKey: string;
+  /*
+   * Ids of the columns the table declares for itself. A declared column that
+   * happens to sit under the same prefix is not an attribute column, and
+   * regenerating one for it would put two columns with the same id in the
+   * picker.
+   */
+  reservedColumnIds?: Array<string> | undefined;
+}) => Array<string>;
+
+/*
+ * The attribute columns a stored layout implies.
+ *
+ * Read from the RAW preference rather than the sanitized one: sanitizing drops
+ * ids that name no current column, and an attribute column is only ever a
+ * current column *because* its id is in here. `hidden` is scanned as well as
+ * `order` - buildColumnPreference always writes both, but a payload from an
+ * older release (or one hand-edited in devtools) may carry only the one, and
+ * losing the column would silently discard the viewer's choice.
+ */
+export const getAttributeKeysFromColumnPreference: GetAttributeKeysFromColumnPreferenceFunction =
+  (data: {
+    preference: ColumnPreference | null | undefined;
+    attributesColumnKey: string;
+    reservedColumnIds?: Array<string> | undefined;
+  }): Array<string> => {
+    if (!data.preference) {
+      return [];
+    }
+
+    const reserved: Set<string> = new Set(data.reservedColumnIds || []);
+    const seen: Set<string> = new Set();
+    const attributeKeys: Array<string> = [];
+
+    const columnIds: Array<string> = [
+      ...(data.preference.order || []),
+      ...(data.preference.hidden || []),
+    ];
+
+    for (const columnId of columnIds) {
+      if (reserved.has(columnId)) {
+        continue;
+      }
+
+      const attributeKey: string | null = getAttributeKeyFromColumnId({
+        attributesColumnKey: data.attributesColumnKey,
+        columnId: columnId,
+      });
+
+      if (!attributeKey || seen.has(attributeKey)) {
+        continue;
+      }
+
+      seen.add(attributeKey);
+      attributeKeys.push(attributeKey);
+    }
+
+    return attributeKeys;
+  };

package/UI/Components/ModelTable/BaseModelTable.tsx

@@ -62,7 +62,14 @@ import TableColumn from "../Table/Types/Column";
 import FieldType from "../Types/FieldType";
 import ModelTableColumn from "./Column";
 import Columns from "./Columns";
-import ColumnCustomizationModal from "./ColumnCustomizationModal";
+import ColumnCustomizationModal, {
+  AddableColumnsConfig,
+} from "./ColumnCustomizationModal";
+import {
+  getAttributeColumns,
+  getAttributeKeysFromColumnPreference,
+  normalizeAttributeKeys,
+} from "./AttributeColumns";
 import {
   ColumnPreference,
   CustomizableColumn,
@@ -364,6 +371,40 @@ export interface BaseTableProps<
    * Only meaningful for resources with a `customFields` column of their own.
    */
   customFieldsModelType?: { new (): BaseModel } | undefined;
+
+  /**
+   * Let the viewer add a column for any key inside a Map(String, String)
+   * column on the model — `attributes` on logs, spans and security events.
+   *
+   * Those keys are per-payload rather than per-schema, so they cannot ship as
+   * columns and there can be hundreds of them. Instead the picker grows an
+   * "add a column" search box fed by `fetchAttributeKeys`, and whatever the
+   * viewer adds becomes an ordinary column: hideable, re-orderable, exported,
+   * and remembered in the same stored layout as every other column.
+   *
+   * Requires `userPreferencesKey` and column customization to be on, since the
+   * chosen keys are recovered from the stored layout.
+   */
+  attributeColumnsProps?:
+    | {
+        /*
+         * The map column the generated columns read from. Must be a real
+         * column on the model; anything else is ignored rather than throwing
+         * the table away.
+         */
+        columnKey: string;
+        /*
+         * Every key the viewer may pick from. Called the first time the picker
+         * opens rather than on mount — it is typically a wide scan, and a
+         * table nobody customizes should not pay for it.
+         */
+        fetchAttributeKeys: () => Promise<Array<string>>;
+        title?: string | undefined;
+        description?: string | undefined;
+        placeholder?: string | undefined;
+        emptyMessage?: string | undefined;
+      }
+    | undefined;
 }
 
 export interface ComponentProps<
@@ -501,14 +542,6 @@ const BaseModelTable: <TBaseModel extends BaseModel | AnalyticsBaseModel>(
       showAs !== ShowAs.OrderedStatesList,
   );
 
-  const allColumns: Columns<TBaseModel> = useMemo(() => {
-    if (customFieldColumns.columns.length === 0) {
-      return props.columns || [];
-    }
-
-    return [...(props.columns || []), ...customFieldColumns.columns];
-  }, [props.columns, customFieldColumns.columns]);
-
   type ReadStoredColumnPreferenceFunction = () => ColumnPreference | null;
 
   const readStoredColumnPreference: ReadStoredColumnPreferenceFunction =
@@ -531,6 +564,68 @@ const BaseModelTable: <TBaseModel extends BaseModel | AnalyticsBaseModel>(
   const [showColumnCustomizationModal, setShowColumnCustomizationModal] =
     useState<boolean>(false);
 
+  /*
+   * ---------------------------------------------------------------------
+   * Attribute columns
+   * ---------------------------------------------------------------------
+   *
+   * A column per viewer-chosen key inside the model's map column. There is no
+   * second store for "which keys did they pick": a column exists precisely
+   * when its id is in the stored layout, and the id encodes the key. That is
+   * what makes "Reset to default" take them away, a saved TableView bring its
+   * own, and the two halves of a layout impossible to desynchronize.
+   *
+   * Derived from the RAW preference, before sanitizing: sanitizing drops ids
+   * that name no current column, and these are only current columns *because*
+   * their ids are in there.
+   */
+  const attributeColumnKey: string | null = useMemo(() => {
+    const columnKey: string | undefined =
+      props.attributeColumnsProps?.columnKey;
+
+    if (!columnKey || !isColumnCustomizationEnabled) {
+      return null;
+    }
+
+    /*
+     * A key that is not a column on the model would make getSelectFromColumns
+     * throw and blank the whole table. A misconfigured prop should cost the
+     * feature, not the page.
+     */
+    return model.hasColumn(columnKey) ? columnKey : null;
+  }, [props.attributeColumnsProps?.columnKey, isColumnCustomizationEnabled]);
+
+  const declaredColumns: Columns<TBaseModel> = useMemo(() => {
+    if (customFieldColumns.columns.length === 0) {
+      return props.columns || [];
+    }
+
+    return [...(props.columns || []), ...customFieldColumns.columns];
+  }, [props.columns, customFieldColumns.columns]);
+
+  const attributeColumns: Columns<TBaseModel> = useMemo(() => {
+    if (!attributeColumnKey) {
+      return [];
+    }
+
+    return getAttributeColumns<TBaseModel>({
+      attributesColumnKey: attributeColumnKey,
+      attributeKeys: getAttributeKeysFromColumnPreference({
+        preference: columnPreference,
+        attributesColumnKey: attributeColumnKey,
+        reservedColumnIds: getColumnIds<TBaseModel>(declaredColumns),
+      }),
+    });
+  }, [attributeColumnKey, columnPreference, declaredColumns]);
+
+  const allColumns: Columns<TBaseModel> = useMemo(() => {
+    if (attributeColumns.length === 0) {
+      return declaredColumns;
+    }
+
+    return [...declaredColumns, ...attributeColumns];
+  }, [declaredColumns, attributeColumns]);
+
   /*
    * Ids are derived over the *whole* declared set, so a column dropping out
    * for lack of permission can never renumber the ones that remain.
@@ -584,6 +679,18 @@ const BaseModelTable: <TBaseModel extends BaseModel | AnalyticsBaseModel>(
     });
   };
 
+  /*
+   * The pool of keys the picker offers. Fetched the first time the picker
+   * opens, never on mount: it is a wide scan over the analytics table, and a
+   * table nobody customizes should not pay for it on every page load.
+   */
+  const [attributeKeyPool, setAttributeKeyPool] = useState<{
+    keys: Array<string>;
+    isLoading: boolean;
+    error: string;
+    hasLoaded: boolean;
+  }>({ keys: [], isLoading: false, error: "", hasLoaded: false });
+
   const [classicTableFilters, setClassicTableFilters] = useState<
     Array<ClassicFilterType<TBaseModel>>
   >([]);
@@ -1972,6 +2079,20 @@ const BaseModelTable: <TBaseModel extends BaseModel | AnalyticsBaseModel>(
       (selectFields as Dictionary<boolean>)[CustomFieldsColumnKey] = true;
     }
 
+    /*
+     * Same reasoning for the attribute map column: a column added from the
+     * picker appears without a refetch, so the map it reads has to have been
+     * on the wire since the first request or the new column renders blank
+     * until something else happens to reload the page.
+     */
+    if (
+      attributeColumnKey &&
+      (hasPermissionToReadField(attributeColumnKey as keyof TBaseModel) ||
+        User.isMasterAdmin())
+    ) {
+      (selectFields as Dictionary<boolean>)[attributeColumnKey] = true;
+    }
+
     const selectMoreFields: Array<keyof TBaseModel> = props.selectMoreFields
       ? (Object.keys(props.selectMoreFields) as Array<keyof TBaseModel>)
       : [];
@@ -2431,12 +2552,77 @@ const BaseModelTable: <TBaseModel extends BaseModel | AnalyticsBaseModel>(
   }, [props.columns]);
 
   /*
-   * The viewer changed their layout, or the project's custom field
-   * definitions finally arrived.
+   * The viewer changed their layout, the project's custom field definitions
+   * finally arrived, or an attribute column was added or removed.
    */
   useEffect(() => {
     serializeToTableColumns();
-  }, [effectiveColumnPreference, customFieldColumns.columns]);
+  }, [effectiveColumnPreference, customFieldColumns.columns, attributeColumns]);
+
+  /*
+   * The attribute key pool is only ever needed by the picker, so it is fetched
+   * when the picker first opens and kept for the rest of the page's life.
+   * A failure costs the "add a column" search box and nothing else — the
+   * columns the viewer already added are rebuilt from their stored layout and
+   * do not depend on this at all.
+   */
+  useEffect(() => {
+    if (
+      !showColumnCustomizationModal ||
+      !attributeColumnKey ||
+      !props.attributeColumnsProps ||
+      attributeKeyPool.hasLoaded ||
+      attributeKeyPool.isLoading
+    ) {
+      return;
+    }
+
+    const fetchAttributeKeys: () => Promise<Array<string>> =
+      props.attributeColumnsProps.fetchAttributeKeys;
+
+    let isCancelled: boolean = false;
+
+    setAttributeKeyPool({
+      keys: [],
+      isLoading: true,
+      error: "",
+      hasLoaded: false,
+    });
+
+    fetchAttributeKeys()
+      .then((keys: Array<string>) => {
+        if (isCancelled) {
+          return;
+        }
+
+        setAttributeKeyPool({
+          keys: normalizeAttributeKeys(keys),
+          isLoading: false,
+          error: "",
+          hasLoaded: true,
+        });
+      })
+      .catch((err: Error) => {
+        if (isCancelled) {
+          return;
+        }
+
+        setAttributeKeyPool({
+          keys: [],
+          isLoading: false,
+          error: API.getFriendlyMessage(err),
+          /*
+           * Not "loaded": closing and reopening the picker is the only retry
+           * anyone would think to try, so let it be one.
+           */
+          hasLoaded: false,
+        });
+      });
+
+    return () => {
+      isCancelled = true;
+    };
+  }, [showColumnCustomizationModal, attributeColumnKey]);
 
   const setActionSchema: VoidFunction = () => {
     const permissions: Array<Permission> = PermissionUtil.getAllPermissions();
@@ -4007,13 +4193,15 @@ const BaseModelTable: <TBaseModel extends BaseModel | AnalyticsBaseModel>(
 
   type GetPickerEntriesFunction = (
     preference: ColumnPreference | null,
+    columns?: Columns<TBaseModel> | undefined,
   ) => Array<CustomizableColumn<TBaseModel>>;
 
   const getPickerEntries: GetPickerEntriesFunction = (
     preference: ColumnPreference | null,
+    columns?: Columns<TBaseModel> | undefined,
   ): Array<CustomizableColumn<TBaseModel>> => {
     return getCustomizableColumns<TBaseModel>({
-      columns: allColumns,
+      columns: columns || allColumns,
       preference: preference,
     }).filter((entry: CustomizableColumn<TBaseModel>) => {
       return isPickableColumn(entry.column);
@@ -4055,8 +4243,16 @@ const BaseModelTable: <TBaseModel extends BaseModel | AnalyticsBaseModel>(
      * would be pinned to the column set of the release they opened it in, and
      * columns added later would arrive already stale.
      */
+    /*
+     * Over the DECLARED columns only. An attribute column exists because the
+     * viewer added it, so the layout that has none of them is the default one
+     * — otherwise adding a column and then removing it again would leave the
+     * table pinned to a stored layout it no longer differs from.
+     */
     const defaultPreference: ColumnPreference =
-      buildColumnPreference<TBaseModel>(getPickerEntries(null));
+      buildColumnPreference<TBaseModel>(
+        getPickerEntries(null, declaredColumns),
+      );
 
     const isBackToDefault: boolean =
       JSON.stringify(preference) === JSON.stringify(defaultPreference);
@@ -4089,6 +4285,58 @@ const BaseModelTable: <TBaseModel extends BaseModel | AnalyticsBaseModel>(
     setShowColumnCustomizationModal(false);
   };
 
+  /*
+   * The pool the picker offers, as picker entries rather than model columns,
+   * so the modal can stage one straight into its list. Every one starts
+   * removable — the whole point is that the viewer can take it away again.
+   */
+  const addableAttributeColumns: Array<CustomizableColumn<TBaseModel>> =
+    useMemo(() => {
+      if (!attributeColumnKey || attributeKeyPool.keys.length === 0) {
+        return [];
+      }
+
+      return getAttributeColumns<TBaseModel>({
+        attributesColumnKey: attributeColumnKey,
+        attributeKeys: attributeKeyPool.keys,
+      }).map(
+        (
+          column: ModelTableColumn<TBaseModel>,
+          index: number,
+        ): CustomizableColumn<TBaseModel> => {
+          return {
+            id: column.id || `${attributeColumnKey}.${index}`,
+            column: column,
+            isVisible: true,
+            isPinned: false,
+            isRemovable: true,
+          };
+        },
+      );
+    }, [attributeColumnKey, attributeKeyPool.keys]);
+
+  const getAddableColumnsConfig: () =>
+    | AddableColumnsConfig<TBaseModel>
+    | undefined = (): AddableColumnsConfig<TBaseModel> | undefined => {
+    if (!attributeColumnKey || !props.attributeColumnsProps) {
+      return undefined;
+    }
+
+    return {
+      title: props.attributeColumnsProps.title || tx("Add Attribute Column"),
+      description:
+        props.attributeColumnsProps.description ||
+        tx(
+          "Attributes vary per event, so they are not listed above. Search for one to add it as a column.",
+        ),
+      placeholder: props.attributeColumnsProps.placeholder || "Search...",
+      emptyMessage: props.attributeColumnsProps.emptyMessage,
+      isLoading: attributeKeyPool.isLoading,
+      errorMessage: attributeKeyPool.error,
+      columns: addableAttributeColumns,
+    };
+  };
+
   const getColumnCustomizationModal: () => ReactElement | null =
     (): ReactElement | null => {
       if (!showColumnCustomizationModal || !isColumnCustomizationEnabled) {
@@ -4098,6 +4346,7 @@ const BaseModelTable: <TBaseModel extends BaseModel | AnalyticsBaseModel>(
       return (
         <ColumnCustomizationModal<TBaseModel>
           columns={getPickerEntries(effectiveColumnPreference)}
+          addableColumns={getAddableColumnsConfig()}
           isDefaultLayout={isEmptyColumnPreference(effectiveColumnPreference)}
           title={tx("Customize Columns")}
           onSave={onColumnCustomizationSave}

package/UI/Components/ModelTable/Column.ts

@@ -36,6 +36,14 @@ export default interface Columns<
   isNotCustomizable?: boolean | undefined;
   // Start hidden. The viewer can still switch it on from the picker.
   isHiddenByDefault?: boolean | undefined;
+  /*
+   * This column exists only because the viewer added it, so the picker offers
+   * to take it away again rather than only switching it off. Set it on columns
+   * generated from viewer-chosen keys (see AttributeColumns) - a table that
+   * ships a column should never be removable, because nothing would put it
+   * back.
+   */
+  isRemovable?: boolean | undefined;
   contentClassName?: string | undefined;
   colSpan?: number | undefined;
   disableSort?: boolean;