@malloy-publisher/sdk 0.0.52 → 0.0.53

package/package.json

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

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",

package/src/components/Package/Config.tsx

@@ -8,11 +8,11 @@ import {
    Typography,
 } from "@mui/material";
 import { Configuration, PackagesApi } from "../../client";
+import { useQueryWithApiError } from "../../hooks/useQueryWithApiError";
 import { ApiErrorDisplay } from "../ApiErrorDisplay";
 import { Loading } from "../Loading";
 import { StyledCard, StyledCardContent } from "../styles";
 import { usePackage } from "./PackageProvider";
-import { useQueryWithApiError } from "../../hooks/useQueryWithApiError";
 
 const packagesApi = new PackagesApi(new Configuration());
 
@@ -32,7 +32,7 @@ export default function Config() {
    });
 
    return (
-      <StyledCard variant="outlined" sx={{ padding: "10px", width: "100%" }}>
+      <StyledCard variant="outlined" sx={{ width: "100%" }}>
          <StyledCardContent>
             <Typography variant="overline" fontWeight="bold">
                Package Config
@@ -40,14 +40,17 @@ export default function Config() {
             <Divider />
             <Box
                sx={{
-                  mt: "10px",
                   maxHeight: "200px",
                   overflowY: "auto",
                }}
             >
                <List dense={true} disablePadding={true}>
                   <ListItem dense={true} disablePadding={true}>
-                     <ListItemText primary="Name" secondary={packageName} />
+                     <ListItemText
+                        primary="Name"
+                        primaryTypographyProps={{ fontWeight: "500" }}
+                        secondary={packageName}
+                     />
                   </ListItem>
                   {!isSuccess && !isError && (
                      <ListItem>
@@ -59,24 +62,27 @@ export default function Config() {
                         <ListItem dense={true} disablePadding={true}>
                            <ListItemText
                               primary="Description"
+                              primaryTypographyProps={{
+                                 fontWeight: "500",
+                              }}
                               secondary={data.data.description}
                            />
                         </ListItem>
                      )) || (
-                        <ListItem
-                           disablePadding={true}
-                           dense={true}
-                           sx={{ mt: "20px" }}
-                        >
-                           <ErrorIcon
-                              sx={{
-                                 color: "grey.600",
-                                 mr: "10px",
-                              }}
-                           />
-                           <ListItemText primary={"No package manifest"} />
-                        </ListItem>
-                     ))}
+                           <ListItem
+                              disablePadding={true}
+                              dense={true}
+                              sx={{ mt: "20px" }}
+                           >
+                              <ErrorIcon
+                                 sx={{
+                                    color: "grey.600",
+                                    mr: "10px",
+                                 }}
+                              />
+                              <ListItemText primary={"No package manifest"} />
+                           </ListItem>
+                        ))}
                   {isError && (
                      <ApiErrorDisplay
                         error={error}

package/src/components/Package/Connections.tsx

@@ -9,10 +9,10 @@ import {
 } from "@mui/material";
 import { Configuration, ConnectionsApi } from "../../client";
 import { Connection as ApiConnection } from "../../client/api";
+import { useQueryWithApiError } from "../../hooks/useQueryWithApiError";
+import { ApiErrorDisplay } from "../ApiErrorDisplay";
 import { StyledCard, StyledCardContent } from "../styles";
 import { usePackage } from "./PackageProvider";
-import { ApiErrorDisplay } from "../ApiErrorDisplay";
-import { useQueryWithApiError } from "../../hooks/useQueryWithApiError";
 
 const connectionsApi = new ConnectionsApi(new Configuration());
 
@@ -39,7 +39,7 @@ export default function Connections() {
    });
 
    return (
-      <StyledCard variant="outlined" sx={{ padding: "10px", width: "100%" }}>
+      <StyledCard variant="outlined" sx={{ width: "100%" }}>
          <StyledCardContent>
             <Typography variant="overline" fontWeight="bold">
                Database Connections
@@ -47,13 +47,12 @@ export default function Connections() {
             <Divider />
             <Box
                sx={{
-                  mt: "10px",
                   maxHeight: "200px",
                   overflowY: "auto",
                }}
             >
                {!isSuccess && !isError && (
-                  <Typography variant="body2" sx={{ p: "20px", m: "auto" }}>
+                  <Typography variant="body2" sx={{ m: "auto" }}>
                      Fetching Connections...
                   </Typography>
                )}

package/src/components/Package/Databases.tsx

@@ -14,11 +14,11 @@ import {
 } from "@mui/material";
 import React from "react";
 import { Configuration, Database, DatabasesApi } from "../../client";
-import { StyledCard, StyledCardContent } from "../styles";
-import { usePackage } from "./PackageProvider";
+import { useQueryWithApiError } from "../../hooks/useQueryWithApiError";
 import { ApiErrorDisplay } from "../ApiErrorDisplay";
 import { Loading } from "../Loading";
-import { useQueryWithApiError } from "../../hooks/useQueryWithApiError";
+import { StyledCard, StyledCardContent } from "../styles";
+import { usePackage } from "./PackageProvider";
 
 const databasesApi = new DatabasesApi(new Configuration());
 
@@ -62,15 +62,14 @@ export default function Databases() {
    };
    return (
       <>
-         <StyledCard variant="outlined" sx={{ padding: "10px", width: "100%" }}>
+         <StyledCard variant="outlined" sx={{ width: "100%" }}>
             <StyledCardContent>
                <Typography variant="overline" fontWeight="bold">
-                  Databases
+                  Embedded Databases
                </Typography>
                <Divider />
                <Box
                   sx={{
-                     mt: "10px",
                      maxHeight: "200px",
                      overflowY: "auto",
                   }}
@@ -111,7 +110,7 @@ export default function Databases() {
                      </Table>
                   )}
                   {isSuccess && data.data.length === 0 && (
-                     <Typography variant="body2" sx={{ p: "10px", m: "auto" }}>
+                     <Typography variant="body2" sx={{ m: "auto" }}>
                         No databases found
                      </Typography>
                   )}

package/src/components/Package/Models.tsx

@@ -1,11 +1,11 @@
 import { Box, Divider, Typography } from "@mui/material";
 import { Configuration, ModelsApi } from "../../client";
+import { useQueryWithApiError } from "../../hooks/useQueryWithApiError";
 import { ApiErrorDisplay } from "../ApiErrorDisplay";
 import { Loading } from "../Loading";
 import { StyledCard, StyledCardContent } from "../styles";
 import { FileTreeView } from "./FileTreeView";
 import { usePackage } from "./PackageProvider";
-import { useQueryWithApiError } from "../../hooks/useQueryWithApiError";
 
 const modelsApi = new ModelsApi(new Configuration());
 
@@ -24,7 +24,7 @@ export default function Models({ navigate }: ModelsProps) {
    });
 
    return (
-      <StyledCard variant="outlined" sx={{ padding: "10px", width: "100%" }}>
+      <StyledCard variant="outlined" sx={{ width: "100%" }}>
          <StyledCardContent>
             <Typography variant="overline" fontWeight="bold">
                Semantic Models
@@ -32,7 +32,6 @@ export default function Models({ navigate }: ModelsProps) {
             <Divider />
             <Box
                sx={{
-                  mt: "10px",
                   maxHeight: "200px",
                   overflowY: "auto",
                }}

package/src/components/Package/Notebooks.tsx

@@ -1,11 +1,11 @@
 import { Box, Divider, Typography } from "@mui/material";
 import { Configuration, NotebooksApi } from "../../client";
+import { useQueryWithApiError } from "../../hooks/useQueryWithApiError";
 import { ApiErrorDisplay } from "../ApiErrorDisplay";
 import { Loading } from "../Loading";
 import { StyledCard, StyledCardContent } from "../styles";
 import { FileTreeView } from "./FileTreeView";
 import { usePackage } from "./PackageProvider";
-import { useQueryWithApiError } from "../../hooks/useQueryWithApiError";
 
 const notebooksApi = new NotebooksApi(new Configuration());
 
@@ -30,7 +30,7 @@ export default function Notebooks({ navigate }: NotebooksProps) {
    });
 
    return (
-      <StyledCard variant="outlined" sx={{ padding: "10px", width: "100%" }}>
+      <StyledCard variant="outlined" sx={{ width: "100%" }}>
          <StyledCardContent>
             <Typography variant="overline" fontWeight="bold">
                Notebooks
@@ -38,7 +38,6 @@ export default function Notebooks({ navigate }: NotebooksProps) {
             <Divider />
             <Box
                sx={{
-                  mt: "10px",
                   maxHeight: "200px",
                   overflowY: "auto",
                }}