Sample color display - grid column renderer, sample detail header, storage box view, etc.

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": [

packages/components/src/index.ts

@@ -651,6 +651,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,
@@ -714,6 +715,7 @@ import {
     getFolderSampleTypeExclusion,
     getPrimaryAppProperties,
     getProjectPath,
+    hasActiveProjectColors,
     hasModule,
     hasPremiumModule,
     hasProductFolders,
@@ -741,7 +743,6 @@ import {
     isProjectContainer,
     isProtectedDataEnabled,
     isRegistryEnabled,
-    isSampleColorsEnabled,
     isSampleStatusEnabled,
     isSharedContainer,
     isSourceTypeEnabled,
@@ -958,7 +959,6 @@ const App = {
     isSharedContainer,
     freezerManagerIsCurrentApp,
     isSampleManagerEnabled,
-    isSampleColorsEnabled,
     isSampleStatusEnabled,
     isProductFoldersEnabled,
     isAllProductFoldersFilteringEnabled,
@@ -976,6 +976,7 @@ const App = {
     getLabelsTestAPIWrapper,
     getSecurityTestAPIWrapper,
     getQueryTestAPIWrapper,
+    hasActiveProjectColors,
     hasPremiumModule,
     hasProductFolders,
     hasModule,
@@ -1663,6 +1664,7 @@ export {
     ResponsiveMenuButton,
     ResponsiveMenuButtonGroup,
     runDetailsColumnsForQueryModel,
+    SAMPLE_COLOR_COLOR_COLUMN_NAME,
     SAMPLE_COLOR_COLUMN_NAME,
     SAMPLE_COLOR_REQUIRED_COLUMNS,
     SAMPLE_DATA_EXPORT_CONFIG,

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=';
 

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();

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,
@@ -204,8 +205,20 @@ 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;
+}
+
+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 {

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);
+    });
 });

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,15 +69,19 @@ 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
                         )}
                     </Popover>
                 );
 
                 return (
-                    <OverlayTrigger key={index} id={index.toString()} overlay={overlay} style={style}>
+                    <OverlayTrigger id={barIndex.toString()} key={barIndex} overlay={overlay} style={style}>
                         {section}
                     </OverlayTrigger>
                 );

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');
+    });
 });

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}