@databiosphere/findable-ui 50.7.0 → 50.7.1

package/src/utils/tests.ts

@@ -1,39 +0,0 @@
-import { screen } from "@testing-library/react";
-
-/**
- * Returns anchor element by id.
- * @param id - ID.
- * @returns anchor element.
- */
-export function getAnchorEl(id: string): HTMLAnchorElement {
-  return screen.getByTestId(id) as HTMLAnchorElement;
-}
-
-/**
- * Returns button element by id.
- * @param id - ID.
- * @returns HTML button element.
- */
-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/utils/typeGuards.ts

@@ -1,8 +0,0 @@
-/**
- * Returns true if the value is a string, false otherwise.
- * @param value - Value.
- * @returns true if the value is a string, false otherwise.
- */
-export function isValueString(value: unknown): value is string {
-  return typeof value === "string";
-}

package/src/utils/url.ts

@@ -1,20 +0,0 @@
-import { isSSR } from "./ssr";
-
-/**
- * Convert a record into a query string. This function can be executed both on client or server side.
- * @param params - Key value pairs representing query string parameters to include.
- * @returns URL params as string.
- */
-export const convertUrlParams = (params: Record<string, string>): string => {
-  const validParams = { ...params };
-  // Delete any key which value is undefined. So the result string will not transform { key: undefined } into
-  // 'key=undefined'
-  Object.keys(params).forEach(
-    (key) => validParams[key] === undefined && delete validParams[key],
-  );
-  if (isSSR()) {
-    // check if the operation is being executed on server side
-    return new global.URLSearchParams(validParams).toString();
-  }
-  return new URLSearchParams(validParams).toString();
-};

package/src/viewModelBuilders/common/entities.ts

@@ -1,4 +0,0 @@
-/**
- * Map of category key to category label.
- */
-export type CategoryKeyLabel = Map<string, string>;

package/src/viewModelBuilders/common/utils.ts

@@ -1,45 +0,0 @@
-import { CategoryKeyLabel } from "./entities";
-
-/**
- * Map category key to category label.
- * @param CATEGORY_KEY - Category key.
- * @param CATEGORY_LABEL - Category label.
- * @returns map of category key to category label.
- */
-export function mapCategoryKeyLabel(
-  CATEGORY_KEY: Record<string, string>,
-  CATEGORY_LABEL: Record<string, string>,
-): CategoryKeyLabel {
-  const categoryKeyLabel: CategoryKeyLabel = new Map();
-  for (const [key, categoryKey] of Object.entries(CATEGORY_KEY)) {
-    const categoryLabel = CATEGORY_LABEL[key as keyof typeof CATEGORY_LABEL];
-    categoryKeyLabel.set(categoryKey, categoryLabel || categoryKey); // Use category key as label if label is not defined.
-  }
-  return categoryKeyLabel;
-}
-
-/**
- * Sanitizes a value to a string for display i.e. any empty, null or undefined value is sanitized to "Unspecified".
- * @param value - Value to sanitize.
- * @returns the string or sanitized string value.
- */
-export function sanitizeString(value: unknown): string {
-  if (value === "" || value === null || value === undefined) {
-    return "Unspecified";
-  } else {
-    return String(value);
-  }
-}
-
-/**
- * Sanitizes array elements to strings for display i.e. any element within the string array that is an empty, null or
- * undefined value is sanitized to "Unspecified".
- * @param array - Array to sanitize.
- * @returns the string array, sanitized.
- */
-export function sanitizeStringArray(array: unknown[]): string[] {
-  if (!array || array.length === 0) {
-    return ["Unspecified"];
-  }
-  return array.map(sanitizeString);
-}

package/src/views/ContentView/contentView.stories.tsx

