fix the content of the cell panel

Author: severo

src/components/CellPanel/CellPanel.tsx

@@ -1,5 +1,6 @@
-import { DataFrame, stringify } from 'hightable'
-import { ReactNode, useEffect, useState } from 'react'
+import type { DataFrame, ResolvedValue } from 'hightable'
+import { stringify } from 'hightable'
+import { ReactNode, useCallback, useEffect, useState } from 'react'
 import { useConfig } from '../../hooks/useConfig.js'
 import { cn } from '../../lib/utils.js'
 import ContentWrapper from '../ContentWrapper/ContentWrapper.js'
@@ -13,7 +14,7 @@ interface ViewerProps {
   row: number
   col: number
   setProgress: (progress: number) => void
-  setError: (error: Error) => void
+  setError: (error: unknown) => void
   onClose: () => void
 }
 
@@ -26,6 +27,31 @@ export default function CellPanel({ df, row, col, setProgress, setError, onClose
   const [content, setContent] = useState<ReactNode>()
   const { customClass } = useConfig()
 
+  const fillContent = useCallback((cell: ResolvedValue<unknown> | undefined) => {
+    let content: ReactNode
+    if (cell === undefined) {
+      content =
+        <code className={cn(jsonStyles.textView, customClass?.textView)}>
+          {UNLOADED_CELL_PLACEHOLDER}
+        </code>
+    } else {
+      const { value } = cell
+      if (value instanceof Object && !(value instanceof Date)) {
+        content =
+          <code className={cn(jsonStyles.jsonView, customClass?.jsonView)}>
+            <Json json={value} />
+          </code>
+      } else {
+        content =
+          <code className={cn(styles.textView, customClass?.textView)}>
+            {stringify(value)}
+          </code>
+      }
+    }
+    setContent(content)
+    setError(undefined)
+  }, [customClass?.textView, customClass?.jsonView, setError])
+
   // Load cell data
   useEffect(() => {
     async function loadCellData() {
@@ -36,31 +62,17 @@ export default function CellPanel({ df, row, col, setProgress, setError, onClose
         if (columnName === undefined) {
           throw new Error(`Column name missing at index col=${col}`)
         }
-        await df.fetch({ rowStart: row, rowEnd: row + 1, columns: [columnName] })
-        const cell = df.getCell({ row, column: columnName })
+        let cell = df.getCell({ row, column: columnName })
         if (cell === undefined) {
-          setContent(
-            <code className={cn(jsonStyles.textView, customClass?.textView)}>
-              {/* TODO(SL) maybe change the style to highlight it's not real content */}
-              {UNLOADED_CELL_PLACEHOLDER}
-            </code>
-          )
+          fillContent(undefined)
           return
         }
-        const value: unknown = await cell.value
-        if (value instanceof Object && !(value instanceof Date)) {
-          setContent(
-            <code className={cn(jsonStyles.jsonView, customClass?.jsonView)}>
-              <Json json={value} />
-            </code>
-          )
-        } else {
-          setContent(
-            <code className={cn(styles.textView, customClass?.textView)}>
-              {stringify(value)}
-            </code>
-          )
+        await df.fetch({ rowStart: row, rowEnd: row + 1, columns: [columnName] })
+        cell = df.getCell({ row, column: columnName })
+        if (cell === undefined) {
+          throw new Error(`Cell at row=${row}, column=${columnName} is undefined`)
         }
+        fillContent(cell)
       } catch (error) {
         setError(error as Error)
       } finally {
@@ -69,7 +81,7 @@ export default function CellPanel({ df, row, col, setProgress, setError, onClose
     }
 
     void loadCellData()
-  }, [df, col, row, setProgress, setError, customClass])
+  }, [df, col, row, setProgress, setError, fillContent])
 
   const headers = <>
     <SlideCloseButton onClick={onClose} />