From ddacc295a84c5d28d95a86dad691917c6cf4f168 Mon Sep 17 00:00:00 2001
From: cnathe <cnathe@labkey.com>
Date: Fri, 31 Jul 2026 08:33:09 -0500
Subject: [PATCH 01/51] Sample listing grid updates to include ExpMaterialColor
 and use SAMPLE_COLOR_REQUIRED_COLUMNS in requiredColumns

---
 .../components/src/internal/components/samples/constants.ts     | 2 --
 1 file changed, 2 deletions(-)

diff --git a/packages/components/src/internal/components/samples/constants.ts b/packages/components/src/internal/components/samples/constants.ts
index 066f4eb859..e23dd06218 100644
--- a/packages/components/src/internal/components/samples/constants.ts
+++ b/packages/components/src/internal/components/samples/constants.ts
@@ -57,8 +57,6 @@ export const SAMPLE_STATUS_REQUIRED_COLUMNS = [
 
 export const SAMPLE_COLOR_COLUMN_NAME = 'ExpMaterialColor';
 export const SAMPLE_COLOR_COLOR_COLUMN_NAME = 'ExpMaterialColor/Color';
-
-// TODO, color fields not wired up yet
 export const SAMPLE_COLOR_REQUIRED_COLUMNS = [SAMPLE_COLOR_COLUMN_NAME, SAMPLE_COLOR_COLOR_COLUMN_NAME];
 
 export enum SampleOperation {

From a3fe2ab4168ee24d4f6cc98324a2bb47d0ce32dd Mon Sep 17 00:00:00 2001
From: cnathe <cnathe@labkey.com>
Date: Fri, 31 Jul 2026 08:41:53 -0500
Subject: [PATCH 02/51] update success message to use bold instead of quotes

---
 .../components/picklist/ChoosePicklistModal.test.tsx   | 10 +++++-----
 .../components/picklist/ChoosePicklistModal.tsx        |  8 +++++---
 2 files changed, 10 insertions(+), 8 deletions(-)

diff --git a/packages/components/src/internal/components/picklist/ChoosePicklistModal.test.tsx b/packages/components/src/internal/components/picklist/ChoosePicklistModal.test.tsx
index 573ec4b02c..090cad7a68 100644
--- a/packages/components/src/internal/components/picklist/ChoosePicklistModal.test.tsx
+++ b/packages/components/src/internal/components/picklist/ChoosePicklistModal.test.tsx
@@ -198,7 +198,7 @@ describe('ChoosePicklistModal', () => {
         test('no samples added', () => {
             render(<AddedToPicklistNotification picklist={PUBLIC_EDITOR_PICKLIST} numAdded={0} numSelected={4} />);
             expect(document.body.textContent).toBe(
-                `No samples added to picklist "${PUBLIC_EDITOR_PICKLIST.name}". 4 samples were already in the list.`
+                `No samples added to picklist ${PUBLIC_EDITOR_PICKLIST.name}. 4 samples were already in the list.`
             );
             expect(document.querySelector('a').textContent).toBe(PUBLIC_EDITOR_PICKLIST.name);
         });
@@ -206,28 +206,28 @@ describe('ChoosePicklistModal', () => {
         test('all samples added', () => {
             render(<AddedToPicklistNotification picklist={PUBLIC_EDITOR_PICKLIST} numAdded={4} numSelected={4} />);
             expect(document.body.textContent).toBe(
-                `Successfully added 4 samples to picklist "${PUBLIC_EDITOR_PICKLIST.name}".`
+                `Successfully added 4 samples to picklist ${PUBLIC_EDITOR_PICKLIST.name}.`
             );
         });
 
         test('some samples added', () => {
             render(<AddedToPicklistNotification picklist={PUBLIC_EDITOR_PICKLIST} numAdded={2} numSelected={4} />);
             expect(document.body.textContent).toBe(
-                `Successfully added 2 samples to picklist "${PUBLIC_EDITOR_PICKLIST.name}". 2 samples were already in the list.`
+                `Successfully added 2 samples to picklist ${PUBLIC_EDITOR_PICKLIST.name}. 2 samples were already in the list.`
             );
         });
 
         test('one sample added', () => {
             render(<AddedToPicklistNotification picklist={PUBLIC_EDITOR_PICKLIST} numAdded={1} numSelected={4} />);
             expect(document.body.textContent).toBe(
-                `Successfully added 1 sample to picklist "${PUBLIC_EDITOR_PICKLIST.name}". 3 samples were already in the list.`
+                `Successfully added 1 sample to picklist ${PUBLIC_EDITOR_PICKLIST.name}. 3 samples were already in the list.`
             );
         });
 
         test('one sample not added', () => {
             render(<AddedToPicklistNotification picklist={PUBLIC_EDITOR_PICKLIST} numAdded={3} numSelected={4} />);
             expect(document.body.textContent).toBe(
-                `Successfully added 3 samples to picklist "${PUBLIC_EDITOR_PICKLIST.name}". 1 sample was already in the list.`
+                `Successfully added 3 samples to picklist ${PUBLIC_EDITOR_PICKLIST.name}. 1 sample was already in the list.`
             );
         });
     });
diff --git a/packages/components/src/internal/components/picklist/ChoosePicklistModal.tsx b/packages/components/src/internal/components/picklist/ChoosePicklistModal.tsx
index 121de577d9..8d85de9806 100644
--- a/packages/components/src/internal/components/picklist/ChoosePicklistModal.tsx
+++ b/packages/components/src/internal/components/picklist/ChoosePicklistModal.tsx
@@ -189,9 +189,11 @@ export const AddedToPicklistNotification: FC<AddedToPicklistNotificationProps> =
 
     return (
         <>
-            {numAddedNotification} to picklist "
-            <AppLink to={AppURL.create(PICKLIST_KEY, picklist.listId)}>{picklist.name}</AppLink>".
-            {numNotAddedNotification}
+            {numAddedNotification} to picklist{' '}
+            <b>
+                <AppLink to={AppURL.create(PICKLIST_KEY, picklist.listId)}>{picklist.name}</AppLink>
+            </b>
+            .{numNotAddedNotification}
         </>
     );
 };

From 38afba3e2e208fcaec70cc9797519ed1838ccd62 Mon Sep 17 00:00:00 2001
From: cnathe <cnathe@labkey.com>
Date: Fri, 31 Jul 2026 08:42:15 -0500
Subject: [PATCH 03/51] SampleColorRenderer minor styling update

---
 .../components/src/internal/renderers/SampleColorRenderer.tsx | 2 +-
 packages/components/src/theme/samples.scss                    | 4 ++++
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/packages/components/src/internal/renderers/SampleColorRenderer.tsx b/packages/components/src/internal/renderers/SampleColorRenderer.tsx
index b37460b51f..8997a33316 100644
--- a/packages/components/src/internal/renderers/SampleColorRenderer.tsx
+++ b/packages/components/src/internal/renderers/SampleColorRenderer.tsx
@@ -26,7 +26,7 @@ export const SampleColorRenderer: FC<Props> = memo(({ data, row }) => {
             caseInsensitive(rowJS, 'SampleID/' + SAMPLE_COLOR_COLOR_COLUMN_NAME)?.value;
     }
 
-    return <ColorIcon label={label} useSmall value={color} />;
+    return <ColorIcon cls="sample-color color-icon__circle" label={label} value={color} />;
 });
 
 SampleColorRenderer.displayName = 'SampleColorRenderer';
diff --git a/packages/components/src/theme/samples.scss b/packages/components/src/theme/samples.scss
index 07f187bed7..2e08a2ce18 100644
--- a/packages/components/src/theme/samples.scss
+++ b/packages/components/src/theme/samples.scss
@@ -73,3 +73,7 @@
     font-weight: normal;
     margin: 0;
 }
+
+.sample-color {
+    vertical-align: text-top;
+}

From c949765b4696452b16c33e91d591d8c66d527204 Mon Sep 17 00:00:00 2001
From: cnathe <cnathe@labkey.com>
Date: Fri, 31 Jul 2026 08:42:24 -0500
Subject: [PATCH 04/51] 7.50.1-fb-sampleColor2.0

---
 packages/components/package-lock.json | 4 ++--
 packages/components/package.json      | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/components/package-lock.json b/packages/components/package-lock.json
index e36eb02c45..af315cb775 100644
--- a/packages/components/package-lock.json
+++ b/packages/components/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "@labkey/components",
-  "version": "7.50.0",
+  "version": "7.50.1-fb-sampleColor2.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@labkey/components",
-      "version": "7.50.0",
+      "version": "7.50.1-fb-sampleColor2.0",
       "license": "SEE LICENSE IN LICENSE.txt",
       "dependencies": {
         "@hello-pangea/dnd": "18.0.1",
diff --git a/packages/components/package.json b/packages/components/package.json
index d7cf803043..05aba3cdb7 100644
--- a/packages/components/package.json
+++ b/packages/components/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@labkey/components",
-  "version": "7.50.0",
+  "version": "7.50.1-fb-sampleColor2.0",
   "description": "Components, models, actions, and utility functions for LabKey applications and pages",
   "sideEffects": false,
   "files": [

From ea55487a965a7a32b4f0d0257e4655f71d15e251 Mon Sep 17 00:00:00 2001
From: cnathe <cnathe@labkey.com>
Date: Fri, 31 Jul 2026 10:35:02 -0500
Subject: [PATCH 05/51] QueryInfo.showSampleColorCol

---
 .../components/src/public/QueryInfo.test.ts   | 40 +++++++++++++++++++
 packages/components/src/public/QueryInfo.ts   |  5 +++
 2 files changed, 45 insertions(+)

diff --git a/packages/components/src/public/QueryInfo.test.ts b/packages/components/src/public/QueryInfo.test.ts
index 7bbb350839..4b2dd90090 100644
--- a/packages/components/src/public/QueryInfo.test.ts
+++ b/packages/components/src/public/QueryInfo.test.ts
@@ -8,6 +8,8 @@ import sampleSetQueryInfo from '../test/data/sampleSet-getQueryDetails.json';
 
 import { ViewInfo } from '../internal/ViewInfo';
 
+import { SAMPLE_COLOR_COLUMN_NAME } from '../internal/components/samples/constants';
+
 import { ExtendedMap } from './ExtendedMap';
 
 import { QueryInfo } from './QueryInfo';
@@ -553,4 +555,42 @@ describe('QueryInfo', () => {
             expect(col.name).toBe('Name');
         });
     });
+
+    describe('showSampleColorCol', () => {
+        const makeQueryInfo = (sampleColorCol?: Record<string, unknown>): QueryInfo =>
+            QueryInfo.fromJsonForTests({
+                columns: [{ fieldKey: 'name', name: 'name' }, ...(sampleColorCol ? [sampleColorCol] : [])],
+                name: 'query',
+                schemaName: 'schema',
+            });
+
+        test('without sample color column', () => {
+            expect(makeQueryInfo().showSampleColorCol()).toBe(false);
+        });
+
+        test('sample color column shown in details view', () => {
+            expect(
+                makeQueryInfo({ fieldKey: SAMPLE_COLOR_COLUMN_NAME, shownInDetailsView: true }).showSampleColorCol()
+            ).toBe(true);
+        });
+
+        test('sample color column not shown in details view', () => {
+            expect(
+                makeQueryInfo({ fieldKey: SAMPLE_COLOR_COLUMN_NAME, shownInDetailsView: false }).showSampleColorCol()
+            ).toBe(false);
+        });
+
+        test('sample color column without shownInDetailsView', () => {
+            expect(makeQueryInfo({ fieldKey: SAMPLE_COLOR_COLUMN_NAME }).showSampleColorCol()).toBe(false);
+        });
+
+        test('sample color column field key is case-insensitive', () => {
+            expect(
+                makeQueryInfo({
+                    fieldKey: SAMPLE_COLOR_COLUMN_NAME.toUpperCase(),
+                    shownInDetailsView: true,
+                }).showSampleColorCol()
+            ).toBe(true);
+        });
+    });
 });
diff --git a/packages/components/src/public/QueryInfo.ts b/packages/components/src/public/QueryInfo.ts
index a6b4a2ffd1..ee876054f7 100644
--- a/packages/components/src/public/QueryInfo.ts
+++ b/packages/components/src/public/QueryInfo.ts
@@ -14,6 +14,7 @@ import { insertColumnFilter, QueryColumn } from './QueryColumn';
 import { SchemaQuery } from './SchemaQuery';
 import { QuerySort } from './QuerySort';
 import { naturalSortByProperty } from './sort';
+import { SAMPLE_COLOR_COLUMN_NAME } from '../internal/components/samples/constants';
 
 export enum QueryInfoStatus {
     ok,
@@ -516,4 +517,8 @@ export class QueryInfo {
             template => template.url.toLowerCase().indexOf('exportexceltemplate') === -1
         );
     }
+
+    showSampleColorCol(): boolean {
+        return this.getColumn(SAMPLE_COLOR_COLUMN_NAME)?.shownInDetailsView === true;
+    }
 }

From e113739cc012c2ee9aeffb60625f89020a2b3296 Mon Sep 17 00:00:00 2001
From: cnathe <cnathe@labkey.com>
Date: Fri, 31 Jul 2026 10:35:16 -0500
Subject: [PATCH 06/51] 7.50.1-fb-sampleColor2.1

---
 packages/components/package-lock.json | 4 ++--
 packages/components/package.json      | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/components/package-lock.json b/packages/components/package-lock.json
index af315cb775..3be8f0c916 100644
--- a/packages/components/package-lock.json
+++ b/packages/components/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "@labkey/components",
-  "version": "7.50.1-fb-sampleColor2.0",
+  "version": "7.50.1-fb-sampleColor2.1",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@labkey/components",
-      "version": "7.50.1-fb-sampleColor2.0",
+      "version": "7.50.1-fb-sampleColor2.1",
       "license": "SEE LICENSE IN LICENSE.txt",
       "dependencies": {
         "@hello-pangea/dnd": "18.0.1",
diff --git a/packages/components/package.json b/packages/components/package.json
index 05aba3cdb7..8412449b33 100644
--- a/packages/components/package.json
+++ b/packages/components/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@labkey/components",
-  "version": "7.50.1-fb-sampleColor2.0",
+  "version": "7.50.1-fb-sampleColor2.1",
   "description": "Components, models, actions, and utility functions for LabKey applications and pages",
   "sideEffects": false,
   "files": [

From 6eb84ee675aefefc3afcdc2e442ee39c1c78ca00 Mon Sep 17 00:00:00 2001
From: cnathe <cnathe@labkey.com>
Date: Fri, 31 Jul 2026 13:32:54 -0500
Subject: [PATCH 07/51] Include ExpMaterialColor for aliquot editable field

---
 .../internal/components/picklist/ChoosePicklistModal.tsx    | 6 ++----
 .../components/src/internal/components/samples/actions.ts   | 1 +
 2 files changed, 3 insertions(+), 4 deletions(-)

diff --git a/packages/components/src/internal/components/picklist/ChoosePicklistModal.tsx b/packages/components/src/internal/components/picklist/ChoosePicklistModal.tsx
index 8d85de9806..4630e75554 100644
--- a/packages/components/src/internal/components/picklist/ChoosePicklistModal.tsx
+++ b/packages/components/src/internal/components/picklist/ChoosePicklistModal.tsx
@@ -190,10 +190,8 @@ export const AddedToPicklistNotification: FC<AddedToPicklistNotificationProps> =
     return (
         <>
             {numAddedNotification} to picklist{' '}
-            <b>
-                <AppLink to={AppURL.create(PICKLIST_KEY, picklist.listId)}>{picklist.name}</AppLink>
-            </b>
-            .{numNotAddedNotification}
+            <AppLink to={AppURL.create(PICKLIST_KEY, picklist.listId)}>{picklist.name}</AppLink>.
+            {numNotAddedNotification}
         </>
     );
 };
diff --git a/packages/components/src/internal/components/samples/actions.ts b/packages/components/src/internal/components/samples/actions.ts
index e0fbfaafcf..1cf9bdd441 100644
--- a/packages/components/src/internal/components/samples/actions.ts
+++ b/packages/components/src/internal/components/samples/actions.ts
@@ -376,6 +376,7 @@ function isAliquotEditableField(colName: string): boolean {
         colName === 'name' ||
         colName === 'description' ||
         colName === 'materialexpdate' ||
+        colName === 'expmaterialcolor' ||
         (isSampleStatusEnabled() && colName === 'samplestate')
     );
 }

From 49823a570c91278ad58d040a08d35913087ad600 Mon Sep 17 00:00:00 2001
From: cnathe <cnathe@labkey.com>
Date: Fri, 31 Jul 2026 14:41:39 -0500
Subject: [PATCH 08/51] App helpers for getting hasActiveProjectColors from
 moduleContext

---
 packages/components/src/index.ts              |  2 ++
 .../components/src/internal/app/constants.ts  |  1 +
 .../components/src/internal/app/utils.test.ts | 13 ++++++++++++
 packages/components/src/internal/app/utils.ts | 17 +++++++++++++++
 .../samples/ManageSampleColorsPanel.tsx       | 10 ++++++++-
 .../internal/components/samples/utils.test.ts | 21 +++++++++++++------
 6 files changed, 57 insertions(+), 7 deletions(-)