@@ -1,105 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/nextjs-vite";
-import image from "images/logo.svg";
-import React from "react";
-import { NavBarHero } from "../../components/Layout/components/Nav/components/NavBarHero/navBarHero";
-import { Nav } from "../../components/Layout/components/Nav/nav";
-import { ContentView } from "./contentView";
-
-export default {
-  component: ContentView,
-  parameters: {
-    layout: "fullscreen",
-  },
-  title: "Views/ContentView",
-} as Meta<typeof ContentView>;
-
-type Story = StoryObj<typeof ContentView>;
-
-export const ContentViewStory: Story = {
-  args: {
-    content: (
-      <div>
-        <h1>Clinical Sequencing Evidence-Generating Research</h1>
-        <p>
-          The Clinical Sequencing Evidence-Generating Research (CSER) consortium
-          is a national multi-site research program funded by the National Human
-          Genome Research Institute (NHGRI), the National Cancer Institute (NCI)
-          and the National Institute on Minority Health and Health Disparities
-          (NIMHD).
-        </p>
-        <p>
-          Prioritizing engagement of traditionally underrepresented populations
-          in genomics research, CSER’s seven clinical sites seek to study the
-          effectiveness of integrating genome sequencing into the clinical care
-          of diverse and medically underserved individuals. CSER’s research
-          goals include measuring sequencing’s clinical utility through patient
-          and familial responses to genomic testing and evaluating
-          patient-provider-laboratory interactions that influence the use of
-          sequencing. Drawing from the expertise of clinicians, scientists,
-          ethicists, bioinformaticians, economists, and legal scholars, CSER is
-          poised to develop and share best practices in areas such as the
-          discovery and interpretation of genomic variants, return of results,
-          healthcare utilization, health outcomes and metrics, and the ethical,
-          legal, and social implications of sequencing in diverse populations.
-        </p>
-        <h2></h2>
-        <p>
-          In CSER, we aim to improve the use of genetic information in medicine
-          and reduce barriers to genetic services among underserved groups. Our
-          research seeks to better understand connections between genes, other
-          drivers of health and disease, and health outcomes. We have worked
-          with study participants and community partners to help make our
-          research more inclusive. We still have much more work to do to ensure
-          that our findings are applied in fair and just ways. We also
-          acknowledge the need for more diversity among our own researchers. As
-          we publish the results of CSER, we commit to carrying efforts forward
-          to make sure people of all backgrounds benefit from genomic research
-          and medicine.
-        </p>
-        <h3>Clinical sequencing evidence-generating research (cser) sites:</h3>
-        <p>
-          In CSER, we aim to improve the use of genetic information in medicine
-          and reduce barriers to genetic services among underserved groups. Our
-          research seeks to better understand connections between genes, other
-          drivers of health and disease, and health outcomes. We have worked
-          with study participants and community partners to help make our
-          research more inclusive. We still have much more work to do to ensure
-          that our findings are applied in fair and just ways. We also
-          acknowledge the need for more diversity among our own researchers. As
-          we publish the results of CSER, we commit to carrying efforts forward
-          to make sure people of all backgrounds benefit from genomic research
-          and medicine.
-        </p>
-        <ul>
-          <li>CHARM, Kaiser Permanente Northwest</li>
-          <li>KidsCanSeq, Baylor College of Medicine</li>
-          <li>NCGENES 2, University of North Carolina, Chapel Hill</li>
-          <li>NYCKidSeq, Icahn School of Medicine at Mount Sinai</li>
-          <li>P3EGS, University of California, San Francisco</li>
-          <li>SouthSeq, HudsonAlpha Institute for Biotechnology</li>
-          <li>ClinSeq A2, NHGRI Intramural</li>
-          <li>CSER Coordinating Center, University of Washington, Seattle</li>
-        </ul>
-      </div>
-    ),
-    navigation: (
-      <Nav
-        Hero={
-          <NavBarHero
-            byline="Active August, 2020 to July, 2023"
-            logo={{ ...image, height: 40 }}
-            slogan="Clinical Sequencing Evidence-Generating Research"
-          />
-        }
-        navigation={[
-          { active: true, label: "About", url: "/" },
-          { label: "News", url: "/" },
-          { label: "Projects", url: "/" },
-          { label: "Publications", url: "/" },
-          { label: "Resources", url: "/" },
-          { label: "Research Materials", url: "/" },
-        ]}
-      />
-    ),
-  },
-};

package/src/views/ContentView/contentView.tsx

