@malloy-publisher/sdk 0.0.36 → 0.0.38

package/src/components/MutableNotebook/MutableNotebook.tsx

@@ -1,32 +1,33 @@
 // TODO(jjs) - Export to .malloynb
 // TOOD(jjs) - Import via Publisher API that parses whole NB
 
+import AddIcon from "@mui/icons-material/Add";
 import {
    Box,
    Button,
-   CardActions,
    Dialog,
    DialogActions,
    DialogContent,
    DialogContentText,
    DialogTitle,
+   Divider,
    Menu,
    MenuItem,
    Typography,
 } from "@mui/material";
 import Stack from "@mui/material/Stack";
 import React from "react";
-import { useRouterClickHandler } from "../click_helper";
 import { Configuration, ModelsApi } from "../../client";
+import { useRouterClickHandler } from "../click_helper";
 import { SourceAndPath } from "../Model/SourcesExplorer";
 import { NotebookManager } from "../NotebookManager";
 import { usePackage } from "../Package";
 import { StyledCard, StyledCardContent, StyledCardMedia } from "../styles";
-import { ModelPicker } from "./ModelPicker";
 import { MutableCell } from "./MutableCell";
 import { useNotebookStorage } from "./NotebookStorageProvider";
 
 import * as Malloy from "@malloydata/malloy-interfaces";
+import { ModelPicker } from "./ModelPicker";
 
 const modelsApi = new ModelsApi(new Configuration());
 
