Add TableArtifactViewer

optuna_dashboard/ts/components/Artifact/ArtifactCardMedia.tsx

@@ -2,6 +2,7 @@ import InsertDriveFileIcon from "@mui/icons-material/InsertDriveFile"
 import { Box, CardMedia } from "@mui/material"
 import React, { FC } from "react"
 import { Artifact } from "ts/types/optuna"
+import { TableArtifactViewer, isTableArtifact } from "./TableArtifactViewer"
 import {
   ThreejsArtifactViewer,
   isThreejsArtifact,
@@ -13,7 +14,14 @@ export const ArtifactCardMedia: FC<{
   urlPath: string
   height: string
 }> = ({ artifact, urlPath, height }) => {
-  if (isThreejsArtifact(artifact)) {
+  if (isTableArtifact(artifact)) {
+    return (
+      <TableArtifactViewer
+        src={urlPath}
+        filetype={artifact.filename.split(".").pop()}
+      />
+    )
+  } else if (isThreejsArtifact(artifact)) {
     return (
       <ThreejsArtifactViewer
         src={urlPath}

optuna_dashboard/ts/components/Artifact/TableArtifactViewer.tsx

@@ -0,0 +1,58 @@
+import Papa from "papaparse"
+import React, { useState } from "react"
+import { DataGrid } from "../DataGrid"
+
+import { Artifact } from "ts/types/optuna"
+
+export const isTableArtifact = (artifact: Artifact): boolean => {
+  return (
+    artifact.filename.endsWith(".csv") || artifact.filename.endsWith(".jsonl")
+  )
+}
+
+interface TableArtifactViewerProps {
+  src: string
+  filetype: string | undefined
+}
+
+type Data = {
+  [key: string]: any
+}
+
+export const TableArtifactViewer: React.FC<TableArtifactViewerProps> = (
+  props
+) => {
+  const [data, setData] = useState<Data[]>([])
+  const handleFileChange = async () => {
+    const loadedData = await loadCSV(props)
+    setData(loadedData)
+  }
+  handleFileChange()
+  console.log(data)
+
+  const columns = React.useMemo(() => {
+    const keys = data[0] ? Object.keys(data[0]) : []
+    console.log(keys)
+    return keys.map((key) => ({
+      accessorKey: key,
+      header: key,
+    }))
+  }, [data])
+
+  return <DataGrid data={data} columns={columns} />
+}
+
+const loadCSV = (props: TableArtifactViewerProps): any => {
+  return new Promise((resolve, reject) => {
+    Papa.parse(props.src, {
+      header: true,
+      download: true,
+      complete: (results: any) => {
+        resolve(results?.data)
+      },
+      error: () => {
+        reject(new Error("csv parse err"))
+      },
+    })
+  })
+}