@malloy-publisher/sdk 0.0.17 → 0.0.18

package/src/components/MutableNotebook/MutableNotebook.tsx

@@ -0,0 +1,372 @@
+// TODO(jjs) - Export to .malloynb
+// TOOD(jjs) - Import via Publisher API that parses whole NB
+
+import React from "react";
+import Stack from "@mui/material/Stack";
+import {
+   Box,
+   Button,
+   CardActions,
+   TextField,
+   Typography,
+   Menu,
+   MenuItem,
+} from "@mui/material";
+import { StyledCard, StyledCardContent, StyledCardMedia } from "../styles";
+import { MutableCell } from "./MutableCell";
+import { Configuration, ModelsApi } from "../../client";
+import { ModelPicker } from "./ModelPicker";
+import { usePublisherPackage } from "../Package";
+import { NotebookManager } from "../NotebookManager";
+import { SourceAndPath } from "../Model/SourcesExplorer";
+import { useNotebookStorage } from "./NotebookStorageProvider";
+
+import * as Malloy from "@malloydata/malloy-interfaces";
+
+const modelsApi = new ModelsApi(new Configuration());
+
+interface MutableNotebookProps {
+   inputNotebookPath: string | undefined;
+   expandCodeCells?: boolean;
+   expandEmbeddings?: boolean;
+}
+
+function getNotebookPath() {
+   const params = new URLSearchParams(window.location.hash.substring(1));
+   return params.get("notebookPath");
+}
+interface PathToSources {
+   modelPath: string;
+   sourceInfos: Malloy.SourceInfo[];
+}
+
+export default function MutableNotebook({
+   inputNotebookPath,
+   expandCodeCells,
+   expandEmbeddings,
+}: MutableNotebookProps) {
+   const { server, projectName, packageName, versionId, accessToken } =
+      usePublisherPackage();
+   if (!projectName || !packageName) {
+      throw new Error(
+         "Project and package must be provided via PubliserPackageProvider",
+      );
+   }
+   const { notebookStorage, userContext } = useNotebookStorage();
+   if (!notebookStorage || !userContext) {
+      throw new Error(
+         "Notebook storage and user context must be provided via NotebookStorageProvider",
+      );
+   }
+   const [notebookData, setNotebookData] = React.useState<
+      NotebookManager | undefined
+   >();
+   const [notebookPath, setNotebookPath] = React.useState(inputNotebookPath);
+   const [editingMalloyIndex, setEditingMalloyIndex] = React.useState<
+      number | undefined
+   >();
+   const [editingMarkdownIndex, setEditingMarkdownIndex] = React.useState<
+      number | undefined
+   >();
+   const [sourceAndPaths, setSourceAndPaths] = React.useState<PathToSources[]>(
+      [],
+   );
+   const [menuAnchorEl, setMenuAnchorEl] = React.useState<null | HTMLElement>(
+      null,
+   );
+   const [menuIndex, setMenuIndex] = React.useState<number | null>(null);
+   const menuOpen = Boolean(menuAnchorEl);
+   const handleMenuClick = (
+      event: React.MouseEvent<HTMLButtonElement>,
+      index: number,
+   ) => {
+      setMenuAnchorEl(event.currentTarget);
+      setMenuIndex(index);
+   };
+   const handleMenuClose = () => {
+      setMenuAnchorEl(null);
+      setMenuIndex(null);
+   };
+   const handleAddCell = (isMarkdown: boolean, index: number) => {
+      notebookData.insertCell(index, {
+         isMarkdown,
+         value: "",
+      });
+      saveNotebook();
+      if (isMarkdown) {
+         setEditingMarkdownIndex(index);
+      } else {
+         setEditingMalloyIndex(index);
+      }
+      handleMenuClose();
+   };
+   const saveNotebook = React.useCallback(() => {
+      setNotebookData(notebookData.saveNotebook());
+   }, [notebookData]);
+   React.useEffect(() => {
+      // Load SourceInfos from selected models and sync PathsToSources
+      if (!notebookData) {
+         return;
+      }
+      const modelPathToSourceInfo = new Map(
+         sourceAndPaths.map(({ modelPath, sourceInfos }) => [
+            modelPath,
+            sourceInfos,
+         ]),
+      );
+      const newSourceAndPaths = [];
+      const promises = [];
+      for (const model of notebookData.getModels()) {
+         if (!modelPathToSourceInfo.has(model)) {
+            console.log("Fetching model from Publisher", model);
+            promises.push(
+               modelsApi
+                  .getModel(projectName, packageName, model, versionId, {
+                     baseURL: server,
+                     withCredentials: !accessToken,
+                  })
+                  .then((data) => ({
+                     modelPath: model,
+                     sourceInfos: data.data.sourceInfos.map((source) =>
+                        JSON.parse(source),
+                     ),
+                  })),
+            );
+         } else {
+            newSourceAndPaths.push({
+               modelPath: model,
+               sourceInfos: modelPathToSourceInfo.get(model),
+            });
+         }
+      }
+      if (promises.length > 0) {
+         Promise.all(promises).then((loadedSourceAndPaths) => {
+            setSourceAndPaths([...newSourceAndPaths, ...loadedSourceAndPaths]);
+         });
+      }
+   }, [
+      accessToken,
+      notebookData,
+      packageName,
+      projectName,
+      server,
+      sourceAndPaths,
+      versionId,
+   ]);
+
+   React.useEffect(() => {
+      if (!notebookData) {
+         setNotebookData(
+            NotebookManager.loadNotebook(
+               notebookStorage,
+               userContext,
+               getNotebookPath(),
+            ),
+         );
+         setNotebookPath(getNotebookPath());
+      }
+   }, [notebookData, packageName, projectName, notebookStorage, userContext]);
+
+   if (!notebookData) {
+      return <div>Loading...</div>;
+   }
+   const getSourceList = (sourceAndPaths: PathToSources[]): SourceAndPath[] => {
+      const sourceAndPath = [];
+      for (const sources of sourceAndPaths) {
+         for (const sourceInfo of sources.sourceInfos) {
+            sourceAndPath.push({
+               modelPath: sources.modelPath,
+               sourceInfo: sourceInfo,
+            });
+         }
+      }
+      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>
+            <Stack
+               sx={{
+                  flexDirection: "row",
+                  justifyContent: "space-between",
+               }}
+            >
+               <Box sx={{ display: "flex", alignItems: "top", gap: 1 }}>
+                  <Typography
+                     sx={{
+                        fontSize: "150%",
+                        minHeight: "56px",
+                        fontWeight: "bold",
+                     }}
+                  >
+                     Notebook :
+                  </Typography>
+                  <TextField
+                     value={notebookPath}
+                     onChange={(e) => {
+                        setNotebookPath(e.target.value);
+                     }}
+                     onBlur={(e) => {
+                        const url = new URL(window.location.href);
+                        url.hash = `notebookPath=${e.target.value}`;
+                        notebookData.renameNotebook(e.target.value);
+                        window.history.pushState({}, "", url);
+                     }}
+                     size="medium"
+                     variant="standard"
+                     error={!notebookPath}
+                     helperText={
+                        !notebookPath
+                           ? "Please enter a notebook name"
+                           : undefined
+                     }
+                     sx={{ flex: 1 }}
+                  />
+               </Box>
+               <Box
+                  sx={{ display: "flex", alignItems: "center", mt: 1, mb: 1 }}
+               >
+                  <ExportMalloyButton notebookData={notebookData} />
+               </Box>
+            </Stack>
+         </StyledCardContent>
+         <ModelPicker
+            initialSelectedModels={notebookData.getModels()}
+            onModelChange={(models) => {
+               setNotebookData(notebookData.setModels(models));
+               saveNotebook();
+            }}
+         />
+
+         <StyledCardMedia>
+            <Stack>
+               {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}
+                        editingMarkdown={editingMarkdownIndex === index}
+                        editingMalloy={editingMalloyIndex === index}
+                        onDelete={() => {
+                           setNotebookData(notebookData.deleteCell(index));
+                           saveNotebook();
+                        }}
+                        onCellChange={(cell) => {
+                           setNotebookData(notebookData.setCell(index, cell));
+                           saveNotebook();
+                        }}
+                        onEdit={() => {
+                           if (cell.isMarkdown) {
+                              setEditingMarkdownIndex(index);
+                           } else {
+                              setEditingMalloyIndex(index);
+                           }
+                        }}
+                        onClose={() => {
+                           if (cell.isMarkdown) {
+                              setEditingMarkdownIndex(undefined);
+                           } else {
+                              setEditingMalloyIndex(undefined);
+                           }
+                        }}
+                     />
+                  </React.Fragment>
+               ))}
+               <Box style={{ paddingRight: "7px", paddingTop: "10px" }}>
+                  {createButtons(notebookData.getCells().length)}
+               </Box>
+               <Menu
+                  anchorEl={menuAnchorEl}
+                  open={menuOpen}
+                  onClose={handleMenuClose}
+                  anchorOrigin={{ vertical: "bottom", horizontal: "right" }}
+                  transformOrigin={{ vertical: "top", horizontal: "right" }}
+               >
+                  <MenuItem onClick={() => handleAddCell(true, menuIndex ?? 0)}>
+                     Add Markdown
+                  </MenuItem>
+                  <MenuItem
+                     onClick={() => handleAddCell(false, menuIndex ?? 0)}
+                  >
+                     Add Malloy
+                  </MenuItem>
+               </Menu>
+               <Stack
+                  sx={{
+                     flexDirection: "row",
+                     justifyContent: "flex-end",
+                     p: 1,
+                  }}
+               ></Stack>
+            </Stack>
+         </StyledCardMedia>
+      </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,
+}: {
+   notebookData: NotebookManager;
+}) {
+   const [copied, setCopied] = React.useState(false);
+   const handleExport = async () => {
+      if (!notebookData) return;
+      const malloy = notebookData.toMalloyNotebook();
+      try {
+         await navigator.clipboard.writeText(malloy);
+         setCopied(true);
+         setTimeout(() => setCopied(false), 1500);
+      } catch {
+         setCopied(false);
+         alert("Failed to copy to clipboard");
+      }
+   };
+   return (
+      <Button variant="contained" color="primary" onClick={handleExport}>
+         {copied ? "Copied!" : "Export To Malloy"}
+      </Button>
+   );
+}

