@malloy-publisher/sdk 0.0.80 → 0.0.82

package/src/components/Model/SourcesExplorer.tsx

@@ -235,7 +235,7 @@ function SourceExplorerComponentInner({
 
    const onQueryChange = React.useCallback(
       (malloyQuery: Malloy.Query) => {
-         setQuery({ ...query, malloyQuery });
+         setQuery({ ...query, malloyQuery, malloyResult: undefined });
       },
       [query],
    );
@@ -243,88 +243,75 @@ function SourceExplorerComponentInner({
    if (oldSourceInfo !== sourceAndPath.sourceInfo.name) {
       return <div>Loading...</div>;
    }
-
    return (
-      <StyledExplorerPage key={sourceAndPath.sourceInfo.name}>
-         <StyledExplorerContent>
-            <MalloyExplorerProvider
-               source={sourceAndPath.sourceInfo}
-               query={query?.malloyQuery}
-               onQueryChange={onQueryChange}
-               focusedNestViewPath={focusedNestViewPath}
-               onFocusedNestViewPathChange={setFocusedNestViewPath}
-               onDrill={(params) => {
-                  console.info(params);
+      <StyledExplorerContent key={sourceAndPath.sourceInfo.name}>
+         <MalloyExplorerProvider
+            source={sourceAndPath.sourceInfo}
+            query={query?.malloyQuery}
+            onQueryChange={onQueryChange}
+            focusedNestViewPath={focusedNestViewPath}
+            onFocusedNestViewPathChange={setFocusedNestViewPath}
+            onDrill={(params) => {
+               console.info(params);
+            }}
+         >
+            <div
+               style={{
+                  display: "flex",
+                  height: "100%",
+                  overflowY: "auto",
                }}
             >
-               <div
-                  style={{
-                     display: "flex",
-                     flexDirection: "column",
-                     height: "100%",
-                  }}
+               <ResizableCollapsiblePanel
+                  isInitiallyExpanded={true}
+                  initialWidth={180}
+                  minWidth={180}
+                  icon="database"
+                  title={sourceAndPath.sourceInfo.name}
                >
-                  <div
-                     style={{
-                        display: "flex",
-                        height: "100%",
-                        overflowY: "auto",
+                  <SourcePanel
+                     onRefresh={() => setQuery(emptyQueryExplorerResult())}
+                  />
+               </ResizableCollapsiblePanel>
+               <ResizableCollapsiblePanel
+                  isInitiallyExpanded={true}
+                  initialWidth={280}
+                  minWidth={280}
+                  icon="filterSliders"
+                  title="Query"
+               >
+                  <QueryPanel
+                     runQuery={() => {
+                        mutation.mutate();
                      }}
-                  >
-                     <ResizableCollapsiblePanel
-                        isInitiallyExpanded={true}
-                        initialWidth={180}
-                        minWidth={180}
-                        icon="database"
-                        title={sourceAndPath.sourceInfo.name}
-                     >
-                        <SourcePanel
-                           onRefresh={() =>
-                              setQuery(emptyQueryExplorerResult())
-                           }
-                        />
-                     </ResizableCollapsiblePanel>
-                     <ResizableCollapsiblePanel
-                        isInitiallyExpanded={true}
-                        initialWidth={280}
-                        minWidth={280}
-                        icon="filterSliders"
-                        title="Query"
-                     >
-                        <QueryPanel
-                           runQuery={() => {
-                              mutation.mutate();
-                           }}
-                        />
-                     </ResizableCollapsiblePanel>
-                     <ResultPanel
-                        source={sourceAndPath.sourceInfo}
-                        draftQuery={query?.malloyQuery}
-                        setDraftQuery={(malloyQuery) =>
-                           setQuery({ ...query, malloyQuery: malloyQuery })
-                        }
-                        submittedQuery={
-                           query?.malloyQuery
-                              ? {
-                                   executionState: mutation.isPending
-                                      ? "running"
-                                      : "finished",
-                                   response: {
-                                      result: query.malloyResult,
-                                   },
-                                   query: query.malloyQuery,
-                                   queryResolutionStartMillis: Date.now(),
-                                   onCancel: mutation.reset,
-                                }
-                              : undefined
-                        }
-                        options={{ showRawQuery: true }}
-                     />
-                  </div>
-               </div>
-            </MalloyExplorerProvider>
-         </StyledExplorerContent>
-      </StyledExplorerPage>
+                  />
+               </ResizableCollapsiblePanel>
+               <ResultPanel
+                  source={sourceAndPath.sourceInfo}
+                  draftQuery={query?.malloyQuery}
+                  setDraftQuery={(malloyQuery) =>
+                     setQuery({ ...query, malloyQuery: malloyQuery })
+                  }
+                  submittedQuery={
+                     query?.malloyQuery
+                        ? {
+                             executionState: mutation.isPending
+                                ? "running"
+                                : "finished",
+                             response: {
+                                result: query.malloyResult,
+                             },
+                             query: query.malloyQuery,
+                             queryResolutionStartMillis: Date.now(),
+                             onCancel: mutation.reset,
+                          }
+                        : undefined
+                  }
+                  options={{ showRawQuery: true }}
+               />
+            </div>
+         </MalloyExplorerProvider>
+      </StyledExplorerContent>
    );
 }
 
@@ -366,7 +353,6 @@ export function SourceExplorerComponent(props: SourceExplorerComponentProps) {
             <StyledExplorerContent>
                <div
                   style={{
-                     display: "flex",
                      alignItems: "center",
                      justifyContent: "center",
                      height: "200px",

package/src/components/Model/index.ts

@@ -1,4 +1,7 @@
 export { default as Model } from "./Model";
+export { ModelExplorer } from "./ModelExplorer";
 export { SourcesExplorer } from "./SourcesExplorer";
 export { SourceExplorerComponent } from "./SourcesExplorer";
 export type { SourceAndPath } from "./SourcesExplorer";
+export { useModelData } from "./useModelData";
+export type { ModelExplorerProps } from "./ModelExplorer";

package/src/components/Model/useModelData.ts

@@ -0,0 +1,38 @@
+import { Configuration, ModelsApi, CompiledModel } from "../../client";
+import { usePackage } from "../Package/PackageProvider";
+import { useQueryWithApiError } from "../../hooks/useQueryWithApiError";
+
+const modelsApi = new ModelsApi(new Configuration());
+
+/**
+ * Custom hook for fetching model data. Combines usePackage context with
+ * useQueryWithApiError to fetch a compiled model.
+ */
+export function useModelData(modelPath: string, versionId?: string) {
+   const {
+      projectName,
+      packageName,
+      versionId: packageVersionId,
+   } = usePackage();
+   const effectiveVersionId = versionId || packageVersionId;
+
+   return useQueryWithApiError<CompiledModel>({
+      queryKey: [
+         "package",
+         projectName,
+         packageName,
+         modelPath,
+         effectiveVersionId,
+      ],
+      queryFn: async (config) => {
+         const response = await modelsApi.getModel(
+            projectName,
+            packageName,
+            modelPath,
+            effectiveVersionId,
+            config,
+         );
+         return response.data;
+      },
+   });
+}

package/src/components/Package/index.ts

@@ -5,3 +5,4 @@ export {
    PackageProvider as PublisherPackageProvider,
    usePackage as usePublisherPackage,
 } from "./PackageProvider";
+export { default as Models } from "./Models";

package/src/components/Project/index.ts

@@ -1 +1,2 @@
 export { default as Project, ProjectProvider, useProject } from "./Project";
+export { default as Packages } from "./Packages";

package/src/components/Workbook/BrowserWorkbookStorage.ts

@@ -0,0 +1,100 @@
+import { PackageContextProps } from "../Package";
+import type {
+   WorkbookLocator,
+   WorkbookStorage,
+   Workspace,
+} from "./WorkbookStorage";
+
+const LOCAL_WORKSPACE_NAME = "Local";
+
+export class BrowserWorkbookStorage implements WorkbookStorage {
+   private makeKey(context: PackageContextProps, path?: string): string {
+      let key = `BROWSER_NOTEBOOK_STORAGE/${context.projectName}/${context.packageName}`;
+      if (path) {
+         key += `/${path}`;
+      }
+      return key;
+   }
+
+   async listWorkspaces(
+      context: PackageContextProps,
+      writeableOnly: boolean,
+   ): Promise<Workspace[]> {
+      // Parameters not used in browser storage implementation
+      void context;
+      void writeableOnly;
+      return [
+         {
+            name: LOCAL_WORKSPACE_NAME,
+            description: "Stored locally- only accessible to this browser",
+            writeable: true,
+         },
+      ];
+   }
+
+   async listWorkbooks(
+      workspace: Workspace,
+      context: PackageContextProps,
+   ): Promise<WorkbookLocator[]> {
+      const prefix = this.makeKey(context);
+      const keys: WorkbookLocator[] = [];
+      for (let i = 0; i < localStorage.length; i++) {
+         const key = localStorage.key(i);
+         if (key && key.startsWith(prefix + "/")) {
+            // Extract the notebook path after the prefix
+            const notebookPath = key.substring(prefix.length + 1);
+            keys.push({ path: notebookPath, workspace: LOCAL_WORKSPACE_NAME });
+         }
+      }
+      return keys;
+   }
+
+   async getWorkbook(
+      context: PackageContextProps,
+      path: WorkbookLocator,
+   ): Promise<string> {
+      const key = this.makeKey(context, path.path);
+      const notebook = localStorage.getItem(key);
+      if (notebook === null) {
+         throw new Error(`Notebook not found at path: ${path}`);
+      }
+      return notebook;
+   }
+
+   async deleteWorkbook(
+      context: PackageContextProps,
+      path: WorkbookLocator,
+   ): Promise<void> {
+      const key = this.makeKey(context, path.path);
+      if (localStorage.getItem(key) === null) {
+         throw new Error(`Notebook not found at path: ${path}`);
+      }
+      localStorage.removeItem(key);
+   }
+
+   async saveWorkbook(
+      context: PackageContextProps,
+      path: WorkbookLocator,
+      notebook: string,
+   ): Promise<void> {
+      console.log("saveWorkbook", context, path, notebook);
+      const key = this.makeKey(context, path.path);
+      console.log("saveWorkbook", key);
+      localStorage.setItem(key, notebook);
+   }
+
+   async moveWorkbook(
+      context: PackageContextProps,
+      from: WorkbookLocator,
+      to: WorkbookLocator,
+   ): Promise<void> {
+      const fromKey = this.makeKey(context, from.path);
+      const toKey = this.makeKey(context, to.path);
+      const notebook = localStorage.getItem(fromKey);
+      if (notebook === null) {
+         throw new Error(`Notebook not found at path: ${from.path}`);
+      }
+      localStorage.setItem(toKey, notebook);
+      localStorage.removeItem(fromKey);
+   }
+}

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

@@ -1,9 +1,9 @@
 import { SourceAndPath, SourcesExplorer } from "../Model";
 import { QueryExplorerResult } from "../Model/SourcesExplorer";
-import { NotebookCellValue } from "../NotebookManager";
+import { WorkbookCellValue } from "./WorkbookManager";
 
 interface EditableMalloyCellProps {
-   cell: NotebookCellValue;
+   cell: WorkbookCellValue;
    sourceAndPaths: SourceAndPath[];
    onQueryChange: (query: QueryExplorerResult) => void;
    onSourceChange?: (index: number) => void;

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

@@ -24,20 +24,20 @@ import {
    QueryExplorerResult,
    SourceAndPath,
 } from "../Model/SourcesExplorer";
-import { NotebookCellValue } from "../NotebookManager";
+import { WorkbookCellValue } from "./WorkbookManager";
 import ResultContainer from "../RenderedResult/ResultContainer";
 import { StyledCard } from "../styles";
 import { EditableMalloyCell } from "./EditableMalloyCell";
 
 interface NotebookCellProps {
-   cell: NotebookCellValue;
+   cell: WorkbookCellValue;
    expandCodeCell?: boolean;
    expandEmbedding?: boolean;
    hideEmbeddingIcons?: boolean;
    editingMalloy?: boolean;
    editingMarkdown?: boolean;
    sourceAndPaths: SourceAndPath[];
-   onCellChange: (cell: NotebookCellValue) => void;
+   onCellChange: (cell: WorkbookCellValue) => void;
    onClose: () => void;
    onEdit: () => void;
    onDelete: () => void;

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);