@databiosphere/findable-ui 37.1.0 → 38.0.0

package/src/components/Table/components/DownloadEntityResults/downloadEntityResults.tsx

@@ -1,9 +1,10 @@
 import { Row, RowData } from "@tanstack/react-table";
 import React from "react";
-import { ButtonSecondary } from "../../../common/Button/components/ButtonSecondary/buttonSecondary";
 import { FileDownloadButton } from "../../../common/Button/components/FileDownloadButton/fileDownloadButton";
+import { BUTTON_PROPS } from "../../../common/Button/constants";
 import { DownloadIcon } from "../../../common/CustomIcon/components/DownloadIcon/downloadIcon";
 import { generateDownloadBlob } from "../../common/utils";
+import { StyledButton } from "./downloadEntityResults.styles";
 
 export interface DownloadEntityResultsProps<T extends RowData> {
   entityName: string;
@@ -25,12 +26,13 @@ export const DownloadEntityResults = <T extends RowData>({
 
   return (
     <>
-      <ButtonSecondary
+      <StyledButton
+        {...BUTTON_PROPS.SECONDARY_CONTAINED}
         onClick={(): void => onDownload()}
-        StartIcon={DownloadIcon}
+        startIcon={<DownloadIcon />}
       >
         Download TSV
-      </ButtonSecondary>
+      </StyledButton>
       <FileDownloadButton fileName={`${entityName}.tsv`} fileUrl={fileUrl} />
     </>
   );

package/src/components/Table/components/PaginationSummary/paginationSummary.tsx

@@ -14,7 +14,7 @@ export const PaginationSummary = ({
   totalResult,
 }: PaginationSummaryProps): JSX.Element => {
   return (
-    <Fade in={totalResult > 0}>
+    <Fade in={totalResult > 0} unmountOnExit>
       <div data-testid={TEST_IDS.TABLE_PAGINATION_RESULTS}>
         <Typography variant="text-body-400">Results </Typography>
         <Typography variant="text-body-small-500">

package/src/components/Table/components/TableBody/tableBody.tsx

@@ -1,22 +1,24 @@
 import { TableBody as MTableBody } from "@mui/material";
 import { Row, RowData, Table } from "@tanstack/react-table";
-import React from "react";
+import { useVirtualizer } from "@tanstack/react-virtual";
+import React, { RefObject } from "react";
 import { ROW_DIRECTION } from "../../common/entities";
 import { CollapsableRows } from "../TableRows/components/CollapsableRows/collapsableRows";
 import { VirtualizedRow } from "../TableRows/components/VirtualizedRow/virtualizedRow";
 import { TableRows } from "../TableRows/tableRows";
-import { useVirtualizer } from "./hooks/virtualizer/hook";
 import { getAllVirtualizedRows } from "./utils";
 
 export interface TableBodyProps<T extends RowData> {
   rowDirection: ROW_DIRECTION;
   rows: Row<T>[];
+  tableContainerRef: RefObject<HTMLDivElement>;
   tableInstance: Table<T>;
 }
 
 export const TableBody = <T extends RowData>({
   rowDirection,
   rows,
+  tableContainerRef,
   tableInstance,
 }: TableBodyProps<T>): JSX.Element => {
   const virtualizedRows = getAllVirtualizedRows(
@@ -24,7 +26,13 @@ export const TableBody = <T extends RowData>({
     rows,
     rowDirection
   );
-  const { virtualizer } = useVirtualizer(virtualizedRows);
+  const virtualizer = useVirtualizer({
+    count: virtualizedRows.length,
+    estimateSize: () => 56,
+    gap: 1,
+    getScrollElement: () => tableContainerRef.current,
+    overscan: 20,
+  });
   return (
     <MTableBody>
       <VirtualizedRow isUpperRow={true} virtualizer={virtualizer} />

package/src/components/Table/components/TableCell/components/CollapsableCell/collapsableCell.tsx

@@ -1,6 +1,5 @@
 import { Collapse, IconButton, Typography } from "@mui/material";
 import { Cell, flexRender, Row, RowData } from "@tanstack/react-table";
-import { Virtualizer } from "@tanstack/react-virtual";
 import React from "react";
 import { TEXT_BODY_400_2_LINES } from "../../../../../../theme/common/typography";
 import { UnfoldMoreIcon } from "../../../../../common/CustomIcon/components/UnfoldMoreIcon/unfoldMoreIcon";
@@ -15,13 +14,11 @@ import {
 export interface CollapsableCellProps<T extends RowData> {
   isDisabled?: boolean;
   row: Row<T>;
-  virtualizer?: Virtualizer<Window, Element>;
 }
 
 export const CollapsableCell = <T extends RowData>({
   isDisabled = false,
   row,
-  virtualizer,
 }: CollapsableCellProps<T>): JSX.Element => {
   const [pinnedCell, pinnedIndex] = getPinnedCellIndex(row);
   return (
@@ -38,13 +35,7 @@ export const CollapsableCell = <T extends RowData>({
           <UnfoldMoreIcon fontSize="small" />
         </IconButton>
       </PinnedCell>
-      <Collapse
-        in={row.getIsExpanded()}
-        mountOnEnter
-        onEntered={() => virtualizer?.measure()} // Measure when cell is opened.
-        onExited={() => virtualizer?.measure()} // Measure when cell is closed.
-        unmountOnExit
-      >
+      <Collapse in={row.getIsExpanded()}>
         <CollapsedContents>
           {getRowVisibleCells(row).map((cell, i) => {
             if (cell.getIsAggregated()) return null; // Display of aggregated cells is currently not supported.

package/src/components/Table/components/TableHead/tableHead.tsx

@@ -8,7 +8,6 @@ import {
 import { flexRender, RowData } from "@tanstack/react-table";
 import React, { Fragment } from "react";
 import { Tooltip } from "../../../DataDictionary/components/Tooltip/tooltip";
-import { ROW_DIRECTION } from "../../common/entities";
 import {
   getTableCellAlign,
   getTableCellPadding,
@@ -18,54 +17,48 @@ import { TableHeadProps } from "./types";
 import { isSortDisabled, shouldSortColumn } from "./utils";
 
 export const TableHead = <T extends RowData>({
-  rowDirection,
   tableInstance,
 }: TableHeadProps<T>): JSX.Element => {
   return (
     <Fragment>
-      {rowDirection === ROW_DIRECTION.DEFAULT &&
-        tableInstance.getHeaderGroups().map((headerGroup) => (
-          <MTableHead key={headerGroup.id}>
-            <MTableRow>
-              {headerGroup.headers.map(({ column, getContext, id }) => {
-                const { columnDef, getIsGrouped, getIsSorted } = column;
-                const annotation = columnDef.meta?.annotation;
-                return getIsGrouped() ? null : (
-                  <TableCell
-                    key={id}
-                    align={getTableCellAlign(column)}
-                    padding={getTableCellPadding(id)}
+      {tableInstance.getHeaderGroups().map((headerGroup) => (
+        <MTableHead key={headerGroup.id}>
+          <MTableRow>
+            {headerGroup.headers.map(({ column, getContext, id }) => {
+              const { columnDef, getIsGrouped, getIsSorted } = column;
+              const annotation = columnDef.meta?.annotation;
+              return getIsGrouped() ? null : (
+                <TableCell
+                  key={id}
+                  align={getTableCellAlign(column)}
+                  padding={getTableCellPadding(id)}
+                >
+                  <Tooltip
+                    description={annotation?.description}
+                    title={annotation?.label}
                   >
-                    <Tooltip
-                      description={annotation?.description}
-                      title={annotation?.label}
-                    >
-                      {shouldSortColumn(tableInstance, column) ? (
-                        <TableSortLabel
-                          IconComponent={SouthRounded}
-                          active={Boolean(getIsSorted())}
-                          direction={getIsSorted() || undefined}
-                          disabled={isSortDisabled(tableInstance)}
-                          onClick={(mouseEvent) =>
-                            handleToggleSorting(
-                              mouseEvent,
-                              tableInstance,
-                              column
-                            )
-                          }
-                        >
-                          {flexRender(columnDef.header, getContext())}
-                        </TableSortLabel>
-                      ) : (
-                        flexRender(columnDef.header, getContext())
-                      )}
-                    </Tooltip>
-                  </TableCell>
-                );
-              })}
-            </MTableRow>
-          </MTableHead>
-        ))}
+                    {shouldSortColumn(tableInstance, column) ? (
+                      <TableSortLabel
+                        IconComponent={SouthRounded}
+                        active={Boolean(getIsSorted())}
+                        direction={getIsSorted() || undefined}
+                        disabled={isSortDisabled(tableInstance)}
+                        onClick={(mouseEvent) =>
+                          handleToggleSorting(mouseEvent, tableInstance, column)
+                        }
+                      >
+                        {flexRender(columnDef.header, getContext())}
+                      </TableSortLabel>
+                    ) : (
+                      flexRender(columnDef.header, getContext())
+                    )}
+                  </Tooltip>
+                </TableCell>
+              );
+            })}
+          </MTableRow>
+        </MTableHead>
+      ))}
     </Fragment>
   );
 };

package/src/components/Table/components/TableHead/types.ts

@@ -1,7 +1,5 @@
 import { RowData, Table } from "@tanstack/react-table";
-import { ROW_DIRECTION } from "../../common/entities";
 
 export interface TableHeadProps<T extends RowData> {
-  rowDirection: ROW_DIRECTION;
   tableInstance: Table<T>;
 }

package/src/components/Table/components/TablePagination/stories/args.ts

@@ -0,0 +1,12 @@
+import { fn } from "@storybook/test";
+import { ComponentProps } from "react";
+import { TablePagination } from "../tablePagination";
+
+export const DEFAULT_ARGS: ComponentProps<typeof TablePagination> = {
+  canNextPage: true,
+  canPreviousPage: false,
+  currentPage: 1,
+  onNextPage: fn(),
+  onPreviousPage: fn(),
+  totalPage: 10,
+};

package/src/components/Table/components/TablePagination/stories/tablePagination.stories.tsx

@@ -0,0 +1,15 @@
+import { Meta, StoryObj } from "@storybook/react";
+import { TablePagination } from "../tablePagination";
+import { DEFAULT_ARGS } from "./args";
+
+const meta: Meta<typeof TablePagination> = {
+  component: TablePagination,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: DEFAULT_ARGS,
+};

package/src/components/Table/components/TablePagination/tablePagination.styles.ts

@@ -0,0 +1,11 @@
+import styled from "@emotion/styled";
+import { Grid } from "@mui/material";
+import { PALETTE } from "../../../../styles/common/constants/palette";
+
+export const StyledGrid = styled(Grid)`
+  align-items: center;
+  background-color: ${PALETTE.COMMON_WHITE};
+  gap: 16px;
+  justify-content: center;
+  padding: 16px;
+`;

package/src/components/Table/components/TablePagination/tablePagination.tsx

@@ -0,0 +1,47 @@
+import { EastRounded, WestRounded } from "@mui/icons-material";
+import { IconButton, tablePaginationClasses, Typography } from "@mui/material";
+import React from "react";
+import { ICON_BUTTON_PROPS } from "../../../../styles/common/mui/iconButton";
+import { SVG_ICON_PROPS } from "../../../../styles/common/mui/svgIcon";
+import { TYPOGRAPHY_PROPS } from "../../../../styles/common/mui/typography";
+import { TEST_IDS } from "../../../../tests/testIds";
+import { StyledGrid } from "./tablePagination.styles";
+import { TablePaginationProps } from "./types";
+
+export const TablePagination = ({
+  canNextPage = true,
+  canPreviousPage = true,
+  currentPage,
+  onNextPage,
+  onPreviousPage,
+  totalPage,
+}: TablePaginationProps): JSX.Element | null => {
+  return (
+    <StyledGrid
+      className={tablePaginationClasses.root}
+      container
+      data-testid={TEST_IDS.TABLE_PAGINATION}
+    >
+      <IconButton
+        color={ICON_BUTTON_PROPS.COLOR.SECONDARY}
+        disabled={!canPreviousPage}
+        onClick={onPreviousPage}
+      >
+        <WestRounded fontSize={SVG_ICON_PROPS.FONT_SIZE.SMALL} />
+      </IconButton>
+      <Typography
+        data-testid={TEST_IDS.TABLE_PAGINATION_PAGE}
+        variant={TYPOGRAPHY_PROPS.VARIANT.TEXT_BODY_500}
+      >
+        Page {currentPage} of {totalPage}
+      </Typography>
+      <IconButton
+        color={ICON_BUTTON_PROPS.COLOR.SECONDARY}
+        disabled={!canNextPage}
+        onClick={onNextPage}
+      >
+        <EastRounded fontSize={SVG_ICON_PROPS.FONT_SIZE.SMALL} />
+      </IconButton>
+    </StyledGrid>
+  );
+};

package/src/components/Table/components/TablePagination/types.ts

@@ -0,0 +1,8 @@
+export interface TablePaginationProps {
+  canNextPage?: boolean;
+  canPreviousPage?: boolean;
+  currentPage: number;
+  onNextPage: () => void;
+  onPreviousPage: () => void;
+  totalPage: number;
+}

package/src/components/Table/components/TableRow/tableRow.styles.ts

@@ -7,14 +7,14 @@ import {
 } from "../../../../styles/common/mixins/colors";
 import { textBodySmall500 } from "../../../../styles/common/mixins/fonts";
 
-interface Props {
+export interface StyledTableRowProps {
   isGrouped?: boolean;
   isPreview?: boolean;
 }
 
-export const TableRow = styled(MTableRow, {
+export const StyledTableRow = styled(MTableRow, {
   shouldForwardProp: (prop) => prop !== "isPreview" && prop !== "isGrouped",
-})<Props>`
+})<StyledTableRowProps>`
   && {
     transition: background-color 300ms ease-in;
 

package/src/components/Table/components/TableRows/components/CollapsableRows/collapsableRows.styles.ts

@@ -0,0 +1,6 @@
+import styled from "@emotion/styled";
+import { StyledTableRow as BaseStyledTableRow } from "../../../TableRow/tableRow.styles";
+
+export const StyledTableRow = styled(BaseStyledTableRow)`
+  min-height: 64px;
+`;

package/src/components/Table/components/TableRows/components/CollapsableRows/collapsableRows.tsx

@@ -3,13 +3,13 @@ import { Virtualizer } from "@tanstack/react-virtual";
 import React, { Fragment } from "react";
 import { isCollapsableRowDisabled } from "../../../../common/utils";
 import { CollapsableCell } from "../../../TableCell/components/CollapsableCell/collapsableCell";
-import { TableRow } from "../../../TableRow/tableRow.styles";
+import { StyledTableRow } from "./collapsableRows.styles";
 import { useCollapsableRows } from "./hook";
 
 export interface CollapsableRowsProps<T extends RowData> {
   rows: Row<T>[];
   tableInstance: Table<T>;
-  virtualizer: Virtualizer<Window, Element>;
+  virtualizer: Virtualizer<HTMLDivElement, Element>;
 }
 
 export const CollapsableRows = <T extends RowData>({
@@ -17,29 +17,28 @@ export const CollapsableRows = <T extends RowData>({
   tableInstance,
   virtualizer,
 }: CollapsableRowsProps<T>): JSX.Element => {
+  useCollapsableRows(tableInstance);
   const { getState } = tableInstance;
   const { grouping } = getState();
   const virtualItems = virtualizer.getVirtualItems();
-  useCollapsableRows(tableInstance);
   return (
     <Fragment>
       {virtualItems.map((virtualRow) => {
-        const row = rows[virtualRow.index] as Row<T>;
-        const { getIsPreview } = row;
+        const rowIndex = virtualRow.index;
+        const row = rows[rowIndex] as Row<T>;
         if (grouping.length > 0 && row.depth > 0) return null; // TODO(cc) hide sub rows -- sub-rows are within collapsed content -- UI TBD.
         return (
-          <TableRow
+          <StyledTableRow
             key={row.id}
-            data-index={virtualRow.index}
-            isPreview={getIsPreview()}
+            data-index={rowIndex}
             ref={virtualizer.measureElement}
+            isPreview={row.getIsPreview()}
           >
             <CollapsableCell
               isDisabled={isCollapsableRowDisabled(tableInstance)}
               row={row}
-              virtualizer={virtualizer}
             />
-          </TableRow>
+          </StyledTableRow>
         );
       })}
     </Fragment>

package/src/components/Table/components/TableRows/components/VirtualizedRow/virtualizedRow.tsx

@@ -3,7 +3,7 @@ import React, { useMemo } from "react";
 
 export interface VirtualizedRowProps {
   isUpperRow: boolean;
-  virtualizer: Virtualizer<Window, Element>;
+  virtualizer: Virtualizer<HTMLDivElement, Element>;
 }
 
 export const VirtualizedRow = ({

package/src/components/Table/components/TableRows/tableRows.tsx

@@ -7,11 +7,11 @@ import {
   getTableCellAlign,
   getTableCellPadding,
 } from "../TableCell/common/utils";
-import { TableRow } from "../TableRow/tableRow.styles";
+import { StyledTableRow } from "../TableRow/tableRow.styles";
 
 export interface TableRowsProps<T extends RowData> {
   rows: Row<T>[];
-  virtualizer: Virtualizer<Window, Element>;
+  virtualizer: Virtualizer<HTMLDivElement, Element>;
 }
 
 export const TableRows = <T extends RowData>({
@@ -26,7 +26,7 @@ export const TableRows = <T extends RowData>({
         const row = rows[rowIndex] as Row<T>;
         const { getIsGrouped, getIsPreview } = row;
         return (
-          <TableRow
+          <StyledTableRow
             key={row.id}
             data-index={rowIndex}
             isGrouped={getIsGrouped()}
@@ -51,7 +51,7 @@ export const TableRows = <T extends RowData>({
                 </TableCell>
               );
             })}
-          </TableRow>
+          </StyledTableRow>
         );
       })}
     </Fragment>

package/src/components/Table/components/TableToolbar/constants.ts

@@ -0,0 +1,8 @@
+import { GridProps } from "@mui/material";
+
+export const GRID_PROPS: GridProps = {
+  alignItems: "center",
+  container: true,
+  direction: "row",
+  gap: 2,
+};

package/src/components/Table/components/TableToolbar/tableToolbar.styles.ts

@@ -1,19 +1,19 @@
 import styled from "@emotion/styled";
 import { Toolbar as MToolbar } from "@mui/material";
-import { white } from "../../../../styles/common/mixins/colors";
-import { Grid } from "../../../common/Grid/grid";
+import { PALETTE } from "../../../../styles/common/constants/palette";
 
-export const Toolbar = styled(MToolbar)`
-  &.MuiToolbar-table {
-    align-items: center;
-    background-color: ${white};
-    display: flex;
-    justify-content: space-between;
-    padding: 20px;
-  }
-` as typeof MToolbar;
+export const StyledToolbar = styled(MToolbar)`
+  align-items: center;
+  background-color: ${PALETTE.COMMON_WHITE};
+  display: flex;
+  flex-wrap: wrap;
+  gap: 16px;
+  justify-content: space-between;
+  padding: 16px;
 
-export const ToolbarActions = styled(Grid)`
-  gap: 8px;
-  grid-auto-flow: column;
+  .MuiGrid-root {
+    &:empty {
+      display: none;
+    }
+  }
 `;

package/src/components/Table/components/TableToolbar/tableToolbar.tsx

@@ -1,8 +1,9 @@
+import { Grid } from "@mui/material";
 import { RowData, Table } from "@tanstack/react-table";
 import React, { Fragment } from "react";
 import { ListViewConfig } from "../../../../config/entities";
 import { useExploreState } from "../../../../hooks/useExploreState";
-import { ROW_DIRECTION } from "../../common/entities";
+import { ViewToggle } from "../../../Index/components/EntityView/components/controls/ViewToggle/viewToggle";
 import { isAnyRowSelected } from "../../common/utils";
 import { DownloadEntityResults } from "../DownloadEntityResults/downloadEntityResults";
 import { PaginationSummary } from "../PaginationSummary/paginationSummary";
@@ -10,35 +11,28 @@ import { ColumnGrouping } from "./components/ColumnGrouping/columnGrouping";
 import { ColumnVisibility } from "./components/ColumnVisibility/columnVisibility";
 import { RowPreview } from "./components/RowPreview/rowPreview";
 import { RowSelection } from "./components/RowSelection/rowSelection";
-import { Toolbar, ToolbarActions } from "./tableToolbar.styles";
+import { GRID_PROPS } from "./constants";
+import { StyledToolbar } from "./tableToolbar.styles";
 
 export interface TableToolbarProps<T extends RowData> {
   listView?: ListViewConfig;
-  rowDirection: ROW_DIRECTION;
   tableInstance: Table<T>;
 }
 
 export const TableToolbar = <T extends RowData>({
   listView,
-  rowDirection,
   tableInstance,
 }: TableToolbarProps<T>): JSX.Element => {
   const { exploreState } = useExploreState();
   const { paginationState } = exploreState;
   const { currentPage, pages, pageSize, rows } = paginationState;
-  const {
-    getSelectedRowModel,
-    options: { enableGrouping, enableHiding },
-  } = tableInstance;
+  const { getSelectedRowModel } = tableInstance;
   const { enableDownload, rowPreviewView } = listView || {};
-  const isLastPage = currentPage === pages;
-  const showToolbar =
-    rowDirection === ROW_DIRECTION.DEFAULT &&
-    (enableHiding || enableDownload || enableGrouping);
   return (
     <Fragment>
-      {showToolbar && (
-        <Toolbar variant="table">
+      <StyledToolbar>
+        <Grid {...GRID_PROPS} gap={6}>
+          <ViewToggle />
           {isAnyRowSelected(tableInstance) ? (
             <RowSelection
               rows={getSelectedRowModel().rows}
@@ -47,22 +41,22 @@ export const TableToolbar = <T extends RowData>({
           ) : (
             <PaginationSummary
               firstResult={(currentPage - 1) * pageSize + 1}
-              lastResult={isLastPage ? rows : pageSize * currentPage}
+              lastResult={currentPage === pages ? rows : pageSize * currentPage}
               totalResult={rows}
             />
           )}
-          <ToolbarActions>
-            {enableDownload && (
-              <DownloadEntityResults
-                entityName={exploreState.tabValue}
-                rows={tableInstance.getFilteredRowModel().rows}
-              />
-            )}
-            <ColumnGrouping tableInstance={tableInstance} />
-            <ColumnVisibility tableInstance={tableInstance} />
-          </ToolbarActions>
-        </Toolbar>
-      )}
+        </Grid>
+        <Grid {...GRID_PROPS}>
+          {enableDownload && (
+            <DownloadEntityResults
+              entityName={exploreState.tabValue}
+              rows={tableInstance.getFilteredRowModel().rows}
+            />
+          )}
+          <ColumnGrouping tableInstance={tableInstance} />
+          <ColumnVisibility tableInstance={tableInstance} />
+        </Grid>
+      </StyledToolbar>
       <RowPreview
         rowPreviewView={rowPreviewView}
         tableInstance={tableInstance}

package/src/components/Table/table.styles.ts

@@ -1,5 +1,6 @@
 import { css } from "@emotion/react";
 import styled from "@emotion/styled";
+import { PALETTE } from "../../styles/common/constants/palette";
 import { mediaTabletDown } from "../../styles/common/mixins/breakpoints";
 import { GridTable as Table } from "./common/gridTable.styles";
 
@@ -7,6 +8,20 @@ interface Props {
   collapsable?: boolean;
 }
 
+/**
+ * Styles for a collapsible table with support for virtualization.
+ *
+ * When the table is in a collapsed view, the table head must remain in the DOM flow
+ * to ensure virtualization calculations work correctly on initial mount.
+ *
+ * To achieve this, the table head is visually hidden using `visibility: hidden` and a nominal height
+ * of 1px, instead of being removed with `display: none`. This maintains its layout contribution.
+ *
+ * The standard grid styling—normally applied at the paper level and stripped from the table—is
+ * reassigned to the table body. This includes adding a `1px` gap between body rows, while removing
+ * the gap above the table body to visually obscure the 1px header space.
+ */
+
 export const GridTable = styled(Table, {
   shouldForwardProp: (prop) => prop !== "collapsable",
 })<Props>`
@@ -15,7 +30,26 @@ export const GridTable = styled(Table, {
     ${({ collapsable }) =>
       collapsable &&
       css`
-        grid-template-columns: 1fr;
+        && {
+          background-color: ${PALETTE.COMMON_WHITE};
+          gap: 0;
+          grid-template-columns: 1fr;
+
+          .MuiTableHead-root {
+            height: 1px;
+            visibility: hidden;
+
+            .MuiTableRow-head,
+            .MuiTableCell-head {
+              display: none;
+            }
+          }
+
+          .MuiTableBody-root {
+            background-color: ${PALETTE.SMOKE_MAIN};
+            gap: 1px;
+          }
+        }
       `};
   }
 `;