(
+ '.EnumFacetFilter__count',
+ )
+
+ expect(checkboxes).toHaveLength(4)
+ expect(counts).toHaveLength(3)
+
+ expect(checkboxes[0]).toHaveAccessibleName('All')
+
+ // PORTALS-3252 note: Facet values are reverse sorted! [0] will appear before [1] again
+ expect(checkboxes[1]).toHaveAccessibleName(
+ `${stringFacetValues[0].value}`,
+ )
+ expect(counts[0]).toHaveTextContent(`${stringFacetValues[0].count}`)
+
+ expect(checkboxes[2]).toHaveAccessibleName(
+ `${stringFacetValues[1].value}`,
+ )
+ expect(counts[1]).toHaveTextContent(`${stringFacetValues[1].count}`)
+
+ expect(checkboxes[3]).toHaveAccessibleName(`Not Assigned`)
+ expect(counts[2]).toHaveTextContent(`${stringFacetValues[2].count}`)
+ })
+
it('should set labels correctly for ENTITYID type', async () => {
const entityColumnModel: ColumnModel = {
...columnModel,
diff --git a/packages/synapse-react-client/src/components/widgets/query-filter/EnumFacetFilter/EnumFacetFilter.tsx b/packages/synapse-react-client/src/components/widgets/query-filter/EnumFacetFilter/EnumFacetFilter.tsx
index e9e7ae24da..820b68d91a 100644
--- a/packages/synapse-react-client/src/components/widgets/query-filter/EnumFacetFilter/EnumFacetFilter.tsx
+++ b/packages/synapse-react-client/src/components/widgets/query-filter/EnumFacetFilter/EnumFacetFilter.tsx
@@ -2,6 +2,7 @@ import React, { Suspense, useMemo } from 'react'
import useGetInfoFromIds from '../../../../utils/hooks/useGetInfoFromIds'
import {
ColumnTypeEnum,
+ Direction,
EntityHeader,
Evaluation,
FacetColumnRequest,
@@ -29,6 +30,12 @@ export type EnumFacetFilterProps = {
containerAs?: 'Collapsible' | 'Dropdown'
dropdownType?: 'Icon' | 'SelectBox'
hideCollapsible?: boolean
+ sortConfig?: FacetValueSortConfig
+}
+
+export type FacetValueSortConfig = {
+ columnName: string
+ direction: Direction
}
function _EnumFacetFilter(props: EnumFacetFilterProps) {
@@ -37,6 +44,7 @@ function _EnumFacetFilter(props: EnumFacetFilterProps) {
containerAs = 'Collapsible',
dropdownType = 'Icon',
hideCollapsible = false,
+ sortConfig,
} = props
const {
nextQueryRequest,
@@ -82,6 +90,17 @@ function _EnumFacetFilter(props: EnumFacetFilterProps) {
? getCorrespondingColumnForFacet(facet, queryMetadata.columnModels)
: undefined
+ const isNumberColumnType = useMemo(() => {
+ switch (columnModel?.columnType) {
+ case ColumnTypeEnum.DOUBLE:
+ case ColumnTypeEnum.DATE:
+ case ColumnTypeEnum.INTEGER:
+ return true
+ default:
+ return false
+ }
+ }, [columnModel])
+
const userIds =
columnModel?.columnType === ColumnTypeEnum.USERID ||
columnModel?.columnType === ColumnTypeEnum.USERID_LIST
@@ -137,8 +156,19 @@ function _EnumFacetFilter(props: EnumFacetFilterProps) {
)
const valueNotSetFacetArray = partitions[0]
const restOfFacetValuesArray = partitions[1]
+ let sortedValues: RenderedFacetValue[]
+ if (isNumberColumnType) {
+ sortedValues = sortBy(restOfFacetValuesArray, fv => Number(fv.value))
+ } else {
+ sortedValues = sortBy(restOfFacetValuesArray, fv =>
+ fv.displayText.toLowerCase(),
+ )
+ }
+
+ //PORTALS-3252: provide way to sort in descending order on the client-side
+ const sortDescending = sortConfig && sortConfig.direction == Direction.DESC
return [
- ...sortBy(restOfFacetValuesArray, fv => fv.displayText.toLowerCase()),
+ ...(sortDescending ? sortedValues.reverse() : sortedValues),
...valueNotSetFacetArray,
]
}, [
diff --git a/packages/synapse-react-client/src/components/widgets/query-filter/FacetFilterControls.tsx b/packages/synapse-react-client/src/components/widgets/query-filter/FacetFilterControls.tsx
index 284b029ee0..067f4ca601 100644
--- a/packages/synapse-react-client/src/components/widgets/query-filter/FacetFilterControls.tsx
+++ b/packages/synapse-react-client/src/components/widgets/query-filter/FacetFilterControls.tsx
@@ -13,7 +13,10 @@ import {
QueryBundleRequest,
} from '@sage-bionetworks/synapse-types'
import { useQueryContext } from '../../QueryContext'
-import { EnumFacetFilter } from './EnumFacetFilter/EnumFacetFilter'
+import {
+ EnumFacetFilter,
+ FacetValueSortConfig,
+} from './EnumFacetFilter/EnumFacetFilter'
import { FacetChip } from './FacetChip'
import { RangeFacetFilter } from './RangeFacetFilter'
import { groupBy, noop, sortBy } from 'lodash-es'
@@ -29,6 +32,7 @@ export type FacetFilterControlsProps = {
/* The set of faceted column names that should be shown in the Facet controls. If undefined, all faceted columns with
at least one non-null value will be shown. */
availableFacets?: string[]
+ facetValueSortConfigs?: FacetValueSortConfig[]
}
const convertFacetToFacetColumnValuesRequest = (
@@ -98,7 +102,7 @@ export function applyChangesToValuesColumn(
}
function FacetFilterControls(props: FacetFilterControlsProps) {
- const { availableFacets } = props
+ const { availableFacets, facetValueSortConfigs } = props
const {
getCurrentQueryRequest,
combineRangeFacetConfig,
@@ -226,10 +230,17 @@ function FacetFilterControls(props: FacetFilterControlsProps) {
)}
{shownTopLevelFacets.map(facet => {
const columnModel = getCorrespondingColumnForFacet(facet, columnModels!)
+ const sortConfig = facetValueSortConfigs?.find(
+ config => config.columnName == facet.columnName,
+ )
return (
{facet.facetType === 'enumeration' && columnModel && (
-
+
)}
{facet.facetType === 'range' && columnModel && (