@databiosphere/findable-ui 0.0.0

package/src/utils/formatCountSize.ts

@@ -0,0 +1,27 @@
+/**
+ * Formats count sizes.
+ * @param value - Count size.
+ * @returns formatted count size as display string.
+ */
+export function formatCountSize(value: number): string {
+  const countSizes = ["k", "M", "G", "T", "P", "E"];
+
+  // Determine count size display value and unit
+  let val = value || 0;
+  let sigFig = 0;
+  while (val >= 1000) {
+    val = val / 1000;
+    sigFig += 1;
+  }
+
+  // No format of count size - tens, hundreds
+  if (sigFig === 0) {
+    return `${val}`;
+  }
+
+  // Format of count size to "n.0k"
+  // Round value to precision
+  const precision = 1;
+  const roundedValue = val.toFixed(precision);
+  return `${roundedValue}${countSizes[sigFig - 1]}`;
+}

package/src/utils/formatFileSize.ts

@@ -0,0 +1,26 @@
+/**
+ * Formats file size.
+ * @param value - File size.
+ * @returns formatted file size as display string.
+ */
+export function formatFileSize(value: number): string {
+  const fileSizes = ["B", "KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"];
+
+  // Determine file size display value and unit
+  let val = value || 0;
+  let sigFig = 0;
+  while (val >= 1024) {
+    val = val / 1024;
+    sigFig += 1;
+  }
+
+  // Prevent format of file size to "n.00 B" (display just "n B" instead)
+  let precision = 2;
+  if (sigFig === 0) {
+    precision = 0;
+  }
+
+  // Round value to precision
+  const roundedValue = val.toFixed(precision);
+  return `${roundedValue} ${fileSizes[sigFig]}`;
+}

package/src/utils/ssr.ts

@@ -0,0 +1,5 @@
+/**
+ * Check if the current rendering context is server-side.
+ * @returns True if is server side rendering.
+ */
+export const isSSR = (): boolean => typeof window === "undefined";

package/src/utils/url.ts

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

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

package/src/viewModelBuilders/common/utils.ts

@@ -0,0 +1,45 @@
+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 string for display i.e. any empty, null or undefined value is sanitized to "Unspecified".
+ * @param str - String to sanitize.
+ * @returns the string or sanitized string value.
+ */
+export function sanitizeString(str: string): string {
+  if (str === "" || str === null || str === undefined) {
+    return "Unspecified";
+  } else {
+    return str;
+  }
+}
+
+/**
+ * Sanitizes a string array for display i.e. any string element within the string array that is an empty, null or
+ * undefined value is sanitized to "Unspecified".
+ * @param strArray - String array to sanitize.
+ * @returns the string array, sanitized.
+ */
+export function sanitizeStringArray(strArray: string[]): string[] {
+  if (!strArray || strArray.length === 0) {
+    return ["Unspecified"];
+  }
+  return strArray.map(sanitizeString);
+}

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

@@ -0,0 +1,105 @@
+import { Meta, StoryObj } from "@storybook/react";
+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

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

package/src/views/EntityDetailView/entityDetailView.tsx

@@ -0,0 +1,86 @@
+import Head from "next/head";
+import { useRouter } from "next/router";
+import React, { 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, route: entityRoute } = entityConfig;
+  const { detailOverviews, top } = detail;
+  const uuid = query.params?.[PARAMS_INDEX_UUID];
+  const isDetailOverview = detailOverviews?.includes(currentTab.label);
+  const tabs = 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={<Tabs onTabChange={onTabChange} tabs={tabs} value={tabRoute} />}
+        top={<ComponentCreator components={top} response={response} />}
+      />
+    </Fragment>
+  );
+};

package/src/views/ExploreView/exploreView.tsx

