@databiosphere/findable-ui 23.0.0 → 25.0.0

package/src/hooks/useResizeObserver.ts

@@ -15,11 +15,13 @@ export type ElementRect = {
  * Element resizing and repositioning observer.
  * @param ref - element to be observed for changes to its size or position.
  * @param onResizeFn - action to be performed when the observed element is resized or repositioned.
+ * @param shouldObserve - boolean flag to determine if the observer should be active.
  * @returns Element size and position properties for the given element.
  */
 export function useResizeObserver(
   ref: RefObject<HTMLElement>,
-  onResizeFn: (entries: ResizeObserverEntry[]) => Partial<ElementRect>
+  onResizeFn: (entries: ResizeObserverEntry[]) => Partial<ElementRect>,
+  shouldObserve: boolean = true
 ): Partial<ElementRect> | undefined {
   const [elementRect, setElementRect] = useState<Partial<ElementRect>>();
   const observerRef = useRef<ResizeObserver>();
@@ -38,6 +40,7 @@ export function useResizeObserver(
   // Creates a new ResizeObserver object which can be used to report changes to an "observed" element's dimensions or position.
   useEffect(() => {
     if (!ref.current) return;
+    if (!shouldObserve) return;
     observerRef.current = new ResizeObserver(onResize);
     const observer = observerRef.current;
     const observedEl = ref.current;
@@ -45,7 +48,7 @@ export function useResizeObserver(
     return (): void => {
       observer.unobserve(observedEl);
     };
-  }, [onResize, ref]);
+  }, [onResize, ref, shouldObserve]);
 
   return elementRect;
 }

package/src/storybook/controls/constants.ts

@@ -0,0 +1,12 @@
+import { ArgTypes } from "@storybook/react";
+import { CONTROL_TYPE } from "./types";
+
+export const CONTROL_CONFIG_MAP: Record<
+  CONTROL_TYPE,
+  ArgTypes[keyof ArgTypes]["control"]
+> = {
+  [CONTROL_TYPE.BOOLEAN]: { type: "boolean" },
+  [CONTROL_TYPE.DISABLED]: false,
+};
+
+export const MUI_CONTROLS = ["classes", "className", "ref", "sx"] as const;

package/src/storybook/controls/types.ts

@@ -0,0 +1,4 @@
+export enum CONTROL_TYPE {
+  BOOLEAN = "boolean",
+  DISABLED = "disabled",
+}

package/src/storybook/controls/utils.ts

@@ -0,0 +1,18 @@
+import { Args, ArgTypes } from "@storybook/react";
+import { CONTROL_CONFIG_MAP } from "./constants";
+import { CONTROL_TYPE } from "./types";
+
+/**
+ * Configures controls for specified keys with the given control type.
+ * @param keys - ArgType keys.
+ * @param controlType - The type of control to apply (from CONTROL_TYPE enum).
+ * @returns An object of ArgTypes with the specified control configuration.
+ */
+export function configureControls<TArg = Args>(
+  keys: (keyof TArg)[],
+  controlType: CONTROL_TYPE
+): Partial<ArgTypes<TArg>> {
+  return Object.fromEntries(
+    keys.map((key) => [key, { control: CONTROL_CONFIG_MAP[controlType] }])
+  ) as Partial<ArgTypes<TArg>>;
+}

package/src/storybook/decorators.tsx

@@ -0,0 +1,17 @@
+import { ThemeProvider as EmotionThemeProvider } from "@emotion/react";
+import { CssBaseline, ThemeProvider } from "@mui/material";
+import { Preview } from "@storybook/react";
+import React from "react";
+import { createAppTheme } from "../theme/theme";
+
+export const decorators: Preview["decorators"] = (Story, context) => {
+  const theme = createAppTheme();
+  return (
+    <EmotionThemeProvider theme={theme}>
+      <ThemeProvider theme={theme}>
+        <CssBaseline />
+        <Story {...context} />
+      </ThemeProvider>
+    </EmotionThemeProvider>
+  );
+};

package/src/storybook/loremIpsum.ts

@@ -0,0 +1,5 @@
+export const LOREM_IPSUM = {
+  LONG: "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.",
+  SHORT:
+    "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.",
+};

package/src/storybook/parameters.ts

@@ -0,0 +1,14 @@
+import { Preview } from "@storybook/react";
+
+export const parameters: Preview["parameters"] = {
+  actions: { argTypesRegex: "^on[A-Z].*" },
+  controls: {
+    expanded: true,
+    matchers: {
+      color: /(background|color)$/i,
+      date: /Date$/,
+    },
+    sort: "alpha",
+  },
+  layout: "centered",
+};

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

@@ -0,0 +1,47 @@
+export const PALETTE = {
+  ALERT_LIGHT: `var(--mui-palette-alert-light)`,
+  ALERT_LIGHTEST: `var(--mui-palette-alert-lightest)`,
+  ALERT_MAIN: `var(--mui-palette-alert-main)`,
+  BACKGROUND_DEFAULT: `var(--mui-palette-background-default)`,
+  BACKGROUND_PAPER: `var(--mui-palette-background-paper)`,
+  COMMON_BACKGROUND: `var(--mui-palette-common-background)`,
+  COMMON_BLACK: `var(--mui-palette-common-black)`,
+  COMMON_WHITE: `var(--mui-palette-common-white)`,
+  ERROR_CONTRAST_TEXT: `var(--mui-palette-error-contrastText)`,
+  ERROR_DARK: `var(--mui-palette-error-dark)`,
+  ERROR_LIGHT: `var(--mui-palette-error-light)`,
+  ERROR_MAIN: `var(--mui-palette-error-main)`,
+  INFO_CONTRAST_TEXT: `var(--mui-palette-info-contrastText)`,
+  INFO_DARK: `var(--mui-palette-info-dark)`,
+  INFO_LIGHT: `var(--mui-palette-info-light)`,
+  INFO_LIGHTEST: `var(--mui-palette-info-lightest)`,
+  INFO_MAIN: `var(--mui-palette-info-main)`,
+  INK_LIGHT: `var(--mui-palette-ink-light)`,
+  INK_MAIN: `var(--mui-palette-ink-main)`,
+  PRIMARY_CONTRAST_TEXT: `var(--mui-palette-primary-contrastText)`,
+  PRIMARY_DARK: `var(--mui-palette-primary-dark)`,
+  PRIMARY_LIGHT: `var(--mui-palette-primary-light)`,
+  PRIMARY_LIGHTEST: `var(--mui-palette-primary-lightest)`,
+  PRIMARY_MAIN: `var(--mui-palette-primary-main)`,
+  SECONDARY_CONTRAST_TEXT: `var(--mui-palette-secondary-contrastText)`,
+  SECONDARY_DARK: `var(--mui-palette-secondary-dark)`,
+  SECONDARY_LIGHT: `var(--mui-palette-secondary-light)`,
+  SECONDARY_MAIN: `var(--mui-palette-secondary-main)`,
+  SMOKE_DARK: `var(--mui-palette-smoke-dark)`,
+  SMOKE_LIGHT: `var(--mui-palette-smoke-light)`,
+  SMOKE_LIGHTEST: `var(--mui-palette-smoke-lightest)`,
+  SMOKE_MAIN: `var(--mui-palette-smoke-main)`,
+  SUCCESS_CONTRAST_TEXT: `var(--mui-palette-success-contrastText)`,
+  SUCCESS_DARK: `var(--mui-palette-success-dark)`,
+  SUCCESS_LIGHT: `var(--mui-palette-success-light)`,
+  SUCCESS_LIGHTEST: `var(--mui-palette-success-lightest)`,
+  SUCCESS_MAIN: `var(--mui-palette-success-main)`,
+  TEXT_DISABLED: `var(--mui-palette-text-disabled)`,
+  TEXT_PRIMARY: `var(--mui-palette-text-primary)`,
+  TEXT_SECONDARY: `var(--mui-palette-text-secondary)`,
+  WARNING_CONTRAST_TEXT: `var(--mui-palette-warning-contrastText)`,
+  WARNING_DARK: `var(--mui-palette-warning-dark)`,
+  WARNING_LIGHT: `var(--mui-palette-warning-light)`,
+  WARNING_LIGHTEST: `var(--mui-palette-warning-lightest)`,
+  WARNING_MAIN: `var(--mui-palette-warning-main)`,
+} as const;

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

@@ -0,0 +1,14 @@
+import { StepperProps } from "@mui/material";
+
+type StepperPropsOptions = {
+  ORIENTATION: typeof ORIENTATION;
+};
+
+const ORIENTATION: Record<string, StepperProps["orientation"]> = {
+  HORIZONTAL: "horizontal",
+  VERTICAL: "vertical",
+};
+
+export const STEPPER_PROPS: StepperPropsOptions = {
+  ORIENTATION,
+};

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

@@ -0,0 +1,35 @@
+import { SvgIconProps } from "@mui/material";
+
+type SvgIconPropsOptions = {
+  COLOR: typeof COLOR;
+  FONT_SIZE: typeof FONT_SIZE;
+};
+
+const COLOR: Record<string, SvgIconProps["color"]> = {
+  ACTION: "action",
+  DISABLED: "disabled",
+  ERROR: "error",
+  INFO: "info",
+  INHERIT: "inherit",
+  INK_LIGHT: "inkLight",
+  INK_MAIN: "inkMain",
+  PRIMARY: "primary",
+  SECONDARY: "secondary",
+  SUCCESS: "success",
+  WARNING: "warning",
+};
+
+const FONT_SIZE: Record<string, SvgIconProps["fontSize"]> = {
+  INHERIT: "inherit",
+  LARGE: "large",
+  MEDIUM: "medium",
+  SMALL: "small",
+  XSMALL: "xsmall",
+  XXLARGE: "xxlarge",
+  XXSMALL: "xxsmall",
+};
+
+export const SVG_ICON_PROPS: SvgIconPropsOptions = {
+  COLOR,
+  FONT_SIZE,
+};

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

@@ -18,6 +18,7 @@ const VARIANT: Record<string, TypographyOwnProps["variant"]> = {
   TEXT_BODY_SMALL_400: "text-body-small-400",
   TEXT_HEADING_LARGE: "text-heading-large",
   TEXT_HEADING_SMALL: "text-heading-small",
+  TEXT_HEADING_XSMALL: "text-heading-xsmall",
 };
 
 export const TYPOGRAPHY_PROPS: TypographyPropsOptions = {

package/src/tests/mui/constants.ts

@@ -0,0 +1,4 @@
+export const MUI_CLASSES = {
+  ACTIVE: "Mui-active",
+  COMPLETED: "Mui-completed",
+};

package/src/theme/common/typography.ts

@@ -1,4 +1,4 @@
-import { CSSProperties } from "@mui/material/styles/createTypography";
+import { CSSProperties } from "@mui/material";
 import { tabletUp } from "./breakpoints";
 
 /**
@@ -20,6 +20,7 @@ const TYPOGRAPHY = {
   TEXT_HEADING_LARGE: "text-heading-large",
   TEXT_HEADING_SMALL: "text-heading-small",
   TEXT_HEADING_XLARGE: "text-heading-xlarge",
+  TEXT_HEADING_XSMALL: "text-heading-xsmall",
   TEXT_UPPERCASE_500: "text-uppercase-500",
 } as const;
 export const {
@@ -37,6 +38,7 @@ export const {
   TEXT_HEADING_LARGE,
   TEXT_HEADING_SMALL,
   TEXT_HEADING_XLARGE,
+  TEXT_HEADING_XSMALL,
   TEXT_UPPERCASE_500,
 } = TYPOGRAPHY;
 
@@ -189,6 +191,15 @@ export const textHeadingXLarge: CSSProperties = {
   },
 };
 
+/**
+ * Typography Option "text-heading-xsmall"
+ */
+export const textHeadingXSmall: CSSProperties = {
+  fontSize: 16,
+  fontWeight: 500,
+  lineHeight: "24px",
+};
+
 /**
  * Typography Option "text-uppercase-500"
  */

package/src/theme/theme.ts

@@ -27,6 +27,7 @@ export function createAppTheme(customOptions?: ThemeOptions): Theme {
           xs: B.mobile,
         },
       },
+      cssVariables: true,
       palette: {
         alert: P.alert,
         background: P.background,
@@ -55,6 +56,7 @@ export function createAppTheme(customOptions?: ThemeOptions): Theme {
         [T.TEXT_HEADING_LARGE]: T.textHeadingLarge,
         [T.TEXT_HEADING_SMALL]: T.textHeadingSmall,
         [T.TEXT_HEADING_XLARGE]: T.textHeadingXLarge,
+        [T.TEXT_HEADING_XSMALL]: T.textHeadingXSmall,
         [T.TEXT_UPPERCASE_500]: T.textUppercase500,
         fontFamily: T.fontFamily,
       },

package/src/utils/tests.ts

@@ -17,3 +17,23 @@ export function getAnchorEl(id: string): HTMLAnchorElement {
 export function getButtonById(id: string): HTMLButtonElement {
   return screen.getByTestId(id);
 }
+
+/**
+ * Returns class names of the given element.
+ * @param element - Element.
+ * @returns element class names.
+ */
+export function getClassNames(element?: Element | null): string | null {
+  if (!element) return null;
+  return element.getAttribute("class");
+}
+
+/**
+ * Returns tag name of the given element.
+ * @param element - Element.
+ * @returns element tag name.
+ */
+export function getTagName(element?: Element | null): string | null {
+  if (!element) return null;
+  return element.tagName.toLowerCase();
+}

package/src/views/ExploreView/exploreView.tsx

@@ -17,17 +17,17 @@ import {
   Filters,
 } from "../../components/Filter/components/Filters/filters";
 import { SearchAllFilters } from "../../components/Filter/components/SearchAllFilters/searchAllFilters";
+import { ChartView } from "../../components/Index/components/EntitiesView/components/ChartView/chartView";
+import { EntityList } from "../../components/Index/components/EntitiesView/components/EntityList/entityList";
 import { Tabs } from "../../components/Index/components/Tabs/tabs";
 import { Index as IndexView } from "../../components/Index/index";
 import { SidebarButton } from "../../components/Layout/components/Sidebar/components/SidebarButton/sidebarButton";
 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 { TableCreator } from "../../components/TableCreator/tableCreator";
 import {
   CategoryGroup,
   ComponentsConfig,
-  EntityConfig,
   SummaryConfig,
 } from "../../config/entities";
 import {
@@ -38,7 +38,7 @@ import { useConfig } from "../../hooks/useConfig";
 import { useEntityList } from "../../hooks/useEntityList";
 import { useExploreState } from "../../hooks/useExploreState";
 import { useSummary } from "../../hooks/useSummary";
-import { ExploreActionKind, ExploreState } from "../../providers/exploreState";
+import { ExploreActionKind } from "../../providers/exploreState";
 import { SELECT_CATEGORY_KEY } from "../../providers/exploreState/constants";
 import { DESKTOP_SM } from "../../theme/common/breakpoints";
 
@@ -54,7 +54,7 @@ export const ExploreView = (props: ExploreViewProps): JSX.Element => {
   const { explorerTitle, summaryConfig, trackingConfig } = config;
   const { listView } = entityConfig;
   const { listHero, subTitleHero } = listView || {};
-  const { categoryGroups, categoryViews, filterCount } = exploreState;
+  const { categoryGroups, categoryViews, filterCount, loading } = exploreState;
   const { response: summaryResponse } = useSummary(); // Fetch summary.
   useEntityList(props); // Fetch entities.
   const { entityListType } = props;
@@ -164,7 +164,10 @@ export const ExploreView = (props: ExploreViewProps): JSX.Element => {
       )}
       <IndexView
         className={props.className}
-        List={renderList(exploreState, entityConfig, entityListType)}
+        chart={
+          <ChartView categoryFilters={categoryFilters} loading={loading} />
+        }
+        list={<EntityList entityListType={entityListType} />}
         ListHero={renderComponent(listHero)}
         SideBarButton={
           tabletDown ? (
@@ -234,43 +237,6 @@ function renderComponent<T>(
   return <ComponentCreator components={componentsConfig} response={response} />;
 }
 
-/**
- * Render either a loading view, empty result set notification or the table itself.
- * @param exploreState - ExploreView responses from Azul, such as projects (index/projects), samples (index/samples) and files (index/files).
- * @param entityConfig - Entity configuration.
- * @param entityListType - Entity list type.
- * @returns rendered Table component.
- */
-function renderList(
-  exploreState: ExploreState,
-  entityConfig: EntityConfig,
-  entityListType: string
-): JSX.Element {
-  const { listItems, loading, tabValue } = exploreState;
-  const { getId: getRowId, list, listView } = entityConfig;
-  const { columns: columnsConfig } = list;
-
-  if (!exploreState || !tabValue) {
-    return <></>; //TODO: return the loading UI component
-  }
-
-  if (entityListType !== tabValue) {
-    // required currently for client-side fetching as the pre-rendered page
-    // loads with the previous tabs data on the first render after switching tabs. (or similar)
-    return <></>;
-  }
-
-  return (
-    <TableCreator
-      columns={columnsConfig}
-      getRowId={getRowId}
-      items={listItems ?? []}
-      listView={listView}
-      loading={loading}
-    />
-  );
-}
-
 /**
  * Renders Summaries component when all the following requirements are fulfilled:
  * - defined summary config,

package/tests/chart.test.tsx

@@ -0,0 +1,170 @@
+import { composeStories } from "@storybook/react";
+import { render, screen } from "@testing-library/react";
+import React from "react";
+import { SelectCategoryValueView } from "../src/common/entities";
+import { CHART_TEST_ID } from "../src/components/Index/components/EntitiesView/components/ChartView/components/Chart/constants";
+import * as stories from "../src/components/Index/components/EntitiesView/components/ChartView/components/Chart/stories/chart.stories";
+import { PALETTE } from "../src/styles/common/mui/palette";
+
+const { Default, Selected } = composeStories(stories);
+
+const DATA = Default.args.selectCategoryValueViews || [];
+const SELECTED_DATA = Selected.args.selectCategoryValueViews || [];
+
+describe("Chart", () => {
+  describe("basic rendering", () => {
+    let chartEl: HTMLElement;
+    let svgEl: Element | null;
+
+    beforeEach(() => {
+      render(<Default testId={CHART_TEST_ID} />);
+      chartEl = screen.getByTestId(CHART_TEST_ID);
+      svgEl = chartEl.querySelector("svg");
+    });
+
+    it("renders correctly with default data", () => {
+      expect(chartEl).toBeDefined();
+      expect(svgEl).toBeDefined();
+    });
+  });
+
+  describe("category labels and counts", () => {
+    const countSet = new Set(DATA.map(mapCount));
+    const labelSet = new Set(DATA.map(mapLabel));
+    let countTextEls: NodeListOf<SVGElement>;
+    let labelTextEls: NodeListOf<SVGElement>;
+
+    beforeEach(() => {
+      render(<Default testId={CHART_TEST_ID} />);
+      countTextEls = getEls("text-count", "text");
+      labelTextEls = getEls("text-category-label", "text");
+    });
+
+    it("renders category labels", () => {
+      expect(labelTextEls.length).toEqual(labelSet.size);
+      labelTextEls.forEach(({ textContent }) => {
+        expect(textContent).toBeDefined();
+        expect(labelSet.has(textContent || "")).toBeTruthy();
+      });
+    });
+
+    it("renders category counts", () => {
+      expect(countTextEls.length).toEqual(countSet.size);
+      countTextEls.forEach(({ textContent }) => {
+        expect(textContent).toBeDefined();
+        expect(countSet.has(textContent || "")).toBeTruthy();
+      });
+    });
+  });
+
+  describe("category labels with selected values", () => {
+    it("renders selected category labels with '(selected)'", () => {
+      render(<Selected testId={CHART_TEST_ID} />);
+      const textEls = getEls("text-category-label", "text");
+      for (let i = 0; i < SELECTED_DATA.length; i++) {
+        const selectedData = SELECTED_DATA[i];
+        const textEl = textEls[i];
+        if (selectedData.selected) {
+          expect(textEl.textContent).toEqual(
+            `${selectedData.label} (selected)`
+          );
+          continue;
+        }
+        expect(textEl.textContent).toEqual(selectedData.label);
+      }
+    });
+  });
+
+  describe("bars with unselected values", () => {
+    let barEls: NodeListOf<SVGElement>;
+
+    beforeEach(() => {
+      render(<Default testId={CHART_TEST_ID} />);
+      barEls = getEls("x-bar", "path");
+    });
+
+    it("renders correct number of bars", () => {
+      expect(barEls.length).toEqual(DATA.length);
+    });
+
+    it("renders all bars in #C5E3FC", () => {
+      expect([...barEls].every(isFillDefault)).toBeTruthy();
+    });
+  });
+
+  describe("bars with selected values", () => {
+    let barEls: NodeListOf<SVGElement>;
+
+    beforeEach(() => {
+      render(<Selected testId={CHART_TEST_ID} />);
+      barEls = getEls("x-bar", "path");
+    });
+
+    it("renders no bars in #C5E3FC", () => {
+      expect([...barEls].some(isFillDefault)).toBeFalsy();
+    });
+
+    it("renders at least one bar in PRIMARY_MAIN", () => {
+      expect([...barEls].some(isFillPrimaryMain)).toBeTruthy();
+    });
+  });
+});
+
+/**
+ * Get the SVG group element for a given class name.
+ * @param className - Class name.
+ * @returns SVG group element.
+ */
+function getGroupEls(className: string): HTMLCollectionOf<Element> {
+  const chartEl = screen.getByTestId(CHART_TEST_ID);
+  const gEls = chartEl.getElementsByClassName(className);
+  expect(gEls.length).toEqual(1);
+  return gEls;
+}
+
+/**
+ * Get the SVG elements for a given class name and selectors.
+ * @param className - Class name.
+ * @param selectors - Selectors.
+ * @returns SVG elements.
+ */
+function getEls(className: string, selectors: string): NodeListOf<SVGElement> {
+  const gEls = getGroupEls(className);
+  return gEls[0].querySelectorAll(selectors);
+}
+
+/**
+ * Check if the fill attribute of the element is #C5E3FC.
+ * @param element - Element to check.
+ * @returns True if the fill attribute is #C5E3FC, false otherwise.
+ */
+function isFillDefault(element: Element): boolean {
+  return element.getAttribute("fill") === "#C5E3FC";
+}
+
+/**
+ * Check if the fill attribute of the element is PRIMARY_MAIN.
+ * @param element - Element.
+ * @returns True if the fill attribute is PRIMARY_MAIN, false otherwise.
+ */
+function isFillPrimaryMain(element: Element): boolean {
+  return element.getAttribute("fill") === PALETTE.PRIMARY_MAIN;
+}
+
+/**
+ * Maps the count of a category value view to a string.
+ * @param categoryValueView - Category value view.
+ * @returns Count as a string.
+ */
+function mapCount(categoryValueView: SelectCategoryValueView): string {
+  return categoryValueView.count.toLocaleString();
+}
+
+/**
+ * Maps the label of a category value view to a string.
+ * @param categoryValueView - Category value view.
+ * @returns Label as a string.
+ */
+function mapLabel(categoryValueView: SelectCategoryValueView): string {
+  return categoryValueView.label;
+}

package/tests/chartView.test.tsx

@@ -0,0 +1,36 @@
+import { composeStories } from "@storybook/react";
+import { render, screen } from "@testing-library/react";
+import React from "react";
+import { CHART_VIEW_TEST_ID } from "../src/components/Index/components/EntitiesView/components/ChartView/constants";
+import * as stories from "../src/components/Index/components/EntitiesView/components/ChartView/stories/chartView.stories";
+
+const { Default } = composeStories(stories);
+
+describe("ChartView", () => {
+  it("renders correctly", () => {
+    render(<Default testId={CHART_VIEW_TEST_ID} />);
+    const chartEl = screen.getByTestId(CHART_VIEW_TEST_ID);
+    expect(chartEl).toBeDefined();
+  });
+
+  it("renders nothing when no categories are available", () => {
+    render(<Default categoryFilters={[]} testId={CHART_VIEW_TEST_ID} />);
+    expect(screen.queryByTestId(CHART_VIEW_TEST_ID)).toBeNull();
+  });
+
+  it("renders correct number of chart sections", () => {
+    render(<Default />);
+    // Mocks include the facets `Biological Sex`, `Genus Species` and `Paired End`.
+    const categoryLabels = screen.getAllByText(
+      /Biological Sex|Genus Species|Paired End}/
+    );
+    // `Paired End` is not included in the chart view, `enableChartView` is false.
+    expect(categoryLabels.length).toBe(2);
+  });
+
+  it("renders charts for each category", () => {
+    render(<Default />);
+    const svgEls = document.querySelectorAll("svg");
+    expect(svgEls.length).toBe(2);
+  });
+});

package/tests/entitiesView.test.tsx

@@ -0,0 +1,36 @@
+import { composeStories } from "@storybook/react";
+import { render, screen } from "@testing-library/react";
+import React from "react";
+import { ENTITIES_VIEW_TEST_ID } from "../src/components/Index/components/EntitiesView/constants";
+import { VIEW_MODE } from "../src/components/Index/components/EntitiesView/hooks/UseEntitiesView/types";
+import * as stories from "../src/components/Index/components/EntitiesView/stories/entitiesView.stories";
+
+const { Default } = composeStories(stories);
+
+describe("EntitiesView", () => {
+  it("renders correctly", () => {
+    render(<Default testId={ENTITIES_VIEW_TEST_ID} />);
+    const viewEl = screen.getByTestId(ENTITIES_VIEW_TEST_ID);
+    expect(viewEl).not.toBeNull();
+  });
+
+  it("does not render toggle buttons when disabled", () => {
+    render(<Default testId={ENTITIES_VIEW_TEST_ID} />);
+    const viewEl = screen.getByTestId(ENTITIES_VIEW_TEST_ID);
+    const buttonsEl = viewEl.getElementsByClassName("MuiToggleButton-root");
+    expect(buttonsEl.length).toEqual(0);
+  });
+
+  it("renders toggle buttons when enabled", () => {
+    render(
+      <Default
+        testId={ENTITIES_VIEW_TEST_ID}
+        viewMode={VIEW_MODE.TABLE}
+        viewStatus={{ disabled: false }}
+      />
+    );
+    const viewEl = screen.getByTestId(ENTITIES_VIEW_TEST_ID);
+    const buttonsEl = viewEl.getElementsByClassName("MuiToggleButton-root");
+    expect(buttonsEl.length).toEqual(2);
+  });
+});

package/tests/setup.ts

@@ -0,0 +1,19 @@
+import { jest } from "@jest/globals";
+import { setProjectAnnotations } from "@storybook/react";
+import { TextDecoder, TextEncoder } from "util";
+import { decorators } from "../src/storybook/decorators";
+import { parameters } from "../src/storybook/parameters";
+
+// Set project annotations once before all tests
+setProjectAnnotations({ decorators, parameters });
+
+// Polyfill ResizeObserver for environments (like Jest) where it's not globally available
+global.ResizeObserver = jest.fn().mockImplementation(() => ({
+  disconnect: jest.fn(),
+  observe: jest.fn(),
+  unobserve: jest.fn(),
+})) as unknown as typeof ResizeObserver;
+
+// Polyfill TextEncoder/TextDecoder for environments (like Jest) where they're not globally available
+global.TextEncoder = global.TextEncoder || TextEncoder;
+global.TextDecoder = global.TextDecoder || TextDecoder;