@databiosphere/findable-ui 49.0.0 → 49.2.0

package/src/views/ResearchView/assistant/components/Messages/stories/args.ts

@@ -0,0 +1,115 @@
+import { ComponentProps } from "react";
+import { Messages } from "../messages";
+import { AssistantMessage, MESSAGE_TYPE } from "../../../../state/types";
+import { ERROR_MESSAGE } from "../../../../query/constants";
+
+export const ARGS: ComponentProps<typeof Messages> = {
+  state: {
+    messages: [
+      {
+        createdAt: 1771998382830,
+        inputPlaceholder: "Ask about datasets or variables",
+        suggestions: [
+          {
+            label: "GLP-1 effect + smoking in T2D",
+            query:
+              "I'm studying whether smoking modifies the effect of GLP-1 agonists on glycemic control in T2D patients",
+            variant: "CHIP",
+          },
+          {
+            label: "WGS for cardiovascular outcomes",
+            query:
+              "I'm interested in whole genome sequencing data for cardiovascular outcomes",
+            variant: "CHIP",
+          },
+          {
+            label: "RNA-Seq in pancreatic cancer",
+            query: "I'm interested in RNA-Seq data for pancreatic cancer",
+            variant: "CHIP",
+          },
+        ],
+        text: "Hello! I can help you find datasets across 2,944 studies from AnVIL, BDC, CRDC, and KFDRC. Describe your research question and I'll build a structured plan and find matching data.",
+        type: MESSAGE_TYPE.PROMPT,
+      },
+      {
+        createdAt: 1771998382831,
+        text: "I'm studying whether smoking modifies the effect of GLP-1 agonists on glycemic control in T2D patients.",
+        type: MESSAGE_TYPE.USER,
+      },
+      {
+        createdAt: 1771998382832,
+        response: {
+          message:
+            'The exact term "glycemic control" has very low study counts (1 study each). I\'ve mapped it to the most relevant clinical measurements: "Glycated Hemoglobin" (HbA1c, 9 studies) and "Fasting Glucose" (44 studies), which are the standard markers used to assess glycemic control in diabetes management.',
+          query: {
+            mentions: [
+              {
+                exclude: false,
+                facet: "focus",
+                originalText: "type 2 diabetes",
+                values: ["Diabetes Mellitus, Type 2"],
+              },
+              {
+                exclude: false,
+                facet: "measurement",
+                originalText: "smoking",
+                values: [
+                  "Current Smoking Status",
+                  "Smoking History",
+                  "Smoking Status",
+                ],
+              },
+              {
+                exclude: false,
+                facet: "measurement",
+                originalText: "glycemic control",
+                values: ["Glycated Hemoglobin", "Fasting Glucose"],
+              },
+            ],
+          },
+        },
+        type: MESSAGE_TYPE.ASSISTANT,
+      } as AssistantMessage,
+      {
+        createdAt: 1771998382833,
+        text: "What about datasets related to GLP-1 agonists and glycemic control in T2D patients?",
+        type: MESSAGE_TYPE.USER,
+      },
+      {
+        createdAt: 1771998382834,
+        error: ERROR_MESSAGE.RATE_LIMITED,
+        type: MESSAGE_TYPE.ERROR,
+      },
+      {
+        createdAt: 1771998382835,
+        text: "I'm studying whether smoking modifies the effect of GLP-1 agonists on glycemic control in T2D patients.",
+        type: MESSAGE_TYPE.USER,
+      },
+      {
+        createdAt: 1771998382836,
+        response: {
+          message: "How do you want to split the smoking groups?",
+          query: {
+            mentions: [
+              {
+                exclude: false,
+                facet: "focus",
+                originalText: "lung cancer",
+                values: [
+                  "Lung Neoplasms",
+                  "Carcinoma, Non-Small-Cell Lung",
+                  "Adenocarcinoma of Lung",
+                  "Small Cell Lung Carcinoma",
+                ],
+              },
+            ],
+          },
+        },
+        type: MESSAGE_TYPE.ASSISTANT,
+      } as AssistantMessage,
+    ],
+    status: {
+      loading: false,
+    },
+  },
+};

package/src/views/ResearchView/assistant/components/Messages/stories/messages.stories.tsx

