@databiosphere/findable-ui 48.1.0 → 49.0.0

package/.github/workflows/release-please.yml

@@ -44,28 +44,6 @@ jobs:
         if: ${{ steps.release.outputs.release_created }}
         run: npx tsc
 
-      - name: Debug OIDC Token
-        if: ${{ steps.release.outputs.release_created }}
-        run: |
-          echo "=== OIDC Debug Info ==="
-          echo "Repository: $GITHUB_REPOSITORY"
-          echo "Workflow: $GITHUB_WORKFLOW"
-          echo "Job: $GITHUB_JOB"
-          echo "Run ID: $GITHUB_RUN_ID"
-          echo "Ref: $GITHUB_REF"
-          echo "Token URL available: ${{ env.ACTIONS_ID_TOKEN_REQUEST_URL != '' }}"
-          echo "=== Requesting OIDC token for npm ==="
-          if [ -n "$ACTIONS_ID_TOKEN_REQUEST_URL" ]; then
-            if OIDC_RESPONSE=$(curl -sS -H "Authorization: bearer $ACTIONS_ID_TOKEN_REQUEST_TOKEN" \
-              "$ACTIONS_ID_TOKEN_REQUEST_URL&audience=npm" 2>/dev/null); then
-              echo "✓ OIDC token request succeeded"
-            else
-              echo "✗ Failed to get OIDC token"
-            fi
-          else
-            echo "✗ ACTIONS_ID_TOKEN_REQUEST_URL is not set - id-token permission may be missing"
-          fi
-
       - name: Publish to NPM
         if: ${{ steps.release.outputs.release_created }}
         run: npm publish --provenance --access public

package/.release-please-manifest.json

@@ -1,3 +1,3 @@
 {
-  ".": "48.1.0"
+  ".": "49.0.0"
 }

package/CHANGELOG.md

@@ -1,5 +1,32 @@
 # Changelog
 
