@malloy-publisher/sdk 0.0.127 → 0.0.129

package/package.json

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

package/src/components/Model/Model.tsx

@@ -22,13 +22,20 @@ import { useModelData } from "./useModelData";
 interface ModelProps {
    onChange?: (query: QueryExplorerResult) => void;
    resourceUri: string;
+   runOnDemand?: boolean;
+   maxResultSize?: number;
 }
 
 // Note: For this to properly render outside of publisher,
 // you must explicitly import the styles from the package:
 // import "@malloy-publisher/sdk/malloy-explorer.css";
 
-export default function Model({ onChange, resourceUri }: ModelProps) {
+export default function Model({
+   onChange,
+   resourceUri,
+   runOnDemand = false,
+   maxResultSize = 0,
+}: ModelProps) {
    const { modelPath } = parseResourceUri(resourceUri);
    const { data, isError, isLoading, error } = useModelData(resourceUri);
    const [dialogOpen, setDialogOpen] = React.useState(false);
@@ -184,6 +191,8 @@ export default function Model({ onChange, resourceUri }: ModelProps) {
                         queryName={query.name}
                         annotations={query.annotations}
                         resourceUri={resourceUri}
+                        runOnDemand={runOnDemand}
+                        maxResultSize={maxResultSize}
                      />
                   ))}
                </Stack>

package/src/components/Model/ModelCell.tsx

@@ -1,5 +1,6 @@
+import PlayArrowIcon from "@mui/icons-material/PlayArrow";
 import SearchIcon from "@mui/icons-material/Search";
-import { Box, IconButton, Typography } from "@mui/material";
+import { Box, Button, IconButton, Typography } from "@mui/material";
 import React, { useEffect } from "react";
 import { useQueryWithApiError } from "../../hooks/useQueryWithApiError";
 import { parseResourceUri } from "../../utils/formatting";
