@databiosphere/findable-ui 49.0.0 → 49.2.0

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

@@ -0,0 +1,8 @@
+import { ChatState } from "../types";
+import { InitialArgs } from "./types";
+/**
+ * Initializer function for the chat reducer, returning initial state.
+ * @param initialArgs - Initial arguments.
+ * @returns The initialized chat state.
+ */
+export declare function initializer(initialArgs?: InitialArgs): ChatState;

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

@@ -0,0 +1,22 @@
+import { INITIAL_STATE } from "../constants";
+import { MESSAGE_TYPE } from "../types";
+/**
+ * Initializer function for the chat reducer, returning initial state.
+ * @param initialArgs - Initial arguments.
+ * @returns The initialized chat state.
+ */
+export function initializer(initialArgs) {
+    if (!initialArgs)
+        return INITIAL_STATE;
+    return {
+        ...INITIAL_STATE,
+        messages: [
+            {
+                ...initialArgs,
+                createdAt: Date.now(),
+                initial: true,
+                type: MESSAGE_TYPE.PROMPT,
+            },
+        ],
+    };
+}

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

@@ -0,0 +1,2 @@
+import { AiPrompt } from "../../../../common/ai/config/types";
+export type InitialArgs = AiPrompt;

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

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

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

@@ -0,0 +1,19 @@
+import { JSX, ReactNode } from "react";
+import { InitialArgs } from "./initializer/types";
+/**
+ * Provider for Chat state.
+ * Manages chat state such as query and response data.
+ * Nests QueryProvider to own the fetch lifecycle for query submission.
+ *
+ * @param props - Props.
+ * @param props.children - Children.
+ * @param props.initialArgs - Initial arguments.
+ * @param props.url - URL for the query endpoint.
+ *
+ * @returns A context provider wrapping the given children.
+ */
+export declare function ChatProvider({ children, initialArgs, url, }: {
+    children: ReactNode;
+    initialArgs?: InitialArgs;
+    url: string;
+}): JSX.Element;

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

@@ -0,0 +1,20 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ChatContext } from "./context";
+import { useChatReducer } from "./hooks/UseChatReducer/hook";
+import { QueryProvider } from "./query/provider";
+/**
+ * Provider for Chat state.
+ * Manages chat state such as query and response data.
+ * Nests QueryProvider to own the fetch lifecycle for query submission.
+ *
+ * @param props - Props.
+ * @param props.children - Children.
+ * @param props.initialArgs - Initial arguments.
+ * @param props.url - URL for the query endpoint.
+ *
+ * @returns A context provider wrapping the given children.
+ */
+export function ChatProvider({ children, initialArgs, url, }) {
+    const reducer = useChatReducer(initialArgs);
+    return (_jsx(ChatContext.Provider, { value: reducer, children: _jsx(QueryProvider, { url: url, children: children }) }));
+}

package/lib/views/ResearchView/state/query/context.d.ts

@@ -0,0 +1,5 @@
+import { QueryContextValue } from "./types";
+/**
+ * Context for the query submission provider.
+ */
+export declare const QueryContext: import("react").Context<QueryContextValue>;

package/lib/views/ResearchView/state/query/context.js

@@ -0,0 +1,7 @@
+import { createContext } from "react";
+/**
+ * Context for the query submission provider.
+ */
+export const QueryContext = createContext({
+    onSubmit: () => Promise.resolve(),
+});

package/lib/views/ResearchView/state/query/hooks/UseQuery/hook.d.ts

@@ -0,0 +1,6 @@
+import { QueryContextValue } from "../../types";
+/**
+ * Hook to access query submission from the QueryProvider.
+ * @returns Query context value with onSubmit.
+ */
+export declare const useQuery: () => QueryContextValue;

package/lib/views/ResearchView/state/query/hooks/UseQuery/hook.js

