Sample type color field and color configuration

packages/components/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@labkey/components",
-  "version": "7.48.0",
+  "version": "7.49.0",
   "description": "Components, models, actions, and utility functions for LabKey applications and pages",
   "sideEffects": false,
   "files": [

packages/components/src/index.ts

@@ -270,6 +270,7 @@ import { AliasRenderer } from './internal/renderers/AliasRenderer';
 import { ANCESTOR_LOOKUP_CONCEPT_URI, AncestorRenderer } from './internal/renderers/AncestorRenderer';
 import { StorageStatusRenderer } from './internal/renderers/StorageStatusRenderer';
 import { SampleStatusRenderer } from './internal/renderers/SampleStatusRenderer';
+import { SampleColorRenderer } from './internal/renderers/SampleColorRenderer';
 import { TransactionAuditIdRenderer } from './internal/renderers/TransactionAuditIdRenderer';
 import { ExpirationDateColumnRenderer } from './internal/renderers/ExpirationDateColumnRenderer';
 import { FolderColumnRenderer } from './internal/renderers/FolderColumnRenderer';
@@ -640,13 +641,16 @@ import {
 import { DisableableMenuItem } from './internal/components/samples/DisableableMenuItem';
 import { SampleStatusTag } from './internal/components/samples/SampleStatusTag';
 import { ManageSampleStatusesPanel } from './internal/components/samples/ManageSampleStatusesPanel';
+import { ManageSampleColorsPanel } from './internal/components/samples/ManageSampleColorsPanel';
 import { SampleStatusLegend } from './internal/components/samples/SampleStatusLegend';
 import {
     ALIQUOT_FILTER_MODE,
     ALIQUOTED_FROM_COL,
     DEFAULT_SAMPLE_FIELD_CONFIG,
     FIND_BY_IDS_QUERY_PARAM,
     IS_ALIQUOT_COL,
+    SAMPLE_COLOR_COLUMN_NAME,
+    SAMPLE_COLOR_REQUIRED_COLUMNS,
     SAMPLE_DATA_EXPORT_CONFIG,
     SAMPLE_ID_FIND_FIELD,
     SAMPLE_IMPORT_EXTRA_ALLOWED_COLUMNS,
@@ -691,6 +695,7 @@ import {
     isBiologicsEnabled,
     isFreezerManagementEnabled,
     isPremiumApplication,
+    isSampleManagerEnabled,
     limsIsPrimaryApp,
 } from './internal/app/products';
 import {
@@ -734,6 +739,7 @@ import {
     isProjectContainer,
     isProtectedDataEnabled,
     isRegistryEnabled,
+    isSampleColorsEnabled,
     isSampleStatusEnabled,
     isSharedContainer,
     isSourceTypeEnabled,
@@ -946,6 +952,8 @@ const App = {
     isDataChangeCommentRequirementFeatureEnabled,
     isSharedContainer,
     freezerManagerIsCurrentApp,
+    isSampleManagerEnabled,
+    isSampleColorsEnabled,
     isSampleStatusEnabled,
     isProductFoldersEnabled,
     isAllProductFoldersFilteringEnabled,
@@ -1546,6 +1554,7 @@ export {
     makeTestISelectRowsResult,
     makeTestQueryModel,
     ManageDropdownButton,
+    ManageSampleColorsPanel,
     ManageSampleStatusesPanel,
     MAX_EDITABLE_GRID_ROWS,
     MAX_SELECTION_ACTION_ROWS,
@@ -1645,6 +1654,8 @@ export {
     ResponsiveMenuButton,
     ResponsiveMenuButtonGroup,
     runDetailsColumnsForQueryModel,
+    SAMPLE_COLOR_COLUMN_NAME,
+    SAMPLE_COLOR_REQUIRED_COLUMNS,
     SAMPLE_DATA_EXPORT_CONFIG,
     SAMPLE_FINDER_SESSION_PREFIX,
     SAMPLE_ID_FIELD_KEY,
@@ -1661,6 +1672,7 @@ export {
     SAMPLE_TYPE_CONCEPT_URI,
     SAMPLE_TYPE_DESIGNER_ROLE,
     SampleAmountEditModal,
+    SampleColorRenderer,
     sampleDeleteDependencyText,
     SampleOperation,
     SampleParentDataType,

packages/components/src/internal/app/utils.ts

@@ -204,6 +204,10 @@ export function isSampleStatusEnabled(moduleContext?: ModuleContext): boolean {
     return hasSampleManagementModule(moduleContext);
 }
 
+export function isSampleColorsEnabled(moduleContext?: ModuleContext): boolean {
+    return resolveModuleContext(moduleContext)?.experiment?.SampleColors === true;
+}
+
 export function isQueryMetadataEditor(): boolean {
     const action = ActionURL.getAction()?.toLowerCase() || '';
     return action === 'metadataquery' || action.startsWith('querymetadataeditor');

packages/components/src/internal/components/domainproperties/samples/SampleTypeDesigner.tsx

@@ -579,6 +579,7 @@ export class SampleTypeDesignerImpl extends React.PureComponent<SampleTypeDesign
             autoLinkCategory,
             excludedContainerIds,
             excludedDashboardContainerIds,
+            disabledSampleColorRowIds,
         } = model;
 
         return {
@@ -592,6 +593,7 @@ export class SampleTypeDesignerImpl extends React.PureComponent<SampleTypeDesign
             importAliases: this.getImportAliasesAsMap(model),
             excludedContainerIds,
             excludedDashboardContainerIds,
+            disabledSampleColorRowIds,
         };
     };
 

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 } from '../../../app/utils';
+import { getCurrentProductName, isCommunityDistribution, isSampleColorsEnabled } from '../../../app/utils';
 
 import { PREFIX_SUBSTITUTION_EXPRESSION, PROPERTIES_PANEL_NAMING_PATTERN_WARNING_MSG } from '../constants';
 
@@ -45,6 +45,7 @@ import { IParentAlias, IParentOption } from '../../entities/models';
 import { Container } from '../../base/models/Container';
 import { IDomainField } from '../models';
 import { ColorPickerInput } from '../../forms/input/ColorPickerInput';
+import { SampleColorsSetting } from '../../samples/SampleColorsSetting';
 import { SelectInput, SelectInputOption } from '../../forms/input/SelectInput';
 
 import { dataClassOptionFilterFn, DomainParentAliases } from '../DomainParentAliases';
@@ -100,7 +101,10 @@ export const UnitKinds: Record<UNITS_KIND, UnitKindType> = {
         value: UNITS_KIND.COUNT,
         label: 'Other',
         hideSubSelect: true,
-        msg: "Amounts can be entered as " +  makeCommaSeparatedString(MEASUREMENT_UNITS.unit.altLabels, ', or ') + " and won't be converted",
+        msg:
+            'Amounts can be entered as ' +
+            makeCommaSeparatedString(MEASUREMENT_UNITS.unit.altLabels, ', or ') +
+            " and won't be converted",
     },
 };
 
@@ -320,6 +324,10 @@ class SampleTypePropertiesPanelImpl extends PureComponent<InjectedDomainProperti
         this.updateValidStatus(this.props.model.set(key, value) as SampleTypeModel);
     };
 
+    onSampleColorsChange = (disabledRowIds: number[]): void => {
+        this.onFieldChange('disabledSampleColorRowIds', disabledRowIds);
+    };
+
     onMetricUnitKindChange = (key: string, value: any): void => {
         const { originalUnit } = this.state;
         const unitKind = value ? UnitKinds[value] : null;
@@ -551,8 +559,8 @@ class SampleTypePropertiesPanelImpl extends PureComponent<InjectedDomainProperti
                         <div className="row margin-top">
                             <div className="col-xs-2">
                                 <DomainFieldLabel
-                                    id="linked-study-label"
                                     helpTipBody={<AutoLinkDataToStudyHelpTip />}
+                                    id="linked-study-label"
                                     label="Auto-Link Data to Study"
                                 />
                             </div>
@@ -569,8 +577,8 @@ class SampleTypePropertiesPanelImpl extends PureComponent<InjectedDomainProperti
                         <div className="row margin-top">
                             <div className="col-xs-2">
                                 <DomainFieldLabel
-                                    id="linked-dataset-category-label"
                                     helpTipBody={<LinkedDatasetCategoryHelpTip />}
+                                    id="linked-dataset-category-label"
                                     label="Linked Dataset Category"
                                 />
                             </div>
@@ -597,8 +605,8 @@ class SampleTypePropertiesPanelImpl extends PureComponent<InjectedDomainProperti
                         <div className="row margin-top">
                             <div className="col-xs-2">
                                 <DomainFieldLabel
-                                    helpTipBody="The label color will be used to distinguish this sample type in various views in the application."
-                                    label="Label Color"
+                                    helpTipBody="The color that will be used to distinguish this sample type in various views in the application."
+                                    label="Sample Type Color"
                                 />
                             </div>
                             <div className="col-xs-10">
@@ -610,6 +618,9 @@ class SampleTypePropertiesPanelImpl extends PureComponent<InjectedDomainProperti
                                 />
                             </div>
                         </div>
+                        {isSampleColorsEnabled() && (
+                            <SampleColorsSetting onChange={this.onSampleColorsChange} sampleTypeRowId={model.rowId} />
+                        )}
                         {includeMetricUnitProperty && (
                             <>
                                 <div className="row margin-top">

packages/components/src/internal/components/domainproperties/samples/__snapshots__/SampleTypePropertiesPanel.test.tsx.snap

@@ -214,7 +214,7 @@ exports[`SampleTypePropertiesPanel appPropertiesOnly 1`] = `
               class="col-xs-2"
             >
               <span>
-                Label 
+                Sample Type 
                 <span
                   class="domain-no-wrap"
                 >
@@ -499,7 +499,7 @@ exports[`SampleTypePropertiesPanel appPropertiesOnly 1`] = `
             class="col-xs-2"
           >
             <span>
-              Label 
+              Sample Type 
               <span
                 class="domain-no-wrap"
               >

packages/components/src/internal/components/domainproperties/samples/models.ts

@@ -27,6 +27,7 @@ export class SampleTypeModel extends Record({
     autoLinkCategory: undefined,
     excludedContainerIds: undefined,
     excludedDashboardContainerIds: undefined,
+    disabledSampleColorRowIds: undefined,
     exception: undefined,
 }) {
     declare rowId: number;
@@ -45,6 +46,7 @@ export class SampleTypeModel extends Record({
     declare autoLinkCategory: string;
     declare excludedContainerIds?: string[];
     declare excludedDashboardContainerIds?: string[];
+    declare disabledSampleColorRowIds?: number[];
     declare exception: string;
 
     static create(raw?: DomainDetails, name?: string): SampleTypeModel {

packages/components/src/internal/components/editable/Cell.tsx

@@ -527,7 +527,10 @@ export class Cell extends React.PureComponent<CellProps, undefined> {
                 .filter(vd => vd && vd.display !== undefined)
                 .reduce((v, vd, i) => v + (i > 0 ? ', ' : '') + vd.display, '');
 
-            const showMenu = (showLookup || !!col.inputRenderer) && (NON_NEGATIVE_NUMBER_CONCEPT_URI !== col?.conceptURI /*storedamount has inputRenderer but shouldn't show menu*/);
+            const showMenu =
+                (showLookup || !!col.inputRenderer) &&
+                NON_NEGATIVE_NUMBER_CONCEPT_URI !==
+                    col?.conceptURI; /*storedamount has inputRenderer but shouldn't show menu*/
 
             return (
                 <>
@@ -566,6 +569,11 @@ export class Cell extends React.PureComponent<CellProps, undefined> {
                     data={row}
                     formsy={false}
                     onSelectChange={this.onSelectChange}
+                    queryFilters={
+                        columnMetadata?.lookupValueFilters
+                            ? { [col.name]: List(columnMetadata.lookupValueFilters) }
+                            : undefined
+                    }
                     selectInputProps={{
                         ...gridCellSelectInputProps,
                         defaultInputValue: this.recordedKeys,

packages/components/src/internal/components/forms/detail/DetailDisplay.tsx

@@ -5,7 +5,7 @@
 import React, { FC, memo, ReactNode, useMemo } from 'react';
 import { List, OrderedMap } from 'immutable';
 import numeral from 'numeral';
-import { Query } from '@labkey/api';
+import { Filter, Query } from '@labkey/api';
 
 import classNames from 'classnames';
 
@@ -26,6 +26,7 @@ import { resolveDetailFieldValue } from '../utils';
 import { AssayRunReferenceRenderer } from '../../../renderers/AssayRunReferenceRenderer';
 
 import { SampleStatusRenderer } from '../../../renderers/SampleStatusRenderer';
+import { SampleColorRenderer } from '../../../renderers/SampleColorRenderer';
 import { TextChoiceInput } from '../input/TextChoiceInput';
 
 import { DatePickerInput } from '../input/DatePickerInput';
@@ -56,6 +57,8 @@ export interface RenderOptions {
     containerPath?: string;
     hideLabel?: boolean;
     includeSpacesWarning?: boolean;
+    /** Per-column lookup filters (keyed by column name) applied to query-based input renderers. */
+    queryFilters?: Record<string, List<Filter.IFilter>>;
 }
 
 export interface EditRendererOptions extends RenderOptions {
@@ -175,6 +178,7 @@ export const DetailDisplay: FC<DetailDisplayProps> = memo(props => {
         fileInputRenderer,
         fieldHelpTexts,
         onAdditionalFormDataChange,
+        queryFilters,
         tableCls,
         internalSpacesWarningFieldKeys,
     } = props;
@@ -195,7 +199,7 @@ export const DetailDisplay: FC<DetailDisplayProps> = memo(props => {
     if (data.size === 0) {
         body = <div>No data available.</div>;
     } else {
-        const options = { containerFilter, containerPath } as RenderOptions;
+        const options = { containerFilter, containerPath, queryFilters } as RenderOptions;
         if (editingMode) options.hideLabel = true;
 
         const fields = processFields(
@@ -314,6 +318,7 @@ export function resolveDetailEditRenderer(
                     key={col.name}
                     onAdditionalFormDataChange={onAdditionalFormDataChange}
                     onSelectChange={options?.onSelectChange}
+                    queryFilters={options?.queryFilters}
                     selectInputProps={{ inputClass: DETAIL_INPUT_WRAPPER_CLASS_NAME, showLabel }}
                     showLabel={showLabel}
                     value={value}
@@ -485,6 +490,9 @@ export function resolveDetailRenderer(column: QueryColumn): Renderer {
             case 'nolinkrenderer':
                 renderer = d => <NoLinkRenderer data={d} />;
                 break;
+            case 'samplecolorrenderer':
+                renderer = (d, r) => <SampleColorRenderer data={d} row={r} />;
+                break;
             case 'samplestatusrenderer':
                 renderer = (d, r) => <SampleStatusRenderer row={r} />;
                 break;

packages/components/src/internal/components/forms/input/InputRenderFactory.ts

@@ -10,6 +10,7 @@ import { InputRendererProps } from './types';
 import { AliasGridInput, AliasInput } from './AliasInput';
 import { AppendUnitsInput } from './AppendUnitsInput';
 import { SampleStatusInputRenderer } from './SampleStatusInput';
+import { SampleColorInputRenderer } from './SampleColorInput';
 import { AmountUnitInput } from './AmountUnitInput';
 
 export type InputRendererComponent = ComponentType<InputRendererProps>;
@@ -53,5 +54,6 @@ export function registerInputRenderers(): void {
     registerInputRenderer('ExperimentAlias', AliasGridInput, InputRenderContext.Grid);
     registerInputRenderer('ExperimentAlias', AliasInput, InputRenderContext.Form);
     registerInputRenderer('SampleStatusInput', SampleStatusInputRenderer);
+    registerInputRenderer('SampleColorInput', SampleColorInputRenderer);
     registerInputRenderer('AmountUnitInput', AmountUnitInput, InputRenderContext.Form);
 }