@@ -15,16 +16,21 @@ interface ModelCellProps {
    noView?: boolean;
    annotations?: string[];
    resourceUri: string;
+   runOnDemand?: boolean;
+   maxResultSize?: number;
 }
 
 export function ModelCell({
    queryName,
    annotations,
    resourceUri,
+   runOnDemand = false,
+   maxResultSize = 0,
 }: ModelCellProps) {
    const [highlightedAnnotations, setHighlightedAnnotations] =
       React.useState<string>();
    const [resultsDialogOpen, setResultsDialogOpen] = React.useState(false);
+   const [hasRun, setHasRun] = React.useState(false);
 
    const { packageName, projectName, versionId, modelPath } =
       parseResourceUri(resourceUri);
@@ -48,7 +54,7 @@ export function ModelCell({
                versionId: versionId,
             },
          ),
-      enabled: true, // Always execute
+      enabled: runOnDemand ? hasRun : true, // Execute on demand or always
    });
 
    useEffect(() => {
@@ -126,19 +132,55 @@ export function ModelCell({
                position: "relative",
             }}
          >
-            {isLoading && (
+            {runOnDemand && !hasRun && (
+               <Box
+                  sx={{
+                     padding: "40px 20px",
+                     textAlign: "center",
+                     display: "flex",
+                     flexDirection: "column",
+                     alignItems: "center",
+                     gap: "16px",
+                  }}
+               >
+                  <Typography variant="body2" color="text.secondary">
+                     Click Run to execute the query
+                  </Typography>
+                  <Button
+                     variant="contained"
+                     startIcon={<PlayArrowIcon />}
+                     onClick={() => setHasRun(true)}
+                     sx={{
+                        backgroundColor: "#1976d2",
+                        "&:hover": {
+                           backgroundColor: "#1565c0",
+                        },
+                        textTransform: "none",
+                        fontSize: "14px",
+                        fontWeight: 600,
+                        padding: "8px 24px",
+                     }}
+                  >
+                     Run Query
+                  </Button>
+               </Box>
+            )}
+            {(!runOnDemand || hasRun) && isLoading && (
                <Box sx={{ padding: "20px", textAlign: "center" }}>
                   <Typography>Loading results...</Typography>
                </Box>
             )}
-            {isSuccess && queryData?.data?.result && (
-               <ResultContainer
-                  result={queryData.data.result}
-                  minHeight={300}
-                  maxHeight={600}
-                  hideToggle={false}
-               />
-            )}
+            {(!runOnDemand || hasRun) &&
+               isSuccess &&
+               queryData?.data?.result && (
+                  <ResultContainer
+                     result={queryData.data.result}
+                     minHeight={300}
+                     maxHeight={600}
+                     hideToggle={false}
+                     maxResultSize={maxResultSize}
+                  />
+               )}
          </CleanMetricCard>
 
          {/* Results Dialog */}

package/src/components/Notebook/Notebook.tsx

@@ -4,18 +4,22 @@ import { CompiledNotebook } from "../../client";
 import { useQueryWithApiError } from "../../hooks/useQueryWithApiError";
 import { ApiErrorDisplay } from "../ApiErrorDisplay";
 
+import { parseResourceUri } from "../../utils/formatting";
 import { Loading } from "../Loading";
+import { useServer } from "../ServerProvider";
 import { CleanNotebookContainer, CleanNotebookSection } from "../styles";
 import { NotebookCell } from "./NotebookCell";
-import { parseResourceUri } from "../../utils/formatting";
-import { useServer } from "../ServerProvider";
 
 interface NotebookProps {
    resourceUri: string;
+   maxResultSize?: number;
 }
 
 // Requires PackageProvider
-export default function Notebook({ resourceUri }: NotebookProps) {
+export default function Notebook({
+   resourceUri,
+   maxResultSize = 0,
+}: NotebookProps) {
    const { apiClients } = useServer();
    const {
       projectName,
@@ -55,6 +59,7 @@ export default function Notebook({ resourceUri }: NotebookProps) {
                         key={index}
                         index={index}
                         resourceUri={resourceUri}
+                        maxResultSize={maxResultSize}
                      />
                   ))}
                {isError && error.status === 404 && (

package/src/components/Notebook/NotebookCell.tsx

@@ -32,6 +32,7 @@ interface NotebookCellProps {
    hideEmbeddingIcon?: boolean;
    resourceUri: string;
    index: number;
+   maxResultSize?: number;
 }
 
 export function NotebookCell({
@@ -40,6 +41,7 @@ export function NotebookCell({
    hideEmbeddingIcon,
    resourceUri,
    index,
+   maxResultSize,
 }: NotebookCellProps) {
    const [codeDialogOpen, setCodeDialogOpen] = React.useState<boolean>(false);
    const [embeddingDialogOpen, setEmbeddingDialogOpen] =
@@ -420,6 +422,7 @@ export function NotebookCell({
                         result={cell.result}
                         minHeight={300}
                         maxHeight={1000}
+                        maxResultSize={maxResultSize}
                      />
                   </Box>
 

package/src/components/Package/Connections.tsx

@@ -36,7 +36,7 @@ type ConnectionProps = {
    connection: ApiConnection;
    onClick: () => void;
    onEdit: (connection: ApiConnection) => Promise<unknown>;
-   onDelete: (connection: ApiConnection) => Promise<unknown>;
+   onDelete: (connection: ApiConnection) => Promise<unknown> | void;
    isMutating: boolean;
    mutable: boolean;
 };
@@ -274,9 +274,19 @@ export default function Connections({ resourceUri }: ConnectionsProps) {
                                  onEdit={(payload) =>
                                     updateConnection.mutateAsync(payload)
                                  }
-                                 onDelete={(payload) =>
-                                    deleteConnection.mutateAsync(payload)
-                                 }
+                                 onDelete={(payload) => {
+                                    if (
+                                       !selectedConnectionResourceUri.startsWith(
+                                          "publisher:",
+                                       )
+                                    ) {
+                                       deleteConnection.mutateAsync(payload);
+                                    } else {
+                                       setNotificationMessage(
+                                          "Cannot delete this connection (publisher: resource)",
+                                       );
+                                    }
+                                 }}
                                  isMutating={
                                     updateConnection.isPending ||
                                     deleteConnection.isPending

package/src/components/RenderedResult/ResultContainer.tsx

@@ -1,5 +1,5 @@
-import { ExpandLess, ExpandMore } from "@mui/icons-material";
-import { Box, IconButton } from "@mui/material";
+import { ExpandLess, ExpandMore, Warning } from "@mui/icons-material";
+import { Box, Button, IconButton, Typography } from "@mui/material";
 import {
    lazy,
    Suspense,
@@ -17,6 +17,10 @@ interface ResultContainerProps {
    minHeight: number;
    maxHeight: number;
    hideToggle?: boolean;
+   // if Results are larger than this size, show a warning and a button to proceed
+   // this is to prevent performance issues with large results.
+   // the default is 0, which means no warning will be shown.
+   maxResultSize?: number;
 }
 
 // ResultContainer is a component that renders a result, with a toggle button to expand/collapse the result.
@@ -28,6 +32,7 @@ export default function ResultContainer({
    minHeight,
    maxHeight,
    hideToggle = false,
+   maxResultSize = 0,
 }: ResultContainerProps) {
    const [isExpanded, setIsExpanded] = useState(false);
    const [contentHeight, setContentHeight] = useState<number>(0);
@@ -36,6 +41,7 @@ export default function ResultContainer({
    const containerRef = useRef<HTMLDivElement>(null);
    const [explicitHeight, setExplicitHeight] = useState<number>(undefined);
    const [isFillElement, setIsFillElement] = useState(false);
+   const [userAcknowledged, setUserAcknowledged] = useState(false);
    const handleToggle = useCallback(() => {
       const wasExpanded = isExpanded;
       setIsExpanded(!isExpanded);
@@ -85,6 +91,42 @@ export default function ResultContainer({
    if (!result) {
       return null;
    }
+
+   // Check if result exceeds max size and user hasn't acknowledged yet
+   const exceedsMaxSize = maxResultSize > 0 && result.length > maxResultSize;
+   if (exceedsMaxSize && !userAcknowledged) {
+      return (
+         <Box
+            sx={{
+               minHeight: `${minHeight}px`,
+               display: "flex",
+               flexDirection: "column",
+               alignItems: "center",
+               justifyContent: "center",
+               gap: 2,
+               p: 4,
+               backgroundColor: "#fafafa",
+               border: "1px solid",
+               borderColor: "#e0e0e0",
+               borderRadius: 1,
+            }}
+         >
+            <Warning sx={{ fontSize: 48, color: "#757575" }} />
+            <Typography variant="h6" color="text.secondary" align="center">
+               Processing large results may cause browser performance issues.
+               Proceed?
+            </Typography>
+            <Button
+               variant="contained"
+               color="primary"
+               onClick={() => setUserAcknowledged(true)}
+            >
+               Proceed
+            </Button>
+         </Box>
+      );
+   }
+
    const loading = <Loading text="Loading..." centered={true} size={32} />;
    const renderedHeight = isFillElement
       ? isExpanded