@databiosphere/findable-ui 48.1.0 → 49.1.0

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>
+  );
+};

package/src/components/common/Tabs/tabs.tsx

@@ -81,7 +81,11 @@ function buildTabLabel(
   annotation?: DataDictionaryAnnotation,
 ): ReactElement {
   return (
-    <Tooltip description={annotation?.description} title={annotation?.label}>
+    <Tooltip
+      description={annotation?.description}
+      enterDelay={300}
+      title={annotation?.label}
+    >
       <span>{count ? `${label} (${count})` : label}</span>
     </Tooltip>
   );

package/src/components/common/ToggleButtonGroup/provider/context.ts

@@ -0,0 +1,9 @@
+import { createContext } from "react";
+import { ToggleButtonGroupContextProps } from "./types";
+
+export const ToggleButtonGroupContext = createContext<
+  ToggleButtonGroupContextProps<unknown>
+>({
+  onChange: undefined,
+  value: null,
+});

package/src/components/common/ToggleButtonGroup/provider/hook.ts

@@ -0,0 +1,16 @@
+import { ToggleButtonGroupProps } from "@mui/material";
+import { useContext } from "react";
+import { ToggleButtonGroupContext } from "./context";
+import { ToggleButtonGroupContextProps } from "./types";
+
+/**
+ * Returns the toggle button group context.
+ * @returns toggle button group context.
+ */
+export const useToggleButtonGroup = <
+  T extends ToggleButtonGroupProps["value"],
+>(): ToggleButtonGroupContextProps<T> => {
+  return useContext(
+    ToggleButtonGroupContext,
+  ) as ToggleButtonGroupContextProps<T>;
+};

package/src/components/common/ToggleButtonGroup/provider/provider.tsx

@@ -0,0 +1,37 @@
+import { ToggleButtonGroupProps } from "@mui/material";
+import { JSX, MouseEvent, useCallback, useState } from "react";
+import { ToggleButtonGroupContext } from "./context";
+import { ToggleButtonGroupProviderProps } from "./types";
+
+/**
+ * ToggleButtonGroup provider component.
+ * Manages toggle button group state for child components.
+ * @param props - Component props.
+ * @param props.children - Child elements to render.
+ * @param props.initialValue - Initial value for the toggle button group.
+ * @returns ToggleButtonGroup provider component.
+ */
+export function ToggleButtonGroupProvider<
+  T extends ToggleButtonGroupProps["value"],
+>({
+  children,
+  initialValue = null,
+}: ToggleButtonGroupProviderProps<T>): JSX.Element {
+  const [value, setValue] = useState<T | null>(initialValue);
+
+  const onChange = useCallback(
+    (_: MouseEvent<HTMLElement>, value: T | null) => {
+      if (value === null) return;
+      setValue(value);
+    },
+    [],
+  );
+
+  return (
+    <ToggleButtonGroupContext.Provider value={{ onChange, value }}>
+      {typeof children === "function"
+        ? children({ onChange, value })
+        : children}
+    </ToggleButtonGroupContext.Provider>
+  );
+}

package/src/components/common/ToggleButtonGroup/provider/types.ts

@@ -0,0 +1,17 @@
+import { ToggleButtonGroupProps } from "@mui/material";
+import { ReactNode } from "react";
+
+export type ToggleButtonGroupContextProps<
+  T extends ToggleButtonGroupProps["value"],
+> = Pick<ToggleButtonGroupProps, "onChange"> & {
+  value: T | null;
+};
+
+export type ToggleButtonGroupProviderProps<
+  T extends ToggleButtonGroupProps["value"],
+> = {
+  children:
+    | ReactNode
+    | ((props: ToggleButtonGroupContextProps<T>) => ReactNode);
+  initialValue?: T | null;
+};

package/src/config/entities.ts

@@ -27,6 +27,7 @@ import { ProviderId } from "../providers/authentication/common/types";
 import { ExploreState } from "../providers/exploreState";
 import { FileManifestState } from "../providers/fileManifestState";
 import { SystemStatus, SystemStatusResponse } from "../providers/systemStatus";
+import { AiConfig } from "../common/ai/config/types";
 
 /**
  * Interface to define the analytics configuration for a given site.
@@ -364,6 +365,7 @@ interface TrackingConfig {
  * Interface that will hold the whole configuration for a given site.
  */
 export interface SiteConfig {
+  ai?: AiConfig;
   analytics?: AnalyticsConfig;
   appTitle: string;
   authentication?: AuthenticationConfig;

package/src/hooks/ai/useAiRoutes/hook.ts

@@ -0,0 +1,22 @@
+import { FEATURE_FLAG } from "../../../common/ai/constants";
+import { AiConfig } from "../../../common/ai/config/types";
+import { useConfig } from "../../useConfig";
+import { useFeatureFlag } from "../../useFeatureFlag/useFeatureFlag";
+
+/**
+ * Returns AI route configuration when the AI feature is enabled.
+ * @returns AI routes, or undefined if AI is not configured or enabled.
+ */
+export const useAiRoutes = (): Pick<AiConfig, "routes"> | undefined => {
+  const flagEnabled = useFeatureFlag(FEATURE_FLAG.CHAT);
+  const { config } = useConfig();
+  const { ai } = config;
+
+  if (!ai) return;
+
+  const { enabled, routes } = ai;
+
+  if (enabled || flagEnabled) {
+    return { routes };
+  }
+};

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/styles/common/mui/drawer.ts

@@ -0,0 +1,24 @@
+import { DrawerProps } from "@mui/material";
+
+type DrawerPropsOptions = {
+  ANCHOR: typeof ANCHOR;
+  VARIANT: typeof VARIANT;
+};
+
+const ANCHOR: Record<string, DrawerProps["anchor"]> = {
+  BOTTOM: "bottom",
+  LEFT: "left",
+  RIGHT: "right",
+  TOP: "top",
+};
+
+const VARIANT: Record<string, DrawerProps["variant"]> = {
+  PERMANENT: "permanent",
+  PERSISTENT: "persistent",
+  TEMPORARY: "temporary",
+};
+
+export const DRAWER_PROPS: DrawerPropsOptions = {
+  ANCHOR,
+  VARIANT,
+};

package/src/styles/common/mui/inputBase.ts

@@ -0,0 +1,38 @@
+import { InputBaseProps } from "@mui/material";
+
+type InputBasePropsOptions = {
+  COLOR: typeof COLOR;
+  MARGIN: typeof MARGIN;
+  SIZE: typeof SIZE;
+  TYPE: typeof TYPE;
+};
+
+const COLOR: Record<string, InputBaseProps["color"]> = {
+  ERROR: "error",
+  INFO: "info",
+  PRIMARY: "primary",
+  SECONDARY: "secondary",
+  SUCCESS: "success",
+  WARNING: "warning",
+};
+
+const MARGIN: Record<string, InputBaseProps["margin"]> = {
+  DENSE: "dense",
+  NONE: "none",
+};
+
+const SIZE: Record<string, InputBaseProps["size"]> = {
+  MEDIUM: "medium",
+  SMALL: "small",
+};
+
+const TYPE: Record<string, InputBaseProps["type"]> = {
+  TEXT: "text",
+};
+
+export const INPUT_BASE_PROPS: InputBasePropsOptions = {
+  COLOR,
+  MARGIN,
+  SIZE,
+  TYPE,
+};

package/src/styles/common/mui/stack.ts

@@ -0,0 +1,33 @@
+import { StackProps } from "@mui/material";
+
+type StackPropsOptions = {
+  ALIGN_ITEMS: typeof ALIGN_ITEMS;
+  DIRECTION: typeof DIRECTION;
+  FLEX_WRAP: typeof FLEX_WRAP;
+};
+
+const ALIGN_ITEMS: Record<string, StackProps["alignItems"]> = {
+  BASELINE: "baseline",
+  CENTER: "center",
+  FLEX_END: "flex-end",
+  FLEX_START: "flex-start",
+  STRETCH: "stretch",
+} as const;
+
+const DIRECTION: Record<string, StackProps["direction"]> = {
+  COLUMN: "column",
+  COLUMN_REVERSE: "column-reverse",
+  ROW: "row",
+  ROW_REVERSE: "row-reverse",
+} as const;
+
+const FLEX_WRAP: Record<string, StackProps["flexWrap"]> = {
+  WRAP: "wrap",
+  WRAP_REVERSE: "wrap-reverse",
+} as const;
+
+export const STACK_PROPS: StackPropsOptions = {
+  ALIGN_ITEMS,
+  DIRECTION,
+  FLEX_WRAP,
+};

package/src/tests/testIds.ts

@@ -12,7 +12,10 @@ export const TEST_IDS = {
   FILTER_SORT_BUTTON: "filter-sort-button",
   FILTER_SORT_MENU: "filter-sort-menu",
   FILTER_TERM: "filter-term",
+  RESEARCH_FORM: "research-form",
+  RESEARCH_PANEL: "research-panel",
   SEARCH_ALL_FILTERS: "search-all-filters",
+  SEARCH_PANEL: "search-panel",
   SIDEBAR: "sidebar",
   SIDEBAR_DRAWER: "sidebar-drawer",
   TABLE_FIRST_CELL: "table-first-cell",

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/src/views/ExploreView/entityList/filters/components/ToggleButtonGroup/toggleButtonGroup.styles.ts

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

package/src/views/ExploreView/entityList/filters/components/ToggleButtonGroup/toggleButtonGroup.tsx

@@ -0,0 +1,31 @@
+import { ToggleButton } from "@mui/material";
+import { JSX } from "react";
+import { StyledBox } from "./toggleButtonGroup.styles";
+import Link from "next/link";
+import { useAiRoutes } from "../../../../../../hooks/ai/useAiRoutes/hook";
+import { StyledToggleButtonGroup } from "./toggleButtonGroup.styles";
+import { Beta } from "../../../../../../components/common/Chip/components/Beta/beta";
+
+/**
+ * ToggleButtonGroup component for navigating to ResearchView.
+ * Only navigates to ResearchView when the "Research" button is clicked, otherwise remains on ExploreView.
+ * @returns ToggleButtonGroup JSX element.
+ */
+export const ToggleButtonGroup = (): JSX.Element | null => {
+  const { routes } = useAiRoutes() || {};
+
+  if (!routes) return null;
+
+  return (
+    <StyledBox>
+      <StyledToggleButtonGroup exclusive>
+        <ToggleButton component={Link} href={routes.research} value="research">
+          Research <Beta />
+        </ToggleButton>
+        <ToggleButton selected value="search">
+          Search
+        </ToggleButton>
+      </StyledToggleButtonGroup>
+    </StyledBox>
+  );
+};

package/src/views/ExploreView/entityList/filters/filters.styles.ts

@@ -0,0 +1,19 @@
+import styled from "@emotion/styled";
+import { Stack } from "@mui/material";
+import { bpDownMd } from "../../../../styles/common/mixins/breakpoints";
+
+export const StyledStack = styled(Stack)`
+  gap: 8px;
+  margin: 16px 0;
+  padding: 0 16px;
+
+  ${bpDownMd} {
+    margin: 8px 0;
+  }
+`;
+
+export const StyledGrid = styled.div`
+  display: grid;
+  gap: 16px;
+  grid-template-columns: 1fr auto;
+`;

package/src/views/ExploreView/exploreView.tsx

@@ -16,7 +16,6 @@ import { SearchAllFilters } from "../../components/Filter/components/SearchAllFi
 import { SURFACE_TYPE } from "../../components/Filter/components/surfaces/types";
 import { Index as IndexView } from "../../components/Index/index";
 import { SidebarLabel } from "../../components/Layout/components/Sidebar/components/SidebarLabel/sidebarLabel";
-import { SidebarTools } from "../../components/Layout/components/Sidebar/components/SidebarTools/sidebarTools.styles";
 import { Sidebar } from "../../components/Layout/components/Sidebar/sidebar";
 import { CategoryGroup } from "../../config/entities";
 import { useStateSyncManager } from "../../hooks/stateSyncManager/hook";
@@ -32,6 +31,8 @@ import { SELECT_CATEGORY_KEY } from "../../providers/exploreState/constants";
 import { TEST_IDS } from "../../tests/testIds";
 import { useUpdateFilterSort } from "./hooks/UseUpdateFilterSort/hook";
 import { buildStateSyncManagerContext } from "./utils";
+import { StyledGrid, StyledStack } from "./entityList/filters/filters.styles";
+import { ToggleButtonGroup } from "./entityList/filters/components/ToggleButtonGroup/toggleButtonGroup";
 
 export interface ExploreViewProps extends AzulEntitiesStaticResponse {
   className?: string;
@@ -137,16 +138,19 @@ export const ExploreView = (props: ExploreViewProps): JSX.Element => {
     <DrawerProvider>
       {categoryViews && !!categoryViews.length && (
         <Sidebar>
-          <SidebarTools data-testid={TEST_IDS.FILTER_CONTROLS}>
-            <SidebarLabel label={"Filters"} />
-            <Stack direction="row" gap={4}>
-              <ClearAllFilters />
-              <FilterSort
-                enabled={filterSortEnabled}
-                filterSort={filterSort}
-                onFilterSortChange={onFilterSortChange}
-              />
-            </Stack>
+          <ToggleButtonGroup />
+          <StyledStack>
+            <StyledGrid data-testid={TEST_IDS.FILTER_CONTROLS}>
+              <SidebarLabel label={"Filters"} />
+              <Stack direction="row" gap={4}>
+                <ClearAllFilters />
+                <FilterSort
+                  enabled={filterSortEnabled}
+                  filterSort={filterSort}
+                  onFilterSortChange={onFilterSortChange}
+                />
+              </Stack>
+            </StyledGrid>
             <SearchAllFilters
               categoryViews={categoryViews}
               onFilter={onFilterChange.bind(null, true)}
@@ -154,7 +158,7 @@ export const ExploreView = (props: ExploreViewProps): JSX.Element => {
                 mdDown ? SURFACE_TYPE.POPPER_DRAWER : SURFACE_TYPE.POPPER_MENU
               }
             />
-          </SidebarTools>
+          </StyledStack>
           <Filters
             categoryFilters={categoryFilters}
             onFilter={onFilterChange.bind(null, false)}

package/src/views/ResearchView/adapter/useAdapter.ts

@@ -0,0 +1,19 @@
+import { useConfig } from "../../../hooks/useConfig";
+import { UseQuery } from "../query/types";
+import { useQuery } from "../query/useQuery";
+
+/**
+ * Adapter hook that wires AI query to app config.
+ * @returns AI query interface with actions.
+ */
+export function useAdapter(): UseQuery {
+  const { config } = useConfig();
+  const { ai } = config;
+  const { url } = ai || {};
+
+  if (!url) {
+    throw new Error("Chat URL is not configured");
+  }
+
+  return useQuery(url);
+}

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

@@ -0,0 +1,30 @@
+import { JSX } from "react";
+import { useAdapter } from "../adapter/useAdapter";
+import { Form } from "./components/Form/form";
+import { Input } from "./components/Input/input";
+import { Messages } from "./components/Messages/messages";
+import { getPlaceholder } from "./components/Input/utils";
+import { Drawer } from "./components/Drawer/drawer";
+import { useChatState } from "../state/hooks/UseChatState/hook";
+import { ToggleButtonGroup } from "./components/ToggleButtonGroup/toggleButtonGroup";
+
+/**
+ * Renders the research assistant drawer.
+ * @returns The assistant drawer.
+ */
+export const Assistant = (): JSX.Element => {
+  const { actions } = useAdapter();
+  const { state } = useChatState();
+  return (
+    <Drawer>
+      <ToggleButtonGroup />
+      <Form actions={actions} status={state.status}>
+        <Messages state={state} />
+        <Input
+          disabled={state.status.loading}
+          placeholder={getPlaceholder(state)}
+        />
+      </Form>
+    </Drawer>
+  );
+};

package/src/views/ResearchView/assistant/components/Drawer/drawer.styles.ts

@@ -0,0 +1,24 @@
+import styled from "@emotion/styled";
+import { Drawer } from "@mui/material";
+import { PALETTE } from "../../../../../styles/common/constants/palette";
+import { ComponentProps } from "react";
+import { LayoutSpacing } from "../../../../../hooks/UseLayoutSpacing/types";
+
+export const StyledDrawer = styled(Drawer, {
+  shouldForwardProp(prop) {
+    return prop !== "bottom" && prop !== "top";
+  },
+})<ComponentProps<typeof Drawer> & LayoutSpacing>`
+  height: 100%;
+  max-height: 100dvh;
+  width: 412px;
+  z-index: 0;
+
+  > .MuiPaper-root {
+    background-color: ${PALETTE.COMMON_WHITE};
+    border-right: 1px solid ${PALETTE.SMOKE_MAIN};
+    padding-top: ${({ top }) => top}px;
+    position: relative;
+    width: inherit;
+  }
+`;

package/src/views/ResearchView/assistant/components/Drawer/drawer.tsx

@@ -0,0 +1,26 @@
+import { JSX } from "react";
+import { TEST_IDS } from "../../../../../tests/testIds";
+import { StyledDrawer } from "./drawer.styles";
+import { DrawerProps } from "./types";
+import { useLayoutSpacing } from "../../../../../hooks/UseLayoutSpacing/hook";
+import { DRAWER_PROPS } from "../../../../../styles/common/mui/drawer";
+
+/**
+ * Renders the drawer component for the research assistant.
+ * @param props - Component props.
+ * @param props.children - Children.
+ * @returns The drawer component.
+ */
+export const Drawer = ({ children }: DrawerProps): JSX.Element => {
+  const { spacing } = useLayoutSpacing();
+  return (
+    <StyledDrawer
+      data-testid={TEST_IDS.RESEARCH_PANEL}
+      open
+      variant={DRAWER_PROPS.VARIANT.PERSISTENT}
+      {...spacing}
+    >
+      {children}
+    </StyledDrawer>
+  );
+};

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

@@ -0,0 +1,5 @@
+import { ReactNode } from "react";
+
+export interface DrawerProps {
+  children: ReactNode;
+}

package/src/views/ResearchView/assistant/components/Form/constants.ts

@@ -0,0 +1,3 @@
+export const FIELD_NAME = {
+  AI_PROMPT: "ai-prompt",
+};

package/src/views/ResearchView/assistant/components/Form/form.styles.ts

@@ -0,0 +1,8 @@
+import styled from "@emotion/styled";
+
+export const StyledForm = styled.form`
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  min-height: 0;
+`;