feat: Render CSV and JSON files as tables

This change adds a table renderer to nicely display CSV and JSON files.  Like the HTML Renderer, the user can drop down into the raw view of the data.

packages/frontend/package.json

@@ -29,6 +29,7 @@
     "mdast-util-find-and-replace": "2.1.0",
     "nanoid": "3.3.4",
     "node-emoji": "1.11.0",
+    "papaparse": "5.3.2",
     "parsimmon": "1.18.1",
     "react": "18.1.0",
     "react-ace": "10.1.0",
@@ -52,6 +53,7 @@
     "react-router-dom": "6.3.0",
     "react-select": "4.3.1",
     "react-syntax-highlighter": "15.5.0",
+    "react-table": "7.8.0",
     "react-vega": "7.5.1",
     "redux-persist": "6.0.0",
     "rehype-autolink-headings": "6.1.1",
@@ -78,12 +80,14 @@
     "@types/jest": "27.4.1",
     "@types/luxon": "2.3.2",
     "@types/node-emoji": "1.8.1",
+    "@types/papaparse": "5.3.2",
     "@types/parsimmon": "1.10.6",
     "@types/react": "18.0.9",
     "@types/react-datepicker": "4.4.1",
     "@types/react-dom": "18.0.4",
     "@types/react-linkify": "1.0.1",
     "@types/react-router-dom": "5.3.3",
+    "@types/react-table": "7.7.12",
     "@typescript-eslint/eslint-plugin": "5.25.0",
     "@typescript-eslint/parser": "5.24.0",
     "@vitejs/plugin-react": "1.3.2",

packages/frontend/src/components/file-viewer/file-viewer.tsx

@@ -30,8 +30,10 @@ import { useScrollToLocation } from '../../shared/use-scroll-to-location';
 import { useFetch } from '../../shared/useFetch';
 import { MarkdownContainer } from '../markdown-container/markdown-container';
 import { CodeRenderer } from '../renderers/code-renderer/code-renderer';
+import { CsvRenderer } from '../renderers/csv-renderer/csv-renderer';
 import { HtmlRenderer } from '../renderers/html-renderer/html-renderer';
 import { ImageRenderer } from '../renderers/image-renderer/image-renderer';
+import { JsonRenderer } from '../renderers/json-renderer/json-renderer';
 import { PdfRenderer } from '../renderers/pdf-renderer/pdf-renderer';
 import { VideoRenderer } from '../renderers/video-renderer/video-renderer';
 
@@ -230,6 +232,28 @@ export const FileViewer = ({
           canDisplayRendered = !canDisplayRaw;
           break;
 
+        case MIME_VIEWER.Csv:
+          unpause();
+          if (mode === 'rendered') {
+            renderer = <CsvRenderer contents={fetchedContents} />;
+          } else if (mode === 'raw') {
+            renderer = <CodeRenderer contents={fetchedContents} language="csv" />;
+          }
+          canDisplayRaw = mode === 'rendered';
+          canDisplayRendered = !canDisplayRaw;
+          break;
+
+        case MIME_VIEWER.Json:
+          unpause();
+          if (mode === 'rendered') {
+            renderer = <JsonRenderer contents={fetchedContents} />;
+          } else if (mode === 'raw') {
+            renderer = <CodeRenderer contents={fetchedContents} language="json" />;
+          }
+          canDisplayRaw = mode === 'rendered';
+          canDisplayRendered = !canDisplayRaw;
+          break;
+
         case MIME_VIEWER.None:
           pause();
           renderer = <Alert warning="File type not cannot be previewed." />;

packages/frontend/src/components/renderers/csv-renderer/csv-renderer.tsx

@@ -0,0 +1,45 @@
+/**
+ * Copyright 2022 Expedia, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import Papa from 'papaparse';
+import { useMemo } from 'react';
+
+import { TableRenderer } from '../table-renderer/table-renderer';
+
+export const CsvRenderer = ({ contents }) => {
+  const results = useMemo(() => {
+    if (contents) {
+      // Parse CSV file to extract columns and data
+      const { data, meta } = Papa.parse<any>(contents, { header: true });
+
+      const columns = meta.fields?.map((column) => ({
+        Header: column,
+        accessor: column
+      }));
+
+      return {
+        columns,
+        data
+      };
+    }
+  }, [contents]);
+
+  if (results === undefined) {
+    return null;
+  }
+
+  return <TableRenderer {...results} />;
+};

packages/frontend/src/components/renderers/json-renderer/json-renderer.tsx

@@ -0,0 +1,45 @@
+/**
+ * Copyright 2022 Expedia, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { useMemo } from 'react';
+
+import { TableRenderer } from '../table-renderer/table-renderer';
+
+export const JsonRenderer = ({ contents }) => {
+  const results = useMemo(() => {
+    if (contents) {
+      const data = JSON.parse(contents);
+
+      // Assume all the columns are in the first row
+      // We could extend this to take a larger sample of data to determine the columns
+      const columns = Object.keys(data[0]).map((column) => ({
+        Header: column,
+        accessor: column
+      }));
+
+      return {
+        columns,
+        data
+      };
+    }
+  }, [contents]);
+
+  if (results === undefined) {
+    return null;
+  }
+
+  return <TableRenderer {...results} />;
+};