@databiosphere/findable-ui 48.1.0 → 49.1.0

package/lib/views/ResearchView/state/reducer.js

@@ -0,0 +1,32 @@
+import { setErrorAction } from "./actions/setError/action";
+import { setMessageAction } from "./actions/setMessage/action";
+import { setQueryAction } from "./actions/setQuery/action";
+import { setStatusAction } from "./actions/setStatus/action";
+import { ChatActionKind } from "./actions/types";
+/**
+ * Reducer for the Chat state.
+ *
+ * @param state - State.
+ * @param action - Action.
+ * @returns State.
+ */
+export function chatReducer(state, action) {
+    const { payload, type } = action;
+    switch (type) {
+        case ChatActionKind.SetError: {
+            return setErrorAction(state, payload);
+        }
+        case ChatActionKind.SetMessage: {
+            return setMessageAction(state, payload);
+        }
+        case ChatActionKind.SetQuery: {
+            return setQueryAction(state, payload);
+        }
+        case ChatActionKind.SetStatus: {
+            return setStatusAction(state, payload);
+        }
+        default: {
+            return state;
+        }
+    }
+}

package/lib/views/ResearchView/state/types.d.ts

@@ -0,0 +1,125 @@
+import { Dispatch } from "react";
+import { ChatAction } from "./actions/types";
+/**
+ * Assistant message in the chat.
+ */
+export interface AssistantMessage<R extends MessageResponse = MessageResponse> extends BaseMessage {
+    response: R;
+    type: MESSAGE_TYPE.ASSISTANT;
+}
+/**
+ * Base message type for chat messages.
+ */
+export interface BaseMessage {
+    createdAt: number;
+}
+/**
+ * Context value for the Chat state provider.
+ */
+export interface ChatContextValue {
+    dispatch: Dispatch<ChatAction>;
+    state: ChatState;
+}
+/**
+ * State for the Chat feature.
+ */
+export interface ChatState {
+    messages: Message[];
+    status: Status;
+}
+/**
+ * Error message in the chat.
+ */
+export interface ErrorMessage extends BaseMessage {
+    error: string;
+    type: MESSAGE_TYPE.ERROR;
+}
+/**
+ * Intent values for the research API response.
+ */
+export declare const INTENT: {
+    readonly AUTO: "auto";
+};
+/**
+ * Intent type for the research API response.
+ */
+export type Intent = (typeof INTENT)[keyof typeof INTENT] | (string & {});
+/**
+ * Union type for messages in the chat.
+ */
+export type Message<R extends MessageResponse = MessageResponse> = AssistantMessage<R> | ErrorMessage | PromptMessage | UserMessage;
+/**
+ * Message types for the chat.
+ */
+export declare enum MESSAGE_TYPE {
+    ASSISTANT = "ASSISTANT",
+    ERROR = "ERROR",
+    PROMPT = "PROMPT",
+    USER = "USER"
+}
+/**
+ * Mention extracted from the user query.
+ */
+export interface Mention {
+    exclude: boolean;
+    facet: string;
+    originalText: string;
+    values: string[];
+}
+/**
+ * Response from the research API.
+ */
+export interface MessageResponse {
+    intent: Intent;
+    message: string | null;
+    query: {
+        mentions: Mention[];
+        message: string | null;
+    };
+    timing: {
+        lookupMs: number;
+        pipelineMs: number;
+        totalMs: number;
+    };
+}
+/**
+ * Prompt message in the chat, initiated by the system.
+ */
+export interface PromptMessage extends BaseMessage {
+    initial?: boolean;
+    inputPlaceholder?: string;
+    suggestions?: PromptSuggestion[];
+    text: string;
+    type: MESSAGE_TYPE.PROMPT;
+}
+/**
+ * Suggestion within a prompt message.
+ */
+export interface PromptSuggestion {
+    label: string;
+    query: string;
+    variant: SuggestionVariant;
+}
+/**
+ * Status of the chat interaction, such as loading state.
+ */
+export interface Status {
+    loading: boolean;
+}
+/**
+ * Suggestion variant values for rendering suggestions.
+ */
+export declare const SUGGESTION_VARIANT: {
+    readonly CHIP: "CHIP";
+};
+/**
+ * Suggestion variant type.
+ */
+export type SuggestionVariant = (typeof SUGGESTION_VARIANT)[keyof typeof SUGGESTION_VARIANT];
+/**
+ * User message in the chat.
+ */
+export interface UserMessage extends BaseMessage {
+    text: string;
+    type: MESSAGE_TYPE.USER;
+}

package/lib/views/ResearchView/state/types.js

@@ -0,0 +1,22 @@
+/**
+ * Intent values for the research API response.
+ */
+export const INTENT = {
+    AUTO: "auto",
+};
+/**
+ * Message types for the chat.
+ */
+export var MESSAGE_TYPE;
+(function (MESSAGE_TYPE) {
+    MESSAGE_TYPE["ASSISTANT"] = "ASSISTANT";
+    MESSAGE_TYPE["ERROR"] = "ERROR";
+    MESSAGE_TYPE["PROMPT"] = "PROMPT";
+    MESSAGE_TYPE["USER"] = "USER";
+})(MESSAGE_TYPE || (MESSAGE_TYPE = {}));
+/**
+ * Suggestion variant values for rendering suggestions.
+ */
+export const SUGGESTION_VARIANT = {
+    CHIP: "CHIP",
+};

package/package.json

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

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

