@malloy-publisher/sdk 0.0.30 → 0.0.31

package/package.json

@@ -1,7 +1,7 @@
 {
    "name": "@malloy-publisher/sdk",
    "description": "Malloy Publisher SDK",
-   "version": "0.0.30",
+   "version": "0.0.31",
    "type": "module",
    "main": "dist/index.cjs.js",
    "module": "dist/index.es.js",
@@ -34,19 +34,19 @@
       "@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",
+      "react-router-dom": "^7.6.2"
    },
    "devDependencies": {
       "@openapitools/openapi-generator-cli": "^2.13.5",

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,7 @@ 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>>();
 
    return React.useCallback(
       (value: T) => {

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/Package.tsx

@@ -106,6 +106,7 @@ export default function Package({
                <Notebook
                   notebookPath={README_NOTEBOOK}
                   expandCodeCells={true}
+                  hideEmbeddingIcons={true}
                />
             </Grid>
          </Grid>

package/src/components/RenderedResult/RenderedResult.tsx

@@ -1,7 +1,7 @@
 /* eslint-disable react/prop-types */
 import type { MalloyRenderProps } from "@malloydata/render";
 import "@malloydata/render/webcomponent";
-import React, { useEffect, useRef } from "react";
+import React, { useEffect, useRef, useCallback } from "react";
 
 type MalloyRenderElement = HTMLElement & MalloyRenderProps;
 
@@ -19,14 +19,54 @@ declare global {
 
 interface RenderedResultProps {
    result: string;
+   onSizeChange?: (height: number) => void;
 }
 
-export default function RenderedResult({ result }: RenderedResultProps) {
+export default function RenderedResult({
+   result,
+   onSizeChange,
+}: RenderedResultProps) {
    const ref = useRef<MalloyRenderElement>(null);
+
    useEffect(() => {
       if (ref.current) {
          ref.current.malloyResult = JSON.parse(result);
       }
    }, [result]);
+
+   // Set up size measurement using scrollHeight instead of ResizeObserver
+   useEffect(() => {
+      if (!ref.current || !onSizeChange) return;
+
+      const element = ref.current;
+
+      // Function to measure and report size
+      const measureSize = () => {
+         if (element) {
+            const height = element.offsetHeight;
+            if (height > 0) {
+               onSizeChange(height);
+            }
+         }
+      };
+
+      // Initial measurement after a brief delay to let content render
+      const timeoutId = setTimeout(measureSize, 100);
+
+      // Also measure when the malloy result changes
+      const observer = new MutationObserver(measureSize);
+      observer.observe(element, {
+         childList: true,
+         subtree: true,
+         attributes: true,
+      });
+
+      // Cleanup
+      return () => {
+         clearTimeout(timeoutId);
+         observer.disconnect();
+      };
+   }, [onSizeChange, result]);
+
    return <malloy-render ref={ref} />;
 }