@malloy-publisher/sdk 0.0.36 → 0.0.38

package/package.json

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

package/src/components/ApiErrorDisplay.tsx

@@ -4,7 +4,7 @@ import React from "react";
 export interface ApiError extends Error {
    status?: number;
    data?: {
-      code: string;
+      code: number;
       message: string;
    };
 }

package/src/components/Home/Home.tsx

@@ -1,10 +1,9 @@
 import { Grid, Typography } from "@mui/material";
 import { QueryClient, useQuery } from "@tanstack/react-query";
 import { ProjectsApi, Configuration } from "../../client";
-import axios from "axios";
 import { ApiErrorDisplay } from "../ApiErrorDisplay";
+import { Loading } from "../Loading";
 
-axios.defaults.baseURL = "http://localhost:4000";
 const projectsApi = new ProjectsApi(new Configuration());
 const queryClient = new QueryClient();
 
@@ -63,6 +62,6 @@ export default function Home({ server, navigate }: HomeProps) {
          );
       }
    } else {
-      return <Typography variant="h6">Loading projects...</Typography>;
+      return <Loading text="Loading projects..." />;
    }
 }

package/src/components/Loading.tsx

@@ -0,0 +1,104 @@
+import React from "react";
+import { Box, CircularProgress, Typography } from "@mui/material";
+
+export interface LoadingProps {
+   /**
+    * The text to display below the spinner
+    */
+   text?: string;
+   /**
+    * The size of the CircularProgress component
+    * @default 40
+    */
+   size?: number | string;
+   /**
+    * The color of the CircularProgress component
+    * @default "primary"
+    */
+   color?:
+      | "primary"
+      | "secondary"
+      | "error"
+      | "info"
+      | "success"
+      | "warning"
+      | "inherit";
+   /**
+    * The thickness of the circular progress
+    * @default 3.6
+    */
+   thickness?: number;
+   /**
+    * Whether to center the component
+    * @default true
+    */
+   centered?: boolean;
+   /**
+    * Custom spacing between spinner and text
+    * @default 2
+    */
+   spacing?: number;
+   /**
+    * Typography variant for the text
+    * @default "body1"
+    */
+   textVariant?:
+      | "h1"
+      | "h2"
+      | "h3"
+      | "h4"
+      | "h5"
+      | "h6"
+      | "subtitle1"
+      | "subtitle2"
+      | "body1"
+      | "body2"
+      | "caption"
+      | "overline";
+}
+
+export function Loading({
+   text,
+   size = 40,
+   color = "primary",
+   thickness = 3.6,
+   centered = true,
+   spacing = 2,
+   textVariant = "body1",
+}: LoadingProps) {
+   const content = (
+      <Box
+         sx={{
+            display: "flex",
+            flexDirection: "column",
+            alignItems: "center",
+            gap: spacing,
+         }}
+      >
+         <CircularProgress size={size} color={color} thickness={thickness} />
+         {text && (
+            <Typography variant={textVariant} color="text.secondary">
+               {text}
+            </Typography>
+         )}
+      </Box>
+   );
+
+   if (centered) {
+      return (
+         <Box
+            sx={{
+               display: "flex",
+               justifyContent: "center",
+               alignItems: "center",
+               minHeight: "200px",
+               width: "100%",
+            }}
+         >
+            {content}
+         </Box>
+      );
+   }
+
+   return content;
+}

package/src/components/Model/Model.tsx

@@ -23,7 +23,7 @@ import { ApiErrorDisplay, ApiError } from "../ApiErrorDisplay";
 import "@malloydata/malloy-explorer/styles.css";
 import { usePackage } from "../Package/PackageProvider";
 import { SourceExplorerComponent } from "./SourcesExplorer";
-import NamedQueries from "./NamedQueries";
+import { Loading } from "../Loading";
 
 const modelsApi = new ModelsApi(new Configuration());
 