@@ -1,29 +0,0 @@
-import { JSX, ReactNode } from "react";
-import { LayoutStyle } from "../../components/Layout/components/ContentLayout/common/entities";
-import { ContentLayout } from "../../components/Layout/components/ContentLayout/contentLayout";
-import { BaseComponentProps } from "../../components/types";
-
-export interface ContentViewProps {
-  content: ReactNode;
-  layoutStyle?: LayoutStyle;
-  navigation?: ReactNode;
-  outline?: ReactNode;
-}
-
-export const ContentView = ({
-  className,
-  content,
-  layoutStyle,
-  navigation,
-  outline,
-}: BaseComponentProps & ContentViewProps): JSX.Element => {
-  return (
-    <ContentLayout
-      className={className}
-      content={content}
-      layoutStyle={layoutStyle}
-      navigation={navigation}
-      outline={outline}
-    />
-  );
-};

package/src/views/DataDictionaryView/dataDictionaryView.tsx

@@ -1,35 +0,0 @@
-import { JSX } from "react";
-import { DataDictionary } from "../../components/DataDictionary/dataDictionary";
-import { useStateSyncManager } from "../../hooks/stateSyncManager/hook";
-import { DataDictionaryContext } from "../../providers/dataDictionary/context";
-import { clearMeta } from "../../providers/dataDictionaryState/actions/clearMeta/dispatch";
-import { stateToUrl } from "../../providers/dataDictionaryState/actions/stateToUrl/dispatch";
-import { urlToState } from "../../providers/dataDictionaryState/actions/urlToState/dispatch";
-import { useDataDictionaryState } from "../../providers/dataDictionaryState/hooks/UseDataDictionaryState/hook";
-import { DataDictionaryViewProps } from "./types";
-import { buildStateSyncManagerContext } from "./utils";
-
-export const DataDictionaryView = ({
-  className,
-  dictionary,
-}: DataDictionaryViewProps): JSX.Element => {
-  const { dataDictionaryDispatch, dataDictionaryState } =
-    useDataDictionaryState();
-
-  useStateSyncManager({
-    actions: { clearMeta, stateToUrl, urlToState },
-    dispatch: dataDictionaryDispatch,
-    state: buildStateSyncManagerContext(dataDictionaryState, dictionary),
-  });
-
-  return (
-    <DataDictionaryContext.Provider value={{ dictionary }}>
-      {/* Using dictionary as `key` to force component mount when dictionary changes to prevent stale outline, global filter value. */}
-      <DataDictionary
-        key={dictionary}
-        className={className}
-        dictionary={dictionary}
-      />
-    </DataDictionaryContext.Provider>
-  );
-};

package/src/views/DataDictionaryView/types.ts

@@ -1,5 +0,0 @@
-import { BaseComponentProps } from "components/types";
-
-export interface DataDictionaryViewProps extends BaseComponentProps {
-  dictionary: string;
-}

package/src/views/DataDictionaryView/utils.ts

@@ -1,23 +0,0 @@
-import { StateSyncManagerContext } from "../../hooks/stateSyncManager/types";
-import { DATA_DICTIONARY_URL_PARAMS } from "../../providers/dataDictionaryState/dictionaries/constants";
-import { DataDictionaryState } from "../../providers/dataDictionaryState/types";
-
-/**
- * Builds the state sync manager context object for URL-state synchronization.
- * - Command: The meta command that signals a URL update operation is needed e.g. "STATE_TO_URL_PUSH" or "STATE_TO_URL_REPLACE".
- * - ParamKeys: Expected list of URL parameter keys that should be synchronized with state e.g. "filter".
- * - Query: Dictionary related query object from state that should be synchronized with the URL.
- * @param dataDictionaryState - Data dictionary state.
- * @param dictionary - Dictionary ID.
- * @returns The state sync manager context.
- */
-export function buildStateSyncManagerContext(
-  dataDictionaryState: DataDictionaryState,
-  dictionary: string,
-): StateSyncManagerContext {
-  return {
-    command: dataDictionaryState.meta?.command,
-    paramKeys: Object.values(DATA_DICTIONARY_URL_PARAMS),
-    query: dataDictionaryState.dictionaries?.[dictionary]?.query,
-  };
-}

package/src/views/EntityDetailView/entityDetailView.tsx

