@malloy-publisher/sdk 0.0.52 → 0.0.54

package/package.json

@@ -1,7 +1,7 @@
 {
    "name": "@malloy-publisher/sdk",
    "description": "Malloy Publisher SDK",
-   "version": "0.0.52",
+   "version": "0.0.54",
    "type": "module",
    "main": "dist/index.cjs.js",
    "module": "dist/index.es.js",

package/src/components/AnalyzePackageButton.tsx

@@ -1,24 +1,25 @@
 import { Add, Launch } from "@mui/icons-material";
 import {
    Button,
-   Menu,
-   MenuItem,
-   ListItemIcon,
-   ListItemText,
-   Typography,
    Dialog,
-   DialogTitle,
    DialogContent,
+   DialogTitle,
    FormControl,
+   ListItemIcon,
+   ListItemText,
+   Menu,
+   MenuItem,
+   Stack,
    TextField,
+   Typography,
 } from "@mui/material";
+import React from "react";
+import { useRouterClickHandler } from "./click_helper";
 import {
-   NotebookStorageProvider,
    BrowserNotebookStorage,
    MutableNotebookList,
+   NotebookStorageProvider,
 } from "./MutableNotebook";
-import React from "react";
-import { useRouterClickHandler } from "./click_helper";
 
 export interface AnalyzePackageButtonProps {
    projectName: string;
@@ -75,7 +76,15 @@ export function AnalyzePackageButton({
             aria-haspopup="true"
             aria-expanded={open ? "true" : undefined}
             onClick={handleClick}
-            sx={{ height: "40px" }}
+            variant="contained"
+            sx={{
+               height: "40px",
+               px: 2,
+               backgroundColor: "#fbbb04",
+               "&:hover": {
+                  backgroundColor: "#eab308",
+               },
+            }}
          >
             Analyze Package
          </Button>
@@ -84,10 +93,9 @@ export function AnalyzePackageButton({
             anchorEl={anchorEl}
             open={open}
             onClose={handleMenuClose}
-            slotProps={{
-               list: {
-                  "aria-labelledby": "basic-button",
-               },
+            MenuListProps={{
+               "aria-labelledby": "basic-button",
+               sx: { py: 0.5 },
             }}
          >
             <MenuItem
@@ -95,12 +103,18 @@ export function AnalyzePackageButton({
                   setNewDialogOpen(true);
                   handleMenuClose();
                }}
+               sx={{ py: 1, px: 2 }}
             >
                <ListItemIcon>
                   <Add fontSize="small" />
                </ListItemIcon>
                <ListItemText>
-                  <Typography variant="body2">New Workbook</Typography>
+                  <Typography variant="body2" fontWeight={500}>
+                     New Workbook
+                  </Typography>
+                  <Typography variant="caption" color="text.secondary">
+                     Create a new analysis workbook
+                  </Typography>
                </ListItemText>
             </MenuItem>
             <MenuItem
@@ -108,67 +122,87 @@ export function AnalyzePackageButton({
                   setOpenDialogOpen(true);
                   handleMenuClose();
                }}
+               sx={{ py: 1, px: 2 }}
             >
                <ListItemIcon>
                   <Launch fontSize="small" />
                </ListItemIcon>
                <ListItemText>
-                  <Typography variant="body2">Open Workbook</Typography>
+                  <Typography variant="body2" fontWeight={500}>
+                     Open Workbook
+                  </Typography>
+                  <Typography variant="caption" color="text.secondary">
+                     Open an existing workbook
+                  </Typography>
                </ListItemText>
             </MenuItem>
          </Menu>
+
+         {/* Create New Workbook Dialog */}
          <Dialog
             open={newDialogOpen}
             onClose={handleNewDialogClose}
-            sx={{
-               "& .MuiDialog-paper": {
-                  width: "100%",
-                  maxWidth: "300px",
-               },
-            }}
+            maxWidth="sm"
+            fullWidth
          >
-            <DialogTitle variant="subtitle1" sx={{ fontWeight: "medium" }}>
-               Create Workbook
+            <DialogTitle sx={{ pb: 1, pt: 2, px: 2 }}>
+               <Typography variant="h6" fontWeight={600} sx={{ mb: 0.5 }}>
+                  Create New Workbook
+               </Typography>
+               <Typography variant="body2" color="text.secondary">
+                  Start a new analysis workbook to explore your data
+               </Typography>
             </DialogTitle>
-            <DialogContent>
-               <FormControl
-                  sx={{
-                     width: "100%",
-                     display: "flex",
-                     alignItems: "center",
-                     gap: 2,
-                  }}
-               >
-                  <TextField
-                     label="Workbook Name"
-                     value={workbookName}
-                     onChange={(e) => setWorkbookName(e.target.value)}
-                     sx={{
-                        width: "100%",
-                        maxWidth: "400px",
-                        mt: 1,
-                     }}
-                  />
-                  <Button onClick={(event) => createNotebookClick(event)}>
-                     Create
-                  </Button>
-               </FormControl>
+            <DialogContent sx={{ px: 2, pb: 2 }}>
+               <Stack spacing={2} sx={{ mt: 1 }}>
+                  <FormControl fullWidth>
+                     <TextField
+                        label="Workbook Name"
+                        value={workbookName}
+                        onChange={(e) => setWorkbookName(e.target.value)}
+                        placeholder="Enter workbook name..."
+                        fullWidth
+                        autoFocus
+                        size="small"
+                     />
+                  </FormControl>
+                  <Stack direction="row" spacing={1} justifyContent="flex-end">
+                     <Button
+                        onClick={handleNewDialogClose}
+                        variant="outlined"
+                        size="small"
+                     >
+                        Cancel
+                     </Button>
+                     <Button
+                        onClick={(event) => createNotebookClick(event)}
+                        variant="contained"
+                        disabled={!workbookName.trim()}
+                        size="small"
+                     >
+                        Create Workbook
+                     </Button>
+                  </Stack>
+               </Stack>
             </DialogContent>
          </Dialog>
+
+         {/* Open Workbook Dialog */}
          <Dialog
             open={openDialogOpen}
             onClose={handleOpenDialogClose}
-            sx={{
-               "& .MuiDialog-paper": {
-                  width: "100%",
-                  maxWidth: "300px",
-               },
-            }}
+            maxWidth="md"
+            fullWidth
          >
-            <DialogTitle variant="subtitle1" sx={{ fontWeight: "medium" }}>
-               Open Workbook
+            <DialogTitle sx={{ pb: 1, pt: 2, px: 2 }}>
+               <Typography variant="h6" fontWeight={600} sx={{ mb: 0.5 }}>
+                  Open Workbook
+               </Typography>
+               <Typography variant="body2" color="text.secondary">
+                  Select an existing workbook to continue your analysis
+               </Typography>
             </DialogTitle>
-            <DialogContent>
+            <DialogContent sx={{ px: 2, pb: 2 }}>
                <NotebookStorageProvider
                   notebookStorage={new BrowserNotebookStorage()}
                   userContext={{

package/src/components/Model/ModelCell.tsx

@@ -1,22 +1,21 @@
-import React from "react";
+import AnalyticsOutlinedIcon from "@mui/icons-material/AnalyticsOutlined";
+import ContentCopyIcon from "@mui/icons-material/ContentCopy";
+import LinkOutlinedIcon from "@mui/icons-material/LinkOutlined";
 import {
-   styled,
-   Collapse,
-   CardActions,
    Card,
+   CardActions,
    CardContent,
+   Collapse,
    Divider,
+   IconButton,
    Stack,
-   Typography,
+   styled,
    Tooltip,
-   IconButton,
+   Typography,
 } from "@mui/material";
-import { QueryResult } from "../QueryResult";
-import AnalyticsOutlinedIcon from "@mui/icons-material/AnalyticsOutlined";
-import LinkOutlinedIcon from "@mui/icons-material/LinkOutlined";
-import ContentCopyIcon from "@mui/icons-material/ContentCopy";
-import { useEffect } from "react";
+import React, { useEffect } from "react";
 import { highlight } from "../highlighter";
+import { QueryResult } from "../QueryResult";
 
 const StyledCard = styled(Card)({
    display: "flex",
@@ -170,7 +169,7 @@ export function ModelCell({
                </Stack>
             </Collapse>
             <Collapse in={resultsExpanded} timeout="auto" unmountOnExit>
-               <Divider sx={{ mb: "10px" }} />
+               <Divider sx={{ mb: "4px" }} />
                {highlightedAnnotations && (
                   <>
                      <Stack
@@ -195,7 +194,7 @@ export function ModelCell({
                            />
                         </Typography>
                      </Stack>
-                     <Divider sx={{ mb: "10px" }} />
+                     <Divider sx={{ mb: "4px" }} />
                   </>
                )}
                <CardContent>

package/src/components/Model/SourcesExplorer.tsx

@@ -20,8 +20,8 @@ import {
 import { styled } from "@mui/material/styles";
 import React from "react";
 import { Configuration, QueryresultsApi } from "../../client";
-import { usePackage } from "../Package/PackageProvider";
 import { useMutationWithApiError } from "../../hooks/useQueryWithApiError";
+import { usePackage } from "../Package/PackageProvider";
 
 const queryResultsApi = new QueryresultsApi(new Configuration());
 
@@ -63,7 +63,8 @@ export interface SourceExplorerProps {
    sourceAndPaths: SourceAndPath[];
    existingQuery?: QueryExplorerResult;
    existingSourceName?: string;
-   onChange?: (query: QueryExplorerResult) => void;
+   onQueryChange?: (query: QueryExplorerResult) => void;
+   onSourceChange?: (index: number) => void;
 }
 
 /**
@@ -77,13 +78,14 @@ export function SourcesExplorer({
    sourceAndPaths,
    existingQuery,
    existingSourceName,
-   onChange,
+   onQueryChange,
+   onSourceChange,
 }: SourceExplorerProps) {
    const [selectedTab, setSelectedTab] = React.useState(
       existingSourceName
          ? sourceAndPaths.findIndex(
-              (entry) => entry.sourceInfo.name === existingSourceName,
-           )
+            (entry) => entry.sourceInfo.name === existingSourceName,
+         )
          : 0,
    );
 
@@ -91,6 +93,13 @@ export function SourcesExplorer({
       existingQuery || emptyQueryExplorerResult(),
    );
 
+   // Notify parent component when selected source changes
+   React.useEffect(() => {
+      if (onSourceChange) {
+         onSourceChange(selectedTab);
+      }
+   }, [selectedTab, onSourceChange]);
+
    return (
       <StyledCard variant="outlined">
          <StyledCardContent>
@@ -123,8 +132,8 @@ export function SourcesExplorer({
                   existingQuery={query}
                   onChange={(query) => {
                      setQuery(query);
-                     if (onChange) {
-                        onChange(query);
+                     if (onQueryChange) {
+                        onQueryChange(query);
                      }
                   }}
                />
@@ -292,16 +301,16 @@ export function SourceExplorerComponent({
                         submittedQuery={
                            query?.malloyQuery
                               ? {
-                                   executionState: mutation.isPending
-                                      ? "running"
-                                      : "finished",
-                                   response: {
-                                      result: query.malloyResult,
-                                   },
-                                   query: query.malloyQuery,
-                                   queryResolutionStartMillis: Date.now(),
-                                   onCancel: mutation.reset,
-                                }
+                                 executionState: mutation.isPending
+                                    ? "running"
+                                    : "finished",
+                                 response: {
+                                    result: query.malloyResult,
+                                 },
+                                 query: query.malloyQuery,
+                                 queryResolutionStartMillis: Date.now(),
+                                 onCancel: mutation.reset,
+                              }
                               : undefined
                         }
                         options={{ showRawQuery: true }}

package/src/components/MutableNotebook/EditableMalloyCell.tsx

@@ -5,25 +5,30 @@ import { NotebookCellValue } from "../NotebookManager";
 interface EditableMalloyCellProps {
    cell: NotebookCellValue;
    sourceAndPaths: SourceAndPath[];
-   onChange: (query: QueryExplorerResult) => void;
+   onQueryChange: (query: QueryExplorerResult) => void;
+   onSourceChange?: (index: number) => void;
 }
 
 export function EditableMalloyCell({
    cell,
    sourceAndPaths,
-   onChange,
+   onQueryChange,
+   onSourceChange,
 }: EditableMalloyCellProps) {
    const query = {
       query: cell.value,
       malloyResult: cell.result ? JSON.parse(cell.result) : undefined,
       malloyQuery: cell.queryInfo ? JSON.parse(cell.queryInfo) : undefined,
+      sourceName: cell.sourceName,
+      modelPath: cell.modelPath,
    };
    return (
       <SourcesExplorer
          sourceAndPaths={sourceAndPaths}
          existingQuery={query}
          existingSourceName={cell.sourceName}
-         onChange={onChange}
+         onQueryChange={onQueryChange}
+         onSourceChange={onSourceChange}
       />
    );
 }

package/src/components/MutableNotebook/MutableCell.tsx

@@ -69,6 +69,13 @@ export function MutableCell({
       emptyQueryExplorerResult(),
    );
    const [isHovered, setIsHovered] = React.useState<boolean>(false);
+   const [selectedSourceIndex, setSelectedSourceIndex] = React.useState<number>(
+      cell.sourceName
+         ? sourceAndPaths.findIndex(
+            (entry) => entry.sourceInfo.name === cell.sourceName,
+         )
+         : 0,
+   );
 
    useEffect(() => {
       if (!cell.isMarkdown)
@@ -91,7 +98,13 @@ export function MutableCell({
    };
    const noSources = sourceAndPaths.length === 0;
 
-   const saveResult = (modelPath: string, sourceName: string) => {
+   const saveResult = () => {
+      // Get the current modelPath and sourceName from the selected source
+      const currentSource = sourceAndPaths[selectedSourceIndex];
+      const modelPath = currentSource?.modelPath || cell.modelPath || "";
+      const sourceName =
+         currentSource?.sourceInfo.name || cell.sourceName || "";
+
       // Convert the results of the Query Explorer into
       // the stringified JSON objects that are stored in the cell.
       onCellChange({
@@ -197,7 +210,7 @@ export function MutableCell({
                <IconButton
                   size="small"
                   onClick={() => {
-                     saveResult(cell.modelPath, cell.sourceName);
+                     saveResult();
                      onClose();
                   }}
                >
@@ -229,7 +242,7 @@ export function MutableCell({
          <IconButton
             size="small"
             onClick={() => {
-               saveResult(cell.modelPath, cell.sourceName);
+               saveResult();
                onClose();
             }}
          >
@@ -295,7 +308,7 @@ export function MutableCell({
                         updateMarkdown(newValue);
                      }}
                      onBlur={() => {
-                        saveResult(cell.modelPath, cell.sourceName);
+                        saveResult();
                         if (!isHovered) {
                            onClose();
                         }
@@ -415,10 +428,11 @@ export function MutableCell({
                   ) : (
                      <EditableMalloyCell
                         sourceAndPaths={sourceAndPaths}
-                        onChange={(query) => {
+                        onQueryChange={(query) => {
                            setQuery(query);
                         }}
                         cell={cell}
+                        onSourceChange={setSelectedSourceIndex}
                      />
                   ))}
                {!editingMalloy && cell.result && (

package/src/components/MutableNotebook/MutableNotebook.tsx

@@ -131,51 +131,51 @@ export default function MutableNotebook({
       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),
-            });
+
+      const fetchModels = async () => {
+         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) => {
+
+         if (promises.length > 0) {
+            const loadedSourceAndPaths = await Promise.all(promises);
             setSourceAndPaths([...newSourceAndPaths, ...loadedSourceAndPaths]);
-         });
-      }
-   }, [
-      accessToken,
-      notebookData,
-      packageName,
-      projectName,
-      server,
-      sourceAndPaths,
-      versionId,
-   ]);
+         } else {
+            setSourceAndPaths(newSourceAndPaths);
+         }
+      };
+
+      fetchModels();
+   }, [accessToken, notebookData, packageName, projectName, server, versionId]);
 
    React.useEffect(() => {
       if (!notebookPath) {

package/src/components/Notebook/Notebook.tsx

@@ -1,25 +1,23 @@
+import "@malloydata/malloy-explorer/styles.css";
 import ContentCopyIcon from "@mui/icons-material/ContentCopy";
 import LinkOutlinedIcon from "@mui/icons-material/LinkOutlined";
 import {
-   Box,
    CardActions,
    Collapse,
-   Divider,
    IconButton,
    Stack,
    Tooltip,
    Typography,
 } from "@mui/material";
 import React, { useEffect } from "react";
-import { Configuration, NotebooksApi, CompiledNotebook } from "../../client";
+import { CompiledNotebook, Configuration, NotebooksApi } from "../../client";
+import { useQueryWithApiError } from "../../hooks/useQueryWithApiError";
+import { ApiErrorDisplay } from "../ApiErrorDisplay";
 import { highlight } from "../highlighter";
+import { Loading } from "../Loading";
+import { usePackage } from "../Package/PackageProvider";
 import { StyledCard, StyledCardContent, StyledCardMedia } from "../styles";
 import { NotebookCell } from "./NotebookCell";
-import { ApiErrorDisplay } from "../ApiErrorDisplay";
-import { useQueryWithApiError } from "../../hooks/useQueryWithApiError";
-import "@malloydata/malloy-explorer/styles.css";
-import { usePackage } from "../Package/PackageProvider";
-import { Loading } from "../Loading";
 
 const notebooksApi = new NotebooksApi(new Configuration());
 
@@ -112,10 +110,8 @@ export default function Notebook({
                )}
             </Stack>
             <Collapse in={embeddingExpanded} timeout="auto" unmountOnExit>
-               <Divider />
                <Stack
                   sx={{
-                     p: "10px",
                      borderRadius: 0,
                      flexDirection: "row",
                      justifyContent: "space-between",
@@ -145,10 +141,9 @@ export default function Notebook({
                   </Tooltip>
                </Stack>
             </Collapse>
-            <Divider />
          </StyledCardContent>
          <StyledCardMedia>
-            <Stack spacing={1} component="section">
+            <Stack spacing={2} component="section">
                {!isSuccess && !isError && (
                   <Loading text="Fetching Notebook..." />
                )}

package/src/components/Notebook/NotebookCell.tsx

@@ -69,7 +69,7 @@ export function NotebookCell({
 
    return (
       (cell.type === "markdown" && (
-         <StyledCard variant="outlined" sx={{ border: 0 }}>
+         <StyledCard variant="outlined">
             <StyledCardContent>
                <Markdown>{cell.text}</Markdown>
             </StyledCardContent>
@@ -86,7 +86,7 @@ export function NotebookCell({
                >
                   <CardActions
                      sx={{
-                        padding: "0px 10px 0px 10px",
+                        padding: "0px 8px 0px 8px",
                         mb: "auto",
                         mt: "auto",
                      }}
@@ -154,7 +154,7 @@ export function NotebookCell({
             <Collapse in={embeddingExpanded} timeout="auto" unmountOnExit>
                <Stack
                   sx={{
-                     p: "10px",
+                     p: "8px",
                      borderRadius: 0,
                      flexDirection: "row",
                      justifyContent: "space-between",
@@ -188,8 +188,7 @@ export function NotebookCell({
                <style>{codeStyle}</style>
                <Stack
                   sx={{
-                     mx: "15px",
-                     mb: "10px",
+                     mx: "8px",
                      borderRadius: 0,
                      flexDirection: "row",
                      justifyContent: "space-between",