@@ -118,11 +118,7 @@ export default function Model({
    );
 
    if (isLoading) {
-      return (
-         <Typography sx={{ p: "20px", m: "auto" }}>
-            Fetching Model...
-         </Typography>
-      );
+      return <Loading text="Fetching Model..." />;
    }
 
    if (isError) {

package/src/components/Model/NamedQueries.tsx

@@ -1,17 +1,17 @@
 import {
-   Typography,
    Accordion,
-   AccordionSummary,
    AccordionDetails,
+   AccordionSummary,
+   Typography,
 } from "@mui/material";
 import { Box } from "@mui/system";
 import { Query, QueryresultsApi } from "../../client/api";
 import { StyledCard, StyledCardContent } from "../styles";
 
 import { QueryClient, useMutation } from "@tanstack/react-query";
+import React from "react";
 import { Configuration } from "../../client";
 import { usePackage } from "../Package";
-import React from "react";
 import ResultContainer from "../RenderedResult/ResultContainer";
 
 const queryResultsApi = new QueryresultsApi(new Configuration());
@@ -70,17 +70,17 @@ export default function NamedQueries({
 
    const handleAccordionChange =
       (query: Query, queryKey: string) =>
-      (event: React.SyntheticEvent, isExpanded: boolean) => {
-         setExpandedAccordions((prev) => ({
-            ...prev,
-            [queryKey]: isExpanded,
-         }));
+         (_event: React.SyntheticEvent, isExpanded: boolean) => {
+            setExpandedAccordions((prev) => ({
+               ...prev,
+               [queryKey]: isExpanded,
+            }));
 
-         // Trigger mutation only if expanding and we haven't executed this query before
-         if (isExpanded && !namedQueryResults[query.name]) {
-            mutation.mutate({ query });
-         }
-      };
+            // Trigger mutation only if expanding and we haven't executed this query before
+            if (isExpanded && !namedQueryResults[query.name]) {
+               mutation.mutate({ query });
+            }
+         };
 
    if (!namedQueries) {
       return <div> Loading Named Queries</div>;

package/src/components/Model/SourcesExplorer.tsx

@@ -1,6 +1,6 @@
 import * as Malloy from "@malloydata/malloy-interfaces";
 import * as QueryBuilder from "@malloydata/malloy-query-builder";
-import { Button, CardActions } from "@mui/material";
+import { Button } from "@mui/material";
 import { Box, Stack } from "@mui/system";
 import {
    StyledCard,
@@ -64,11 +64,7 @@ export interface SourceExplorerProps {
    sourceAndPaths: SourceAndPath[];
    existingQuery?: QueryExplorerResult;
    existingSourceName?: string;
-   saveResult?: (
-      modelPath: string,
-      sourceName: string,
-      query: QueryExplorerResult,
-   ) => void;
+   onChange?: (query: QueryExplorerResult) => void;
 }
 
 /**
@@ -80,15 +76,15 @@ export interface SourceExplorerProps {
  */
 export function SourcesExplorer({
    sourceAndPaths,
-   saveResult,
    existingQuery,
    existingSourceName,
+   onChange,
 }: SourceExplorerProps) {
    const [selectedTab, setSelectedTab] = React.useState(
       existingSourceName
          ? sourceAndPaths.findIndex(
-              (entry) => entry.sourceInfo.name === existingSourceName,
-           )
+            (entry) => entry.sourceInfo.name === existingSourceName,
+         )
          : 0,
    );
 
@@ -119,27 +115,6 @@ export function SourcesExplorer({
                      ))}
                   </MultiRowTabBar>
                )}
-               {saveResult && (
-                  <CardActions
-                     sx={{
-                        padding: "0px 10px 0px 10px",
-                        mb: "auto",
-                        mt: "auto",
-                     }}
-                  >
-                     <Button
-                        onClick={() =>
-                           saveResult(
-                              sourceAndPaths[selectedTab].modelPath,
-                              sourceAndPaths[selectedTab].sourceInfo.name,
-                              query,
-                           )
-                        }
-                     >
-                        Save
-                     </Button>
-                  </CardActions>
-               )}
             </Stack>
          </StyledCardContent>
          <StyledCardMedia>
@@ -147,7 +122,12 @@ export function SourcesExplorer({
                <SourceExplorerComponent
                   sourceAndPath={sourceAndPaths[selectedTab]}
                   existingQuery={query}
-                  onChange={setQuery}
+                  onChange={(query) => {
+                     setQuery(query);
+                     if (onChange) {
+                        onChange(query);
+                     }
+                  }}
                />
                <Box height="5px" />
             </Stack>
@@ -323,16 +303,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

@@ -1,19 +1,17 @@
 import { SourceAndPath, SourcesExplorer } from "../Model";
+import { QueryExplorerResult } from "../Model/SourcesExplorer";
 import { NotebookCellValue } from "../NotebookManager";
 
 interface EditableMalloyCellProps {
    cell: NotebookCellValue;
    sourceAndPaths: SourceAndPath[];
-   onCellChange: (cell: NotebookCellValue) => void;
-
-   onClose: () => void;
+   onChange: (query: QueryExplorerResult) => void;
 }
 
 export function EditableMalloyCell({
    cell,
    sourceAndPaths,
-   onCellChange,
-   onClose,
+   onChange,
 }: EditableMalloyCellProps) {
    const query = {
       query: cell.value,
@@ -25,23 +23,7 @@ export function EditableMalloyCell({
          sourceAndPaths={sourceAndPaths}
          existingQuery={query}
          existingSourceName={cell.sourceName}
-         saveResult={(modelPath, sourceName, qer) => {
-            // Convert the results of the Query Explorer into
-            // the stringified JSON objects that are stored in the cell.
-            onCellChange({
-               ...cell,
-               value: qer.query,
-               result: qer.malloyResult
-                  ? JSON.stringify(qer.malloyResult)
-                  : undefined,
-               queryInfo: qer.malloyQuery
-                  ? JSON.stringify(qer.malloyQuery)
-                  : undefined,
-               sourceName,
-               modelPath,
-            });
-            onClose();
-         }}
+         onChange={onChange}
       />
    );
 }

package/src/components/MutableNotebook/ModelPicker.tsx

@@ -1,26 +1,20 @@
-import AddIcon from "@mui/icons-material/Add";
 import CloseIcon from "@mui/icons-material/Close";
+import FileUploadOutlinedIcon from "@mui/icons-material/FileUploadOutlined";
 import {
    Button,
    Chip,
-   Dialog,
-   DialogActions,
-   DialogContent,
-   DialogTitle,
+   Divider,
    FormControl,
-   List,
-   ListItem,
-   ListItemButton,
-   ListItemText,
+   Menu,
+   MenuItem,
    Stack,
    Typography,
 } from "@mui/material";
 import { QueryClient, useQuery } from "@tanstack/react-query";
 import React from "react";
 import { Configuration, ModelsApi } from "../../client";
-import { usePackage } from "../Package/PackageProvider";
-import { StyledCard } from "../styles";
 import { ApiErrorDisplay } from "../ApiErrorDisplay";
+import { usePackage } from "../Package/PackageProvider";
 
 const modelsApi = new ModelsApi(new Configuration());
 const queryClient = new QueryClient();
@@ -59,7 +53,7 @@ export function ModelPicker({
    const [selectedModels, setSelectedModels] = React.useState<string[]>(
       initialSelectedModels || [],
    );
-   const [addDialogOpen, setAddDialogOpen] = React.useState(false);
+   const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
 
    React.useEffect(() => {
       setSelectedModels(initialSelectedModels || []);
@@ -75,7 +69,7 @@ export function ModelPicker({
       const newModels = [...selectedModels, model];
       setSelectedModels(newModels);
       onModelChange(newModels);
-      setAddDialogOpen(false);
+      setAnchorEl(null);
    };
 
    let availableModels: string[] = [];
@@ -95,22 +89,10 @@ export function ModelPicker({
    }
 
    return (
-      <StyledCard
-         sx={{ maxWidth: 400, marginLeft: "10px", padding: "10px 5px 5px 5px" }}
-      >
-         <Typography variant="h6">Imported Models</Typography>
+      <>
          <FormControl fullWidth>
             {isLoading && <Typography>Loading...</Typography>}
-            <Stack
-               direction="row"
-               spacing={1}
-               sx={{
-                  flexWrap: "wrap",
-                  minHeight: 30,
-                  alignItems: "center",
-                  rowGap: "8px",
-               }}
-            >
+            <Stack direction="row" spacing={1}>
                {selectedModels.map((model) => (
                   <Chip
                      key={model}
@@ -121,11 +103,9 @@ export function ModelPicker({
                   />
                ))}
                <Button
-                  variant="outlined"
                   size="small"
-                  startIcon={<AddIcon />}
-                  onClick={() => setAddDialogOpen(true)}
-                  sx={{ height: 32, marginTop: "10px" }}
+                  startIcon={<FileUploadOutlinedIcon />}
+                  onClick={(e) => setAnchorEl(e.currentTarget)}
                   disabled={
                      isLoading || isError || availableModels.length === 0
                   }
@@ -134,26 +114,25 @@ export function ModelPicker({
                </Button>
             </Stack>
          </FormControl>
-         <Dialog open={addDialogOpen} onClose={() => setAddDialogOpen(false)}>
-            <DialogTitle>Select a Model</DialogTitle>
-            <DialogContent>
-               {availableModels.length === 0 && (
-                  <Typography>No models available</Typography>
-               )}
-               <List>
-                  {availableModels.map((model) => (
-                     <ListItem key={model} disablePadding>
-                        <ListItemButton onClick={() => handleAdd(model)}>
-                           <ListItemText primary={model} />
-                        </ListItemButton>
-                     </ListItem>
-                  ))}
-               </List>
-            </DialogContent>
-            <DialogActions>
-               <Button onClick={() => setAddDialogOpen(false)}>Cancel</Button>
-            </DialogActions>
-         </Dialog>
-      </StyledCard>
+         <Menu
+            anchorEl={anchorEl}
+            open={Boolean(anchorEl)}
+            onClose={() => setAnchorEl(null)}
+         >
+            <Typography variant="subtitle2" sx={{ ml: 1 }}>
+               Models
+            </Typography>
+            <Divider />
+            {availableModels.length === 0 ? (
+               <MenuItem disabled>No models available</MenuItem>
+            ) : (
+               availableModels.map((model) => (
+                  <MenuItem key={model} onClick={() => handleAdd(model)}>
+                     <Typography variant="body2">{model}</Typography>
+                  </MenuItem>
+               ))
+            )}
+         </Menu>
+      </>
    );
 }