@malloy-publisher/sdk 0.0.147 → 0.0.149

package/package.json

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

package/src/components/Model/ModelCell.tsx

@@ -175,9 +175,7 @@ export function ModelCell({
                queryData?.data?.result && (
                   <ResultContainer
                      result={queryData.data.result}
-                     minHeight={300}
                      maxHeight={600}
-                     hideToggle={false}
                      maxResultSize={maxResultSize}
                   />
                )}

package/src/components/Notebook/NotebookCell.tsx

@@ -441,27 +441,11 @@ export function NotebookCell({
                   >
                      <ResultContainer
                         result={cell.result}
-                        minHeight={200}
                         maxHeight={700}
                         maxResultSize={maxResultSize}
                      />
                   </Box>
 
-                  {/* Fade effect at bottom to indicate more content */}
-                  <Box
-                     sx={{
-                        position: "absolute",
-                        bottom: 0,
-                        left: 0,
-                        right: 0,
-                        height: "40px",
-                        background:
-                           "linear-gradient(transparent, rgba(255, 255, 255, 0.9))",
-                        pointerEvents: "none",
-                        zIndex: 1,
-                     }}
-                  />
-
                   {/* Top right corner controls */}
                   <Stack
                      sx={{

package/src/components/RenderedResult/RenderedResult.tsx

@@ -42,11 +42,12 @@ const createRenderer = async (onDrill?: (element: unknown) => void) => {
 // Inner component that actually renders the visualization
 function RenderedResultInner({
    result,
-   height,
+   height: inputHeight,
    onDrill,
    onSizeChange,
 }: RenderedResultProps) {
    const ref = useRef<HTMLDivElement>(null);
+   const hasMeasuredRef = useRef(false);
 
    // Render the visualization once the component mounts
    useLayoutEffect(() => {
@@ -60,22 +61,41 @@ function RenderedResultInner({
          element.removeChild(element.firstChild);
       }
 
+      // Reset measurement flag when result changes
+      hasMeasuredRef.current = false;
+
       // Set up observer to measure size after render completes
       let observer: MutationObserver | null = null;
       let measureTimeout: NodeJS.Timeout | null = null;
 
       const measureRenderedSize = () => {
-         if (!isMounted || !element.firstElementChild) return;
-
+         // Skip if already measured or unmounted
+         if (hasMeasuredRef.current || !isMounted || !element.firstElementChild)
+            return;
          // It's the grandchild that is the actual visualization.
          const child = element.firstElementChild as HTMLElement;
          const grandchild = child.firstElementChild as HTMLElement;
          if (!grandchild) return;
-         const renderedHeight =
+         const greatgrandchild = grandchild.firstElementChild as HTMLElement;
+         let renderedHeight =
             grandchild.scrollHeight || grandchild.offsetHeight || 0;
 
-         if (renderedHeight > 0 && onSizeChange) {
-            onSizeChange(renderedHeight);
+         // HACK - malloy dashboards height are determined by the greatgrandchild.
+         if (
+            greatgrandchild &&
+            grandchild.classList.contains("malloy-dashboard")
+         ) {
+            renderedHeight =
+               greatgrandchild.scrollHeight ||
+               greatgrandchild.offsetHeight ||
+               0;
+         }
+
+         if (renderedHeight > 0) {
+            hasMeasuredRef.current = true;
+            if (onSizeChange) {
+               onSizeChange(renderedHeight);
+            }
          }
       };
 
@@ -119,13 +139,13 @@ function RenderedResultInner({
       };
    }, [result, onDrill, onSizeChange]);
 
-   // Always use fixed height - no measurement, no resizing
+   // Malloy renderer requires explicit pixel height to render visualizations
    return (
       <div
          ref={ref}
          style={{
             width: "100%",
-            height: height ? `${height}px` : "100%",
+            height: inputHeight ? `${inputHeight}px` : "400px",
          }}
       />
    );

package/src/components/RenderedResult/ResultContainer.tsx

@@ -7,9 +7,7 @@ const RenderedResult = lazy(() => import("../RenderedResult/RenderedResult"));
 
 interface ResultContainerProps {
    result: string | undefined;
-   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.
@@ -22,9 +20,7 @@ interface ResultContainerProps {
 // Non-fill elements that are smaller than minHeight will be shrunk down to their natural height.
 export default function ResultContainer({
    result,
-   minHeight,
    maxHeight,
-   hideToggle: _hideToggle = false,
    maxResultSize = 0,
 }: ResultContainerProps) {
    const containerRef = useRef<HTMLDivElement>(null);
@@ -41,7 +37,7 @@ export default function ResultContainer({
       return (
          <Box
             sx={{
-               minHeight: `${minHeight}px`,
+               // minHeight: `${minHeight}px`,
                display: "flex",
                flexDirection: "column",
                alignItems: "center",
@@ -79,7 +75,7 @@ export default function ResultContainer({
          ref={containerRef}
          sx={{
             position: "relative",
-            height: `${renderedHeight}px`,
+            height: "auto",
             border: "0px",
             borderRadius: 0,
             overflow: "hidden",

package/src/components/ResultsDialog.tsx

@@ -1,6 +1,5 @@
-import React from "react";
-import { Dialog, DialogContent, DialogTitle, IconButton } from "@mui/material";
 import CloseIcon from "@mui/icons-material/Close";
+import { Dialog, DialogContent, DialogTitle, IconButton } from "@mui/material";
 import ResultContainer from "./RenderedResult/ResultContainer";
 
 interface ResultsDialogProps {
@@ -51,9 +50,8 @@ export default function ResultsDialog({
          >
             <ResultContainer
                result={result}
-               minHeight={800}
                maxHeight={800}
-               hideToggle={true}
+               maxResultSize={1000000}
             />
          </DialogContent>
       </Dialog>

package/src/components/Workbook/MutableCell.tsx

@@ -24,10 +24,10 @@ import {
    QueryExplorerResult,
    SourceAndPath,
 } from "../Model/SourcesExplorer";
-import { WorkbookCellValue } from "./WorkbookManager";
 import ResultContainer from "../RenderedResult/ResultContainer";
 import { StyledCard } from "../styles";
 import { EditableMalloyCell } from "./EditableMalloyCell";
+import { WorkbookCellValue } from "./WorkbookManager";
 
 interface NotebookCellProps {
    cell: WorkbookCellValue;
@@ -423,11 +423,7 @@ export function MutableCell({
                   ))}
                {!editingMalloy && cell.result && (
                   <StyledCard variant="outlined" sx={{ borderRadius: 0 }}>
-                     <ResultContainer
-                        result={cell.result}
-                        minHeight={300}
-                        maxHeight={800}
-                     />
+                     <ResultContainer result={cell.result} maxHeight={800} />
                   </StyledCard>
                )}
                {!editingMalloy && !cell.result && (

package/src/components/filter/DimensionFilter.tsx

@@ -320,12 +320,20 @@ export function DimensionFilter({
             "& .MuiInputBase-root": { fontSize: "0.75rem" },
             "& .MuiInputBase-input": { padding: "6px 10px" },
             "& .MuiSelect-select": { padding: "6px 10px !important" },
-            "& .MuiAutocomplete-input": { padding: "3px 6px !important" },
+            "& .MuiAutocomplete-input": { padding: "0 !important" },
             "& .MuiAutocomplete-root .MuiInputBase-root": {
-               padding: "3px 6px",
+               padding: "5px 10px",
+               minHeight: "29.5px",
+               maxHeight: "29.5px",
+               boxSizing: "border-box",
+               overflow: "hidden",
             },
-            "& .MuiChip-root": { height: "20px" },
+            "& .MuiChip-root": { height: "16px", margin: "0 2px 0 0" },
             "& .MuiChip-label": { fontSize: "0.7rem", padding: "0 6px" },
+            "& .MuiChip-deleteIcon": {
+               fontSize: "14px",
+               margin: "0 2px 0 -4px",
+            },
             "& .MuiInputLabel-root": {
                fontSize: "0.75rem",
                transform: "translate(10px, 6px) scale(1)",
@@ -420,6 +428,7 @@ export function DimensionFilter({
                renderInput={(params) => (
                   <TextField
                      {...params}
+                     size="small"
                      label="Values"
                      placeholder="Select values..."
                   />
@@ -542,6 +551,7 @@ export function DimensionFilter({
                   renderInput={(params) => (
                      <TextField
                         {...params}
+                        size="small"
                         label="Search Values"
                         placeholder="Type to search..."
                         onFocus={() => setRetrievalFocused(true)}

package/src/components/styles.ts

@@ -23,7 +23,7 @@ export const StyledCardMedia = styled(CardMedia)({
 // New clean notebook styles
 export const CleanNotebookContainer = styled("div")({
    backgroundColor: "#ffffff",
-   padding: "0 32px 32px 32px",
+   padding: "0 8px 0px 8px",
    borderRadius: "12px",
    boxShadow: "none",
    border: "none",