@malloy-publisher/sdk 0.0.145 → 0.0.147

package/package.json

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

package/src/components/Notebook/Notebook.tsx

@@ -363,7 +363,7 @@ export default function Notebook({
                      elevation={0}
                      sx={{
                         p: 3,
-                        backgroundColor: "#f8f9fa",
+                        backgroundColor: "#ffffff",
                         border: "1px solid #e0e0e0",
                         borderRadius: 2,
                      }}

package/src/components/Notebook/NotebookCell.tsx

@@ -67,6 +67,14 @@ export function NotebookCell({
    const IMPORT_MODEL_PATH_REGEX =
       /import\s*(?:\{[^}]*\}\s*from\s*)?['"`]([^'"`]+)['"`]/;
 
+   // Filter out lines starting with ## from Malloy code
+   const filterMalloyCode = (code: string): string => {
+      return code
+         .split("\n")
+         .filter((line) => !line.trimStart().startsWith("##"))
+         .join("\n");
+   };
+
    const hasValidImport =
       !!cell.text &&
       (IMPORT_NAMES_REGEX.test(cell.text) ||
@@ -124,7 +132,7 @@ export function NotebookCell({
 
    useEffect(() => {
       if (cell.type === "code")
-         highlight(cell.text, "malloy").then((code) => {
+         highlight(filterMalloyCode(cell.text), "malloy").then((code) => {
             setHighlightedMalloyCode(code);
          });
    }, [cell]);
@@ -214,7 +222,7 @@ export function NotebookCell({
                   sx={{
                      flexDirection: "column",
                      gap: "8px",
-                     marginBottom: "16px",
+                     marginBottom: "2px",
                   }}
                >
                   {cell.newSources && cell.newSources.length > 0 && (
@@ -433,8 +441,8 @@ export function NotebookCell({
                   >
                      <ResultContainer
                         result={cell.result}
-                        minHeight={300}
-                        maxHeight={1000}
+                        minHeight={200}
+                        maxHeight={700}
                         maxResultSize={maxResultSize}
                      />
                   </Box>

package/src/components/RenderedResult/RenderedResult.tsx

@@ -1,10 +1,4 @@
-import React, {
-   Suspense,
-   useEffect,
-   useLayoutEffect,
-   useRef,
-   useState,
-} from "react";
+import React, { Suspense, useLayoutEffect, useRef } from "react";
 
 type MalloyRenderElement = HTMLElement & Record<string, unknown>;
 
@@ -45,31 +39,14 @@ const createRenderer = async (onDrill?: (element: unknown) => void) => {
    return renderer.createViz();
 };
 
-function RenderResultSimple({ result, onDrill }: RenderedResultProps) {
-   const ref = useRef<HTMLDivElement>(null);
-
-   useLayoutEffect(() => {
-      if (!ref.current || !result) return;
-      const element = ref.current;
-
-      createRenderer(onDrill).then((viz) => {
-         viz.setResult(JSON.parse(result));
-         viz.render(element);
-      });
-   }, [result, onDrill]);
-
-   return <div ref={ref} style={{ width: "100%", height: "100%" }} />;
-}
 // Inner component that actually renders the visualization
 function RenderedResultInner({
    result,
    height,
-   isFillElement,
-   onSizeChange,
    onDrill,
+   onSizeChange,
 }: RenderedResultProps) {
    const ref = useRef<HTMLDivElement>(null);
-   const [isRendered, setIsRendered] = useState(false);
 
    // Render the visualization once the component mounts
    useLayoutEffect(() => {
@@ -83,37 +60,44 @@ function RenderedResultInner({
          element.removeChild(element.firstChild);
       }
 
+      // 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;
+
+         // 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 =
+            grandchild.scrollHeight || grandchild.offsetHeight || 0;
+
+         if (renderedHeight > 0 && onSizeChange) {
+            onSizeChange(renderedHeight);
+         }
+      };
+
       createRenderer(onDrill)
          .then((viz) => {
             if (!isMounted) return;
 
-            // Set up a mutation observer to detect when content is added
-            const observer = new MutationObserver((mutations) => {
-               for (const mutation of mutations) {
-                  if (
-                     mutation.type === "childList" &&
-                     mutation.addedNodes.length > 0
-                  ) {
-                     const hasContent = Array.from(mutation.addedNodes).some(
-                        (node) => node.nodeType === Node.ELEMENT_NODE,
-                     );
-                     if (hasContent) {
-                        observer.disconnect();
-                        setTimeout(() => {
-                           if (isMounted) {
-                              setIsRendered(true);
-                           }
-                        }, 50);
-                        break;
-                     }
-                  }
-               }
+            // Set up mutation observer to detect when rendering is complete
+            observer = new MutationObserver(() => {
+               // Debounce - wait for mutations to settle
+               if (measureTimeout) clearTimeout(measureTimeout);
+               measureTimeout = setTimeout(() => {
+                  measureRenderedSize();
+                  // Disconnect after measuring to prevent infinite loops
+                  observer?.disconnect();
+               }, 100);
             });
 
             observer.observe(element, {
                childList: true,
                subtree: true,
-               characterData: true,
+               attributes: true,
             });
 
             try {
@@ -121,71 +105,21 @@ function RenderedResultInner({
                viz.render(element);
             } catch (error) {
                console.error("Error rendering visualization:", error);
-               observer.disconnect();
-               if (isMounted) {
-                  setIsRendered(true);
-               }
+               observer?.disconnect();
             }
          })
          .catch((error) => {
             console.error("Failed to create renderer:", error);
-            if (isMounted) {
-               setIsRendered(true);
-            }
          });
 
       return () => {
          isMounted = false;
-      };
-   }, [result, onDrill]);
-
-   // Set up size measurement using scrollHeight instead of ResizeObserver
-   useEffect(() => {
-      if (!ref.current || !isRendered) return;
-      const element = ref.current;
-
-      // Function to measure and report size
-      const measureSize = () => {
-         if (element) {
-            const measuredHeight = element.offsetHeight;
-            if (measuredHeight > 0) {
-               if (onSizeChange) {
-                  onSizeChange(measuredHeight);
-               }
-            } else if (isFillElement && element.firstChild) {
-               // HACK- we If there's a child and it's height is 0, then we're in a fill element
-               // We use the callback `isFillElement` to notify the parent that we're in a fill element
-               // the parent should then set height for this element, otherwise it will have size 0.
-               const child = element.firstChild as HTMLElement;
-               const childHeight = child.offsetHeight;
-               if (childHeight == 0) {
-                  isFillElement(true);
-               } else {
-                  isFillElement(false);
-               }
-            }
-         }
-      };
-
-      // Initial measurement after a brief delay to let content render
-      const timeoutId = setTimeout(measureSize, 100);
-
-      let observer: MutationObserver | null = null;
-      // Also measure when the malloy result changes
-      observer = new MutationObserver(measureSize);
-      observer.observe(element, {
-         childList: true,
-         subtree: true,
-         attributes: true,
-      });
-
-      // Cleanup
-      return () => {
-         clearTimeout(timeoutId);
          observer?.disconnect();
+         if (measureTimeout) clearTimeout(measureTimeout);
       };
-   }, [onSizeChange, result, isFillElement, isRendered]);
+   }, [result, onDrill, onSizeChange]);
 
+   // Always use fixed height - no measurement, no resizing
    return (
       <div
          ref={ref}
@@ -234,11 +168,7 @@ export default function RenderedResult(props: RenderedResultProps) {
             </div>
          }
       >
-         {props.onSizeChange ? (
-            <RenderedResultInner {...props} />
-         ) : (
-            <RenderResultSimple {...props} />
-         )}
+         <RenderedResultInner {...props} />
       </Suspense>
    );
 }

package/src/components/RenderedResult/ResultContainer.tsx

@@ -1,13 +1,6 @@
-import { ExpandLess, ExpandMore, Warning } from "@mui/icons-material";
-import { Box, Button, IconButton, Typography } from "@mui/material";
-import {
-   lazy,
-   Suspense,
-   useCallback,
-   useEffect,
-   useRef,
-   useState,
-} from "react";
+import { Warning } from "@mui/icons-material";
+import { Box, Button, Typography } from "@mui/material";
+import { lazy, Suspense, useRef, useState } from "react";
 import { Loading } from "../Loading";
 
 const RenderedResult = lazy(() => import("../RenderedResult/RenderedResult"));
@@ -31,62 +24,12 @@ export default function ResultContainer({
    result,
    minHeight,
    maxHeight,
-   hideToggle = false,
+   hideToggle: _hideToggle = false,
    maxResultSize = 0,
 }: ResultContainerProps) {
-   const [isExpanded, setIsExpanded] = useState(false);
-   const [contentHeight, setContentHeight] = useState<number>(0);
-   const [shouldShowToggle, setShouldShowToggle] = useState(false);
-   const contentRef = useRef<HTMLDivElement>(null);
    const containerRef = useRef<HTMLDivElement>(null);
-   const [explicitHeight, setExplicitHeight] = useState<number>(undefined);
-   const [isFillElement, setIsFillElement] = useState(false);
+   const [measuredHeight, setMeasuredHeight] = useState(maxHeight);
    const [userAcknowledged, setUserAcknowledged] = useState(false);
-   const handleToggle = useCallback(() => {
-      const wasExpanded = isExpanded;
-      setIsExpanded(!isExpanded);
-
-      // If we're collapsing (going from expanded to collapsed), scroll to top
-      if (wasExpanded && containerRef.current) {
-         setTimeout(() => {
-            containerRef.current?.scrollIntoView({
-               behavior: "smooth",
-               block: "start",
-            });
-         }, 100); // Small delay to allow the collapse animation to start
-      }
-   }, [isExpanded]);
-
-   // Handle size changes from RenderedResult
-   const handleSizeChange = useCallback((height: number) => {
-      setContentHeight(height);
-   }, []);
-
-   // Determine if toggle should be shown based on content height vs container height
-   useEffect(() => {
-      if (hideToggle) {
-         setShouldShowToggle(false);
-         return;
-      }
-      if (isFillElement) {
-         setShouldShowToggle(true);
-         return;
-      }
-      // Only proceed if we have a measured content height
-      if (contentHeight === 0) {
-         setShouldShowToggle(false);
-         return;
-      }
-
-      // The available height should be the minHeight minus the padding
-      // We don't subtract toggle button height here since we're deciding whether to show it
-      const availableHeight = minHeight - 20; // Estimate padding
-      const exceedsHeight = contentHeight > availableHeight;
-      if (contentHeight < availableHeight) {
-         setExplicitHeight(contentHeight + 20);
-      }
-      setShouldShowToggle(exceedsHeight);
-   }, [contentHeight, isFillElement, minHeight, hideToggle]);
 
    if (!result) {
       return null;
@@ -128,98 +71,29 @@ export default function ResultContainer({
    }
 
    const loading = <Loading text="Loading..." centered={true} size={32} />;
-   const renderedHeight = isFillElement
-      ? isExpanded
-         ? maxHeight - 40
-         : minHeight - 40
-      : undefined;
-   const height = explicitHeight
-      ? {
-           minHeight: `${explicitHeight}px`,
-           height: `100%`,
-        }
-      : { height: `100%` };
-   return (
-      <>
-         <Box
-            ref={containerRef}
-            sx={{
-               position: "relative",
-               minHeight: `${minHeight}px`,
-               maxHeight: `${isExpanded ? maxHeight : minHeight}px`,
-               border: "0px",
-               borderRadius: 0,
-               overflow: "hidden",
-               display: "flex",
-               flexDirection: "column",
-               ...height,
-            }}
-         >
-            {/* Content area */}
-            <Box
-               ref={contentRef}
-               sx={{
-                  flex: 1,
-                  overflow: "hidden",
-                  p: 0,
-                  // Adjust bottom padding when toggle is shown to prevent content overlap
-                  pb: shouldShowToggle ? "40px" : 1,
-               }}
-            >
-               {(result && (
-                  <Suspense fallback={loading}>
-                     <RenderedResult
-                        result={result}
-                        height={renderedHeight}
-                        isFillElement={(isFill) => {
-                           setIsFillElement(isFill);
-                        }}
-                        onSizeChange={handleSizeChange}
-                     />
-                  </Suspense>
-               )) ||
-                  loading}
-            </Box>
+   // Fixed height for content - no resizing
+   const renderedHeight = Math.min(maxHeight, measuredHeight);
 
-            {/* Toggle button - only show if content exceeds container height */}
-            {shouldShowToggle && (
-               <Box
-                  sx={{
-                     position: "absolute",
-                     bottom: 0,
-                     left: 0,
-                     right: 0,
-                     height: "32px",
-                     backgroundColor: "rgba(255,255,255,0.75)",
-                     display: "flex",
-                     alignItems: "center",
-                     justifyContent: "center",
-                  }}
-               >
-                  <IconButton
-                     size="small"
-                     onClick={handleToggle}
-                     sx={{
-                        color: "text.secondary",
-                        "&:hover": {
-                           backgroundColor: "rgba(0, 0, 0, 0.04)",
-                        },
-                     }}
-                     title={
-                        isExpanded
-                           ? "Collapse to original size"
-                           : "Expand to full size"
-                     }
-                  >
-                     {isExpanded ? (
-                        <ExpandLess sx={{ fontSize: 30 }} />
-                     ) : (
-                        <ExpandMore sx={{ fontSize: 30 }} />
-                     )}
-                  </IconButton>
-               </Box>
-            )}
-         </Box>
-      </>
+   return (
+      <Box
+         ref={containerRef}
+         sx={{
+            position: "relative",
+            height: `${renderedHeight}px`,
+            border: "0px",
+            borderRadius: 0,
+            overflow: "hidden",
+         }}
+      >
+         {result && (
+            <Suspense fallback={loading}>
+               <RenderedResult
+                  result={result}
+                  height={renderedHeight}
+                  onSizeChange={setMeasuredHeight}
+               />
+            </Suspense>
+         )}
+      </Box>
    );
 }

package/src/components/filter/DimensionFilter.tsx

@@ -187,7 +187,7 @@ export function DimensionFilter({
                setRetrievalSearched(true);
             }
          }
-      }, 300);
+      }, 500);
 
       // Cleanup: cancel timer on unmount or when dependencies change
       return () => {
@@ -311,11 +311,41 @@ export function DimensionFilter({
    };
 
    return (
-      <Box sx={{ display: "flex", flexDirection: "column", gap: 2 }}>
-         {/* Dimension Name */}
-         <Box sx={{ fontWeight: 600, fontSize: "0.875rem" }}>
-            {spec.dimensionName}
-         </Box>
+      <Box
+         sx={{
+            display: "flex",
+            flexDirection: "column",
+            gap: 1.5,
+            fontSize: "0.75rem", // 25% smaller than default
+            "& .MuiInputBase-root": { fontSize: "0.75rem" },
+            "& .MuiInputBase-input": { padding: "6px 10px" },
+            "& .MuiSelect-select": { padding: "6px 10px !important" },
+            "& .MuiAutocomplete-input": { padding: "3px 6px !important" },
+            "& .MuiAutocomplete-root .MuiInputBase-root": {
+               padding: "3px 6px",
+            },
+            "& .MuiChip-root": { height: "20px" },
+            "& .MuiChip-label": { fontSize: "0.7rem", padding: "0 6px" },
+            "& .MuiInputLabel-root": {
+               fontSize: "0.75rem",
+               transform: "translate(10px, 6px) scale(1)",
+            },
+            "& .MuiInputLabel-shrink": {
+               fontSize: "0.85rem",
+               transform: "translate(14px, -9px) scale(0.75)",
+            },
+            "& .MuiOutlinedInput-notchedOutline legend": {
+               fontSize: "0.65rem",
+            },
+            "& .MuiFormHelperText-root": {
+               fontSize: "0.65rem",
+               marginTop: "2px",
+            },
+            "& .MuiSvgIcon-root": { fontSize: "1.25rem" },
+         }}
+      >
+         {/* Dimension Label/Name */}
+         <Box sx={{ fontWeight: 600 }}>{spec.label ?? spec.dimensionName}</Box>
 
          {/* Match Type Selector */}
          {spec.filterType !== "Boolean" && (
@@ -325,6 +355,18 @@ export function DimensionFilter({
                   value={matchType}
                   label="Match Type"
                   onChange={handleMatchTypeChange}
+                  disabled={availableMatchTypes.length === 1}
+                  MenuProps={{
+                     PaperProps: {
+                        sx: {
+                           "& .MuiMenuItem-root": {
+                              fontSize: "0.75rem",
+                              minHeight: "auto",
+                              padding: "4px 10px",
+                           },
+                        },
+                     },
+                  }}
                >
                   {availableMatchTypes.map((type) => (
                      <MenuItem key={type} value={type}>
@@ -383,6 +425,17 @@ export function DimensionFilter({
                   />
                )}
                freeSolo={!spec.values || spec.values.length === 0}
+               slotProps={{
+                  paper: {
+                     sx: {
+                        "& .MuiAutocomplete-option": {
+                           fontSize: "0.75rem",
+                           minHeight: "auto",
+                           padding: "4px 10px",
+                        },
+                     },
+                  },
+               }}
             />
          )}
 
@@ -411,6 +464,17 @@ export function DimensionFilter({
                      else if (val === "false") handleValueChange(false);
                      else handleClear();
                   }}
+                  MenuProps={{
+                     PaperProps: {
+                        sx: {
+                           "& .MuiMenuItem-root": {
+                              fontSize: "0.75rem",
+                              minHeight: "auto",
+                              padding: "4px 10px",
+                           },
+                        },
+                     },
+                  }}
                >
                   <MenuItem value="">
                      <em>Blank</em>
@@ -508,6 +572,17 @@ export function DimensionFilter({
                   )}
                   freeSolo
                   filterOptions={(x) => x}
+                  slotProps={{
+                     paper: {
+                        sx: {
+                           "& .MuiAutocomplete-option": {
+                              fontSize: "0.75rem",
+                              minHeight: "auto",
+                              padding: "4px 10px",
+                           },
+                        },
+                     },
+                  }}
                />
             )}
 

package/src/components/filter/utils.ts

@@ -109,6 +109,19 @@ export function parseDimensionFilterAnnotation(
    return null;
 }
 
+/**
+ * Parse # label="..." annotation from a dimension annotation string
+ * Returns the label value or null if not found
+ */
+export function parseLabelAnnotation(annotation: string): string | null {
+   // Match # label="..." pattern (with optional spaces around the equals sign)
+   const match = annotation.match(/^#\s*label\s*=\s*"([^"]+)"/);
+   if (match) {
+      return match[1];
+   }
+   return null;
+}
+
 /**
  * Parse all source infos from notebook cells and create a map of source_name -> SourceInfo
  * Also returns the model path from the first import statement found
@@ -206,20 +219,27 @@ export function extractDimensionSpecs(
          continue;
       }
 
-      // Check for #(filter) annotation
+      // Check for #(filter) annotation and # label="..." annotation
       let filterType: FilterType = "Star"; // Default
+      let label: string | undefined = undefined;
 
       // Check annotations on the field (dimension/measure fields have annotations)
       if ("annotations" in field && field.annotations) {
          for (const annotation of field.annotations) {
             // Annotation type has a 'value' property
             if (annotation.value) {
+               // Check for filter type annotation
                const filterAnn = parseDimensionFilterAnnotation(
                   annotation.value,
                );
                if (filterAnn) {
                   filterType = filterAnn.type;
-                  break;
+               }
+
+               // Check for label annotation
+               const labelValue = parseLabelAnnotation(annotation.value);
+               if (labelValue) {
+                  label = labelValue;
                }
             }
          }
@@ -230,6 +250,7 @@ export function extractDimensionSpecs(
          model: modelPath,
          dimensionName: dimension,
          filterType,
+         label,
       });
    }
 

package/src/components/styles.ts

@@ -55,7 +55,8 @@ export const CleanNotebookCell = styled("div")({
 
 export const CleanMetricCard = styled("div")({
    backgroundColor: "#ffffff",
-   padding: "24px",
+   paddingTop: "12px",
+   paddingBottom: "2px",
    borderRadius: "8px",
    border: "1px solid #f0f0f0",
    boxShadow: "0 1px 3px rgba(0, 0, 0, 0.04)",

package/src/hooks/useDimensionalFilterRangeData.ts

@@ -26,6 +26,8 @@ export interface DimensionSpec {
    source: string;
    /** Model path */
    model: string;
+   /** Label to display in the UI (derived from # label="..." annotation) */
+   label?: string;
    /** Minimum similarity score for Retrieval filter type (default: 0.1) */
    minSimilarityScore?: number;
    /** Optional list of static values to use for the dropdown instead of querying */