@@ -0,0 +1,24 @@
+import { type Meta, type StoryObj } from "@storybook/nextjs-vite";
+import { Messages } from "../messages";
+import { Box } from "@mui/material";
+import { JSX } from "react";
+import { ARGS } from "./args";
+
+const meta: Meta<typeof Messages> = {
+  component: Messages,
+  decorators: [
+    (Story): JSX.Element => (
+      <Box sx={{ width: "412px" }}>
+        <Story />
+      </Box>
+    ),
+  ],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: ARGS,
+};

package/src/views/ResearchView/assistant/components/Messages/types.ts

@@ -0,0 +1,5 @@
+import { ChatState } from "../../../state/types";
+
+export interface MessagesProps {
+  state: ChatState;
+}

package/src/views/ResearchView/assistant/components/ToggleButtonGroup/stories/toggleButtonGroup.stories.tsx

@@ -0,0 +1,22 @@
+import type { Meta, StoryObj } from "@storybook/nextjs-vite";
+import { JSX } from "react";
+import { ToggleButtonGroup } from "../toggleButtonGroup";
+import { ConfigProvider } from "../../../../../../providers/config";
+import { INITIAL_CONFIG } from "../../../stories/args";
+
+const meta: Meta<typeof ToggleButtonGroup> = {
+  component: ToggleButtonGroup,
+  decorators: [
+    (Story): JSX.Element => (
+      <ConfigProvider config={INITIAL_CONFIG}>
+        <Story />
+      </ConfigProvider>
+    ),
+  ],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const DEFAULT: Story = {};

package/src/views/ResearchView/assistant/components/ToggleButtonGroup/toggleButtonGroup.styles.ts

@@ -0,0 +1,22 @@
+import styled from "@emotion/styled";
+import { Box, ToggleButtonGroup } from "@mui/material";
+import { PALETTE } from "../../../../../styles/common/constants/palette";
+
+export const StyledBox = styled(Box)`
+  background-color: ${PALETTE.COMMON_WHITE};
+  margin-bottom: -16px;
+  padding: 16px;
+  z-index: 1;
+`;
+
+export const StyledToggleButtonGroup = styled(ToggleButtonGroup)`
+  .MuiToggleButton-root {
+    gap: 4px;
+    padding: 6px 16px;
+    text-transform: none;
+
+    &.Mui-disabled {
+      color: ${PALETTE.INK_LIGHT};
+    }
+  }
+`;

package/src/views/ResearchView/assistant/components/ToggleButtonGroup/toggleButtonGroup.tsx

@@ -0,0 +1,34 @@
+import { ToggleButton } from "@mui/material";
+import { JSX } from "react";
+import { StyledBox, StyledToggleButtonGroup } from "./toggleButtonGroup.styles";
+import Link from "next/link";
+import { useAiRoutes } from "../../../../../hooks/ai/useAiRoutes/hook";
+import { Beta } from "../../../../../components/common/Chip/components/Beta/beta";
+
+/**
+ * ToggleButtonGroup component for navigating between ResearchView and ExploreView.
+ * @returns ToggleButtonGroup JSX element, or null if routes are not configured.
+ */
+export const ToggleButtonGroup = (): JSX.Element | null => {
+  const { routes } = useAiRoutes() || {};
+
+  if (!routes) return null;
+
+  return (
+    <StyledBox>
+      <StyledToggleButtonGroup exclusive>
+        <ToggleButton
+          component={Link}
+          href={routes.research}
+          selected
+          value="research"
+        >
+          Research <Beta />
+        </ToggleButton>
+        <ToggleButton component={Link} href={routes.search} value="search">
+          Search
+        </ToggleButton>
+      </StyledToggleButtonGroup>
+    </StyledBox>
+  );
+};

package/src/views/ResearchView/assistant/stories/args.ts

@@ -0,0 +1,36 @@
+import { SiteConfig } from "../../../../config/entities";
+import { InitialArgs } from "../../state/initializer/types";
+import { SUGGESTION_VARIANT } from "../../state/types";
+
+export const INITIAL_CONFIG = {
+  ai: {
+    enabled: true,
+    routes: { research: "/research", search: "/search" },
+    url: "https://findable-chat/api/chat",
+  },
+  redirectRootToPath: "",
+} as unknown as SiteConfig;
+
+export const INITIAL_ARGS: NonNullable<InitialArgs> = {
+  inputPlaceholder: "Ask about datasets or variables",
+  suggestions: [
+    {
+      label: "GLP-1 effect + smoking in T2D",
+      query:
+        "I'm studying whether smoking modifies the effect of GLP-1 agonists on glycemic control in T2D patients",
+      variant: SUGGESTION_VARIANT.CHIP,
+    },
+    {
+      label: "WGS for cardiovascular outcomes",
+      query:
+        "I'm interested in whole genome sequencing data for cardiovascular outcomes",
+      variant: SUGGESTION_VARIANT.CHIP,
+    },
+    {
+      label: "RNA-Seq in pancreatic cancer",
+      query: "I'm interested in RNA-Seq data for pancreatic cancer",
+      variant: SUGGESTION_VARIANT.CHIP,
+    },
+  ],
+  text: "Hello! I can help you find datasets across 2,944 studies from AnVIL, BDC, CRDC, and KFDRC. Describe your research question and I'll build a structured plan and find matching data.",
+};

package/src/views/ResearchView/assistant/stories/assistant.stories.tsx

@@ -0,0 +1,39 @@
+import { Box } from "@mui/material";
+import { type Meta, type StoryObj } from "@storybook/nextjs-vite";
+import { JSX } from "react";
+import { PALETTE } from "../../../../styles/common/constants/palette";
+import { ChatProvider } from "../../state/provider";
+import { Assistant } from "../assistant";
+import { INITIAL_ARGS, INITIAL_CONFIG } from "./args";
+import { ConfigProvider } from "../../../../providers/config";
+
+const meta: Meta<typeof Assistant> = {
+  component: Assistant,
+  decorators: [
+    (Story): JSX.Element => (
+      <ConfigProvider config={INITIAL_CONFIG}>
+        <ChatProvider initialArgs={INITIAL_ARGS} url="https://api.example.com">
+          <Box
+            sx={{
+              backgroundColor: PALETTE.COMMON_WHITE,
+              display: "flex",
+              flexDirection: "column",
+              height: "100vh",
+              minHeight: 0,
+              width: "412px",
+            }}
+          >
+            <Story />
+          </Box>
+        </ChatProvider>
+      </ConfigProvider>
+    ),
+  ],
+  parameters: { layout: "none" },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};

package/src/views/ResearchView/query/constants.ts

@@ -0,0 +1,5 @@
+export const ERROR_MESSAGE = {
+  RATE_LIMITED: "You're sending too many requests. Please wait a moment.",
+  REQUEST_FAILED: "Request failed",
+  UNKNOWN: "An unknown error occurred.",
+} as const;

package/src/views/ResearchView/query/fetch.ts

@@ -0,0 +1,58 @@
+import { ERROR_MESSAGE } from "./constants";
+
+/**
+ * Fetches a response from the given API URL.
+ * @param url - Request URL.
+ * @param query - Query to send.
+ * @param options - Fetch options.
+ * @param options.controller - AbortController.
+ * @param options.onError - Callback invoked on error.
+ * @param options.onSettled - Callback invoked when the request is settled (after success or error).
+ * @param options.onSuccess - Callback invoked with response data on success.
+ * @returns Promise that resolves when the request completes.
+ */
+export async function fetchResponse<T = unknown>(
+  url: string,
+  query: string,
+  {
+    controller,
+    onError,
+    onSettled,
+    onSuccess,
+  }: {
+    controller: AbortController;
+    onError: (error: Error) => void;
+    onSettled: () => void;
+    onSuccess: (data: T) => void;
+  },
+): Promise<T | undefined> {
+  const timeout = setTimeout(() => controller.abort(), 90_000);
+
+  try {
+    const res = await fetch(url, {
+      body: JSON.stringify({ query }),
+      headers: { "Content-Type": "application/json" },
+      method: "POST",
+      signal: controller.signal,
+    });
+
+    const { status } = res;
+
+    if (status === 429) {
+      onError(new Error(ERROR_MESSAGE.RATE_LIMITED));
+      return;
+    }
+
+    if (!res.ok) throw new Error(`${ERROR_MESSAGE.REQUEST_FAILED} (${status})`);
+
+    const data = await res.json();
+    onSuccess(data);
+  } catch (error) {
+    if (controller.signal.aborted) return;
+    if (error instanceof Error) onError(error);
+    else onError(new Error(ERROR_MESSAGE.UNKNOWN));
+  } finally {
+    clearTimeout(timeout);
+    onSettled();
+  }
+}

package/src/views/ResearchView/researchView.tsx

@@ -0,0 +1,19 @@
+import { Fragment, JSX } from "react";
+import { Assistant } from "./assistant/assistant";
+import { ChildrenProps } from "../../components/types";
+
+/**
+ * Main view for the research assistant feature.
+ * Renders the assistant drawer and any related components.
+ * @param props - Component props.
+ * @param props.children - Children components to be rendered within the research view.
+ * @returns The research view component.
+ */
+export const ResearchView = ({ children }: ChildrenProps): JSX.Element => {
+  return (
+    <Fragment>
+      <Assistant />
+      {children}
+    </Fragment>
+  );
+};

package/src/views/ResearchView/state/actions/setError/action.ts

@@ -0,0 +1,22 @@
+import { ChatState, MESSAGE_TYPE } from "../../types";
+import { SetErrorPayload } from "./types";
+
+/**
+ * Reducer action to set an error message in the chat.
+ *
+ * @param state - State.
+ * @param payload - Payload.
+ * @returns State.
+ */
+export function setErrorAction(
+  state: ChatState,
+  payload: SetErrorPayload,
+): ChatState {
+  return {
+    ...state,
+    messages: [
+      ...state.messages,
+      { createdAt: Date.now(), error: payload.error, type: MESSAGE_TYPE.ERROR },
+    ],
+  };
+}

package/src/views/ResearchView/state/actions/setError/dispatch.ts

@@ -0,0 +1,14 @@
+import { ChatActionKind } from "../types";
+import { SetErrorAction, SetErrorPayload } from "./types";
+
+/**
+ * Action creator for setting an error message in the chat.
+ * @param payload - Payload.
+ * @returns Action with payload and action type.
+ */
+export function setError(payload: SetErrorPayload): SetErrorAction {
+  return {
+    payload,
+    type: ChatActionKind.SetError,
+  };
+}

package/src/views/ResearchView/state/actions/setError/types.ts

@@ -0,0 +1,16 @@
+import { ChatActionKind } from "../types";
+
+/**
+ * Action to set an error message in the chat.
+ */
+export interface SetErrorAction {
+  payload: SetErrorPayload;
+  type: ChatActionKind.SetError;
+}
+
+/**
+ * Payload for the SetError action.
+ */
+export interface SetErrorPayload {
+  error: string;
+}

package/src/views/ResearchView/state/actions/setMessage/action.ts

@@ -0,0 +1,26 @@
+import { ChatState, MESSAGE_TYPE } from "../../types";
+import { SetMessagePayload } from "./types";
+
+/**
+ * Reducer action to set a message in the chat.
+ *
+ * @param state - State.
+ * @param payload - Payload.
+ * @returns State.
+ */
+export function setMessageAction(
+  state: ChatState,
+  payload: SetMessagePayload,
+): ChatState {
+  return {
+    ...state,
+    messages: [
+      ...state.messages,
+      {
+        createdAt: Date.now(),
+        response: payload.response,
+        type: MESSAGE_TYPE.ASSISTANT,
+      },
+    ],
+  };
+}

package/src/views/ResearchView/state/actions/setMessage/dispatch.ts

@@ -0,0 +1,14 @@
+import { ChatActionKind } from "../types";
+import { SetMessageAction, SetMessagePayload } from "./types";
+
+/**
+ * Action creator for setting a message in the chat.
+ * @param payload - Payload.
+ * @returns Action with payload and action type.
+ */
+export function setMessage(payload: SetMessagePayload): SetMessageAction {
+  return {
+    payload,
+    type: ChatActionKind.SetMessage,
+  };
+}

package/src/views/ResearchView/state/actions/setMessage/types.ts

@@ -0,0 +1,19 @@
+import { MessageResponse } from "../../types";
+import { ChatActionKind } from "../types";
+
+/**
+ * Action to set the message for a chat.
+ */
+export interface SetMessageAction {
+  payload: SetMessagePayload;
+  type: ChatActionKind.SetMessage;
+}
+
+/**
+ * Payload for the SetMessage action.
+ */
+export interface SetMessagePayload<
+  R extends MessageResponse = MessageResponse,
+> {
+  response: R;
+}

package/src/views/ResearchView/state/actions/setQuery/action.ts

@@ -0,0 +1,22 @@
+import { ChatState, MESSAGE_TYPE } from "../../types";
+import { SetQueryPayload } from "./types";
+
+/**
+ * Reducer action to set a query in the chat.
+ *
+ * @param state - State.
+ * @param payload - Payload.
+ * @returns State.
+ */
+export function setQueryAction(
+  state: ChatState,
+  payload: SetQueryPayload,
+): ChatState {
+  return {
+    ...state,
+    messages: [
+      ...state.messages,
+      { createdAt: Date.now(), text: payload.query, type: MESSAGE_TYPE.USER },
+    ],
+  };
+}

package/src/views/ResearchView/state/actions/setQuery/dispatch.ts

@@ -0,0 +1,14 @@
+import { ChatActionKind } from "../types";
+import { SetQueryAction, SetQueryPayload } from "./types";
+
+/**
+ * Action creator for setting a query in the chat.
+ * @param payload - Payload.
+ * @returns Action with payload and action type.
+ */
+export function setQuery(payload: SetQueryPayload): SetQueryAction {
+  return {
+    payload,
+    type: ChatActionKind.SetQuery,
+  };
+}

package/src/views/ResearchView/state/actions/setQuery/types.ts

@@ -0,0 +1,16 @@
+import { ChatActionKind } from "../types";
+
+/**
+ * Action to set the query for a chat.
+ */
+export interface SetQueryAction {
+  payload: SetQueryPayload;
+  type: ChatActionKind.SetQuery;
+}
+
+/**
+ * Payload for the SetQuery action.
+ */
+export interface SetQueryPayload {
+  query: string;
+}

package/src/views/ResearchView/state/actions/setStatus/action.ts

@@ -0,0 +1,19 @@
+import { ChatState } from "../../types";
+import { SetStatusPayload } from "./types";
+
+/**
+ * Reducer action to set the loading status in the chat.
+ *
+ * @param state - State.
+ * @param payload - Payload.
+ * @returns State.
+ */
+export function setStatusAction(
+  state: ChatState,
+  payload: SetStatusPayload,
+): ChatState {
+  return {
+    ...state,
+    status: { ...state.status, loading: payload.loading },
+  };
+}

package/src/views/ResearchView/state/actions/setStatus/dispatch.ts

@@ -0,0 +1,14 @@
+import { ChatActionKind } from "../types";
+import { SetStatusAction, SetStatusPayload } from "./types";
+
+/**
+ * Action creator for setting the loading status in the chat.
+ * @param payload - Payload.
+ * @returns Action with payload and action type.
+ */
+export function setStatus(payload: SetStatusPayload): SetStatusAction {
+  return {
+    payload,
+    type: ChatActionKind.SetStatus,
+  };
+}

package/src/views/ResearchView/state/actions/setStatus/types.ts

@@ -0,0 +1,16 @@
+import { ChatActionKind } from "../types";
+
+/**
+ * Action to set the loading status for a chat.
+ */
+export interface SetStatusAction {
+  payload: SetStatusPayload;
+  type: ChatActionKind.SetStatus;
+}
+
+/**
+ * Payload for the SetStatus action.
+ */
+export interface SetStatusPayload {
+  loading: boolean;
+}

package/src/views/ResearchView/state/actions/types.ts

@@ -0,0 +1,23 @@
+import { SetErrorAction } from "./setError/types";
+import { SetMessageAction } from "./setMessage/types";
+import { SetQueryAction } from "./setQuery/types";
+import { SetStatusAction } from "./setStatus/types";
+
+/**
+ * Union of all Chat actions.
+ */
+export type ChatAction =
+  | SetErrorAction
+  | SetMessageAction
+  | SetQueryAction
+  | SetStatusAction;
+
+/**
+ * Action kind identifiers for the Chat reducer.
+ */
+export enum ChatActionKind {
+  SetError = "SET_ERROR",
+  SetMessage = "SET_MESSAGE",
+  SetQuery = "SET_QUERY",
+  SetStatus = "SET_STATUS",
+}

package/src/views/ResearchView/state/constants.ts

@@ -0,0 +1,9 @@
+import { ChatState } from "./types";
+
+/**
+ * Initial state for the chat reducer.
+ */
+export const INITIAL_STATE: ChatState = {
+  messages: [],
+  status: { loading: false },
+};

package/src/views/ResearchView/state/context.ts

@@ -0,0 +1,11 @@
+import { createContext } from "react";
+import { ChatContextValue } from "./types";
+import { INITIAL_STATE } from "./constants";
+
+/**
+ * Context for the Chat state provider.
+ */
+export const ChatContext = createContext<ChatContextValue>({
+  dispatch: () => undefined,
+  state: INITIAL_STATE,
+});