@malloy-publisher/sdk 0.0.80 → 0.0.81

package/src/components/{MutableNotebook/MutableNotebook.tsx → Workbook/Workbook.tsx}

@@ -20,21 +20,22 @@ import React from "react";
 import { Configuration, ModelsApi } from "../../client";
 import { useRouterClickHandler } from "../click_helper";
 import { SourceAndPath } from "../Model/SourcesExplorer";
-import { NotebookManager } from "../NotebookManager";
+import { WorkbookManager } from "./WorkbookManager";
 import { usePackage } from "../Package";
 import { useServer } from "../ServerProvider";
 import { StyledCard, StyledCardContent, StyledCardMedia } from "../styles";
 import { MutableCell } from "./MutableCell";
-import { useNotebookStorage } from "./NotebookStorageProvider";
+import { useWorkbookStorage } from "./WorkbookStorageProvider";
 
 import * as Malloy from "@malloydata/malloy-interfaces";
 import { ModelPicker } from "./ModelPicker";
 import { getAxiosConfig } from "../../hooks";
+import { WorkbookLocator } from "./WorkbookStorage";
 
 const modelsApi = new ModelsApi(new Configuration());
 
-interface MutableNotebookProps {
-   notebookPath?: string;
+interface WorkbookProps {
+   workbookPath?: WorkbookLocator;
    expandCodeCells?: boolean;
    expandEmbeddings?: boolean;
    hideEmbeddingIcons?: boolean;
@@ -45,28 +46,32 @@ interface PathToSources {
    sourceInfos: Malloy.SourceInfo[];
 }
 
-export default function MutableNotebook({
-   notebookPath,
+export default function Workbook({
+   workbookPath,
    expandCodeCells,
    expandEmbeddings,
    hideEmbeddingIcons,
-}: MutableNotebookProps) {
+}: WorkbookProps) {
    const navigate = useRouterClickHandler();
-   const { projectName, packageName, versionId } = usePackage();
+   const packageContext = usePackage();
+   const { projectName, packageName, versionId } = packageContext;
    const { server, getAccessToken } = useServer();
-   const { notebookStorage, userContext } = useNotebookStorage();
+   const { workbookStorage } = useWorkbookStorage();
+   const [lastError, setLastError] = React.useState<string | undefined>(
+      undefined,
+   );
    if (!projectName || !packageName) {
       throw new Error(
          "Project and package must be provided via PubliserPackageProvider",
       );
    }
-   if (!notebookStorage || !userContext) {
+   if (!workbookStorage) {
       throw new Error(
-         "Notebook storage and user context must be provided via NotebookStorageProvider",
+         "Workbook storage be provided via WorkbookStorageProvider",
       );
    }
-   const [notebookData, setNotebookData] = React.useState<
-      NotebookManager | undefined
+   const [workbookData, setWorkbookData] = React.useState<
+      WorkbookManager | undefined
    >();
    const [editingMalloyIndex, setEditingMalloyIndex] = React.useState<
       number | undefined
@@ -87,11 +92,11 @@ export default function MutableNotebook({
       setMenuIndex(null);
    };
    const handleAddCell = (isMarkdown: boolean, index: number) => {
-      notebookData.insertCell(index, {
+      workbookData.insertCell(index, {
          isMarkdown,
          value: "",
       });
-      saveNotebook();
+      saveWorkbook();
       if (isMarkdown) {
          setEditingMarkdownIndex(index);
       } else {
@@ -105,9 +110,16 @@ export default function MutableNotebook({
       setDeleteDialogOpen(true);
    };
 
-   const handleDeleteConfirm = (event?: React.MouseEvent) => {
-      if (notebookPath && notebookStorage && userContext) {
-         notebookStorage.deleteNotebook(userContext, notebookPath);
+   const handleDeleteConfirm = async (event?: React.MouseEvent) => {
+      if (workbookPath && workbookStorage && packageContext) {
+         await workbookStorage
+            .deleteWorkbook(packageContext, workbookPath)
+            .then(() => {
+               setLastError(undefined);
+            })
+            .catch((error) => {
+               setLastError(`Error deleting workbook: ${error.message}`);
+            });
       }
       setDeleteDialogOpen(false);
       navigate(`/${projectName}/${packageName}`, event);
@@ -117,12 +129,17 @@ export default function MutableNotebook({
       setDeleteDialogOpen(false);
    };
 
-   const saveNotebook = React.useCallback(() => {
-      setNotebookData(notebookData.saveNotebook());
-   }, [notebookData]);
+   const saveWorkbook = React.useCallback(async () => {
+      try {
+         setWorkbookData(await workbookData.saveWorkbook());
+         setLastError(undefined);
+      } catch (error) {
+         setLastError(`Error saving workbook: ${error.message}`);
+      }
+   }, [workbookData]);
    React.useEffect(() => {
       // Load SourceInfos from selected models and sync PathsToSources
-      if (!notebookData) {
+      if (!workbookData) {
          return;
       }
 
@@ -136,7 +153,7 @@ export default function MutableNotebook({
          const newSourceAndPaths = [];
          const promises = [];
 
-         for (const model of notebookData.getModels()) {
+         for (const model of workbookData.getModels()) {
             if (!modelPathToSourceInfo.has(model)) {
                console.log("Fetching model from Publisher", model);
                promises.push(
@@ -173,9 +190,9 @@ export default function MutableNotebook({
 
       fetchModels();
    }, [
-      // Note this cannot depend on sourceAndPaths because it will cause an infinite loop.
+      // Work this cannot depend on sourceAndPaths because it will cause an infinite loop.
       getAccessToken,
-      notebookData,
+      workbookData,
       packageName,
       projectName,
       server,
@@ -183,19 +200,19 @@ export default function MutableNotebook({
    ]);
 
    React.useEffect(() => {
-      if (!notebookPath) {
+      if (!workbookPath) {
          return;
       }
-      setNotebookData(
-         NotebookManager.loadNotebook(
-            notebookStorage,
-            userContext,
-            notebookPath,
-         ),
-      );
-   }, [notebookPath, notebookStorage, userContext]);
+      WorkbookManager.loadWorkbook(
+         workbookStorage,
+         packageContext,
+         workbookPath,
+      ).then((workbookData) => {
+         setWorkbookData(workbookData);
+      });
+   }, [workbookPath, workbookStorage, packageContext]);
 
-   if (!notebookData) {
+   if (!workbookData) {
       return <div>Loading...</div>;
    }
    const getSourceList = (sourceAndPaths: PathToSources[]): SourceAndPath[] => {
@@ -246,14 +263,21 @@ export default function MutableNotebook({
             flex: 2,
          }}
       >
-         {plusButton(false, notebookData.getCells().length)}
-         {plusButton(true, notebookData.getCells().length)}
+         {plusButton(false, workbookData.getCells().length)}
+         {plusButton(true, workbookData.getCells().length)}
       </Box>
    );
 
    return (
       <StyledCard variant="outlined">
          <StyledCardContent>
+            {lastError && (
+               <Box sx={{ mb: 2 }}>
+                  <Typography color="error" variant="body2">
+                     {lastError}
+                  </Typography>
+               </Box>
+            )}
             <Stack
                sx={{
                   flexDirection: "row",
@@ -281,7 +305,7 @@ export default function MutableNotebook({
                         ml: 1,
                      }}
                   >
-                     {`${projectName} > ${packageName} > ${notebookPath}`}
+                     {`${projectName} > ${packageName} > ${workbookPath.path}`}
                   </Typography>
                </Stack>
                <Stack sx={{ display: "flex", flexDirection: "row", gap: 1 }}>
@@ -293,7 +317,7 @@ export default function MutableNotebook({
                         mb: 1,
                      }}
                   >
-                     <ExportMalloyButton notebookData={notebookData} />
+                     <ExportMalloyButton workbookData={workbookData} />
                   </Box>
                   <Box
                      sx={{
@@ -314,12 +338,12 @@ export default function MutableNotebook({
                         open={deleteDialogOpen}
                         onClose={handleDeleteCancel}
                      >
-                        <DialogTitle>Delete Notebook</DialogTitle>
+                        <DialogTitle>Delete Workbook</DialogTitle>
                         <DialogContent>
                            <DialogContentText>
-                              Are you sure you want to delete the notebook
+                              Are you sure you want to delete the workbook
                               &quot;
-                              {notebookPath}&quot;? This action cannot be
+                              {workbookPath.path}&quot;? This action cannot be
                               undone.
                            </DialogContentText>
                         </DialogContent>
@@ -355,10 +379,10 @@ export default function MutableNotebook({
             >
                <Box sx={{ flex: 1 }}>
                   <ModelPicker
-                     initialSelectedModels={notebookData.getModels()}
+                     initialSelectedModels={workbookData.getModels()}
                      onModelChange={(models) => {
-                        setNotebookData(notebookData.setModels(models));
-                        saveNotebook();
+                        setWorkbookData(workbookData.setModels(models));
+                        saveWorkbook();
                      }}
                   />
                </Box>
@@ -367,7 +391,7 @@ export default function MutableNotebook({
          </StyledCardContent>
          <StyledCardMedia>
             <Stack>
-               {notebookData.getCells().length === 0 && (
+               {workbookData.getCells().length === 0 && (
                   <>
                      <Typography
                         sx={{
@@ -387,12 +411,12 @@ export default function MutableNotebook({
                      </Typography>
                   </>
                )}
-               {notebookData.getCells().map((cell, index) => (
+               {workbookData.getCells().map((cell, index) => (
                   <React.Fragment
-                     key={`${index}-${notebookData.getCells().length}`}
+                     key={`${index}-${workbookData.getCells().length}`}
                   >
                      <MutableCell
-                        key={`${index}-${cell.isMarkdown}-${notebookPath}-${projectName}-${packageName}`}
+                        key={`${index}-${cell.isMarkdown}-${workbookPath}-${projectName}-${packageName}`}
                         cell={cell}
                         addButtonCallback={(isMarkdown) =>
                            plusButton(isMarkdown, index)
@@ -404,12 +428,12 @@ export default function MutableNotebook({
                         editingMarkdown={editingMarkdownIndex === index}
                         editingMalloy={editingMalloyIndex === index}
                         onDelete={() => {
-                           setNotebookData(notebookData.deleteCell(index));
-                           saveNotebook();
+                           setWorkbookData(workbookData.deleteCell(index));
+                           saveWorkbook();
                         }}
                         onCellChange={(cell) => {
-                           setNotebookData(notebookData.setCell(index, cell));
-                           saveNotebook();
+                           setWorkbookData(workbookData.setCell(index, cell));
+                           saveWorkbook();
                         }}
                         onEdit={() => {
                            if (cell.isMarkdown) {
@@ -459,14 +483,14 @@ export default function MutableNotebook({
 }
 
 function ExportMalloyButton({
-   notebookData,
+   workbookData,
 }: {
-   notebookData: NotebookManager;
+   workbookData: WorkbookManager;
 }) {
    const [copied, setCopied] = React.useState(false);
    const handleExport = async () => {
-      if (!notebookData) return;
-      const malloy = notebookData.toMalloyNotebook();
+      if (!workbookData) return;
+      const malloy = workbookData.toMalloyWorkbook();
       try {
          await navigator.clipboard.writeText(malloy);
          setCopied(true);

package/src/components/Workbook/WorkbookList.tsx

@@ -0,0 +1,111 @@
+import {
+   Box,
+   Divider,
+   List,
+   ListItem,
+   ListItemText,
+   Typography,
+} from "@mui/material";
+import React from "react";
+import { useWorkbookStorage } from "./WorkbookStorageProvider";
+import { usePackage } from "../Package";
+import { WorkbookLocator } from "./WorkbookStorage";
+
+interface WorkbookListProps {
+   onWorkbookClick: (
+      workbook: WorkbookLocator,
+      event: React.MouseEvent,
+   ) => void;
+}
+
+export function WorkbookList({ onWorkbookClick }: WorkbookListProps) {
+   const { workbookStorage } = useWorkbookStorage();
+   const packageContext = usePackage();
+   const [workbooks, setWorkbooks] = React.useState<WorkbookLocator[]>([]);
+   const [lastError, setLastError] = React.useState<string | undefined>(
+      undefined,
+   );
+
+   React.useEffect(() => {
+      if (workbookStorage) {
+         workbookStorage
+            .listWorkspaces(packageContext, false)
+            .then((workspaces) => {
+               const allWorkbooks: WorkbookLocator[] = [];
+               Promise.all(
+                  workspaces.map(async (workspace) => {
+                     await workbookStorage
+                        .listWorkbooks(workspace, packageContext)
+                        .then((newWorkbooks) => {
+                           allWorkbooks.push(...newWorkbooks);
+                        })
+                        .catch((error) => {
+                           setLastError(
+                              `Error listing workbooks: ${error.message}`,
+                           );
+                        });
+                  }),
+               ).then(() => {
+                  setWorkbooks(allWorkbooks);
+                  setLastError(undefined);
+               });
+            });
+      }
+   }, [workbookStorage, packageContext]);
+
+   return (
+      <>
+         {lastError && (
+            <Box sx={{ mb: 2 }}>
+               <Typography color="error" variant="body2">
+                  {lastError}
+               </Typography>
+            </Box>
+         )}
+         <Divider />
+         <Box
+            sx={{
+               maxHeight: "300px",
+               overflow: "auto",
+               "&::-webkit-scrollbar": {
+                  width: "8px",
+               },
+               "&::-webkit-scrollbar-track": {
+                  background: "transparent",
+               },
+               "&::-webkit-scrollbar-thumb": {
+                  background: "rgba(0,0,0,0.2)",
+                  borderRadius: "4px",
+               },
+            }}
+         >
+            <List dense>
+               {workbooks.length === 0 && (
+                  <ListItem>
+                     <ListItemText
+                        primary="No workbooks found."
+                        sx={{ textAlign: "center" }}
+                     />
+                  </ListItem>
+               )}
+               {workbooks.map((workbook) => (
+                  <ListItem
+                     key={workbook.path}
+                     onClick={(event: React.MouseEvent) =>
+                        onWorkbookClick(workbook, event)
+                     }
+                     sx={{
+                        cursor: "pointer",
+                        "&:hover": {
+                           backgroundColor: "action.hover",
+                        },
+                     }}
+                  >
+                     <ListItemText primary={workbook.path} />
+                  </ListItem>
+               ))}
+            </List>
+         </Box>
+      </>
+   );
+}

package/src/components/Workbook/WorkbookManager.ts

@@ -0,0 +1,230 @@
+import { PackageContextProps } from "../Package";
+import type { WorkbookLocator, WorkbookStorage } from "./WorkbookStorage";
+
+/**
+ * Interface representing the data structure of a Mutable Workbook
+ * @interface WorkbookData
+ * @property {string[]} models - Array of model paths used in the workbook
+ * @property {WorkbookCellValue[]} cells - Array of cells in the workbook
+ * @property {WorkbookLocator} workbookPath - Path to the workbook file (relative to project/package)
+ */
+export interface WorkbookData {
+   models: string[];
+   cells: WorkbookCellValue[];
+   workbookPath: WorkbookLocator;
+}
+
+/**
+ * Interface representing a cell in the workbook
+ * @interface WorkbookCellValue
+ * @property {boolean} isMarkdown - Whether the cell is a markdown cell
+ * @property {string} [value] - The content of the cell
+ * @property {string} [result] - The result of executing the cell
+ * @property {string} [modelPath] - modelPath associated with the query in the cell
+ * @property {string} [sourceName] - Name of the source associated with the cell
+ * @property {string} [queryInfo] - Information about the query in the cell
+ */
+export interface WorkbookCellValue {
+   isMarkdown: boolean;
+   value?: string;
+   result?: string;
+   modelPath?: string;
+   sourceName?: string;
+   queryInfo?: string;
+}
+
+/**
+ * Class for managing workbook operations
+ * @class WorkbookManager
+ */
+export class WorkbookManager {
+   private isSaved: boolean;
+   private workbookStorage: WorkbookStorage;
+   private packageContext: PackageContextProps;
+
+   /**
+    * Creates a new WorkbookManager instance
+    * @param {WorkbookStorage} workbookStorage - Storage implementation
+    * @param {PackageContextProps} packageContext - Package context for storage
+    * @param {WorkbookData} workbookData - Initial workbook data
+    */
+   constructor(
+      workbookStorage: WorkbookStorage,
+      packageContext: PackageContextProps,
+      private workbookData: WorkbookData,
+   ) {
+      this.workbookStorage = workbookStorage;
+      this.packageContext = packageContext;
+      if (this.workbookData) {
+         this.isSaved = true;
+      } else {
+         this.workbookData = {
+            models: [],
+            cells: [],
+            workbookPath: undefined,
+         };
+         this.isSaved = false;
+      }
+   }
+
+   /**
+    * Gets the current workbook data
+    * @returns {WorkbookData} The current workbook data
+    */
+   getWorkbookData(): WorkbookData {
+      return this.workbookData;
+   }
+
+   /**
+    * Gets the current workbook path
+    * @returns {string} The path to the workbook
+    */
+   getWorkbookPath(): WorkbookLocator {
+      return this.workbookData.workbookPath;
+   }
+
+   /**
+    * Renames the workbook and updates storage
+    * @param {string} workbookPath - New path for the workbook
+    * @returns {WorkbookManager} The updated WorkbookManager instance
+    */
+   async renameWorkbook(workbookPath: string): Promise<WorkbookManager> {
+      if (this.workbookData.workbookPath.path !== workbookPath) {
+         try {
+            await this.workbookStorage.moveWorkbook(
+               this.packageContext,
+               this.workbookData.workbookPath,
+               {
+                  path: workbookPath,
+                  workspace: this.workbookData.workbookPath.workspace,
+               },
+            );
+         } catch {
+            // ignore if not found
+         }
+      }
+      this.workbookData.workbookPath.path = workbookPath;
+      this.isSaved = false;
+      return await this.saveWorkbook();
+   }
+
+   getCells(): WorkbookCellValue[] {
+      return this.workbookData.cells;
+   }
+   deleteCell(index: number): WorkbookManager {
+      this.workbookData.cells = [
+         ...this.workbookData.cells.slice(0, index),
+         ...this.workbookData.cells.slice(index + 1),
+      ];
+      this.isSaved = false;
+      return this;
+   }
+   insertCell(index: number, cell: WorkbookCellValue): WorkbookManager {
+      this.workbookData.cells = [
+         ...this.workbookData.cells.slice(0, index),
+         cell,
+         ...this.workbookData.cells.slice(index),
+      ];
+      this.isSaved = false;
+      return this;
+   }
+   setCell(index: number, cell: WorkbookCellValue): WorkbookManager {
+      this.workbookData.cells[index] = cell;
+      this.isSaved = false;
+      return this;
+   }
+   setModels(models: string[]): WorkbookManager {
+      this.workbookData.models = models;
+      this.isSaved = false;
+      return this;
+   }
+   getModels(): string[] {
+      return this.workbookData.models;
+   }
+
+   updateWorkbookData(workbookData: WorkbookData): WorkbookManager {
+      this.workbookData = workbookData;
+      this.isSaved = false;
+      return this;
+   }
+
+   async saveWorkbook(): Promise<WorkbookManager> {
+      if (!this.isSaved) {
+         if (!this.workbookData.workbookPath) {
+            throw new Error("Workbook path is not set");
+         }
+         await this.workbookStorage.saveWorkbook(
+            this.packageContext,
+            this.workbookData.workbookPath,
+            JSON.stringify(this.workbookData),
+         );
+         this.isSaved = true;
+      }
+      return new WorkbookManager(
+         this.workbookStorage,
+         this.packageContext,
+         this.workbookData,
+      );
+   }
+
+   /**
+    * Converts the workbook data to a Malloy workbook string.
+    * @returns {string} The Malloy workbook string
+    */
+   toMalloyWorkbook(): string {
+      return this.workbookData.cells
+         .map((cell) => {
+            if (cell.isMarkdown) {
+               return ">>>markdown\n" + cell.value;
+            } else {
+               return (
+                  ">>>malloy\n" +
+                  `import {${cell.sourceName}}" from '${cell.modelPath}'"\n` +
+                  cell.value +
+                  "\n"
+               );
+            }
+         })
+         .join("\n");
+   }
+
+   static newWorkbook(
+      workbookStorage: WorkbookStorage,
+      packageContext: PackageContextProps,
+   ): WorkbookManager {
+      return new WorkbookManager(workbookStorage, packageContext, undefined);
+   }
+
+   /**
+    * Creates a new workbook manager by loading from local storage.
+    * Returns an empty instance if the workbook is not found.
+    * @param workbookStorage - The storage implementation
+    * @param userContext - The user context for storage
+    * @param workbookPath - The path to the workbook file (relative to project/package)
+    */
+   static async loadWorkbook(
+      workbookStorage: WorkbookStorage,
+      packageContext: PackageContextProps,
+      workbookPath: WorkbookLocator,
+   ): Promise<WorkbookManager> {
+      let workbookData: WorkbookData | undefined = undefined;
+      console.log("loadWorkbook", workbookPath);
+      try {
+         const saved = await workbookStorage.getWorkbook(
+            packageContext,
+            workbookPath,
+         );
+         if (saved) {
+            workbookData = JSON.parse(saved);
+         }
+      } catch {
+         // Not found, create a new workbook
+         workbookData = {
+            models: [],
+            cells: [],
+            workbookPath: workbookPath,
+         };
+      }
+      return new WorkbookManager(workbookStorage, packageContext, workbookData);
+   }
+}