@@ -1,90 +0,0 @@
-import Head from "next/head";
-import { useRouter } from "next/router";
-import { JSX, Fragment } from "react";
-import { PARAMS_INDEX_UUID } from "../../common/constants";
-import { Tab, Tabs, TabValue } from "../../components/common/Tabs/tabs";
-import { ComponentCreator } from "../../components/ComponentCreator/ComponentCreator";
-import { Detail as DetailView } from "../../components/Detail/detail";
-import { EntityConfig } from "../../config/entities";
-import { useConfig } from "../../hooks/useConfig";
-import { useCurrentDetailTab } from "../../hooks/useCurrentDetailTab";
-import { useEntityHeadTitle } from "../../hooks/useEntityHeadTitle";
-import { useFetchEntity } from "../../hooks/useFetchEntity";
-import { useUpdateURLCatalogParams } from "../../hooks/useUpdateURLCatalogParam";
-
-// eslint-disable-next-line @typescript-eslint/no-explicit-any -- this data type can't be determined beforehand
-export interface EntityDetailViewProps<T = any> {
-  data?: T;
-  entityListType: string;
-}
-
-/**
- * Returns tabs to be used as a prop for the Tabs component.
- * @param entity - Entity config related to the /explore/projects route.
- * @returns tabs list.
- */
-function getTabs(entity: EntityConfig): Tab[] {
-  return entity.detail.tabs.map(
-    ({ label, route, tabIcon: icon, tabIconPosition: iconPosition }) => ({
-      icon,
-      iconPosition,
-      label,
-      value: route,
-    }),
-  );
-}
-
-export const EntityDetailView = (props: EntityDetailViewProps): JSX.Element => {
-  useUpdateURLCatalogParams();
-  const { currentTab, route: tabRoute } = useCurrentDetailTab();
-  const { response } = useFetchEntity(props);
-  const { push, query } = useRouter();
-  const { entityConfig } = useConfig();
-  const { mainColumn, sideColumn } = currentTab;
-  const { detail, hideTabs, route: entityRoute } = entityConfig;
-  const { detailOverviews, top } = detail;
-  const uuid = query.params?.[PARAMS_INDEX_UUID];
-  const isDetailOverview = detailOverviews?.includes(currentTab.label);
-  const tabs = hideTabs ? [] : getTabs(entityConfig);
-  const title = useEntityHeadTitle(response);
-
-  if (!response) {
-    return <span></span>; //TODO: return the loading UI component
-  }
-
-  /**
-   * Callback fired when selected tab value changes.
-   * - Executes a pushState.
-   * @param tabValue - Selected tab value.
-   */
-  const onTabChange = (tabValue: TabValue): void => {
-    push(`/${entityRoute}/${uuid}/${tabValue}`);
-  };
-
-  return (
-    <Fragment>
-      {title && (
-        <Head>
-          <title>{title}</title>
-        </Head>
-      )}
-      <DetailView
-        isDetailOverview={isDetailOverview}
-        mainColumn={
-          <ComponentCreator components={mainColumn} response={response} />
-        }
-        sideColumn={
-          sideColumn ? (
-            <ComponentCreator components={sideColumn} response={response} />
-          ) : undefined
-        }
-        Tabs={
-          hideTabs ? null : (
-            <Tabs onTabChange={onTabChange} tabs={tabs} value={tabRoute} />
-          )
-        }
-        top={<ComponentCreator components={top} response={response} />}
-      />
-    </Fragment>
-  );
-};

package/src/views/EntityExportMethodView/entityExportMethodView.tsx