@@ -0,0 +1,9 @@
+import { useContext } from "react";
+import { QueryContext } from "../../context";
+/**
+ * Hook to access query submission from the QueryProvider.
+ * @returns Query context value with onSubmit.
+ */
+export const useQuery = () => {
+    return useContext(QueryContext);
+};

package/lib/views/ResearchView/state/query/hooks/UseSubmit/hook.d.ts

@@ -0,0 +1,7 @@
+import { QueryContextValue } from "../../types";
+/**
+ * Hook that manages query submission and abort lifecycle.
+ * @param url - The API URL to send queries to.
+ * @returns Object containing the onSubmit handler.
+ */
+export declare const useSubmit: (url: string) => Pick<QueryContextValue, "onSubmit">;

package/lib/views/ResearchView/state/query/hooks/UseSubmit/hook.js

@@ -0,0 +1,46 @@
+import { useCallback, useRef } from "react";
+import { fetchResponse } from "../../../../query/fetch";
+import { useChatDispatch } from "../../../hooks/UseChatDispatch/hook";
+/**
+ * Hook that manages query submission and abort lifecycle.
+ * @param url - The API URL to send queries to.
+ * @returns Object containing the onSubmit handler.
+ */
+export const useSubmit = (url) => {
+    const abortRef = useRef(null);
+    const dispatch = useChatDispatch();
+    const onSubmit = useCallback(async (e, payload, options) => {
+        e.preventDefault();
+        if (options.status.loading)
+            return;
+        const { query } = payload;
+        if (!query)
+            return;
+        const form = e.currentTarget;
+        // Dispatch query and loading state.
+        dispatch.onSetQuery(query);
+        dispatch.onSetStatus(true);
+        form.reset();
+        options.onMutate?.(form, query);
+        // Abort any in-flight request.
+        abortRef.current?.abort();
+        const controller = new AbortController();
+        abortRef.current = controller;
+        await fetchResponse(url, query, {
+            controller,
+            onError: (error) => {
+                dispatch.onSetError(error.message);
+                options.onError?.(error);
+            },
+            onSettled: () => {
+                dispatch.onSetStatus(false);
+                options.onSettled?.(form);
+            },
+            onSuccess: (data) => {
+                dispatch.onSetMessage(data);
+                options.onSuccess?.(data);
+            },
+        });
+    }, [dispatch, url]);
+    return { onSubmit };
+};

package/lib/views/ResearchView/state/query/provider.d.ts

@@ -0,0 +1,13 @@
+import { JSX, ReactNode } from "react";
+/**
+ * Provider that owns the fetch lifecycle for query submission.
+ * Persists across page navigation so in-flight requests are not aborted.
+ * @param props - Props.
+ * @param props.children - Children.
+ * @param props.url - URL for the query endpoint.
+ * @returns A context provider wrapping the given children.
+ */
+export declare function QueryProvider({ children, url, }: {
+    children: ReactNode;
+    url: string;
+}): JSX.Element;

package/lib/views/ResearchView/state/query/provider.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { QueryContext } from "./context";
+import { useSubmit } from "./hooks/UseSubmit/hook";
+/**
+ * Provider that owns the fetch lifecycle for query submission.
+ * Persists across page navigation so in-flight requests are not aborted.
+ * @param props - Props.
+ * @param props.children - Children.
+ * @param props.url - URL for the query endpoint.
+ * @returns A context provider wrapping the given children.
+ */
+export function QueryProvider({ children, url, }) {
+    const { onSubmit } = useSubmit(url);
+    return (_jsx(QueryContext.Provider, { value: { onSubmit }, children: children }));
+}

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

@@ -0,0 +1,24 @@
+import { FormEvent } from "react";
+import { Status } from "../types";
+/**
+ * Options for the onSubmit action.
+ */
+export interface OnSubmitOptions {
+    onError?: (error: Error) => void;
+    onMutate?: (form: HTMLFormElement, query: string) => void;
+    onSettled?: (form: HTMLFormElement) => void;
+    onSuccess?: (data: unknown) => void;
+    status: Status;
+}
+/**
+ * Payload for the onSubmit action.
+ */
+export interface OnSubmitPayload {
+    query: string;
+}
+/**
+ * Context value for the QueryProvider.
+ */
+export interface QueryContextValue {
+    onSubmit: (e: FormEvent<HTMLFormElement>, payload: OnSubmitPayload, options: OnSubmitOptions) => Promise<void>;
+}

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

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

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

