@databiosphere/findable-ui 44.0.0 → 45.0.0

package/src/components/Index/table/hook.ts

@@ -34,9 +34,11 @@ import {
   sortingFn,
 } from "../../Table/common/utils";
 import { getFacetedMinMaxValues } from "../../Table/featureOptions/facetedColumn/getFacetedMinMaxValues";
+import { TABLE_DOWNLOAD_OPTIONS } from "../../Table/featureOptions/tableDownload/constants";
 import { ROW_POSITION } from "../../Table/features/RowPosition/constants";
 import { ROW_PREVIEW } from "../../Table/features/RowPreview/constants";
 import { RowPreviewState } from "../../Table/features/RowPreview/entities";
+import { TABLE_DOWNLOAD } from "../../Table/features/TableDownload/constants";
 import { buildBaseColumnDef } from "../../TableCreator/common/utils";
 import { useTableOptions } from "../../TableCreator/options/hook";
 import { createCell } from "./coreOptions/columns/cellFactory";
@@ -162,7 +164,7 @@ UseTableProps): UseTable<T> => {
    * - This will simplify the configuration structure and centralize table state definitions, reducing redundancy and improving clarity.
    */
   const table = useReactTable<T>({
-    _features: [ROW_POSITION, ROW_PREVIEW],
+    _features: [ROW_POSITION, ROW_PREVIEW, TABLE_DOWNLOAD],
     columns: columnDefs,
     data: listItems || [],
     enableColumnFilters: true, // client-side filtering.
@@ -187,6 +189,7 @@ UseTableProps): UseTable<T> => {
     onRowSelectionChange,
     onSortingChange,
     pageCount,
+    ...TABLE_DOWNLOAD_OPTIONS,
     state,
     ...tableOptions,
   });

package/src/components/Table/common/columnDef.ts

@@ -12,6 +12,7 @@ export const COLUMN_DEF: Record<string, ColumnDef<RowData>> = {
     enableGrouping: false,
     enableHiding: false,
     enableSorting: false,
+    enableTableDownload: false,
     header: "",
     id: COLUMN_IDENTIFIER.ROW_POSITION,
     meta: {
@@ -27,6 +28,7 @@ export const COLUMN_DEF: Record<string, ColumnDef<RowData>> = {
     enableGrouping: false,
     enableHiding: false,
     enableSorting: false,
+    enableTableDownload: false,
     header: HeadSelectionCell,
     id: COLUMN_IDENTIFIER.ROW_SELECTION,
     meta: {

package/src/components/Table/common/utils.ts

@@ -11,7 +11,6 @@ import {
 } from "@tanstack/react-table";
 import { Category } from "../../../common/categories/models/types";
 import { EXPLORE_MODE, ExploreMode } from "../../../hooks/useExploreMode/types";
-import { COLUMN_IDENTIFIER } from "./columnIdentifier";
 
 /**
  * Internal model of a category term count keyed by category term.
@@ -24,11 +23,6 @@ type CountByTerms = Map<any, number>;
  */
 type PinnedCell<T extends RowData> = [Cell<T, unknown>, number];
 
-/**
- * Model of possible table data values.
- */
-type TableData = number | string | string[];
-
 /**
  * Build view-specific models from react table faceted values function.
  * @param columns - Table columns.
@@ -100,49 +94,6 @@ export function getColumnHeader<T extends RowData>(column: Column<T>): string {
   return meta?.header || id;
 }
 
-/**
- * Format data to TSV string.
- * @param data - Table data.
- * @returns table data formatted into a TSV string.
- */
-function formatDataToTSV(data: TableData[][]): string {
-  return data
-    .map((row) => {
-      return row
-        .map((data) => {
-          // Use empty string in place of undefined and null.
-          if (data === undefined || data === null) return "";
-          // Convert to string.
-          const dataString = Array.isArray(data)
-            ? data.join(", ")
-            : String(data);
-          // Quote if necessary.
-          return /[\t\r\n"]/.test(dataString)
-            ? `"${dataString.replaceAll('"', '""')}"`
-            : dataString;
-        })
-        .join("\t");
-    })
-    .join("\n");
-}
-
-/**
- * Returns filtered entity results as a blob.
- * @param rows - Table rows.
- * @returns filtered entity results as a blob.
- */
-export function generateDownloadBlob<T extends RowData>(
-  rows: Row<T>[]
-): Blob | undefined {
-  if (rows.length === 0) {
-    return;
-  }
-  const tableHeaders = getHeadersTableData(rows);
-  const tableData = getRowsTableData(rows);
-  const tsv = formatDataToTSV([tableHeaders, ...tableData]);
-  return new Blob([tsv], { type: "text/tab-separated-values" });
-}
-
 /**
  * Returns unique category term counts keyed by category terms.
  * Custom function based off react table function getFacetedUniqueValues, see
@@ -225,32 +176,6 @@ export function getTableStatePagination(
   };
 }
 
-/**
- * Returns the list of table headers, excluding "rowSelection" column.
- * @param rows - Table rows.
- * @returns list of headers.
- */
-function getHeadersTableData<T extends RowData>(rows: Row<T>[]): TableData[] {
-  return rows[0]
-    .getAllCells()
-    .filter((cell) => cell.column.id !== COLUMN_IDENTIFIER.ROW_SELECTION)
-    .map((cell) => cell.column.columnDef.header as TableData);
-}
-
-/**
- * Returns the list of table data, excluding "rowSelection" column.
- * @param rows - Table rows.
- * @returns list of data.
- */
-function getRowsTableData<T extends RowData>(rows: Row<T>[]): TableData[][] {
-  return rows.map((row) =>
-    row
-      .getAllCells()
-      .filter((cell) => cell.column.id !== COLUMN_IDENTIFIER.ROW_SELECTION)
-      .map((cell) => cell.getValue() as TableData)
-  );
-}
-
 /**
  * Returns true if any or all table rows are selected.
  * @param table - Table.

package/src/components/Table/components/{DownloadEntityResults/downloadEntityResults.styles.ts → TableFeatures/TableDownload/tableDownload.styles.ts}

@@ -1,6 +1,6 @@
 import styled from "@emotion/styled";
 import { Button } from "@mui/material";
-import { bpDownSm } from "../../../../styles/common/mixins/breakpoints";
+import { bpDownSm } from "../../../../../styles/common/mixins/breakpoints";
 
 export const StyledButton = styled(Button)`
   ${bpDownSm} {

package/src/components/Table/components/TableFeatures/TableDownload/tableDownload.tsx

@@ -0,0 +1,23 @@
+import { RowData } from "@tanstack/react-table";
+import React from "react";
+import { BUTTON_PROPS } from "../../../../common/Button/constants";
+import { DownloadIcon } from "../../../../common/CustomIcon/components/DownloadIcon/downloadIcon";
+import { StyledButton } from "./tableDownload.styles";
+import { TableDownloadProps } from "./types";
+
+export const TableDownload = <T extends RowData>({
+  className,
+  table,
+}: TableDownloadProps<T>): JSX.Element | null => {
+  if (!table.options.enableTableDownload) return null;
+  return (
+    <StyledButton
+      {...BUTTON_PROPS.SECONDARY_CONTAINED}
+      className={className}
+      onClick={() => table.downloadData()}
+      startIcon={<DownloadIcon />}
+    >
+      Download TSV
+    </StyledButton>
+  );
+};

package/src/components/Table/components/TableFeatures/TableDownload/types.ts

@@ -0,0 +1,7 @@
+import { RowData, Table } from "@tanstack/react-table";
+import { BaseComponentProps } from "../../../../types";
+
+export interface TableDownloadProps<T extends RowData>
+  extends BaseComponentProps {
+  table: Table<T>;
+}

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

@@ -5,8 +5,8 @@ import { ListViewConfig } from "../../../../config/entities";
 import { useExploreState } from "../../../../hooks/useExploreState";
 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";
+import { TableDownload } from "../TableFeatures/TableDownload/tableDownload";
 import { ColumnGrouping } from "./components/ColumnGrouping/columnGrouping";
 import { ColumnVisibility } from "./components/ColumnVisibility/columnVisibility";
 import { RowPreview } from "./components/RowPreview/rowPreview";
@@ -27,7 +27,7 @@ export const TableToolbar = <T extends RowData>({
   const { paginationState } = exploreState;
   const { currentPage, pages, pageSize, rows } = paginationState;
   const { getSelectedRowModel } = tableInstance;
-  const { enableDownload, rowPreviewView } = listView || {};
+  const { rowPreviewView } = listView || {};
   return (
     <Fragment>
       <StyledToolbar>
@@ -47,12 +47,7 @@ export const TableToolbar = <T extends RowData>({
           )}
         </Grid>
         <Grid {...GRID_PROPS}>
-          {enableDownload && (
-            <DownloadEntityResults
-              entityName={exploreState.tabValue}
-              rows={tableInstance.getFilteredRowModel().rows}
-            />
-          )}
+          <TableDownload table={tableInstance} />
           <ColumnGrouping tableInstance={tableInstance} />
           <ColumnVisibility tableInstance={tableInstance} />
         </Grid>

package/src/components/Table/components/TableToolbar2/tableToolbar2.styles.ts

@@ -0,0 +1,18 @@
+import styled from "@emotion/styled";
+import { Toolbar as MToolbar, Stack } from "@mui/material";
+import { PALETTE } from "../../../../styles/common/constants/palette";
+
+export const StyledToolbar = styled(MToolbar)`
+  align-items: center;
+  background-color: ${PALETTE.COMMON_WHITE};
+  display: flex;
+  padding: 16px;
+`;
+
+export const StyledStack = styled(Stack)`
+  align-items: center;
+  flex: 1;
+  flex-direction: row;
+  gap: 8px;
+  justify-content: flex-end;
+`;

package/src/components/Table/components/TableToolbar2/tableToolbar2.tsx

@@ -0,0 +1,17 @@
+import { RowData } from "@tanstack/react-table";
+import React from "react";
+import { TableDownload } from "../TableFeatures/TableDownload/tableDownload";
+import { StyledStack, StyledToolbar } from "./tableToolbar2.styles";
+import { TableToolbar2Props } from "./types";
+
+export const TableToolbar2 = <T extends RowData>({
+  table,
+}: TableToolbar2Props<T>): JSX.Element => {
+  return (
+    <StyledToolbar>
+      <StyledStack>
+        <TableDownload table={table} />
+      </StyledStack>
+    </StyledToolbar>
+  );
+};

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

@@ -0,0 +1,5 @@
+import { RowData, Table } from "@tanstack/react-table";
+
+export interface TableToolbar2Props<T extends RowData> {
+  table: Table<T>;
+}

package/src/components/Table/featureOptions/tableDownload/constants.ts

@@ -0,0 +1,9 @@
+import { RowData } from "@tanstack/react-table";
+import { TableDownloadOptions } from "../../features/TableDownload/types";
+
+export const TABLE_DOWNLOAD_OPTIONS: Pick<
+  TableDownloadOptions<RowData>,
+  "enableTableDownload"
+> = {
+  enableTableDownload: false,
+};

package/src/components/Table/features/TableDownload/constants.ts

@@ -0,0 +1,24 @@
+import {
+  Column,
+  RowData,
+  Table,
+  TableFeature,
+  TableOptionsResolved,
+} from "@tanstack/react-table";
+import { downloadData, getCanTableDownload, onTableDownload } from "./utils";
+
+export const TABLE_DOWNLOAD: TableFeature = {
+  createColumn: <TData extends RowData, TValue>(
+    column: Column<TData, TValue>,
+    table: Table<TData>
+  ): void => {
+    column.getCanTableDownload = (): boolean =>
+      getCanTableDownload(column, table);
+  },
+  createTable: <T extends RowData>(table: Table<T>): void => {
+    table.downloadData = (): void => downloadData(table);
+  },
+  getDefaultOptions: <T extends RowData>(): Partial<
+    TableOptionsResolved<T>
+  > => ({ enableTableDownload: false, onTableDownload }),
+};

package/src/components/Table/features/TableDownload/onDownload/utils.ts

@@ -0,0 +1,76 @@
+import { Column, RowData, Table } from "@tanstack/react-table";
+import { getColumnHeader } from "../../../common/utils";
+
+/**
+ * Format data to TSV string.
+ * @param data - Table data.
+ * @returns table data formatted into a TSV string.
+ */
+export function formatDataToTSV(data: unknown[][]): string {
+  return data
+    .map((row) => {
+      return row
+        .map((value) => {
+          // Use empty string in place of undefined and null.
+          if (value === undefined || value === null) return "";
+
+          // Convert unknown value to string.
+          let valueStr: string;
+
+          // Test if object / array.
+          if (typeof value === "object") {
+            if (Array.isArray(value)) {
+              // Handle array.
+              valueStr = value.join(", ") || "";
+            } else {
+              // Handle object.
+              valueStr = JSON.stringify(value);
+            }
+          } else {
+            // Handle primitive.
+            valueStr = String(value);
+          }
+
+          // Quote if necessary.
+          return /[\t\r\n"]/.test(valueStr)
+            ? `"${valueStr.replaceAll('"', '""')}"`
+            : valueStr;
+        })
+        .join("\t");
+    })
+    .join("\n");
+}
+
+export function getBlob<T extends RowData>(table: Table<T>): Blob | undefined {
+  const rows = table.getRowModel().rows;
+
+  if (rows.length === 0) return;
+
+  // Get downloadable columns based on getCanDownload property.
+  const downloadableColumns = getDownloadableColumns(table);
+
+  // Extract column IDs for filtering.
+  const downloadableColumnIds = downloadableColumns.map((column) => column.id);
+
+  // Get table headers from downloadable columns.
+  const tableHeaders = downloadableColumns.map(getColumnHeader);
+
+  // Get row data but only for downloadable columns.
+  const tableData = rows.map((row) =>
+    downloadableColumnIds.map((columnId) => row.getValue(columnId))
+  );
+
+  const tsv = formatDataToTSV([tableHeaders, ...tableData]);
+  return new Blob([tsv], { type: "text/tab-separated-values" });
+}
+
+/**
+ * Filters table columns from column.getCanDownload API.
+ * @param table - Table.
+ * @returns Columns configured to be downloadable.
+ */
+export function getDownloadableColumns<T extends RowData>(
+  table: Table<T>
+): Column<T>[] {
+  return table.getAllColumns().filter((column) => column.getCanTableDownload());
+}

package/src/components/Table/features/TableDownload/types.ts

@@ -0,0 +1,19 @@
+import { RowData, Table } from "@tanstack/react-table";
+
+export interface TableDownloadColumn {
+  getCanTableDownload: () => boolean;
+}
+
+export interface TableDownloadColumnDef {
+  enableTableDownload?: boolean;
+}
+
+export interface TableDownloadInstance {
+  downloadData: () => void;
+}
+
+export interface TableDownloadOptions<T extends RowData> {
+  downloadFilename?: string;
+  enableTableDownload?: boolean;
+  onTableDownload?: (table: Table<T>) => void;
+}

package/src/components/Table/features/TableDownload/utils.ts

@@ -0,0 +1,60 @@
+import { Column, RowData, Table } from "@tanstack/react-table";
+import { getBlob } from "./onDownload/utils";
+
+/**
+ * Function that downloads the table data as a TSV file.
+ * Uses the onDownload callback, or a custom download function if provided.
+ * @param table - Table.
+ */
+export function downloadData<T extends RowData>(table: Table<T>): void {
+  table.options.onTableDownload?.(table);
+}
+
+/**
+ * Returns true if column can be downloaded.
+ * @param column - Column.
+ * @param table - Table.
+ * @returns True if column can be downloaded.
+ */
+export function getCanTableDownload<T extends RowData, TValue>(
+  column: Column<T, TValue>,
+  table: Table<T>
+): boolean {
+  return (
+    (column.columnDef.enableTableDownload ?? true) &&
+    (table.options.enableTableDownload ?? false)
+  );
+}
+
+/**
+ * Default download function that downloads the table data as a TSV file.
+ * @param table - Table.
+ */
+export function onTableDownload<T extends RowData>(table: Table<T>): void {
+  // Check if download is enabled.
+  if (!(table.options.enableTableDownload ?? false)) return;
+
+  // Generate the blob.
+  const blob = getBlob(table);
+  if (!blob) return;
+
+  // Create an object URL for the blob.
+  const url = URL.createObjectURL(blob);
+
+  // Create a download link.
+  const anchorEl = document.createElement("a");
+  anchorEl.href = url;
+  anchorEl.download = table.options.downloadFilename || "table-data.tsv";
+
+  // Append to the document body for better cross-browser support.
+  document.body.appendChild(anchorEl);
+
+  // Trigger the download.
+  anchorEl.click();
+
+  // Remove the element after triggering download.
+  document.body.removeChild(anchorEl);
+
+  // Clean up.
+  URL.revokeObjectURL(url);
+}

package/src/components/Table/features/entities.ts

@@ -6,9 +6,25 @@ import {
   RowPreviewRow,
   RowPreviewTableState,
 } from "./RowPreview/entities";
+import {
+  TableDownloadColumn,
+  TableDownloadInstance,
+  TableDownloadOptions,
+} from "./TableDownload/types";
+
+export type CustomFeatureColumn = TableDownloadColumn;
+
+export interface CustomFeatureInstance<T extends RowData>
+  extends TableDownloadInstance,
+    RowPreviewInstance<T> {}
 
 export type CustomFeatureInitialTableState = Partial<RowPreviewTableState>;
-export type CustomFeatureInstance<T extends RowData> = RowPreviewInstance<T>;
-export type CustomFeatureOptions = RowPreviewOptions & RowPositionOptions;
-export type CustomFeatureRow = RowPositionRow & RowPreviewRow;
+
+export interface CustomFeatureOptions<T extends RowData>
+  extends TableDownloadOptions<T>,
+    RowPositionOptions,
+    RowPreviewOptions {}
+
+export interface CustomFeatureRow extends RowPositionRow, RowPreviewRow {}
+
 export type CustomFeatureTableState = RowPreviewTableState;

package/src/config/entities.ts

@@ -277,7 +277,6 @@ export interface ListConfig<T extends RowData> {
  */
 export interface ListViewConfig {
   disablePagination?: boolean;
-  enableDownload?: boolean;
   rowPreviewView?: ComponentsConfig; // Row preview view is expected to be a modal or drawer or similar.
   rowSelectionView?: ComponentsConfig;
 }

package/types/data-explorer-ui.d.ts

@@ -23,6 +23,7 @@ import { Components } from "rehype-react";
 import { DataLayer } from "../src/common/analytics/entities";
 import { DataDictionaryAnnotation } from "../src/common/entities";
 import {
+  CustomFeatureColumn,
   CustomFeatureInitialTableState,
   CustomFeatureInstance,
   CustomFeatureOptions,
@@ -244,6 +245,14 @@ declare module "@emotion/react" {
 }
 
 declare module "@tanstack/react-table" {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars -- TData and TValue are unused variables.
+  interface Column<TData extends RowData, TValue> extends CustomFeatureColumn {}
+
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars -- TData and TValue are unused variables.
+  interface ColumnDefBase<TData extends RowData, TValue> {
+    enableTableDownload?: boolean;
+  }
+
   // eslint-disable-next-line @typescript-eslint/no-unused-vars -- TData and TValue are unused variables.
   interface ColumnMeta<TData extends RowData, TValue> {
     align?: TableCellProps["align"];
@@ -253,10 +262,13 @@ declare module "@tanstack/react-table" {
     header?: string;
     width?: GridTrackSize;
   }
+
   // eslint-disable-next-line @typescript-eslint/no-empty-interface -- empty interface is needed for extending.
   interface InitialTableState extends CustomFeatureInitialTableState {}
+
   // eslint-disable-next-line @typescript-eslint/no-empty-interface, @typescript-eslint/no-unused-vars -- empty interface is needed for extending, TData is an unused variable.
   interface Row<TData extends RowData> extends CustomFeatureRow {}
+
   // eslint-disable-next-line @typescript-eslint/no-unused-vars -- TData is an unused variables.
   interface SortingOptions<TData extends RowData> {
     /**
@@ -265,11 +277,13 @@ declare module "@tanstack/react-table" {
      */
     enableSortingInteraction?: boolean;
   }
+
   // eslint-disable-next-line @typescript-eslint/no-empty-interface -- empty interface is needed for extending.
   interface Table<TData extends RowData> extends CustomFeatureInstance<TData> {}
-  // eslint-disable-next-line @typescript-eslint/no-empty-interface, @typescript-eslint/no-unused-vars -- empty interface is needed for extending, TData is an unused variable.
+
   interface TableOptionsResolved<TData extends RowData>
-    extends CustomFeatureOptions {}
+    extends CustomFeatureOptions<TData> {}
+
   // eslint-disable-next-line @typescript-eslint/no-empty-interface -- empty interface is needed for extending.
   interface TableState extends CustomFeatureTableState {}
 }

package/lib/components/Table/components/DownloadEntityResults/downloadEntityResults.d.ts

@@ -1,6 +0,0 @@
-import { Row, RowData } from "@tanstack/react-table";
-export interface DownloadEntityResultsProps<T extends RowData> {
-    entityName: string;
-    rows: Row<T>[];
-}
-export declare const DownloadEntityResults: <T extends RowData>({ entityName, rows, }: DownloadEntityResultsProps<T>) => JSX.Element;

package/lib/components/Table/components/DownloadEntityResults/downloadEntityResults.js

@@ -1,18 +0,0 @@
-import React from "react";
-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 const DownloadEntityResults = ({ entityName, rows, }) => {
-    const [fileUrl, setFileUrl] = React.useState(undefined);
-    const onDownload = () => {
-        const blob = generateDownloadBlob(rows);
-        if (blob) {
-            setFileUrl(window.URL.createObjectURL(blob));
-        }
-    };
-    return (React.createElement(React.Fragment, null,
-        React.createElement(StyledButton, { ...BUTTON_PROPS.SECONDARY_CONTAINED, onClick: () => onDownload(), startIcon: React.createElement(DownloadIcon, null) }, "Download TSV"),
-        React.createElement(FileDownloadButton, { fileName: `${entityName}.tsv`, fileUrl: fileUrl })));
-};

package/lib/components/common/Button/components/FileDownloadButton/fileDownloadButton.d.ts

@@ -1,5 +0,0 @@
-export interface FileDownloadButtonProps {
-    fileName?: string;
-    fileUrl?: string;
-}
-export declare const FileDownloadButton: ({ fileName, fileUrl, }: FileDownloadButtonProps) => JSX.Element;

package/lib/components/common/Button/components/FileDownloadButton/fileDownloadButton.js

@@ -1,14 +0,0 @@
-import { Box } from "@mui/material";
-import React, { useEffect, useRef } from "react";
-export const FileDownloadButton = ({ fileName, fileUrl, }) => {
-    const downloadRef = useRef(null);
-    // Initiates file download when file url request is successful.
-    useEffect(() => {
-        if (downloadRef.current && fileName && fileUrl) {
-            downloadRef.current.setAttribute("href", fileUrl);
-            downloadRef.current.setAttribute("download", fileName);
-            downloadRef.current.click();
-        }
-    }, [fileName, fileUrl]);
-    return (React.createElement(Box, { component: "a", download: true, ref: downloadRef, sx: { display: "none" } }));
-};

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

@@ -1,39 +0,0 @@
-import { Row, RowData } from "@tanstack/react-table";
-import React from "react";
-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;
-  rows: Row<T>[];
-}
-
-export const DownloadEntityResults = <T extends RowData>({
-  entityName,
-  rows,
-}: DownloadEntityResultsProps<T>): JSX.Element => {
-  const [fileUrl, setFileUrl] = React.useState<string | undefined>(undefined);
-
-  const onDownload = (): void => {
-    const blob = generateDownloadBlob(rows);
-    if (blob) {
-      setFileUrl(window.URL.createObjectURL(blob));
-    }
-  };
-
-  return (
-    <>
-      <StyledButton
-        {...BUTTON_PROPS.SECONDARY_CONTAINED}
-        onClick={(): void => onDownload()}
-        startIcon={<DownloadIcon />}
-      >
-        Download TSV
-      </StyledButton>
-      <FileDownloadButton fileName={`${entityName}.tsv`} fileUrl={fileUrl} />
-    </>
-  );
-};