updated to add duckdb

jeffreyaven · jeffreyaven · commit ed90972196e0 · 2025-02-12T12:02:19.000+11:00
diff --git a/src/components/layout/header.tsx b/src/components/layout/header.tsx
@@ -1,7 +1,7 @@
 import { AppBar, Paper, Button, Stack, Alert, Snackbar } from "@mui/material";
-
 import PlayCircleFilledWhiteIcon from "@mui/icons-material/PlayCircleFilledWhite";
 import DataObjectIcon from "@mui/icons-material/DataObject";
+import DatabaseIcon from "@mui/icons-material/Storage"; // New icon for DuckDB
 import GitHubIcon from "@mui/icons-material/GitHub";
 import IconButton from "@mui/material/IconButton";
 import "../../styles/Home.module.css";
@@ -14,13 +14,14 @@ import { useQueryContext } from "../../contexts/queryContext/useQueryContext";
 import MuiAlert, { AlertProps } from "@mui/material/Alert";
 import { AddUrlButton } from "./add-url-button";
 import { AlertMessage } from "./alert";
-import { fetchQuery } from "../../fetch";
+import { fetchQuery, fetchDuckDBQuery } from "../../fetch"; // Import new fetch function
 
 const Header = () => {
   const { query, setQueryResults, setQueryRunning, queryRunning, serverUrl } =
     useQueryContext();
   const [errorMessage, setErrorMessage] = useState("");
   const [queryError, setQueryError] = useState(false);
+
   const handleToggle = async (dts = false) => {
     setQueryRunning(true);
     try {
@@ -40,77 +41,55 @@ const Header = () => {
     }
   };
 
-  const handleClose = (
-    _event?: React.SyntheticEvent | Event,
-    reason?: string
-  ) => {
+  // New function for handling DuckDB query execution
+  const handleDuckDBQuery = async () => {
+    setQueryRunning(true);
+    try {
+      const response = await fetchDuckDBQuery();
+      setQueryRunning(false);
+
+      const resJson = await response.json();
+      if (response.status !== 200) {
+        setErrorMessage(resJson.error);
+        setQueryError(true);
+        return;
+      }
+      setQueryResults(resJson);
+    } catch (error) {
+      console.log("error is %o", error);
+      setQueryRunning(false);
+    }
+  };
+
+  const handleClose = (_event?: React.SyntheticEvent | Event, reason?: string) => {
     if (reason === "clickaway") {
       return;
     }
-
     setQueryError(false);
   };
-  const QueryButtonText = "Run Query";
-  const TypeButtonText = "Get Types";
 
   return (
     <>
-      <AlertMessage
-        open={queryError}
-        handleClose={handleClose}
-        severity="error"
-        errorMessage={errorMessage}
-      />
-      <Backdrop
-        className="w-screen ml-0"
-        sx={{ color: "#fff", zIndex: (theme) => theme.zIndex.drawer + 1 }}
-        open={queryRunning}
-      >
+      <AlertMessage open={queryError} handleClose={handleClose} severity="error" errorMessage={errorMessage} />
+      <Backdrop className="w-screen ml-0" sx={{ color: "#fff", zIndex: (theme) => theme.zIndex.drawer + 1 }} open={queryRunning}>
         <CircularProgress color="inherit" />
       </Backdrop>
       <div className="header-left-group">
-        <div className="flex-col col-span-1 tablet:col-span-2 mobile:col-span-2  justify-center pt-2 pr-2">
+        <div className="flex-col col-span-1 tablet:col-span-2 mobile:col-span-2 justify-center pt-2 pr-2">
           <Image alt="logo" src="/logo-original.svg" width={162} height={32} />
         </div>
         <div className="header-left-stack">
-          <Button
-            onClick={async () => {
-              await handleToggle();
-            }}
-            variant="outlined"
-            className="button-primary"
-            startIcon={<PlayCircleFilledWhiteIcon />}
-          >
-            {QueryButtonText}
+          <Button onClick={async () => await handleToggle()} variant="outlined" className="button-primary" startIcon={<PlayCircleFilledWhiteIcon />}>
+            Run Query
+          </Button>
+          <Button onClick={async () => await handleDuckDBQuery()} variant="outlined" className="button-primary" startIcon={<DatabaseIcon />}>
+            Run DuckDB Query
           </Button>
-          <IconButton
-            onClick={async () => {
-              await handleToggle();
-            }}
-            className="icon-button-primary"
-          >
-            <PlayCircleFilledWhiteIcon />
-          </IconButton>
-          <Button
-            variant="outlined"
-            className="button-primary"
-            startIcon={<DataObjectIcon />}
-            onClick={async () => {
-              await handleToggle(true);
-            }}
-          >
-            {TypeButtonText}
+          <Button variant="outlined" className="button-primary" startIcon={<DataObjectIcon />} onClick={async () => await handleToggle(true)}>
+            Get Types
           </Button>
-          <IconButton
-            onClick={async () => {
-              await handleToggle(true);
-            }}
-            className="icon-button-primary"
-          >
-            <DataObjectIcon />
-          </IconButton>
         </div>
-        <div className="col-start-8 mobile:col-start-9   col-span-2 mobile:col-span-1 regular:col-start-7 regular:col-span-3 flex justify-end space-x-2 mobile:space-x-0 items-center">
+        <div className="col-start-8 mobile:col-start-9 col-span-2 mobile:col-span-1 regular:col-start-7 regular:col-span-3 flex justify-end space-x-2 mobile:space-x-0 items-center">
           <AddUrlButton />
           <a href="https://github.com/stackql/stackql-playground">
             <IconButton aria-label="GitHub repository">
diff --git a/src/fetch.ts b/src/fetch.ts
@@ -1,18 +1,11 @@
-//TODO: turn this to custom hook so can access context
 const fetchData = async (url: string) => {
   const response = await fetch(url);
   const data = await response.json();
   if (response.ok) return data;
   else throw data;
 };
 
-export const fetchExplorer = async ({
-  path,
-  serverUrl,
-}: {
-  path?: string;
-  serverUrl?: string;
-}) => {
+export const fetchExplorer = async ({ path, serverUrl }: { path?: string; serverUrl?: string }) => {
   let url = "/api/explorer";
   const params: string[] = [];
   if (serverUrl) {
@@ -21,22 +14,13 @@ export const fetchExplorer = async ({
   if (path) {
     params.push(`path=${path}`);
   }
-  // get the data from the api
   if (params.length) {
     url = `${url}?${params.join("&")}`;
   }
   return fetchData(url);
 };
 
-export const fetchQuery = async ({
-  query,
-  dts,
-  serverUrl,
-}: {
-  query: string;
-  dts?: boolean;
-  serverUrl?: string;
-}) => {
+export const fetchQuery = async ({ query, dts, serverUrl }: { query: string; dts?: boolean; serverUrl?: string }) => {
   let url = "/api/stackql";
   const params: string[] = [];
 
@@ -46,13 +30,36 @@ export const fetchQuery = async ({
   if (serverUrl) {
     params.push(`serverUrl=${serverUrl}`);
   }
-  if (params) {
+  if (params.length) {
     url = `${url}?${params.join("&")}`;
   }
   const request = new Request(url, {
-    body: query,
+    body: JSON.stringify({ query }),
+    method: "POST",
+    headers: { "Content-Type": "application/json" }
+  });
+  return fetch(request);
+};
+
+// New function for DuckDB queries
+export const fetchDuckDBQuery = async () => {
+  const url = "/api/duckdb"; // Change this if the actual endpoint is different
+
+  const query = `SELECT country_region AS country, 
+                        CAST(SUM(confirmed) AS INTEGER) AS total_confirmed, 
+                        CAST(SUM(deaths) AS INTEGER) AS total_deaths, 
+                        COUNT(*) AS record_count 
+                 FROM read_csv_auto('s3://covid19-lake/archived/enigma-jhu/csv/Enigma-JHU.csv.gz') 
+                 GROUP BY country_region 
+                 ORDER BY total_confirmed DESC 
+                 LIMIT 5`;
+
+  const request = new Request(url, {
+    body: JSON.stringify({ query, showMetadata: true }),
     method: "POST",
+    headers: { "Content-Type": "application/json" }
   });
+
   return fetch(request);
 };
 
diff --git a/src/pages/api/duckdb.ts b/src/pages/api/duckdb.ts
@@ -0,0 +1,49 @@
+import { NextApiRequest, NextApiResponse } from "next";
+import {
+    getDataFromResponse,
+    defaultMiddlewareUrl,
+    validateAddress,
+} from "./_common";
+
+export default async function handler(
+    req: NextApiRequest,
+    res: NextApiResponse
+) {
+    let url = defaultMiddlewareUrl;
+    const queryParams = req.query;
+    let returnText = false;
+
+    const serverUrl = queryParams.serverUrl as string;
+    if (serverUrl && validateAddress(serverUrl)) url = serverUrl;
+    url = `${url}/duckdb`; // Update to point to DuckDB API
+
+    url = url + "?showMetadata=";
+    if (queryParams.dts) {
+        url = url + "&dts=";
+        returnText = true;
+    }
+
+    try {
+        let query = req.body as string;
+        query = query.replace(/\s+/g, " ").trim();
+        const body = {
+            query,
+            showMetadata: true, // Ensure metadata is included
+        };
+
+        const result = await getDataFromResponse<any>(
+            url,
+            JSON.stringify(body),
+            "POST",
+            returnText
+        );
+
+        res.status(200).json({
+            data: returnText ? result : result.data,
+            returnText,
+            metadata: result.metadata,
+        });
+    } catch (error) {
+        res.status(400).json({ error: "DuckDB query failed", details: error });
+    }
+}
diff --git a/src/pages/api/stackql.ts b/src/pages/api/stackql.ts
@@ -1,3 +1,4 @@
+// pages/api/stackql.ts
 import { NextApiRequest, NextApiResponse } from "next";
 import {
   getDataFromResponse,
diff --git a/yarn.lock b/yarn.lock

Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,4 @@`
	`1`	`+// pages/api/stackql.ts`
`1`	`2`	`import { NextApiRequest, NextApiResponse } from "next";`
`2`	`3`	`import {`
`3`	`4`	`getDataFromResponse,`