@@ -1,67 +0,0 @@
-import { useRouter } from "next/router";
-import type { ParsedUrlQuery } from "querystring";
-import { JSX } from "react";
-import { EntityDetailViewProps } from "views/EntityDetailView/entityDetailView";
-import { PARAMS_INDEX_EXPORT_METHOD } from "../../common/constants";
-import { ComponentCreator } from "../../components/ComponentCreator/ComponentCreator";
-import { BackPageView } from "../../components/Layout/components/BackPage/backPageView";
-import { ExportMethodConfig } from "../../config/entities";
-import { useEntityExportConfig } from "../../hooks/useEntityExportConfig";
-import { useFetchEntity } from "../../hooks/useFetchEntity";
-import { useUpdateURLCatalogParams } from "../../hooks/useUpdateURLCatalogParam";
-
-export const EntityExportMethodView = (
-  props: EntityDetailViewProps,
-): JSX.Element => {
-  // Update the catalog param if necessary.
-  useUpdateURLCatalogParams();
-
-  // Grab the entity to be exported.
-  const { response } = useFetchEntity(props);
-
-  // Get the column definitions for the entity export.
-  const { query } = useRouter();
-  const { exportMethods, tabs } = useEntityExportConfig();
-  const { sideColumn } = tabs[0];
-  const { mainColumn, top } = getExportMethodConfig(exportMethods, query) || {};
-
-  // Wait for the entity to be fetched.
-  if (!response) {
-    return <span></span>;
-  }
-
-  return (
-    <BackPageView
-      mainColumn={
-        <ComponentCreator components={mainColumn || []} response={response} />
-      }
-      sideColumn={
-        sideColumn ? (
-          <ComponentCreator components={sideColumn} response={response} />
-        ) : undefined
-      }
-      top={<ComponentCreator components={top || []} response={response} />}
-    />
-  );
-};
-
-/**
- * Returns the export method configuration for the given pathname.
- * @param exportMethods - Export methods config.
- * @param query - Router query object.
- * @returns export method configuration.
- */
-function getExportMethodConfig(
-  exportMethods: ExportMethodConfig[],
-  query: ParsedUrlQuery,
-): ExportMethodConfig | undefined {
-  // Determine the selected export method from the URL.
-  const exportMethodRoute = query.params?.[PARAMS_INDEX_EXPORT_METHOD];
-  if (!exportMethodRoute) {
-    return;
-  }
-  // Find the config for the selected export method.
-  return exportMethods.find(({ route }) => {
-    return route.includes(exportMethodRoute);
-  });
-}

package/src/views/EntityExportView/entityExportView.tsx

@@ -1,39 +0,0 @@
-import { JSX } from "react";
-import { EntityDetailViewProps } from "views/EntityDetailView/entityDetailView";
-import { ComponentCreator } from "../../components/ComponentCreator/ComponentCreator";
-import { BackPageView } from "../../components/Layout/components/BackPage/backPageView";
-import { useEntityExportConfig } from "../../hooks/useEntityExportConfig";
-import { useFetchEntity } from "../../hooks/useFetchEntity";
-import { useUpdateURLCatalogParams } from "../../hooks/useUpdateURLCatalogParam";
-
-export const EntityExportView = (props: EntityDetailViewProps): JSX.Element => {
-  // Update the catalog param if necessary.
-  useUpdateURLCatalogParams();
-
-  // Grab the entity to be exported.
-  const { response } = useFetchEntity(props);
-
-  // Get the column definitions for the entity export.
-  const { tabs, top } = useEntityExportConfig();
-  const currentTab = tabs[0];
-  const { mainColumn, sideColumn } = currentTab;
-
-  // Wait for the entity to be fetched.
-  if (!response) {
-    return <span></span>;
-  }
-
-  return (
-    <BackPageView
-      mainColumn={
-        <ComponentCreator components={mainColumn} response={response} />
-      }
-      sideColumn={
-        sideColumn ? (
-          <ComponentCreator components={sideColumn} response={response} />
-        ) : undefined
-      }
-      top={<ComponentCreator components={top} response={response} />}
-    />
-  );
-};

package/src/views/ExploreView/entityList/filters/components/ToggleButtonGroup/toggleButtonGroup.styles.ts

@@ -1,25 +0,0 @@
-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

@@ -1,35 +0,0 @@
-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 between ExploreView and ResearchView.
- * @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.search}
-          selected
-          value="search"
-        >
-          Search
-        </ToggleButton>
-        <ToggleButton component={Link} href={routes.research} value="research">
-          Research <Beta />
-        </ToggleButton>
-      </StyledToggleButtonGroup>
-    </StyledBox>
-  );
-};

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

@@ -1,19 +0,0 @@
-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;
-`;