package/src/components/MutableNotebook/MutableNotebookList.tsx

@@ -0,0 +1,138 @@
+import React from "react";
+import { useNavigate, useParams } from "react-router-dom";
+import {
+   List,
+   ListItem,
+   ListItemText,
+   IconButton,
+   Dialog,
+   DialogTitle,
+   DialogContent,
+   DialogContentText,
+   DialogActions,
+   Button,
+   Typography,
+   Box,
+   ListItemButton,
+} from "@mui/material";
+import DeleteIcon from "@mui/icons-material/Delete";
+import { useNotebookStorage } from "./NotebookStorageProvider";
+
+export function MutableNotebookList() {
+   const { projectName, packageName } = useParams();
+   const navigate = useNavigate();
+   const { notebookStorage, userContext } = useNotebookStorage();
+   const [notebooks, setNotebooks] = React.useState<string[]>([]);
+   const [deleteDialogOpen, setDeleteDialogOpen] = React.useState(false);
+   const [notebookToDelete, setNotebookToDelete] = React.useState<
+      string | null
+   >(null);
+
+   React.useEffect(() => {
+      if (notebookStorage && userContext) {
+         setNotebooks(notebookStorage.listNotebooks(userContext));
+      }
+   }, [notebookStorage, userContext]);
+
+   const handleDeleteClick = (notebook: string) => {
+      setNotebookToDelete(notebook);
+      setDeleteDialogOpen(true);
+   };
+
+   const handleDeleteConfirm = () => {
+      if (notebookToDelete && notebookStorage && userContext) {
+         notebookStorage.deleteNotebook(userContext, notebookToDelete);
+         setNotebooks(notebookStorage.listNotebooks(userContext));
+      }
+      setDeleteDialogOpen(false);
+      setNotebookToDelete(null);
+   };
+
+   const handleDeleteCancel = () => {
+      setDeleteDialogOpen(false);
+      setNotebookToDelete(null);
+   };
+
+   const handleNotebookClick = (notebook: string) => {
+      if (projectName && packageName) {
+         // Navigate to the ScratchNotebookPage with anchor text for notebookPath
+         navigate(
+            `/${projectName}/${packageName}/scratch_notebook#notebookPath=${encodeURIComponent(notebook)}`,
+         );
+      }
+   };
+
+   return (
+      <Box>
+         <Typography variant="h5" sx={{ mb: 2 }}>
+            Notebooks
+         </Typography>
+         <Button
+            variant="contained"
+            onClick={() => handleNotebookClick("")}
+            sx={{ mb: 2 }}
+         >
+            New Notebook
+         </Button>
+
+         <List>
+            {notebooks.length === 0 && (
+               <ListItem>
+                  <ListItemText primary="No notebooks found." />
+               </ListItem>
+            )}
+            {notebooks.map((notebook) => (
+               <ListItem
+                  key={notebook}
+                  secondaryAction={
+                     <IconButton
+                        edge="end"
+                        aria-label="delete"
+                        onClick={(e) => {
+                           e.stopPropagation();
+                           handleDeleteClick(notebook);
+                        }}
+                     >
+                        <DeleteIcon />
+                     </IconButton>
+                  }
+                  disablePadding
+               >
+                  <ListItemButton onClick={() => handleNotebookClick(notebook)}>
+                     <ListItemText
+                        primary={
+                           <Typography
+                              component="span"
+                              sx={{
+                                 color: "primary.main",
+                                 textDecoration: "underline",
+                              }}
+                           >
+                              {notebook}
+                           </Typography>
+                        }
+                     />
+                  </ListItemButton>
+               </ListItem>
+            ))}
+         </List>
+         <Dialog open={deleteDialogOpen} onClose={handleDeleteCancel}>
+            <DialogTitle>Delete Notebook</DialogTitle>
+            <DialogContent>
+               <DialogContentText>
+                  Are you sure you want to delete the notebook &quot;
+                  {notebookToDelete}&quot;? This action cannot be undone.
+               </DialogContentText>
+            </DialogContent>
+            <DialogActions>
+               <Button onClick={handleDeleteCancel} color="primary">
+                  Cancel
+               </Button>
+               <Button onClick={handleDeleteConfirm} color="error" autoFocus>
+                  Delete
+               </Button>
+            </DialogActions>
+         </Dialog>
+      </Box>
+   );
+}

