@malloy-publisher/sdk 0.0.80 → 0.0.82

package/package.json

@@ -1,7 +1,7 @@
 {
    "name": "@malloy-publisher/sdk",
    "description": "Malloy Publisher SDK",
-   "version": "0.0.80",
+   "version": "0.0.82",
    "type": "module",
    "main": "dist/index.cjs.js",
    "module": "dist/index.es.js",
@@ -49,7 +49,8 @@
       "@tanstack/react-query": "^5.59.16",
       "@uiw/react-md-editor": "^4.0.6",
       "axios": "^1.7.7",
-      "markdown-to-jsx": "^7.7.6"
+      "markdown-to-jsx": "^7.7.6",
+      "duckdb": "^1.3.1"
    },
    "devDependencies": {
       "@openapitools/openapi-generator-cli": "^2.20.2",

package/src/components/AnalyzePackageButton.tsx

@@ -1,30 +1,38 @@
 import { Add, Launch } from "@mui/icons-material";
 import {
+   Box,
    Button,
    Dialog,
    DialogContent,
    DialogTitle,
    FormControl,
+   InputLabel,
    ListItemIcon,
    ListItemText,
    Menu,
    MenuItem,
+   Select,
    Stack,
    TextField,
    Typography,
 } from "@mui/material";
 import React from "react";
 import { useRouterClickHandler } from "./click_helper";
-import {
-   BrowserNotebookStorage,
-   MutableNotebookList,
-   NotebookStorageProvider,
-} from "./MutableNotebook";
+import { WorkbookList } from "./Workbook";
+import { useWorkbookStorage } from "./Workbook/WorkbookStorageProvider";
+import type { WorkbookLocator, Workspace } from "./Workbook/WorkbookStorage";
 import { useParams } from "react-router-dom";
+import { PackageContextProps, PackageProvider } from "./Package";
 
 export function AnalyzePackageButton() {
-   const { projectName, packageName } = useParams();
+   const packageContext = useParams() as unknown as PackageContextProps;
+   const { packageName, projectName } = packageContext;
+   const { workbookStorage } = useWorkbookStorage();
    const [workbookName, setWorkbookName] = React.useState("");
+   const [selectedWorkspace, setSelectedWorkspace] = React.useState("");
+   const [availableWorkspaces, setAvailableWorkspaces] = React.useState<
+      Workspace[]
+   >([]);
    const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
    const [newDialogOpen, setNewDialogOpen] = React.useState(false);
    const [openDialogOpen, setOpenDialogOpen] = React.useState(false);
@@ -42,25 +50,52 @@ export function AnalyzePackageButton() {
    };
    const handleNewDialogClose = () => {
       setNewDialogOpen(false);
+      setWorkbookName("");
+      setSelectedWorkspace("");
    };
 
-   const handleNotebookClick = (notebook: string, event: React.MouseEvent) => {
+   // Fetch available workspaces when the new dialog opens
+   React.useEffect(() => {
+      if (newDialogOpen && workbookStorage && packageContext) {
+         workbookStorage
+            .listWorkspaces(packageContext, true) // Only show writeable workspaces
+            .then((workspaces) => {
+               setAvailableWorkspaces(workspaces);
+               // If only one workspace, select it by default
+               if (workspaces.length === 1) {
+                  setSelectedWorkspace(workspaces[0].name);
+               }
+            })
+            .catch((error) => {
+               console.error("Error fetching workspaces:", error);
+               setAvailableWorkspaces([]);
+            });
+      }
+   }, [newDialogOpen, workbookStorage, packageContext]);
+
+   const handleWorkbookClick = (
+      workbook: WorkbookLocator,
+      event: React.MouseEvent,
+   ) => {
       setOpenDialogOpen(false);
-      // Navigate to the ScratchNotebookPage with anchor text for notebookPath
+      // Navigate to the WorkbookPage with anchor text for notebookPath
       navigate(
-         `/${projectName}/${packageName}/scratchNotebook/${encodeURIComponent(notebook)}`,
+         `/${projectName}/${packageName}/workbook/${encodeURIComponent(workbook.workspace)}/${encodeURIComponent(workbook.path)}`,
          event,
       );
    };
 
-   const createNotebookClick = (event?: React.MouseEvent) => {
+   const createWorkbookClick = (event?: React.MouseEvent) => {
       setNewDialogOpen(false);
-      // Navigate to the ScratchNotebookPage with anchor text for notebookPath
+      // Include workspace in the workbook path if selected
+      const workbookPath = `${encodeURIComponent(selectedWorkspace)}/${encodeURIComponent(workbookName)}`;
+      // Navigate to the WorkbookPage with anchor text for notebookPath
       navigate(
-         `/${projectName}/${packageName}/scratchNotebook/${encodeURIComponent(workbookName)}`,
+         `/${projectName}/${packageName}/workbook/${workbookPath}`,
          event,
       );
       setWorkbookName("");
+      setSelectedWorkspace("");
    };
 
    if (!projectName || !packageName) {
@@ -143,7 +178,10 @@ export function AnalyzePackageButton() {
             fullWidth
          >
             <DialogTitle sx={{ pb: 1, pt: 2, px: 2 }}>
-               <Typography variant="h6" fontWeight={600} sx={{ mb: 0.5 }}>
+               <Typography
+                  fontWeight={600}
+                  sx={{ fontSize: "1.5rem", mb: 0.5 }}
+               >
                   Create New Workbook
                </Typography>
                <Typography variant="body2" color="text.secondary">
@@ -152,6 +190,61 @@ export function AnalyzePackageButton() {
             </DialogTitle>
             <DialogContent sx={{ px: 2, pb: 2 }}>
                <Stack spacing={2} sx={{ mt: 1 }}>
+                  {availableWorkspaces.length > 1 ? (
+                     <FormControl fullWidth size="small">
+                        <InputLabel>Workspace</InputLabel>
+                        <Select
+                           value={selectedWorkspace}
+                           label="Workspace"
+                           onChange={(e) =>
+                              setSelectedWorkspace(e.target.value)
+                           }
+                        >
+                           {availableWorkspaces.map((workspace) => (
+                              <MenuItem
+                                 key={workspace.name}
+                                 value={workspace.name}
+                              >
+                                 <Box>
+                                    <Typography
+                                       variant="body2"
+                                       fontWeight={500}
+                                    >
+                                       {workspace.name}
+                                    </Typography>
+                                    <Typography
+                                       variant="caption"
+                                       color="text.secondary"
+                                    >
+                                       {workspace.description}
+                                    </Typography>
+                                 </Box>
+                              </MenuItem>
+                           ))}
+                        </Select>
+                     </FormControl>
+                  ) : availableWorkspaces.length === 1 ? (
+                     <Box
+                        sx={{
+                           p: 2,
+                           border: 1,
+                           borderColor: "divider",
+                           borderRadius: 1,
+                           backgroundColor: "grey.50",
+                        }}
+                     >
+                        <Typography
+                           variant="body2"
+                           fontWeight={500}
+                           gutterBottom
+                        >
+                           Workspace: {availableWorkspaces[0].name}
+                        </Typography>
+                        <Typography variant="caption" color="text.secondary">
+                           {availableWorkspaces[0].description}
+                        </Typography>
+                     </Box>
+                  ) : null}
                   <FormControl fullWidth>
                      <TextField
                         label="Workbook Name"
@@ -172,9 +265,13 @@ export function AnalyzePackageButton() {
                         Cancel
                      </Button>
                      <Button
-                        onClick={(event) => createNotebookClick(event)}
+                        onClick={(event) => createWorkbookClick(event)}
                         variant="contained"
-                        disabled={!workbookName.trim()}
+                        disabled={
+                           !workbookName.trim() ||
+                           (availableWorkspaces.length > 1 &&
+                              !selectedWorkspace)
+                        }
                         size="small"
                      >
                         Create Workbook
@@ -192,7 +289,10 @@ export function AnalyzePackageButton() {
             fullWidth
          >
             <DialogTitle sx={{ pb: 1, pt: 2, px: 2 }}>
-               <Typography variant="h6" fontWeight={600} sx={{ mb: 0.5 }}>
+               <Typography
+                  fontWeight={600}
+                  sx={{ mb: 0.5, fontSize: "1.5rem" }}
+               >
                   Open Workbook
                </Typography>
                <Typography variant="body2" color="text.secondary">
@@ -200,15 +300,12 @@ export function AnalyzePackageButton() {
                </Typography>
             </DialogTitle>
             <DialogContent sx={{ px: 2, pb: 2 }}>
-               <NotebookStorageProvider
-                  notebookStorage={new BrowserNotebookStorage()}
-                  userContext={{
-                     project: projectName,
-                     package: packageName,
-                  }}
+               <PackageProvider
+                  projectName={projectName}
+                  packageName={packageName}
                >
-                  <MutableNotebookList onNotebookClick={handleNotebookClick} />
-               </NotebookStorageProvider>
+                  <WorkbookList onWorkbookClick={handleWorkbookClick} />
+               </PackageProvider>
             </DialogContent>
          </Dialog>
       </>

package/src/components/Model/Model.tsx

@@ -1,31 +1,24 @@
 import ContentCopyIcon from "@mui/icons-material/ContentCopy";
 import LinkOutlinedIcon from "@mui/icons-material/LinkOutlined";
 import {
-   Box,
    CardActions,
    Collapse,
    Divider,
    IconButton,
    Stack,
-   Tab,
-   Tabs,
    Tooltip,
    Typography,
 } from "@mui/material";
 import React, { useEffect } from "react";
-import { Configuration, ModelsApi, CompiledModel } from "../../client";
 import { highlight } from "../highlighter";
-import { StyledCard, StyledCardContent, StyledCardMedia } from "../styles";
-import { ModelCell } from "./ModelCell";
+import { StyledCard, StyledCardContent } from "../styles";
 import { ApiErrorDisplay } from "../ApiErrorDisplay";
 
 import "@malloydata/malloy-explorer/styles.css";
-import { usePackage } from "../Package/PackageProvider";
-import { SourceExplorerComponent } from "./SourcesExplorer";
+import { QueryExplorerResult } from "./SourcesExplorer";
 import { Loading } from "../Loading";
-import { useQueryWithApiError } from "../../hooks/useQueryWithApiError";
-
-const modelsApi = new ModelsApi(new Configuration());
+import { ModelExplorer } from "./ModelExplorer";
+import { useModelData } from "./useModelData";
 
 interface ModelProps {
    modelPath: string;
@@ -34,6 +27,7 @@ interface ModelProps {
    hideResultIcons?: boolean;
    expandEmbeddings?: boolean;
    hideEmbeddingIcons?: boolean;
+   onChange?: (query: QueryExplorerResult) => void;
 }
 
 // Note: For this to properly render outside of publisher,
@@ -42,18 +36,19 @@ interface ModelProps {
 
 export default function Model({
    modelPath,
+   versionId,
    expandResults,
    hideResultIcons,
    expandEmbeddings,
    hideEmbeddingIcons,
+   onChange,
 }: ModelProps) {
    const [embeddingExpanded, setEmbeddingExpanded] =
       React.useState<boolean>(false);
    const [highlightedEmbedCode, setHighlightedEmbedCode] =
       React.useState<string>();
-   const [selectedTab, setSelectedTab] = React.useState(0);
 
-   const { projectName, packageName, versionId } = usePackage();
+   const { isError, isLoading, error } = useModelData(modelPath, versionId);
    const modelCodeSnippet = getModelCodeSnippet(modelPath);
    useEffect(() => {
       highlight(modelCodeSnippet, "typescript").then((code) => {
@@ -61,33 +56,13 @@ export default function Model({
       });
    }, [embeddingExpanded, modelCodeSnippet]);
 
-   const { data, isError, isLoading, error } =
-      useQueryWithApiError<CompiledModel>({
-         queryKey: ["package", projectName, packageName, modelPath, versionId],
-         queryFn: async (config) => {
-            const response = await modelsApi.getModel(
-               projectName,
-               packageName,
-               modelPath,
-               versionId,
-               config,
-            );
-            return response.data;
-         },
-      });
-
    if (isLoading) {
       return <Loading text="Fetching Model..." />;
    }
 
    if (isError) {
       console.log("error", error);
-      return (
-         <ApiErrorDisplay
-            error={error}
-            context={`${packageName} > ${modelPath}`}
-         />
-      );
+      return <ApiErrorDisplay error={error} context={`Model > ${modelPath}`} />;
    }
    return (
       <StyledCard variant="outlined">
@@ -95,39 +70,9 @@ export default function Model({
             <Stack
                sx={{
                   flexDirection: "row",
-                  justifyContent: "space-between",
+                  justifyContent: "flex-end",
                }}
             >
-               {Array.isArray(data.sourceInfos) &&
-                  data.sourceInfos.length > 0 && (
-                     <Tabs
-                        value={selectedTab}
-                        onChange={(_, newValue) => setSelectedTab(newValue)}
-                        variant="scrollable"
-                        scrollButtons="auto"
-                        sx={{
-                           borderBottom: 1,
-                           borderColor: "divider",
-                           minHeight: 36,
-                        }}
-                     >
-                        {data.sourceInfos.map((source, idx) => {
-                           let sourceInfo;
-                           try {
-                              sourceInfo = JSON.parse(source);
-                           } catch {
-                              sourceInfo = { name: String(idx) };
-                           }
-                           return (
-                              <Tab
-                                 key={sourceInfo.name || idx}
-                                 label={sourceInfo.name || `Source ${idx + 1}`}
-                                 sx={{ minHeight: 36 }}
-                              />
-                           );
-                        })}
-                     </Tabs>
-                  )}
                {!hideEmbeddingIcons && (
                   <CardActions
                      sx={{
@@ -191,51 +136,15 @@ export default function Model({
             </Collapse>
             <Divider />
          </StyledCardContent>
-         <StyledCardMedia>
-            <Stack spacing={2} component="section">
-               {/* Only render the selected sourceInfo */}
-               {Array.isArray(data.sourceInfos) &&
-                  data.sourceInfos.length > 0 && (
-                     <SourceExplorerComponent
-                        sourceAndPath={{
-                           modelPath,
-                           sourceInfo: JSON.parse(
-                              data.sourceInfos[selectedTab],
-                           ),
-                        }}
-                     />
-                  )}
-               {data.queries?.length > 0 && (
-                  <StyledCard
-                     variant="outlined"
-                     sx={{ padding: "0px 10px 0px 10px" }}
-                  >
-                     <StyledCardContent sx={{ p: "10px" }}>
-                        <Typography variant="subtitle1">
-                           Named Queries
-                        </Typography>
-                     </StyledCardContent>
-                     <Stack spacing={1} component="section">
-                        {data.queries.map((query) => (
-                           <ModelCell
-                              key={query.name}
-                              modelPath={modelPath}
-                              queryName={query.name}
-                              expandResult={expandResults}
-                              hideResultIcon={hideResultIcons}
-                              expandEmbedding={expandEmbeddings}
-                              hideEmbeddingIcon={hideEmbeddingIcons}
-                              noView={true}
-                              annotations={query.annotations}
-                           />
-                        ))}
-                     </Stack>
-                     <Box height="10px" />
-                  </StyledCard>
-               )}
-               <Box height="5px" />
-            </Stack>
-         </StyledCardMedia>
+         <ModelExplorer
+            modelPath={modelPath}
+            versionId={versionId}
+            expandResults={expandResults}
+            hideResultIcons={hideResultIcons}
+            expandEmbeddings={expandEmbeddings}
+            hideEmbeddingIcons={hideEmbeddingIcons}
+            onChange={onChange}
+         />
       </StyledCard>
    );
 }

package/src/components/Model/ModelExplorer.tsx

@@ -0,0 +1,138 @@
+import React from "react";
+import { Box, Stack, Typography, Tabs, Tab } from "@mui/material";
+import { StyledCard, StyledCardContent } from "../styles";
+import { ModelCell } from "./ModelCell";
+import {
+   QueryExplorerResult,
+   SourceExplorerComponent,
+} from "./SourcesExplorer";
+import { ApiErrorDisplay } from "../ApiErrorDisplay";
+import { Loading } from "../Loading";
+import { useModelData } from "./useModelData";
+
+export interface ModelExplorerProps {
+   modelPath: string;
+   versionId?: string;
+   /** Display options forwarded to ModelCell */
+   expandResults?: boolean;
+   hideResultIcons?: boolean;
+   expandEmbeddings?: boolean;
+   hideEmbeddingIcons?: boolean;
+   /** Callback when the explorer changes (e.g. when a query is selected). */
+   onChange?: (query: QueryExplorerResult) => void;
+}
+
+/**
+ * ModelExplorer renders the main explorer UI for a Malloy model. It shows the
+ * selected source (via `SourceExplorerComponent`) along with the list of named
+ * queries for that model. This logic was originally embedded inside `Model.tsx`
+ * but has been extracted for easier reuse.
+ */
+export function ModelExplorer({
+   modelPath,
+   versionId,
+   expandResults,
+   hideResultIcons,
+   expandEmbeddings,
+   hideEmbeddingIcons,
+   onChange,
+}: ModelExplorerProps) {
+   const [selectedTab, setSelectedTab] = React.useState(0);
+
+   const { data, isError, isLoading, error } = useModelData(
+      modelPath,
+      versionId,
+   );
+
+   if (isLoading) {
+      return <Loading text="Fetching Model..." />;
+   }
+
+   if (isError) {
+      console.log("error", error);
+      return (
+         <ApiErrorDisplay
+            error={error}
+            context={`ModelExplorer > ${modelPath}`}
+         />
+      );
+   }
+
+   return (
+      <Stack spacing={2} component="section">
+         {/* Render the tabs for source selection */}
+         {Array.isArray(data.sourceInfos) && data.sourceInfos.length > 0 && (
+            <Stack sx={{ flexDirection: "row", justifyContent: "flex-start" }}>
+               <Tabs
+                  value={selectedTab}
+                  onChange={(_, newValue) => setSelectedTab(newValue)}
+                  variant="scrollable"
+                  scrollButtons="auto"
+                  sx={{
+                     borderBottom: 1,
+                     borderColor: "divider",
+                     minHeight: 36,
+                  }}
+               >
+                  {data.sourceInfos.map((source, idx) => {
+                     let sourceInfo;
+                     try {
+                        sourceInfo = JSON.parse(source);
+                     } catch {
+                        sourceInfo = { name: String(idx) };
+                     }
+                     return (
+                        <Tab
+                           key={sourceInfo.name || idx}
+                           label={sourceInfo.name || `Source ${idx + 1}`}
+                           sx={{ minHeight: 36 }}
+                        />
+                     );
+                  })}
+               </Tabs>
+            </Stack>
+         )}
+
+         {/* Render the selected source info */}
+         {Array.isArray(data.sourceInfos) && data.sourceInfos.length > 0 && (
+            <SourceExplorerComponent
+               sourceAndPath={{
+                  modelPath,
+                  sourceInfo: JSON.parse(data.sourceInfos[selectedTab]),
+               }}
+               onChange={onChange}
+            />
+         )}
+
+         {/* Render the named queries */}
+         {data.queries?.length > 0 && (
+            <StyledCard
+               variant="outlined"
+               sx={{ padding: "0px 10px 0px 10px" }}
+            >
+               <StyledCardContent sx={{ p: "10px" }}>
+                  <Typography variant="subtitle1">Named Queries</Typography>
+               </StyledCardContent>
+
+               <Stack spacing={1} component="section">
+                  {data.queries.map((query) => (
+                     <ModelCell
+                        key={query.name}
+                        modelPath={modelPath}
+                        queryName={query.name}
+                        expandResult={expandResults}
+                        hideResultIcon={hideResultIcons}
+                        expandEmbedding={expandEmbeddings}
+                        hideEmbeddingIcon={hideEmbeddingIcons}
+                        noView={true}
+                        annotations={query.annotations}
+                     />
+                  ))}
+               </Stack>
+               <Box height="10px" />
+            </StyledCard>
+         )}
+         <Box height="5px" />
+      </Stack>
+   );
+}