@@ -34,6 +35,7 @@ interface MutableNotebookProps {
    notebookPath?: string;
    expandCodeCells?: boolean;
    expandEmbeddings?: boolean;
+   hideEmbeddingIcons?: boolean;
 }
 
 interface PathToSources {
@@ -45,6 +47,7 @@ export default function MutableNotebook({
    notebookPath,
    expandCodeCells,
    expandEmbeddings,
+   hideEmbeddingIcons,
 }: MutableNotebookProps) {
    const navigate = useRouterClickHandler();
    const { server, projectName, packageName, versionId, accessToken } =
@@ -201,27 +204,6 @@ export default function MutableNotebook({
       }
       return sourceAndPath;
    };
-   const createButtons = (index: number) => {
-      return (
-         <CardActions
-            sx={{
-               padding: "0px 10px 0px 10px",
-               mb: "auto",
-               mt: "auto",
-               justifyContent: "flex-end",
-            }}
-         >
-            <Button
-               variant="outlined"
-               size="small"
-               startIcon={<AddIcon />}
-               onClick={(e) => handleMenuClick(e, index)}
-            >
-               New Cell
-            </Button>
-         </CardActions>
-      );
-   };
    return (
       <StyledCard variant="outlined">
          <StyledCardContent>
@@ -229,19 +211,32 @@ export default function MutableNotebook({
                sx={{
                   flexDirection: "row",
                   justifyContent: "space-between",
+                  alignItems: "center",
                }}
             >
-               <Box sx={{ display: "flex", alignItems: "top", gap: 1 }}>
+               <Stack direction="row" spacing={1} alignItems="center">
                   <Typography
+                     variant="overline"
                      sx={{
-                        fontSize: "150%",
-                        minHeight: "56px",
+                        fontSize: "13px",
                         fontWeight: "bold",
+                        verticalAlign: "middle",
                      }}
                   >
-                     Notebook - {notebookPath}
+                     Workbook
                   </Typography>
-               </Box>
+                  <Typography
+                     variant="subtitle2"
+                     sx={{
+                        fontSize: "13px",
+                        fontWeight: "normal",
+                        verticalAlign: "middle",
+                        ml: 1,
+                     }}
+                  >
+                     {`${projectName} > ${packageName} > ${notebookPath}`}
+                  </Typography>
+               </Stack>
                <Stack sx={{ display: "flex", flexDirection: "row", gap: 1 }}>
                   <Box
                      sx={{
@@ -262,11 +257,11 @@ export default function MutableNotebook({
                      }}
                   >
                      <Button
-                        variant="outlined"
                         color="error"
                         onClick={handleDeleteClick}
+                        size="small"
                      >
-                        Delete Notebook
+                        Delete
                      </Button>
                      <Dialog
                         open={deleteDialogOpen}
@@ -282,13 +277,18 @@ export default function MutableNotebook({
                            </DialogContentText>
                         </DialogContent>
                         <DialogActions>
-                           <Button onClick={handleDeleteCancel} color="primary">
+                           <Button
+                              onClick={handleDeleteCancel}
+                              color="primary"
+                              size="small"
+                           >
                               Cancel
                            </Button>
                            <Button
                               onClick={(event) => handleDeleteConfirm(event)}
                               color="error"
                               autoFocus
+                              size="small"
                            >
                               Delete
                            </Button>
@@ -297,27 +297,86 @@ export default function MutableNotebook({
                   </Box>
                </Stack>
             </Stack>
+            <Divider />
+            <Stack
+               sx={{
+                  display: "flex",
+                  flexDirection: "row",
+                  width: "100%",
+                  mt: 2,
+               }}
+            >
+               <Box sx={{ flex: 1 }}>
+                  <ModelPicker
+                     initialSelectedModels={notebookData.getModels()}
+                     onModelChange={(models) => {
+                        setNotebookData(notebookData.setModels(models));
+                        saveNotebook();
+                     }}
+                  />
+               </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>
-         <ModelPicker
-            initialSelectedModels={notebookData.getModels()}
-            onModelChange={(models) => {
-               setNotebookData(notebookData.setModels(models));
-               saveNotebook();
-            }}
-         />
-
          <StyledCardMedia>
             <Stack>
+               {notebookData.getCells().length === 0 && (
+                  <>
+                     <Typography
+                        sx={{
+                           textAlign: "center",
+                           p: 2,
+                           variant: "subtitle2",
+                           fontWeight: "medium",
+                        }}
+                     >
+                        Workbook is empty
+                     </Typography>
+                     <Typography
+                        variant="body2"
+                        sx={{ textAlign: "center", mb: 2, variant: "body2" }}
+                     >
+                        Click the + buttons to add a markdown or code cell.
+                     </Typography>
+                  </>
+               )}
                {notebookData.getCells().map((cell, index) => (
                   <React.Fragment
                      key={`${index}-${notebookData.getCells().length}`}
                   >
                      <MutableCell
                         cell={cell}
-                        newCell={createButtons(index)}
                         sourceAndPaths={getSourceList(sourceAndPaths)}
                         expandCodeCell={expandCodeCells}
                         expandEmbedding={expandEmbeddings}
+                        hideEmbeddingIcons={hideEmbeddingIcons}
                         editingMarkdown={editingMarkdownIndex === index}
                         editingMalloy={editingMalloyIndex === index}
                         onDelete={() => {
@@ -345,9 +404,6 @@ export default function MutableNotebook({
                      />
                   </React.Fragment>
                ))}
-               <Box style={{ paddingRight: "7px", paddingTop: "10px" }}>
-                  {createButtons(notebookData.getCells().length)}
-               </Box>
                <Menu
                   anchorEl={menuAnchorEl}
                   open={menuOpen}
@@ -376,22 +432,6 @@ export default function MutableNotebook({
       </StyledCard>
    );
 }
-function AddIcon() {
-   return (
-      <svg
-         width="24"
-         height="24"
-         viewBox="0 0 24 24"
-         fill="none"
-         xmlns="http://www.w3.org/2000/svg"
-      >
-         <path
-            d="M19 13H13V19H11V13H5V11H11V5H13V11H19V13Z"
-            fill="currentColor"
-         />
-      </svg>
-   );
-}
 
 function ExportMalloyButton({
    notebookData,
@@ -412,8 +452,8 @@ function ExportMalloyButton({
       }
    };
    return (
-      <Button variant="outlined" color="primary" onClick={handleExport}>
-         {copied ? "Copied!" : "Export To Malloy"}
+      <Button color="primary" onClick={handleExport} size="small">
+         {copied ? "Copied!" : "Export"}
       </Button>
    );
 }

package/src/components/Notebook/Notebook.tsx

@@ -18,6 +18,7 @@ import { StyledCard, StyledCardContent, StyledCardMedia } from "../styles";
 import { NotebookCell } from "./NotebookCell";
 import { ApiErrorDisplay, ApiError } from "../ApiErrorDisplay";
 import { AxiosError } from "axios";
+import { Loading } from "../Loading";
 
 const notebooksApi = new NotebooksApi(new Configuration());
 const queryClient = new QueryClient();
@@ -191,9 +192,7 @@ export default function Notebook({
          <StyledCardMedia>
             <Stack spacing={1} component="section">
                {!isSuccess && !isError && (
-                  <Typography variant="body2" sx={{ p: "10px", m: "auto" }}>
-                     Fetching Notebook...
-                  </Typography>
+                  <Loading text="Fetching Notebook..." />
                )}
                {isSuccess &&
                   notebook.notebookCells?.map((cell, index) => (
@@ -214,7 +213,14 @@ export default function Notebook({
                         key={index}
                      />
                   ))}
-               {isError && (
+               {isError && error.data?.code === 404 && (
+                  <Typography>
+                     <code>{`${projectName} > ${packageName} > ${notebookPath}`}</code>{" "}
+                     not found.
+                  </Typography>
+               )}
+
+               {isError && error.data?.code !== 404 && (
                   <ApiErrorDisplay
                      error={error}
                      context={`${projectName} > ${packageName} > ${notebookPath}`}

package/src/components/Package/Databases.tsx

@@ -18,6 +18,7 @@ import { Configuration, Database, DatabasesApi } from "../../client";
 import { StyledCard, StyledCardContent } from "../styles";
 import { usePackage } from "./PackageProvider";
 import { ApiErrorDisplay } from "../ApiErrorDisplay";
+import { Loading } from "../Loading";
 
 const databasesApi = new DatabasesApi(new Configuration());
 const queryClient = new QueryClient();
@@ -83,9 +84,7 @@ export default function Databases() {
                   }}
                >
                   {!isSuccess && !isError && (
-                     <Typography variant="body2" sx={{ p: "10px", m: "auto" }}>
-                        Fetching Databases...
-                     </Typography>
+                     <Loading text="Fetching Databases..." />
                   )}
                   {isError && (
                      <ApiErrorDisplay

package/src/components/Package/Models.tsx

@@ -6,6 +6,7 @@ import { StyledCard, StyledCardContent } from "../styles";
 import { FileTreeView } from "./FileTreeView";
 import { usePackage } from "./PackageProvider";
 import { ApiErrorDisplay } from "../ApiErrorDisplay";
+import { Loading } from "../Loading";
 
 axios.defaults.baseURL = "http://localhost:4000";
 const modelsApi = new ModelsApi(new Configuration());
@@ -52,18 +53,14 @@ export default function Models({ navigate }: ModelsProps) {
                   overflowY: "auto",
                }}
             >
-               {!isSuccess && !isError && (
-                  <Typography variant="body2" sx={{ p: "10px", m: "auto" }}>
-                     Fetching Models...
-                  </Typography>
-               )}
+               {!isSuccess && !isError && <Loading text="Fetching Models..." />}
                {isError && (
                   <ApiErrorDisplay
                      error={error}
                      context={`${projectName} > ${packageName} > Models`}
                   />
                )}
-               {isSuccess && (
+               {isSuccess && data.data.length > 0 && (
                   <FileTreeView
                      items={data.data.sort((a, b) => {
                         return a.path.localeCompare(b.path);
@@ -72,6 +69,9 @@ export default function Models({ navigate }: ModelsProps) {
                      defaultExpandedItems={DEFAULT_EXPANDED_FOLDERS}
                   />
                )}
+               {isSuccess && data.data.length === 0 && (
+                  <Typography>No models found.</Typography>
+               )}
             </Box>
          </StyledCardContent>
       </StyledCard>

package/src/components/Package/Notebooks.tsx

@@ -5,6 +5,7 @@ import { StyledCard, StyledCardContent } from "../styles";
 import { FileTreeView } from "./FileTreeView";
 import { usePackage } from "./PackageProvider";
 import { ApiErrorDisplay } from "../ApiErrorDisplay";
+import { Loading } from "../Loading";
 
 const notebooksApi = new NotebooksApi(new Configuration());
 const queryClient = new QueryClient();
@@ -19,7 +20,7 @@ export default function Notebooks({ navigate }: NotebooksProps) {
    const { server, projectName, packageName, versionId, accessToken } =
       usePackage();
 
-   const { data, isLoading, isError, error, isSuccess } = useQuery(
+   const { data, isError, error, isSuccess } = useQuery(
       {
          queryKey: ["notebooks", server, projectName, packageName, versionId],
          queryFn: () =>
@@ -51,9 +52,7 @@ export default function Notebooks({ navigate }: NotebooksProps) {
                }}
             >
                {!isSuccess && !isError && (
-                  <Typography variant="body2" sx={{ p: "10px", m: "auto" }}>
-                     Fetching Notebooks...
-                  </Typography>
+                  <Loading text="Fetching Notebooks..." />
                )}
                {isError && (
                   <ApiErrorDisplay
@@ -61,7 +60,7 @@ export default function Notebooks({ navigate }: NotebooksProps) {
                      context={`${projectName} > ${packageName} > Notebooks`}
                   />
                )}
-               {isSuccess && (
+               {isSuccess && data.data.length > 0 && (
                   <FileTreeView
                      items={data.data.sort((a, b) => {
                         return a.path.localeCompare(b.path);
@@ -70,6 +69,9 @@ export default function Notebooks({ navigate }: NotebooksProps) {
                      navigate={navigate}
                   />
                )}
+               {isSuccess && data.data.length === 0 && (
+                  <Typography>No notebooks found.</Typography>
+               )}
             </Box>
          </StyledCardContent>
       </StyledCard>

package/src/components/Package/Package.tsx

@@ -40,7 +40,7 @@ export default function Package({ navigate }: PackageProps) {
             <Databases />
          </Grid>
          <Grid size={{ xs: 12, md: 6 }}>
-            <Connections navigate={navigate} />
+            <Connections />
          </Grid>
          <Grid size={{ xs: 12, md: 12 }}>
             <Schedules />

package/src/components/Package/Schedules.tsx

@@ -15,6 +15,7 @@ import { Configuration, SchedulesApi } from "../../client";
 import { StyledCard, StyledCardContent } from "../styles";
 import { usePackage } from "./PackageProvider";
 import { ApiErrorDisplay } from "../ApiErrorDisplay";
+import { Loading } from "../Loading";
 
 const schedulesApi = new SchedulesApi(new Configuration());
 const queryClient = new QueryClient();
@@ -41,11 +42,7 @@ export default function Schedules() {
    );
 
    if (isLoading) {
-      return (
-         <Typography variant="body2" sx={{ p: "20px", m: "auto" }}>
-            Fetching Schedules...
-         </Typography>
-      );
+      return <Loading text="Fetching Schedules..." />;
    }
 
    if (isError) {

package/src/components/Project/About.tsx

@@ -5,6 +5,7 @@ import { StyledCard, StyledCardContent, StyledCardMedia } from "../styles";
 import { QueryClient, useQuery } from "@tanstack/react-query";
 import { useProject } from "./Project";
 import { ApiErrorDisplay } from "../ApiErrorDisplay";
+import { Loading } from "../Loading";
 
 const projectsApi = new ProjectsApi(new Configuration());
 const queryClient = new QueryClient();
@@ -31,11 +32,7 @@ export default function About() {
 
    return (
       <>
-         {!isSuccess && !isError && (
-            <Typography variant="body2" sx={{ p: "10px", m: "auto" }}>
-               Fetching About...
-            </Typography>
-         )}
+         {!isSuccess && !isError && <Loading text="Fetching About..." />}
          {isSuccess && (
             <StyledCard variant="outlined">
                <StyledCardContent>

package/src/components/Project/ConnectionExplorer.tsx

@@ -26,6 +26,7 @@ import { ConnectionsApi } from "../../client/api";
 import { Configuration } from "../../client/configuration";
 import { useProject } from "./Project";
 import { ApiErrorDisplay } from "../ApiErrorDisplay";
+import { Loading } from "../Loading";
 
 const connectionsApi = new ConnectionsApi(new Configuration());
 const queryClient = new QueryClient();
@@ -92,11 +93,7 @@ export default function ConnectionExplorer({
                </Box>
                <Divider />
                <Box sx={{ mt: "10px", maxHeight: "600px", overflowY: "auto" }}>
-                  {isLoading && (
-                     <Typography variant="body2" sx={{ p: "20px", m: "auto" }}>
-                        Fetching Table Paths...
-                     </Typography>
-                  )}
+                  {isLoading && <Loading text="Fetching Table Paths..." />}
                   {isError && (
                      <ApiErrorDisplay
                         error={error}
@@ -242,11 +239,7 @@ function TableViewer({
             </IconButton>
          </DialogTitle>
          <DialogContent>
-            {isLoading && (
-               <Typography variant="body2" sx={{ p: "20px", m: "auto" }}>
-                  Fetching Table Details...
-               </Typography>
-            )}
+            {isLoading && <Loading text="Fetching Table Details..." />}
             {isError && (
                <ApiErrorDisplay
                   error={error}
@@ -326,11 +319,7 @@ function TablesInSchema({
          </Typography>
          <Divider />
          <Box sx={{ mt: "10px", maxHeight: "600px", overflowY: "auto" }}>
-            {isLoading && (
-               <Typography variant="body2" sx={{ p: "20px", m: "auto" }}>
-                  Fetching Tables...
-               </Typography>
-            )}
+            {isLoading && <Loading text="Fetching Tables..." />}
             {isError && (
                <ApiErrorDisplay
                   error={error}

package/src/components/Project/Packages.tsx

@@ -4,6 +4,7 @@ import { StyledCard, StyledCardContent, StyledCardMedia } from "../styles";
 import { QueryClient, useQuery } from "@tanstack/react-query";
 import { useProject } from "./Project";
 import { ApiErrorDisplay } from "../ApiErrorDisplay";
+import { Loading } from "../Loading";
 
 const packagesApi = new PackagesApi(new Configuration());
 const queryClient = new QueryClient();
@@ -34,11 +35,7 @@ export default function Packages({ navigate }: PackagesProps) {
 
    return (
       <>
-         {!isSuccess && !isError && (
-            <Typography variant="body2" sx={{ p: "20px", m: "auto" }}>
-               Fetching Packages...
-            </Typography>
-         )}
+         {!isSuccess && !isError && <Loading text="Fetching Packages..." />}
          {isSuccess && (
             <StyledCard variant="outlined">
                <StyledCardContent>

package/src/components/QueryResult/QueryResult.tsx

@@ -1,14 +1,12 @@
 import { Suspense, lazy } from "react";
 import { Configuration, QueryresultsApi } from "../../client";
-import axios from "axios";
-import { Typography } from "@mui/material";
 import { QueryClient, useQuery } from "@tanstack/react-query";
 import { usePackage } from "../Package/PackageProvider";
 import { ApiErrorDisplay } from "../ApiErrorDisplay";
+import { Loading } from "../Loading";
 
 const RenderedResult = lazy(() => import("../RenderedResult/RenderedResult"));
 
-axios.defaults.baseURL = "http://localhost:4000";
 const queryResultsApi = new QueryresultsApi(new Configuration());
 const queryClient = new QueryClient();
 
@@ -67,9 +65,7 @@ export default function QueryResult({
    return (
       <>
          {!isSuccess && !isError && (
-            <Typography variant="body2" sx={{ p: "20px", m: "auto" }}>
-               Fetching Query Results...
-            </Typography>
+            <Loading text="Fetching Query Results..." />
          )}
          {isSuccess && (
             <Suspense fallback={<div>Loading...</div>}>