diff --git a/packages/components/src/index.ts b/packages/components/src/index.ts
index 0dd92ffa59..33e0af429d 100644
--- a/packages/components/src/index.ts
+++ b/packages/components/src/index.ts
@@ -712,6 +712,7 @@ import {
     getFolderSampleTypeExclusion,
     getPrimaryAppProperties,
     getProjectPath,
+    hasActiveProjectColors,
     hasModule,
     hasPremiumModule,
     hasProductFolders,
@@ -974,6 +975,7 @@ const App = {
     getLabelsTestAPIWrapper,
     getSecurityTestAPIWrapper,
     getQueryTestAPIWrapper,
+    hasActiveProjectColors,
     hasPremiumModule,
     hasProductFolders,
     hasModule,
diff --git a/packages/components/src/internal/app/constants.ts b/packages/components/src/internal/app/constants.ts
index 2ac3de755e..6994e15ab4 100644
--- a/packages/components/src/internal/app/constants.ts
+++ b/packages/components/src/internal/app/constants.ts
@@ -114,6 +114,7 @@ export const EXPERIMENTAL_REQUESTS_MENU = 'experimental-biologics-requests-menu'
 
 export const FOLDER_DATA_TYPE_EXCLUSIONS = 'dataTypeExclusions';
 export const ARCHIVED_FOLDERS = 'archivedContainers';
+export const HAS_ACTIVE_PROJECT_COLORS = 'hasActiveProjectColors';
 
 export const BASE_APP_HELP_LINK = 'https://www.labkey.org/SampleManagerHelp/wiki-page.view?name=';
 
diff --git a/packages/components/src/internal/app/utils.test.ts b/packages/components/src/internal/app/utils.test.ts
index 7869731379..6095f5baa7 100644
--- a/packages/components/src/internal/app/utils.test.ts
+++ b/packages/components/src/internal/app/utils.test.ts
@@ -47,6 +47,7 @@ import {
     getProjectPath,
     getSamplesSectionConfig,
     getStorageSectionConfig,
+    hasActiveProjectColors,
     hasPremiumModule,
     isAppHomeFolder,
     isAssayEnabled,
@@ -812,6 +813,18 @@ describe('utils', () => {
         expect(LABKEY.moduleContext.query).toEqual({ hasProductFolders: false, ken: 'griffey' });
     });
 
+    test('hasActiveProjectColors', () => {
+        expect(hasActiveProjectColors({})).toBe(false);
+        expect(hasActiveProjectColors({ samplemanagement: {} })).toBe(false);
+        expect(hasActiveProjectColors({ samplemanagement: { hasActiveProjectColors: false } })).toBe(false);
+        expect(hasActiveProjectColors({ samplemanagement: { hasActiveProjectColors: true } })).toBe(true);
+
+        const moduleContext = LABKEY.moduleContext;
+        LABKEY.moduleContext = { samplemanagement: { hasActiveProjectColors: true } };
+        expect(hasActiveProjectColors()).toBe(true); // falls back to the global moduleContext
+        LABKEY.moduleContext = moduleContext;
+    });
+
     test('hasPremiumModule', () => {
         expect(hasPremiumModule({})).toBeFalsy();
         expect(hasPremiumModule({ api: { moduleNames: ['samplemanagement'] } })).toBeFalsy();
diff --git a/packages/components/src/internal/app/utils.ts b/packages/components/src/internal/app/utils.ts
index 716e2ed344..0373ba824d 100644
--- a/packages/components/src/internal/app/utils.ts
+++ b/packages/components/src/internal/app/utils.ts
@@ -30,6 +30,7 @@ import {
     FOLDER_DATA_TYPE_EXCLUSIONS,
     FREEZER_MANAGER_APP_PROPERTIES,
     FREEZERS_KEY,
+    HAS_ACTIVE_PROJECT_COLORS,
     HOME_KEY,
     LABKEY_SERVER_PRODUCT_NAME,
     LIMS_APP_PROPERTIES,
@@ -208,6 +209,22 @@ export function isSampleColorsEnabled(moduleContext?: ModuleContext): boolean {
     return resolveModuleContext(moduleContext)?.experiment?.SampleColors === true;
 }
 
+/** True if the current container's project has at least one active (non-archived) sample color. */
+export function hasActiveProjectColors(moduleContext?: ModuleContext): boolean {
+    return resolveModuleContext(moduleContext)?.samplemanagement?.[HAS_ACTIVE_PROJECT_COLORS] === true;
+}
+
+export function setActiveProjectColors(moduleContext: ModuleContext, hasActiveProjectColors: boolean): ModuleContext {
+    // side-effect set global moduleContext
+    if (LABKEY?.moduleContext?.samplemanagement) {
+        LABKEY.moduleContext.samplemanagement.hasActiveProjectColors = hasActiveProjectColors;
+    }
+
+    return Object.assign(moduleContext ?? {}, {
+        samplemanagement: Object.assign(moduleContext?.samplemanagement ?? {}, { hasActiveProjectColors }),
+    });
+}
+
 export function isQueryMetadataEditor(): boolean {
     const action = ActionURL.getAction()?.toLowerCase() || '';
     return action === 'metadataquery' || action.startsWith('querymetadataeditor');
diff --git a/packages/components/src/internal/components/samples/ManageSampleColorsPanel.tsx b/packages/components/src/internal/components/samples/ManageSampleColorsPanel.tsx
index 71fbfc92f9..c4441fab54 100644
--- a/packages/components/src/internal/components/samples/ManageSampleColorsPanel.tsx
+++ b/packages/components/src/internal/components/samples/ManageSampleColorsPanel.tsx
@@ -19,6 +19,8 @@ import { SCHEMAS } from '../../schemas';
 import { resolveErrorMessage } from '../../util/messaging';
 import { InjectedRouteLeaveProps } from '../../util/RouteLeave';
 import { useAppContext } from '../../AppContext';
+import { useServerContext } from '../base/ServerContext';
+import { setActiveProjectColors } from '../../app/utils';
 import { Container } from '../base/models/Container';
 
 import { DataTypeSelector } from '../entities/DataTypeSelector';
@@ -374,6 +376,7 @@ export const ManageSampleColorsPanel: FC<ManageSampleColorsPanelProps> = memo(pr
     const [selectedRowId, setSelectedRowId] = useState<number>();
     const [dirty, setDirty] = useState<boolean>(false);
     const { api } = useAppContext();
+    const { moduleContext } = useServerContext();
     const isNew = selectedRowId === NEW_COLOR_INDEX;
 
     const loadColors = useCallback(
@@ -383,6 +386,11 @@ export const ManageSampleColorsPanel: FC<ManageSampleColorsPanelProps> = memo(pr
                 .getSampleColors(true, true, homeContainer?.path)
                 .then(loaded => {
                     setColors(loaded);
+                    // keep the moduleContext flag in sync so consumers don't have to reload the page after a save
+                    setActiveProjectColors(
+                        moduleContext,
+                        loaded.some(c => !c.archived)
+                    );
                     if (selectLabel) setSelectedRowId(loaded.find(c => c.label === selectLabel)?.rowId);
                 })
                 .catch(() => {
@@ -390,7 +398,7 @@ export const ManageSampleColorsPanel: FC<ManageSampleColorsPanelProps> = memo(pr
                     setError('Error: Unable to load sample colors.');
                 });
         },
-        [api, homeContainer?.path]
+        [api, homeContainer?.path, moduleContext]
     );
 
     useEffect(() => {
diff --git a/packages/components/src/internal/components/samples/utils.test.ts b/packages/components/src/internal/components/samples/utils.test.ts
index c74586d474..2ab4bed0e3 100644
--- a/packages/components/src/internal/components/samples/utils.test.ts
+++ b/packages/components/src/internal/components/samples/utils.test.ts
@@ -18,6 +18,7 @@ import {
     DEFAULT_AVAILABLE_STATUS_COLOR,
     DEFAULT_CONSUMED_STATUS_COLOR,
     DEFAULT_LOCKED_STATUS_COLOR,
+    SAMPLE_COLOR_REQUIRED_COLUMNS,
     SAMPLE_STATE_TYPE_COLUMN_NAME,
     SampleOperation,
 } from './constants';
@@ -47,15 +48,23 @@ const INVENTORY_COLS = SCHEMAS.INVENTORY.INVENTORY_COLS;
 test('getOmittedSampleTypeColumn', () => {
     let moduleContext = {};
     expect(isFreezerManagementEnabled(moduleContext)).toBeFalsy();
-    expect(getOmittedSampleTypeColumns(TEST_USER_READER, moduleContext)).toStrictEqual(INVENTORY_COLS);
-    expect(getOmittedSampleTypeColumns(TEST_USER_GUEST, moduleContext)).toStrictEqual(
-        [CHECKED_OUT_BY_FIELD].concat(INVENTORY_COLS)
-    );
+    expect(getOmittedSampleTypeColumns(TEST_USER_READER, moduleContext)).toStrictEqual([
+        ...INVENTORY_COLS,
+        ...SAMPLE_COLOR_REQUIRED_COLUMNS,
+    ]);
+    expect(getOmittedSampleTypeColumns(TEST_USER_GUEST, moduleContext)).toStrictEqual([
+        CHECKED_OUT_BY_FIELD,
+        ...INVENTORY_COLS,
+        ...SAMPLE_COLOR_REQUIRED_COLUMNS,
+    ]);
 
     moduleContext = { inventory: {} };
     expect(isFreezerManagementEnabled(moduleContext)).toBeTruthy();
-    expect(getOmittedSampleTypeColumns(TEST_USER_READER, moduleContext)).toStrictEqual([]);
-    expect(getOmittedSampleTypeColumns(TEST_USER_GUEST, moduleContext)).toStrictEqual([CHECKED_OUT_BY_FIELD]);
+    expect(getOmittedSampleTypeColumns(TEST_USER_READER, moduleContext)).toStrictEqual(SAMPLE_COLOR_REQUIRED_COLUMNS);
+    expect(getOmittedSampleTypeColumns(TEST_USER_GUEST, moduleContext)).toStrictEqual([
+        CHECKED_OUT_BY_FIELD,
+        ...SAMPLE_COLOR_REQUIRED_COLUMNS,
+    ]);
 });
 
 describe('isSampleOperationPermitted', () => {

From eade72e132a1957ec4d01f9e45965941ce660dc5 Mon Sep 17 00:00:00 2001
From: cnathe <cnathe@labkey.com>
Date: Fri, 31 Jul 2026 14:43:29 -0500
Subject: [PATCH 09/51] getOmittedSampleTypeColumns to include
 SAMPLE_COLOR_REQUIRED_COLUMNS when no colors defined in project

---
 .../src/internal/components/samples/utils.tsx         | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/packages/components/src/internal/components/samples/utils.tsx b/packages/components/src/internal/components/samples/utils.tsx
index 504468f28d..8352035e68 100644
--- a/packages/components/src/internal/components/samples/utils.tsx
+++ b/packages/components/src/internal/components/samples/utils.tsx
@@ -7,7 +7,12 @@ import { Filter, Query, Utils } from '@labkey/api';
 import { User } from '../base/models/User';
 
 import { isFreezerManagementEnabled } from '../../app/products';
-import { isProductFoldersEnabled, isProjectContainer, isSampleStatusEnabled } from '../../app/utils';
+import {
+    hasActiveProjectColors,
+    isProductFoldersEnabled,
+    isProjectContainer,
+    isSampleStatusEnabled,
+} from '../../app/utils';
 
 import { OperationConfirmationData } from '../entities/models';
 
@@ -25,6 +30,7 @@ import {
     DEFAULT_LOCKED_STATUS_COLOR,
     operationRestrictionMessage,
     permittedOps,
+    SAMPLE_COLOR_REQUIRED_COLUMNS,
     SAMPLE_DOMAIN_DEFAULT_SYSTEM_FIELDS,
     SAMPLE_DOMAIN_INVENTORY_SYSTEM_FIELDS,
     SAMPLE_STATE_COLOR_COLUMN_NAME,
@@ -46,6 +52,9 @@ export function getOmittedSampleTypeColumns(user: User, moduleContext?: ModuleCo
     if (!isFreezerManagementEnabled(moduleContext)) {
         cols = cols.concat(SCHEMAS.INVENTORY.INVENTORY_COLS);
     }
+    if (!hasActiveProjectColors(moduleContext)) {
+        cols = cols.concat(SAMPLE_COLOR_REQUIRED_COLUMNS);
+    }
 
     return cols;
 }

From b4adfc28deba90111e8417ac3e263b586e5d39f2 Mon Sep 17 00:00:00 2001
From: cnathe <cnathe@labkey.com>
Date: Fri, 31 Jul 2026 14:43:51 -0500
Subject: [PATCH 10/51] 7.50.1-fb-sampleColor2.2

---
 packages/components/package-lock.json | 4 ++--
 packages/components/package.json      | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/components/package-lock.json b/packages/components/package-lock.json
index 3be8f0c916..1af47aba47 100644
--- a/packages/components/package-lock.json
+++ b/packages/components/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "@labkey/components",
-  "version": "7.50.1-fb-sampleColor2.1",
+  "version": "7.50.1-fb-sampleColor2.2",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@labkey/components",
-      "version": "7.50.1-fb-sampleColor2.1",
+      "version": "7.50.1-fb-sampleColor2.2",
       "license": "SEE LICENSE IN LICENSE.txt",
       "dependencies": {
         "@hello-pangea/dnd": "18.0.1",
diff --git a/packages/components/package.json b/packages/components/package.json
index 8412449b33..42352d2704 100644
--- a/packages/components/package.json
+++ b/packages/components/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@labkey/components",
-  "version": "7.50.1-fb-sampleColor2.1",
+  "version": "7.50.1-fb-sampleColor2.2",
   "description": "Components, models, actions, and utility functions for LabKey applications and pages",
   "sideEffects": false,
   "files": [

From 129ef71059b30fb0e1346397754d66e267ea50d2 Mon Sep 17 00:00:00 2001
From: cnathe <cnathe@labkey.com>
Date: Fri, 31 Jul 2026 16:04:20 -0500
Subject: [PATCH 11/51] remove experimental feature flag

---
 packages/components/package-lock.json                       | 4 ++--
 packages/components/package.json                            | 2 +-
 packages/components/src/index.ts                            | 2 --
 packages/components/src/internal/app/utils.ts               | 4 ----
 .../domainproperties/samples/SampleTypePropertiesPanel.tsx  | 6 ++----
 5 files changed, 5 insertions(+), 13 deletions(-)

diff --git a/packages/components/package-lock.json b/packages/components/package-lock.json
index 1af47aba47..832a3322be 100644
--- a/packages/components/package-lock.json
+++ b/packages/components/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "@labkey/components",
-  "version": "7.50.1-fb-sampleColor2.2",
+  "version": "7.50.1-fb-sampleColor2.3",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@labkey/components",
-      "version": "7.50.1-fb-sampleColor2.2",
+      "version": "7.50.1-fb-sampleColor2.3",
       "license": "SEE LICENSE IN LICENSE.txt",
       "dependencies": {
         "@hello-pangea/dnd": "18.0.1",
diff --git a/packages/components/package.json b/packages/components/package.json
index 42352d2704..f7cc3d67b8 100644
--- a/packages/components/package.json
+++ b/packages/components/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@labkey/components",
-  "version": "7.50.1-fb-sampleColor2.2",
+  "version": "7.50.1-fb-sampleColor2.3",
   "description": "Components, models, actions, and utility functions for LabKey applications and pages",
   "sideEffects": false,
   "files": [
diff --git a/packages/components/src/index.ts b/packages/components/src/index.ts
index 33e0af429d..32c9890a2a 100644
--- a/packages/components/src/index.ts
+++ b/packages/components/src/index.ts
@@ -740,7 +740,6 @@ import {
     isProjectContainer,
     isProtectedDataEnabled,
     isRegistryEnabled,
-    isSampleColorsEnabled,
     isSampleStatusEnabled,
     isSharedContainer,
     isSourceTypeEnabled,
@@ -957,7 +956,6 @@ const App = {
     isSharedContainer,
     freezerManagerIsCurrentApp,
     isSampleManagerEnabled,
-    isSampleColorsEnabled,
     isSampleStatusEnabled,
     isProductFoldersEnabled,
     isAllProductFoldersFilteringEnabled,
diff --git a/packages/components/src/internal/app/utils.ts b/packages/components/src/internal/app/utils.ts
index 0373ba824d..b9df29c2ad 100644
--- a/packages/components/src/internal/app/utils.ts
+++ b/packages/components/src/internal/app/utils.ts
@@ -205,10 +205,6 @@ export function isSampleStatusEnabled(moduleContext?: ModuleContext): boolean {
     return hasSampleManagementModule(moduleContext);
 }
 
-export function isSampleColorsEnabled(moduleContext?: ModuleContext): boolean {
-    return resolveModuleContext(moduleContext)?.experiment?.SampleColors === true;
-}
-
 /** True if the current container's project has at least one active (non-archived) sample color. */
 export function hasActiveProjectColors(moduleContext?: ModuleContext): boolean {
     return resolveModuleContext(moduleContext)?.samplemanagement?.[HAS_ACTIVE_PROJECT_COLORS] === true;
diff --git a/packages/components/src/internal/components/domainproperties/samples/SampleTypePropertiesPanel.tsx b/packages/components/src/internal/components/domainproperties/samples/SampleTypePropertiesPanel.tsx
index e06920d390..b1b6249b59 100644
--- a/packages/components/src/internal/components/domainproperties/samples/SampleTypePropertiesPanel.tsx
+++ b/packages/components/src/internal/components/domainproperties/samples/SampleTypePropertiesPanel.tsx
@@ -32,7 +32,7 @@ import { ENTITY_FORM_IDS } from '../entities/constants';
 import { AutoLinkToStudyDropdown } from '../AutoLinkToStudyDropdown';
 
 import { isSampleManagerEnabled } from '../../../app/products';
-import { getCurrentProductName, isCommunityDistribution, isSampleColorsEnabled } from '../../../app/utils';
+import { getCurrentProductName, isCommunityDistribution } from '../../../app/utils';
 
 import { PREFIX_SUBSTITUTION_EXPRESSION, PROPERTIES_PANEL_NAMING_PATTERN_WARNING_MSG } from '../constants';
 
@@ -618,9 +618,7 @@ class SampleTypePropertiesPanelImpl extends PureComponent<InjectedDomainProperti
                                 />
                             </div>
                         </div>
-                        {isSampleColorsEnabled() && (
-                            <SampleColorsSetting onChange={this.onSampleColorsChange} sampleTypeRowId={model.rowId} />
-                        )}
+                        <SampleColorsSetting onChange={this.onSampleColorsChange} sampleTypeRowId={model.rowId} />
                         {includeMetricUnitProperty && (
                             <>
                                 <div className="row margin-top">

From efe83085e13f36d510063b2b3f077548c3defe6f Mon Sep 17 00:00:00 2001
From: cnathe <cnathe@labkey.com>
Date: Fri, 31 Jul 2026 16:06:34 -0500
Subject: [PATCH 12/51] jset snapshot update

---
 .../SampleTypePropertiesPanel.test.tsx.snap   | 91 ++++++++++++++++++-
 1 file changed, 89 insertions(+), 2 deletions(-)

diff --git a/packages/components/src/internal/components/domainproperties/samples/__snapshots__/SampleTypePropertiesPanel.test.tsx.snap b/packages/components/src/internal/components/domainproperties/samples/__snapshots__/SampleTypePropertiesPanel.test.tsx.snap
index d577011f50..0d7e2c2cdb 100644
--- a/packages/components/src/internal/components/domainproperties/samples/__snapshots__/SampleTypePropertiesPanel.test.tsx.snap
+++ b/packages/components/src/internal/components/domainproperties/samples/__snapshots__/SampleTypePropertiesPanel.test.tsx.snap
@@ -260,6 +260,47 @@ exports[`SampleTypePropertiesPanel appPropertiesOnly 1`] = `
               </div>
             </div>
           </div>
+          <div
+            class="row margin-top"
+          >
+            <div
+              class="col-xs-2"
+            >
+              <span>
+                Sample 
+                <span
+                  class="domain-no-wrap"
+                >
+                  Colors
+                  <div
+                    class="overlay-trigger"
+                  >
+                    <span
+                      class="label-help-target"
+                    >
+                      <span
+                        class="label-help-icon fa fa-question-circle"
+                      />
+                    </span>
+                  </div>
+                </span>
+              </span>
+            </div>
+            <div
+              class="col-xs-10"
+            >
+              <span
+                class=""
+              >
+                <i
+                  aria-hidden="true"
+                  class="fa fa-spinner fa-pulse"
+                />
+                 
+                Loading...
+              </span>
+            </div>
+          </div>
         </div>
       </div>
       <div
@@ -288,6 +329,11 @@ exports[`SampleTypePropertiesPanel appPropertiesOnly 1`] = `
     >
       <div />
     </div>
+    <div
+      id="overlay-trigger-portal-label-help-tip5"
+    >
+      <div />
+    </div>
   </body>,
   "container": <div>
     <div
@@ -545,6 +591,47 @@ exports[`SampleTypePropertiesPanel appPropertiesOnly 1`] = `
             </div>
           </div>
         </div>
+        <div
+          class="row margin-top"
+        >
+          <div
+            class="col-xs-2"
+          >
+            <span>
+              Sample 
+              <span
+                class="domain-no-wrap"
+              >
+                Colors
+                <div
+                  class="overlay-trigger"
+                >
+                  <span
+                    class="label-help-target"
+                  >
+                    <span
+                      class="label-help-icon fa fa-question-circle"
+                    />
+                  </span>
+                </div>
+              </span>
+            </span>
+          </div>
+          <div
+            class="col-xs-10"
+          >
+            <span
+              class=""
+            >
+              <i
+                aria-hidden="true"
+                class="fa fa-spinner fa-pulse"
+              />
+               
+              Loading...
+            </span>
+          </div>
+        </div>
       </div>
     </div>
     <div
@@ -1333,12 +1420,12 @@ exports[`SampleTypePropertiesPanel include dataclass and use custom labels 1`] =
       </div>
     </div>
     <div
-      id="overlay-trigger-portal-label-help-tip9"
+      id="overlay-trigger-portal-label-help-tip10"
     >
       <div />
     </div>
     <div
-      id="overlay-trigger-portal-label-help-tip10"
+      id="overlay-trigger-portal-label-help-tip11"
     >
       <div />
     </div>

From abb17deac54b96dd935f4c0f6332488b80244fce Mon Sep 17 00:00:00 2001
From: cnathe <cnathe@labkey.com>
Date: Mon, 3 Aug 2026 09:35:07 -0500
Subject: [PATCH 13/51] SampleColorInput option renderer to include ColorIcon

---
 .../components/forms/input/SampleColorInput.tsx  | 16 ++++++++++++++--
 1 file changed, 14 insertions(+), 2 deletions(-)

diff --git a/packages/components/src/internal/components/forms/input/SampleColorInput.tsx b/packages/components/src/internal/components/forms/input/SampleColorInput.tsx
index 6d9e3a8274..01f9463066 100644
--- a/packages/components/src/internal/components/forms/input/SampleColorInput.tsx
+++ b/packages/components/src/internal/components/forms/input/SampleColorInput.tsx
@@ -7,12 +7,24 @@ import { List } from 'immutable';
 import { Filter } from '@labkey/api';
 
 import { QueryColumn } from '../../../../public/QueryColumn';
-import { QuerySelect, QuerySelectOwnProps } from '../QuerySelect';
+import { QuerySelect, QuerySelectOptionProps, QuerySelectOwnProps } from '../QuerySelect';
 import { LOOKUP_DEFAULT_SIZE } from '../../../constants';
 import { NON_ARCHIVED_COLOR_FILTER } from '../../samples/constants';
 
 import { InputRendererProps } from './types';
 import { caseInsensitive } from '../../../util/utils';
+import { ColorIcon } from '../../base/ColorIcon';
+
+const SampleColorSelectOption: FC<QuerySelectOptionProps> = memo(({ row, label }) => {
+    // color is available here because QuerySelect includes identifying fields (see exp.DataColor ~~identifyingfields~~.qview.xml file)
+    const colorVal = caseInsensitive(row, 'Color')?.value;
+    return (
+        <div className="sample-color-select-option">
+            <ColorIcon label={label} useSmall value={colorVal} />
+        </div>
+    );
+});
+SampleColorSelectOption.displayName = 'SampleColorSelectOption';
 
 interface SampleColorInputProps extends Omit<QuerySelectOwnProps, 'schemaQuery' | 'valueColumn'> {
     col: QueryColumn;
@@ -47,6 +59,7 @@ export const SampleColorInput: FC<SampleColorInputProps> = memo(props => {
                 required={col.required}
                 showLoading={false}
                 {...querySelectProps}
+                OptionComponent={SampleColorSelectOption}
                 queryFilters={filters}
                 schemaQuery={col.lookup.schemaQuery}
                 valueColumn={col.lookup.keyColumn}
@@ -54,7 +67,6 @@ export const SampleColorInput: FC<SampleColorInputProps> = memo(props => {
         </>
     );
 });
-
 SampleColorInput.displayName = 'SampleColorInput';
 
 export const SampleColorInputRenderer: FC<InputRendererProps> = memo(props => {

From 37df271cec64a5105cb4ecf91724378650c0837e Mon Sep 17 00:00:00 2001
From: cnathe <cnathe@labkey.com>
Date: Mon, 3 Aug 2026 10:42:55 -0500
Subject: [PATCH 14/51] SampleColorRenderer updates for cls and showLabel props

---
 .../renderers/SampleColorRenderer.test.tsx    | 182 ++++++++++++++++++
 .../renderers/SampleColorRenderer.tsx         |   8 +-
 packages/components/src/theme/samples.scss    |   3 +
 3 files changed, 191 insertions(+), 2 deletions(-)
 create mode 100644 packages/components/src/internal/renderers/SampleColorRenderer.test.tsx

diff --git a/packages/components/src/internal/renderers/SampleColorRenderer.test.tsx b/packages/components/src/internal/renderers/SampleColorRenderer.test.tsx
new file mode 100644
index 0000000000..36bb309c5f
--- /dev/null
+++ b/packages/components/src/internal/renderers/SampleColorRenderer.test.tsx
@@ -0,0 +1,182 @@
+/*
+ * Copyright (c) 2026 LabKey Corporation. All rights reserved. No portion of this work may be reproduced
+ * in any form or by any electronic or mechanical means without written permission from LabKey Corporation.
+ */
+import React from 'react';
+import { render } from '@testing-library/react';
+import { fromJS, Map } from 'immutable';
+
+import { SAMPLE_COLOR_COLOR_COLUMN_NAME, SAMPLE_COLOR_COLUMN_NAME } from '../components/samples/constants';
+
+import { SampleColorRenderer } from './SampleColorRenderer';
+
+const RED = '#FF0000';
+
+function getIcon(): HTMLElement {
+    return document.querySelector('i');
+}
+
+describe('SampleColorRenderer', () => {
+    describe('label', () => {
+        test('undefined data renders nothing', () => {
+            // Act
+            render(<SampleColorRenderer data={undefined} />);
+
+            // Assert - no label text and no color icon are rendered
+            expect(document.body.textContent).toBe('');
+            expect(getIcon()).toBeNull();
+        });
+
+        test('empty data renders nothing', () => {
+            // Act
+            render(<SampleColorRenderer data={Map({})} />);
+
+            // Assert - a data Map without value/displayValue produces no output
+            expect(document.body.textContent).toBe('');
+            expect(getIcon()).toBeNull();
+        });
+
+        test('null value renders nothing', () => {
+            // Act
+            render(<SampleColorRenderer data={Map({ value: null, displayValue: null })} />);
+
+            // Assert - null is treated as no label, so nothing is rendered
+            expect(document.body.textContent).toBe('');
+            expect(getIcon()).toBeNull();
+        });
+
+        test('empty string value renders nothing', () => {
+            // Act
+            render(<SampleColorRenderer data={Map({ value: '' })} />);
+
+            // Assert - empty string is treated as no label, so nothing is rendered
+            expect(document.body.textContent).toBe('');
+            expect(getIcon()).toBeNull();
+        });
+
+        test('falls back to value when displayValue is not present', () => {
+            // Act
+            render(<SampleColorRenderer data={Map({ value: 'Red' })} />);
+
+            // Assert - the raw value is used as the label
+            expect(document.body.textContent).toBe('Red');
+        });
+
+        test('prefers displayValue over value', () => {
+            // Act
+            render(<SampleColorRenderer data={Map({ displayValue: 'Bright Red', value: 'Red' })} />);
+
+            // Assert - displayValue wins over value for the label
+            expect(document.body.textContent).toBe('Bright Red');
+        });
+
+        test('showLabel false renders the color swatch without the label', () => {
+            // Arrange
+            const data = Map({ displayValue: 'Red' });
+            const row = fromJS({ [SAMPLE_COLOR_COLOR_COLUMN_NAME]: { value: RED } });
+
+            // Act
+            render(<SampleColorRenderer data={data} row={row} showLabel={false} />);
+
+            // Assert - the swatch is still colored but no label text is rendered
+            expect(document.body.textContent).toBe('');
+            expect(getIcon()).toHaveStyle({ backgroundColor: RED });
+        });
+    });
+
+    describe('color resolution', () => {
+        test('resolves color from the sample color column', () => {
+            // Arrange
+            const row = fromJS({
+                [SAMPLE_COLOR_COLUMN_NAME]: { value: 'Red' },
+                [SAMPLE_COLOR_COLOR_COLUMN_NAME]: { value: RED },
+            });
+
+            // Act
+            render(<SampleColorRenderer data={row.get(SAMPLE_COLOR_COLUMN_NAME)} row={row} />);
+
+            // Assert - the icon is filled with the row's color and the label is shown
+            expect(document.body.textContent).toBe('Red');
+            expect(getIcon()).toHaveStyle({ backgroundColor: RED });
+        });
+
+        test('resolves color from the SampleID-prefixed column', () => {
+            // Arrange - assay/other grids expose the color under a SampleID/ prefixed field key
+            const row = fromJS({ ['SampleID/' + SAMPLE_COLOR_COLOR_COLUMN_NAME]: { value: RED } });
+
+            // Act
+            render(<SampleColorRenderer data={Map({ value: 'Red' })} row={row} />);
+
+            // Assert - the prefixed column is used as the fallback color source
+            expect(getIcon()).toHaveStyle({ backgroundColor: RED });
+        });
+
+        test('prefers the unprefixed color column over the SampleID-prefixed one', () => {
+            // Arrange
+            const row = fromJS({
+                [SAMPLE_COLOR_COLOR_COLUMN_NAME]: { value: RED },
+                ['SampleID/' + SAMPLE_COLOR_COLOR_COLUMN_NAME]: { value: '#00FF00' },
+            });
+
+            // Act
+            render(<SampleColorRenderer data={Map({ value: 'Red' })} row={row} />);
+
+            // Assert - the unprefixed column wins
+            expect(getIcon()).toHaveStyle({ backgroundColor: RED });
+        });
+
+        test('resolves color regardless of row key casing', () => {
+            // Arrange - selectRows key casing is not guaranteed to match the column name constant
+            const row = fromJS({ [SAMPLE_COLOR_COLOR_COLUMN_NAME.toLowerCase()]: { value: RED } });
+
+            // Act
+            render(<SampleColorRenderer data={Map({ value: 'Red' })} row={row} />);
+
+            // Assert - the lookup is case-insensitive
+            expect(getIcon()).toHaveStyle({ backgroundColor: RED });
+        });
+
+        test('renders the label without a swatch when the row has no color', () => {
+            // Act
+            render(<SampleColorRenderer data={Map({ value: 'Red' })} row={fromJS({ Name: { value: 'S-1' } })} />);
+
+            // Assert - no icon is rendered when no color is resolved, but the label remains
+            expect(document.body.textContent).toBe('Red');
+            expect(getIcon()).toBeNull();
+        });
+
+        test('renders the label without a swatch when no row is provided', () => {
+            // Act
+            render(<SampleColorRenderer data={Map({ value: 'Red' })} />);
+
+            // Assert - color resolution is skipped entirely without a row
+            expect(document.body.textContent).toBe('Red');
+            expect(getIcon()).toBeNull();
+        });
+    });
+
+    describe('cls', () => {
+        test('applies the default class', () => {
+            // Arrange
+            const row = fromJS({ [SAMPLE_COLOR_COLOR_COLUMN_NAME]: { value: RED } });
+
+            // Act
+            render(<SampleColorRenderer data={Map({ value: 'Red' })} row={row} />);
+
+            // Assert - the icon carries the base circle class plus the default sample-color class
+            expect(getIcon()).toHaveClass('color-icon__circle', 'sample-color');
+        });
+
+        test('applies a cls override alongside the base class', () => {
+            // Arrange
+            const row = fromJS({ [SAMPLE_COLOR_COLOR_COLUMN_NAME]: { value: RED } });
+
+            // Act
+            render(<SampleColorRenderer cls="sample-color-header" data={Map({ value: 'Red' })} row={row} />);
+
+            // Assert - the override replaces the default class but keeps the base circle class
+            expect(getIcon()).toHaveClass('color-icon__circle', 'sample-color-header');
+            expect(getIcon()).not.toHaveClass('sample-color');
+        });
+    });
+});
diff --git a/packages/components/src/internal/renderers/SampleColorRenderer.tsx b/packages/components/src/internal/renderers/SampleColorRenderer.tsx
index 8997a33316..f0f96fa047 100644
--- a/packages/components/src/internal/renderers/SampleColorRenderer.tsx
+++ b/packages/components/src/internal/renderers/SampleColorRenderer.tsx
@@ -8,13 +8,16 @@ import { Map } from 'immutable';
 import { ColorIcon } from '../components/base/ColorIcon';
 import { caseInsensitive } from '../util/utils';
 import { SAMPLE_COLOR_COLOR_COLUMN_NAME } from '../components/samples/constants';
+import classNames from 'classnames';
 
 interface Props {
+    cls?: string;
     data?: Map<any, any>;
     row?: Map<any, any>;
+    showLabel?: boolean;
 }
 
-export const SampleColorRenderer: FC<Props> = memo(({ data, row }) => {
+export const SampleColorRenderer: FC<Props> = memo(({ data, row, showLabel = true, cls = 'sample-color' }) => {
     const label = data?.get('displayValue') ?? data?.get('value');
     if (label === undefined || label === null || label === '') return null;
 
@@ -25,8 +28,9 @@ export const SampleColorRenderer: FC<Props> = memo(({ data, row }) => {
             caseInsensitive(rowJS, SAMPLE_COLOR_COLOR_COLUMN_NAME)?.value ??
             caseInsensitive(rowJS, 'SampleID/' + SAMPLE_COLOR_COLOR_COLUMN_NAME)?.value;
     }
+    const labelDisplay = showLabel ? label : undefined;
 
-    return <ColorIcon cls="sample-color color-icon__circle" label={label} value={color} />;
+    return <ColorIcon cls={classNames('color-icon__circle', cls)} label={labelDisplay} value={color} />;
 });
 
 SampleColorRenderer.displayName = 'SampleColorRenderer';
diff --git a/packages/components/src/theme/samples.scss b/packages/components/src/theme/samples.scss
index 2e08a2ce18..3707f5aa22 100644
--- a/packages/components/src/theme/samples.scss
+++ b/packages/components/src/theme/samples.scss
@@ -77,3 +77,6 @@
 .sample-color {
     vertical-align: text-top;
 }
+.sample-color-header {
+    margin: 0 5px 3px 0;
+}

From f968e0f38db67aa4340e1e910b5f5893dc203359 Mon Sep 17 00:00:00 2001
From: cnathe <cnathe@labkey.com>
Date: Mon, 3 Aug 2026 10:43:17 -0500
Subject: [PATCH 15/51] 7.50.1-fb-sampleColor2.4

---
 packages/components/package-lock.json | 4 ++--
 packages/components/package.json      | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/components/package-lock.json b/packages/components/package-lock.json
index 832a3322be..57677c834b 100644
--- a/packages/components/package-lock.json
+++ b/packages/components/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "@labkey/components",
-  "version": "7.50.1-fb-sampleColor2.3",
+  "version": "7.50.1-fb-sampleColor2.4",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@labkey/components",
-      "version": "7.50.1-fb-sampleColor2.3",
+      "version": "7.50.1-fb-sampleColor2.4",
       "license": "SEE LICENSE IN LICENSE.txt",
       "dependencies": {
         "@hello-pangea/dnd": "18.0.1",
diff --git a/packages/components/package.json b/packages/components/package.json
index f7cc3d67b8..9ff557eec3 100644
--- a/packages/components/package.json
+++ b/packages/components/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@labkey/components",
-  "version": "7.50.1-fb-sampleColor2.3",
+  "version": "7.50.1-fb-sampleColor2.4",
   "description": "Components, models, actions, and utility functions for LabKey applications and pages",
   "sideEffects": false,
   "files": [

From 4fc9294c6bfed6d437dd2cc2928bbed5fdf513b0 Mon Sep 17 00:00:00 2001
From: cnathe <cnathe@labkey.com>
Date: Mon, 3 Aug 2026 13:20:18 -0500
Subject: [PATCH 16/51] SampleColorRenderer useSmall prop

---
 .../forms/detail/DetailDisplay.test.tsx       | 16 ++++++
 .../components/forms/detail/DetailDisplay.tsx |  2 +-
 .../renderers/SampleColorRenderer.test.tsx    | 53 ++++++++++++++-----
 .../renderers/SampleColorRenderer.tsx         | 12 ++++-
 packages/components/src/theme/samples.scss    |  2 +-
 5 files changed, 67 insertions(+), 18 deletions(-)

diff --git a/packages/components/src/internal/components/forms/detail/DetailDisplay.test.tsx b/packages/components/src/internal/components/forms/detail/DetailDisplay.test.tsx
index e8a93031d1..7609b1bee4 100644
--- a/packages/components/src/internal/components/forms/detail/DetailDisplay.test.tsx
+++ b/packages/components/src/internal/components/forms/detail/DetailDisplay.test.tsx
@@ -237,6 +237,22 @@ describe('resolveDetailRenderer', () => {
         validate(renderer, { foldercolumnrenderer: 1 });
     });
 
+    test('samplecolorrenderer renders a small swatch', () => {
+        // Arrange
+        const renderer = resolveDetailRenderer(new QueryColumn({ detailRenderer: 'SampleColorRenderer' }));
+        const row = fromJS({ 'ExpMaterialColor/Color': { value: '#FF0000' } });
+
+        // Act
+        render(<>{renderer(fromJS({ displayValue: 'Red' }), row)}</>);
+
+        // Assert - detail panels use the small swatch, with the label alongside it
+        const icon = document.querySelector('i');
+        expect(icon).toHaveClass('color-icon__circle-small');
+        expect(icon).not.toHaveClass('color-icon__circle');
+        expect(icon).toHaveStyle({ backgroundColor: '#FF0000' });
+        expect(document.body.textContent).toBe('Red');
+    });
+
     test('bogus renderer', () => {
         expect(resolveDetailRenderer(new QueryColumn({ detailRenderer: 'BogusRenderer' }))).toBeUndefined();
     });
diff --git a/packages/components/src/internal/components/forms/detail/DetailDisplay.tsx b/packages/components/src/internal/components/forms/detail/DetailDisplay.tsx
index 6a342d08a8..b013f1fe37 100644
--- a/packages/components/src/internal/components/forms/detail/DetailDisplay.tsx
+++ b/packages/components/src/internal/components/forms/detail/DetailDisplay.tsx
@@ -491,7 +491,7 @@ export function resolveDetailRenderer(column: QueryColumn): Renderer {
                 renderer = d => <NoLinkRenderer data={d} />;
                 break;
             case 'samplecolorrenderer':
-                renderer = (d, r) => <SampleColorRenderer data={d} row={r} />;
+                renderer = (d, r) => <SampleColorRenderer data={d} row={r} useSmall />;
                 break;
             case 'samplestatusrenderer':
                 renderer = (d, r) => <SampleStatusRenderer row={r} />;
diff --git a/packages/components/src/internal/renderers/SampleColorRenderer.test.tsx b/packages/components/src/internal/renderers/SampleColorRenderer.test.tsx
index 36bb309c5f..ab76f91010 100644
--- a/packages/components/src/internal/renderers/SampleColorRenderer.test.tsx
+++ b/packages/components/src/internal/renderers/SampleColorRenderer.test.tsx
@@ -155,28 +155,53 @@ describe('SampleColorRenderer', () => {
         });
     });
 
-    describe('cls', () => {
-        test('applies the default class', () => {
-            // Arrange
-            const row = fromJS({ [SAMPLE_COLOR_COLOR_COLUMN_NAME]: { value: RED } });
+    describe('cls and useSmall', () => {
+        const ROW = fromJS({ [SAMPLE_COLOR_COLOR_COLUMN_NAME]: { value: RED } });
 
+        test('applies the full size circle and the default class', () => {
             // Act
-            render(<SampleColorRenderer data={Map({ value: 'Red' })} row={row} />);
+            render(<SampleColorRenderer data={Map({ value: 'Red' })} row={ROW} />);
 
-            // Assert - the icon carries the base circle class plus the default sample-color class
-            expect(getIcon()).toHaveClass('color-icon__circle', 'sample-color');
+            // Assert - with neither cls nor useSmall the icon gets the full size circle
+            expect(getIcon()).toHaveClass('color-icon__circle', 'sample-color-top');
+            expect(getIcon()).not.toHaveClass('color-icon__circle-small');
         });
 
-        test('applies a cls override alongside the base class', () => {
-            // Arrange
-            const row = fromJS({ [SAMPLE_COLOR_COLOR_COLUMN_NAME]: { value: RED } });
-
+        test('a cls override replaces the default class', () => {
             // Act
-            render(<SampleColorRenderer cls="sample-color-header" data={Map({ value: 'Red' })} row={row} />);
+            render(<SampleColorRenderer cls="sample-color-header" data={Map({ value: 'Red' })} row={ROW} />);
 
-            // Assert - the override replaces the default class but keeps the base circle class
+            // Assert - the override takes the place of the default class and the full size circle is kept
             expect(getIcon()).toHaveClass('color-icon__circle', 'sample-color-header');
-            expect(getIcon()).not.toHaveClass('sample-color');
+            expect(getIcon()).not.toHaveClass('sample-color-top');
+        });
+
+        test('useSmall applies the small circle and drops the default class', () => {
+            // Act
+            render(<SampleColorRenderer data={Map({ value: 'Red' })} row={ROW} useSmall />);
+
+            // Assert - the small circle replaces the full size one, and no default class is applied
+            expect(getIcon()).toHaveClass('color-icon__circle-small');
+            expect(getIcon()).not.toHaveClass('color-icon__circle');
+            expect(getIcon()).not.toHaveClass('sample-color-top');
+        });
+
+        test('useSmall keeps an explicit cls override', () => {
+            // Act
+            render(<SampleColorRenderer cls="sample-color-header" data={Map({ value: 'Red' })} row={ROW} useSmall />);
+
+            // Assert - cls and useSmall combine
+            expect(getIcon()).toHaveClass('color-icon__circle-small', 'sample-color-header');
+            expect(getIcon()).not.toHaveClass('color-icon__circle');
+        });
+
+        test('useSmall still resolves the color and the label', () => {
+            // Act
+            render(<SampleColorRenderer data={Map({ displayValue: 'Red' })} row={ROW} useSmall />);
+
+            // Assert - sizing does not affect color resolution or the label
+            expect(getIcon()).toHaveStyle({ backgroundColor: RED });
+            expect(document.body.textContent).toBe('Red');
         });
     });
 });
diff --git a/packages/components/src/internal/renderers/SampleColorRenderer.tsx b/packages/components/src/internal/renderers/SampleColorRenderer.tsx
index f0f96fa047..ee80faebb8 100644
--- a/packages/components/src/internal/renderers/SampleColorRenderer.tsx
+++ b/packages/components/src/internal/renderers/SampleColorRenderer.tsx
@@ -15,9 +15,10 @@ interface Props {
     data?: Map<any, any>;
     row?: Map<any, any>;
     showLabel?: boolean;
+    useSmall?: boolean;
 }
 
-export const SampleColorRenderer: FC<Props> = memo(({ data, row, showLabel = true, cls = 'sample-color' }) => {
+export const SampleColorRenderer: FC<Props> = memo(({ data, row, showLabel = true, cls, useSmall = false }) => {
     const label = data?.get('displayValue') ?? data?.get('value');
     if (label === undefined || label === null || label === '') return null;
 
@@ -29,8 +30,15 @@ export const SampleColorRenderer: FC<Props> = memo(({ data, row, showLabel = tru
             caseInsensitive(rowJS, 'SampleID/' + SAMPLE_COLOR_COLOR_COLUMN_NAME)?.value;
     }
     const labelDisplay = showLabel ? label : undefined;
+    const clsDisplay = useSmall || cls ? cls : 'sample-color-top';
 
-    return <ColorIcon cls={classNames('color-icon__circle', cls)} label={labelDisplay} value={color} />;
+    return (
+        <ColorIcon
+            cls={classNames(clsDisplay, { 'color-icon__circle-small': useSmall, 'color-icon__circle': !useSmall })}
+            label={labelDisplay}
+            value={color}
+        />
+    );
 });
 
 SampleColorRenderer.displayName = 'SampleColorRenderer';
diff --git a/packages/components/src/theme/samples.scss b/packages/components/src/theme/samples.scss
index 3707f5aa22..3eb737333c 100644
--- a/packages/components/src/theme/samples.scss
+++ b/packages/components/src/theme/samples.scss
@@ -74,7 +74,7 @@
     margin: 0;
 }
 
-.sample-color {
+.sample-color-top {
     vertical-align: text-top;
 }
 .sample-color-header {

From 4ffb8a73aa2e114fed137e2bdd36d019f37ad5fe Mon Sep 17 00:00:00 2001
From: cnathe <cnathe@labkey.com>
Date: Mon, 3 Aug 2026 13:20:51 -0500
Subject: [PATCH 17/51] 7.50.1-fb-sampleColor2.5

---
 packages/components/package-lock.json | 4 ++--
 packages/components/package.json      | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/components/package-lock.json b/packages/components/package-lock.json
index 57677c834b..62ba4ff18e 100644
--- a/packages/components/package-lock.json
+++ b/packages/components/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "@labkey/components",
-  "version": "7.50.1-fb-sampleColor2.4",
+  "version": "7.50.1-fb-sampleColor2.5",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@labkey/components",
-      "version": "7.50.1-fb-sampleColor2.4",
+      "version": "7.50.1-fb-sampleColor2.5",
       "license": "SEE LICENSE IN LICENSE.txt",
       "dependencies": {
         "@hello-pangea/dnd": "18.0.1",
diff --git a/packages/components/package.json b/packages/components/package.json
index 9ff557eec3..aad22b8c89 100644
--- a/packages/components/package.json
+++ b/packages/components/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@labkey/components",
-  "version": "7.50.1-fb-sampleColor2.4",
+  "version": "7.50.1-fb-sampleColor2.5",
   "description": "Components, models, actions, and utility functions for LabKey applications and pages",
   "sideEffects": false,
   "files": [

From 35d46b9245551f1c291dd8d816aa6efc3a7a7204 Mon Sep 17 00:00:00 2001
From: cnathe <cnathe@labkey.com>
Date: Tue, 4 Aug 2026 15:41:42 -0500
Subject: [PATCH 18/51] 7.53.1-fb-sampleColor2.0

---
 packages/components/package-lock.json | 4 ++--
 packages/components/package.json      | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/components/package-lock.json b/packages/components/package-lock.json
index 00d6689300..e4b70447c7 100644
--- a/packages/components/package-lock.json
+++ b/packages/components/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "@labkey/components",
-  "version": "7.53.0",
+  "version": "7.53.1-fb-sampleColor2.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@labkey/components",
-      "version": "7.53.0",
+      "version": "7.53.1-fb-sampleColor2.0",
       "license": "SEE LICENSE IN LICENSE.txt",
       "dependencies": {
         "@hello-pangea/dnd": "18.0.1",
diff --git a/packages/components/package.json b/packages/components/package.json
index dbd60ccf22..1c1659617e 100644
--- a/packages/components/package.json
+++ b/packages/components/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@labkey/components",
-  "version": "7.53.0",
+  "version": "7.53.1-fb-sampleColor2.0",
   "description": "Components, models, actions, and utility functions for LabKey applications and pages",
   "sideEffects": false,
   "files": [

From add42fa150dc64f5eb12480917db3051161cae54 Mon Sep 17 00:00:00 2001
From: cnathe <cnathe@labkey.com>
Date: Wed, 5 Aug 2026 07:44:17 -0500
Subject: [PATCH 19/51] Sample color display in lineage details

---
 .../src/internal/components/lineage/constants.tsx          | 7 ++++++-
 packages/components/src/theme/samples.scss                 | 4 ++--
 2 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/packages/components/src/internal/components/lineage/constants.tsx b/packages/components/src/internal/components/lineage/constants.tsx
index 1742f70ffe..673803ed42 100644
--- a/packages/components/src/internal/components/lineage/constants.tsx
+++ b/packages/components/src/internal/components/lineage/constants.tsx
@@ -16,7 +16,11 @@ import {
     LineageOptions,
     LineageURLResolvers,
 } from './types';
-import { SAMPLE_STATE_COLOR_COLUMN_NAME, SAMPLE_STATE_TYPE_COLUMN_NAME } from '../samples/constants';
+import {
+    SAMPLE_COLOR_COLOR_COLUMN_NAME,
+    SAMPLE_STATE_COLOR_COLUMN_NAME,
+    SAMPLE_STATE_TYPE_COLUMN_NAME
+} from '../samples/constants';
 export const LINEAGE_GRAPH_FILTER_METRIC = "LineageGraphFilter";
 // Default depth to fetch with the lineage API
 export const DEFAULT_LINEAGE_DISTANCE = 5;
@@ -168,5 +172,6 @@ export const LINEAGE_DETAIL_REQUIRED_COLS = [
     '*',
     SAMPLE_STATE_COLOR_COLUMN_NAME,
     SAMPLE_STATE_TYPE_COLUMN_NAME,
+    SAMPLE_COLOR_COLOR_COLUMN_NAME,
     IDENTIFIED_COLUMN_NAME,
 ];
diff --git a/packages/components/src/theme/samples.scss b/packages/components/src/theme/samples.scss
index 3eb737333c..8c6b1551c3 100644
--- a/packages/components/src/theme/samples.scss
+++ b/packages/components/src/theme/samples.scss
@@ -74,8 +74,8 @@
     margin: 0;
 }
 
-.sample-color-top {
-    vertical-align: text-top;
+.sample-color-detail {
+    margin: 0 5px 0 0;
 }
 .sample-color-header {
     margin: 0 5px 3px 0;

From 266caa07fa22220b933ff8b5fd305ae54699a3c6 Mon Sep 17 00:00:00 2001
From: cnathe <cnathe@labkey.com>
Date: Wed, 5 Aug 2026 07:44:44 -0500
Subject: [PATCH 20/51] 7.53.1-fb-sampleColor2.1

---
 packages/components/package-lock.json | 4 ++--
 packages/components/package.json      | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/components/package-lock.json b/packages/components/package-lock.json
index e4b70447c7..263e9eb7cc 100644
--- a/packages/components/package-lock.json
+++ b/packages/components/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "@labkey/components",
-  "version": "7.53.1-fb-sampleColor2.0",
+  "version": "7.53.1-fb-sampleColor2.1",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@labkey/components",
-      "version": "7.53.1-fb-sampleColor2.0",
+      "version": "7.53.1-fb-sampleColor2.1",
       "license": "SEE LICENSE IN LICENSE.txt",
       "dependencies": {
         "@hello-pangea/dnd": "18.0.1",
diff --git a/packages/components/package.json b/packages/components/package.json
index 1c1659617e..bf1c198331 100644
--- a/packages/components/package.json
+++ b/packages/components/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@labkey/components",
-  "version": "7.53.1-fb-sampleColor2.0",
+  "version": "7.53.1-fb-sampleColor2.1",
   "description": "Components, models, actions, and utility functions for LabKey applications and pages",
   "sideEffects": false,
   "files": [

From d2e36937ed2e2bc9fc6e619927aa0da8d8a8e8cf Mon Sep 17 00:00:00 2001
From: cnathe <cnathe@labkey.com>
Date: Wed, 5 Aug 2026 15:00:24 -0500
Subject: [PATCH 21/51] export SAMPLE_COLOR_COLOR_COLUMN_NAME

---
 packages/components/src/index.ts | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/packages/components/src/index.ts b/packages/components/src/index.ts
index 32c9890a2a..974036d4a7 100644
--- a/packages/components/src/index.ts
+++ b/packages/components/src/index.ts
@@ -649,6 +649,7 @@ import {
     DEFAULT_SAMPLE_FIELD_CONFIG,
     FIND_BY_IDS_QUERY_PARAM,
     IS_ALIQUOT_COL,
+    SAMPLE_COLOR_COLOR_COLUMN_NAME,
     SAMPLE_COLOR_COLUMN_NAME,
     SAMPLE_COLOR_REQUIRED_COLUMNS,
     SAMPLE_DATA_EXPORT_CONFIG,
@@ -1659,6 +1660,7 @@ export {
     ResponsiveMenuButton,
     ResponsiveMenuButtonGroup,
     runDetailsColumnsForQueryModel,
+    SAMPLE_COLOR_COLOR_COLUMN_NAME,
     SAMPLE_COLOR_COLUMN_NAME,
     SAMPLE_COLOR_REQUIRED_COLUMNS,
     SAMPLE_DATA_EXPORT_CONFIG,

From 023ba6c883610514db937b6a73bac27a2b215106 Mon Sep 17 00:00:00 2001
From: cnathe <cnathe@labkey.com>
Date: Wed, 5 Aug 2026 15:01:05 -0500
Subject: [PATCH 22/51] 7.53.1-fb-sampleColor2.2

---
 packages/components/package-lock.json | 4 ++--
 packages/components/package.json      | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/components/package-lock.json b/packages/components/package-lock.json
index 263e9eb7cc..9d642c67b2 100644
--- a/packages/components/package-lock.json
+++ b/packages/components/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "@labkey/components",
-  "version": "7.53.1-fb-sampleColor2.1",
+  "version": "7.53.1-fb-sampleColor2.2",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@labkey/components",
-      "version": "7.53.1-fb-sampleColor2.1",
+      "version": "7.53.1-fb-sampleColor2.2",
       "license": "SEE LICENSE IN LICENSE.txt",
       "dependencies": {
         "@hello-pangea/dnd": "18.0.1",
diff --git a/packages/components/package.json b/packages/components/package.json
index bf1c198331..6048d44152 100644
--- a/packages/components/package.json
+++ b/packages/components/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@labkey/components",
-  "version": "7.53.1-fb-sampleColor2.1",
+  "version": "7.53.1-fb-sampleColor2.2",
   "description": "Components, models, actions, and utility functions for LabKey applications and pages",
   "sideEffects": false,
   "files": [

From 7f3eadf2bedcad7ebb67bd225522f8c56131df52 Mon Sep 17 00:00:00 2001
From: cnathe <cnathe@labkey.com>
Date: Thu, 6 Aug 2026 08:04:17 -0500
Subject: [PATCH 23/51] 7.54.2-fb-sampleColor2.0

---
 packages/components/package-lock.json | 4 ++--
 packages/components/package.json      | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/components/package-lock.json b/packages/components/package-lock.json
index f8e56b5f8a..85b72ed983 100644
--- a/packages/components/package-lock.json
+++ b/packages/components/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "@labkey/components",
-  "version": "7.54.1",
+  "version": "7.54.2-fb-sampleColor2.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@labkey/components",
-      "version": "7.54.1",
+      "version": "7.54.2-fb-sampleColor2.0",
       "license": "SEE LICENSE IN LICENSE.txt",
       "dependencies": {
         "@hello-pangea/dnd": "18.0.1",
diff --git a/packages/components/package.json b/packages/components/package.json
index db985ade26..a8e2869823 100644
--- a/packages/components/package.json
+++ b/packages/components/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@labkey/components",
-  "version": "7.54.1",
+  "version": "7.54.2-fb-sampleColor2.0",
   "description": "Components, models, actions, and utility functions for LabKey applications and pages",
   "sideEffects": false,
   "files": [

From 0d4a08de6bf94235405440012cf8c421f9f98dab Mon Sep 17 00:00:00 2001
From: cnathe <cnathe@labkey.com>
Date: Mon, 10 Aug 2026 11:02:26 -0500
Subject: [PATCH 24/51] 7.54.3-fb-sampleColor2.0

---
 packages/components/package-lock.json | 4 ++--
 packages/components/package.json      | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/components/package-lock.json b/packages/components/package-lock.json
index 140e18d9c9..ff937a14ac 100644
--- a/packages/components/package-lock.json
+++ b/packages/components/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "@labkey/components",
-  "version": "7.54.2",
+  "version": "7.54.3-fb-sampleColor2.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@labkey/components",
-      "version": "7.54.2",
+      "version": "7.54.3-fb-sampleColor2.0",
       "license": "SEE LICENSE IN LICENSE.txt",
       "dependencies": {
         "@hello-pangea/dnd": "18.0.1",
diff --git a/packages/components/package.json b/packages/components/package.json
index 8551e7011f..e7f0131fa9 100644
--- a/packages/components/package.json
+++ b/packages/components/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@labkey/components",
-  "version": "7.54.2",
+  "version": "7.54.3-fb-sampleColor2.0",
   "description": "Components, models, actions, and utility functions for LabKey applications and pages",
   "sideEffects": false,
   "files": [

From 709d31f6c0ff4a89eb6e60f68d304ead4bc1064e Mon Sep 17 00:00:00 2001
From: cnathe <cnathe@labkey.com>
Date: Mon, 10 Aug 2026 11:35:47 -0500
Subject: [PATCH 25/51] sample.scss small update

---
 packages/components/src/theme/samples.scss | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/packages/components/src/theme/samples.scss b/packages/components/src/theme/samples.scss
index 8c6b1551c3..05e4d67995 100644
--- a/packages/components/src/theme/samples.scss
+++ b/packages/components/src/theme/samples.scss
@@ -74,6 +74,9 @@
     margin: 0;
 }
 
+.sample-color-top {
+    vertical-align: text-top;
+}
 .sample-color-detail {
     margin: 0 5px 0 0;
 }

From 23c2415dfb7821c309eb5e04112064797912a47f Mon Sep 17 00:00:00 2001
From: cnathe <cnathe@labkey.com>
Date: Mon, 10 Aug 2026 11:38:47 -0500
Subject: [PATCH 26/51] 7.54.3-fb-sampleColor2.1

---
 packages/components/package-lock.json | 4 ++--
 packages/components/package.json      | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/components/package-lock.json b/packages/components/package-lock.json
index ff937a14ac..b76910623d 100644
--- a/packages/components/package-lock.json
+++ b/packages/components/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "@labkey/components",
-  "version": "7.54.3-fb-sampleColor2.0",
+  "version": "7.54.3-fb-sampleColor2.1",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@labkey/components",
-      "version": "7.54.3-fb-sampleColor2.0",
+      "version": "7.54.3-fb-sampleColor2.1",
       "license": "SEE LICENSE IN LICENSE.txt",
       "dependencies": {
         "@hello-pangea/dnd": "18.0.1",
diff --git a/packages/components/package.json b/packages/components/package.json
index e7f0131fa9..b34e7c35cf 100644
--- a/packages/components/package.json
+++ b/packages/components/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@labkey/components",
-  "version": "7.54.3-fb-sampleColor2.0",
+  "version": "7.54.3-fb-sampleColor2.1",
   "description": "Components, models, actions, and utility functions for LabKey applications and pages",
   "sideEffects": false,
   "files": [

From ee9e780c666115306db2df43bd739be71da5c5fc Mon Sep 17 00:00:00 2001
From: cnathe <cnathe@labkey.com>
Date: Tue, 11 Aug 2026 14:56:40 -0500
Subject: [PATCH 27/51] HorizontalBarSection.tsx and ItemsLegend.tsx update to
 handle "section header" for sample type with sample color breakdown

---
 .../chart/HorizontalBarSection.test.tsx       |  32 ++++
 .../components/chart/HorizontalBarSection.tsx |  13 +-
 .../components/chart/ItemsLegend.test.tsx     |  46 +++++
 .../internal/components/chart/ItemsLegend.tsx |  23 ++-
 .../internal/components/chart/utils.test.ts   | 159 ++++++++++++++++++
 .../src/internal/components/chart/utils.ts    |  66 ++++++--
 packages/components/src/theme/charts.scss     |  14 ++
 7 files changed, 335 insertions(+), 18 deletions(-)

diff --git a/packages/components/src/internal/components/chart/HorizontalBarSection.test.tsx b/packages/components/src/internal/components/chart/HorizontalBarSection.test.tsx
index 468bbb25c0..9bd7b4bf7c 100644
--- a/packages/components/src/internal/components/chart/HorizontalBarSection.test.tsx
+++ b/packages/components/src/internal/components/chart/HorizontalBarSection.test.tsx
@@ -91,4 +91,36 @@ describe('HorizontalBarSection', () => {
         expect(parts[2].getAttribute('class')).toContain('horizontal-bar--open');
         expect(parts[2].parentElement.getAttribute('style')).toBe('width: 50%;');
     });
+
+    // section headers offset the legend rows from the bars, so the hovered bar must be matched by barIndex
+    test('summary tooltip highlights the hovered bar across section headers', async () => {
+        const sectioned: HorizontalBarData[] = [
+            { title: 'red', name: 'Red', sectionLabel: 'Blood', count: 12, totalCount: 40, percent: 30, filled: true },
+            { title: 'blue', name: 'Blue', sectionLabel: 'Blood', count: 8, totalCount: 40, percent: 20, filled: true },
+            {
+                title: 'plasma',
+                name: 'No Color',
+                sectionLabel: 'Plasma',
+                count: 20,
+                totalCount: 40,
+                percent: 50,
+                filled: true,
+                unlabeled: true,
+            },
+        ];
+        render(<HorizontalBarSection data={sectioned} showSummaryTooltip />);
+
+        // legend is: [Blood header, Red, Blue, Plasma] -- hovering the 2nd bar must bold the 3rd legend row
+        await userEvent.hover(document.querySelectorAll('.horizontal-bar-part')[1]);
+        await waitFor(() => {
+            expect(document.querySelector('.popover-content')).toBeInTheDocument();
+        });
+
+        const labels = document.querySelectorAll('.popover-content .cell-legend-label');
+        expect(labels).toHaveLength(3);
+        expect(document.querySelectorAll('.popover-content .cell-legend-section')).toHaveLength(1);
+        expect(labels[1]).toHaveTextContent('Blue');
+        expect(labels[1].getAttribute('class')).toContain('bold-text');
+        expect(document.querySelectorAll('.popover-content .bold-text')).toHaveLength(1);
+    });
 });
diff --git a/packages/components/src/internal/components/chart/HorizontalBarSection.tsx b/packages/components/src/internal/components/chart/HorizontalBarSection.tsx
index b3156ddd0f..954c03f3a6 100644
--- a/packages/components/src/internal/components/chart/HorizontalBarSection.tsx
+++ b/packages/components/src/internal/components/chart/HorizontalBarSection.tsx
@@ -46,8 +46,9 @@ export const HorizontalBarSection: FC<Props> = memo(props => {
         }
 
         horizontalBars = data
-            .filter(row => row.percent > 0)
-            .map((row, index) => {
+            .map((row, barIndex) => ({ row, barIndex }))
+            .filter(({ row }) => row.percent > 0)
+            .map(({ row, barIndex }) => {
                 const style: CSSProperties = { width: row.percent + '%', background: row.backgroundColor };
                 const section = (
                     <div
@@ -68,7 +69,11 @@ export const HorizontalBarSection: FC<Props> = memo(props => {
                 const overlay = (
                     <Popover id="grid-cell-popover" placement="top" isFlexPlacement>
                         {showSummaryTooltip && summaryLegendData?.length > 0 ? (
-                            <ItemsLegend legendData={summaryLegendData} activeIndex={index} />
+                            // section headers shift legend rows out of step with the bars, so match on barIndex
+                            <ItemsLegend
+                                legendData={summaryLegendData}
+                                activeIndex={summaryLegendData.findIndex(legend => legend.barIndex === barIndex)}
+                            />
                         ) : (
                             row.title
                         )}
@@ -76,7 +81,7 @@ export const HorizontalBarSection: FC<Props> = memo(props => {
                 );
 
                 return (
-                    <OverlayTrigger key={index} id={index.toString()} overlay={overlay} style={style}>
+                    <OverlayTrigger id={barIndex.toString()} key={barIndex} overlay={overlay} style={style}>
                         {section}
                     </OverlayTrigger>
                 );
diff --git a/packages/components/src/internal/components/chart/ItemsLegend.test.tsx b/packages/components/src/internal/components/chart/ItemsLegend.test.tsx
index 6630c36d0b..bad3b6b5e5 100644
--- a/packages/components/src/internal/components/chart/ItemsLegend.test.tsx
+++ b/packages/components/src/internal/components/chart/ItemsLegend.test.tsx
@@ -192,4 +192,50 @@ describe('ItemsLegend', () => {
         expect(legends[1].querySelectorAll('.bold-text')).toHaveLength(1);
         expect(legends[2].querySelectorAll('a')).toHaveLength(0);
     });
+
+    test('section headers', () => {
+        render(
+            <ItemsLegend
+                activeIndex={2}
+                legendData={[
+                    {
+                        circleColor: 'none',
+                        backgroundColor: 'none',
+                        legendLabel: 'Blood',
+                        isSectionHeader: true,
+                        data: Map.of('value', 20),
+                    },
+                    { circleColor: '#ff0000', backgroundColor: 'none', legendLabel: 'Red', data: Map.of('value', 12) },
+                    { circleColor: '#0000ff', backgroundColor: 'none', legendLabel: 'Blue', data: Map.of('value', 8) },
+                    {
+                        circleColor: 'green',
+                        backgroundColor: 'none',
+                        legendLabel: 'Plasma',
+                        separatorAbove: true,
+                        data: Map.of('value', 22),
+                    },
+                ]}
+            />
+        );
+
+        const rows = document.querySelectorAll('tr');
+        expect(rows).toHaveLength(4);
+
+        // the header carries the section total but no color swatch, and is not bolded
+        expect(document.getElementsByClassName('cell-legend-section')).toHaveLength(1);
+        expect(rows[0]).toHaveTextContent('Blood');
+        expect(rows[0]).toHaveTextContent('20');
+        expect(rows[0].querySelectorAll('.cell-legend-icon')).toHaveLength(0);
+        expect(rows[0].querySelectorAll('.cell-legend-section-label')).toHaveLength(2);
+        expect(rows[0].getAttribute('class')).not.toContain('cell-legend-row--separator');
+
+        expect(rows[1].querySelectorAll('.cell-legend-circle')).toHaveLength(1);
+        expect(rows[1].querySelectorAll('.bold-text')).toHaveLength(0);
+        expect(rows[2].querySelectorAll('.bold-text')).toHaveLength(1); // activeIndex
+        expect(rows[3]).toHaveTextContent('Plasma');
+
+        // the rule closing off the Blood section sits on the row that follows it
+        expect(document.getElementsByClassName('cell-legend-row--separator')).toHaveLength(1);
+        expect(rows[3].getAttribute('class')).toContain('cell-legend-row--separator');
+    });
 });
diff --git a/packages/components/src/internal/components/chart/ItemsLegend.tsx b/packages/components/src/internal/components/chart/ItemsLegend.tsx
index d8ee01952f..1c38e8c47d 100644
--- a/packages/components/src/internal/components/chart/ItemsLegend.tsx
+++ b/packages/components/src/internal/components/chart/ItemsLegend.tsx
@@ -25,6 +25,27 @@ export const ItemsLegend: FC<Props> = memo(props => {
             <table>
                 <tbody>
                     {legendData.map((legend, index) => {
+                        const rowClassName = classNames('cell-legend-row', {
+                            'cell-legend-row--separator': legend.separatorAbove,
+                        });
+
+                        if (legend.isSectionHeader) {
+                            return (
+                                <tr key={`cell-legend-${index}`} className={classNames(rowClassName, 'cell-legend-section')}>
+                                    <td colSpan={2}>
+                                        <span className="cell-legend-section-label">{legend.legendLabel}</span>
+                                    </td>
+                                    {legend.data && (
+                                        <td className="text-align-right">
+                                            <span className="cell-legend-data cell-legend-section-label">
+                                                <DefaultRenderer data={legend.data} />
+                                            </span>
+                                        </td>
+                                    )}
+                                </tr>
+                            );
+                        }
+
                         let icon;
                         if (legend.circleColor && legend.circleColor !== 'none') {
                             icon = (
@@ -55,7 +76,7 @@ export const ItemsLegend: FC<Props> = memo(props => {
                         });
 
                         return (
-                            <tr key={`cell-legend-${index}`} className="cell-legend-row">
+                            <tr className={rowClassName} key={`cell-legend-${index}`}>
                                 <td>
                                     <span className={iconClassName} style={style}>
                                         {icon}
diff --git a/packages/components/src/internal/components/chart/utils.test.ts b/packages/components/src/internal/components/chart/utils.test.ts
index 9f532aed81..f995e25ef1 100644
--- a/packages/components/src/internal/components/chart/utils.test.ts
+++ b/packages/components/src/internal/components/chart/utils.test.ts
@@ -220,6 +220,7 @@ describe('createHorizontalBarLegendData', () => {
                     '#/freezers/test/storageView?query.SampleType/Name~eq=Sample Type 1'
                 ),
                 legendLabel: 'Sample Type 1',
+                barIndex: 0,
             },
             {
                 circleColor: 'blue',
@@ -231,6 +232,7 @@ describe('createHorizontalBarLegendData', () => {
                     '#/freezers/test/storageView?query.SampleType/Name~eq=Sample Type 1'
                 ),
                 legendLabel: 'Sample Type 1',
+                barIndex: 1,
             },
             {
                 circleColor: 'red',
@@ -242,6 +244,7 @@ describe('createHorizontalBarLegendData', () => {
                     '#/freezers/test/storageView?query.SampleType/Name~eq=Sample Type 2'
                 ),
                 legendLabel: 'Sample Type 2',
+                barIndex: 2,
             },
             {
                 circleColor: 'red',
@@ -253,6 +256,7 @@ describe('createHorizontalBarLegendData', () => {
                     '#/freezers/test/storageView?query.SampleType/Name~eq=Sample Type 3'
                 ),
                 legendLabel: 'Sample Type 3',
+                barIndex: 3,
             },
         ]);
     });
@@ -296,15 +300,170 @@ describe('createHorizontalBarLegendData', () => {
                     '#/freezers/test/storageView?query.SampleType/Name~eq=Sample Type 1'
                 ),
                 legendLabel: 'Sample Type 1',
+                barIndex: 0,
             },
             {
                 circleColor: 'fff',
                 backgroundColor: 'none',
                 data: Map.of('value', '6,000'),
                 legendLabel: 'spaces',
+                barIndex: 1,
             },
         ]);
     });
+
+    describe('sectionLabel', () => {
+        const bar = (
+            name: string,
+            sectionLabel: string,
+            count: number,
+            backgroundColor: string,
+            unlabeled?: boolean
+        ) => ({
+            title: `${count} '${sectionLabel}' samples (${name})`,
+            name,
+            sectionLabel,
+            count,
+            totalCount: 100,
+            percent: count,
+            backgroundColor,
+            filled: true,
+            unlabeled,
+        });
+
+        test('section with multiple bars gets a header', () => {
+            const legend = createHorizontalBarCountLegendData(
+                [bar('Red', 'Blood', 12, '#ff0000'), bar('Blue', 'Blood', 8, '#0000ff')],
+                'space',
+                'spaces'
+            );
+
+            expect(legend).toHaveLength(3);
+            expect(legend[0]).toStrictEqual({
+                circleColor: 'none',
+                backgroundColor: 'none',
+                legendLabel: 'Blood',
+                isSectionHeader: true,
+                separatorAbove: false, // nothing above the first row to separate it from
+                data: Map.of('value', '20'), // the section total
+            });
+            // the section label is not repeated in each row
+            expect(legend[1].legendLabel).toBe('Red');
+            expect(legend[1].barIndex).toBe(0);
+            expect(legend[2].legendLabel).toBe('Blue');
+            expect(legend[2].barIndex).toBe(1);
+        });
+
+        test('section with a single unlabeled bar renders as a plain row labeled by the section', () => {
+            const legend = createHorizontalBarCountLegendData(
+                [bar('No Color', 'Blood', 12, '#ff0000', true)],
+                'space',
+                'spaces'
+            );
+
+            expect(legend).toHaveLength(1);
+            expect(legend[0].isSectionHeader).toBeUndefined();
+            expect(legend[0].legendLabel).toBe('Blood');
+            expect(legend[0].circleColor).toBe('#ff0000');
+            expect(legend[0].barIndex).toBe(0);
+        });
+
+        test('section with a single labeled bar keeps its header', () => {
+            const legend = createHorizontalBarCountLegendData([bar('Red', 'Blood', 12, '#ff0000')], 'space', 'spaces');
+
+            expect(legend).toHaveLength(2);
+            expect(legend[0]).toStrictEqual({
+                circleColor: 'none',
+                backgroundColor: 'none',
+                legendLabel: 'Blood',
+                isSectionHeader: true,
+                separatorAbove: false,
+                data: Map.of('value', '12'),
+            });
+            expect(legend[1].legendLabel).toBe('Red');
+            expect(legend[1].circleColor).toBe('#ff0000');
+            expect(legend[1].barIndex).toBe(0);
+        });
+
+        test('mixes sections, single-bar sections and unsectioned rows', () => {
+            const legend = createHorizontalBarCountLegendData(
+                [
+                    bar('Red', 'Blood', 12, '#ff0000'),
+                    bar('Blue', 'Blood', 8, '#0000ff'),
+                    bar('No Color', 'Plasma', 22, 'green', true),
+                    { title: '4 spaces available', count: 4, totalCount: 100, percent: 4, filled: false },
+                ],
+                'space',
+                'spaces'
+            );
+
+            expect(legend.map(l => l.legendLabel)).toStrictEqual(['Blood', 'Red', 'Blue', 'Plasma', 'spaces']);
+            expect(legend.map(l => l.barIndex)).toStrictEqual([undefined, 0, 1, 2, 3]);
+            // a rule closes off the Blood section; nothing separates the two unsectioned rows that follow
+            expect(legend.map(l => !!l.separatorAbove)).toStrictEqual([false, false, false, true, false]);
+        });
+
+        test('separators fence each section off from its neighbors', () => {
+            const legend = createHorizontalBarCountLegendData(
+                [
+                    { title: 'a', name: 'Other', count: 3, totalCount: 100, percent: 3, filled: true },
+                    bar('Red', 'Blood', 12, '#ff0000'),
+                    bar('Blue', 'Blood', 8, '#0000ff'),
+                    bar('Red', 'Plasma', 5, '#ff0000'),
+                    bar('Green', 'Plasma', 4, 'green'),
+                ],
+                'space',
+                'spaces'
+            );
+
+            expect(legend.map(l => l.legendLabel)).toStrictEqual([
+                'Other',
+                'Blood',
+                'Red',
+                'Blue',
+                'Plasma',
+                'Red',
+                'Green',
+            ]);
+            // only the two section headers carry a rule -- the leading unsectioned row does not
+            expect(legend.map(l => !!l.separatorAbove)).toStrictEqual([
+                false,
+                true,
+                false,
+                false,
+                true,
+                false,
+                false,
+            ]);
+        });
+
+        test('same section label split by another section is not merged', () => {
+            const legend = createHorizontalBarCountLegendData(
+                [
+                    bar('No Color', 'Blood', 12, '#ff0000', true),
+                    bar('No Color', 'Plasma', 8, '#ff0000', true),
+                    bar('No Color', 'Blood', 5, 'b', true),
+                ],
+                'space',
+                'spaces'
+            );
+
+            expect(legend.map(l => l.legendLabel)).toStrictEqual(['Blood', 'Plasma', 'Blood']);
+            expect(legend.every(l => !l.isSectionHeader)).toBe(true);
+        });
+
+        test('runs of the same section label are not merged across an intervening section', () => {
+            const legend = createHorizontalBarCountLegendData(
+                [bar('Red', 'Blood', 12, '#ff0000'), bar('Red', 'Plasma', 8, '#ff0000'), bar('Blue', 'Blood', 5, 'b')],
+                'space',
+                'spaces'
+            );
+
+            expect(legend.map(l => l.legendLabel)).toStrictEqual(['Blood', 'Red', 'Plasma', 'Red', 'Blood', 'Blue']);
+            expect(legend.map(l => !!l.isSectionHeader)).toStrictEqual([true, false, true, false, true, false]);
+            expect(legend.map(l => l.barIndex)).toStrictEqual([undefined, 0, undefined, 1, undefined, 2]);
+        });
+    });
 });
 
 describe('getFieldDataType', () => {
diff --git a/packages/components/src/internal/components/chart/utils.ts b/packages/components/src/internal/components/chart/utils.ts
index a16a09bb24..9ec00788af 100644
--- a/packages/components/src/internal/components/chart/utils.ts
+++ b/packages/components/src/internal/components/chart/utils.ts
@@ -19,18 +19,23 @@ export interface HorizontalBarData {
     href?: string;
     name?: string;
     percent: number;
+    sectionLabel?: string; // groups consecutive bars under a shared heading in the summary legend
     title: string;
     totalCount: number;
+    unlabeled?: boolean; // name adds nothing beyond sectionLabel, so a section holding only this bar collapses to one row
 }
 
 export interface HorizontalBarLegendData {
     backgroundColor: string;
+    barIndex?: number; // index of the HorizontalBarData this entry came from; undefined for section headers
     borderColor?: string;
     circleColor: string;
     data?: Map<any, any>;
     expired?: boolean;
+    isSectionHeader?: boolean;
     legendLabel: string;
     locked?: boolean;
+    separatorAbove?: boolean; // draws a rule above this row to fence off the section that ends before it
 }
 
 export function createHorizontalBarLegendData(data: HorizontalBarData[]): HorizontalBarLegendData[] {
@@ -60,24 +65,59 @@ export function createHorizontalBarCountLegendData(
     emptyTextSingular: string,
     emptyTextPlural: string
 ): HorizontalBarLegendData[] {
-    return data
-        .filter(row => row.count > 0)
-        .reduce<HorizontalBarLegendData[]>((legendData, row) => {
-            const countDisplay = row.count.toLocaleString();
-            let legendLabel = row.name;
-            if (!row.filled) {
-                legendLabel = row.count > 1 ? emptyTextPlural : emptyTextSingular;
-            }
+    const bars = data.map((row, barIndex) => ({ row, barIndex })).filter(({ row }) => row.count > 0);
+    const legendData: HorizontalBarLegendData[] = [];
+
+    const toEntry = (row: HorizontalBarData, barIndex: number, legendLabel: string): HorizontalBarLegendData => {
+        const countDisplay = row.count.toLocaleString();
+        return {
+            circleColor: row.backgroundColor ?? 'fff',
+            backgroundColor: 'none',
+            legendLabel: row.filled ? legendLabel : row.count > 1 ? emptyTextPlural : emptyTextSingular,
+            barIndex,
+            data: row.href ? Map.of('value', countDisplay, 'url', row.href) : Map.of('value', countDisplay),
+        };
+    };
+
+    let previousWasSectioned = false;
+
+    for (let i = 0; i < bars.length; i++) {
+        const { row, barIndex } = bars[i];
+        const { sectionLabel } = row;
 
+        let end = i;
+        if (sectionLabel) {
+            while (end + 1 < bars.length && bars[end + 1].row.sectionLabel === sectionLabel) end++;
+        }
+
+        // a lone bar keeps its header unless it is unlabeled, where the header and row would read identically
+        const collapses = end === i && row.unlabeled;
+
+        if (sectionLabel && !collapses) {
+            const section = bars.slice(i, end + 1);
+            const total = section.reduce((sum, bar) => sum + bar.row.count, 0);
             legendData.push({
-                circleColor: row.backgroundColor ?? 'fff',
+                circleColor: 'none',
                 backgroundColor: 'none',
-                legendLabel,
-                data: row.href ? Map.of('value', countDisplay, 'url', row.href) : Map.of('value', countDisplay),
+                legendLabel: sectionLabel,
+                isSectionHeader: true,
+                separatorAbove: legendData.length > 0,
+                data: Map.of('value', total.toLocaleString()),
             });
+            section.forEach(bar => legendData.push(toEntry(bar.row, bar.barIndex, bar.row.name)));
+            previousWasSectioned = true;
+        } else {
+            const entry = toEntry(row, barIndex, sectionLabel ?? row.name);
+            // close off the preceding section so its rows don't read as part of this one
+            if (previousWasSectioned) entry.separatorAbove = true;
+            legendData.push(entry);
+            previousWasSectioned = false;
+        }
 
-            return legendData;
-        }, []);
+        i = end;
+    }
+
+    return legendData;
 }
 
 export const getFieldDataType = (fieldData: Record<string, any>): string => {
diff --git a/packages/components/src/theme/charts.scss b/packages/components/src/theme/charts.scss
index ea070e47da..4110918b18 100644
--- a/packages/components/src/theme/charts.scss
+++ b/packages/components/src/theme/charts.scss
@@ -110,6 +110,20 @@
         display: inline-block;
         overflow: hidden;
     }
+
+    .cell-legend-section-label {
+        display: inline-block;
+        padding-top: 6px;
+        overflow: hidden;
+    }
+}
+
+.box-viewer-legend table {
+    border-collapse: collapse;
+}
+
+.cell-legend-row--separator > td {
+    border-top: 1px solid #ddd;
 }
 .chart-body {
     position: relative;

From d3ab4764f30d49dead771d447d5f4a6c2d404126 Mon Sep 17 00:00:00 2001
From: cnathe <cnathe@labkey.com>
Date: Tue, 11 Aug 2026 14:57:08 -0500
Subject: [PATCH 28/51] 7.54.3-fb-sampleColor2.2

---
 packages/components/package-lock.json | 4 ++--
 packages/components/package.json      | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/components/package-lock.json b/packages/components/package-lock.json
index b76910623d..4bf9756aaf 100644
--- a/packages/components/package-lock.json
+++ b/packages/components/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "@labkey/components",
-  "version": "7.54.3-fb-sampleColor2.1",
+  "version": "7.54.3-fb-sampleColor2.2",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@labkey/components",
-      "version": "7.54.3-fb-sampleColor2.1",
+      "version": "7.54.3-fb-sampleColor2.2",
       "license": "SEE LICENSE IN LICENSE.txt",
       "dependencies": {
         "@hello-pangea/dnd": "18.0.1",
diff --git a/packages/components/package.json b/packages/components/package.json
index b34e7c35cf..f6b597e27d 100644
--- a/packages/components/package.json
+++ b/packages/components/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@labkey/components",
-  "version": "7.54.3-fb-sampleColor2.1",
+  "version": "7.54.3-fb-sampleColor2.2",
   "description": "Components, models, actions, and utility functions for LabKey applications and pages",
   "sideEffects": false,
   "files": [

From 8dcb710a4fa76a5281cadd355a7c4ccaf847f545 Mon Sep 17 00:00:00 2001
From: cnathe <cnathe@labkey.com>
Date: Wed, 12 Aug 2026 07:43:59 -0500
Subject: [PATCH 29/51] include ExpMaterialColor in sample type system fields
 based on hasActiveProjectColors

---
 .../internal/components/samples/constants.ts  |  8 ++++++
 .../internal/components/samples/utils.test.ts | 26 +++++++++++++++++++
 .../src/internal/components/samples/utils.tsx |  9 ++++++-
 3 files changed, 42 insertions(+), 1 deletion(-)

diff --git a/packages/components/src/internal/components/samples/constants.ts b/packages/components/src/internal/components/samples/constants.ts
index e23dd06218..131bcfc436 100644
--- a/packages/components/src/internal/components/samples/constants.ts
+++ b/packages/components/src/internal/components/samples/constants.ts
@@ -258,6 +258,14 @@ export const SAMPLE_DOMAIN_DEFAULT_SYSTEM_FIELDS = [
         Description: 'Contains a Description for this sample',
         Disableable: true,
     },
+    {
+        Name: 'ExpMaterialColor',
+        Label: 'Sample Color',
+        DataType: 'Integer',
+        Required: false,
+        Description: 'Colors that can be applied to individual samples, overriding the sample type color',
+        Disableable: false,
+    },
     {
         Name: 'MaterialExpDate',
         Label: 'Expiration Date',
diff --git a/packages/components/src/internal/components/samples/utils.test.ts b/packages/components/src/internal/components/samples/utils.test.ts
index 2ab4bed0e3..463591676b 100644
--- a/packages/components/src/internal/components/samples/utils.test.ts
+++ b/packages/components/src/internal/components/samples/utils.test.ts
@@ -7,6 +7,8 @@ import { Filter } from '@labkey/api';
 import { isFreezerManagementEnabled } from '../../app/products';
 import { isSampleStatusEnabled } from '../../app/utils';
 
+import { ModuleContext } from '../base/ServerContext';
+
 import { TEST_USER_GUEST, TEST_USER_READER } from '../../userFixtures';
 
 import { SCHEMAS } from '../../schemas';
@@ -18,6 +20,7 @@ import {
     DEFAULT_AVAILABLE_STATUS_COLOR,
     DEFAULT_CONSUMED_STATUS_COLOR,
     DEFAULT_LOCKED_STATUS_COLOR,
+    SAMPLE_COLOR_COLUMN_NAME,
     SAMPLE_COLOR_REQUIRED_COLUMNS,
     SAMPLE_STATE_TYPE_COLUMN_NAME,
     SampleOperation,
@@ -27,6 +30,7 @@ import {
     getOmittedSampleTypeColumns,
     getOperationNotAllowedMessage,
     getOperationNotPermittedMessage,
+    getSampleDomainDefaultSystemFields,
     getSampleStatus,
     getSampleStatusColor,
     getSampleStatusFromSampleRow,
@@ -624,3 +628,25 @@ describe('getSampleStatusColor', () => {
         expect(getSampleStatusColor('', SampleStateType.Locked)).toBe(DEFAULT_LOCKED_STATUS_COLOR);
     });
 });
+
+describe('getSampleDomainDefaultSystemFields', () => {
+    const names = (moduleContext: ModuleContext): string[] =>
+        getSampleDomainDefaultSystemFields(moduleContext).map(field => field.Name);
+
+    test('without active project colors', () => {
+        expect(names({})).not.toContain(SAMPLE_COLOR_COLUMN_NAME);
+        expect(names({ samplemanagement: { hasActiveProjectColors: false } })).not.toContain(SAMPLE_COLOR_COLUMN_NAME);
+        expect(names({ inventory: {} })).not.toContain(SAMPLE_COLOR_COLUMN_NAME);
+    });
+
+    test('with active project colors', () => {
+        const moduleContext = { samplemanagement: { hasActiveProjectColors: true } };
+        expect(names(moduleContext)).toContain(SAMPLE_COLOR_COLUMN_NAME);
+        expect(names({ ...moduleContext, inventory: {} })).toContain(SAMPLE_COLOR_COLUMN_NAME);
+    });
+
+    test('inventory fields follow freezer management', () => {
+        expect(names({})).not.toContain('StorageLocation');
+        expect(names({ inventory: {} })).toContain('StorageLocation');
+    });
+});
diff --git a/packages/components/src/internal/components/samples/utils.tsx b/packages/components/src/internal/components/samples/utils.tsx
index 8352035e68..e8f09116a6 100644
--- a/packages/components/src/internal/components/samples/utils.tsx
+++ b/packages/components/src/internal/components/samples/utils.tsx
@@ -30,6 +30,7 @@ import {
     DEFAULT_LOCKED_STATUS_COLOR,
     operationRestrictionMessage,
     permittedOps,
+    SAMPLE_COLOR_COLUMN_NAME,
     SAMPLE_COLOR_REQUIRED_COLUMNS,
     SAMPLE_DOMAIN_DEFAULT_SYSTEM_FIELDS,
     SAMPLE_DOMAIN_INVENTORY_SYSTEM_FIELDS,
@@ -296,9 +297,15 @@ export function isAllSamplesSchema(schemaQuery: SchemaQuery): boolean {
 }
 
 export function getSampleDomainDefaultSystemFields(moduleContext?: ModuleContext): SystemField[] {
-    return isFreezerManagementEnabled(moduleContext)
+    const fields = isFreezerManagementEnabled(moduleContext)
         ? SAMPLE_DOMAIN_DEFAULT_SYSTEM_FIELDS.concat(SAMPLE_DOMAIN_INVENTORY_SYSTEM_FIELDS)
         : SAMPLE_DOMAIN_DEFAULT_SYSTEM_FIELDS;
+
+    if (!hasActiveProjectColors(moduleContext)) {
+        return fields.filter(field => field.Name !== SAMPLE_COLOR_COLUMN_NAME);
+    }
+
+    return fields;
 }
 
 export function getSampleStatusLockedMessage(state: SampleState, saving: boolean): string | undefined {

From 9441e4a33bd3c3c2d86ef3271d24c7ace019686f Mon Sep 17 00:00:00 2001
From: cnathe <cnathe@labkey.com>
Date: Wed, 12 Aug 2026 07:44:34 -0500
Subject: [PATCH 30/51] 7.54.3-fb-sampleColor2.3

---
 packages/components/package-lock.json | 4 ++--
 packages/components/package.json      | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/components/package-lock.json b/packages/components/package-lock.json
index 4bf9756aaf..ab1e3e38a9 100644
--- a/packages/components/package-lock.json
+++ b/packages/components/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "@labkey/components",
-  "version": "7.54.3-fb-sampleColor2.2",
+  "version": "7.54.3-fb-sampleColor2.3",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@labkey/components",
-      "version": "7.54.3-fb-sampleColor2.2",
+      "version": "7.54.3-fb-sampleColor2.3",
       "license": "SEE LICENSE IN LICENSE.txt",
       "dependencies": {
         "@hello-pangea/dnd": "18.0.1",
diff --git a/packages/components/package.json b/packages/components/package.json
index f6b597e27d..d8a1206a5a 100644
--- a/packages/components/package.json
+++ b/packages/components/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@labkey/components",
-  "version": "7.54.3-fb-sampleColor2.2",
+  "version": "7.54.3-fb-sampleColor2.3",
   "description": "Components, models, actions, and utility functions for LabKey applications and pages",
   "sideEffects": false,
   "files": [

From 3501fa56227f266ccc0b7eaf72fec496ea82222e Mon Sep 17 00:00:00 2001
From: cnathe <cnathe@labkey.com>
Date: Wed, 12 Aug 2026 07:48:04 -0500
Subject: [PATCH 31/51] jest update for SystemFields.test.tsx

---
 .../components/domainproperties/SystemFields.test.tsx      | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/packages/components/src/internal/components/domainproperties/SystemFields.test.tsx b/packages/components/src/internal/components/domainproperties/SystemFields.test.tsx
index 997da415f9..7039bd0f4e 100644
--- a/packages/components/src/internal/components/domainproperties/SystemFields.test.tsx
+++ b/packages/components/src/internal/components/domainproperties/SystemFields.test.tsx
@@ -14,7 +14,7 @@ import { SystemFields } from './SystemFields';
 
 describe('SystemFields', () => {
     function verifyEnableCheckbox(enableCheckboxes: any, isExpDateDisabled: boolean) {
-        expect(enableCheckboxes.length).toEqual(7 * 2);
+        expect(enableCheckboxes.length).toEqual(8 * 2);
         const nameCheckbox = enableCheckboxes[0];
         expect(nameCheckbox.hasAttribute('checked')).toBeTruthy();
         expect(nameCheckbox.hasAttribute('disabled')).toBeTruthy();
@@ -24,7 +24,10 @@ describe('SystemFields', () => {
         const descCheckbox = enableCheckboxes[4];
         expect(descCheckbox.hasAttribute('checked')).toBeTruthy();
         expect(descCheckbox.hasAttribute('disabled')).toBeFalsy();
-        const expCheckbox = enableCheckboxes[6];
+        const sampleColorCheckbox = enableCheckboxes[6];
+        expect(sampleColorCheckbox.hasAttribute('checked')).toBeTruthy();
+        expect(sampleColorCheckbox.hasAttribute('disabled')).toBeTruthy();
+        const expCheckbox = enableCheckboxes[8];
         expect(expCheckbox.hasAttribute('checked')).toEqual(!isExpDateDisabled);
         expect(expCheckbox.hasAttribute('disabled')).toBeFalsy();
     }

From 152a51467838f42a6b5e7380f436b556840eab04 Mon Sep 17 00:00:00 2001
From: cnathe <cnathe@labkey.com>
Date: Wed, 12 Aug 2026 11:01:54 -0500
Subject: [PATCH 32/51] QueryModel update to flattenValuesFromRow for
 displayValue

---
 .../src/public/QueryModel/QueryModel.test.ts  | 53 +++++++++++++++++++
 .../src/public/QueryModel/QueryModel.ts       |  9 +++-
 2 files changed, 60 insertions(+), 2 deletions(-)

diff --git a/packages/components/src/public/QueryModel/QueryModel.test.ts b/packages/components/src/public/QueryModel/QueryModel.test.ts
index bfb8c2ff8f..995117fb98 100644
--- a/packages/components/src/public/QueryModel/QueryModel.test.ts
+++ b/packages/components/src/public/QueryModel/QueryModel.test.ts
@@ -399,6 +399,59 @@ describe('flattenValuesFromRow', () => {
             test4: 101,
         });
     });
+
+    test('with displayValueKeys', () => {
+        const data = {
+            test1: { value: 123, displayValue: 'TEST123' },
+            test2: { value: 456, displayValue: 'TEST456' },
+            test3: { value: 789 },
+            test4: { value: null, displayValue: null },
+        };
+        const columns = Object.keys(data);
+
+        expect(flattenValuesFromRow(data, columns, undefined, [])).toEqual({
+            test1: 123,
+            test2: 456,
+            test3: 789,
+            test4: null,
+        });
+
+        expect(flattenValuesFromRow(data, columns, undefined, ['test1', 'test4'])).toEqual({
+            test1: 'TEST123',
+            test2: 456,
+            test3: 789,
+            test4: null,
+        });
+
+        // key without a displayValue in the row falls back to value
+        expect(flattenValuesFromRow(data, columns, undefined, ['test3']).test3).toBe(789);
+        expect(
+            flattenValuesFromRow({ test5: { value: 0, displayValue: null } }, ['test5'], undefined, ['test5'])
+        ).toEqual({ test5: 0 });
+
+        // key not present in columns is ignored
+        expect(flattenValuesFromRow(data, columns, undefined, ['test0'])).toEqual({
+            test1: 123,
+            test2: 456,
+            test3: 789,
+            test4: null,
+        });
+    });
+
+    test('with displayValueKeys and colFieldKeyMap', () => {
+        const data = {
+            'test/1': { value: 123, displayValue: 'TEST123' },
+            test$2: { value: 456, displayValue: 'TEST456' },
+        };
+
+        // displayValueKeys match on the column key, not the mapped fieldKey
+        expect(
+            flattenValuesFromRow(data, Object.keys(data), { 'test/1': 'test$S1', test$2: 'test$D2' }, ['test/1'])
+        ).toEqual({
+            test$S1: 'TEST123',
+            test$D2: 456,
+        });
+    });
 });
 
 describe('locationHasQueryParamSettings', () => {
diff --git a/packages/components/src/public/QueryModel/QueryModel.ts b/packages/components/src/public/QueryModel/QueryModel.ts
index dc774134b3..c199f1da88 100644
--- a/packages/components/src/public/QueryModel/QueryModel.ts
+++ b/packages/components/src/public/QueryModel/QueryModel.ts
@@ -24,13 +24,18 @@ import { SelectRowsOptions } from '../../internal/query/selectRows';
 export function flattenValuesFromRow(
     row: any,
     columns: string[],
-    colFieldKeyMap?: Record<string, string>
+    colFieldKeyMap?: Record<string, string>,
+    displayValueKeys?: string[]
 ): Record<string, any> {
     const values = {};
     if (row && columns) {
         columns.forEach((col: string) => {
             if (row[col]) {
-                values[col] = row[col].value;
+                if (displayValueKeys?.includes(col)) {
+                    values[col] = row[col].displayValue ?? row[col].value;
+                } else {
+                    values[col] = row[col].value;
+                }
             }
         });
     }

From 671284cbfdd5b32301331039d4b4f84664ea6f99 Mon Sep 17 00:00:00 2001
From: cnathe <cnathe@labkey.com>
Date: Wed, 12 Aug 2026 11:02:12 -0500
Subject: [PATCH 33/51] 7.54.4-fb-sampleColor2.0

---
 packages/components/package-lock.json | 4 ++--
 packages/components/package.json      | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/components/package-lock.json b/packages/components/package-lock.json
index 2fd26626f7..774dc79f60 100644
--- a/packages/components/package-lock.json
+++ b/packages/components/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "@labkey/components",
-  "version": "7.54.3",
+  "version": "7.54.4-fb-sampleColor2.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@labkey/components",
-      "version": "7.54.3",
+      "version": "7.54.4-fb-sampleColor2.0",
       "license": "SEE LICENSE IN LICENSE.txt",
       "dependencies": {
         "@hello-pangea/dnd": "18.0.1",
diff --git a/packages/components/package.json b/packages/components/package.json
index b5a677f8aa..527105b854 100644
--- a/packages/components/package.json
+++ b/packages/components/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@labkey/components",
-  "version": "7.54.3",
+  "version": "7.54.4-fb-sampleColor2.0",
   "description": "Components, models, actions, and utility functions for LabKey applications and pages",
   "sideEffects": false,
   "files": [

From 3215a192c3d9dec575acc5cc4e75b86b42e322f5 Mon Sep 17 00:00:00 2001
From: cnathe <cnathe@labkey.com>
Date: Thu, 13 Aug 2026 09:29:14 -0500
Subject: [PATCH 34/51] 7.55.2-fb-sampleColor2.0

---
 packages/components/package-lock.json | 4 ++--
 packages/components/package.json      | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/components/package-lock.json b/packages/components/package-lock.json
index 17c3551a8d..a94d03f7db 100644
--- a/packages/components/package-lock.json
+++ b/packages/components/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "@labkey/components",
-  "version": "7.55.1",
+  "version": "7.55.2-fb-sampleColor2.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@labkey/components",
-      "version": "7.55.1",
+      "version": "7.55.2-fb-sampleColor2.0",
       "license": "SEE LICENSE IN LICENSE.txt",
       "dependencies": {
         "@hello-pangea/dnd": "18.0.1",
diff --git a/packages/components/package.json b/packages/components/package.json
index 767ebfece5..23900ad3b0 100644
--- a/packages/components/package.json
+++ b/packages/components/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@labkey/components",
-  "version": "7.55.1",
+  "version": "7.55.2-fb-sampleColor2.0",
   "description": "Components, models, actions, and utility functions for LabKey applications and pages",
   "sideEffects": false,
   "files": [

From 6213653436df88ab184e2d57e96b607eae023386 Mon Sep 17 00:00:00 2001
From: cnathe <cnathe@labkey.com>
Date: Thu, 13 Aug 2026 10:05:03 -0500
Subject: [PATCH 35/51] SampleColorsSetting.tsx de/select all button

---
 .../samples/SampleColorsSetting.test.tsx      | 32 +++++++++++++++++++
 .../samples/SampleColorsSetting.tsx           | 16 ++++++++++
 2 files changed, 48 insertions(+)

diff --git a/packages/components/src/internal/components/samples/SampleColorsSetting.test.tsx b/packages/components/src/internal/components/samples/SampleColorsSetting.test.tsx
index 19c829a609..96dbc2ae40 100644
--- a/packages/components/src/internal/components/samples/SampleColorsSetting.test.tsx
+++ b/packages/components/src/internal/components/samples/SampleColorsSetting.test.tsx
@@ -187,4 +187,36 @@ describe('SampleColorsSelectorModal', () => {
         expect(screen.getByText('No colors are set up yet.')).toBeInTheDocument();
         expect(screen.queryAllByRole('checkbox')).toHaveLength(0);
     });
+
+    test('"Deselect All" disables every color, then the toggle flips to "Select All"', async () => {
+        const onConfirm = jest.fn();
+        renderModal({ onConfirm });
+        await userEvent.click(screen.getByRole('button', { name: 'Deselect All' }));
+
+        const checkboxes = screen.getAllByRole('checkbox') as HTMLInputElement[];
+        expect(checkboxes.some(cb => cb.checked)).toBe(false);
+        expect(screen.getByRole('button', { name: 'Select All' })).toBeInTheDocument();
+
+        await userEvent.click(screen.getByRole('button', { name: 'Apply' }));
+        expect(onConfirm).toHaveBeenCalledWith([1, 2, 3]);
+    });
+
+    test('"Select All" enables every color from a partially disabled state', async () => {
+        const onConfirm = jest.fn();
+        renderModal({ initialDisabled: new Set([2]), onConfirm });
+        // Any disabled color means the toggle offers Select All.
+        await userEvent.click(screen.getByRole('button', { name: 'Select All' }));
+
+        const checkboxes = screen.getAllByRole('checkbox') as HTMLInputElement[];
+        expect(checkboxes.every(cb => cb.checked)).toBe(true);
+
+        await userEvent.click(screen.getByRole('button', { name: 'Apply' }));
+        expect(onConfirm).toHaveBeenCalledWith([]);
+    });
+
+    test('the toggle is hidden when there are no colors', () => {
+        renderModal({ colors: [] });
+        expect(screen.queryByRole('button', { name: 'Deselect All' })).not.toBeInTheDocument();
+        expect(screen.queryByRole('button', { name: 'Select All' })).not.toBeInTheDocument();
+    });
 });
diff --git a/packages/components/src/internal/components/samples/SampleColorsSetting.tsx b/packages/components/src/internal/components/samples/SampleColorsSetting.tsx
index 03fd41a0d1..5cd94e8214 100644
--- a/packages/components/src/internal/components/samples/SampleColorsSetting.tsx
+++ b/packages/components/src/internal/components/samples/SampleColorsSetting.tsx
@@ -46,9 +46,25 @@ export const SampleColorsSelectorModal: FC<SampleColorsSelectorModalProps> = mem
             onConfirm(Array.from(draftDisabled));
         }, [draftDisabled, onConfirm]);
 
+        const allSelected = useMemo(() => draftDisabled.size === 0, [draftDisabled]);
+
+        const onSelectAll = useCallback(() => {
+            setDraftDisabled(allSelected ? new Set(colors.map(c => c.rowId)) : new Set());
+        }, [allSelected, colors]);
+
         return (
             <Modal confirmText="Apply" onCancel={onCancel} onConfirm={onApply} title="Edit Sample Colors">
+                <p>Select the colors that can be applied to individual samples, overriding the sample type color.</p>
                 {colors.length === 0 && <p>No colors are set up yet.</p>}
+                {colors.length > 0 && (
+                    <div className="row">
+                        <div className="col-xs-12 bottom-padding">
+                            <button className="clickable-text" onClick={onSelectAll} type="button">
+                                {allSelected ? 'Deselect All' : 'Select All'}
+                            </button>
+                        </div>
+                    </div>
+                )}
                 <div className="row">
                     {colors.map(c => (
                         <div className="col-sm-4" key={c.rowId}>

From 614c58509f9c2cff9786566d671d7bff2bfdff95 Mon Sep 17 00:00:00 2001
From: cnathe <cnathe@labkey.com>
Date: Thu, 13 Aug 2026 10:05:56 -0500
Subject: [PATCH 36/51] 7.55.2-fb-sampleColor2.1

---
 packages/components/package-lock.json | 4 ++--
 packages/components/package.json      | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/components/package-lock.json b/packages/components/package-lock.json
index a94d03f7db..837eed2159 100644
--- a/packages/components/package-lock.json
+++ b/packages/components/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "@labkey/components",
-  "version": "7.55.2-fb-sampleColor2.0",
+  "version": "7.55.2-fb-sampleColor2.1",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@labkey/components",
-      "version": "7.55.2-fb-sampleColor2.0",
+      "version": "7.55.2-fb-sampleColor2.1",
       "license": "SEE LICENSE IN LICENSE.txt",
       "dependencies": {
         "@hello-pangea/dnd": "18.0.1",
diff --git a/packages/components/package.json b/packages/components/package.json
index 23900ad3b0..f5534cc40d 100644
--- a/packages/components/package.json
+++ b/packages/components/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@labkey/components",
-  "version": "7.55.2-fb-sampleColor2.0",
+  "version": "7.55.2-fb-sampleColor2.1",
   "description": "Components, models, actions, and utility functions for LabKey applications and pages",
   "sideEffects": false,
   "files": [

From 889ef13a2c24829f64b94b586c093d643e724e17 Mon Sep 17 00:00:00 2001
From: cnathe <cnathe@labkey.com>
Date: Thu, 13 Aug 2026 11:54:03 -0500
Subject: [PATCH 37/51] lint

---
 .../components/src/internal/components/lineage/constants.tsx    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/components/src/internal/components/lineage/constants.tsx b/packages/components/src/internal/components/lineage/constants.tsx
index 673803ed42..317a1d2f04 100644
--- a/packages/components/src/internal/components/lineage/constants.tsx
+++ b/packages/components/src/internal/components/lineage/constants.tsx
@@ -19,7 +19,7 @@ import {
 import {
     SAMPLE_COLOR_COLOR_COLUMN_NAME,
     SAMPLE_STATE_COLOR_COLUMN_NAME,
-    SAMPLE_STATE_TYPE_COLUMN_NAME
+    SAMPLE_STATE_TYPE_COLUMN_NAME,
 } from '../samples/constants';
 export const LINEAGE_GRAPH_FILTER_METRIC = "LineageGraphFilter";
 // Default depth to fetch with the lineage API

From d56d1ead31ead4cd3884bc102757ef362e5e53e6 Mon Sep 17 00:00:00 2001
From: cnathe <cnathe@labkey.com>
Date: Thu, 13 Aug 2026 11:57:24 -0500
Subject: [PATCH 38/51] getOmittedSampleTypeColumns to include check for
 hasProductFolders

---
 packages/components/src/internal/components/samples/utils.tsx | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/packages/components/src/internal/components/samples/utils.tsx b/packages/components/src/internal/components/samples/utils.tsx
index 24e5c3cd48..a3796a946c 100644
--- a/packages/components/src/internal/components/samples/utils.tsx
+++ b/packages/components/src/internal/components/samples/utils.tsx
@@ -9,6 +9,7 @@ import { User } from '../base/models/User';
 import { isFreezerManagementEnabled } from '../../app/products';
 import {
     hasActiveProjectColors,
+    hasProductFolders,
     isProductFoldersEnabled,
     isProjectContainer,
     isSampleStatusEnabled,
@@ -56,6 +57,9 @@ export function getOmittedSampleTypeColumns(user: User, moduleContext?: ModuleCo
     if (!hasActiveProjectColors(moduleContext)) {
         cols = cols.concat(SAMPLE_COLOR_REQUIRED_COLUMNS);
     }
+    if (!hasProductFolders(moduleContext)) {
+        cols = cols.concat('Folder');
+    }
 
     return cols;
 }

From 21c1303720e307a08f7f9136d92c8ffba8d078f0 Mon Sep 17 00:00:00 2001
From: cnathe <cnathe@labkey.com>
Date: Thu, 13 Aug 2026 11:59:15 -0500
Subject: [PATCH 39/51] 7.55.2-fb-sampleColor2.2

---
 packages/components/package-lock.json | 4 ++--
 packages/components/package.json      | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/components/package-lock.json b/packages/components/package-lock.json
index 837eed2159..2211a30590 100644
--- a/packages/components/package-lock.json
+++ b/packages/components/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "@labkey/components",
-  "version": "7.55.2-fb-sampleColor2.1",
+  "version": "7.55.2-fb-sampleColor2.2",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@labkey/components",
-      "version": "7.55.2-fb-sampleColor2.1",
+      "version": "7.55.2-fb-sampleColor2.2",
       "license": "SEE LICENSE IN LICENSE.txt",
       "dependencies": {
         "@hello-pangea/dnd": "18.0.1",
diff --git a/packages/components/package.json b/packages/components/package.json
index f5534cc40d..30a416e21c 100644
--- a/packages/components/package.json
+++ b/packages/components/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@labkey/components",
-  "version": "7.55.2-fb-sampleColor2.1",
+  "version": "7.55.2-fb-sampleColor2.2",
   "description": "Components, models, actions, and utility functions for LabKey applications and pages",
   "sideEffects": false,
   "files": [

From fb8f302c511e8784e6a20a5510d274a45e0aaffd Mon Sep 17 00:00:00 2001
From: cnathe <cnathe@labkey.com>
Date: Thu, 13 Aug 2026 12:00:55 -0500
Subject: [PATCH 40/51] jest fix

---
 .../src/internal/components/samples/utils.test.ts         | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/packages/components/src/internal/components/samples/utils.test.ts b/packages/components/src/internal/components/samples/utils.test.ts
index 463591676b..2cd82dfa02 100644
--- a/packages/components/src/internal/components/samples/utils.test.ts
+++ b/packages/components/src/internal/components/samples/utils.test.ts
@@ -55,19 +55,25 @@ test('getOmittedSampleTypeColumn', () => {
     expect(getOmittedSampleTypeColumns(TEST_USER_READER, moduleContext)).toStrictEqual([
         ...INVENTORY_COLS,
         ...SAMPLE_COLOR_REQUIRED_COLUMNS,
+        'Folder',
     ]);
     expect(getOmittedSampleTypeColumns(TEST_USER_GUEST, moduleContext)).toStrictEqual([
         CHECKED_OUT_BY_FIELD,
         ...INVENTORY_COLS,
         ...SAMPLE_COLOR_REQUIRED_COLUMNS,
+        'Folder',
     ]);
 
     moduleContext = { inventory: {} };
     expect(isFreezerManagementEnabled(moduleContext)).toBeTruthy();
-    expect(getOmittedSampleTypeColumns(TEST_USER_READER, moduleContext)).toStrictEqual(SAMPLE_COLOR_REQUIRED_COLUMNS);
+    expect(getOmittedSampleTypeColumns(TEST_USER_READER, moduleContext)).toStrictEqual([
+        ...SAMPLE_COLOR_REQUIRED_COLUMNS,
+        'Folder',
+    ]);
     expect(getOmittedSampleTypeColumns(TEST_USER_GUEST, moduleContext)).toStrictEqual([
         CHECKED_OUT_BY_FIELD,
         ...SAMPLE_COLOR_REQUIRED_COLUMNS,
+        'Folder',
     ]);
 });
 

From 3ded6f95de65778f4d7638d38de85aadf395c6a7 Mon Sep 17 00:00:00 2001
From: cnathe <cnathe@labkey.com>
Date: Fri, 14 Aug 2026 10:56:46 -0500
Subject: [PATCH 41/51] 7.55.3-fb-sampleColor2.0

---
 packages/components/package-lock.json | 4 ++--
 packages/components/package.json      | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/components/package-lock.json b/packages/components/package-lock.json
index 2a10b0a9bf..8e261e6356 100644
--- a/packages/components/package-lock.json
+++ b/packages/components/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "@labkey/components",
-  "version": "7.55.2",
+  "version": "7.55.3-fb-sampleColor2.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@labkey/components",
-      "version": "7.55.2",
+      "version": "7.55.3-fb-sampleColor2.0",
       "license": "SEE LICENSE IN LICENSE.txt",
       "dependencies": {
         "@hello-pangea/dnd": "18.0.1",
diff --git a/packages/components/package.json b/packages/components/package.json
index df3b7f07d5..d8d9be318f 100644
--- a/packages/components/package.json
+++ b/packages/components/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@labkey/components",
-  "version": "7.55.2",
+  "version": "7.55.3-fb-sampleColor2.0",
   "description": "Components, models, actions, and utility functions for LabKey applications and pages",
   "sideEffects": false,
   "files": [

From e52b0ed1c48bb4a4ca64756370f5090d00f0b79c Mon Sep 17 00:00:00 2001
From: cnathe <cnathe@labkey.com>
Date: Fri, 14 Aug 2026 12:09:26 -0500
Subject: [PATCH 42/51] jest test additions

---
 .../forms/input/SampleColorInput.test.tsx     | 32 +++++++++
 .../components/samples/actions.test.ts        | 68 ++++++++++++++++++-
 2 files changed, 99 insertions(+), 1 deletion(-)

diff --git a/packages/components/src/internal/components/forms/input/SampleColorInput.test.tsx b/packages/components/src/internal/components/forms/input/SampleColorInput.test.tsx
index 8234482034..9d5ce2793b 100644
--- a/packages/components/src/internal/components/forms/input/SampleColorInput.test.tsx
+++ b/packages/components/src/internal/components/forms/input/SampleColorInput.test.tsx
@@ -63,4 +63,36 @@ describe('SampleColorInput', () => {
         expect(renderLabelField).toHaveBeenCalledWith(COL);
         expect(screen.getByTestId('label-field')).toBeInTheDocument();
     });
+
+    describe('option renderer', () => {
+        function renderOption(row: any): void {
+            render(<SampleColorInput col={COL} />);
+            const { OptionComponent } = lastQuerySelectProps();
+            render(<OptionComponent label="Red" queryInfo={undefined} row={row} value={1} />);
+        }
+
+        test('renders the option label with its color swatch', () => {
+            renderOption({ RowId: { value: 1 }, Label: { value: 'Red' }, Color: { value: '#FF0000' } });
+
+            const icon = document.querySelector('.sample-color-select-option i');
+            expect(icon).toHaveClass('color-icon__circle-small');
+            expect(icon).toHaveStyle({ backgroundColor: '#FF0000' });
+            expect(document.querySelector('.sample-color-select-option').textContent).toBe('Red');
+        });
+
+        test('resolves the color regardless of row key casing', () => {
+            renderOption({ color: { value: '#FF0000' } });
+
+            expect(document.querySelector('.sample-color-select-option i')).toHaveStyle({
+                backgroundColor: '#FF0000',
+            });
+        });
+
+        test('renders the label without a swatch when the row has no color', () => {
+            renderOption({ Label: { value: 'Red' } });
+
+            expect(document.querySelector('.sample-color-select-option i')).toBeNull();
+            expect(document.querySelector('.sample-color-select-option').textContent).toBe('Red');
+        });
+    });
 });
diff --git a/packages/components/src/internal/components/samples/actions.test.ts b/packages/components/src/internal/components/samples/actions.test.ts
index a8156eacae..93daa809c0 100644
--- a/packages/components/src/internal/components/samples/actions.test.ts
+++ b/packages/components/src/internal/components/samples/actions.test.ts
@@ -11,7 +11,11 @@ import { CALCULATED_CONCEPT_URI } from '../domainproperties/constants';
 import { ExtendedMap } from '../../../public/ExtendedMap';
 import { QueryColumn } from '../../../public/QueryColumn';
 
-import { _getGroupedSampleDomainFields } from './actions';
+import { SAMPLE_COLOR_COLUMN_NAME } from './constants';
+
+import { GroupedSampleFields } from './models';
+
+import { _getGroupedSampleDomainFields, getGroupedSampleDisplayColumns } from './actions';
 
 describe('getGroupedSampleDomainFields', () => {
     const sampleTypeDomain = new DomainDetails({
@@ -93,3 +97,65 @@ describe('getGroupedSampleDomainFields', () => {
         expect(result.metaFields).toEqual(['name', 'spec char$c$d$s', 'parent$c$d$s']);
     });
 });
+
+describe('getGroupedSampleDisplayColumns', () => {
+    const col = (fieldKey: string): QueryColumn => new QueryColumn({ fieldKey, name: fieldKey });
+    const COLUMNS = [
+        col('Name'),
+        col('Description'),
+        col('MaterialExpDate'),
+        col(SAMPLE_COLOR_COLUMN_NAME),
+        col('MetaField'),
+        col('AliquotField'),
+        col('IndependentField'),
+    ];
+    const DOMAIN_FIELDS: GroupedSampleFields = {
+        aliquotFields: ['aliquotfield'],
+        independentFields: ['independentfield'],
+        metaFields: ['metafield'],
+        metricUnit: undefined,
+    };
+
+    const editFieldKeys = (isAliquot: boolean): string[] =>
+        getGroupedSampleDisplayColumns(COLUMNS, COLUMNS, DOMAIN_FIELDS, isAliquot, false).editColumns.map(
+            c => c.fieldKey
+        );
+
+    test('aliquot can edit the sample color', () => {
+        const fieldKeys = editFieldKeys(true);
+        expect(fieldKeys).toContain(SAMPLE_COLOR_COLUMN_NAME);
+        // the other aliquot-editable system fields come along, but parent-only meta fields do not
+        expect(fieldKeys).toContain('Name');
+        expect(fieldKeys).toContain('Description');
+        expect(fieldKeys).toContain('MaterialExpDate');
+        expect(fieldKeys).toContain('AliquotField');
+        expect(fieldKeys).toContain('IndependentField');
+        expect(fieldKeys).not.toContain('MetaField');
+    });
+
+    test('non-aliquot can edit the sample color', () => {
+        const fieldKeys = editFieldKeys(false);
+        expect(fieldKeys).toContain(SAMPLE_COLOR_COLUMN_NAME);
+        expect(fieldKeys).toContain('MetaField');
+        expect(fieldKeys).not.toContain('AliquotField');
+    });
+
+    test('sample color displays in the aliquot header only when it is an aliquot field', () => {
+        const asAliquotField = { ...DOMAIN_FIELDS, aliquotFields: [SAMPLE_COLOR_COLUMN_NAME.toLowerCase()] };
+        const { aliquotHeaderDisplayColumns, aliquotOnlyColumns } = getGroupedSampleDisplayColumns(
+            COLUMNS,
+            COLUMNS,
+            asAliquotField,
+            true,
+            false
+        );
+        expect(aliquotHeaderDisplayColumns.map(c => c.fieldKey)).toContain(SAMPLE_COLOR_COLUMN_NAME);
+        expect(aliquotOnlyColumns).toContain(SAMPLE_COLOR_COLUMN_NAME);
+
+        // as a plain system field it is editable on the aliquot but not shown in the aliquot header
+        expect(
+            getGroupedSampleDisplayColumns(COLUMNS, COLUMNS, DOMAIN_FIELDS, true, false)
+                .aliquotHeaderDisplayColumns.map(c => c.fieldKey)
+        ).not.toContain(SAMPLE_COLOR_COLUMN_NAME);
+    });
+});

From e838c06bb4985b4ce13944c9ded01c6cbda050b2 Mon Sep 17 00:00:00 2001
From: cnathe <cnathe@labkey.com>
Date: Mon, 17 Aug 2026 08:18:58 -0500
Subject: [PATCH 43/51] 7.55.5-fb-sampleColor2.0

---
 packages/components/package-lock.json | 4 ++--
 packages/components/package.json      | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/components/package-lock.json b/packages/components/package-lock.json
index 1ba0a5155f..f689acea1a 100644
--- a/packages/components/package-lock.json
+++ b/packages/components/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "@labkey/components",
-  "version": "7.55.4",
+  "version": "7.55.5-fb-sampleColor2.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@labkey/components",
-      "version": "7.55.4",
+      "version": "7.55.5-fb-sampleColor2.0",
       "license": "SEE LICENSE IN LICENSE.txt",
       "dependencies": {
         "@hello-pangea/dnd": "18.0.1",
diff --git a/packages/components/package.json b/packages/components/package.json
index c0879aa087..5353865716 100644
--- a/packages/components/package.json
+++ b/packages/components/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@labkey/components",
-  "version": "7.55.4",
+  "version": "7.55.5-fb-sampleColor2.0",
   "description": "Components, models, actions, and utility functions for LabKey applications and pages",
   "sideEffects": false,
   "files": [

From 1a39462e6ac039b72cb85d5b542c18476862a74e Mon Sep 17 00:00:00 2001
From: cnathe <cnathe@labkey.com>
Date: Mon, 17 Aug 2026 13:45:18 -0500
Subject: [PATCH 44/51] Don't show /Shared project colors in app management
 panel

---
 .../src/internal/components/samples/APIWrapper.ts          | 3 ++-
 .../components/samples/ManageSampleColorsPanel.tsx         | 2 +-
 .../components/src/internal/components/samples/actions.ts  | 7 +++++--
 .../components/src/internal/components/samples/models.ts   | 1 +
 4 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/packages/components/src/internal/components/samples/APIWrapper.ts b/packages/components/src/internal/components/samples/APIWrapper.ts
index 7125ba2ba9..6534383e29 100644
--- a/packages/components/src/internal/components/samples/APIWrapper.ts
+++ b/packages/components/src/internal/components/samples/APIWrapper.ts
@@ -69,7 +69,8 @@ export interface SamplesAPIWrapper {
     getSampleColors: (
         includeArchive?: boolean,
         checkInUse?: boolean,
-        containerPath?: string
+        containerPath?: string,
+        includeSharedColors?: boolean,
     ) => Promise<SampleColorModel[]>;
 
     getSampleCounter: (seqType: 'rootSampleCount' | 'sampleCount', containerPath?: string) => Promise<number>;
diff --git a/packages/components/src/internal/components/samples/ManageSampleColorsPanel.tsx b/packages/components/src/internal/components/samples/ManageSampleColorsPanel.tsx
index c4441fab54..6110f39cd5 100644
--- a/packages/components/src/internal/components/samples/ManageSampleColorsPanel.tsx
+++ b/packages/components/src/internal/components/samples/ManageSampleColorsPanel.tsx
@@ -383,7 +383,7 @@ export const ManageSampleColorsPanel: FC<ManageSampleColorsPanelProps> = memo(pr
         (selectLabel?: string) => {
             setError(undefined);
             api.samples
-                .getSampleColors(true, true, homeContainer?.path)
+                .getSampleColors(true, true, homeContainer?.path, false /* exclude /Shared colors from management panel */)
                 .then(loaded => {
                     setColors(loaded);
                     // keep the moduleContext flag in sync so consumers don't have to reload the page after a save
diff --git a/packages/components/src/internal/components/samples/actions.ts b/packages/components/src/internal/components/samples/actions.ts
index 1cf9bdd441..1ad1905be6 100644
--- a/packages/components/src/internal/components/samples/actions.ts
+++ b/packages/components/src/internal/components/samples/actions.ts
@@ -226,10 +226,12 @@ export function getSampleTypeLabelColor(name: string): Promise<string> {
 export async function getSampleColors(
     includeArchive = false,
     checkInUse = false,
-    containerPath?: string
+    containerPath?: string,
+    includeSharedColors = true,
 ): Promise<SampleColorModel[]> {
     const response = await selectRows({
-        columns: 'RowId,Label,Color,Archived',
+        columns: 'RowId,Label,Color,Archived,Container/Path',
+        containerFilter: includeSharedColors ? undefined : Query.ContainerFilter.current,
         containerPath,
         filterArray: includeArchive ? undefined : [NON_ARCHIVED_COLOR_FILTER],
         schemaQuery: SCHEMAS.EXP_TABLES.DATA_COLORS,
@@ -241,6 +243,7 @@ export async function getSampleColors(
         label: caseInsensitive(row, 'Label').value,
         color: caseInsensitive(row, 'Color').value,
         archived: !!caseInsensitive(row, 'Archived').value,
+        containerPath: caseInsensitive(row, 'Container/Path')?.value,
     }));
 
     if (!checkInUse || colors.length === 0) {
diff --git a/packages/components/src/internal/components/samples/models.ts b/packages/components/src/internal/components/samples/models.ts
index 07cb595291..a5fd2eb6c1 100644
--- a/packages/components/src/internal/components/samples/models.ts
+++ b/packages/components/src/internal/components/samples/models.ts
@@ -7,6 +7,7 @@ import { immerable, produce } from 'immer';
 export interface SampleColorModel {
     archived: boolean;
     color: string;
+    containerPath?: string;
     inUse?: boolean;
     label: string;
     rowId?: number;

From 8282e7f5346785210ae6c6476069de6abea2ec72 Mon Sep 17 00:00:00 2001
From: cnathe <cnathe@labkey.com>
Date: Mon, 17 Aug 2026 14:24:15 -0500
Subject: [PATCH 45/51] ManageSampleColorsPanel.tsx fix to reload input /
 checkbox state on new / reselect

---
 .../samples/ManageSampleColorsPanel.test.tsx  | 70 ++++++++++++++++++-
 .../samples/ManageSampleColorsPanel.tsx       | 44 ++++++------
 2 files changed, 92 insertions(+), 22 deletions(-)

diff --git a/packages/components/src/internal/components/samples/ManageSampleColorsPanel.test.tsx b/packages/components/src/internal/components/samples/ManageSampleColorsPanel.test.tsx
index 8c83bab5ee..a374095992 100644
--- a/packages/components/src/internal/components/samples/ManageSampleColorsPanel.test.tsx
+++ b/packages/components/src/internal/components/samples/ManageSampleColorsPanel.test.tsx
@@ -36,7 +36,8 @@ const renderPanel = (
         ...queryOverrides,
     });
     const samples = getSamplesTestAPIWrapper(jest.fn, {
-        getSampleColors: jest.fn().mockResolvedValue(colors),
+        // fresh row objects per call, like the real action, so a reload re-renders the detail panel
+        getSampleColors: jest.fn().mockImplementation(() => Promise.resolve(colors.map(c => ({ ...c })))),
         getColorSampleTypeExclusions: jest.fn().mockResolvedValue([]),
         updateColorSettings: jest.fn().mockResolvedValue(1),
         ...samplesOverrides,
@@ -277,6 +278,73 @@ describe('ManageSampleColorsPanel', () => {
         expect(screen.getByRole('checkbox', { name: 'Sample Type B' })).toBeChecked();
     });
 
+    test('adding a color after viewing one with exclusions starts with everything enabled', async () => {
+        renderPanel(
+            [makeColor(1, 'Red', '#ff0000')],
+            { getColorSampleTypeExclusions: jest.fn().mockResolvedValue([TYPE_B.rowId]) },
+            withTypes(TYPE_A, TYPE_B)
+        );
+        await userEvent.click(await screen.findByRole('button', { name: 'Red' }));
+        expect(await screen.findByRole('checkbox', { name: 'Sample Type B' })).not.toBeChecked();
+
+        await userEvent.click(screen.getByRole('button', { name: /Add Color/i }));
+
+        expect(await screen.findByRole('checkbox', { name: 'Sample Type A' })).toBeChecked();
+        expect(screen.getByRole('checkbox', { name: 'Sample Type B' })).toBeChecked();
+    });
+
+    test('archiving carries pending sample-type edits instead of discarding them', async () => {
+        const { samples } = renderPanel(
+            [makeColor(1, 'Red', '#ff0000')],
+            { getColorSampleTypeExclusions: jest.fn().mockResolvedValue([]) },
+            withTypes(TYPE_A, TYPE_B)
+        );
+        await userEvent.click(await screen.findByRole('button', { name: 'Red' }));
+
+        await userEvent.click(await screen.findByRole('checkbox', { name: 'Sample Type A' }));
+        await userEvent.click(screen.getByRole('button', { name: 'Archive' }));
+
+        await waitFor(() => expect(samples.updateColorSettings).toHaveBeenCalledTimes(1));
+        expect(samples.updateColorSettings).toHaveBeenCalledWith(
+            expect.objectContaining({ rowId: 1, archived: true }),
+            [TYPE_A.rowId],
+            [],
+            undefined
+        );
+    });
+
+    test('re-reads exclusions after a save so the next delta is relative to what was stored', async () => {
+        const getExclusions = jest
+            .fn()
+            .mockResolvedValueOnce([]) // initial load: nothing excluded
+            .mockResolvedValue([TYPE_A.rowId]); // reload after the save: TYPE_A is now excluded
+        const { samples } = renderPanel(
+            [makeColor(1, 'Red', '#ff0000')],
+            { getColorSampleTypeExclusions: getExclusions },
+            withTypes(TYPE_A, TYPE_B)
+        );
+        await userEvent.click(await screen.findByRole('button', { name: 'Red' }));
+
+        await userEvent.click(await screen.findByRole('checkbox', { name: 'Sample Type A' }));
+        await userEvent.click(screen.getByRole('button', { name: 'Save' }));
+
+        await waitFor(() => expect(samples.updateColorSettings).toHaveBeenCalledTimes(1));
+        await waitFor(() => expect(getExclusions).toHaveBeenCalledTimes(2));
+        expect(await screen.findByRole('checkbox', { name: 'Sample Type A' })).not.toBeChecked();
+
+        await userEvent.click(screen.getByRole('checkbox', { name: 'Sample Type B' }));
+        await userEvent.click(screen.getByRole('button', { name: 'Save' }));
+
+        // TYPE_A was already stored as excluded, so only TYPE_B is newly disabled.
+        await waitFor(() => expect(samples.updateColorSettings).toHaveBeenCalledTimes(2));
+        expect(samples.updateColorSettings).toHaveBeenLastCalledWith(
+            expect.objectContaining({ rowId: 1 }),
+            [TYPE_B.rowId],
+            [],
+            undefined
+        );
+    });
+
     test('sample-type checkboxes are read-only (and no Select All) for an archived color', async () => {
         renderPanel(
             [makeColor(1, 'Gray', '#888888', true)],
diff --git a/packages/components/src/internal/components/samples/ManageSampleColorsPanel.tsx b/packages/components/src/internal/components/samples/ManageSampleColorsPanel.tsx
index 6110f39cd5..929c92fa3a 100644
--- a/packages/components/src/internal/components/samples/ManageSampleColorsPanel.tsx
+++ b/packages/components/src/internal/components/samples/ManageSampleColorsPanel.tsx
@@ -66,9 +66,11 @@ export const SampleColorDetail: FC<SampleColorDetailProps> = memo(props => {
     const [excludedTypes, setExcludedTypes] = useState<Set<number>>(new Set());
     // The exclusions as loaded, so Save can send only the delta (newly disabled / newly enabled) rather than the full set.
     const [initialExcludedTypes, setInitialExcludedTypes] = useState<Set<number>>(new Set());
-    const [exclusionsLoaded, setExclusionsLoaded] = useState<boolean>(false);
+    const [exclusionsRowId, setExclusionsRowId] = useState<number>();
     const [typesError, setTypesError] = useState<string>();
     const { api } = useAppContext();
+    const selectionRowId = isNew ? NEW_COLOR_INDEX : color?.rowId;
+    const exclusionsLoaded = exclusionsRowId === selectionRowId;
 
     useEffect(() => {
         setUpdated(isNew ? newColor() : color);
@@ -80,16 +82,17 @@ export const SampleColorDetail: FC<SampleColorDetailProps> = memo(props => {
     }, [color, isNew, onChange]);
 
     // Load this color's current sample-type exclusions (DataTypeSelector loads the sample-type list itself). A new
-    // color has none yet, so it starts with everything enabled and can be created with exclusions.
+    // color has none yet, so it starts with everything enabled and can be created with exclusions. Keyed on the color
+    // object rather than its rowId, so a reload after save/archive re-reads what the server actually stored.
     useEffect(() => {
         setTypesError(undefined);
         if (isNew || !color?.rowId) {
             setExcludedTypes(new Set());
             setInitialExcludedTypes(new Set());
-            setExclusionsLoaded(true);
+            setExclusionsRowId(isNew ? NEW_COLOR_INDEX : color?.rowId);
             return;
         }
-        setExclusionsLoaded(false);
+        setExclusionsRowId(undefined);
         let cancelled = false;
         (async () => {
             try {
@@ -97,7 +100,7 @@ export const SampleColorDetail: FC<SampleColorDetailProps> = memo(props => {
                 if (cancelled) return;
                 setExcludedTypes(new Set(excluded));
                 setInitialExcludedTypes(new Set(excluded));
-                setExclusionsLoaded(true);
+                setExclusionsRowId(color.rowId);
             } catch (e) {
                 if (!cancelled) setTypesError('Unable to load sample type exclusions.');
             }
@@ -105,7 +108,7 @@ export const SampleColorDetail: FC<SampleColorDetailProps> = memo(props => {
         return () => {
             cancelled = true;
         };
-    }, [api, color?.rowId, container?.path, isNew]);
+    }, [api, color, container?.path, isNew]);
 
     // DataTypeSelector reports the full set of unchecked (excluded) sample-type rowIds on every change / select-all.
     const onExcludedTypesChange = useCallback(
@@ -136,16 +139,11 @@ export const SampleColorDetail: FC<SampleColorDetailProps> = memo(props => {
     );
 
     const saveColor = useCallback(
-        (toSave: SampleColorModel, exclusionDelta?: { newlyDisabled: number[]; newlyEnabled: number[] }) => {
+        (toSave: SampleColorModel, delta: { newlyDisabled: number[]; newlyEnabled: number[] }) => {
             setError(undefined);
             setSaving(true);
             api.samples
-                .updateColorSettings(
-                    toSave,
-                    exclusionDelta?.newlyDisabled ?? [],
-                    exclusionDelta?.newlyEnabled ?? [],
-                    container?.path
-                )
+                .updateColorSettings(toSave, delta.newlyDisabled, delta.newlyEnabled, container?.path)
                 .then(() => onActionComplete(toSave.label))
                 .catch(reason => {
                     setError(resolveErrorMessage(reason?.error ?? reason, 'color', 'colors', 'save'));
@@ -155,18 +153,22 @@ export const SampleColorDetail: FC<SampleColorDetailProps> = memo(props => {
         [api, container?.path, onActionComplete]
     );
 
-    const onSave = useCallback(() => {
-        const toSave = { ...updated, label: updated.label?.trim() };
-        const exclusionDelta = {
+    const exclusionDelta = useMemo(
+        () => ({
             newlyDisabled: Array.from(excludedTypes).filter(id => !initialExcludedTypes.has(id)),
             newlyEnabled: Array.from(initialExcludedTypes).filter(id => !excludedTypes.has(id)),
-        };
-        saveColor(toSave, exclusionDelta);
-    }, [updated, excludedTypes, initialExcludedTypes, saveColor]);
+        }),
+        [excludedTypes, initialExcludedTypes]
+    );
+
+    const onSave = useCallback(() => {
+        saveColor({ ...updated, label: updated.label?.trim() }, exclusionDelta);
+    }, [updated, exclusionDelta, saveColor]);
 
+    // Archive/Restore carries any pending sample-type edits too, so they aren't discarded by using this button to save.
     const onToggleArchive = useCallback(() => {
-        saveColor({ ...updated, archived: !updated.archived });
-    }, [updated, saveColor]);
+        saveColor({ ...updated, archived: !updated.archived }, exclusionDelta);
+    }, [updated, exclusionDelta, saveColor]);
 
     const onToggleDeleteConfirm = useCallback(() => {
         setDeleteError(undefined);

From ee84bb4097fbd789afd850f3cbe9d0bb7b23a211 Mon Sep 17 00:00:00 2001
From: cnathe <cnathe@labkey.com>
Date: Mon, 17 Aug 2026 14:26:12 -0500
Subject: [PATCH 46/51] 7.55.5-fb-sampleColor2.1

---
 packages/components/package-lock.json | 4 ++--
 packages/components/package.json      | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/components/package-lock.json b/packages/components/package-lock.json
index f689acea1a..aa6ae68f32 100644
--- a/packages/components/package-lock.json
+++ b/packages/components/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "@labkey/components",
-  "version": "7.55.5-fb-sampleColor2.0",
+  "version": "7.55.5-fb-sampleColor2.1",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@labkey/components",
-      "version": "7.55.5-fb-sampleColor2.0",
+      "version": "7.55.5-fb-sampleColor2.1",
       "license": "SEE LICENSE IN LICENSE.txt",
       "dependencies": {
         "@hello-pangea/dnd": "18.0.1",
diff --git a/packages/components/package.json b/packages/components/package.json
index 5353865716..f41ddd52d7 100644
--- a/packages/components/package.json
+++ b/packages/components/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@labkey/components",
-  "version": "7.55.5-fb-sampleColor2.0",
+  "version": "7.55.5-fb-sampleColor2.1",
   "description": "Components, models, actions, and utility functions for LabKey applications and pages",
   "sideEffects": false,
   "files": [

From a158b3dfb63075990a3e9be4a445da9bc8a211d6 Mon Sep 17 00:00:00 2001
From: cnathe <cnathe@labkey.com>
Date: Mon, 17 Aug 2026 15:16:36 -0500
Subject: [PATCH 47/51] Revert flattenValuesFromRow addition of
 displayValueKeys param

---
 .../src/public/QueryModel/QueryModel.test.ts  | 53 -------------------
 .../src/public/QueryModel/QueryModel.ts       |  9 +---
 2 files changed, 2 insertions(+), 60 deletions(-)

diff --git a/packages/components/src/public/QueryModel/QueryModel.test.ts b/packages/components/src/public/QueryModel/QueryModel.test.ts
index 995117fb98..bfb8c2ff8f 100644
--- a/packages/components/src/public/QueryModel/QueryModel.test.ts
+++ b/packages/components/src/public/QueryModel/QueryModel.test.ts
@@ -399,59 +399,6 @@ describe('flattenValuesFromRow', () => {
             test4: 101,
         });
     });
-
-    test('with displayValueKeys', () => {
-        const data = {
-            test1: { value: 123, displayValue: 'TEST123' },
-            test2: { value: 456, displayValue: 'TEST456' },
-            test3: { value: 789 },
-            test4: { value: null, displayValue: null },
-        };
-        const columns = Object.keys(data);
-
-        expect(flattenValuesFromRow(data, columns, undefined, [])).toEqual({
-            test1: 123,
-            test2: 456,
-            test3: 789,
-            test4: null,
-        });
-
-        expect(flattenValuesFromRow(data, columns, undefined, ['test1', 'test4'])).toEqual({
-            test1: 'TEST123',
-            test2: 456,
-            test3: 789,
-            test4: null,
-        });
-
-        // key without a displayValue in the row falls back to value
-        expect(flattenValuesFromRow(data, columns, undefined, ['test3']).test3).toBe(789);
-        expect(
-            flattenValuesFromRow({ test5: { value: 0, displayValue: null } }, ['test5'], undefined, ['test5'])
-        ).toEqual({ test5: 0 });
-
-        // key not present in columns is ignored
-        expect(flattenValuesFromRow(data, columns, undefined, ['test0'])).toEqual({
-            test1: 123,
-            test2: 456,
-            test3: 789,
-            test4: null,
-        });
-    });
-
-    test('with displayValueKeys and colFieldKeyMap', () => {
-        const data = {
-            'test/1': { value: 123, displayValue: 'TEST123' },
-            test$2: { value: 456, displayValue: 'TEST456' },
-        };
-
-        // displayValueKeys match on the column key, not the mapped fieldKey
-        expect(
-            flattenValuesFromRow(data, Object.keys(data), { 'test/1': 'test$S1', test$2: 'test$D2' }, ['test/1'])
-        ).toEqual({
-            test$S1: 'TEST123',
-            test$D2: 456,
-        });
-    });
 });
 
 describe('locationHasQueryParamSettings', () => {
diff --git a/packages/components/src/public/QueryModel/QueryModel.ts b/packages/components/src/public/QueryModel/QueryModel.ts
index c199f1da88..dc774134b3 100644
--- a/packages/components/src/public/QueryModel/QueryModel.ts
+++ b/packages/components/src/public/QueryModel/QueryModel.ts
@@ -24,18 +24,13 @@ import { SelectRowsOptions } from '../../internal/query/selectRows';
 export function flattenValuesFromRow(
     row: any,
     columns: string[],
-    colFieldKeyMap?: Record<string, string>,
-    displayValueKeys?: string[]
+    colFieldKeyMap?: Record<string, string>
 ): Record<string, any> {
     const values = {};
     if (row && columns) {
         columns.forEach((col: string) => {
             if (row[col]) {
-                if (displayValueKeys?.includes(col)) {
-                    values[col] = row[col].displayValue ?? row[col].value;
-                } else {
-                    values[col] = row[col].value;
-                }
+                values[col] = row[col].value;
             }
         });
     }

From afddd0474850558c17e6e779e01abada1a48875f Mon Sep 17 00:00:00 2001
From: cnathe <cnathe@labkey.com>
Date: Mon, 17 Aug 2026 16:11:44 -0500
Subject: [PATCH 48/51] 7.55.5-fb-sampleColor2.2

---
 packages/components/package-lock.json | 4 ++--
 packages/components/package.json      | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/components/package-lock.json b/packages/components/package-lock.json
index aa6ae68f32..23299ad333 100644
--- a/packages/components/package-lock.json
+++ b/packages/components/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "@labkey/components",
-  "version": "7.55.5-fb-sampleColor2.1",
+  "version": "7.55.5-fb-sampleColor2.2",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@labkey/components",
-      "version": "7.55.5-fb-sampleColor2.1",
+      "version": "7.55.5-fb-sampleColor2.2",
       "license": "SEE LICENSE IN LICENSE.txt",
       "dependencies": {
         "@hello-pangea/dnd": "18.0.1",
diff --git a/packages/components/package.json b/packages/components/package.json
index f41ddd52d7..c58d1dd892 100644
--- a/packages/components/package.json
+++ b/packages/components/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@labkey/components",
-  "version": "7.55.5-fb-sampleColor2.1",
+  "version": "7.55.5-fb-sampleColor2.2",
   "description": "Components, models, actions, and utility functions for LabKey applications and pages",
   "sideEffects": false,
   "files": [

From 9722de98c2ce1442f56b2636ec5b635aba396a8a Mon Sep 17 00:00:00 2001
From: cnathe <cnathe@labkey.com>
Date: Tue, 18 Aug 2026 08:52:20 -0500
Subject: [PATCH 49/51] 7.55.6-fb-sampleColor2.0

---
 packages/components/package-lock.json | 4 ++--
 packages/components/package.json      | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/components/package-lock.json b/packages/components/package-lock.json
index c5f8c41b94..201aec5c5e 100644
--- a/packages/components/package-lock.json
+++ b/packages/components/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "@labkey/components",
-  "version": "7.55.5",
+  "version": "7.55.6-fb-sampleColor2.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@labkey/components",
-      "version": "7.55.5",
+      "version": "7.55.6-fb-sampleColor2.0",
       "license": "SEE LICENSE IN LICENSE.txt",
       "dependencies": {
         "@hello-pangea/dnd": "18.0.1",
diff --git a/packages/components/package.json b/packages/components/package.json
index 97c0f58857..3cfac392c9 100644
--- a/packages/components/package.json
+++ b/packages/components/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@labkey/components",
-  "version": "7.55.5",
+  "version": "7.55.6-fb-sampleColor2.0",
   "description": "Components, models, actions, and utility functions for LabKey applications and pages",
   "sideEffects": false,
   "files": [

From 30c05d1081781ceb25d71cbf849bdc790d989276 Mon Sep 17 00:00:00 2001
From: cnathe <cnathe@labkey.com>
Date: Tue, 18 Aug 2026 09:38:20 -0500
Subject: [PATCH 50/51] 7.56.0

---
 packages/components/package-lock.json | 4 ++--
 packages/components/package.json      | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/components/package-lock.json b/packages/components/package-lock.json
index 201aec5c5e..79cd4e3cb3 100644
--- a/packages/components/package-lock.json
+++ b/packages/components/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "@labkey/components",
-  "version": "7.55.6-fb-sampleColor2.0",
+  "version": "7.56.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@labkey/components",
-      "version": "7.55.6-fb-sampleColor2.0",
+      "version": "7.56.0",
       "license": "SEE LICENSE IN LICENSE.txt",
       "dependencies": {
         "@hello-pangea/dnd": "18.0.1",
diff --git a/packages/components/package.json b/packages/components/package.json
index 3cfac392c9..864dd65bf6 100644
--- a/packages/components/package.json
+++ b/packages/components/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@labkey/components",
-  "version": "7.55.6-fb-sampleColor2.0",
+  "version": "7.56.0",
   "description": "Components, models, actions, and utility functions for LabKey applications and pages",
   "sideEffects": false,
   "files": [

From 526a5ddd8125ea1fac9bbb110997139a27c0407e Mon Sep 17 00:00:00 2001
From: cnathe <cnathe@labkey.com>
Date: Tue, 18 Aug 2026 09:50:46 -0500
Subject: [PATCH 51/51] remove comment

---
 .../src/internal/components/forms/input/SampleColorInput.tsx     | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/components/src/internal/components/forms/input/SampleColorInput.tsx b/packages/components/src/internal/components/forms/input/SampleColorInput.tsx
index 01f9463066..4f8d9317b3 100644
--- a/packages/components/src/internal/components/forms/input/SampleColorInput.tsx
+++ b/packages/components/src/internal/components/forms/input/SampleColorInput.tsx
@@ -16,7 +16,6 @@ import { caseInsensitive } from '../../../util/utils';
 import { ColorIcon } from '../../base/ColorIcon';
 
 const SampleColorSelectOption: FC<QuerySelectOptionProps> = memo(({ row, label }) => {
-    // color is available here because QuerySelect includes identifying fields (see exp.DataColor ~~identifyingfields~~.qview.xml file)
     const colorVal = caseInsensitive(row, 'Color')?.value;
     return (
         <div className="sample-color-select-option">