package/src/components/MutableNotebook/NotebookStorage.ts

@@ -0,0 +1,27 @@
+export interface UserContext {
+   // UserContext holds the project & package associated with
+   // the notebook. PublisherStorage interfaces will
+   // implement this and add data representing configuration,
+   // user permissions, and access tokens.
+   project: string;
+   package: string;
+}
+
+export interface NotebookStorage {
+   // Lists all available notebooks for the context.
+   // Notebooks names are like S3 paths- / denote hierarchical
+   // folders, but otherwise folders are not "real" objects
+   listNotebooks(context: UserContext): string[];
+
+   // Returns the notebook at the specific path, throws an exception if no such notebook exists (or cannot be accessed)
+   getNotebook(context: UserContext, path: string): string;
+
+   // Deletes the notebook at the specified path, or throws an
+   // Exception on failure
+   deleteNotebook(context: UserContext, path: string): void;
+
+   saveNotebook(context: UserContext, path: string, notebook: string): void;
+
+   // Moves notebook from the "from" path to the "to" path
+   moveNotebook(context: UserContext, from: string, to: string): void;
+}

package/src/components/MutableNotebook/NotebookStorageProvider.tsx

@@ -0,0 +1,43 @@
+import React, { createContext, useContext, useMemo } from "react";
+import type { NotebookStorage, UserContext } from "./NotebookStorage";
+
+interface NotebookStorageProviderProps {
+   children: React.ReactNode;
+   userContext: UserContext;
+   notebookStorage: NotebookStorage;
+}
+
+interface NotebookStorageContextValue {
+   notebookStorage: NotebookStorage;
+   userContext: UserContext;
+}
+
+const NotebookStorageContext = createContext<
+   NotebookStorageContextValue | undefined
+>(undefined);
+
+export default function NotebookStorageProvider({
+   children,
+   userContext,
+   notebookStorage,
+}: NotebookStorageProviderProps) {
+   const value = useMemo(
+      () => ({ notebookStorage, userContext }),
+      [notebookStorage, userContext],
+   );
+   return (
+      <NotebookStorageContext.Provider value={value}>
+         {children}
+      </NotebookStorageContext.Provider>
+   );
+}
+
+export function useNotebookStorage() {
+   const context = useContext(NotebookStorageContext);
+   if (!context) {
+      throw new Error(
+         "useNotebookStorage must be used within a NotebookStorageProvider",
+      );
+   }
+   return context;
+}

package/src/components/MutableNotebook/index.ts

@@ -0,0 +1,5 @@
+export { default as MutableNotebook } from "./MutableNotebook";
+export { default as NotebookStorageProvider } from "./NotebookStorageProvider";
+export { BrowserNotebookStorage } from "./BrowserNotebookStorage";
+export type { UserContext, NotebookStorage } from "./NotebookStorage";
+export { MutableNotebookList } from "./MutableNotebookList";