@@ -0,0 +1,25 @@
+/**
+ * AI configuration.
+ */
+export interface AiConfig {
+  enabled: boolean;
+  prompt?: AiPrompt;
+  routes: {
+    research: string;
+    search: string;
+  };
+  url: string;
+}
+
+export interface AiPrompt {
+  inputPlaceholder?: string;
+  suggestions?: AiSuggestions[];
+  text: string;
+}
+
+export interface AiSuggestions {
+  label: string;
+  query: string;
+  // For now, we only have one variant, but this allows for future expansion.
+  variant: "CHIP";
+}

package/src/common/ai/constants.ts

@@ -0,0 +1,3 @@
+export const FEATURE_FLAG = {
+  CHAT: "chat",
+} as const;

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/FilterLabel/filterLabel.stories.tsx

@@ -5,6 +5,7 @@ import { FilterLabel } from "./filterLabel";
 
 const meta = {
   argTypes: {
+    annotation: { control: "object" },
     count: { control: "number" },
     disabled: { control: "boolean" },
     isOpen: { control: "boolean" },
@@ -27,6 +28,11 @@ type Story = StoryObj<typeof meta>;
 
 export const FilterLabelStory: Story = {
   args: {
+    annotation: {
+      description:
+        "This is a description of the filter label that provides additional context to the user.",
+      label: "Label",
+    },
     count: 123,
     disabled: false,
     isOpen: false,

package/src/components/Filter/components/FilterLabel/filterLabel.tsx

@@ -26,7 +26,12 @@ export const FilterLabel = ({
 }: FilterLabelProps): JSX.Element => {
   const filterLabel = count ? `${label}\xa0(${count})` : label; // When the count is present, a non-breaking space is used to prevent it from being on its own line
   return (
-    <Tooltip description={annotation?.description} title={annotation?.label}>
+    <Tooltip
+      description={annotation?.description}
+      enterDelay={300}
+      placement="right"
+      title={annotation?.label}
+    >
       <StyledButton
         color="inherit"
         disabled={disabled}

package/src/components/Filter/components/Filters/stories/constants.ts

@@ -105,6 +105,11 @@ const PROCESSED = {
  * Biological Sex select category view
  */
 export const BIOLOGICAL_SEX: SelectCategoryView = {
+  annotation: {
+    description:
+      "The biological sex of the donor organism, typically determined by chromosomal composition.",
+    label: "Biological Sex",
+  },
   key: "biologicalSex",
   label: "Biological Sex",
   values: [MALE, FEMALE],
@@ -114,6 +119,11 @@ export const BIOLOGICAL_SEX: SelectCategoryView = {
  * Genus Species select category view
  */
 export const GENUS_SPECIES: SelectCategoryView = {
+  annotation: {
+    description:
+      "The scientific name of the organism from which the sample was derived.",
+    label: "Genus Species",
+  },
   key: "genusSpecies",
   label: "Genus Species",
   values: [HOMO_SAPIENS, MUS_MUSCLES],
@@ -123,7 +133,11 @@ export const GENUS_SPECIES: SelectCategoryView = {
  * Donor Count range category view
  */
 export const DONOR_COUNT: RangeCategoryView = {
-  key: "Donor Count",
+  annotation: {
+    description: "The number of unique donors contributing to the dataset.",
+    label: "Donor Count",
+  },
+  key: "donorCount",
   label: "Donor Count",
   max: 200,
   min: 10,
@@ -135,6 +149,11 @@ export const DONOR_COUNT: RangeCategoryView = {
  * File Format select category view
  */
 export const FILE_FORMAT: SelectCategoryView = {
+  annotation: {
+    description:
+      "The format of the file, such as BAM, CSV, FASTQ, or TSV, indicating how the data is structured.",
+    label: "File Format",
+  },
   key: "fileFormat",
   label: "File Format",
   values: [BAM, CSV, FASTQ, TSV],
@@ -144,6 +163,11 @@ export const FILE_FORMAT: SelectCategoryView = {
  * File Type select category view
  */
 export const FILE_TYPE: SelectCategoryView = {
+  annotation: {
+    description:
+      "The type of file, indicating whether the data is raw or has been processed.",
+    label: "File Type",
+  },
   isDisabled: true,
   key: "fileType",
   label: "File Type",

package/src/components/Filter/components/SearchAllFilters/searchAllFilters.styles.ts

@@ -3,6 +3,8 @@ import { Autocomplete } from "@mui/material";
 
 export const StyledAutocomplete = styled(Autocomplete)`
   &.MuiAutocomplete-root {
+    grid-column: 1 / -1;
+
     .MuiOutlinedInput-root {
       padding: 0 12px;
 

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/components/Layout/components/Sidebar/components/SidebarTools/sidebarTools.styles.ts

@@ -1,6 +1,10 @@
 import styled from "@emotion/styled";
 import { bpUpMd } from "../../../../../../styles/common/mixins/breakpoints";
 
+/**
+ * Container for sidebar tools, including the mode toggle and filter controls.
+ * @deprecated - This styled component is deprecated and will be removed in a future release.
+ */
 export const SidebarTools = styled.div`
   display: grid;
   gap: 8px 0;

package/src/components/common/Chip/components/Beta/beta.styles.ts

@@ -0,0 +1,15 @@
+import styled from "@emotion/styled";
+import { Chip } from "@mui/material";
+import { PALETTE } from "../../../../../styles/common/constants/palette";
+import { FONT } from "../../../../../styles/common/constants/font";
+
+export const StyledChip = styled(Chip)`
+  background-color: ${PALETTE.PRIMARY_LIGHTEST};
+  border-radius: 4px;
+  color: ${PALETTE.PRIMARY_MAIN};
+
+  .MuiChip-label {
+    font: ${FONT.BODY_SMALL_500};
+    padding: 0 5px;
+  }
+`;