@malloy-publisher/sdk 0.0.33 → 0.0.35

package/src/components/Package/Databases.tsx

@@ -4,7 +4,6 @@ import {
    DialogContent,
    DialogTitle,
    Divider,
-   IconButton,
    Table,
    TableBody,
    TableCell,
@@ -17,26 +16,31 @@ import { QueryClient, useQuery } from "@tanstack/react-query";
 import React from "react";
 import { Configuration, Database, DatabasesApi } from "../../client";
 import { StyledCard, StyledCardContent } from "../styles";
+import { usePackage } from "./PackageProvider";
+import { ApiErrorDisplay } from "../ApiErrorDisplay";
 
 const databasesApi = new DatabasesApi(new Configuration());
 const queryClient = new QueryClient();
 
-interface DatabaseProps {
-   server?: string;
-   projectName: string;
-   packageName: string;
-   versionId?: string;
-   accessToken: string;
-}
+export default function Databases() {
+   const { server, projectName, packageName, versionId, accessToken } =
+      usePackage();
+
+   const [open, setOpen] = React.useState(false);
+   const [selectedDatabase, setSelectedDatabase] =
+      React.useState<Database | null>(null);
+
+   const handleOpen = (database: Database) => {
+      setSelectedDatabase(database);
+      setOpen(true);
+   };
+
+   const handleClose = () => {
+      setOpen(false);
+      setSelectedDatabase(null);
+   };
 
-export default function DatabaseView({
-   server,
-   projectName,
-   packageName,
-   versionId,
-   accessToken,
-}: DatabaseProps) {
-   const { data, isSuccess, isError, error } = useQuery(
+   const { data, isError, error, isSuccess } = useQuery(
       {
          queryKey: ["databases", server, projectName, packageName, versionId],
          queryFn: () =>
@@ -48,6 +52,7 @@ export default function DatabaseView({
                },
             }),
          retry: false,
+         throwOnError: false,
       },
       queryClient,
    );
@@ -63,203 +68,93 @@ export default function DatabaseView({
       }
    };
    return (
-      <StyledCard variant="outlined" sx={{ padding: "10px", width: "100%" }}>
-         <StyledCardContent>
-            <Typography variant="overline" fontWeight="bold">
-               Embedded Databases
-            </Typography>
-            <Divider />
-            <Box
-               sx={{
-                  mt: "10px",
-                  maxHeight: "200px",
-                  overflowY: "auto",
-               }}
-            >
-               {!isSuccess && !isError && (
-                  <Typography variant="body2" sx={{ p: "20px", m: "auto" }}>
-                     Fetching Databases...
-                  </Typography>
-               )}
-               {isSuccess && data.data.length > 0 && (
-                  <TableContainer>
+      <>
+         <StyledCard variant="outlined" sx={{ padding: "10px", width: "100%" }}>
+            <StyledCardContent>
+               <Typography variant="overline" fontWeight="bold">
+                  Databases
+               </Typography>
+               <Divider />
+               <Box
+                  sx={{
+                     mt: "10px",
+                     maxHeight: "200px",
+                     overflowY: "auto",
+                  }}
+               >
+                  {!isSuccess && !isError && (
+                     <Typography variant="body2" sx={{ p: "10px", m: "auto" }}>
+                        Fetching Databases...
+                     </Typography>
+                  )}
+                  {isError && (
+                     <ApiErrorDisplay
+                        error={error}
+                        context={`${projectName} > ${packageName} > Databases`}
+                     />
+                  )}
+                  {isSuccess && data.data.length > 0 && (
                      <Table size="small">
                         <TableHead>
                            <TableRow>
-                              <TableCell>
-                                 <Typography
-                                    variant="subtitle2"
-                                    fontWeight="bold"
-                                 >
-                                    Database Name
-                                 </Typography>
-                              </TableCell>
-                              <TableCell align="right">
-                                 <Typography
-                                    variant="subtitle2"
-                                    fontWeight="bold"
-                                 >
-                                    Table Rows
-                                 </Typography>
-                              </TableCell>
+                              <TableCell>Name</TableCell>
+                              <TableCell align="right">Rows</TableCell>
                            </TableRow>
                         </TableHead>
                         <TableBody>
                            {data.data.map((database) => (
-                              <TableRow key={database.path}>
-                                 <TableCell>
-                                    <NameAndSchema database={database} />
+                              <TableRow
+                                 key={database.path}
+                                 onClick={() => handleOpen(database)}
+                                 sx={{ cursor: "pointer" }}
+                              >
+                                 <TableCell component="th" scope="row">
+                                    {database.path}
                                  </TableCell>
                                  <TableCell align="right">
-                                    <Typography variant="body2">
-                                       {formatRowSize(database.info.rowCount)}
-                                    </Typography>
+                                    {formatRowSize(database.info.rowCount)}
                                  </TableCell>
                               </TableRow>
                            ))}
                         </TableBody>
                      </Table>
+                  )}
+                  {isSuccess && data.data.length === 0 && (
+                     <Typography variant="body2" sx={{ p: "10px", m: "auto" }}>
+                        No databases found
+                     </Typography>
+                  )}
+               </Box>
+            </StyledCardContent>
+         </StyledCard>
+
+         <Dialog open={open} onClose={handleClose} maxWidth="sm" fullWidth>
+            <DialogTitle>{selectedDatabase?.path}</DialogTitle>
+            <DialogContent>
+               {selectedDatabase?.info?.columns && (
+                  <TableContainer>
+                     <Table size="small">
+                        <TableHead>
+                           <TableRow>
+                              <TableCell>Column</TableCell>
+                              <TableCell>Type</TableCell>
+                           </TableRow>
+                        </TableHead>
+                        <TableBody>
+                           {selectedDatabase.info.columns.map((column) => (
+                              <TableRow key={column.name}>
+                                 <TableCell component="th" scope="row">
+                                    {column.name}
+                                 </TableCell>
+                                 <TableCell>{column.type}</TableCell>
+                              </TableRow>
+                           ))}
+                        </TableBody>
+                     </Table>
                   </TableContainer>
                )}
-               {isSuccess && data.data.length === 0 && (
-                  <Typography variant="body2">No Embedded Databases</Typography>
-               )}
-               {isError && (
-                  <Typography variant="body2" sx={{ p: "10px", m: "auto" }}>
-                     {`${projectName} > ${packageName} > ${versionId} - ${error.message}`}
-                  </Typography>
-               )}
-            </Box>
-         </StyledCardContent>
-      </StyledCard>
-   );
-}
-
-function NameAndSchema({ database }: { database: Database }) {
-   const [open, setOpen] = React.useState(false);
-   return (
-      <Box
-         sx={{ display: "flex", alignItems: "center" }}
-         onClick={() => setOpen(!open)}
-         style={{ cursor: "pointer" }}
-      >
-         <Typography
-            variant="body2"
-            color="primary"
-            sx={{
-               maxWidth: "200px",
-               overflow: "hidden",
-               textOverflow: "ellipsis",
-               whiteSpace: "nowrap",
-            }}
-         >
-            {database.path}
-         </Typography>
-         &nbsp;
-         <Box sx={{ display: "flex", alignItems: "center" }}>
-            <Box sx={{ mr: 1, display: "flex", alignItems: "center" }}>
-               <svg
-                  width="16"
-                  height="16"
-                  viewBox="0 0 24 24"
-                  fill="none"
-                  xmlns="http://www.w3.org/2000/svg"
-               >
-                  <path
-                     d="M11 7H6C5.46957 7 4.96086 7.21071 4.58579 7.58579C4.21071 7.96086 4 8.46957 4 9V18C4 18.5304 4.21071 19.0391 4.58579 19.4142C4.96086 19.7893 5.46957 20 6 20H15C15.5304 20 16.0391 19.7893 16.4142 19.4142C16.7893 19.0391 17 18.5304 17 18V13"
-                     stroke="currentColor"
-                     strokeWidth="2"
-                     strokeLinecap="round"
-                     strokeLinejoin="round"
-                  />
-                  <path
-                     d="M9 15L20 4"
-                     stroke="currentColor"
-                     strokeWidth="2"
-                     strokeLinecap="round"
-                     strokeLinejoin="round"
-                  />
-                  <path
-                     d="M15 4H20V9"
-                     stroke="currentColor"
-                     strokeWidth="2"
-                     strokeLinecap="round"
-                     strokeLinejoin="round"
-                  />
-               </svg>
-            </Box>
-         </Box>
-         <SchemaButton
-            database={database}
-            open={open}
-            setClose={() => setOpen(false)}
-         />
-      </Box>
-   );
-}
-
-function SchemaButton({
-   database,
-   open,
-   setClose,
-}: {
-   open: boolean;
-   setClose: () => void;
-   database: Database;
-}) {
-   return (
-      <Dialog open={open} onClose={setClose} maxWidth="sm" fullWidth>
-         <DialogTitle>
-            Schema:{" "}
-            <Typography
-               fontSize="large"
-               variant="body2"
-               fontFamily="monospace"
-               component="span"
-            >
-               {database.path}
-            </Typography>
-            <IconButton
-               aria-label="close"
-               onClick={setClose}
-               sx={{ position: "absolute", right: 8, top: 8 }}
-            >
-               <Box
-                  sx={{
-                     width: 24,
-                     height: 24,
-                     display: "flex",
-                     alignItems: "center",
-                     justifyContent: "center",
-                  }}
-               >
-                  X
-               </Box>
-            </IconButton>
-         </DialogTitle>
-         <DialogContent>
-            <TableContainer>
-               <Table
-                  size="small"
-                  sx={{ "& .MuiTableCell-root": { padding: "10px" } }}
-               >
-                  <TableHead>
-                     <TableRow>
-                        <TableCell>NAME</TableCell>
-                        <TableCell>TYPE</TableCell>
-                     </TableRow>
-                  </TableHead>
-                  <TableBody>
-                     {database.info.columns.map((row) => (
-                        <TableRow key={row.name}>
-                           <TableCell>{row.name}</TableCell>
-                           <TableCell>{row.type}</TableCell>
-                        </TableRow>
-                     ))}
-                  </TableBody>
-               </Table>
-            </TableContainer>
-         </DialogContent>
-      </Dialog>
+            </DialogContent>
+         </Dialog>
+      </>
    );
 }

package/src/components/Package/FileTreeView.tsx

@@ -22,7 +22,7 @@ import Collapse from "@mui/material/Collapse";
 import DnsIcon from "@mui/icons-material/DnsOutlined";
 import DataArrayIcon from "@mui/icons-material/DataArrayOutlined";
 import { Database, Model } from "../../client";
-import { Typography } from "@mui/material";
+import { Typography, Tooltip } from "@mui/material";
 
 interface FiieTreeViewProps {
    items: Model[] | Database[];
@@ -65,6 +65,7 @@ type ExtendedTreeItemProps = {
    fileType: FileType;
    selectable: boolean;
    link: ((event?: React.MouseEvent) => void) | undefined;
+   error?: string;
 };
 
 interface CustomLabelProps {
@@ -72,13 +73,13 @@ interface CustomLabelProps {
 }
 
 function CustomTreeItem2Label({ item, ...other }: CustomLabelProps) {
-   return (
+   const label = (
       <TreeItem2Label
          {...other}
          sx={{
             display: "flex",
             alignItems: "center",
-            color: "grey.600",
+            color: item.error ? "error.main" : "grey.600",
          }}
       >
          {(item.fileType === "directory" && <FolderIcon />) ||
@@ -88,12 +89,26 @@ function CustomTreeItem2Label({ item, ...other }: CustomLabelProps) {
          <Typography
             variant="body2"
             sx={{ marginLeft: "5px" }}
-            color={item.link ? "primary.main" : "grey.600"}
+            color={
+               item.error
+                  ? "error.main"
+                  : item.link
+                    ? "primary.main"
+                    : "grey.600"
+            }
          >
             {item.label}
          </Typography>
       </TreeItem2Label>
    );
+
+   return item.error ? (
+      <Tooltip title={item.error} placement="right">
+         {label}
+      </Tooltip>
+   ) : (
+      label
+   );
 }
 
 interface CustomTreeItemProps
@@ -193,6 +208,7 @@ function getTreeViewRecursive(
          "unknown";
       if (fileType !== "unknown") {
          // This is a model or database.
+         const entry = value as Model | Database;
          treeViewItems.push({
             id: path + key,
             label: key,
@@ -202,6 +218,7 @@ function getTreeViewRecursive(
                   ? (event) => navigate(path + key, event)
                   : undefined,
             selectable: fileType === "model" || fileType === "notebook",
+            error: "error" in entry ? entry.error : undefined,
          });
       } else {
          // This is a directory.

package/src/components/Package/Models.tsx

@@ -4,6 +4,8 @@ import axios from "axios";
 import { Configuration, ModelsApi } from "../../client";
 import { StyledCard, StyledCardContent } from "../styles";
 import { FileTreeView } from "./FileTreeView";
+import { usePackage } from "./PackageProvider";
+import { ApiErrorDisplay } from "../ApiErrorDisplay";
 
 axios.defaults.baseURL = "http://localhost:4000";
 const modelsApi = new ModelsApi(new Configuration());
@@ -12,22 +14,13 @@ const queryClient = new QueryClient();
 const DEFAULT_EXPANDED_FOLDERS = ["notebooks/", "models/"];
 
 interface ModelsProps {
-   server?: string;
-   projectName: string;
-   packageName: string;
-   versionId?: string;
    navigate: (to: string, event?: React.MouseEvent) => void;
-   accessToken?: string;
 }
 
-export default function Models({
-   server,
-   projectName,
-   packageName,
-   versionId,
-   navigate,
-   accessToken,
-}: ModelsProps) {
+export default function Models({ navigate }: ModelsProps) {
+   const { server, projectName, packageName, versionId, accessToken } =
+      usePackage();
+
    const { data, isError, error, isLoading, isSuccess } = useQuery(
       {
          queryKey: ["models", server, projectName, packageName, versionId],
@@ -39,6 +32,7 @@ export default function Models({
                   Authorization: accessToken && `Bearer ${accessToken}`,
                },
             }),
+         throwOnError: false,
          retry: false,
       },
       queryClient,
@@ -58,29 +52,25 @@ export default function Models({
                   overflowY: "auto",
                }}
             >
-               {isLoading && (
+               {!isSuccess && !isError && (
                   <Typography variant="body2" sx={{ p: "10px", m: "auto" }}>
                      Fetching Models...
                   </Typography>
                )}
-               {isSuccess &&
-                  (data.data.length > 0 ? (
-                     <FileTreeView
-                        items={data.data.sort((a, b) => {
-                           return a.path.localeCompare(b.path);
-                        })}
-                        defaultExpandedItems={DEFAULT_EXPANDED_FOLDERS}
-                        navigate={navigate}
-                     />
-                  ) : (
-                     <Typography variant="body2" sx={{ p: "10px", m: "auto" }}>
-                        No models found
-                     </Typography>
-                  ))}
                {isError && (
-                  <Typography variant="body2" sx={{ p: "10px", m: "auto" }}>
-                     {`${projectName} > ${packageName} > ${versionId} - ${error.message}`}
-                  </Typography>
+                  <ApiErrorDisplay
+                     error={error}
+                     context={`${projectName} > ${packageName} > Models`}
+                  />
+               )}
+               {isSuccess && (
+                  <FileTreeView
+                     items={data.data.sort((a, b) => {
+                        return a.path.localeCompare(b.path);
+                     })}
+                     navigate={navigate}
+                     defaultExpandedItems={DEFAULT_EXPANDED_FOLDERS}
+                  />
                )}
             </Box>
          </StyledCardContent>

package/src/components/Package/Notebooks.tsx

@@ -3,29 +3,22 @@ import { QueryClient, useQuery } from "@tanstack/react-query";
 import { Configuration, NotebooksApi } from "../../client";
 import { StyledCard, StyledCardContent } from "../styles";
 import { FileTreeView } from "./FileTreeView";
+import { usePackage } from "./PackageProvider";
+import { ApiErrorDisplay } from "../ApiErrorDisplay";
 
 const notebooksApi = new NotebooksApi(new Configuration());
 const queryClient = new QueryClient();
 
 const DEFAULT_EXPANDED_FOLDERS = ["notebooks/"];
 
-interface ModelsProps {
-   server?: string;
-   projectName: string;
-   packageName: string;
-   versionId?: string;
+interface NotebooksProps {
    navigate: (to: string, event?: React.MouseEvent) => void;
-   accessToken?: string;
 }
 
-export default function Notebooks({
-   server,
-   projectName,
-   packageName,
-   versionId,
-   navigate,
-   accessToken,
-}: ModelsProps) {
+export default function Notebooks({ navigate }: NotebooksProps) {
+   const { server, projectName, packageName, versionId, accessToken } =
+      usePackage();
+
    const { data, isLoading, isError, error, isSuccess } = useQuery(
       {
          queryKey: ["notebooks", server, projectName, packageName, versionId],
@@ -37,6 +30,7 @@ export default function Notebooks({
                   Authorization: accessToken && `Bearer ${accessToken}`,
                },
             }),
+         throwOnError: false,
          retry: false,
       },
       queryClient,
@@ -56,29 +50,25 @@ export default function Notebooks({
                   overflowY: "auto",
                }}
             >
-               {isLoading && (
+               {!isSuccess && !isError && (
                   <Typography variant="body2" sx={{ p: "10px", m: "auto" }}>
                      Fetching Notebooks...
                   </Typography>
                )}
-               {isSuccess &&
-                  (data.data.length > 0 ? (
-                     <FileTreeView
-                        items={data.data.sort((a, b) => {
-                           return a.path.localeCompare(b.path);
-                        })}
-                        defaultExpandedItems={DEFAULT_EXPANDED_FOLDERS}
-                        navigate={navigate}
-                     />
-                  ) : (
-                     <Typography variant="body2" sx={{ p: "10px", m: "auto" }}>
-                        No notebooks found
-                     </Typography>
-                  ))}
                {isError && (
-                  <Typography variant="body2" sx={{ p: "10px", m: "auto" }}>
-                     {`${projectName} > ${packageName} > ${versionId} - ${error.message}`}
-                  </Typography>
+                  <ApiErrorDisplay
+                     error={error}
+                     context={`${projectName} > ${packageName} > Notebooks`}
+                  />
+               )}
+               {isSuccess && (
+                  <FileTreeView
+                     items={data.data.sort((a, b) => {
+                        return a.path.localeCompare(b.path);
+                     })}
+                     defaultExpandedItems={DEFAULT_EXPANDED_FOLDERS}
+                     navigate={navigate}
+                  />
                )}
             </Box>
          </StyledCardContent>