@malloy-publisher/sdk 0.0.30 → 0.0.32

package/package.json

@@ -1,7 +1,7 @@
 {
    "name": "@malloy-publisher/sdk",
    "description": "Malloy Publisher SDK",
-   "version": "0.0.30",
+   "version": "0.0.32",
    "type": "module",
    "main": "dist/index.cjs.js",
    "module": "dist/index.es.js",
@@ -28,25 +28,25 @@
    },
    "peerDependencies": {
       "react": "^19.1.0",
-      "react-dom": "^19.1.0"
+      "react-dom": "^19.1.0",
+      "react-router-dom": "^7.6.2"
    },
    "dependencies": {
       "@emotion/react": "^11.14.0",
       "@emotion/styled": "^11.14.0",
       "@malloydata/malloy-explorer": "^0.0.285-dev250530165648",
-      "@malloydata/malloy-query-builder": "^0.0.285",
       "@malloydata/malloy-interfaces": "^0.0.285",
+      "@malloydata/malloy-query-builder": "^0.0.285",
       "@malloydata/render": "^0.0.285",
-      "@mui/icons-material": "^7.0.2",
-      "@mui/material": "^7.0.2",
-      "@mui/system": "^7.0.2",
+      "@mui/icons-material": "^7.1.1",
+      "@mui/material": "^7.1.1",
+      "@mui/system": "^7.1.1",
       "@mui/x-tree-view": "^7.16.0",
       "@react-spring/web": "^10.0.1",
       "@tanstack/react-query": "^5.59.16",
       "@uiw/react-md-editor": "^4.0.6",
       "axios": "^1.7.7",
-      "markdown-to-jsx": "^7.5.0",
-      "react-router-dom": "^6.26.1"
+      "markdown-to-jsx": "^7.7.6"
    },
    "devDependencies": {
       "@openapitools/openapi-generator-cli": "^2.13.5",

package/src/components/Home/Home.tsx

@@ -9,7 +9,7 @@ const queryClient = new QueryClient();
 
 interface HomeProps {
    server?: string;
-   navigate?: (to: string) => void;
+   navigate?: (to: string, event?: React.MouseEvent) => void;
 }
 
 export default function Home({ server, navigate }: HomeProps) {
@@ -44,7 +44,9 @@ export default function Home({ server, navigate }: HomeProps) {
                   <Grid key={project.name}>
                      <Typography
                         variant="h1"
-                        onClick={() => navigate(`/${project.name}/`)}
+                        onClick={(event) =>
+                           navigate(`/${project.name}/`, event)
+                        }
                      >
                         {project.name}
                      </Typography>

package/src/components/Model/Model.tsx

@@ -1,27 +1,28 @@
-import React, { useEffect } from "react";
+import ContentCopyIcon from "@mui/icons-material/ContentCopy";
+import LinkOutlinedIcon from "@mui/icons-material/LinkOutlined";
 import {
    Box,
-   Typography,
-   Stack,
    CardActions,
-   Tooltip,
-   IconButton,
    Collapse,
    Divider,
-   Tabs,
+   IconButton,
+   Stack,
    Tab,
+   Tabs,
+   Tooltip,
+   Typography,
 } from "@mui/material";
 import { QueryClient, useQuery } from "@tanstack/react-query";
-import LinkOutlinedIcon from "@mui/icons-material/LinkOutlined";
-import ContentCopyIcon from "@mui/icons-material/ContentCopy";
+import React, { useEffect } from "react";
 import { Configuration, ModelsApi } from "../../client";
-import { ModelCell } from "./ModelCell";
-import { StyledCard, StyledCardContent, StyledCardMedia } from "../styles";
 import { highlight } from "../highlighter";
+import { StyledCard, StyledCardContent, StyledCardMedia } from "../styles";
+import { ModelCell } from "./ModelCell";
 
 import "@malloydata/malloy-explorer/styles.css";
 import { usePublisherPackage } from "../Package/PublisherPackageProvider";
 import { SourceExplorerComponent } from "./SourcesExplorer";
+import NamedQueries from "./NamedQueries";
 const modelsApi = new ModelsApi(new Configuration());
 
 const queryClient = new QueryClient();
@@ -136,28 +137,32 @@ export default function Model({
                         })}
                      </Tabs>
                   )}