@@ -0,0 +1,10 @@
+import { ChatAction } from "./actions/types";
+import { ChatState } from "./types";
+/**
+ * Reducer for the Chat state.
+ *
+ * @param state - State.
+ * @param action - Action.
+ * @returns State.
+ */
+export declare function chatReducer(state: ChatState, action: ChatAction): ChatState;

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": "49.0.0",
+  "version": "49.2.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/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/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;
+  }
+`;

package/src/components/common/Chip/components/Beta/beta.tsx

@@ -0,0 +1,25 @@
+import { ChipProps } from "@mui/material";
+import { JSX } from "react";
+import { CHIP_PROPS } from "../../../../../styles/common/mui/chip";
+import { BaseComponentProps } from "../../../../types";
+import { StyledChip } from "./beta.styles";
+
+/**
+ * Beta chip component to indicate features that are in beta.
+ * @param props - Component props.
+ * @param props.className - Classname.
+ * @returns Beta chip JSX element.
+ */
+export const Beta = ({
+  className,
+  ...props
+}: BaseComponentProps & ChipProps): JSX.Element => {
+  return (
+    <StyledChip
+      className={className}
+      label="Beta"
+      size={CHIP_PROPS.SIZE.SMALL}
+      {...props}
+    />
+  );
+};

package/src/components/common/Chip/components/Beta/stories/beta.stories.tsx

@@ -0,0 +1,12 @@
+import type { Meta, StoryObj } from "@storybook/nextjs-vite";
+import { Beta } from "../beta";
+
+const meta: Meta<typeof Beta> = {
+  component: Beta,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const DEFAULT: Story = {};

package/src/components/common/CustomIcon/components/UpArrowIcon/upArrowIcon.tsx

@@ -0,0 +1,21 @@
+import { SvgIcon, SvgIconProps } from "@mui/material";
+import { JSX } from "react";
+
+/**
+ * Custom up arrow icon.
+ */
+
+export const UpArrowIcon = ({
+  fontSize = "xsmall",
+  viewBox = "0 0 18 18",
+  ...props /* SvgIconProps */
+}: SvgIconProps): JSX.Element => {
+  return (
+    <SvgIcon fontSize={fontSize} viewBox={viewBox} {...props}>
+      <path
+        d="M8.24985 6.60005L6.07485 8.77505C5.93735 8.91255 5.76235 8.9813 5.54985 8.9813C5.33735 8.9813 5.16235 8.91255 5.02485 8.77505C4.88735 8.63755 4.8186 8.46255 4.8186 8.25005C4.8186 8.03755 4.88735 7.86255 5.02485 7.72505L8.47485 4.27505C8.62485 4.12505 8.79985 4.05005 8.99985 4.05005C9.19985 4.05005 9.37485 4.12505 9.52485 4.27505L12.9749 7.72505C13.1124 7.86255 13.1811 8.03755 13.1811 8.25005C13.1811 8.46255 13.1124 8.63755 12.9749 8.77505C12.8374 8.91255 12.6624 8.9813 12.4499 8.9813C12.2374 8.9813 12.0624 8.91255 11.9249 8.77505L9.74985 6.60005V12.75C9.74985 12.9625 9.67798 13.1407 9.53423 13.2844C9.39048 13.4282 9.21235 13.5 8.99985 13.5C8.78735 13.5 8.60923 13.4282 8.46548 13.2844C8.32173 13.1407 8.24985 12.9625 8.24985 12.75V6.60005Z"
+        fill="currentColor"
+      />
+    </SvgIcon>
+  );
+};