@malloy-publisher/sdk 0.0.41 → 0.0.43

package/src/components/MutableNotebook/MutableCell.tsx

@@ -5,7 +5,6 @@ import LinkOutlinedIcon from "@mui/icons-material/LinkOutlined";
 import {
    Box,
    Button,
-   CardActions,
    Collapse,
    Dialog,
    DialogActions,
@@ -42,6 +41,7 @@ interface NotebookCellProps {
    onClose: () => void;
    onEdit: () => void;
    onDelete: () => void;
+   addButtonCallback: (isMarkdown: boolean) => React.ReactNode;
 }
 
 export function MutableCell({
@@ -56,6 +56,7 @@ export function MutableCell({
    onClose,
    onEdit,
    onDelete,
+   addButtonCallback,
 }: NotebookCellProps) {
    const [codeExpanded, setCodeExpanded] =
       React.useState<boolean>(expandCodeCell);
@@ -63,11 +64,11 @@ export function MutableCell({
       React.useState<boolean>(expandEmbedding);
    const [highlightedMalloyCode, setHighlightedMalloyCode] =
       React.useState<string>();
-   const [highlightedEmbedCode, setHighlightedEmbedCode] =
-      React.useState<string>();
+   const [highlightedEmbedCode] = React.useState<string>();
    const [query, setQuery] = React.useState<QueryExplorerResult>(
       emptyQueryExplorerResult(),
    );
+   const [isHovered, setIsHovered] = React.useState<boolean>(false);
 
    useEffect(() => {
       if (!cell.isMarkdown)
@@ -215,78 +216,136 @@ export function MutableCell({
       </>
    );
 
-   const buttonStack = (
-      <Stack
+   const isEditing = editingMalloy || editingMarkdown;
+
+   const editingButtons = editingMarkdown ? (
+      <Tooltip title="Save">
+         <IconButton size="small" onClick={onClose}>
+            <CheckIcon />
+         </IconButton>
+      </Tooltip>
+   ) : editingMalloy ? (
+      <Tooltip title="Save">
+         <IconButton
+            size="small"
+            onClick={() => {
+               saveResult(cell.modelPath, cell.sourceName);
+               onClose();
+            }}
+         >
+            <CheckIcon />
+         </IconButton>
+      </Tooltip>
+   ) : null;
+
+   const hoverButtonBox = isHovered && (
+      <Box
          sx={{
-            flexDirection: "row",
-            justifyContent: "right",
-            mt: "20px",
-            mb: "5px",
-            mx: "5px",
+            position: "absolute",
+            top: "4px",
+            right: "4px",
+            // transform: "translateX(-50%)",
+            display: "flex",
+            gap: "8px",
+            backgroundColor: "background.paper",
+            border: "1px solid",
+            borderColor: "divider",
+            borderRadius: "8px",
+            padding: "2px 4px",
+            boxShadow: 1,
+            zIndex: 10,
          }}
       >
-         <CardActions>{buttons}</CardActions>
-      </Stack>
+         {(!isEditing && (
+            <>
+               {addButtonCallback(true)}
+               {addButtonCallback(false)}
+               {buttons}
+            </>
+         )) ||
+            editingButtons}
+      </Box>
    );
+
    return (
-      <>
-         {buttonStack}
+      <StyledCard
+         sx={{
+            position: "relative",
+            marginTop: "5px",
+            marginBottom: "5px",
+            borderWidth: "1.5px",
+            backgroundColor: "#fff",
+            minHeight: "50px",
+         }}
+         onMouseEnter={() => setIsHovered(true)}
+         onMouseLeave={() => {
+            setIsHovered(false);
+         }}
+      >
+         {hoverButtonBox}
          {cell.isMarkdown ? (
             <>
                {editingMarkdown ? (
                   <MDEditor
                      value={value}
                      preview="edit"
+                     autoFocus
                      onChange={(newValue) => {
                         setValue(newValue);
                         updateMarkdown(newValue);
                      }}
+                     onBlur={() => {
+                        saveResult(cell.modelPath, cell.sourceName);
+                        if (!isHovered) {
+                           onClose();
+                        }
+                     }}
                   />
                ) : (
-                  <StyledCard variant="outlined" sx={{ borderRadius: 0 }}>
-                     <Box
-                        sx={{
-                           px: 0.5,
-                           pt: 0,
-                           mt: 0,
-                           "& h1, & h2, & h3, & h4, & h5, & h6": {
-                              mt: 0.5,
-                              mb: 0.5,
-                           },
-                           "& p": { mt: 0.5, mb: 0.5 },
-                           "& ul, & ol": { mt: 0.5, mb: 0.5 },
-                           "& li": { mt: 0, mb: 0 },
-                           "& pre, & code": { mt: 0.5, mb: 0.5 },
-                           "& blockquote": { mt: 0.5, mb: 0.5 },
-                        }}
-                     >
-                        {value ? (
+                  <Box
+                     sx={{
+                        px: 0.5,
+                        pt: 0,
+                        mt: 0,
+                        "& h1, & h2, & h3, & h4, & h5, & h6": {
+                           mt: 0.5,
+                           mb: 0.5,
+                        },
+                        "& p": { mt: 0.5, mb: 0.5 },
+                        "& ul, & ol": { mt: 0.5, mb: 0.5 },
+                        "& li": { mt: 0, mb: 0 },
+                        "& pre, & code": { mt: 0.5, mb: 0.5 },
+                        "& blockquote": { mt: 0.5, mb: 0.5 },
+                     }}
+                  >
+                     {value ? (
+                        <Box onClick={onEdit} sx={{ cursor: "pointer" }}>
                            <Markdown>{value}</Markdown>
-                        ) : (
-                           <>
-                              <Typography
-                                 sx={{
-                                    p: 2,
-                                    textAlign: "center",
-                                    variant: "subtitle2",
-                                    fontWeight: "medium",
-                                 }}
-                              >
-                                 Markdown is empty
-                              </Typography>
-                              <Typography
-                                 sx={{
-                                    mb: 2,
-                                    textAlign: "center",
-                                    variant: "body2",
-                                 }}
-                              >
-                                 Click the edit button and add some markdown.
-                              </Typography>
-                           </>
-                        )}
-                     </Box>
-                  </StyledCard>
+                        </Box>
+                     ) : (
+                        <Box onClick={onEdit} sx={{ cursor: "pointer" }}>
+                           <Typography
+                              sx={{
+                                 p: 2,
+                                 textAlign: "center",
+                                 variant: "subtitle2",
+                                 fontWeight: "medium",
+                              }}
+                           >
+                              Markdown is empty
+                           </Typography>
+                           <Typography
+                              sx={{
+                                 mb: 2,
+                                 textAlign: "center",
+                                 variant: "body2",
+                              }}
+                           >
+                              Click to edit.
+                           </Typography>
+                        </Box>
+                     )}
+                  </Box>
                )}
             </>
          ) : (
@@ -372,7 +431,7 @@ export function MutableCell({
                   </StyledCard>
                )}
                {!editingMalloy && !cell.result && (
-                  <StyledCard variant="outlined" sx={{ borderRadius: 0 }}>
+                  <Box onClick={onEdit} sx={{ cursor: "pointer" }}>
                      <Typography
                         sx={{
                            p: 2,
@@ -386,15 +445,14 @@ export function MutableCell({
                      <Typography
                         sx={{ mb: 2, textAlign: "center", variant: "body2" }}
                      >
-                        Click the edit button and explore the data in the model
-                        to see results.
+                        Click to edit.
                      </Typography>
-                  </StyledCard>
+                  </Box>
                )}
             </>
          )}
          {deleteDialogOpen && deleteDialog}
-      </>
+      </StyledCard>
    );
 }
 

package/src/components/MutableNotebook/MutableNotebook.tsx

@@ -204,6 +204,47 @@ export default function MutableNotebook({
       }
       return sourceAndPath;
    };
+   const plusButton = (isMarkdown: boolean, index: number) => {
+      return (
+         <Button
+            size="small"
+            startIcon={<AddIcon />}
+            onClick={() => handleAddCell(isMarkdown, index)}
+            variant="contained"
+            sx={{
+               backgroundColor: "#fff",
+               color: (theme) =>
+                  theme.palette.mode === "dark"
+                     ? theme.palette.grey[100]
+                     : theme.palette.grey[700],
+               boxShadow: "none",
+               "&:hover": {
+                  backgroundColor: (theme) =>
+                     theme.palette.mode === "dark"
+                        ? theme.palette.grey[500]
+                        : theme.palette.grey[300],
+                  boxShadow: "none",
+               },
+            }}
+         >
+            {isMarkdown ? "Markdown" : "Explore"}
+         </Button>
+      );
+   };
+   const addButtonSet = (
+      <Box
+         sx={{
+            display: "flex",
+            gap: 1,
+            justifyContent: "center",
+            flex: 2,
+         }}
+      >
+         {plusButton(false, notebookData.getCells().length)}
+         {plusButton(true, notebookData.getCells().length)}
+      </Box>
+   );
+
    return (
       <StyledCard variant="outlined">
          <StyledCardContent>
@@ -315,33 +356,6 @@ export default function MutableNotebook({
                      }}
                   />
                </Box>
-               <Box
-                  sx={{
-                     display: "flex",
-                     gap: 1,
-                     justifyContent: "center",
-                     flex: 2,
-                  }}
-               >
-                  <Button
-                     size="small"
-                     startIcon={<AddIcon />}
-                     onClick={() =>
-                        handleAddCell(false, notebookData.getCells().length)
-                     }
-                  >
-                     Explore
-                  </Button>
-                  <Button
-                     size="small"
-                     startIcon={<AddIcon />}
-                     onClick={() =>
-                        handleAddCell(true, notebookData.getCells().length)
-                     }
-                  >
-                     Markdown
-                  </Button>
-               </Box>
                <Box sx={{ flex: 1 }} />
             </Stack>
          </StyledCardContent>
@@ -373,6 +387,9 @@ export default function MutableNotebook({
                   >
                      <MutableCell
                         cell={cell}
+                        addButtonCallback={(isMarkdown) =>
+                           plusButton(isMarkdown, index)
+                        }
                         sourceAndPaths={getSourceList(sourceAndPaths)}
                         expandCodeCell={expandCodeCells}
                         expandEmbedding={expandEmbeddings}
@@ -404,6 +421,7 @@ export default function MutableNotebook({
                      />
                   </React.Fragment>
                ))}
+               {addButtonSet}
                <Menu
                   anchorEl={menuAnchorEl}
                   open={menuOpen}

package/src/components/Notebook/Notebook.tsx

@@ -1,40 +1,42 @@
 import ContentCopyIcon from "@mui/icons-material/ContentCopy";
 import LinkOutlinedIcon from "@mui/icons-material/LinkOutlined";
 import {
+   Box,
    CardActions,
    Collapse,
    Divider,
    IconButton,
+   Stack,
    Tooltip,
    Typography,
 } from "@mui/material";
-import Stack from "@mui/material/Stack";
-import { QueryClient, useQuery } from "@tanstack/react-query";
-import { AxiosError } from "axios";
 import React, { useEffect } from "react";
-import { CompiledNotebook, Configuration, NotebooksApi } from "../../client";
-import { ApiError, ApiErrorDisplay } from "../ApiErrorDisplay";
+import { Configuration, NotebooksApi, CompiledNotebook } from "../../client";
 import { highlight } from "../highlighter";
-import { Loading } from "../Loading";
-import { usePackage } from "../Package";
 import { StyledCard, StyledCardContent, StyledCardMedia } from "../styles";
 import { NotebookCell } from "./NotebookCell";
+import { ApiErrorDisplay } from "../ApiErrorDisplay";
+import { useQueryWithApiError } from "../../hooks/useQueryWithApiError";
+import "@malloydata/malloy-explorer/styles.css";
+import { usePackage } from "../Package/PackageProvider";
+import { Loading } from "../Loading";
 
 const notebooksApi = new NotebooksApi(new Configuration());
-const queryClient = new QueryClient();
 
 interface NotebookProps {
    notebookPath: string;
-   expandCodeCells?: boolean;
-   hideCodeCellIcons?: boolean;
+   versionId?: string;
+   expandResults?: boolean;
+   hideResultIcons?: boolean;
    expandEmbeddings?: boolean;
    hideEmbeddingIcons?: boolean;
 }
+
 // Requires PackageProvider
 export default function Notebook({
    notebookPath,
-   expandCodeCells,
-   hideCodeCellIcons,
+   expandResults,
+   hideResultIcons,
    expandEmbeddings,
    hideEmbeddingIcons,
 }: NotebookProps) {
@@ -62,57 +64,32 @@ export default function Notebook({
       isSuccess,
       isError,
       error,
-   } = useQuery<CompiledNotebook, ApiError>(
-      {
-         queryKey: [
-            "notebook",
-            server,
+   } = useQueryWithApiError<CompiledNotebook>({
+      queryKey: [
+         "notebook",
+         server,
+         projectName,
+         packageName,
+         notebookPath,
+         versionId,
+      ],
+      queryFn: async () => {
+         const response = await notebooksApi.getNotebook(
             projectName,
             packageName,
             notebookPath,
             versionId,
-         ],
-         queryFn: async () => {
-            try {
-               const response = await notebooksApi.getNotebook(
-                  projectName,
-                  packageName,
-                  notebookPath,
-                  versionId,
-                  {
-                     baseURL: server,
-                     withCredentials: !accessToken,
-                     headers: {
-                        Authorization: accessToken && `Bearer ${accessToken}`,
-                     },
-                  },
-               );
-               return response.data;
-            } catch (err) {
-               // If it's an Axios error, it will have response data
-               if (err && typeof err === "object" && "response" in err) {
-                  const axiosError = err as AxiosError<{
-                     code: string;
-                     message: string;
-                  }>;
-                  if (axiosError.response?.data) {
-                     const apiError: ApiError = new Error(
-                        axiosError.response.data.message || axiosError.message,
-                     );
-                     apiError.status = axiosError.response.status;
-                     apiError.data = axiosError.response.data;
-                     throw apiError;
-                  }
-               }
-               // For other errors, throw as is
-               throw err;
-            }
-         },
-         retry: false,
-         throwOnError: false,
+            {
+               baseURL: server,
+               withCredentials: !accessToken,
+               headers: {
+                  Authorization: accessToken && `Bearer ${accessToken}`,
+               },
+            },
+         );
+         return response.data;
       },
-      queryClient,
-   );
+   });
 
    return (
       <StyledCard variant="outlined">
@@ -206,8 +183,8 @@ export default function Notebook({
                            notebookPath,
                            cell.text,
                         )}
-                        expandCodeCell={expandCodeCells}
-                        hideCodeCellIcon={hideCodeCellIcons}
+                        expandCodeCell={expandResults}
+                        hideCodeCellIcon={hideResultIcons}
                         expandEmbedding={expandEmbeddings}
                         hideEmbeddingIcon={hideEmbeddingIcons}
                         key={index}

package/src/components/Package/Config.tsx

@@ -7,36 +7,30 @@ import {
    ListItemText,
    Typography,
 } from "@mui/material";
-import { QueryClient, useQuery } from "@tanstack/react-query";
 import { Configuration, PackagesApi } from "../../client";
 import { ApiErrorDisplay } from "../ApiErrorDisplay";
 import { Loading } from "../Loading";
 import { StyledCard, StyledCardContent } from "../styles";
 import { usePackage } from "./PackageProvider";
+import { useQueryWithApiError } from "../../hooks/useQueryWithApiError";
 
 const packagesApi = new PackagesApi(new Configuration());
-const queryClient = new QueryClient();
 
 export default function Config() {
    const { server, projectName, packageName, versionId, accessToken } =
       usePackage();
 
-   const { data, isSuccess, isError, error } = useQuery(
-      {
-         queryKey: ["package", server, projectName, packageName, versionId],
-         queryFn: () =>
-            packagesApi.getPackage(projectName, packageName, versionId, false, {
-               baseURL: server,
-               withCredentials: !accessToken,
-               headers: {
-                  Authorization: accessToken && `Bearer ${accessToken}`,
-               },
-            }),
-         retry: false,
-         throwOnError: false,
-      },
-      queryClient,
-   );
+   const { data, isSuccess, isError, error } = useQueryWithApiError({
+      queryKey: ["package", server, projectName, packageName, versionId],
+      queryFn: () =>
+         packagesApi.getPackage(projectName, packageName, versionId, false, {
+            baseURL: server,
+            withCredentials: !accessToken,
+            headers: {
+               Authorization: accessToken && `Bearer ${accessToken}`,
+            },
+         }),
+   });
 
    return (
       <StyledCard variant="outlined" sx={{ padding: "10px", width: "100%" }}>
@@ -57,9 +51,9 @@ export default function Config() {
                      <ListItemText primary="Name" secondary={packageName} />
                   </ListItem>
                   {!isSuccess && !isError && (
-                     <Typography variant="body2" sx={{ p: "20px", m: "auto" }}>
+                     <ListItem>
                         <Loading text="Fetching Package Metadata..." />
-                     </Typography>
+                     </ListItem>
                   )}
                   {isSuccess &&
                      ((data.data && (
@@ -70,20 +64,20 @@ export default function Config() {
                            />
                         </ListItem>
                      )) || (
-                           <ListItem
-                              disablePadding={true}
-                              dense={true}
-                              sx={{ mt: "20px" }}
-                           >
-                              <ErrorIcon
-                                 sx={{
-                                    color: "grey.600",
-                                    mr: "10px",
-                                 }}
-                              />
-                              <ListItemText primary={"No package manifest"} />
-                           </ListItem>
-                        ))}
+                        <ListItem
+                           disablePadding={true}
+                           dense={true}
+                           sx={{ mt: "20px" }}
+                        >
+                           <ErrorIcon
+                              sx={{
+                                 color: "grey.600",
+                                 mr: "10px",
+                              }}
+                           />
+                           <ListItemText primary={"No package manifest"} />
+                        </ListItem>
+                     ))}
                   {isError && (
                      <ApiErrorDisplay
                         error={error}

package/src/components/Package/Connections.tsx

@@ -7,15 +7,14 @@ import {
    TableRow,
    Typography,
 } from "@mui/material";
-import { QueryClient, useQuery } from "@tanstack/react-query";
 import { Configuration, ConnectionsApi } from "../../client";
 import { Connection as ApiConnection } from "../../client/api";
 import { StyledCard, StyledCardContent } from "../styles";
 import { usePackage } from "./PackageProvider";
 import { ApiErrorDisplay } from "../ApiErrorDisplay";
+import { useQueryWithApiError } from "../../hooks/useQueryWithApiError";
 
 const connectionsApi = new ConnectionsApi(new Configuration());
-const queryClient = new QueryClient();
 
 // TODO(jjs) - Move this UI to the ConnectionExplorer component
 function Connection({ connection }: { connection: ApiConnection }) {
@@ -34,22 +33,17 @@ function Connection({ connection }: { connection: ApiConnection }) {
 export default function Connections() {
    const { server, projectName, accessToken } = usePackage();
 
-   const { data, isSuccess, isError, error } = useQuery(
-      {
-         queryKey: ["connections", server, projectName],
-         queryFn: () =>
-            connectionsApi.listConnections(projectName, {
-               baseURL: server,
-               withCredentials: !accessToken,
-               headers: {
-                  Authorization: accessToken && `Bearer ${accessToken}`,
-               },
-            }),
-         retry: false,
-         throwOnError: false,
-      },
-      queryClient,
-   );
+   const { data, isSuccess, isError, error } = useQueryWithApiError({
+      queryKey: ["connections", server, projectName],
+      queryFn: () =>
+         connectionsApi.listConnections(projectName, {
+            baseURL: server,
+            withCredentials: !accessToken,
+            headers: {
+               Authorization: accessToken && `Bearer ${accessToken}`,
+            },
+         }),
+   });
 
    return (
       <StyledCard variant="outlined" sx={{ padding: "10px", width: "100%" }}>