@@ -0,0 +1,337 @@
+import { useRouter } from "next/router";
+import React, { useEffect, useMemo, useState } from "react";
+import {
+  AzulEntitiesStaticResponse,
+  AzulSummaryResponse,
+} from "../../apis/azul/common/entities";
+import { track } from "../../common/analytics/analytics";
+import { EVENT_NAME, EVENT_PARAM } from "../../common/analytics/entities";
+import {
+  CategoryKey,
+  CategoryValueKey,
+  SelectCategoryView,
+} from "../../common/entities";
+import { Tab, Tabs, TabValue } from "../../components/common/Tabs/tabs";
+import { ComponentCreator } from "../../components/ComponentCreator/ComponentCreator";
+import { ClearAllFilters } from "../../components/Filter/components/ClearAllFilters/clearAllFilters";
+import {
+  CategoryFilter,
+  Filters,
+} from "../../components/Filter/components/Filters/filters";
+import { SearchAllFilters } from "../../components/Filter/components/SearchAllFilters/searchAllFilters";
+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 {
+  CategoryGroupConfig,
+  ComponentsConfig,
+  EntityConfig,
+  SummaryConfig,
+} from "../../config/entities";
+import {
+  BREAKPOINT_FN_NAME,
+  useBreakpointHelper,
+} from "../../hooks/useBreakpointHelper";
+import { useConfig } from "../../hooks/useConfig";
+import { useEntityList } from "../../hooks/useEntityList";
+import { useEntityListRelatedView } from "../../hooks/useEntityListRelatedView";
+import { useExploreState } from "../../hooks/useExploreState";
+import { useSummary } from "../../hooks/useSummary";
+import { ExploreActionKind, ExploreState } from "../../providers/exploreState";
+import { DESKTOP_SM } from "../../theme/common/breakpoints";
+
+export type ExploreViewProps = AzulEntitiesStaticResponse;
+
+/**
+ * Returns tabs to be used as a prop for the Tabs component.
+ * @param entities - Entities config.
+ * @returns tabs list.
+ */
+function getTabs(entities: EntityConfig[]): Tab[] {
+  return entities.map(
+    ({ label, route, tabIcon: icon, tabIconPosition: iconPosition }) => ({
+      icon,
+      iconPosition,
+      label,
+      value: route,
+    })
+  );
+}
+
+export const ExploreView = (props: ExploreViewProps): JSX.Element => {
+  const [isDrawerOpen, setIsDrawerOpen] = useState<boolean>(false);
+  const tabletDown = useBreakpointHelper(BREAKPOINT_FN_NAME.DOWN, DESKTOP_SM);
+  const { config, entityConfig } = useConfig(); // Get app level config.
+  const { exploreDispatch, exploreState } = useExploreState(); // Get the useReducer state and dispatch for "Explore".
+  const {
+    categoryGroupConfigs,
+    entities,
+    explorerTitle,
+    summaryConfig,
+    trackingConfig,
+  } = config;
+  const { listView } = entityConfig;
+  const { listHero, subTitleHero } = listView || {};
+  const { categoryViews, filterCount, isRelatedView, tabValue } = exploreState;
+  const { push } = useRouter();
+  const tabs = getTabs(entities);
+  const { response: summaryResponse } = useSummary(); // Fetch summary.
+  useEntityList(props); // Fetch entities.
+  useEntityListRelatedView(); // Fetch related entities.
+  const { entityListType } = props;
+  const categoryFilters = useMemo(
+    () => buildCategoryFilters(categoryViews, categoryGroupConfigs),
+    [categoryViews, categoryGroupConfigs]
+  );
+
+  /**
+   * Closes filter drawer.
+   */
+  const onCloseDrawer = (): void => {
+    setIsDrawerOpen(false);
+  };
+
+  /**
+   * Callback fired when selected state of a category value is toggled.
+   * @param fromSearchAll - Indication if the filter was originated from the search all field.
+   * @param categoryKey - The category being filtered.
+   * @param selectedCategoryValue - The value to set or clear.
+   * @param selected - Indication of whether the selected value is being set or cleared.
+   * @param categorySection - Name of group the category is in.
+   * @param searchTerm - Search term used to find the value.
+   */
+  const onFilterChange = (
+    fromSearchAll: boolean,
+    categoryKey: CategoryKey,
+    selectedCategoryValue: CategoryValueKey,
+    selected: boolean,
+    categorySection?: string,
+    searchTerm?: string
+  ): void => {
+    exploreDispatch({
+      payload: {
+        categoryKey,
+        selected,
+        selectedValue: selectedCategoryValue,
+      },
+      type: ExploreActionKind.UpdateFilter,
+    });
+
+    trackingConfig?.trackFilterApplied?.({
+      category: categoryKey,
+      fromSearchAll,
+      searchTerm: searchTerm ?? "",
+      section: categorySection ?? "",
+      selected,
+      value: selectedCategoryValue,
+    });
+
+    // Execute GTM tracking.
+    if (selected) {
+      track(EVENT_NAME.FILTER_SELECTED, {
+        [EVENT_PARAM.FILTER_NAME]: categoryKey,
+        [EVENT_PARAM.FILTER_VALUE]: selectedCategoryValue,
+      });
+    }
+  };
+
+  /**
+   * Opens filter drawer.
+   */
+  const onOpenDrawer = (): void => {
+    setIsDrawerOpen(true);
+  };
+
+  /**
+   * Callback fired when selected tab value changes.
+   * - Sets state tabsValue to selected tab value.
+   * - Executes a pushState and resets pagination.
+   * @param tabValue - Selected tab value.
+   */
+  const onTabChange = (tabValue: TabValue): void => {
+    push(`/${tabValue}`);
+  };
+
+  /**
+   * Dispatch a SelectedEntityType action when entityListType changes.
+   */
+  useEffect(() => {
+    if (entityListType) {
+      exploreDispatch({
+        payload: entityListType,
+        type: ExploreActionKind.SelectEntityType,
+      });
+      track(EVENT_NAME.ENTITY_SELECTED, {
+        [EVENT_PARAM.ENTITY_NAME]: entityListType,
+      });
+    }
+  }, [entityListType, exploreDispatch]);
+
+  return (
+    <>
+      {categoryViews && !!categoryViews.length && (
+        <Sidebar drawerOpen={isDrawerOpen} onDrawerClose={onCloseDrawer}>
+          <SidebarTools>
+            <SidebarLabel label={"Filters"} />
+            <ClearAllFilters />
+            <SearchAllFilters
+              categoryViews={categoryViews}
+              drawerOpen={isDrawerOpen}
+              onFilter={onFilterChange.bind(null, true)}
+            />
+          </SidebarTools>
+          <Filters
+            categoryFilters={categoryFilters}
+            closeAncestor={onCloseDrawer}
+            disabled={isRelatedView}
+            onFilter={onFilterChange.bind(null, false)}
+            trackFilterOpened={trackingConfig?.trackFilterOpened}
+          />
+        </Sidebar>
+      )}
+      <IndexView
+        List={renderList(exploreState, entityConfig, entityListType)}
+        ListHero={renderComponent(listHero)}
+        SideBarButton={
+          tabletDown ? (
+            <SidebarButton
+              count={filterCount}
+              label="Filter"
+              onClick={onOpenDrawer}
+            />
+          ) : undefined
+        }
+        SubTitleHero={renderComponent(subTitleHero)}
+        Summaries={renderSummary(summaryConfig, summaryResponse)}
+        Tabs={<Tabs onTabChange={onTabChange} tabs={tabs} value={tabValue} />}
+        title={explorerTitle}
+      />
+    </>
+  );
+};
+
+/**
+ * Builds the category views into category views grouped by the given category group configuration.
+ * @param selectCategoryViews - View models of categories to display.
+ * @param categoryGroupConfigs - Category group configuration.
+ * @returns category filters.
+ */
+function buildCategoryFilters(
+  selectCategoryViews: SelectCategoryView[],
+  categoryGroupConfigs?: CategoryGroupConfig[]
+): CategoryFilter[] {
+  if (!categoryGroupConfigs) {
+    return [{ categoryViews: selectCategoryViews }];
+  }
+  return categoryGroupConfigs.map(({ categoryConfigs, label }) => {
+    // Grab the category views for the configured grouped categories.
+    const categoryViews = categoryConfigs.reduce(
+      (acc, { key: categoryKey }) => {
+        const categoryView = selectCategoryViews.find(
+          ({ key }) => key === categoryKey
+        );
+        if (categoryView) {
+          acc.push(categoryView);
+        }
+        return acc;
+      },
+      [] as SelectCategoryView[]
+    );
+    // Return the configured label and category views.
+    return { categoryViews, label };
+  });
+}
+
+/**
+ * Optionally renders component config.
+ * @param componentsConfig - SubHero config.
+ * @param response - Response data.
+ * @returns components.
+ */
+function renderComponent<T>(
+  componentsConfig?: ComponentsConfig | undefined,
+  response?: T
+): JSX.Element | undefined {
+  if (!componentsConfig) {
+    return;
+  }
+  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 {
+    isRelatedView,
+    listItems,
+    loading,
+    paginationState,
+    relatedListItems,
+    tabValue,
+  } = exploreState;
+  const { list, listView } = entityConfig;
+  const { columns: columnsConfig, defaultSort } = 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 <></>; // TODO(Fran) review loading and return.
+  }
+
+  return (
+    <TableCreator
+      columns={columnsConfig}
+      defaultSort={defaultSort}
+      items={
+        isRelatedView && relatedListItems ? relatedListItems : listItems ?? []
+      }
+      listView={listView}
+      loading={loading}
+      pages={paginationState.pages}
+      pageSize={paginationState.pageSize}
+      pagination={undefined}
+      total={paginationState.rows}
+    />
+  );
+}
+
+/**
+ * Renders Summaries component when all the following requirements are fulfilled:
+ * - defined summary config,
+ * - valid summary response, and
+ * - defined summaries transformed from the given summary response.
+ * @param summaryConfig - Summary config.
+ * @param summaryResponse - Response model return from summary API.
+ * @returns rendered Summaries component.
+ */
+function renderSummary(
+  summaryConfig?: SummaryConfig,
+  summaryResponse?: AzulSummaryResponse
+): JSX.Element | undefined {
+  if (!summaryConfig || !summaryResponse) {
+    return;
+  }
+  /* Render the Summaries component. */
+  return (
+    <ComponentCreator
+      components={summaryConfig.components}
+      response={summaryResponse}
+    />
+  );
+}