+## [49.0.0](https://github.com/DataBiosphere/findable-ui/compare/v48.1.0...v49.0.0) (2026-02-17)
+
+
+### ⚠ BREAKING CHANGES
+
+* chartview: add configurable bar sort order ([#772](https://github.com/DataBiosphere/findable-ui/issues/772)) (#773)
+* remove unused filemanifesttype prop and type definitions from export components ([#767](https://github.com/DataBiosphere/findable-ui/issues/767)) (#768)
+
+### Features
+
+* chartview: add configurable bar sort order ([#772](https://github.com/DataBiosphere/findable-ui/issues/772)) ([#773](https://github.com/DataBiosphere/findable-ui/issues/773)) ([bea776a](https://github.com/DataBiosphere/findable-ui/commit/bea776a987a612d30a0010f29af128946f4aad48))
+
+
+### Bug Fixes
+
+* remove unused filemanifesttype prop and type definitions from export components ([#767](https://github.com/DataBiosphere/findable-ui/issues/767)) ([#768](https://github.com/DataBiosphere/findable-ui/issues/768)) ([4da929f](https://github.com/DataBiosphere/findable-ui/commit/4da929fcfd3acaccdb60f269bbffa8be033fdec3))
+
+
+### Chores
+
+* remove debug code ([#762](https://github.com/DataBiosphere/findable-ui/issues/762)) ([#765](https://github.com/DataBiosphere/findable-ui/issues/765)) ([6a6b8f5](https://github.com/DataBiosphere/findable-ui/commit/6a6b8f5087bf972397fa4104f946b41eae03a0da))
+
+
+### Code Refactoring
+
+* render null instead of empty fragment when hideTabs is true ([#770](https://github.com/DataBiosphere/findable-ui/issues/770)) ([#771](https://github.com/DataBiosphere/findable-ui/issues/771)) ([62733b7](https://github.com/DataBiosphere/findable-ui/commit/62733b7fb271fa6be4a29b7c7d545272a1c3e9ef))
+
 ## [48.1.0](https://github.com/DataBiosphere/findable-ui/compare/v48.0.0...v48.1.0) (2026-01-11)
 
 

package/backend/main.py

@@ -2,7 +2,6 @@ from fastapi import FastAPI
 
 from backend.controllers.facets_controller import router as facets_router
 
-
 app = FastAPI(title="Findable API")
 
 # Register controller(s)

package/lib/common/categories/config/types.d.ts

@@ -1,3 +1,4 @@
+import { Chart } from "../../chart/types";
 import { CategoryKey, DataDictionaryAnnotation, SelectCategoryValueView } from "../../entities";
 import { RangeViewKind } from "../views/range/types";
 import { SelectViewKind } from "../views/select/types";
@@ -23,6 +24,6 @@ export interface RangeCategoryConfig extends CommonCategoryConfig, RangeViewKind
  * Select category config.
  */
 export interface SelectCategoryConfig extends CommonCategoryConfig, SelectViewKind {
-    enableChartView?: boolean;
+    chart?: Chart;
     mapSelectCategoryValue?: (selectCategoryValue: SelectCategoryValueView) => SelectCategoryValueView;
 }

package/lib/common/chart/sort/constants.d.ts

@@ -0,0 +1,5 @@
+import { CHART_SORT, ChartSortFn } from "./types";
+/**
+ * Map of chart sort options to their corresponding sort functions.
+ */
+export declare const CHART_SORT_FN: Record<CHART_SORT, ChartSortFn>;

package/lib/common/chart/sort/constants.js

@@ -0,0 +1,9 @@
+import { sortCategoryValueViewsAlpha, sortCategoryValueViewsCount, } from "../../filters/sort/models/utils";
+import { CHART_SORT } from "./types";
+/**
+ * Map of chart sort options to their corresponding sort functions.
+ */
+export const CHART_SORT_FN = {
+    [CHART_SORT.ALPHA]: sortCategoryValueViewsAlpha,
+    [CHART_SORT.COUNT]: sortCategoryValueViewsCount,
+};

package/lib/common/chart/sort/types.d.ts

@@ -0,0 +1,16 @@
+import { SelectCategoryValueView } from "../../entities";
+/**
+ * Chart sorting options for select categories.
+ */
+export declare enum CHART_SORT {
+    ALPHA = "ALPHA",
+    COUNT = "COUNT"
+}
+/**
+ * Sorting function type for select category values.
+ */
+export type ChartSortFn = (a: SelectCategoryValueView, b: SelectCategoryValueView) => number;
+/**
+ * Chart sort options - either a preset (ALPHA, COUNT) or a custom sort function.
+ */
+export type ChartSortOptions = CHART_SORT | ChartSortFn;

package/lib/common/chart/sort/types.js

@@ -0,0 +1,8 @@
+/**
+ * Chart sorting options for select categories.
+ */
+export var CHART_SORT;
+(function (CHART_SORT) {
+    CHART_SORT["ALPHA"] = "ALPHA";
+    CHART_SORT["COUNT"] = "COUNT";
+})(CHART_SORT || (CHART_SORT = {}));

package/lib/common/chart/sort/utils.d.ts

@@ -0,0 +1,7 @@
+import { ChartSortOptions, ChartSortFn } from "./types";
+/**
+ * Resolves chart sort options to a sorting function.
+ * @param chartSortOptions - Chart sort option (ALPHA, COUNT, or custom function).
+ * @returns Sorting function to use for chart data.
+ */
+export declare function getChartSortFn(chartSortOptions?: ChartSortOptions): ChartSortFn;

package/lib/common/chart/sort/utils.js

@@ -0,0 +1,19 @@
+import { CHART_SORT_FN } from "./constants";
+import { CHART_SORT } from "./types";
+/**
+ * Resolves chart sort options to a sorting function.
+ * @param chartSortOptions - Chart sort option (ALPHA, COUNT, or custom function).
+ * @returns Sorting function to use for chart data.
+ */
+export function getChartSortFn(chartSortOptions) {
+    // Default to COUNT sort if not specified.
+    if (!chartSortOptions) {
+        return CHART_SORT_FN[CHART_SORT.COUNT];
+    }
+    // If it's a custom function, return it directly.
+    if (typeof chartSortOptions === "function") {
+        return chartSortOptions;
+    }
+    // Otherwise, look up the function from the map.
+    return CHART_SORT_FN[chartSortOptions];
+}

package/lib/common/chart/types.d.ts

@@ -0,0 +1,5 @@
+import { ChartSortOptions } from "./sort/types";
+export interface Chart {
+    enable: boolean;
+    sortBy?: ChartSortOptions;
+}

package/lib/common/chart/types.js

@@ -0,0 +1 @@
+export {};

package/lib/common/entities.d.ts

@@ -1,4 +1,5 @@
 import { RowData, TableOptions } from "@tanstack/react-table";
+import { Chart } from "./chart/types";
 /**
  * Model of a value of a metadata class.
  */
@@ -133,7 +134,7 @@ export interface SelectCategoryValueView {
  */
 export interface SelectCategoryView {
     annotation?: DataDictionaryAnnotation;
-    enableChartView?: boolean;
+    chart?: Chart;
     isDisabled?: boolean;
     key: CategoryKey;
     label: string;

package/lib/components/Export/components/DownloadCurlCommand/downloadCurlCommand.d.ts

@@ -1,6 +1,5 @@
 import { JSX, ElementType } from "react";
 import { Filters } from "../../../../common/entities";
-import { FileManifestType } from "../../../../hooks/useFileManifest/common/entities";
 import { FileManifestState } from "../../../../providers/fileManifestState";
 import { FormFacet, ManifestDownloadFormat } from "../../common/entities";
 interface DownloadCurlCommandProps {
@@ -8,7 +7,6 @@ interface DownloadCurlCommandProps {
     DownloadCurlStart: ElementType;
     DownloadCurlSuccess: ElementType;
     fileManifestState: FileManifestState;
-    fileManifestType: FileManifestType;
     fileSummaryFacetName: string;
     filters: Filters;
     formFacet: FormFacet;

package/lib/components/Export/components/ExportToTerra/exportToTerra.d.ts

@@ -1,6 +1,5 @@
 import { JSX, ElementType } from "react";
 import { Filters } from "../../../../common/entities";
-import { FileManifestType } from "../../../../hooks/useFileManifest/common/entities";
 import { FileManifestState } from "../../../../providers/fileManifestState";
 import { FormFacet, ManifestDownloadFormat } from "../../common/entities";
 export interface ExportToTerraProps {
@@ -8,7 +7,6 @@ export interface ExportToTerraProps {
     ExportToTerraStart: ElementType;
     ExportToTerraSuccess: ElementType;
     fileManifestState: FileManifestState;
-    fileManifestType: FileManifestType;
     fileSummaryFacetName: string;
     filters: Filters;
     formFacet: FormFacet;

package/lib/components/Export/components/ManifestDownload/components/ManifestDownloadEntity/manifestDownloadEntity.d.ts

@@ -1,9 +1,7 @@
 import { JSX } from "react";
 import { Filters } from "../../../../../../common/entities";
-import { FileManifestType } from "../../../../../../hooks/useFileManifest/common/entities";
 import { ManifestDownloadFormat } from "../../../../common/entities";
 export interface ManifestDownloadEntityProps {
-    fileManifestType: FileManifestType;
     filters: Filters;
     manifestDownloadFormat?: ManifestDownloadFormat;
     metadataFilters: Filters;

package/lib/components/Export/components/ManifestDownload/manifestDownload.d.ts

@@ -1,11 +1,9 @@
 import { JSX, ElementType } from "react";
 import { Filters } from "../../../../common/entities";
-import { FileManifestType } from "../../../../hooks/useFileManifest/common/entities";
 import { FileManifestState } from "../../../../providers/fileManifestState";
 import { FormFacet, ManifestDownloadFormat } from "../../common/entities";
 export interface ManifestDownloadProps {
     fileManifestState: FileManifestState;
-    fileManifestType: FileManifestType;
     fileSummaryFacetName: string;
     filters: Filters;
     formFacet: FormFacet;

package/lib/components/Filter/components/adapters/tanstack/ColumnFiltersAdapter/utils.js

@@ -145,7 +145,7 @@ function mapColumnToSelectCategoryView(column, filterSort, categoryConfig) {
     const values = mapColumnToSelectCategoryValueView(column, filterSort).map(categoryConfig?.mapSelectCategoryValue || getSelectCategoryValue);
     return {
         annotation: undefined,
-        enableChartView: false,
+        chart: undefined,
         isDisabled,
         key: column.id,
         label: getColumnHeader(column),

package/lib/components/Index/components/EntityView/components/views/ChartView/chartView.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Typography } from "@mui/material";
 import { Fragment } from "react";
+import { getChartSortFn } from "../../../../../../../common/chart/sort/utils";
 import { TYPOGRAPHY_PROPS } from "../../../../../../../styles/common/mui/typography";
 import { Loading, LOADING_PANEL_STYLE, } from "../../../../../../Loading/loading";
 import { StyledToolbar } from "../../../../../../Table/components/TableToolbar/tableToolbar.styles";
@@ -12,5 +13,5 @@ export const ChartView = ({ categoryFilters, entityName, loading, testId, }) =>
     const { chartViewRef, selectCategoryViews, width } = useChartView(categoryFilters);
     if (selectCategoryViews.length === 0)
         return null;
-    return (_jsxs(Fragment, { children: [_jsx(StyledToolbar, { children: _jsx(ViewToggle, {}) }), _jsx(Loading, { appear: false, autoPosition: false, loading: loading, panelStyle: LOADING_PANEL_STYLE.INHERIT }), _jsx(StyledGrid, { "data-testid": testId, ref: chartViewRef, children: selectCategoryViews.map(({ key, label, values }) => (_jsxs(StyledGridPaperSection, { children: [_jsxs(Typography, { variant: TYPOGRAPHY_PROPS.VARIANT.HEADING_SMALL, children: [entityName, " by ", label] }), _jsx(Chart, { selectCategoryValueViews: values, width: width })] }, key))) })] }));
+    return (_jsxs(Fragment, { children: [_jsx(StyledToolbar, { children: _jsx(ViewToggle, {}) }), _jsx(Loading, { appear: false, autoPosition: false, loading: loading, panelStyle: LOADING_PANEL_STYLE.INHERIT }), _jsx(StyledGrid, { "data-testid": testId, ref: chartViewRef, children: selectCategoryViews.map(({ chart, key, label, values }) => (_jsxs(StyledGridPaperSection, { children: [_jsxs(Typography, { variant: TYPOGRAPHY_PROPS.VARIANT.HEADING_SMALL, children: [entityName, " by ", label] }), _jsx(Chart, { selectCategoryValueViews: [...values].sort(getChartSortFn(chart?.sortBy)), width: width })] }, key))) })] }));
 };

package/lib/components/Index/components/EntityView/components/views/ChartView/components/Chart/hooks/UsePlotOptions/hook.js

@@ -1,14 +1,9 @@
 import { useMemo } from "react";
-import { sortCategoryValueViewsCount } from "../../../../../../../../../../../common/filters/sort/models/utils";
 import { getPlotOptions } from "../../barX/plot";
 import { getCategoryTotalCount } from "../../barX/utils";
 export const usePlotOptions = (selectCategoryValueViews, width, barCount) => {
-    // Organise the select category value views (sort and slice) for chart display.
-    const data = selectCategoryValueViews
-        // Sort the category values by count and label.
-        .sort(sortCategoryValueViewsCount)
-        // Slice the category values to the number of bars to display.
-        .slice(0, barCount);
+    // Slice the category values to the number of bars to display.
+    const data = selectCategoryValueViews.slice(0, barCount);
     // Build the plot options.
     const options = useMemo(() => getPlotOptions(data, getCategoryTotalCount(selectCategoryValueViews), width), [data, selectCategoryValueViews, width]);
     return { options };

package/lib/components/Index/components/EntityView/components/views/ChartView/components/Chart/stories/args.js

@@ -12,12 +12,6 @@ export const CHART_ARGS = {
             label: "male",
             selected: false,
         },
-        {
-            count: 240,
-            key: "mixed",
-            label: "mixed",
-            selected: false,
-        },
         {
             count: 78715,
             key: "unknown",
@@ -30,6 +24,12 @@ export const CHART_ARGS = {
             label: "Unspecified",
             selected: false,
         },
+        {
+            count: 240,
+            key: "mixed",
+            label: "mixed",
+            selected: false,
+        },
     ],
     width: 800,
 };
@@ -47,12 +47,6 @@ export const SELECT_CHART_ARGS = {
             label: "male",
             selected: true,
         },
-        {
-            count: 240,
-            key: "mixed",
-            label: "mixed",
-            selected: false,
-        },
         {
             count: 78715,
             key: "unknown",
@@ -65,6 +59,12 @@ export const SELECT_CHART_ARGS = {
             label: "Unspecified",
             selected: true,
         },
+        {
+            count: 240,
+            key: "mixed",
+            label: "mixed",
+            selected: false,
+        },
     ],
     width: 800,
 };

package/lib/components/Index/components/EntityView/components/views/ChartView/stories/args.js

@@ -3,7 +3,7 @@ export const CHART_VIEW_ARGS = {
         {
             categoryViews: [
                 {
-                    enableChartView: true,
+                    chart: { enable: true },
                     key: "biological-sex",
                     label: "Biological Sex",
                     values: [
@@ -40,7 +40,7 @@ export const CHART_VIEW_ARGS = {
                     ],
                 },
                 {
-                    enableChartView: true,
+                    chart: { enable: true },
                     key: "genusSpecies",
                     label: "Genus Species",
                     values: [
@@ -71,7 +71,7 @@ export const CHART_VIEW_ARGS = {
                     ],
                 },
                 {
-                    enableChartView: false,
+                    chart: { enable: false },
                     key: "pairedEnd",
                     label: "Paired End",
                     values: [

package/lib/components/Index/components/EntityView/components/views/ChartView/utils.js

@@ -8,7 +8,7 @@ export function getSelectCategoryViews(categoryFilters) {
     return categoryFilters
         .flatMap(({ categoryViews }) => categoryViews)
         .filter(isSelectCategoryView)
-        .filter(({ enableChartView = true }) => enableChartView)
+        .filter(({ chart }) => chart?.enable !== false)
         .filter(({ values }) => values.length > 0);
 }
 /**

package/lib/hooks/useCategoryFilter.js

@@ -35,7 +35,7 @@ function buildCategoryView(selectCategory, selectCategoryValueViews, categoryCon
     const mapSelectCategoryValue = selectCategoryConfig?.mapSelectCategoryValue || getSelectCategoryValue;
     return {
         annotation: selectCategoryConfig?.annotation,
-        enableChartView: selectCategoryConfig?.enableChartView,
+        chart: selectCategoryConfig?.chart,
         isDisabled: false,
         key: selectCategory.key,
         label: getCategoryLabel(selectCategory.key, selectCategoryConfig),

package/lib/hooks/useFileManifest/common/entities.d.ts

@@ -29,15 +29,6 @@ export interface FileFacet {
     termsByName: TermsByName;
     total: number;
 }
-export declare enum FILE_MANIFEST_TYPE {
-    BULK_DOWNLOAD = "BULK_DOWNLOAD",
-    DOWNLOAD_MANIFEST = "DOWNLOAD_MANIFEST",
-    ENTITY_BULK_DOWNLOAD = "ENTITY_BULK_DOWNLOAD",
-    ENTITY_DOWNLOAD_MANIFEST = "ENTITY_DOWNLOAD_MANIFEST",
-    ENTITY_EXPORT_TO_TERRA = "ENTITY_EXPORT_TO_TERRA",
-    EXPORT_TO_TERRA = "EXPORT_TO_TERRA"
-}
-export type FileManifestType = FILE_MANIFEST_TYPE;
 export type SelectedSearchTermsBySearchKey = Map<CategoryKey, Set<CategoryValueKey>>;
 /**
  * Model of an individual facet value. For example, the term "Homo Sapiens" contained in the facet "Species".

package/lib/hooks/useFileManifest/common/entities.js

@@ -1,9 +1 @@
-export var FILE_MANIFEST_TYPE;
-(function (FILE_MANIFEST_TYPE) {
-    FILE_MANIFEST_TYPE["BULK_DOWNLOAD"] = "BULK_DOWNLOAD";
-    FILE_MANIFEST_TYPE["DOWNLOAD_MANIFEST"] = "DOWNLOAD_MANIFEST";
-    FILE_MANIFEST_TYPE["ENTITY_BULK_DOWNLOAD"] = "ENTITY_BULK_DOWNLOAD";
-    FILE_MANIFEST_TYPE["ENTITY_DOWNLOAD_MANIFEST"] = "ENTITY_DOWNLOAD_MANIFEST";
-    FILE_MANIFEST_TYPE["ENTITY_EXPORT_TO_TERRA"] = "ENTITY_EXPORT_TO_TERRA";
-    FILE_MANIFEST_TYPE["EXPORT_TO_TERRA"] = "EXPORT_TO_TERRA";
-})(FILE_MANIFEST_TYPE || (FILE_MANIFEST_TYPE = {}));
+export {};

package/lib/views/EntityDetailView/entityDetailView.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import Head from "next/head";
 import { useRouter } from "next/router";
 import { Fragment } from "react";
@@ -48,5 +48,5 @@ export const EntityDetailView = (props) => {
     const onTabChange = (tabValue) => {
         push(`/${entityRoute}/${uuid}/${tabValue}`);
     };
-    return (_jsxs(Fragment, { children: [title && (_jsx(Head, { children: _jsx("title", { children: title }) })), _jsx(DetailView, { isDetailOverview: isDetailOverview, mainColumn: _jsx(ComponentCreator, { components: mainColumn, response: response }), sideColumn: sideColumn ? (_jsx(ComponentCreator, { components: sideColumn, response: response })) : undefined, Tabs: hideTabs ? (_jsx(_Fragment, {})) : (_jsx(Tabs, { onTabChange: onTabChange, tabs: tabs, value: tabRoute })), top: _jsx(ComponentCreator, { components: top, response: response }) })] }));
+    return (_jsxs(Fragment, { children: [title && (_jsx(Head, { children: _jsx("title", { children: title }) })), _jsx(DetailView, { isDetailOverview: isDetailOverview, mainColumn: _jsx(ComponentCreator, { components: mainColumn, response: response }), sideColumn: sideColumn ? (_jsx(ComponentCreator, { components: sideColumn, response: response })) : undefined, Tabs: hideTabs ? null : (_jsx(Tabs, { onTabChange: onTabChange, tabs: tabs, value: tabRoute })), top: _jsx(ComponentCreator, { components: top, response: response }) })] }));
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@databiosphere/findable-ui",
-  "version": "48.1.0",
+  "version": "49.0.0",
   "description": "",
   "scripts": {
     "test": "node --experimental-vm-modules node_modules/jest/bin/jest.js",

package/src/common/categories/config/types.ts

@@ -1,3 +1,4 @@
+import { Chart } from "../../chart/types";
 import {
   CategoryKey,
   DataDictionaryAnnotation,
@@ -33,7 +34,7 @@ export interface RangeCategoryConfig
  */
 export interface SelectCategoryConfig
   extends CommonCategoryConfig, SelectViewKind {
-  enableChartView?: boolean;
+  chart?: Chart;
   mapSelectCategoryValue?: (
     selectCategoryValue: SelectCategoryValueView,
   ) => SelectCategoryValueView;

package/src/common/chart/sort/constants.ts

@@ -0,0 +1,13 @@
+import {
+  sortCategoryValueViewsAlpha,
+  sortCategoryValueViewsCount,
+} from "../../filters/sort/models/utils";
+import { CHART_SORT, ChartSortFn } from "./types";
+
+/**
+ * Map of chart sort options to their corresponding sort functions.
+ */
+export const CHART_SORT_FN: Record<CHART_SORT, ChartSortFn> = {
+  [CHART_SORT.ALPHA]: sortCategoryValueViewsAlpha,
+  [CHART_SORT.COUNT]: sortCategoryValueViewsCount,
+};

package/src/common/chart/sort/types.ts

@@ -0,0 +1,22 @@
+import { SelectCategoryValueView } from "../../entities";
+
+/**
+ * Chart sorting options for select categories.
+ */
+export enum CHART_SORT {
+  ALPHA = "ALPHA",
+  COUNT = "COUNT",
+}
+
+/**
+ * Sorting function type for select category values.
+ */
+export type ChartSortFn = (
+  a: SelectCategoryValueView,
+  b: SelectCategoryValueView,
+) => number;
+
+/**
+ * Chart sort options - either a preset (ALPHA, COUNT) or a custom sort function.
+ */
+export type ChartSortOptions = CHART_SORT | ChartSortFn;

package/src/common/chart/sort/utils.ts

@@ -0,0 +1,22 @@
+import { CHART_SORT_FN } from "./constants";
+import { CHART_SORT, ChartSortOptions, ChartSortFn } from "./types";
+
+/**
+ * Resolves chart sort options to a sorting function.
+ * @param chartSortOptions - Chart sort option (ALPHA, COUNT, or custom function).
+ * @returns Sorting function to use for chart data.
+ */
+export function getChartSortFn(
+  chartSortOptions?: ChartSortOptions,
+): ChartSortFn {
+  // Default to COUNT sort if not specified.
+  if (!chartSortOptions) {
+    return CHART_SORT_FN[CHART_SORT.COUNT];
+  }
+  // If it's a custom function, return it directly.
+  if (typeof chartSortOptions === "function") {
+    return chartSortOptions;
+  }
+  // Otherwise, look up the function from the map.
+  return CHART_SORT_FN[chartSortOptions];
+}

package/src/common/chart/types.ts

@@ -0,0 +1,6 @@
+import { ChartSortOptions } from "./sort/types";
+
+export interface Chart {
+  enable: boolean;
+  sortBy?: ChartSortOptions;
+}

package/src/common/entities.ts

@@ -1,4 +1,5 @@
 import { RowData, TableOptions } from "@tanstack/react-table";
+import { Chart } from "./chart/types";
 
 /**
  * Model of a value of a metadata class.
@@ -152,7 +153,7 @@ export interface SelectCategoryValueView {
  */
 export interface SelectCategoryView {
   annotation?: DataDictionaryAnnotation;
-  enableChartView?: boolean;
+  chart?: Chart;
   isDisabled?: boolean;
   key: CategoryKey;
   label: string;

package/src/components/Export/components/DownloadCurlCommand/downloadCurlCommand.tsx

@@ -2,7 +2,6 @@ import { JSX, ElementType, useState } from "react";
 import { MANIFEST_DOWNLOAD_FORMAT } from "../../../../apis/azul/common/entities";
 import { Filters } from "../../../../common/entities";
 import { useExploreState } from "../../../../hooks/useExploreState";
-import { FileManifestType } from "../../../../hooks/useFileManifest/common/entities";
 import { useFileManifest } from "../../../../hooks/useFileManifest/useFileManifest";
 import { useFileManifestFileCount } from "../../../../hooks/useFileManifest/useFileManifestFileCount";
 import {
@@ -26,7 +25,6 @@ interface DownloadCurlCommandProps {
   DownloadCurlStart: ElementType;
   DownloadCurlSuccess: ElementType;
   fileManifestState: FileManifestState;
-  fileManifestType: FileManifestType;
   fileSummaryFacetName: string;
   filters: Filters; // Initializes bulk download filters.
   formFacet: FormFacet;

package/src/components/Export/components/ExportToTerra/exportToTerra.tsx

@@ -2,7 +2,6 @@ import { JSX, ElementType } from "react";
 import { Filters } from "../../../../common/entities";
 import { useExploreState } from "../../../../hooks/useExploreState";
 import { useExportToTerraResponseURL } from "../../../../hooks/useExportToTerraResponseURL";
-import { FileManifestType } from "../../../../hooks/useFileManifest/common/entities";
 import { useFileManifest } from "../../../../hooks/useFileManifest/useFileManifest";
 import { useFileManifestFileCount } from "../../../../hooks/useFileManifest/useFileManifestFileCount";
 import { useFileManifestFormat } from "../../../../hooks/useFileManifest/useFileManifestFormat";
@@ -19,7 +18,6 @@ export interface ExportToTerraProps {
   ExportToTerraStart: ElementType;
   ExportToTerraSuccess: ElementType;
   fileManifestState: FileManifestState;
-  fileManifestType: FileManifestType;
   fileSummaryFacetName: string;
   filters: Filters; // Initializes export to terra filters.
   formFacet: FormFacet;

package/src/components/Export/components/ManifestDownload/components/ManifestDownloadEntity/manifestDownloadEntity.tsx

@@ -1,13 +1,11 @@
 import { JSX } from "react";
 import { Filters } from "../../../../../../common/entities";
-import { FileManifestType } from "../../../../../../hooks/useFileManifest/common/entities";
 import { useFileManifest } from "../../../../../../hooks/useFileManifest/useFileManifest";
 import { ManifestDownloadFormat } from "../../../../common/entities";
 import { FileManifestDownload } from "./components/FileManifestDownload/fileManifestDownload";
 import { FileManifestSpreadsheet } from "./components/FileManifestSpreadsheet/fileManifestSpreadsheet";
 
 export interface ManifestDownloadEntityProps {
-  fileManifestType: FileManifestType;
   filters: Filters; // Initializes manifest download filters.
   manifestDownloadFormat?: ManifestDownloadFormat;
   metadataFilters: Filters; // Metadata filters filters.

package/src/components/Export/components/ManifestDownload/manifestDownload.tsx

@@ -2,7 +2,6 @@ import { JSX, ElementType } from "react";
 import { MANIFEST_DOWNLOAD_FORMAT } from "../../../../apis/azul/common/entities";
 import { Filters } from "../../../../common/entities";
 import { useExploreState } from "../../../../hooks/useExploreState";
-import { FileManifestType } from "../../../../hooks/useFileManifest/common/entities";
 import { useFileManifest } from "../../../../hooks/useFileManifest/useFileManifest";
 import { useFileManifestFileCount } from "../../../../hooks/useFileManifest/useFileManifestFileCount";
 import {
@@ -18,7 +17,6 @@ import { ManifestDownloadReady } from "./components/ManifestDownloadReady/manife
 
 export interface ManifestDownloadProps {
   fileManifestState: FileManifestState;
-  fileManifestType: FileManifestType;
   fileSummaryFacetName: string;
   filters: Filters; // Initializes manifest download filters.
   formFacet: FormFacet;

package/src/components/Filter/components/adapters/tanstack/ColumnFiltersAdapter/utils.ts

@@ -221,7 +221,7 @@ function mapColumnToSelectCategoryView<T extends RowData>(
   );
   return {
     annotation: undefined,
-    enableChartView: false,
+    chart: undefined,
     isDisabled,
     key: column.id,
     label: getColumnHeader(column),

package/src/components/Index/components/EntityView/components/views/ChartView/chartView.tsx

@@ -1,5 +1,6 @@
 import { Typography } from "@mui/material";
 import { Fragment, JSX } from "react";
+import { getChartSortFn } from "../../../../../../../common/chart/sort/utils";
 import { TYPOGRAPHY_PROPS } from "../../../../../../../styles/common/mui/typography";
 import {
   Loading,
@@ -33,12 +34,17 @@ export const ChartView = ({
         panelStyle={LOADING_PANEL_STYLE.INHERIT}
       />
       <StyledGrid data-testid={testId} ref={chartViewRef}>
-        {selectCategoryViews.map(({ key, label, values }) => (
+        {selectCategoryViews.map(({ chart, key, label, values }) => (
           <StyledGridPaperSection key={key}>
             <Typography variant={TYPOGRAPHY_PROPS.VARIANT.HEADING_SMALL}>
               {entityName} by {label}
             </Typography>
-            <Chart selectCategoryValueViews={values} width={width} />
+            <Chart
+              selectCategoryValueViews={[...values].sort(
+                getChartSortFn(chart?.sortBy),
+              )}
+              width={width}
+            />
           </StyledGridPaperSection>
         ))}
       </StyledGrid>

package/src/components/Index/components/EntityView/components/views/ChartView/components/Chart/hooks/UsePlotOptions/hook.ts

@@ -1,6 +1,5 @@
 import { useMemo } from "react";
 import { SelectCategoryValueView } from "../../../../../../../../../../../common/entities";
-import { sortCategoryValueViewsCount } from "../../../../../../../../../../../common/filters/sort/models/utils";
 import { getPlotOptions } from "../../barX/plot";
 import { getCategoryTotalCount } from "../../barX/utils";
 import { UsePlotOptions } from "./types";
@@ -10,12 +9,8 @@ export const usePlotOptions = (
   width: number,
   barCount: number | undefined,
 ): UsePlotOptions => {
-  // Organise the select category value views (sort and slice) for chart display.
-  const data = selectCategoryValueViews
-    // Sort the category values by count and label.
-    .sort(sortCategoryValueViewsCount)
-    // Slice the category values to the number of bars to display.
-    .slice(0, barCount);
+  // Slice the category values to the number of bars to display.
+  const data = selectCategoryValueViews.slice(0, barCount);
 
   // Build the plot options.
   const options = useMemo(

package/src/components/Index/components/EntityView/components/views/ChartView/components/Chart/stories/args.ts

@@ -15,12 +15,6 @@ export const CHART_ARGS: ComponentProps<typeof Chart> = {
       label: "male",
       selected: false,
     },
-    {
-      count: 240,
-      key: "mixed",
-      label: "mixed",
-      selected: false,
-    },
     {
       count: 78715,
       key: "unknown",
@@ -33,6 +27,12 @@ export const CHART_ARGS: ComponentProps<typeof Chart> = {
       label: "Unspecified",
       selected: false,
     },
+    {
+      count: 240,
+      key: "mixed",
+      label: "mixed",
+      selected: false,
+    },
   ],
   width: 800,
 };
@@ -51,12 +51,6 @@ export const SELECT_CHART_ARGS: ComponentProps<typeof Chart> = {
       label: "male",
       selected: true,
     },
-    {
-      count: 240,
-      key: "mixed",
-      label: "mixed",
-      selected: false,
-    },
     {
       count: 78715,
       key: "unknown",
@@ -69,6 +63,12 @@ export const SELECT_CHART_ARGS: ComponentProps<typeof Chart> = {
       label: "Unspecified",
       selected: true,
     },
+    {
+      count: 240,
+      key: "mixed",
+      label: "mixed",
+      selected: false,
+    },
   ],
   width: 800,
 };

package/src/components/Index/components/EntityView/components/views/ChartView/stories/args.ts

@@ -6,7 +6,7 @@ export const CHART_VIEW_ARGS: ComponentProps<typeof ChartView> = {
     {
       categoryViews: [
         {
-          enableChartView: true,
+          chart: { enable: true },
           key: "biological-sex",
           label: "Biological Sex",
           values: [
@@ -43,7 +43,7 @@ export const CHART_VIEW_ARGS: ComponentProps<typeof ChartView> = {
           ],
         },
         {
-          enableChartView: true,
+          chart: { enable: true },
           key: "genusSpecies",
           label: "Genus Species",
           values: [
@@ -74,7 +74,7 @@ export const CHART_VIEW_ARGS: ComponentProps<typeof ChartView> = {
           ],
         },
         {
-          enableChartView: false,
+          chart: { enable: false },
           key: "pairedEnd",
           label: "Paired End",
           values: [

package/src/components/Index/components/EntityView/components/views/ChartView/utils.ts

@@ -13,7 +13,7 @@ export function getSelectCategoryViews(
   return categoryFilters
     .flatMap(({ categoryViews }) => categoryViews)
     .filter(isSelectCategoryView)
-    .filter(({ enableChartView = true }) => enableChartView)
+    .filter(({ chart }) => chart?.enable !== false)
     .filter(({ values }) => values.length > 0);
 }
 

package/src/hooks/useCategoryFilter.ts

@@ -83,7 +83,7 @@ function buildCategoryView(
     selectCategoryConfig?.mapSelectCategoryValue || getSelectCategoryValue;
   return {
     annotation: selectCategoryConfig?.annotation,
-    enableChartView: selectCategoryConfig?.enableChartView,
+    chart: selectCategoryConfig?.chart,
     isDisabled: false,
     key: selectCategory.key,
     label: getCategoryLabel(selectCategory.key, selectCategoryConfig),

package/src/hooks/useFileManifest/common/entities.ts

@@ -34,17 +34,6 @@ export interface FileFacet {
   total: number;
 }
 
-export enum FILE_MANIFEST_TYPE {
-  BULK_DOWNLOAD = "BULK_DOWNLOAD",
-  DOWNLOAD_MANIFEST = "DOWNLOAD_MANIFEST",
-  ENTITY_BULK_DOWNLOAD = "ENTITY_BULK_DOWNLOAD",
-  ENTITY_DOWNLOAD_MANIFEST = "ENTITY_DOWNLOAD_MANIFEST",
-  ENTITY_EXPORT_TO_TERRA = "ENTITY_EXPORT_TO_TERRA",
-  EXPORT_TO_TERRA = "EXPORT_TO_TERRA",
-}
-
-export type FileManifestType = FILE_MANIFEST_TYPE;
-
 export type SelectedSearchTermsBySearchKey = Map<
   CategoryKey,
   Set<CategoryValueKey>

package/src/views/EntityDetailView/entityDetailView.tsx

@@ -79,9 +79,7 @@ export const EntityDetailView = (props: EntityDetailViewProps): JSX.Element => {
           ) : undefined
         }
         Tabs={
-          hideTabs ? (
-            <></>
-          ) : (
+          hideTabs ? null : (
             <Tabs onTabChange={onTabChange} tabs={tabs} value={tabRoute} />
           )
         }

package/tests/chartSortUtils.test.ts

@@ -0,0 +1,119 @@
+import { CHART_SORT_FN } from "../src/common/chart/sort/constants";
+import { CHART_SORT, ChartSortFn } from "../src/common/chart/sort/types";
+import { getChartSortFn } from "../src/common/chart/sort/utils";
+import { SelectCategoryValueView } from "../src/common/entities";
+import {
+  sortCategoryValueViewsAlpha,
+  sortCategoryValueViewsCount,
+} from "../src/common/filters/sort/models/utils";
+
+/**
+ * Creates a mock category value view for testing.
+ * @param key - The key for the category value.
+ * @param count - The count for the category value.
+ * @returns A mock SelectCategoryValueView.
+ */
+const createMockCategoryValueView = (
+  key: unknown,
+  count: number,
+): SelectCategoryValueView => ({
+  count,
+  key,
+  label: key ? String(key) : "",
+  selected: false,
+});
+
+describe("Chart Sort Utils", () => {
+  describe("CHART_SORT_FN", () => {
+    it("maps CHART_SORT.ALPHA to sortCategoryValueViewsAlpha", () => {
+      expect(CHART_SORT_FN[CHART_SORT.ALPHA]).toBe(sortCategoryValueViewsAlpha);
+    });
+
+    it("maps CHART_SORT.COUNT to sortCategoryValueViewsCount", () => {
+      expect(CHART_SORT_FN[CHART_SORT.COUNT]).toBe(sortCategoryValueViewsCount);
+    });
+  });
+
+  describe("getChartSortFn", () => {
+    it("returns COUNT sort function when undefined", () => {
+      const sortFn = getChartSortFn(undefined);
+      expect(sortFn).toBe(sortCategoryValueViewsCount);
+    });
+
+    it("returns ALPHA sort function for CHART_SORT.ALPHA", () => {
+      const sortFn = getChartSortFn(CHART_SORT.ALPHA);
+      expect(sortFn).toBe(sortCategoryValueViewsAlpha);
+    });
+
+    it("returns COUNT sort function for CHART_SORT.COUNT", () => {
+      const sortFn = getChartSortFn(CHART_SORT.COUNT);
+      expect(sortFn).toBe(sortCategoryValueViewsCount);
+    });
+
+    it("returns custom function when provided", () => {
+      const customSortFn: ChartSortFn = (a, b) =>
+        a.label.localeCompare(b.label);
+      const sortFn = getChartSortFn(customSortFn);
+      expect(sortFn).toBe(customSortFn);
+    });
+
+    it("custom sort function works correctly", () => {
+      // Custom sort: by label length descending
+      const customSortFn: ChartSortFn = (a, b) =>
+        b.label.length - a.label.length;
+      const sortFn = getChartSortFn(customSortFn);
+
+      const data = [
+        createMockCategoryValueView("a", 10),
+        createMockCategoryValueView("abc", 5),
+        createMockCategoryValueView("ab", 3),
+      ];
+
+      const sorted = [...data].sort(sortFn);
+
+      expect(sorted.map((cv) => cv.label)).toEqual(["abc", "ab", "a"]);
+    });
+  });
+
+  describe("sorting integration", () => {
+    const testData = [
+      createMockCategoryValueView("Zebra", 5),
+      createMockCategoryValueView("Apple", 10),
+      createMockCategoryValueView("Banana", 3),
+    ];
+
+    it("sorts alphabetically with CHART_SORT.ALPHA", () => {
+      const sortFn = getChartSortFn(CHART_SORT.ALPHA);
+      const sorted = [...testData].sort(sortFn);
+
+      expect(sorted.map((cv) => cv.label)).toEqual([
+        "Apple",
+        "Banana",
+        "Zebra",
+      ]);
+    });
+
+    it("sorts by count descending with CHART_SORT.COUNT", () => {
+      const sortFn = getChartSortFn(CHART_SORT.COUNT);
+      const sorted = [...testData].sort(sortFn);
+
+      expect(sorted.map((cv) => cv.label)).toEqual([
+        "Apple",
+        "Zebra",
+        "Banana",
+      ]);
+      expect(sorted.map((cv) => cv.count)).toEqual([10, 5, 3]);
+    });
+
+    it("defaults to count sort when no option provided", () => {
+      const sortFn = getChartSortFn();
+      const sorted = [...testData].sort(sortFn);
+
+      expect(sorted.map((cv) => cv.label)).toEqual([
+        "Apple",
+        "Zebra",
+        "Banana",
+      ]);
+    });
+  });
+});