-               <CardActions
-                  sx={{
-                     padding: "0px 10px 0px 10px",
-                     mb: "auto",
-                     mt: "auto",
-                  }}
-               >
-                  <Tooltip
-                     title={
-                        embeddingExpanded ? "Hide Embedding" : "View Embedding"
-                     }
+               {!hideEmbeddingIcons && (
+                  <CardActions
+                     sx={{
+                        padding: "0px 10px 0px 10px",
+                        mb: "auto",
+                        mt: "auto",
+                     }}
                   >
-                     <IconButton
-                        size="small"
-                        onClick={() => {
-                           setEmbeddingExpanded(!embeddingExpanded);
-                        }}
+                     <Tooltip
+                        title={
+                           embeddingExpanded
+                              ? "Hide Embedding"
+                              : "View Embedding"
+                        }
                      >
-                        <LinkOutlinedIcon />
-                     </IconButton>
-                  </Tooltip>
-               </CardActions>
+                        <IconButton
+                           size="small"
+                           onClick={() => {
+                              setEmbeddingExpanded(!embeddingExpanded);
+                           }}
+                        >
+                           <LinkOutlinedIcon />
+                        </IconButton>
+                     </Tooltip>
+                  </CardActions>
+               )}
             </Stack>
             <Collapse in={embeddingExpanded} timeout="auto" unmountOnExit>
                <Divider />

package/src/components/Model/NamedQueries.tsx

@@ -0,0 +1,156 @@
+import {
+   Typography,
+   Accordion,
+   AccordionSummary,
+   AccordionDetails,
+} 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 { Configuration } from "../../client";
+import { usePublisherPackage } from "../Package";
+import React from "react";
+import ResultContainer from "../RenderedResult/ResultContainer";
+
+const queryResultsApi = new QueryresultsApi(new Configuration());
+const queryClient = new QueryClient();
+
+interface NamedQueryProps {
+   modelPath: string;
+   namedQueries: Array<Query>;
+}
+
+export default function NamedQueries({
+   namedQueries,
+   modelPath,
+}: NamedQueryProps) {
+   const { server, projectName, packageName, versionId, accessToken } =
+      usePublisherPackage();
+   const [namedQueryResults, setNamedQueryResults] = React.useState<
+      Record<string, string>
+   >({});
+   const [expandedAccordions, setExpandedAccordions] = React.useState<
+      Record<string, boolean>
+   >({});
+
+   const mutation = useMutation(
+      {
+         mutationFn: ({ query }: { query: Query }) => {
+            const val = queryResultsApi.executeQuery(
+               projectName,
+               packageName,
+               modelPath,
+               undefined,
+               undefined,
+               query.name,
+               versionId,
+               {
+                  baseURL: server,
+                  withCredentials: !accessToken,
+                  headers: {
+                     Authorization: accessToken && `Bearer ${accessToken}`,
+                  },
+               },
+            );
+            return val;
+         },
+         onSuccess: (data, { query }: { query: Query }) => {
+            if (data) {
+               setNamedQueryResults((prev) => ({
+                  ...prev,
+                  [query.name]: data.data.result,
+               }));
+            }
+         },
+      },
+      queryClient,
+   );
+
+   const handleAccordionChange =
+      (query: Query, queryKey: string) =>
+      (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 });
+         }
+      };
+
+   if (!namedQueries) {
+      return <div> Loading Named Queries</div>;
+   }
+   if (namedQueries.length == 0) {
+      return <div> No Named Queries</div>;
+   }
+
+   return (
+      <StyledCard variant="outlined">
+         <StyledCardContent>
+            <Typography variant="subtitle1">Named Queries</Typography>
+         </StyledCardContent>
+         <Box>
+            {namedQueries.map((query: any, idx: number) => {
+               const queryKey = query.name || `query-${idx}`;
+               return (
+                  <Accordion
+                     key={queryKey}
+                     expanded={expandedAccordions[queryKey] || false}
+                     onChange={handleAccordionChange(query, queryKey)}
+                  >
+                     <AccordionSummary>
+                        <Typography variant="body1">
+                           {query.name || `Query ${idx + 1}`}
+                        </Typography>
+                     </AccordionSummary>
+                     <AccordionDetails>
+                        {mutation.isPending && expandedAccordions[queryKey] && (
+                           <div
+                              style={{
+                                 marginTop: "10px",
+                                 fontStyle: "italic",
+                              }}
+                           >
+                              Executing query...
+                           </div>
+                        )}
+                        <ResultContainer
+                           result={namedQueryResults[query.name]}
+                           minHeight={300}
+                           maxHeight={900}
+                        />
+                        {Array.isArray(query.annotations) &&
+                           query.annotations.length > 0 && (
+                              <Box sx={{ mt: 1 }}>
+                                 <Typography
+                                    variant="caption"
+                                    color="text.secondary"
+                                 >
+                                    Annotations:
+                                 </Typography>
+                                 <ul style={{ margin: 0, paddingLeft: 16 }}>
+                                    {query.annotations.map(
+                                       (annotation: string, aidx: number) => (
+                                          <li key={aidx}>
+                                             <Typography variant="caption">
+                                                {annotation}
+                                             </Typography>
+                                          </li>
+                                       ),
+                                    )}
+                                 </ul>
+                              </Box>
+                           )}
+                     </AccordionDetails>
+                  </Accordion>
+               );
+            })}
+         </Box>
+      </StyledCard>
+   );
+}

