Feat(cpgweb: search widget): Add csv file viewer

broadinstitute · Jun 3, 2024 · c09dd37 · c09dd37
1 parent 382f0da
commit c09dd37
Show file tree

Hide file tree

Showing 10 changed files with 279 additions and 116 deletions.
diff --git a/cpgweb/package-lock.json b/cpgweb/package-lock.json
diff --git a/cpgweb/package.json b/cpgweb/package.json
@@ -28,12 +28,14 @@
  "bootstrap": "^5.3.3",
  "class-variance-authority": "^0.7.0",
  "clsx": "^2.1.1",
+ "d3-dsv": "^3.0.1",
  "immutable": "5.0.0-beta.5",
  "lucide-react": "^0.378.0",
  "next": "14.2.0",
  "next-themes": "^0.3.0",
  "react": "^18",
  "react-bootstrap": "^2.10.2",
+ "react-datasheet-grid": "^4.11.4",
  "react-dom": "^18",
  "react-wrap-balancer": "^1.1.0",
  "style-loader": "^4.0.0",
@@ -45,6 +47,7 @@
  "xterm-addon-webgl": "^0.16.0"
  },
  "devDependencies": {
+ "@types/d3-dsv": "^3.0.7",
  "@types/fontfaceobserver": "^2.1.3",
  "@types/node": "^20",
  "@types/react": "^18",

diff --git a/cpgweb/src/app/layout.tsx b/cpgweb/src/app/layout.tsx
@@ -2,6 +2,7 @@
 "use client";
 import Link from "next/link";
 import { Inter as FontSans } from "next/font/google";
+import 'react-datasheet-grid/dist/style.css';
 import "../styles/globals.css";
 import { cn } from "@/src/lib/utils";
 import { ThemeProvider } from "@/src/components/theme-provider";

diff --git a/cpgweb/src/app/search/columns.tsx b/cpgweb/src/app/search/columns.tsx
@@ -7,84 +7,7 @@ import { Button } from "../../components/ui/button";
 import { Download, Eye, Loader2 } from "lucide-react";
 import { get_key_file } from "../../lib/cpg_ops";
 import React from "react";
-import { FileViewer } from "./file-viewer"
-
-// export const columns: ColumnDef<THit>[] = [
-// {
-// accessorKey: "objectID",
-// header: "Object ID",
-// cell: ({ row }) => <div>{row.getValue("objectID")}</div>,
-// },
-// {
-// accessorKey: "project_id",
-// header: "Project ID",
-// cell: ({ row }) => <div>{row.getValue("project_id")}</div>,
-// },
-// {
-// accessorKey: "Col",
-// header: "Col",
-// cell: ({ row }) => <div>{row.getValue("Col")}</div>,
-// },
-// {
-// accessorKey: "Assay_Plate_Barcode",
-// header: "Assay Plate Barcode",
-// cell: ({ row }) => <div>{row.getValue("Assay_Plate_Barcode")}</div>,
-// },
-// {
-// accessorKey: "Name",
-// header: "Name",
-// cell: ({ row }) => <div>{row.getValue("Name")}</div>,
-// },
-// {
-// accessorKey: "PlateName",
-// header: "PlateName",
-// cell: ({ row }) => <div>{row.getValue("PlateName")}</div>,
-// },
-// {
-// accessorKey: "Plate_Map_Name",
-// header: "Plate Map Name",
-// cell: ({ row }) => <div>{row.getValue("Plate_Map_Name")}</div>,
-// },
-// {
-// accessorKey: "PublicID",
-// header: "Public ID",
-// cell: ({ row }) => <div>{row.getValue("PublicID")}</div>,
-// },
-// {
-// accessorKey: "Row",
-// header: "Row",
-// cell: ({ row }) => <div>{row.getValue("Row")}</div>,
-// },
-// {
-// accessorKey: "key",
-// header: "Key",
-// cell: ({ row }) => <div>{row.getValue("key")}</div>,
-// },
-// {
-// accessorKey: "_highlightResult",
-// header: "Hightlight Result",
-// cell: ({ row }) => {
-// const value: any = row.getValue("_highlightResult");
-
-// const keys = Object.keys(value).filter(
-// (key) => key !== "objectID" && key !== "project_id"
-// );
-
-// return (
-// <div>
-// {keys.map((key) => {
-// return (
-// <div key={key} className="flex">
-// <div className="text-red-400 w-36">{key}</div>
-// <div>{value[key].value}</div>
-// </div>
-// );
-// })}
-// </div>
-// );
-// },
-// },
-// ];
+import { FileViewer } from "./file-viewer";
 
 export const columns: ColumnDef<THit>[] = [
  {
@@ -153,7 +76,7 @@ function ProjectKeyActions(props: TProjectKeyActions) {
  setIsDownloadLoading(false);
  return;
  }
- downloadData(data);
+ downloadData(data as Uint8Array);
  }}
  >
  {isDownloadLoading && (