GitHub Issue 796: App assay Samples > Find Derivatives in Sample Finder not working for field with special characters (#1809)

### version 6.49.1
*Released*: 16 June 2025
- GH Issue 796: App assay Samples > Find Derivatives in Sample Finder not working for field with special characters
  - update getLegalIdentifier to include separator param
  - FindDerivativesMenuItem update to allow titleCol prop to be passed in
- GH Issue 740: Disable "Find Derivatives in Sample Finder" if grid has no rows

Author: cnathe

packages/components/package-lock.json

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

packages/components/package.json

@@ -1,6 +1,13 @@
 # @labkey/components
 Components, models, actions, and utility functions for LabKey applications and pages
 
+### version 6.49.1
+*Released*: 16 June 2025
+- GH Issue 796: App assay Samples > Find Derivatives in Sample Finder not working for field with special characters
+  - update getLegalIdentifier to include separator param
+  - FindDerivativesMenuItem update to allow titleCol prop to be passed in
+- GH Issue 740: Disable "Find Derivatives in Sample Finder" if grid has no rows
+
 ### version 6.49.0
 *Released*: 11 June 2025
 - Remove SOURCE_TYPE_KEY constant

packages/components/releaseNotes/components.md

@@ -8,15 +8,14 @@ import { QueryColumn } from '../../../public/QueryColumn';
 import { makeTestQueryModel } from '../../../public/QueryModel/testUtils';
 import { SchemaQuery } from '../../../public/SchemaQuery';
 
-import { mountWithAppServerContext } from '../../test/enzymeTestHelpers';
-import { DisableableMenuItem } from '../samples/DisableableMenuItem';
-
 import { TestTypeDataType, TestTypeDataTypeWithEntityFilter } from '../../../test/data/constants';
 
 import { FieldFilter } from '../search/models';
 
 import { SCHEMAS } from '../../schemas';
 
+import { renderWithAppContext } from '../../test/reactTestLibraryHelpers';
+
 import {
     FindDerivativesMenuItem,
     getFieldFilter,
@@ -87,6 +86,7 @@ const QUERY_INFO = QueryInfo.fromJsonForTests({
 const MODEL = makeTestQueryModel(new SchemaQuery('samples', 'query', VIEW_NAME), QUERY_INFO).mutate({
     baseFilters: [Filter.create('a', null, Filter.Types.ISBLANK)],
     filterArray: [Filter.create('b', null, Filter.Types.ISBLANK)],
+    rowCount: 1,
 });
 
 describe('FindDerivativesButton', () => {
@@ -96,11 +96,18 @@ describe('FindDerivativesButton', () => {
     };
 
     test('default props', () => {
-        const wrapper = mountWithAppServerContext(<FindDerivativesMenuItem {...DEFAULT_PROPS} asSubMenu />);
-        expect(wrapper.find(DisableableMenuItem)).toHaveLength(1);
-        expect(wrapper.find(DisableableMenuItem).prop('disabled')).toBe(false);
-        expect(wrapper.find(DisableableMenuItem).prop('disabledMessage')).toContain(' ()');
-        wrapper.unmount();
+        renderWithAppContext(<FindDerivativesMenuItem {...DEFAULT_PROPS} asSubMenu />);
+        expect(document.querySelectorAll('.lk-menu-item')).toHaveLength(1);
+        expect(document.querySelectorAll('.lk-menu-item.disabled')).toHaveLength(0);
+    });
+
+    test('disable menu item for grid with no rows', () => {
+        const model2 = MODEL.mutate({
+            rowCount: 0,
+        });
+        renderWithAppContext(<FindDerivativesMenuItem {...DEFAULT_PROPS} model={model2} asSubMenu />);
+        expect(document.querySelectorAll('.lk-menu-item')).toHaveLength(1);
+        expect(document.querySelectorAll('.lk-menu-item.disabled')).toHaveLength(1);
     });
 
     test('invalidFilterNames from search, disabled button', () => {
@@ -110,22 +117,18 @@ describe('FindDerivativesButton', () => {
                 Filter.create('*', 'test', Filter.Types.CONTIANS),
             ],
         });
-        const wrapper = mountWithAppServerContext(<FindDerivativesMenuItem {...DEFAULT_PROPS} model={model2} />);
-        expect(wrapper.find(DisableableMenuItem)).toHaveLength(1);
-        expect(wrapper.find(DisableableMenuItem).prop('disabled')).toBe(true);
-        expect(wrapper.find(DisableableMenuItem).prop('disabledMessage')).toContain(' (Search Filter)');
-        wrapper.unmount();
+        renderWithAppContext(<FindDerivativesMenuItem {...DEFAULT_PROPS} model={model2} />);
+        expect(document.querySelectorAll('.lk-menu-item')).toHaveLength(1);
+        expect(document.querySelectorAll('.lk-menu-item.disabled')).toHaveLength(1);
     });
 
     test('invalidFilterNames from MVFK, disabled button', () => {
         const model2 = MODEL.mutate({
             filterArray: [Filter.create('e', null, Filter.Types.ISBLANK)],
         });
-        const wrapper = mountWithAppServerContext(<FindDerivativesMenuItem {...DEFAULT_PROPS} model={model2} />);
-        expect(wrapper.find(DisableableMenuItem)).toHaveLength(1);
-        expect(wrapper.find(DisableableMenuItem).prop('disabled')).toBe(true);
-        expect(wrapper.find(DisableableMenuItem).prop('disabledMessage')).toContain(' (FieldE)');
-        wrapper.unmount();
+        renderWithAppContext(<FindDerivativesMenuItem {...DEFAULT_PROPS} model={model2} />);
+        expect(document.querySelectorAll('.lk-menu-item')).toHaveLength(1);
+        expect(document.querySelectorAll('.lk-menu-item.disabled')).toHaveLength(1);
     });
 });
 
@@ -160,43 +163,43 @@ describe('getFieldFilter', () => {
 });
 
 describe('getSessionSearchFilterProps', () => {
-    test('no filters', () => {
-        const props = getSessionSearchFilterProps(SampleTypeDataType, MODEL, []);
+    test('no filters', async () => {
+        const props = await getSessionSearchFilterProps(SampleTypeDataType, MODEL, []);
         expect(props).toHaveLength(1);
         expect(props[0].filterArray).toHaveLength(0);
         expect(props[0].dataTypeDisplayName).toBe('query');
         expect(props[0].entityDataType).toBe(SampleTypeDataType);
     });
 
-    test('with model title', () => {
+    test('with model title', async () => {
         const model2 = MODEL.mutate({ title: 'TestingTitle' });
-        const props = getSessionSearchFilterProps(SampleTypeDataType, model2, []);
+        const props = await getSessionSearchFilterProps(SampleTypeDataType, model2, []);
         expect(props).toHaveLength(1);
         expect(props[0].dataTypeDisplayName).toBe('TestingTitle');
     });
 
-    test('with filters', () => {
-        const props = getSessionSearchFilterProps(SampleTypeDataType, MODEL, [
+    test('with filters', async () => {
+        const props = await getSessionSearchFilterProps(SampleTypeDataType, MODEL, [
             Filter.create('a', 'val1'),
             Filter.create('b', 'val2'),
         ]);
         expect(props).toHaveLength(1);
         expect(props[0].filterArray).toHaveLength(2);
     });
 
-    test('baseFilter, without baseModel', () => {
-        const props = getSessionSearchFilterProps(SampleTypeDataType, MODEL, [], undefined, undefined, [
+    test('baseFilter, without baseModel', async () => {
+        const props = await getSessionSearchFilterProps(SampleTypeDataType, MODEL, [], undefined, undefined, [
             Filter.create('a', 'Something'),
         ]);
         expect(props).toHaveLength(1);
         expect(props[0].filterArray).toHaveLength(1);
     });
 
-    test('baseFilter, with baseModel for sample type', () => {
+    test('baseFilter, with baseModel for sample type', async () => {
         const baseModel = MODEL.mutate({
             schemaQuery: new SchemaQuery('samples', 'query2'),
         });
-        const props = getSessionSearchFilterProps(SampleTypeDataType, MODEL, [], SampleTypeDataType, baseModel, [
+        const props = await getSessionSearchFilterProps(SampleTypeDataType, MODEL, [], SampleTypeDataType, baseModel, [
             Filter.create('a', 'Something'),
         ]);
         expect(props).toHaveLength(2);
@@ -206,11 +209,11 @@ describe('getSessionSearchFilterProps', () => {
         expect(props[1].filterArray).toHaveLength(0);
     });
 
-    test('baseFilter, with baseModel for data class', () => {
+    test('baseFilter, with baseModel for data class', async () => {
         const baseModel = MODEL.mutate({
             schemaQuery: new SchemaQuery('exp.data', 'query3'),
         });
-        const props = getSessionSearchFilterProps(SampleTypeDataType, MODEL, [], DataClassDataType, baseModel, [
+        const props = await getSessionSearchFilterProps(SampleTypeDataType, MODEL, [], DataClassDataType, baseModel, [
             Filter.create('a', 'Something'),
         ]);
         expect(props).toHaveLength(2);

…/entities/FindDerivativesButton.spec.tsx …/entities/FindDerivativesButton.test.tsxpackages/components/src/internal/components/entities/FindDerivativesButton.spec.tsx renamed to packages/components/src/internal/components/entities/FindDerivativesButton.test.tsx packages/components/src/internal/components/entities/FindDerivativesButton.spec.tsx renamed to packages/components/src/internal/components/entities/FindDerivativesButton.test.tsx

@@ -18,9 +18,10 @@ import { ResponsiveMenuButton } from '../buttons/ResponsiveMenuButton';
 import { getSelectedDataDeprecated } from '../../actions';
 import { caseInsensitive } from '../../util/utils';
 
-import { EntityDataType, FilterProps } from './models';
 import { getPrimaryAppProductId } from '../../app/products';
 
+import { EntityDataType, FilterProps } from './models';
+
 export const SAMPLE_FINDER_SESSION_PREFIX = 'Searched ';
 
 const MAX_SELECTION = 200;
@@ -62,7 +63,8 @@ export const getSessionSearchFilterProps = async (
     filters: Filter.IFilter[],
     baseEntityDataType?: EntityDataType,
     baseModel?: QueryModel,
-    baseFilter?: Filter.IFilter[]
+    baseFilter?: Filter.IFilter[],
+    titleCol?: QueryColumn
 ): Promise<FilterProps[]> => {
     let fieldFilters = [];
     // optionally include baseFilter when passed without a baseModel (i.e. apply to the same schemaQuery as the other filters)
@@ -75,28 +77,28 @@ export const getSessionSearchFilterProps = async (
     // Issue 47087: if model has selections, include those as IN clause
     if (model.hasSelections && model.queryInfo.pkCols?.length === 1 && model.queryInfo.titleColumn) {
         const pkCol = model.queryInfo.getPkCols()[0];
-        const titleCol = model.queryInfo.getColumn(model.queryInfo.titleColumn);
+        const titleCol_ = titleCol ?? model.queryInfo.getColumnFromName(model.queryInfo.titleColumn);
 
         const selectedData = await getSelectedDataDeprecated(
             model.schemaName,
             model.queryName,
             Array.from(model.selections),
-            [pkCol.fieldKey, titleCol.fieldKey],
+            [pkCol.fieldKey, titleCol_.fieldKey],
             undefined,
             model.queryParameters,
             model.viewName,
             pkCol.fieldKey
         );
         const selectedValues = [];
         selectedData.data.forEach(row => {
-            selectedValues.push(caseInsensitive(row.toJS(), titleCol.fieldKey).value);
+            selectedValues.push(caseInsensitive(row.toJS(), titleCol_.name).value);
         });
 
         fieldFilters.push({
-            fieldKey: titleCol.fieldKey,
+            fieldKey: titleCol_.fieldKey,
             fieldCaption: 'Selection',
-            filter: Filter.create(titleCol.fieldKey, selectedValues, Filter.Types.IN),
-            jsonType: titleCol.jsonType,
+            filter: Filter.create(titleCol_.fieldKey, selectedValues, Filter.Types.IN),
+            jsonType: titleCol_.jsonType,
         });
     }
 
@@ -171,10 +173,11 @@ interface Props {
     entityDataType: EntityDataType;
     metricFeatureArea?: string;
     model: QueryModel;
+    titleCol?: QueryColumn;
 }
 
 export const FindDerivativesMenuItem: FC<Props> = memo(props => {
-    const { baseEntityDataType, baseModel, baseFilter, model, entityDataType, metricFeatureArea } = props;
+    const { baseEntityDataType, baseModel, baseFilter, model, entityDataType, metricFeatureArea, titleCol } = props;
     const { api } = useAppContext();
 
     const viewAndUserFilters = useMemo(
@@ -207,7 +210,8 @@ export const FindDerivativesMenuItem: FC<Props> = memo(props => {
             viewAndUserFilters,
             baseEntityDataType,
             baseModel,
-            baseFilter
+            baseFilter,
+            titleCol
         );
 
         sessionStorage.setItem(getSampleFinderLocalStorageKey(), searchFiltersToJson(filterProps, 0, currentTimestamp));
@@ -221,10 +225,10 @@ export const FindDerivativesMenuItem: FC<Props> = memo(props => {
     if (!model.queryInfo) return null;
 
     const validSelection = !model.selections?.size || model.selections.size <= MAX_SELECTION;
-    const disabled = !validSelection || invalidFilterNames !== '';
-    const disabledMessage = !validSelection
-        ? 'At most ' + MAX_SELECTION + ' can be selected'
-        : DISABLED_FIND_DERIVATIVES_MSG + ' (' + invalidFilterNames + ').';
+    const disabled = model.rowCount === 0 || !validSelection || invalidFilterNames !== '';
+    let disabledMessage = DISABLED_FIND_DERIVATIVES_MSG + ' (' + invalidFilterNames + ').';
+    if (!validSelection) disabledMessage = 'At most ' + MAX_SELECTION + ' can be selected.';
+    if (model.rowCount === 0) disabledMessage = 'No samples available in the current grid view.';
 
     return (
         <DisableableMenuItem disabled={disabled} disabledMessage={disabledMessage} onClick={onClick} placement="right">

packages/components/src/internal/components/entities/FindDerivativesButton.tsx

@@ -2,7 +2,7 @@ import { Filter } from '@labkey/api';
 
 import { formatDate, getNDaysStrFromToday } from '../util/Date';
 
-import { COLUMN_NOT_IN_FILTER_TYPE, getFilterLabKeySql } from './filter';
+import { COLUMN_NOT_IN_FILTER_TYPE, getFilterLabKeySql, getLegalIdentifier } from './filter';
 
 const datePOSIX = 1596750283812; // Aug 6, 2020 14:44 America/Los_Angeles
 const testDate = new Date(datePOSIX);
@@ -535,3 +535,26 @@ describe('getFilterLabKeySql', () => {
         expect(getFilterLabKeySql(Filter.create('StringField', 'abc', Filter.Types.MEMBER_OF), 'string')).toBeNull();
     });
 });
+
+describe('getLegalIdentifier', () => {
+    test('columnName', () => {
+        expect(getLegalIdentifier('testColumn')).toBe('"testColumn"');
+        expect(getLegalIdentifier('test"Column')).toBe('"test""Column"');
+        expect(getLegalIdentifier('test""Column')).toBe('"test""""Column"');
+        expect(getLegalIdentifier('test$S$P$CColumn')).toBe('"test/.,Column"');
+        expect(getLegalIdentifier('test/Column')).toBe('"test"."Column"');
+    });
+
+    test('tableAlias', () => {
+        expect(getLegalIdentifier('test', undefined)).toBe('"test"');
+        expect(getLegalIdentifier('test', null)).toBe('"test"');
+        expect(getLegalIdentifier('test', 'alias')).toBe('alias."test"');
+        expect(getLegalIdentifier('test/column', 'alias')).toBe('alias."test"."column"');
+    });
+
+    test('separator', () => {
+        expect(getLegalIdentifier('test', undefined, '.')).toBe('"test"');
+        expect(getLegalIdentifier('test/a/b/c', undefined, '.')).toBe('"test/a/b/c"');
+        expect(getLegalIdentifier('test.a.b.c', undefined, '.')).toBe('"test"."a"."b"."c"');
+    });
+});

packages/components/src/internal/query/filter.test.ts

@@ -68,8 +68,12 @@ export function isEqual(first: List<Filter.IFilter>, second: List<Filter.IFilter
     return isEqual;
 }
 
-export function getLegalIdentifier(columnName: string, tableAlias?: string): string {
-    const columnNameParts = columnName.split('/');
+/**
+ * Make a legal LK SQL identifier from the column name by decoding parts, escaping quotes, and adding table alias if provided.
+ * See usage in ui-premium entities/utils.tsx getLabKeySql()
+ */
+export function getLegalIdentifier(columnName: string, tableAlias?: string, separator = '/'): string {
+    const columnNameParts = columnName.split(separator);
     const formattedParts = [];
     columnNameParts.forEach(part => {
         if (part) {