use the same stringify function

Author: severo

src/components/Cell.tsx

@@ -2,6 +2,7 @@ import { asyncBufferFromUrl, parquetMetadataAsync } from 'hyparquet'
 import { useEffect, useState } from 'react'
 import type { FileSource } from '../lib/sources/types.js'
 import { parquetDataFrame } from '../lib/tableProvider.js'
+import { stringify } from '../lib/utils.js'
 import Breadcrumb, { BreadcrumbConfig } from './Breadcrumb.js'
 import Layout from './Layout.js'
 
@@ -75,30 +76,3 @@ export default function CellView({ source, row, col, config }: CellProps) {
     </Layout>
   )
 }
-
-/**
- * Robust stringification of any value, including json and bigints.
- */
-function stringify(value: unknown): string {
-  if (typeof value === 'string') return value
-  if (typeof value === 'number') return value.toLocaleString('en-US')
-  if (Array.isArray(value)) {
-    return `[\n${value.map((v) => indent(stringify(v), 2)).join(',\n')}\n]`
-  }
-  if (value === null || value === undefined) return JSON.stringify(value)
-  if (value instanceof Date) return value.toISOString()
-  if (typeof value === 'object') {
-    return `{${Object.entries(value)
-      .filter((d) => d[1] !== undefined)
-      .map(([k, v]) => `${k}: ${stringify(v)}`)
-      .join(', ')}}`
-  }
-  return '{}'
-}
-
-function indent(text: string | undefined, spaces: number) {
-  return text
-    ?.split('\n')
-    .map((line) => ' '.repeat(spaces) + line)
-    .join('\n')
-}

src/components/viewers/CellPanel.tsx

@@ -1,5 +1,6 @@
-import { DataFrame, stringify } from 'hightable'
+import { DataFrame } from 'hightable'
 import { useEffect, useState } from 'react'
+import { stringify } from '../../lib/utils.js'
 import ContentHeader from './ContentHeader.js'
 
 interface ViewerProps {
@@ -36,8 +37,7 @@ export default function CellPanel({ df, row, col, setProgress, setError, onClose
         if (asyncCell === undefined) {
           throw new Error(`Cell missing at column ${columnName}`)
         }
-        /* TODO(SL): use the same implementation of stringify, here and in Cell.tsx */
-        const text = await asyncCell.then(cell => stringify(cell as unknown) ?? '{}')
+        const text = await asyncCell.then(stringify)
         setText(text)
       } catch (error) {
         setError(error as Error)

src/components/viewers/ParquetView.tsx

@@ -4,6 +4,7 @@ import React, { useCallback, useEffect, useState } from 'react'
 import { RoutesConfig, appendSearchParams } from '../../lib/routes.js'
 import { FileSource } from '../../lib/sources/types.js'
 import { parquetDataFrame } from '../../lib/tableProvider.js'
+import { stringify } from '../../lib/utils.js'
 import classes from '../../styles/ParquetView.module.css'
 import { Spinner } from '../Layout.js'
 import CellPanel from './CellPanel.js'
@@ -103,6 +104,7 @@ export default function ParquetView({ source, setProgress, setError, config }: V
       onMouseDownCell={onMouseDownCell}
       onError={setError}
       className={classes.hightable}
+      stringify={stringify}
     />}
 
     {isLoading && <div className='center'><Spinner /></div>}

src/lib/utils.ts

@@ -97,3 +97,30 @@ export const contentTypes: Record<string, string> = {
 }
 
 export const imageTypes = ['.png', '.jpg', '.jpeg', '.gif', '.svg', '.tiff', '.webp']
+
+/**
+ * Robust stringification of any value, including json and bigints.
+ */
+export function stringify(value: unknown): string {
+  if (typeof value === 'string') return value
+  if (typeof value === 'number') return value.toLocaleString('en-US')
+  if (Array.isArray(value)) {
+    return `[\n${value.map((v) => indent(stringify(v), 2)).join(',\n')}\n]`
+  }
+  if (value === null || value === undefined) return JSON.stringify(value)
+  if (value instanceof Date) return value.toISOString()
+  if (typeof value === 'object') {
+    return `{${Object.entries(value)
+      .filter((d) => d[1] !== undefined)
+      .map(([k, v]) => `${k}: ${stringify(v)}`)
+      .join(', ')}}`
+  }
+  return '{}'
+}
+
+function indent(text: string | undefined, spaces: number) {
+  return text
+    ?.split('\n')
+    .map((line) => ' '.repeat(spaces) + line)
+    .join('\n')
+}