From 800ac88ff20b3e97fba3772f363df7ede0de6851 Mon Sep 17 00:00:00 2001
From: Kris McGinnes <kmcginnes@me.com>
Date: Thu, 11 Apr 2024 19:43:20 -0500
Subject: [PATCH] Fix CSV export (#297)

---
 .../src/components/Tabular/Tabular.tsx        |  6 +-
 .../Tabular/TabularControlsProvider.tsx       |  6 +-
 .../ColumnSettingsControl/ColumnItem.tsx      |  4 +-
 .../ExternalColumnSettingsControl.tsx         |  4 +-
 .../ExportControl/ExternalExportControl.tsx   |  4 +-
 .../controls/ExportControl/transfomerToCsv.ts | 56 +++++++++----------
 .../helpers/tableInstanceToTabularInstance.ts |  6 +-
 7 files changed, 42 insertions(+), 44 deletions(-)

diff --git a/packages/graph-explorer/src/components/Tabular/Tabular.tsx b/packages/graph-explorer/src/components/Tabular/Tabular.tsx
index ce9552a45..2a5e979a4 100644
--- a/packages/graph-explorer/src/components/Tabular/Tabular.tsx
+++ b/packages/graph-explorer/src/components/Tabular/Tabular.tsx
@@ -54,7 +54,7 @@ export interface TabularProps<T extends object> extends TabularOptions<T> {
   globalSearch?: string;
 }
 
-export const Tabular = <T extends object>(
+export const Tabular = <T extends Record<string, unknown>>(
   {
     children,
     classNamePrefix = "ft",
@@ -129,7 +129,7 @@ export const Tabular = <T extends object>(
   );
 };
 
-const TabularContent = <T extends object>({
+const TabularContent = <T extends Record<string, unknown>>({
   children,
   classNamePrefix = "ft",
   className,
@@ -277,7 +277,7 @@ const TabularContent = <T extends object>({
   );
 };
 
-export default forwardRef(Tabular) as <T extends object>(
+export default forwardRef(Tabular) as <T extends Record<string, unknown>>(
   props: PropsWithChildren<TabularProps<T>> & {
     ref?: ForwardedRef<TabularInstance<T>>;
   }
diff --git a/packages/graph-explorer/src/components/Tabular/TabularControlsProvider.tsx b/packages/graph-explorer/src/components/Tabular/TabularControlsProvider.tsx
index 92ac074d7..8b4d887ed 100644
--- a/packages/graph-explorer/src/components/Tabular/TabularControlsProvider.tsx
+++ b/packages/graph-explorer/src/components/Tabular/TabularControlsProvider.tsx
@@ -10,7 +10,7 @@ import {
 
 import type { TabularInstance } from "./helpers/tableInstanceToTabularInstance";
 
-type TabularContextValue<T extends object> = {
+type TabularContextValue<T extends Record<string, unknown>> = {
   tableRef: RefObject<HTMLDivElement>;
   instance: TabularInstance<T>;
   headerControlsRef: RefObject<HTMLDivElement>;
@@ -19,7 +19,7 @@ type TabularContextValue<T extends object> = {
   disablePagination?: boolean;
 };
 
-const createTabularContext = <T extends object = any>(
+const createTabularContext = <T extends Record<string, unknown> = any>(
   defaultValue: TabularContextValue<T>
 ) => {
   return createContext<TabularContextValue<T>>(defaultValue);
@@ -28,7 +28,7 @@ const createTabularContext = <T extends object = any>(
 // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
 const TabularContext = createTabularContext(undefined!);
 
-const TabularControlsProvider = <T extends object>({
+const TabularControlsProvider = <T extends Record<string, unknown>>({
   tabularInstance,
   children,
 }: PropsWithChildren<{ tabularInstance: TabularInstance<T> }>) => {
diff --git a/packages/graph-explorer/src/components/Tabular/controls/ColumnSettingsControl/ColumnItem.tsx b/packages/graph-explorer/src/components/Tabular/controls/ColumnSettingsControl/ColumnItem.tsx
index 73d11e89e..11cb4cf70 100644
--- a/packages/graph-explorer/src/components/Tabular/controls/ColumnSettingsControl/ColumnItem.tsx
+++ b/packages/graph-explorer/src/components/Tabular/controls/ColumnSettingsControl/ColumnItem.tsx
@@ -5,14 +5,14 @@ import Switch from "../../../Switch";
 import type { TabularInstance } from "../../helpers/tableInstanceToTabularInstance";
 import { useTabularControl } from "../../TabularControlsProvider";
 
-type ColumnItemProps<T extends object> = {
+type ColumnItemProps<T extends Record<string, unknown>> = {
   classNamePrefix: string;
   columnId: string;
   column: TabularInstance<T>["columns"][number];
   index: number;
 };
 
-const ColumnItem = <T extends object>({
+const ColumnItem = <T extends Record<string, unknown>>({
   classNamePrefix,
   columnId,
   column,
diff --git a/packages/graph-explorer/src/components/Tabular/controls/ColumnSettingsControl/ExternalColumnSettingsControl.tsx b/packages/graph-explorer/src/components/Tabular/controls/ColumnSettingsControl/ExternalColumnSettingsControl.tsx
index c1e12b3bc..e894a3ab5 100644
--- a/packages/graph-explorer/src/components/Tabular/controls/ColumnSettingsControl/ExternalColumnSettingsControl.tsx
+++ b/packages/graph-explorer/src/components/Tabular/controls/ColumnSettingsControl/ExternalColumnSettingsControl.tsx
@@ -20,7 +20,7 @@ const rootStyles = () => css`
   align-items: center;
 `;
 
-interface ColumnOrderControlProps<T extends object> {
+interface ColumnOrderControlProps<T extends Record<string, unknown>> {
   instance: TabularInstance<T>;
   classNamePrefix?: string;
   className?: string;
@@ -34,7 +34,7 @@ const reorder = (list: string[], startIndex: number, endIndex: number) => {
   return result;
 };
 
-export const ColumnSettingsControl = <T extends object>({
+export const ColumnSettingsControl = <T extends Record<string, unknown>>({
   classNamePrefix = "ft",
   className,
 }: ColumnOrderControlProps<T>) => {
diff --git a/packages/graph-explorer/src/components/Tabular/controls/ExportControl/ExternalExportControl.tsx b/packages/graph-explorer/src/components/Tabular/controls/ExportControl/ExternalExportControl.tsx
index 5810e5c25..8eac2504e 100644
--- a/packages/graph-explorer/src/components/Tabular/controls/ExportControl/ExternalExportControl.tsx
+++ b/packages/graph-explorer/src/components/Tabular/controls/ExportControl/ExternalExportControl.tsx
@@ -24,14 +24,14 @@ const rootStyles = () => css`
   align-items: center;
 `;
 
-type ExportControlProps<T extends object> = {
+type ExportControlProps<T extends Record<string, unknown>> = {
   classNamePrefix?: string;
   className?: string;
   omittedColumnsIds?: string[];
   instance: TabularInstance<T>;
 };
 
-export const ExternalExportControl = <T extends object>({
+export const ExternalExportControl = <T extends Record<string, unknown>>({
   classNamePrefix = "ft",
   className,
   omittedColumnsIds,
diff --git a/packages/graph-explorer/src/components/Tabular/controls/ExportControl/transfomerToCsv.ts b/packages/graph-explorer/src/components/Tabular/controls/ExportControl/transfomerToCsv.ts
index bdfd4bce5..ad8c3e9fc 100644
--- a/packages/graph-explorer/src/components/Tabular/controls/ExportControl/transfomerToCsv.ts
+++ b/packages/graph-explorer/src/components/Tabular/controls/ExportControl/transfomerToCsv.ts
@@ -3,35 +3,35 @@ import type { Row } from "react-table";
 import type { TabularColumnInstance } from "../../helpers/tableInstanceToTabularInstance";
 import getNestedObjectValue from "./getNestedObjectValue";
 
-const transformToCsv = (
-  currentDataSource: readonly any[],
+export default function transformToCsv<T extends Record<string, unknown>>(
+  currentDataSource: readonly T[] | Row<T>[],
   selectedColumns: Record<string, boolean>,
-  columns: TabularColumnInstance<any>[]
-) => {
-  const filteredRows = currentDataSource.map((row: any | Row<any>) => {
-    return Object.entries(selectedColumns).reduce(
-      (cells, [columnId, shouldExport]) => {
-        if (shouldExport) {
-          const colDef = columns.find(
-            colDef => colDef.instance.id === columnId
-          )?.definition;
-
-          if (typeof colDef?.accessor === "string") {
-            cells.push(
-              getNestedObjectValue(row.original || row, columnId.split("."))
-            );
-          } else {
-            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-            // @ts-ignore
-            cells.push(colDef?.accessor?.(row));
+  columns: TabularColumnInstance<T>[]
+) {
+  const filteredRows = currentDataSource
+    .map(row => (row as Row<T>).original || row)
+    .map(row => {
+      return Object.entries(selectedColumns).reduce(
+        (cells, [columnId, shouldExport]) => {
+          if (shouldExport) {
+            const colDef = columns.find(
+              colDef => colDef.instance.id === columnId
+            )?.definition;
+
+            if (typeof colDef?.accessor === "string") {
+              cells.push(getNestedObjectValue(row, columnId.split(".")));
+            } else {
+              // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+              // @ts-ignore
+              cells.push(colDef?.accessor?.(row));
+            }
           }
-        }
 
-        return cells;
-      },
-      [] as (string | number)[]
-    );
-  }, []);
+          return cells;
+        },
+        [] as (string | number)[]
+      );
+    }, []);
 
   const headers = Object.entries(selectedColumns).reduce<string[]>(
     (header, [columnId, shouldExport]) => {
@@ -50,6 +50,4 @@ const transformToCsv = (
   );
 
   return unparse([headers, ...filteredRows], { header: false });
-};
-
-export default transformToCsv;
+}
diff --git a/packages/graph-explorer/src/components/Tabular/helpers/tableInstanceToTabularInstance.ts b/packages/graph-explorer/src/components/Tabular/helpers/tableInstanceToTabularInstance.ts
index ffd2433c3..91bac2d4a 100644
--- a/packages/graph-explorer/src/components/Tabular/helpers/tableInstanceToTabularInstance.ts
+++ b/packages/graph-explorer/src/components/Tabular/helpers/tableInstanceToTabularInstance.ts
@@ -22,12 +22,12 @@ import {
 import type { TabularProps } from "../Tabular";
 import type { ColumnDefinition } from "../useTabular";
 
-export type TabularColumnInstance<T extends object> = {
+export type TabularColumnInstance<T extends Record<string, unknown>> = {
   instance: ColumnInstance<T>;
   definition?: ColumnDefinition<T>;
 };
 
-export type TabularInstance<T extends object> = {
+export type TabularInstance<T extends Record<string, unknown>> = {
   /**
    * Original data
    */
@@ -142,7 +142,7 @@ export type TabularInstance<T extends object> = {
   initialHiddenColumns: Array<IdType<T>>;
 };
 
-const tableInstanceToTabularInstance = <T extends object>(
+const tableInstanceToTabularInstance = <T extends Record<string, unknown>>(
   tableInstance: TableInstance<T>,
   tableProps: TabularProps<T>
 ): TabularInstance<T> => {