Add dataset HTML repr

src/components/dashboard/datasets-accordion.js

@@ -1,22 +1,26 @@
 import { CodeBlock } from '@/components'
+import { useXarrayDatasetRepr } from '@/lib/endpoints'
 import { AddIcon, MinusIcon } from '@chakra-ui/icons'
 import {
   Accordion,
   AccordionButton,
   AccordionItem,
   AccordionPanel,
   Box,
+  Skeleton,
 } from '@chakra-ui/react'
-import React from 'react'
 
 export const DatasetCard = ({ dataset }) => {
   const parts = dataset.split('/')
   const name = parts[parts.length - 1]
+  const { repr, reprError, isLoading } = useXarrayDatasetRepr(dataset)
+
+  if (reprError) return <Box>Failed to load...</Box>
   const code = `import xarray as xr
 
 store = '${dataset}'
 ds = xr.open_dataset(store, engine='zarr', chunks={})
-print(ds)`
+ds`
   return (
     <AccordionItem>
       {({ isExpanded }) => (
@@ -37,6 +41,11 @@ print(ds)`
             <CodeBlock showLineNumbers language={'python'}>
               {code}
             </CodeBlock>
+            <Skeleton isLoaded={!isLoading}>
+              <Box>
+                <div dangerouslySetInnerHTML={{ __html: repr }} />
+              </Box>
+            </Skeleton>
           </AccordionPanel>
         </>
       )}

src/lib/endpoints.js

@@ -152,3 +152,16 @@ export const usePrefect = (id, active = true) => {
     isLoading: !data && !error,
   }
 }
+
+export const useXarrayDatasetRepr = (url) => {
+  const { data, error } = useSWR(
+    url ? `/api/repr/xarray?url=${url}` : null,
+    jsonFetcher,
+    { dedupingInterval: defaultDedupingInterval },
+  )
+  return {
+    repr: data?.html,
+    reprError: error,
+    isLoading: !data && !error,
+  }
+}

src/pages/api/prefect/[id].js

@@ -54,7 +54,6 @@ export default async function handler(req, res) {
     const result = await client.query({ query: QUERY, variables: { name } })
     res.status(200).json(result)
   } catch (err) {
-    console.log(err)
     res.status(500).json(JSON.stringify(err))
   }
 }

src/pages/api/repr/xarray.js

@@ -0,0 +1,29 @@
+export const config = {
+  runtime: 'experimental-edge',
+}
+
+const reprEndpoint = 'https://html-reprs.fly.dev'
+
+export default async function handler(req, res) {
+  const { searchParams } = new URL(req.url)
+
+  const datasetURL = searchParams.get('url')
+  const requestURL = `${reprEndpoint}/xarray/?url=${datasetURL}`
+
+  const headers = {
+    Accept: 'application/json',
+    'Cache-Control': 'public, s-maxage=86400, stale-while-revalidate=43200',
+  }
+
+  try {
+    const result = await fetch(requestURL, { headers })
+    return new Response(result.body, { status: result.status })
+  } catch (err) {
+    return new Response(
+      JSON.stringify({
+        error: `failed to load data. ${err.message}`,
+      }),
+      { status: 500 },
+    )
+  }
+}