package/src/components/Model/SourcesExplorer.tsx

@@ -87,8 +87,8 @@ export function SourcesExplorer({
    const [selectedTab, setSelectedTab] = React.useState(
       existingSourceName
          ? sourceAndPaths.findIndex(
-              (entry) => entry.sourceInfo.name === existingSourceName,
-           )
+            (entry) => entry.sourceInfo.name === existingSourceName,
+         )
          : 0,
    );
 
@@ -291,7 +291,7 @@ export function SourceExplorerComponent({
                   >
                      <ResizableCollapsiblePanel
                         isInitiallyExpanded={true}
-                        initialWidth={280}
+                        initialWidth={180}
                         minWidth={180}
                         icon="database"
                         title={sourceAndPath.sourceInfo.name}
@@ -304,7 +304,7 @@ export function SourceExplorerComponent({
                      </ResizableCollapsiblePanel>
                      <ResizableCollapsiblePanel
                         isInitiallyExpanded={true}
-                        initialWidth={360}
+                        initialWidth={280}
                         minWidth={280}
                         icon="filterSliders"
                         title="Query"
@@ -324,16 +324,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/MutableCell.tsx

@@ -311,7 +311,9 @@ export function MutableCell({
 }
 
 function useDebounce<T>(callback: (value: T) => void, delay: number = 2000) {
-   const timeoutRef = React.useRef<NodeJS.Timeout>();
+   const timeoutRef = React.useRef<ReturnType<typeof setTimeout> | undefined>(
+      undefined,
+   );
 
    return React.useCallback(
       (value: T) => {

package/src/components/MutableNotebook/MutableNotebook.tsx

@@ -16,7 +16,7 @@ import {
 } from "@mui/material";
 import Stack from "@mui/material/Stack";
 import React from "react";
-import { useNavigate } from "react-router-dom";
+import { useRouterClickHandler } from "../click_helper";
 import { Configuration, ModelsApi } from "../../client";
 import { SourceAndPath } from "../Model/SourcesExplorer";
 import { NotebookManager } from "../NotebookManager";
@@ -46,7 +46,7 @@ export default function MutableNotebook({
    expandCodeCells,
    expandEmbeddings,
 }: MutableNotebookProps) {
-   const navigate = useNavigate();
+   const navigate = useRouterClickHandler();
    const { server, projectName, packageName, versionId, accessToken } =
       usePublisherPackage();
    if (!projectName || !packageName) {
@@ -107,12 +107,12 @@ export default function MutableNotebook({
       setDeleteDialogOpen(true);
    };
 
-   const handleDeleteConfirm = () => {
+   const handleDeleteConfirm = (event?: React.MouseEvent) => {
       if (notebookPath && notebookStorage && userContext) {
          notebookStorage.deleteNotebook(userContext, notebookPath);
       }
       setDeleteDialogOpen(false);
-      navigate(`/${projectName}/${packageName}`);
+      navigate(`/${projectName}/${packageName}`, event);
    };
 
    const handleDeleteCancel = () => {
@@ -286,7 +286,7 @@ export default function MutableNotebook({
                               Cancel
                            </Button>
                            <Button
-                              onClick={handleDeleteConfirm}
+                              onClick={(event) => handleDeleteConfirm(event)}
                               color="error"
                               autoFocus
                            >

package/src/components/Notebook/Notebook.tsx

@@ -100,28 +100,32 @@ export default function Notebook({
                <Typography variant="overline" fontWeight="bold">
                   Notebook
                </Typography>
-               <CardActions
-                  sx={{
-                     padding: "0px 10px 0px 10px",
-                     mb: "auto",
-                     mt: "auto",
-                  }}
-               >
-                  <Tooltip
-                     title={
-                        embeddingExpanded ? "Hide Embedding" : "View Embedding"
-                     }
+               {!hideEmbeddingIcons && (
+                  <CardActions
+                     sx={{
+                        padding: "0px 10px 0px 10px",
+                        mb: "auto",
+                        mt: "auto",
+                     }}
                   >
-                     <IconButton
-                        size="small"
-                        onClick={() => {
-                           setEmbeddingExpanded(!embeddingExpanded);
-                        }}
+                     <Tooltip
+                        title={
+                           embeddingExpanded
+                              ? "Hide Embedding"
+                              : "View Embedding"
+                        }
                      >
-                        <LinkOutlinedIcon />
-                     </IconButton>
-                  </Tooltip>
-               </CardActions>
+                        <IconButton
+                           size="small"
+                           onClick={() => {
+                              setEmbeddingExpanded(!embeddingExpanded);
+                           }}
+                        >
+                           <LinkOutlinedIcon />
+                        </IconButton>
+                     </Tooltip>
+                  </CardActions>
+               )}
             </Stack>
             <Collapse in={embeddingExpanded} timeout="auto" unmountOnExit>
                <Divider />

package/src/components/Notebook/NotebookCell.tsx

@@ -4,13 +4,13 @@ import ContentCopyIcon from "@mui/icons-material/ContentCopy";
 import LinkOutlinedIcon from "@mui/icons-material/LinkOutlined";
 import {
    CardActions,
-   CardContent,
    Collapse,
    Divider,
    IconButton,
    Stack,
    Tooltip,
    Typography,
+   Box,
 } from "@mui/material";
 import Markdown from "markdown-to-jsx";
 import React, { Suspense, lazy, useEffect } from "react";
@@ -18,8 +18,7 @@ import { NotebookCell as ClientNotebookCell } from "../../client";
 import { highlight } from "../highlighter";
 import { SourcesExplorer } from "../Model";
 import { StyledCard, StyledCardContent } from "../styles";
-
-const RenderedResult = lazy(() => import("../RenderedResult/RenderedResult"));
+import ResultContainer from "../RenderedResult/ResultContainer";
 
 interface NotebookCellProps {
    cell: ClientNotebookCell;
@@ -72,7 +71,7 @@ export function NotebookCell({
          </StyledCard>
       )) ||
       (cell.type === "code" && (
-         <StyledCard variant="outlined">
+         <StyledCard variant="outlined" sx={{ height: "auto" }}>
             {(!hideCodeCellIcon || (!hideEmbeddingIcon && cell.result)) && (
                <Stack sx={{ flexDirection: "row", justifyContent: "right" }}>
                   <CardActions
@@ -82,6 +81,31 @@ export function NotebookCell({
                         mt: "auto",
                      }}
                   >
+                     {cell.newSources && cell.newSources.length > 0 && (
+                        <Tooltip title="Explore Data Sources">
+                           <IconButton
+                              size="small"
+                              onClick={() => {
+                                 setSourcesExpanded(!sourcesExpanded);
+                                 setEmbeddingExpanded(false);
+                                 setCodeExpanded(false);
+                              }}
+                           >
+                              <svg
+                                 width="24"
+                                 height="24"
+                                 viewBox="0 0 24 24"
+                                 fill="none"
+                                 xmlns="http://www.w3.org/2000/svg"
+                              >
+                                 <path
+                                    d="M3 3h18v18H3V3zm2 2v14h14V5H5zm2 2h10v2H7V7zm0 4h10v2H7v-2zm0 4h10v2H7v-2z"
+                                    fill="currentColor"
+                                 />
+                              </svg>
+                           </IconButton>
+                        </Tooltip>
+                     )}
                      {!hideCodeCellIcon && (
                         <Tooltip
                            title={codeExpanded ? "Hide Code" : "View Code"}
@@ -114,31 +138,6 @@ export function NotebookCell({
                            </IconButton>
                         </Tooltip>
                      )}
-                     {cell.newSources && cell.newSources.length > 0 && (
-                        <Tooltip title="Explore Data Sources">
-                           <IconButton
-                              size="small"
-                              onClick={() => {
-                                 setSourcesExpanded(!sourcesExpanded);
-                                 setEmbeddingExpanded(false);
-                                 setCodeExpanded(false);
-                              }}
-                           >
-                              <svg
-                                 width="24"
-                                 height="24"
-                                 viewBox="0 0 24 24"
-                                 fill="none"
-                                 xmlns="http://www.w3.org/2000/svg"
-                              >
-                                 <path
-                                    d="M3 3h18v18H3V3zm2 2v14h14V5H5zm2 2h10v2H7V7zm0 4h10v2H7v-2zm0 4h10v2H7v-2z"
-                                    fill="currentColor"
-                                 />
-                              </svg>
-                           </IconButton>
-                        </Tooltip>
-                     )}
                   </CardActions>
                </Stack>
             )}
@@ -212,18 +211,11 @@ export function NotebookCell({
             </Collapse>
             {cell.result && !sourcesExpanded && (
                <>
-                  <Divider sx={{ mb: "10px" }} />
-                  <CardContent
-                     sx={{
-                        minHeight: "100px",
-                        maxHeight: "800px",
-                        overflow: "auto",
-                     }}
-                  >
-                     <Suspense fallback="Loading malloy...">
-                        <RenderedResult result={cell.result} />
-                     </Suspense>
-                  </CardContent>
+                  <ResultContainer
+                     result={cell.result}
+                     minHeight={200}
+                     maxHeight={800}
+                  />
                </>
             )}
          </StyledCard>

package/src/components/Package/Connections.tsx

@@ -19,7 +19,7 @@ interface ConnectionsProps {
    server?: string;
    projectName: string;
    accessToken: string;
-   navigate: (to: string) => void;
+   navigate: (to: string, event?: React.MouseEvent) => void;
 }
 
 // TODO(jjs) - Move this UI to the ConnectionExplorer component

package/src/components/Package/FileTreeView.tsx

@@ -27,7 +27,7 @@ import { Typography } from "@mui/material";
 interface FiieTreeViewProps {
    items: Model[] | Database[];
    defaultExpandedItems: string[];
-   navigate?: (to: string) => void;
+   navigate?: (to: string, event?: React.MouseEvent) => void;
 }
 
 export function FileTreeView({
@@ -64,7 +64,7 @@ type ExtendedTreeItemProps = {
    label: string;
    fileType: FileType;
    selectable: boolean;
-   link: () => void | undefined;
+   link: ((event?: React.MouseEvent) => void) | undefined;
 };
 
 interface CustomLabelProps {
@@ -135,7 +135,7 @@ const CustomTreeItem = React.forwardRef(function CustomTreeItem(
             <TreeItem2Content
                {...getContentProps()}
                {...(item.link && {
-                  onClick: () => item.link(),
+                  onClick: (event) => item.link(event),
                })}
                sx={{
                   // If the item is not selectable, disable pointer events.
@@ -159,7 +159,7 @@ const CustomTreeItem = React.forwardRef(function CustomTreeItem(
 
 function getTreeView(
    metadataEntries: Model[] | Database[],
-   navigate: (to: string) => void,
+   navigate: (to: string, event?: React.MouseEvent) => void,
 ): TreeViewBaseItem<ExtendedTreeItemProps>[] {
    const tree = new Map<string, unknown>();
    metadataEntries.map((entry: Model | Database) => {
@@ -182,7 +182,7 @@ function getTreeView(
 function getTreeViewRecursive(
    node: Map<string, unknown>,
    path: string,
-   navigate: (to: string) => void,
+   navigate: (to: string, event?: React.MouseEvent) => void,
 ): TreeViewBaseItem<ExtendedTreeItemProps>[] {
    const treeViewItems: TreeViewBaseItem<ExtendedTreeItemProps>[] = [];
    node.forEach((value, key) => {
@@ -199,7 +199,7 @@ function getTreeViewRecursive(
             fileType: fileType,
             link:
                fileType === "model" || fileType === "notebook"
-                  ? navigate.bind(null, path + key)
+                  ? (event) => navigate(path + key, event)
                   : undefined,
             selectable: fileType === "model" || fileType === "notebook",
          });

package/src/components/Package/Models.tsx

@@ -16,7 +16,7 @@ interface ModelsProps {
    projectName: string;
    packageName: string;
    versionId?: string;
-   navigate: (to: string) => void;
+   navigate: (to: string, event?: React.MouseEvent) => void;
    accessToken?: string;
 }